@_tc/template-core 0.0.1-bate.36 → 0.0.1-bate.38

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

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

@@ -0,0 +1,7 @@
+export function getFirstChar(node) {
+    if (typeof node === "string")
+        return node[0]?.toUpperCase() ?? "";
+    if (typeof node === "number")
+        return String(node);
+    return "";
+}

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

@@ -1,7 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useI18n } from '../../i18n';
 import { cn } from '../../lib/utils';
 import { AlertCircle, CheckCircle2, Info, X, XCircle } from 'lucide-react';
 import { useEffect, useRef, useState } from 'react';
+import { Button } from '../Button';
 import { DEFAULT_DURATION } from './data';
 const typeConfig = {
     success: {
@@ -22,6 +24,7 @@ const typeConfig = {
     },
 };
 export function Message({ type = 'info', content, children, duration = DEFAULT_DURATION, onClose, closable = true, className, }) {
+    const t = useI18n();
     const displayContent = children ?? content;
     const [visible, setVisible] = useState(true);
     const timerRef = useRef(null);
@@ -51,5 +54,5 @@ export function Message({ type = 'info', content, children, duration = DEFAULT_D
     }, [duration]);
     if (!visible)
         return null;
-    return (_jsxs("div", { ref: messageRef, className: cn('flex items-start gap-3 px-4 py-3 rounded-lg shadow-lg', 'bg-background border border-border', 'min-w-[320px] max-w-[480px]', 'transition-all duration-200', 'pointer-events-auto', visible ? 'opacity-100 translate-y-0' : 'opacity-0 -translate-y-2', className), children: [_jsx(Icon, { size: 20, className: cn('flex-shrink-0 mt-0.5', iconColor) }), _jsx("div", { className: "flex-1 text-sm text-foreground", children: displayContent }), closable && (_jsx("button", { type: "button", onClick: handleClose, "aria-label": "\u5173\u95ED", className: cn('flex-shrink-0 p-0.5 rounded-md', 'text-muted-foreground hover:text-foreground', 'hover:bg-muted', 'transition-colors', 'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2'), children: _jsx(X, { size: 16 }) }))] }));
+    return (_jsxs("div", { ref: messageRef, className: cn('tc-ui-message flex items-start gap-3 px-4 py-3 rounded-lg shadow-lg', 'bg-background border border-border', 'min-w-[320px] max-w-[480px]', 'transition-all duration-200', 'pointer-events-auto', visible ? 'opacity-100 translate-y-0' : 'opacity-0 -translate-y-2', className), children: [_jsx(Icon, { size: 20, className: cn('flex-shrink-0 mt-0.5', iconColor) }), _jsx("div", { className: "flex-1 text-sm text-foreground", children: displayContent }), closable && (_jsx(Button, { variant: "text", type: "button", onClick: handleClose, "aria-label": t('components.message.close'), className: cn('flex-shrink-0 p-0.5 rounded-md', 'text-muted-foreground hover:text-foreground', 'hover:bg-muted', 'transition-colors', 'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2'), children: _jsx(X, { size: 16 }) }))] }));
 }

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

@@ -7,7 +7,9 @@ export type ModalProps = {
     footer?: ReactNode;
     className?: string;
     contentClassName?: string;
+    mask?: boolean;
     maskClosable?: boolean;
+    lockScroll?: boolean;
     closable?: boolean;
     width?: number | string;
     centered?: boolean;
@@ -21,5 +23,5 @@ export type ModalProps = {
      */
     keyboard?: boolean;
 };
-export declare function Modal({ open, onClose, title, children, footer, className, contentClassName, maskClosable, closable, width, centered, renderNode, keyboard, zIndex, }: ModalProps): import("react").ReactPortal | null;
+export declare function Modal({ open, onClose, title, children, footer, className, contentClassName, mask, maskClosable, lockScroll, closable, width, centered, renderNode, keyboard, zIndex, }: ModalProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Modal.d.ts.map

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

@@ -1,51 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useI18n } from '../../i18n';
 import { cn } from '../../lib/utils';
 import { X } from 'lucide-react';
-import { useEffect, useRef } from 'react';
-import { createPortal } from 'react-dom';
-export function Modal({ open = false, onClose, title, children, footer, className, contentClassName, maskClosable = true, closable = true, width = 520, centered = true, renderNode = document.body, keyboard = true, zIndex = 1000, }) {
-    const modalRef = useRef(null);
-    const contentRef = useRef(null);
-    // 处理 ESC 键关闭
-    useEffect(() => {
-        if (!open || !keyboard)
-            return;
-        const handleEscape = (e) => {
-            if (e.key === 'Escape' && closable) {
-                onClose?.();
-            }
-        };
-        document.addEventListener('keydown', handleEscape);
-        return () => {
-            document.removeEventListener('keydown', handleEscape);
-        };
-    }, [open, closable, onClose, keyboard]);
-    // 阻止 body 滚动
-    useEffect(() => {
-        if (open) {
-            const originalOverflow = document.body.style.overflow;
-            document.body.style.overflow = 'hidden';
-            return () => {
-                document.body.style.overflow = originalOverflow;
-            };
-        }
-        else {
-            return () => { };
-        }
-    }, [open]);
-    // 点击遮罩层关闭
-    const handleMaskClick = (e) => {
-        if (maskClosable && e.target === e.currentTarget) {
-            onClose?.();
-        }
-    };
+import { Button } from '../Button';
+import { Overlay } from '../Overlay';
+export function Modal({ open = false, onClose, title, children, footer, className, contentClassName, mask = true, maskClosable = true, lockScroll = true, closable = true, width = 520, centered = true, renderNode, keyboard = true, zIndex = 1000, }) {
+    const t = useI18n();
     // 点击内容区域阻止冒泡
     const handleContentClick = (e) => {
         e.stopPropagation();
     };
-    if (!open)
-        return null;
-    const modalContent = (_jsx("div", { ref: modalRef, className: cn('fixed inset-0 z-[1000] flex items-center justify-center', 'bg-black/50 backdrop-blur-sm', 'transition-opacity duration-200', open ? 'opacity-100' : 'opacity-0'), style: { zIndex }, onClick: handleMaskClick, children: _jsxs("div", { ref: contentRef, className: cn('relative bg-background rounded-lg shadow-lg', 'flex flex-col max-h-[90vh]', 'transition-all duration-200', open ? 'scale-100 opacity-100' : 'scale-95 opacity-0', centered ? 'my-auto' : 'mt-[10vh]', className), style: { width: typeof width === 'number' ? `${width}px` : width }, onClick: handleContentClick, children: [(title || closable) && (_jsxs("div", { className: "flex items-center justify-between px-6 py-4 border-border", children: [title && _jsx("div", { className: "text-lg font-semibold text-foreground", children: title }), closable && (_jsx("button", { type: "button", onClick: onClose, "aria-label": "\u5173\u95ED", className: cn('ml-auto p-1 rounded-md', 'text-muted-foreground hover:text-foreground', 'hover:bg-muted', 'transition-colors', 'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2'), children: _jsx(X, { size: 20 }) }))] })), _jsx("div", { className: cn('flex-1 overflow-auto px-6 py-4', contentClassName), children: children }), footer && _jsx("div", { className: "px-6 py-4 border-border", children: footer })] }) }));
-    const parent = typeof renderNode === 'function' ? renderNode() : renderNode;
-    return createPortal(modalContent, parent);
+    return (_jsx(Overlay, { open: open, onClose: onClose, mask: mask, maskClosable: maskClosable, lockScroll: lockScroll, keyboard: keyboard, closable: closable, renderNode: renderNode, zIndex: zIndex, className: cn('tc-ui-modal flex items-center justify-center'), children: _jsxs("div", { className: cn('relative bg-background rounded-lg shadow-lg', 'flex flex-col max-h-[90vh]', 'transition-all duration-200', open ? 'scale-100 opacity-100' : 'scale-95 opacity-0', centered ? 'my-auto' : 'mt-[10vh]', className), style: { width: typeof width === 'number' ? `${width}px` : width }, onClick: handleContentClick, children: [(title || closable) && (_jsxs("div", { className: "flex items-center justify-between px-6 py-4 border-border", children: [title && _jsx("div", { className: "text-lg font-semibold text-foreground", children: title }), closable && (_jsx(Button, { variant: "text", type: "button", onClick: onClose, "aria-label": t('components.modal.close'), className: cn('ml-auto p-1 rounded-md', 'text-muted-foreground hover:text-foreground', 'hover:bg-muted', 'transition-colors', 'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2'), children: _jsx(X, { size: 20 }) }))] })), _jsx("div", { className: cn('flex-1 overflow-auto px-6 py-4', contentClassName), children: children }), footer && _jsx("div", { className: "px-6 py-4 border-border", children: footer })] }) }));
 }

package/fe/packages/ui/react/components/Modal/ModalManager.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { t } from '../../i18n';
 import { createRoot } from 'react-dom/client';
 import { AsynchronousButton, Button } from '../Button';
 import { Modal } from './Modal';
@@ -61,13 +62,13 @@ class ModalManagerClass {
     }
 }
 export const openConfirmModal = (pConfig) => {
-    const { onOk, onCancel, okText = '确认', cancelText = '取消', ...props } = pConfig;
+    const { onOk, onCancel, okText = t('components.modal.okText'), cancelText = t('components.modal.cancelText'), ...props } = pConfig;
     const config = {
-        title: '提示',
+        title: t('components.modal.confirmTitle'),
         footer: (_jsxs("div", { className: "flex justify-end gap-3", children: [_jsx(Button, { onClick: () => {
                         onCancel?.();
                         modalManager.close(currentModalId);
-                    }, className: "min-w-[100px] bg-white border-[hsl(var(--theme-primary))] text-[hsl(var(--theme-primary))] hover:bg-[hsl(var(--theme-primary))]/5", children: cancelText }), _jsx(AsynchronousButton, { variant: "primary", onClick: async (e) => {
+                    }, className: "min-w-[100px] bg-background border-[hsl(var(--theme-primary))] text-[hsl(var(--theme-primary))] hover:bg-[hsl(var(--theme-primary))]/5", children: cancelText }), _jsx(AsynchronousButton, { variant: "primary", onClick: async (e) => {
                         const result = await onOk?.(e);
                         if (typeof result === 'boolean' && !result)
                             return;

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

@@ -0,0 +1,23 @@
+import type { CSSProperties, MouseEvent, ReactNode } from 'react';
+export declare const canUseDocument: () => boolean;
+export type OverlayProps = {
+    open?: boolean;
+    visible?: boolean;
+    children?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+    zIndex?: number;
+    mask?: boolean;
+    maskClosable?: boolean;
+    lockScroll?: boolean;
+    keyboard?: boolean;
+    closable?: boolean;
+    onClose?: () => void;
+    onClick?: (e: MouseEvent<HTMLDivElement>) => void;
+    /**
+     * @default document.body
+     */
+    renderNode?: HTMLElement | (() => HTMLElement);
+};
+export declare function Overlay({ open, visible, children, className, style, zIndex, mask, maskClosable, lockScroll, keyboard, closable, onClose, onClick, renderNode, }: OverlayProps): import("react").ReactPortal | null;
+//# sourceMappingURL=Overlay.d.ts.map

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

@@ -0,0 +1,53 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../../lib/utils';
+import { useEffect } from 'react';
+import { createPortal } from 'react-dom';
+let bodyScrollLockCount = 0;
+let originalBodyOverflow = '';
+export const canUseDocument = () => typeof document !== 'undefined';
+const lockBodyScroll = () => {
+    if (!canUseDocument())
+        return () => { };
+    if (bodyScrollLockCount === 0) {
+        originalBodyOverflow = document.body.style.overflow;
+        document.body.style.overflow = 'hidden';
+    }
+    bodyScrollLockCount += 1;
+    return () => {
+        bodyScrollLockCount = Math.max(0, bodyScrollLockCount - 1);
+        if (bodyScrollLockCount === 0) {
+            document.body.style.overflow = originalBodyOverflow;
+            originalBodyOverflow = '';
+        }
+    };
+};
+export function Overlay({ open = false, visible = open, children, className, style, zIndex = 1000, mask = true, maskClosable = true, lockScroll = true, keyboard = true, closable = true, onClose, onClick, renderNode, }) {
+    useEffect(() => {
+        if (!open || !keyboard || !canUseDocument())
+            return;
+        const handleEscape = (e) => {
+            if (e.key === 'Escape' && closable) {
+                onClose?.();
+            }
+        };
+        document.addEventListener('keydown', handleEscape);
+        return () => {
+            document.removeEventListener('keydown', handleEscape);
+        };
+    }, [open, closable, onClose, keyboard]);
+    useEffect(() => {
+        if (!open || !lockScroll)
+            return;
+        return lockBodyScroll();
+    }, [lockScroll, open]);
+    const handleMaskClick = (e) => {
+        onClick?.(e);
+        if (maskClosable && e.target === e.currentTarget) {
+            onClose?.();
+        }
+    };
+    if (!open || !canUseDocument())
+        return null;
+    const parent = typeof renderNode === 'function' ? renderNode() : (renderNode ?? document.body);
+    return createPortal(_jsx("div", { className: cn('tc-ui-overlay fixed inset-0 z-[1000]', mask && 'bg-black/50 backdrop-blur-sm', 'transition-opacity duration-200', visible ? 'opacity-100' : 'opacity-0', className), style: { zIndex, ...style }, onClick: handleMaskClick, children: children }), parent);
+}

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

@@ -0,0 +1,3 @@
+export { Overlay, canUseDocument } from './Overlay';
+export type { OverlayProps } from './Overlay';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+export { Overlay, canUseDocument } from './Overlay';

package/fe/packages/ui/react/components/{Pagination.js → Pagination/Pagination.js}

@@ -1,8 +1,8 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { cn } from '../lib/utils';
+import { cn } from '../../lib/utils';
 import { ChevronLeft, ChevronRight } from 'lucide-react';
-import { Button } from './Button';
-import { Select } from './Select';
+import { Button } from '../Button';
+import { Select } from '../Select';
 export function Pagination({ current, pageSize, total, onChange, onPageSizeChange, pageSizeOptions = [10, 20, 50, 100], className, }) {
     const totalPages = Math.ceil(total / pageSize);
     // 生成页码数组
@@ -72,7 +72,7 @@ export function Pagination({ current, pageSize, total, onChange, onPageSizeChang
     };
     if (totalPages === 0)
         return null;
-    return (_jsxs("div", { className: cn('flex items-center gap-4', className), children: [_jsxs("div", { className: "text-sm text-muted-foreground", children: ["Total ", total] }), _jsxs("div", { className: "flex-1 flex items-center justify-center gap-2", children: [_jsx(Button, { onClick: handlePrevious, disabled: current === 1, size: "sm", className: cn('inline-flex items-center justify-center', 'h-8 px-3 rounded-md', 'text-sm font-medium', 'border border-border', 'transition-colors', current === 1 ? 'cursor-not-allowed opacity-50 bg-muted' : 'hover:bg-muted bg-background cursor-pointer'), children: _jsx(ChevronLeft, { className: "h-4 w-4" }) }), getPageNumbers().map((page, index) => {
+    return (_jsxs("div", { className: cn('tc-ui-pagination flex items-center gap-4', className), children: [_jsxs("div", { className: "text-sm text-muted-foreground", children: ["Total ", total] }), _jsxs("div", { className: "flex-1 flex items-center justify-center gap-2", children: [_jsx(Button, { onClick: handlePrevious, disabled: current === 1, size: "sm", className: cn('inline-flex items-center justify-center', 'h-8 px-3 rounded-md', 'text-sm font-medium', 'border border-border', 'transition-colors', current === 1 ? 'cursor-not-allowed opacity-50 bg-muted' : 'hover:bg-muted bg-background cursor-pointer'), children: _jsx(ChevronLeft, { className: "h-4 w-4" }) }), getPageNumbers().map((page, index) => {
                         if (page === '...') {
                             return (_jsx("span", { className: "px-2 text-muted-foreground", children: "..." }, `ellipsis-${index}`));
                         }

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

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

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

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

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

@@ -0,0 +1,26 @@
+import type { CSSProperties, ReactNode, RefObject } from "react";
+import { type DropdownPlacement, type DropdownPosition, type DropdownPositioningStrategy, type UseDropdownPositioningResult } from "../hooks/useDropdownPositioning";
+export interface PopupProps {
+    open: boolean;
+    anchorRef: RefObject<HTMLElement | null>;
+    children: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+    placement?: DropdownPlacement;
+    offset?: number;
+    keepMounted?: boolean;
+    closeOnClickOutside?: boolean;
+    closeOnEscape?: boolean;
+    matchAnchorWidth?: boolean;
+    position?: DropdownPosition;
+    positioning?: UseDropdownPositioningResult;
+    strategy?: DropdownPositioningStrategy;
+    contentRef?: RefObject<HTMLDivElement | null>;
+    container?: HTMLElement;
+    positionMode?: "fixed" | "absolute";
+    hoverBridge?: number;
+    hoverBridgePlacement?: "auto" | "horizontal";
+    onOpenChange?: (open: boolean) => void;
+}
+export declare function Popup({ open, anchorRef, children, className, style, placement, offset, keepMounted, closeOnClickOutside, closeOnEscape, matchAnchorWidth, position, positioning, strategy, contentRef, container, positionMode, hoverBridge, hoverBridgePlacement, onOpenChange, }: PopupProps): import("react").ReactPortal | null;
+//# sourceMappingURL=Popup.d.ts.map

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

@@ -0,0 +1,81 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/utils";
+import { useEffect, useMemo, useRef } from "react";
+import { createPortal } from "react-dom";
+import { getDefaultDropdownPosition, useDropdownPositioning, } from "../hooks/useDropdownPositioning";
+const DEFAULT_POPUP_CLASSNAME = cn("fixed z-[9999]", "bg-background rounded-lg shadow-lg border border-gray-200", "animate-in fade-in-0 zoom-in-95");
+const canUseDocument = () => typeof document !== "undefined";
+export function Popup({ open, anchorRef, children, className, style, placement = "bottom-end", offset = 8, keepMounted = false, closeOnClickOutside = true, closeOnEscape = true, matchAnchorWidth = false, position, positioning, strategy = getDefaultDropdownPosition, contentRef, container, positionMode = "fixed", hoverBridge = 0, hoverBridgePlacement = "auto", onOpenChange, }) {
+    // 默认自己保存弹窗 DOM；如果外部传了 contentRef，就用外部的。
+    const internalContentRef = useRef(null);
+    const panelRef = contentRef ?? internalContentRef;
+    const containerRef = useMemo(() => ({ current: container ?? null }), [container]);
+    // 默认用 useDropdownPositioning 算位置；也允许外部直接传 position 或 positioning 接管。
+    const internalPositioning = useDropdownPositioning({
+        open,
+        anchorRef,
+        contentRef: panelRef,
+        placement,
+        offset,
+        matchAnchorWidth,
+        strategy,
+        containerRef,
+        positionMode,
+    });
+    const resolvedPositioning = position
+        ? null
+        : (positioning ?? internalPositioning);
+    useEffect(() => {
+        if (!open || !closeOnClickOutside)
+            return;
+        // 点到触发元素和弹窗外面，就通知外部关闭。
+        const handleClickOutside = (event) => {
+            const target = event.target;
+            const clickedAnchor = anchorRef.current?.contains(target);
+            const clickedPanel = panelRef.current?.contains(target);
+            if (!clickedAnchor && !clickedPanel) {
+                onOpenChange?.(false);
+            }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, [anchorRef, closeOnClickOutside, onOpenChange, open, panelRef]);
+    useEffect(() => {
+        if (!open || !closeOnEscape)
+            return;
+        // 按 Esc 时关闭，常见弹窗交互都需要这个。
+        const handleKeyDown = (event) => {
+            if (event.key === "Escape") {
+                onOpenChange?.(false);
+            }
+        };
+        document.addEventListener("keydown", handleKeyDown);
+        return () => document.removeEventListener("keydown", handleKeyDown);
+    }, [closeOnEscape, onOpenChange, open]);
+    const mergedStyle = useMemo(() => ({
+        // 定位样式优先来自 hook，也可以被外部 position/style 覆盖。
+        ...resolvedPositioning?.position,
+        ...position,
+        ...style,
+    }), [position, resolvedPositioning?.position, style]);
+    // hoverBridge 是透明桥。鼠标从触发元素移动到弹窗时，中间有间距也不会断 hover。
+    const showHorizontalHoverBridge = hoverBridge > 0 &&
+        (placement.startsWith("right") || placement.startsWith("left"));
+    const showBothHorizontalHoverBridges = showHorizontalHoverBridge && hoverBridgePlacement === "horizontal";
+    if (!keepMounted && !open) {
+        // 不需要常驻 DOM 时，关闭就不渲染。
+        return null;
+    }
+    const portalContainer = container ?? (canUseDocument() ? document.body : undefined);
+    if (!portalContainer) {
+        return null;
+    }
+    // 用 portal 把弹窗挂到指定容器；没传 container 就挂到 body。
+    return createPortal(_jsxs("div", { ref: panelRef, className: cn("tc-ui-popup", DEFAULT_POPUP_CLASSNAME, positionMode === "absolute" && "absolute", !resolvedPositioning?.ready && "invisible", keepMounted && !open && "hidden", className), style: mergedStyle, children: [hoverBridge > 0 && (
+            // 默认只补当前 placement 方向上的透明桥。
+            _jsx("div", { "aria-hidden": "true", className: cn("absolute bg-transparent", placement.startsWith("bottom") && "left-0 right-0 top-0 -translate-y-full", placement.startsWith("top") && "bottom-0 left-0 right-0 translate-y-full", placement.startsWith("right") && "bottom-0 left-0 top-0 -translate-x-full", placement.startsWith("left") && "bottom-0 right-0 top-0 translate-x-full"), style: placement.startsWith("right") || placement.startsWith("left")
+                    ? { width: hoverBridge }
+                    : { height: hoverBridge } })), showBothHorizontalHoverBridges && (
+            // 横向弹窗可能动态从右改到左，这里左右都补桥，避免鼠标移过去时弹窗关闭。
+            _jsx("div", { "aria-hidden": "true", className: "absolute bottom-0 right-0 top-0 translate-x-full bg-transparent", style: { width: hoverBridge } })), children] }), portalContainer);
+}

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

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

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

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

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

@@ -1,10 +1,10 @@
 import type { MOmit } from '../../types';
 import type { FormInstance } from 'rc-field-form';
 import { type ReactNode } from 'react';
-import { type FormFieldScheme } from '../Form';
+import { type FormFieldSchema } from '../Form';
 export type SearchProps<T> = {
     defaultValue?: T;
-    schemes: MOmit<FormFieldScheme<T>, 'rules' | 'required'>[];
+    schemas: MOmit<FormFieldSchema<T>, 'rules' | 'required'>[];
     children?: ReactNode;
     /**
      * 获取表单实例的回调