@_tc/template-core 0.0.1-bate.4 → 0.0.1-bate.41

package/fe/packages/ui/react/components/hooks/useDropdownPositioning.d.ts

@@ -0,0 +1,49 @@
+import type { RefObject } from "react";
+export type DropdownPlacement = "bottom-end" | "bottom-start" | "left-start" | "top-end" | "top-start" | "right-start" | "right-end";
+export type DropdownPosition = {
+    top: number;
+    left?: number;
+    right?: number;
+    width?: number;
+};
+export type DropdownPositioningContext = {
+    anchorRect: DOMRect;
+    contentRect?: DOMRect;
+    containerRect?: DOMRect;
+    viewportWidth: number;
+    viewportHeight: number;
+    placement: DropdownPlacement;
+    offset: number;
+    matchAnchorWidth: boolean;
+};
+export type DropdownPositioningStrategy = (context: DropdownPositioningContext) => DropdownPosition;
+export type UseDropdownPositioningOptions = {
+    open: boolean;
+    anchorRef: RefObject<HTMLElement | null>;
+    contentRef: RefObject<HTMLElement | null>;
+    placement?: DropdownPlacement;
+    offset?: number;
+    matchAnchorWidth?: boolean;
+    strategy?: DropdownPositioningStrategy;
+    estimateSize?: () => {
+        width?: number;
+        height?: number;
+    };
+    watchDeps?: readonly unknown[];
+    containerRef?: RefObject<HTMLElement | null>;
+    positionMode?: "fixed" | "absolute";
+};
+export type UseDropdownPositioningResult = {
+    position: DropdownPosition;
+    ready: boolean;
+    updatePosition: () => void;
+};
+/**
+ * 计算弹窗该放在哪。
+ *
+ * right/left：跟触发元素顶部对齐，往右或往左弹。
+ * bottom/top：放在触发元素下方或上方，再按 start/end 对齐。
+ */
+export declare const getDefaultDropdownPosition: DropdownPositioningStrategy;
+export declare function useDropdownPositioning({ open, anchorRef, contentRef, placement, offset, matchAnchorWidth, strategy, estimateSize, watchDeps, containerRef, positionMode, }: UseDropdownPositioningOptions): UseDropdownPositioningResult;
+//# sourceMappingURL=useDropdownPositioning.d.ts.map

package/fe/packages/ui/react/components/hooks/useDropdownPositioning.js

@@ -0,0 +1,137 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+const HIDDEN_POSITION = {
+    top: -100,
+    left: -100,
+};
+const EMPTY_DEPS = [];
+/**
+ * 计算弹窗该放在哪。
+ *
+ * right/left：跟触发元素顶部对齐，往右或往左弹。
+ * bottom/top：放在触发元素下方或上方，再按 start/end 对齐。
+ */
+export const getDefaultDropdownPosition = ({ anchorRect, contentRect, containerRect, viewportWidth, placement, offset, matchAnchorWidth, }) => {
+    const isRight = placement.startsWith("right");
+    const isLeft = placement.startsWith("left");
+    const isTop = placement.startsWith("top");
+    const containerTop = containerRect?.top ?? 0;
+    const containerLeft = containerRect?.left ?? 0;
+    const containerRight = containerRect?.right ?? viewportWidth;
+    const nextPosition = {
+        top: (isRight || isLeft
+            ? anchorRect.top
+            : isTop
+                ? anchorRect.top - (contentRect?.height ?? 0) - offset
+                : anchorRect.bottom + offset) - containerTop,
+        width: matchAnchorWidth ? anchorRect.width : undefined,
+    };
+    if (isRight) {
+        nextPosition.left = anchorRect.right + offset - containerLeft;
+    }
+    else if (isLeft) {
+        // 往左弹时，要知道弹窗宽度，才能算出左边应该从哪里开始。
+        nextPosition.left = anchorRect.left - (contentRect?.width ?? 0) - offset - containerLeft;
+    }
+    else if (placement.endsWith("start")) {
+        nextPosition.left = anchorRect.left - containerLeft;
+    }
+    else {
+        nextPosition.right = containerRight - anchorRect.right;
+    }
+    return nextPosition;
+};
+export function useDropdownPositioning({ open, anchorRef, contentRef, placement = "bottom-end", offset = 8, matchAnchorWidth = false, strategy = getDefaultDropdownPosition, estimateSize, watchDeps = EMPTY_DEPS, containerRef, positionMode = "fixed", }) {
+    const [position, setPosition] = useState(HIDDEN_POSITION);
+    const [ready, setReady] = useState(false);
+    const getContentRect = useCallback(() => {
+        // 优先用真实 DOM 尺寸。刚打开时可能还量不到，就允许外部给一个预估尺寸。
+        const measuredRect = contentRef.current?.getBoundingClientRect();
+        if (measuredRect && measuredRect.height > 0) {
+            return measuredRect;
+        }
+        const estimatedSize = estimateSize?.();
+        if (!estimatedSize)
+            return measuredRect;
+        return new DOMRect(0, 0, estimatedSize.width ?? 0, estimatedSize.height ?? 0);
+    }, [contentRef, estimateSize]);
+    const updatePosition = useCallback(() => {
+        if (!anchorRef.current)
+            return;
+        // 每次定位前重新读取位置，这样滚动或窗口变化后不会用旧坐标。
+        const anchorRect = anchorRef.current.getBoundingClientRect();
+        const contentRect = getContentRect();
+        const containerRect = positionMode === "absolute"
+            ? containerRef?.current?.getBoundingClientRect()
+            : undefined;
+        const newData = strategy({
+            anchorRect,
+            contentRect: contentRect ?? undefined,
+            containerRect,
+            viewportWidth: window.innerWidth,
+            viewportHeight: window.innerHeight,
+            placement,
+            offset,
+            matchAnchorWidth,
+        });
+        setPosition((returnData.current.position = newData));
+        setReady((returnData.current.ready = Boolean(contentRef.current &&
+            contentRef.current.getBoundingClientRect().height > 0)));
+    }, [
+        anchorRef,
+        contentRef,
+        containerRef,
+        getContentRect,
+        matchAnchorWidth,
+        offset,
+        placement,
+        positionMode,
+        strategy,
+    ]);
+    useEffect(() => {
+        if (!open) {
+            // 关闭时先挪到屏幕外，避免 keepMounted 的弹窗在旧位置闪一下。
+            setPosition((returnData.current.position = HIDDEN_POSITION));
+            setReady((returnData.current.ready = false));
+            return;
+        }
+        // 打开后等两帧再量尺寸：先让 DOM 挂上去，再让浏览器完成布局。
+        const rafId = requestAnimationFrame(() => requestAnimationFrame(updatePosition));
+        return () => cancelAnimationFrame(rafId);
+    }, [open, updatePosition]);
+    useEffect(() => {
+        if (!open)
+            return;
+        // 页面滚动、外层容器滚动、窗口缩放时，都重新算一次位置。
+        const handleUpdate = () => updatePosition();
+        window.addEventListener("scroll", handleUpdate, true);
+        window.addEventListener("resize", handleUpdate);
+        return () => {
+            window.removeEventListener("scroll", handleUpdate, true);
+            window.removeEventListener("resize", handleUpdate);
+        };
+    }, [open, updatePosition]);
+    const deps = useMemo(() => watchDeps, [watchDeps]);
+    useEffect(() => {
+        if (!open)
+            return;
+        // 外部内容变化时，可以通过 watchDeps 主动触发重新定位。
+        updatePosition();
+    }, [deps, open, updatePosition]);
+    useEffect(() => {
+        if (!open || !contentRef.current)
+            return;
+        // 弹窗打开后内容高度/宽度可能变，尺寸变了就重新定位。
+        let rafId = 0;
+        const observer = new ResizeObserver(() => {
+            rafId = requestAnimationFrame(() => requestAnimationFrame(updatePosition));
+        });
+        observer.observe(contentRef.current);
+        return () => {
+            observer.disconnect();
+            cancelAnimationFrame(rafId);
+        };
+    }, [contentRef, open, updatePosition]);
+    const returnData = useRef({ position, ready, updatePosition });
+    returnData.current.updatePosition = updatePosition;
+    return returnData.current;
+}

package/fe/packages/ui/react/components/hooks/useInputController.d.ts

@@ -0,0 +1,24 @@
+interface IParams<T> {
+    ref: React.ForwardedRef<T>;
+    defaultValue?: string;
+    controlledValue?: string;
+    disabled?: boolean;
+}
+/**
+ * 处理ref & 判断是否受控 & 使用的value & value.length
+ */
+export declare const useInputController: <T>(params: IParams<T>) => {
+    setRefs: (node: T | null) => void;
+    setIsFocused: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    setInternalValue: import("react").Dispatch<import("react").SetStateAction<string>>;
+    controllerRef: import("react").RefObject<T | null>;
+    isControlledRef: import("react").RefObject<boolean>;
+    isControlled: boolean;
+    isFocused: boolean;
+    currentLength: number;
+    hasValue: boolean;
+    internalValue: string;
+    value: string | undefined;
+};
+export {};
+//# sourceMappingURL=useInputController.d.ts.map

package/fe/packages/ui/react/components/hooks/useInputController.js

@@ -0,0 +1,45 @@
+import { useCallback, useMemo, useRef, useState } from 'react';
+/**
+ * 处理ref & 判断是否受控 & 使用的value & value.length
+ */
+export const useInputController = (params) => {
+    const { defaultValue, ref, controlledValue } = params;
+    const [isFocused, setIsFocused] = useState(false);
+    const [internalValue, setInternalValue] = useState(defaultValue || '');
+    const controllerRef = useRef(null);
+    // 合并 refs
+    const setRefs = useCallback((node) => {
+        controllerRef.current = node;
+        if (typeof ref === 'function') {
+            ref(node);
+        }
+        else if (ref) {
+            // eslint-disable-next-line react-hooks/immutability
+            ref.current = node;
+        }
+    }, [ref]);
+    const isControlledRef = useRef(false);
+    // 外部传了value
+    const isControlled = useMemo(() => {
+        const r = controlledValue !== undefined;
+        // 当传入的value改变时，更新ref值
+        isControlledRef.current = r;
+        return r;
+    }, [controlledValue]);
+    const value = isControlled ? controlledValue : internalValue;
+    const hasValue = Boolean(value && String(value).length > 0);
+    const currentLength = value ? String(value).length : 0;
+    return {
+        setRefs,
+        setIsFocused,
+        setInternalValue,
+        controllerRef,
+        isControlledRef,
+        isControlled,
+        isFocused,
+        currentLength,
+        hasValue,
+        internalValue,
+        value,
+    };
+};

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

@@ -0,0 +1,30 @@
+export * from './breadcrumb';
+export * from './Button';
+export * from './Checkbox';
+export * from './ConfirmDialog';
+export * from './DataTable';
+export * from './Drawer';
+export * from './Dropdown';
+export * from './Popup';
+export * from './Form';
+export * from './hooks/useDropdownPositioning';
+export * from './ImagePreview';
+export * from './Input';
+export * from './InputNumber';
+export * from './Label';
+export * from './Menu';
+export * from './Message';
+export * from './Modal';
+export * from './Overlay';
+export * from './Pagination';
+export * from './Search';
+export * from './Select';
+export * from './Skeleton';
+export * from './Switch';
+export * from './table';
+export * from './TableSearch';
+export * from './Textarea';
+export * from './Tooltip';
+export * from './TreeSelect';
+export * from './Upload';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,29 @@
+export * from './breadcrumb';
+export * from './Button';
+export * from './Checkbox';
+export * from './ConfirmDialog';
+export * from './DataTable';
+export * from './Drawer';
+export * from './Dropdown';
+export * from './Popup';
+export * from './Form';
+export * from './hooks/useDropdownPositioning';
+export * from './ImagePreview';
+export * from './Input';
+export * from './InputNumber';
+export * from './Label';
+export * from './Menu';
+export * from './Message';
+export * from './Modal';
+export * from './Overlay';
+export * from './Pagination';
+export * from './Search';
+export * from './Select';
+export * from './Skeleton';
+export * from './Switch';
+export * from './table';
+export * from './TableSearch';
+export * from './Textarea';
+export * from './Tooltip';
+export * from './TreeSelect';
+export * from './Upload';

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

@@ -0,0 +1,2 @@
+export * from './table';
+//# sourceMappingURL=index.d.ts.map

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

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

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

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../../lib/utils';
+import * as React from 'react';
+const Table = React.forwardRef(({ className, containerClassName, ...props }, ref) => (_jsx("div", { className: cn('tc-ui-table relative w-full overflow-auto rounded-[20px]', containerClassName), children: _jsx("table", { ref: ref, className: cn('w-full caption-bottom text-sm', className), ...props }) })));
+Table.displayName = 'Table';
+const TableHeader = React.forwardRef(({ className, ...props }, ref) => _jsx("thead", { ref: ref, className: cn('tc-ui-table-header bg-table-header', className), ...props }));
+TableHeader.displayName = 'TableHeader';
+const TableBody = React.forwardRef(({ className, ...props }, ref) => (_jsx("tbody", { ref: ref, className: cn('tc-ui-table-body [&_tr:last-child]:border-0', className), ...props })));
+TableBody.displayName = 'TableBody';
+const TableFooter = React.forwardRef(({ className, ...props }, ref) => (_jsx("tfoot", { ref: ref, className: cn('tc-ui-table-footer border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', className), ...props })));
+TableFooter.displayName = 'TableFooter';
+const TableRow = React.forwardRef(({ className, ...props }, ref) => (_jsx("tr", { ref: 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';
+const TableHead = React.forwardRef(({ className, isAction, ...props }, ref) => (_jsx("th", { ref: ref, className: cn('tc-ui-table-head h-12 px-4 text-left align-middle text-xs font-normal', 'text-table-head-text', isAction && 'bg-table-action text-table-action-text w-[85px] text-center', className), ...props })));
+TableHead.displayName = 'TableHead';
+const TableCell = React.forwardRef(({ className, isAction, ...props }, ref) => (_jsx("td", { ref: ref, className: cn('tc-ui-table-cell p-4 align-middle text-sm font-normal', 'text-table-cell-text', isAction && 'bg-table-action text-table-action-text w-[85px] text-center', className), ...props })));
+TableCell.displayName = 'TableCell';
+const TableCaption = React.forwardRef(({ className, ...props }, ref) => (_jsx("caption", { ref: ref, className: cn('tc-ui-table-caption mt-4 text-sm text-muted-foreground', className), ...props })));
+TableCaption.displayName = 'TableCaption';
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };

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

@@ -0,0 +1,2 @@
+export default function MenuTestPage(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MenuTestPage.d.ts.map

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

@@ -0,0 +1,104 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { LayoutDashboard, Package, Settings, Users, FileText, BarChart3, ShoppingCart, Bell, HelpCircle, } from 'lucide-react';
+import { Menu } from '../Menu';
+// ─── 示例数据 ────────────────────────────────────────────────────────────────
+const menuItems = [
+    {
+        key: 'dashboard',
+        label: 'Dashboard',
+        icon: _jsx(LayoutDashboard, { className: "h-4 w-4" }),
+    },
+    {
+        key: 'products',
+        label: 'Products',
+        icon: _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: _jsx(Settings, { className: "h-4 w-4" }),
+        children: [
+            { key: 'settings-profile', label: 'Profile' },
+            { key: 'settings-billing', label: 'Billing', danger: true },
+        ],
+    },
+];
+const topItems = [
+    { key: 'home', label: 'Home' },
+    {
+        key: 'services',
+        label: 'Services',
+        children: [
+            { key: 'consulting', label: 'Consulting' },
+            { key: 'development', label: 'Development' },
+        ],
+    },
+    { key: 'about', label: 'About' },
+];
+const iconMenuItems = [
+    { key: 'dashboard', label: 'Dashboard', icon: _jsx(LayoutDashboard, { className: "h-4 w-4" }) },
+    {
+        key: 'users',
+        label: 'Users',
+        icon: _jsx(Users, { className: "h-4 w-4" }),
+        children: [
+            { key: 'users-list', label: 'All Users', icon: _jsx(Users, { className: "h-4 w-4" }) },
+            { key: 'users-roles', label: 'Roles', icon: _jsx(FileText, { className: "h-4 w-4" }) },
+        ],
+    },
+    {
+        key: 'analytics',
+        label: 'Analytics',
+        icon: _jsx(BarChart3, { className: "h-4 w-4" }),
+        children: [
+            { key: 'analytics-overview', label: 'Overview' },
+            { key: 'analytics-reports', label: 'Reports' },
+        ],
+    },
+    { key: 'orders', label: 'Orders', icon: _jsx(ShoppingCart, { className: "h-4 w-4" }) },
+    { key: 'notifications', label: 'Notifications', icon: _jsx(Bell, { className: "h-4 w-4" }) },
+    { key: 'help', label: 'Help', icon: _jsx(HelpCircle, { className: "h-4 w-4" }) },
+];
+// ─── 区块包装 ────────────────────────────────────────────────────────────────
+function Section({ title, description, children }) {
+    return (_jsxs("section", { className: "space-y-3", children: [_jsxs("div", { children: [_jsx("h2", { className: "text-lg font-semibold", children: title }), description && _jsx("p", { className: "text-sm text-muted-foreground", children: description })] }), children] }));
+}
+// ─── 页面 ────────────────────────────────────────────────────────────────────
+export default 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 (_jsxs("div", { className: "p-8 max-w-6xl mx-auto space-y-10", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-3xl font-bold mb-2", children: "Menu \u7EC4\u4EF6\u4F7F\u7528\u793A\u4F8B" }), _jsx("p", { className: "text-muted-foreground", children: "\u652F\u6301 top / left \u5E03\u5C40\u3001\u591A\u5C42\u5D4C\u5957\u3001\u56FE\u6807\u3001\u6298\u53E0\u7B49\u573A\u666F" })] }), _jsxs(Section, { title: "1. \u57FA\u7840 Left \u6A21\u5F0F (data config)", description: "\u6700\u5E38\u7528\u7684\u4FA7\u8FB9\u83DC\u5355\uFF0C\u652F\u6301\u591A\u7EA7\u5C55\u5F00 (expandMode=multiple)", children: [_jsx("div", { className: "w-56 border rounded-lg overflow-hidden", children: _jsx(Menu, { mode: "left", expandMode: "multiple", selectedKey: selectedKey, onSelect: setSelectedKey, items: menuItems }) }), _jsxs("p", { className: "text-sm text-muted-foreground", children: ["\u5F53\u524D\u9009\u4E2D: ", selectedKey] })] }), _jsx(Section, { title: "2. \u624B\u98CE\u7434\u5C55\u5F00 (accordion)", description: "\u540C\u4E00\u5C42\u7EA7\u540C\u65F6\u53EA\u80FD\u5C55\u5F00\u4E00\u4E2A\u5B50\u83DC\u5355", children: _jsx("div", { className: "w-56 border rounded-lg overflow-hidden", children: _jsx(Menu, { mode: "left", expandMode: "accordion", selectedKey: accordionKey, onSelect: setAccordionKey, items: menuItems }) }) }), _jsx(Section, { title: "3. \u6298\u53E0\u6A21\u5F0F (collapsed)", description: "\u6536\u8D77\u540E\u4EC5\u5C55\u793A\u56FE\u6807\uFF0Chover \u5F39\u51FA\u5B50\u83DC\u5355", children: _jsx("div", { className: "border rounded-lg overflow-hidden inline-flex", children: _jsx(Menu, { mode: "left", selectedKey: collapsedKey, onSelect: setCollapsedKey, collapsed: collapsed, onCollapse: setCollapsed, items: iconMenuItems }) }) }), _jsx(Section, { title: "4. JSX \u7EC4\u5408\u5F0F", description: "\u4E0D\u4F7F\u7528 data config\uFF0C\u76F4\u63A5\u7EC4\u5408 Menu.Item / Menu.SubMenu", children: _jsx("div", { className: "w-56 border rounded-lg overflow-hidden", children: _jsxs(Menu, { mode: "left", defaultSelectedKey: "overview", children: [_jsx(Menu.Item, { eventKey: "overview", icon: _jsx(LayoutDashboard, { className: "h-4 w-4" }), children: "Overview" }), _jsxs(Menu.SubMenu, { eventKey: "manage", label: "Manage", icon: _jsx(Package, { className: "h-4 w-4" }), children: [_jsx(Menu.Item, { eventKey: "manage-list", children: "List" }), _jsx(Menu.Item, { eventKey: "manage-edit", children: "Edit" })] }), _jsxs(Menu.SubMenu, { eventKey: "settings", label: "Settings", icon: _jsx(Settings, { className: "h-4 w-4" }), children: [_jsx(Menu.Item, { eventKey: "jsx-profile", children: "Profile" }), _jsx(Menu.Item, { eventKey: "jsx-billing", danger: true, children: "Billing" })] }), _jsx(Menu.Item, { eventKey: "help", icon: _jsx(HelpCircle, { className: "h-4 w-4" }), children: "Help" })] }) }) }), _jsx(Section, { title: "5. \u5B50\u83DC\u5355\u5F39\u51FA\u6A21\u5F0F (popup)", description: "\u5C55\u5F00\u72B6\u6001\u4E0B\u4E5F\u80FD\u8BA9\u5B50\u83DC\u5355\u4EE5\u5F39\u51FA\u65B9\u5F0F\u5C55\u793A", children: _jsx("div", { className: "w-56 border rounded-lg overflow-hidden", children: _jsx(Menu, { mode: "left", expandMode: "multiple", selectedKey: selectedKey, onSelect: setSelectedKey, items: [
+                            { key: 'd1', label: 'Dashboard', icon: _jsx(LayoutDashboard, { className: "h-4 w-4" }) },
+                            {
+                                key: 'p1',
+                                label: 'Products',
+                                icon: _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: _jsx(HelpCircle, { className: "h-4 w-4" }) },
+                        ] }) }) }), _jsxs(Section, { title: "6. Top \u6A21\u5F0F", description: "\u4E00\u7EA7\u83DC\u5355\u6C34\u5E73\u6392\u5217\uFF0C\u5B50\u83DC\u5355\u4E0B\u62C9\u5F39\u51FA", children: [_jsx("div", { className: "border rounded-lg w-full", children: _jsx(Menu, { mode: "top", selectedKey: topKey, onSelect: setTopKey, items: topItems, className: "border-b" }) }), _jsxs("p", { className: "text-sm text-muted-foreground", children: ["\u5F53\u524D\u9009\u4E2D: ", topKey] })] }), _jsx(Section, { title: "7. Click \u89E6\u53D1", description: "\u70B9\u51FB\u5C55\u5F00\u5B50\u83DC\u5355\uFF0C\u800C\u975E hover", children: _jsx("div", { className: "w-56 border rounded-lg overflow-hidden", children: _jsx(Menu, { mode: "left", expandTrigger: "click", expandMode: "multiple", selectedKey: selectedKey, onSelect: setSelectedKey, items: menuItems }) }) }), _jsx(Section, { title: "8. \u72B6\u6001\u5C55\u793A", description: "disabled / danger \u6837\u5F0F\u6F14\u793A", children: _jsx("div", { className: "w-56 border rounded-lg overflow-hidden", children: _jsxs(Menu, { mode: "left", defaultSelectedKey: "normal", children: [_jsx(Menu.Item, { eventKey: "normal", icon: _jsx(FileText, { className: "h-4 w-4" }), children: "\u6B63\u5E38\u83DC\u5355\u9879" }), _jsx(Menu.Item, { eventKey: "disabled-item", disabled: true, icon: _jsx(FileText, { className: "h-4 w-4" }), children: "\u7981\u7528\u83DC\u5355\u9879" }), _jsx(Menu.Item, { eventKey: "danger-item", danger: true, icon: _jsx(FileText, { className: "h-4 w-4" }), children: "\u5371\u9669\u83DC\u5355\u9879" }), _jsxs(Menu.SubMenu, { eventKey: "sub-disabled", label: "\u542B\u7981\u7528\u5B50\u9879", icon: _jsx(Settings, { className: "h-4 w-4" }), children: [_jsx(Menu.Item, { eventKey: "sub-normal", children: "\u6B63\u5E38\u5B50\u9879" }), _jsx(Menu.Item, { eventKey: "sub-danger", danger: true, children: "\u5371\u9669\u5B50\u9879" }), _jsx(Menu.Item, { eventKey: "sub-disabled-item", disabled: true, children: "\u7981\u7528\u5B50\u9879" })] })] }) }) }), _jsx(Section, { title: "9. \u65E0 icon \u6298\u53E0", description: "\u6536\u8D77\u65F6\u65E0 icon \u7684\u83DC\u5355\u9879\u7559\u767D\u5360\u4F4D", children: _jsx("div", { className: "border rounded-lg overflow-hidden inline-flex", children: _jsx(Menu, { mode: "left", defaultCollapsed: true, expandMode: "multiple", items: [
+                            { key: 'a', label: 'Home', icon: _jsx(LayoutDashboard, { className: "h-4 w-4" }) },
+                            { key: 'b', label: 'Reports' },
+                            { key: 'c', label: 'Settings', icon: _jsx(Settings, { className: "h-4 w-4" }) },
+                        ] }) }) })] }));
+}