plain-design 1.0.0-beta.16 → 1.0.0-beta.161

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

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

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

@@ -1,6 +1,6 @@
-import {computed, inject, onBeforeUnmount, provide, reactive, ref, toRaw} from "plain-design-composition";
+import {computed, inject, onBeforeUnmount, provide, reactive, ref, toRaw} from "@peryl/react-compose";
 import {checkRules, createFormItemRules, eFormValidateTrigger, iFormItemValidatePropsType, iFormValidatePropsType, iRegistrationValidator, isMatchTrigger, iValidateRule, iValidateState} from "./validate.utils";
-import {PlainObject} from "plain-utils/utils/event";
+import {PlainObject} from "@peryl/utils/event";
 import {registryAnyValidationType} from "../types/any";
 import {registryStringValidationType} from "../types/string";
 import {registryNumberValidationType} from "../types/number";
@@ -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/useFormItemValidation.tsx

@@ -1,8 +1,8 @@
 import {eFormValidateMode, eFormValidateTrigger, getRuleValue, iFormItemValidatePropsType, isRuleRequired, iValidateRule} from "./validate.utils";
-import {computed, inject, onBeforeUnmount, watch, watchEffect} from "plain-design-composition";
+import {createEffectsOfReaction, globalWatch, inject, onBeforeUnmount} from "@peryl/react-compose";
 import {FORM_VALIDATION_PROVIDER, useFormValidation} from "./useFormValidation";
 import {Validation} from "./createValidation";
-import {createEffects} from "plain-utils/utils/createEffects";
+import {createEffects, iEffects} from "@peryl/utils/createEffects";
 
 /**
  * 抽离FormItem中的校验逻辑
@@ -11,6 +11,8 @@ import {createEffects} from "plain-utils/utils/createEffects";
  */
 export function useFormItemValidation({ props }: { props: iFormItemValidatePropsType }) {
 
+  const { effects, effectComputed, effectWatchEffect } = createEffectsOfReaction();
+
   /*Form校验*/
   const formValidation = inject<ReturnType<typeof useFormValidation>>(FORM_VALIDATION_PROVIDER)!;
 
@@ -22,14 +24,14 @@ export function useFormItemValidation({ props }: { props: iFormItemValidateProps
    * @author  韦胜健
    * @date    2022.11.5 23:39
    */
-  const isRequired = computed(() => childValidation.getRules().some(rule => isRuleRequired(rule, formValidation.props.modelValue)));
+  const isRequired = effectComputed(() => childValidation.getRules().some(rule => isRuleRequired(rule, formValidation.props.modelValue)));
 
   /**
    * 当前的校验不通过的信息
    * @author  韦胜健
    * @date    2022/8/22 23:48
    */
-  const validateMessage = computed((): string | null => {
+  const validateMessage = effectComputed((): string | null => {
     if (!props.field && !props.validateValueGetter && !props.rules) {
       return null;
     }
@@ -53,14 +55,17 @@ export function useFormItemValidation({ props }: { props: iFormItemValidateProps
    * @author  韦胜健
    * @date    2022.11.6 0:00
    */
-  const getWatchData = (rule: iValidateRule) => {
+  const getValueByRule = (rule: iValidateRule): { label?: string | null, field?: string } | null => {
     if (formValidation.props.validateMode === eFormValidateMode.table) {return null;}
-    const { field, label, valueGetter } = rule;
+    // const { field, label, valueGetter } = rule;
+    const { field, label } = rule;
     if (!rule.field && !rule.valueGetter) {return null;}
     return {
       label,
       field,
-      value: getRuleValue({ formData: formValidation.props.modelValue, field, validateValueGetter: valueGetter, formItemProps: props }),
+      /*这里不能调用valueGetter，这样会导致值变化也会触发教研，设计是触发onChange才触发校验而不是值变化就触发*/
+      /*这里调用valueGetter的话，会导致触发watch，进而触发onFieldChange*/
+      // value: getRuleValue({ formData: formValidation.props.modelValue, field, validateValueGetter: valueGetter, formItemProps: props }),
     };
   };
 
@@ -69,12 +74,9 @@ export function useFormItemValidation({ props }: { props: iFormItemValidateProps
    * @author  韦胜健
    * @date    2022.11.6 0:58
    */
-  const watchRuleValueChange = (getRule: () => iValidateRule | null) => {
-    const unwatch = watch(
-      () => {
-        const rule = getRule();
-        return !rule || rule.trigger === eFormValidateTrigger.blur ? null : getWatchData(rule);
-      },
+  const watchRuleValueChange = (rule: iValidateRule, effects: iEffects) => {
+    effects.push(globalWatch(
+      () => rule.trigger === eFormValidateTrigger.blur ? null : getValueByRule(rule),
       (newValue, oldValue) => {
         /*校验规则已经消失*/
         if (!newValue || (!newValue.field && !newValue.label)) {
@@ -89,33 +91,32 @@ export function useFormItemValidation({ props }: { props: iFormItemValidateProps
           return;
         }
         /*值没有变化*/
-        if (newValue.value == oldValue.value) {
+        /*if (newValue.value == oldValue.value) {
           return;
-        }
+        }*/
         formValidation.handler.onFieldChange({ label: newValue.label, field: newValue.field });
       }
-    );
-    return () => unwatch();
+    ));
   };
 
-  (function validateOnChange() {
-    /*监听outerRule的值变化然后触发校验*/
-    onBeforeUnmount(watchRuleValueChange(() => childValidation.formItemRules.outerRule.value));
+  const { effects: innerEffects } = createEffects();
+  effects.push(() => innerEffects.clear());
+
+  effectWatchEffect(() => {
+    innerEffects.clear();
     [
+      childValidation.formItemRules.outerRule.value,
       /*监听props.rules的值变化然后触发校验*/
-      childValidation.formItemRules.formRules,
+      ...childValidation.formItemRules.formRules.value || [],
       /*监听form.rules的值变化然后触发校验*/
-      childValidation.formItemRules.propsRules
-    ].forEach((item) => {
-      /*当rule变化时，将上一次的watch注销，重新watch*/
-      const { effects } = createEffects();
-      watchEffect(() => {
-        effects.clear();
-        item.value?.forEach(rule => {effects.push(watchRuleValueChange(() => rule));});
-      });
-      onBeforeUnmount(() => effects.clear());
+      ...childValidation.formItemRules.propsRules.value || []
+    ].forEach(rule => {
+      /*当rule变化时，将上一次的watch注销，这里重新watch*/
+      !!rule && watchRuleValueChange(rule, innerEffects);
     });
-  })();
+  });
+
+  onBeforeUnmount(effects.clear);
 
   return { formValidation, childValidation, isRequired, validateMessage };
 }

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

@@ -1,7 +1,8 @@
 import {eFormValidateMode, eFormValidateTrigger, getValidateResultMessage, iFormValidatePropsType, iValidateState} from "./validate.utils";
-import {provide, reactive} from "plain-design-composition";
+import {provide, reactive} from "@peryl/react-compose";
 import {$message} from "../../$message";
 import {Validation} from "./createValidation";
+import {AutoLoadingObserver} from "../../AutoLoadingObserver";
 
 /**
  * Form以及FormItem的上下文状态注入关键字
@@ -69,7 +70,7 @@ export function useFormValidation({ props }: { props: iFormValidatePropsType })
       return parentValidation.methods.validateItem({ label, field, trigger: eFormValidateTrigger.change, state, formData: props.modelValue });
     },
     onEditChange: ({ label, field }: { label: string | null | undefined, field: string | undefined }) => {
-      if (props.validateMode !== eFormValidateMode.table) {return; }
+      // if (props.validateMode !== eFormValidateMode.table) {return; }
       return handler.onFieldChange({ label, field });
     },
     onBlurChange: ({ label, field }: { label: string | null | undefined, field: string | undefined }) => {
@@ -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

@@ -1,7 +1,7 @@
-import {PlainObject} from "plain-utils/utils/event";
-import {computed, ExtractPropTypes, PropType} from "plain-design-composition";
-import {createEnum} from "plain-utils/utils/createEnum";
-import {toArray} from "plain-utils/utils/toArray";
+import {PlainObject} from "@peryl/utils/event";
+import {computed, ExtractPropTypes, PropType} from "@peryl/react-compose";
+import {createEnum} from "@peryl/utils/createEnum";
+import {toArray} from "@peryl/utils/toArray";
 
 /**
  * 表单的校验模式
@@ -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 "@peryl/react-compose";
+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>
+    );
+  },
+});

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

@@ -1,6 +1,6 @@
-import {ComponentPropsType, designComponent, ExtractPropTypes, PropType, useModel} from "plain-design-composition";
+import {ComponentPropsType, designComponent, ExtractPropTypes, PropType, useModel} from "@peryl/react-compose";
 import {FormItemValidateExposePropsOption} from "../Form/validate/validate.utils";
-import {PlainObject} from "plain-utils/utils/event";
+import {PlainObject} from "@peryl/utils/event";
 import {FormItem} from "./index";
 import React from "react";