图片上传样式修复

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,10 +23,9 @@
       $ImageControl-addBtn-onHover-color,
       $ImageControl-addBtn-onActive-bg,
       $ImageControl-addBtn-onActive-border,
-      $ImageControl-addBtn-onActive-color
-    );
+      $ImageControl-addBtn-onActive-color);
 
-    > svg {
+    >svg {
       width: px2rem(50px);
       height: px2rem(50px);
       top: 0;
@@ -75,6 +73,7 @@
     margin-right: $gap-base;
     margin-bottom: $gap-base;
     position: relative;
+    width: px2rem(120px);
   }
 
   &-image {
@@ -100,13 +99,13 @@
     flex-wrap: wrap;
     color: #fff;
 
-    > div {
+    >div {
       width: 100%;
       text-align: center;
       margin-bottom: 5px;
     }
 
-    > a {
+    >a {
       cursor: pointer;
       color: #fff;
       display: inline-block;
@@ -129,7 +128,7 @@
     right: 5px;
     line-height: 1;
 
-    > svg {
+    >svg {
       top: 0;
       width: 10px;
       height: 10px;
@@ -145,7 +144,7 @@
     align-content: center;
     flex-wrap: wrap;
 
-    > p {
+    >p {
       width: 100%;
       text-align: center;
       font-size: 12px;
@@ -192,7 +191,7 @@
       text-decoration: none;
     }
 
-    > p {
+    >p {
       width: 100%;
       text-align: center;
       color: $danger;
@@ -227,7 +226,7 @@
     flex-direction: column;
     align-items: flex-end;
 
-    > a {
+    >a {
       color: #fff;
       padding: 2px 5px;
       cursor: pointer;
@@ -250,4 +249,4 @@
     line-height: 120px;
     text-align: center;
   }
-}
+}

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>