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

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

@@ -1,7 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn } from '../lib/utils';
-import { Check, ChevronDown, ChevronRight } from 'lucide-react';
+import { cn } from '../../lib/utils';
+import { ChevronDown, ChevronRight } from 'lucide-react';
 import { useCallback, useMemo, useState } from 'react';
+import { Button } from '../Button';
+import { Checkbox } from '../Checkbox';
 export function TreeSelect({ data, value = [], onChange, labelField = 'name', checkable = true, className, }) {
     const [expandedKeys, setExpandedKeys] = useState(new Set());
     const { nodeMap, parentMap } = useMemo(() => {
@@ -135,17 +137,13 @@ export function TreeSelect({ data, value = [], onChange, labelField = 'name', ch
         const isExpanded = expandedKeys.has(node.id);
         const isChecked = isNodeChecked(node.id);
         const isIndeterminate = isNodeIndeterminate(node);
-        return (_jsxs("div", { children: [_jsxs("div", { className: cn('flex items-center gap-2 py-2 px-2 hover:bg-muted/50 rounded-md cursor-pointer transition-colors', 'group'), style: { paddingLeft: `${level * 20 + 8}px` }, children: [hasChildren ? (_jsx("button", { type: "button", onClick: (e) => {
+        return (_jsxs("div", { children: [_jsxs("div", { className: cn('flex items-center gap-2 py-2 px-2 hover:bg-muted/50 rounded-md cursor-pointer transition-colors', 'group'), style: { paddingLeft: `${level * 20 + 8}px` }, children: [hasChildren ? (_jsx(Button, { variant: "text", type: "button", onClick: (e) => {
                                 e.stopPropagation();
                                 toggleExpand(node.id);
-                            }, className: "flex-shrink-0 p-0.5 hover:bg-muted rounded", children: isExpanded ? _jsx(ChevronDown, { className: "h-4 w-4" }) : _jsx(ChevronRight, { className: "h-4 w-4" }) })) : (_jsx("span", { className: "w-5" })), checkable && (_jsx("button", { type: "button", onClick: (e) => {
+                            }, className: "flex-shrink-0 p-0.5 hover:bg-muted rounded", children: isExpanded ? _jsx(ChevronDown, { className: "h-4 w-4" }) : _jsx(ChevronRight, { className: "h-4 w-4" }) })) : (_jsx("span", { className: "w-5" })), checkable && (_jsx(Checkbox, { className: "flex-shrink-0", checked: isChecked, indeterminate: isIndeterminate, "aria-label": `Select ${node.name}`, onChange: (_, e) => {
                                 e.stopPropagation();
                                 toggleCheck(node);
-                            }, className: cn('flex-shrink-0 w-4 h-4 rounded border-2 flex items-center justify-center transition-colors', isChecked
-                                ? 'bg-black border-black'
-                                : isIndeterminate
-                                    ? 'bg-gray-400 border-gray-400'
-                                    : 'border-border hover:border-foreground'), children: (isChecked || isIndeterminate) && _jsx(Check, { className: "h-3 w-3 text-white", strokeWidth: 3 }) })), _jsx("span", { className: "flex-1 text-sm select-none", onClick: () => {
+                            } })), _jsx("span", { className: "flex-1 text-sm select-none", onClick: () => {
                                 if (hasChildren) {
                                     toggleExpand(node.id);
                                 }
@@ -156,7 +154,7 @@ export function TreeSelect({ data, value = [], onChange, labelField = 'name', ch
     }
     // 如果没有数据
     if (!data || data.length === 0) {
-        return _jsx("div", { className: cn('p-8 text-center text-sm text-muted-foreground', className), children: "No data" });
+        return _jsx("div", { className: cn('tc-ui-tree-select p-8 text-center text-sm text-muted-foreground', className), children: "No data" });
     }
-    return (_jsx("div", { className: cn('border border-border rounded-lg p-2 max-h-[400px] overflow-y-auto', className), children: data.map((node) => renderTreeNode(node)) }));
+    return (_jsx("div", { className: cn('tc-ui-tree-select border border-border rounded-lg p-2 max-h-[400px] overflow-y-auto', className), children: data.map((node) => renderTreeNode(node)) }));
 }

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

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

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

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

package/fe/packages/ui/react/components/Upload/ImageUpload.js

@@ -1,10 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useI18n } from '../../i18n';
 import { Camera, X } from 'lucide-react';
 import { useEffect, useMemo, useRef, useState } from 'react';
+import { Button } from '../Button';
 import { FileUpload } from './Upload';
 export function ImageUpload({ accept = '.jpg,.png', maxCount = 1, value, onChange, beforeChange }) {
+    const t = useI18n();
     const inputRef = useRef(null);
     const [internalUrls, setInternalUrls] = useState([]);
+    const internalUrlsRef = useRef([]);
     const urls = value ?? internalUrls;
     const setUrls = onChange ?? setInternalUrls;
     const mAccept = useMemo(() => {
@@ -49,15 +53,23 @@ export function ImageUpload({ accept = '.jpg,.png', maxCount = 1, value, onChang
         URL.revokeObjectURL(urlToRemove);
         setUrls(urls.filter((_, i) => i !== index));
     };
+    useEffect(() => {
+        if (onChange) {
+            internalUrlsRef.current = [];
+            return;
+        }
+        const removedUrls = internalUrlsRef.current.filter((url) => !internalUrls.includes(url));
+        removedUrls.forEach((url) => URL.revokeObjectURL(url));
+        internalUrlsRef.current = internalUrls;
+    }, [onChange, internalUrls]);
     useEffect(() => {
         return () => {
-            if (!onChange) {
-                internalUrls.forEach((url) => URL.revokeObjectURL(url));
-            }
+            internalUrlsRef.current.forEach((url) => URL.revokeObjectURL(url));
+            internalUrlsRef.current = [];
         };
-    }, [onChange, internalUrls]);
-    return (_jsxs("div", { className: "flex flex-wrap gap-3", children: [urls.map((url, index) => (_jsxs("div", { className: "relative w-24 h-24 rounded-lg overflow-hidden border border-gray-200 group cursor-pointer", children: [_jsx("img", { src: url, alt: "", className: "w-full h-full object-cover" }), _jsx("div", { className: "absolute inset-0 bg-black/0 group-hover:bg-black/40 transition-colors flex items-center justify-center", children: _jsx("button", { type: "button", onClick: (e) => {
+    }, []);
+    return (_jsxs("div", { className: "tc-ui-image-upload flex flex-wrap gap-3", children: [urls.map((url, index) => (_jsxs("div", { className: "relative w-24 h-24 rounded-lg overflow-hidden border border-gray-200 group cursor-pointer", children: [_jsx("img", { src: url, alt: "", className: "w-full h-full object-cover" }), _jsx("div", { className: "absolute inset-0 bg-black/0 group-hover:bg-black/40 transition-colors flex items-center justify-center", children: _jsx(Button, { variant: "text", type: "button", onClick: (e) => {
                                 e.stopPropagation();
                                 handleRemove(index);
-                            }, className: "opacity-0 group-hover:opacity-100 transition-opacity p-1.5 rounded-full bg-red-500 hover:bg-red-600 text-white", "aria-label": "\u5220\u9664\u56FE\u7247", title: "\u5220\u9664\u56FE\u7247", children: _jsx(X, { size: 16 }) }) })] }, index))), urls.length < maxCount && (_jsx(FileUpload, { inputRef: inputRef, accept: mAccept, multiple: maxCount > 1, onChange: handleFileChange, labelClassName: "w-24 h-24 p-0 border-0 cursor-pointer", selectLabel: _jsxs("div", { className: "w-full h-full rounded-[8px] bg-[#F5F5F5] border border-gray-200 flex flex-col items-center justify-center gap-1 hover:bg-gray-50 transition-colors", children: [_jsx(Camera, { className: "text-gray-500", size: 24 }), _jsx("span", { className: "text-xs text-gray-500", children: "\u4E0A\u4F20" })] }) }))] }));
+                            }, className: "opacity-0 group-hover:opacity-100 transition-opacity p-1.5 rounded-full bg-red-500 hover:bg-red-600 text-white", "aria-label": t('components.upload.deleteImage'), title: t('components.upload.deleteImage'), children: _jsx(X, { size: 16 }) }) })] }, index))), urls.length < maxCount && (_jsx(FileUpload, { inputRef: inputRef, accept: mAccept, multiple: maxCount > 1, onChange: handleFileChange, labelClassName: "w-24 h-24 p-0 border-0 cursor-pointer", selectLabel: _jsxs("div", { className: "w-full h-full rounded-[8px] bg-[#F5F5F5] border border-gray-200 flex flex-col items-center justify-center gap-1 hover:bg-gray-50 transition-colors", children: [_jsx(Camera, { className: "text-gray-500", size: 24 }), _jsx("span", { className: "text-xs text-gray-500", children: t('components.upload.upload') })] }) }))] }));
 }

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

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button } from '../Button';
+import { Input } from '../Input';
 export function FileUpload({ inputRef, accept = '*', multiple, onChange, selectLabel, labelClassName, showClear, onClear, clearLabel, }) {
-    return (_jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("label", { className: labelClassName ?? 'flex items-center gap-2 px-4 py-2 border rounded-lg cursor-pointer bg-white', children: [_jsx("input", { ref: inputRef, type: "file", accept: accept, multiple: multiple, className: "hidden", onChange: onChange }), selectLabel] }), showClear && onClear && (_jsx(Button, { size: "sm", variant: "link", onClick: onClear, children: clearLabel }))] }));
+    return (_jsxs("div", { className: "tc-ui-file-upload flex items-center gap-3", children: [_jsxs("label", { className: labelClassName ?? 'flex items-center gap-2 px-4 py-2 border rounded-lg cursor-pointer bg-background', children: [_jsx(Input, { ref: inputRef, type: "file", accept: accept, multiple: multiple, className: "hidden", onChange: (_, e) => onChange?.(e) }), selectLabel] }), showClear && onClear && (_jsx(Button, { size: "sm", variant: "link", onClick: onClear, children: clearLabel }))] }));
 }

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

@@ -1,33 +1,36 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useBreadcrumb } from '../hooks/useBreadcrumb';
-import { useLanguage } from '../hooks/useLanguage';
-import { cn } from '../lib/utils';
+import { useI18n } from '../../i18n';
+import { useBreadcrumb } from '../../hooks/useBreadcrumb';
+import { useLanguage } from '../../hooks/useLanguage';
+import { cn } from '../../lib/utils';
 // import useUserStore from '@tc/ui-react/stores/user'
 import { ChevronRight, MoreHorizontal } from 'lucide-react';
 import { forwardRef } from 'react';
 import { useNavigate } from 'react-router-dom';
-const Breadcrumb = forwardRef(({ ...props }, ref) => _jsx("nav", { ref: ref, "aria-label": "breadcrumb", ...props }));
+import { Button } from '../Button';
+const Breadcrumb = forwardRef(({ className, ...props }, ref) => _jsx("nav", { ref: ref, "aria-label": "breadcrumb", className: cn('tc-ui-breadcrumb', className), ...props }));
 Breadcrumb.displayName = 'Breadcrumb';
-const BreadcrumbList = forwardRef(({ className, ...props }, ref) => (_jsx("ol", { ref: ref, className: cn('flex items-center gap-3 flex-wrap', className), ...props })));
+const BreadcrumbList = forwardRef(({ className, ...props }, ref) => (_jsx("ol", { ref: ref, className: cn('tc-ui-breadcrumb-list flex items-center gap-3 flex-wrap', className), ...props })));
 BreadcrumbList.displayName = 'BreadcrumbList';
-const BreadcrumbItem = forwardRef(({ className, ...props }, ref) => _jsx("li", { ref: ref, className: cn('inline-flex items-center', className), ...props }));
+const BreadcrumbItem = forwardRef(({ className, ...props }, ref) => _jsx("li", { ref: ref, className: cn('tc-ui-breadcrumb-item inline-flex items-center', className), ...props }));
 BreadcrumbItem.displayName = 'BreadcrumbItem';
 const BreadcrumbLink = forwardRef(({ className, ...props }, ref) => {
-    return _jsx("a", { ref: ref, className: cn('transition-colors hover:text-foreground', className), ...props });
+    return _jsx("a", { ref: ref, className: cn('tc-ui-breadcrumb-link transition-colors hover:text-foreground', className), ...props });
 });
 BreadcrumbLink.displayName = 'BreadcrumbLink';
 const BreadcrumbPage = forwardRef(({ className, active, onClose, closable = true, children, ...props }, ref) => {
-    return (_jsxs("span", { ref: ref, role: "link", "aria-disabled": "true", "aria-current": "page", className: cn('inline-flex items-center gap-2 px-4 py-2 rounded-lg border transition-all duration-200 text-sm', active
+    const t = useI18n();
+    return (_jsxs("span", { ref: ref, role: "link", "aria-disabled": "true", "aria-current": "page", className: cn('tc-ui-breadcrumb-page inline-flex items-center gap-2 px-4 py-2 rounded-lg border transition-all duration-200 text-sm', active
             ? 'bg-breadcrumb-active-bg text-breadcrumb-active-text border-breadcrumb-active-bg shadow-sm'
-            : 'bg-white text-breadcrumb-text border-breadcrumb-border hover:border-gray-400', className), ...props, children: [_jsx("span", { className: "font-normal", children: children }), onClose && closable && (_jsx("button", { onClick: (e) => {
+            : 'bg-background text-breadcrumb-text border-breadcrumb-border hover:border-gray-400', className), ...props, children: [_jsx("span", { className: "font-normal", children: children }), onClose && closable && (_jsx(Button, { variant: "text", type: "button", onClick: (e) => {
                     e.stopPropagation();
                     onClose();
-                }, className: "inline-flex items-center justify-center hover:opacity-70 transition-opacity", "aria-label": "\u5173\u95ED", children: _jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsxs("g", { clipPath: "url(#clip0_228_519)", children: [_jsx("circle", { cx: "8", cy: "8", r: "6.66667", stroke: "currentColor", strokeWidth: "1" }), _jsx("path", { d: "M9.66669 6.33302L6.33337 9.66634M6.33336 6.33301L9.66668 9.66633", stroke: "currentColor", strokeWidth: "1", strokeLinecap: "round" })] }), _jsx("defs", { children: _jsx("clipPath", { id: "clip0_228_519", children: _jsx("rect", { width: "16", height: "16", fill: "white" }) }) })] }) }))] }));
+                }, className: "inline-flex items-center justify-center hover:opacity-70 transition-opacity", "aria-label": t('components.breadcrumb.close'), children: _jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsxs("g", { clipPath: "url(#clip0_228_519)", children: [_jsx("circle", { cx: "8", cy: "8", r: "6.66667", stroke: "currentColor", strokeWidth: "1" }), _jsx("path", { d: "M9.66669 6.33302L6.33337 9.66634M6.33336 6.33301L9.66668 9.66633", stroke: "currentColor", strokeWidth: "1", strokeLinecap: "round" })] }), _jsx("defs", { children: _jsx("clipPath", { id: "clip0_228_519", children: _jsx("rect", { width: "16", height: "16", fill: "white" }) }) })] }) }))] }));
 });
 BreadcrumbPage.displayName = 'BreadcrumbPage';
-const BreadcrumbSeparator = ({ children, className, ...props }) => (_jsx("li", { role: "presentation", "aria-hidden": "true", className: cn('[&>svg]:size-3.5', className), ...props, children: children ?? _jsx(ChevronRight, {}) }));
+const BreadcrumbSeparator = ({ children, className, ...props }) => (_jsx("li", { role: "presentation", "aria-hidden": "true", className: cn('tc-ui-breadcrumb-separator [&>svg]:size-3.5', className), ...props, children: children ?? _jsx(ChevronRight, {}) }));
 BreadcrumbSeparator.displayName = 'BreadcrumbSeparator';
-const BreadcrumbEllipsis = ({ className, ...props }) => (_jsxs("span", { role: "presentation", "aria-hidden": "true", "aria-label": "More", className: cn('flex h-9 w-9 items-center justify-center', className), ...props, children: [_jsx(MoreHorizontal, { className: "h-4 w-4" }), _jsx("span", { className: "sr-only", children: "More" })] }));
+const BreadcrumbEllipsis = ({ className, ...props }) => (_jsxs("span", { role: "presentation", "aria-hidden": "true", "aria-label": "More", className: cn('tc-ui-breadcrumb-ellipsis flex h-9 w-9 items-center justify-center', className), ...props, children: [_jsx(MoreHorizontal, { className: "h-4 w-4" }), _jsx("span", { className: "sr-only", children: "More" })] }));
 BreadcrumbEllipsis.displayName = 'BreadcrumbEllipsis';
 export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, };
 export function SimpleBreadcrumb({ className }) {

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

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

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

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

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/index.d.ts

@@ -2,14 +2,20 @@ export * from './breadcrumb';
 export * from './Button';
 export * from './Checkbox';
 export * from './ConfirmDialog';
-export * from './DataTable/data-table';
+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';

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

@@ -2,14 +2,20 @@ export * from './breadcrumb';
 export * from './Button';
 export * from './Checkbox';
 export * from './ConfirmDialog';
-export * from './DataTable/data-table';
+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';

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" }) },
+                        ] }) }) })] }));
+}