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

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

@@ -1,15 +1,12 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Tooltip = Tooltip;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const utils_1 = require("../lib/utils");
-const react_1 = require("react");
-const react_dom_1 = require("react-dom");
-function Tooltip({ content, children, placement = 'right', visible, className }) {
-    const [isVisible, setIsVisible] = (0, react_1.useState)(false);
-    const [position, setPosition] = (0, react_1.useState)({ top: 0, left: 0 });
-    const triggerRef = (0, react_1.useRef)(null);
-    const tooltipRef = (0, react_1.useRef)(null);
+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);
@@ -23,13 +20,14 @@ function Tooltip({ content, children, placement = 'right', visible, className })
             setIsVisible(false);
         }
     };
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (visible !== undefined) {
             setIsVisible(visible);
         }
     }, [visible]);
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (isVisible && triggerRef.current && tooltipRef.current) {
+            // 使用 requestAnimationFrame 确保 DOM 已更新
             requestAnimationFrame(() => {
                 if (!triggerRef.current || !tooltipRef.current)
                     return;
@@ -46,12 +44,15 @@ function Tooltip({ content, children, placement = 'right', visible, className })
                     case 'top':
                         top = triggerRect.top + scrollY - tooltipRect.height - padding;
                         left = triggerRect.left + scrollX + triggerRect.width / 2 - tooltipRect.width / 2;
+                        // 如果超出左边界，对齐到左边界
                         if (left < scrollX + padding) {
                             left = scrollX + padding;
                         }
+                        // 如果超出右边界，对齐到右边界
                         if (left + tooltipRect.width > scrollX + viewportWidth - padding) {
                             left = scrollX + viewportWidth - tooltipRect.width - padding;
                         }
+                        // 如果上方空间不够，改为下方显示
                         if (top < scrollY + padding) {
                             top = triggerRect.bottom + scrollY + padding;
                         }
@@ -59,12 +60,15 @@ function Tooltip({ content, children, placement = 'right', visible, className })
                     case 'bottom':
                         top = triggerRect.bottom + scrollY + padding;
                         left = triggerRect.left + scrollX + triggerRect.width / 2 - tooltipRect.width / 2;
+                        // 如果超出左边界，对齐到左边界
                         if (left < scrollX + padding) {
                             left = scrollX + padding;
                         }
+                        // 如果超出右边界，对齐到右边界
                         if (left + tooltipRect.width > scrollX + viewportWidth - padding) {
                             left = scrollX + viewportWidth - tooltipRect.width - padding;
                         }
+                        // 如果下方空间不够，改为上方显示
                         if (top + tooltipRect.height > scrollY + viewportHeight - padding) {
                             top = triggerRect.top + scrollY - tooltipRect.height - padding;
                         }
@@ -72,12 +76,15 @@ function Tooltip({ content, children, placement = 'right', visible, className })
                     case 'left':
                         top = triggerRect.top + scrollY + triggerRect.height / 2 - tooltipRect.height / 2;
                         left = triggerRect.left + scrollX - tooltipRect.width - padding;
+                        // 如果超出上边界，对齐到上边界
                         if (top < scrollY + padding) {
                             top = scrollY + padding;
                         }
+                        // 如果超出下边界，对齐到下边界
                         if (top + tooltipRect.height > scrollY + viewportHeight - padding) {
                             top = scrollY + viewportHeight - tooltipRect.height - padding;
                         }
+                        // 如果左侧空间不够，改为右侧显示
                         if (left < scrollX + padding) {
                             left = triggerRect.right + scrollX + padding;
                         }
@@ -85,12 +92,15 @@ function Tooltip({ content, children, placement = 'right', visible, className })
                     case 'right':
                         top = triggerRect.top + scrollY + triggerRect.height / 2 - tooltipRect.height / 2;
                         left = triggerRect.right + scrollX + padding;
+                        // 如果超出上边界，对齐到上边界
                         if (top < scrollY + padding) {
                             top = scrollY + padding;
                         }
+                        // 如果超出下边界，对齐到下边界
                         if (top + tooltipRect.height > scrollY + viewportHeight - padding) {
                             top = scrollY + viewportHeight - tooltipRect.height - padding;
                         }
+                        // 如果右侧空间不够，改为左侧显示
                         if (left + tooltipRect.width > scrollX + viewportWidth - padding) {
                             left = triggerRect.left + scrollX - tooltipRect.width - padding;
                         }
@@ -100,8 +110,8 @@ function Tooltip({ content, children, placement = 'right', visible, className })
             });
         }
     }, [isVisible, placement]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { ref: triggerRef, onMouseEnter: showTooltip, onMouseLeave: hideTooltip, className: "inline-block", children: children }), isVisible &&
-                (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)("div", { ref: tooltipRef, className: (0, utils_1.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: {
+    return (_jsxs(_Fragment, { children: [_jsx("div", { ref: triggerRef, onMouseEnter: showTooltip, onMouseLeave: hideTooltip, className: "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/{packages → fe/packages}/ui/react/components/TreeSelect.d.ts

@@ -5,14 +5,20 @@ 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/{packages → fe/packages}/ui/react/components/TreeSelect.js

@@ -1,13 +1,10 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TreeSelect = TreeSelect;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const utils_1 = require("../lib/utils");
-const lucide_react_1 = require("lucide-react");
-const react_1 = require("react");
-function TreeSelect({ data, value = [], onChange, labelField = 'name', checkable = true, className, }) {
-    const [expandedKeys, setExpandedKeys] = (0, react_1.useState)(new Set());
-    const { nodeMap, parentMap } = (0, react_1.useMemo)(() => {
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../lib/utils';
+import { Check, ChevronDown, ChevronRight } from 'lucide-react';
+import { useCallback, useMemo, useState } from 'react';
+export function TreeSelect({ data, value = [], onChange, labelField = 'name', checkable = true, className, }) {
+    const [expandedKeys, setExpandedKeys] = useState(new Set());
+    const { nodeMap, parentMap } = useMemo(() => {
         const nodeM = new Map();
         const parentM = new Map();
         const traverse = (nodes, parentId) => {
@@ -22,7 +19,8 @@ function TreeSelect({ data, value = [], onChange, labelField = 'name', checkable
         traverse(data, null);
         return { nodeMap: nodeM, parentMap: parentM };
     }, [data]);
-    const getDescendantIds = (0, react_1.useCallback)((node) => {
+    // 获取节点的所有子节点 ID
+    const getDescendantIds = useCallback((node) => {
         const ids = [];
         const traverse = (n) => {
             if (n.children && n.children.length > 0) {
@@ -35,7 +33,7 @@ function TreeSelect({ data, value = [], onChange, labelField = 'name', checkable
         traverse(node);
         return ids;
     }, []);
-    const updateParentSelection = (0, react_1.useCallback)((checkedSet) => {
+    const updateParentSelection = useCallback((checkedSet) => {
         const traverseUp = (nodeId) => {
             const parentId = parentMap.get(nodeId);
             if (parentId === undefined || parentId === null)
@@ -55,7 +53,8 @@ function TreeSelect({ data, value = [], onChange, labelField = 'name', checkable
         };
         checkedSet.forEach((id) => traverseUp(id));
     }, [nodeMap, parentMap]);
-    const toggleExpand = (0, react_1.useCallback)((nodeId) => {
+    // 切换展开/折叠
+    const toggleExpand = useCallback((nodeId) => {
         setExpandedKeys((prev) => {
             const newSet = new Set(prev);
             if (newSet.has(nodeId)) {
@@ -67,7 +66,7 @@ function TreeSelect({ data, value = [], onChange, labelField = 'name', checkable
             return newSet;
         });
     }, []);
-    const getIndeterminateKeys = (0, react_1.useCallback)((checkedSet) => {
+    const getIndeterminateKeys = useCallback((checkedSet) => {
         const indeterminateKeys = [];
         const getDescendantCount = (node) => {
             if (!node.children || node.children.length === 0) {
@@ -92,7 +91,8 @@ function TreeSelect({ data, value = [], onChange, labelField = 'name', checkable
         traverse(data);
         return indeterminateKeys;
     }, [data]);
-    const toggleCheck = (0, react_1.useCallback)((node) => {
+    // 切换选中状态
+    const toggleCheck = useCallback((node) => {
         if (!checkable || !onChange)
             return;
         const isChecked = value.includes(node.id);
@@ -110,10 +110,11 @@ function TreeSelect({ data, value = [], onChange, labelField = 'name', checkable
         const indeterminateKeys = getIndeterminateKeys(nextChecked);
         onChange({ checked: Array.from(nextChecked), indeterminate: indeterminateKeys });
     }, [value, onChange, checkable, getDescendantIds, updateParentSelection, getIndeterminateKeys]);
-    const isNodeChecked = (0, react_1.useCallback)((nodeId) => {
+    // 判断节点是否选中
+    const isNodeChecked = useCallback((nodeId) => {
         return value.includes(nodeId);
     }, [value]);
-    const isNodeIndeterminate = (0, react_1.useCallback)((node) => {
+    const isNodeIndeterminate = useCallback((node) => {
         if (!node.children || node.children.length === 0)
             return false;
         const getDescendantCount = (n) => {
@@ -128,32 +129,34 @@ function TreeSelect({ data, value = [], onChange, labelField = 'name', checkable
         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 ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.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 ? ((0, jsx_runtime_1.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", { type: "button", onClick: (e) => {
                                 e.stopPropagation();
                                 toggleExpand(node.id);
-                            }, className: "flex-shrink-0 p-0.5 hover:bg-muted rounded", children: isExpanded ? (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: "h-4 w-4" }) : (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" }) })) : ((0, jsx_runtime_1.jsx)("span", { className: "w-5" })), checkable && ((0, jsx_runtime_1.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("button", { type: "button", onClick: (e) => {
                                 e.stopPropagation();
                                 toggleCheck(node);
-                            }, className: (0, utils_1.cn)('flex-shrink-0 w-4 h-4 rounded border-2 flex items-center justify-center transition-colors', isChecked
+                            }, 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) && (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "h-3 w-3 text-white", strokeWidth: 3 }) })), (0, jsx_runtime_1.jsx)("span", { className: "flex-1 text-sm select-none", onClick: () => {
+                                    : '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: () => {
                                 if (hasChildren) {
                                     toggleExpand(node.id);
                                 }
                                 else {
                                     toggleCheck(node);
                                 }
-                            }, children: labelField === 'desctext' ? node.desctext || node.name : node.name })] }), hasChildren && isExpanded && (0, jsx_runtime_1.jsx)("div", { children: node.children.map((child) => renderTreeNode(child, level + 1)) })] }, node.id));
+                            }, 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 (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)('p-8 text-center text-sm text-muted-foreground', className), children: "No data" });
+        return _jsx("div", { className: cn('p-8 text-center text-sm text-muted-foreground', className), children: "No data" });
     }
-    return ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.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('border border-border rounded-lg p-2 max-h-[400px] overflow-y-auto', className), children: data.map((node) => renderTreeNode(node)) }));
 }

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

@@ -1,16 +1,13 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ImageUpload = ImageUpload;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const lucide_react_1 = require("lucide-react");
-const react_1 = require("react");
-const Upload_1 = require("./Upload");
-function ImageUpload({ accept = '.jpg,.png', maxCount = 1, value, onChange, beforeChange }) {
-    const inputRef = (0, react_1.useRef)(null);
-    const [internalUrls, setInternalUrls] = (0, react_1.useState)([]);
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Camera, X } from 'lucide-react';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { FileUpload } from './Upload';
+export function ImageUpload({ accept = '.jpg,.png', maxCount = 1, value, onChange, beforeChange }) {
+    const inputRef = useRef(null);
+    const [internalUrls, setInternalUrls] = useState([]);
     const urls = value ?? internalUrls;
     const setUrls = onChange ?? setInternalUrls;
-    const mAccept = (0, react_1.useMemo)(() => {
+    const mAccept = useMemo(() => {
         const aType = accept
             .split(',')
             .map((item) => item.trim().replace(/\./g, ''))
@@ -52,15 +49,15 @@ function ImageUpload({ accept = '.jpg,.png', maxCount = 1, value, onChange, befo
         URL.revokeObjectURL(urlToRemove);
         setUrls(urls.filter((_, i) => i !== index));
     };
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         return () => {
             if (!onChange) {
                 internalUrls.forEach((url) => URL.revokeObjectURL(url));
             }
         };
     }, [onChange, internalUrls]);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap gap-3", children: [urls.map((url, index) => ((0, jsx_runtime_1.jsxs)("div", { className: "relative w-24 h-24 rounded-lg overflow-hidden border border-gray-200 group cursor-pointer", children: [(0, jsx_runtime_1.jsx)("img", { src: url, alt: "", className: "w-full h-full object-cover" }), (0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 bg-black/0 group-hover:bg-black/40 transition-colors flex items-center justify-center", children: (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: (e) => {
+    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) => {
                                 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: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 16 }) }) })] }, index))), urls.length < maxCount && ((0, jsx_runtime_1.jsx)(Upload_1.FileUpload, { inputRef: inputRef, accept: mAccept, multiple: maxCount > 1, onChange: handleFileChange, labelClassName: "w-24 h-24 p-0 border-0 cursor-pointer", selectLabel: (0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsx)(lucide_react_1.Camera, { className: "text-gray-500", size: 24 }), (0, jsx_runtime_1.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": "\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" })] }) }))] }));
 }

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

@@ -1,13 +1,40 @@
 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

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../Button';
+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 }))] }));
+}

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

@@ -0,0 +1,2 @@
+export * from './ImageUpload';
+export * from './Upload';

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

@@ -0,0 +1,78 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useBreadcrumb } from '../hooks/useBreadcrumb';
+import { useLanguage } from '../hooks/useLanguage';
+import { cn } from '../lib/utils';
+// import useUserStore from '@tc/ui-react/stores/user'
+import { ChevronRight, MoreHorizontal } from 'lucide-react';
+import { forwardRef } from 'react';
+import { useNavigate } from 'react-router-dom';
+const Breadcrumb = forwardRef(({ ...props }, ref) => _jsx("nav", { ref: ref, "aria-label": "breadcrumb", ...props }));
+Breadcrumb.displayName = 'Breadcrumb';
+const BreadcrumbList = forwardRef(({ className, ...props }, ref) => (_jsx("ol", { ref: ref, className: cn('flex items-center gap-3 flex-wrap', className), ...props })));
+BreadcrumbList.displayName = 'BreadcrumbList';
+const BreadcrumbItem = forwardRef(({ className, ...props }, ref) => _jsx("li", { ref: ref, className: cn('inline-flex items-center', className), ...props }));
+BreadcrumbItem.displayName = 'BreadcrumbItem';
+const BreadcrumbLink = forwardRef(({ className, ...props }, ref) => {
+    return _jsx("a", { ref: ref, className: cn('transition-colors hover:text-foreground', className), ...props });
+});
+BreadcrumbLink.displayName = 'BreadcrumbLink';
+const BreadcrumbPage = forwardRef(({ className, active, onClose, closable = true, children, ...props }, ref) => {
+    return (_jsxs("span", { ref: ref, role: "link", "aria-disabled": "true", "aria-current": "page", className: cn('inline-flex items-center gap-2 px-4 py-2 rounded-lg border transition-all duration-200 text-sm', active
+            ? 'bg-breadcrumb-active-bg text-breadcrumb-active-text border-breadcrumb-active-bg shadow-sm'
+            : 'bg-white text-breadcrumb-text border-breadcrumb-border hover:border-gray-400', className), ...props, children: [_jsx("span", { className: "font-normal", children: children }), onClose && closable && (_jsx("button", { onClick: (e) => {
+                    e.stopPropagation();
+                    onClose();
+                }, className: "inline-flex items-center justify-center hover:opacity-70 transition-opacity", "aria-label": "\u5173\u95ED", children: _jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsxs("g", { clipPath: "url(#clip0_228_519)", children: [_jsx("circle", { cx: "8", cy: "8", r: "6.66667", stroke: "currentColor", strokeWidth: "1" }), _jsx("path", { d: "M9.66669 6.33302L6.33337 9.66634M6.33336 6.33301L9.66668 9.66633", stroke: "currentColor", strokeWidth: "1", strokeLinecap: "round" })] }), _jsx("defs", { children: _jsx("clipPath", { id: "clip0_228_519", children: _jsx("rect", { width: "16", height: "16", fill: "white" }) }) })] }) }))] }));
+});
+BreadcrumbPage.displayName = 'BreadcrumbPage';
+const BreadcrumbSeparator = ({ children, className, ...props }) => (_jsx("li", { role: "presentation", "aria-hidden": "true", className: cn('[&>svg]:size-3.5', className), ...props, children: children ?? _jsx(ChevronRight, {}) }));
+BreadcrumbSeparator.displayName = 'BreadcrumbSeparator';
+const BreadcrumbEllipsis = ({ className, ...props }) => (_jsxs("span", { role: "presentation", "aria-hidden": "true", "aria-label": "More", className: cn('flex h-9 w-9 items-center justify-center', className), ...props, children: [_jsx(MoreHorizontal, { className: "h-4 w-4" }), _jsx("span", { className: "sr-only", children: "More" })] }));
+BreadcrumbEllipsis.displayName = 'BreadcrumbEllipsis';
+export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, };
+export function SimpleBreadcrumb({ className }) {
+    const { language } = useLanguage();
+    const navigate = useNavigate();
+    const { items, setActiveItem, removeItem } = useBreadcrumb();
+    const handleBreadcrumbClick = (id) => {
+        const item = items.find((item) => item.id === id);
+        if (item?.path) {
+            navigate(item.path);
+            setActiveItem(id);
+        }
+    };
+    const handleBreadcrumbClose = (id) => {
+        const itemToRemove = items.find((item) => item.id === id);
+        const isActive = itemToRemove?.active;
+        // 先计算剩余的面包屑项（在删除之前）
+        const remainingItems = items.filter((item) => item.id !== id);
+        // 立即删除该项，确保状态及时更新
+        removeItem(id);
+        // 如果删除的是当前激活的项，需要跳转
+        if (isActive) {
+            if (remainingItems.length > 0) {
+                // 有剩余项，跳转到最后一个
+                const targetItem = remainingItems.at(-1);
+                const targetPath = targetItem.path;
+                if (targetPath) {
+                    // 使用 setTimeout 确保删除操作先完成
+                    setTimeout(() => {
+                        navigate(targetPath);
+                        setActiveItem(targetItem.id);
+                    }, 0);
+                }
+            }
+            else {
+                // 获取首页路径（第一个权限页面）
+                setTimeout(() => {
+                    // todo
+                    // navigate(useUserStore.getState().userPagePermissions[0]?.menuUrl || '/')
+                }, 0);
+            }
+        }
+    };
+    const getItemLabel = (item) => {
+        return language === 'zh-CN' ? item.label : item.desctext || item.label;
+    };
+    return (_jsx(Breadcrumb, { className: className, children: _jsx(BreadcrumbList, { children: items.map((item) => (_jsx(BreadcrumbItem, { children: _jsx(BreadcrumbPage, { active: item.active, closable: item.closable !== false, onClose: () => handleBreadcrumbClose(item.id), onClick: () => handleBreadcrumbClick(item.id), className: 'cursor-pointer', "data-active": item.active ? 'true' : undefined, children: getItemLabel(item) }) }, item.id))) }) }));
+}

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

@@ -4,6 +4,9 @@ interface IParams<T> {
     controlledValue?: string;
     disabled?: boolean;
 }
+/**
+ * 处理ref & 判断是否受控 & 使用的value & value.length
+ */
 export declare const useInputController: <T>(params: IParams<T>) => {
     setRefs: (node: T | null) => void;
     setIsFocused: import("react").Dispatch<import("react").SetStateAction<boolean>>;

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

@@ -1,24 +1,28 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useInputController = void 0;
-const react_1 = require("react");
-const useInputController = (params) => {
+import { useCallback, useMemo, useRef, useState } from 'react';
+/**
+ * 处理ref & 判断是否受控 & 使用的value & value.length
+ */
+export const useInputController = (params) => {
     const { defaultValue, ref, controlledValue } = params;
-    const [isFocused, setIsFocused] = (0, react_1.useState)(false);
-    const [internalValue, setInternalValue] = (0, react_1.useState)(defaultValue || '');
-    const controllerRef = (0, react_1.useRef)(null);
-    const setRefs = (0, react_1.useCallback)((node) => {
+    const [isFocused, setIsFocused] = useState(false);
+    const [internalValue, setInternalValue] = useState(defaultValue || '');
+    const controllerRef = useRef(null);
+    // 合并 refs
+    const setRefs = useCallback((node) => {
         controllerRef.current = node;
         if (typeof ref === 'function') {
             ref(node);
         }
         else if (ref) {
+            // eslint-disable-next-line react-hooks/immutability
             ref.current = node;
         }
     }, [ref]);
-    const isControlledRef = (0, react_1.useRef)(false);
-    const isControlled = (0, react_1.useMemo)(() => {
+    const isControlledRef = useRef(false);
+    // 外部传了value
+    const isControlled = useMemo(() => {
         const r = controlledValue !== undefined;
+        // 当传入的value改变时，更新ref值
         isControlledRef.current = r;
         return r;
     }, [controlledValue]);
@@ -39,4 +43,3 @@ const useInputController = (params) => {
         value,
     };
 };
-exports.useInputController = useInputController;

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

@@ -0,0 +1,23 @@
+export * from './breadcrumb';
+export * from './Button';
+export * from './Checkbox';
+export * from './ConfirmDialog';
+export * from './DataTable/data-table';
+export * from './Dropdown';
+export * from './Form';
+export * from './ImagePreview';
+export * from './Input';
+export * from './Label';
+export * from './Message';
+export * from './Modal';
+export * from './Pagination';
+export * from './Search';
+export * from './Select';
+export * from './Skeleton';
+export * from './Switch';
+export * from './table';
+export * from './TableSearch';
+export * from './Textarea';
+export * from './Tooltip';
+export * from './TreeSelect';
+export * from './Upload';

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

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../lib/utils';
+import * as React from 'react';
+const Table = React.forwardRef(({ className, containerClassName, ...props }, ref) => (_jsx("div", { className: cn('relative w-full overflow-auto rounded-[20px]', containerClassName), children: _jsx("table", { ref: ref, className: cn('w-full caption-bottom text-sm', className), ...props }) })));
+Table.displayName = 'Table';
+const TableHeader = React.forwardRef(({ className, ...props }, ref) => _jsx("thead", { ref: ref, className: cn('bg-table-header', className), ...props }));
+TableHeader.displayName = 'TableHeader';
+const TableBody = React.forwardRef(({ className, ...props }, ref) => (_jsx("tbody", { ref: ref, className: cn('[&_tr:last-child]:border-0', className), ...props })));
+TableBody.displayName = 'TableBody';
+const TableFooter = React.forwardRef(({ className, ...props }, ref) => (_jsx("tfoot", { ref: ref, className: cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', className), ...props })));
+TableFooter.displayName = 'TableFooter';
+const TableRow = React.forwardRef(({ className, ...props }, ref) => (_jsx("tr", { ref: ref, className: cn('border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted', className), ...props })));
+TableRow.displayName = 'TableRow';
+const TableHead = React.forwardRef(({ className, isAction, ...props }, ref) => (_jsx("th", { ref: ref, className: cn('h-12 px-4 text-left align-middle text-xs font-normal', 'text-table-head-text', isAction && 'bg-table-action text-table-action-text w-[85px] text-center', className), ...props })));
+TableHead.displayName = 'TableHead';
+const TableCell = React.forwardRef(({ className, isAction, ...props }, ref) => (_jsx("td", { ref: ref, className: cn('p-4 align-middle text-sm font-normal', 'text-table-cell-text', isAction && 'bg-table-action text-table-action-text w-[85px] text-center', className), ...props })));
+TableCell.displayName = 'TableCell';
+const TableCaption = React.forwardRef(({ className, ...props }, ref) => (_jsx("caption", { ref: ref, className: cn('mt-4 text-sm text-muted-foreground', className), ...props })));
+TableCaption.displayName = 'TableCaption';
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };