@_tc/template-core 0.1.15 → 0.1.16

package/.skills/tc-component-usage-skills/reference/component-api.md

@@ -725,10 +725,16 @@ interface NotificationProps {
 interface LoadingProps {
   size?: 'sm' | 'md' | 'lg'
   text?: ReactNode
+  className?: string
+}
+
+interface LoadingIndicatorProps {
+  size?: 'sm' | 'md' | 'lg'
+  className?: string
 }
 ```
 
-Spinning circle with optional text.
+`Loading` renders the shared spinner with optional text. `LoadingIndicator` is the icon-only spinner used by compact surfaces such as `Button.loading`.
 
 ---
 

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

@@ -1,6 +1,7 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from '../../lib/utils';
 import { forwardRef } from 'react';
+import { LoadingIndicator } from '../Loading';
 const Button = forwardRef((props, ref) => {
     const { className, size = 'md', state, disabled: disabledProp, loading: loadingProp, leftIcon, rightIcon, noUnderline, children, } = props;
     const variant = props.variant ?? 'default';
@@ -46,7 +47,7 @@ const Button = forwardRef((props, ref) => {
         md: 'h-4 w-4',
         lg: 'h-5 w-5',
     };
-    const loadingIcon = loading ? (_jsx("span", { className: cn('flex items-center', children && 'mr-2'), children: _jsxs("svg", { className: cn('animate-spin', spinnerSize[size]), xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [_jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), _jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })] }) }, "loading")) : null;
+    const loadingIcon = loading ? (_jsx("span", { className: cn('flex items-center', children && 'mr-2'), children: _jsx(LoadingIndicator, { size: "sm", className: cn('text-current', spinnerSize[size]) }) }, "loading")) : null;
     // 展示内容
     const contents = [
         loadingIcon,

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

@@ -4,6 +4,11 @@ export type CardProps = {
     footer?: ReactNode;
     children?: ReactNode;
     className?: string;
+    /**
+     * 是否启用 hover 悬浮阴影
+     * @default true
+     */
+    hoverable?: boolean;
 };
 declare const Card: import("react").ForwardRefExoticComponent<CardProps & import("react").RefAttributes<HTMLDivElement>>;
 export { Card };

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

@@ -1,8 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from '../../lib/utils';
 import { forwardRef } from 'react';
-const Card = forwardRef(({ header, footer, children, className }, ref) => {
-    return (_jsxs("div", { ref: ref, className: cn('tc-ui-card rounded-lg border bg-card text-card-foreground shadow-sm', className), children: [header && (_jsx("div", { className: "tc-ui-card-header border-b px-4 py-3 font-medium", children: header })), _jsx("div", { className: "tc-ui-card-body px-4 py-4", children: children }), footer && (_jsx("div", { className: "tc-ui-card-footer border-t px-4 py-3", children: footer }))] }));
+const Card = forwardRef(({ header, footer, children, className, hoverable = true }, ref) => {
+    return (_jsxs("div", { ref: ref, className: cn('tc-ui-card rounded-xl border border-border/60 bg-card text-card-foreground', 'shadow-[inset_0_1px_0_hsl(var(--foreground)/0.04)]', hoverable && [
+            'transition-[transform,box-shadow,border-color] duration-200 ease-out',
+            'hover:-translate-y-0.5 hover:border-border/80',
+            'hover:shadow-[var(--shadow-panel),inset_0_1px_0_hsl(var(--foreground)/0.06)]',
+        ], className), children: [header && (_jsx("div", { className: "tc-ui-card-header border-b border-border/50 px-4 py-3 text-sm font-medium", children: header })), _jsx("div", { className: "tc-ui-card-body px-4 py-4", children: children }), footer && (_jsx("div", { className: "tc-ui-card-footer border-t border-border/50 px-4 py-3", children: footer }))] }));
 });
 Card.displayName = 'Card';
 export { Card };

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

@@ -187,10 +187,10 @@ const DatePicker = forwardRef((props, ref) => {
         }
     };
     const showClearIcon = allowClear && selectedDate && !disabled && isHover;
-    return (_jsx("div", { ref: ref, className: cn("tc-ui-date-picker relative w-full", mode === ModeType.Range ? "min-w-[255px]" : "", className), children: _jsxs("div", { ref: containerRef, className: "relative", children: [_jsxs("div", { className: cn("flex items-center w-full rounded-lg px-4 py-3 text-sm", "border transition-colors duration-200", "bg-background cursor-pointer", disabled &&
-                        "cursor-not-allowed bg-muted border-border text-muted-foreground", !disabled && !selectedDate && !isOpen && "border-border", !disabled && (selectedDate || isOpen) && "border-theme"), onClick: () => !disabled && setIsOpen(!isOpen), onMouseEnter: () => setIsHover(true), onMouseLeave: () => setIsHover(false), children: [_jsx(Input, { ref: inputRef, type: "text", value: inputValue, onChange: (_, e) => handleInputChange(e), placeholder: finalPlaceholder, disabled: disabled, readOnly: mode === ModeType.Range, className: "flex-1", inputClassName: cn("flex-1 rounded-none border-0 bg-transparent px-0 py-0 outline-none", "text-sm text-foreground placeholder:text-muted-foreground", disabled && "cursor-not-allowed", mode === ModeType.Range &&
+    return (_jsx("div", { ref: ref, className: cn("tc-ui-date-picker relative w-full", mode === ModeType.Range ? "min-w-[255px]" : "", className), children: _jsxs("div", { ref: containerRef, className: "relative", children: [_jsxs("div", { className: cn("flex h-10 items-center w-full rounded-lg px-3 py-0 text-sm", "border transition-colors duration-200", "bg-background cursor-pointer", disabled &&
+                        "cursor-not-allowed bg-muted border-border text-muted-foreground", !disabled && !isOpen && "border-border", !disabled && isOpen && "border-theme ring-2 ring-theme/25", !disabled && "focus-within:border-theme focus-within:ring-2 focus-within:ring-theme/25"), onClick: () => !disabled && setIsOpen(!isOpen), onMouseEnter: () => setIsHover(true), onMouseLeave: () => setIsHover(false), children: [_jsx(Input, { ref: inputRef, type: "text", value: inputValue, onChange: (_, e) => handleInputChange(e), placeholder: finalPlaceholder, disabled: disabled, readOnly: mode === ModeType.Range, className: "min-w-0 flex-1", inputClassName: cn("h-8 min-w-0 flex-1 rounded-none border-0 bg-transparent px-0 py-0 outline-none", "ring-0 shadow-none focus:ring-0 focus-visible:ring-0", "text-sm text-foreground placeholder:text-muted-foreground", disabled && "cursor-not-allowed", mode === ModeType.Range &&
                                 !disabled &&
-                                "cursor-pointer caret-transparent") }), showClearIcon ? (_jsx(Button, { variant: "text", type: "button", onClick: handleClear, title: locale.clear, "aria-label": locale.clear, className: cn("ml-2 flex items-center justify-center", "w-5 h-5 rounded-full", "bg-muted hover:bg-muted/80", "text-foreground transition-colors", "cursor-pointer"), children: _jsx(X, { size: 12 }) })) : (_jsx(CalendarIcon, { size: 16, className: "ml-2 text-muted-foreground" }))] }), _jsx(Popup, { open: isOpen && !disabled, anchorRef: containerRef, contentRef: dropdownContentRef, positioning: positioning, keepMounted: true, onOpenChange: (nextOpen) => {
+                                "cursor-pointer caret-transparent") }), showClearIcon ? (_jsx(Button, { variant: "text", type: "button", onClick: handleClear, title: locale.clear, "aria-label": locale.clear, className: cn("ml-2 flex h-7 w-7 items-center justify-center rounded-md", "text-muted-foreground transition-colors hover:bg-foreground/8 hover:text-foreground", "cursor-pointer"), children: _jsx(X, { size: 12 }) })) : (_jsx(CalendarIcon, { size: 16, className: "ml-2 shrink-0 text-muted-foreground" }))] }), _jsx(Popup, { open: isOpen && !disabled, anchorRef: containerRef, contentRef: dropdownContentRef, positioning: positioning, keepMounted: true, onOpenChange: (nextOpen) => {
                         setIsOpen(nextOpen);
                         if (!nextOpen) {
                             rangeDraftRef.current = false;

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

@@ -16,6 +16,15 @@ const getDrawerPositionClassName = (placement) => {
     };
     return positionClassNames[placement];
 };
+const getDrawerRadiusClassName = (placement) => {
+    const radiusClassNames = {
+        top: 'rounded-b-2xl',
+        right: 'rounded-l-2xl',
+        bottom: 'rounded-t-2xl',
+        left: 'rounded-r-2xl',
+    };
+    return radiusClassNames[placement];
+};
 const getDrawerTransform = (placement, open) => {
     if (open)
         return 'translate3d(0, 0, 0)';
@@ -96,5 +105,5 @@ export function Drawer({ open = false, onClose, title, children, footer, classNa
     };
     return (_jsx(Overlay, { open: mounted, visible: visible, onClose: onClose, mask: mask, maskClosable: maskClosable, lockScroll: lockScroll, keyboard: keyboard, closable: closable, renderNode: renderNode, zIndex: zIndex, className: "tc-ui-drawer", style: {
             transition: `opacity ${DRAWER_ANIMATION_DURATION}ms ${DRAWER_ANIMATION_EASING}`,
-        }, children: _jsxs("div", { className: cn('fixed bg-background shadow-lg', 'flex flex-col', getDrawerPositionClassName(placement), placement === 'top' || placement === 'bottom' ? 'max-h-[90vh]' : 'max-w-[90vw]', className), style: drawerStyle, onClick: handleContentClick, children: [(title || closable) && (_jsxs("div", { className: "flex items-center justify-between px-6 py-4 border-border", children: [title && _jsx("div", { className: "text-lg font-semibold text-foreground", children: title }), closable && (_jsx(Button, { variant: "text", type: "button", onClick: onClose, "aria-label": t('components.modal.close'), className: cn('ml-auto p-1 rounded-md', 'text-muted-foreground hover:text-foreground', 'hover:bg-muted', 'transition-colors', 'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2'), children: _jsx(X, { size: 20 }) }))] })), _jsx("div", { className: cn('flex-1 overflow-auto px-6 py-4', contentClassName), children: children }), footer && _jsx("div", { className: "px-6 py-4 border-border", children: footer })] }) }));
+        }, children: _jsxs("div", { className: cn('fixed border border-border/70 bg-popover text-popover-foreground', 'shadow-[0_22px_70px_hsl(var(--background)/0.58),inset_0_1px_0_hsl(var(--foreground)/0.06)]', 'flex flex-col', getDrawerPositionClassName(placement), getDrawerRadiusClassName(placement), placement === 'top' || placement === 'bottom' ? 'max-h-[90vh]' : 'max-w-[90vw]', className), style: drawerStyle, onClick: handleContentClick, children: [(title || closable) && (_jsxs("div", { className: "flex items-center justify-between border-b border-border/60 px-4 py-3", children: [title && _jsx("div", { className: "text-sm font-semibold leading-5 text-foreground", children: title }), closable && (_jsx(Button, { variant: "text", type: "button", onClick: onClose, "aria-label": t('components.modal.close'), className: cn('ml-auto h-7 w-7 rounded-md p-0', 'text-muted-foreground hover:text-foreground', 'hover:bg-foreground/8', 'transition-colors', 'focus:outline-none focus:ring-2 focus:ring-ring/40 focus:ring-offset-0'), children: _jsx(X, { size: 16 }) }))] })), _jsx("div", { className: cn('flex-1 overflow-auto px-4 py-4', contentClassName), children: children }), footer && _jsx("div", { className: "border-t border-border/60 px-4 py-3", children: footer })] }) }));
 }

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from '../../lib/utils';
-import { Fragment, useCallback, useRef, useState } from 'react';
+import { cloneElement, Fragment, isValidElement, useCallback, useRef, useState } from 'react';
 import { Button } from '../Button';
 import { Popup } from '../Popup';
 import { getDefaultDropdownPosition, } from '../hooks/useDropdownPositioning';
@@ -29,21 +29,61 @@ export function Dropdown({ items, children, className, placement = 'bottom-end',
     const handleToggle = useCallback(() => {
         setIsOpen((prev) => !prev);
     }, []);
+    const handleTriggerKeyDown = useCallback((event) => {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            handleToggle();
+        }
+        if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            setIsOpen(true);
+        }
+        if (event.key === 'Escape') {
+            setIsOpen(false);
+        }
+    }, [handleToggle]);
     const handleItemClick = useCallback((item) => {
         if (!isDropdownRenderItem(item)) {
             item.onClick?.();
         }
         setIsOpen(false);
     }, []);
-    return (_jsxs(_Fragment, { children: [_jsx("div", { ref: triggerRef, className: cn('tc-ui-dropdown relative inline-block', className), children: _jsx("div", { onClick: handleToggle, children: children }) }), _jsx(Popup, { open: isOpen, anchorRef: triggerRef, placement: placement, onOpenChange: setIsOpen, container: getPopupContainer?.(), strategy: getDropdownPosition, className: cn('min-w-24 overflow-hidden p-1'), children: items.map((item, index) => {
+    const triggerProps = {
+        role: 'button',
+        tabIndex: 0,
+        'aria-haspopup': 'menu',
+        'aria-expanded': isOpen,
+        className: 'outline-none focus-visible:ring-2 focus-visible:ring-ring/40 focus-visible:ring-offset-0',
+    };
+    const trigger = isValidElement(children)
+        ? cloneElement(children, {
+            ...triggerProps,
+            onClick: (event) => {
+                ;
+                children.props.onClick?.(event);
+                if (!event.defaultPrevented) {
+                    handleToggle();
+                }
+            },
+            onKeyDown: (event) => {
+                ;
+                children.props.onKeyDown?.(event);
+                if (!event.defaultPrevented) {
+                    handleTriggerKeyDown(event);
+                }
+            },
+            className: cn(children.props.className, triggerProps.className),
+        })
+        : (_jsx("span", { ...triggerProps, onClick: handleToggle, onKeyDown: handleTriggerKeyDown, children: children }));
+    return (_jsxs(_Fragment, { children: [_jsx("div", { ref: triggerRef, className: cn('tc-ui-dropdown relative inline-block', className), children: trigger }), _jsx(Popup, { open: isOpen, anchorRef: triggerRef, placement: placement, onOpenChange: setIsOpen, container: getPopupContainer?.(), strategy: getDropdownPosition, className: cn('min-w-24 overflow-hidden border-border/70 bg-popover p-1 shadow-[0_22px_70px_hsl(var(--background)/0.58),inset_0_1px_0_hsl(var(--foreground)/0.06)]'), children: items.map((item, index) => {
                     const onClick = () => handleItemClick(item);
                     const close = () => setIsOpen(false);
                     const key = isDropdownRenderItem(item) ? index : item.key;
                     if (isDropdownRenderItem(item)) {
                         return _jsx(Fragment, { children: item.render(item, { onClick, close }) }, key);
                     }
-                    return (_jsx(Button, { type: "button", variant: "text", state: item.danger ? 'danger' : undefined, onClick: onClick, className: cn('flex h-10 w-full items-center justify-start gap-2 rounded-md px-3 text-left text-sm transition-colors', item.danger
+                    return (_jsx(Button, { type: "button", variant: "text", state: item.danger ? 'danger' : undefined, onClick: onClick, className: cn('flex h-9 w-full items-center justify-start gap-2 rounded-md px-3 text-left text-sm transition-colors', item.danger
                             ? 'text-destructive hover:bg-destructive/10'
-                            : 'text-popover-foreground hover:bg-muted'), children: _jsxs(_Fragment, { children: [item.icon && _jsx("span", { className: "flex-shrink-0", children: item.icon }), _jsx("span", { children: item.label })] }) }, key));
+                            : 'text-popover-foreground hover:bg-foreground/8'), children: _jsxs(_Fragment, { children: [item.icon && _jsx("span", { className: "flex-shrink-0 text-muted-foreground [&>svg]:h-4 [&>svg]:w-4", children: item.icon }), _jsx("span", { children: item.label })] }) }, key));
                 }) })] }));
 }

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

@@ -101,13 +101,15 @@ function PreviewCore({ images, initialIndex, onClose }) {
     }, [rotation, scale, flipX, flipY, position]);
     if (!hasImages)
         return null;
-    const content = (_jsxs("div", { className: "tc-ui-image-preview fixed inset-0 z-[1100] bg-black/40 text-white", onClick: onClose, children: [_jsx(Button, { variant: "text", type: "button", onClick: onClose, className: "absolute right-6 top-6 p-2 rounded-full bg-black/70 hover:bg-black/80 transition-colors z-10", "aria-label": t('components.imagePreview.closePreview'), children: _jsx(X, { size: 20 }) }), images.length > 1 && (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "text", type: "button", onClick: (e) => {
+    const floatingIconButtonClassName = 'z-10 rounded-full border border-border/60 bg-popover text-popover-foreground shadow-[var(--shadow-floating)] transition-colors duration-200 hover:bg-muted/80 active:bg-muted focus-visible:ring-theme/30';
+    const toolbarButtonClassName = 'flex items-center gap-2 rounded-md px-3 py-2 text-sm text-popover-foreground transition-colors duration-200 hover:bg-foreground/8 active:bg-foreground/12 focus-visible:ring-theme/30';
+    const content = (_jsxs("div", { className: "tc-ui-image-preview fixed inset-0 z-[1100] bg-background/80 text-foreground", onClick: onClose, children: [_jsx(Button, { variant: "text", type: "button", onClick: onClose, className: `absolute right-6 top-6 p-2 ${floatingIconButtonClassName}`, "aria-label": t('components.imagePreview.closePreview'), children: _jsx(X, { size: 20 }) }), images.length > 1 && (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "text", type: "button", onClick: (e) => {
                             e.stopPropagation();
                             toPrev();
-                        }, className: "absolute left-4 top-1/2 -translate-y-1/2 p-3 rounded-full bg-black/70 hover:bg-black/80 transition-colors z-10", "aria-label": t('components.imagePreview.previousImage'), children: _jsx(ArrowLeft, { size: 20 }) }), _jsx(Button, { variant: "text", type: "button", onClick: (e) => {
+                        }, className: `absolute left-4 top-1/2 -translate-y-1/2 p-3 ${floatingIconButtonClassName}`, "aria-label": t('components.imagePreview.previousImage'), children: _jsx(ArrowLeft, { size: 20 }) }), _jsx(Button, { variant: "text", type: "button", onClick: (e) => {
                             e.stopPropagation();
                             toNext();
-                        }, className: "absolute right-4 top-1/2 -translate-y-1/2 p-3 rounded-full bg-black/70 hover:bg-black/80 transition-colors z-10", "aria-label": t('components.imagePreview.nextImage'), children: _jsx(ArrowRight, { size: 20 }) })] })), _jsx("div", { className: "absolute inset-0 flex items-center justify-center overflow-hidden", onClick: (e) => e.stopPropagation(), onWheel: (e) => {
+                        }, className: `absolute right-4 top-1/2 -translate-y-1/2 p-3 ${floatingIconButtonClassName}`, "aria-label": t('components.imagePreview.nextImage'), children: _jsx(ArrowRight, { size: 20 }) })] })), _jsx("div", { className: "absolute inset-0 flex items-center justify-center overflow-hidden", onClick: (e) => e.stopPropagation(), onWheel: (e) => {
                     e.preventDefault();
                     if (e.deltaY < 0) {
                         zoomIn();
@@ -115,13 +117,13 @@ function PreviewCore({ images, initialIndex, onClose }) {
                     else {
                         zoomOut();
                     }
-                }, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp, style: { cursor: isDragging ? 'grabbing' : scale > 1 ? 'grab' : 'default' }, children: _jsx("div", { className: "relative max-h-[85vh] max-w-[90vw]", children: _jsx("img", { ref: imgRef, src: currentImage, alt: "", draggable: false, className: " select-none max-h-[85vh] max-w-[90vw] absolute left-1/2 top-1/2 origin-center" }) }) }), _jsxs("div", { className: "absolute bottom-6 left-1/2 -translate-x-1/2 flex items-center gap-2 bg-black/70 backdrop-blur px-3 py-2 rounded-lg", children: [_jsx(Button, { variant: "text", type: "button", onClick: (e) => {
+                }, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp, style: { cursor: isDragging ? 'grabbing' : scale > 1 ? 'grab' : 'default' }, children: _jsx("div", { className: "relative max-h-[85vh] max-w-[90vw]", children: _jsx("img", { ref: imgRef, src: currentImage, alt: "", draggable: false, className: " select-none max-h-[85vh] max-w-[90vw] absolute left-1/2 top-1/2 origin-center" }) }) }), _jsxs("div", { className: "absolute bottom-6 left-1/2 flex -translate-x-1/2 items-center gap-2 rounded-xl border border-border/60 bg-popover px-3 py-2 text-popover-foreground shadow-[var(--shadow-floating)]", children: [_jsx(Button, { variant: "text", type: "button", onClick: (e) => {
                             e.stopPropagation();
                             zoomOut();
-                        }, className: "flex items-center gap-1 px-3 py-2 rounded-md hover:bg-white/15 text-sm", "aria-label": t('components.imagePreview.zoomOut'), children: _jsx(ZoomOut, { size: 16 }) }), _jsx(Button, { variant: "text", type: "button", onClick: (e) => {
+                        }, className: toolbarButtonClassName, "aria-label": t('components.imagePreview.zoomOut'), children: _jsx(ZoomOut, { size: 16 }) }), _jsx(Button, { variant: "text", type: "button", onClick: (e) => {
                             e.stopPropagation();
                             zoomIn();
-                        }, className: "flex items-center gap-1 px-3 py-2 rounded-md hover:bg-white/15 text-sm", "aria-label": t('components.imagePreview.zoomIn'), children: _jsx(ZoomIn, { size: 16 }) }), _jsx(Button, { variant: "text", type: "button", onClick: (e) => {
+                        }, className: toolbarButtonClassName, "aria-label": t('components.imagePreview.zoomIn'), children: _jsx(ZoomIn, { size: 16 }) }), _jsx(Button, { variant: "text", type: "button", onClick: (e) => {
                             e.stopPropagation();
                             if (!imgRef.current)
                                 return;
@@ -143,22 +145,22 @@ function PreviewCore({ images, initialIndex, onClose }) {
                                 setScale(lastScaleBeforeNatural.current);
                                 lastScaleBeforeNatural.current = null;
                             }
-                        }, className: "flex items-center gap-2 px-3 py-2 rounded-md hover:bg-white/15 text-sm", "aria-label": "1:1", children: "1:1" }), _jsx(Button, { variant: "text", type: "button", onClick: (e) => {
+                        }, className: toolbarButtonClassName, "aria-label": "1:1", children: "1:1" }), _jsx(Button, { variant: "text", type: "button", onClick: (e) => {
                             e.stopPropagation();
                             reset();
-                        }, className: "flex items-center gap-2 px-3 py-2 rounded-md hover:bg-white/15 text-sm", "aria-label": t('components.imagePreview.reset'), children: _jsx(RefreshCw, { size: 16 }) }), _jsx(Button, { variant: "text", type: "button", onClick: (e) => {
+                        }, className: toolbarButtonClassName, "aria-label": t('components.imagePreview.reset'), children: _jsx(RefreshCw, { size: 16 }) }), _jsx(Button, { variant: "text", type: "button", onClick: (e) => {
                             e.stopPropagation();
                             rotateLeft();
-                        }, className: "flex items-center gap-2 px-3 py-2 rounded-md hover:bg-white/15 text-sm", "aria-label": t('components.imagePreview.rotateLeft'), children: _jsx(RotateCcw, { size: 16 }) }), _jsx(Button, { variant: "text", type: "button", onClick: (e) => {
+                        }, className: toolbarButtonClassName, "aria-label": t('components.imagePreview.rotateLeft'), children: _jsx(RotateCcw, { size: 16 }) }), _jsx(Button, { variant: "text", type: "button", onClick: (e) => {
                             e.stopPropagation();
                             rotateRight();
-                        }, className: "flex items-center gap-2 px-3 py-2 rounded-md hover:bg-white/15 text-sm", "aria-label": t('components.imagePreview.rotateRight'), children: _jsx(RotateCw, { size: 16 }) }), _jsx(Button, { variant: "text", type: "button", onClick: (e) => {
+                        }, className: toolbarButtonClassName, "aria-label": t('components.imagePreview.rotateRight'), children: _jsx(RotateCw, { size: 16 }) }), _jsx(Button, { variant: "text", type: "button", onClick: (e) => {
                             e.stopPropagation();
                             setFlipX((prev) => !prev);
-                        }, className: "flex items-center gap-2 px-3 py-2 rounded-md hover:bg-white/15 text-sm", "aria-label": t('components.imagePreview.flipHorizontal'), children: _jsx(FlipHorizontal, { size: 16 }) }), _jsx(Button, { variant: "text", type: "button", onClick: (e) => {
+                        }, className: toolbarButtonClassName, "aria-label": t('components.imagePreview.flipHorizontal'), children: _jsx(FlipHorizontal, { size: 16 }) }), _jsx(Button, { variant: "text", type: "button", onClick: (e) => {
                             e.stopPropagation();
                             setFlipY((prev) => !prev);
-                        }, className: "flex items-center gap-2 px-3 py-2 rounded-md hover:bg-white/15 text-sm", "aria-label": t('components.imagePreview.flipVertical'), children: _jsx(FlipVertical, { size: 16 }) })] })] }));
+                        }, className: toolbarButtonClassName, "aria-label": t('components.imagePreview.flipVertical'), children: _jsx(FlipVertical, { size: 16 }) })] })] }));
     return createPortal(content, document.body);
 }
 export function ImagePreviewController({ open, images, initialIndex = 0, onClose }) {

package/fe/packages/ui/react/components/ImagePreview/PreviewImage.js

@@ -18,7 +18,7 @@ export function PreviewImage(props) {
     }, [thumbSize]);
     if (!images?.length)
         return null;
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: `flex gap-2 ${direction === 'vertical' ? 'flex-col' : ''}`, children: images.map((src, idx) => (_jsx(Button, { variant: "text", type: "button", className: `relative aspect-square overflow-hidden rounded border border-border ${sizeClass}`, style: sizeStyle, onClick: () => {
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: `flex gap-2 ${direction === 'vertical' ? 'flex-col' : ''}`, children: images.map((src, idx) => (_jsx(Button, { variant: "text", type: "button", className: `relative aspect-square overflow-hidden rounded-lg border border-border/60 bg-card shadow-[inset_0_1px_0_hsl(var(--foreground)/0.04)] transition-colors duration-200 hover:border-border/80 active:border-theme/60 focus-visible:ring-theme/30 ${sizeClass}`, style: sizeStyle, onClick: () => {
                         setCurrentIndex(idx);
                         setOpen(true);
                     }, "aria-label": t('components.imagePreview.previewImage', { index: idx + 1 }), children: _jsx("img", { src: src, alt: "", className: "h-full w-full object-cover" }) }, src + idx))) }), _jsx(ImagePreviewController, { ...ext, images: images, initialIndex: currentIndex, open: open, onClose: () => {

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

@@ -45,7 +45,7 @@ const Input = forwardRef(({ className, inputClassName, type, value: controlledVa
         return undefined;
     }, [allowClear]);
     const showClearIcon = hasValue && clearIcon && !disabled;
-    return (_jsxs("div", { className: cn('tc-ui-input relative w-full', className), children: [_jsx("input", { type: type, ref: setRefs, ...(!isFileInput && { value }), onChange: handleChange, 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', showClearIcon && 'pr-10', addonAfter && 'pr-12', disabled ? 'cursor-not-allowed bg-muted border-border text-muted-foreground' : 'bg-background', !disabled && !hasValue && !isFocused && 'border-border', !disabled && (hasValue || isFocused) && 'border-theme', inputClassName), onFocus: (e) => {
+    return (_jsxs("div", { className: cn('tc-ui-input relative w-full', className), children: [_jsx("input", { type: type, ref: setRefs, ...(!isFileInput && { value }), onChange: handleChange, className: cn('flex h-10 w-full rounded-lg px-3 py-0 text-sm', 'border transition-colors duration-200', 'placeholder:text-muted-foreground', 'focus:outline-none', showClearIcon && 'pr-10', addonAfter && 'pr-12', disabled ? 'cursor-not-allowed bg-muted border-border text-muted-foreground' : 'bg-background', !disabled && !isFocused && 'border-border', !disabled && isFocused && 'border-theme ring-2 ring-theme/25', inputClassName), onFocus: (e) => {
                     if (!disabled) {
                         setIsFocused(true);
                         props.onFocus?.(e);
@@ -55,7 +55,7 @@ const Input = forwardRef(({ className, inputClassName, type, value: controlledVa
                         setIsFocused(false);
                         props.onBlur?.(e);
                     }
-                }, disabled: disabled, ...props }), showClearIcon && (_jsx("button", { type: "button", onClick: handleClear, className: cn('absolute right-3 top-1/2 -translate-y-1/2'), children: clearIcon })), addonAfter && _jsx("div", { className: "absolute right-2 top-1/2 -translate-y-1/2", children: addonAfter })] }));
+                }, disabled: disabled, ...props }), showClearIcon && (_jsx("button", { type: "button", onClick: handleClear, "aria-label": "Clear input", title: "Clear input", className: cn('absolute right-3 top-1/2 -translate-y-1/2'), children: clearIcon })), addonAfter && _jsx("div", { className: "absolute right-2 top-1/2 -translate-y-1/2", children: addonAfter })] }));
 });
 Input.displayName = 'Input';
 export { Input };

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

@@ -105,7 +105,7 @@ const InputNumber = forwardRef(({ className, inputClassName, value: controlledVa
             return undefined;
         }
         if (typeof allowClear === 'boolean') {
-            return (_jsx("span", { className: cn('h-5 w-5 rounded-full', 'bg-muted text-foreground', 'flex items-center justify-center', 'transition-colors hover:bg-muted/80'), children: _jsx(X, { size: 12 }) }));
+            return (_jsx("span", { className: cn('h-6 w-6 rounded-md', 'text-muted-foreground', 'flex items-center justify-center', 'transition-colors hover:bg-foreground/8 hover:text-foreground'), children: _jsx(X, { size: 12 }) }));
         }
         return allowClear.clearIcon;
     }, [allowClear]);
@@ -138,7 +138,7 @@ const InputNumber = forwardRef(({ className, inputClassName, value: controlledVa
         emitChange(undefined, syntheticEvent, true);
         inputRef.current?.focus();
     }, [createSyntheticChangeEvent, emitChange]);
-    return (_jsxs("div", { className: cn('tc-ui-input-number relative w-full', className), children: [_jsx("input", { ref: setRefs, type: "text", value: displayValue, onChange: handleChange, inputMode: inputMode, 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', showClearIcon && !allowStep && !addonAfter && 'pr-10', hasRightAccessories && 'pr-24', allowStep && addonAfter && 'pr-28', disabled ? 'cursor-not-allowed bg-muted border-border text-muted-foreground' : 'bg-background', !disabled && !hasValue && !isFocused && 'border-border', !disabled && (hasValue || isFocused) && 'border-theme', inputClassName), onFocus: handleFocus, onBlur: handleBlur, disabled: disabled, ...props }), hasRightAccessories && (_jsxs("div", { className: "absolute right-2 top-1/2 flex -translate-y-1/2 items-center gap-1", children: [showClearIcon && (_jsx("button", { type: "button", onMouseDown: (e) => e.preventDefault(), onClick: handleClear, children: clearIcon })), addonAfter && _jsx("div", { children: addonAfter }), allowStep && (_jsxs("div", { className: "flex flex-col overflow-hidden rounded-md border border-border", children: [_jsx("button", { type: "button", onMouseDown: (e) => e.preventDefault(), onClick: () => handleStep('up'), disabled: !canStep('up'), className: cn('flex h-4 w-4 items-center justify-center bg-background text-foreground transition-colors', 'border-b border-border', 'disabled:cursor-not-allowed disabled:text-muted-foreground', !disabled && canStep('up') && 'hover:bg-muted'), children: _jsx(ChevronUp, { size: 12 }) }), _jsx("button", { type: "button", onMouseDown: (e) => e.preventDefault(), onClick: () => handleStep('down'), disabled: !canStep('down'), className: cn('flex h-4 w-4 items-center justify-center bg-background text-foreground transition-colors', 'disabled:cursor-not-allowed disabled:text-muted-foreground', !disabled && canStep('down') && 'hover:bg-muted'), children: _jsx(ChevronDown, { size: 12 }) })] }))] }))] }));
+    return (_jsxs("div", { className: cn('tc-ui-input-number relative w-full', className), children: [_jsx("input", { ref: setRefs, type: "text", value: displayValue, onChange: handleChange, inputMode: inputMode, className: cn('flex h-10 w-full rounded-lg px-3 py-0 text-sm', 'border transition-colors duration-200', 'placeholder:text-muted-foreground', 'focus:outline-none', showClearIcon && !allowStep && !addonAfter && 'pr-10', allowStep && !showClearIcon && !addonAfter && 'pr-12', allowStep && showClearIcon && !addonAfter && 'pr-20', addonAfter && !allowStep && 'pr-16', allowStep && addonAfter && 'pr-28', disabled ? 'cursor-not-allowed bg-muted border-border text-muted-foreground' : 'bg-background', !disabled && !isFocused && 'border-border', !disabled && isFocused && 'border-theme ring-2 ring-theme/25', inputClassName), onFocus: handleFocus, onBlur: handleBlur, disabled: disabled, ...props }), hasRightAccessories && (_jsxs("div", { className: "absolute right-1.5 top-1/2 flex -translate-y-1/2 items-center gap-1", children: [showClearIcon && (_jsx("button", { type: "button", onMouseDown: (e) => e.preventDefault(), onClick: handleClear, "aria-label": "Clear number", title: "Clear number", className: "flex h-7 w-7 items-center justify-center rounded-md transition-colors hover:bg-foreground/8", children: clearIcon })), addonAfter && _jsx("div", { className: "flex h-7 items-center text-muted-foreground", children: addonAfter }), allowStep && (_jsxs("div", { className: "flex h-8 w-6 flex-col overflow-hidden rounded-md border border-border/60 bg-muted/30 text-muted-foreground", children: [_jsx("button", { type: "button", onMouseDown: (e) => e.preventDefault(), onClick: () => handleStep('up'), disabled: !canStep('up'), "aria-label": "Increase value", title: "Increase value", className: cn('flex h-4 w-full items-center justify-center transition-colors', 'border-b border-border/50', 'disabled:cursor-not-allowed disabled:text-muted-foreground/45', !disabled && canStep('up') && 'hover:bg-foreground/8 hover:text-foreground'), children: _jsx(ChevronUp, { size: 12 }) }), _jsx("button", { type: "button", onMouseDown: (e) => e.preventDefault(), onClick: () => handleStep('down'), disabled: !canStep('down'), "aria-label": "Decrease value", title: "Decrease value", className: cn('flex h-4 w-full items-center justify-center transition-colors', 'disabled:cursor-not-allowed disabled:text-muted-foreground/45', !disabled && canStep('down') && 'hover:bg-foreground/8 hover:text-foreground'), children: _jsx(ChevronDown, { size: 12 }) })] }))] }))] }));
 });
 InputNumber.displayName = 'InputNumber';
 export { InputNumber };

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

@@ -1,9 +1,25 @@
 import type { ReactNode } from 'react';
 export type LoadingProps = {
+    /**
+     * 加载图标尺寸
+     * @default 'md'
+     */
     size?: 'sm' | 'md' | 'lg';
+    /**
+     * 加载文案
+     */
     text?: ReactNode;
     className?: string;
 };
+export type LoadingIndicatorProps = {
+    /**
+     * 仅图标尺寸，适合被 Button 等组件复用
+     * @default 'md'
+     */
+    size?: 'sm' | 'md' | 'lg';
+    className?: string;
+};
+export declare function LoadingIndicator({ size, className }: LoadingIndicatorProps): import("react/jsx-runtime").JSX.Element;
 declare const Loading: import("react").ForwardRefExoticComponent<LoadingProps & import("react").RefAttributes<HTMLDivElement>>;
 export { Loading };
 //# sourceMappingURL=Loading.d.ts.map

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

@@ -2,12 +2,20 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from '../../lib/utils';
 import { forwardRef } from 'react';
 const sizeStyles = {
-    sm: 'h-4 w-4 border-2',
-    md: 'h-8 w-8 border-2',
-    lg: 'h-12 w-12 border-[3px]',
+    sm: 'h-4 w-4',
+    md: 'h-6 w-6',
+    lg: 'h-8 w-8',
 };
+const textStyles = {
+    sm: 'text-xs',
+    md: 'text-xs',
+    lg: 'text-sm',
+};
+export function LoadingIndicator({ size = 'md', className }) {
+    return (_jsxs("svg", { className: cn('animate-spin text-theme', sizeStyles[size], className), xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "aria-hidden": "true", children: [_jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), _jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })] }));
+}
 const Loading = forwardRef(({ size = 'md', text, className }, ref) => {
-    return (_jsxs("div", { ref: ref, className: cn('tc-ui-loading flex flex-col items-center justify-center gap-2', className), children: [_jsx("div", { className: cn('animate-spin rounded-full border-muted border-t-theme', sizeStyles[size]) }), text && _jsx("span", { className: "text-sm text-muted-foreground", children: text })] }));
+    return (_jsxs("div", { ref: ref, className: cn('tc-ui-loading inline-flex flex-col items-center justify-center gap-2 text-muted-foreground', className), children: [_jsx(LoadingIndicator, { size: size }), text && (_jsx("span", { className: cn('font-medium leading-none tracking-normal text-muted-foreground', textStyles[size]), children: text }))] }));
 });
 Loading.displayName = 'Loading';
 export { Loading };

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

@@ -29,6 +29,13 @@ export const CollapseToggle = forwardRef(({ className }, ref) => {
         }
         return true;
     };
+    const toggleCollapsed = () => setCollapsed(!collapsed);
+    const handleKeyDown = (event) => {
+        if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            toggleCollapsed();
+        }
+    };
     useImperativeHandle(ref, () => ({
         collapse: () => setCollapsed(true),
         expand: () => setCollapsed(false),
@@ -36,14 +43,14 @@ export const CollapseToggle = forwardRef(({ className }, ref) => {
     if (!shouldShowCollapseToggle()) {
         return null;
     }
-    return (_jsx("div", { role: "button", onClick: () => setCollapsed(!collapsed), className: cn("mx-1 mb-1 flex h-9 cursor-pointer items-center justify-center rounded-lg", "text-muted-foreground transition-all", "hover:bg-muted/60 hover:text-foreground", className), children: collapsed ? (_jsx(ChevronRight, { className: "h-4 w-4" })) : (_jsx(ChevronLeft, { className: "h-4 w-4" })) }));
+    return (_jsx("button", { type: "button", "aria-label": collapsed ? "Expand menu" : "Collapse menu", "aria-expanded": !collapsed, onClick: toggleCollapsed, onKeyDown: handleKeyDown, className: cn("mx-1 mb-1 flex h-9 cursor-pointer items-center justify-center rounded-lg", "text-muted-foreground transition-all", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40 focus-visible:ring-offset-0", "hover:bg-foreground/8 hover:text-foreground", className), children: collapsed ? (_jsx(ChevronRight, { className: "h-4 w-4" })) : (_jsx(ChevronLeft, { className: "h-4 w-4" })) }));
 });
 CollapseToggle.displayName = "CollapseToggle";
 function MenuInner({ children, items, className, mode, }) {
     const collapsed = useMenuStore((s) => s.collapsed);
     const collapsedWidth = useMenuStore((s) => s.collapsedWidth);
     const content = items ? renderItems(items) : children;
-    return (_jsxs("nav", { role: "menu", className: cn("tc-ui-menu relative overflow-hidden rounded-xl bg-background shadow-sm", mode === "left" && "flex flex-col p-1", mode === "top" && "flex flex-row items-center p-[3px]", className), style: mode === "left" && collapsed ? { width: collapsedWidth } : undefined, children: [mode === "left" && _jsx(CollapseToggle, {}), _jsx(CollapsedContext.Provider, { value: mode === "left" && collapsed, children: _jsx("div", { className: cn(mode === "left" && "flex flex-col gap-1", mode === "top" && "flex flex-row items-center gap-1"), children: content }) })] }));
+    return (_jsxs("nav", { role: "menu", className: cn("tc-ui-menu relative overflow-hidden rounded-xl border border-border/60 bg-card shadow-none", "shadow-[inset_0_1px_0_hsl(var(--foreground)/0.04)]", mode === "left" && "flex flex-col p-1", mode === "top" && "flex flex-row items-center p-[3px]", className), style: mode === "left" && collapsed ? { width: collapsedWidth } : undefined, children: [mode === "left" && _jsx(CollapseToggle, {}), _jsx(CollapsedContext.Provider, { value: mode === "left" && collapsed, children: _jsx("div", { className: cn(mode === "left" && "flex flex-col gap-1", mode === "top" && "flex flex-row items-center gap-1"), children: content }) })] }));
 }
 export const Menu = ({ mode = "left", expandTrigger = "click", expandMode = "accordion", selectedKey: controlledSelectedKey, defaultSelectedKey, onSelect, items, children, className, collapsed: controlledCollapsed, defaultCollapsed, onCollapse, collapsedWidth = 64, collapsedLabelTooltip = true, }) => {
     const storeRef = useRef(null);

package/fe/packages/ui/react/components/Menu/MenuItem.js

@@ -25,9 +25,9 @@ export function MenuItem({ eventKey, icon, disabled, danger, onClick, children,
                     collapsed &&
                     "h-10 w-full justify-center gap-0 px-0 py-2", mode === "left" &&
                     !collapsed &&
-                    "min-h-10 w-full gap-3 px-3 py-2.5 text-left", isSelected && "bg-theme text-theme-foreground shadow-sm", !isSelected &&
+                    "min-h-10 w-full gap-3 px-3 py-2.5 text-left", isSelected && "bg-theme/12 text-foreground", !isSelected &&
                     !danger &&
-                    "text-foreground hover:bg-gray-200 dark:hover:bg-gray-700", danger && !isSelected && "text-destructive hover:bg-destructive/10", disabled && "cursor-not-allowed opacity-50", className), style: collapsed ? style : { width, minWidth, maxWidth, ...style }, children: [icon && (_jsx("span", { className: cn("flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-md transition-colors", isSelected
-                            ? "bg-theme-foreground/15"
-                            : "text-muted-foreground group-hover:text-foreground"), children: icon })), !collapsed && (_jsx("span", { className: "min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap", children: children })), collapsed && !icon && collapsedLabelTooltip && (_jsx("span", { className: "absolute left-0 right-0 top-0 flex h-full items-center justify-center text-[10px]", children: getFirstChar(children) }))] }), _jsx(Popup, { open: showTooltip, anchorRef: triggerRef, placement: "right-start", offset: 8, onOpenChange: setShowTooltip, className: "border-0 bg-transparent p-0 shadow-none", keepMounted: true, children: _jsx("div", { className: "whitespace-nowrap rounded-lg bg-gray-900 px-3 py-1.5 text-xs text-white shadow-sm", children: children }) })] }));
+                    "text-foreground hover:bg-foreground/8", danger && !isSelected && "text-destructive hover:bg-destructive/10", disabled && "cursor-not-allowed opacity-50", className), style: collapsed ? style : { width, minWidth, maxWidth, ...style }, children: [icon && (_jsx("span", { className: cn("flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-md transition-colors", "[&>svg]:h-4 [&>svg]:w-4", isSelected
+                            ? "bg-foreground/8 text-foreground"
+                            : "text-muted-foreground group-hover:text-foreground"), children: icon })), !collapsed && (_jsx("span", { className: "min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap", children: children })), collapsed && !icon && collapsedLabelTooltip && (_jsx("span", { className: "absolute left-0 right-0 top-0 flex h-full items-center justify-center text-[10px]", children: getFirstChar(children) }))] }), _jsx(Popup, { open: showTooltip, anchorRef: triggerRef, placement: "right-start", offset: 8, onOpenChange: setShowTooltip, className: "border-0 bg-transparent p-0 shadow-none", keepMounted: true, children: _jsx("div", { className: "whitespace-nowrap rounded-lg border border-border/60 bg-popover px-3 py-1.5 text-xs text-popover-foreground shadow-[0_12px_30px_hsl(var(--background)/0.45)]", children: children }) })] }));
 }

package/fe/packages/ui/react/components/Menu/SubMenu.js

@@ -69,9 +69,9 @@ function SubMenuItem({ triggerRef, onClick, icon, label, disabled, collapsed, de
             collapsed &&
             "h-10 w-full justify-center gap-0 px-0 py-2", mode === "left" &&
             !collapsed &&
-            "min-h-10 w-full gap-3 px-3 py-2.5 text-left", descendantSelected && "bg-theme/10 text-theme shadow-sm", !descendantSelected &&
-            "text-foreground hover:bg-gray-200 dark:hover:bg-gray-700", disabled && "cursor-not-allowed opacity-50"), children: [icon && (_jsx("span", { className: cn("flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-md transition-colors", descendantSelected
-                    ? "bg-theme/10 text-theme"
+            "min-h-10 w-full gap-3 px-3 py-2.5 text-left", descendantSelected && "bg-theme/12 text-foreground", !descendantSelected &&
+            "text-foreground hover:bg-foreground/8", disabled && "cursor-not-allowed opacity-50"), children: [icon && (_jsx("span", { className: cn("flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-md transition-colors", "[&>svg]:h-4 [&>svg]:w-4", descendantSelected
+                    ? "bg-foreground/8 text-foreground"
                     : "text-muted-foreground group-hover:text-foreground"), children: icon })), !collapsed && _jsx("span", { className: "min-w-0 flex-1 truncate", children: label }), collapsed && !icon && collapsedLabelTooltip && (_jsx("span", { className: "absolute left-0 right-0 top-0 flex h-full items-center justify-center text-[10px]", children: getFirstChar(label) })), !collapsed && showArrow && (_jsx(ArrowIcon, { className: "h-4 w-4 flex-shrink-0 text-muted-foreground transition-transform group-hover:text-foreground" })), _jsx("div", { ref: setPopupContentRef })] }));
 }
 /**
@@ -154,7 +154,7 @@ export function SubMenu({ eventKey, label, icon, disabled, popup: forcePopup, pa
     const hoverBridgePlacement = mode === "top" && level > 0 ? "horizontal" : "auto";
     const subMenuContent = (_jsx("div", { className: cn(
         // "min-w-[180px]",
-        "rounded-xl border border-border/80 bg-popover p-2 text-popover-foreground", "shadow-[0_20px_56px_hsl(var(--background)/0.7),0_8px_18px_hsl(var(--foreground)/0.16),inset_0_1px_0_hsl(var(--foreground)/0.06)]"), children: _jsx(SubMenuLevelContext.Provider, { value: level + 1, children: _jsx("div", { className: "flex flex-col gap-1", children: children }) }) }));
+        "rounded-xl border border-border/70 bg-popover p-2 text-popover-foreground", "shadow-[0_22px_70px_hsl(var(--background)/0.58),inset_0_1px_0_hsl(var(--foreground)/0.06)]"), children: _jsx(SubMenuLevelContext.Provider, { value: level + 1, children: _jsx("div", { className: "flex flex-col gap-1", children: children }) }) }));
     /**
      *
      * submenu  生成的节点是  1 menuItem

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

@@ -8,19 +8,19 @@ import { DEFAULT_DURATION } from './data';
 const typeConfig = {
     success: {
         icon: CheckCircle2,
-        color: 'text-green-600',
+        color: 'text-chart-4',
     },
     error: {
         icon: XCircle,
-        color: 'text-red-600',
+        color: 'text-destructive',
     },
     warning: {
         icon: AlertCircle,
-        color: 'text-yellow-600',
+        color: 'text-chart-5',
     },
     info: {
         icon: Info,
-        color: 'text-blue-600',
+        color: 'text-chart-3',
     },
 };
 export function Message({ type = 'info', content, children, duration = DEFAULT_DURATION, onClose, closable = true, className, }) {
@@ -54,5 +54,5 @@ export function Message({ type = 'info', content, children, duration = DEFAULT_D
     }, [duration]);
     if (!visible)
         return null;
-    return (_jsxs("div", { ref: messageRef, className: cn('tc-ui-message flex items-start gap-3 px-4 py-3 rounded-lg shadow-lg', 'bg-background border border-border', 'min-w-[320px] max-w-[480px]', 'transition-all duration-200', 'pointer-events-auto', visible ? 'opacity-100 translate-y-0' : 'opacity-0 -translate-y-2', className), children: [_jsx(Icon, { size: 20, className: cn('flex-shrink-0 mt-0.5', iconColor) }), _jsx("div", { className: "flex-1 text-sm text-foreground", children: displayContent }), closable && (_jsx(Button, { variant: "text", type: "button", onClick: handleClose, "aria-label": t('components.message.close'), className: cn('flex-shrink-0 p-0.5 rounded-md', 'text-muted-foreground hover:text-foreground', 'hover:bg-muted', 'transition-colors', 'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2'), children: _jsx(X, { size: 16 }) }))] }));
+    return (_jsxs("div", { ref: messageRef, className: cn('tc-ui-message flex items-start gap-3 rounded-xl px-4 py-3', 'border border-border/60 bg-popover text-popover-foreground shadow-[var(--shadow-floating)]', 'min-w-[320px] max-w-[480px]', 'transition-[opacity,transform] duration-200', 'pointer-events-auto', visible ? 'opacity-100 translate-y-0' : 'opacity-0 -translate-y-2', className), children: [_jsx(Icon, { size: 20, className: cn('flex-shrink-0 mt-0.5', iconColor) }), _jsx("div", { className: "flex-1 text-sm text-popover-foreground", children: displayContent }), closable && (_jsx(Button, { variant: "text", type: "button", onClick: handleClose, "aria-label": t('components.message.close'), className: cn('flex-shrink-0 p-0.5 rounded-md', 'text-muted-foreground hover:text-popover-foreground', 'hover:bg-foreground/8 active:bg-foreground/12', 'transition-colors', 'focus-visible:ring-theme/30'), children: _jsx(X, { size: 16 }) }))] }));
 }

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

@@ -10,5 +10,5 @@ export function Modal({ open = false, onClose, title, children, footer, classNam
     const handleContentClick = (e) => {
         e.stopPropagation();
     };
-    return (_jsx(Overlay, { open: open, onClose: onClose, mask: mask, maskClosable: maskClosable, lockScroll: lockScroll, keyboard: keyboard, closable: closable, renderNode: renderNode, zIndex: zIndex, className: cn('tc-ui-modal flex items-center justify-center'), children: _jsxs("div", { className: cn('relative bg-background rounded-lg shadow-lg', 'flex flex-col max-h-[90vh]', 'transition-all duration-200', open ? 'scale-100 opacity-100' : 'scale-95 opacity-0', centered ? 'my-auto' : 'mt-[10vh]', className), style: { width: typeof width === 'number' ? `${width}px` : width }, onClick: handleContentClick, children: [(title || closable) && (_jsxs("div", { className: "flex items-center justify-between px-6 py-4 border-border", children: [title && _jsx("div", { className: "text-lg font-semibold text-foreground", children: title }), closable && (_jsx(Button, { variant: "text", type: "button", onClick: onClose, "aria-label": t('components.modal.close'), className: cn('ml-auto p-1 rounded-md', 'text-muted-foreground hover:text-foreground', 'hover:bg-muted', 'transition-colors', 'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2'), children: _jsx(X, { size: 20 }) }))] })), _jsx("div", { className: cn('flex-1 overflow-auto px-6 py-4', contentClassName), children: children }), footer && _jsx("div", { className: "px-6 py-4 border-border", children: footer })] }) }));
+    return (_jsx(Overlay, { open: open, onClose: onClose, mask: mask, maskClosable: maskClosable, lockScroll: lockScroll, keyboard: keyboard, closable: closable, renderNode: renderNode, zIndex: zIndex, className: cn('tc-ui-modal flex items-center justify-center'), children: _jsxs("div", { className: cn('relative rounded-2xl border border-border/70 bg-popover text-popover-foreground', 'shadow-[0_22px_70px_hsl(var(--background)/0.58),inset_0_1px_0_hsl(var(--foreground)/0.06)]', 'flex flex-col max-h-[90vh]', 'max-w-[calc(100vw-2rem)]', 'transition-all duration-200', open ? 'scale-100 opacity-100' : 'scale-95 opacity-0', centered ? 'my-auto' : 'mt-[10vh]', className), style: { width: typeof width === 'number' ? `${width}px` : width }, onClick: handleContentClick, children: [(title || closable) && (_jsxs("div", { className: "flex items-center justify-between border-b border-border/60 px-4 py-3", children: [title && _jsx("div", { className: "text-sm font-semibold leading-5 text-foreground", children: title }), closable && (_jsx(Button, { variant: "text", type: "button", onClick: onClose, "aria-label": t('components.modal.close'), className: cn('ml-auto h-7 w-7 rounded-md p-0', 'text-muted-foreground hover:text-foreground', 'hover:bg-foreground/8', 'transition-colors', 'focus:outline-none focus:ring-2 focus:ring-ring/40 focus:ring-offset-0'), children: _jsx(X, { size: 16 }) }))] })), _jsx("div", { className: cn('flex-1 overflow-auto px-4 py-4', contentClassName), children: children }), footer && _jsx("div", { className: "border-t border-border/60 px-4 py-3", children: footer })] }) }));
 }

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

@@ -3,10 +3,10 @@ import { cn } from '../../lib/utils';
 import { X } from 'lucide-react';
 import { forwardRef, useCallback, useEffect, useState } from 'react';
 const typeStyles = {
-    info: 'border-blue-500 bg-blue-50 dark:bg-blue-950',
-    success: 'border-green-500 bg-green-50 dark:bg-green-950',
-    warning: 'border-yellow-500 bg-yellow-50 dark:bg-yellow-950',
-    error: 'border-red-500 bg-red-50 dark:bg-red-950',
+    info: 'text-chart-3',
+    success: 'text-chart-4',
+    warning: 'text-chart-5',
+    error: 'text-destructive',
 };
 const Notification = forwardRef(({ type = 'info', title, message, duration, closable = true, onClose, className }, ref) => {
     const [visible, setVisible] = useState(true);
@@ -23,7 +23,7 @@ const Notification = forwardRef(({ type = 'info', title, message, duration, clos
     }, [duration, handleClose]);
     if (!visible)
         return null;
-    return (_jsxs("div", { ref: ref, role: "alert", className: cn('tc-ui-notification flex items-start gap-3 rounded-lg border p-4 shadow-lg', typeStyles[type], className), children: [_jsxs("div", { className: "flex-1 min-w-0", children: [title && _jsx("div", { className: "font-medium text-sm", children: title }), message && _jsx("div", { className: "text-sm text-muted-foreground mt-1", children: message })] }), closable && (_jsx("button", { type: "button", onClick: handleClose, className: "shrink-0 rounded p-0.5 hover:bg-black/5 dark:hover:bg-white/10 transition-colors", children: _jsx(X, { className: "h-4 w-4" }) }))] }));
+    return (_jsxs("div", { ref: ref, role: "alert", className: cn('tc-ui-notification flex items-start gap-3 rounded-xl border border-border/60 bg-popover p-4 text-popover-foreground shadow-[var(--shadow-floating)]', className), children: [_jsx("span", { className: cn('mt-1 h-2 w-2 shrink-0 rounded-full bg-current', typeStyles[type]), "aria-hidden": "true" }), _jsxs("div", { className: "flex-1 min-w-0", children: [title && _jsx("div", { className: "font-medium text-sm text-popover-foreground", children: title }), message && _jsx("div", { className: "text-sm text-muted-foreground mt-1", children: message })] }), closable && (_jsx("button", { type: "button", onClick: handleClose, className: "shrink-0 rounded-md p-0.5 text-muted-foreground transition-colors hover:bg-foreground/8 hover:text-popover-foreground active:bg-foreground/12 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-theme/30", "aria-label": "Close notification", children: _jsx(X, { className: "h-4 w-4" }) }))] }));
 });
 Notification.displayName = 'Notification';
 export { Notification };

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

@@ -5,6 +5,9 @@ import { Button } from '../Button';
 import { Select } from '../Select';
 export function Pagination({ current, pageSize, total, onChange, onPageSizeChange, pageSizeOptions = [10, 20, 50, 100], className, }) {
     const totalPages = Math.ceil(total / pageSize);
+    const releaseFocus = (event) => {
+        event.currentTarget.blur();
+    };
     // 生成页码数组
     const getPageNumbers = () => {
         const pages = [];
@@ -46,17 +49,20 @@ export function Pagination({ current, pageSize, total, onChange, onPageSizeChang
         }
         return pages;
     };
-    const handlePrevious = () => {
+    const handlePrevious = (event) => {
+        releaseFocus(event);
         if (current > 1) {
             onChange(current - 1);
         }
     };
-    const handleNext = () => {
+    const handleNext = (event) => {
+        releaseFocus(event);
         if (current < totalPages) {
             onChange(current + 1);
         }
     };
-    const handlePageClick = (page) => {
+    const handlePageClick = (page, event) => {
+        releaseFocus(event);
         if (typeof page === 'number' && page !== current) {
             onChange(page);
         }
@@ -72,16 +78,18 @@ export function Pagination({ current, pageSize, total, onChange, onPageSizeChang
     };
     if (totalPages === 0)
         return null;
-    return (_jsxs("div", { className: cn('tc-ui-pagination flex items-center gap-4', className), children: [_jsxs("div", { className: "text-sm text-muted-foreground", children: ["Total ", total] }), _jsxs("div", { className: "flex-1 flex items-center justify-center gap-2", children: [_jsx(Button, { onClick: handlePrevious, disabled: current === 1, size: "sm", className: cn('inline-flex items-center justify-center', 'h-8 px-3 rounded-md', 'text-sm font-medium', 'border border-border', 'transition-colors', current === 1 ? 'cursor-not-allowed opacity-50 bg-muted' : 'hover:bg-muted bg-background cursor-pointer'), children: _jsx(ChevronLeft, { className: "h-4 w-4" }) }), getPageNumbers().map((page, index) => {
+    return (_jsxs("div", { className: cn('tc-ui-pagination flex items-center gap-4', className), children: [_jsxs("div", { className: "text-sm text-muted-foreground", children: ["Total ", total] }), _jsxs("div", { className: "flex flex-1 items-center justify-center gap-1.5", children: [_jsx(Button, { onClick: handlePrevious, disabled: current === 1, size: "sm", className: cn('inline-flex items-center justify-center', 'h-8 w-8 rounded-md px-0', 'text-sm font-medium', 'border border-border/70 bg-background', 'transition-colors duration-150', 'focus-visible:ring-2 focus-visible:ring-ring/35 focus-visible:ring-offset-0', current === 1
+                            ? 'cursor-not-allowed text-muted-foreground/45'
+                            : 'cursor-pointer text-muted-foreground hover:bg-foreground/8 hover:text-foreground'), children: _jsx(ChevronLeft, { className: "h-4 w-4" }) }), getPageNumbers().map((page, index) => {
                         if (page === '...') {
                             return (_jsx("span", { className: "px-2 text-muted-foreground", children: "..." }, `ellipsis-${index}`));
                         }
-                        return (_jsx(Button, { onClick: () => handlePageClick(page), size: "sm", className: cn('inline-flex items-center justify-center', 'h-8 min-w-[32px] px-3 rounded-md', 'text-sm font-medium', 'border transition-colors', page === current
-                                ? 'bg-theme text-theme-foreground border-theme cursor-default'
-                                : 'bg-background border-border hover:bg-muted cursor-pointer'), children: page }, page));
-                    }), _jsx(Button, { onClick: handleNext, size: "sm", disabled: current === totalPages, className: cn('inline-flex items-center justify-center', 'h-8 px-3 rounded-md', 'text-sm font-medium', 'border border-border', 'transition-colors', current === totalPages
-                            ? 'cursor-not-allowed opacity-50 bg-muted'
-                            : 'hover:bg-muted bg-background cursor-pointer'), children: _jsx(ChevronRight, { className: "h-4 w-4" }) })] }), onPageSizeChange && (_jsx("div", { className: "flex items-center gap-2", children: _jsx(Select, { value: pageSize, onChange: handlePageSizeChange, options: pageSizeOptions.map((size) => ({
+                        return (_jsx(Button, { onClick: (event) => handlePageClick(page, event), size: "sm", "aria-current": page === current ? 'page' : undefined, className: cn('inline-flex items-center justify-center', 'h-8 min-w-8 rounded-md px-2.5', 'text-sm font-medium', 'border transition-colors duration-150', 'focus-visible:ring-2 focus-visible:ring-ring/35 focus-visible:ring-offset-0', page === current
+                                ? 'border-theme/45 bg-theme/12 text-foreground cursor-default'
+                                : 'bg-background border-border/70 text-muted-foreground hover:bg-foreground/8 hover:text-foreground cursor-pointer'), children: page }, page));
+                    }), _jsx(Button, { onClick: handleNext, size: "sm", disabled: current === totalPages, className: cn('inline-flex items-center justify-center', 'h-8 w-8 rounded-md px-0', 'text-sm font-medium', 'border border-border/70 bg-background', 'transition-colors duration-150', 'focus-visible:ring-2 focus-visible:ring-ring/35 focus-visible:ring-offset-0', current === totalPages
+                            ? 'cursor-not-allowed text-muted-foreground/45'
+                            : 'cursor-pointer text-muted-foreground hover:bg-foreground/8 hover:text-foreground'), children: _jsx(ChevronRight, { className: "h-4 w-4" }) })] }), onPageSizeChange && (_jsx("div", { className: "flex items-center gap-2", children: _jsx(Select, { value: pageSize, onChange: handlePageSizeChange, options: pageSizeOptions.map((size) => ({
                         label: `${size}`,
                         value: size,
                     })), className: "w-20 [&>div]:bg-muted [&>div]:border-border [&>div]:shadow-sm [&>div]:py-2 [&>div]:px-3 [&>div]:h-8", clearable: false, searchable: false }) }))] }));

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

@@ -3,7 +3,7 @@ import { cn } from "../../lib/utils";
 import { useEffect, useMemo, useRef } from "react";
 import { createPortal } from "react-dom";
 import { getDefaultDropdownPosition, useDropdownPositioning, } from "../hooks/useDropdownPositioning";
-const DEFAULT_POPUP_CLASSNAME = cn("fixed z-[9999]", "bg-background rounded-lg shadow-lg border border-gray-200", "animate-in fade-in-0 zoom-in-95");
+const DEFAULT_POPUP_CLASSNAME = cn("fixed z-[1000]", "rounded-xl border border-border/60 bg-popover text-popover-foreground", "shadow-[var(--shadow-floating)]", "animate-in fade-in-0 zoom-in-95");
 const canUseDocument = () => typeof document !== "undefined";
 export function Popup({ open, anchorRef, children, className, style, placement = "bottom-end", offset = 8, keepMounted = false, closeOnClickOutside = true, closeOnEscape = true, matchAnchorWidth = false, position, positioning, strategy = getDefaultDropdownPosition, contentRef, container, positionMode = "fixed", hoverBridge = 0, hoverBridgePlacement = "auto", onOpenChange, }) {
     // 默认自己保存弹窗 DOM；如果外部传了 contentRef，就用外部的。

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

@@ -2,7 +2,7 @@ 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 { forwardRef, useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
 import { Button } from '../Button';
 import { Input } from '../Input';
 import { Popup } from '../Popup';
@@ -14,11 +14,14 @@ const Select = forwardRef(({ options, value: controlledValue, defaultValue, plac
     const [internalValue, setInternalValue] = useState(defaultValue);
     const [isHover, setIsHover] = useState(false);
     const [searchTerm, setSearchTerm] = useState('');
+    const [activeOptionIndex, setActiveOptionIndex] = useState(0);
     const rootRef = useRef(null);
     const selectRef = useRef(null);
     const dropdownRef = useRef(null);
     const inputRef = useRef(null);
     const popupContainerRef = useRef(null);
+    const reactId = useId();
+    const listboxId = `${reactId}-listbox`;
     const isParentPopupContainer = getPopupContainer === 'parent';
     popupContainerRef.current = isParentPopupContainer ? (rootRef.current?.parentElement ?? null) : null;
     useEffect(() => {
@@ -59,6 +62,15 @@ const Select = forwardRef(({ options, value: controlledValue, defaultValue, plac
             return searchText.toLowerCase().includes(lower);
         });
     }, [options, searchTerm, searchable]);
+    const activeOption = filteredOptions[activeOptionIndex];
+    const activeOptionId = activeOption ? `${reactId}-option-${activeOptionIndex}` : undefined;
+    useEffect(() => {
+        setActiveOptionIndex((current) => {
+            if (filteredOptions.length === 0)
+                return 0;
+            return Math.min(current, filteredOptions.length - 1);
+        });
+    }, [filteredOptions.length]);
     const positioning = useDropdownPositioning({
         open: isOpen,
         anchorRef: selectRef,
@@ -92,9 +104,21 @@ const Select = forwardRef(({ options, value: controlledValue, defaultValue, plac
             if (next && searchable) {
                 setSearchTerm('');
             }
+            if (next) {
+                setActiveOptionIndex(Math.max(options.findIndex((opt) => opt.value === value), 0));
+            }
             return next;
         });
-    }, [disabled, searchable]);
+    }, [disabled, options, searchable, value]);
+    const openSelect = useCallback(() => {
+        if (disabled)
+            return;
+        if (searchable) {
+            setSearchTerm('');
+        }
+        setActiveOptionIndex(Math.max(options.findIndex((opt) => opt.value === value), 0));
+        setIsOpen(true);
+    }, [disabled, options, searchable, value]);
     const handleSelect = useCallback((optionValue) => {
         if (!isControlled) {
             setInternalValue(optionValue);
@@ -112,11 +136,84 @@ const Select = forwardRef(({ options, value: controlledValue, defaultValue, plac
     }, [disabled, onChange]);
     const handleSearchChange = useCallback((event) => {
         setSearchTerm(event.target.value);
+        setActiveOptionIndex(0);
     }, []);
+    const moveActiveOption = useCallback((direction) => {
+        if (filteredOptions.length === 0)
+            return;
+        setActiveOptionIndex((current) => {
+            const nextIndex = current + direction;
+            if (nextIndex < 0)
+                return filteredOptions.length - 1;
+            if (nextIndex >= filteredOptions.length)
+                return 0;
+            return nextIndex;
+        });
+    }, [filteredOptions.length]);
+    const selectActiveOption = useCallback(() => {
+        const option = filteredOptions[activeOptionIndex];
+        if (option) {
+            handleSelect(option.value);
+        }
+    }, [activeOptionIndex, filteredOptions, handleSelect]);
+    const handleKeyDown = useCallback((event) => {
+        if (disabled)
+            return;
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                if (!isOpen) {
+                    openSelect();
+                }
+                else {
+                    moveActiveOption(1);
+                }
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                if (!isOpen) {
+                    openSelect();
+                }
+                else {
+                    moveActiveOption(-1);
+                }
+                break;
+            case 'Enter':
+                event.preventDefault();
+                if (!isOpen) {
+                    openSelect();
+                }
+                else {
+                    selectActiveOption();
+                }
+                break;
+            case ' ':
+                if (event.currentTarget !== inputRef.current) {
+                    event.preventDefault();
+                    if (!isOpen) {
+                        openSelect();
+                    }
+                }
+                break;
+            case 'Escape':
+                if (isOpen) {
+                    event.preventDefault();
+                    setIsOpen(false);
+                    selectRef.current?.focus();
+                }
+                break;
+            default:
+                break;
+        }
+    }, [disabled, isOpen, moveActiveOption, openSelect, selectActiveOption]);
     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) => {
+    return (_jsxs("div", { ref: rootRef, className: cn('tc-ui-select relative w-full', className), children: [_jsxs("div", { ref: setRefs, onClick: handleToggle, onKeyDown: handleKeyDown, onMouseEnter: () => setIsHover(true), onMouseLeave: () => setIsHover(false), role: "combobox", "aria-expanded": isOpen, "aria-haspopup": "listbox", "aria-controls": listboxId, "aria-activedescendant": isOpen ? activeOptionId : undefined, tabIndex: disabled ? -1 : 0, className: cn('flex h-10 w-full items-center justify-between rounded-lg px-3 py-0 text-sm', 'border transition-colors duration-200', 'focus:outline-none focus-visible:border-theme focus-visible:ring-2 focus-visible:ring-theme/25', disabled ? 'cursor-not-allowed bg-muted border-border' : 'cursor-pointer bg-background', !disabled && isOpen && 'border-theme ring-2 ring-theme/25', !disabled && !isOpen && 'border-border'), children: [searchable && isOpen ? (_jsx(Input, { ref: inputRef, value: searchTerm, onChange: (_, e) => handleSearchChange(e), onClick: (e) => e.stopPropagation(), onKeyDown: (e) => {
+                            e.stopPropagation();
+                            handleKeyDown(e);
+                        }, 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 ring-0', 'placeholder:text-muted-foreground', disabled && 'text-muted-foreground cursor-not-allowed'), role: "searchbox", "aria-controls": listboxId, "aria-activedescendant": isOpen ? activeOptionId : undefined, 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('w-full rounded-xl border border-border/60 bg-popover text-popover-foreground', 'shadow-[var(--shadow-floating)]', 'max-h-60 overflow-auto'), children: _jsx("div", { className: cn('w-full', !isOpen && 'hidden'), children: _jsx("div", { id: listboxId, role: "listbox", className: "p-1", children: filteredOptions.length > 0 ? (filteredOptions.map((option, index) => {
                             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));
+                            const isActive = index === activeOptionIndex;
+                            return (_jsx("div", { id: `${reactId}-option-${index}`, role: "option", "aria-selected": isSelected, onClick: () => handleSelect(option.value), onMouseEnter: () => setActiveOptionIndex(index), className: cn('px-4 py-2 text-sm cursor-pointer transition-colors rounded-md', 'hover:bg-foreground/8', (isSelected || isActive) && 'bg-theme/12 text-foreground'), children: option.label }, option.value));
                         })) : (_jsx("div", { className: "px-4 py-2 text-sm text-muted-foreground text-center", children: t('components.select.empty') })) }) }) })] }));
 });
 Select.displayName = 'Select';

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

@@ -3,7 +3,7 @@ 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({
+    const { isFocused, setIsFocused, setInternalValue, setRefs, value, isControlledRef, currentLength, } = useInputController({
         controlledValue,
         defaultValue,
         ref,
@@ -19,9 +19,9 @@ const Textarea = forwardRef(({ className, textareaClassName, value: controlledVa
         }
         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
+    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 min-h-24 w-full rounded-lg px-3 py-2 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) => {
+                    : "bg-background", !disabled && !isFocused && "border-border", !disabled && isFocused && "border-theme ring-2 ring-theme/25", textareaClassName), onFocus: (e) => {
                     if (!disabled) {
                         setIsFocused(true);
                         props.onFocus?.(e);

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

@@ -72,7 +72,7 @@ export function Tooltip({ content, children, placement = "right", visible, class
         }
     }, [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: {
+                createPortal(_jsx("div", { ref: tooltipRef, className: cn("fixed z-[1000] px-3 py-2", "rounded-xl border border-border/50 bg-popover text-xs text-popover-foreground", "shadow-[var(--shadow-floating)]", "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/Upload/ImageUpload.js

@@ -68,8 +68,8 @@ export function ImageUpload({ accept = '.jpg,.png', maxCount = 1, value, onChang
             internalUrlsRef.current = [];
         };
     }, []);
-    return (_jsxs("div", { className: "tc-ui-image-upload flex flex-wrap gap-3", children: [urls.map((url, index) => (_jsxs("div", { className: "relative w-24 h-24 rounded-lg overflow-hidden border border-gray-200 group cursor-pointer", children: [_jsx("img", { src: url, alt: "", className: "w-full h-full object-cover" }), _jsx("div", { className: "absolute inset-0 bg-black/0 group-hover:bg-black/40 transition-colors flex items-center justify-center", children: _jsx(Button, { variant: "text", type: "button", onClick: (e) => {
+    return (_jsxs("div", { className: "tc-ui-image-upload flex flex-wrap gap-3", children: [urls.map((url, index) => (_jsxs("div", { className: "relative h-24 w-24 overflow-hidden rounded-lg border border-border/60 bg-card group cursor-pointer shadow-[inset_0_1px_0_hsl(var(--foreground)/0.04)] transition-colors duration-200 hover:border-border/80 active:border-theme/60", children: [_jsx("img", { src: url, alt: "", className: "w-full h-full object-cover" }), _jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-background/0 transition-colors duration-200 group-hover:bg-background/55", children: _jsx(Button, { variant: "text", type: "button", onClick: (e) => {
                                 e.stopPropagation();
                                 handleRemove(index);
-                            }, className: "opacity-0 group-hover:opacity-100 transition-opacity p-1.5 rounded-full bg-red-500 hover:bg-red-600 text-white", "aria-label": t('components.upload.deleteImage'), title: t('components.upload.deleteImage'), children: _jsx(X, { size: 16 }) }) })] }, index))), urls.length < maxCount && (_jsx(FileUpload, { inputRef: inputRef, accept: mAccept, multiple: maxCount > 1, onChange: handleFileChange, labelClassName: "w-24 h-24 p-0 border-0 cursor-pointer", selectLabel: _jsxs("div", { className: "w-full h-full rounded-[8px] bg-[#F5F5F5] border border-gray-200 flex flex-col items-center justify-center gap-1 hover:bg-gray-50 transition-colors", children: [_jsx(Camera, { className: "text-gray-500", size: 24 }), _jsx("span", { className: "text-xs text-gray-500", children: t('components.upload.upload') })] }) }))] }));
+                            }, className: "rounded-full bg-destructive p-1.5 text-destructive-foreground opacity-0 shadow-[var(--shadow-accent)] transition-[background-color,opacity] duration-200 hover:bg-destructive/90 active:bg-destructive/80 focus-visible:ring-destructive group-hover:opacity-100", "aria-label": t('components.upload.deleteImage'), title: t('components.upload.deleteImage'), children: _jsx(X, { size: 16 }) }) })] }, index))), urls.length < maxCount && (_jsx(FileUpload, { inputRef: inputRef, accept: mAccept, multiple: maxCount > 1, onChange: handleFileChange, labelClassName: "h-24 w-24 cursor-pointer rounded-lg border-0 p-0 focus-within:ring-2 focus-within:ring-theme/25", selectLabel: _jsxs("div", { className: "flex h-full w-full flex-col items-center justify-center gap-1 rounded-lg border border-dashed border-border/60 bg-card text-muted-foreground transition-colors duration-200 hover:border-border/80 hover:bg-muted/50 hover:text-foreground active:bg-muted/70", children: [_jsx(Camera, { size: 24 }), _jsx("span", { className: "text-xs", children: t('components.upload.upload') })] }) }))] }));
 }

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

@@ -2,5 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button } from '../Button';
 import { Input } from '../Input';
 export function FileUpload({ inputRef, accept = '*', multiple, onChange, selectLabel, labelClassName, showClear, onClear, clearLabel, }) {
-    return (_jsxs("div", { className: "tc-ui-file-upload flex items-center gap-3", children: [_jsxs("label", { className: labelClassName ?? 'flex items-center gap-2 px-4 py-2 border rounded-lg cursor-pointer bg-background', children: [_jsx(Input, { ref: inputRef, type: "file", accept: accept, multiple: multiple, className: "hidden", onChange: (_, e) => onChange?.(e) }), selectLabel] }), showClear && onClear && (_jsx(Button, { size: "sm", variant: "link", onClick: onClear, children: clearLabel }))] }));
+    return (_jsxs("div", { className: "tc-ui-file-upload flex items-center gap-3", children: [_jsxs("label", { className: labelClassName ??
+                    'flex h-10 items-center gap-2 rounded-lg border border-border/60 bg-card px-4 py-2 text-sm text-card-foreground cursor-pointer transition-colors duration-200 hover:border-border/80 hover:bg-muted/50 active:bg-muted/70 focus-within:border-theme focus-within:ring-2 focus-within:ring-theme/25', children: [_jsx(Input, { ref: inputRef, type: "file", accept: accept, multiple: multiple, className: "hidden", onChange: (_, e) => onChange?.(e) }), selectLabel] }), showClear && onClear && (_jsx(Button, { size: "sm", variant: "link", onClick: onClear, children: clearLabel }))] }));
 }

package/fe/packages/ui/react/index.css

@@ -76,14 +76,14 @@
 
 /* CSS 变量定义 */
 :root {
-  --background: 0 0% 100%;
+  --background: 0 0% 99%;
   --foreground: 240 10% 3.9%;
-  --card: 0 0% 100%;
+  --card: 0 0% 99%;
   --card-foreground: 240 10% 3.9%;
-  --popover: 0 0% 100%;
+  --popover: 0 0% 99%;
   --popover-foreground: 240 10% 3.9%;
   --primary: 240 5.9% 10%;
-  --primary-foreground: 0 0% 98%;
+  --primary-foreground: 0 0% 97%;
   --secondary: 240 4.8% 95.9%;
   --secondary-foreground: 240 5.9% 10%;
   --muted: 240 4.8% 95.9%;
@@ -101,10 +101,13 @@
   --chart-3: 197 37% 24%;
   --chart-4: 43 74% 66%;
   --chart-5: 27 87% 67%;
+  --shadow-panel: 0 18px 60px hsl(240 10% 12% / 0.14);
+  --shadow-floating: 0 18px 48px hsl(240 10% 12% / 0.18), 0 1px 0 hsl(0 0% 100% / 0.82) inset;
+  --shadow-accent: 0 10px 28px hsl(240 5.9% 10% / 0.16);
 
   /* 主题色 - 默认亮色中性主题 */
-  --theme-primary: 0 0% 0%;
-  --theme-primary-foreground: 0 0% 100%;
+  --theme-primary: 240 5.9% 10%;
+  --theme-primary-foreground: 0 0% 97%;
   --theme-bg: 210 20% 98%;
   --theme-text: 222 47% 11%;
 
@@ -114,13 +117,13 @@
   --table-head-text: 217 19% 27%;
   --table-cell-text: 180 4% 16%;
   --table-action-bg: 220 13% 91%;
-  --table-action-text: 0 0% 0%;
+  --table-action-text: 240 5.9% 10%;
 
   /* 面包屑颜色 - 默认亮色中性主题 */
   --breadcrumb-text: 220 10% 46%;
   --breadcrumb-border: 0 0% 88%;
-  --breadcrumb-active-text: 0 0% 100%;
-  --breadcrumb-active-bg: 0 0% 0%;
+  --breadcrumb-active-text: 0 0% 97%;
+  --breadcrumb-active-bg: 240 5.9% 10%;
 }
 
 /* 绿色主题 */
@@ -169,6 +172,9 @@
   --chart-3: 30 80% 55%;
   --chart-4: 280 65% 60%;
   --chart-5: 340 75% 55%;
+  --shadow-panel: 0 18px 60px hsl(240 10% 2% / 0.38);
+  --shadow-floating: 0 20px 64px hsl(240 10% 2% / 0.5), 0 1px 0 hsl(0 0% 100% / 0.05) inset;
+  --shadow-accent: 0 10px 28px hsl(0 0% 95% / 0.16);
 
   /* 主题色调整 */
   --theme-primary: 0 0% 92%;
@@ -191,6 +197,57 @@
   --breadcrumb-active-bg: 0 0% 92%;
 }
 
+.dark[data-ui-style='shuttle'],
+.dark [data-ui-style='shuttle'] {
+  --background: 240 8% 3%;
+  --foreground: 0 0% 93%;
+
+  --card: 150 5% 7%;
+  --card-foreground: 0 0% 92%;
+
+  --popover: 240 4% 14%;
+  --popover-foreground: 0 0% 94%;
+
+  --primary: 35 100% 55%;
+  --primary-foreground: 240 8% 6%;
+  --secondary: 240 4% 18%;
+  --secondary-foreground: 0 0% 94%;
+  --muted: 240 4% 18%;
+  --muted-foreground: 240 3% 58%;
+  --accent: 247 88% 70%;
+  --accent-foreground: 240 8% 6%;
+  --destructive: 0 72% 58%;
+  --destructive-foreground: 0 0% 94%;
+  --border: 240 4% 18%;
+  --input: 240 4% 16%;
+  --ring: 35 100% 58%;
+  --chart-1: 35 100% 55%;
+  --chart-2: 247 88% 70%;
+  --chart-3: 207 88% 72%;
+  --chart-4: 145 58% 52%;
+  --chart-5: 42 96% 58%;
+  --shadow-panel: 0 18px 60px hsl(240 10% 2% / 0.45);
+  --shadow-floating: 0 22px 70px hsl(240 10% 2% / 0.58), 0 1px 0 hsl(0 0% 100% / 0.06) inset;
+  --shadow-accent: 0 10px 28px hsl(35 100% 55% / 0.25);
+
+  --theme-primary: 35 100% 55%;
+  --theme-primary-foreground: 240 8% 6%;
+  --theme-bg: 240 5% 12%;
+  --theme-text: 0 0% 94%;
+
+  --table-header-bg: 240 5% 12%;
+  --table-header-text: 240 3% 58%;
+  --table-head-text: 0 0% 82%;
+  --table-cell-text: 0 0% 90%;
+  --table-action-bg: 240 4% 18%;
+  --table-action-text: 0 0% 94%;
+
+  --breadcrumb-text: 240 3% 62%;
+  --breadcrumb-border: 240 4% 18%;
+  --breadcrumb-active-text: 240 8% 6%;
+  --breadcrumb-active-bg: 35 100% 55%;
+}
+
 .dark[data-theme='green'],
 .dark [data-theme='green'] {
   --theme-primary: 142 68% 46%;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@_tc/template-core",
-  "version": "0.1.15",
+  "version": "0.1.16",
   "description": "A full-stack TypeScript admin framework powered by Koa, React, and Vite - monorepo root",
   "types": "./types/index.d.ts",
   "exports": {