@_tc/template-core 0.0.1 → 0.0.2

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,26 @@
+import type { ReactNode } from 'react';
+import { type DropdownPlacement } from '../hooks/useDropdownPositioning';
+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?: DropdownPlacement;
+    /** 自定义弹出容器，不传则默认挂载到 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,49 @@
+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';
+import { getDefaultDropdownPosition, } from '../hooks/useDropdownPositioning';
+const isDropdownRenderItem = (item) => 'render' in item;
+const viewportPadding = 8;
+const getDropdownPosition = (context) => {
+    const position = getDefaultDropdownPosition(context);
+    const contentHeight = context.contentRect?.height ?? 0;
+    if (context.placement.startsWith('bottom') && position.top + contentHeight > context.viewportHeight - viewportPadding) {
+        return getDefaultDropdownPosition({
+            ...context,
+            placement: context.placement.replace('bottom', 'top'),
+        });
+    }
+    if (context.placement.startsWith('top') && position.top < viewportPadding) {
+        return getDefaultDropdownPosition({
+            ...context,
+            placement: context.placement.replace('top', 'bottom'),
+        });
+    }
+    return position;
+};
+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?.(), strategy: getDropdownPosition, className: cn('min-w-24 overflow-hidden p-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 h-10 w-full items-center justify-start gap-2 rounded-md px-3 text-left text-sm transition-colors', item.danger
+                            ? 'text-destructive hover:bg-destructive/10'
+                            : 'text-popover-foreground hover:bg-muted'), children: _jsxs(_Fragment, { children: [item.icon && _jsx("span", { className: "flex-shrink-0", children: item.icon }), _jsx("span", { children: item.label })] }) }, key));
+                }) })] }));
+}

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.d.ts

@@ -0,0 +1,18 @@
+import type { FormProps as RcFormProps } from 'rc-field-form';
+import type { ReactNode } from 'react';
+export interface FormProps<T> extends Omit<RcFormProps<T>, 'component'> {
+    /**
+     * 表单类名
+     */
+    className?: string;
+    /**
+     * 表单内容
+     */
+    children?: ReactNode;
+}
+declare const Form: {
+    <T extends object>({ className, children, ...props }: FormProps<T>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { Form };
+//# sourceMappingURL=Form.d.ts.map

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

@@ -0,0 +1,8 @@
+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('tc-ui-form', className), children: children }));
+};
+Form.displayName = 'Form';
+export { Form };

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

@@ -0,0 +1,41 @@
+import { Field } from 'rc-field-form';
+import type { ReactNode } from 'react';
+import { type LabelLayout } from '../Label';
+type FieldProps = Parameters<typeof Field>[0];
+export interface FormItemProps<T = any> extends Omit<FieldProps, 'children'> {
+    /**
+     * 表单项类名
+     */
+    className?: string;
+    /**
+     * 标签文本
+     */
+    label?: ReactNode;
+    /**
+     * 标签类名
+     */
+    labelClassName?: string;
+    /**
+     * 是否必填（仅用于显示，实际验证通过 rules 配置）
+     */
+    required?: boolean;
+    /**
+     * 表单项内容
+     */
+    children?: ReactNode | ((value: T, onChange: (value: T) => void, meta: {
+        errors: string[];
+        warnings: string[];
+    }) => ReactNode);
+    /**
+     * 错误信息类名
+     */
+    errorClassName?: string;
+    /**
+     * 是否显示错误信息
+     */
+    showError?: boolean;
+    layout?: Required<LabelLayout>['layout'];
+}
+declare const FormItem: <T>(props: FormItemProps<T>) => ReactNode | Promise<ReactNode>;
+export { FormItem };
+//# sourceMappingURL=FormItem.d.ts.map

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

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../lib/utils';
+import { Field } from 'rc-field-form';
+import React, { forwardRef } from 'react';
+import Label from '../Label';
+const FormItemFN = forwardRef(({ className, label, labelClassName, required, children, errorClassName, showError = true, name, rules, layout, ...props }, ref) => {
+    return (_jsx(Field, { name: name, rules: rules, ...props, children: (control, meta /** form */) => {
+            const { value, onChange, ...restControl } = control;
+            const { errors, warnings } = meta;
+            const hasError = errors.length > 0;
+            const hasWarning = warnings.length > 0;
+            // 如果 children 是函数，调用它并传入 value、onChange 和 meta
+            const childNode = typeof children === 'function' ? children(value, onChange, meta) : children;
+            // 克隆子元素并注入 value 和 onChange
+            const childWithProps = childNode && typeof childNode === 'object' && 'props' in childNode
+                ? React.cloneElement(childNode, {
+                    value: value,
+                    onChange: (val) => {
+                        // 兼容 Input 组件的 onChange(value, event) 格式
+                        // Input 组件的 onChange 签名是: (value: string, event: ChangeEvent) => void
+                        if (typeof val === 'string') {
+                            // 如果第一个参数是字符串，说明是 Input 组件的格式
+                            onChange(val);
+                        }
+                        else if (val?.target?.value !== undefined) {
+                            // 原生 input 的 onChange 事件格式
+                            onChange(val.target.value);
+                        }
+                        else {
+                            // 其他情况直接使用值
+                            onChange(val);
+                        }
+                    },
+                    ...restControl,
+                })
+                : childNode;
+            const content = _jsx("div", { className: hasError || hasWarning ? 'relative' : '', children: childWithProps });
+            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';
+const FormItem = FormItemFN;
+export { FormItem };

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

@@ -0,0 +1,40 @@
+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.ComponentType<any> | React.LazyExoticComponent<React.ComponentType<any>>;
+export declare const componentsMap: Record<SchemaFormAllFieldType, SchemaFormComponent>;
+export type SchemaFormComponentsMap = Partial<Record<ExtendedFieldType, SchemaFormComponent>>;
+export type FieldProps = {
+    [K in SchemaFormAllFieldType]: {
+        type: K;
+        fieldProps?: K extends keyof SchemaFormAllPropsMap ? SchemaFormAllPropsMap[K] : unknown;
+    };
+}[SchemaFormAllFieldType] | {
+    type?: 'input';
+    fieldProps?: InputProps;
+};
+//# sourceMappingURL=data.d.ts.map

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

@@ -0,0 +1,18 @@
+import consumerComponentsMap from '@tc/scalability/SchemaForm/data';
+import frameComponentsMap from '@tc/scalability/SchemaForm/frameData';
+import React from 'react';
+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,
+    ...frameComponentsMap,
+    ...consumerComponentsMap,
+};

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

@@ -0,0 +1,153 @@
+import type { MOmit } from '../../../types';
+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 { type ButtonElementProps } from '../../Button';
+import type { LabelLayout } from '../../Label';
+import { type FieldProps, type SchemaFormAllFieldType } from './data';
+export type { FieldProps, SchemaFormAllFieldType, SchemaFormAllPropsMap, SchemaFormComponent, SchemaFormComponentsMap, SchemaFormComponentPropsMap, SchemaFormFieldType, SchemaFormNamespace, } from './data';
+export type FormFieldType = SchemaFormAllFieldType;
+type BaseField<T> = {
+    [K in keyof T]: {
+        /**
+         * 字段名
+         */
+        key: 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];
+type GroupField<T> = {
+    type: 'group';
+    childrens: FormFieldSchema<T>[];
+    fieldProps: React.HTMLAttributes<HTMLDivElement>;
+} & BaseField<T>;
+type NotGroupField<T> = FieldProps & BaseField<T>;
+export type FormFieldSchema<T> = GroupField<T> | NotGroupField<T>;
+export interface SchemaFormProps<T = object> extends MOmit<FormProps<T>, 'initialValues' | 'children' | 'preserve'> {
+    /**
+     * 表单实例
+     */
+    form?: FormInstance<T>;
+    /**
+     * 获取当前使用的form实例  只有挂载后会调用一次
+     */
+    getForm?: (formInstance: FormInstance<T>) => void;
+    /**
+     * 表单配置方案
+     */
+    schemas: FormFieldSchema<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<ButtonElementProps, 'type' | 'onClick' | 'children'>;
+    /**
+     * 取消按钮属性
+     */
+    cancelButtonProps?: Omit<ButtonElementProps, 'onClick' | 'children'>;
+    /**
+     * 移除字段时保留值
+     *
+     * @default false
+     */
+    preserve?: boolean;
+}
+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 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

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

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

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

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

@@ -0,0 +1,3 @@
+export { useForm } from 'rc-field-form';
+export type { FormInstance } from 'rc-field-form';
+//# sourceMappingURL=useForm.d.ts.map

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

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

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

@@ -0,0 +1,8 @@
+export type ImagePreviewControllerProps = {
+    open: boolean;
+    images: string[];
+    initialIndex?: number;
+    onClose: () => void;
+};
+export declare function ImagePreviewController({ open, images, initialIndex, onClose }: ImagePreviewControllerProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=ImagePreview.d.ts.map