plain-design 1.0.0-beta.10 → 1.0.0-beta.101

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>
+    );
+  },
+});

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

@@ -1,10 +1,10 @@
-import {designComponent, getComponentCls, useClasses, useRefs} from "plain-design-composition";
+import {designComponent, Fragment, getComponentCls, useClasses, useRefs} from "plain-design-composition";
 import {FormItemValidatePropsOption} from "../Form/validate/validate.utils";
 import {EditProps, useEdit} from "../../uses/useEdit";
 import {StyleProps, ThemeStatus, useStyle} from "../../uses/useStyle";
 import {FormItemLayoutPropsOption, useFormLayout} from "../Form/layout/useFormLayout";
 import {useFormItemValidation} from "../Form/validate/useFormItemValidation";
-import {useTooltip} from "../useTooltip";
+import {FormItemValidateMessage} from "./FormItemValidateMessage";
 
 export const FormItem = designComponent({
   name: '-form-item',
@@ -61,9 +61,10 @@ export const FormItem = designComponent({
 
     const classes = useClasses(() => [
       getComponentCls('form-item'),
-      `form-item-label-align-${formItemLayout.labelAlign.value}`,
-      `form-item-content-align-${formItemLayout.contentAlign.value}`,
+      `form-item-validate-position-${formItemLayout.validateMessagePosition.value}`,
       {
+        [`form-item-label-align-${formItemLayout.labelAlign.value}`]: !!formItemLayout.labelAlign.value,
+        [`form-item-content-align-${formItemLayout.contentAlign.value}`]: !!formItemLayout.contentAlign.value,
         'form-item-required': formItemValidation.isRequired.value,
         'form-item-has-label': !!props.label,
         'form-item-has-prepend': slots.prepend.isExist(),
@@ -72,16 +73,23 @@ export const FormItem = designComponent({
       },
     ]);
 
-    useTooltip({
-      ignoreEmptyMessage: true,
-      tooltip: () => ({
-        popperSize: styleComputed.value.size,
-        reference: refs.el,
-        message: formItemValidation.validateMessage.value,
-        status: 'error',
-        placement: formItemLayout.form.props.singleColumnCenter ? 'right-start' : 'bottom-end'
-      })
-    });
+    /*    useTooltip({
+          ignoreEmptyMessage: true,
+          alwaysShow: true,
+          tooltip: () => ({
+            type: uuid(),
+            trigger: 'manual',
+            popperSize: styleComputed.value.size,
+            reference: refs.el,
+            message: formItemValidation.validateMessage.value,
+            status: 'error',
+            placement: formItemLayout.form.props.singleColumnCenter ? 'right-center' : 'bottom-end',
+            minWidth: 0,
+            noBackground: true,
+            noArrow: true,
+            offset: 16,
+          })
+        });*/
 
     return {
       refer: {
@@ -89,8 +97,8 @@ export const FormItem = designComponent({
       },
       render: () => (
         <div className={classes.value} style={formItemLayout.styles.value} ref={onRef.el}>
-          {props.label !== null && (
-            <div className="form-item-label" style={formItemLayout.labelStyles.value}>
+          {props.label !== null && !props.hideLabel && (
+            <div className="form-item-label" style={formItemLayout.labelStyles.value} title={props.label}>
               {formItemValidation.isRequired.value && <i className="form-item-required-tag">*</i>}
               {slots.labelPrepend()}
               {slots.labelSlot(props.label)}
@@ -100,11 +108,15 @@ export const FormItem = designComponent({
           )}
           <div className="form-item-content box-message-reference" style={formItemLayout.contentStyles.value}>
             {slots.prepend.isExist() && <div className="form-item-prepend-content">{slots.prepend()}</div>}
-            <div className="form-item-content-inner">
-              {slots.default()}
+            <div className="form-item-content-inner" style={formItemLayout.contentInnerStyles.value}>
+              <Fragment key="slot_default">{slots.default()}</Fragment>
+              {/*校验消息放下边的时候放在 form-item-content-inner 内部使得与输入框左或者右对齐*/}
+              {formItemLayout.validateMessagePosition.value !== 'right' && <FormItemValidateMessage message={formItemValidation.validateMessage.value!}/>}
             </div>
             {slots.append.isExist() && <div className="form-item-append-content">{slots.append()}</div>}
           </div>
+          {/*校验消息放在右边的时候，放在外部，使得与输入框横向对齐*/}
+          {formItemLayout.validateMessagePosition.value === 'right' && <FormItemValidateMessage message={formItemValidation.validateMessage.value!}/>}
         </div>
       )
     };
@@ -112,3 +124,4 @@ export const FormItem = designComponent({
 });
 
 export default FormItem;
+

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

@@ -48,7 +48,7 @@ export const Formatter: Record<string, undefined | ((...args: any[]) => string |
   cny: (value: string | number | null | undefined) => {
     if (value == null || value === 0) {return `¥0`;}
     value = Number(value);
-    if (isNaN(value)) {return i18n('base.invalidAmount').d('无效金额');}
+    if (isNaN(value)) {return i18n.$it('base.invalidAmount').d('无效金额');}
     return `¥ ${Formatter.money!(value)}`;
   },
   /**

package/src/packages/components/Grid/GridCol.tsx

@@ -47,10 +47,11 @@ export const GridCol = designComponent({
       return classList;
     });
     const styles = useStyles(style => {
-      if ((Number(row.props.gutter)) !== 0) {
+      const gutter = row.getColGutter();
+      if (!!gutter) {
         style = {
-          paddingLeft: (Number(row.props.gutter)) / 2 + 'px',
-          paddingRight: (Number(row.props.gutter)) / 2 + 'px'
+          paddingLeft: (gutter) / 2 + 'px',
+          paddingRight: (gutter) / 2 + 'px'
         };
       }
       return style;

package/src/packages/components/Grid/GridRow.tsx

@@ -1,8 +1,10 @@
-import {designComponent, getComponentCls, PropType, useClasses, useRefs, useStyles} from "plain-design-composition";
+import {computed, designComponent, getComponentCls, PropType, useClasses, useRefs, useStyles} from "plain-design-composition";
 import {eGridAlign, eGridJustify} from "./grid.utils";
 import {unit} from 'plain-utils/string/unit';
 import {removeUnit} from 'plain-utils/string/removeUnit';
 import './grid.scss';
+import {ThemeSize, useStyle} from "../../uses/useStyle";
+import {ApplicationConfigurationProvider} from "../ApplicationConfigurationProvider";
 
 export const GridRow = designComponent({
   name: 'grid-row',
@@ -10,14 +12,39 @@ export const GridRow = designComponent({
     type: { type: String as PropType<undefined | null | string> },        //类型,type
     align: { type: String as PropType<keyof typeof eGridAlign> },         //对其方式,left|center|right
     justify: { type: String as PropType<keyof typeof eGridJustify> },     //内容弹性布局方式,start,end,center,space-around,space-between
-    gutter: { type: [Number, String], default: 0 },                       //间隔
+    gutter: { type: [Number, String], default: 0 },                       //列间隔
+    rowGutter: { type: [Number, String] },                                //行间隔
   },
   inheritPropsType: HTMLDivElement,
   slots: ['default'],
   provideRefer: true,
   setup({ props, slots }) {
 
+    const configuration = ApplicationConfigurationProvider.inject();
+
     const { refs, onRef } = useRefs({ el: HTMLDivElement });
+
+    const { styleComputed } = useStyle();
+
+    const formatGutter = (gutter: string | number | undefined): number | undefined => {
+      if (!gutter) {return undefined;}
+      if (typeof gutter === "string") {
+        if (gutter === 'default') {
+          gutter = styleComputed.value.size;
+        }
+        const varName = `margin-${gutter}`;
+        if (varName in configuration.value.theme.vars) {
+          // @ts-ignore
+          const varValue = configuration.value.theme.vars[varName];
+          return Number(removeUnit(varValue));
+        }
+      }
+      return Number(removeUnit(gutter));
+    };
+
+    const colGutter = computed(() => formatGutter(props.gutter));
+    const rowGutter = computed(() => formatGutter(props.rowGutter));
+
     const classes = useClasses(() => [
       getComponentCls('grid-row'),
       {
@@ -27,13 +54,20 @@ export const GridRow = designComponent({
       }
     ]);
     const styles = useStyles(style => {
-      const gutter = Number(props.gutter);
-      if (gutter !== 0) {
+
+      const gutter = colGutter.value;
+      if (!!gutter) {
         style = {
-          width: `calc(100% + ${unit(props.gutter)})`,
-          marginLeft: `-${unit(Number(removeUnit(props.gutter)) / 2)}`
+          width: `calc(100% + ${unit(gutter)})`,
+          marginLeft: `-${unit(gutter / 2)}`
         };
       }
+
+      if (rowGutter.value) {
+        if (ThemeSize.LIST.indexOf(rowGutter.value as any) == -1) {
+          style.marginBottom = unit(rowGutter.value);
+        }
+      }
       return style;
     });
     // console.log(styles.value)
@@ -42,6 +76,8 @@ export const GridRow = designComponent({
       refer: {
         props,
         refs,
+        getColGutter: () => colGutter.value,
+        getRowGutter: () => rowGutter.value,
       },
       render: () => (
         <div className={classes.value} style={styles.value} ref={onRef.el}>

package/src/packages/components/Grid/grid.scss

@@ -40,8 +40,8 @@ $screens: (
   flex-direction: row;
   flex-wrap: wrap;
 
-  &:not(:last-child) {
-    margin-bottom: 16px;
+  &:last-child {
+    margin-bottom: 0 !important;
   }
 
   &, & * {

package/src/packages/components/Image/image.scss

@@ -6,7 +6,7 @@
   right: 0;
   bottom: 0;
   background-color: rgba(black, 0.85);
-  color: white;
+  color: plv(pbfc);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -213,7 +213,7 @@
   &.image-uploader-status-fail {
     .image-uploader-fail {
       background-color: rgba(black, 0.85);
-      color: white;
+      color: plv(pbfc);
     }
   }
 
@@ -247,7 +247,7 @@
       }
 
       .#{componentName(icon)} {
-        color: white;
+        color: plv(pbfc);
       }
     }
   }
@@ -261,8 +261,9 @@
 
 /*---------------------------------------image-------------------------------------------*/
 
-img.#{componentName(image)} {
+.#{componentName(image)} {
   vertical-align: bottom;
+  box-sizing: border-box;
 }
 
 img.image-preview-on-click {

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

@@ -30,6 +30,14 @@ export const ImagePropsOptions = {
   alt: { type: String },                                                        // 图片描述
   fit: { type: String as PropType<typeof eImageFit.TYPE>, default: eImageFit.cover },// 图片 object-fit 属性
   position: { type: String, default: 'top center' },                            // 图片 object-position 属性
+  maxHeight: { type: [String, Number] },                                        // 最大高度
+  minHeight: { type: [String, Number] },                                        // 最小高度
+  maxWidth: { type: [String, Number] },                                         // 最大宽度
+  minWidth: { type: [String, Number] },                                         // 最小宽度
+  width: { type: [String, Number] },                                            // 图片宽度
+  height: { type: [String, Number] },                                           // 图片高度
+  hideTips: { type: Boolean },                                                  // 隐藏提示文本
+  urlPrefix: { type: String },                                                  // 图片地址前缀
 };
 
 /**
@@ -56,16 +64,9 @@ export const Image = designComponent({
     formatImagePath,
   },
   props: {
-    src: { type: String as PropType<string | null> },                          // 图片地址
-    status: { type: String as PropType<typeof eImageStatus.TYPE> },      // 当前转股固态，fill, container, cover, none, scale-down
-    previewOnClick: { type: Boolean, default: true },                          // 是否点击的时候放大预览图片
-    maxHeight: { type: [String, Number] },                                     // 最大高度
-    minHeight: { type: [String, Number] },                                     // 最小高度
-    maxWidth: { type: [String, Number] },                                      // 最大宽度
-    minWidth: { type: [String, Number] },                                      // 最小宽度
-    width: { type: [String, Number] },                                         // 图片宽度
-    height: { type: [String, Number] },                                        // 图片高度
-    urlPrefix: { type: String },                                               // 图片地址前缀
+    src: { type: String as PropType<string | null> },                           // 图片地址
+    status: { type: String as PropType<typeof eImageStatus.TYPE> },             // 当前状态
+    previewOnClick: { type: Boolean, default: true },                           // 是否点击的时候放大预览图片
     ...ImagePropsOptions,
   },
   emits: {
@@ -125,9 +126,9 @@ export const Image = designComponent({
     });
 
     const tip = {
-      [eImageStatus.empty]: i18n('image.noPicture').d('无图片'),
-      [eImageStatus.pending]: i18n('base.loading').d('加载中'),
-      [eImageStatus.error]: i18n('base.loadFailed').d('加载失败'),
+      [eImageStatus.empty]: i18n.$it('image.noPicture').d('无图片'),
+      [eImageStatus.pending]: i18n.$it('base.loading').d('加载中'),
+      [eImageStatus.error]: i18n.$it('base.loadFailed').d('加载失败'),
     };
 
     const handler = {
@@ -148,7 +149,7 @@ export const Image = designComponent({
           return (
             <div className={classes.value} style={styles.value} onClick={handler.onClick} ref={onRef.el}>
               <Icon icon={status.value === eImageStatus.error ? 'pi-image-close' : 'pi-image'}/>
-              <span>{tip[status.value]}</span>
+              {!props.hideTips && <span>{tip[status.value]}</span>}
               {status.value === eImageStatus.pending && (<LoadingMask modelValue={true} maskColor="rgba(255,255,255,0.15)"/>)}
             </div>
           );