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

package/fe/packages/ui/react/components/Form/SchemeForm/data.js

@@ -0,0 +1,8 @@
+import React from 'react';
+export const componentsMap = {
+    input: React.lazy(async () => ({ default: (await import('../../Input')).Input })),
+    select: React.lazy(async () => ({ default: (await import('../../Select')).Select })),
+    textarea: React.lazy(async () => ({ default: (await import('../../Textarea')).Textarea })),
+    switch: React.lazy(async () => ({ default: (await import('../../Switch')).Switch })),
+    date: React.lazy(async () => ({ default: (await import('../../Date')).DatePicker })),
+};

package/{packages → fe/packages}/ui/react/components/Form/SchemeForm/index.d.ts

@@ -9,19 +9,52 @@ import { componentsMap, type FieldProps } from './data';
 export type FormFieldType = keyof typeof componentsMap;
 type BaseField<T> = {
     [K in keyof T]: {
+        /**
+         * 字段名
+         */
         name: K | number | (K | number)[];
+        /**
+         * 标签文本
+         */
         label?: ReactNode;
+        /**
+         * 验证规则
+         */
         rules?: Rule[];
+        /**
+         * 是否必填（仅用于显示，实际验证通过 rules 配置）
+         */
         required?: boolean;
+        /**
+         * 表单项类名
+         */
         className?: string;
+        /**
+         * 标签类名
+         */
         labelClassName?: string;
+        /**
+         * 错误信息类名
+         */
         errorClassName?: string;
+        /**
+         * 是否显示错误信息
+         */
         showError?: boolean;
+        /**
+         * 自定义渲染函数
+         */
         render?: (value: T[K], onChange: (value: T[K]) => void, meta: {
             errors: string[];
             warnings: string[];
         }) => ReactNode;
+        /**
+         * field label 布局方向
+         */
         layout?: Required<LabelLayout>['layout'];
+        /**
+         * 插入到控件后边
+         */
         affterNode?: ReactNode;
     };
 }[keyof T];
@@ -33,22 +66,82 @@ type GroupField<T> = {
 type NotGroupField<T> = FieldProps & BaseField<T>;
 export type FormFieldScheme<T> = GroupField<T> | NotGroupField<T>;
 export interface SchemeFormProps<T = object> extends MOmit<FormProps<T>, 'initialValues' | 'children' | 'preserve'> {
+    /**
+     * 表单实例
+     */
     form?: FormInstance<T>;
+    /**
+     * 获取当前使用的form实例
+     */
     getForm?: (formInstance: FormInstance<T>) => void;
+    /**
+     * 表单配置方案
+     */
     schemes: FormFieldScheme<T>[];
+    /**
+     * 表单类名
+     */
     className?: string;
+    /**
+     * 提交回调
+     */
     onFinish?: (values: T) => void;
+    /**
+     * 提交失败回调
+     */
     onFinishFailed?: (errorInfo: any) => void;
+    /**
+     * 初始值
+     */
     initialValues?: T;
+    /**
+     * form 布局方向
+     *
+     * tips: horizontal 需自行实现提交按钮
+     */
     layout?: Required<LabelLayout>['layout'];
+    /**
+     * 统一配置 field layout
+     */
     fieldLayout?: Required<LabelLayout>['layout'];
+    /**
+     * - 是否显示提交和取消按钮
+     * - 或自定义按钮
+     * - tips button type submit 可直接触发提交
+     * @default true
+     */
     footerButtons?: boolean | ReactNode;
+    /**
+     * 提交按钮文本
+     * @default '提交'
+     */
     submitText?: ReactNode;
+    /**
+     * 取消按钮文本
+     * @default '取消'
+     */
     cancelText?: ReactNode;
+    /**
+     * 取消按钮回调
+     */
     onCancel?: () => void;
+    /**
+     * 按钮容器类名
+     */
     buttonClassName?: string;
+    /**
+     * 提交按钮属性
+     */
     submitButtonProps?: Omit<React.ComponentProps<typeof Button>, 'type' | 'onClick' | 'children'>;
+    /**
+     * 取消按钮属性
+     */
     cancelButtonProps?: Omit<React.ComponentProps<typeof Button>, 'onClick' | 'children'>;
+    /**
+     * 移除字段时保留值
+     *
+     * @default false
+     */
     preserve?: boolean;
 }
 export declare const SchemeForm: {

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

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../../lib/utils';
+import { Suspense, useEffect, useMemo } from 'react';
+import { Form, FormItem, useForm } from '..';
+import { Button } from '../../Button';
+import { Skeleton } from '../../Skeleton';
+import { componentsMap } from './data';
+const renderField = (scheme) => {
+    return (value, onChange, meta) => {
+        // 如果提供了自定义渲染函数，优先使用
+        if (scheme.render) {
+            return scheme.render(value, onChange, meta);
+        }
+        const { type = 'input' } = scheme;
+        const Component = componentsMap[type];
+        const { fieldProps } = scheme;
+        return (_jsxs(Suspense, { fallback: _jsx(Skeleton, { mode: "componentsloading", rows: 2 }), children: [_jsx(Component, { value: value, onChange: onChange, ...fieldProps }), scheme.affterNode] }));
+    };
+};
+export const SchemeForm = ({ form, getForm, schemes, className, onFinish, onFinishFailed, initialValues, footerButtons = true, submitText = '提交', cancelText = '取消', onCancel, buttonClassName, submitButtonProps, layout = 'vertical', fieldLayout = 'vertical', cancelButtonProps, 
+// preserve = false,
+...formProps }) => {
+    const [f] = useForm();
+    useEffect(() => {
+        getForm?.(f);
+    }, []);
+    const usedForm = form ?? f;
+    const handleCancel = () => {
+        if (onCancel) {
+            onCancel();
+        }
+        else {
+            // 如果没有提供 onCancel，默认重置表单
+            usedForm?.resetFields();
+        }
+    };
+    const { formClassName, fieldClassName, isHorizontal } = useMemo(() => {
+        return {
+            formClassName: cn(layout === 'horizontal' ? 'flex gap-4 items-start flex-wrap' : ''),
+            fieldClassName: cn('min-w-[255px]', layout === 'horizontal' ? '' : 'mb-5'),
+            isHorizontal: layout === 'horizontal',
+        };
+    }, [layout]);
+    const renderSchemes = (schemes) => {
+        return schemes.map((scheme, index) => {
+            const { type = 'input' } = scheme;
+            if (type !== 'group') {
+                const { name, label, rules, required, className: itemClassName, labelClassName, errorClassName, showError, layout: schemeFieldLayout, } = scheme;
+                const fLayout = schemeFieldLayout ?? fieldLayout;
+                const fRequired = required ??
+                    rules?.some((r) => {
+                        const rData = typeof r === 'function' ? r(usedForm) : r;
+                        return rData.required;
+                    });
+                const fiKey = (Array.isArray(name) ? `field-${index}-${name.join('_')}` : name);
+                return (_jsx(FormItem, { name: name, label: label, rules: rules, layout: fLayout, required: fRequired, className: cn(fieldClassName, itemClassName), labelClassName: labelClassName, errorClassName: errorClassName, showError: showError, children: renderField(scheme) }, fiKey));
+            }
+            else if (type === 'group') {
+                const s = scheme;
+                const fiKey = (Array.isArray(name) ? `field-group-${index}-${name.join('_')}` : name);
+                return (_jsx("div", { className: "field-group-container", ...s.fieldProps, children: renderSchemes(s.childrens) }, fiKey));
+            }
+            return null;
+        });
+    };
+    return (_jsxs(Form, { form: usedForm, onFinish: onFinish, onFinishFailed: onFinishFailed, initialValues: initialValues, className: cn(formClassName, className), ...formProps, children: [renderSchemes(schemes), footerButtons && !isHorizontal ? (typeof footerButtons === 'boolean' ? (_jsxs("div", { className: cn('flex items-center gap-4', buttonClassName), children: [_jsx(Button, { type: "button", onClick: handleCancel, ...cancelButtonProps, children: cancelText }), _jsx(Button, { type: "submit", variant: "primary", ...submitButtonProps, children: submitText })] })) : (footerButtons)) : undefined] }));
+};
+SchemeForm.displayName = 'SchemeForm';
+export default SchemeForm;

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

@@ -0,0 +1,4 @@
+export * from './Form';
+export * from './FormItem';
+export * from './useForm';
+export * from './SchemeForm';

package/fe/packages/ui/react/components/Form/useForm.js

@@ -0,0 +1 @@
+export { useForm } from 'rc-field-form';

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

@@ -1,25 +1,22 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ImagePreviewController = ImagePreviewController;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const lucide_react_1 = require("lucide-react");
-const react_1 = require("react");
-const react_dom_1 = require("react-dom");
+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] = (0, react_1.useState)(initialIndex);
-    const [scale, _setScale] = (0, react_1.useState)(1);
-    const scaleRef = (0, react_1.useRef)(scale);
-    const [rotation, setRotation] = (0, react_1.useState)(0);
-    const [flipX, setFlipX] = (0, react_1.useState)(false);
-    const [flipY, setFlipY] = (0, react_1.useState)(false);
-    const imgRef = (0, react_1.useRef)(null);
-    const lastScaleBeforeNatural = (0, react_1.useRef)(null);
-    const [position, setPosition] = (0, react_1.useState)({ x: 0, y: 0 });
-    const [isDragging, setIsDragging] = (0, react_1.useState)(false);
-    const dragStart = (0, react_1.useRef)({ x: 0, y: 0 });
-    const positionRef = (0, react_1.useRef)({ x: 0, y: 0 });
-    const setScale = (0, react_1.useCallback)((newValue) => {
+    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);
@@ -28,7 +25,7 @@ function PreviewCore({ images, initialIndex, onClose }) {
         _setScale(newState);
     }, []);
     const hasImages = images.length > 0;
-    const currentIndex = (0, react_1.useMemo)(() => clamp(index, 0, Math.max(images.length - 1, 0)), [index, images.length]);
+    const currentIndex = useMemo(() => clamp(index, 0, Math.max(images.length - 1, 0)), [index, images.length]);
     const currentImage = hasImages ? images[currentIndex] : '';
     const reset = () => {
         setScale(1);
@@ -39,11 +36,11 @@ function PreviewCore({ images, initialIndex, onClose }) {
         positionRef.current = { x: 0, y: 0 };
         lastScaleBeforeNatural.current = null;
     };
-    const handleMouseDown = (0, react_1.useCallback)((e) => {
+    const handleMouseDown = useCallback((e) => {
         setIsDragging(true);
         dragStart.current = { x: e.clientX - positionRef.current.x, y: e.clientY - positionRef.current.y };
     }, []);
-    const handleMouseMove = (0, react_1.useCallback)((e) => {
+    const handleMouseMove = useCallback((e) => {
         if (!isDragging)
             return;
         const newX = e.clientX - dragStart.current.x;
@@ -51,7 +48,7 @@ function PreviewCore({ images, initialIndex, onClose }) {
         positionRef.current = { x: newX, y: newY };
         setPosition({ x: newX, y: newY });
     }, [isDragging]);
-    const handleMouseUp = (0, react_1.useCallback)(() => {
+    const handleMouseUp = useCallback(() => {
         setIsDragging(false);
     }, []);
     const toPrev = () => {
@@ -70,7 +67,7 @@ function PreviewCore({ images, initialIndex, onClose }) {
     const zoomOut = () => setScale((prev) => clamp(prev - 0.2, 0.2, 5));
     const rotateLeft = () => setRotation((prev) => prev - 90);
     const rotateRight = () => setRotation((prev) => prev + 90);
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         const handleKey = (e) => {
             if (e.key === 'Escape') {
                 onClose();
@@ -93,7 +90,7 @@ function PreviewCore({ images, initialIndex, onClose }) {
         document.addEventListener('keydown', handleKey);
         return () => document.removeEventListener('keydown', handleKey);
     }, [onClose, hasImages, images.length]);
-    (0, react_1.useEffect)(() => {
+    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})`;
@@ -101,13 +98,13 @@ function PreviewCore({ images, initialIndex, onClose }) {
     }, [rotation, scale, flipX, flipY, position]);
     if (!hasImages)
         return null;
-    const content = ((0, jsx_runtime_1.jsxs)("div", { className: "fixed inset-0 z-[1100] bg-black/40 text-white", onClick: onClose, children: [(0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 20 }) }), images.length > 1 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("button", { type: "button", onClick: (e) => {
+    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: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowLeft, { size: 20 }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: (e) => {
+                        }, 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: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowRight, { size: 20 }) })] })), (0, jsx_runtime_1.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 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();
@@ -115,47 +112,55 @@ function PreviewCore({ images, initialIndex, onClose }) {
                     else {
                         zoomOut();
                     }
-                }, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp, style: { cursor: isDragging ? 'grabbing' : scale > 1 ? 'grab' : 'default' }, children: (0, jsx_runtime_1.jsx)("div", { className: "relative max-h-[85vh] max-w-[90vw]", children: (0, jsx_runtime_1.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" }) }) }), (0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsx)("button", { 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 -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: (0, jsx_runtime_1.jsx)(lucide_react_1.ZoomOut, { size: 16 }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: (e) => {
+                        }, 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: (0, jsx_runtime_1.jsx)(lucide_react_1.ZoomIn, { size: 16 }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: (e) => {
+                        }, 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" }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: (e) => {
+                        }, 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: (0, jsx_runtime_1.jsx)(lucide_react_1.RefreshCw, { size: 16 }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: (e) => {
+                        }, 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: (0, jsx_runtime_1.jsx)(lucide_react_1.RotateCcw, { size: 16 }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: (e) => {
+                        }, 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: (0, jsx_runtime_1.jsx)(lucide_react_1.RotateCw, { size: 16 }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: (e) => {
+                        }, 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: (0, jsx_runtime_1.jsx)(lucide_react_1.FlipHorizontal, { size: 16 }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: (e) => {
+                        }, 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: (0, jsx_runtime_1.jsx)(lucide_react_1.FlipVertical, { size: 16 }) })] })] }));
-    return (0, react_dom_1.createPortal)(content, document.body);
+                        }, 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);
 }
-function ImagePreviewController({ open, images, initialIndex = 0, onClose }) {
+export function ImagePreviewController({ open, images, initialIndex = 0, onClose }) {
     if (!open || images.length === 0)
         return null;
     const key = `${images.join('|')}-${initialIndex}`;
-    return (0, jsx_runtime_1.jsx)(PreviewCore, { images: images, initialIndex: initialIndex, onClose: onClose }, key);
+    return _jsx(PreviewCore, { images: images, initialIndex: initialIndex, onClose: onClose }, key);
 }

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

@@ -1,6 +1,9 @@
 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';
 };

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.js

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

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

@@ -1,20 +1,40 @@
 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 };

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.js

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

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

@@ -4,17 +4,46 @@ type VerticalLayout = {
 };
 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>>;

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.js

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