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

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

@@ -2,64 +2,28 @@ import { ExportType } from '../../lib/export';
 import type { MOmit } from '../../types';
 import { type ReactNode } from 'react';
 import { type DropdownItem } from '../Dropdown';
-import type { FormFieldScheme } from '../Form';
+import type { FormFieldSchema } from '../Form';
 import type { SearchProps } from '../Search/Search';
-type TableSearchScheme<T> = MOmit<FormFieldScheme<T>, 'rules' | 'required'> & {
-    /**
-     * - 字段是否常驻
-     * - 如果都没有则去前四个
-     */
+export type TableSearchSchema<T> = MOmit<FormFieldSchema<T>, 'rules' | 'required'> & {
     isPermanent?: boolean;
 };
-type TableSearchProps<T> = MOmit<SearchProps<T>, 'children' | 'schemes'> & {
+type TableSearchProps<T> = MOmit<SearchProps<T>, 'children' | 'schemas'> & {
     onSearch?: (values: T) => void;
     onReset?: () => void;
-    schemes: TableSearchScheme<T>[];
-    /**
-     * 导出Excel按钮的下拉菜单项
-     */
+    renderActionBtnArea?: () => ReactNode;
+    schemas: TableSearchSchema<T>[];
     exportMenuItems?: DropdownItem[];
     btnConfig?: Partial<{
-        /**
-         * 导出Excel按钮的文案
-         */
         export?: ReactNode;
-        /**
-         * 收起按钮的文案
-         */
         collapse?: ReactNode;
-        /**
-         * 展开按钮的icon
-         */
         expandIcon?: ReactNode;
-        /**
-         * 展开按钮的文案
-         */
         expand?: ReactNode;
-        /**
-         * 重置按钮的文案
-         */
         reset?: ReactNode;
-        /**
-         * 查询按钮的文案
-         */
         search?: ReactNode;
     }>;
-    /**
-     * 备选边界
-     */
     expandBoundaries?: number;
-    /**
-     *
-     * @param exportType 导出类型
-     * @param searchData 当前查询条件
-     * @returns
-     */
     onExport?: (exportType: ExportType, searchData: T) => void;
     additionalButtons?: ReactNode;
-    /**
-     * 默认是否展开 @default true
-     */
     defaultExpand?: boolean;
 };
 declare const TableSearch: <T extends object>(props: TableSearchProps<T>) => import("react/jsx-runtime").JSX.Element;

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

@@ -9,7 +9,7 @@ import { Search } from '../Search';
 import { useTableSearchLocaleStore } from './tableSearchLocaleStore';
 const EXPAND_BOUNDARIES = 4;
 const TableSearch = (props) => {
-    const { onSearch, onReset, exportMenuItems, btnConfig: PBtnText, expandBoundaries = EXPAND_BOUNDARIES, schemes, onExport, additionalButtons, defaultExpand = true, ...searchProps } = props;
+    const { onSearch, onReset, exportMenuItems, btnConfig: PBtnText, expandBoundaries = EXPAND_BOUNDARIES, schemas, onExport, additionalButtons, defaultExpand = true, renderActionBtnArea, ...searchProps } = props;
     const formRef = useRef(undefined);
     const [isExpanded, setIsExpanded] = useState(defaultExpand);
     const handleSearch = () => {
@@ -68,35 +68,34 @@ const TableSearch = (props) => {
         PBtnText?.expandIcon,
         locale,
     ]);
-    const { permanentSchemes, alternativeSchemes } = useMemo(() => {
-        const alternativeSchemes = [];
+    const { permanentSchemas, alternativeSchemas } = useMemo(() => {
+        const alternativeSchemas = [];
         const tmp = [];
-        for (let index = 0; index < schemes.length; index++) {
-            const item = schemes[index];
+        for (let index = 0; index < schemas.length; index++) {
+            const item = schemas[index];
             if (item.isPermanent) {
                 tmp.push(item);
             }
             else {
-                alternativeSchemes.push(item);
+                alternativeSchemas.push(item);
             }
         }
         if (tmp.length < expandBoundaries) {
             const candidates = expandBoundaries - tmp.length;
             for (let index = 0; index < candidates; index++) {
-                tmp.push(alternativeSchemes[index]);
+                tmp.push(alternativeSchemas[index]);
             }
-            alternativeSchemes.splice(0, candidates);
+            alternativeSchemas.splice(0, candidates);
         }
-        return { alternativeSchemes, permanentSchemes: tmp };
-    }, [expandBoundaries, schemes]);
-    const showExpandedBtn = schemes.length > expandBoundaries;
-    let SSchemes;
-    // 有展开
+        return { alternativeSchemas, permanentSchemas: tmp };
+    }, [expandBoundaries, schemas]);
+    const showExpandedBtn = schemas.length > expandBoundaries;
+    let SSchemas;
     if (showExpandedBtn) {
-        SSchemes = isExpanded
-            ? schemes
+        SSchemas = isExpanded
+            ? schemas
             : [
-                ...permanentSchemes,
+                ...permanentSchemas,
                 {
                     type: 'group',
                     fieldProps: {
@@ -104,16 +103,16 @@ const TableSearch = (props) => {
                             display: 'none',
                         },
                     },
-                    name: 'gropu1',
-                    childrens: alternativeSchemes,
+                    key: 'gropu1',
+                    childrens: alternativeSchemas,
                 },
             ];
     }
     else {
-        SSchemes = schemes;
+        SSchemas = schemas;
     }
-    return (_jsxs(Search, { getForm: (form) => {
-            formRef.current = form;
-        }, schemes: SSchemes, ...searchProps, children: [showExpandedBtn && (_jsx(Button, { variant: "default", size: "sm", onClick: handleExpand, rightIcon: _jsx("span", { className: cn('transition-transform duration-200', isExpanded && 'rotate-180'), children: btnConfig.expandIcon }), children: isExpanded ? btnConfig.collapseBtn : btnConfig.expandBtn }, "expandedBtn")), _jsx(Button, { variant: "primary", size: "sm", onClick: handleSearch, children: btnConfig.searchBtn }), _jsx(Button, { variant: "default", size: "sm", onClick: handleReset, children: btnConfig.resetBtn }), _jsx(Dropdown, { items: defaultExportItems, placement: "bottom-end", children: _jsx(Button, { variant: "default", size: "sm", rightIcon: _jsx(ChevronDown, { className: "h-4 w-4" }), children: btnConfig.exportBtn }) }), additionalButtons] }));
+    return (_jsx("div", { className: "tc-ui-table-search", children: _jsxs(Search, { getForm: (form) => {
+                formRef.current = form;
+            }, schemas: SSchemas, ...searchProps, children: [showExpandedBtn && (_jsx(Button, { variant: "default", size: "sm", onClick: handleExpand, rightIcon: _jsx("span", { className: cn('transition-transform duration-200', isExpanded && 'rotate-180'), children: btnConfig.expandIcon }), children: isExpanded ? btnConfig.collapseBtn : btnConfig.expandBtn }, "expandedBtn")), _jsx(Button, { variant: "primary", size: "sm", onClick: handleSearch, children: btnConfig.searchBtn }), _jsx(Button, { variant: "default", size: "sm", onClick: handleReset, children: btnConfig.resetBtn }), renderActionBtnArea ? (renderActionBtnArea()) : (_jsx(Dropdown, { items: defaultExportItems, placement: "bottom-end", children: _jsx(Button, { variant: "default", size: "sm", rightIcon: _jsx(ChevronDown, { className: "h-4 w-4" }), children: btnConfig.exportBtn }) })), additionalButtons] }) }));
 };
 export default TableSearch;

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

@@ -0,0 +1,21 @@
+import type { ChangeEvent, TextareaHTMLAttributes } from "react";
+export type TextareaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "value" | "onChange" | "defaultValue"> & {
+    value?: string;
+    onChange?: (v: string, e: ChangeEvent<HTMLTextAreaElement>) => void;
+    defaultValue?: string;
+    maxLength?: number;
+    showCount?: boolean;
+    placeholder?: string;
+    textareaClassName?: string;
+};
+declare const Textarea: import("react").ForwardRefExoticComponent<Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "value" | "defaultValue" | "onChange"> & {
+    value?: string;
+    onChange?: (v: string, e: ChangeEvent<HTMLTextAreaElement>) => void;
+    defaultValue?: string;
+    maxLength?: number;
+    showCount?: boolean;
+    placeholder?: string;
+    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,36 @@
+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;
+        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/Tooltip.d.ts

@@ -0,0 +1,9 @@
+export interface TooltipProps {
+    content: React.ReactNode;
+    children: React.ReactElement;
+    placement?: "top" | "bottom" | "left" | "right";
+    visible?: boolean;
+    className?: string;
+}
+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,71 @@
+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(() => {
+                if (!triggerRef.current || !tooltipRef.current)
+                    return;
+                const triggerRect = triggerRef.current.getBoundingClientRect();
+                const tooltipRect = tooltipRef.current.getBoundingClientRect();
+                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.d.ts → TreeSelect/TreeSelect.d.ts}

@@ -5,20 +5,14 @@ export interface TreeNode {
     children?: TreeNode[];
 }
 export interface TreeSelectProps {
-    /** 树形数据 */
     data: TreeNode[];
-    /** 已选中的节点 ID 数组 */
     value?: (string | number)[];
-    /** 选中状态改变回调，返回选中的 keys 和半选的 keys */
     onChange?: (keys: {
         checked: (string | number)[];
         indeterminate: (string | number)[];
     }) => void;
-    /** 节点文本字段名 */
     labelField?: 'name' | 'desctext';
-    /** 是否可以选择 */
     checkable?: boolean;
-    /** 自定义类名 */
     className?: string;
 }
 export declare function TreeSelect({ data, value, onChange, labelField, checkable, className, }: TreeSelectProps): import("react/jsx-runtime").JSX.Element;

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(() => {
@@ -19,7 +21,6 @@ export function TreeSelect({ data, value = [], onChange, labelField = 'name', ch
         traverse(data, null);
         return { nodeMap: nodeM, parentMap: parentM };
     }, [data]);
-    // 获取节点的所有子节点 ID
     const getDescendantIds = useCallback((node) => {
         const ids = [];
         const traverse = (n) => {
@@ -53,7 +54,6 @@ export function TreeSelect({ data, value = [], onChange, labelField = 'name', ch
         };
         checkedSet.forEach((id) => traverseUp(id));
     }, [nodeMap, parentMap]);
-    // 切换展开/折叠
     const toggleExpand = useCallback((nodeId) => {
         setExpandedKeys((prev) => {
             const newSet = new Set(prev);
@@ -91,7 +91,6 @@ export function TreeSelect({ data, value = [], onChange, labelField = 'name', ch
         traverse(data);
         return indeterminateKeys;
     }, [data]);
-    // 切换选中状态
     const toggleCheck = useCallback((node) => {
         if (!checkable || !onChange)
             return;
@@ -110,7 +109,6 @@ export function TreeSelect({ data, value = [], onChange, labelField = 'name', ch
         const indeterminateKeys = getIndeterminateKeys(nextChecked);
         onChange({ checked: Array.from(nextChecked), indeterminate: indeterminateKeys });
     }, [value, onChange, checkable, getDescendantIds, updateParentSelection, getIndeterminateKeys]);
-    // 判断节点是否选中
     const isNodeChecked = useCallback((nodeId) => {
         return value.includes(nodeId);
     }, [value]);
@@ -129,23 +127,18 @@ export function TreeSelect({ data, value = [], onChange, labelField = 'name', ch
         const { total, checked } = getDescendantCount(node);
         return checked > 0 && checked < total;
     }, [value]);
-    // 渲染树节点
     function renderTreeNode(node, level = 0) {
         const hasChildren = node.children && node.children.length > 0;
         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);
                                 }
@@ -154,9 +147,8 @@ export function TreeSelect({ data, value = [], onChange, labelField = 'name', ch
                                 }
                             }, children: labelField === 'desctext' ? node.desctext || node.name : node.name })] }), hasChildren && isExpanded && _jsx("div", { children: node.children.map((child) => renderTreeNode(child, level + 1)) })] }, node.id));
     }
-    // 如果没有数据
     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.d.ts

@@ -1,40 +1,13 @@
 import type { ChangeEvent, ReactNode, RefObject } from 'react';
 export interface FileUploadProps {
-    /**
-     * 文件 input 的 ref，用于父组件重置 value 等
-     */
     inputRef?: RefObject<HTMLInputElement | null>;
-    /**
-     * input 的 accept 属性，默认接收任意文件
-     */
     accept?: string;
-    /**
-     * 是否支持多选
-     */
     multiple?: boolean;
-    /**
-     * 选择文件时的回调
-     */
     onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
-    /**
-     * 选择文件按钮文案
-     */
     selectLabel: ReactNode;
-    /**
-     * label 的自定义 className
-     */
     labelClassName?: string;
-    /**
-     * 是否展示清空按钮
-     */
     showClear?: boolean;
-    /**
-     * 清空按钮点击回调
-     */
     onClear?: () => void;
-    /**
-     * 清空按钮文案
-     */
     clearLabel?: ReactNode;
 }
 export declare function FileUpload({ inputRef, accept, multiple, onChange, selectLabel, labelClassName, showClear, onClear, clearLabel, }: FileUploadProps): import("react/jsx-runtime").JSX.Element;

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