@_tc/template-core 0.0.1 → 0.0.2

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

@@ -0,0 +1,51 @@
+import { type ReactNode } from 'react';
+type VerticalLayout = {
+    layout?: 'vertical';
+};
+type HorizontalLayout = {
+    layout?: 'horizontal';
+    /**
+     * 标签宽度
+     * @default 'auto'
+     */
+    labelWidth?: string | number;
+    /**
+     * 标签对齐方式
+     * @default 'left'
+     */
+    labelAlign?: 'left' | 'right' | 'center';
+};
+export type LabelLayout = HorizontalLayout | VerticalLayout;
+export type LabelProps = {
+    /**
+     * 标签文本
+     */
+    label: ReactNode;
+    /**
+     * 标签内容
+     */
+    children: ReactNode;
+    /**
+     * 是否必填（显示红色星号）
+     */
+    required?: boolean;
+    /**
+     * 标签的 htmlFor 属性
+     */
+    htmlFor?: string;
+    /**
+     * 容器类名
+     */
+    className?: string;
+    /**
+     * 标签类名
+     */
+    labelClassName?: string;
+    /**
+     * 内容区域类名
+     */
+    contentClassName?: string;
+} & LabelLayout;
+declare const Label: import("react").ForwardRefExoticComponent<LabelProps & import("react").RefAttributes<HTMLDivElement>>;
+export { Label };
+//# sourceMappingURL=Label.d.ts.map

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

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../lib/utils';
+import { forwardRef, useMemo } from 'react';
+// 标签对齐样式
+const labelAlignStyles = {
+    left: 'text-left',
+    right: 'text-right',
+    center: 'text-center',
+};
+const Label = forwardRef((props, ref) => {
+    const { label, children, layout = 'vertical', required = false, htmlFor, className, labelClassName, contentClassName, } = props;
+    const isVertical = layout === 'vertical';
+    // 标签样式
+    const labelStyles = cn('text-sm font-medium text-foreground', required && "before:content-['*'] before:pt-1 before:mr-0.5 before:text-destructive", labelClassName);
+    const { usedClassName, labelWidth } = useMemo(() => {
+        let usedLabelWidth;
+        let usedClassName;
+        if (props.layout === 'horizontal') {
+            const labelWidth = props.labelWidth;
+            usedLabelWidth =
+                typeof labelWidth === 'number' ? `${labelWidth}px` : labelWidth === 'auto' ? 'auto' : labelWidth ?? 'auto';
+            usedClassName = labelAlignStyles[props.labelAlign ?? 'left'];
+        }
+        return {
+            usedClassName,
+            labelWidth: usedLabelWidth,
+        };
+    }, [props]);
+    if (isVertical) {
+        return (_jsxs("div", { ref: ref, className: cn('tc-ui-label flex flex-col gap-2', className), children: [_jsx("label", { htmlFor: htmlFor, className: labelStyles, children: label }), _jsx("div", { className: cn('w-full', contentClassName), children: children })] }));
+    }
+    return (_jsxs("div", { ref: ref, className: cn('tc-ui-label flex items-center gap-4', className), children: [_jsx("label", { htmlFor: htmlFor, className: cn(labelStyles, usedClassName), style: { width: labelWidth, flexShrink: 0 }, children: label }), _jsx("div", { className: cn('flex-1', contentClassName), children: children })] }));
+});
+Label.displayName = 'Label';
+export { Label };

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

@@ -0,0 +1,3 @@
+export * from './Label';
+export { Label as default } from './Label';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,2 @@
+export * from './Label';
+export { Label as default } from './Label';

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

@@ -0,0 +1,18 @@
+import { type FC } from "react";
+import { MenuItem } from "./MenuItem";
+import { SubMenu } from "./SubMenu";
+import type { MenuProps } from "./menuTypes";
+export interface CollapseToggleHandle {
+    collapse: () => void;
+    expand: () => void;
+}
+export interface CollapseToggleProps {
+    className?: string;
+}
+export declare const CollapseToggle: import("react").ForwardRefExoticComponent<CollapseToggleProps & import("react").RefAttributes<CollapseToggleHandle>>;
+export declare const Menu: FC<MenuProps> & {
+    Item: typeof MenuItem;
+    SubMenu: typeof SubMenu;
+    CollapseToggle: typeof CollapseToggle;
+};
+//# sourceMappingURL=Menu.d.ts.map

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

@@ -0,0 +1,102 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/utils";
+import { forwardRef, useEffect, useImperativeHandle, useRef, } from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { CollapsedContext, useMenuStore, MenuStoreContext, createMenuContextValue, } from "./MenuContext";
+import { MenuItem } from "./MenuItem";
+import { SubMenu } from "./SubMenu";
+function renderItems(items, parentKey) {
+    return items.map((item) => {
+        if (item.children && item.children.length > 0) {
+            return (_jsx(SubMenu, { eventKey: item.key, label: item.label, icon: item.icon, disabled: item.disabled, popup: item.popup, parentKey: parentKey, children: renderItems(item.children, item.key) }, item.key));
+        }
+        return (_jsx(MenuItem, { eventKey: item.key, icon: item.icon, disabled: item.disabled, danger: item.danger, onClick: item.onClick, className: item.className, style: item.style, width: item.width, minWidth: item.minWidth, maxWidth: item.maxWidth, children: item.label }, item.key));
+    });
+}
+export const CollapseToggle = forwardRef(({ className }, ref) => {
+    const collapsed = useMenuStore((s) => s.collapsed);
+    const setCollapsed = useMenuStore((s) => s.setCollapsed);
+    const onCollapse = useMenuStore((s) => s.onCollapse);
+    const propsCollapsed = useMenuStore((s) => s.propsCollapsed);
+    const shouldShowCollapseToggle = () => {
+        /**
+         * 传入 collapsed 且没有 onCollapse 时，表示折叠状态完全由外部控制。
+         * 内部控制器无法改变状态，因此不渲染。
+         */
+        if (typeof propsCollapsed !== "undefined" &&
+            typeof onCollapse === "undefined") {
+            return false;
+        }
+        return true;
+    };
+    useImperativeHandle(ref, () => ({
+        collapse: () => setCollapsed(true),
+        expand: () => setCollapsed(false),
+    }), [setCollapsed]);
+    if (!shouldShowCollapseToggle()) {
+        return null;
+    }
+    return (_jsx("div", { role: "button", onClick: () => setCollapsed(!collapsed), className: cn("mx-1 mb-1 flex h-9 cursor-pointer items-center justify-center rounded-lg", "text-muted-foreground transition-all", "hover:bg-muted/60 hover:text-foreground", className), children: collapsed ? (_jsx(ChevronRight, { className: "h-4 w-4" })) : (_jsx(ChevronLeft, { className: "h-4 w-4" })) }));
+});
+CollapseToggle.displayName = "CollapseToggle";
+function MenuInner({ children, items, className, mode, }) {
+    const collapsed = useMenuStore((s) => s.collapsed);
+    const collapsedWidth = useMenuStore((s) => s.collapsedWidth);
+    const content = items ? renderItems(items) : children;
+    return (_jsxs("nav", { role: "menu", className: cn("tc-ui-menu relative overflow-hidden rounded-xl bg-background shadow-sm", mode === "left" && "flex flex-col p-1", mode === "top" && "flex flex-row items-center p-[3px]", className), style: mode === "left" && collapsed ? { width: collapsedWidth } : undefined, children: [mode === "left" && _jsx(CollapseToggle, {}), _jsx(CollapsedContext.Provider, { value: mode === "left" && collapsed, children: _jsx("div", { className: cn(mode === "left" && "flex flex-col gap-1", mode === "top" && "flex flex-row items-center gap-1"), children: content }) })] }));
+}
+export const Menu = ({ mode = "left", expandTrigger = "click", expandMode = "accordion", selectedKey: controlledSelectedKey, defaultSelectedKey, onSelect, items, children, className, collapsed: controlledCollapsed, defaultCollapsed, onCollapse, collapsedWidth = 64, collapsedLabelTooltip = true, }) => {
+    const storeRef = useRef(null);
+    if (!storeRef.current) {
+        storeRef.current = createMenuContextValue({
+            mode,
+            expandTrigger,
+            expandMode,
+            selectedKey: controlledSelectedKey,
+            defaultSelectedKey,
+            collapsed: controlledCollapsed,
+            propsCollapsed: controlledCollapsed,
+            defaultCollapsed,
+            collapsedWidth,
+            collapsedLabelTooltip,
+            onSelect,
+            onCollapse,
+        });
+    }
+    const store = storeRef.current;
+    useEffect(() => {
+        store.setState({
+            mode,
+            expandTrigger,
+            expandMode,
+            propsCollapsed: controlledCollapsed,
+            collapsedWidth,
+            collapsedLabelTooltip,
+            onSelect,
+            onCollapse,
+        });
+    }, [
+        mode,
+        expandTrigger,
+        expandMode,
+        controlledCollapsed,
+        collapsedWidth,
+        collapsedLabelTooltip,
+        onSelect,
+        onCollapse,
+    ]);
+    useEffect(() => {
+        if (controlledSelectedKey !== undefined) {
+            store.setState({ selectedKey: controlledSelectedKey });
+        }
+    }, [controlledSelectedKey]);
+    useEffect(() => {
+        if (controlledCollapsed !== undefined) {
+            store.setState({ collapsed: controlledCollapsed });
+        }
+    }, [controlledCollapsed]);
+    return (_jsx(MenuStoreContext.Provider, { value: store, children: _jsx(MenuInner, { mode: mode, items: items, className: className, children: children }) }));
+};
+Menu.Item = MenuItem;
+Menu.SubMenu = SubMenu;
+Menu.CollapseToggle = CollapseToggle;

package/fe/packages/ui/react/components/Menu/MenuContext.d.ts

@@ -0,0 +1,39 @@
+export declare const CollapsedContext: import("react").Context<boolean>;
+interface MenuStore {
+    mode: 'top' | 'left';
+    expandTrigger: 'hover' | 'click';
+    expandMode: 'accordion' | 'multiple';
+    selectedKey: string | undefined;
+    openKeys: string[];
+    openKeyParents: Record<string, string>;
+    collapsed: boolean;
+    propsCollapsed: boolean | undefined;
+    collapsedWidth: number;
+    collapsedLabelTooltip: boolean;
+    onSelect: ((key: string) => void) | undefined;
+    onCollapse: ((collapsed: boolean) => void) | undefined;
+    isControlledSelected: boolean;
+    isControlledCollapsed: boolean;
+    setSelectedKey: (key: string) => void;
+    toggleOpenKey: (key: string, parentKey?: string) => void;
+    setCollapsed: (collapsed: boolean) => void;
+}
+declare const MenuStoreContext: import("react").Context<import("zustand").StoreApi<MenuStore> | null>;
+export declare function useMenuStore<T>(selector: (state: MenuStore) => T): T;
+export declare function createMenuContextValue(overrides: {
+    mode?: 'top' | 'left';
+    expandTrigger?: 'hover' | 'click';
+    expandMode?: 'accordion' | 'multiple';
+    selectedKey?: string;
+    defaultSelectedKey?: string;
+    collapsed?: boolean;
+    propsCollapsed?: boolean;
+    defaultCollapsed?: boolean;
+    collapsedWidth?: number;
+    collapsedLabelTooltip?: boolean;
+    onSelect?: (key: string) => void;
+    onCollapse?: (collapsed: boolean) => void;
+}): import("zustand").StoreApi<MenuStore>;
+export { MenuStoreContext };
+export type { MenuStore };
+//# sourceMappingURL=MenuContext.d.ts.map

package/fe/packages/ui/react/components/Menu/MenuContext.js

@@ -0,0 +1,97 @@
+import { createContext, useContext } from 'react';
+export const CollapsedContext = createContext(false);
+import { createStore, useStore } from 'zustand';
+function createMenuStore(props) {
+    const { mode, expandTrigger, propsCollapsed, expandMode, collapsedWidth, } = props;
+    const isControlledSelected = props.selectedKey !== undefined;
+    const isControlledCollapsed = props.collapsed !== undefined;
+    return createStore((set, get) => ({
+        mode,
+        expandTrigger,
+        expandMode,
+        selectedKey: props.selectedKey ?? props.defaultSelectedKey,
+        openKeys: [],
+        openKeyParents: {},
+        collapsed: props.collapsed ?? props.defaultCollapsed ?? false,
+        propsCollapsed,
+        collapsedWidth,
+        collapsedLabelTooltip: props.collapsedLabelTooltip,
+        onSelect: props.onSelect,
+        onCollapse: props.onCollapse,
+        isControlledSelected,
+        isControlledCollapsed,
+        setSelectedKey: (key) => {
+            const { isControlledSelected, onSelect } = get();
+            if (!isControlledSelected) {
+                set({ selectedKey: key });
+            }
+            onSelect?.(key);
+        },
+        toggleOpenKey: (key, parentKey) => {
+            const { openKeys, openKeyParents, expandMode } = get();
+            const isOpen = openKeys.includes(key);
+            if (expandMode === 'accordion') {
+                const nextParents = { ...openKeyParents };
+                if (isOpen) {
+                    delete nextParents[key];
+                }
+                else {
+                    const siblings = openKeys.filter((k) => openKeyParents[k] === parentKey);
+                    siblings.forEach((k) => delete nextParents[k]);
+                    if (parentKey)
+                        nextParents[key] = parentKey;
+                }
+                set({
+                    openKeys: isOpen
+                        ? openKeys.filter((k) => k !== key)
+                        : openKeys.filter((k) => openKeyParents[k] !== parentKey).concat(key),
+                    openKeyParents: nextParents,
+                });
+            }
+            else {
+                if (isOpen) {
+                    const nextParents = { ...openKeyParents };
+                    delete nextParents[key];
+                    set({ openKeys: openKeys.filter((k) => k !== key), openKeyParents: nextParents });
+                }
+                else {
+                    set({
+                        openKeys: [...openKeys, key],
+                        openKeyParents: parentKey ? { ...openKeyParents, [key]: parentKey } : openKeyParents,
+                    });
+                }
+            }
+        },
+        setCollapsed: (collapsed) => {
+            const { isControlledCollapsed, onCollapse } = get();
+            if (!isControlledCollapsed) {
+                set({ collapsed });
+            }
+            onCollapse?.(collapsed);
+        },
+    }));
+}
+const MenuStoreContext = createContext(null);
+export function useMenuStore(selector) {
+    const store = useContext(MenuStoreContext);
+    if (!store)
+        throw new Error('Menu compound components must be used within <Menu>');
+    return useStore(store, selector);
+}
+export function createMenuContextValue(overrides) {
+    return createMenuStore({
+        mode: overrides.mode ?? 'left',
+        expandTrigger: overrides.expandTrigger ?? 'click',
+        expandMode: overrides.expandMode ?? 'accordion',
+        selectedKey: overrides.selectedKey,
+        defaultSelectedKey: overrides.defaultSelectedKey,
+        collapsed: overrides.collapsed,
+        propsCollapsed: overrides.propsCollapsed,
+        defaultCollapsed: overrides.defaultCollapsed,
+        collapsedWidth: overrides.collapsedWidth ?? 64,
+        collapsedLabelTooltip: overrides.collapsedLabelTooltip ?? true,
+        onSelect: overrides.onSelect,
+        onCollapse: overrides.onCollapse,
+    });
+}
+export { MenuStoreContext };

package/fe/packages/ui/react/components/Menu/MenuItem.d.ts

@@ -0,0 +1,3 @@
+import type { MenuItemProps } from "./menuTypes";
+export declare function MenuItem({ eventKey, icon, disabled, danger, onClick, children, className, style, width, minWidth, maxWidth, ...props }: MenuItemProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MenuItem.d.ts.map

package/fe/packages/ui/react/components/Menu/MenuItem.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/utils";
+import { useCallback, useContext, useRef, useState } from "react";
+import { Button } from "../Button";
+import { CollapsedContext, useMenuStore } from "./MenuContext";
+import { Popup } from "../Popup";
+import { getFirstChar } from "./utils";
+export function MenuItem({ eventKey, icon, disabled, danger, onClick, children, className, style, width, minWidth, maxWidth, ...props }) {
+    const mode = useMenuStore((s) => s.mode);
+    const selectedKey = useMenuStore((s) => s.selectedKey);
+    const setSelectedKey = useMenuStore((s) => s.setSelectedKey);
+    const collapsed = useContext(CollapsedContext);
+    const collapsedLabelTooltip = useMenuStore((s) => s.collapsedLabelTooltip);
+    const isSelected = selectedKey === eventKey;
+    const triggerRef = useRef(null);
+    const [showTooltip, setShowTooltip] = useState(false);
+    const handleClick = useCallback(() => {
+        if (disabled)
+            return;
+        eventKey && setSelectedKey(eventKey);
+        onClick?.();
+    }, [disabled, eventKey, onClick, setSelectedKey]);
+    return (_jsxs("div", { ref: triggerRef, className: "relative", onMouseEnter: () => collapsed && collapsedLabelTooltip && setShowTooltip(true), onMouseLeave: () => collapsed && collapsedLabelTooltip && setShowTooltip(false), children: [_jsxs(Button, { ...props, variant: "text", role: "menuitem", disabled: disabled, onClick: handleClick, className: cn("menuitem group relative flex items-center rounded-lg text-sm outline-none transition-all", "focus-visible:ring-2 focus-visible:ring-theme/30 focus-visible:ring-offset-0", mode === "top" &&
+                    "h-10 w-auto min-w-fit justify-start gap-3 px-3 py-2 text-left", mode === "left" &&
+                    collapsed &&
+                    "h-10 w-full justify-center gap-0 px-0 py-2", mode === "left" &&
+                    !collapsed &&
+                    "min-h-10 w-full gap-3 px-3 py-2.5 text-left", isSelected && "bg-theme text-theme-foreground shadow-sm", !isSelected &&
+                    !danger &&
+                    "text-foreground hover:bg-gray-200 dark:hover:bg-gray-700", danger && !isSelected && "text-destructive hover:bg-destructive/10", disabled && "cursor-not-allowed opacity-50", className), style: collapsed ? style : { width, minWidth, maxWidth, ...style }, children: [icon && (_jsx("span", { className: cn("flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-md transition-colors", isSelected
+                            ? "bg-theme-foreground/15"
+                            : "text-muted-foreground group-hover:text-foreground"), children: icon })), !collapsed && (_jsx("span", { className: "min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap", children: children })), collapsed && !icon && collapsedLabelTooltip && (_jsx("span", { className: "absolute left-0 right-0 top-0 flex h-full items-center justify-center text-[10px]", children: getFirstChar(children) }))] }), _jsx(Popup, { open: showTooltip, anchorRef: triggerRef, placement: "right-start", offset: 8, onOpenChange: setShowTooltip, className: "border-0 bg-transparent p-0 shadow-none", keepMounted: true, children: _jsx("div", { className: "whitespace-nowrap rounded-lg bg-gray-900 px-3 py-1.5 text-xs text-white shadow-sm", children: children }) })] }));
+}

package/fe/packages/ui/react/components/Menu/SubMenu.d.ts

@@ -0,0 +1,10 @@
+import type { SubMenuProps } from "./menuTypes";
+/**
+ * 渲染带子菜单的 Menu 项。
+ *
+ * 根据当前 menu mode、收起状态、是否在弹出层内，决定子菜单是内嵌展开还是 Popup 弹出。
+ *
+ * @returns SubMenu 完整节点，包含触发区域和子菜单内容。
+ */
+export declare function SubMenu({ eventKey, label, icon, disabled, popup: forcePopup, parentKey, children, }: SubMenuProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SubMenu.d.ts.map

package/fe/packages/ui/react/components/Menu/SubMenu.js

@@ -0,0 +1,169 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/utils";
+import { createContext, useCallback, useContext, useRef, useState, } from "react";
+import { ChevronDown, ChevronRight, ChevronUp } from "lucide-react";
+import { Popup } from "../Popup";
+import { CollapsedContext, useMenuStore } from "./MenuContext";
+import { getFirstChar } from "./utils";
+const SUBMENU_POPUP_OFFSET = 12;
+const SubMenuLevelContext = createContext(0);
+/**
+ * 计算 top 模式下，二级及更深层 submenu 的弹出位置。
+ *
+ * @returns 优先放在右侧；右侧空间不够时，改放到左侧。
+ */
+const getTopNestedSubMenuPosition = ({ anchorRect, contentRect, viewportWidth, offset, matchAnchorWidth, }) => {
+    const width = contentRect?.width ?? 0;
+    const rightLeft = anchorRect.right + offset;
+    const canPlaceRight = rightLeft + width <= viewportWidth;
+    return {
+        top: anchorRect.top,
+        left: canPlaceRight
+            ? rightLeft
+            : Math.max(0, anchorRect.left - width - offset),
+        width: matchAnchorWidth ? anchorRect.width : undefined,
+    };
+};
+/**
+ * 判断当前 SubMenu 的子节点里，有没有选中的菜单项。
+ *
+ * @param children SubMenu 下面渲染出来的菜单节点。
+ * @param targetKey 当前选中的 key。
+ * @returns 子孙节点里命中选中 key 时返回 true。
+ */
+function hasDescendantSelected(children, targetKey) {
+    if (!targetKey)
+        return false;
+    return walkReactChildren(children, targetKey);
+}
+/**
+ * 递归遍历 React children，查找指定 eventKey。
+ *
+ * @param node 当前要检查的 React 节点。
+ * @param targetKey 要查找的 eventKey。
+ * @returns 当前节点或子孙节点命中时返回 true。
+ */
+function walkReactChildren(node, targetKey) {
+    if (!node)
+        return false;
+    if (Array.isArray(node))
+        return node.some((n) => walkReactChildren(n, targetKey));
+    if (typeof node === "object" && node && "props" in node) {
+        const props = node.props;
+        if (props.eventKey === targetKey)
+            return true;
+        if (walkReactChildren(props.children, targetKey))
+            return true;
+    }
+    return false;
+}
+/**
+ * 渲染 SubMenu 的触发区域，也就是能点击/hover 的那一行。
+ *
+ * @returns SubMenu trigger 节点。
+ */
+function SubMenuItem({ triggerRef, onClick, icon, label, disabled, collapsed, descendantSelected, ArrowIcon, showArrow, setPopupContentRef, mode, }) {
+    const collapsedLabelTooltip = useMenuStore((s) => s.collapsedLabelTooltip);
+    return (_jsxs("div", { ref: triggerRef, onClick: onClick, className: cn("subMenuItem group relative flex items-center rounded-lg text-sm transition-all", "select-none", mode === "top" &&
+            "h-10 w-auto min-w-fit justify-start gap-3 px-3 py-2 text-left", mode === "left" &&
+            collapsed &&
+            "h-10 w-full justify-center gap-0 px-0 py-2", mode === "left" &&
+            !collapsed &&
+            "min-h-10 w-full gap-3 px-3 py-2.5 text-left", descendantSelected && "bg-theme/10 text-theme shadow-sm", !descendantSelected &&
+            "text-foreground hover:bg-gray-200 dark:hover:bg-gray-700", disabled && "cursor-not-allowed opacity-50"), children: [icon && (_jsx("span", { className: cn("flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-md transition-colors", descendantSelected
+                    ? "bg-theme/10 text-theme"
+                    : "text-muted-foreground group-hover:text-foreground"), children: icon })), !collapsed && _jsx("span", { className: "min-w-0 flex-1 truncate", children: label }), collapsed && !icon && collapsedLabelTooltip && (_jsx("span", { className: "absolute left-0 right-0 top-0 flex h-full items-center justify-center text-[10px]", children: getFirstChar(label) })), !collapsed && showArrow && (_jsx(ArrowIcon, { className: "h-4 w-4 flex-shrink-0 text-muted-foreground transition-transform group-hover:text-foreground" })), _jsx("div", { ref: setPopupContentRef })] }));
+}
+/**
+ * 渲染带子菜单的 Menu 项。
+ *
+ * 根据当前 menu mode、收起状态、是否在弹出层内，决定子菜单是内嵌展开还是 Popup 弹出。
+ *
+ * @returns SubMenu 完整节点，包含触发区域和子菜单内容。
+ */
+export function SubMenu({ eventKey, label, icon, disabled, popup: forcePopup, parentKey, children, }) {
+    const mode = useMenuStore((s) => s.mode);
+    const expandTrigger = useMenuStore((s) => s.expandTrigger);
+    const storeCollapsed = useMenuStore((s) => s.collapsed);
+    const collapsed = useContext(CollapsedContext);
+    const openKeys = useMenuStore((s) => s.openKeys);
+    const toggleOpenKey = useMenuStore((s) => s.toggleOpenKey);
+    const selectedKey = useMenuStore((s) => s.selectedKey);
+    const level = useContext(SubMenuLevelContext);
+    const isOpen = openKeys.includes(eventKey);
+    const triggerRef = useRef(null);
+    const popupContentRef = useRef(null);
+    const [popupContainer, setPopupContainer] = useState(undefined);
+    const [popupOpen, setPopupOpen] = useState(false);
+    // 处于弹出层内：store 已收起但 context 被覆盖为 false
+    const isInsidePopup = storeCollapsed && !collapsed;
+    // mode=top always popup; left+collapsed always popup; inside popup -> popup; else check popup flag
+    const usePopup = mode === "top" ||
+        (mode === "left" && collapsed) ||
+        isInsidePopup ||
+        forcePopup === true;
+    const descendantSelected = hasDescendantSelected(children, selectedKey);
+    const setPopupContentRef = useCallback((el) => {
+        popupContentRef.current = el;
+        if (el)
+            setPopupContainer(el);
+    }, []);
+    const handleMouseEnter = useCallback(() => {
+        if (disabled)
+            return;
+        if (usePopup) {
+            setPopupOpen(true);
+        }
+        else if (expandTrigger === "hover" && !isOpen) {
+            toggleOpenKey(eventKey, parentKey);
+        }
+    }, [
+        disabled,
+        usePopup,
+        expandTrigger,
+        isOpen,
+        eventKey,
+        parentKey,
+        toggleOpenKey,
+    ]);
+    const handleMouseLeave = useCallback(() => {
+        if (usePopup) {
+            setPopupOpen(false);
+        }
+    }, [usePopup]);
+    const handleTriggerClick = useCallback(() => {
+        if (disabled)
+            return;
+        if (usePopup) {
+            setPopupOpen((prev) => !prev);
+        }
+        else {
+            toggleOpenKey(eventKey, parentKey);
+        }
+    }, [disabled, usePopup, eventKey, parentKey, toggleOpenKey]);
+    const showArrow = !(mode === "left" && collapsed);
+    const ArrowIcon = usePopup
+        ? mode === "top" && level === 0
+            ? ChevronDown
+            : ChevronRight
+        : isOpen
+            ? ChevronUp
+            : ChevronDown;
+    const popupPlacement = mode === "top" && level === 0 ? "bottom-start" : "right-start";
+    const popupStrategy = mode === "top" && level > 0 ? getTopNestedSubMenuPosition : undefined;
+    const hoverBridgePlacement = mode === "top" && level > 0 ? "horizontal" : "auto";
+    const subMenuContent = (_jsx("div", { className: cn(
+        // "min-w-[180px]",
+        " rounded-xl bg-muted p-2 shadow-[0_18px_44px_rgba(15,23,42,0.14),0_4px_12px_rgba(15,23,42,0.08)]"), children: _jsx(SubMenuLevelContext.Provider, { value: level + 1, children: _jsx("div", { className: "flex flex-col gap-1", children: children }) }) }));
+    /**
+     *
+     * submenu  生成的节点是  1 menuItem
+     *                        submenu「
+     *                          1-1
+     *                          1-2
+     *                        」
+     *
+     * 所以判断鼠标是否在区域内应该是 监听 submenu 的根节点
+     */
+    return (_jsxs("div", { className: "submenu", onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [_jsx(SubMenuItem, { triggerRef: triggerRef, onClick: handleTriggerClick, icon: icon, label: label, disabled: disabled, collapsed: collapsed, descendantSelected: descendantSelected, ArrowIcon: ArrowIcon, showArrow: showArrow, setPopupContentRef: setPopupContentRef, mode: mode }), usePopup ? (_jsx(Popup, { open: popupOpen, anchorRef: triggerRef, placement: popupPlacement, offset: SUBMENU_POPUP_OFFSET, hoverBridge: SUBMENU_POPUP_OFFSET, onOpenChange: setPopupOpen, container: popupContainer, strategy: popupStrategy, hoverBridgePlacement: hoverBridgePlacement, className: "border-0 bg-transparent p-0 shadow-none", children: _jsx(CollapsedContext.Provider, { value: false, children: subMenuContent }) })) : (isOpen && (_jsx("div", { className: "ml-4 pl-2 pt-1", children: _jsx(SubMenuLevelContext.Provider, { value: level + 1, children: _jsx("div", { className: "flex flex-col gap-1", children: children }) }) })))] }));
+}

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

@@ -0,0 +1,9 @@
+export { Menu } from './Menu';
+export { MenuItem } from './MenuItem';
+export { SubMenu } from './SubMenu';
+export { CollapseToggle } from './Menu';
+export type { MenuProps, MenuItemData, MenuItemProps, SubMenuProps } from './menuTypes';
+export type { CollapseToggleHandle, CollapseToggleProps } from './Menu';
+export { useMenuStore } from './MenuContext';
+export type { MenuStore } from './MenuContext';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,5 @@
+export { Menu } from './Menu';
+export { MenuItem } from './MenuItem';
+export { SubMenu } from './SubMenu';
+export { CollapseToggle } from './Menu';
+export { useMenuStore } from './MenuContext';

package/fe/packages/ui/react/components/Menu/menuTypes.d.ts

@@ -0,0 +1,59 @@
+import type { CSSProperties, MouseEventHandler, ReactNode, Ref } from 'react';
+export interface MenuItemData {
+    key: string;
+    label: ReactNode;
+    icon?: ReactNode;
+    disabled?: boolean;
+    danger?: boolean;
+    popup?: boolean;
+    children?: MenuItemData[];
+    onClick?: () => void;
+    className?: string;
+    style?: CSSProperties;
+    width?: CSSProperties['width'];
+    minWidth?: CSSProperties['minWidth'];
+    maxWidth?: CSSProperties['maxWidth'];
+}
+export interface MenuProps {
+    mode?: 'top' | 'left';
+    expandTrigger?: 'hover' | 'click';
+    expandMode?: 'accordion' | 'multiple';
+    selectedKey?: string;
+    defaultSelectedKey?: string;
+    onSelect?: (key: string) => void;
+    items?: MenuItemData[];
+    children?: ReactNode;
+    className?: string;
+    collapsed?: boolean;
+    defaultCollapsed?: boolean;
+    onCollapse?: (collapsed: boolean) => void;
+    collapsedWidth?: number;
+    /** 收起时无 icon 的项是否通过 tooltip 显示完整名称，默认 true */
+    collapsedLabelTooltip?: boolean;
+}
+export interface SubMenuProps {
+    eventKey: string;
+    label: ReactNode;
+    icon?: ReactNode;
+    disabled?: boolean;
+    popup?: boolean;
+    parentKey?: string;
+    children?: ReactNode;
+}
+export interface MenuItemProps {
+    eventKey?: string;
+    icon?: ReactNode;
+    disabled?: boolean;
+    danger?: boolean;
+    onClick?: () => void;
+    children?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+    width?: CSSProperties['width'];
+    minWidth?: CSSProperties['minWidth'];
+    maxWidth?: CSSProperties['maxWidth'];
+    onMouseLeave?: MouseEventHandler<HTMLButtonElement>;
+    onMouseEnter?: MouseEventHandler<HTMLButtonElement>;
+    ref?: Ref<HTMLButtonElement>;
+}
+//# sourceMappingURL=menuTypes.d.ts.map

package/fe/packages/ui/react/components/Menu/menuTypes.js

@@ -0,0 +1 @@
+export {};

package/fe/packages/ui/react/components/Menu/utils.d.ts

@@ -0,0 +1,2 @@
+export declare function getFirstChar(node: React.ReactNode): string;
+//# sourceMappingURL=utils.d.ts.map