@_tc/template-core 0.0.1-bate.35 → 0.0.1-bate.37

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

@@ -1,40 +1,261 @@
-import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { Button, Form, FormItem, ImageUpload, Input, Label, SchemeForm, Skeleton, TableSearch, TreeSelect, useForm, } from '../../components';
-import { useRef, useState } from 'react';
+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 { PreviewImage } from '../../components';
+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] })] }) }));
+}
+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 })] }));
+}
+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" })] }));
+}
+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" })] }));
+}
+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" })] }));
+}
+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" })] })] }));
+}
+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" })] })] }));
+}
+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 })] }));
+}
+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))) }));
+}
+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" }) })] }));
+}
+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" })] }));
+}
+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" }) })] })] }));
+}
+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' },
+                                        ] }) })] })] }) })] }));
+}
+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) })] }));
+}
+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 })] }) }));
+}
+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: '角色' },
+        { key: 'status', title: '状态' },
+    ];
+    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),
+                    } })] }) }));
+}
+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" })] }) }) }));
+}
+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))) }) }) }));
+}
+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" }) })] }));
+}
+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" })] }) }));
+}
+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) }) }));
+}
+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: {} },
+            ] }) }));
+}
+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 })] })] }) }));
+}
 function TreeSelectDemo() {
     const [value, setValue] = useState(['1.1.1', '1.1.2']);
     const [indeterminate, setIndeterminate] = useState([]);
     const treeData = [
         {
             id: '1',
-            name: '1',
+            name: '节点 1',
             children: [
                 {
                     id: '1.1',
-                    name: '1.1',
+                    name: '节点 1.1',
                     children: [
                         {
                             id: '1.1.1',
-                            name: '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.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.1.2', name: '节点 1.1.2' },
                     ],
                 },
                 {
                     id: '1.2',
-                    name: '1.2',
+                    name: '节点 1.2',
                     children: [
                         { id: '1.2.1', name: '1.2.1' },
                         { id: '1.2.2', name: '1.2.2' },
@@ -43,76 +264,25 @@ function TreeSelectDemo() {
             ],
         },
     ];
-    return (_jsxs("div", { children: [_jsxs("div", { className: "mb-4", children: [_jsxs("div", { children: ["\u9009\u4E2D: ", JSON.stringify(value)] }), _jsxs("div", { children: ["\u534A\u9009: ", JSON.stringify(indeterminate)] })] }), _jsx(TreeSelect, { data: treeData, value: value, onChange: ({ checked, indeterminate }) => {
-                    setValue(checked);
-                    setIndeterminate(indeterminate);
-                } })] }));
+    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);
+                    } })] }) }));
 }
 function PreviewImageDemo() {
     const images = [
-        'https://s3.ap-northeast-1.amazonaws.com/ezpay-test/52903c41-2eec-4326-95f0-79d56a4dc19c.png',
-        'https://aisearch.cdn.bcebos.com/homepage/dashboard/ai_picture_create/15.png',
+        '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(_Fragment, { children: _jsx(PreviewImage, { images: images, initialIndex: 0 }) }));
+    return (_jsx(Section, { title: "PreviewImage", children: _jsx(PreviewImage, { images: images, initialIndex: 0 }) }));
 }
-function MyForm() {
-    const [form] = useForm();
-    const onFinish = (values) => {
-        console.log('表单值:', values);
-    };
-    return (_jsxs(Form, { form: form, onFinish: onFinish, 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" })] }));
+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;
+            } }) }));
 }
 const TestPage = () => {
-    const form = useRef(undefined);
-    return (_jsxs("div", { children: [_jsx("h1", { children: "button" }), _jsx(Button, { onClick: () => console.log(form), children: "click" }), _jsx("h2", { children: "text" }), _jsx(Button, { variant: "text", onClick: () => console.log(form), children: "click" }), _jsx(Button, { disabled: true, variant: "text", onClick: () => console.log(form), children: "click" }), _jsx("h1", { children: "input" }), _jsx(Input, {}), _jsx("h1", { children: "form" }), _jsx(MyForm, {}), _jsx("h1", { children: "schemeform" }), _jsx(SchemeForm, { layout: "horizontal", getForm: (f) => {
-                    form.current = f;
-                }, schemes: [
-                    {
-                        name: 'username',
-                        label: '用户名',
-                        type: 'input',
-                        required: true,
-                        rules: [{ required: true, message: '请输入用户名' }],
-                        fieldProps: {
-                            placeholder: '请输入用户名',
-                        },
-                    },
-                    {
-                        name: 'role',
-                        label: '角色',
-                        type: 'select',
-                        fieldProps: {
-                            placeholder: '请选择',
-                            options: [
-                                { label: '管理员', value: 'admin' },
-                                { label: '用户', value: 'user' },
-                            ],
-                        },
-                    },
-                ], onFinish: (values) => console.log(values) }), _jsx("h1", { children: "label" }), _jsx("div", { children: _jsx(Label, { label: "labelName", layout: "horizontal", children: "123" }) }), _jsx("h1", { children: "TableSearch " }), _jsx(TableSearch, { onSearch: (v) => {
-                    console.log(v);
-                }, schemes: [
-                    { type: 'input', fieldProps: {}, name: '1', label: '1' },
-                    { type: 'switch', fieldProps: {}, name: '2', label: '2' },
-                    { type: 'select', fieldProps: { options: [{ value: '3', label: '3' }] }, name: '3', label: '3' },
-                    { type: 'textarea', fieldProps: {}, name: '4', label: '4' },
-                    { type: 'date', fieldProps: {}, name: '5', label: '5' },
-                    {
-                        type: 'date',
-                        fieldProps: {
-                            mode: 'range',
-                        },
-                        name: '6',
-                        label: '6',
-                    },
-                    { type: 'input', fieldProps: {}, name: '7', label: '7' },
-                    { type: 'date', fieldProps: {}, name: '8', label: '8' },
-                    { type: 'input', fieldProps: {}, name: '9', label: '9' },
-                    { type: 'input', fieldProps: {}, name: '10', label: '10' },
-                    { type: 'input', fieldProps: {}, name: '11', label: '11' },
-                ] }), _jsx("h1", { children: "Skeleton" }), _jsx(Skeleton, { mode: "pageloading", rows: 5, showTitle: true, showActions: true }), _jsx(Skeleton, { mode: "tableloading", rows: 8 }), _jsx(Skeleton, { mode: "componentsloading", rows: 3 }), _jsx("h1", { children: "TreeSelect" }), _jsx(TreeSelectDemo, {}), _jsx(DateTestPage, {}), _jsx("h1", { children: "PreviewImage" }), _jsx(PreviewImageDemo, {}), _jsx("h1", { children: "ImageUpload" }), _jsx(ImageUpload, { accept: ".jpg,.png", maxCount: 4, beforeChange: (f) => {
-                    console.log(f);
-                    return parseInt(Math.random() * 10 + '') % 2 === 0;
-                } })] }));
+    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/useExecuteOnce.d.ts

@@ -0,0 +1,12 @@
+export declare const executionPhaseType: {
+    readonly mount: "mount";
+    readonly render: "render";
+    readonly unMount: "unMount";
+};
+type ExecutionPhaseTypeKeys = keyof typeof executionPhaseType;
+export type ExecutionPhaseType = (typeof executionPhaseType)[ExecutionPhaseTypeKeys];
+export default function useExecuteOnce<T>(factory: () => T, options?: {
+    executionPhase: ExecutionPhaseType[] | ExecutionPhaseType;
+}): T | null;
+export {};
+//# sourceMappingURL=useExecuteOnce.d.ts.map

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

@@ -0,0 +1,36 @@
+import { useEffect, useMemo, useRef } from 'react';
+export const executionPhaseType = {
+    mount: 'mount',
+    render: 'render',
+    unMount: 'unMount',
+};
+export default function useExecuteOnce(factory, 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

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

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

@@ -2,7 +2,7 @@ import { useRef } from 'react';
 const useInit = (callback) => {
     const isInit = useRef(false);
     if (!isInit.current) {
-        callback();
+        callback(isInit.current);
         isInit.current = true;
     }
 };

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

@@ -1,7 +1,2 @@
-export declare function useLanguage(): {
-    language: import("../locales").Language;
-} & {
-    setLanguage: (lang: import("../locales").Language) => void;
-    t: typeof import("../stores/language").t;
-};
+export declare function useLanguage(): import("../../../common/index.js").I18nStore;
 //# sourceMappingURL=useLanguage.d.ts.map

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

@@ -0,0 +1,18 @@
+import { RefObject } from 'react';
+type SetState<S> = (value: S | ((preValue: S) => S), callback?: CallBackFN<S>) => void;
+type CallBackFN<T> = (value: T) => void;
+type RefState<T> = RefObject<{
+    data: T;
+}>;
+export default function useRefState<S>(initialState: S | (() => S)): [
+    S,
+    SetState<S>,
+    RefState<S>
+];
+export default function useRefState<S = undefined>(): [
+    S | undefined,
+    SetState<S | undefined>,
+    RefState<S | undefined>
+];
+export {};
+//# sourceMappingURL=useRefState.d.ts.map

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

@@ -0,0 +1,28 @@
+import { useState as RUS, useCallback, useLayoutEffect, useRef } from 'react';
+import useInit from './useInit';
+export default function useRefState(initialState) {
+    const [v, setValue] = RUS(initialState);
+    const data = useRef({ data: undefined });
+    const callbackRef = useRef(null);
+    const [callbackVersion, setCallbackVersion] = RUS(0);
+    useInit(() => {
+        data.current.data = v;
+    });
+    const setData = useCallback((action, callback) => {
+        const value = typeof action === 'function' ? action(data.current.data) : action;
+        setValue(value);
+        data.current.data = value;
+        if (callback) {
+            callbackRef.current = callback;
+            setCallbackVersion((version) => version + 1);
+        }
+    }, [setCallbackVersion, setValue]);
+    useLayoutEffect(() => {
+        if (callbackRef.current) {
+            const callback = callbackRef.current;
+            callbackRef.current = null;
+            callback(data.current.data);
+        }
+    }, [callbackVersion]);
+    return [v, setData, data];
+}

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

@@ -0,0 +1,15 @@
+export type WatchCallback<T> = (value: T, prevValue: T | undefined) => void | (() => void);
+export type WatchCompare<T> = (value: T, prevValue: T) => boolean;
+export type WatchCompareType = 'identity' | 'shallow';
+export type WatchSelector<TSource, TValue> = (source: TSource) => TValue;
+export type UseWatchOptions<T> = {
+    immediate?: boolean;
+    compare?: WatchCompareType | WatchCompare<T>;
+};
+export declare const identityCompare: <T>(value: T, prevValue: T) => boolean;
+export declare const shallowCompare: <T>(value: T, prevValue: T) => boolean;
+export declare const defaultCompare: <T>(value: T, prevValue: T) => boolean;
+export declare function useWatch<T>(value: T, callback: WatchCallback<T>, options?: UseWatchOptions<T>): void;
+export declare function useWatch<TSource, TValue>(source: TSource, selector: WatchSelector<TSource, TValue>, callback: WatchCallback<TValue>, options?: UseWatchOptions<TValue>): void;
+export default useWatch;
+//# sourceMappingURL=useWatch.d.ts.map

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

@@ -0,0 +1,87 @@
+import { useEffect, useRef } from 'react';
+export const identityCompare = (value, prevValue) => Object.is(value, prevValue);
+export const shallowCompare = (value, prevValue) => {
+    if (Object.is(value, prevValue)) {
+        return true;
+    }
+    if (Array.isArray(value) && Array.isArray(prevValue)) {
+        if (value.length !== prevValue.length) {
+            return false;
+        }
+        return value.every((item, index) => Object.is(item, prevValue[index]));
+    }
+    if (value &&
+        prevValue &&
+        typeof value === 'object' &&
+        typeof prevValue === 'object') {
+        const valuePrototype = Object.getPrototypeOf(value);
+        const prevValuePrototype = Object.getPrototypeOf(prevValue);
+        if (valuePrototype !== prevValuePrototype ||
+            (valuePrototype !== Object.prototype && valuePrototype !== null)) {
+            return false;
+        }
+        const valueKeys = Object.keys(value);
+        const prevValueKeys = Object.keys(prevValue);
+        if (valueKeys.length !== prevValueKeys.length) {
+            return false;
+        }
+        return valueKeys.every((key) => Object.prototype.hasOwnProperty.call(prevValue, key) &&
+            Object.is(value[key], prevValue[key]));
+    }
+    return false;
+};
+export const defaultCompare = (value, prevValue) => {
+    if (Array.isArray(value) && Array.isArray(prevValue)) {
+        return shallowCompare(value, prevValue);
+    }
+    return identityCompare(value, prevValue);
+};
+const getCompare = (compare) => {
+    if (compare === 'identity') {
+        return identityCompare;
+    }
+    if (compare === 'shallow') {
+        return shallowCompare;
+    }
+    return compare ?? defaultCompare;
+};
+const useStableWatchValue = (value, compare) => {
+    const valueRef = useRef(value);
+    if (!compare(value, valueRef.current)) {
+        valueRef.current = value;
+    }
+    return valueRef.current;
+};
+export function useWatch(source, selectorOrCallback, callbackOrOptions, options) {
+    const hasSelector = typeof callbackOrOptions === 'function';
+    const selector = hasSelector ? selectorOrCallback : null;
+    const callback = hasSelector
+        ? callbackOrOptions
+        : selectorOrCallback;
+    const watchOptions = hasSelector ? options : callbackOrOptions;
+    const nextValue = selector ? selector(source) : source;
+    const stableValue = useStableWatchValue(nextValue, getCompare(watchOptions?.compare));
+    const isInit = useRef(false);
+    const valueRef = useRef(stableValue);
+    const callbackRef = useRef(callback);
+    const optionsRef = useRef(watchOptions);
+    callbackRef.current = callback;
+    optionsRef.current = watchOptions;
+    useEffect(() => {
+        if (!isInit.current) {
+            isInit.current = true;
+            valueRef.current = stableValue;
+            if (optionsRef.current?.immediate) {
+                return callbackRef.current(stableValue, undefined);
+            }
+            return;
+        }
+        const prevValue = valueRef.current;
+        if (Object.is(stableValue, prevValue)) {
+            return;
+        }
+        valueRef.current = stableValue;
+        return callbackRef.current(stableValue, prevValue);
+    }, [stableValue]);
+}
+export default useWatch;

package/fe/packages/ui/react/hooks/useWatch.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=useWatch.test.d.ts.map