@_tc/template-core 0.0.1-bate.1 → 0.0.1-bate.10

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

@@ -0,0 +1,166 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowLeft, ArrowRight, FlipHorizontal, FlipVertical, RefreshCw, RotateCcw, RotateCw, X, ZoomIn, ZoomOut, } from 'lucide-react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+function PreviewCore({ images, initialIndex, onClose }) {
+    const [index, setIndex] = useState(initialIndex);
+    const [scale, _setScale] = useState(1);
+    const scaleRef = useRef(scale);
+    const [rotation, setRotation] = useState(0);
+    const [flipX, setFlipX] = useState(false);
+    const [flipY, setFlipY] = useState(false);
+    const imgRef = useRef(null);
+    const lastScaleBeforeNatural = useRef(null);
+    const [position, setPosition] = useState({ x: 0, y: 0 });
+    const [isDragging, setIsDragging] = useState(false);
+    const dragStart = useRef({ x: 0, y: 0 });
+    const positionRef = useRef({ x: 0, y: 0 });
+    const setScale = useCallback((newValue) => {
+        let newState = newValue;
+        if (typeof newValue === 'function') {
+            newState = newValue(scaleRef.current || 1);
+        }
+        scaleRef.current = newState;
+        _setScale(newState);
+    }, []);
+    const hasImages = images.length > 0;
+    const currentIndex = useMemo(() => clamp(index, 0, Math.max(images.length - 1, 0)), [index, images.length]);
+    const currentImage = hasImages ? images[currentIndex] : '';
+    const reset = () => {
+        setScale(1);
+        setRotation(0);
+        setFlipX(false);
+        setFlipY(false);
+        setPosition({ x: 0, y: 0 });
+        positionRef.current = { x: 0, y: 0 };
+        lastScaleBeforeNatural.current = null;
+    };
+    const handleMouseDown = useCallback((e) => {
+        setIsDragging(true);
+        dragStart.current = { x: e.clientX - positionRef.current.x, y: e.clientY - positionRef.current.y };
+    }, []);
+    const handleMouseMove = useCallback((e) => {
+        if (!isDragging)
+            return;
+        const newX = e.clientX - dragStart.current.x;
+        const newY = e.clientY - dragStart.current.y;
+        positionRef.current = { x: newX, y: newY };
+        setPosition({ x: newX, y: newY });
+    }, [isDragging]);
+    const handleMouseUp = useCallback(() => {
+        setIsDragging(false);
+    }, []);
+    const toPrev = () => {
+        if (!hasImages)
+            return;
+        setIndex((prev) => (prev - 1 + images.length) % images.length);
+        reset();
+    };
+    const toNext = () => {
+        if (!hasImages)
+            return;
+        setIndex((prev) => (prev + 1) % images.length);
+        reset();
+    };
+    const zoomIn = () => setScale((prev) => clamp(prev + 0.2, 0.2, 5));
+    const zoomOut = () => setScale((prev) => clamp(prev - 0.2, 0.2, 5));
+    const rotateLeft = () => setRotation((prev) => prev - 90);
+    const rotateRight = () => setRotation((prev) => prev + 90);
+    useEffect(() => {
+        const handleKey = (e) => {
+            if (e.key === 'Escape') {
+                onClose();
+                return;
+            }
+            if (e.key === 'ArrowLeft') {
+                if (!hasImages)
+                    return;
+                setIndex((prev) => (prev - 1 + images.length) % images.length);
+                reset();
+                return;
+            }
+            if (e.key === 'ArrowRight') {
+                if (!hasImages)
+                    return;
+                setIndex((prev) => (prev + 1) % images.length);
+                reset();
+            }
+        };
+        document.addEventListener('keydown', handleKey);
+        return () => document.removeEventListener('keydown', handleKey);
+    }, [onClose, hasImages, images.length]);
+    useEffect(() => {
+        if (!imgRef.current)
+            return;
+        const transform = `translate(calc(-50% + ${position.x}px), calc(-50% + ${position.y}px)) rotate(${rotation}deg) scale(${flipX ? -scale : scale}, ${flipY ? -scale : scale})`;
+        imgRef.current.style.transform = transform;
+    }, [rotation, scale, flipX, flipY, position]);
+    if (!hasImages)
+        return null;
+    const content = (_jsxs("div", { className: "fixed inset-0 z-[1100] bg-black/40 text-white", onClick: onClose, children: [_jsx("button", { 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": "\u5173\u95ED\u9884\u89C8", children: _jsx(X, { size: 20 }) }), images.length > 1 && (_jsxs(_Fragment, { children: [_jsx("button", { 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": "\u4E0A\u4E00\u5F20", children: _jsx(ArrowLeft, { size: 20 }) }), _jsx("button", { 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": "\u4E0B\u4E00\u5F20", 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();
+                    }
+                    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", { 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": "\u7F29\u5C0F", children: _jsx(ZoomOut, { size: 16 }) }), _jsx("button", { 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": "\u653E\u5927", children: _jsx(ZoomIn, { size: 16 }) }), _jsx("button", { type: "button", onClick: (e) => {
+                            e.stopPropagation();
+                            if (!imgRef.current)
+                                return;
+                            const { naturalWidth, naturalHeight, clientWidth, clientHeight } = imgRef.current;
+                            // 如果 lastScaleBeforeNatural 无值
+                            //  第一次点击
+                            //  将 scaleRef 复制给 lastScaleBeforeNatural
+                            //  正常赋值
+                            // 如果 lastScaleBeforeNatural 有值
+                            //  则使用 lastScaleBeforeNatural
+                            //  再清除 lastScaleBeforeNatural
+                            if (lastScaleBeforeNatural.current === null) {
+                                const scaleToNatural = Math.max(naturalWidth / Math.max(clientWidth, 1), naturalHeight / Math.max(clientHeight, 1), 1);
+                                lastScaleBeforeNatural.current = scaleRef.current;
+                                setScale(scaleToNatural);
+                            }
+                            else {
+                                //
+                                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", { 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": "\u91CD\u7F6E", children: _jsx(RefreshCw, { size: 16 }) }), _jsx("button", { 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": "\u5DE6\u65CB\u8F6C", children: _jsx(RotateCcw, { size: 16 }) }), _jsx("button", { 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": "\u53F3\u65CB\u8F6C", children: _jsx(RotateCw, { size: 16 }) }), _jsx("button", { 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": "\u5DE6\u53F3\u955C\u50CF", children: _jsx(FlipHorizontal, { size: 16 }) }), _jsx("button", { 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": "\u4E0A\u4E0B\u955C\u50CF", children: _jsx(FlipVertical, { size: 16 }) })] })] }));
+    return createPortal(content, document.body);
+}
+export function ImagePreviewController({ open, images, initialIndex = 0, onClose }) {
+    if (!open || images.length === 0)
+        return null;
+    const key = `${images.join('|')}-${initialIndex}`;
+    return _jsx(PreviewCore, { images: images, initialIndex: initialIndex, onClose: onClose }, key);
+}

package/fe/packages/ui/react/components/ImagePreview/PreviewImage.d.ts

@@ -0,0 +1,11 @@
+import type { MOmit } from '../../types';
+import { type ImagePreviewControllerProps } from './ImagePreview';
+export type PreviewImageProps = MOmit<ImagePreviewControllerProps, 'open' | 'onClose'> & Pick<Partial<ImagePreviewControllerProps>, 'onClose'> & {
+    /**
+     * 缩略图边长，默认 80px
+     */
+    thumbSize?: number | string;
+    direction?: 'horizontal' | 'vertical';
+};
+export declare function PreviewImage(props: PreviewImageProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=PreviewImage.d.ts.map

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

@@ -0,0 +1,25 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { ImagePreviewController } from './ImagePreview';
+export function PreviewImage(props) {
+    const { onClose, images, thumbSize = 80, direction = 'horizontal', ...ext } = props;
+    const [open, setOpen] = useState(false);
+    const [currentIndex, setCurrentIndex] = useState(ext.initialIndex ?? 0);
+    const sizeClass = useMemo(() => {
+        const value = typeof thumbSize === 'number' ? `${thumbSize}px` : thumbSize;
+        return `w-[${value}] h-[${value}]`;
+    }, [thumbSize]);
+    const sizeStyle = useMemo(() => {
+        const value = typeof thumbSize === 'number' ? `${thumbSize}px` : thumbSize;
+        return { width: value, height: value };
+    }, [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", { type: "button", className: `relative aspect-square overflow-hidden rounded border border-border ${sizeClass}`, style: sizeStyle, onClick: () => {
+                        setCurrentIndex(idx);
+                        setOpen(true);
+                    }, "aria-label": `预览第${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: () => {
+                    setOpen(false);
+                    onClose?.();
+                } })] }));
+}

package/fe/packages/ui/react/components/ImagePreview/index.d.ts

@@ -0,0 +1,3 @@
+export * from './ImagePreview';
+export * from './PreviewImage';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,2 @@
+export * from './ImagePreview';
+export * from './PreviewImage';

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

@@ -0,0 +1,41 @@
+import type { ChangeEvent, InputHTMLAttributes, ReactNode } from 'react';
+export type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'defaultValue'> & {
+    value?: string;
+    /**
+     *
+     * @param v input value
+     * @param e changeEvent
+     */
+    onChange?: (v: string, e: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * 只有初始化时会使用
+     * 如果会改变请使用value
+     */
+    defaultValue?: string;
+    allowClear?: boolean | {
+        clearIcon: ReactNode;
+    };
+    /** 输入框内部右侧按钮 */
+    addonAfter?: ReactNode;
+};
+declare const Input: import("react").ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "defaultValue" | "onChange" | "value"> & {
+    value?: string;
+    /**
+     *
+     * @param v input value
+     * @param e changeEvent
+     */
+    onChange?: (v: string, e: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * 只有初始化时会使用
+     * 如果会改变请使用value
+     */
+    defaultValue?: string;
+    allowClear?: boolean | {
+        clearIcon: ReactNode;
+    };
+    /** 输入框内部右侧按钮 */
+    addonAfter?: ReactNode;
+} & import("react").RefAttributes<HTMLInputElement>>;
+export { Input };
+//# sourceMappingURL=Input.d.ts.map

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

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../lib/utils';
+import { X } from 'lucide-react';
+import { forwardRef, useCallback, useMemo } from 'react';
+import { useInputController } from '../hooks/useInputController';
+const Input = forwardRef(({ className, type, value: controlledValue, onChange, defaultValue, allowClear, disabled, addonAfter, ...props }, ref) => {
+    const { setInternalValue, setIsFocused, setRefs, controllerRef, isControlledRef, isFocused, value, hasValue, } = useInputController({
+        defaultValue,
+        controlledValue,
+        ref,
+    });
+    // 在change恒定时 不重复生成 fn
+    // isControlledRef setInternalValue 都是不会变的值
+    const handleChange = useCallback((e) => {
+        const newValue = e.target.value;
+        if (!isControlledRef.current) {
+            setInternalValue(newValue);
+        }
+        onChange?.(newValue, e);
+    }, [isControlledRef, onChange, setInternalValue]);
+    const handleClear = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        // 非受控时更新内部状态
+        if (!isControlledRef.current) {
+            setInternalValue('');
+        }
+        const syntheticEvent = {
+            target: { value: '' },
+            currentTarget: { value: '' },
+        };
+        onChange?.('', syntheticEvent);
+        controllerRef.current?.focus();
+    }, [controllerRef, isControlledRef, onChange, setInternalValue]);
+    const clearIcon = useMemo(() => {
+        if (allowClear) {
+            if (typeof allowClear === 'boolean') {
+                return (_jsx("span", { className: cn('w-5 h-5 rounded-full', 'bg-muted hover:bg-muted/80', 'text-foreground', 'transition-colors', 'flex items-center justify-center', 'focus:outline-none'), children: _jsx(X, { size: 12 }) }));
+            }
+            else {
+                return allowClear.clearIcon;
+            }
+        }
+        return undefined;
+    }, [allowClear]);
+    const showClearIcon = hasValue && clearIcon && !disabled;
+    return (_jsxs("div", { className: "relative w-full", children: [_jsx("input", { type: type, ref: setRefs, value: 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', className), onFocus: (e) => {
+                    if (!disabled) {
+                        setIsFocused(true);
+                        props.onFocus?.(e);
+                    }
+                }, onBlur: (e) => {
+                    if (!disabled) {
+                        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 })] }));
+});
+Input.displayName = 'Input';
+export { Input };

package/fe/packages/ui/react/components/Input/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Input';
+//# sourceMappingURL=index.d.ts.map

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

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

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

@@ -0,0 +1,51 @@
+import { type ReactNode } from 'react';
+type VerticalLayout = {
+    layout?: 'vertical';
+};
+type HorizontalLayout = {
+    layout?: 'horizontal';
+    /**
+     * 标签宽度
+     * @default 'auto'
+     */
+    labelWidth?: string | number;
+    /**
+     * 标签对齐方式
+     * @default 'left'
+     */
+    labelAlign?: 'left' | 'right' | 'center';
+};
+export type LabelLayout = HorizontalLayout | VerticalLayout;
+export type LabelProps = {
+    /**
+     * 标签文本
+     */
+    label: ReactNode;
+    /**
+     * 标签内容
+     */
+    children: ReactNode;
+    /**
+     * 是否必填（显示红色星号）
+     */
+    required?: boolean;
+    /**
+     * 标签的 htmlFor 属性
+     */
+    htmlFor?: string;
+    /**
+     * 容器类名
+     */
+    className?: string;
+    /**
+     * 标签类名
+     */
+    labelClassName?: string;
+    /**
+     * 内容区域类名
+     */
+    contentClassName?: string;
+} & LabelLayout;
+declare const Label: import("react").ForwardRefExoticComponent<LabelProps & import("react").RefAttributes<HTMLDivElement>>;
+export { Label };
+//# sourceMappingURL=Label.d.ts.map

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

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../lib/utils';
+import { forwardRef, useMemo } from 'react';
+// 标签对齐样式
+const labelAlignStyles = {
+    left: 'text-left',
+    right: 'text-right',
+    center: 'text-center',
+};
+const Label = forwardRef((props, ref) => {
+    const { label, children, layout = 'vertical', required = false, htmlFor, className, labelClassName, contentClassName, } = props;
+    const isVertical = layout === 'vertical';
+    // 标签样式
+    const labelStyles = cn('text-sm font-medium text-foreground', required && "before:content-['*'] before:pt-1 before:mr-0.5 before:text-destructive", labelClassName);
+    const { usedClassName, labelWidth } = useMemo(() => {
+        let usedLabelWidth;
+        let usedClassName;
+        if (props.layout === 'horizontal') {
+            const labelWidth = props.labelWidth;
+            usedLabelWidth =
+                typeof labelWidth === 'number' ? `${labelWidth}px` : labelWidth === 'auto' ? 'auto' : labelWidth ?? 'auto';
+            usedClassName = labelAlignStyles[props.labelAlign ?? 'left'];
+        }
+        return {
+            usedClassName,
+            labelWidth: usedLabelWidth,
+        };
+    }, [props]);
+    if (isVertical) {
+        return (_jsxs("div", { ref: ref, className: cn('flex flex-col gap-2', className), children: [_jsx("label", { htmlFor: htmlFor, className: labelStyles, children: label }), _jsx("div", { className: cn('w-full', contentClassName), children: children })] }));
+    }
+    return (_jsxs("div", { ref: ref, className: cn('flex items-center gap-4', className), children: [_jsx("label", { htmlFor: htmlFor, className: cn(labelStyles, usedClassName), style: { width: labelWidth, flexShrink: 0 }, children: label }), _jsx("div", { className: cn('flex-1', contentClassName), children: children })] }));
+});
+Label.displayName = 'Label';
+export { Label };

package/fe/packages/ui/react/components/Label/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Label';
+export { Label as default } from './Label';
+//# sourceMappingURL=index.d.ts.map

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

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

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

@@ -0,0 +1,20 @@
+import type { ReactNode } from 'react';
+export type MessageType = 'success' | 'error' | 'warning' | 'info';
+export type MessageProps = {
+    type?: MessageType;
+    content?: ReactNode;
+    children?: ReactNode;
+    /**
+     * 存在时间
+     * @default 3000ms
+     */
+    duration?: number;
+    onClose?: () => void;
+    /**
+     * 可手动关闭
+     */
+    closable?: boolean;
+    className?: string;
+};
+export declare function Message({ type, content, children, duration, onClose, closable, className, }: MessageProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=Message.d.ts.map

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

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../lib/utils';
+import { AlertCircle, CheckCircle2, Info, X, XCircle } from 'lucide-react';
+import { useEffect, useRef, useState } from 'react';
+import { DEFAULT_DURATION } from './data';
+const typeConfig = {
+    success: {
+        icon: CheckCircle2,
+        color: 'text-green-600',
+    },
+    error: {
+        icon: XCircle,
+        color: 'text-red-600',
+    },
+    warning: {
+        icon: AlertCircle,
+        color: 'text-yellow-600',
+    },
+    info: {
+        icon: Info,
+        color: 'text-blue-600',
+    },
+};
+export function Message({ type = 'info', content, children, duration = DEFAULT_DURATION, onClose, closable = true, className, }) {
+    const displayContent = children ?? content;
+    const [visible, setVisible] = useState(true);
+    const timerRef = useRef(null);
+    const messageRef = useRef(null);
+    const Icon = typeConfig[type].icon;
+    const iconColor = typeConfig[type].color;
+    const handleClose = () => {
+        setVisible(false);
+        // 等待动画完成后再调用 onClose
+        setTimeout(() => {
+            onClose?.();
+        }, 200);
+    };
+    // 自动关闭
+    useEffect(() => {
+        if (duration > 0) {
+            timerRef.current = setTimeout(() => {
+                handleClose();
+            }, duration);
+        }
+        return () => {
+            if (timerRef.current) {
+                clearTimeout(timerRef.current);
+            }
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [duration]);
+    if (!visible)
+        return null;
+    return (_jsxs("div", { ref: messageRef, className: cn('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", { type: "button", onClick: handleClose, "aria-label": "\u5173\u95ED", 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 }) }))] }));
+}

package/fe/packages/ui/react/components/Message/MessageManager.d.ts

@@ -0,0 +1,37 @@
+import type { ReactNode } from 'react';
+import { type MessageProps, type MessageType } from './Message';
+type MessageConfig = Omit<MessageProps, 'onClose' | 'children'> & {
+    id: string;
+    content?: ReactNode;
+    onClose?: () => void;
+};
+declare class MessageManagerClass {
+    private messages;
+    private container;
+    private offScreenContainer;
+    private root;
+    private offScreenRoot;
+    private maxCount;
+    private init;
+    private render;
+    show(config: Omit<MessageConfig, 'id'>, type?: MessageType): string;
+    close(id: string): void;
+    closeAll(): void;
+    setMaxCount(count: number): void;
+}
+export declare const messageManager: MessageManagerClass;
+type MessageFN = (content: ReactNode, config?: {
+    duration?: number;
+    onClose?: () => void;
+}) => string;
+export declare const message: {
+    success: MessageFN;
+    error: MessageFN;
+    warning: MessageFN;
+    info: MessageFN;
+    close: (id: string) => void;
+    closeAll: () => void;
+    setMaxCount: (count: number) => void;
+};
+export {};
+//# sourceMappingURL=MessageManager.d.ts.map

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

@@ -0,0 +1,90 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { createRoot } from 'react-dom/client';
+import { Message } from './Message';
+import { DEFAULT_DURATION } from './data';
+class MessageManagerClass {
+    messages = new Map();
+    container = null;
+    offScreenContainer = null;
+    root = null;
+    offScreenRoot = null;
+    maxCount = 5;
+    init() {
+        if (typeof document === 'undefined' || this.container)
+            return;
+        // 可见消息容器
+        this.container = document.createElement('div');
+        this.container.id = 'message-container';
+        this.container.className = 'fixed top-4 left-1/2 z-[10000] flex flex-col items-center gap-2 pointer-events-none';
+        this.container.style.transform = 'translateX(-50%)';
+        document.body.appendChild(this.container);
+        // 屏幕外消息容器 保留回调触发
+        this.offScreenContainer = document.createElement('div');
+        this.offScreenContainer.id = 'message-offscreen-container';
+        this.offScreenContainer.className =
+            'fixed -left-[9999px] top-0 z-[10000] flex flex-col items-center gap-2 pointer-events-none';
+        this.offScreenContainer.setAttribute('aria-hidden', 'true');
+        document.body.appendChild(this.offScreenContainer);
+        // 创建 React 根节点
+        this.root = createRoot(this.container);
+        this.offScreenRoot = createRoot(this.offScreenContainer);
+        this.render();
+    }
+    render() {
+        if (!this.root || !this.offScreenRoot)
+            return;
+        const messages = Array.from(this.messages.values());
+        const totalCount = messages.length;
+        // 可见消息：最后 maxCount 条
+        const displayMessages = totalCount > this.maxCount ? messages.slice(-this.maxCount) : messages;
+        // 屏幕外消息：除了最后 maxCount 条之外的所有消息
+        const offScreenMessages = totalCount > this.maxCount ? messages.slice(0, -this.maxCount) : [];
+        const now = Date.now();
+        // 渲染可见消息
+        this.root.render(_jsx(_Fragment, { children: displayMessages.map((message) => (_jsx(Message, { ...message, duration: message.expirationTime - now, content: message.content, onClose: () => {
+                    message.onClose?.();
+                    this.close(message.id);
+                } }, message.id))) }));
+        // 渲染屏幕外消息
+        this.offScreenRoot.render(_jsx(_Fragment, { children: offScreenMessages.map((message) => (_jsx(Message, { ...message, duration: message.expirationTime - now, content: message.content, onClose: () => {
+                    message.onClose?.();
+                    this.close(message.id);
+                } }, message.id))) }));
+    }
+    show(config, type = 'info') {
+        this.init();
+        const now = Date.now();
+        const id = `message-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+        const messageConfig = {
+            ...config,
+            expirationTime: now + (config.duration ?? DEFAULT_DURATION),
+            id,
+            type,
+        };
+        this.messages.set(id, messageConfig);
+        this.render();
+        return id;
+    }
+    close(id) {
+        this.messages.delete(id);
+        this.render();
+    }
+    closeAll() {
+        this.messages.clear();
+        this.render();
+    }
+    setMaxCount(count) {
+        this.maxCount = count;
+    }
+}
+// 单例模式
+export const messageManager = new MessageManagerClass();
+export const message = {
+    success: (content, config) => messageManager.show({ content, ...config }, 'success'),
+    error: (content, config) => messageManager.show({ content, ...config }, 'error'),
+    warning: (content, config) => messageManager.show({ content, ...config }, 'warning'),
+    info: (content, config) => messageManager.show({ content, ...config }, 'info'),
+    close: (id) => messageManager.close(id),
+    closeAll: () => messageManager.closeAll(),
+    setMaxCount: (count) => messageManager.setMaxCount(count),
+};

package/fe/packages/ui/react/components/Message/data.d.ts

@@ -0,0 +1,2 @@
+export declare const DEFAULT_DURATION = 3000;
+//# sourceMappingURL=data.d.ts.map

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

@@ -0,0 +1 @@
+export const DEFAULT_DURATION = 3000;

package/fe/packages/ui/react/components/Message/index.d.ts

@@ -0,0 +1,3 @@
+export type { MessageProps, MessageType } from './Message';
+export { message } from './MessageManager';
+//# sourceMappingURL=index.d.ts.map

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

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