@_tc/template-core 0.0.1-bate.9 → 0.0.2

package/fe/packages/ui/react/components/{table.d.ts → table/table.d.ts}

@@ -1,6 +1,15 @@
 import * as React from 'react';
+type TableFixed = 'left' | 'right';
+type TableFixedCellProps = {
+    fixed?: TableFixed;
+    fixedOffset?: React.CSSProperties['left'];
+    fixedShadow?: boolean;
+    fixedZIndex?: React.CSSProperties['zIndex'];
+};
 declare const Table: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableElement> & {
     containerClassName?: string;
+    containerRef?: React.Ref<HTMLDivElement>;
+    onContainerScroll?: React.UIEventHandler<HTMLDivElement>;
 } & React.RefAttributes<HTMLTableElement>>;
 declare const TableHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
 declare const TableBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
@@ -8,10 +17,11 @@ declare const TableFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<
 declare const TableRow: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableRowElement> & React.RefAttributes<HTMLTableRowElement>>;
 declare const TableHead: React.ForwardRefExoticComponent<React.ThHTMLAttributes<HTMLTableCellElement> & {
     isAction?: boolean;
-} & React.RefAttributes<HTMLTableCellElement>>;
+} & TableFixedCellProps & React.RefAttributes<HTMLTableCellElement>>;
 declare const TableCell: React.ForwardRefExoticComponent<React.TdHTMLAttributes<HTMLTableCellElement> & {
     isAction?: boolean;
-} & React.RefAttributes<HTMLTableCellElement>>;
+} & TableFixedCellProps & React.RefAttributes<HTMLTableCellElement>>;
 declare const TableCaption: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableCaptionElement> & React.RefAttributes<HTMLTableCaptionElement>>;
 export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };
+export type { TableFixed };
 //# sourceMappingURL=table.d.ts.map

package/fe/packages/ui/react/components/table/table.js

@@ -0,0 +1,116 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../../lib/utils';
+import * as React from 'react';
+const fixedShadowClassNames = {
+    left: "data-[fixed-shadow=visible]:after:pointer-events-none data-[fixed-shadow=visible]:after:absolute data-[fixed-shadow=visible]:after:inset-y-0 data-[fixed-shadow=visible]:after:-right-[3px] data-[fixed-shadow=visible]:after:w-[3px] data-[fixed-shadow=visible]:after:bg-gradient-to-r data-[fixed-shadow=visible]:after:from-white/30 data-[fixed-shadow=visible]:after:via-white/8 data-[fixed-shadow=visible]:after:to-transparent data-[fixed-shadow=visible]:after:content-['']",
+    right: "data-[fixed-shadow=visible]:before:pointer-events-none data-[fixed-shadow=visible]:before:absolute data-[fixed-shadow=visible]:before:inset-y-0 data-[fixed-shadow=visible]:before:-left-[3px] data-[fixed-shadow=visible]:before:w-[3px] data-[fixed-shadow=visible]:before:bg-gradient-to-l data-[fixed-shadow=visible]:before:from-white/30 data-[fixed-shadow=visible]:before:via-white/8 data-[fixed-shadow=visible]:before:to-transparent data-[fixed-shadow=visible]:before:content-['']",
+};
+const getFixedCellStyle = ({ fixed, fixedOffset = 0, fixedZIndex = 1, style, }) => {
+    if (!fixed)
+        return style;
+    return {
+        position: 'sticky',
+        [fixed]: fixedOffset,
+        zIndex: fixedZIndex,
+        ...style,
+    };
+};
+const setRef = (ref, value) => {
+    if (typeof ref === 'function') {
+        ref(value);
+        return;
+    }
+    if (ref) {
+        ;
+        ref.current = value;
+    }
+};
+const getFixedPixelOffset = (cell, fixed) => {
+    const fixedOffset = Number.parseFloat(window.getComputedStyle(cell).getPropertyValue(fixed));
+    return Number.isFinite(fixedOffset) ? fixedOffset : 0;
+};
+const isFixedCellActive = (cell, fixed, containerRect) => {
+    const cellRect = cell.getBoundingClientRect();
+    const fixedOffset = getFixedPixelOffset(cell, fixed);
+    if (fixed === 'left') {
+        return cellRect.left <= containerRect.left + fixedOffset + 1;
+    }
+    return cellRect.right >= containerRect.right - fixedOffset - 1;
+};
+const updateFixedSideState = (row, fixed, containerRect, canShow) => {
+    if (!canShow)
+        return;
+    const cells = Array.from(row.querySelectorAll(`[data-tc-table-fixed="${fixed}"][data-tc-table-fixed-shadow="true"]`));
+    const activeCells = cells.filter((cell) => isFixedCellActive(cell, fixed, containerRect));
+    if (activeCells.length === 0)
+        return;
+    activeCells.forEach((cell) => {
+        cell.dataset.fixedActive = 'true';
+    });
+    const shadowCell = activeCells.reduce((current, cell) => {
+        const currentRect = current.getBoundingClientRect();
+        const cellRect = cell.getBoundingClientRect();
+        if (fixed === 'left') {
+            return cellRect.right > currentRect.right ? cell : current;
+        }
+        return cellRect.left < currentRect.left ? cell : current;
+    });
+    shadowCell.dataset.fixedShadow = 'visible';
+};
+const Table = React.forwardRef(({ className, containerClassName, containerRef, onContainerScroll, children, ...props }, ref) => {
+    const internalContainerRef = React.useRef(null);
+    const updateFixedShadowState = React.useCallback(() => {
+        const container = internalContainerRef.current;
+        if (!container)
+            return;
+        const scrollLeft = container.scrollLeft;
+        const maxScrollLeft = container.scrollWidth - container.clientWidth;
+        const containerRect = container.getBoundingClientRect();
+        container.querySelectorAll('[data-fixed-shadow="visible"], [data-fixed-active="true"]').forEach((cell) => {
+            delete cell.dataset.fixedShadow;
+            delete cell.dataset.fixedActive;
+        });
+        container.querySelectorAll('tr').forEach((row) => {
+            updateFixedSideState(row, 'left', containerRect, scrollLeft > 1);
+            updateFixedSideState(row, 'right', containerRect, maxScrollLeft - scrollLeft > 1);
+        });
+    }, []);
+    const handleContainerRef = React.useCallback((node) => {
+        internalContainerRef.current = node;
+        setRef(containerRef, node);
+    }, [containerRef]);
+    const handleContainerScroll = React.useCallback((event) => {
+        updateFixedShadowState();
+        onContainerScroll?.(event);
+    }, [onContainerScroll, updateFixedShadowState]);
+    React.useLayoutEffect(() => {
+        updateFixedShadowState();
+        const container = internalContainerRef.current;
+        if (!container || typeof ResizeObserver === 'undefined')
+            return;
+        const observer = new ResizeObserver(updateFixedShadowState);
+        observer.observe(container);
+        return () => observer.disconnect();
+    }, [children, updateFixedShadowState]);
+    return (_jsx("div", { ref: handleContainerRef, onScroll: handleContainerScroll, className: cn('tc-ui-table relative w-full overflow-auto rounded-[20px]', containerClassName), children: _jsx("table", { ref: ref, className: cn('w-full caption-bottom text-sm', className), ...props, children: children }) }));
+});
+Table.displayName = 'Table';
+const TableHeader = React.forwardRef(({ className, ...props }, ref) => _jsx("thead", { ref: ref, className: cn('tc-ui-table-header bg-table-header', className), ...props }));
+TableHeader.displayName = 'TableHeader';
+const TableBody = React.forwardRef(({ className, ...props }, ref) => (_jsx("tbody", { ref: ref, className: cn('tc-ui-table-body [&_tr:last-child]:border-0', className), ...props })));
+TableBody.displayName = 'TableBody';
+const TableFooter = React.forwardRef(({ className, ...props }, ref) => (_jsx("tfoot", { ref: ref, className: cn('tc-ui-table-footer border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', className), ...props })));
+TableFooter.displayName = 'TableFooter';
+const TableRow = React.forwardRef(({ className, ...props }, ref) => (_jsx("tr", { ref: ref, className: cn('tc-ui-table-row border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted', className), ...props })));
+TableRow.displayName = 'TableRow';
+const TableHead = React.forwardRef(({ className, isAction, fixed, fixedOffset, fixedShadow = true, fixedZIndex = 10, style, ...props }, ref) => {
+    return (_jsx("th", { ref: ref, "data-tc-table-fixed": fixed, "data-tc-table-fixed-shadow": fixed && fixedShadow ? 'true' : undefined, className: cn('tc-ui-table-head h-12 px-4 text-left align-middle text-xs font-normal', 'text-table-head-text', isAction && 'bg-table-header text-table-head-text w-[96px] text-center', fixed && 'data-[fixed-active=true]:bg-table-header', fixed && fixedShadow && fixedShadowClassNames[fixed], className), style: getFixedCellStyle({ fixed, fixedOffset, fixedZIndex, style }), ...props }));
+});
+TableHead.displayName = 'TableHead';
+const TableCell = React.forwardRef(({ className, isAction, fixed, fixedOffset, fixedShadow = true, fixedZIndex = 1, style, ...props }, ref) => {
+    return (_jsx("td", { ref: ref, "data-tc-table-fixed": fixed, "data-tc-table-fixed-shadow": fixed && fixedShadow ? 'true' : undefined, className: cn('tc-ui-table-cell p-4 align-middle text-sm font-normal', 'text-table-cell-text', isAction && 'text-table-action-text w-[96px] text-center', isAction && !fixed && 'bg-background', fixed && 'data-[fixed-active=true]:bg-background', fixed && fixedShadow && fixedShadowClassNames[fixed], className), style: getFixedCellStyle({ fixed, fixedOffset, fixedZIndex, style }), ...props }));
+});
+TableCell.displayName = 'TableCell';
+const TableCaption = React.forwardRef(({ className, ...props }, ref) => (_jsx("caption", { ref: ref, className: cn('tc-ui-table-caption mt-4 text-sm text-muted-foreground', className), ...props })));
+TableCaption.displayName = 'TableCaption';
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };

package/fe/packages/ui/react/components/testPage/MenuTestPage.d.ts

@@ -0,0 +1,2 @@
+export default function MenuTestPage(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MenuTestPage.d.ts.map

package/fe/packages/ui/react/components/testPage/MenuTestPage.js

@@ -0,0 +1,104 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { LayoutDashboard, Package, Settings, Users, FileText, BarChart3, ShoppingCart, Bell, HelpCircle, } from 'lucide-react';
+import { Menu } from '../Menu';
+// ─── 示例数据 ────────────────────────────────────────────────────────────────
+const menuItems = [
+    {
+        key: 'dashboard',
+        label: 'Dashboard',
+        icon: _jsx(LayoutDashboard, { className: "h-4 w-4" }),
+    },
+    {
+        key: 'products',
+        label: 'Products',
+        icon: _jsx(Package, { className: "h-4 w-4" }),
+        children: [
+            { key: 'products-list', label: 'All Products' },
+            { key: 'products-create', label: 'Create New' },
+            {
+                key: 'products-categories',
+                label: 'Categories',
+                children: [
+                    { key: 'cat-electronics', label: 'Electronics' },
+                    { key: 'cat-clothing', label: 'Clothing' },
+                ],
+            },
+        ],
+    },
+    {
+        key: 'settings',
+        label: 'Settings',
+        icon: _jsx(Settings, { className: "h-4 w-4" }),
+        children: [
+            { key: 'settings-profile', label: 'Profile' },
+            { key: 'settings-billing', label: 'Billing', danger: true },
+        ],
+    },
+];
+const topItems = [
+    { key: 'home', label: 'Home' },
+    {
+        key: 'services',
+        label: 'Services',
+        children: [
+            { key: 'consulting', label: 'Consulting' },
+            { key: 'development', label: 'Development' },
+        ],
+    },
+    { key: 'about', label: 'About' },
+];
+const iconMenuItems = [
+    { key: 'dashboard', label: 'Dashboard', icon: _jsx(LayoutDashboard, { className: "h-4 w-4" }) },
+    {
+        key: 'users',
+        label: 'Users',
+        icon: _jsx(Users, { className: "h-4 w-4" }),
+        children: [
+            { key: 'users-list', label: 'All Users', icon: _jsx(Users, { className: "h-4 w-4" }) },
+            { key: 'users-roles', label: 'Roles', icon: _jsx(FileText, { className: "h-4 w-4" }) },
+        ],
+    },
+    {
+        key: 'analytics',
+        label: 'Analytics',
+        icon: _jsx(BarChart3, { className: "h-4 w-4" }),
+        children: [
+            { key: 'analytics-overview', label: 'Overview' },
+            { key: 'analytics-reports', label: 'Reports' },
+        ],
+    },
+    { key: 'orders', label: 'Orders', icon: _jsx(ShoppingCart, { className: "h-4 w-4" }) },
+    { key: 'notifications', label: 'Notifications', icon: _jsx(Bell, { className: "h-4 w-4" }) },
+    { key: 'help', label: 'Help', icon: _jsx(HelpCircle, { className: "h-4 w-4" }) },
+];
+// ─── 区块包装 ────────────────────────────────────────────────────────────────
+function Section({ title, description, children }) {
+    return (_jsxs("section", { className: "space-y-3", children: [_jsxs("div", { children: [_jsx("h2", { className: "text-lg font-semibold", children: title }), description && _jsx("p", { className: "text-sm text-muted-foreground", children: description })] }), children] }));
+}
+// ─── 页面 ────────────────────────────────────────────────────────────────────
+export default function MenuTestPage() {
+    const [selectedKey, setSelectedKey] = useState('dashboard');
+    const [collapsed, setCollapsed] = useState(false);
+    const [collapsedKey, setCollapsedKey] = useState('dashboard');
+    const [accordionKey, setAccordionKey] = useState('dashboard');
+    const [topKey, setTopKey] = useState('home');
+    return (_jsxs("div", { className: "p-8 max-w-6xl mx-auto space-y-10", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-3xl font-bold mb-2", children: "Menu \u7EC4\u4EF6\u4F7F\u7528\u793A\u4F8B" }), _jsx("p", { className: "text-muted-foreground", children: "\u652F\u6301 top / left \u5E03\u5C40\u3001\u591A\u5C42\u5D4C\u5957\u3001\u56FE\u6807\u3001\u6298\u53E0\u7B49\u573A\u666F" })] }), _jsxs(Section, { title: "1. \u57FA\u7840 Left \u6A21\u5F0F (data config)", description: "\u6700\u5E38\u7528\u7684\u4FA7\u8FB9\u83DC\u5355\uFF0C\u652F\u6301\u591A\u7EA7\u5C55\u5F00 (expandMode=multiple)", children: [_jsx("div", { className: "w-56 border rounded-lg overflow-hidden", children: _jsx(Menu, { mode: "left", expandMode: "multiple", selectedKey: selectedKey, onSelect: setSelectedKey, items: menuItems }) }), _jsxs("p", { className: "text-sm text-muted-foreground", children: ["\u5F53\u524D\u9009\u4E2D: ", selectedKey] })] }), _jsx(Section, { title: "2. \u624B\u98CE\u7434\u5C55\u5F00 (accordion)", description: "\u540C\u4E00\u5C42\u7EA7\u540C\u65F6\u53EA\u80FD\u5C55\u5F00\u4E00\u4E2A\u5B50\u83DC\u5355", children: _jsx("div", { className: "w-56 border rounded-lg overflow-hidden", children: _jsx(Menu, { mode: "left", expandMode: "accordion", selectedKey: accordionKey, onSelect: setAccordionKey, items: menuItems }) }) }), _jsx(Section, { title: "3. \u6298\u53E0\u6A21\u5F0F (collapsed)", description: "\u6536\u8D77\u540E\u4EC5\u5C55\u793A\u56FE\u6807\uFF0Chover \u5F39\u51FA\u5B50\u83DC\u5355", children: _jsx("div", { className: "border rounded-lg overflow-hidden inline-flex", children: _jsx(Menu, { mode: "left", selectedKey: collapsedKey, onSelect: setCollapsedKey, collapsed: collapsed, onCollapse: setCollapsed, items: iconMenuItems }) }) }), _jsx(Section, { title: "4. JSX \u7EC4\u5408\u5F0F", description: "\u4E0D\u4F7F\u7528 data config\uFF0C\u76F4\u63A5\u7EC4\u5408 Menu.Item / Menu.SubMenu", children: _jsx("div", { className: "w-56 border rounded-lg overflow-hidden", children: _jsxs(Menu, { mode: "left", defaultSelectedKey: "overview", children: [_jsx(Menu.Item, { eventKey: "overview", icon: _jsx(LayoutDashboard, { className: "h-4 w-4" }), children: "Overview" }), _jsxs(Menu.SubMenu, { eventKey: "manage", label: "Manage", icon: _jsx(Package, { className: "h-4 w-4" }), children: [_jsx(Menu.Item, { eventKey: "manage-list", children: "List" }), _jsx(Menu.Item, { eventKey: "manage-edit", children: "Edit" })] }), _jsxs(Menu.SubMenu, { eventKey: "settings", label: "Settings", icon: _jsx(Settings, { className: "h-4 w-4" }), children: [_jsx(Menu.Item, { eventKey: "jsx-profile", children: "Profile" }), _jsx(Menu.Item, { eventKey: "jsx-billing", danger: true, children: "Billing" })] }), _jsx(Menu.Item, { eventKey: "help", icon: _jsx(HelpCircle, { className: "h-4 w-4" }), children: "Help" })] }) }) }), _jsx(Section, { title: "5. \u5B50\u83DC\u5355\u5F39\u51FA\u6A21\u5F0F (popup)", description: "\u5C55\u5F00\u72B6\u6001\u4E0B\u4E5F\u80FD\u8BA9\u5B50\u83DC\u5355\u4EE5\u5F39\u51FA\u65B9\u5F0F\u5C55\u793A", children: _jsx("div", { className: "w-56 border rounded-lg overflow-hidden", children: _jsx(Menu, { mode: "left", expandMode: "multiple", selectedKey: selectedKey, onSelect: setSelectedKey, items: [
+                            { key: 'd1', label: 'Dashboard', icon: _jsx(LayoutDashboard, { className: "h-4 w-4" }) },
+                            {
+                                key: 'p1',
+                                label: 'Products',
+                                icon: _jsx(Package, { className: "h-4 w-4" }),
+                                popup: true,
+                                children: [
+                                    { key: 'p1-list', label: 'All Products' },
+                                    { key: 'p1-create', label: 'Create New' },
+                                ],
+                            },
+                            { key: 'd3', label: 'Help', icon: _jsx(HelpCircle, { className: "h-4 w-4" }) },
+                        ] }) }) }), _jsxs(Section, { title: "6. Top \u6A21\u5F0F", description: "\u4E00\u7EA7\u83DC\u5355\u6C34\u5E73\u6392\u5217\uFF0C\u5B50\u83DC\u5355\u4E0B\u62C9\u5F39\u51FA", children: [_jsx("div", { className: "border rounded-lg w-full", children: _jsx(Menu, { mode: "top", selectedKey: topKey, onSelect: setTopKey, items: topItems, className: "border-b" }) }), _jsxs("p", { className: "text-sm text-muted-foreground", children: ["\u5F53\u524D\u9009\u4E2D: ", topKey] })] }), _jsx(Section, { title: "7. Click \u89E6\u53D1", description: "\u70B9\u51FB\u5C55\u5F00\u5B50\u83DC\u5355\uFF0C\u800C\u975E hover", children: _jsx("div", { className: "w-56 border rounded-lg overflow-hidden", children: _jsx(Menu, { mode: "left", expandTrigger: "click", expandMode: "multiple", selectedKey: selectedKey, onSelect: setSelectedKey, items: menuItems }) }) }), _jsx(Section, { title: "8. \u72B6\u6001\u5C55\u793A", description: "disabled / danger \u6837\u5F0F\u6F14\u793A", children: _jsx("div", { className: "w-56 border rounded-lg overflow-hidden", children: _jsxs(Menu, { mode: "left", defaultSelectedKey: "normal", children: [_jsx(Menu.Item, { eventKey: "normal", icon: _jsx(FileText, { className: "h-4 w-4" }), children: "\u6B63\u5E38\u83DC\u5355\u9879" }), _jsx(Menu.Item, { eventKey: "disabled-item", disabled: true, icon: _jsx(FileText, { className: "h-4 w-4" }), children: "\u7981\u7528\u83DC\u5355\u9879" }), _jsx(Menu.Item, { eventKey: "danger-item", danger: true, icon: _jsx(FileText, { className: "h-4 w-4" }), children: "\u5371\u9669\u83DC\u5355\u9879" }), _jsxs(Menu.SubMenu, { eventKey: "sub-disabled", label: "\u542B\u7981\u7528\u5B50\u9879", icon: _jsx(Settings, { className: "h-4 w-4" }), children: [_jsx(Menu.Item, { eventKey: "sub-normal", children: "\u6B63\u5E38\u5B50\u9879" }), _jsx(Menu.Item, { eventKey: "sub-danger", danger: true, children: "\u5371\u9669\u5B50\u9879" }), _jsx(Menu.Item, { eventKey: "sub-disabled-item", disabled: true, children: "\u7981\u7528\u5B50\u9879" })] })] }) }) }), _jsx(Section, { title: "9. \u65E0 icon \u6298\u53E0", description: "\u6536\u8D77\u65F6\u65E0 icon \u7684\u83DC\u5355\u9879\u7559\u767D\u5360\u4F4D", children: _jsx("div", { className: "border rounded-lg overflow-hidden inline-flex", children: _jsx(Menu, { mode: "left", defaultCollapsed: true, expandMode: "multiple", items: [
+                            { key: 'a', label: 'Home', icon: _jsx(LayoutDashboard, { className: "h-4 w-4" }) },
+                            { key: 'b', label: 'Reports' },
+                            { key: 'c', label: 'Settings', icon: _jsx(Settings, { className: "h-4 w-4" }) },
+                        ] }) }) })] }));
+}