plain-design 1.0.0-beta.12 → 1.0.0-beta.120

package/src/packages/components/Form/form.scss

@@ -11,6 +11,22 @@
       line-height: $height;
       font-size: $font-size;
     }
+
+    /*@formatter:off*/
+    .form-item-validate-message-inner {
+      font-size: $font-size;
+
+    }
+    .form-item-validate-position-bottom-left { .form-item-validate-message-inner {line-height: 1.5em} }
+    .form-item-validate-position-bottom-right { .form-item-validate-message-inner {line-height: 1.5em} }
+    .form-item-validate-position-right {
+      .form-item-validate-message-inner {
+        margin-left: $margin;
+        line-height: $height;
+        height: $height;
+      }
+    }
+/*@formatter:on*/
   }
 
   @include prefix(form-item) {
@@ -33,6 +49,12 @@
     .form-item-content {
       display: inline-block;
       box-sizing: border-box;
+
+      .form-item-content-inner {
+        & > .#{componentName(form-item)}:first-child {
+          margin-top: 0 !important;
+        }
+      }
     }
 
     &.form-item-label-align-left {
@@ -60,16 +82,19 @@
     &.form-item-content-align-left {
       .form-item-content-inner {
         text-align: left;
+        position: relative;
       }
     }
     &.form-item-content-align-center {
       .form-item-content-inner {
         text-align: center;
+        position: relative;
       }
     }
     &.form-item-content-align-right {
       .form-item-content-inner {
         text-align: right;
+        position: relative;
       }
     }
 
@@ -103,12 +128,43 @@
       }
     }
 
-
     &.form-item-no-label {
       .form-item-content {
         width: 100% !important;
       }
     }
+
+    .form-item-validate-message-inner {
+      color: plv(error-6);
+      white-space: nowrap;
+      display: flex;
+      align-items: center;
+      @include comp(icon) {
+        margin-right: 0.25em;
+      }
+    }
+    &.form-item-validate-position-bottom-left {
+      .form-item-validate-message-inner {
+        position: absolute;
+        top: 100%;
+        left: 0;
+      }
+    }
+    &.form-item-validate-position-bottom-right {
+      .form-item-validate-message-inner {
+        position: absolute;
+        top: 100%;
+        right: 0;
+      }
+    }
+    &.form-item-validate-position-right {
+      .form-item-validate-message-inner {
+        position: absolute;
+        left: 100%;
+        top: 0;
+      }
+    }
+
   }
 
   &.form-column-1 {
@@ -130,7 +186,7 @@
   }
 
   &:not(.form-column-1) {
-    overflow: hidden;
+    //overflow: hidden;
     @include prefix(form-item) {
       display: inline-block;
     }
@@ -154,11 +210,15 @@
 
   &.form-vertical-label {
     @include prefix(form-item) {
+      .form-item-label {
+        display: block;
+      }
       .form-item-label, .form-item-content {
         width: 100%;
       }
     }
   }
+
   &:not(.form-vertical-label) {
     @include prefix(form-item) {
       .form-item-label {
@@ -166,4 +226,27 @@
       }
     }
   }
+
+  &.form-hide-label {
+    .form-item-label {
+      display: none;
+    }
+  }
+
+  &.form-full {
+    height: 100%;
+    width: 100%;
+
+    .form-inner {
+      height: 100%;
+      width: 100%;
+      margin: 0 !important;
+    }
+  }
+
+  &.form-input-mode-text {
+    .form-item-label, .form-item-content {
+      line-height: calc(1em + 8px) !important;
+    }
+  }
 }

package/src/packages/components/Form/index.tsx

@@ -1,4 +1,4 @@
-import {designComponent, getComponentCls, useClasses} from "plain-design-composition";
+import {designComponent, getComponentCls, useClasses} from "@peryl/react-compose";
 import './form.scss';
 import {FormValidatePropsOption} from "./validate/validate.utils";
 import {DefaultFormLabelWidth, FormLayoutPropsOption, useFormLayout} from "./layout/useFormLayout";
@@ -13,6 +13,7 @@ export const Form = designComponent({
     DefaultFormLabelWidth,
   },
   props: {
+    full: { type: Boolean },
     ...EditProps,
     ...StyleProps,
     ...FormValidatePropsOption,
@@ -25,7 +26,12 @@ export const Form = designComponent({
   setup({ props, slots }) {
 
     /*编辑控制*/
-    useEdit({ adjust: (ret) => {ret.loading = null;} });
+    useEdit({
+      adjust: (ret) => {
+        ret.loading = null;
+        props.inputMode === 'text' && (ret.readonly = true);
+      }
+    });
 
     /*样式控制*/
     const { styleComputed } = useStyle();
@@ -43,6 +49,9 @@ export const Form = designComponent({
       {
         ['form-vertical-label']: !!props.verticalLabel,
         ['form-column-center']: !!props.singleColumnCenter,
+        ['form-hide-label']: !!props.hideLabel,
+        'form-full': props.full,
+        'form-input-mode-text': props.inputMode === 'text',
       },
     ]);
 

package/src/packages/components/Form/layout/useFormLayout.tsx

@@ -1,8 +1,10 @@
-import {computed, ExtractPropTypes, inject, PropType, provide, useStyles} from "plain-design-composition";
-import {createEnum} from "plain-utils/utils/createEnum";
-import {unit} from "plain-utils/string/unit";
-import {removeUnit} from "plain-utils/string/removeUnit";
-import {ThemeSize, tStyleComputed} from "../../../uses/useStyle";
+import {computed, ExtractPropTypes, inject, PropType, provide, useStyles} from "@peryl/react-compose";
+import {createEnum} from "@peryl/utils/createEnum";
+import {unit} from "@peryl/utils/unit";
+import {removeUnit} from "@peryl/utils/removeUnit";
+import {InputMode, ThemeSize, tStyleComputed} from "../../../uses/useStyle";
+import ApplicationConfigurationProvider from "../../ApplicationConfigurationProvider";
+import {PlainObject} from "@peryl/utils/event";
 
 /**
  * 表单的文本以及内容对齐方式
@@ -41,6 +43,9 @@ export const FormLayoutPropsOption = {
   verticalLabel: { type: Boolean as PropType<boolean> },                                  // 纵向的表单
   gutter: { type: Number },                                                               // 列间隔
   rowGutter: { type: Number },                                                            // 行间隔
+  validateMessagePosition: { type: String as PropType<typeof FormValidateMessagePosition.TYPE> }, // 校验消息的位置
+  hideLabel: { type: Boolean },                                                           // 隐藏form-item的label
+  inputMode: { type: String as PropType<typeof InputMode.TYPE> },                         // 内部Input的类型mode
 } as const;
 
 /**
@@ -56,6 +61,7 @@ export type tFormLayoutPropsType = ExtractPropTypes<typeof FormLayoutPropsOption
  * @date    2022.9.4 22:46
  */
 export const FormItemLayoutPropsOption = {
+  hideLabel: { type: Boolean },                                                       // 隐藏label
   labelWidth: { type: [String, Number] as PropType<string | number> },                // 显示文本宽度
   column: { type: [String, Number] as PropType<string | number>, default: 1 },        // 多列表单的列数
   block: { type: Boolean as PropType<boolean> },                                      // 占用一行
@@ -63,6 +69,8 @@ export const FormItemLayoutPropsOption = {
   contentAlign: { type: String as PropType<typeof eFormContentAlign.TYPE> },          // content 对齐方式
   singleColumnContentWidth: { type: Number },                                         // 单列的时候form item content的宽度
   colon: { type: Boolean as PropType<boolean | null>, default: null },                // label的冒号
+  validateMessagePosition: { type: String as PropType<typeof FormValidateMessagePosition.TYPE> }, // 校验消息的位置
+  negativeInnerMarginTop: { type: Boolean },                                          // inner节点启用负的marginTop值
 } as const;
 
 /**
@@ -90,48 +98,80 @@ export const DefaultFormLabelWidth = (() => {
 export const useFormLayout = (() => {
 
   const FORM_LAYOUT_PROVIDER = '@@FORM_LAYOUT_PROVIDER';
+  const FORM_ITEM_LAYOUT_PROVIDER = '@@FORM_ITEM_LAYOUT_PROVIDER';
 
   const useForm = (props: tFormLayoutPropsType, styleComputed: tStyleComputed) => {
+
+    const configuration = ApplicationConfigurationProvider.inject();
+
     /*是否为单列*/
     const isSingleColumn = computed(() => props.column === 1);
     /*列间距*/
     const gutter = computed((): number => {
-      if (props.gutter != null) {return removeUnit(props.gutter) as any;}
+      if (props.gutter != null) {
+        return removeUnit(props.gutter) as any;
+      }
       /*单列的情况下不设置列间距*/
       return isSingleColumn.value ? 0 : FormSizeGutter[styleComputed.value.size];
     });
     /*行间距*/
     const rowGutter = computed((): number => {
-      if (props.rowGutter != null) {return removeUnit(props.rowGutter) as any;}
-      return gutter.value || FormSizeRowsGutter[styleComputed.value.size];
+      if (props.inputMode === 'text') {return 4;}
+      if (props.rowGutter != null) {
+        return removeUnit(props.rowGutter) as any;
+      }
+      return Math.max(
+        1.25 * ((removeUnit(configuration.value.theme.vars[`margin-${styleComputed.value.size}`]) || 0) as number),
+        14,
+      );
+    });
+    /*校验消息的位置*/
+    const validateMessagePosition = computed(() => {
+      if (!!props.validateMessagePosition) {return props.validateMessagePosition;}
+
+      /*纵向文本的情况下，校验消息默认放在左下角*/
+      if (props.verticalLabel) {return FormValidateMessagePosition["bottom-right"];}
+      if (isSingleColumn.value) {
+        /*单列的情况下，校验消息默认放在右侧*/
+        return FormValidateMessagePosition['right'];
+      } else {
+        /*其他都放在右下角*/
+        return FormValidateMessagePosition['bottom-right'];
+      }
     });
     /*根节点样式*/
     const styles = useStyles((styles) => {
       if (!isSingleColumn.value) {
-        styles.padding = `${rowGutter.value / 2}px ${gutter.value}px`;
+        // styles.padding = `${rowGutter.value / 2}px ${gutter.value}px`;
       }
     });
     /*inner节点样式，有列间距时拓展宽度*/
     const innerStyles = useStyles(style => {
       if (!isSingleColumn.value && !!gutter.value) {
         style.width = `calc(100% + ${unit(gutter.value)})`;
-        style.marginLeft = unit(-gutter.value / 2);
       }
+      style.margin = `${-rowGutter.value / 2}px ${unit(-gutter.value / 2)}`;
     });
-    const refer = { props, styles, gutter, rowGutter, innerStyles, isSingleColumn };
+    const refer = { props, styles, gutter, rowGutter, innerStyles, isSingleColumn, validateMessagePosition };
     provide(FORM_LAYOUT_PROVIDER, refer);
     return refer;
   };
 
   const useFormItem = (props: tFormItemLayoutPropsType) => {
+
     const form = inject<ReturnType<typeof useForm>>(FORM_LAYOUT_PROVIDER)!;
 
+    const parentFormItem = inject<PlainObject | null>(FORM_ITEM_LAYOUT_PROVIDER, null);
+
     /**
      * 文本宽度
      * @author  韦胜健
      * @date    2022.9.4 23:21
      */
     const labelWidth = computed((): number | string => {
+      if (form.props.hideLabel) {
+        return 0;
+      }
       /*纵向文本表单情况下，文本宽度占用整行*/
       if (form.props.verticalLabel) {
         return '100%';
@@ -178,15 +218,16 @@ export const useFormLayout = (() => {
      * @author  韦胜健
      * @date    2022.9.4 23:22
      */
-    const labelAlign = computed(() => props.labelAlign || form.props.labelAlign || eFormLabelAlign.left);
+    const labelAlign = computed(() => form.props.verticalLabel ? eFormLabelAlign.left : (props.labelAlign || form.props.labelAlign));
 
     /**
      * 内容对其方式
      * @author  韦胜健
      * @date    2022.9.4 23:22
      */
-    const contentAlign = computed(() => props.contentAlign || form.props.contentAlign || eFormContentAlign.left);
+    const contentAlign = computed(() => props.contentAlign || form.props.contentAlign);
 
+    const validateMessagePosition = computed(() => props.validateMessagePosition || form.validateMessagePosition.value);
     /**
      * 根节点样式
      * @author  韦胜健
@@ -196,11 +237,17 @@ export const useFormLayout = (() => {
       styles.width = (() => {
         const totalColumn = Number(form.props.column);
         const itemColumn = column.value;
-        if (itemColumn === totalColumn) {return '100%';}
+        if (itemColumn === totalColumn) {
+          return '100%';
+        }
         return `calc(${Number((itemColumn / totalColumn).toFixed(4)) * 100}%)`;
       })();
       styles.padding = `0 ${unit(form.gutter.value / 2)}`;
-      styles.margin = `${form.rowGutter.value / 2}px 0`;
+      if (!parentFormItem) {
+        styles.margin = `${form.rowGutter.value / 2}px 0`;
+      } else {
+        styles.marginTop = `${form.rowGutter.value}px`;
+      }
     });
 
     /**
@@ -210,7 +257,7 @@ export const useFormLayout = (() => {
      */
     const labelStyles = useStyles(style => {
       if (!form.isSingleColumn.value) {
-        if (!!labelWidth.value && !form.props.verticalLabel) {
+        if (labelWidth.value != null && !form.props.verticalLabel) {
           style.width = unit(labelWidth.value);
         }
       }
@@ -222,35 +269,54 @@ export const useFormLayout = (() => {
      */
     const contentStyles = useStyles(style => {
       if (!form.isSingleColumn.value) {
-        if (!!labelWidth.value && !form.props.verticalLabel) {
+        if (labelWidth.value != null && !form.props.verticalLabel) {
           style.width = `calc(100% - ${unit(labelWidth.value)})`;
         }
       } else {
         style.width = unit((() => {
-          if (props.singleColumnContentWidth) {return props.singleColumnContentWidth;}
-          if (form.props.singleColumnContentWidth) {return form.props.singleColumnContentWidth;}
+          if (props.singleColumnContentWidth) {
+            return props.singleColumnContentWidth;
+          }
+          if (form.props.singleColumnContentWidth) {
+            return form.props.singleColumnContentWidth;
+          }
           if (form.props.column === 1 && !!form.props.labelWidth) {
             return `calc(100% - ${unit(form.props.labelWidth)})`;
           }
-          return 300;
+          return 400;
         })());
       }
     });
 
-    return {
+    const contentInnerStyles = useStyles(style => {
+      if (props.negativeInnerMarginTop) {style.marginTop = `-${form.rowGutter.value}px`;}
+    });
+
+    const refer = {
       colon,
       labelAlign,
       contentAlign,
       styles,
       labelStyles,
       contentStyles,
+      contentInnerStyles,
       form,
+      validateMessagePosition,
     };
+
+    provide(FORM_ITEM_LAYOUT_PROVIDER, refer);
+
+    return refer;
   };
 
   return { useForm, useFormItem };
 })();
 
+/**
+ * 不同尺寸下的默认列间距
+ * @author  韦胜健
+ * @date    2024.7.18 20:52
+ */
 const FormSizeGutter: Record<typeof ThemeSize.TYPE, number> = {
   large: 16,
   normal: 12,
@@ -258,9 +324,8 @@ const FormSizeGutter: Record<typeof ThemeSize.TYPE, number> = {
   mini: 4,
 };
 
-const FormSizeRowsGutter: Record<typeof ThemeSize.TYPE, number> = {
-  large: 12,
-  normal: 8,
-  small: 4,
-  mini: 2,
-};
+export const FormValidateMessagePosition = createEnum([
+  'bottom-left',
+  'bottom-right',
+  'right'
+] as const);

package/src/packages/components/Form/types/any.tsx

@@ -1,4 +1,4 @@
-import {toArray} from "plain-utils/utils/toArray";
+import {toArray} from "@peryl/utils/toArray";
 import {iValidation} from "../validate/createValidation";
 import i18n from "../../i18n";
 
@@ -18,7 +18,7 @@ export function registryAnyValidationType(Validation: iValidation) {
     /*any值的必填校验*/
     if (required) {
       if (isEmpty) {
-        return getMessage(i18n('base.validate.require').d('必填'));
+        return getMessage(i18n.$it('base.validate.require').d('必填'));
       }
     }
 
@@ -26,28 +26,28 @@ export function registryAnyValidationType(Validation: iValidation) {
     const pattern = rule.pattern as RegExp;
     if (!!pattern && !isEmpty) {
       if (!pattern.test(String(value))) {
-        return getMessage(`${i18n('base.validate.notMatchPattern').d('不符合表达式')}：${pattern.source}`);
+        return getMessage(`${i18n.$it('base.validate.notMatchPattern').d('不符合表达式')}：${pattern.source}`);
       }
     }
 
     /*最小值*/
     if (rule.min != null) {
-      return getMessage(i18n('base.validate.canNotUseMinInAnyType').d('any类型无法使用min校验'));
+      return getMessage(i18n.$it('base.validate.canNotUseMinInAnyType').d('any类型无法使用min校验'));
     }
     /*最大值*/
     if (rule.max != null) {
-      return getMessage(i18n('base.validate.canNotUseMaxInAnyType').d('any类型无法使用max校验'));
+      return getMessage(i18n.$it('base.validate.canNotUseMaxInAnyType').d('any类型无法使用max校验'));
     }
     /*固定长度*/
     if (rule.len != null) {
-      return getMessage(i18n('base.validate.canNotUseLenInAnyType').d('any类型无法使用len校验'));
+      return getMessage(i18n.$it('base.validate.canNotUseLenInAnyType').d('any类型无法使用len校验'));
     }
 
     /*枚举范围（取值范围）*/
     const _enum = rule.enum;
     if (_enum && !isEmpty) {
       if (toArray(value).some(i => _enum.indexOf(i) === -1)) {
-        return getMessage(i18n('base.validate.outOfRange', { value, range: _enum }).d(`值${value}超出了范围${_enum}`));
+        return getMessage(i18n.$it('base.validate.outOfRange', { value, range: _enum }).d(`值${value}超出了范围${_enum}`));
       }
     }
   });

package/src/packages/components/Form/types/array.tsx

@@ -1,4 +1,4 @@
-import {toArray} from "plain-utils/utils/toArray";
+import {toArray} from "@peryl/utils/toArray";
 import {iValidation} from "../validate/createValidation";
 import {iRegistrationValidator} from "../validate/validate.utils";
 import i18n from "../../i18n";
@@ -9,7 +9,7 @@ export function registryArrayValidationType(Validation: iValidation) {
 
 export const validateArray: iRegistrationValidator = async ({ value, rule, required, getMessage }) => {
   if (value != null && !Array.isArray(value)) {
-    return getMessage(i18n('base.validate.pleaseEnterArrayValue').d('请输入数组'));
+    return getMessage(i18n.$it('base.validate.pleaseEnterArrayValue').d('请输入数组'));
   }
 
   /*是否没有值*/
@@ -22,34 +22,34 @@ export const validateArray: iRegistrationValidator = async ({ value, rule, requi
   /*any值的必填校验*/
   if (required) {
     if (isEmpty) {
-      return getMessage(i18n('base.validate.require').d('必填'));
+      return getMessage(i18n.$it('base.validate.require').d('必填'));
     }
   }
 
   /*正则匹配*/
   const pattern = rule.pattern as RegExp;
   if (!!pattern && !isEmpty) {
-    return getMessage(i18n('base.validate.arrayCannotUsePatternValidation').d('数组不能使用正则校验'));
+    return getMessage(i18n.$it('base.validate.arrayCannotUsePatternValidation').d('数组不能使用正则校验'));
   }
 
   /*最小值*/
   if (rule.min != null && !isEmpty && value.length < rule.min) {
-    return getMessage(i18n('base.validate.minimunValues', { num: rule.min }).d(`最少${rule.min}个值`));
+    return getMessage(i18n.$it('base.validate.minimunValues', { num: rule.min }).d(`最少${rule.min}个值`));
   }
   /*最大值*/
   if (rule.max != null && !isEmpty && value.length > rule.max) {
-    return getMessage(i18n('base.validate.maximunValues', { num: rule.max }).d(`最多${rule.max}个值`));
+    return getMessage(i18n.$it('base.validate.maximunValues', { num: rule.max }).d(`最多${rule.max}个值`));
   }
   /*固定长度*/
   if (rule.len != null && !isEmpty && value.length !== rule.len) {
-    return getMessage(i18n('base.validate.fixedValues', { num: rule.len }).d(`固定${rule.len}个值`));
+    return getMessage(i18n.$it('base.validate.fixedValues', { num: rule.len }).d(`固定${rule.len}个值`));
   }
 
   /*枚举范围（取值范围）*/
   const _enum = rule.enum;
   if (_enum && !isEmpty) {
     if (toArray(value).some(i => _enum.indexOf(i) === -1)) {
-      return getMessage(i18n('base.validate.outOfRange', { value, range: _enum }).d(`值${value}超出了范围${_enum}`));
+      return getMessage(i18n.$it('base.validate.outOfRange', { value, range: _enum }).d(`值${value}超出了范围${_enum}`));
     }
   }
 };

package/src/packages/components/Form/types/date.tsx

@@ -1,5 +1,5 @@
 import {iValidation} from "../validate/createValidation";
-import {toArray} from "plain-utils/utils/toArray";
+import {toArray} from "@peryl/utils/toArray";
 import {plainDate} from "../../../utils/plainDate";
 import {iRegistrationValidator} from "../validate/validate.utils";
 import i18n from "../../i18n";
@@ -27,7 +27,7 @@ export const validateDatetimeValue = async ({ value, rule, required, getMessage
   /*any值的必填校验*/
   if (required) {
     if (isEmpty) {
-      return getMessage(i18n('base.validate.require').d('必填'));
+      return getMessage(i18n.$it('base.validate.require').d('必填'));
     }
   }
 
@@ -37,7 +37,7 @@ export const validateDatetimeValue = async ({ value, rule, required, getMessage
   }
   if (!!pattern && !isEmpty) {
     if (!pattern.test(String(value))) {
-      return getMessage(`${i18n('base.validate.notMatchPattern').d('不符合表达式')}：${pattern.source}`);
+      return getMessage(`${i18n.$it('base.validate.notMatchPattern').d('不符合表达式')}：${pattern.source}`);
     }
   }
 
@@ -46,7 +46,7 @@ export const validateDatetimeValue = async ({ value, rule, required, getMessage
     const minPd = plainDate(String(rule.min), { displayFormat: format, valueFormat: format });
     const invalid = toArray(value).find(i => plainDate(String(i), { displayFormat: format, valueFormat: format })[unit] < minPd[unit]);
     if (!!invalid) {
-      return getMessage(i18n('base.validate.notLessThan', { num: rule.min }).d(`不能小于：${rule.min}`));
+      return getMessage(i18n.$it('base.validate.notLessThan', { num: rule.min }).d(`不能小于：${rule.min}`));
     }
   }
   /*最大值*/
@@ -54,19 +54,19 @@ export const validateDatetimeValue = async ({ value, rule, required, getMessage
     const maxPd = plainDate(String(rule.max), { displayFormat: format, valueFormat: format });
     const invalid = toArray(value).find(i => plainDate(String(i), { displayFormat: format, valueFormat: format })[unit] > maxPd[unit]);
     if (!!invalid) {
-      return getMessage(i18n('base.validate.notLargerThan', { num: rule.max }).d(`不能大于：${rule.max}`));
+      return getMessage(i18n.$it('base.validate.notLargerThan', { num: rule.max }).d(`不能大于：${rule.max}`));
     }
   }
   /*固定长度*/
   if (rule.len != null && Array.isArray(value) && value.length !== rule.len) {
-    return getMessage(i18n('base.validate.fixedValues', { num: rule.len }).d(`固定${rule.len}个值`));
+    return getMessage(i18n.$it('base.validate.fixedValues', { num: rule.len }).d(`固定${rule.len}个值`));
   }
 
   /*枚举范围（取值范围）*/
   const _enum = rule.enum;
   if (_enum && !isEmpty) {
     if (toArray(value).some(i => _enum.indexOf(i) === -1)) {
-      return getMessage(i18n('base.validate.outOfRange', { value, range: _enum }).d(`值${value}超出了范围${_enum}`));
+      return getMessage(i18n.$it('base.validate.outOfRange', { value, range: _enum }).d(`值${value}超出了范围${_enum}`));
     }
   }
 };

package/src/packages/components/Form/types/email.tsx

@@ -6,6 +6,6 @@ const defaultPattern = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-
 
 export function registryEmailValidationType(Validation: iValidation) {
   Validation.registryValidateType('email', async (param) => {
-    return checkStringValidation(param, { defaultPattern, patternMessage: i18n('base.validate.pleaseEnterCorrectEmail').d('请输入正确的邮箱地址') });
+    return checkStringValidation(param, { defaultPattern, patternMessage: i18n.$it('base.validate.pleaseEnterCorrectEmail').d('请输入正确的邮箱地址') });
   });
 }

package/src/packages/components/Form/types/idcard.tsx

@@ -8,6 +8,6 @@ const regexp18 =
 
 export function registryIdcardValidationType(Validation: iValidation) {
   Validation.registryValidateType('idcard', async (param) => {
-    return checkStringValidation(param, { defaultPattern: [regexp15, regexp18], patternMessage: i18n('base.validate.pleaseEnterCorrectIdCard').d('请输入正确的身份证号') });
+    return checkStringValidation(param, { defaultPattern: [regexp15, regexp18], patternMessage: i18n.$it('base.validate.pleaseEnterCorrectIdCard').d('请输入正确的身份证号') });
   });
 }

package/src/packages/components/Form/types/number.tsx

@@ -1,4 +1,4 @@
-import {toArray} from "plain-utils/utils/toArray";
+import {toArray} from "@peryl/utils/toArray";
 import {iValidation} from "../validate/createValidation";
 import i18n from "../../i18n";
 
@@ -16,14 +16,14 @@ export function registryNumberValidationType(Validation: iValidation) {
         value = Number(value);
       }
       if (typeof value !== "number" || isNaN(value)) {
-        return getMessage(i18n('base.validate.pleaseEnterNumber').d('请输入数字'));
+        return getMessage(i18n.$it('base.validate.pleaseEnterNumber').d('请输入数字'));
       }
     }
 
     /*any值的必填校验*/
     if (required) {
       if (isEmpty) {
-        return getMessage(i18n('base.validate.require').d('必填'));
+        return getMessage(i18n.$it('base.validate.require').d('必填'));
       }
     }
 
@@ -31,28 +31,28 @@ export function registryNumberValidationType(Validation: iValidation) {
     const pattern = rule.pattern as RegExp;
     if (!!pattern && !isEmpty) {
       if (!pattern.test(String(value))) {
-        return getMessage(`${i18n('base.validate.notMatchPattern').d('不符合表达式')}：${pattern.source}`);
+        return getMessage(`${i18n.$it('base.validate.notMatchPattern').d('不符合表达式')}：${pattern.source}`);
       }
     }
 
     /*最小值*/
     if (rule.min != null && !isEmpty && value < rule.min) {
-      return getMessage(i18n('base.validate.minValue', { num: rule.min }).d(`最小值${rule.min}`));
+      return getMessage(i18n.$it('base.validate.minValue', { num: rule.min }).d(`最小值${rule.min}`));
     }
     /*最大值*/
     if (rule.max != null && !isEmpty && value > rule.max) {
-      return getMessage(i18n('base.validate.maxValue', { num: rule.max }).d(`最大值${rule.max}`));
+      return getMessage(i18n.$it('base.validate.maxValue', { num: rule.max }).d(`最大值${rule.max}`));
     }
     /*固定长度*/
     if (rule.len != null && !isEmpty && String(value).length !== rule.len) {
-      return getMessage(i18n('base.validate.fixedLength', { num: rule.len }).d(`固定长度${rule.len}个字符`));
+      return getMessage(i18n.$it('base.validate.fixedLength', { num: rule.len }).d(`固定长度${rule.len}个字符`));
     }
 
     /*枚举范围（取值范围）*/
     const _enum = rule.enum;
     if (_enum && !isEmpty) {
       if (toArray(value).some(i => _enum.indexOf(i) === -1)) {
-        return getMessage(i18n('base.validate.outOfRange', { value, range: _enum }).d(`值${value}超出了范围${_enum}`));
+        return getMessage(i18n.$it('base.validate.outOfRange', { value, range: _enum }).d(`值${value}超出了范围${_enum}`));
       }
     }
   });