@_tc/template-core 0.2.1 → 0.2.3

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

@@ -1,1636 +1,43 @@
-import { Loading } from "../Loading/Loading.js";
-import { Button } from "../Button/Button.js";
-import { Breadcrumb, BreadcrumbItem, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "../breadcrumb/breadcrumb.js";
-import { Card } from "../Card/Card.js";
-import { Checkbox } from "../Checkbox/Checkbox.js";
-import { Modal } from "../Modal/Modal.js";
-import { modal } from "../Modal/ModalManager.js";
-import { ConfirmDialog } from "../ConfirmDialog/ConfirmDialog.js";
-import { Input } from "../Input/Input.js";
-import { Select } from "../Select/Select.js";
-import { Pagination } from "../Pagination/Pagination.js";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../table/table.js";
-import { Skeleton } from "../Skeleton/Skeleton.js";
-import { Dropdown } from "../Dropdown/Dropdown.js";
-import { DataTable } from "../DataTable/index.js";
-import { Drawer } from "../Drawer/Drawer.js";
-import { Form } from "../Form/Form.js";
-import { Label } from "../Label/Label.js";
-import { FormItem } from "../Form/FormItem.js";
-import { useForm } from "../Form/useForm.js";
-import { SchemaForm } from "../Form/SchemaForm/index.js";
-import { PreviewImage } from "../ImagePreview/PreviewImage.js";
-import { InputNumber } from "../InputNumber/InputNumber.js";
-import { Layout } from "../Layout/Layout.js";
-import { message } from "../Message/MessageManager.js";
-import { Notification } from "../Notification/Notification.js";
-import { RadioGroup } from "../Radio/RadioGroup.js";
-import { Radio } from "../Radio/Radio.js";
-import Search from "../Search/Search.js";
-import { Switch } from "../Switch/Switch.js";
-import TableSearch from "../TableSearch/TableSearch.js";
-import { Tabs } from "../Tabs/Tabs.js";
-import { Textarea } from "../Textarea/Textarea.js";
-import { Tooltip } from "../Tooltip/Tooltip.js";
-import { TreeSelect } from "../TreeSelect/TreeSelect.js";
-import { ImageUpload } from "../Upload/ImageUpload.js";
-import "../index.js";
-import DateTestPage from "../Date/DateTestPage.js";
-import MenuTestPage from "./MenuTestPage.js";
-import React, { useEffect, useRef, useState } from "react";
+import { DemoSection } from "./DemoSection.js";
+import { coreDemos, dateDemos, menuDemos } from "./demoRegistry.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region packages/react/ui/components/testPage/index.tsx
-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 /* @__PURE__ */ jsx(Section, {
-		title: "Theme",
-		children: /* @__PURE__ */ jsxs("div", {
-			className: "flex w-full flex-wrap items-center gap-6 rounded-xl border border-border bg-background p-4",
-			children: [
-				/* @__PURE__ */ jsxs("div", {
-					className: "flex items-center gap-2",
-					children: [
-						/* @__PURE__ */ jsx("span", {
-							className: "text-sm text-muted-foreground",
-							children: "模式"
-						}),
-						/* @__PURE__ */ jsx(Button, {
-							variant: mode === "light" ? "primary" : "default",
-							size: "sm",
-							onClick: () => setMode("light"),
-							children: "Light"
-						}),
-						/* @__PURE__ */ jsx(Button, {
-							variant: mode === "dark" ? "primary" : "default",
-							size: "sm",
-							onClick: () => setMode("dark"),
-							children: "Dark"
-						})
-					]
-				}),
-				/* @__PURE__ */ jsxs("div", {
-					className: "flex items-center gap-2",
-					children: [
-						/* @__PURE__ */ jsx("span", {
-							className: "text-sm text-muted-foreground",
-							children: "主题"
-						}),
-						/* @__PURE__ */ jsx(Button, {
-							variant: theme === "default" ? "primary" : "default",
-							size: "sm",
-							onClick: () => setTheme("default"),
-							children: "Default"
-						}),
-						/* @__PURE__ */ jsx(Button, {
-							variant: theme === "green" ? "primary" : "default",
-							size: "sm",
-							onClick: () => setTheme("green"),
-							children: "Green"
-						}),
-						/* @__PURE__ */ jsx(Button, {
-							variant: theme === "gray" ? "primary" : "default",
-							size: "sm",
-							onClick: () => setTheme("gray"),
-							children: "Gray"
-						})
-					]
-				}),
-				/* @__PURE__ */ jsxs("div", {
-					className: "text-sm text-muted-foreground",
-					children: [
-						"当前: ",
-						mode,
-						" / ",
-						theme
-					]
-				})
-			]
-		})
-	});
-}
-function Section({ title, children }) {
+function DemoGroup({ title, description, demos }) {
 	return /* @__PURE__ */ jsxs("div", {
-		className: "mb-8",
-		children: [/* @__PURE__ */ jsx("h2", {
-			className: "text-lg font-semibold mb-3 border-b pb-1",
+		className: "space-y-8",
+		children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h1", {
+			className: "text-3xl font-bold mb-2",
 			children: title
-		}), /* @__PURE__ */ jsx("div", {
-			className: "flex flex-wrap gap-3 items-start",
-			children
-		})]
-	});
-}
-function ButtonDemo() {
-	const [loading, setLoading] = useState(false);
-	return /* @__PURE__ */ jsxs(Section, {
-		title: "Button",
-		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"
-			})
-		]
-	});
-}
-function InputDemo() {
-	return /* @__PURE__ */ jsxs(Section, {
-		title: "Input",
-		children: [
-			/* @__PURE__ */ jsx(Input, {
-				placeholder: "普通输入框",
-				className: "w-48"
-			}),
-			/* @__PURE__ */ jsx(Input, {
-				allowClear: true,
-				defaultValue: "可清空内容",
-				placeholder: "清空按钮",
-				className: "w-48"
-			}),
-			/* @__PURE__ */ jsx(Input, {
-				type: "password",
-				placeholder: "密码输入框",
-				className: "w-48"
-			}),
-			/* @__PURE__ */ jsx(Input, {
-				type: "password",
-				defaultValue: "template-core",
-				placeholder: "密码默认值",
-				className: "w-48"
-			}),
-			/* @__PURE__ */ jsx(Input, {
-				type: "password",
-				placeholder: "密码 + addon",
-				addonAfter: /* @__PURE__ */ jsx("span", {
-					className: "text-xs text-muted-foreground",
-					children: "PWD"
-				}),
-				className: "w-56"
-			}),
-			/* @__PURE__ */ jsx(Input, {
-				disabled: true,
-				placeholder: "禁用状态",
-				className: "w-48"
-			})
-		]
-	});
-}
-function InputNumberDemo() {
-	const [price, setPrice] = useState(12.5);
-	const [ratio, setRatio] = useState(.25);
-	return /* @__PURE__ */ jsxs(Section, {
-		title: "InputNumber",
-		children: [
-			/* @__PURE__ */ jsx(InputNumber, {
-				placeholder: "基础数字输入",
-				className: "w-48"
-			}),
-			/* @__PURE__ */ jsx(InputNumber, {
-				value: price,
-				onChange: setPrice,
-				precision: 2,
-				min: 0,
-				max: 9999,
-				placeholder: "价格",
-				addonAfter: /* @__PURE__ */ jsx("span", {
-					className: "text-xs text-muted-foreground",
-					children: "CNY"
-				}),
-				className: "w-56"
-			}),
-			/* @__PURE__ */ jsx(InputNumber, {
-				value: ratio,
-				onChange: setRatio,
-				precision: 2,
-				step: .05,
-				min: 0,
-				max: 1,
-				allowStep: true,
-				placeholder: "比例",
-				className: "w-48"
-			}),
-			/* @__PURE__ */ jsx(InputNumber, {
-				defaultValue: 10,
-				step: .5,
-				precision: 1,
-				allowStep: true,
-				allowClear: true,
-				className: "w-48"
-			}),
-			/* @__PURE__ */ jsx(InputNumber, {
-				disabled: true,
-				defaultValue: 88.8,
-				precision: 1,
-				className: "w-48"
-			})
-		]
-	});
-}
-function TextareaDemo() {
-	const [val, setVal] = useState("");
-	return /* @__PURE__ */ jsxs(Section, {
-		title: "Textarea",
-		children: [/* @__PURE__ */ jsx(Textarea, {
-			placeholder: "请输入内容（最多 500 字）",
-			value: val,
-			onChange: (v) => setVal(v),
-			className: "w-80"
-		}), /* @__PURE__ */ jsx(Textarea, {
-			placeholder: "不显示计数",
-			showCount: false,
-			className: "w-80"
-		})]
-	});
-}
-function SelectDemo() {
-	const [val, setVal] = useState(void 0);
-	const options = [
-		{
-			label: "选项 A",
-			value: "a"
-		},
-		{
-			label: "选项 B",
-			value: "b"
-		},
-		{
-			label: "选项 C",
-			value: "c"
-		}
-	];
-	return /* @__PURE__ */ jsxs(Section, {
-		title: "Select",
-		children: [
-			/* @__PURE__ */ jsx(Select, {
-				options,
-				value: val,
-				onChange: setVal,
-				placeholder: "请选择",
-				className: "w-40"
-			}),
-			/* @__PURE__ */ jsx(Select, {
-				options,
-				placeholder: "不可搜索",
-				searchable: false,
-				className: "w-40"
-			}),
-			/* @__PURE__ */ jsx(Select, {
-				options,
-				placeholder: "不可清除",
-				clearable: false,
-				className: "w-40"
-			}),
-			/* @__PURE__ */ jsx(Select, {
-				options,
-				disabled: true,
-				placeholder: "禁用",
-				className: "w-40"
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				className: "relative w-64 rounded-lg border border-border bg-muted/30 p-4",
-				children: [/* @__PURE__ */ jsx("div", {
-					className: "mb-2 text-sm text-muted-foreground",
-					children: "parent popup container"
-				}), /* @__PURE__ */ jsx(Select, {
-					options,
-					placeholder: "挂载到父元素",
-					getPopupContainer: "parent",
-					className: "w-full"
-				})]
-			})
-		]
-	});
-}
-function CheckboxDemo() {
-	const [checked, setChecked] = useState(false);
-	return /* @__PURE__ */ jsxs(Section, {
-		title: "Checkbox",
-		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: "禁用" })]
-			})
-		]
-	});
-}
-function SwitchDemo() {
-	const [on, setOn] = useState(false);
-	return /* @__PURE__ */ jsxs(Section, {
-		title: "Switch",
-		children: [
-			/* @__PURE__ */ jsx(Switch, {
-				checked: on,
-				onChange: setOn
-			}),
-			/* @__PURE__ */ jsx("span", {
-				className: "self-center text-sm",
-				children: on ? "ON" : "OFF"
-			}),
-			/* @__PURE__ */ jsx(Switch, { defaultChecked: true }),
-			/* @__PURE__ */ jsx(Switch, { disabled: true }),
-			/* @__PURE__ */ jsx(Switch, {
-				disabled: true,
-				checked: true
-			})
-		]
-	});
-}
-function TooltipDemo() {
-	return /* @__PURE__ */ jsx(Section, {
-		title: "Tooltip",
-		children: [
-			"top",
-			"bottom",
-			"left",
-			"right"
-		].map((p) => /* @__PURE__ */ jsx(Tooltip, {
-			content: `placement: ${p}`,
-			placement: p,
-			children: /* @__PURE__ */ 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 /* @__PURE__ */ jsxs(Section, {
-		title: "Dropdown",
-		children: [/* @__PURE__ */ jsx(Dropdown, {
-			items,
-			children: /* @__PURE__ */ jsx(Button, { children: "操作 ▾" })
-		}), /* @__PURE__ */ jsx(Dropdown, {
-			items,
-			placement: "bottom-start",
-			children: /* @__PURE__ */ jsx(Button, {
-				variant: "text",
-				children: "bottom-start ▾"
-			})
-		})]
-	});
-}
-function MessageDemo() {
-	return /* @__PURE__ */ jsxs(Section, {
-		title: "Message (imperative)",
-		children: [
-			/* @__PURE__ */ jsx(Button, {
-				onClick: () => message.success("操作成功"),
-				children: "success"
-			}),
-			/* @__PURE__ */ jsx(Button, {
-				onClick: () => message.error("操作失败"),
-				children: "error"
-			}),
-			/* @__PURE__ */ jsx(Button, {
-				onClick: () => message.warning("警告信息"),
-				children: "warning"
-			}),
-			/* @__PURE__ */ jsx(Button, {
-				onClick: () => message.info("提示信息"),
-				children: "info"
-			}),
-			/* @__PURE__ */ jsx(Button, {
-				onClick: () => {
-					const id = message.success("5秒后关闭", { duration: 5e3 });
-					setTimeout(() => message.close(id), 2e3);
-				},
-				children: "提前关闭"
-			})
-		]
-	});
-}
-function ModalDemo() {
-	const [open, setOpen] = useState(false);
-	return /* @__PURE__ */ jsxs(Section, {
-		title: "Modal",
-		children: [
-			/* @__PURE__ */ jsx(Button, {
-				onClick: () => setOpen(true),
-				children: "JSX Modal"
-			}),
-			/* @__PURE__ */ jsx(Button, {
-				onClick: () => modal.open({
-					title: "命令式弹窗",
-					content: /* @__PURE__ */ jsx("p", { children: "这是命令式打开的弹窗内容。" })
-				}),
-				children: "modal.open"
-			}),
-			/* @__PURE__ */ jsx(Button, {
-				onClick: () => modal.confirm({
-					title: "确认操作",
-					content: "确定要执行此操作吗？",
-					onOk: () => {
-						message.success("已确认");
-					},
-					onCancel: () => {
-						message.info("已取消");
-					}
-				}),
-				children: "modal.confirm"
-			}),
-			/* @__PURE__ */ jsxs(Modal, {
-				open,
-				onClose: () => setOpen(false),
-				title: "JSX 弹窗",
-				children: [/* @__PURE__ */ jsx("p", { children: "这是一个使用 JSX 控制的弹窗。" }), /* @__PURE__ */ jsx("div", {
-					className: "mt-4 flex justify-end gap-2",
-					children: /* @__PURE__ */ jsx(Button, {
-						onClick: () => setOpen(false),
-						children: "关闭"
-					})
-				})]
-			})
-		]
-	});
-}
-function DrawerDemo() {
-	const [placement, setPlacement] = useState("right");
-	const [open, setOpen] = useState(false);
-	const openDrawer = (nextPlacement) => {
-		setPlacement(nextPlacement);
-		setOpen(true);
-	};
-	return /* @__PURE__ */ jsxs(Section, {
-		title: "Drawer",
-		children: [
-			/* @__PURE__ */ jsx(Button, {
-				onClick: () => openDrawer("left"),
-				children: "left"
-			}),
-			/* @__PURE__ */ jsx(Button, {
-				onClick: () => openDrawer("right"),
-				children: "right"
-			}),
-			/* @__PURE__ */ jsx(Button, {
-				onClick: () => openDrawer("top"),
-				children: "top"
-			}),
-			/* @__PURE__ */ jsx(Button, {
-				onClick: () => openDrawer("bottom"),
-				children: "bottom"
-			}),
-			/* @__PURE__ */ jsx(Button, {
-				onClick: () => openDrawer("right"),
-				variant: "primary",
-				children: "打开详情"
-			}),
-			/* @__PURE__ */ jsx(Drawer, {
-				open,
-				onClose: () => setOpen(false),
-				title: `Drawer ${placement}`,
-				placement,
-				width: 420,
-				height: 320,
-				footer: /* @__PURE__ */ jsxs("div", {
-					className: "flex justify-end gap-2",
-					children: [/* @__PURE__ */ jsx(Button, {
-						onClick: () => setOpen(false),
-						children: "取消"
-					}), /* @__PURE__ */ jsx(Button, {
-						variant: "primary",
-						onClick: () => {
-							message.success("已保存");
-							setOpen(false);
-						},
-						children: "保存"
-					})]
-				}),
-				children: /* @__PURE__ */ jsxs("div", {
-					className: "space-y-4",
-					children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
-						className: "mb-1 text-sm font-medium text-foreground",
-						children: "外部 children"
-					}), /* @__PURE__ */ jsx("p", {
-						className: "text-sm leading-6 text-muted-foreground",
-						children: "这里的内容完全由调用方定义，可以放表单、列表、详情或任意 JSX。"
-					})] }), /* @__PURE__ */ jsxs("div", {
-						className: "grid gap-3",
-						children: [/* @__PURE__ */ jsx(Label, {
-							label: "名称",
-							layout: "vertical",
-							children: /* @__PURE__ */ jsx(Input, { placeholder: "请输入名称" })
-						}), /* @__PURE__ */ jsx(Label, {
-							label: "状态",
-							layout: "vertical",
-							children: /* @__PURE__ */ jsx(Select, {
-								placeholder: "请选择状态",
-								options: [{
-									label: "启用",
-									value: "enabled"
-								}, {
-									label: "停用",
-									value: "disabled"
-								}]
-							})
-						})]
-					})]
-				})
-			})
-		]
-	});
-}
-function ConfirmDialogDemo() {
-	const [open, setOpen] = useState(false);
-	return /* @__PURE__ */ jsxs(Section, {
-		title: "ConfirmDialog",
-		children: [/* @__PURE__ */ jsx(Button, {
-			onClick: () => setOpen(true),
-			children: "打开确认框"
-		}), /* @__PURE__ */ jsx(ConfirmDialog, {
-			open,
-			title: "删除确认",
-			content: "确定要删除此条数据吗？此操作不可撤销。",
-			onOk: () => {
-				message.success("已删除");
-				setOpen(false);
-			},
-			onCancel: () => setOpen(false)
-		})]
-	});
-}
-function PaginationDemo() {
-	const [page, setPage] = useState(1);
-	const [pageSize, setPageSize] = useState(10);
-	return /* @__PURE__ */ jsx(Section, {
-		title: "Pagination",
-		children: /* @__PURE__ */ jsxs("div", {
-			className: "w-full",
-			children: [/* @__PURE__ */ jsxs("p", {
-				className: "text-sm mb-2",
-				children: [
-					"当前页: ",
-					page,
-					" / 每页: ",
-					pageSize
-				]
-			}), /* @__PURE__ */ jsx(Pagination, {
-				current: page,
-				pageSize,
-				total: 238,
-				onChange: setPage,
-				onPageSizeChange: setPageSize
-			})]
-		})
-	});
-}
-function TableDemo() {
-	return /* @__PURE__ */ jsx(Section, {
-		title: "Table (低层)",
-		children: /* @__PURE__ */ jsx("div", {
-			className: "w-full",
-			children: /* @__PURE__ */ jsxs(Table, { children: [/* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs("tr", { children: [
-				/* @__PURE__ */ jsx(TableHead, { children: "ID" }),
-				/* @__PURE__ */ jsx(TableHead, { children: "姓名" }),
-				/* @__PURE__ */ jsx(TableHead, { children: "角色" }),
-				/* @__PURE__ */ jsx(TableHead, { children: "状态" }),
-				/* @__PURE__ */ jsx(TableHead, {
-					isAction: true,
-					children: "操作"
-				})
-			] }) }), /* @__PURE__ */ jsx(TableBody, { children: [
-				{
-					id: 1,
-					name: "张三",
-					role: "管理员",
-					status: "正常"
-				},
-				{
-					id: 2,
-					name: "李四",
-					role: "用户",
-					status: "禁用"
-				},
-				{
-					id: 3,
-					name: "王五",
-					role: "审计员",
-					status: "正常"
-				}
-			].map((row) => /* @__PURE__ */ jsxs(TableRow, { children: [
-				/* @__PURE__ */ jsx(TableCell, { children: row.id }),
-				/* @__PURE__ */ jsx(TableCell, { children: row.name }),
-				/* @__PURE__ */ jsx(TableCell, { children: row.role }),
-				/* @__PURE__ */ jsx(TableCell, { children: row.status }),
-				/* @__PURE__ */ jsx(TableCell, {
-					isAction: true,
-					children: /* @__PURE__ */ jsx(Button, {
-						variant: "link",
-						size: "sm",
-						children: "编辑"
-					})
-				})
-			] }, row.id)) })] })
-		})
-	});
-}
-function DataTableDemo() {
-	const [selectedKeys, setSelectedKeys] = useState([]);
-	return /* @__PURE__ */ jsx(Section, {
-		title: "DataTable",
-		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)
-				}
-			})]
-		})
-	});
-}
-function SearchDemo() {
-	return /* @__PURE__ */ jsx(Section, {
-		title: "Search",
-		children: /* @__PURE__ */ jsx("div", {
-			className: "w-full",
-			children: /* @__PURE__ */ 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: [/* @__PURE__ */ jsx(Button, {
-					type: "submit",
-					variant: "primary",
-					children: "搜索"
-				}), /* @__PURE__ */ jsx(Button, {
-					type: "reset",
-					children: "重置"
-				})]
-			})
-		})
-	});
-}
-function BreadcrumbDemo() {
-	const [items, setItems] = useState([
-		{
-			id: "home",
-			label: "首页"
-		},
-		{
-			id: "list",
-			label: "用户列表"
-		},
-		{
-			id: "detail",
-			label: "用户详情",
-			active: true
-		}
-	]);
-	return /* @__PURE__ */ jsx(Section, {
-		title: "Breadcrumb",
-		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)) }) })
-	});
-}
-function LabelDemo() {
-	return /* @__PURE__ */ jsxs(Section, {
-		title: "Label",
-		children: [/* @__PURE__ */ jsx(Label, {
-			label: "水平布局",
-			layout: "horizontal",
-			children: /* @__PURE__ */ jsx("span", {
-				className: "text-sm",
-				children: "内容区域"
-			})
-		}), /* @__PURE__ */ jsx(Label, {
-			label: "垂直布局",
-			layout: "vertical",
-			children: /* @__PURE__ */ jsx("span", {
-				className: "text-sm",
-				children: "内容区域"
-			})
-		})]
-	});
-}
-function FormDemo() {
-	const [form] = useForm();
-	return /* @__PURE__ */ jsx(Section, {
-		title: "Form",
-		children: /* @__PURE__ */ jsxs(Form, {
-			form,
-			onFinish: (v) => console.log("表单值:", v),
-			children: [
-				/* @__PURE__ */ jsx(FormItem, {
-					name: "username",
-					label: "用户名",
-					required: true,
-					rules: [{
-						required: true,
-						message: "请输入用户名"
-					}],
-					children: /* @__PURE__ */ jsx(Input, { placeholder: "请输入用户名" })
-				}),
-				/* @__PURE__ */ jsx(FormItem, {
-					name: "password",
-					label: "密码",
-					required: true,
-					rules: [{
-						required: true,
-						message: "请输入密码"
-					}],
-					children: /* @__PURE__ */ jsx(Input, {
-						type: "password",
-						placeholder: "请输入密码"
-					})
-				}),
-				/* @__PURE__ */ jsx(Button, {
-					type: "submit",
-					children: "提交"
-				})
-			]
-		})
-	});
-}
-function SchemaFormDemo() {
-	const form = useRef(void 0);
-	return /* @__PURE__ */ jsx(Section, {
-		title: "SchemaForm",
-		children: /* @__PURE__ */ 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 /* @__PURE__ */ jsx(Section, {
-		title: "TableSearch",
-		children: /* @__PURE__ */ 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 /* @__PURE__ */ jsx(Section, {
-		title: "Skeleton",
-		children: /* @__PURE__ */ jsxs("div", {
-			className: "w-full space-y-4",
-			children: [
-				/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
-					className: "text-xs text-gray-500 mb-1",
-					children: "pageloading"
-				}), /* @__PURE__ */ jsx(Skeleton, {
-					mode: "pageloading",
-					rows: 3,
-					showTitle: true,
-					showActions: true
-				})] }),
-				/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
-					className: "text-xs text-gray-500 mb-1",
-					children: "tableloading"
-				}), /* @__PURE__ */ jsx(Skeleton, {
-					mode: "tableloading",
-					rows: 4
-				})] }),
-				/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
-					className: "text-xs text-gray-500 mb-1",
-					children: "componentsloading"
-				}), /* @__PURE__ */ jsx(Skeleton, {
-					mode: "componentsloading",
-					rows: 2
-				})] })
-			]
-		})
-	});
-}
-function TreeSelectDemo() {
-	const [value, setValue] = useState(["1.1.1", "1.1.2"]);
-	const [indeterminate, setIndeterminate] = useState([]);
-	return /* @__PURE__ */ jsx(Section, {
-		title: "TreeSelect",
-		children: /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
-			className: "text-sm mb-2",
-			children: [/* @__PURE__ */ jsxs("span", { children: ["选中: ", JSON.stringify(value)] }), /* @__PURE__ */ jsxs("span", {
-				className: "ml-4",
-				children: ["半选: ", JSON.stringify(indeterminate)]
-			})]
-		}), /* @__PURE__ */ jsx(TreeSelect, {
-			data: [{
-				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"
-					}]
-				}]
-			}],
-			value,
-			onChange: ({ checked, indeterminate }) => {
-				setValue(checked);
-				setIndeterminate(indeterminate);
-			}
-		})] })
-	});
-}
-function PreviewImageDemo() {
-	return /* @__PURE__ */ jsx(Section, {
-		title: "PreviewImage",
-		children: /* @__PURE__ */ jsx(PreviewImage, {
-			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"],
-			initialIndex: 0
-		})
-	});
-}
-function ImageUploadDemo() {
-	return /* @__PURE__ */ jsx(Section, {
-		title: "ImageUpload",
-		children: /* @__PURE__ */ jsx(ImageUpload, {
-			accept: ".jpg,.png",
-			maxCount: 4,
-			beforeChange: (f) => {
-				console.log(f);
-				return parseInt(Math.random() * 10 + "") % 2 === 0;
-			}
-		})
-	});
-}
-function RadioDemo() {
-	const [selected, setSelected] = useState("a");
-	const [groupValue, setGroupValue] = useState("green");
-	return /* @__PURE__ */ jsxs(Section, {
-		title: "Radio",
-		children: [
-			/* @__PURE__ */ jsxs("div", {
-				className: "space-y-2",
-				children: [/* @__PURE__ */ jsxs("p", {
-					className: "text-sm text-muted-foreground",
-					children: ["受控: ", selected]
-				}), [
-					{
-						label: "选项 A",
-						value: "a"
-					},
-					{
-						label: "选项 B",
-						value: "b"
-					},
-					{
-						label: "选项 C",
-						value: "c"
-					}
-				].map((opt) => /* @__PURE__ */ jsx(Radio, {
-					name: "demo-radio",
-					label: opt.label,
-					checked: selected === opt.value,
-					onChange: () => setSelected(opt.value)
-				}, opt.value))]
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				className: "space-y-2 ml-8",
-				children: [
-					/* @__PURE__ */ jsx("p", {
-						className: "text-sm text-muted-foreground",
-						children: "非受控默认选中"
-					}),
-					/* @__PURE__ */ jsx(Radio, {
-						name: "demo-radio-2",
-						label: "默认选中",
-						defaultChecked: true
-					}),
-					/* @__PURE__ */ jsx(Radio, {
-						name: "demo-radio-2",
-						label: "禁用状态",
-						disabled: true
-					}),
-					/* @__PURE__ */ jsx(Radio, {
-						name: "demo-radio-2",
-						label: "禁用且选中",
-						disabled: true,
-						defaultChecked: true
-					})
-				]
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				className: "w-full ml-8 space-y-2",
-				children: [/* @__PURE__ */ jsxs("p", {
-					className: "text-sm text-muted-foreground",
-					children: ["RadioGroup 垂直布局: ", groupValue]
-				}), /* @__PURE__ */ jsxs(RadioGroup, {
-					name: "demo-group",
-					value: groupValue,
-					onChange: setGroupValue,
-					children: [
-						/* @__PURE__ */ jsx(Radio, {
-							value: "default",
-							label: "默认主题"
-						}),
-						/* @__PURE__ */ jsx(Radio, {
-							value: "green",
-							label: "绿色主题"
-						}),
-						/* @__PURE__ */ jsx(Radio, {
-							value: "gray",
-							label: "灰色主题"
-						})
-					]
-				})]
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				className: "w-full ml-8 space-y-2",
-				children: [/* @__PURE__ */ jsx("p", {
-					className: "text-sm text-muted-foreground",
-					children: "RadioGroup 水平布局 (非受控)"
-				}), /* @__PURE__ */ jsxs(RadioGroup, {
-					name: "demo-group-2",
-					defaultValue: "b",
-					direction: "horizontal",
-					children: [
-						/* @__PURE__ */ jsx(Radio, {
-							value: "a",
-							label: "选项 A"
-						}),
-						/* @__PURE__ */ jsx(Radio, {
-							value: "b",
-							label: "选项 B"
-						}),
-						/* @__PURE__ */ jsx(Radio, {
-							value: "c",
-							label: "选项 C"
-						}),
-						/* @__PURE__ */ jsx(Radio, {
-							value: "d",
-							label: "禁用选项",
-							disabled: true
-						})
-					]
-				})]
-			})
-		]
-	});
-}
-function NotificationDemo() {
-	return /* @__PURE__ */ jsx(Section, {
-		title: "Notification",
-		children: /* @__PURE__ */ jsxs("div", {
-			className: "w-full space-y-3",
-			children: [
-				/* @__PURE__ */ jsx(Notification, {
-					type: "info",
-					title: "信息提示",
-					message: "这是一条普通信息通知。"
-				}),
-				/* @__PURE__ */ jsx(Notification, {
-					type: "success",
-					title: "操作成功",
-					message: "数据已成功保存。"
-				}),
-				/* @__PURE__ */ jsx(Notification, {
-					type: "warning",
-					title: "警告",
-					message: "请注意检查配置项是否正确。"
-				}),
-				/* @__PURE__ */ jsx(Notification, {
-					type: "error",
-					title: "错误",
-					message: "请求失败，请稍后重试。",
-					closable: false
-				}),
-				/* @__PURE__ */ jsx(Notification, {
-					type: "info",
-					title: "不自动关闭",
-					message: "此通知需要手动关闭。",
-					duration: 0
-				})
-			]
-		})
-	});
-}
-function LoadingDemo() {
-	return /* @__PURE__ */ jsx(Section, {
-		title: "Loading",
-		children: /* @__PURE__ */ jsxs("div", {
-			className: "flex items-end gap-8",
-			children: [
-				/* @__PURE__ */ jsx(Loading, {
-					size: "sm",
-					text: "加载中..."
-				}),
-				/* @__PURE__ */ jsx(Loading, {
-					size: "md",
-					text: "加载中..."
-				}),
-				/* @__PURE__ */ jsx(Loading, { size: "lg" })
-			]
-		})
-	});
-}
-function LayoutDemo() {
-	return /* @__PURE__ */ jsx(Section, {
-		title: "Layout",
-		children: /* @__PURE__ */ jsx("div", {
-			className: "w-full h-80 border rounded-lg overflow-hidden",
-			children: /* @__PURE__ */ jsx(Layout, {
-				header: /* @__PURE__ */ jsx("div", {
-					className: "flex items-center h-12 px-4 text-sm font-medium",
-					children: "Header"
-				}),
-				sidebar: /* @__PURE__ */ jsxs("div", {
-					className: "p-4",
-					children: [/* @__PURE__ */ jsx("p", {
-						className: "text-sm font-medium mb-2",
-						children: "Sidebar"
-					}), /* @__PURE__ */ jsxs("div", {
-						className: "space-y-1",
-						children: [
-							/* @__PURE__ */ jsx("div", {
-								className: "text-sm text-muted-foreground p-1 rounded hover:bg-muted cursor-pointer",
-								children: "菜单项 1"
-							}),
-							/* @__PURE__ */ jsx("div", {
-								className: "text-sm text-muted-foreground p-1 rounded hover:bg-muted cursor-pointer",
-								children: "菜单项 2"
-							}),
-							/* @__PURE__ */ jsx("div", {
-								className: "text-sm text-muted-foreground p-1 rounded hover:bg-muted cursor-pointer",
-								children: "菜单项 3"
-							})
-						]
-					})]
-				}),
-				footer: /* @__PURE__ */ jsx("div", {
-					className: "flex items-center h-10 px-4 text-xs text-muted-foreground",
-					children: "Footer"
-				}),
-				children: /* @__PURE__ */ jsxs("div", {
-					className: "p-4",
-					children: [/* @__PURE__ */ jsx("p", {
-						className: "text-sm font-medium mb-1",
-						children: "Content"
-					}), /* @__PURE__ */ jsx("p", {
-						className: "text-xs text-muted-foreground",
-						children: "这是主要内容区域。"
-					})]
-				})
-			})
-		})
-	});
-}
-function CardDemo() {
-	return /* @__PURE__ */ jsxs(Section, {
-		title: "Card",
-		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 的简洁卡片。"
-				})
-			})
-		})]
-	});
-}
-function TabsDemo() {
-	const [activeTab, setActiveTab] = useState("tab1");
-	return /* @__PURE__ */ jsx(Section, {
-		title: "Tabs",
-		children: /* @__PURE__ */ jsxs("div", {
-			className: "w-full",
-			children: [/* @__PURE__ */ jsx(Tabs, {
-				items: [
-					{
-						key: "tab1",
-						label: "标签页 1"
-					},
-					{
-						key: "tab2",
-						label: "标签页 2"
-					},
-					{
-						key: "tab3",
-						label: "标签页 3"
-					},
-					{
-						key: "tab4",
-						label: "禁用标签",
-						disabled: true
-					}
-				],
-				activeKey: activeTab,
-				onChange: setActiveTab
-			}), /* @__PURE__ */ jsx("div", {
-				className: "p-4 border border-t-0 rounded-b-lg bg-background",
-				children: /* @__PURE__ */ jsx("p", {
-					className: "text-sm text-muted-foreground",
-					children: {
-						tab1: "这是标签页 1 的内容区域。",
-						tab2: "这是标签页 2 的内容区域。",
-						tab3: "这是标签页 3 的内容区域。"
-					}[activeTab]
-				})
-			})]
-		})
+		}), description && /* @__PURE__ */ jsx("p", {
+			className: "text-muted-foreground",
+			children: description
+		})] }), demos.map(({ id, Component, meta, source }) => /* @__PURE__ */ jsx(DemoSection, {
+			title: meta.title,
+			description: meta.description,
+			source,
+			contentClassName: meta.contentClassName,
+			children: /* @__PURE__ */ jsx(Component, {})
+		}, id))]
 	});
 }
 var TestPage = () => {
 	return /* @__PURE__ */ jsxs("div", {
-		className: "p-6 max-w-5xl mx-auto",
+		className: "p-6 max-w-5xl mx-auto space-y-12",
 		children: [
-			/* @__PURE__ */ jsx("h1", {
-				className: "text-2xl font-bold mb-6",
-				children: "组件展示"
+			/* @__PURE__ */ jsx(DemoGroup, {
+				title: "组件展示",
+				demos: coreDemos
 			}),
-			/* @__PURE__ */ jsx(ThemeSwitcher, {}),
-			/* @__PURE__ */ jsx(ButtonDemo, {}),
-			/* @__PURE__ */ jsx(InputDemo, {}),
-			/* @__PURE__ */ jsx(InputNumberDemo, {}),
-			/* @__PURE__ */ jsx(TextareaDemo, {}),
-			/* @__PURE__ */ jsx(SelectDemo, {}),
-			/* @__PURE__ */ jsx(CheckboxDemo, {}),
-			/* @__PURE__ */ jsx(RadioDemo, {}),
-			/* @__PURE__ */ jsx(SwitchDemo, {}),
-			/* @__PURE__ */ jsx(TooltipDemo, {}),
-			/* @__PURE__ */ jsx(DropdownDemo, {}),
-			/* @__PURE__ */ jsx(MessageDemo, {}),
-			/* @__PURE__ */ jsx(NotificationDemo, {}),
-			/* @__PURE__ */ jsx(LoadingDemo, {}),
-			/* @__PURE__ */ jsx(ModalDemo, {}),
-			/* @__PURE__ */ jsx(DrawerDemo, {}),
-			/* @__PURE__ */ jsx(ConfirmDialogDemo, {}),
-			/* @__PURE__ */ jsx(PaginationDemo, {}),
-			/* @__PURE__ */ jsx(TableDemo, {}),
-			/* @__PURE__ */ jsx(DataTableDemo, {}),
-			/* @__PURE__ */ jsx(SearchDemo, {}),
-			/* @__PURE__ */ jsx(BreadcrumbDemo, {}),
-			/* @__PURE__ */ jsx(LabelDemo, {}),
-			/* @__PURE__ */ jsx(LayoutDemo, {}),
-			/* @__PURE__ */ jsx(CardDemo, {}),
-			/* @__PURE__ */ jsx(TabsDemo, {}),
-			/* @__PURE__ */ jsx(FormDemo, {}),
-			/* @__PURE__ */ jsx(SchemaFormDemo, {}),
-			/* @__PURE__ */ jsx(TableSearchDemo, {}),
-			/* @__PURE__ */ jsx(SkeletonDemo, {}),
-			/* @__PURE__ */ jsx(TreeSelectDemo, {}),
-			/* @__PURE__ */ jsx(DateTestPage, {}),
-			/* @__PURE__ */ jsx(PreviewImageDemo, {}),
-			/* @__PURE__ */ jsx(ImageUploadDemo, {}),
-			/* @__PURE__ */ jsx(MenuTestPage, {})
+			/* @__PURE__ */ jsx(DemoGroup, {
+				title: "Date 组件使用示例",
+				description: "展示 DatePicker 组件的各种使用场景",
+				demos: dateDemos
+			}),
+			/* @__PURE__ */ jsx(DemoGroup, {
+				title: "Menu 组件使用示例",
+				description: "支持 top / left 布局、多层嵌套、图标、折叠等场景",
+				demos: menuDemos
+			})
 		]
 	});
 };