plain-design 1.0.0-beta.11 → 1.0.0-beta.110

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,7 +55,7 @@ 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, value?: string } | null => {
     if (formValidation.props.validateMode === eFormValidateMode.table) {return null;}
     const { field, label, valueGetter } = rule;
     if (!rule.field && !rule.valueGetter) {return null;}
@@ -69,12 +71,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)) {
@@ -94,28 +93,27 @@ export function useFormItemValidation({ props }: { props: iFormItemValidateProps
         }
         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的上下文状态注入关键字
@@ -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";
 

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 "@peryl/react-compose";
 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

@@ -1,4 +1,4 @@
-import {designComponent, getComponentCls, PropType, SingleClass, useClasses, useRefs, useStyles} from "plain-design-composition";
+import {designComponent, getComponentCls, PropType, SingleClass, useClasses, useRefs, useStyles} from "@peryl/react-compose";
 import {GridColSize} from "./grid.utils";
 import GridRow from "./GridRow";
 
@@ -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 "@peryl/react-compose";
 import {eGridAlign, eGridJustify} from "./grid.utils";
-import {unit} from 'plain-utils/string/unit';
-import {removeUnit} from 'plain-utils/string/removeUnit';
+import {unit} from '@peryl/utils/unit';
+import {removeUnit} from '@peryl/utils/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/Icon/icon.registry.tsx

@@ -1,5 +1,5 @@
-import {RenderNode} from "plain-design-composition";
-import {tStrokeLinecap, tStrokeLinejoin} from "plain-icons/src/packages/component/icon/useIcon";
+import {RenderNode} from "@peryl/react-compose";
+import {tStrokeLinecap, tStrokeLinejoin} from "@peryl/icon/src/packages/component/icon/useIcon";
 
 interface iIconGetter {(data: { props: { icon?: string | undefined, strokeWidth: number | undefined, strokeLinecap: tStrokeLinecap | undefined, strokeLinejoin: tStrokeLinejoin | undefined }, attrs: any }): RenderNode | Promise<RenderNode>;}
 

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

@@ -1,6 +1,6 @@
-import {PlainIcon} from 'plain-icons/src/packages/component/icon/react';
-import {designComponent, getComponentCls, iHTMLElement, mergeAttrs, PropType, reactive, RenderNode, useClasses, watch} from "plain-design-composition";
-import {tStrokeLinecap, tStrokeLinejoin} from "plain-icons/src/packages/component/icon/useIcon";
+import {PlainIcon} from '@peryl/icon/src/packages/component/icon/react';
+import {designComponent, getComponentCls, iHTMLElement, mergeAttrs, PropType, reactive, RenderNode, useClasses, watch} from "@peryl/react-compose";
+import {tStrokeLinecap, tStrokeLinejoin} from "@peryl/icon/src/packages/component/icon/useIcon";
 import './icon.scss';
 import {IconRegistration} from "./icon.registry";
 import {renderNothing} from "../../utils/renderNothing";

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

@@ -1,4 +1,4 @@
-import {designComponent, RenderNode} from 'plain-design-composition';
+import {designComponent, RenderNode} from '@peryl/react-compose';
 
 export const Illustration = designComponent({
   name: 'illustration',

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

@@ -1,7 +1,7 @@
-import {computed, designComponent, getComponentCls, iMouseEvent, PropType, reactive, useClasses, useRefs, useStyles, watch} from 'plain-design-composition';
+import {computed, designComponent, getComponentCls, iMouseEvent, PropType, reactive, useClasses, useRefs, useStyles, watch} from '@peryl/react-compose';
 import './image.scss';
-import {unit} from "plain-utils/string/unit";
-import {createEnum} from "plain-utils/utils/createEnum";
+import {unit} from "@peryl/utils/unit";
+import {createEnum} from "@peryl/utils/createEnum";
 import {Icon} from "../Icon";
 import {$image} from "../$image";
 import {LoadingMask} from "../LoadingMask";
@@ -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: {
@@ -99,6 +100,7 @@ export const Image = designComponent({
         emit.onSuccess(state.src!);
       };
       image.onerror = (e) => {
+        console.error(`load image error: ${image.src}`, e, props.urlPrefix);
         state.status = eImageStatus.error;
         emit.onError(e);
       };
@@ -125,9 +127,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 +150,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>
           );