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

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

@@ -0,0 +1,180 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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) => {
+    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 selectRef = useRef(null);
+    const dropdownRef = useRef(null);
+    const inputRef = useRef(null);
+    // 合并 refs
+    const setRefs = useCallback((node) => {
+        selectRef.current = node;
+        if (typeof ref === 'function') {
+            ref(node);
+        }
+        else if (ref) {
+            ref.current = node;
+        }
+    }, [ref]);
+    const isControlled = controlledValue !== undefined;
+    const value = isControlled ? controlledValue : internalValue;
+    // 获取当前选中的选项
+    const selectedOption = options.find((opt) => opt.value === value);
+    const displayText = selectedOption ? selectedOption.label : placeholder || '';
+    const filteredOptions = useMemo(() => {
+        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,
+        });
+    }, [filteredOptions.length]);
+    // 展开时更新位置并获取焦点
+    useEffect(() => {
+        if (isOpen) {
+            // 使用双重 requestAnimationFrame 确保 DOM 已完全渲染
+            requestAnimationFrame(() => {
+                requestAnimationFrame(() => {
+                    updatePosition();
+                    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]);
+    const handleToggle = useCallback(() => {
+        if (disabled)
+            return;
+        setIsOpen((prev) => {
+            const next = !prev;
+            if (next && searchable) {
+                setSearchTerm('');
+            }
+            return next;
+        });
+    }, [disabled, searchable]);
+    const handleSelect = useCallback((optionValue) => {
+        if (!isControlled) {
+            setInternalValue(optionValue);
+        }
+        onChange?.(optionValue);
+        setIsOpen(false);
+    }, [isControlled, onChange]);
+    const handleClear = useCallback((event) => {
+        event.stopPropagation();
+        if (disabled)
+            return;
+        // 清除时 重置内外状态
+        setInternalValue(undefined);
+        onChange?.(undefined);
+    }, [disabled, onChange]);
+    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 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)] }));
+});
+Select.displayName = 'Select';
+export { Select };

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

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

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

@@ -1,9 +1,24 @@
 import type { HTMLAttributes } from 'react';
 export type SkeletonMode = 'pageloading' | 'tableloading' | 'componentsloading';
 export interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * 骨架屏模式
+     * @default 'componentsloading'
+     */
     mode?: SkeletonMode;
+    /**
+     * 行数（仅对 pageloading 和 tableloading 有效）
+     */
     rows?: number;
+    /**
+     * 是否显示标题骨架（仅对 pageloading 有效）
+     * @default true
+     */
     showTitle?: boolean;
+    /**
+     * 是否显示操作栏骨架（仅对 pageloading 有效）
+     * @default true
+     */
     showActions?: boolean;
 }
 export declare const Skeleton: {

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

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../lib/utils';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../table';
+const SkeletonItem = ({ className, ...props }) => (_jsx("div", { className: cn('animate-pulse rounded bg-gray-200/60 dark:bg-gray-700/60', className), ...props }));
+const SkeletonText = ({ width = '100%', className }) => (_jsx(SkeletonItem, { className: cn('h-4', className), style: { width: typeof width === 'number' ? `${width}px` : width } }));
+const PageLoadingSkeleton = ({ rows = 5, showTitle = true, showActions = true }) => {
+    return (_jsxs("div", { className: "w-full space-y-6 p-6", children: [showTitle && (_jsxs("div", { className: "flex items-center justify-between", children: [_jsx(SkeletonItem, { className: "h-8 w-48" }), showActions && (_jsxs("div", { className: "flex gap-3", children: [_jsx(SkeletonItem, { className: "h-10 w-24" }), _jsx(SkeletonItem, { className: "h-10 w-24" })] }))] })), _jsxs("div", { className: "flex gap-4", children: [_jsx(SkeletonItem, { className: "h-10 flex-1" }), _jsx(SkeletonItem, { className: "h-10 w-24" }), _jsx(SkeletonItem, { className: "h-10 w-24" })] }), _jsx("div", { className: "space-y-4", children: Array.from({ length: rows }).map((_, index) => (_jsxs("div", { className: "flex gap-4", children: [_jsx(SkeletonItem, { className: "h-20 flex-1" }), _jsx(SkeletonItem, { className: "h-20 w-32" }), _jsx(SkeletonItem, { className: "h-20 w-32" })] }, index))) }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx(SkeletonItem, { className: "h-4 w-32" }), _jsxs("div", { className: "flex gap-2", children: [_jsx(SkeletonItem, { className: "h-8 w-8" }), _jsx(SkeletonItem, { className: "h-8 w-8" }), _jsx(SkeletonItem, { className: "h-8 w-8" })] })] })] }));
+};
+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))) })] }) }) }));
+};
+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))) }));
+};
+export const Skeleton = ({ mode = 'componentsloading', className, rows, showTitle, showActions, ...props }) => {
+    const renderSkeleton = () => {
+        switch (mode) {
+            case 'pageloading':
+                return _jsx(PageLoadingSkeleton, { rows: rows, showTitle: showTitle, showActions: showActions });
+            case 'tableloading':
+                return _jsx(TableLoadingSkeleton, { rows: rows });
+            case 'componentsloading':
+                return _jsx(ComponentsLoadingSkeleton, { rows: rows });
+            default:
+                return _jsx(ComponentsLoadingSkeleton, { rows: rows });
+        }
+    };
+    return (_jsx("div", { className: cn('w-full', className), ...props, children: renderSkeleton() }));
+};
+Skeleton.displayName = 'Skeleton';

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

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

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

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../../lib/utils';
+import React, { forwardRef } from 'react';
+const Switch = forwardRef(({ checked: controlledChecked, defaultChecked, onChange, disabled, className }, ref) => {
+    const [internalChecked, setInternalChecked] = React.useState(defaultChecked || false);
+    const isControlled = controlledChecked !== undefined;
+    const checked = isControlled ? controlledChecked : internalChecked;
+    const handleToggle = () => {
+        if (disabled)
+            return;
+        const newChecked = !checked;
+        if (!isControlled) {
+            setInternalChecked(newChecked);
+        }
+        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') }) }));
+});
+Switch.displayName = 'Switch';
+export { Switch };

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

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

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

@@ -5,24 +5,61 @@ import { type DropdownItem } from '../Dropdown';
 import type { FormFieldScheme } from '../Form';
 import type { SearchProps } from '../Search/Search';
 type TableSearchScheme<T> = MOmit<FormFieldScheme<T>, 'rules' | 'required'> & {
+    /**
+     * - 字段是否常驻
+     * - 如果都没有则去前四个
+     */
     isPermanent?: boolean;
 };
 type TableSearchProps<T> = MOmit<SearchProps<T>, 'children' | 'schemes'> & {
     onSearch?: (values: T) => void;
     onReset?: () => void;
     schemes: TableSearchScheme<T>[];
+    /**
+     * 导出Excel按钮的下拉菜单项
+     */
     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/{packages → fe/packages}/ui/react/components/TableSearch/TableSearch.js

@@ -1,19 +1,17 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const export_1 = require("../../lib/export");
-const utils_1 = require("../../lib/utils");
-const lucide_react_1 = require("lucide-react");
-const react_1 = require("react");
-const Button_1 = require("../Button");
-const Dropdown_1 = require("../Dropdown");
-const Search_1 = require("../Search");
-const tableSearchLocaleStore_1 = require("./tableSearchLocaleStore");
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ExportType } from '../../lib/export';
+import { cn } from '../../lib/utils';
+import { ChevronDown } from 'lucide-react';
+import { useMemo, useRef, useState } from 'react';
+import { Button } from '../Button';
+import { Dropdown } from '../Dropdown';
+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 formRef = (0, react_1.useRef)(undefined);
-    const [isExpanded, setIsExpanded] = (0, react_1.useState)(defaultExpand);
+    const formRef = useRef(undefined);
+    const [isExpanded, setIsExpanded] = useState(defaultExpand);
     const handleSearch = () => {
         const values = formRef.current?.getFieldsValue();
         onSearch?.(values);
@@ -27,14 +25,14 @@ const TableSearch = (props) => {
     const handleExpand = () => {
         setIsExpanded(!isExpanded);
     };
-    const locale = (0, tableSearchLocaleStore_1.useTableSearchLocaleStore)((state) => state.locale);
-    const defaultExportItems = (0, react_1.useMemo)(() => exportMenuItems || [
+    const locale = useTableSearchLocaleStore((state) => state.locale);
+    const defaultExportItems = useMemo(() => exportMenuItems || [
         {
             key: 'export-current-page',
             label: locale.exportCurrentPage,
             onClick: () => {
                 const values = formRef.current?.getFieldsValue();
-                onExport?.(export_1.ExportType.current, values);
+                onExport?.(ExportType.current, values);
             },
         },
         {
@@ -42,17 +40,17 @@ const TableSearch = (props) => {
             label: locale.exportCurrentQuery,
             onClick: () => {
                 const values = formRef.current?.getFieldsValue();
-                onExport?.(export_1.ExportType.all, values);
+                onExport?.(ExportType.all, values);
             },
         },
     ], [exportMenuItems, locale.exportCurrentPage, locale.exportCurrentQuery, onExport]);
-    const btnConfig = (0, react_1.useMemo)(() => {
+    const btnConfig = useMemo(() => {
         const resetBtn = PBtnText?.reset || locale.reset;
         const searchBtn = PBtnText?.search || locale.search;
         const exportBtn = PBtnText?.export || locale.export;
         const expandBtn = PBtnText?.expand || locale.expand;
         const collapseBtn = PBtnText?.collapse || locale.collapse;
-        const expandIcon = PBtnText?.expandIcon || (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: "h-4 w-4" });
+        const expandIcon = PBtnText?.expandIcon || _jsx(ChevronDown, { className: "h-4 w-4" });
         return {
             resetBtn,
             searchBtn,
@@ -70,7 +68,7 @@ const TableSearch = (props) => {
         PBtnText?.expandIcon,
         locale,
     ]);
-    const { permanentSchemes, alternativeSchemes } = (0, react_1.useMemo)(() => {
+    const { permanentSchemes, alternativeSchemes } = useMemo(() => {
         const alternativeSchemes = [];
         const tmp = [];
         for (let index = 0; index < schemes.length; index++) {
@@ -93,6 +91,7 @@ const TableSearch = (props) => {
     }, [expandBoundaries, schemes]);
     const showExpandedBtn = schemes.length > expandBoundaries;
     let SSchemes;
+    // 有展开
     if (showExpandedBtn) {
         SSchemes = isExpanded
             ? schemes
@@ -113,8 +112,8 @@ const TableSearch = (props) => {
     else {
         SSchemes = schemes;
     }
-    return ((0, jsx_runtime_1.jsxs)(Search_1.Search, { getForm: (form) => {
+    return (_jsxs(Search, { getForm: (form) => {
             formRef.current = form;
-        }, schemes: SSchemes, ...searchProps, children: [showExpandedBtn && ((0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "default", size: "sm", onClick: handleExpand, rightIcon: (0, jsx_runtime_1.jsx)("span", { className: (0, utils_1.cn)('transition-transform duration-200', isExpanded && 'rotate-180'), children: btnConfig.expandIcon }), children: isExpanded ? btnConfig.collapseBtn : btnConfig.expandBtn }, "expandedBtn")), (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "primary", size: "sm", onClick: handleSearch, children: btnConfig.searchBtn }), (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "default", size: "sm", onClick: handleReset, children: btnConfig.resetBtn }), (0, jsx_runtime_1.jsx)(Dropdown_1.Dropdown, { items: defaultExportItems, placement: "bottom-end", children: (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "default", size: "sm", rightIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: "h-4 w-4" }), children: btnConfig.exportBtn }) }), additionalButtons] }));
+        }, 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] }));
 };
-exports.default = TableSearch;
+export default TableSearch;

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

@@ -0,0 +1 @@
+export { default as TableSearch } from './TableSearch';

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

@@ -0,0 +1,23 @@
+export const zhCNLocale = {
+    reset: '重置',
+    search: '查询',
+    export: '导出Excel',
+    expand: '展开',
+    collapse: '收起',
+    exportCurrentPage: '当前页',
+    exportCurrentQuery: '当前查询条件',
+};
+export const enUSLocale = {
+    reset: 'Reset',
+    search: 'Search',
+    export: 'Export Excel',
+    expand: 'Expand',
+    collapse: 'Collapse',
+    exportCurrentPage: 'Current Page',
+    exportCurrentQuery: 'Current Filters',
+};
+export const defaultLocale = zhCNLocale;
+export const btnConfig = defaultLocale;
+export const updateBtnConfig = (config) => {
+    Object.assign(btnConfig, config);
+};

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

@@ -0,0 +1,11 @@
+import { create } from 'zustand';
+import { defaultLocale } from './lang';
+export const useTableSearchLocaleStore = create((set) => ({
+    locale: defaultLocale,
+    replaceLocale: (nextLocale) => set(() => ({
+        locale: nextLocale,
+    })),
+    resetLocale: () => set(() => ({
+        locale: defaultLocale,
+    })),
+}));

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

@@ -1,18 +1,58 @@
 import type { ChangeEvent, TextareaHTMLAttributes } from 'react';
 export type TextareaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'onChange' | 'defaultValue'> & {
     value?: string;
+    /**
+     *
+     * @param v textarea value
+     * @param e changeEvent
+     */
     onChange?: (v: string, e: ChangeEvent<HTMLTextAreaElement>) => void;
+    /**
+     * 只有初始化时会使用
+     * 如果会改变请使用value
+     */
     defaultValue?: string;
+    /**
+     * 最大字符数限制
+     * @default 500
+     */
     maxLength?: number;
+    /**
+     * 是否显示字符计数器
+     * @default true
+     */
     showCount?: boolean;
+    /**
+     * 占位符文本
+     */
     placeholder?: string;
 };
 declare const Textarea: import("react").ForwardRefExoticComponent<Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "defaultValue" | "onChange" | "value"> & {
     value?: string;
+    /**
+     *
+     * @param v textarea value
+     * @param e changeEvent
+     */
     onChange?: (v: string, e: ChangeEvent<HTMLTextAreaElement>) => void;
+    /**
+     * 只有初始化时会使用
+     * 如果会改变请使用value
+     */
     defaultValue?: string;
+    /**
+     * 最大字符数限制
+     * @default 500
+     */
     maxLength?: number;
+    /**
+     * 是否显示字符计数器
+     * @default true
+     */
     showCount?: boolean;
+    /**
+     * 占位符文本
+     */
     placeholder?: string;
 } & import("react").RefAttributes<HTMLTextAreaElement>>;
 export { Textarea };

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

@@ -0,0 +1,35 @@
+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, 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: "relative w-full", 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', className), 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('absolute bottom-3 right-4 text-xs text-muted-foreground', 'pointer-events-none'), children: [currentLength, "/", maxLength] }))] }));
+});
+Textarea.displayName = 'Textarea';
+export { Textarea };

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

@@ -1,8 +1,24 @@
 export interface TooltipProps {
+    /**
+     * 提示内容
+     */
     content: React.ReactNode;
+    /**
+     * 触发元素
+     */
     children: React.ReactElement;
+    /**
+     * 提示位置
+     * @default 'right'
+     */
     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;