添加 icon 优化图片预览'

scss/components/form/_image.scss

@@ -78,6 +78,7 @@
     &-itemImageWrap {
         width: px2rem(108px);
         height: px2rem(108px);
+        background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwMCIgaGVpZ2h0PSI0MDAiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdHRlcm4gaWQ9ImdyaWQiIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CiAgICAgICAgICAgIDxyZWN0IGZpbGw9ImJsYWNrIiB4PSIwIiB5PSIwIiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIG9wYWNpdHk9IjAuMSIgLz4KICAgICAgICAgICAgPHJlY3QgZmlsbD0id2hpdGUiIHg9IjEwIiB5PSIwIiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIC8+CiAgICAgICAgICAgIDxyZWN0IGZpbGw9ImJsYWNrIiB4PSIxMCIgeT0iMTAiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgb3BhY2l0eT0iMC4xIiAvPgogICAgICAgICAgICA8cmVjdCBmaWxsPSJ3aGl0ZSIgeD0iMCIgeT0iMTAiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgLz4KICAgICAgICA8L3BhdHRlcm4+CiAgICA8L2RlZnM+CiAgICA8cmVjdCBmaWxsPSJ1cmwoI2dyaWQpIiB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiAvPgo8L3N2Zz4=");
         overflow: hidden;
         position: relative;
 

src/components/Select.tsx

@@ -631,7 +631,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
             return (
               <div
                 {...getItemProps({
-                  key: item.value || index,
+                  key: typeof item.value === 'string' ? item.value : index,
                   index,
                   item,
                   disabled: item.disabled
@@ -682,7 +682,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
                 ) : (
                   <span>
                     {item.disabled
-                      ? item.label
+                      ? item[labelField]
                       : highlight(
                           item[labelField],
                           inputValue as string,

src/components/icons.tsx

@@ -51,6 +51,9 @@ import FailIcon from '../icons/fail.svg';
 // @ts-ignore
 import SearchIcon from '../icons/search.svg';
 
+// @ts-ignore
+import BackIcon from '../icons/back.svg';
+
 // 兼容原来的用法，后续不直接试用。
 // @ts-ignore
 export const closeIcon = <CloseIcon />;
@@ -107,6 +110,7 @@ registerIcon('file', FileIcon);
 registerIcon('success', SuccessIcon);
 registerIcon('fail', FailIcon);
 registerIcon('search', SearchIcon);
+registerIcon('back', BackIcon);
 
 export function Icon({
   icon,

src/icons/back.svg

@@ -0,0 +1,11 @@
+<svg viewBox="0 0 9 12" version="1.1" 
+    xmlns="http://www.w3.org/2000/svg" p-id="3506" 
+    xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g transform="translate(-11.000000, -9.000000)" fill="currentColor" fill-rule="nonzero">
+            <g transform="translate(11.000000, 9.000000)">
+                <polygon transform="translate(4.294118, 6.000000) rotate(-270.000000) translate(-4.294118, -6.000000) " points="8.76684493 2 4.29411765 6.79999999 -0.178609633 2 -1.70588235 3.6 4.29411765 10 10.2941176 3.6"></polygon>
+            </g>
+        </g>
+    </g>
+</svg>

src/icons/transparent.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="400">
+    <defs>
+        <pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse">
+            <rect fill="black" x="0" y="0" width="10" height="10" opacity="0.1" />
+            <rect fill="white" x="10" y="0" width="10" height="10" />
+            <rect fill="black" x="10" y="10" width="10" height="10" opacity="0.1" />
+            <rect fill="white" x="0" y="10" width="10" height="10" />
+        </pattern>
+    </defs>
+    <rect fill="url(#grid)" x="0" y="0" width="100%" height="100%" />
+</svg>

src/renderers/Form/index.tsx

@@ -29,6 +29,7 @@ import {IComboStore} from '../../store/combo';
 import qs = require('qs');
 import {dataMapping} from '../../utils/tpl-builtin';
 import {isApiOutdated, isEffectiveApi} from '../../utils/api';
+import Spinner from '../../components/Spinner';
 export type FormGroup = FormSchema & {
   title?: string;
   className?: string;
@@ -651,7 +652,11 @@ export default class Form extends React.Component<FormProps, object> {
         .then(async response => {
           response &&
             onChange &&
-            onChange(store.data, difference(store.data, store.pristine));
+            onChange(
+              store.data,
+              difference(store.data, store.pristine),
+              this.props
+            );
           if (store.validated) {
             await this.validate(true);
           }
@@ -688,7 +693,12 @@ export default class Form extends React.Component<FormProps, object> {
       targets[0].props.type === 'form'
     ) {
       store.updateData(values[0]);
-      onChange && onChange(store.data, difference(store.data, store.pristine));
+      onChange &&
+        onChange(
+          store.data,
+          difference(store.data, store.pristine),
+          this.props
+        );
     }
 
     store.closeDialog(true);
@@ -714,7 +724,12 @@ export default class Form extends React.Component<FormProps, object> {
       targets[0].props.type === 'form'
     ) {
       store.updateData(values[0]);
-      onChange && onChange(store.data, difference(store.data, store.pristine));
+      onChange &&
+        onChange(
+          store.data,
+          difference(store.data, store.pristine),
+          this.props
+        );
     }
 
     store.closeDrawer(true);
@@ -972,6 +987,8 @@ export default class Form extends React.Component<FormProps, object> {
           </pre>
         ) : null}
 
+        <Spinner show={store.loading} overlay />
+
         {this.renderBody()}
 
         {render(