@_tc/template-core 0.1.16 → 0.2.0-bate.0

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

@@ -0,0 +1,397 @@
+import { Menu } from "../Menu/Menu.js";
+import "../Menu/index.js";
+import { useState } from "react";
+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" })
+							}
+						]
+					})
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { MenuTestPage as default };

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

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