plain-design 1.0.0-beta.1 → 1.0.0-beta.100

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

@@ -2,7 +2,9 @@ import {computed, ExtractPropTypes, inject, PropType, provide, useStyles} from "
 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 {InputMode, ThemeSize, tStyleComputed} from "../../../uses/useStyle";
+import ApplicationConfigurationProvider from "../../ApplicationConfigurationProvider";
+import {PlainObject} from "plain-utils/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

@@ -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

@@ -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

@@ -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

@@ -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}`));
       }
     }
   });

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

@@ -6,6 +6,6 @@ const defaultPattern = /^1[3456789]\d{9}$/;
 
 export function registryPhoneValidationType(Validation: iValidation) {
   Validation.registryValidateType('phone', async (param) => {
-    return checkStringValidation(param, { defaultPattern, patternMessage: i18n('base.validate.pleaseEnterCorrectPhoneNumber').d('请输入正确的手机号码') });
+    return checkStringValidation(param, { defaultPattern, patternMessage: i18n.$it('base.validate.pleaseEnterCorrectPhoneNumber').d('请输入正确的手机号码') });
   });
 }

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

@@ -6,6 +6,6 @@ const defaultPattern = /^[1-9][0-9]{4,9}$/;
 
 export function registryQQValidationType(Validation: iValidation) {
   Validation.registryValidateType('qq', async (param) => {
-    return checkStringValidation(param, { defaultPattern, patternMessage: i18n('base.validate.pleaseEnterCorrectQQNum').d('请输入正确的QQ号码') });
+    return checkStringValidation(param, { defaultPattern, patternMessage: i18n.$it('base.validate.pleaseEnterCorrectQQNum').d('请输入正确的QQ号码') });
   });
 }

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

@@ -22,7 +22,7 @@ export function checkStringValidation(
   );
 
   if (!isEmpty && typeof value != "string" && typeof value != "number") {
-    return getMessage(i18n('base.validate.valueShouldBeStringOrNumber').d('值类型应该为字符串或者数字'));
+    return getMessage(i18n.$it('base.validate.valueShouldBeStringOrNumber').d('值类型应该为字符串或者数字'));
   }
 
   if (!isEmpty) {if (typeof value === "number") {value = String(value);}}
@@ -30,7 +30,7 @@ export function checkStringValidation(
   /*any值的必填校验*/
   if (required) {
     if (isEmpty) {
-      return getMessage(i18n('base.validate.require').d('必填'));
+      return getMessage(i18n.$it('base.validate.require').d('必填'));
     }
   }
 
@@ -41,28 +41,28 @@ export function checkStringValidation(
   if (!isEmpty && !!patterns.length) {
     const failPattern = patterns.find((i) => !i!.test(String(value)));
     if (!!failPattern) {
-      return getMessage(config?.patternMessage || `${i18n('base.validate.notMatchPattern').d('不符合表达式')}：${failPattern.source}`);
+      return getMessage(config?.patternMessage || `${i18n.$it('base.validate.notMatchPattern').d('不符合表达式')}：${failPattern.source}`);
     }
   }
 
   /*最小值*/
   if (rule.min != null && !isEmpty && value.length < rule.min) {
-    return getMessage(i18n('base.validate.minimunCharacters', { num: rule.min }).d(`最少${rule.min}个字符`));
+    return getMessage(i18n.$it('base.validate.minimunCharacters', { num: rule.min }).d(`最少${rule.min}个字符`));
   }
   /*最大值*/
   if (rule.max != null && !isEmpty && value.length > rule.max) {
-    return getMessage(i18n('base.validate.maximunCharacters', { num: rule.max }).d(`最多${rule.max}个字符`));
+    return getMessage(i18n.$it('base.validate.maximunCharacters', { num: rule.max }).d(`最多${rule.max}个字符`));
   }
   /*固定长度*/
   if (rule.len != null && !isEmpty && value.length !== rule.len) {
-    return getMessage(i18n('base.validate.fixedCharacters', { num: rule.len }).d(`固定${rule.len}个字符`));
+    return getMessage(i18n.$it('base.validate.fixedCharacters', { 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/validate/createValidation.tsx

@@ -54,7 +54,7 @@ export function createValidation() {
    * @author  韦胜健
    * @date    2022.11.5 22:43
    */
-  const useValidationParent = (formProps: { rules?: iFormValidatePropsType["rules"] }) => {
+  const useValidationParent = (formProps: { rules?: iFormValidatePropsType["rules"], anotherRules?: iFormValidatePropsType['anotherRules'] }) => {
 
     /**
      * 从FormItem等子组件中收集来的校验规则
@@ -68,7 +68,11 @@ export function createValidation() {
      * @author  韦胜健
      * @date    2022/8/22 18:22
      */
-    const rules = computed((): iValidateRule[] => ruleGetters.value.map((i) => i()).flat(1));
+    const rules = computed((): iValidateRule[] => {
+      let ret = ruleGetters.value.map((i) => i()).flat(1);
+      !!formProps.anotherRules && (ret = [...formProps.anotherRules, ...ret]);
+      return ret;
+    });
 
     /**
      * field映射label

package/src/packages/components/Form/validate/useFormValidation.tsx

@@ -2,6 +2,7 @@ import {eFormValidateMode, eFormValidateTrigger, getValidateResultMessage, iForm
 import {provide, reactive} from "plain-design-composition";
 import {$message} from "../../$message";
 import {Validation} from "./createValidation";
+import {AutoLoadingObserver} from "../../AutoLoadingObserver";
 
 /**
  * Form以及FormItem的上下文状态注入关键字
@@ -97,24 +98,28 @@ export function useFormValidation({ props }: { props: iFormValidatePropsType })
      * @date    2022.11.5 23:28
      */
     validate: async (config?: { autoLoading?: boolean, autoAlert?: boolean, }) => {
-      config = config || {};
-      if (config.autoLoading != false) {
-        loading.show();
-      }
-      try {
-        const validateResultData = await parentValidation.methods.validate({
-          state,
-          formData: props.modelValue,
-        });
-        if (!!validateResultData && validateResultData.length > 0) {
-          if (config.autoAlert !== false) {
-            $message(getValidateResultMessage(validateResultData[0], props.modelValue));
+      let promise = (async () => {
+        config = config || {};
+        if (config.autoLoading != false) {
+          loading.show();
+        }
+        try {
+          const validateResultData = await parentValidation.methods.validate({
+            state,
+            formData: props.modelValue,
+          });
+          if (!!validateResultData && validateResultData.length > 0) {
+            if (config.autoAlert !== false) {
+              $message(getValidateResultMessage(validateResultData[0], props.modelValue));
+            }
+            return Promise.reject(validateResultData);
           }
-          return Promise.reject(validateResultData);
+        } finally {
+          loading.hide();
         }
-      } finally {
-        loading.hide();
-      }
+      })();
+      AutoLoadingObserver.subject(promise);
+      return promise;
     },
   };
 

package/src/packages/components/Form/validate/validate.utils.tsx

@@ -69,7 +69,8 @@ export type iFormItemValidatePropsType = ExtractPropTypes<typeof FormItemValidat
  */
 export const FormValidatePropsOption = {
   modelValue: { type: Object as PropType<PlainObject> },                                          // 校验的表单对象
-  rules: { type: Object as PropType<Record<string, iValidateRule | iValidateRule[]>> },           // 额外的校验规则，key为field，value为校验规则
+  rules: { type: Object as PropType<Record<string, iValidateRule | iValidateRule[]>> },           // 额外的校验规则，key为field，value为校验规则，依赖于FormItem，如果对应field的FormItem不存在，则这个校验规则也不存在
+  anotherRules: { type: Array as PropType<iAnotherRule[]> },                                      // 额外的校验规则，不同于rules, 不依赖于FormItem，一直有效
   validateMode: { type: String as PropType<typeof eFormValidateMode.TYPE> },                      // 校验模式，看eFormValidateMode说明
   // associateFields: { type: Object as PropType<Record<string, string>> },                       // 校验关联字段，当key的field校验时自动校验value对应的field
   hideRequiredAsterisk: { type: Boolean },                                                        // 是否隐藏label旁边的红色必填星号标识
@@ -127,6 +128,8 @@ export interface iValidateRule {
   message?: string | ((value: any, formData: PlainObject | null | undefined) => string), // 校验失败的时候的提示信息
 }
 
+export type iAnotherRule = Omit<iValidateRule, 'label' | 'field'> & { label: string, field: string }
+
 /**
  * 注册校验类型的函数类型
  * @author  韦胜健

package/src/packages/components/FormItem/FormItemValidateMessage.tsx

@@ -0,0 +1,16 @@
+import {designComponent} from "plain-design-composition";
+import Icon from "../Icon";
+
+export const FormItemValidateMessage = designComponent({
+  props: {
+    message: { type: String }
+  },
+  setup({ props }) {
+    return () => (
+      !!props.message && <div className="form-item-validate-message-inner">
+        <Icon icon="pi-exclamation-polygon-fill"/>
+        <span>{props.message}</span>
+      </div>
+    );
+  },
+});