@_tc/template-core 0.0.1-bate.5 → 0.0.1-bate.51

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

@@ -0,0 +1,81 @@
+import { Loading, LoadingIndicator } from "./Loading/Loading.js";
+import "./Loading/index.js";
+import { Button } from "./Button/Button.js";
+import { AsynchronousButton, SubmitButton } from "./Button/SubmitButton.js";
+import "./Button/index.js";
+import { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, SimpleBreadcrumb } from "./breadcrumb/breadcrumb.js";
+import "./breadcrumb/index.js";
+import { Card } from "./Card/Card.js";
+import "./Card/index.js";
+import { Checkbox } from "./Checkbox/Checkbox.js";
+import "./Checkbox/index.js";
+import { Overlay, canUseDocument } from "./Overlay/Overlay.js";
+import "./Overlay/index.js";
+import { Modal } from "./Modal/Modal.js";
+import { modal } from "./Modal/ModalManager.js";
+import "./Modal/index.js";
+import { ConfirmDialog } from "./ConfirmDialog/ConfirmDialog.js";
+import "./ConfirmDialog/index.js";
+import { Input } from "./Input/Input.js";
+import "./Input/index.js";
+import { getDefaultDropdownPosition, useDropdownPositioning } from "./hooks/useDropdownPositioning.js";
+import { Popup } from "./Popup/Popup.js";
+import "./Popup/index.js";
+import { Select } from "./Select/Select.js";
+import "./Select/index.js";
+import { Pagination } from "./Pagination/Pagination.js";
+import "./Pagination/index.js";
+import { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from "./table/table.js";
+import "./table/index.js";
+import { Skeleton } from "./Skeleton/Skeleton.js";
+import "./Skeleton/index.js";
+import { Dropdown } from "./Dropdown/Dropdown.js";
+import "./Dropdown/index.js";
+import { ActionBtn } from "./DataTable/ActionBtn.js";
+import { DataTable } from "./DataTable/index.js";
+import { Drawer } from "./Drawer/Drawer.js";
+import "./Drawer/index.js";
+import { Form } from "./Form/Form.js";
+import { Label } from "./Label/Label.js";
+import "./Label/index.js";
+import { FormItem } from "./Form/FormItem.js";
+import { useForm } from "./Form/useForm.js";
+import { SchemaForm } from "./Form/SchemaForm/index.js";
+import "./Form/index.js";
+import { ImagePreviewController } from "./ImagePreview/ImagePreview.js";
+import { PreviewImage } from "./ImagePreview/PreviewImage.js";
+import "./ImagePreview/index.js";
+import { InputNumber } from "./InputNumber/InputNumber.js";
+import "./InputNumber/index.js";
+import { Layout } from "./Layout/Layout.js";
+import "./Layout/index.js";
+import { useMenuStore } from "./Menu/MenuContext.js";
+import { MenuItem } from "./Menu/MenuItem.js";
+import { SubMenu } from "./Menu/SubMenu.js";
+import { CollapseToggle, Menu } from "./Menu/Menu.js";
+import "./Menu/index.js";
+import { message } from "./Message/MessageManager.js";
+import "./Message/index.js";
+import { Notification } from "./Notification/Notification.js";
+import "./Notification/index.js";
+import { RadioGroup, useRadioGroupContext } from "./Radio/RadioGroup.js";
+import { Radio } from "./Radio/Radio.js";
+import "./Radio/index.js";
+import Search from "./Search/Search.js";
+import "./Search/index.js";
+import { Switch } from "./Switch/Switch.js";
+import "./Switch/index.js";
+import TableSearch from "./TableSearch/TableSearch.js";
+import "./TableSearch/index.js";
+import { Tabs } from "./Tabs/Tabs.js";
+import "./Tabs/index.js";
+import { Textarea } from "./Textarea/Textarea.js";
+import "./Textarea/index.js";
+import { Tooltip } from "./Tooltip/Tooltip.js";
+import "./Tooltip/index.js";
+import { TreeSelect } from "./TreeSelect/TreeSelect.js";
+import "./TreeSelect/index.js";
+import { FileUpload } from "./Upload/Upload.js";
+import { ImageUpload } from "./Upload/ImageUpload.js";
+import "./Upload/index.js";
+export { ActionBtn, AsynchronousButton, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Card, Checkbox, CollapseToggle, ConfirmDialog, DataTable, Drawer, Dropdown, FileUpload, Form, FormItem, ImagePreviewController, ImageUpload, Input, InputNumber, Label, Layout, Loading, LoadingIndicator, Menu, MenuItem, Modal, Notification, Overlay, Pagination, Popup, PreviewImage, Radio, RadioGroup, SchemaForm, Search, Select, SimpleBreadcrumb, Skeleton, SubMenu, SubmitButton, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, TableSearch, Tabs, Textarea, Tooltip, TreeSelect, canUseDocument, getDefaultDropdownPosition, message, modal, useDropdownPositioning, useForm, useMenuStore, useRadioGroupContext };

package/fe/packages/react/ui/components/table/index.d.ts

@@ -0,0 +1 @@
+export * from "./table";

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

@@ -0,0 +1,2 @@
+import { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from "./table.js";
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };

package/fe/packages/react/ui/components/table/table.d.ts

@@ -0,0 +1,29 @@
+import * as React from "react";
+type TableFixed = 'left' | 'right';
+type TableFixedCellProps = {
+    fixed?: TableFixed;
+    fixedOffset?: React.CSSProperties['left'];
+    fixedShadow?: boolean;
+    fixedActive?: boolean;
+    fixedZIndex?: React.CSSProperties['zIndex'];
+};
+declare const Table: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableElement> & {
+    containerClassName?: string;
+    containerRef?: React.Ref<HTMLDivElement>;
+    onContainerScroll?: React.UIEventHandler<HTMLDivElement>;
+} & React.RefAttributes<HTMLTableElement>>;
+declare const TableHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+declare const TableBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+declare const TableFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+declare const TableRow: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableRowElement> & React.RefAttributes<HTMLTableRowElement>>;
+declare const TableHead: React.ForwardRefExoticComponent<React.ThHTMLAttributes<HTMLTableCellElement> & {
+    isAction?: boolean;
+    showSeparator?: boolean;
+    hideSeparatorWhenFixedActive?: boolean;
+} & TableFixedCellProps & React.RefAttributes<HTMLTableCellElement>>;
+declare const TableCell: React.ForwardRefExoticComponent<React.TdHTMLAttributes<HTMLTableCellElement> & {
+    isAction?: boolean;
+} & TableFixedCellProps & React.RefAttributes<HTMLTableCellElement>>;
+declare const TableCaption: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableCaptionElement> & React.RefAttributes<HTMLTableCaptionElement>>;
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };
+export type { TableFixed };

package/fe/packages/react/ui/components/table/table.js

@@ -0,0 +1,166 @@
+import { cn } from "../../lib/utils.js";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/react/ui/components/table/table.tsx
+var fixedShadowClassNames = {
+	left: "data-[fixed-shadow=visible]:after:pointer-events-none data-[fixed-shadow=visible]:after:absolute data-[fixed-shadow=visible]:after:inset-y-0 data-[fixed-shadow=visible]:after:-right-[3px] data-[fixed-shadow=visible]:after:w-[3px] data-[fixed-shadow=visible]:after:bg-gradient-to-r data-[fixed-shadow=visible]:after:from-white/30 data-[fixed-shadow=visible]:after:via-white/8 data-[fixed-shadow=visible]:after:to-transparent data-[fixed-shadow=visible]:after:content-['']",
+	right: "data-[fixed-shadow=visible]:before:pointer-events-none data-[fixed-shadow=visible]:before:absolute data-[fixed-shadow=visible]:before:inset-y-0 data-[fixed-shadow=visible]:before:-left-[3px] data-[fixed-shadow=visible]:before:w-[3px] data-[fixed-shadow=visible]:before:bg-gradient-to-l data-[fixed-shadow=visible]:before:from-white/30 data-[fixed-shadow=visible]:before:via-white/8 data-[fixed-shadow=visible]:before:to-transparent data-[fixed-shadow=visible]:before:content-['']"
+};
+var getFixedCellStyle = ({ fixed, fixedOffset = 0, fixedZIndex = 1, style }) => {
+	if (!fixed) return style;
+	return {
+		position: "sticky",
+		[fixed]: fixedOffset,
+		zIndex: fixedZIndex,
+		...style
+	};
+};
+var setRef = (ref, value) => {
+	if (typeof ref === "function") {
+		ref(value);
+		return;
+	}
+	if (ref) ref.current = value;
+};
+var getFixedPixelOffset = (cell, fixed) => {
+	const fixedOffset = Number.parseFloat(window.getComputedStyle(cell).getPropertyValue(fixed));
+	return Number.isFinite(fixedOffset) ? fixedOffset : 0;
+};
+var isFixedCellActive = (cell, fixed, containerRect) => {
+	const cellRect = cell.getBoundingClientRect();
+	const fixedOffset = getFixedPixelOffset(cell, fixed);
+	if (fixed === "left") return cellRect.left <= containerRect.left + fixedOffset + 1;
+	return cellRect.right >= containerRect.right - fixedOffset - 1;
+};
+var updateFixedSideState = (row, fixed, containerRect, canShow) => {
+	if (!canShow) return;
+	const activeCells = Array.from(row.querySelectorAll(`[data-tc-table-fixed="${fixed}"][data-tc-table-fixed-active="true"]`)).filter((cell) => isFixedCellActive(cell, fixed, containerRect));
+	if (activeCells.length === 0) return;
+	activeCells.forEach((cell) => {
+		cell.dataset.fixedActive = "true";
+	});
+	const shadowCell = activeCells.reduce((current, cell) => {
+		const currentRect = current.getBoundingClientRect();
+		const cellRect = cell.getBoundingClientRect();
+		if (fixed === "left") return cellRect.right > currentRect.right ? cell : current;
+		return cellRect.left < currentRect.left ? cell : current;
+	});
+	shadowCell.dataset.fixedShadow = "visible";
+};
+var Table = React$1.forwardRef(({ className, containerClassName, containerRef, onContainerScroll, children, ...props }, ref) => {
+	const internalContainerRef = React$1.useRef(null);
+	const updateFixedShadowState = React$1.useCallback(() => {
+		const container = internalContainerRef.current;
+		if (!container) return;
+		const scrollLeft = container.scrollLeft;
+		const maxScrollLeft = container.scrollWidth - container.clientWidth;
+		const containerRect = container.getBoundingClientRect();
+		container.querySelectorAll("[data-fixed-shadow=\"visible\"], [data-fixed-active=\"true\"]").forEach((cell) => {
+			delete cell.dataset.fixedShadow;
+			delete cell.dataset.fixedActive;
+		});
+		container.querySelectorAll("tr").forEach((row) => {
+			updateFixedSideState(row, "left", containerRect, scrollLeft > 1);
+			updateFixedSideState(row, "right", containerRect, maxScrollLeft - scrollLeft > 1);
+		});
+	}, []);
+	const handleContainerRef = React$1.useCallback((node) => {
+		internalContainerRef.current = node;
+		setRef(containerRef, node);
+	}, [containerRef]);
+	const handleContainerScroll = React$1.useCallback((event) => {
+		updateFixedShadowState();
+		onContainerScroll?.(event);
+	}, [onContainerScroll, updateFixedShadowState]);
+	React$1.useLayoutEffect(() => {
+		updateFixedShadowState();
+		const container = internalContainerRef.current;
+		if (!container || typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(updateFixedShadowState);
+		observer.observe(container);
+		return () => observer.disconnect();
+	}, [children, updateFixedShadowState]);
+	return /* @__PURE__ */ jsx("div", {
+		ref: handleContainerRef,
+		onScroll: handleContainerScroll,
+		className: cn("tc-ui-table relative w-full overflow-auto rounded-[20px]", containerClassName),
+		children: /* @__PURE__ */ jsx("table", {
+			ref,
+			className: cn("w-full caption-bottom text-sm", className),
+			...props,
+			children
+		})
+	});
+});
+Table.displayName = "Table";
+var TableHeader = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", {
+	ref,
+	className: cn("tc-ui-table-header bg-table-header", className),
+	...props
+}));
+TableHeader.displayName = "TableHeader";
+var TableBody = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("tbody", {
+	ref,
+	className: cn("tc-ui-table-body [&_tr:last-child]:border-0", className),
+	...props
+}));
+TableBody.displayName = "TableBody";
+var TableFooter = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("tfoot", {
+	ref,
+	className: cn("tc-ui-table-footer border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className),
+	...props
+}));
+TableFooter.displayName = "TableFooter";
+var TableRow = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("tr", {
+	ref,
+	className: cn("tc-ui-table-row border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted", className),
+	...props
+}));
+TableRow.displayName = "TableRow";
+var TableHead = React$1.forwardRef(({ className, children, isAction, showSeparator = true, hideSeparatorWhenFixedActive, fixed, fixedOffset, fixedShadow = true, fixedActive = true, fixedZIndex = 10, style, ...props }, ref) => {
+	return /* @__PURE__ */ jsxs("th", {
+		ref,
+		"data-tc-table-fixed": fixed,
+		"data-tc-table-fixed-shadow": fixed && fixedShadow ? "true" : void 0,
+		"data-tc-table-fixed-active": fixed && fixedActive ? "true" : void 0,
+		"data-hide-separator-when-fixed-active": hideSeparatorWhenFixedActive ? "true" : void 0,
+		className: cn("tc-ui-table-head relative h-12 px-4 text-left align-middle text-xs font-normal", "text-table-head-text", "first:[&>.tc-ui-table-head-separator]:hidden", isAction && "bg-table-header text-table-head-text w-[96px] text-center", fixed && "data-[fixed-active=true]:bg-table-header", fixed && fixedShadow && fixedShadowClassNames[fixed], className),
+		style: getFixedCellStyle({
+			fixed,
+			fixedOffset,
+			fixedZIndex,
+			style
+		}),
+		...props,
+		children: [showSeparator && /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: "tc-ui-table-head-separator pointer-events-none absolute left-0 top-1/2 h-5 w-px -translate-y-1/2 bg-[hsl(var(--table-head-text)/0.5)]"
+		}), children]
+	});
+});
+TableHead.displayName = "TableHead";
+var TableCell = React$1.forwardRef(({ className, isAction, fixed, fixedOffset, fixedShadow = true, fixedActive = true, fixedZIndex = 1, style, ...props }, ref) => {
+	return /* @__PURE__ */ jsx("td", {
+		ref,
+		"data-tc-table-fixed": fixed,
+		"data-tc-table-fixed-shadow": fixed && fixedShadow ? "true" : void 0,
+		"data-tc-table-fixed-active": fixed && fixedActive ? "true" : void 0,
+		className: cn("tc-ui-table-cell p-4 align-middle text-sm font-normal", "text-table-cell-text", isAction && "text-table-action-text w-[96px] text-center", isAction && !fixed && "bg-background", fixed && "data-[fixed-active=true]:bg-background", fixed && fixedShadow && fixedShadowClassNames[fixed], className),
+		style: getFixedCellStyle({
+			fixed,
+			fixedOffset,
+			fixedZIndex,
+			style
+		}),
+		...props
+	});
+});
+TableCell.displayName = "TableCell";
+var TableCaption = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("caption", {
+	ref,
+	className: cn("tc-ui-table-caption mt-4 text-sm text-muted-foreground", className),
+	...props
+}));
+TableCaption.displayName = "TableCaption";
+//#endregion
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };

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

@@ -0,0 +1 @@
+export default function MenuTestPage(): import("react/jsx-runtime").JSX.Element;

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 };