@_tc/template-core 0.0.1-bate.9 → 0.0.2

package/fe/packages/ui/react/components/TableSearch/lang.js

@@ -1,20 +1,11 @@
+import { defaultEnglishResources, defaultLanguageResources } from '../../../../common/i18n';
+const tableSearchDefaultLocale = defaultLanguageResources.components.tableSearch;
+const tableSearchDefaultEnglishLocale = defaultEnglishResources.components.tableSearch;
 export const zhCNLocale = {
-    reset: '重置',
-    search: '查询',
-    export: '导出Excel',
-    expand: '展开',
-    collapse: '收起',
-    exportCurrentPage: '当前页',
-    exportCurrentQuery: '当前查询条件',
+    ...tableSearchDefaultLocale,
 };
 export const enUSLocale = {
-    reset: 'Reset',
-    search: 'Search',
-    export: 'Export Excel',
-    expand: 'Expand',
-    collapse: 'Collapse',
-    exportCurrentPage: 'Current Page',
-    exportCurrentQuery: 'Current Filters',
+    ...tableSearchDefaultEnglishLocale,
 };
 export const defaultLocale = zhCNLocale;
 export const btnConfig = defaultLocale;

package/fe/packages/ui/react/components/{Textarea.d.ts → Textarea/Textarea.d.ts}

@@ -1,5 +1,5 @@
-import type { ChangeEvent, TextareaHTMLAttributes } from 'react';
-export type TextareaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'onChange' | 'defaultValue'> & {
+import type { ChangeEvent, TextareaHTMLAttributes } from "react";
+export type TextareaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "value" | "onChange" | "defaultValue"> & {
     value?: string;
     /**
      *
@@ -26,8 +26,12 @@ export type TextareaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'v
      * 占位符文本
      */
     placeholder?: string;
+    /**
+     * 原生 textarea 节点的自定义 className
+     */
+    textareaClassName?: string;
 };
-declare const Textarea: import("react").ForwardRefExoticComponent<Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "defaultValue" | "onChange" | "value"> & {
+declare const Textarea: import("react").ForwardRefExoticComponent<Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "value" | "defaultValue" | "onChange"> & {
     value?: string;
     /**
      *
@@ -54,6 +58,10 @@ declare const Textarea: import("react").ForwardRefExoticComponent<Omit<TextareaH
      * 占位符文本
      */
     placeholder?: string;
+    /**
+     * 原生 textarea 节点的自定义 className
+     */
+    textareaClassName?: string;
 } & import("react").RefAttributes<HTMLTextAreaElement>>;
 export { Textarea };
 //# sourceMappingURL=Textarea.d.ts.map

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

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/utils";
+import { forwardRef, useCallback } from "react";
+import { useInputController } from "../hooks/useInputController";
+const Textarea = forwardRef(({ className, textareaClassName, value: controlledValue, onChange, defaultValue, maxLength = 500, showCount = true, placeholder, disabled, ...props }, ref) => {
+    const { isFocused, setIsFocused, setInternalValue, setRefs, value, hasValue, isControlledRef, currentLength, } = useInputController({
+        controlledValue,
+        defaultValue,
+        ref,
+    });
+    const handleChange = useCallback((e) => {
+        const newValue = e.target.value;
+        // 如果设置了 maxLength，限制输入长度
+        if (maxLength && newValue.length > maxLength) {
+            return;
+        }
+        if (!isControlledRef.current) {
+            setInternalValue(newValue);
+        }
+        onChange?.(newValue, e);
+    }, [maxLength, isControlledRef, onChange, setInternalValue]);
+    return (_jsxs("div", { className: cn("tc-ui-textarea relative w-fit", className), children: [_jsx("textarea", { ref: setRefs, value: value, onChange: handleChange, maxLength: maxLength, placeholder: placeholder, className: cn("flex w-full rounded-lg px-4 py-3 text-sm", "border transition-colors duration-200", "placeholder:text-muted-foreground", "focus:outline-none", "resize-none", showCount && "pb-10", disabled
+                    ? "cursor-not-allowed bg-muted border-border text-muted-foreground"
+                    : "bg-background", !disabled && !hasValue && !isFocused && "border-border", !disabled && (hasValue || isFocused) && "border-foreground", textareaClassName), onFocus: (e) => {
+                    if (!disabled) {
+                        setIsFocused(true);
+                        props.onFocus?.(e);
+                    }
+                }, onBlur: (e) => {
+                    if (!disabled) {
+                        setIsFocused(false);
+                        props.onBlur?.(e);
+                    }
+                }, disabled: disabled, ...props }), showCount && (_jsxs("div", { className: cn('text-end', "text-xs text-muted-foreground", "pointer-events-none"), children: [currentLength, "/", maxLength] }))] }));
+});
+Textarea.displayName = "Textarea";
+export { Textarea };

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

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

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

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

package/fe/packages/ui/react/components/{Tooltip.d.ts → Tooltip/Tooltip.d.ts}

@@ -11,7 +11,7 @@ export interface TooltipProps {
      * 提示位置
      * @default 'right'
      */
-    placement?: 'top' | 'bottom' | 'left' | 'right';
+    placement?: "top" | "bottom" | "left" | "right";
     /**
      * 是否显示
      */
@@ -21,5 +21,5 @@ export interface TooltipProps {
      */
     className?: string;
 }
-export declare function Tooltip({ content, children, placement, visible, className }: TooltipProps): import("react/jsx-runtime").JSX.Element;
+export declare function Tooltip({ content, children, placement, visible, className, }: TooltipProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Tooltip.d.ts.map

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

@@ -0,0 +1,79 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/utils";
+import { useState, useRef, useEffect } from "react";
+import { createPortal } from "react-dom";
+export function Tooltip({ content, children, placement = "right", visible, className, }) {
+    const [isVisible, setIsVisible] = useState(false);
+    const [position, setPosition] = useState({ top: 0, left: 0 });
+    const triggerRef = useRef(null);
+    const tooltipRef = useRef(null);
+    const showTooltip = () => {
+        if (visible !== undefined) {
+            setIsVisible(visible);
+        }
+        else {
+            setIsVisible(true);
+        }
+    };
+    const hideTooltip = () => {
+        if (visible === undefined) {
+            setIsVisible(false);
+        }
+    };
+    useEffect(() => {
+        if (visible !== undefined) {
+            setIsVisible(visible);
+        }
+    }, [visible]);
+    useEffect(() => {
+        // 显示时
+        if (isVisible && triggerRef.current && tooltipRef.current) {
+            // 使用 requestAnimationFrame 确保 DOM 已更新
+            requestAnimationFrame(() => {
+                if (!triggerRef.current || !tooltipRef.current)
+                    return;
+                const triggerRect = triggerRef.current.getBoundingClientRect();
+                const tooltipRect = tooltipRef.current.getBoundingClientRect();
+                // const scrollY = window.scrollY;
+                // const scrollX = window.scrollX;
+                // const viewportWidth = window.innerWidth;
+                // const viewportHeight = window.innerHeight;
+                const padding = 8;
+                let top = 0;
+                let left = 0;
+                switch (placement) {
+                    case "top":
+                        top = triggerRect.top - tooltipRect.height - padding;
+                        left =
+                            triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2;
+                        break;
+                    case "bottom":
+                        top = triggerRect.bottom + padding;
+                        left =
+                            triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2;
+                        break;
+                    case "left":
+                        top = triggerRect.top;
+                        left = triggerRect.left - tooltipRect.width - padding;
+                        break;
+                    case "right":
+                        // 直接使用元素所在元素
+                        top = triggerRect.top;
+                        left = triggerRect.right + padding;
+                        break;
+                }
+                setPosition({ top, left });
+            });
+        }
+        // 隐藏时 重置定位定制 去除重影
+        if (!isVisible) {
+            const top = -100, left = -100;
+            setPosition({ top, left });
+        }
+    }, [isVisible, placement]);
+    return (_jsxs(_Fragment, { children: [_jsx("div", { ref: triggerRef, onMouseEnter: showTooltip, onMouseLeave: hideTooltip, className: "tc-ui-tooltip inline-block", children: children }), isVisible &&
+                createPortal(_jsx("div", { ref: tooltipRef, className: cn("fixed z-[9999] px-3 py-2", "bg-gray-800 text-white text-xs rounded", "shadow-lg", "pointer-events-none", "max-w-xs", className), style: {
+                        top: `${position.top}px`,
+                        left: `${position.left}px`,
+                    }, children: content }), document.body)] }));
+}

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

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

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

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

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