@_tc/template-core 0.2.1-bate.1 → 0.2.2

package/fe/packages/react/ui/components/testPage/demos/core/BreadcrumbDemo.js

@@ -0,0 +1,44 @@
+import { __exportAll } from "../../../../../../../_virtual/_rolldown/runtime.js";
+import { Breadcrumb, BreadcrumbItem, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "../../../breadcrumb/breadcrumb.js";
+import "../../../index.js";
+import React, { useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region packages/react/ui/components/testPage/demos/core/BreadcrumbDemo.tsx
+var BreadcrumbDemo_exports = /* @__PURE__ */ __exportAll({
+	default: () => BreadcrumbDemo,
+	demoMeta: () => demoMeta
+});
+var demoMeta = {
+	title: "Breadcrumb",
+	order: 22,
+	contentClassName: "flex flex-wrap gap-3 items-start"
+};
+function BreadcrumbDemo() {
+	const [items, setItems] = useState([
+		{
+			id: "home",
+			label: "首页"
+		},
+		{
+			id: "list",
+			label: "用户列表"
+		},
+		{
+			id: "detail",
+			label: "用户详情",
+			active: true
+		}
+	]);
+	return /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx(Breadcrumb, { children: /* @__PURE__ */ jsx(BreadcrumbList, { children: items.map((item, idx) => /* @__PURE__ */ jsxs(React.Fragment, { children: [/* @__PURE__ */ jsx(BreadcrumbItem, { children: /* @__PURE__ */ 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 && /* @__PURE__ */ jsx(BreadcrumbSeparator, {})] }, item.id)) }) }) });
+}
+//#endregion
+export { BreadcrumbDemo_exports, BreadcrumbDemo as default, demoMeta };

package/fe/packages/react/ui/components/testPage/demos/core/BreadcrumbDemo2.js

@@ -0,0 +1,4 @@
+//#region packages/react/ui/components/testPage/demos/core/BreadcrumbDemo.tsx?raw
+var BreadcrumbDemo_default = "import {\n    Breadcrumb,\n    BreadcrumbItem,\n    BreadcrumbList,\n    BreadcrumbPage,\n    BreadcrumbSeparator\n} from '@tc/ui-react/components'\nimport React, { useState } from 'react'\nimport type { DemoMeta } from '../../types'\n\nexport const demoMeta = {\n    title: 'Breadcrumb',\n    order: 22,\n    contentClassName: 'flex flex-wrap gap-3 items-start',\n} satisfies DemoMeta\n\n// ─── Breadcrumb ───────────────────────────────────────────────────────────────\n\nexport default function BreadcrumbDemo() {\n    const [items, setItems] = useState([\n        { id: 'home', label: '首页' },\n        { id: 'list', label: '用户列表' },\n        { id: 'detail', label: '用户详情', active: true },\n    ])\n\n    return (\n        <>\n            <Breadcrumb>\n                <BreadcrumbList>\n                    {items.map((item, idx) => (\n                        <React.Fragment key={item.id}>\n                            <BreadcrumbItem>\n                                <BreadcrumbPage\n                                    active={item.active}\n                                    onClose={() => setItems((prev) => prev.filter((i) => i.id !== item.id))}\n                                    onClick={() =>\n                                        setItems((prev) => prev.map((i) => ({ ...i, active: i.id === item.id })))\n                                    }\n                                    className=\"cursor-pointer\"\n                                >\n                                    {item.label}\n                                </BreadcrumbPage>\n                            </BreadcrumbItem>\n                            {idx < items.length - 1 && <BreadcrumbSeparator />}\n                        </React.Fragment>\n                    ))}\n                </BreadcrumbList>\n            </Breadcrumb>\n        </>\n    )\n}\n";
+//#endregion
+export { BreadcrumbDemo_default as default };

package/fe/packages/react/ui/components/testPage/demos/core/ButtonDemo.d.ts

@@ -0,0 +1,6 @@
+export declare const demoMeta: {
+    title: string;
+    order: number;
+    contentClassName: string;
+};
+export default function ButtonDemo(): import("react/jsx-runtime").JSX.Element;

package/fe/packages/react/ui/components/testPage/demos/core/ButtonDemo.js

@@ -0,0 +1,85 @@
+import { __exportAll } from "../../../../../../../_virtual/_rolldown/runtime.js";
+import { Button } from "../../../Button/Button.js";
+import "../../../index.js";
+import { useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region packages/react/ui/components/testPage/demos/core/ButtonDemo.tsx
+var ButtonDemo_exports = /* @__PURE__ */ __exportAll({
+	default: () => ButtonDemo,
+	demoMeta: () => demoMeta
+});
+var demoMeta = {
+	title: "Button",
+	order: 2,
+	contentClassName: "flex flex-wrap gap-3 items-start"
+};
+function ButtonDemo() {
+	const [loading, setLoading] = useState(false);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsx(Button, { children: "default" }),
+		/* @__PURE__ */ jsx(Button, {
+			variant: "primary",
+			children: "primary"
+		}),
+		/* @__PURE__ */ jsx(Button, {
+			variant: "dashed",
+			children: "dashed"
+		}),
+		/* @__PURE__ */ jsx(Button, {
+			variant: "text",
+			children: "text"
+		}),
+		/* @__PURE__ */ jsx(Button, {
+			variant: "link",
+			href: "#button",
+			children: "link"
+		}),
+		/* @__PURE__ */ jsx(Button, {
+			state: "danger",
+			children: "danger"
+		}),
+		/* @__PURE__ */ jsx(Button, {
+			variant: "primary",
+			state: "danger",
+			children: "primary danger"
+		}),
+		/* @__PURE__ */ jsx("div", {
+			className: " bg-red-300 p-1.5",
+			children: /* @__PURE__ */ jsx(Button, {
+				state: "ghost",
+				children: "ghost"
+			})
+		}),
+		/* @__PURE__ */ jsx(Button, {
+			variant: "primary",
+			state: "ghost",
+			children: "primary ghost"
+		}),
+		/* @__PURE__ */ jsx(Button, {
+			disabled: true,
+			children: "disabled"
+		}),
+		/* @__PURE__ */ jsx(Button, {
+			loading,
+			onClick: () => {
+				setLoading(true);
+				setTimeout(() => setLoading(false), 2e3);
+			},
+			children: "loading (click)"
+		}),
+		/* @__PURE__ */ jsx(Button, {
+			size: "sm",
+			children: "sm"
+		}),
+		/* @__PURE__ */ jsx(Button, {
+			size: "md",
+			children: "md"
+		}),
+		/* @__PURE__ */ jsx(Button, {
+			size: "lg",
+			children: "lg"
+		})
+	] });
+}
+//#endregion
+export { ButtonDemo_exports, ButtonDemo as default, demoMeta };

package/fe/packages/react/ui/components/testPage/demos/core/ButtonDemo2.js

@@ -0,0 +1,4 @@
+//#region packages/react/ui/components/testPage/demos/core/ButtonDemo.tsx?raw
+var ButtonDemo_default = "import { Button } from '@tc/ui-react/components'\nimport { useState } from 'react'\nimport type { DemoMeta } from '../../types'\n\nexport const demoMeta = {\n    title: 'Button',\n    order: 2,\n    contentClassName: 'flex flex-wrap gap-3 items-start',\n} satisfies DemoMeta\n\n// ─── Button ─────────────────────────────────────────────────────────────────\n\nexport default function ButtonDemo() {\n    const [loading, setLoading] = useState(false)\n    return (\n        <>\n            <Button>default</Button>\n            <Button variant=\"primary\">primary</Button>\n            <Button variant=\"dashed\">dashed</Button>\n            <Button variant=\"text\">text</Button>\n            <Button variant=\"link\" href=\"#button\">\n                link\n            </Button>\n            <Button state=\"danger\">danger</Button>\n            <Button variant=\"primary\" state=\"danger\">\n                primary danger\n            </Button>\n            <div className=\" bg-red-300 p-1.5\">\n                <Button state=\"ghost\">ghost</Button>\n            </div>\n            <Button variant=\"primary\" state=\"ghost\">\n                primary ghost\n            </Button>\n            <Button disabled>disabled</Button>\n            <Button\n                loading={loading}\n                onClick={() => {\n                    setLoading(true)\n                    setTimeout(() => setLoading(false), 2000)\n                }}\n            >\n                loading (click)\n            </Button>\n            <Button size=\"sm\">sm</Button>\n            <Button size=\"md\">md</Button>\n            <Button size=\"lg\">lg</Button>\n        </>\n    )\n}\n";
+//#endregion
+export { ButtonDemo_default as default };

package/fe/packages/react/ui/components/testPage/demos/core/CardDemo.d.ts

@@ -0,0 +1,6 @@
+export declare const demoMeta: {
+    title: string;
+    order: number;
+    contentClassName: string;
+};
+export default function CardDemo(): import("react/jsx-runtime").JSX.Element;

package/fe/packages/react/ui/components/testPage/demos/core/CardDemo.js

@@ -0,0 +1,52 @@
+import { __exportAll } from "../../../../../../../_virtual/_rolldown/runtime.js";
+import { Button } from "../../../Button/Button.js";
+import { Card } from "../../../Card/Card.js";
+import "../../../index.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region packages/react/ui/components/testPage/demos/core/CardDemo.tsx
+var CardDemo_exports = /* @__PURE__ */ __exportAll({
+	default: () => CardDemo,
+	demoMeta: () => demoMeta
+});
+var demoMeta = {
+	title: "Card",
+	order: 25,
+	contentClassName: "flex flex-wrap gap-3 items-start"
+};
+function CardDemo() {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+		className: "w-72",
+		children: /* @__PURE__ */ jsx(Card, {
+			header: /* @__PURE__ */ jsx("span", {
+				className: "text-sm font-medium",
+				children: "卡片标题"
+			}),
+			footer: /* @__PURE__ */ jsxs("div", {
+				className: "flex justify-end gap-2",
+				children: [/* @__PURE__ */ jsx(Button, {
+					size: "sm",
+					children: "取消"
+				}), /* @__PURE__ */ jsx(Button, {
+					variant: "primary",
+					size: "sm",
+					children: "确认"
+				})]
+			}),
+			children: /* @__PURE__ */ jsx("p", {
+				className: "text-sm text-muted-foreground",
+				children: "这是一张基础卡片，包含 header、body 和 footer 三个区域。"
+			})
+		})
+	}), /* @__PURE__ */ jsx("div", {
+		className: "w-72",
+		children: /* @__PURE__ */ jsx(Card, {
+			className: "border-theme",
+			children: /* @__PURE__ */ jsx("p", {
+				className: "text-sm text-muted-foreground",
+				children: "无 header/footer 的简洁卡片。"
+			})
+		})
+	})] });
+}
+//#endregion
+export { CardDemo_exports, CardDemo as default, demoMeta };

package/fe/packages/react/ui/components/testPage/demos/core/CardDemo2.js

@@ -0,0 +1,4 @@
+//#region packages/react/ui/components/testPage/demos/core/CardDemo.tsx?raw
+var CardDemo_default = "import {\n    Button,\n    Card\n} from '@tc/ui-react/components'\nimport type { DemoMeta } from '../../types'\n\nexport const demoMeta = {\n    title: 'Card',\n    order: 25,\n    contentClassName: 'flex flex-wrap gap-3 items-start',\n} satisfies DemoMeta\n\n// ─── Card ────────────────────────────────────────────────────────────────────\n\nexport default function CardDemo() {\n    return (\n        <>\n            <div className=\"w-72\">\n                <Card\n                    header={<span className=\"text-sm font-medium\">卡片标题</span>}\n                    footer={\n                        <div className=\"flex justify-end gap-2\">\n                            <Button size=\"sm\">取消</Button>\n                            <Button variant=\"primary\" size=\"sm\">\n                                确认\n                            </Button>\n                        </div>\n                    }\n                >\n                    <p className=\"text-sm text-muted-foreground\">\n                        这是一张基础卡片，包含 header、body 和 footer 三个区域。\n                    </p>\n                </Card>\n            </div>\n            <div className=\"w-72\">\n                <Card className=\"border-theme\">\n                    <p className=\"text-sm text-muted-foreground\">无 header/footer 的简洁卡片。</p>\n                </Card>\n            </div>\n        </>\n    )\n}\n";
+//#endregion
+export { CardDemo_default as default };

package/fe/packages/react/ui/components/testPage/demos/core/CheckboxDemo.d.ts

@@ -0,0 +1,6 @@
+export declare const demoMeta: {
+    title: string;
+    order: number;
+    contentClassName: string;
+};
+export default function CheckboxDemo(): import("react/jsx-runtime").JSX.Element;

package/fe/packages/react/ui/components/testPage/demos/core/CheckboxDemo.js

@@ -0,0 +1,41 @@
+import { __exportAll } from "../../../../../../../_virtual/_rolldown/runtime.js";
+import { Checkbox } from "../../../Checkbox/Checkbox.js";
+import "../../../index.js";
+import { useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region packages/react/ui/components/testPage/demos/core/CheckboxDemo.tsx
+var CheckboxDemo_exports = /* @__PURE__ */ __exportAll({
+	default: () => CheckboxDemo,
+	demoMeta: () => demoMeta
+});
+var demoMeta = {
+	title: "Checkbox",
+	order: 7,
+	contentClassName: "flex flex-wrap gap-3 items-start"
+};
+function CheckboxDemo() {
+	const [checked, setChecked] = useState(false);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsxs("label", {
+			className: "flex items-center gap-2 cursor-pointer",
+			children: [/* @__PURE__ */ jsx(Checkbox, {
+				checked,
+				onChange: (c) => setChecked(c)
+			}), /* @__PURE__ */ jsxs("span", { children: ["受控: ", checked ? "选中" : "未选中"] })]
+		}),
+		/* @__PURE__ */ jsxs("label", {
+			className: "flex items-center gap-2 cursor-pointer",
+			children: [/* @__PURE__ */ jsx(Checkbox, { defaultChecked: true }), /* @__PURE__ */ jsx("span", { children: "非受控默认选中" })]
+		}),
+		/* @__PURE__ */ jsxs("label", {
+			className: "flex items-center gap-2 cursor-pointer",
+			children: [/* @__PURE__ */ jsx(Checkbox, { indeterminate: true }), /* @__PURE__ */ jsx("span", { children: "半选状态" })]
+		}),
+		/* @__PURE__ */ jsxs("label", {
+			className: "flex items-center gap-2 cursor-pointer",
+			children: [/* @__PURE__ */ jsx(Checkbox, { disabled: true }), /* @__PURE__ */ jsx("span", { children: "禁用" })]
+		})
+	] });
+}
+//#endregion
+export { CheckboxDemo_exports, CheckboxDemo as default, demoMeta };

package/fe/packages/react/ui/components/testPage/demos/core/CheckboxDemo2.js

@@ -0,0 +1,4 @@
+//#region packages/react/ui/components/testPage/demos/core/CheckboxDemo.tsx?raw
+var CheckboxDemo_default = "import { Checkbox } from '@tc/ui-react/components'\nimport { useState } from 'react'\nimport type { DemoMeta } from '../../types'\n\nexport const demoMeta = {\n    title: 'Checkbox',\n    order: 7,\n    contentClassName: 'flex flex-wrap gap-3 items-start',\n} satisfies DemoMeta\n\n// ─── Checkbox ────────────────────────────────────────────────────────────────\n\nexport default function CheckboxDemo() {\n    const [checked, setChecked] = useState(false)\n    return (\n        <>\n            <label className=\"flex items-center gap-2 cursor-pointer\">\n                <Checkbox checked={checked} onChange={(c) => setChecked(c)} />\n                <span>受控: {checked ? '选中' : '未选中'}</span>\n            </label>\n            <label className=\"flex items-center gap-2 cursor-pointer\">\n                <Checkbox defaultChecked />\n                <span>非受控默认选中</span>\n            </label>\n            <label className=\"flex items-center gap-2 cursor-pointer\">\n                <Checkbox indeterminate />\n                <span>半选状态</span>\n            </label>\n            <label className=\"flex items-center gap-2 cursor-pointer\">\n                <Checkbox disabled />\n                <span>禁用</span>\n            </label>\n        </>\n    )\n}\n";
+//#endregion
+export { CheckboxDemo_default as default };

package/fe/packages/react/ui/components/testPage/demos/core/ConfirmDialogDemo.d.ts

@@ -0,0 +1,6 @@
+export declare const demoMeta: {
+    title: string;
+    order: number;
+    contentClassName: string;
+};
+export default function ConfirmDialogDemo(): import("react/jsx-runtime").JSX.Element;

package/fe/packages/react/ui/components/testPage/demos/core/ConfirmDialogDemo.js

@@ -0,0 +1,35 @@
+import { __exportAll } from "../../../../../../../_virtual/_rolldown/runtime.js";
+import { Button } from "../../../Button/Button.js";
+import { ConfirmDialog } from "../../../ConfirmDialog/ConfirmDialog.js";
+import { message } from "../../../Message/MessageManager.js";
+import "../../../index.js";
+import { useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region packages/react/ui/components/testPage/demos/core/ConfirmDialogDemo.tsx
+var ConfirmDialogDemo_exports = /* @__PURE__ */ __exportAll({
+	default: () => ConfirmDialogDemo,
+	demoMeta: () => demoMeta
+});
+var demoMeta = {
+	title: "ConfirmDialog",
+	order: 17,
+	contentClassName: "flex flex-wrap gap-3 items-start"
+};
+function ConfirmDialogDemo() {
+	const [open, setOpen] = useState(false);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button, {
+		onClick: () => setOpen(true),
+		children: "打开确认框"
+	}), /* @__PURE__ */ jsx(ConfirmDialog, {
+		open,
+		title: "删除确认",
+		content: "确定要删除此条数据吗？此操作不可撤销。",
+		onOk: () => {
+			message.success("已删除");
+			setOpen(false);
+		},
+		onCancel: () => setOpen(false)
+	})] });
+}
+//#endregion
+export { ConfirmDialogDemo_exports, ConfirmDialogDemo as default, demoMeta };

package/fe/packages/react/ui/components/testPage/demos/core/ConfirmDialogDemo2.js

@@ -0,0 +1,4 @@
+//#region packages/react/ui/components/testPage/demos/core/ConfirmDialogDemo.tsx?raw
+var ConfirmDialogDemo_default = "import {\n    message,\n    Button,\n    ConfirmDialog\n} from '@tc/ui-react/components'\nimport { useState } from 'react'\nimport type { DemoMeta } from '../../types'\n\nexport const demoMeta = {\n    title: 'ConfirmDialog',\n    order: 17,\n    contentClassName: 'flex flex-wrap gap-3 items-start',\n} satisfies DemoMeta\n\n// ─── ConfirmDialog ───────────────────────────────────────────────────────────\n\nexport default function ConfirmDialogDemo() {\n    const [open, setOpen] = useState(false)\n    return (\n        <>\n            <Button onClick={() => setOpen(true)}>打开确认框</Button>\n            <ConfirmDialog\n                open={open}\n                title=\"删除确认\"\n                content=\"确定要删除此条数据吗？此操作不可撤销。\"\n                onOk={() => {\n                    message.success('已删除')\n                    setOpen(false)\n                }}\n                onCancel={() => setOpen(false)}\n            />\n        </>\n    )\n}\n";
+//#endregion
+export { ConfirmDialogDemo_default as default };

package/fe/packages/react/ui/components/testPage/demos/core/DataTableDemo.d.ts

@@ -0,0 +1,6 @@
+export declare const demoMeta: {
+    title: string;
+    order: number;
+    contentClassName: string;
+};
+export default function DataTableDemo(): import("react/jsx-runtime").JSX.Element;

package/fe/packages/react/ui/components/testPage/demos/core/DataTableDemo.js

@@ -0,0 +1,243 @@
+import { __exportAll } from "../../../../../../../_virtual/_rolldown/runtime.js";
+import { DataTable } from "../../../DataTable/index.js";
+import "../../../index.js";
+import { useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region packages/react/ui/components/testPage/demos/core/DataTableDemo.tsx
+var DataTableDemo_exports = /* @__PURE__ */ __exportAll({
+	default: () => DataTableDemo,
+	demoMeta: () => demoMeta
+});
+var demoMeta = {
+	title: "DataTable",
+	order: 20,
+	contentClassName: "flex flex-wrap gap-3 items-start"
+};
+function DataTableDemo() {
+	const [selectedKeys, setSelectedKeys] = useState([]);
+	return /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsxs("div", {
+		className: "w-full",
+		children: [/* @__PURE__ */ jsxs("p", {
+			className: "text-sm mb-2",
+			children: ["已选: ", JSON.stringify(selectedKeys)]
+		}), /* @__PURE__ */ jsx(DataTable, {
+			columns: [
+				{
+					key: "id",
+					title: "ID",
+					width: "60px"
+				},
+				{
+					key: "name",
+					title: "姓名"
+				},
+				{
+					key: "role1",
+					title: "角色1",
+					dataIndex: "role",
+					fixed: "left"
+				},
+				{
+					key: "status1",
+					title: "状态1",
+					dataIndex: "status",
+					fixed: "left"
+				},
+				{
+					key: "role2",
+					title: "角色2",
+					dataIndex: "role"
+				},
+				{
+					key: "status2",
+					title: "状态2",
+					dataIndex: "status"
+				},
+				{
+					key: "role3",
+					title: "角色3",
+					dataIndex: "role"
+				},
+				{
+					key: "status3",
+					title: "状态3",
+					dataIndex: "status"
+				},
+				{
+					key: "role4",
+					title: "角色4",
+					dataIndex: "role"
+				},
+				{
+					key: "status4",
+					title: "状态4",
+					dataIndex: "status"
+				},
+				{
+					key: "role5",
+					title: "角色5",
+					dataIndex: "role"
+				},
+				{
+					key: "status5",
+					title: "状态5",
+					dataIndex: "status"
+				},
+				{
+					key: "role6",
+					title: "角色6",
+					dataIndex: "role"
+				},
+				{
+					key: "status6",
+					title: "状态6",
+					dataIndex: "status"
+				},
+				{
+					key: "role7",
+					title: "角色",
+					dataIndex: "role",
+					fixed: "right"
+				},
+				{
+					key: "status7",
+					title: "状态",
+					dataIndex: "status"
+				},
+				{
+					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)
+						}
+					]
+				}
+			],
+			data: [
+				{
+					id: 1,
+					name: "张三",
+					role: "管理员",
+					role7: "管理员",
+					role6: "管理员",
+					role5: "管理员",
+					role4: "管理员",
+					role3: "管理员",
+					role2: "管理员",
+					role1: "管理员",
+					status: "正常",
+					status7: "正常",
+					status6: "正常",
+					status5: "正常",
+					status4: "正常",
+					status3: "正常",
+					status2: "正常",
+					status1: "正常"
+				},
+				{
+					id: 2,
+					name: "李四",
+					role: "用户",
+					role7: "用户",
+					role6: "用户",
+					role5: "用户",
+					role4: "用户",
+					role3: "用户",
+					role2: "用户",
+					role1: "用户",
+					status: "禁用",
+					status7: "禁用",
+					status6: "禁用",
+					status5: "禁用",
+					status4: "禁用",
+					status3: "禁用",
+					status2: "禁用",
+					status1: "禁用"
+				},
+				{
+					id: 3,
+					name: "王五",
+					role: "审计员",
+					role7: "审计员",
+					role6: "审计员",
+					role5: "审计员",
+					role4: "审计员",
+					role3: "审计员",
+					role2: "审计员",
+					role1: "审计员",
+					status: "正常",
+					status7: "正常",
+					status6: "正常",
+					status5: "正常",
+					status4: "正常",
+					status3: "正常",
+					status2: "正常",
+					status1: "正常"
+				},
+				{
+					id: 4,
+					name: "赵六",
+					role: "用户",
+					role7: "用户",
+					role6: "用户",
+					role5: "用户",
+					role4: "用户",
+					role3: "用户",
+					role2: "用户",
+					role1: "用户",
+					status: "正常",
+					status7: "正常",
+					status6: "正常",
+					status5: "正常",
+					status4: "正常",
+					status3: "正常",
+					status2: "正常",
+					status1: "正常"
+				},
+				{
+					id: 5,
+					name: "孙七",
+					role: "用户",
+					role7: "用户",
+					role6: "用户",
+					role5: "用户",
+					role4: "用户",
+					role3: "用户",
+					role2: "用户",
+					role1: "用户",
+					status: "正常",
+					status7: "正常",
+					status6: "正常",
+					status5: "正常",
+					status4: "正常",
+					status3: "正常",
+					status2: "正常",
+					status1: "正常"
+				}
+			],
+			rowKey: "id",
+			rowSelection: {
+				selectedRowKeys: selectedKeys,
+				onChange: (keys) => setSelectedKeys(keys)
+			}
+		})]
+	}) });
+}
+//#endregion
+export { DataTableDemo_exports, DataTableDemo as default, demoMeta };

package/fe/packages/react/ui/components/testPage/demos/core/DataTableDemo2.js

@@ -0,0 +1,4 @@
+//#region packages/react/ui/components/testPage/demos/core/DataTableDemo.tsx?raw
+var DataTableDemo_default = "import {\n    DataTable,\n    type TableColumnDef\n} from '@tc/ui-react/components'\nimport { useState } from 'react'\nimport type { DemoMeta } from '../../types'\n\nexport const demoMeta = {\n    title: 'DataTable',\n    order: 20,\n    contentClassName: 'flex flex-wrap gap-3 items-start',\n} satisfies DemoMeta\n\n// ─── DataTable ───────────────────────────────────────────────────────────────\n\ntype User = {\n    id: number\n    name: string\n    role: string\n    role1: string\n    role2: string\n    role3: string\n    role4: string\n    role5: string\n    role6: string\n    role7: string\n    status: string\n    status1: string\n    status2: string\n    status3: string\n    status4: string\n    status5: string\n    status6: string\n    status7: string\n}\n\nexport default function DataTableDemo() {\n    const [selectedKeys, setSelectedKeys] = useState<(string | number)[]>([])\n\n    const columns: TableColumnDef<User>[] = [\n        { key: 'id', title: 'ID', width: '60px' },\n        { key: 'name', title: '姓名' },\n        { key: 'role1', title: '角色1', dataIndex: 'role', fixed: 'left' },\n        { key: 'status1', title: '状态1', dataIndex: 'status', fixed: 'left' },\n        { key: 'role2', title: '角色2', dataIndex: 'role' },\n        { key: 'status2', title: '状态2', dataIndex: 'status' },\n        { key: 'role3', title: '角色3', dataIndex: 'role' },\n        { key: 'status3', title: '状态3', dataIndex: 'status' },\n        { key: 'role4', title: '角色4', dataIndex: 'role' },\n        { key: 'status4', title: '状态4', dataIndex: 'status' },\n        { key: 'role5', title: '角色5', dataIndex: 'role' },\n        { key: 'status5', title: '状态5', dataIndex: 'status' },\n        { key: 'role6', title: '角色6', dataIndex: 'role' },\n        { key: 'status6', title: '状态6', dataIndex: 'status' },\n        { key: 'role7', title: '角色', dataIndex: 'role', fixed: 'right' },\n        { key: 'status7', title: '状态', dataIndex: 'status' },\n        {\n            key: 'action',\n            title: '操作',\n            width: '96px',\n            actionOverflow: 'dropdown',\n            actions: (_, record) => [\n                { key: 'edit', label: '修改', onClick: () => console.log('edit', record.id) },\n                { key: 'view', label: '查看', onClick: () => console.log('view', record.id) },\n                { key: 'delete', label: '删除', danger: true, onClick: () => console.log('delete', record.id) },\n            ],\n        },\n    ]\n\n    const data: User[] = [\n        {\n            id: 1,\n            name: '张三',\n            role: '管理员',\n            role7: '管理员',\n            role6: '管理员',\n            role5: '管理员',\n            role4: '管理员',\n            role3: '管理员',\n            role2: '管理员',\n            role1: '管理员',\n            status: '正常',\n            status7: '正常',\n            status6: '正常',\n            status5: '正常',\n            status4: '正常',\n            status3: '正常',\n            status2: '正常',\n            status1: '正常',\n        },\n        {\n            id: 2,\n            name: '李四',\n            role: '用户',\n            role7: '用户',\n            role6: '用户',\n            role5: '用户',\n            role4: '用户',\n            role3: '用户',\n            role2: '用户',\n            role1: '用户',\n            status: '禁用',\n            status7: '禁用',\n            status6: '禁用',\n            status5: '禁用',\n            status4: '禁用',\n            status3: '禁用',\n            status2: '禁用',\n            status1: '禁用',\n        },\n        {\n            id: 3,\n            name: '王五',\n            role: '审计员',\n            role7: '审计员',\n            role6: '审计员',\n            role5: '审计员',\n            role4: '审计员',\n            role3: '审计员',\n            role2: '审计员',\n            role1: '审计员',\n            status: '正常',\n            status7: '正常',\n            status6: '正常',\n            status5: '正常',\n            status4: '正常',\n            status3: '正常',\n            status2: '正常',\n            status1: '正常',\n        },\n        {\n            id: 4,\n            name: '赵六',\n            role: '用户',\n            role7: '用户',\n            role6: '用户',\n            role5: '用户',\n            role4: '用户',\n            role3: '用户',\n            role2: '用户',\n            role1: '用户',\n            status: '正常',\n            status7: '正常',\n            status6: '正常',\n            status5: '正常',\n            status4: '正常',\n            status3: '正常',\n            status2: '正常',\n            status1: '正常',\n        },\n        {\n            id: 5,\n            name: '孙七',\n            role: '用户',\n            role7: '用户',\n            role6: '用户',\n            role5: '用户',\n            role4: '用户',\n            role3: '用户',\n            role2: '用户',\n            role1: '用户',\n            status: '正常',\n            status7: '正常',\n            status6: '正常',\n            status5: '正常',\n            status4: '正常',\n            status3: '正常',\n            status2: '正常',\n            status1: '正常',\n        },\n    ]\n\n    return (\n        <>\n            <div className=\"w-full\">\n                <p className=\"text-sm mb-2\">已选: {JSON.stringify(selectedKeys)}</p>\n                <DataTable\n                    columns={columns}\n                    data={data}\n                    rowKey=\"id\"\n                    rowSelection={{\n                        selectedRowKeys: selectedKeys,\n                        onChange: (keys) => setSelectedKeys(keys),\n                    }}\n                />\n            </div>\n        </>\n    )\n}\n";
+//#endregion
+export { DataTableDemo_default as default };

package/fe/packages/react/ui/components/testPage/demos/core/DrawerDemo.d.ts

@@ -0,0 +1,6 @@
+export declare const demoMeta: {
+    title: string;
+    order: number;
+    contentClassName: string;
+};
+export default function DrawerDemo(): import("react/jsx-runtime").JSX.Element;