@mi-avalon/libs 1.0.2 → 1.0.4

package/dist/components/ItemsRow/index.d.ts

@@ -15,7 +15,7 @@ export interface IRowItem {
     /**
      * 如果没有指定Render，则是按钮的onClick
      */
-    onClick?: (e: any) => void;
+    onClick?: (e: React.MouseEvent<HTMLElement>) => void;
     /**
      * 其他按钮属性
      */
@@ -24,6 +24,10 @@ export interface IRowItem {
      * item 的className
      */
     className?: string;
+    /**
+     * 唯一标识，用于React key
+     */
+    key?: React.Key;
     /**
      * 自定义渲染
      */
@@ -38,5 +42,9 @@ export interface IItemRowProps {
     style?: React.CSSProperties;
     className?: string;
     offsetTop?: number;
+    /**
+     * @description 容器测试ID，用于测试
+     */
+    testId?: string;
 }
-export declare const ItemsRow: (props: IItemRowProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const ItemsRow: React.NamedExoticComponent<IItemRowProps>;

package/dist/components/ItemsRow/index.js

@@ -1,20 +1,36 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Button } from 'antd';
+import * as React from 'react';
+import { useMemo } from 'react';
 import { getClassName } from '../../utils';
 import { CompThemeProvider } from '../ThemeContext';
 const classname = (n = '') => {
     const cn = 'items-row';
     return getClassName(cn, n);
 };
-export const ItemsRow = (props) => {
-    if (!props.items) {
+export const ItemsRow = React.memo((props) => {
+    const { items, className, style, testId } = props;
+    // 优化：使用 useMemo 缓存渲染的子项
+    const renderedItems = useMemo(() => {
+        if (!items)
+            return null;
+        return items.map((item, index) => {
+            // 使用更好的 key 策略
+            const itemKey = item.key || item.label || index;
+            const itemClassName = `${classname('item')} ${item.className || ''}`.trim();
+            if (item.render) {
+                return (_jsx("span", { className: itemClassName, children: item.render() }, itemKey));
+            }
+            return (_jsx(Button, { className: itemClassName, ...item.btnProps, type: item.type || 'primary', onClick: item.onClick, children: item.label }, itemKey));
+        });
+    }, [items]);
+    if (!items) {
         return null;
     }
-    return (_jsx(CompThemeProvider, { children: _jsx("div", { className: `${classname()} ${props.className || ''}`, style: props.style, children: (props.items || []).map((item, index) => {
-                const className = `${classname('item')} ${item.className}`;
-                if (item.render) {
-                    return (_jsx("span", { className: className, children: item.render() }, index));
-                }
-                return (_jsx(Button, { className: className, ...item.btnProps, type: item.type || 'primary', onClick: item.onClick, children: item.label }, item.label));
-            }) }) }));
-};
+    // 优化：使用 useMemo 缓存容器类名
+    const containerClassName = useMemo(() => {
+        return `${classname()} ${className || ''}`.trim();
+    }, [className]);
+    return (_jsx(CompThemeProvider, { children: _jsx("div", { className: containerClassName, style: style, "data-testid": testId, children: renderedItems }) }));
+});
+ItemsRow.displayName = 'ItemsRow';

package/dist/components/MForm/MFormItemConst.js

@@ -56,7 +56,15 @@ export class MFormItemConst {
         return _jsx(Checkbox.Group, { disabled: item.disabled, ...item.props });
     };
     static upload = (item) => {
-        return (_jsx(Upload, { ...item.props, children: item.children || (_jsxs(Button, { children: [_jsx(UploadOutlined, {}), " \u70B9\u51FB\u4E0A\u4F20"] })) }));
+        // 确保fileList是数组类型，防止forEach错误
+        const uploadProps = {
+            ...item.props,
+        };
+        // 如果fileList存在但不是数组，转换为数组
+        if (uploadProps.fileList && !Array.isArray(uploadProps.fileList)) {
+            uploadProps.fileList = [uploadProps.fileList];
+        }
+        return (_jsx(Upload, { ...uploadProps, children: item.children || (_jsxs(Button, { children: [_jsx(UploadOutlined, {}), " \u70B9\u51FB\u4E0A\u4F20"] })) }));
     };
     static mentions = (item) => {
         return (_jsx(Mentions, { ...item.props, placeholder: item.placeholder || MFormItemConst.getDefaultPlaceholder(item) }));

package/dist/components/MForm/index.d.ts

@@ -1,9 +1,7 @@
+import React from 'react';
 import './index.scss';
 import type { IMFormProps } from './type';
-declare function MForm(props: IMFormProps): import("react/jsx-runtime").JSX.Element;
-declare namespace MForm {
-    var displayName: string;
-}
+declare const MForm: React.NamedExoticComponent<IMFormProps>;
 export default MForm;
 export * from './MFormItemConst';
 export * from './type';

package/dist/components/MForm/index.js

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * 表单组件
  */
 import { Col, Form, Row } from 'antd';
+import React, { useCallback, useMemo } from 'react';
 import { getClassName } from '../../utils';
 import { CompThemeProvider } from '../ThemeContext';
 import './index.scss';
@@ -11,11 +12,12 @@ const classname = (n = '') => {
     const cn = 'm-form';
     return getClassName(cn, n);
 };
-function MForm(props) {
+const MForm = React.memo((props) => {
     const { formProps, formItems = [], column = 1, form, itemLayout, formRowProps } = props;
-    const renderItem = (item, form) => {
+    // 优化：缓存渲染函数
+    const renderItem = useCallback((item, formInstance) => {
         if (item.render) {
-            return item.render(form);
+            return item.render(formInstance);
         }
         const func = MFormItemConst[item.type];
         if (item && item.type && func) {
@@ -23,28 +25,67 @@ function MForm(props) {
             return renderFunc(item);
         }
         return _jsx("div", { className: 'error-message', children: "Invalid form item configuration" });
-    };
-    const renderFormItem = (item) => {
+    }, []);
+    // 优化：缓存表单项布局配置
+    const formItemLayout = useMemo(() => ({
+        styles: {
+            label: MFormItemConst.defaultLabelStyle,
+            content: MFormItemConst.defaultContentStyle,
+        },
+        ...itemLayout,
+    }), [itemLayout]);
+    // 优化：缓存渲染表单项的函数
+    const renderFormItem = useCallback((item) => {
         const { show = true } = item;
         if (!show)
             return null;
-        const rules = [...(item.rules || [])];
-        if (item.required) {
-            rules.push({ required: true, message: item.required });
-        }
-        // antd 6使用styles替代labelCol和wrapperCol
-        const formItemLayout = {
-            styles: {
-                label: MFormItemConst.defaultLabelStyle,
-                content: MFormItemConst.defaultContentStyle,
-            },
-            ...itemLayout,
+        const rules = useMemo(() => {
+            const rulesArray = [...(item.rules || [])];
+            if (item.required) {
+                rulesArray.push({ required: true, message: item.required });
+            }
+            return rulesArray;
+        }, [item.rules, item.required]);
+        // 为Upload类型的表单项默认添加valuePropName="fileList"和值转换逻辑
+        const formItemProps = useMemo(() => {
+            const props = { ...item.formItemProps };
+            if (item.type === 'upload') {
+                // 如果用户没有明确设置valuePropName，则默认使用fileList
+                if (!props.valuePropName) {
+                    props.valuePropName = 'fileList';
+                }
+                // 添加getValueProps确保传递给Upload的fileList始终是数组
+                if (!props.getValueProps) {
+                    props.getValueProps = (value) => {
+                        // 确保fileList始终是数组
+                        return {
+                            fileList: Array.isArray(value) ? value : [],
+                        };
+                    };
+                }
+            }
+            return props;
+        }, [item.formItemProps, item.type]);
+        const mergedFormItemLayout = useMemo(() => ({
+            ...formItemLayout,
             ...item.itemLayout,
-        };
-        return (_jsx(Col, { span: item.span || 24 / column, children: _jsxs(Row, { className: 'item-row', children: [_jsx("div", { className: classname('item-wrapper'), children: _jsx(Form.Item, { label: item.label, name: item.id, rules: rules, initialValue: item.initialValue, ...formItemLayout, ...item.formItemProps, children: renderItem(item, form) }) }), item.suffix] }) }, `col-${item.id}`));
-    };
-    return (_jsx(CompThemeProvider, { children: _jsx(Form, { form: form, ...formProps, className: `${classname()} ${formProps?.className}`, children: _jsx(Row, { gutter: MFormItemConst.defaultRowGutter, ...formRowProps, className: `${classname('grid')} ${formRowProps?.className}`, children: formItems.map(e => renderFormItem(e)) }) }) }));
-}
+        }), [formItemLayout, item.itemLayout]);
+        return (_jsx(Col, { span: item.span || 24 / column, children: _jsxs(Row, { className: 'item-row', children: [_jsx("div", { className: classname('item-wrapper'), children: _jsx(Form.Item, { label: item.label, name: item.id, rules: rules, initialValue: item.initialValue, ...mergedFormItemLayout, ...formItemProps, children: renderItem(item, form) }) }), item.suffix] }) }, `col-${item.id}`));
+    }, [column, form, formItemLayout, renderItem]);
+    // 优化：缓存表单容器类名
+    const formClassName = useMemo(() => {
+        return `${classname()} ${formProps?.className || ''}`.trim();
+    }, [formProps?.className]);
+    // 优化：缓存网格容器类名
+    const gridClassName = useMemo(() => {
+        return `${classname('grid')} ${formRowProps?.className || ''}`.trim();
+    }, [formRowProps?.className]);
+    // 优化：缓存渲染的表单项
+    const renderedFormItems = useMemo(() => {
+        return formItems.map(item => renderFormItem(item));
+    }, [formItems, renderFormItem]);
+    return (_jsx(CompThemeProvider, { children: _jsx(Form, { form: form, ...formProps, className: formClassName, children: _jsx(Row, { gutter: MFormItemConst.defaultRowGutter, ...formRowProps, className: gridClassName, children: renderedFormItems }) }) }));
+});
 MForm.displayName = 'MForm';
 export default MForm;
 export * from './MFormItemConst';

package/dist/constants/date.d.ts

@@ -1,13 +1,44 @@
+/**
+ * 日期格式常量 - 增强版本，提供更好的类型安全
+ */
 export declare const DATE_FORMAT: {
-    YMD_Hms: string;
-    YMD: string;
-    YMD2: string;
-    YMD_POINT: string;
-    Hms: string;
-    Hm: string;
-    YMD_000: string;
-    YMD_end: string;
-    YMD_Hm: string;
-    YMD_SLASH: string;
-    YMD_SLASH_Hms: string;
+    /** 年月日时分秒: 2024-01-01 12:30:45 */
+    readonly YMD_Hms: "YYYY-MM-DD HH:mm:ss";
+    /** 年月日: 2024-01-01 */
+    readonly YMD: "YYYY-MM-DD";
+    /** 紧凑年月日: 20240101 */
+    readonly YMD2: "YYYYMMDD";
+    /** 点号分隔年月日: 2024.1.1 */
+    readonly YMD_POINT: "YYYY.M.DD";
+    /** 时分秒: 12:30:45 */
+    readonly Hms: "HH:mm:ss";
+    /** 时分: 12:30 */
+    readonly Hm: "HH:mm";
+    /** 年月日开始时间: 2024-01-01 00:00:00 */
+    readonly YMD_000: "YYYY-MM-DD 00:00:00";
+    /** 年月日结束时间: 2024-01-01 23:59:59 */
+    readonly YMD_end: "YYYY-MM-DD 23:59:59";
+    /** 紧凑年月日时分: 20240101 1230 */
+    readonly YMD_Hm: "YYYYMMDD HHmm";
+    /** 斜杠分隔年月日: 2024/01/01 */
+    readonly YMD_SLASH: "YYYY/MM/DD";
+    /** 斜杠分隔年月日时分秒: 2024/01/01 12:30:45 */
+    readonly YMD_SLASH_Hms: "YYYY/MM/DD HH:mm:ss";
+};
+/** 日期格式类型 */
+export type DateFormat = typeof DATE_FORMAT[keyof typeof DATE_FORMAT];
+/**
+ * 常用日期格式别名，便于使用
+ */
+export declare const DATE_ALIASES: {
+    /** 默认完整日期时间 */
+    readonly DEFAULT: "YYYY-MM-DD HH:mm:ss";
+    /** 仅日期 */
+    readonly DATE: "YYYY-MM-DD";
+    /** 仅时间 */
+    readonly TIME: "HH:mm:ss";
+    /** 紧凑格式 */
+    readonly COMPACT: "YYYYMMDD";
+    /** 斜杠格式 */
+    readonly SLASH: "YYYY/MM/DD";
 };

package/dist/constants/date.js

@@ -1,13 +1,42 @@
+/**
+ * 日期格式常量 - 增强版本，提供更好的类型安全
+ */
 export const DATE_FORMAT = {
+    /** 年月日时分秒: 2024-01-01 12:30:45 */
     YMD_Hms: 'YYYY-MM-DD HH:mm:ss',
+    /** 年月日: 2024-01-01 */
     YMD: 'YYYY-MM-DD',
+    /** 紧凑年月日: 20240101 */
     YMD2: 'YYYYMMDD',
+    /** 点号分隔年月日: 2024.1.1 */
     YMD_POINT: 'YYYY.M.DD',
+    /** 时分秒: 12:30:45 */
     Hms: 'HH:mm:ss',
+    /** 时分: 12:30 */
     Hm: 'HH:mm',
+    /** 年月日开始时间: 2024-01-01 00:00:00 */
     YMD_000: 'YYYY-MM-DD 00:00:00',
+    /** 年月日结束时间: 2024-01-01 23:59:59 */
     YMD_end: 'YYYY-MM-DD 23:59:59',
+    /** 紧凑年月日时分: 20240101 1230 */
     YMD_Hm: 'YYYYMMDD HHmm',
+    /** 斜杠分隔年月日: 2024/01/01 */
     YMD_SLASH: 'YYYY/MM/DD',
+    /** 斜杠分隔年月日时分秒: 2024/01/01 12:30:45 */
     YMD_SLASH_Hms: 'YYYY/MM/DD HH:mm:ss',
 };
+/**
+ * 常用日期格式别名，便于使用
+ */
+export const DATE_ALIASES = {
+    /** 默认完整日期时间 */
+    DEFAULT: DATE_FORMAT.YMD_Hms,
+    /** 仅日期 */
+    DATE: DATE_FORMAT.YMD,
+    /** 仅时间 */
+    TIME: DATE_FORMAT.Hms,
+    /** 紧凑格式 */
+    COMPACT: DATE_FORMAT.YMD2,
+    /** 斜杠格式 */
+    SLASH: DATE_FORMAT.YMD_SLASH,
+};

package/dist/constants/pattern.d.ts

@@ -1,90 +1,97 @@
-export declare class PatternType {
-    /**
-     * 整数
-     */
-    static readonly integerRegex: RegExp;
-    /**
-     * 正整数
-     */
-    static readonly positiveIntegerRegex: RegExp;
-    /**
-     * 负整数
-     */
-    static readonly negativeIntegerRegex: RegExp;
-    /**
-     * 浮点数
-     */
-    static readonly floatRegex: RegExp;
-    /**
-     * 字母
-     */
-    static readonly letter: RegExp;
-    /**
-     * 汉字
-     */
-    static readonly chinese: RegExp;
-    /**
-     * 数字
-     */
-    static readonly number: RegExp;
-    /**
-     * 用户名 字母开头，允许字母数字下划线，长度4-16
-     */
-    static readonly username: RegExp;
-    /**
-     * 强用户名 必须包含大小写字母和数字，6-20位
-     */
-    static readonly strongUsername: RegExp;
-    /**
-     * 密码 至少8位，包含字母和数字
-     */
-    static readonly password: RegExp;
-    /**
-     * 强密码 至少8位，包含大小写字母、数字和特殊字符
-     */
-    static readonly strongPassword: RegExp;
-    /**
-     * 中国大陆的手机号
-     */
-    static readonly phone: RegExp;
-    /**
-     * 带区号的手机号
-     */
-    static readonly phoneWithAreaCode: RegExp;
-    /**
-     * 邮箱
-     */
-    static readonly email: RegExp;
-    /**
-     * 身份证
-     */
-    static readonly idCard: RegExp;
-    /**
-     * 银行卡
-     */
-    static readonly bankCard: RegExp;
-    /**
-     * 邮政编码
-     */
-    static readonly zipCode: RegExp;
-    /**
-     * IP
-     */
-    static readonly ip: RegExp;
-    /**
-     * URL
-     */
-    static readonly url: RegExp;
-    /**
-     * 车牌
-     */
-    static readonly carNumber: RegExp;
-    /**
-     * 时间 hh:mm:ss
-     */
-    static readonly time: RegExp;
-    /**
-     * 日期 YYYY-MM-DD
-     */
-    static readonly date: RegExp;
+/**
+ * 正则表达式模式常量 - 增强版本，提供验证函数和类型安全
+ */
+/**
+ * 正则表达式类型定义
+ */
+export type PatternType = 'integer' | 'positiveInteger' | 'negativeInteger' | 'float' | 'letter' | 'chinese' | 'number' | 'username' | 'strongUsername' | 'password' | 'strongPassword' | 'phone' | 'phoneWithAreaCode' | 'email' | 'idCard' | 'bankCard' | 'zipCode' | 'ip' | 'url' | 'carNumber' | 'time' | 'date';
+export declare class PatternValidator {
+    static readonly patterns: {
+        /** 整数 */
+        readonly integer: RegExp;
+        /** 正整数 */
+        readonly positiveInteger: RegExp;
+        /** 负整数 */
+        readonly negativeInteger: RegExp;
+        /** 浮点数 */
+        readonly float: RegExp;
+        /** 字母 */
+        readonly letter: RegExp;
+        /** 汉字 */
+        readonly chinese: RegExp;
+        /** 数字 */
+        readonly number: RegExp;
+        /** 用户名：字母开头，允许字母数字下划线，长度4-16 */
+        readonly username: RegExp;
+        /** 强用户名：必须包含大小写字母和数字，6-20位 */
+        readonly strongUsername: RegExp;
+        /** 密码：至少8位，包含字母和数字 */
+        readonly password: RegExp;
+        /** 强密码：至少8位，包含大小写字母、数字和特殊字符 */
+        readonly strongPassword: RegExp;
+        /** 中国大陆手机号 */
+        readonly phone: RegExp;
+        /** 带区号的手机号 */
+        readonly phoneWithAreaCode: RegExp;
+        /** 邮箱 */
+        readonly email: RegExp;
+        /** 身份证 */
+        readonly idCard: RegExp;
+        /** 银行卡 */
+        readonly bankCard: RegExp;
+        /** 邮政编码 */
+        readonly zipCode: RegExp;
+        /** IP地址 */
+        readonly ip: RegExp;
+        /** URL */
+        readonly url: RegExp;
+        /** 车牌号 */
+        readonly carNumber: RegExp;
+        /** 时间格式 hh:mm:ss */
+        readonly time: RegExp;
+        /** 日期格式 YYYY-MM-DD */
+        readonly date: RegExp;
+    };
+    /**
+     * 验证字符串是否匹配指定模式
+     * @param type 模式类型
+     * @param value 要验证的值
+     * @returns 是否匹配
+     */
+    static validate(type: PatternType, value: string): boolean;
+    /**
+     * 获取指定模式的正则表达式
+     * @param type 模式类型
+     * @returns 正则表达式
+     */
+    static getPattern(type: PatternType): RegExp;
+    /**
+     * 验证邮箱（特殊处理，支持更复杂的验证）
+     * @param email 邮箱地址
+     * @returns 是否有效
+     */
+    static validateEmail(email: string): boolean;
+    /**
+     * 验证手机号（支持更多运营商）
+     * @param phone 手机号
+     * @returns 是否有效
+     */
+    static validatePhone(phone: string): boolean;
+    /**
+     * 验证身份证（包含校验位验证）
+     * @param idCard 身份证号
+     * @returns 是否有效
+     */
+    static validateIdCard(idCard: string): boolean;
+    /**
+     * 创建自定义验证函数
+     * @param pattern 正则表达式
+     * @param errorMessage 错误消息
+     * @returns 验证函数
+     */
+    static createValidator(pattern: RegExp, errorMessage?: string): (value: string) => {
+        valid: boolean;
+        message?: string;
+    };
 }
+export declare const PatternType: typeof PatternValidator;