图片上传样式修复

scss/components/form/_image.scss

@@ -15,8 +15,7 @@
     border: $borderWidth solid $borderColor;
     cursor: pointer;
 
-    @include button-variant(
-      $ImageControl-addBtn-bg,
+    @include button-variant($ImageControl-addBtn-bg,
       $ImageControl-addBtn-border,
       $ImageControl-addBtn-color,
       $ImageControl-addBtn-onHover-bg,
@@ -24,8 +23,7 @@
       $ImageControl-addBtn-onHover-color,
       $ImageControl-addBtn-onActive-bg,
       $ImageControl-addBtn-onActive-border,
-      $ImageControl-addBtn-onActive-color
-    );
+      $ImageControl-addBtn-onActive-color);
 
     >svg {
       width: px2rem(50px);
@@ -75,6 +73,7 @@
     margin-right: $gap-base;
     margin-bottom: $gap-base;
     position: relative;
+    width: px2rem(120px);
   }
 
   &-image {

src/renderers/Form/Image.tsx

@@ -14,7 +14,7 @@ import Button from '../../components/Button';
 // @ts-ignore
 import accepts from 'attr-accept';
 import {getNameFromUrl} from './File';
-import ImageComponent from '../Image';
+import ImageComponent, {ImageThumbProps} from '../Image';
 
 let preventEvent = (e: any) => e.stopPropagation();
 
@@ -47,6 +47,14 @@ export interface ImageProps extends FormControlProps {
   multiple?: boolean;
   thumbMode?: 'w-full' | 'h-full' | 'contain' | 'cover';
   thumbRatio?: '1:1' | '4:3' | '16:9';
+  onImageEnlarge?: (
+    info: Pick<ImageThumbProps, 'src' | 'originalSrc' | 'title' | 'caption'> & {
+      index?: number;
+      list?: Array<
+        Pick<ImageThumbProps, 'src' | 'originalSrc' | 'title' | 'caption'>
+      >;
+    }
+  ) => void;
 }
 
 export interface ImageState {
@@ -458,6 +466,26 @@ export default class ImageControl extends React.Component<
     );
   }
 
+  previewImage(file: FileX, index: number, e: React.MouseEvent<any>) {
+    const {onImageEnlarge} = this.props;
+
+    if (onImageEnlarge) {
+      const files = this.files;
+      e.preventDefault();
+
+      onImageEnlarge({
+        src: (file.preview || file.url) as string,
+        originalSrc: (file.preview || file.url) as string,
+        index,
+        list: files.map(file => ({
+          src: (file.preview || file.url) as string,
+          originalSrc: (file.preview || file.url) as string,
+          title: file.name || getNameFromUrl(file.value || file.url)
+        }))
+      });
+    }
+  }
+
   editImage(index: number) {
     const {multiple} = this.props;
 
@@ -1035,6 +1063,11 @@ export default class ImageControl extends React.Component<
                                       data-position="bottom"
                                       target="_blank"
                                       href={file.url || file.preview}
+                                      onClick={this.previewImage.bind(
+                                        this,
+                                        file,
+                                        key
+                                      )}
                                     >
                                       <Icon icon="view" className="icon" />
                                     </a>