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

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

@@ -0,0 +1,5 @@
+export * from './Date';
+export * from './dateLocaleStore';
+export { useDateLocale } from './LocaleContext';
+export * from './LocaleProvider';
+export * from './locales';

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

@@ -1,3 +1,7 @@
+/**
+ * Date 组件文案配置
+ * 支持外部修改文案内容
+ */
 export interface DateLocaleConfig {
     placeholder: string;
     placeholderDateTime: string;
@@ -8,7 +12,13 @@ export interface DateLocaleConfig {
     startTime: string;
     endTime: string;
     confirm: string;
+    /**
+     * 范围模式 - 快捷选择面板标题
+     */
     quickRanges: string;
+    /**
+     * 范围模式 - 各快捷范围文案
+     */
     quickRangeToday: string;
     quickRangeYesterday: string;
     quickRangeLast7Days: string;
@@ -17,7 +27,16 @@ export interface DateLocaleConfig {
     quickRangeLastYear: string;
     clear: string;
 }
+/**
+ * 默认中文文案
+ */
 export declare const zhCNLocale: DateLocaleConfig;
+/**
+ * 默认英文文案
+ */
 export declare const enUSLocale: DateLocaleConfig;
+/**
+ * 默认使用中文文案
+ */
 export declare const defaultLocale: DateLocaleConfig;
 //# sourceMappingURL=locales.d.ts.map

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

@@ -1,7 +1,11 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.defaultLocale = exports.enUSLocale = exports.zhCNLocale = void 0;
-exports.zhCNLocale = {
+/**
+ * Date 组件文案配置
+ * 支持外部修改文案内容
+ */
+/**
+ * 默认中文文案
+ */
+export const zhCNLocale = {
     placeholder: '请选择日期',
     placeholderDateTime: '请选择日期时间',
     placeholderRange: '选择日期范围',
@@ -20,7 +24,10 @@ exports.zhCNLocale = {
     quickRangeLastYear: '最近一年',
     clear: '清除',
 };
-exports.enUSLocale = {
+/**
+ * 默认英文文案
+ */
+export const enUSLocale = {
     placeholder: 'Select date',
     placeholderDateTime: 'Select date and time',
     placeholderRange: 'Select date range',
@@ -39,5 +46,7 @@ exports.enUSLocale = {
     quickRangeLastYear: 'Last year',
     clear: 'Clear',
 };
-exports.defaultLocale = exports.zhCNLocale;
-//# sourceMappingURL=locales.js.map
+/**
+ * 默认使用中文文案
+ */
+export const defaultLocale = zhCNLocale;

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

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cn } from '../lib/utils';
+import { useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+export function Dropdown({ items, children, className, placement = 'bottom-end' }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const [position, setPosition] = useState({ top: 0, left: 0, width: 0 });
+    const triggerRef = useRef(null);
+    const dropdownRef = useRef(null);
+    // 计算下拉菜单位置
+    const updatePosition = () => {
+        if (triggerRef.current) {
+            const rect = triggerRef.current.getBoundingClientRect();
+            setPosition({
+                top: rect.bottom + window.scrollY,
+                left: placement === 'bottom-end' ? rect.right + window.scrollX : rect.left + window.scrollX,
+                width: rect.width,
+            });
+        }
+    };
+    // 点击外部关闭
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const handleClickOutside = (event) => {
+            if (triggerRef.current &&
+                !triggerRef.current.contains(event.target) &&
+                dropdownRef.current &&
+                !dropdownRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [isOpen]);
+    const handleToggle = () => {
+        if (!isOpen) {
+            updatePosition();
+        }
+        setIsOpen(!isOpen);
+    };
+    const handleItemClick = (item) => {
+        item.onClick?.();
+        setIsOpen(false);
+    };
+    return (_jsxs(_Fragment, { children: [_jsx("div", { ref: triggerRef, className: cn('relative inline-block', className), children: _jsx("div", { onClick: handleToggle, children: children }) }), isOpen &&
+                createPortal(_jsx("div", { ref: dropdownRef, className: cn('fixed z-[9999] mt-2 min-w-[120px]', 'bg-white rounded-lg shadow-lg border border-gray-200', 'py-1', 'animate-in fade-in-0 zoom-in-95'), style: {
+                        top: `${position.top}px`,
+                        left: placement === 'bottom-end' ? 'auto' : `${position.left}px`,
+                        right: placement === 'bottom-end' ? `${window.innerWidth - position.left}px` : 'auto',
+                    }, children: items.map((item) => (_jsxs("button", { onClick: () => handleItemClick(item), className: cn('w-full px-4 py-2.5 text-sm text-left', 'flex items-center gap-2', 'transition-colors', item.danger ? 'text-red-600 hover:bg-red-50' : 'text-gray-700 hover:bg-gray-50'), children: [item.icon && _jsx("span", { className: "flex-shrink-0", children: item.icon }), _jsx("span", { children: item.label })] }, item.key))) }), document.body)] }));
+}

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

@@ -1,7 +1,13 @@
 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: {

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(className), children: children }));
+};
+Form.displayName = 'Form';
+export { Form };

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

@@ -3,15 +3,36 @@ 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'];
 }

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(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/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';