@_tc/template-core 0.2.1 → 0.2.3

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

@@ -0,0 +1,73 @@
+import { Button } from "../Button/Button.js";
+import "../Button/index.js";
+import { useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Check, Code2, Copy, Eye } from "lucide-react";
+//#region packages/react/ui/components/testPage/DemoSection.tsx
+function DemoSection({ title, description, source, children, contentClassName }) {
+	const [showSource, setShowSource] = useState(false);
+	const [copyStatus, setCopyStatus] = useState("idle");
+	const timerRef = useRef(void 0);
+	const sourceText = source?.trim();
+	const resetCopyStatus = (nextStatus) => {
+		setCopyStatus(nextStatus);
+		if (timerRef.current) clearTimeout(timerRef.current);
+		timerRef.current = setTimeout(() => setCopyStatus("idle"), 1400);
+	};
+	const handleCopy = async () => {
+		if (!sourceText) return;
+		try {
+			await navigator.clipboard.writeText(sourceText);
+			resetCopyStatus("copied");
+		} catch {
+			resetCopyStatus("failed");
+		}
+	};
+	return /* @__PURE__ */ jsxs("section", {
+		className: "mb-8",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "mb-3 border-b pb-2",
+				children: /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h2", {
+					className: "text-lg font-semibold leading-7",
+					children: title
+				}), description && /* @__PURE__ */ jsx("p", {
+					className: "mt-1 text-sm text-muted-foreground",
+					children: description
+				})] })
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: contentClassName,
+				children
+			}),
+			sourceText && /* @__PURE__ */ jsxs("div", {
+				className: "mt-4 flex flex-wrap items-center gap-2 border-t border-border/70 pt-3",
+				children: [/* @__PURE__ */ jsx(Button, {
+					size: "sm",
+					variant: showSource ? "primary" : "default",
+					leftIcon: showSource ? /* @__PURE__ */ jsx(Eye, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(Code2, { className: "h-4 w-4" }),
+					onClick: () => setShowSource((visible) => !visible),
+					children: showSource ? "收起源码" : "查看源码"
+				}), showSource && /* @__PURE__ */ jsx(Button, {
+					size: "sm",
+					variant: "text",
+					leftIcon: copyStatus === "copied" ? /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(Copy, { className: "h-4 w-4" }),
+					onClick: handleCopy,
+					children: copyStatus === "copied" ? "已复制" : copyStatus === "failed" ? "复制失败" : "复制"
+				})]
+			}),
+			showSource && sourceText && /* @__PURE__ */ jsx("div", {
+				className: "mt-4 overflow-hidden rounded-lg border border-border bg-muted/40",
+				children: /* @__PURE__ */ jsx("pre", {
+					className: "max-h-[520px] overflow-x-auto overflow-y-auto p-4 text-xs leading-6 text-foreground",
+					children: /* @__PURE__ */ jsx("code", {
+						className: "block min-w-max whitespace-pre font-mono",
+						children: sourceText
+					})
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { DemoSection };

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

@@ -1,396 +1,23 @@
-import { Menu } from "../Menu/Menu.js";
-import "../Menu/index.js";
-import { useState } from "react";
+import { DemoSection } from "./DemoSection.js";
+import { menuDemos } from "./demoRegistry.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { BarChart3, Bell, FileText, HelpCircle, LayoutDashboard, Package, Settings, ShoppingCart, Users } from "lucide-react";
 //#region packages/react/ui/components/testPage/MenuTestPage.tsx
-var menuItems = [
-	{
-		key: "dashboard",
-		label: "Dashboard",
-		icon: /* @__PURE__ */ jsx(LayoutDashboard, { className: "h-4 w-4" })
-	},
-	{
-		key: "products",
-		label: "Products",
-		icon: /* @__PURE__ */ jsx(Package, { className: "h-4 w-4" }),
-		children: [
-			{
-				key: "products-list",
-				label: "All Products"
-			},
-			{
-				key: "products-create",
-				label: "Create New"
-			},
-			{
-				key: "products-categories",
-				label: "Categories",
-				children: [{
-					key: "cat-electronics",
-					label: "Electronics"
-				}, {
-					key: "cat-clothing",
-					label: "Clothing"
-				}]
-			}
-		]
-	},
-	{
-		key: "settings",
-		label: "Settings",
-		icon: /* @__PURE__ */ jsx(Settings, { className: "h-4 w-4" }),
-		children: [{
-			key: "settings-profile",
-			label: "Profile"
-		}, {
-			key: "settings-billing",
-			label: "Billing",
-			danger: true
-		}]
-	}
-];
-var topItems = [
-	{
-		key: "home",
-		label: "Home"
-	},
-	{
-		key: "services",
-		label: "Services",
-		children: [{
-			key: "consulting",
-			label: "Consulting"
-		}, {
-			key: "development",
-			label: "Development"
-		}]
-	},
-	{
-		key: "about",
-		label: "About"
-	}
-];
-var iconMenuItems = [
-	{
-		key: "dashboard",
-		label: "Dashboard",
-		icon: /* @__PURE__ */ jsx(LayoutDashboard, { className: "h-4 w-4" })
-	},
-	{
-		key: "users",
-		label: "Users",
-		icon: /* @__PURE__ */ jsx(Users, { className: "h-4 w-4" }),
-		children: [{
-			key: "users-list",
-			label: "All Users",
-			icon: /* @__PURE__ */ jsx(Users, { className: "h-4 w-4" })
-		}, {
-			key: "users-roles",
-			label: "Roles",
-			icon: /* @__PURE__ */ jsx(FileText, { className: "h-4 w-4" })
-		}]
-	},
-	{
-		key: "analytics",
-		label: "Analytics",
-		icon: /* @__PURE__ */ jsx(BarChart3, { className: "h-4 w-4" }),
-		children: [{
-			key: "analytics-overview",
-			label: "Overview"
-		}, {
-			key: "analytics-reports",
-			label: "Reports"
-		}]
-	},
-	{
-		key: "orders",
-		label: "Orders",
-		icon: /* @__PURE__ */ jsx(ShoppingCart, { className: "h-4 w-4" })
-	},
-	{
-		key: "notifications",
-		label: "Notifications",
-		icon: /* @__PURE__ */ jsx(Bell, { className: "h-4 w-4" })
-	},
-	{
-		key: "help",
-		label: "Help",
-		icon: /* @__PURE__ */ jsx(HelpCircle, { className: "h-4 w-4" })
-	}
-];
-function Section({ title, description, children }) {
-	return /* @__PURE__ */ jsxs("section", {
-		className: "space-y-3",
-		children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h2", {
-			className: "text-lg font-semibold",
-			children: title
-		}), description && /* @__PURE__ */ jsx("p", {
-			className: "text-sm text-muted-foreground",
-			children: description
-		})] }), children]
-	});
-}
 function MenuTestPage() {
-	const [selectedKey, setSelectedKey] = useState("dashboard");
-	const [collapsed, setCollapsed] = useState(false);
-	const [collapsedKey, setCollapsedKey] = useState("dashboard");
-	const [accordionKey, setAccordionKey] = useState("dashboard");
-	const [topKey, setTopKey] = useState("home");
 	return /* @__PURE__ */ jsxs("div", {
-		className: "p-8 max-w-6xl mx-auto space-y-10",
-		children: [
-			/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h1", {
-				className: "text-3xl font-bold mb-2",
-				children: "Menu 组件使用示例"
-			}), /* @__PURE__ */ jsx("p", {
-				className: "text-muted-foreground",
-				children: "支持 top / left 布局、多层嵌套、图标、折叠等场景"
-			})] }),
-			/* @__PURE__ */ jsxs(Section, {
-				title: "1. 基础 Left 模式 (data config)",
-				description: "最常用的侧边菜单，支持多级展开 (expandMode=multiple)",
-				children: [/* @__PURE__ */ jsx("div", {
-					className: "w-56 border rounded-lg overflow-hidden",
-					children: /* @__PURE__ */ jsx(Menu, {
-						mode: "left",
-						expandMode: "multiple",
-						selectedKey,
-						onSelect: setSelectedKey,
-						items: menuItems
-					})
-				}), /* @__PURE__ */ jsxs("p", {
-					className: "text-sm text-muted-foreground",
-					children: ["当前选中: ", selectedKey]
-				})]
-			}),
-			/* @__PURE__ */ jsx(Section, {
-				title: "2. 手风琴展开 (accordion)",
-				description: "同一层级同时只能展开一个子菜单",
-				children: /* @__PURE__ */ jsx("div", {
-					className: "w-56 border rounded-lg overflow-hidden",
-					children: /* @__PURE__ */ jsx(Menu, {
-						mode: "left",
-						expandMode: "accordion",
-						selectedKey: accordionKey,
-						onSelect: setAccordionKey,
-						items: menuItems
-					})
-				})
-			}),
-			/* @__PURE__ */ jsx(Section, {
-				title: "3. 折叠模式 (collapsed)",
-				description: "收起后仅展示图标，hover 弹出子菜单",
-				children: /* @__PURE__ */ jsx("div", {
-					className: "border rounded-lg overflow-hidden inline-flex",
-					children: /* @__PURE__ */ jsx(Menu, {
-						mode: "left",
-						selectedKey: collapsedKey,
-						onSelect: setCollapsedKey,
-						collapsed,
-						onCollapse: setCollapsed,
-						items: iconMenuItems
-					})
-				})
-			}),
-			/* @__PURE__ */ jsx(Section, {
-				title: "4. JSX 组合式",
-				description: "不使用 data config，直接组合 Menu.Item / Menu.SubMenu",
-				children: /* @__PURE__ */ jsx("div", {
-					className: "w-56 border rounded-lg overflow-hidden",
-					children: /* @__PURE__ */ jsxs(Menu, {
-						mode: "left",
-						defaultSelectedKey: "overview",
-						children: [
-							/* @__PURE__ */ jsx(Menu.Item, {
-								eventKey: "overview",
-								icon: /* @__PURE__ */ jsx(LayoutDashboard, { className: "h-4 w-4" }),
-								children: "Overview"
-							}),
-							/* @__PURE__ */ jsxs(Menu.SubMenu, {
-								eventKey: "manage",
-								label: "Manage",
-								icon: /* @__PURE__ */ jsx(Package, { className: "h-4 w-4" }),
-								children: [/* @__PURE__ */ jsx(Menu.Item, {
-									eventKey: "manage-list",
-									children: "List"
-								}), /* @__PURE__ */ jsx(Menu.Item, {
-									eventKey: "manage-edit",
-									children: "Edit"
-								})]
-							}),
-							/* @__PURE__ */ jsxs(Menu.SubMenu, {
-								eventKey: "settings",
-								label: "Settings",
-								icon: /* @__PURE__ */ jsx(Settings, { className: "h-4 w-4" }),
-								children: [/* @__PURE__ */ jsx(Menu.Item, {
-									eventKey: "jsx-profile",
-									children: "Profile"
-								}), /* @__PURE__ */ jsx(Menu.Item, {
-									eventKey: "jsx-billing",
-									danger: true,
-									children: "Billing"
-								})]
-							}),
-							/* @__PURE__ */ jsx(Menu.Item, {
-								eventKey: "help",
-								icon: /* @__PURE__ */ jsx(HelpCircle, { className: "h-4 w-4" }),
-								children: "Help"
-							})
-						]
-					})
-				})
-			}),
-			/* @__PURE__ */ jsx(Section, {
-				title: "5. 子菜单弹出模式 (popup)",
-				description: "展开状态下也能让子菜单以弹出方式展示",
-				children: /* @__PURE__ */ jsx("div", {
-					className: "w-56 border rounded-lg overflow-hidden",
-					children: /* @__PURE__ */ jsx(Menu, {
-						mode: "left",
-						expandMode: "multiple",
-						selectedKey,
-						onSelect: setSelectedKey,
-						items: [
-							{
-								key: "d1",
-								label: "Dashboard",
-								icon: /* @__PURE__ */ jsx(LayoutDashboard, { className: "h-4 w-4" })
-							},
-							{
-								key: "p1",
-								label: "Products",
-								icon: /* @__PURE__ */ jsx(Package, { className: "h-4 w-4" }),
-								popup: true,
-								children: [{
-									key: "p1-list",
-									label: "All Products"
-								}, {
-									key: "p1-create",
-									label: "Create New"
-								}]
-							},
-							{
-								key: "d3",
-								label: "Help",
-								icon: /* @__PURE__ */ jsx(HelpCircle, { className: "h-4 w-4" })
-							}
-						]
-					})
-				})
-			}),
-			/* @__PURE__ */ jsxs(Section, {
-				title: "6. Top 模式",
-				description: "一级菜单水平排列，子菜单下拉弹出",
-				children: [/* @__PURE__ */ jsx("div", {
-					className: "border rounded-lg w-full",
-					children: /* @__PURE__ */ jsx(Menu, {
-						mode: "top",
-						selectedKey: topKey,
-						onSelect: setTopKey,
-						items: topItems,
-						className: "border-b"
-					})
-				}), /* @__PURE__ */ jsxs("p", {
-					className: "text-sm text-muted-foreground",
-					children: ["当前选中: ", topKey]
-				})]
-			}),
-			/* @__PURE__ */ jsx(Section, {
-				title: "7. Click 触发",
-				description: "点击展开子菜单，而非 hover",
-				children: /* @__PURE__ */ jsx("div", {
-					className: "w-56 border rounded-lg overflow-hidden",
-					children: /* @__PURE__ */ jsx(Menu, {
-						mode: "left",
-						expandTrigger: "click",
-						expandMode: "multiple",
-						selectedKey,
-						onSelect: setSelectedKey,
-						items: menuItems
-					})
-				})
-			}),
-			/* @__PURE__ */ jsx(Section, {
-				title: "8. 状态展示",
-				description: "disabled / danger 样式演示",
-				children: /* @__PURE__ */ jsx("div", {
-					className: "w-56 border rounded-lg overflow-hidden",
-					children: /* @__PURE__ */ jsxs(Menu, {
-						mode: "left",
-						defaultSelectedKey: "normal",
-						children: [
-							/* @__PURE__ */ jsx(Menu.Item, {
-								eventKey: "normal",
-								icon: /* @__PURE__ */ jsx(FileText, { className: "h-4 w-4" }),
-								children: "正常菜单项"
-							}),
-							/* @__PURE__ */ jsx(Menu.Item, {
-								eventKey: "disabled-item",
-								disabled: true,
-								icon: /* @__PURE__ */ jsx(FileText, { className: "h-4 w-4" }),
-								children: "禁用菜单项"
-							}),
-							/* @__PURE__ */ jsx(Menu.Item, {
-								eventKey: "danger-item",
-								danger: true,
-								icon: /* @__PURE__ */ jsx(FileText, { className: "h-4 w-4" }),
-								children: "危险菜单项"
-							}),
-							/* @__PURE__ */ jsxs(Menu.SubMenu, {
-								eventKey: "sub-disabled",
-								label: "含禁用子项",
-								icon: /* @__PURE__ */ jsx(Settings, { className: "h-4 w-4" }),
-								children: [
-									/* @__PURE__ */ jsx(Menu.Item, {
-										eventKey: "sub-normal",
-										children: "正常子项"
-									}),
-									/* @__PURE__ */ jsx(Menu.Item, {
-										eventKey: "sub-danger",
-										danger: true,
-										children: "危险子项"
-									}),
-									/* @__PURE__ */ jsx(Menu.Item, {
-										eventKey: "sub-disabled-item",
-										disabled: true,
-										children: "禁用子项"
-									})
-								]
-							})
-						]
-					})
-				})
-			}),
-			/* @__PURE__ */ jsx(Section, {
-				title: "9. 无 icon 折叠",
-				description: "收起时无 icon 的菜单项留白占位",
-				children: /* @__PURE__ */ jsx("div", {
-					className: "border rounded-lg overflow-hidden inline-flex",
-					children: /* @__PURE__ */ jsx(Menu, {
-						mode: "left",
-						defaultCollapsed: true,
-						expandMode: "multiple",
-						items: [
-							{
-								key: "a",
-								label: "Home",
-								icon: /* @__PURE__ */ jsx(LayoutDashboard, { className: "h-4 w-4" })
-							},
-							{
-								key: "b",
-								label: "Reports"
-							},
-							{
-								key: "c",
-								label: "Settings",
-								icon: /* @__PURE__ */ jsx(Settings, { className: "h-4 w-4" })
-							}
-						]
-					})
-				})
-			})
-		]
+		className: "p-8 max-w-6xl mx-auto space-y-8",
+		children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h1", {
+			className: "text-3xl font-bold mb-2",
+			children: "Menu 组件使用示例"
+		}), /* @__PURE__ */ jsx("p", {
+			className: "text-muted-foreground",
+			children: "支持 top / left 布局、多层嵌套、图标、折叠等场景"
+		})] }), menuDemos.map(({ id, Component, meta, source }) => /* @__PURE__ */ jsx(DemoSection, {
+			title: meta.title,
+			description: meta.description,
+			source,
+			contentClassName: meta.contentClassName,
+			children: /* @__PURE__ */ jsx(Component, {})
+		}, id))]
 	});
 }
 //#endregion

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

@@ -0,0 +1,4 @@
+import type { DemoEntry } from "./types";
+export declare const coreDemos: DemoEntry[];
+export declare const dateDemos: DemoEntry[];
+export declare const menuDemos: DemoEntry[];