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

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

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from '../../lib/utils';
 import { useMemo } from 'react';
-import { SchemeForm } from '../Form';
+import { SchemaForm } from '../Form';
 const Search = (props) => {
-    const { defaultValue: pDefaultValue, schemes, children, getForm, btnsClassName } = props;
+    const { defaultValue: pDefaultValue, schemas, children, getForm, btnsClassName } = props;
     const defaultValue = useMemo(() => {
         return pDefaultValue;
     }, []);
-    return (_jsxs("div", { className: "flex items-end justify-between gap-4 flex-wrap", children: [_jsx(SchemeForm, { preserve: true, layout: "horizontal", schemes: schemes, initialValues: defaultValue, getForm: getForm, footerButtons: false }), _jsx("div", { className: cn('flex items-center gap-2 self-end ml-auto flex-wrap', btnsClassName), children: children })] }));
+    return (_jsxs("div", { className: "tc-ui-search flex items-end justify-between gap-4 flex-wrap", children: [_jsx(SchemaForm, { preserve: true, layout: "horizontal", schemas: schemas, initialValues: defaultValue, getForm: getForm, footerButtons: false }), _jsx("div", { className: cn('flex items-center gap-2 self-end ml-auto flex-wrap', btnsClassName), children: children })] }));
 };
 export default Search;

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

@@ -1,7 +1,10 @@
 import React from 'react';
 export type SelectOption = {
+    /** 展示内容；传 ReactNode 时建议同时提供 searchText 用于搜索 */
     label: React.ReactNode;
     value: string | number;
+    /** 搜索文本；优先级高于 label */
+    searchText?: string;
 };
 export type SelectProps = {
     options: SelectOption[];
@@ -15,6 +18,8 @@ export type SelectProps = {
     clearable?: boolean;
     /** 是否支持搜索 默认开启 */
     searchable?: boolean;
+    /** 自定义弹出容器，传 parent 时挂载到当前 Select 的父元素，不传则默认挂载到 document.body */
+    getPopupContainer?: 'parent' | (() => HTMLElement);
 };
 declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLDivElement>>;
 export { Select };

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

@@ -1,17 +1,39 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useI18n } from '../../i18n';
 import { cn } from '../../lib/utils';
 import { ChevronUp, X } from 'lucide-react';
 import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { createPortal } from 'react-dom';
-const Select = forwardRef(({ options, value: controlledValue, defaultValue, placeholder, onChange, className, disabled, clearable = true, searchable = true, }, ref) => {
+import { Button } from '../Button';
+import { Input } from '../Input';
+import { Popup } from '../Popup';
+import { useDropdownPositioning } from '../hooks/useDropdownPositioning';
+import { getSelectDropdownPosition } from './dropdownPositioning';
+const Select = forwardRef(({ options, value: controlledValue, defaultValue, placeholder, onChange, className, disabled, clearable = true, searchable = true, getPopupContainer, }, ref) => {
+    const t = useI18n();
     const [isOpen, setIsOpen] = useState(false);
     const [internalValue, setInternalValue] = useState(defaultValue);
     const [isHover, setIsHover] = useState(false);
     const [searchTerm, setSearchTerm] = useState('');
-    const [position, setPosition] = useState({ top: 0, left: 0, width: 0 });
+    const rootRef = useRef(null);
     const selectRef = useRef(null);
     const dropdownRef = useRef(null);
     const inputRef = useRef(null);
+    const popupContainerRef = useRef(null);
+    const isParentPopupContainer = getPopupContainer === 'parent';
+    popupContainerRef.current = isParentPopupContainer ? (rootRef.current?.parentElement ?? null) : null;
+    useEffect(() => {
+        if (!isParentPopupContainer)
+            return;
+        const container = rootRef.current?.parentElement;
+        popupContainerRef.current = container ?? null;
+        if (!container || window.getComputedStyle(container).position !== 'static')
+            return;
+        const previousPosition = container.style.position;
+        container.style.position = 'relative';
+        return () => {
+            container.style.position = previousPosition;
+        };
+    }, [isParentPopupContainer]);
     // 合并 refs
     const setRefs = useCallback((node) => {
         selectRef.current = node;
@@ -31,112 +53,37 @@ const Select = forwardRef(({ options, value: controlledValue, defaultValue, plac
         if (!searchable || !searchTerm.trim())
             return options;
         const lower = searchTerm.trim().toLowerCase();
-        return options.filter((opt) => String(opt.label).toLowerCase().includes(lower));
-    }, [options, searchTerm, searchable]);
-    // 点击其他区域关闭
-    useEffect(() => {
-        if (!isOpen)
-            return;
-        const handleClickOutside = (event) => {
-            // 点击不在 选择部分 以及 下拉部分 关闭下拉
-            if (selectRef.current &&
-                !selectRef.current.contains(event.target) &&
-                dropdownRef.current &&
-                !dropdownRef.current.contains(event.target)) {
-                setIsOpen(false);
-            }
-        };
-        document.addEventListener('mousedown', handleClickOutside);
-        return () => {
-            document.removeEventListener('mousedown', handleClickOutside);
-        };
-    }, [isOpen]);
-    // 键盘关闭
-    useEffect(() => {
-        const handleKeyDown = (event) => {
-            if (event.key === 'Escape' && isOpen) {
-                setIsOpen(false);
-            }
-        };
-        if (isOpen) {
-            document.addEventListener('keydown', handleKeyDown);
-        }
-        return () => {
-            document.removeEventListener('keydown', handleKeyDown);
-        };
-    }, [isOpen]);
-    // 计算下拉菜单位置和方向
-    const updatePosition = useCallback(() => {
-        if (!selectRef.current)
-            return;
-        const rect = selectRef.current.getBoundingClientRect();
-        const scrollX = window.scrollX;
-        const scrollY = window.scrollY;
-        const viewportHeight = window.innerHeight;
-        // 获取实际下拉菜单高度，如果还未渲染则使用估算值
-        let dropdownHeight = 240; // 默认最大高度 max-h-60
-        if (dropdownRef.current) {
-            dropdownHeight = dropdownRef.current.getBoundingClientRect().height;
-        }
-        else {
-            // 估算下拉菜单高度（最大高度为 240px，即 max-h-60）
-            dropdownHeight = Math.min(filteredOptions.length * 40 + 8, 240); // 每个选项约40px + padding
-        }
-        const spaceBelow = viewportHeight - rect.bottom;
-        const spaceAbove = rect.top;
-        // 决定向上还是向下展开
-        const shouldPlaceTop = spaceBelow < dropdownHeight && spaceAbove > spaceBelow;
-        // 计算位置
-        let top;
-        if (shouldPlaceTop) {
-            // 向上展开：下拉菜单底部对齐触发器顶部
-            top = rect.top + scrollY - dropdownHeight - 4; // 4px 间距
-        }
-        else {
-            // 向下展开：下拉菜单顶部对齐触发器底部
-            top = rect.bottom + scrollY + 4; // 4px 间距
-        }
-        // 确保不超出视口
-        if (top < scrollY) {
-            top = scrollY + 4;
-        }
-        if (top + dropdownHeight > scrollY + viewportHeight) {
-            top = scrollY + viewportHeight - dropdownHeight - 4;
-        }
-        setPosition({
-            top,
-            left: rect.left + scrollX,
-            width: rect.width,
+        return options.filter((opt) => {
+            const searchText = opt.searchText ??
+                (typeof opt.label === 'string' || typeof opt.label === 'number' ? String(opt.label) : '');
+            return searchText.toLowerCase().includes(lower);
         });
-    }, [filteredOptions.length]);
+    }, [options, searchTerm, searchable]);
+    const positioning = useDropdownPositioning({
+        open: isOpen,
+        anchorRef: selectRef,
+        contentRef: dropdownRef,
+        placement: 'bottom-start',
+        offset: 4,
+        matchAnchorWidth: true,
+        strategy: getSelectDropdownPosition,
+        estimateSize: () => ({
+            height: Math.min(filteredOptions.length * 40 + 8, 240),
+        }),
+        watchDeps: [filteredOptions.length, searchTerm, searchable],
+        containerRef: isParentPopupContainer ? popupContainerRef : undefined,
+        positionMode: isParentPopupContainer ? 'absolute' : 'fixed',
+    });
     // 展开时更新位置并获取焦点
     useEffect(() => {
         if (isOpen) {
-            // 使用双重 requestAnimationFrame 确保 DOM 已完全渲染
             requestAnimationFrame(() => {
-                requestAnimationFrame(() => {
-                    updatePosition();
-                    if (searchable) {
-                        inputRef.current?.focus();
-                    }
-                });
+                if (searchable) {
+                    inputRef.current?.focus();
+                }
             });
         }
-    }, [isOpen, searchable, updatePosition]);
-    // 监听滚动和窗口大小变化，更新位置
-    useEffect(() => {
-        if (!isOpen)
-            return;
-        const handleUpdate = () => {
-            updatePosition();
-        };
-        window.addEventListener('scroll', handleUpdate, true);
-        window.addEventListener('resize', handleUpdate);
-        return () => {
-            window.removeEventListener('scroll', handleUpdate, true);
-            window.removeEventListener('resize', handleUpdate);
-        };
-    }, [isOpen, updatePosition]);
+    }, [isOpen, searchable]);
     const handleToggle = useCallback(() => {
         if (disabled)
             return;
@@ -166,15 +113,11 @@ const Select = forwardRef(({ options, value: controlledValue, defaultValue, plac
     const handleSearchChange = useCallback((event) => {
         setSearchTerm(event.target.value);
     }, []);
-    return (_jsxs("div", { className: cn('relative', className), children: [_jsxs("div", { ref: setRefs, onClick: handleToggle, onMouseEnter: () => setIsHover(true), onMouseLeave: () => setIsHover(false), className: cn('flex w-full items-center justify-between rounded-lg px-4 py-3 text-sm', 'border transition-colors duration-200', 'focus:outline-none', disabled ? 'cursor-not-allowed bg-muted border-border' : 'cursor-pointer bg-background', !disabled && isOpen && 'border-theme', !disabled && !isOpen && 'border-border'), children: [searchable && isOpen ? (_jsx("input", { ref: inputRef, value: searchTerm, onChange: handleSearchChange, onClick: (e) => e.stopPropagation(), placeholder: typeof displayText === 'string' ? displayText : placeholder, className: cn('flex-1 bg-transparent outline-none text-left', 'placeholder:text-muted-foreground', disabled && 'text-muted-foreground cursor-not-allowed'), disabled: disabled })) : (_jsx("span", { className: cn('flex-1 text-left truncate', disabled ? 'text-muted-foreground' : !selectedOption && 'text-muted-foreground'), children: displayText })), clearable && !disabled && value !== undefined && isHover ? (_jsx("button", { type: "button", onClick: handleClear, className: "ml-2 flex items-center justify-center text-muted-foreground hover:text-foreground", "aria-label": "Clear selection", title: "Clear", children: _jsx(X, { size: 14 }) })) : (_jsx(ChevronUp, { size: 16, className: cn('ml-2 transition-transform duration-200', isOpen ? 'rotate-0' : 'rotate-180') }))] }), isOpen &&
-                createPortal(_jsx("div", { ref: dropdownRef, className: cn('fixed z-[1000] w-full rounded-lg bg-background shadow-lg', 'border border-border', 'max-h-60 overflow-auto'), style: {
-                        top: `${position.top}px`,
-                        left: `${position.left}px`,
-                        width: `${position.width}px`,
-                    }, children: _jsx("div", { className: "p-1", children: filteredOptions.length > 0 ? (filteredOptions.map((option) => {
+    const popupContainer = getPopupContainer === 'parent' ? (rootRef.current?.parentElement ?? undefined) : getPopupContainer?.();
+    return (_jsxs("div", { ref: rootRef, className: cn('tc-ui-select relative w-full', className), children: [_jsxs("div", { ref: setRefs, onClick: handleToggle, onMouseEnter: () => setIsHover(true), onMouseLeave: () => setIsHover(false), className: cn('flex w-full items-center justify-between rounded-lg px-4 py-3 text-sm', 'border transition-colors duration-200', 'focus:outline-none', disabled ? 'cursor-not-allowed bg-muted border-border' : 'cursor-pointer bg-background', !disabled && isOpen && 'border-theme', !disabled && !isOpen && 'border-border'), children: [searchable && isOpen ? (_jsx(Input, { ref: inputRef, value: searchTerm, onChange: (_, e) => handleSearchChange(e), onClick: (e) => e.stopPropagation(), placeholder: typeof displayText === 'string' ? displayText : placeholder, className: "min-w-0 flex-1", inputClassName: cn('h-5 min-w-0 flex-1 rounded-none border-0 bg-transparent px-0 py-0 text-left leading-5 outline-none', 'placeholder:text-muted-foreground', disabled && 'text-muted-foreground cursor-not-allowed'), disabled: disabled })) : (_jsx("span", { className: cn('min-h-5 min-w-0 flex-1 text-left truncate leading-5', disabled ? 'text-muted-foreground' : !selectedOption && 'text-muted-foreground'), children: displayText })), clearable && !disabled && value !== undefined && isHover ? (_jsx(Button, { variant: "text", type: "button", onClick: handleClear, className: "ml-2 flex items-center justify-center text-muted-foreground hover:text-foreground cursor-pointer", "aria-label": "Clear selection", title: "Clear", children: _jsx(X, { size: 14 }) })) : (_jsx(ChevronUp, { size: 16, className: cn('ml-2 transition-transform duration-200', isOpen ? 'rotate-0' : 'rotate-180') }))] }), _jsx(Popup, { open: isOpen, anchorRef: selectRef, contentRef: dropdownRef, positioning: positioning, keepMounted: true, onOpenChange: setIsOpen, container: popupContainer, positionMode: isParentPopupContainer ? 'absolute' : 'fixed', className: cn('z-[1000] w-full rounded-lg bg-background shadow-lg', 'border border-border', 'max-h-60 overflow-auto'), children: _jsx("div", { className: cn('w-full', !isOpen && 'hidden'), children: _jsx("div", { className: "p-1", children: filteredOptions.length > 0 ? (filteredOptions.map((option) => {
                             const isSelected = option.value === value;
                             return (_jsx("div", { onClick: () => handleSelect(option.value), className: cn('px-4 py-2 text-sm cursor-pointer transition-colors rounded-md', 'hover:bg-muted', isSelected && 'bg-muted'), children: option.label }, option.value));
-                        })) : (_jsx("div", { className: "px-4 py-2 text-sm text-muted-foreground text-center", children: "\u6682\u65E0\u9009\u9879" })) }) }), document.body)] }));
+                        })) : (_jsx("div", { className: "px-4 py-2 text-sm text-muted-foreground text-center", children: t('components.select.empty') })) }) }) })] }));
 });
 Select.displayName = 'Select';
 export { Select };

package/fe/packages/ui/react/components/Select/dropdownPositioning.d.ts

@@ -0,0 +1,3 @@
+import type { DropdownPositioningStrategy } from '../hooks/useDropdownPositioning';
+export declare const getSelectDropdownPosition: DropdownPositioningStrategy;
+//# sourceMappingURL=dropdownPositioning.d.ts.map

package/fe/packages/ui/react/components/Select/dropdownPositioning.js

@@ -0,0 +1,13 @@
+export const getSelectDropdownPosition = ({ anchorRect, contentRect, containerRect, viewportHeight, offset, matchAnchorWidth, }) => {
+    const dropdownHeight = contentRect?.height ?? 240;
+    const spaceBelow = viewportHeight - anchorRect.bottom;
+    const spaceAbove = anchorRect.top;
+    const shouldPlaceTop = spaceBelow < dropdownHeight && spaceAbove > spaceBelow;
+    const containerTop = containerRect?.top ?? 0;
+    const containerLeft = containerRect?.left ?? 0;
+    return {
+        top: (shouldPlaceTop ? anchorRect.top - dropdownHeight - offset : anchorRect.bottom + offset) - containerTop,
+        left: anchorRect.left - containerLeft,
+        width: matchAnchorWidth ? anchorRect.width : undefined,
+    };
+};

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

@@ -8,7 +8,7 @@ const PageLoadingSkeleton = ({ rows = 5, showTitle = true, showActions = true })
 };
 const TableLoadingSkeleton = ({ rows = 5 }) => {
     const columnCount = 6; // 默认列数，可以根据需要调整
-    return (_jsx("div", { className: "w-full", children: _jsx("div", { className: "bg-white rounded-[20px] overflow-hidden", children: _jsxs(Table, { containerClassName: "rounded-b-none", children: [_jsx(TableHeader, { children: _jsx(TableRow, { children: Array.from({ length: columnCount }).map((_, index) => (_jsx(TableHead, { children: _jsx(SkeletonText, { width: index === 0 ? 120 : index === columnCount - 1 ? 80 : 150 }) }, index))) }) }), _jsx(TableBody, { children: Array.from({ length: rows }).map((_, rowIndex) => (_jsx(TableRow, { children: Array.from({ length: columnCount }).map((_, colIndex) => (_jsx(TableCell, { children: colIndex === columnCount - 1 ? (_jsxs("div", { className: "flex gap-2", children: [_jsx(SkeletonItem, { className: "h-8 w-16" }), _jsx(SkeletonItem, { className: "h-8 w-16" })] })) : (_jsx(SkeletonText, { width: colIndex === 0 ? 120 : colIndex === 1 ? '80%' : 150 })) }, colIndex))) }, rowIndex))) })] }) }) }));
+    return (_jsx("div", { className: "w-full", children: _jsx("div", { className: "bg-background rounded-[20px] overflow-hidden", children: _jsxs(Table, { containerClassName: "rounded-b-none", children: [_jsx(TableHeader, { children: _jsx(TableRow, { children: Array.from({ length: columnCount }).map((_, index) => (_jsx(TableHead, { children: _jsx(SkeletonText, { width: index === 0 ? 120 : index === columnCount - 1 ? 80 : 150 }) }, index))) }) }), _jsx(TableBody, { children: Array.from({ length: rows }).map((_, rowIndex) => (_jsx(TableRow, { children: Array.from({ length: columnCount }).map((_, colIndex) => (_jsx(TableCell, { children: colIndex === columnCount - 1 ? (_jsxs("div", { className: "flex gap-2", children: [_jsx(SkeletonItem, { className: "h-8 w-16" }), _jsx(SkeletonItem, { className: "h-8 w-16" })] })) : (_jsx(SkeletonText, { width: colIndex === 0 ? 120 : colIndex === 1 ? '80%' : 150 })) }, colIndex))) }, rowIndex))) })] }) }) }));
 };
 const ComponentsLoadingSkeleton = ({ rows = 3 }) => {
     return (_jsx("div", { className: "w-full space-y-3", children: Array.from({ length: rows }).map((_, index) => (_jsx(SkeletonItem, { className: "h-4 w-full" }, index))) }));
@@ -26,6 +26,6 @@ export const Skeleton = ({ mode = 'componentsloading', className, rows, showTitl
                 return _jsx(ComponentsLoadingSkeleton, { rows: rows });
         }
     };
-    return (_jsx("div", { className: cn('w-full', className), ...props, children: renderSkeleton() }));
+    return (_jsx("div", { className: cn('tc-ui-skeleton w-full', className), ...props, children: renderSkeleton() }));
 };
 Skeleton.displayName = 'Skeleton';

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

@@ -14,7 +14,9 @@ const Switch = forwardRef(({ checked: controlledChecked, defaultChecked, onChang
         }
         onChange?.(newChecked);
     };
-    return (_jsx("button", { ref: ref, type: "button", role: "switch", "aria-checked": checked, disabled: disabled, onClick: handleToggle, className: cn('relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200', 'focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2', disabled && 'cursor-not-allowed opacity-50', !disabled && 'cursor-pointer', checked ? 'bg-[hsl(var(--theme-primary))]' : 'bg-gray-300', className), children: _jsx("span", { className: cn('inline-block h-4 w-4 transform rounded-full bg-white transition-transform duration-200', checked ? 'translate-x-6' : 'translate-x-1') }) }));
+    return (_jsx("button", { ref: ref, type: "button", role: "switch", "aria-checked": checked, disabled: disabled, onClick: handleToggle, className: cn('tc-ui-switch relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200', 'focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2', disabled && 'cursor-not-allowed opacity-50', !disabled && 'cursor-pointer', checked
+            ? 'bg-[hsl(var(--ring))] dark:bg-[hsl(var(--ring))]'
+            : 'bg-muted dark:bg-muted', className), children: _jsx("span", { className: cn('inline-block h-4 w-4 transform rounded-full bg-background transition-transform duration-200', checked ? 'translate-x-6' : 'translate-x-1') }) }));
 });
 Switch.displayName = 'Switch';
 export { Switch };

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

@@ -2,19 +2,20 @@ 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>[];
+    renderActionBtnArea?: () => ReactNode;
+    schemas: TableSearchSchema<T>[];
     /**
      * 导出Excel按钮的下拉菜单项
      */

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,35 @@ 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 +104,18 @@ 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()) : (
+                //  导出Excel按钮
+                _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.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';