@_tc/template-core 0.0.1-bate.36 → 0.0.1-bate.38

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

@@ -0,0 +1,100 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useI18n } from '../../i18n';
+import { cn } from '../../lib/utils';
+import { X } from 'lucide-react';
+import { useEffect, useRef, useState } from 'react';
+import { Button } from '../Button';
+import { Overlay } from '../Overlay';
+const DRAWER_ANIMATION_DURATION = 320;
+const DRAWER_ANIMATION_EASING = 'cubic-bezier(0.22, 1, 0.36, 1)';
+const getDrawerPositionClassName = (placement) => {
+    const positionClassNames = {
+        top: 'left-0 right-0 top-0',
+        right: 'bottom-0 right-0 top-0',
+        bottom: 'bottom-0 left-0 right-0',
+        left: 'bottom-0 left-0 top-0',
+    };
+    return positionClassNames[placement];
+};
+const getDrawerTransform = (placement, open) => {
+    if (open)
+        return 'translate3d(0, 0, 0)';
+    const transforms = {
+        top: 'translate3d(0, -100%, 0)',
+        right: 'translate3d(100%, 0, 0)',
+        bottom: 'translate3d(0, 100%, 0)',
+        left: 'translate3d(-100%, 0, 0)',
+    };
+    return transforms[placement];
+};
+const getDrawerSizeStyle = (placement, width, height) => {
+    const isHorizontal = placement === 'left' || placement === 'right';
+    const size = isHorizontal ? width : height;
+    const resolvedSize = typeof size === 'number' ? `${size}px` : size;
+    return isHorizontal ? { width: resolvedSize } : { height: resolvedSize };
+};
+export function Drawer({ open = false, onClose, title, children, footer, className, contentClassName, mask = true, maskClosable = true, lockScroll = true, closable = true, placement = 'right', width = 420, height = 360, renderNode, keyboard = true, zIndex = 1000, }) {
+    const t = useI18n();
+    const [mounted, setMounted] = useState(open);
+    const [visible, setVisible] = useState(false);
+    const animationFrameRef = useRef(undefined);
+    const secondAnimationFrameRef = useRef(undefined);
+    const closeTimerRef = useRef(undefined);
+    useEffect(() => {
+        if (animationFrameRef.current) {
+            cancelAnimationFrame(animationFrameRef.current);
+            animationFrameRef.current = undefined;
+        }
+        if (secondAnimationFrameRef.current) {
+            cancelAnimationFrame(secondAnimationFrameRef.current);
+            secondAnimationFrameRef.current = undefined;
+        }
+        if (closeTimerRef.current) {
+            clearTimeout(closeTimerRef.current);
+            closeTimerRef.current = undefined;
+        }
+        if (open) {
+            setMounted(true);
+            animationFrameRef.current = requestAnimationFrame(() => {
+                secondAnimationFrameRef.current = requestAnimationFrame(() => {
+                    setVisible(true);
+                    secondAnimationFrameRef.current = undefined;
+                });
+                animationFrameRef.current = undefined;
+            });
+            return () => {
+                if (animationFrameRef.current) {
+                    cancelAnimationFrame(animationFrameRef.current);
+                    animationFrameRef.current = undefined;
+                }
+                if (secondAnimationFrameRef.current) {
+                    cancelAnimationFrame(secondAnimationFrameRef.current);
+                    secondAnimationFrameRef.current = undefined;
+                }
+            };
+        }
+        setVisible(false);
+        closeTimerRef.current = setTimeout(() => {
+            setMounted(false);
+            closeTimerRef.current = undefined;
+        }, DRAWER_ANIMATION_DURATION);
+        return () => {
+            if (closeTimerRef.current) {
+                clearTimeout(closeTimerRef.current);
+                closeTimerRef.current = undefined;
+            }
+        };
+    }, [open]);
+    const handleContentClick = (e) => {
+        e.stopPropagation();
+    };
+    const drawerStyle = {
+        ...getDrawerSizeStyle(placement, width, height),
+        transform: getDrawerTransform(placement, visible),
+        transition: `transform ${DRAWER_ANIMATION_DURATION}ms ${DRAWER_ANIMATION_EASING}`,
+        willChange: 'transform',
+    };
+    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 })] }) }));
+}

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

@@ -0,0 +1,3 @@
+export { Drawer } from './Drawer';
+export type { DrawerPlacement, DrawerProps } from './Drawer';
+//# sourceMappingURL=index.d.ts.map

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

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

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

@@ -0,0 +1,25 @@
+import type { ReactNode } from 'react';
+export interface DropdownBaseItem {
+    key: string;
+    label: ReactNode;
+    icon?: ReactNode;
+    danger?: boolean;
+    onClick?: () => void;
+}
+export interface DropdownRenderItem {
+    render: (item: DropdownRenderItem, context: {
+        onClick: () => void;
+        close: () => void;
+    }) => ReactNode;
+}
+export type DropdownItem = Omit<DropdownBaseItem, 'render'> | DropdownRenderItem;
+export interface DropdownProps {
+    items: DropdownItem[];
+    children: ReactNode;
+    className?: string;
+    placement?: 'bottom-end' | 'bottom-start';
+    /** 自定义弹出容器，不传则默认挂载到 document.body */
+    getPopupContainer?: () => HTMLElement;
+}
+export declare function Dropdown({ items, children, className, placement, getPopupContainer }: DropdownProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Dropdown.d.ts.map

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

@@ -0,0 +1,28 @@
+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 { Button } from '../Button';
+import { Popup } from '../Popup';
+const isDropdownRenderItem = (item) => 'render' in item;
+export function Dropdown({ items, children, className, placement = 'bottom-end', getPopupContainer }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const triggerRef = useRef(null);
+    const handleToggle = useCallback(() => {
+        setIsOpen((prev) => !prev);
+    }, []);
+    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?.(), className: cn('min-w-10', 'py-1'), 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 w-full items-center gap-2 px-4 py-2.5 text-left text-sm transition-colors', item.danger ? 'text-red-600 hover:bg-red-50' : 'text-gray-700 hover:bg-gray-50'), children: _jsxs(_Fragment, { children: [item.icon && _jsx("span", { className: "flex-shrink-0", children: item.icon }), _jsx("span", { children: item.label })] }) }, key));
+                }) })] }));
+}

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

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

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

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

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

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from '../../lib/utils';
 import RcForm from 'rc-field-form';
 const Form = ({ className, children, ...props }) => {
-    return (_jsx(RcForm, { ...props, component: "form", className: cn(className), children: children }));
+    return (_jsx(RcForm, { ...props, component: "form", className: cn('tc-ui-form', className), children: children }));
 };
 Form.displayName = 'Form';
 export { Form };

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

@@ -35,7 +35,7 @@ const FormItemFN = forwardRef(({ className, label, labelClassName, required, chi
                 })
                 : childNode;
             const content = _jsx("div", { className: hasError || hasWarning ? 'relative' : '', children: childWithProps });
-            return (_jsxs("div", { ref: ref, className: cn(className), children: [label ? (_jsx(Label, { htmlFor: name, label: label, layout: layout, required: required, labelClassName: cn(labelClassName, hasError && 'text-destructive'), children: content })) : (content), showError && hasError && (_jsx("div", { className: cn('text-sm text-destructive', errorClassName), children: errors[0] })), hasWarning && _jsx("div", { className: "text-sm text-yellow-600", children: warnings[0] })] }));
+            return (_jsxs("div", { ref: ref, className: cn('tc-ui-form-item', className), children: [label ? (_jsx(Label, { htmlFor: name, label: label, layout: layout, required: required, labelClassName: cn(labelClassName, hasError && 'text-destructive'), children: content })) : (content), showError && hasError && (_jsx("div", { className: cn('text-sm text-destructive', errorClassName), children: errors[0] })), hasWarning && _jsx("div", { className: "text-sm text-yellow-600", children: warnings[0] })] }));
         } }));
 });
 FormItemFN.displayName = 'FormItem';

package/fe/packages/ui/react/components/Form/SchemaForm/data.d.ts

@@ -0,0 +1,45 @@
+import React from 'react';
+import { CheckboxProps } from '../../Checkbox';
+import { type DatePickerProps } from '../../Date';
+import { type InputProps } from '../../Input';
+import { InputNumberProps } from '../../InputNumber';
+import { type SelectProps } from '../../Select';
+import { type SwitchProps } from '../../Switch';
+import { type TextareaProps } from '../../Textarea';
+export type SchemaFormComponentPropsMap = {
+    input: InputProps;
+    inputNumber: InputNumberProps;
+    select: SelectProps;
+    textarea: TextareaProps;
+    switch: SwitchProps;
+    date: DatePickerProps;
+    checkbox: CheckboxProps;
+};
+export type SchemaFormFieldType = keyof SchemaFormComponentPropsMap;
+export declare namespace SchemaFormNamespace {
+    interface FieldTypes {
+    }
+    interface PropsMap {
+    }
+}
+export type ExtendedFieldType = Extract<keyof SchemaFormNamespace.FieldTypes | keyof SchemaFormNamespace.PropsMap, string>;
+export type SchemaFormAllFieldType = SchemaFormFieldType | ExtendedFieldType;
+export type SchemaFormAllPropsMap = SchemaFormComponentPropsMap & SchemaFormNamespace.PropsMap;
+export type SchemaFormComponent = React.LazyExoticComponent<React.ComponentType<any>>;
+export declare const componentsMap: Record<SchemaFormAllFieldType, SchemaFormComponent>;
+export type SchemaFormBusinessComponentsMap = Partial<Record<ExtendedFieldType, SchemaFormComponent>>;
+export type FieldProps = {
+    [K in SchemaFormFieldType]: {
+        type: K;
+        fieldProps?: SchemaFormComponentPropsMap[K];
+    };
+}[SchemaFormFieldType] | {
+    [K in ExtendedFieldType]: {
+        type: K;
+        fieldProps?: K extends keyof SchemaFormNamespace.PropsMap ? SchemaFormNamespace.PropsMap[K] : unknown;
+    };
+}[ExtendedFieldType] | {
+    type?: 'input';
+    fieldProps?: InputProps;
+};
+//# sourceMappingURL=data.d.ts.map

package/fe/packages/ui/react/components/Form/{SchemeForm → SchemaForm}/data.js

@@ -1,8 +1,16 @@
+import businessComponentsMap from '$business/SchemaForm/data';
 import React from 'react';
-export const componentsMap = {
+const baseComponentsMap = {
     input: React.lazy(async () => ({ default: (await import('../../Input')).Input })),
+    inputNumber: React.lazy(async () => ({ default: (await import('../../InputNumber')).InputNumber })),
     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 })),
+    checkbox: React.lazy(async () => ({ default: (await import('../../Checkbox')).Checkbox })),
+};
+// componentsMap 合并内置 + 业务层扩展，支持动态注册新字段类型
+export const componentsMap = {
+    ...baseComponentsMap,
+    ...businessComponentsMap,
 };

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

@@ -3,16 +3,17 @@ import { type FormInstance } from 'rc-field-form';
 import type { Rule } from 'rc-field-form/es/interface';
 import { type ReactNode } from 'react';
 import { type FormProps } from '..';
-import { Button } from '../../Button';
+import { type ButtonElementProps } from '../../Button';
 import type { LabelLayout } from '../../Label';
-import { componentsMap, type FieldProps } from './data';
-export type FormFieldType = keyof typeof componentsMap;
+import { type FieldProps, type SchemaFormAllFieldType } from './data';
+export type { FieldProps, SchemaFormComponentPropsMap, SchemaFormFieldType, SchemaFormNamespace, SchemaFormAllFieldType, SchemaFormAllPropsMap, SchemaFormBusinessComponentsMap, SchemaFormComponent } from './data';
+export type FormFieldType = SchemaFormAllFieldType;
 type BaseField<T> = {
     [K in keyof T]: {
         /**
          * 字段名
          */
-        name: K | number | (K | number)[];
+        key: K | number | (K | number)[];
         /**
          * 标签文本
          */
@@ -60,24 +61,24 @@ type BaseField<T> = {
 }[keyof T];
 type GroupField<T> = {
     type: 'group';
-    childrens: FormFieldScheme<T>[];
+    childrens: FormFieldSchema<T>[];
     fieldProps: React.HTMLAttributes<HTMLDivElement>;
 } & BaseField<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'> {
+export type FormFieldSchema<T> = GroupField<T> | NotGroupField<T>;
+export interface SchemaFormProps<T = object> extends MOmit<FormProps<T>, 'initialValues' | 'children' | 'preserve'> {
     /**
      * 表单实例
      */
     form?: FormInstance<T>;
     /**
-     * 获取当前使用的form实例
+     * 获取当前使用的form实例  只有挂载后会调用一次
      */
     getForm?: (formInstance: FormInstance<T>) => void;
     /**
      * 表单配置方案
      */
-    schemes: FormFieldScheme<T>[];
+    schemas: FormFieldSchema<T>[];
     /**
      * 表单类名
      */
@@ -132,11 +133,11 @@ export interface SchemeFormProps<T = object> extends MOmit<FormProps<T>, 'initia
     /**
      * 提交按钮属性
      */
-    submitButtonProps?: Omit<React.ComponentProps<typeof Button>, 'type' | 'onClick' | 'children'>;
+    submitButtonProps?: Omit<ButtonElementProps, 'type' | 'onClick' | 'children'>;
     /**
      * 取消按钮属性
      */
-    cancelButtonProps?: Omit<React.ComponentProps<typeof Button>, 'onClick' | 'children'>;
+    cancelButtonProps?: Omit<ButtonElementProps, 'onClick' | 'children'>;
     /**
      * 移除字段时保留值
      *
@@ -144,9 +145,9 @@ export interface SchemeFormProps<T = object> extends MOmit<FormProps<T>, 'initia
      */
     preserve?: boolean;
 }
-export declare const SchemeForm: {
-    <T extends object>({ form, getForm, schemes, className, onFinish, onFinishFailed, initialValues, footerButtons, submitText, cancelText, onCancel, buttonClassName, submitButtonProps, layout, fieldLayout, cancelButtonProps, ...formProps }: SchemeFormProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare const SchemaForm: {
+    <T extends object>({ form, getForm, schemas, className, onFinish, onFinishFailed, initialValues, footerButtons, submitText, cancelText, onCancel, buttonClassName, submitButtonProps, layout, fieldLayout, cancelButtonProps, ...formProps }: SchemaFormProps<T>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
-export default SchemeForm;
+export default SchemaForm;
 //# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,79 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useI18n } from '../../../i18n';
+import { cn } from '../../../lib/utils';
+import { Suspense, useEffect, useMemo, useRef } from 'react';
+import { Form, FormItem, useForm } from '..';
+import { Button } from '../../Button';
+import { Skeleton } from '../../Skeleton';
+import { componentsMap } from './data';
+const renderField = (schema) => {
+    return (value, onChange, meta) => {
+        // 如果提供了自定义渲染函数，优先使用
+        if (schema.render) {
+            return schema.render(value, onChange, meta);
+        }
+        const { type = 'input' } = schema;
+        const Component = componentsMap[type];
+        const { fieldProps } = schema;
+        if (!Component) {
+            console.error(' SchemaForm/FormIrem/renderField 非法的 组件类型');
+            return value;
+        }
+        const ComponentRenderer = Component;
+        return (_jsxs(Suspense, { fallback: _jsx(Skeleton, { mode: "componentsloading", rows: 2 }), children: [_jsx(ComponentRenderer, { value: value, onChange: onChange, ...fieldProps }), schema.affterNode] }));
+    };
+};
+export const SchemaForm = ({ form, getForm, schemas, className, onFinish, onFinishFailed, initialValues, footerButtons = true, submitText, cancelText, onCancel, buttonClassName, submitButtonProps, layout = 'vertical', fieldLayout = 'vertical', cancelButtonProps, 
+// preserve = false,
+...formProps }) => {
+    const t = useI18n();
+    const [f] = useForm();
+    const getFormRef = useRef(getForm);
+    getFormRef.current = getForm;
+    const usedForm = useMemo(() => form ?? f, [f, form]);
+    useEffect(() => {
+        getFormRef.current?.(usedForm);
+    }, [usedForm]);
+    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 renderSchemas = (schemas) => {
+        return schemas.map((schema, index) => {
+            const { type = 'input' } = schema;
+            if (type !== 'group') {
+                const { key: fieldKey, label, rules, required, className: itemClassName, labelClassName, errorClassName, showError, layout: schemaFieldLayout, } = schema;
+                const fLayout = schemaFieldLayout ?? fieldLayout;
+                const fRequired = required ??
+                    rules?.some((r) => {
+                        const rData = typeof r === 'function' ? r(usedForm) : r;
+                        return rData.required;
+                    });
+                const fiKey = (Array.isArray(fieldKey) ? `field-${index}-${fieldKey.join('_')}` : fieldKey);
+                return (_jsx(FormItem, { name: fieldKey, label: label, rules: rules, layout: fLayout, required: fRequired, className: cn(fieldClassName, itemClassName), labelClassName: labelClassName, errorClassName: errorClassName, showError: showError, children: renderField(schema) }, fiKey));
+            }
+            else if (type === 'group') {
+                const s = schema;
+                const { key: fieldKey } = s;
+                const fiKey = (Array.isArray(fieldKey) ? `field-group-${index}-${fieldKey.join('_')}` : fieldKey);
+                return (_jsx("div", { className: "field-group-container", ...s.fieldProps, children: renderSchemas(s.childrens) }, fiKey));
+            }
+            return null;
+        });
+    };
+    return (_jsxs(Form, { form: usedForm, onFinish: onFinish, onFinishFailed: onFinishFailed, initialValues: initialValues, className: cn('tc-ui-schema-form', formClassName, className), ...formProps, children: [renderSchemas(schemas), 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 ?? t('components.form.cancel') }), _jsx(Button, { type: "submit", variant: "primary", ...submitButtonProps, children: submitText ?? t('components.form.submit') })] })) : (footerButtons)) : undefined] }));
+};
+SchemaForm.displayName = 'SchemaForm';
+export default SchemaForm;

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

@@ -1,5 +1,5 @@
 export * from './Form';
 export * from './FormItem';
 export * from './useForm';
-export * from './SchemeForm';
+export * from './SchemaForm';
 //# sourceMappingURL=index.d.ts.map

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

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

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

@@ -1,9 +1,12 @@
 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 { useI18n } from '../../i18n';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
+import { Button } from '../Button';
 const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
 function PreviewCore({ images, initialIndex, onClose }) {
+    const t = useI18n();
     const [index, setIndex] = useState(initialIndex);
     const [scale, _setScale] = useState(1);
     const scaleRef = useRef(scale);
@@ -98,13 +101,13 @@ function PreviewCore({ images, initialIndex, onClose }) {
     }, [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) => {
+    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) => {
                             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) => {
+                        }, 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) => {
                             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) => {
+                        }, 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) => {
                     e.preventDefault();
                     if (e.deltaY < 0) {
                         zoomIn();
@@ -112,13 +115,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", { 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, { 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": "\u7F29\u5C0F", children: _jsx(ZoomOut, { size: 16 }) }), _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": 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": "\u653E\u5927", children: _jsx(ZoomIn, { size: 16 }) }), _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": t('components.imagePreview.zoomIn'), children: _jsx(ZoomIn, { size: 16 }) }), _jsx(Button, { variant: "text", type: "button", onClick: (e) => {
                             e.stopPropagation();
                             if (!imgRef.current)
                                 return;
@@ -140,22 +143,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", { 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, { 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": "\u91CD\u7F6E", children: _jsx(RefreshCw, { size: 16 }) }), _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": 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": "\u5DE6\u65CB\u8F6C", children: _jsx(RotateCcw, { size: 16 }) }), _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": 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": "\u53F3\u65CB\u8F6C", children: _jsx(RotateCw, { size: 16 }) }), _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": 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": "\u5DE6\u53F3\u955C\u50CF", children: _jsx(FlipHorizontal, { size: 16 }) }), _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": 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": "\u4E0A\u4E0B\u955C\u50CF", children: _jsx(FlipVertical, { size: 16 }) })] })] }));
+                        }, 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 }) })] })] }));
     return createPortal(content, document.body);
 }
 export function ImagePreviewController({ open, images, initialIndex = 0, onClose }) {

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

@@ -1,7 +1,10 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useI18n } from '../../i18n';
 import { useMemo, useState } from 'react';
+import { Button } from '../Button';
 import { ImagePreviewController } from './ImagePreview';
 export function PreviewImage(props) {
+    const t = useI18n();
     const { onClose, images, thumbSize = 80, direction = 'horizontal', ...ext } = props;
     const [open, setOpen] = useState(false);
     const [currentIndex, setCurrentIndex] = useState(ext.initialIndex ?? 0);
@@ -15,10 +18,10 @@ 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", { 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 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: () => {
+                    }, "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: () => {
                     setOpen(false);
                     onClose?.();
                 } })] }));

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

@@ -17,8 +17,10 @@ export type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | '
     };
     /** 输入框内部右侧按钮 */
     addonAfter?: ReactNode;
+    /** 原生 input 节点的自定义 className */
+    inputClassName?: string;
 };
-declare const Input: import("react").ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "defaultValue" | "onChange" | "value"> & {
+declare const Input: import("react").ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "defaultValue" | "onChange"> & {
     value?: string;
     /**
      *
@@ -36,6 +38,8 @@ declare const Input: import("react").ForwardRefExoticComponent<Omit<InputHTMLAtt
     };
     /** 输入框内部右侧按钮 */
     addonAfter?: ReactNode;
+    /** 原生 input 节点的自定义 className */
+    inputClassName?: string;
 } & import("react").RefAttributes<HTMLInputElement>>;
 export { Input };
 //# sourceMappingURL=Input.d.ts.map

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

@@ -3,21 +3,22 @@ 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 Input = forwardRef(({ className, inputClassName, type, value: controlledValue, onChange, defaultValue, allowClear, disabled, addonAfter, ...props }, ref) => {
     const { setInternalValue, setIsFocused, setRefs, controllerRef, isControlledRef, isFocused, value, hasValue, } = useInputController({
         defaultValue,
         controlledValue,
         ref,
     });
+    const isFileInput = type === 'file';
     // 在change恒定时 不重复生成 fn
     // isControlledRef setInternalValue 都是不会变的值
     const handleChange = useCallback((e) => {
         const newValue = e.target.value;
-        if (!isControlledRef.current) {
+        if (!isFileInput && !isControlledRef.current) {
             setInternalValue(newValue);
         }
         onChange?.(newValue, e);
-    }, [isControlledRef, onChange, setInternalValue]);
+    }, [isFileInput, isControlledRef, onChange, setInternalValue]);
     const handleClear = useCallback((e) => {
         e.preventDefault();
         e.stopPropagation();
@@ -44,7 +45,7 @@ const Input = forwardRef(({ className, type, value: controlledValue, onChange, d
         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) => {
+    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) => {
                     if (!disabled) {
                         setIsFocused(true);
                         props.onFocus?.(e);