@_tc/template-core 0.0.1 → 0.0.2

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" }) },
+                        ] }) }) })] }));
+}

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

@@ -0,0 +1,3 @@
+declare const TestPage: () => import("react/jsx-runtime").JSX.Element;
+export default TestPage;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,337 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Breadcrumb, BreadcrumbItem, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Checkbox, ConfirmDialog, DataTable, Drawer, Dropdown, Form, FormItem, ImageUpload, Input, InputNumber, Label, message, Modal, modal, Pagination, PreviewImage, SchemaForm, Search, Select, Skeleton, Switch, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, TableSearch, Textarea, Tooltip, TreeSelect, useForm, } from '../../components';
+import React, { useEffect, useRef, useState } from 'react';
+import DateTestPage from '../Date/DateTestPage';
+import MenuTestPage from './MenuTestPage';
+function ThemeSwitcher() {
+    const [mode, setMode] = useState('dark');
+    const [theme, setTheme] = useState('default');
+    useEffect(() => {
+        const root = document.documentElement;
+        const previousTheme = root.getAttribute('data-theme');
+        const previousDark = root.classList.contains('dark');
+        root.classList.toggle('dark', mode === 'dark');
+        if (theme === 'default') {
+            root.removeAttribute('data-theme');
+        }
+        else {
+            root.setAttribute('data-theme', theme);
+        }
+        return () => {
+            root.classList.toggle('dark', previousDark);
+            if (previousTheme) {
+                root.setAttribute('data-theme', previousTheme);
+            }
+            else {
+                root.removeAttribute('data-theme');
+            }
+        };
+    }, [mode, theme]);
+    return (_jsx(Section, { title: "Theme", children: _jsxs("div", { className: "flex w-full flex-wrap items-center gap-6 rounded-xl border border-border bg-background p-4", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-sm text-muted-foreground", children: "\u6A21\u5F0F" }), _jsx(Button, { variant: mode === 'light' ? 'primary' : 'default', size: "sm", onClick: () => setMode('light'), children: "Light" }), _jsx(Button, { variant: mode === 'dark' ? 'primary' : 'default', size: "sm", onClick: () => setMode('dark'), children: "Dark" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-sm text-muted-foreground", children: "\u4E3B\u9898" }), _jsx(Button, { variant: theme === 'default' ? 'primary' : 'default', size: "sm", onClick: () => setTheme('default'), children: "Default" }), _jsx(Button, { variant: theme === 'green' ? 'primary' : 'default', size: "sm", onClick: () => setTheme('green'), children: "Green" }), _jsx(Button, { variant: theme === 'gray' ? 'primary' : 'default', size: "sm", onClick: () => setTheme('gray'), children: "Gray" })] }), _jsxs("div", { className: "text-sm text-muted-foreground", children: ["\u5F53\u524D: ", mode, " / ", theme] })] }) }));
+}
+// ─── Section wrapper ────────────────────────────────────────────────────────
+function Section({ title, children }) {
+    return (_jsxs("div", { className: "mb-8", children: [_jsx("h2", { className: "text-lg font-semibold mb-3 border-b pb-1", children: title }), _jsx("div", { className: "flex flex-wrap gap-3 items-start", children: children })] }));
+}
+// ─── Button ─────────────────────────────────────────────────────────────────
+function ButtonDemo() {
+    const [loading, setLoading] = useState(false);
+    return (_jsxs(Section, { title: "Button", children: [_jsx(Button, { children: "default" }), _jsx(Button, { variant: "primary", children: "primary" }), _jsx(Button, { variant: "dashed", children: "dashed" }), _jsx(Button, { variant: "text", children: "text" }), _jsx(Button, { variant: "link", href: "#button", children: "link" }), _jsx(Button, { state: "danger", children: "danger" }), _jsx(Button, { variant: "primary", state: "danger", children: "primary danger" }), _jsx("div", { className: " bg-red-300 p-1.5", children: _jsx(Button, { state: "ghost", children: "ghost" }) }), _jsx(Button, { variant: "primary", state: "ghost", children: "primary ghost" }), _jsx(Button, { disabled: true, children: "disabled" }), _jsx(Button, { loading: loading, onClick: () => {
+                    setLoading(true);
+                    setTimeout(() => setLoading(false), 2000);
+                }, children: "loading (click)" }), _jsx(Button, { size: "sm", children: "sm" }), _jsx(Button, { size: "md", children: "md" }), _jsx(Button, { size: "lg", children: "lg" })] }));
+}
+// ─── Input ───────────────────────────────────────────────────────────────────
+function InputDemo() {
+    return (_jsxs(Section, { title: "Input", children: [_jsx(Input, { placeholder: "\u666E\u901A\u8F93\u5165\u6846" }), _jsx(Input, { type: "password", placeholder: "\u5BC6\u7801\u8F93\u5165\u6846" }), _jsx(Input, { disabled: true, placeholder: "\u7981\u7528\u72B6\u6001" })] }));
+}
+function InputNumberDemo() {
+    const [price, setPrice] = useState(12.5);
+    const [ratio, setRatio] = useState(0.25);
+    return (_jsxs(Section, { title: "InputNumber", children: [_jsx(InputNumber, { placeholder: "\u57FA\u7840\u6570\u5B57\u8F93\u5165", className: "w-48" }), _jsx(InputNumber, { value: price, onChange: setPrice, precision: 2, min: 0, max: 9999, placeholder: "\u4EF7\u683C", addonAfter: _jsx("span", { className: "text-xs text-muted-foreground", children: "CNY" }), className: "w-56" }), _jsx(InputNumber, { value: ratio, onChange: setRatio, precision: 2, step: 0.05, min: 0, max: 1, allowStep: true, placeholder: "\u6BD4\u4F8B", className: "w-48" }), _jsx(InputNumber, { defaultValue: 10, step: 0.5, precision: 1, allowStep: true, allowClear: true, className: "w-48" }), _jsx(InputNumber, { disabled: true, defaultValue: 88.8, precision: 1, className: "w-48" })] }));
+}
+// ─── Textarea ────────────────────────────────────────────────────────────────
+function TextareaDemo() {
+    const [val, setVal] = useState('');
+    return (_jsxs(Section, { title: "Textarea", children: [_jsx(Textarea, { placeholder: "\u8BF7\u8F93\u5165\u5185\u5BB9\uFF08\u6700\u591A 500 \u5B57\uFF09", value: val, onChange: (v) => setVal(v), className: "w-80" }), _jsx(Textarea, { placeholder: "\u4E0D\u663E\u793A\u8BA1\u6570", showCount: false, className: "w-80" })] }));
+}
+// ─── Select ──────────────────────────────────────────────────────────────────
+function SelectDemo() {
+    const [val, setVal] = useState(undefined);
+    const options = [
+        { label: '选项 A', value: 'a' },
+        { label: '选项 B', value: 'b' },
+        { label: '选项 C', value: 'c' },
+    ];
+    return (_jsxs(Section, { title: "Select", children: [_jsx(Select, { options: options, value: val, onChange: setVal, placeholder: "\u8BF7\u9009\u62E9", className: "w-40" }), _jsx(Select, { options: options, placeholder: "\u4E0D\u53EF\u641C\u7D22", searchable: false, className: "w-40" }), _jsx(Select, { options: options, placeholder: "\u4E0D\u53EF\u6E05\u9664", clearable: false, className: "w-40" }), _jsx(Select, { options: options, disabled: true, placeholder: "\u7981\u7528", className: "w-40" }), _jsxs("div", { className: "relative w-64 rounded-lg border border-border bg-muted/30 p-4", children: [_jsx("div", { className: "mb-2 text-sm text-muted-foreground", children: "parent popup container" }), _jsx(Select, { options: options, placeholder: "\u6302\u8F7D\u5230\u7236\u5143\u7D20", getPopupContainer: "parent", className: "w-full" })] })] }));
+}
+// ─── Checkbox ────────────────────────────────────────────────────────────────
+function CheckboxDemo() {
+    const [checked, setChecked] = useState(false);
+    return (_jsxs(Section, { title: "Checkbox", children: [_jsxs("label", { className: "flex items-center gap-2 cursor-pointer", children: [_jsx(Checkbox, { checked: checked, onChange: (c) => setChecked(c) }), _jsxs("span", { children: ["\u53D7\u63A7: ", checked ? '选中' : '未选中'] })] }), _jsxs("label", { className: "flex items-center gap-2 cursor-pointer", children: [_jsx(Checkbox, { defaultChecked: true }), _jsx("span", { children: "\u975E\u53D7\u63A7\u9ED8\u8BA4\u9009\u4E2D" })] }), _jsxs("label", { className: "flex items-center gap-2 cursor-pointer", children: [_jsx(Checkbox, { indeterminate: true }), _jsx("span", { children: "\u534A\u9009\u72B6\u6001" })] }), _jsxs("label", { className: "flex items-center gap-2 cursor-pointer", children: [_jsx(Checkbox, { disabled: true }), _jsx("span", { children: "\u7981\u7528" })] })] }));
+}
+// ─── Switch ──────────────────────────────────────────────────────────────────
+function SwitchDemo() {
+    const [on, setOn] = useState(false);
+    return (_jsxs(Section, { title: "Switch", children: [_jsx(Switch, { checked: on, onChange: setOn }), _jsx("span", { className: "self-center text-sm", children: on ? 'ON' : 'OFF' }), _jsx(Switch, { defaultChecked: true }), _jsx(Switch, { disabled: true }), _jsx(Switch, { disabled: true, checked: true })] }));
+}
+// ─── Tooltip ─────────────────────────────────────────────────────────────────
+function TooltipDemo() {
+    return (_jsx(Section, { title: "Tooltip", children: ['top', 'bottom', 'left', 'right'].map((p) => (_jsx(Tooltip, { content: `placement: ${p}`, placement: p, children: _jsx(Button, { children: p }) }, p))) }));
+}
+// ─── Dropdown ────────────────────────────────────────────────────────────────
+function DropdownDemo() {
+    const items = [
+        { key: 'edit', label: '编辑', onClick: () => console.log('edit') },
+        { key: 'copy', label: '复制', onClick: () => console.log('copy') },
+        { key: 'delete', label: '删除', danger: true, onClick: () => console.log('delete') },
+    ];
+    return (_jsxs(Section, { title: "Dropdown", children: [_jsx(Dropdown, { items: items, children: _jsx(Button, { children: "\u64CD\u4F5C \u25BE" }) }), _jsx(Dropdown, { items: items, placement: "bottom-start", children: _jsx(Button, { variant: "text", children: "bottom-start \u25BE" }) })] }));
+}
+// ─── Message ─────────────────────────────────────────────────────────────────
+function MessageDemo() {
+    return (_jsxs(Section, { title: "Message (imperative)", children: [_jsx(Button, { onClick: () => message.success('操作成功'), children: "success" }), _jsx(Button, { onClick: () => message.error('操作失败'), children: "error" }), _jsx(Button, { onClick: () => message.warning('警告信息'), children: "warning" }), _jsx(Button, { onClick: () => message.info('提示信息'), children: "info" }), _jsx(Button, { onClick: () => {
+                    const id = message.success('5秒后关闭', { duration: 5000 });
+                    setTimeout(() => message.close(id), 2000);
+                }, children: "\u63D0\u524D\u5173\u95ED" })] }));
+}
+// ─── Modal ───────────────────────────────────────────────────────────────────
+function ModalDemo() {
+    const [open, setOpen] = useState(false);
+    return (_jsxs(Section, { title: "Modal", children: [_jsx(Button, { onClick: () => setOpen(true), children: "JSX Modal" }), _jsx(Button, { onClick: () => modal.open({
+                    title: '命令式弹窗',
+                    content: _jsx("p", { children: "\u8FD9\u662F\u547D\u4EE4\u5F0F\u6253\u5F00\u7684\u5F39\u7A97\u5185\u5BB9\u3002" }),
+                }), children: "modal.open" }), _jsx(Button, { onClick: () => modal.confirm({
+                    title: '确认操作',
+                    content: '确定要执行此操作吗？',
+                    onOk: () => {
+                        message.success('已确认');
+                    },
+                    onCancel: () => {
+                        message.info('已取消');
+                    },
+                }), children: "modal.confirm" }), _jsxs(Modal, { open: open, onClose: () => setOpen(false), title: "JSX \u5F39\u7A97", children: [_jsx("p", { children: "\u8FD9\u662F\u4E00\u4E2A\u4F7F\u7528 JSX \u63A7\u5236\u7684\u5F39\u7A97\u3002" }), _jsx("div", { className: "mt-4 flex justify-end gap-2", children: _jsx(Button, { onClick: () => setOpen(false), children: "\u5173\u95ED" }) })] })] }));
+}
+// ─── Drawer ──────────────────────────────────────────────────────────────────
+function DrawerDemo() {
+    const [placement, setPlacement] = useState('right');
+    const [open, setOpen] = useState(false);
+    const openDrawer = (nextPlacement) => {
+        setPlacement(nextPlacement);
+        setOpen(true);
+    };
+    return (_jsxs(Section, { title: "Drawer", children: [_jsx(Button, { onClick: () => openDrawer('left'), children: "left" }), _jsx(Button, { onClick: () => openDrawer('right'), children: "right" }), _jsx(Button, { onClick: () => openDrawer('top'), children: "top" }), _jsx(Button, { onClick: () => openDrawer('bottom'), children: "bottom" }), _jsx(Button, { onClick: () => openDrawer('right'), variant: "primary", children: "\u6253\u5F00\u8BE6\u60C5" }), _jsx(Drawer, { open: open, onClose: () => setOpen(false), title: `Drawer ${placement}`, placement: placement, width: 420, height: 320, footer: _jsxs("div", { className: "flex justify-end gap-2", children: [_jsx(Button, { onClick: () => setOpen(false), children: "\u53D6\u6D88" }), _jsx(Button, { variant: "primary", onClick: () => {
+                                message.success('已保存');
+                                setOpen(false);
+                            }, children: "\u4FDD\u5B58" })] }), children: _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx("div", { className: "mb-1 text-sm font-medium text-foreground", children: "\u5916\u90E8 children" }), _jsx("p", { className: "text-sm leading-6 text-muted-foreground", children: "\u8FD9\u91CC\u7684\u5185\u5BB9\u5B8C\u5168\u7531\u8C03\u7528\u65B9\u5B9A\u4E49\uFF0C\u53EF\u4EE5\u653E\u8868\u5355\u3001\u5217\u8868\u3001\u8BE6\u60C5\u6216\u4EFB\u610F JSX\u3002" })] }), _jsxs("div", { className: "grid gap-3", children: [_jsx(Label, { label: "\u540D\u79F0", layout: "vertical", children: _jsx(Input, { placeholder: "\u8BF7\u8F93\u5165\u540D\u79F0" }) }), _jsx(Label, { label: "\u72B6\u6001", layout: "vertical", children: _jsx(Select, { placeholder: "\u8BF7\u9009\u62E9\u72B6\u6001", options: [
+                                            { label: '启用', value: 'enabled' },
+                                            { label: '停用', value: 'disabled' },
+                                        ] }) })] })] }) })] }));
+}
+// ─── ConfirmDialog ───────────────────────────────────────────────────────────
+function ConfirmDialogDemo() {
+    const [open, setOpen] = useState(false);
+    return (_jsxs(Section, { title: "ConfirmDialog", children: [_jsx(Button, { onClick: () => setOpen(true), children: "\u6253\u5F00\u786E\u8BA4\u6846" }), _jsx(ConfirmDialog, { open: open, title: "\u5220\u9664\u786E\u8BA4", content: "\u786E\u5B9A\u8981\u5220\u9664\u6B64\u6761\u6570\u636E\u5417\uFF1F\u6B64\u64CD\u4F5C\u4E0D\u53EF\u64A4\u9500\u3002", onOk: () => {
+                    message.success('已删除');
+                    setOpen(false);
+                }, onCancel: () => setOpen(false) })] }));
+}
+// ─── Pagination ───────────────────────────────────────────────────────────────
+function PaginationDemo() {
+    const [page, setPage] = useState(1);
+    const [pageSize, setPageSize] = useState(10);
+    return (_jsx(Section, { title: "Pagination", children: _jsxs("div", { className: "w-full", children: [_jsxs("p", { className: "text-sm mb-2", children: ["\u5F53\u524D\u9875: ", page, " / \u6BCF\u9875: ", pageSize] }), _jsx(Pagination, { current: page, pageSize: pageSize, total: 238, onChange: setPage, onPageSizeChange: setPageSize })] }) }));
+}
+// ─── Table (低层组件) ─────────────────────────────────────────────────────────
+function TableDemo() {
+    const rows = [
+        { id: 1, name: '张三', role: '管理员', status: '正常' },
+        { id: 2, name: '李四', role: '用户', status: '禁用' },
+        { id: 3, name: '王五', role: '审计员', status: '正常' },
+    ];
+    return (_jsx(Section, { title: "Table (\u4F4E\u5C42)", children: _jsx("div", { className: "w-full", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs("tr", { children: [_jsx(TableHead, { children: "ID" }), _jsx(TableHead, { children: "\u59D3\u540D" }), _jsx(TableHead, { children: "\u89D2\u8272" }), _jsx(TableHead, { children: "\u72B6\u6001" }), _jsx(TableHead, { isAction: true, children: "\u64CD\u4F5C" })] }) }), _jsx(TableBody, { children: rows.map((row) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: row.id }), _jsx(TableCell, { children: row.name }), _jsx(TableCell, { children: row.role }), _jsx(TableCell, { children: row.status }), _jsx(TableCell, { isAction: true, children: _jsx(Button, { variant: "link", size: "sm", children: "\u7F16\u8F91" }) })] }, row.id))) })] }) }) }));
+}
+function DataTableDemo() {
+    const [selectedKeys, setSelectedKeys] = useState([]);
+    const columns = [
+        { key: 'id', title: 'ID', width: '60px' },
+        { key: 'name', title: '姓名' },
+        { key: 'role', title: '角色1', fixed: 'left' },
+        { key: 'status', title: '状态1', fixed: 'left' },
+        { key: 'role', title: '角色2s' },
+        { key: 'status', title: '状态2' },
+        { key: 'role', title: '角色1' },
+        { key: 'status', title: '状态1' },
+        { key: 'role', title: '角色2s' },
+        { key: 'status', title: '状态2' },
+        { key: 'role', title: '角色1' },
+        { key: 'status', title: '状态1' },
+        { key: 'role', title: '角色2s' },
+        { key: 'status', title: '状态2' },
+        { key: 'role', title: '角色', fixed: 'right' },
+        { key: 'status', title: '状态' },
+        {
+            key: 'action',
+            title: '操作',
+            width: '96px',
+            actionOverflow: 'dropdown',
+            actions: (_, record) => [
+                { key: 'edit', label: '修改', onClick: () => console.log('edit', record.id) },
+                { key: 'view', label: '查看', onClick: () => console.log('view', record.id) },
+                { key: 'delete', label: '删除', danger: true, onClick: () => console.log('delete', record.id) },
+            ],
+        },
+    ];
+    const data = [
+        { id: 1, name: '张三', role: '管理员', status: '正常' },
+        { id: 2, name: '李四', role: '用户', status: '禁用' },
+        { id: 3, name: '王五', role: '审计员', status: '正常' },
+        { id: 4, name: '赵六', role: '用户', status: '正常' },
+        { id: 5, name: '孙七', role: '用户', status: '正常' },
+    ];
+    return (_jsx(Section, { title: "DataTable", children: _jsxs("div", { className: "w-full", children: [_jsxs("p", { className: "text-sm mb-2", children: ["\u5DF2\u9009: ", JSON.stringify(selectedKeys)] }), _jsx(DataTable, { columns: columns, data: data, rowKey: "id", rowSelection: {
+                        selectedRowKeys: selectedKeys,
+                        onChange: (keys) => setSelectedKeys(keys),
+                    } })] }) }));
+}
+// ─── Search ───────────────────────────────────────────────────────────────────
+function SearchDemo() {
+    return (_jsx(Section, { title: "Search", children: _jsx("div", { className: "w-full", children: _jsxs(Search, { schemas: [
+                    { type: 'input', key: 'keyword', label: '关键字', fieldProps: { placeholder: '请输入' } },
+                    {
+                        type: 'select',
+                        key: 'status',
+                        label: '状态',
+                        fieldProps: {
+                            options: [
+                                { label: '正常', value: 'active' },
+                                { label: '禁用', value: 'disabled' },
+                            ],
+                            placeholder: '请选择',
+                        },
+                    },
+                ], children: [_jsx(Button, { type: "submit", variant: "primary", children: "\u641C\u7D22" }), _jsx(Button, { type: "reset", children: "\u91CD\u7F6E" })] }) }) }));
+}
+// ─── Breadcrumb ───────────────────────────────────────────────────────────────
+function BreadcrumbDemo() {
+    const [items, setItems] = useState([
+        { id: 'home', label: '首页' },
+        { id: 'list', label: '用户列表' },
+        { id: 'detail', label: '用户详情', active: true },
+    ]);
+    return (_jsx(Section, { title: "Breadcrumb", children: _jsx(Breadcrumb, { children: _jsx(BreadcrumbList, { children: items.map((item, idx) => (_jsxs(React.Fragment, { children: [_jsx(BreadcrumbItem, { children: _jsx(BreadcrumbPage, { active: item.active, onClose: () => setItems((prev) => prev.filter((i) => i.id !== item.id)), onClick: () => setItems((prev) => prev.map((i) => ({ ...i, active: i.id === item.id }))), className: "cursor-pointer", children: item.label }) }), idx < items.length - 1 && _jsx(BreadcrumbSeparator, {})] }, item.id))) }) }) }));
+}
+// ─── Label ────────────────────────────────────────────────────────────────────
+function LabelDemo() {
+    return (_jsxs(Section, { title: "Label", children: [_jsx(Label, { label: "\u6C34\u5E73\u5E03\u5C40", layout: "horizontal", children: _jsx("span", { className: "text-sm", children: "\u5185\u5BB9\u533A\u57DF" }) }), _jsx(Label, { label: "\u5782\u76F4\u5E03\u5C40", layout: "vertical", children: _jsx("span", { className: "text-sm", children: "\u5185\u5BB9\u533A\u57DF" }) })] }));
+}
+// ─── Form ─────────────────────────────────────────────────────────────────────
+function FormDemo() {
+    const [form] = useForm();
+    return (_jsx(Section, { title: "Form", children: _jsxs(Form, { form: form, onFinish: (v) => console.log('表单值:', v), children: [_jsx(FormItem, { name: "username", label: "\u7528\u6237\u540D", required: true, rules: [{ required: true, message: '请输入用户名' }], children: _jsx(Input, { placeholder: "\u8BF7\u8F93\u5165\u7528\u6237\u540D" }) }), _jsx(FormItem, { name: "password", label: "\u5BC6\u7801", required: true, rules: [{ required: true, message: '请输入密码' }], children: _jsx(Input, { type: "password", placeholder: "\u8BF7\u8F93\u5165\u5BC6\u7801" }) }), _jsx(Button, { type: "submit", children: "\u63D0\u4EA4" })] }) }));
+}
+// ─── SchemaForm ───────────────────────────────────────────────────────────────
+function SchemaFormDemo() {
+    const form = useRef(undefined);
+    return (_jsx(Section, { title: "SchemaForm", children: _jsx(SchemaForm, { layout: "horizontal", getForm: (f) => {
+                form.current = f;
+            }, schemas: [
+                {
+                    key: 'username',
+                    label: '用户名',
+                    type: 'input',
+                    required: true,
+                    rules: [{ required: true, message: '请输入用户名' }],
+                    fieldProps: { placeholder: '请输入用户名' },
+                },
+                {
+                    key: 'role',
+                    label: '角色',
+                    type: 'select',
+                    fieldProps: {
+                        placeholder: '请选择',
+                        options: [
+                            { label: '管理员', value: 'admin' },
+                            { label: '用户', value: 'user' },
+                        ],
+                    },
+                },
+            ], onFinish: (values) => console.log(values) }) }));
+}
+// ─── TableSearch ─────────────────────────────────────────────────────────────
+function TableSearchDemo() {
+    return (_jsx(Section, { title: "TableSearch", children: _jsx(TableSearch, { onSearch: (v) => console.log(v), schemas: [
+                { type: 'input', key: 'q1', label: '字段1', fieldProps: {} },
+                { type: 'select', key: 'q2', label: '状态', fieldProps: { options: [{ value: 'a', label: 'A' }] } },
+                { type: 'switch', key: 'q3', label: '开关', fieldProps: {} },
+                { type: 'date', key: 'q4', label: '日期', fieldProps: {} },
+                { type: 'date', key: 'q5', label: '范围', fieldProps: { mode: 'range' } },
+                { type: 'textarea', key: 'q6', label: '文本', fieldProps: {} },
+                { type: 'input', key: 'q7', label: '字段7', fieldProps: {} },
+                { type: 'input', key: 'q8', label: '字段8', fieldProps: {} },
+            ] }) }));
+}
+// ─── Skeleton ─────────────────────────────────────────────────────────────────
+function SkeletonDemo() {
+    return (_jsx(Section, { title: "Skeleton", children: _jsxs("div", { className: "w-full space-y-4", children: [_jsxs("div", { children: [_jsx("p", { className: "text-xs text-gray-500 mb-1", children: "pageloading" }), _jsx(Skeleton, { mode: "pageloading", rows: 3, showTitle: true, showActions: true })] }), _jsxs("div", { children: [_jsx("p", { className: "text-xs text-gray-500 mb-1", children: "tableloading" }), _jsx(Skeleton, { mode: "tableloading", rows: 4 })] }), _jsxs("div", { children: [_jsx("p", { className: "text-xs text-gray-500 mb-1", children: "componentsloading" }), _jsx(Skeleton, { mode: "componentsloading", rows: 2 })] })] }) }));
+}
+// ─── TreeSelect ───────────────────────────────────────────────────────────────
+function TreeSelectDemo() {
+    const [value, setValue] = useState(['1.1.1', '1.1.2']);
+    const [indeterminate, setIndeterminate] = useState([]);
+    const treeData = [
+        {
+            id: '1',
+            name: '节点 1',
+            children: [
+                {
+                    id: '1.1',
+                    name: '节点 1.1',
+                    children: [
+                        {
+                            id: '1.1.1',
+                            name: '节点 1.1.1',
+                            children: [
+                                { id: '1.1.1.1', name: '1.1.1.1' },
+                                { id: '1.1.1.2', name: '1.1.1.2' },
+                            ],
+                        },
+                        { id: '1.1.2', name: '节点 1.1.2' },
+                    ],
+                },
+                {
+                    id: '1.2',
+                    name: '节点 1.2',
+                    children: [
+                        { id: '1.2.1', name: '1.2.1' },
+                        { id: '1.2.2', name: '1.2.2' },
+                    ],
+                },
+            ],
+        },
+    ];
+    return (_jsx(Section, { title: "TreeSelect", children: _jsxs("div", { children: [_jsxs("div", { className: "text-sm mb-2", children: [_jsxs("span", { children: ["\u9009\u4E2D: ", JSON.stringify(value)] }), _jsxs("span", { className: "ml-4", children: ["\u534A\u9009: ", JSON.stringify(indeterminate)] })] }), _jsx(TreeSelect, { data: treeData, value: value, onChange: ({ checked, indeterminate }) => {
+                        setValue(checked);
+                        setIndeterminate(indeterminate);
+                    } })] }) }));
+}
+// ─── PreviewImage ─────────────────────────────────────────────────────────────
+function PreviewImageDemo() {
+    const images = [
+        'https://images.unsplash.com/photo-1778512828600-4a6540a1a115?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxmZWF0dXJlZC1waG90b3MtZmVlZHw0fHx8ZW58MHx8fHx8',
+        'https://images.unsplash.com/photo-1778392120781-a6b2b55dc12a?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxmZWF0dXJlZC1waG90b3MtZmVlZHwyNnx8fGVufDB8fHx8fA%3D%3D',
+    ];
+    return (_jsx(Section, { title: "PreviewImage", children: _jsx(PreviewImage, { images: images, initialIndex: 0 }) }));
+}
+// ─── ImageUpload ─────────────────────────────────────────────────────────────
+function ImageUploadDemo() {
+    return (_jsx(Section, { title: "ImageUpload", children: _jsx(ImageUpload, { accept: ".jpg,.png", maxCount: 4, beforeChange: (f) => {
+                console.log(f);
+                return parseInt(Math.random() * 10 + '') % 2 === 0;
+            } }) }));
+}
+// ─── Main ─────────────────────────────────────────────────────────────────────
+const TestPage = () => {
+    return (_jsxs("div", { className: "p-6 max-w-5xl mx-auto", children: [_jsx("h1", { className: "text-2xl font-bold mb-6", children: "\u7EC4\u4EF6\u5C55\u793A" }), _jsx(ThemeSwitcher, {}), _jsx(ButtonDemo, {}), _jsx(InputDemo, {}), _jsx(InputNumberDemo, {}), _jsx(TextareaDemo, {}), _jsx(SelectDemo, {}), _jsx(CheckboxDemo, {}), _jsx(SwitchDemo, {}), _jsx(TooltipDemo, {}), _jsx(DropdownDemo, {}), _jsx(MessageDemo, {}), _jsx(ModalDemo, {}), _jsx(DrawerDemo, {}), _jsx(ConfirmDialogDemo, {}), _jsx(PaginationDemo, {}), _jsx(TableDemo, {}), _jsx(DataTableDemo, {}), _jsx(SearchDemo, {}), _jsx(BreadcrumbDemo, {}), _jsx(LabelDemo, {}), _jsx(FormDemo, {}), _jsx(SchemaFormDemo, {}), _jsx(TableSearchDemo, {}), _jsx(SkeletonDemo, {}), _jsx(TreeSelectDemo, {}), _jsx(DateTestPage, {}), _jsx(PreviewImageDemo, {}), _jsx(ImageUploadDemo, {}), _jsx(MenuTestPage, {})] }));
+};
+export default TestPage;

package/fe/packages/ui/react/hooks/useBreadcrumb.d.ts

@@ -0,0 +1,10 @@
+export declare const useBreadcrumb: import("zustand").UseBoundStore<import("zustand").StoreApi<{
+    items: import("..").BreadcrumbItemData[];
+} & {
+    setItems: (items: import("..").BreadcrumbItemData[]) => void;
+    addItem: (item: import("..").BreadcrumbItemData) => void;
+    removeItem: (id: string | number) => void;
+    clearItems: () => void;
+    setActiveItem: (id: string | number) => void;
+}>>;
+//# sourceMappingURL=useBreadcrumb.d.ts.map

package/fe/packages/ui/react/hooks/useBreadcrumb.js

@@ -0,0 +1,2 @@
+import { useBreadcrumbStore } from '../stores/breadcrumb';
+export const useBreadcrumb = useBreadcrumbStore;

package/fe/packages/ui/react/hooks/useExecuteOnce.d.ts

@@ -0,0 +1,30 @@
+export declare const executionPhaseType: {
+    readonly mount: "mount";
+    readonly render: "render";
+    readonly unMount: "unMount";
+};
+type ExecutionPhaseTypeKeys = keyof typeof executionPhaseType;
+export type ExecutionPhaseType = (typeof executionPhaseType)[ExecutionPhaseTypeKeys];
+/**
+ *
+ * @description 在各个阶段只触发一次
+ *  @demo
+ * ```
+    const count = useExecuteOnce(() => {
+        console.log('123'); // 只会在第一次render时触发
+        return 123
+    })
+
+    // count 123
+
+ * ```
+ */
+export default function useExecuteOnce<T>(factory: () => T, 
+/**
+ * @default executionPhase = render
+ */
+options?: {
+    executionPhase: ExecutionPhaseType[] | ExecutionPhaseType;
+}): T | null;
+export {};
+//# sourceMappingURL=useExecuteOnce.d.ts.map

package/fe/packages/ui/react/hooks/useExecuteOnce.js

@@ -0,0 +1,57 @@
+import { useEffect, useMemo, useRef } from 'react';
+export const executionPhaseType = {
+    mount: 'mount',
+    render: 'render',
+    unMount: 'unMount',
+};
+// type ExecutionPhaseType =
+//   (typeof executionPhaseType)[keyof typeof executionPhaseType];
+/**
+ *
+ * @description 在各个阶段只触发一次
+ *  @demo
+ * ```
+    const count = useExecuteOnce(() => {
+        console.log('123'); // 只会在第一次render时触发
+        return 123
+    })
+
+    // count 123
+
+ * ```
+ */
+export default function useExecuteOnce(factory, 
+/**
+ * @default executionPhase = render
+ */
+options) {
+    const { executionPhase: pExecutionPhase = executionPhaseType.render } = options ?? {};
+    const result = useRef(null);
+    const _executionPhase = useMemo(() => (typeof pExecutionPhase === 'string' ? [pExecutionPhase] : pExecutionPhase), [pExecutionPhase]);
+    const allowExecution = useRef([]);
+    // 跳过依赖;
+    const executionPhase = useRef(_executionPhase);
+    const runFN = (phase) => {
+        if (!allowExecution.current.includes(phase)) {
+            result.current = factory();
+            allowExecution.current.push(phase);
+        }
+    };
+    const fn = useRef(runFN);
+    executionPhase.current = _executionPhase;
+    fn.current = runFN;
+    if (executionPhase.current.includes(executionPhaseType.render)) {
+        fn.current(executionPhaseType.render);
+    }
+    useEffect(() => {
+        if (executionPhase.current.includes(executionPhaseType.mount)) {
+            fn.current(executionPhaseType['mount']);
+        }
+        return () => {
+            if (executionPhase.current.includes(executionPhaseType['unMount'])) {
+                fn.current(executionPhaseType['unMount']);
+            }
+        };
+    }, []);
+    return result.current;
+}

package/fe/packages/ui/react/hooks/useInit.d.ts

@@ -0,0 +1,3 @@
+declare const useInit: (callback: (isInit: boolean) => void) => void;
+export default useInit;
+//# sourceMappingURL=useInit.d.ts.map

package/fe/packages/ui/react/hooks/useInit.js

@@ -0,0 +1,9 @@
+import { useRef } from 'react';
+const useInit = (callback) => {
+    const isInit = useRef(false);
+    if (!isInit.current) {
+        callback(isInit.current);
+        isInit.current = true;
+    }
+};
+export default useInit;

package/fe/packages/ui/react/hooks/useLanguage.d.ts

@@ -0,0 +1,2 @@
+export declare function useLanguage(): import("..").I18nStore;
+//# sourceMappingURL=useLanguage.d.ts.map

package/fe/packages/ui/react/hooks/useLanguage.js

@@ -0,0 +1,4 @@
+import { useLanguages } from '../stores/language';
+export function useLanguage() {
+    return useLanguages();
+}

package/fe/packages/ui/react/hooks/usePagination.d.ts

@@ -0,0 +1,16 @@
+type PaginationValue = {
+    current: number;
+    size: number;
+    total: number;
+};
+type IParams = {
+    defaultValue?: PaginationValue;
+};
+export default function usePagination(params?: IParams): import("react").RefObject<{
+    current: number;
+    size: number;
+    total: number;
+    onChange: (params: Partial<PaginationValue>) => void;
+}>;
+export {};
+//# sourceMappingURL=usePagination.d.ts.map