From 1d2e634c40c4659bce102d3ecb55db9bcf406cae Mon Sep 17 00:00:00 2001
From: 2betop <2betop.cn@gmail.com>
Date: Mon, 11 May 2020 16:55:18 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=20snapshot?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 __mocks__/svgMock.js                          |    5 +
 __tests__/__snapshots__/factory.test.tsx.snap |   79 +-
 __tests__/factory.test.tsx                    |  412 ++---
 .../Form/__snapshots__/array.test.tsx.snap    |  119 +-
 .../Form/__snapshots__/button.test.tsx.snap   |  102 +-
 .../__snapshots__/buttonGroup.test.tsx.snap   |   66 +-
 .../__snapshots__/buttonToolBar.test.tsx.snap |  102 +-
 .../Form/__snapshots__/checkbox.test.tsx.snap |   22 +-
 .../__snapshots__/checkboxes.test.tsx.snap    |   68 +-
 .../Form/__snapshots__/city.test.tsx.snap     |   18 +
 .../Form/__snapshots__/color.test.tsx.snap    |   35 +-
 .../__snapshots__/container.test.tsx.snap     |   23 +-
 .../Form/__snapshots__/date.test.tsx.snap     |   35 +-
 .../Form/__snapshots__/dateRang.test.tsx.snap |   35 +-
 .../Form/__snapshots__/datetime.test.tsx.snap |   35 +-
 .../Form/__snapshots__/fieldSet.test.tsx.snap |   25 +-
 .../Form/__snapshots__/formula.test.tsx.snap  |   18 +
 .../Form/__snapshots__/grid.test.tsx.snap     |   19 +
 .../Form/__snapshots__/group.test.tsx.snap    |   24 +
 .../Form/__snapshots__/hbox.test.tsx.snap     |   19 +
 .../__snapshots__/iconPicker.test.tsx.snap    |   19 +
 .../Form/__snapshots__/index.test.tsx.snap    |  174 +++
 .../__snapshots__/inputGroup.test.tsx.snap    |   19 +
 .../Form/__snapshots__/list.test.tsx.snap     |   66 +-
 .../Form/__snapshots__/number.test.tsx.snap   |   18 +
 .../Form/__snapshots__/panel.test.tsx.snap    |  108 +-
 .../Form/__snapshots__/radios.test.tsx.snap   |   68 +-
 .../Form/__snapshots__/range.test.tsx.snap    |   70 +-
 .../Form/__snapshots__/rating.test.tsx.snap   |   18 +
 .../Form/__snapshots__/repeat.test.tsx.snap   |   62 +-
 .../Form/__snapshots__/service.test.tsx.snap  |   26 +
 .../Form/__snapshots__/static.test.tsx.snap   |   18 +
 .../Form/__snapshots__/switch.test.tsx.snap   |   18 +
 .../Form/__snapshots__/tabs.test.tsx.snap     |   60 +-
 .../Form/__snapshots__/testarea.test.tsx.snap |   18 +
 .../Form/__snapshots__/time.test.tsx.snap     |   35 +-
 .../__snapshots__/Carousel.test.tsx.snap      |   28 +-
 .../__snapshots__/Image.test.tsx.snap         |   25 +-
 .../__snapshots__/Page.test.tsx.snap          |  728 ++-------
 .../__snapshots__/Tabs.test.tsx.snap          |   34 +-
 .../__snapshots__/Wizard.test.tsx.snap        | 1367 ++++++++---------
 .../stores/__snapshots__/index.test.ts.snap   |   14 +
 .../stores/__snapshots__/service.test.ts.snap |   17 +-
 .../utils/__snapshots__/api.test.ts.snap      |   12 +
 __tests__/utils/tpl-builtin.test.ts           | 1174 +++++++-------
 examples/components/Page/Form.jsx             |   71 +-
 package.json                                  |    3 +-
 src/components/icons.tsx                      |    5 +
 src/renderers/Form/Checkbox.tsx               |    1 -
 49 files changed, 2915 insertions(+), 2622 deletions(-)
 create mode 100644 __mocks__/svgMock.js

diff --git a/__mocks__/svgMock.js b/__mocks__/svgMock.js
new file mode 100644
index 000000000..57dc8ed7f
--- /dev/null
+++ b/__mocks__/svgMock.js
@@ -0,0 +1,5 @@
+const React = require('react');
+
+module.exports = React.forwardRef((props, ref) =>
+  React.createElement('icon-mock', {ref, ...props})
+);
diff --git a/__tests__/__snapshots__/factory.test.tsx.snap b/__tests__/__snapshots__/factory.test.tsx.snap
index 536bd0b72..dc9354cf6 100644
--- a/__tests__/__snapshots__/factory.test.tsx.snap
+++ b/__tests__/__snapshots__/factory.test.tsx.snap
@@ -128,6 +128,7 @@ exports[`factory:definitions 1`] = `
                         autocomplete="off"
                         name="ref1"
                         placeholder=""
+                        size="10"
                         type="text"
                         value="ref value"
                       />
@@ -190,6 +191,7 @@ exports[`factory:definitions 1`] = `
                                       autocomplete="off"
                                       name="key"
                                       placeholder=""
+                                      size="10"
                                       type="text"
                                       value=""
                                     />
@@ -216,6 +218,7 @@ exports[`factory:definitions 1`] = `
                                       autocomplete="off"
                                       name="value"
                                       placeholder=""
+                                      size="10"
                                       type="text"
                                       value="ref value"
                                     />
@@ -239,33 +242,6 @@ exports[`factory:definitions 1`] = `
                                     children
                                   </span>
                                 </label>
-                                <div
-                                  class="a-ComboControl a-Form-control"
-                                >
-                                  <div
-                                    class="a-Combo a-Combo--multi a-Combo--ver"
-                                  >
-                                    <div
-                                      class="a-Combo-items"
-                                    />
-                                    <div
-                                      class="a-Combo-toolbar"
-                                    >
-                                      <button
-                                        class="a-Button a-Combo-addBtn"
-                                        data-tooltip="新增一条数据"
-                                        type="button"
-                                      >
-                                        <i
-                                          class="a-Button-icon fa fa-plus"
-                                        />
-                                        <span>
-                                          新增
-                                        </span>
-                                      </button>
-                                    </div>
-                                  </div>
-                                </div>
                                 <div
                                   class="a-Remark a-Form-remark"
                                 >
@@ -284,8 +260,8 @@ exports[`factory:definitions 1`] = `
                               data-position="bottom"
                               data-tooltip="删除"
                             >
-                              <i
-                                class="glyphicon glyphicon-remove"
+                              <icon-mock
+                                icon="close"
                               />
                             </a>
                           </div>
@@ -323,22 +299,40 @@ exports[`factory:definitions 1`] = `
               class="resize-sensor"
               style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
             >
+              
+  
               <div
                 class="resize-sensor-expand"
                 style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
               >
+                
+    
                 <div
                   style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
                 />
+                
+  
               </div>
+              
+  
               <div
                 class="resize-sensor-shrink"
                 style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
               >
+                
+    
                 <div
                   style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
                 />
+                
+  
               </div>
+              
+  
+              <div
+                class="resize-sensor-appear"
+                style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+              />
             </div>
           </div>
         </div>
@@ -419,6 +413,7 @@ exports[`factory:definitions override 1`] = `
                         autocomplete="off"
                         name="ref1"
                         placeholder=""
+                        size="10"
                         type="text"
                         value=""
                       />
@@ -453,7 +448,9 @@ exports[`factory:definitions override 1`] = `
                         type="checkbox"
                       />
                       <i />
-                      <span>
+                      <span
+                        class=""
+                      >
                         Option A
                       </span>
                     </label>
@@ -464,7 +461,9 @@ exports[`factory:definitions override 1`] = `
                         type="checkbox"
                       />
                       <i />
-                      <span>
+                      <span
+                        class=""
+                      >
                         Option B
                       </span>
                     </label>
@@ -483,22 +482,40 @@ exports[`factory:definitions override 1`] = `
               class="resize-sensor"
               style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
             >
+              
+  
               <div
                 class="resize-sensor-expand"
                 style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
               >
+                
+    
                 <div
                   style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
                 />
+                
+  
               </div>
+              
+  
               <div
                 class="resize-sensor-shrink"
                 style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
               >
+                
+    
                 <div
                   style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
                 />
+                
+  
               </div>
+              
+  
+              <div
+                class="resize-sensor-appear"
+                style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+              />
             </div>
           </div>
         </div>
diff --git a/__tests__/factory.test.tsx b/__tests__/factory.test.tsx
index 79c6cb627..5f01572c7 100644
--- a/__tests__/factory.test.tsx
+++ b/__tests__/factory.test.tsx
@@ -1,257 +1,275 @@
 import {
-    registerRenderer,
-    unRegisterRenderer,
-    RendererProps,
+  registerRenderer,
+  unRegisterRenderer,
+  RendererProps
 } from '../src/factory';
 import '../src/themes/default';
-import {
-    render as amisRender
-} from '../src/index';
+import {render as amisRender} from '../src/index';
 import React = require('react');
 import {render, fireEvent, cleanup} from 'react-testing-library';
-import { wait, makeEnv } from './helper';
+import {wait, makeEnv} from './helper';
 
 test('factory unregistered Renderer', async () => {
-    const {
-        container,
-    } = render(amisRender({
-        type: 'my-renderer',
-        a: 23
-    }));
-    await wait(100);
-    expect(container).toMatchSnapshot(); // not found
+  const {container} = render(
+    amisRender({
+      type: 'my-renderer',
+      a: 23
+    })
+  );
+  await wait(100);
+  expect(container).toMatchSnapshot(); // not found
 });
 
 test('factory custom not found!', async () => {
-    const {
-        container,
-    } = render(amisRender({
+  const {container} = render(
+    amisRender(
+      {
         type: 'my-renderer',
         a: 23
-    }, {}, makeEnv({
-        loadRenderer: () => Promise.resolve(() => (<div>Not Found</div>))
-    })));
-    await wait(100);
-    expect(container).toMatchSnapshot(); // not found
+      },
+      {},
+      makeEnv({
+        loadRenderer: () => Promise.resolve(() => <div>Not Found</div>)
+      })
+    )
+  );
+  await wait(100);
+  expect(container).toMatchSnapshot(); // not found
 });
 
 test('factory custom not found 2!', async () => {
-    const {
-        container,
-    } = render(amisRender({
+  const {container} = render(
+    amisRender(
+      {
         type: 'my-renderer',
         a: 23
-    }, {}, makeEnv({
-        loadRenderer: () => () => (<div>Not Found</div>)
-    })));
-    await wait(100);
-    expect(container).toMatchSnapshot(); // not found
+      },
+      {},
+      makeEnv({
+        loadRenderer: () => () => <div>Not Found</div>
+      })
+    )
+  );
+  await wait(100);
+  expect(container).toMatchSnapshot(); // not found
 });
 
 test('factory custom not found 3!', async () => {
-    const {
-        container,
-    } = render(amisRender({
+  const {container} = render(
+    amisRender(
+      {
         type: 'my-renderer',
         a: 23
-    }, {}, makeEnv({
-        loadRenderer: () => (<div>Not Found</div>)
-    })));
-    await wait(100);
-    expect(container).toMatchSnapshot(); // not found
+      },
+      {},
+      makeEnv({
+        loadRenderer: () => <div>Not Found</div>
+      })
+    )
+  );
+  await wait(100);
+  expect(container).toMatchSnapshot(); // not found
 });
 
 test('factory load Renderer on need', async () => {
-    const {
-        container,
-    } = render(amisRender({
+  const {container} = render(
+    amisRender(
+      {
         type: 'my-renderer2',
         a: 23
-    }, {}, makeEnv({
+      },
+      {},
+      makeEnv({
         session: 'loadRenderer',
-        loadRenderer: (schema) => {
-            interface MyProps extends RendererProps {
-                a: number;
-            };
-        
-            class MyComponent extends React.Component<MyProps> {
-                render() {
-                    return (<div>This is Custom Renderer2, a is {this.props.a}</div>);
-                }
+        loadRenderer: schema => {
+          interface MyProps extends RendererProps {
+            a: number;
+          }
+
+          class MyComponent extends React.Component<MyProps> {
+            render() {
+              return <div>This is Custom Renderer2, a is {this.props.a}</div>;
             }
-        
-            registerRenderer({
-                component: MyComponent,
-                test: /\bmy-renderer2$/
-            });
+          }
+
+          registerRenderer({
+            component: MyComponent,
+            test: /\bmy-renderer2$/
+          });
         }
-    })));
-    await wait(100);
-    expect(container).toMatchSnapshot(); // not found
+      })
+    )
+  );
+  await wait(100);
+  expect(container).toMatchSnapshot(); // not found
 });
 
 test('factory:registerRenderer', () => {
-    interface MyProps extends RendererProps {
-        a: number;
-    };
+  interface MyProps extends RendererProps {
+    a: number;
+  }
 
-    class MyComponent extends React.Component<MyProps> {
-        render() {
-            return (<div>This is Custom Renderer, a is {this.props.a}</div>);
-        }
+  class MyComponent extends React.Component<MyProps> {
+    render() {
+      return <div>This is Custom Renderer, a is {this.props.a}</div>;
     }
+  }
 
-    const renderer = registerRenderer({
-        component: MyComponent,
-        test: /\bmy-renderer$/
-    });
+  const renderer = registerRenderer({
+    component: MyComponent,
+    test: /\bmy-renderer$/
+  });
 
-    const {
-        container
-    } = render(amisRender({
-        type: 'my-renderer',
-        a: 23
-    }))
+  const {container} = render(
+    amisRender({
+      type: 'my-renderer',
+      a: 23
+    })
+  );
 
-    expect(container).toMatchSnapshot();
-    unRegisterRenderer(renderer);
+  expect(container).toMatchSnapshot();
+  unRegisterRenderer(renderer);
 });
 
-test('factory:definitions', () => {
-    const {
-        container,
-        getByText
-    } = render(amisRender({
+test('factory:definitions', async () => {
+  const {container, getByText} = render(
+    amisRender(
+      {
         definitions: {
-            aa: {
+          aa: {
+            type: 'text',
+            name: 'jack',
+            value: 'ref value',
+            remark: '通过<code>\\$ref</code>引入的组件'
+          },
+          bb: {
+            type: 'combo',
+            multiple: true,
+            multiLine: true,
+            remark: '<code>combo</code>中的子项引入自身，实现嵌套的效果',
+            controls: [
+              {
+                label: 'combo 1',
                 type: 'text',
-                name: 'jack',
-                value: 'ref value',
-                remark: '通过<code>\\$ref</code>引入的组件'
-            },
-            bb: {
-                type: 'combo',
-                multiple: true,
-                multiLine: true,
-                remark: '<code>combo</code>中的子项引入自身，实现嵌套的效果',
-                controls: [
-                    {
-                        label: 'combo 1',
-                        type: 'text',
-                        name: 'key'
-                    },
-                    {
-                        label: 'combo 2',
-                        name: 'value',
-                        $ref: 'aa'
-                    },
-                    {
-                        name: 'children',
-                        label: 'children',
-                        $ref: 'bb'
-                    }
-                ]
-            }
+                name: 'key'
+              },
+              {
+                label: 'combo 2',
+                name: 'value',
+                $ref: 'aa'
+              },
+              {
+                name: 'children',
+                label: 'children',
+                $ref: 'bb'
+              }
+            ]
+          }
         },
         type: 'page',
         title: '引用',
         body: [
-            {
-                type: 'form',
-                api: 'api/xxx',
-                actions: [],
-                controls: [
-                    {
-                        label: 'text2',
-                        $ref: 'aa',
-                        name: 'ref1'
-                    },
-                    {
-                        label: 'combo',
-                        $ref: 'bb',
-                        name: 'ref2'
-                    }
-                ]
-            }
+          {
+            type: 'form',
+            api: 'api/xxx',
+            actions: [],
+            controls: [
+              {
+                label: 'text2',
+                $ref: 'aa',
+                name: 'ref1'
+              },
+              {
+                label: 'combo',
+                $ref: 'bb',
+                name: 'ref2'
+              }
+            ]
+          }
         ]
-    }, {
-    }, makeEnv({
-    })));
+      },
+      {},
+      makeEnv({})
+    )
+  );
 
-    fireEvent.click(getByText('新增'));
-    expect(container).toMatchSnapshot();
+  await wait(100);
+  fireEvent.click(getByText('新增'));
+  expect(container).toMatchSnapshot();
 });
 
 test('factory:definitions override', () => {
-    const {
-        container
-    } = render(amisRender({
+  const {container} = render(
+    amisRender(
+      {
         definitions: {
-            aa: {
+          aa: {
+            type: 'text',
+            name: 'jack',
+            remark: '通过<code>\\$ref</code>引入的组件'
+          },
+          bb: {
+            type: 'combo',
+            multiple: true,
+            multiLine: true,
+            remark: '<code>combo</code>中的子项引入自身，实现嵌套的效果',
+            controls: [
+              {
+                label: 'combo 1',
                 type: 'text',
-                name: 'jack',
-                remark: '通过<code>\\$ref</code>引入的组件'
-            },
-            bb: {
-                type: 'combo',
-                multiple: true,
-                multiLine: true,
-                remark: '<code>combo</code>中的子项引入自身，实现嵌套的效果',
-                controls: [
-                    {
-                        label: 'combo 1',
-                        type: 'text',
-                        name: 'key'
-                    },
-                    {
-                        label: 'combo 2',
-                        name: 'value',
-                        $ref: 'aa'
-                    },
-                    {
-                        name: 'children',
-                        label: 'children',
-                        $ref: 'bb'
-                    }
-                ]
-            }
+                name: 'key'
+              },
+              {
+                label: 'combo 2',
+                name: 'value',
+                $ref: 'aa'
+              },
+              {
+                name: 'children',
+                label: 'children',
+                $ref: 'bb'
+              }
+            ]
+          }
         },
         type: 'page',
         title: '引用',
         body: [
-            {
-                type: 'form',
-                api: 'api/xxx',
-                actions: [],
-                controls: [
-                    {
-                        label: 'text2',
-                        $ref: 'aa',
-                        name: 'ref1'
-                    },
-                    {
-                        label: 'combo',
-                        $ref: 'bb',
-                        name: 'ref2',
-                        type: 'checkboxes',
-                        value: 1,
-                        options: [
-                            {
-                                label: 'Option A',
-                                value: 1
-                            },
-                            {
-                                label: 'Option B',
-                                value: 2
-                            }
-                        ]
-                    }
+          {
+            type: 'form',
+            api: 'api/xxx',
+            actions: [],
+            controls: [
+              {
+                label: 'text2',
+                $ref: 'aa',
+                name: 'ref1'
+              },
+              {
+                label: 'combo',
+                $ref: 'bb',
+                name: 'ref2',
+                type: 'checkboxes',
+                value: 1,
+                options: [
+                  {
+                    label: 'Option A',
+                    value: 1
+                  },
+                  {
+                    label: 'Option B',
+                    value: 2
+                  }
                 ]
-            }
+              }
+            ]
+          }
         ]
-    }, {
-    }, makeEnv({
-    })));
+      },
+      {},
+      makeEnv({})
+    )
+  );
 
-    expect(container).toMatchSnapshot();
-});
\ No newline at end of file
+  expect(container).toMatchSnapshot();
+});
diff --git a/__tests__/renderers/Form/__snapshots__/array.test.tsx.snap b/__tests__/renderers/Form/__snapshots__/array.test.tsx.snap
index 95fcdb218..ddc336e2c 100644
--- a/__tests__/renderers/Form/__snapshots__/array.test.tsx.snap
+++ b/__tests__/renderers/Form/__snapshots__/array.test.tsx.snap
@@ -36,107 +36,6 @@ exports[`Renderer:array 1`] = `
               颜色集合
             </span>
           </label>
-          <div
-            class="a-ComboControl a-Form-control is-inline"
-          >
-            <div
-              class="a-Combo a-Combo--multi a-Combo--hor"
-            >
-              <div
-                class="a-Combo-items"
-              >
-                <div
-                  class="a-Combo-item"
-                >
-                  <div
-                    class="a-Combo-itemInner"
-                  >
-                    <div
-                      class="a-Form a-Form--row a-Combo-form"
-                      novalidate=""
-                    >
-                      <div
-                        class="a-Form-row"
-                      >
-                        <div
-                          class="a-Form-col"
-                        >
-                          <div
-                            class="a-Form-item a-Form-item--row"
-                          >
-                            <div
-                              class="a-Form-rowInner"
-                            >
-                              <div
-                                class="a-ColorControl a-Form-control"
-                              >
-                                <div
-                                  class="a-ColorPicker"
-                                >
-                                  <input
-                                    autocomplete="off"
-                                    class="a-ColorPicker-input"
-                                    placeholder="请选择颜色"
-                                    size="10"
-                                    type="text"
-                                    value="red"
-                                  />
-                                  <a
-                                    class="a-ColorPicker-clear"
-                                  >
-                                    <svg
-                                      class="icon"
-                                      p-id="1463"
-                                      version="1.1"
-                                      viewBox="0 0 1024 1024"
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    >
-                                      <path
-                                        d="M967.81435 106.836237 917.16274 56.18565 512 461.34839 106.836237 56.18565 56.184627 106.836237 461.34839 512 56.184627 917.163763 106.836237 967.815373 512 562.65161 917.16274 967.815373 967.81435 917.163763 562.650587 512Z"
-                                        data-spm-anchor-id="a313x.7781069.0.i0"
-                                        p-id="1464"
-                                      />
-                                    </svg>
-                                  </a>
-                                  <span
-                                    class="a-ColorPicker-preview"
-                                  >
-                                    <i
-                                      class="a-ColorPicker-previewIcon"
-                                      style="background: red;"
-                                    />
-                                  </span>
-                                </div>
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="a-Combo-toolbar"
-              >
-                <button
-                  class="a-Button a-Combo-addBtn"
-                  data-tooltip="新增一条数据"
-                  type="button"
-                >
-                  <i
-                    class="a-Button-icon fa fa-plus"
-                  />
-                  <span>
-                    新增
-                  </span>
-                </button>
-                <span
-                  class="a-Combo-dragableTip"
-                />
-              </div>
-            </div>
-          </div>
         </div>
       </form>
     </div>
@@ -144,22 +43,40 @@ exports[`Renderer:array 1`] = `
       class="resize-sensor"
       style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
     >
+      
+  
       <div
         class="resize-sensor-expand"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
         />
+        
+  
       </div>
+      
+  
       <div
         class="resize-sensor-shrink"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
         />
+        
+  
       </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
     </div>
   </div>
 </div>
diff --git a/__tests__/renderers/Form/__snapshots__/button.test.tsx.snap b/__tests__/renderers/Form/__snapshots__/button.test.tsx.snap
index 3ff996003..71cc437f0 100644
--- a/__tests__/renderers/Form/__snapshots__/button.test.tsx.snap
+++ b/__tests__/renderers/Form/__snapshots__/button.test.tsx.snap
@@ -83,22 +83,40 @@ exports[`Renderer:button 1`] = `
       class="resize-sensor"
       style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
     >
+      
+  
       <div
         class="resize-sensor-expand"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
         />
+        
+  
       </div>
+      
+  
       <div
         class="resize-sensor-shrink"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
         />
+        
+  
       </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
     </div>
   </div>
 </div>
@@ -187,90 +205,40 @@ exports[`Renderer:button 2`] = `
       class="resize-sensor"
       style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
     >
+      
+  
       <div
         class="resize-sensor-expand"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
         />
+        
+  
       </div>
+      
+  
       <div
         class="resize-sensor-shrink"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
         />
+        
+  
       </div>
-    </div>
-  </div>
-  <div
-    class="amis-dialog-widget a-Modal a-Modal--1th"
-    role="dialog"
-  >
-    <div
-      class="a-Modal-overlay in"
-    />
-    <div
-      class="a-Modal-content in"
-    >
+      
+  
       <div
-        class="a-Modal-header"
-      >
-        <a
-          class="a-Modal-close"
-          data-tooltip="关闭弹窗"
-        >
-          <svg
-            class="icon"
-            p-id="1463"
-            version="1.1"
-            viewBox="0 0 1024 1024"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M967.81435 106.836237 917.16274 56.18565 512 461.34839 106.836237 56.18565 56.184627 106.836237 461.34839 512 56.184627 917.163763 106.836237 967.815373 512 562.65161 917.16274 967.815373 967.81435 917.163763 562.650587 512Z"
-              data-spm-anchor-id="a313x.7781069.0.i0"
-              p-id="1464"
-            />
-          </svg>
-        </a>
-        <div
-          class="a-Modal-title"
-        >
-          提示
-        </div>
-      </div>
-      <div
-        class="a-Modal-body"
-      >
-        <span
-          class="a-TplField"
-        >
-          对，你刚点击了！
-        </span>
-      </div>
-      <div
-        class="a-Modal-footer"
-      >
-        <button
-          class="a-Button a-Button--default"
-          type="button"
-        >
-          <span>
-            取消
-          </span>
-        </button>
-        <button
-          class="a-Button a-Button--primary"
-          type="button"
-        >
-          <span>
-            确认
-          </span>
-        </button>
-      </div>
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
     </div>
   </div>
 </div>
diff --git a/__tests__/renderers/Form/__snapshots__/buttonGroup.test.tsx.snap b/__tests__/renderers/Form/__snapshots__/buttonGroup.test.tsx.snap
index d36366a02..914e7597f 100644
--- a/__tests__/renderers/Form/__snapshots__/buttonGroup.test.tsx.snap
+++ b/__tests__/renderers/Form/__snapshots__/buttonGroup.test.tsx.snap
@@ -95,22 +95,40 @@ exports[`Renderer:button-group 1`] = `
       class="resize-sensor"
       style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
     >
+      
+  
       <div
         class="resize-sensor-expand"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
         />
+        
+  
       </div>
+      
+  
       <div
         class="resize-sensor-shrink"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
         />
+        
+  
       </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
     </div>
   </div>
 </div>
@@ -196,7 +214,11 @@ exports[`Renderer:button-group:multiple clearable 1`] = `
               <span
                 class="a-TplField"
               >
-                a,b
+                <span
+                  class="text-muted"
+                >
+                  -
+                </span>
               </span>
             </div>
           </div>
@@ -207,22 +229,40 @@ exports[`Renderer:button-group:multiple clearable 1`] = `
       class="resize-sensor"
       style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
     >
+      
+  
       <div
         class="resize-sensor-expand"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
         />
+        
+  
       </div>
+      
+  
       <div
         class="resize-sensor-shrink"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
         />
+        
+  
       </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
     </div>
   </div>
 </div>
@@ -308,7 +348,11 @@ exports[`Renderer:button-group:multiple clearable 2`] = `
               <span
                 class="a-TplField"
               >
-                a
+                <span
+                  class="text-muted"
+                >
+                  -
+                </span>
               </span>
             </div>
           </div>
@@ -319,22 +363,40 @@ exports[`Renderer:button-group:multiple clearable 2`] = `
       class="resize-sensor"
       style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
     >
+      
+  
       <div
         class="resize-sensor-expand"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
         />
+        
+  
       </div>
+      
+  
       <div
         class="resize-sensor-shrink"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
         />
+        
+  
       </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
     </div>
   </div>
 </div>
diff --git a/__tests__/renderers/Form/__snapshots__/buttonToolBar.test.tsx.snap b/__tests__/renderers/Form/__snapshots__/buttonToolBar.test.tsx.snap
index 4bfcbdfe2..63893dba7 100644
--- a/__tests__/renderers/Form/__snapshots__/buttonToolBar.test.tsx.snap
+++ b/__tests__/renderers/Form/__snapshots__/buttonToolBar.test.tsx.snap
@@ -64,22 +64,40 @@ exports[`Renderer:button-toolbar 1`] = `
       class="resize-sensor"
       style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
     >
+      
+  
       <div
         class="resize-sensor-expand"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
         />
+        
+  
       </div>
+      
+  
       <div
         class="resize-sensor-shrink"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
         />
+        
+  
       </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
     </div>
   </div>
 </div>
@@ -149,90 +167,40 @@ exports[`Renderer:button-toolbar 2`] = `
       class="resize-sensor"
       style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
     >
+      
+  
       <div
         class="resize-sensor-expand"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
         />
+        
+  
       </div>
+      
+  
       <div
         class="resize-sensor-shrink"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
         />
+        
+  
       </div>
-    </div>
-  </div>
-  <div
-    class="amis-dialog-widget a-Modal a-Modal--1th"
-    role="dialog"
-  >
-    <div
-      class="a-Modal-overlay in"
-    />
-    <div
-      class="a-Modal-content in"
-    >
+      
+  
       <div
-        class="a-Modal-header"
-      >
-        <a
-          class="a-Modal-close"
-          data-tooltip="关闭弹窗"
-        >
-          <svg
-            class="icon"
-            p-id="1463"
-            version="1.1"
-            viewBox="0 0 1024 1024"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M967.81435 106.836237 917.16274 56.18565 512 461.34839 106.836237 56.18565 56.184627 106.836237 461.34839 512 56.184627 917.163763 106.836237 967.815373 512 562.65161 917.16274 967.815373 967.81435 917.163763 562.650587 512Z"
-              data-spm-anchor-id="a313x.7781069.0.i0"
-              p-id="1464"
-            />
-          </svg>
-        </a>
-        <div
-          class="a-Modal-title"
-        >
-          提示
-        </div>
-      </div>
-      <div
-        class="a-Modal-body"
-      >
-        <span
-          class="a-TplField"
-        >
-          对，你刚点击了！
-        </span>
-      </div>
-      <div
-        class="a-Modal-footer"
-      >
-        <button
-          class="a-Button a-Button--default"
-          type="button"
-        >
-          <span>
-            取消
-          </span>
-        </button>
-        <button
-          class="a-Button a-Button--primary"
-          type="button"
-        >
-          <span>
-            确认
-          </span>
-        </button>
-      </div>
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
     </div>
   </div>
 </div>
diff --git a/__tests__/renderers/Form/__snapshots__/checkbox.test.tsx.snap b/__tests__/renderers/Form/__snapshots__/checkbox.test.tsx.snap
index fcad00b4c..1a8e20e3a 100644
--- a/__tests__/renderers/Form/__snapshots__/checkbox.test.tsx.snap
+++ b/__tests__/renderers/Form/__snapshots__/checkbox.test.tsx.snap
@@ -46,7 +46,9 @@ exports[`Renderer:checkbox 1`] = `
                 type="checkbox"
               />
               <i />
-              <span>
+              <span
+                class=""
+              >
                 <span
                   class="a-TplField"
                 >
@@ -62,22 +64,40 @@ exports[`Renderer:checkbox 1`] = `
       class="resize-sensor"
       style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
     >
+      
+  
       <div
         class="resize-sensor-expand"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
         />
+        
+  
       </div>
+      
+  
       <div
         class="resize-sensor-shrink"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
         />
+        
+  
       </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
     </div>
   </div>
 </div>
diff --git a/__tests__/renderers/Form/__snapshots__/checkboxes.test.tsx.snap b/__tests__/renderers/Form/__snapshots__/checkboxes.test.tsx.snap
index 66d72f4d8..b50385f6a 100644
--- a/__tests__/renderers/Form/__snapshots__/checkboxes.test.tsx.snap
+++ b/__tests__/renderers/Form/__snapshots__/checkboxes.test.tsx.snap
@@ -46,7 +46,9 @@ exports[`Renderer:checkboxes 1`] = `
                 type="checkbox"
               />
               <i />
-              <span>
+              <span
+                class=""
+              >
                 Option A
               </span>
             </label>
@@ -57,7 +59,9 @@ exports[`Renderer:checkboxes 1`] = `
                 type="checkbox"
               />
               <i />
-              <span>
+              <span
+                class=""
+              >
                 Option B
               </span>
             </label>
@@ -68,7 +72,9 @@ exports[`Renderer:checkboxes 1`] = `
                 type="checkbox"
               />
               <i />
-              <span>
+              <span
+                class=""
+              >
                 Option C
               </span>
             </label>
@@ -79,7 +85,9 @@ exports[`Renderer:checkboxes 1`] = `
                 type="checkbox"
               />
               <i />
-              <span>
+              <span
+                class=""
+              >
                 Option D
               </span>
             </label>
@@ -119,22 +127,40 @@ exports[`Renderer:checkboxes 1`] = `
       class="resize-sensor"
       style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
     >
+      
+  
       <div
         class="resize-sensor-expand"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
         />
+        
+  
       </div>
+      
+  
       <div
         class="resize-sensor-shrink"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
         />
+        
+  
       </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
     </div>
   </div>
 </div>
@@ -186,7 +212,9 @@ exports[`Renderer:checkboxes 2`] = `
                 type="checkbox"
               />
               <i />
-              <span>
+              <span
+                class=""
+              >
                 Option A
               </span>
             </label>
@@ -197,7 +225,9 @@ exports[`Renderer:checkboxes 2`] = `
                 type="checkbox"
               />
               <i />
-              <span>
+              <span
+                class=""
+              >
                 Option B
               </span>
             </label>
@@ -208,7 +238,9 @@ exports[`Renderer:checkboxes 2`] = `
                 type="checkbox"
               />
               <i />
-              <span>
+              <span
+                class=""
+              >
                 Option C
               </span>
             </label>
@@ -219,7 +251,9 @@ exports[`Renderer:checkboxes 2`] = `
                 type="checkbox"
               />
               <i />
-              <span>
+              <span
+                class=""
+              >
                 Option D
               </span>
             </label>
@@ -259,22 +293,40 @@ exports[`Renderer:checkboxes 2`] = `
       class="resize-sensor"
       style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
     >
+      
+  
       <div
         class="resize-sensor-expand"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
         />
+        
+  
       </div>
+      
+  
       <div
         class="resize-sensor-shrink"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
         />
+        
+  
       </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
     </div>
   </div>
 </div>
diff --git a/__tests__/renderers/Form/__snapshots__/city.test.tsx.snap b/__tests__/renderers/Form/__snapshots__/city.test.tsx.snap
index e62a5ade9..d7476c8fa 100644
--- a/__tests__/renderers/Form/__snapshots__/city.test.tsx.snap
+++ b/__tests__/renderers/Form/__snapshots__/city.test.tsx.snap
@@ -110,22 +110,40 @@ exports[`Renderer:city 1`] = `
       class="resize-sensor"
       style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
     >
+      
+  
       <div
         class="resize-sensor-expand"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
         />
+        
+  
       </div>
+      
+  
       <div
         class="resize-sensor-shrink"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
         />
+        
+  
       </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
     </div>
   </div>
 </div>
diff --git a/__tests__/renderers/Form/__snapshots__/color.test.tsx.snap b/__tests__/renderers/Form/__snapshots__/color.test.tsx.snap
index d87cb94e2..f3d5ffcc6 100644
--- a/__tests__/renderers/Form/__snapshots__/color.test.tsx.snap
+++ b/__tests__/renderers/Form/__snapshots__/color.test.tsx.snap
@@ -53,19 +53,10 @@ exports[`Renderer:color 1`] = `
               <a
                 class="a-ColorPicker-clear"
               >
-                <svg
-                  class="icon"
-                  p-id="1463"
-                  version="1.1"
-                  viewBox="0 0 1024 1024"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M967.81435 106.836237 917.16274 56.18565 512 461.34839 106.836237 56.18565 56.184627 106.836237 461.34839 512 56.184627 917.163763 106.836237 967.815373 512 562.65161 917.16274 967.815373 967.81435 917.163763 562.650587 512Z"
-                    data-spm-anchor-id="a313x.7781069.0.i0"
-                    p-id="1464"
-                  />
-                </svg>
+                <icon-mock
+                  classname="icon"
+                  icon="close"
+                />
               </a>
               <span
                 class="a-ColorPicker-preview"
@@ -84,22 +75,40 @@ exports[`Renderer:color 1`] = `
       class="resize-sensor"
       style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
     >
+      
+  
       <div
         class="resize-sensor-expand"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
         />
+        
+  
       </div>
+      
+  
       <div
         class="resize-sensor-shrink"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
         />
+        
+  
       </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
     </div>
   </div>
 </div>
diff --git a/__tests__/renderers/Form/__snapshots__/container.test.tsx.snap b/__tests__/renderers/Form/__snapshots__/container.test.tsx.snap
index 4f5416c12..a14d624aa 100644
--- a/__tests__/renderers/Form/__snapshots__/container.test.tsx.snap
+++ b/__tests__/renderers/Form/__snapshots__/container.test.tsx.snap
@@ -51,7 +51,9 @@ exports[`Renderer:container 1`] = `
                   <label
                     class="a-Form-label a-Form-itemColumn--normal"
                   >
-                    <span />
+                    <span>
+                      
+                    </span>
                   </label>
                   <div
                     class="a-Form-value a-Form-itemColumn--7"
@@ -66,6 +68,7 @@ exports[`Renderer:container 1`] = `
                           autocomplete="off"
                           name="text"
                           placeholder=""
+                          size="10"
                           type="text"
                           value=""
                         />
@@ -95,22 +98,40 @@ exports[`Renderer:container 1`] = `
       class="resize-sensor"
       style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
     >
+      
+  
       <div
         class="resize-sensor-expand"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
         />
+        
+  
       </div>
+      
+  
       <div
         class="resize-sensor-shrink"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
         />
+        
+  
       </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
     </div>
   </div>
 </div>
diff --git a/__tests__/renderers/Form/__snapshots__/date.test.tsx.snap b/__tests__/renderers/Form/__snapshots__/date.test.tsx.snap
index d92210b8b..6886d2713 100644
--- a/__tests__/renderers/Form/__snapshots__/date.test.tsx.snap
+++ b/__tests__/renderers/Form/__snapshots__/date.test.tsx.snap
@@ -51,19 +51,10 @@ exports[`Renderer:date 1`] = `
               <a
                 class="a-DatePicker-clear"
               >
-                <svg
-                  class="icon"
-                  p-id="1463"
-                  version="1.1"
-                  viewBox="0 0 1024 1024"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M967.81435 106.836237 917.16274 56.18565 512 461.34839 106.836237 56.18565 56.184627 106.836237 461.34839 512 56.184627 917.163763 106.836237 967.815373 512 562.65161 917.16274 967.815373 967.81435 917.163763 562.650587 512Z"
-                    data-spm-anchor-id="a313x.7781069.0.i0"
-                    p-id="1464"
-                  />
-                </svg>
+                <icon-mock
+                  classname="icon"
+                  icon="close"
+                />
               </a>
               <a
                 class="a-DatePicker-toggler"
@@ -77,22 +68,40 @@ exports[`Renderer:date 1`] = `
       class="resize-sensor"
       style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
     >
+      
+  
       <div
         class="resize-sensor-expand"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
         />
+        
+  
       </div>
+      
+  
       <div
         class="resize-sensor-shrink"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
         />
+        
+  
       </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
     </div>
   </div>
 </div>
diff --git a/__tests__/renderers/Form/__snapshots__/dateRang.test.tsx.snap b/__tests__/renderers/Form/__snapshots__/dateRang.test.tsx.snap
index 62ce02ce3..2d0f6ef06 100644
--- a/__tests__/renderers/Form/__snapshots__/dateRang.test.tsx.snap
+++ b/__tests__/renderers/Form/__snapshots__/dateRang.test.tsx.snap
@@ -51,19 +51,10 @@ exports[`Renderer:dateRange 1`] = `
               <a
                 class="a-DateRangePicker-clear"
               >
-                <svg
-                  class="icon"
-                  p-id="1463"
-                  version="1.1"
-                  viewBox="0 0 1024 1024"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M967.81435 106.836237 917.16274 56.18565 512 461.34839 106.836237 56.18565 56.184627 106.836237 461.34839 512 56.184627 917.163763 106.836237 967.815373 512 562.65161 917.16274 967.815373 967.81435 917.163763 562.650587 512Z"
-                    data-spm-anchor-id="a313x.7781069.0.i0"
-                    p-id="1464"
-                  />
-                </svg>
+                <icon-mock
+                  classname="icon"
+                  icon="close"
+                />
               </a>
               <a
                 class="a-DateRangePicker-toggler"
@@ -81,22 +72,40 @@ exports[`Renderer:dateRange 1`] = `
       class="resize-sensor"
       style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
     >
+      
+  
       <div
         class="resize-sensor-expand"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
         />
+        
+  
       </div>
+      
+  
       <div
         class="resize-sensor-shrink"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
         />
+        
+  
       </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
     </div>
   </div>
 </div>
diff --git a/__tests__/renderers/Form/__snapshots__/datetime.test.tsx.snap b/__tests__/renderers/Form/__snapshots__/datetime.test.tsx.snap
index e80333fc0..2a4b7bf8e 100644
--- a/__tests__/renderers/Form/__snapshots__/datetime.test.tsx.snap
+++ b/__tests__/renderers/Form/__snapshots__/datetime.test.tsx.snap
@@ -51,19 +51,10 @@ exports[`Renderer:date 1`] = `
               <a
                 class="a-DatePicker-clear"
               >
-                <svg
-                  class="icon"
-                  p-id="1463"
-                  version="1.1"
-                  viewBox="0 0 1024 1024"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M967.81435 106.836237 917.16274 56.18565 512 461.34839 106.836237 56.18565 56.184627 106.836237 461.34839 512 56.184627 917.163763 106.836237 967.815373 512 562.65161 917.16274 967.815373 967.81435 917.163763 562.650587 512Z"
-                    data-spm-anchor-id="a313x.7781069.0.i0"
-                    p-id="1464"
-                  />
-                </svg>
+                <icon-mock
+                  classname="icon"
+                  icon="close"
+                />
               </a>
               <a
                 class="a-DatePicker-toggler"
@@ -77,22 +68,40 @@ exports[`Renderer:date 1`] = `
       class="resize-sensor"
       style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
     >
+      
+  
       <div
         class="resize-sensor-expand"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
         />
+        
+  
       </div>
+      
+  
       <div
         class="resize-sensor-shrink"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
         />
+        
+  
       </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
     </div>
   </div>
 </div>
diff --git a/__tests__/renderers/Form/__snapshots__/fieldSet.test.tsx.snap b/__tests__/renderers/Form/__snapshots__/fieldSet.test.tsx.snap
index ca47c36dc..d20a0d7d3 100644
--- a/__tests__/renderers/Form/__snapshots__/fieldSet.test.tsx.snap
+++ b/__tests__/renderers/Form/__snapshots__/fieldSet.test.tsx.snap
@@ -30,7 +30,7 @@ exports[`Renderer:fieldSet 1`] = `
           class="a-Collapse a-Collapse--collapsable no-border"
         >
           <div
-            class="a-Collapse-body bg-white collapse in"
+            class="a-Collapse-content a-Collapse-body bg-white"
           >
             <div
               class="a-Form--horizontal"
@@ -41,7 +41,9 @@ exports[`Renderer:fieldSet 1`] = `
                 <label
                   class="a-Form-label a-Form-itemColumn--normal"
                 >
-                  <span />
+                  <span>
+                    
+                  </span>
                 </label>
                 <div
                   class="a-Form-value a-Form-itemColumn--7"
@@ -56,6 +58,7 @@ exports[`Renderer:fieldSet 1`] = `
                         autocomplete="off"
                         name="text"
                         placeholder=""
+                        size="10"
                         type="text"
                         value=""
                       />
@@ -72,22 +75,40 @@ exports[`Renderer:fieldSet 1`] = `
       class="resize-sensor"
       style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
     >
+      
+  
       <div
         class="resize-sensor-expand"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
         />
+        
+  
       </div>
+      
+  
       <div
         class="resize-sensor-shrink"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
         />
+        
+  
       </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
     </div>
   </div>
 </div>
diff --git a/__tests__/renderers/Form/__snapshots__/formula.test.tsx.snap b/__tests__/renderers/Form/__snapshots__/formula.test.tsx.snap
index 903e4b129..95c9b35a0 100644
--- a/__tests__/renderers/Form/__snapshots__/formula.test.tsx.snap
+++ b/__tests__/renderers/Form/__snapshots__/formula.test.tsx.snap
@@ -337,22 +337,40 @@ exports[`Renderer:formula 1`] = `
       class="resize-sensor"
       style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
     >
+      
+  
       <div
         class="resize-sensor-expand"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
         />
+        
+  
       </div>
+      
+  
       <div
         class="resize-sensor-shrink"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
         />
+        
+  
       </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
     </div>
   </div>
 </div>
diff --git a/__tests__/renderers/Form/__snapshots__/grid.test.tsx.snap b/__tests__/renderers/Form/__snapshots__/grid.test.tsx.snap
index 2085eed04..462d2f672 100644
--- a/__tests__/renderers/Form/__snapshots__/grid.test.tsx.snap
+++ b/__tests__/renderers/Form/__snapshots__/grid.test.tsx.snap
@@ -51,6 +51,7 @@ exports[`Renderer:hbox 1`] = `
                         autocomplete="off"
                         name="text"
                         placeholder="Text"
+                        size="10"
                         type="text"
                         value=""
                       />
@@ -76,22 +77,40 @@ exports[`Renderer:hbox 1`] = `
       class="resize-sensor"
       style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
     >
+      
+  
       <div
         class="resize-sensor-expand"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
         />
+        
+  
       </div>
+      
+  
       <div
         class="resize-sensor-shrink"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
         />
+        
+  
       </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
     </div>
   </div>
 </div>
diff --git a/__tests__/renderers/Form/__snapshots__/group.test.tsx.snap b/__tests__/renderers/Form/__snapshots__/group.test.tsx.snap
index a928ae1d8..80c8cdd6c 100644
--- a/__tests__/renderers/Form/__snapshots__/group.test.tsx.snap
+++ b/__tests__/renderers/Form/__snapshots__/group.test.tsx.snap
@@ -55,6 +55,7 @@ exports[`Renderer:group 1`] = `
                       autocomplete="off"
                       name="test1"
                       placeholder="Placeholder"
+                      size="10"
                       type="text"
                       value=""
                     />
@@ -89,6 +90,7 @@ exports[`Renderer:group 1`] = `
                       autocomplete="off"
                       name="test2"
                       placeholder="Placeholder"
+                      size="10"
                       type="text"
                       value=""
                     />
@@ -124,6 +126,7 @@ exports[`Renderer:group 1`] = `
                     autocomplete="off"
                     name="test1"
                     placeholder="Placeholder"
+                    size="10"
                     type="text"
                     value=""
                   />
@@ -154,6 +157,7 @@ exports[`Renderer:group 1`] = `
                     autocomplete="off"
                     name="test2"
                     placeholder="Placeholder"
+                    size="10"
                     type="text"
                     value=""
                   />
@@ -185,6 +189,7 @@ exports[`Renderer:group 1`] = `
                   autocomplete="off"
                   name="test1"
                   placeholder="Placeholder"
+                  size="10"
                   type="text"
                   value=""
                 />
@@ -211,6 +216,7 @@ exports[`Renderer:group 1`] = `
                   autocomplete="off"
                   name="test2"
                   placeholder="Placeholder"
+                  size="10"
                   type="text"
                   value=""
                 />
@@ -224,22 +230,40 @@ exports[`Renderer:group 1`] = `
       class="resize-sensor"
       style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
     >
+      
+  
       <div
         class="resize-sensor-expand"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
         />
+        
+  
       </div>
+      
+  
       <div
         class="resize-sensor-shrink"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
         />
+        
+  
       </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
     </div>
   </div>
 </div>
diff --git a/__tests__/renderers/Form/__snapshots__/hbox.test.tsx.snap b/__tests__/renderers/Form/__snapshots__/hbox.test.tsx.snap
index f8d7f1c73..b3515d88c 100644
--- a/__tests__/renderers/Form/__snapshots__/hbox.test.tsx.snap
+++ b/__tests__/renderers/Form/__snapshots__/hbox.test.tsx.snap
@@ -51,6 +51,7 @@ exports[`Renderer:hbox 1`] = `
                         autocomplete="off"
                         name="text"
                         placeholder="Text"
+                        size="10"
                         type="text"
                         value=""
                       />
@@ -76,22 +77,40 @@ exports[`Renderer:hbox 1`] = `
       class="resize-sensor"
       style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
     >
+      
+  
       <div
         class="resize-sensor-expand"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
         />
+        
+  
       </div>
+      
+  
       <div
         class="resize-sensor-shrink"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
         />
+        
+  
       </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
     </div>
   </div>
 </div>
diff --git a/__tests__/renderers/Form/__snapshots__/iconPicker.test.tsx.snap b/__tests__/renderers/Form/__snapshots__/iconPicker.test.tsx.snap
index d867f8e2b..8b598d175 100644
--- a/__tests__/renderers/Form/__snapshots__/iconPicker.test.tsx.snap
+++ b/__tests__/renderers/Form/__snapshots__/iconPicker.test.tsx.snap
@@ -63,6 +63,7 @@ exports[`Renderer:icon-picker 1`] = `
                   autocomplete="off"
                   id="downshift-0-input"
                   name="a"
+                  size="10"
                   value=""
                 />
               </div>
@@ -75,22 +76,40 @@ exports[`Renderer:icon-picker 1`] = `
       class="resize-sensor"
       style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
     >
+      
+  
       <div
         class="resize-sensor-expand"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
         />
+        
+  
       </div>
+      
+  
       <div
         class="resize-sensor-shrink"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
         />
+        
+  
       </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
     </div>
   </div>
 </div>
diff --git a/__tests__/renderers/Form/__snapshots__/index.test.tsx.snap b/__tests__/renderers/Form/__snapshots__/index.test.tsx.snap
index 0ec091f82..daf8a73ea 100644
--- a/__tests__/renderers/Form/__snapshots__/index.test.tsx.snap
+++ b/__tests__/renderers/Form/__snapshots__/index.test.tsx.snap
@@ -46,6 +46,7 @@ exports[`Renderer:Form 1`] = `
                 autocomplete="off"
                 name="a"
                 placeholder=""
+                size="10"
                 type="text"
                 value="123"
               />
@@ -72,22 +73,40 @@ exports[`Renderer:Form 1`] = `
       class="resize-sensor"
       style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
     >
+      
+  
       <div
         class="resize-sensor-expand"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
         />
+        
+  
       </div>
+      
+  
       <div
         class="resize-sensor-shrink"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
         />
+        
+  
       </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
     </div>
   </div>
 </div>
@@ -135,6 +154,12 @@ exports[`Renderer:Form initApi 1`] = `
         class="a-Form a-Form--normal"
         novalidate=""
       >
+        <div
+          class="a-Spinner-overlay"
+        />
+        <div
+          class="a-Spinner a-Spinner--overlay"
+        />
         <div
           class="a-Form-item a-Form-item--normal"
         >
@@ -155,6 +180,7 @@ exports[`Renderer:Form initApi 1`] = `
                 autocomplete="off"
                 name="a"
                 placeholder=""
+                size="10"
                 type="text"
                 value="1"
               />
@@ -181,6 +207,7 @@ exports[`Renderer:Form initApi 1`] = `
                 autocomplete="off"
                 name="b"
                 placeholder=""
+                size="10"
                 type="text"
                 value="2"
               />
@@ -207,22 +234,40 @@ exports[`Renderer:Form initApi 1`] = `
       class="resize-sensor"
       style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
     >
+      
+  
       <div
         class="resize-sensor-expand"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
         />
+        
+  
       </div>
+      
+  
       <div
         class="resize-sensor-shrink"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
         />
+        
+  
       </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
     </div>
   </div>
 </div>
@@ -254,6 +299,12 @@ exports[`Renderer:Form sendOn:true 1`] = `
         class="a-Form a-Form--normal"
         novalidate=""
       >
+        <div
+          class="a-Spinner-overlay"
+        />
+        <div
+          class="a-Spinner a-Spinner--overlay"
+        />
         <div
           class="a-Form-item a-Form-item--normal"
         >
@@ -274,6 +325,7 @@ exports[`Renderer:Form sendOn:true 1`] = `
                 autocomplete="off"
                 name="a"
                 placeholder=""
+                size="10"
                 type="text"
                 value="1"
               />
@@ -300,6 +352,7 @@ exports[`Renderer:Form sendOn:true 1`] = `
                 autocomplete="off"
                 name="b"
                 placeholder=""
+                size="10"
                 type="text"
                 value="2"
               />
@@ -326,22 +379,40 @@ exports[`Renderer:Form sendOn:true 1`] = `
       class="resize-sensor"
       style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
     >
+      
+  
       <div
         class="resize-sensor-expand"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
         />
+        
+  
       </div>
+      
+  
       <div
         class="resize-sensor-shrink"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
         />
+        
+  
       </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
     </div>
   </div>
 </div>
@@ -393,6 +464,7 @@ exports[`Renderer:Form:onValidate 1`] = `
                 autocomplete="off"
                 name="a"
                 placeholder=""
+                size="10"
                 type="text"
                 value="1"
               />
@@ -426,6 +498,7 @@ exports[`Renderer:Form:onValidate 1`] = `
                 autocomplete="off"
                 name="b"
                 placeholder=""
+                size="10"
                 type="text"
                 value="2"
               />
@@ -462,22 +535,40 @@ exports[`Renderer:Form:onValidate 1`] = `
       class="resize-sensor"
       style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
     >
+      
+  
       <div
         class="resize-sensor-expand"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
         />
+        
+  
       </div>
+      
+  
       <div
         class="resize-sensor-shrink"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
         />
+        
+  
       </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
     </div>
   </div>
 </div>
@@ -536,6 +627,7 @@ exports[`Renderer:Form:onValidate 3`] = `
                 autocomplete="off"
                 name="a"
                 placeholder=""
+                size="10"
                 type="text"
                 value="1"
               />
@@ -562,6 +654,7 @@ exports[`Renderer:Form:onValidate 3`] = `
                 autocomplete="off"
                 name="b"
                 placeholder=""
+                size="10"
                 type="text"
                 value="2"
               />
@@ -588,22 +681,40 @@ exports[`Renderer:Form:onValidate 3`] = `
       class="resize-sensor"
       style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
     >
+      
+  
       <div
         class="resize-sensor-expand"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
         />
+        
+  
       </div>
+      
+  
       <div
         class="resize-sensor-shrink"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
         />
+        
+  
       </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
     </div>
   </div>
 </div>
@@ -642,6 +753,12 @@ exports[`Renderer:Form:remoteValidate 1`] = `
         class="a-Form a-Form--normal"
         novalidate=""
       >
+        <div
+          class="a-Spinner-overlay"
+        />
+        <div
+          class="a-Spinner a-Spinner--overlay"
+        />
         <div
           class="a-Form-item a-Form-item--normal is-error"
         >
@@ -662,6 +779,7 @@ exports[`Renderer:Form:remoteValidate 1`] = `
                 autocomplete="off"
                 name="a"
                 placeholder=""
+                size="10"
                 type="text"
                 value=""
               />
@@ -695,22 +813,40 @@ exports[`Renderer:Form:remoteValidate 1`] = `
       class="resize-sensor"
       style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
     >
+      
+  
       <div
         class="resize-sensor-expand"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
         />
+        
+  
       </div>
+      
+  
       <div
         class="resize-sensor-shrink"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
         />
+        
+  
       </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
     </div>
   </div>
 </div>
@@ -767,6 +903,7 @@ exports[`Renderer:Form:valdiate 1`] = `
                 autocomplete="off"
                 name="a"
                 placeholder=""
+                size="10"
                 type="text"
                 value=""
               />
@@ -801,22 +938,40 @@ exports[`Renderer:Form:valdiate 1`] = `
       class="resize-sensor"
       style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
     >
+      
+  
       <div
         class="resize-sensor-expand"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
         />
+        
+  
       </div>
+      
+  
       <div
         class="resize-sensor-shrink"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
         />
+        
+  
       </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
     </div>
   </div>
 </div>
@@ -873,6 +1028,7 @@ exports[`Renderer:Form:valdiate 2`] = `
                 autocomplete="off"
                 name="a"
                 placeholder=""
+                size="10"
                 type="text"
                 value="123"
               />
@@ -899,22 +1055,40 @@ exports[`Renderer:Form:valdiate 2`] = `
       class="resize-sensor"
       style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
     >
+      
+  
       <div
         class="resize-sensor-expand"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
         />
+        
+  
       </div>
+      
+  
       <div
         class="resize-sensor-shrink"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
         />
+        
+  
       </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
     </div>
   </div>
 </div>
diff --git a/__tests__/renderers/Form/__snapshots__/inputGroup.test.tsx.snap b/__tests__/renderers/Form/__snapshots__/inputGroup.test.tsx.snap
index 72ef39134..aad37f065 100644
--- a/__tests__/renderers/Form/__snapshots__/inputGroup.test.tsx.snap
+++ b/__tests__/renderers/Form/__snapshots__/inputGroup.test.tsx.snap
@@ -49,6 +49,7 @@ exports[`Renderer:fieldSet 1`] = `
                   autocomplete="off"
                   name="text"
                   placeholder=""
+                  size="10"
                   type="text"
                   value=""
                 />
@@ -62,22 +63,40 @@ exports[`Renderer:fieldSet 1`] = `
       class="resize-sensor"
       style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
     >
+      
+  
       <div
         class="resize-sensor-expand"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
         />
+        
+  
       </div>
+      
+  
       <div
         class="resize-sensor-shrink"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
         />
+        
+  
       </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
     </div>
   </div>
 </div>
diff --git a/__tests__/renderers/Form/__snapshots__/list.test.tsx.snap b/__tests__/renderers/Form/__snapshots__/list.test.tsx.snap
index b5928d0cd..bfa725d62 100644
--- a/__tests__/renderers/Form/__snapshots__/list.test.tsx.snap
+++ b/__tests__/renderers/Form/__snapshots__/list.test.tsx.snap
@@ -86,22 +86,40 @@ exports[`Renderer:list 1`] = `
       class="resize-sensor"
       style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
     >
+      
+  
       <div
         class="resize-sensor-expand"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
         />
+        
+  
       </div>
+      
+  
       <div
         class="resize-sensor-shrink"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
         />
+        
+  
       </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
     </div>
   </div>
 </div>
@@ -189,7 +207,11 @@ exports[`Renderer:list:multiple clearable 1`] = `
               <span
                 class="a-TplField"
               >
-                a,b
+                <span
+                  class="text-muted"
+                >
+                  -
+                </span>
               </span>
             </div>
           </div>
@@ -200,22 +222,40 @@ exports[`Renderer:list:multiple clearable 1`] = `
       class="resize-sensor"
       style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
     >
+      
+  
       <div
         class="resize-sensor-expand"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
         />
+        
+  
       </div>
+      
+  
       <div
         class="resize-sensor-shrink"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
         />
+        
+  
       </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
     </div>
   </div>
 </div>
@@ -303,7 +343,11 @@ exports[`Renderer:list:multiple clearable 2`] = `
               <span
                 class="a-TplField"
               >
-                a
+                <span
+                  class="text-muted"
+                >
+                  -
+                </span>
               </span>
             </div>
           </div>
@@ -314,22 +358,40 @@ exports[`Renderer:list:multiple clearable 2`] = `
       class="resize-sensor"
       style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
     >
+      
+  
       <div
         class="resize-sensor-expand"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
         />
+        
+  
       </div>
+      
+  
       <div
         class="resize-sensor-shrink"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
         />
+        
+  
       </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
     </div>
   </div>
 </div>
diff --git a/__tests__/renderers/Form/__snapshots__/number.test.tsx.snap b/__tests__/renderers/Form/__snapshots__/number.test.tsx.snap
index 4e7da2f71..537d26eef 100644
--- a/__tests__/renderers/Form/__snapshots__/number.test.tsx.snap
+++ b/__tests__/renderers/Form/__snapshots__/number.test.tsx.snap
@@ -93,22 +93,40 @@ exports[`Renderer:number 1`] = `
       class="resize-sensor"
       style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
     >
+      
+  
       <div
         class="resize-sensor-expand"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
         />
+        
+  
       </div>
+      
+  
       <div
         class="resize-sensor-shrink"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
         />
+        
+  
       </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
     </div>
   </div>
 </div>
diff --git a/__tests__/renderers/Form/__snapshots__/panel.test.tsx.snap b/__tests__/renderers/Form/__snapshots__/panel.test.tsx.snap
index cb25a67e8..d72462837 100644
--- a/__tests__/renderers/Form/__snapshots__/panel.test.tsx.snap
+++ b/__tests__/renderers/Form/__snapshots__/panel.test.tsx.snap
@@ -85,22 +85,40 @@ exports[`Renderer:panel 1`] = `
                     class="resize-sensor"
                     style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
                   >
+                    
+  
                     <div
                       class="resize-sensor-expand"
                       style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
                     >
+                      
+    
                       <div
                         style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
                       />
+                      
+  
                     </div>
+                    
+  
                     <div
                       class="resize-sensor-shrink"
                       style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
                     >
+                      
+    
                       <div
                         style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
                       />
+                      
+  
                     </div>
+                    
+  
+                    <div
+                      class="resize-sensor-appear"
+                      style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+                    />
                   </div>
                 </div>
               </div>
@@ -125,43 +143,49 @@ exports[`Renderer:panel 1`] = `
                     </h3>
                   </div>
                   <div
-                    class="a-Form--normal"
+                    class="a-Panel-body"
                   >
                     <div
-                      class="a-Form-item a-Form-item--normal"
+                      class="a-Form--normal"
                     >
                       <div
-                        class="a-Form-control a-TextControl"
+                        class="a-Form-item a-Form-item--normal"
                       >
                         <div
-                          class="a-TextControl-input"
+                          class="a-Form-control a-TextControl"
                         >
-                          <input
-                            autocomplete="off"
-                            name="text"
-                            placeholder="Text 1"
-                            type="text"
-                            value=""
-                          />
+                          <div
+                            class="a-TextControl-input"
+                          >
+                            <input
+                              autocomplete="off"
+                              name="text"
+                              placeholder="Text 1"
+                              size="10"
+                              type="text"
+                              value=""
+                            />
+                          </div>
                         </div>
                       </div>
-                    </div>
-                    <div
-                      class="a-Form-item a-Form-item--normal"
-                    >
                       <div
-                        class="a-Form-control a-TextControl"
+                        class="a-Form-item a-Form-item--normal"
                       >
                         <div
-                          class="a-TextControl-input"
+                          class="a-Form-control a-TextControl"
                         >
-                          <input
-                            autocomplete="off"
-                            name="text2"
-                            placeholder="Text 2"
-                            type="text"
-                            value=""
-                          />
+                          <div
+                            class="a-TextControl-input"
+                          >
+                            <input
+                              autocomplete="off"
+                              name="text2"
+                              placeholder="Text 2"
+                              size="10"
+                              type="text"
+                              value=""
+                            />
+                          </div>
                         </div>
                       </div>
                     </div>
@@ -170,22 +194,40 @@ exports[`Renderer:panel 1`] = `
                     class="resize-sensor"
                     style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
                   >
+                    
+  
                     <div
                       class="resize-sensor-expand"
                       style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
                     >
+                      
+    
                       <div
                         style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
                       />
+                      
+  
                     </div>
+                    
+  
                     <div
                       class="resize-sensor-shrink"
                       style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
                     >
+                      
+    
                       <div
                         style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
                       />
+                      
+  
                     </div>
+                    
+  
+                    <div
+                      class="resize-sensor-appear"
+                      style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+                    />
                   </div>
                 </div>
               </div>
@@ -198,22 +240,40 @@ exports[`Renderer:panel 1`] = `
       class="resize-sensor"
       style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
     >
+      
+  
       <div
         class="resize-sensor-expand"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
         />
+        
+  
       </div>
+      
+  
       <div
         class="resize-sensor-shrink"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
         />
+        
+  
       </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
     </div>
   </div>
 </div>
diff --git a/__tests__/renderers/Form/__snapshots__/radios.test.tsx.snap b/__tests__/renderers/Form/__snapshots__/radios.test.tsx.snap
index 0b8caddc2..9efbd762d 100644
--- a/__tests__/renderers/Form/__snapshots__/radios.test.tsx.snap
+++ b/__tests__/renderers/Form/__snapshots__/radios.test.tsx.snap
@@ -46,7 +46,9 @@ exports[`Renderer:radios 1`] = `
                 type="radio"
               />
               <i />
-              <span>
+              <span
+                class=""
+              >
                 Option A
               </span>
             </label>
@@ -57,7 +59,9 @@ exports[`Renderer:radios 1`] = `
                 type="radio"
               />
               <i />
-              <span>
+              <span
+                class=""
+              >
                 Option B
               </span>
             </label>
@@ -68,7 +72,9 @@ exports[`Renderer:radios 1`] = `
                 type="radio"
               />
               <i />
-              <span>
+              <span
+                class=""
+              >
                 Option C
               </span>
             </label>
@@ -79,7 +85,9 @@ exports[`Renderer:radios 1`] = `
                 type="radio"
               />
               <i />
-              <span>
+              <span
+                class=""
+              >
                 Option D
               </span>
             </label>
@@ -119,22 +127,40 @@ exports[`Renderer:radios 1`] = `
       class="resize-sensor"
       style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
     >
+      
+  
       <div
         class="resize-sensor-expand"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
         />
+        
+  
       </div>
+      
+  
       <div
         class="resize-sensor-shrink"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
         />
+        
+  
       </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
     </div>
   </div>
 </div>
@@ -186,7 +212,9 @@ exports[`Renderer:radios 2`] = `
                 type="radio"
               />
               <i />
-              <span>
+              <span
+                class=""
+              >
                 Option A
               </span>
             </label>
@@ -197,7 +225,9 @@ exports[`Renderer:radios 2`] = `
                 type="radio"
               />
               <i />
-              <span>
+              <span
+                class=""
+              >
                 Option B
               </span>
             </label>
@@ -208,7 +238,9 @@ exports[`Renderer:radios 2`] = `
                 type="radio"
               />
               <i />
-              <span>
+              <span
+                class=""
+              >
                 Option C
               </span>
             </label>
@@ -219,7 +251,9 @@ exports[`Renderer:radios 2`] = `
                 type="radio"
               />
               <i />
-              <span>
+              <span
+                class=""
+              >
                 Option D
               </span>
             </label>
@@ -259,22 +293,40 @@ exports[`Renderer:radios 2`] = `
       class="resize-sensor"
       style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
     >
+      
+  
       <div
         class="resize-sensor-expand"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
         />
+        
+  
       </div>
+      
+  
       <div
         class="resize-sensor-shrink"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
         />
+        
+  
       </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
     </div>
   </div>
 </div>
diff --git a/__tests__/renderers/Form/__snapshots__/range.test.tsx.snap b/__tests__/renderers/Form/__snapshots__/range.test.tsx.snap
index f891b91bb..2fa791a97 100644
--- a/__tests__/renderers/Form/__snapshots__/range.test.tsx.snap
+++ b/__tests__/renderers/Form/__snapshots__/range.test.tsx.snap
@@ -115,19 +115,10 @@ exports[`Renderer:number 1`] = `
             <a
               class="a-InputRange-clear is-active"
             >
-              <svg
-                class="icon"
-                p-id="1463"
-                version="1.1"
-                viewBox="0 0 1024 1024"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M967.81435 106.836237 917.16274 56.18565 512 461.34839 106.836237 56.18565 56.184627 106.836237 461.34839 512 56.184627 917.163763 106.836237 967.815373 512 562.65161 917.16274 967.815373 967.81435 917.163763 562.650587 512Z"
-                  data-spm-anchor-id="a313x.7781069.0.i0"
-                  p-id="1464"
-                />
-              </svg>
+              <icon-mock
+                classname="icon"
+                icon="close"
+              />
             </a>
           </div>
         </div>
@@ -137,22 +128,40 @@ exports[`Renderer:number 1`] = `
       class="resize-sensor"
       style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
     >
+      
+  
       <div
         class="resize-sensor-expand"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
         />
+        
+  
       </div>
+      
+  
       <div
         class="resize-sensor-shrink"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
         />
+        
+  
       </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
     </div>
   </div>
 </div>
@@ -307,19 +316,10 @@ exports[`Renderer:range:multiple 1`] = `
             <a
               class="a-InputRange-clear is-active"
             >
-              <svg
-                class="icon"
-                p-id="1463"
-                version="1.1"
-                viewBox="0 0 1024 1024"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M967.81435 106.836237 917.16274 56.18565 512 461.34839 106.836237 56.18565 56.184627 106.836237 461.34839 512 56.184627 917.163763 106.836237 967.815373 512 562.65161 917.16274 967.815373 967.81435 917.163763 562.650587 512Z"
-                  data-spm-anchor-id="a313x.7781069.0.i0"
-                  p-id="1464"
-                />
-              </svg>
+              <icon-mock
+                classname="icon"
+                icon="close"
+              />
             </a>
           </div>
         </div>
@@ -329,22 +329,40 @@ exports[`Renderer:range:multiple 1`] = `
       class="resize-sensor"
       style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
     >
+      
+  
       <div
         class="resize-sensor-expand"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
         />
+        
+  
       </div>
+      
+  
       <div
         class="resize-sensor-shrink"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
         />
+        
+  
       </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
     </div>
   </div>
 </div>
diff --git a/__tests__/renderers/Form/__snapshots__/rating.test.tsx.snap b/__tests__/renderers/Form/__snapshots__/rating.test.tsx.snap
index a6a7278ac..ea25156eb 100644
--- a/__tests__/renderers/Form/__snapshots__/rating.test.tsx.snap
+++ b/__tests__/renderers/Form/__snapshots__/rating.test.tsx.snap
@@ -86,22 +86,40 @@ exports[`Renderer:rating 1`] = `
       class="resize-sensor"
       style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
     >
+      
+  
       <div
         class="resize-sensor-expand"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
         />
+        
+  
       </div>
+      
+  
       <div
         class="resize-sensor-shrink"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
         />
+        
+  
       </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
     </div>
   </div>
 </div>
diff --git a/__tests__/renderers/Form/__snapshots__/repeat.test.tsx.snap b/__tests__/renderers/Form/__snapshots__/repeat.test.tsx.snap
index b74b2988f..caf0d0132 100644
--- a/__tests__/renderers/Form/__snapshots__/repeat.test.tsx.snap
+++ b/__tests__/renderers/Form/__snapshots__/repeat.test.tsx.snap
@@ -116,7 +116,7 @@ exports[`Renderer:repeat 1`] = `
                   aria-haspopup="listbox"
                   aria-labelledby="downshift-0-label"
                   aria-owns="downshift-0-menu"
-                  class="a-Select is-opened pull-right"
+                  class="a-Select is-opened pull-right has-popover"
                   role="combobox"
                   tabindex="0"
                 >
@@ -133,8 +133,12 @@ exports[`Renderer:repeat 1`] = `
                     class="a-Select-arrow"
                   />
                   <div
-                    class="a-Select-menuOuter"
+                    class="a-PopOver a-Select-popover a-PopOver--leftBottomLeftTop"
+                    style="display: block; min-width: 0; left: 0px; top: 0px;"
                   >
+                    <div
+                      class="a-PopOver-overlay"
+                    />
                     <div
                       class="a-Select-menu"
                     >
@@ -144,7 +148,9 @@ exports[`Renderer:repeat 1`] = `
                         id="downshift-0-item-0"
                         role="option"
                       >
-                        不重复
+                        <span>
+                          不重复
+                        </span>
                       </div>
                       <div
                         aria-selected="false"
@@ -152,7 +158,9 @@ exports[`Renderer:repeat 1`] = `
                         id="downshift-0-item-1"
                         role="option"
                       >
-                        秒
+                        <span>
+                          秒
+                        </span>
                       </div>
                       <div
                         aria-selected="false"
@@ -160,7 +168,9 @@ exports[`Renderer:repeat 1`] = `
                         id="downshift-0-item-2"
                         role="option"
                       >
-                        分
+                        <span>
+                          分
+                        </span>
                       </div>
                       <div
                         aria-selected="false"
@@ -168,7 +178,9 @@ exports[`Renderer:repeat 1`] = `
                         id="downshift-0-item-3"
                         role="option"
                       >
-                        时
+                        <span>
+                          时
+                        </span>
                       </div>
                       <div
                         aria-selected="false"
@@ -176,7 +188,9 @@ exports[`Renderer:repeat 1`] = `
                         id="downshift-0-item-4"
                         role="option"
                       >
-                        天
+                        <span>
+                          天
+                        </span>
                       </div>
                       <div
                         aria-selected="false"
@@ -184,7 +198,9 @@ exports[`Renderer:repeat 1`] = `
                         id="downshift-0-item-5"
                         role="option"
                       >
-                        周中
+                        <span>
+                          周中
+                        </span>
                       </div>
                       <div
                         aria-selected="false"
@@ -192,7 +208,9 @@ exports[`Renderer:repeat 1`] = `
                         id="downshift-0-item-6"
                         role="option"
                       >
-                        周
+                        <span>
+                          周
+                        </span>
                       </div>
                       <div
                         aria-selected="false"
@@ -200,7 +218,9 @@ exports[`Renderer:repeat 1`] = `
                         id="downshift-0-item-7"
                         role="option"
                       >
-                        月
+                        <span>
+                          月
+                        </span>
                       </div>
                       <div
                         aria-selected="false"
@@ -208,7 +228,9 @@ exports[`Renderer:repeat 1`] = `
                         id="downshift-0-item-8"
                         role="option"
                       >
-                        年
+                        <span>
+                          年
+                        </span>
                       </div>
                     </div>
                   </div>
@@ -223,22 +245,40 @@ exports[`Renderer:repeat 1`] = `
       class="resize-sensor"
       style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
     >
+      
+  
       <div
         class="resize-sensor-expand"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
         />
+        
+  
       </div>
+      
+  
       <div
         class="resize-sensor-shrink"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
         />
+        
+  
       </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
     </div>
   </div>
 </div>
diff --git a/__tests__/renderers/Form/__snapshots__/service.test.tsx.snap b/__tests__/renderers/Form/__snapshots__/service.test.tsx.snap
index dacc857bc..8671d970c 100644
--- a/__tests__/renderers/Form/__snapshots__/service.test.tsx.snap
+++ b/__tests__/renderers/Form/__snapshots__/service.test.tsx.snap
@@ -98,6 +98,7 @@ exports[`Renderer:service 1`] = `
                     autocomplete="off"
                     name="dy_1"
                     placeholder=""
+                    size="10"
                     type="text"
                     value=""
                   />
@@ -124,6 +125,7 @@ exports[`Renderer:service 1`] = `
                     autocomplete="off"
                     name="dy_2"
                     placeholder=""
+                    size="10"
                     type="text"
                     value=""
                   />
@@ -131,6 +133,12 @@ exports[`Renderer:service 1`] = `
               </div>
             </div>
           </div>
+          <div
+            class="a-Spinner-overlay"
+          />
+          <div
+            class="a-Spinner a-Spinner--overlay a-Spinner--lg"
+          />
         </div>
       </form>
     </div>
@@ -138,22 +146,40 @@ exports[`Renderer:service 1`] = `
       class="resize-sensor"
       style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
     >
+      
+  
       <div
         class="resize-sensor-expand"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
         />
+        
+  
       </div>
+      
+  
       <div
         class="resize-sensor-shrink"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
         />
+        
+  
       </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
     </div>
   </div>
 </div>
diff --git a/__tests__/renderers/Form/__snapshots__/static.test.tsx.snap b/__tests__/renderers/Form/__snapshots__/static.test.tsx.snap
index 0a970d5cb..159317fc5 100644
--- a/__tests__/renderers/Form/__snapshots__/static.test.tsx.snap
+++ b/__tests__/renderers/Form/__snapshots__/static.test.tsx.snap
@@ -103,22 +103,40 @@ exports[`Renderer:static 1`] = `
       class="resize-sensor"
       style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
     >
+      
+  
       <div
         class="resize-sensor-expand"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
         />
+        
+  
       </div>
+      
+  
       <div
         class="resize-sensor-shrink"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
         />
+        
+  
       </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
     </div>
   </div>
 </div>
diff --git a/__tests__/renderers/Form/__snapshots__/switch.test.tsx.snap b/__tests__/renderers/Form/__snapshots__/switch.test.tsx.snap
index f1dd8c7e5..95e108153 100644
--- a/__tests__/renderers/Form/__snapshots__/switch.test.tsx.snap
+++ b/__tests__/renderers/Form/__snapshots__/switch.test.tsx.snap
@@ -61,22 +61,40 @@ exports[`Renderer:switch 1`] = `
       class="resize-sensor"
       style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
     >
+      
+  
       <div
         class="resize-sensor-expand"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
         />
+        
+  
       </div>
+      
+  
       <div
         class="resize-sensor-shrink"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
         />
+        
+  
       </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
     </div>
   </div>
 </div>
diff --git a/__tests__/renderers/Form/__snapshots__/tabs.test.tsx.snap b/__tests__/renderers/Form/__snapshots__/tabs.test.tsx.snap
index b40157bc2..b7e53fb89 100644
--- a/__tests__/renderers/Form/__snapshots__/tabs.test.tsx.snap
+++ b/__tests__/renderers/Form/__snapshots__/tabs.test.tsx.snap
@@ -28,51 +28,33 @@ exports[`Renderer:tabs 1`] = `
       >
         <div
           class="a-Tabs"
-          id="0"
         >
           <ul
-            class="a-Tabs-links nav"
+            class="a-Tabs-links"
             role="tablist"
           >
             <li
-              class="a-Tabs-link active"
-              role="presentation"
+              class="a-Tabs-link is-active"
             >
-              <a
-                aria-controls="0-pane-0"
-                aria-selected="true"
-                href="#"
-                id="0-tab-0"
-                role="tab"
-              >
+              <a>
+                 
                 基本配置
               </a>
             </li>
             <li
               class="a-Tabs-link"
-              role="presentation"
             >
-              <a
-                aria-controls="0-pane-1"
-                aria-selected="false"
-                href="#"
-                id="0-tab-1"
-                role="tab"
-                tabindex="-1"
-              >
+              <a>
+                 
                 其他配置
               </a>
             </li>
           </ul>
           <div
-            class="a-Tabs-content tab-content"
+            class="a-Tabs-content"
           >
             <div
-              aria-hidden="false"
-              aria-labelledby="0-tab-0"
-              class="fade tab-pane active in"
-              id="0-pane-0"
-              role="tabpanel"
+              class="in is-active a-Tabs-pane"
             >
               <span
                 class="a-TplField"
@@ -83,11 +65,7 @@ exports[`Renderer:tabs 1`] = `
               </span>
             </div>
             <div
-              aria-hidden="true"
-              aria-labelledby="0-tab-1"
-              class="fade tab-pane"
-              id="0-pane-1"
-              role="tabpanel"
+              class="a-Tabs-pane"
             >
               <div
                 class="a-Form--normal"
@@ -112,6 +90,7 @@ exports[`Renderer:tabs 1`] = `
                         autocomplete="off"
                         name="c"
                         placeholder=""
+                        size="10"
                         type="text"
                         value=""
                       />
@@ -138,6 +117,7 @@ exports[`Renderer:tabs 1`] = `
                         autocomplete="off"
                         name="d"
                         placeholder=""
+                        size="10"
                         type="text"
                         value=""
                       />
@@ -154,22 +134,40 @@ exports[`Renderer:tabs 1`] = `
       class="resize-sensor"
       style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
     >
+      
+  
       <div
         class="resize-sensor-expand"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
         />
+        
+  
       </div>
+      
+  
       <div
         class="resize-sensor-shrink"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
         />
+        
+  
       </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
     </div>
   </div>
 </div>
diff --git a/__tests__/renderers/Form/__snapshots__/testarea.test.tsx.snap b/__tests__/renderers/Form/__snapshots__/testarea.test.tsx.snap
index 3f6afd72d..80a116906 100644
--- a/__tests__/renderers/Form/__snapshots__/testarea.test.tsx.snap
+++ b/__tests__/renderers/Form/__snapshots__/testarea.test.tsx.snap
@@ -52,22 +52,40 @@ exports[`Renderer:textarea 1`] = `
       class="resize-sensor"
       style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
     >
+      
+  
       <div
         class="resize-sensor-expand"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
         />
+        
+  
       </div>
+      
+  
       <div
         class="resize-sensor-shrink"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
         />
+        
+  
       </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
     </div>
   </div>
 </div>
diff --git a/__tests__/renderers/Form/__snapshots__/time.test.tsx.snap b/__tests__/renderers/Form/__snapshots__/time.test.tsx.snap
index a953ca5a3..8390a0354 100644
--- a/__tests__/renderers/Form/__snapshots__/time.test.tsx.snap
+++ b/__tests__/renderers/Form/__snapshots__/time.test.tsx.snap
@@ -51,19 +51,10 @@ exports[`Renderer:time 1`] = `
               <a
                 class="a-DatePicker-clear"
               >
-                <svg
-                  class="icon"
-                  p-id="1463"
-                  version="1.1"
-                  viewBox="0 0 1024 1024"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M967.81435 106.836237 917.16274 56.18565 512 461.34839 106.836237 56.18565 56.184627 106.836237 461.34839 512 56.184627 917.163763 106.836237 967.815373 512 562.65161 917.16274 967.815373 967.81435 917.163763 562.650587 512Z"
-                    data-spm-anchor-id="a313x.7781069.0.i0"
-                    p-id="1464"
-                  />
-                </svg>
+                <icon-mock
+                  classname="icon"
+                  icon="close"
+                />
               </a>
               <a
                 class="a-DatePicker-toggler"
@@ -77,22 +68,40 @@ exports[`Renderer:time 1`] = `
       class="resize-sensor"
       style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
     >
+      
+  
       <div
         class="resize-sensor-expand"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
         />
+        
+  
       </div>
+      
+  
       <div
         class="resize-sensor-shrink"
         style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
       >
+        
+    
         <div
           style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
         />
+        
+  
       </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
     </div>
   </div>
 </div>
diff --git a/__tests__/renderers/__snapshots__/Carousel.test.tsx.snap b/__tests__/renderers/__snapshots__/Carousel.test.tsx.snap
index fa9a48462..8172e57a0 100644
--- a/__tests__/renderers/__snapshots__/Carousel.test.tsx.snap
+++ b/__tests__/renderers/__snapshots__/Carousel.test.tsx.snap
@@ -82,30 +82,18 @@ exports[`Renderer:carousel 1`] = `
         <div
           class="a-Carousel-leftArrow"
         >
-          <svg
-            class="icon"
-            version="1.1"
-            viewBox="0 0 1024 1024"
-          >
-            <path
-              d="M324.211517 511.805631 787.889594 73.082583c16.19422-16.630365 16.19422-43.974704 0-60.605068-16.19422-16.630365-42.495607-16.630365-58.613976 0L235.750113 479.360302c-8.647031 8.969398-12.344775 20.934917-11.719003 32.445329-0.644735 11.90863 3.071972 23.874149 11.719003 32.824585l493.506542 466.882788c16.118369 16.649327 42.438718 16.649327 58.613976 0 16.19422-17.085471 16.19422-43.974704 0-60.605068L324.211517 511.805631"
-              p-id="2160"
-            />
-          </svg>
+          <icon-mock
+            classname="icon"
+            icon="left-arrow"
+          />
         </div>
         <div
           class="a-Carousel-rightArrow"
         >
-          <svg
-            class="icon"
-            version="1.1"
-            viewBox="0 0 1024 1024"
-          >
-            <path
-              d="M311.559054 1013.77369L767.908116 512.684524 311.559054 12.234501a31.318073 31.318073 0 1 0-46.657538 41.544383L679.706197 512.684524 267.458094 969.672731a31.318073 31.318073 0 0 0 46.018393 42.183526z"
-              p-id="1981"
-            />
-          </svg>
+          <icon-mock
+            classname="icon"
+            icon="right-arrow"
+          />
         </div>
       </div>
     </div>
diff --git a/__tests__/renderers/__snapshots__/Image.test.tsx.snap b/__tests__/renderers/__snapshots__/Image.test.tsx.snap
index 47c108343..a9cc99e26 100644
--- a/__tests__/renderers/__snapshots__/Image.test.tsx.snap
+++ b/__tests__/renderers/__snapshots__/Image.test.tsx.snap
@@ -5,23 +5,26 @@ exports[`Renderer:image 1`] = `
   <div
     class="a-ImageField show"
   >
-    <img
-      class="b"
-      src="https://www.baidu.com/img/bd_logo1.png"
-    />
     <div
-      class="a-ImageField-caption"
+      class="a-Image"
     >
       <div
-        class="text-md"
+        class="a-Image-thumb a-Image-thumb--contain a-Image-thumb--1-1"
       >
-        图片
+        <img
+          class="b"
+          src="https://www.baidu.com/img/bd_logo1.png"
+        />
       </div>
-      <span
-        class="a-TplField"
+      <div
+        class="a-Image-info"
       >
-        图片描述
-      </span>
+        <div
+          class="a-Image-title"
+        >
+          图片
+        </div>
+      </div>
     </div>
   </div>
 </div>
diff --git a/__tests__/renderers/__snapshots__/Page.test.tsx.snap b/__tests__/renderers/__snapshots__/Page.test.tsx.snap
index 0fa9d4cbc..fc04b4a6d 100644
--- a/__tests__/renderers/__snapshots__/Page.test.tsx.snap
+++ b/__tests__/renderers/__snapshots__/Page.test.tsx.snap
@@ -27,13 +27,13 @@ exports[`Renderer:Page 1`] = `
             </span>
             <div
               className="a-Remark a-Remark--warning"
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
             >
               <i
                 className="a-Remark-icon fa fa-question-circle"
+                onBlur={[Function]}
+                onFocus={[Function]}
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
               />
             </div>
           </h2>
@@ -107,13 +107,13 @@ exports[`Renderer:Page classNames 1`] = `
             </span>
             <div
               className="a-Remark a-Remark--warning"
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
             >
               <i
                 className="a-Remark-icon fa fa-question-circle"
+                onBlur={[Function]}
+                onFocus={[Function]}
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
               />
             </div>
           </h2>
@@ -177,6 +177,12 @@ exports[`Renderer:Page handleAction actionType=ajax & feedback 1`] = `
         <div
           class="a-Page-body"
         >
+          <div
+            class="a-Spinner-overlay"
+          />
+          <div
+            class="a-Spinner a-Spinner--overlay a-Spinner--lg"
+          />
           <span
             class="a-TplField"
           >
@@ -186,74 +192,6 @@ exports[`Renderer:Page handleAction actionType=ajax & feedback 1`] = `
       </div>
     </div>
   </div>
-  <div
-    class="amis-dialog-widget a-Modal a-Modal--1th"
-    role="dialog"
-  >
-    <div
-      class="a-Modal-overlay in"
-    />
-    <div
-      class="a-Modal-content in"
-    >
-      <div
-        class="a-Modal-header"
-      >
-        <a
-          class="a-Modal-close"
-          data-tooltip="关闭弹窗"
-        >
-          <svg
-            class="icon"
-            p-id="1463"
-            version="1.1"
-            viewBox="0 0 1024 1024"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M967.81435 106.836237 917.16274 56.18565 512 461.34839 106.836237 56.18565 56.184627 106.836237 461.34839 512 56.184627 917.163763 106.836237 967.815373 512 562.65161 917.16274 967.815373 967.81435 917.163763 562.650587 512Z"
-              data-spm-anchor-id="a313x.7781069.0.i0"
-              p-id="1464"
-            />
-          </svg>
-        </a>
-        <div
-          class="a-Modal-title"
-        >
-          弹框
-        </div>
-      </div>
-      <div
-        class="a-Modal-body"
-      >
-        <span
-          class="a-TplField"
-        >
-          this is feedback
-        </span>
-      </div>
-      <div
-        class="a-Modal-footer"
-      >
-        <button
-          class="a-Button a-Button--default"
-          type="button"
-        >
-          <span>
-            取消
-          </span>
-        </button>
-        <button
-          class="a-Button a-Button--primary"
-          type="button"
-        >
-          <span>
-            确认
-          </span>
-        </button>
-      </div>
-    </div>
-  </div>
 </div>
 `;
 
@@ -321,6 +259,12 @@ exports[`Renderer:Page handleAction actionType=ajax 1`] = `
         <div
           class="a-Page-body"
         >
+          <div
+            class="a-Spinner-overlay"
+          />
+          <div
+            class="a-Spinner a-Spinner--overlay a-Spinner--lg"
+          />
           <span
             class="a-TplField"
           >
@@ -362,74 +306,6 @@ exports[`Renderer:Page handleAction actionType=dialog 1`] = `
       </div>
     </div>
   </div>
-  <div
-    class="amis-dialog-widget a-Modal a-Modal--1th"
-    role="dialog"
-  >
-    <div
-      class="a-Modal-overlay in"
-    />
-    <div
-      class="a-Modal-content in"
-    >
-      <div
-        class="a-Modal-header"
-      >
-        <a
-          class="a-Modal-close"
-          data-tooltip="关闭弹窗"
-        >
-          <svg
-            class="icon"
-            p-id="1463"
-            version="1.1"
-            viewBox="0 0 1024 1024"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M967.81435 106.836237 917.16274 56.18565 512 461.34839 106.836237 56.18565 56.184627 106.836237 461.34839 512 56.184627 917.163763 106.836237 967.815373 512 562.65161 917.16274 967.815373 967.81435 917.163763 562.650587 512Z"
-              data-spm-anchor-id="a313x.7781069.0.i0"
-              p-id="1464"
-            />
-          </svg>
-        </a>
-        <div
-          class="a-Modal-title"
-        >
-          弹框
-        </div>
-      </div>
-      <div
-        class="a-Modal-body"
-      >
-        <span
-          class="a-TplField"
-        >
-          this is dialog
-        </span>
-      </div>
-      <div
-        class="a-Modal-footer"
-      >
-        <button
-          class="a-Button a-Button--default"
-          type="button"
-        >
-          <span>
-            取消
-          </span>
-        </button>
-        <button
-          class="a-Button a-Button--primary"
-          type="button"
-        >
-          <span>
-            确认
-          </span>
-        </button>
-      </div>
-    </div>
-  </div>
 </div>
 `;
 
@@ -500,96 +376,6 @@ exports[`Renderer:Page handleAction actionType=dialog mergeData 1`] = `
       </div>
     </div>
   </div>
-  <div
-    class="amis-dialog-widget a-Modal a-Modal--1th"
-    role="dialog"
-  >
-    <div
-      class="a-Modal-overlay in"
-    />
-    <div
-      class="a-Modal-content in"
-    >
-      <div
-        class="a-Modal-header"
-      >
-        <a
-          class="a-Modal-close"
-          data-tooltip="关闭弹窗"
-        >
-          <svg
-            class="icon"
-            p-id="1463"
-            version="1.1"
-            viewBox="0 0 1024 1024"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M967.81435 106.836237 917.16274 56.18565 512 461.34839 106.836237 56.18565 56.184627 106.836237 461.34839 512 56.184627 917.163763 106.836237 967.815373 512 562.65161 917.16274 967.815373 967.81435 917.163763 562.650587 512Z"
-              data-spm-anchor-id="a313x.7781069.0.i0"
-              p-id="1464"
-            />
-          </svg>
-        </a>
-        <div
-          class="a-Modal-title"
-        >
-          弹框
-        </div>
-      </div>
-      <div
-        class="a-Modal-body"
-      >
-        <form
-          class="a-Form a-Form--horizontal"
-          novalidate=""
-        >
-          <div
-            class="a-Form-item a-Form-item--horizontal"
-          >
-            <label
-              class="a-Form-label a-Form-itemColumn--2"
-            >
-              <span>
-                A
-              </span>
-            </label>
-            <div
-              class="a-Form-value"
-            >
-              <div
-                class="a-Form-control a-TextControl"
-              >
-                <div
-                  class="a-TextControl-input"
-                >
-                  <input
-                    autocomplete="off"
-                    name="a"
-                    placeholder=""
-                    type="text"
-                    value="3"
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </form>
-      </div>
-      <div
-        class="a-Modal-footer"
-      >
-        <button
-          class="a-Button a-Button--default"
-          type="submit"
-        >
-          <span>
-            确认
-          </span>
-        </button>
-      </div>
-    </div>
-  </div>
 </div>
 `;
 
@@ -660,67 +446,6 @@ exports[`Renderer:Page handleAction actionType=drawer 1`] = `
       </div>
     </div>
   </div>
-  <div
-    class="amis-dialog-widget a-Drawer a-Drawer--right a-Drawer--md a-Modal--1th"
-    role="dialog"
-  >
-    <div
-      class="a-Drawer-overlay in"
-    />
-    <div
-      class="a-Drawer-content in"
-    >
-      <a
-        class="a-Drawer-close"
-      >
-        <svg
-          class="icon"
-          p-id="1463"
-          version="1.1"
-          viewBox="0 0 1024 1024"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M967.81435 106.836237 917.16274 56.18565 512 461.34839 106.836237 56.18565 56.184627 106.836237 461.34839 512 56.184627 917.163763 106.836237 967.815373 512 562.65161 917.16274 967.815373 967.81435 917.163763 562.650587 512Z"
-            data-spm-anchor-id="a313x.7781069.0.i0"
-            p-id="1464"
-          />
-        </svg>
-      </a>
-      <div
-        class="a-Drawer-header"
-      />
-      <div
-        class="a-Drawer-body"
-      >
-        <span
-          class="a-TplField"
-        >
-          this is drawer
-        </span>
-      </div>
-      <div
-        class="a-Drawer-footer"
-      >
-        <button
-          class="a-Button a-Button--default"
-          type="button"
-        >
-          <span>
-            取消
-          </span>
-        </button>
-        <button
-          class="a-Button a-Button--primary"
-          type="button"
-        >
-          <span>
-            确认
-          </span>
-        </button>
-      </div>
-    </div>
-  </div>
 </div>
 `;
 
@@ -791,89 +516,6 @@ exports[`Renderer:Page handleAction actionType=drawer mergeData 1`] = `
       </div>
     </div>
   </div>
-  <div
-    class="amis-dialog-widget a-Drawer a-Drawer--right a-Drawer--md a-Modal--1th"
-    role="dialog"
-  >
-    <div
-      class="a-Drawer-overlay in"
-    />
-    <div
-      class="a-Drawer-content in"
-    >
-      <a
-        class="a-Drawer-close"
-      >
-        <svg
-          class="icon"
-          p-id="1463"
-          version="1.1"
-          viewBox="0 0 1024 1024"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M967.81435 106.836237 917.16274 56.18565 512 461.34839 106.836237 56.18565 56.184627 106.836237 461.34839 512 56.184627 917.163763 106.836237 967.815373 512 562.65161 917.16274 967.815373 967.81435 917.163763 562.650587 512Z"
-            data-spm-anchor-id="a313x.7781069.0.i0"
-            p-id="1464"
-          />
-        </svg>
-      </a>
-      <div
-        class="a-Drawer-header"
-      />
-      <div
-        class="a-Drawer-body"
-      >
-        <form
-          class="a-Form a-Form--horizontal"
-          novalidate=""
-        >
-          <div
-            class="a-Form-item a-Form-item--horizontal"
-          >
-            <label
-              class="a-Form-label a-Form-itemColumn--2"
-            >
-              <span>
-                A
-              </span>
-            </label>
-            <div
-              class="a-Form-value"
-            >
-              <div
-                class="a-Form-control a-TextControl"
-              >
-                <div
-                  class="a-TextControl-input"
-                >
-                  <input
-                    autocomplete="off"
-                    name="a"
-                    placeholder=""
-                    type="text"
-                    value="3"
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </form>
-      </div>
-      <div
-        class="a-Drawer-footer"
-      >
-        <button
-          class="a-Button a-Button--default"
-          type="submit"
-        >
-          <span>
-            确认
-          </span>
-        </button>
-      </div>
-    </div>
-  </div>
 </div>
 `;
 
@@ -929,6 +571,12 @@ exports[`Renderer:Page initApi 1`] = `
       <div
         className="a-Page-body"
       >
+        <div
+          className="a-Spinner-overlay"
+        />
+        <div
+          className="a-Spinner a-Spinner--overlay a-Spinner--lg"
+        />
         <span
           className="a-TplField"
         >
@@ -954,6 +602,12 @@ exports[`Renderer:Page initApi error show Message 1`] = `
       <div
         className="a-Page-body"
       >
+        <div
+          className="a-Spinner-overlay"
+        />
+        <div
+          className="a-Spinner a-Spinner--overlay a-Spinner--lg"
+        />
         <div
           className="a-Alert a-Alert--danger"
         >
@@ -962,9 +616,10 @@ exports[`Renderer:Page initApi error show Message 1`] = `
             onClick={[Function]}
             type="button"
           >
-            <span>
-              ×
-            </span>
+            <icon-mock
+              className="icon"
+              icon="close"
+            />
           </button>
           Internal Error
         </div>
@@ -988,6 +643,12 @@ exports[`Renderer:Page initApi reFetch when condition changes 1`] = `
       <div
         className="a-Page-body"
       >
+        <div
+          className="a-Spinner-overlay"
+        />
+        <div
+          className="a-Spinner a-Spinner--overlay a-Spinner--lg"
+        />
         <span
           className="a-TplField"
         >
@@ -1050,6 +711,12 @@ exports[`Renderer:Page initApi reload by Dialog action 1`] = `
         <div
           class="a-Page-body"
         >
+          <div
+            class="a-Spinner-overlay"
+          />
+          <div
+            class="a-Spinner a-Spinner--overlay a-Spinner--lg"
+          />
           <span
             class="a-TplField"
           >
@@ -1097,102 +764,6 @@ exports[`Renderer:Page initApi reload by Dialog action 2`] = `
       </div>
     </div>
   </div>
-  <div
-    class="amis-dialog-widget a-Modal a-Modal--1th"
-    role="dialog"
-  >
-    <div
-      class="a-Modal-overlay in"
-    />
-    <div
-      class="a-Modal-content in"
-    >
-      <div
-        class="a-Modal-header"
-      >
-        <a
-          class="a-Modal-close"
-          data-tooltip="关闭弹窗"
-        >
-          <svg
-            class="icon"
-            p-id="1463"
-            version="1.1"
-            viewBox="0 0 1024 1024"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M967.81435 106.836237 917.16274 56.18565 512 461.34839 106.836237 56.18565 56.184627 106.836237 461.34839 512 56.184627 917.163763 106.836237 967.815373 512 562.65161 917.16274 967.815373 967.81435 917.163763 562.650587 512Z"
-              data-spm-anchor-id="a313x.7781069.0.i0"
-              p-id="1464"
-            />
-          </svg>
-        </a>
-        <div
-          class="a-Modal-title"
-        >
-          弹框
-        </div>
-      </div>
-      <div
-        class="a-Modal-body"
-      >
-        <form
-          class="a-Form a-Form--horizontal"
-          novalidate=""
-        >
-          <div
-            class="a-Form-item a-Form-item--horizontal"
-          >
-            <label
-              class="a-Form-label a-Form-itemColumn--2"
-            >
-              <span />
-            </label>
-            <div
-              class="a-Form-value"
-            >
-              <div
-                class="a-Form-control a-TextControl"
-              >
-                <div
-                  class="a-TextControl-input"
-                >
-                  <input
-                    autocomplete="off"
-                    name="a"
-                    placeholder=""
-                    type="text"
-                    value="1"
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </form>
-      </div>
-      <div
-        class="a-Modal-footer"
-      >
-        <button
-          class="a-Button a-Button--default"
-          type="button"
-        >
-          <span>
-            取消
-          </span>
-        </button>
-        <button
-          class="a-Button a-Button--primary"
-          type="button"
-        >
-          <span>
-            确认
-          </span>
-        </button>
-      </div>
-    </div>
-  </div>
 </div>
 `;
 
@@ -1260,6 +831,12 @@ exports[`Renderer:Page initApi reload by Drawer action 1`] = `
         <div
           class="a-Page-body"
         >
+          <div
+            class="a-Spinner-overlay"
+          />
+          <div
+            class="a-Spinner a-Spinner--overlay a-Spinner--lg"
+          />
           <span
             class="a-TplField"
           >
@@ -1307,95 +884,6 @@ exports[`Renderer:Page initApi reload by Drawer action 2`] = `
       </div>
     </div>
   </div>
-  <div
-    class="amis-dialog-widget a-Drawer a-Drawer--right a-Drawer--md a-Modal--1th"
-    role="dialog"
-  >
-    <div
-      class="a-Drawer-overlay in"
-    />
-    <div
-      class="a-Drawer-content in"
-    >
-      <a
-        class="a-Drawer-close"
-      >
-        <svg
-          class="icon"
-          p-id="1463"
-          version="1.1"
-          viewBox="0 0 1024 1024"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M967.81435 106.836237 917.16274 56.18565 512 461.34839 106.836237 56.18565 56.184627 106.836237 461.34839 512 56.184627 917.163763 106.836237 967.815373 512 562.65161 917.16274 967.815373 967.81435 917.163763 562.650587 512Z"
-            data-spm-anchor-id="a313x.7781069.0.i0"
-            p-id="1464"
-          />
-        </svg>
-      </a>
-      <div
-        class="a-Drawer-header"
-      />
-      <div
-        class="a-Drawer-body"
-      >
-        <form
-          class="a-Form a-Form--horizontal"
-          novalidate=""
-        >
-          <div
-            class="a-Form-item a-Form-item--horizontal"
-          >
-            <label
-              class="a-Form-label a-Form-itemColumn--2"
-            >
-              <span />
-            </label>
-            <div
-              class="a-Form-value"
-            >
-              <div
-                class="a-Form-control a-TextControl"
-              >
-                <div
-                  class="a-TextControl-input"
-                >
-                  <input
-                    autocomplete="off"
-                    name="a"
-                    placeholder=""
-                    type="text"
-                    value="1"
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </form>
-      </div>
-      <div
-        class="a-Drawer-footer"
-      >
-        <button
-          class="a-Button a-Button--default"
-          type="button"
-        >
-          <span>
-            取消
-          </span>
-        </button>
-        <button
-          class="a-Button a-Button--primary"
-          type="button"
-        >
-          <span>
-            确认
-          </span>
-        </button>
-      </div>
-    </div>
-  </div>
 </div>
 `;
 
@@ -1425,6 +913,12 @@ exports[`Renderer:Page initApi reload by Drawer action 3`] = `
         <div
           class="a-Page-body"
         >
+          <div
+            class="a-Spinner-overlay"
+          />
+          <div
+            class="a-Spinner a-Spinner--overlay a-Spinner--lg"
+          />
           <span
             class="a-TplField"
           >
@@ -1488,6 +982,7 @@ exports[`Renderer:Page initApi reload by Form submit 1`] = `
                         autocomplete="off"
                         name="a"
                         placeholder=""
+                        size="10"
                         type="text"
                         value="1"
                       />
@@ -1514,28 +1009,52 @@ exports[`Renderer:Page initApi reload by Form submit 1`] = `
               class="resize-sensor"
               style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
             >
+              
+  
               <div
                 class="resize-sensor-expand"
                 style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
               >
+                
+    
                 <div
                   style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
                 />
+                
+  
               </div>
+              
+  
               <div
                 class="resize-sensor-shrink"
                 style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
               >
+                
+    
                 <div
                   style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
                 />
+                
+  
               </div>
+              
+  
+              <div
+                class="resize-sensor-appear"
+                style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+              />
             </div>
           </div>
         </div>
         <div
           class="a-Page-body"
         >
+          <div
+            class="a-Spinner-overlay"
+          />
+          <div
+            class="a-Spinner a-Spinner--overlay a-Spinner--lg"
+          />
           <span
             class="a-TplField"
           >
@@ -1599,6 +1118,7 @@ exports[`Renderer:Page initApi reload by Form submit 2`] = `
                         autocomplete="off"
                         name="a"
                         placeholder=""
+                        size="10"
                         type="text"
                         value="2"
                       />
@@ -1625,28 +1145,52 @@ exports[`Renderer:Page initApi reload by Form submit 2`] = `
               class="resize-sensor"
               style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
             >
+              
+  
               <div
                 class="resize-sensor-expand"
                 style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
               >
+                
+    
                 <div
                   style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
                 />
+                
+  
               </div>
+              
+  
               <div
                 class="resize-sensor-shrink"
                 style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
               >
+                
+    
                 <div
                   style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
                 />
+                
+  
               </div>
+              
+  
+              <div
+                class="resize-sensor-appear"
+                style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+              />
             </div>
           </div>
         </div>
         <div
           class="a-Page-body"
         >
+          <div
+            class="a-Spinner-overlay"
+          />
+          <div
+            class="a-Spinner a-Spinner--overlay a-Spinner--lg"
+          />
           <span
             class="a-TplField"
           >
@@ -1685,6 +1229,12 @@ exports[`Renderer:Page initApi reload by action 1`] = `
         <div
           class="a-Page-body"
         >
+          <div
+            class="a-Spinner-overlay"
+          />
+          <div
+            class="a-Spinner a-Spinner--overlay a-Spinner--lg"
+          />
           <span
             class="a-TplField"
           >
@@ -1723,6 +1273,12 @@ exports[`Renderer:Page initApi reload by action 2`] = `
         <div
           class="a-Page-body"
         >
+          <div
+            class="a-Spinner-overlay"
+          />
+          <div
+            class="a-Spinner a-Spinner--overlay a-Spinner--lg"
+          />
           <span
             class="a-TplField"
           >
@@ -1750,12 +1306,11 @@ exports[`Renderer:Page initApi show loading 1`] = `
         className="a-Page-body"
       >
         <div
-          className="a-Spinner-overlay"
-        >
-          <div
-            className="a-Spinner a-Spinner--lg"
-          />
-        </div>
+          className="a-Spinner-overlay in"
+        />
+        <div
+          className="a-Spinner in a-Spinner--overlay a-Spinner--lg"
+        />
         <span
           className="a-TplField"
         >
@@ -1781,6 +1336,12 @@ exports[`Renderer:Page initApi show loading 2`] = `
       <div
         className="a-Page-body"
       >
+        <div
+          className="a-Spinner-overlay"
+        />
+        <div
+          className="a-Spinner a-Spinner--overlay a-Spinner--lg"
+        />
         <span
           className="a-TplField"
         >
@@ -1807,12 +1368,11 @@ exports[`Renderer:Page initApi silentPolling 1`] = `
         className="a-Page-body"
       >
         <div
-          className="a-Spinner-overlay"
-        >
-          <div
-            className="a-Spinner a-Spinner--lg"
-          />
-        </div>
+          className="a-Spinner-overlay in"
+        />
+        <div
+          className="a-Spinner in a-Spinner--overlay a-Spinner--lg"
+        />
         <span
           className="a-TplField"
         >
@@ -1838,6 +1398,12 @@ exports[`Renderer:Page initApi silentPolling 2`] = `
       <div
         className="a-Page-body"
       >
+        <div
+          className="a-Spinner-overlay"
+        />
+        <div
+          className="a-Spinner a-Spinner--overlay a-Spinner--lg"
+        />
         <span
           className="a-TplField"
         >
@@ -1938,6 +1504,12 @@ exports[`Renderer:Page initFetchOn trigger initApi fetch when condition becomes
       <div
         className="a-Page-body"
       >
+        <div
+          className="a-Spinner-overlay"
+        />
+        <div
+          className="a-Spinner a-Spinner--overlay a-Spinner--lg"
+        />
         <span
           className="a-TplField"
         >
diff --git a/__tests__/renderers/__snapshots__/Tabs.test.tsx.snap b/__tests__/renderers/__snapshots__/Tabs.test.tsx.snap
index abf707760..2b5a1f6b5 100644
--- a/__tests__/renderers/__snapshots__/Tabs.test.tsx.snap
+++ b/__tests__/renderers/__snapshots__/Tabs.test.tsx.snap
@@ -4,51 +4,33 @@ exports[`Renderer:tabs 1`] = `
 <div>
   <div
     class="a-Tabs"
-    id="0"
   >
     <ul
-      class="a-Tabs-links nav"
+      class="a-Tabs-links"
       role="tablist"
     >
       <li
-        class="a-Tabs-link active"
-        role="presentation"
+        class="a-Tabs-link is-active"
       >
-        <a
-          aria-controls="0-pane-0"
-          aria-selected="true"
-          href="#"
-          id="0-tab-0"
-          role="tab"
-        >
+        <a>
+           
           基本配置
         </a>
       </li>
       <li
         class="a-Tabs-link"
-        role="presentation"
       >
-        <a
-          aria-controls="0-pane-1"
-          aria-selected="false"
-          href="#"
-          id="0-tab-1"
-          role="tab"
-          tabindex="-1"
-        >
+        <a>
+           
           其他配置
         </a>
       </li>
     </ul>
     <div
-      class="a-Tabs-content tab-content"
+      class="a-Tabs-content"
     >
       <div
-        aria-hidden="false"
-        aria-labelledby="0-tab-0"
-        class="fade tab-pane active in"
-        id="0-pane-0"
-        role="tabpanel"
+        class="in is-active a-Tabs-pane"
       >
         <span
           class="a-TplField"
diff --git a/__tests__/renderers/__snapshots__/Wizard.test.tsx.snap b/__tests__/renderers/__snapshots__/Wizard.test.tsx.snap
index bdde2bd84..9a059afeb 100644
--- a/__tests__/renderers/__snapshots__/Wizard.test.tsx.snap
+++ b/__tests__/renderers/__snapshots__/Wizard.test.tsx.snap
@@ -2,149 +2,24 @@
 
 exports[`Renderer:Wizard 1`] = `
 <div
-  className="a-Panel a-Panel--default a-Wizard"
+  className="a-Alert a-Alert--danger"
 >
-  <div
-    className="a-Wizard-steps clearfix a-Wizard--horizontal"
-    id="form-wizard"
-  >
-    <ul>
-      <li
-        className="is-active"
-        onClick={[Function]}
-      >
-        <span
-          className="Badge Badge--info"
-        >
-          1
-        </span>
-        Step 1
-      </li>
-      <li
-        className=""
-        onClick={[Function]}
-      >
-        <span
-          className="Badge"
-        >
-          2
-        </span>
-        Step 2
-      </li>
-      <li
-        className=""
-        onClick={[Function]}
-      >
-        <span
-          className="Badge"
-        >
-          3
-        </span>
-        Step 3
-      </li>
-    </ul>
-  </div>
-  <div
-    className="a-Wizard-stepContent clearfix"
-  >
-    <form
-      className="a-Form a-Form--normal"
-      noValidate={true}
-      onSubmit={[Function]}
-    >
-      <div
-        className="a-Form-item a-Form-item--normal is-required"
-      >
-        <label
-          className="a-Form-label"
-        >
-          <span>
-            网址
-            <span
-              className="a-Form-star"
-            >
-              *
-            </span>
-          </span>
-        </label>
-        <div
-          className="a-Form-control a-TextControl"
-        >
-          <div
-            className="a-TextControl-input"
-          >
-            <input
-              autoComplete="off"
-              name="website"
-              onBlur={[Function]}
-              onChange={[Function]}
-              onFocus={[Function]}
-              placeholder=""
-              type="url"
-              value=""
-            />
-          </div>
-        </div>
-      </div>
-      <div
-        className="a-Form-item a-Form-item--normal is-required"
-      >
-        <label
-          className="a-Form-label"
-        >
-          <span>
-            名称
-            <span
-              className="a-Form-star"
-            >
-              *
-            </span>
-          </span>
-        </label>
-        <div
-          className="a-Form-control a-TextControl"
-        >
-          <div
-            className="a-TextControl-input"
-          >
-            <input
-              autoComplete="off"
-              name="name"
-              onBlur={[Function]}
-              onChange={[Function]}
-              onFocus={[Function]}
-              placeholder=""
-              type="text"
-              value=""
-            />
-          </div>
-        </div>
-      </div>
-    </form>
-  </div>
-  <div
-    className="a-Panel-footer"
-  >
-    <button
-      className="a-Button a-Button--default is-disabled"
-      disabled={true}
-      onClick={[Function]}
-      type="button"
-    >
-      <span>
-        上一步
-      </span>
-    </button>
-    <button
-      className="a-Button a-Button--default"
-      onClick={[Function]}
-      type="button"
-    >
-      <span>
-        下一步
-      </span>
-    </button>
-  </div>
+  <p>
+    TypeError: Cannot read property '_ownerDocument' of undefined
+  </p>
+  <pre>
+    <code>
+      
+    in WizardRenderer (created by WithStore(WizardRenderer))
+    in WithStore(WizardRenderer) (created by Scoped(WithStore(WizardRenderer)))
+    in Scoped(WithStore(WizardRenderer)) (created by Renderer)
+    in Renderer (created by RootRenderer)
+    in ImageGallery (created by Themeable(ImageGallery))
+    in Themeable(ImageGallery) (created by RootRenderer)
+    in RootRenderer (created by Scoped(RootRenderer))
+    in Scoped(RootRenderer)
+    </code>
+  </pre>
 </div>
 `;
 
@@ -152,9 +27,10 @@ exports[`Renderer:Wizard actionPrevLabel actionNextLabel actionFinishLabel class
 <div>
   <div
     class="a-Panel a-Panel--default a-Wizard wizard-class-name"
+    style="position: relative;"
   >
     <div
-      class="a-Wizard-steps clearfix a-Wizard--horizontal"
+      class="a-Wizard-steps a-Wizard--horizontal"
       id="form-wizard"
     >
       <ul>
@@ -162,7 +38,7 @@ exports[`Renderer:Wizard actionPrevLabel actionNextLabel actionFinishLabel class
           class="is-complete"
         >
           <span
-            class="Badge Badge--info"
+            class="a-Badge is-active"
           >
             1
           </span>
@@ -172,7 +48,7 @@ exports[`Renderer:Wizard actionPrevLabel actionNextLabel actionFinishLabel class
           class="is-active"
         >
           <span
-            class="Badge Badge--info"
+            class="a-Badge is-active"
           >
             2
           </span>
@@ -194,6 +70,45 @@ exports[`Renderer:Wizard actionPrevLabel actionNextLabel actionFinishLabel class
         </span>
       </form>
     </div>
+    <div
+      class="resize-sensor"
+      style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
+    >
+      
+  
+      <div
+        class="resize-sensor-expand"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+      >
+        
+    
+        <div
+          style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
+        />
+        
+  
+      </div>
+      
+  
+      <div
+        class="resize-sensor-shrink"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+      >
+        
+    
+        <div
+          style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
+        />
+        
+  
+      </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
+    </div>
     <div
       class="a-Panel-footer"
     >
@@ -222,9 +137,10 @@ exports[`Renderer:Wizard actionPrevLabel actionNextLabel actionFinishLabel class
 <div>
   <div
     class="a-Panel a-Panel--default a-Wizard wizard-class-name"
+    style="position: relative;"
   >
     <div
-      class="a-Wizard-steps clearfix a-Wizard--horizontal"
+      class="a-Wizard-steps a-Wizard--horizontal"
       id="form-wizard"
     >
       <ul>
@@ -232,7 +148,7 @@ exports[`Renderer:Wizard actionPrevLabel actionNextLabel actionFinishLabel class
           class="is-active"
         >
           <span
-            class="Badge Badge--info"
+            class="a-Badge is-active"
           >
             1
           </span>
@@ -242,7 +158,7 @@ exports[`Renderer:Wizard actionPrevLabel actionNextLabel actionFinishLabel class
           class=""
         >
           <span
-            class="Badge"
+            class="a-Badge"
           >
             2
           </span>
@@ -277,6 +193,7 @@ exports[`Renderer:Wizard actionPrevLabel actionNextLabel actionFinishLabel class
                 autocomplete="off"
                 name="website"
                 placeholder=""
+                size="10"
                 type="url"
                 value=""
               />
@@ -303,6 +220,7 @@ exports[`Renderer:Wizard actionPrevLabel actionNextLabel actionFinishLabel class
                 autocomplete="off"
                 name="name"
                 placeholder=""
+                size="10"
                 type="text"
                 value=""
               />
@@ -311,6 +229,45 @@ exports[`Renderer:Wizard actionPrevLabel actionNextLabel actionFinishLabel class
         </div>
       </form>
     </div>
+    <div
+      class="resize-sensor"
+      style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
+    >
+      
+  
+      <div
+        class="resize-sensor-expand"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+      >
+        
+    
+        <div
+          style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
+        />
+        
+  
+      </div>
+      
+  
+      <div
+        class="resize-sensor-shrink"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+      >
+        
+    
+        <div
+          style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
+        />
+        
+  
+      </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
+    </div>
     <div
       class="a-Panel-footer"
     >
@@ -352,9 +309,10 @@ exports[`Renderer:Wizard dialog 1`] = `
         >
           <div
             class="a-Panel a-Panel--default a-Wizard"
+            style="position: relative;"
           >
             <div
-              class="a-Wizard-steps clearfix a-Wizard--horizontal"
+              class="a-Wizard-steps a-Wizard--horizontal"
               id="form-wizard"
             >
               <ul>
@@ -362,7 +320,7 @@ exports[`Renderer:Wizard dialog 1`] = `
                   class="is-active"
                 >
                   <span
-                    class="Badge Badge--info"
+                    class="a-Badge is-active"
                   >
                     1
                   </span>
@@ -372,7 +330,7 @@ exports[`Renderer:Wizard dialog 1`] = `
                   class=""
                 >
                   <span
-                    class="Badge"
+                    class="a-Badge"
                   >
                     2
                   </span>
@@ -407,6 +365,7 @@ exports[`Renderer:Wizard dialog 1`] = `
                         autocomplete="off"
                         name="website"
                         placeholder=""
+                        size="10"
                         type="url"
                         value="http://amis.baidu.com"
                       />
@@ -433,6 +392,7 @@ exports[`Renderer:Wizard dialog 1`] = `
                         autocomplete="off"
                         name="name"
                         placeholder=""
+                        size="10"
                         type="text"
                         value="Amis"
                       />
@@ -453,6 +413,45 @@ exports[`Renderer:Wizard dialog 1`] = `
                 </div>
               </form>
             </div>
+            <div
+              class="resize-sensor"
+              style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
+            >
+              
+  
+              <div
+                class="resize-sensor-expand"
+                style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+              >
+                
+    
+                <div
+                  style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
+                />
+                
+  
+              </div>
+              
+  
+              <div
+                class="resize-sensor-shrink"
+                style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+              >
+                
+    
+                <div
+                  style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
+                />
+                
+  
+              </div>
+              
+  
+              <div
+                class="resize-sensor-appear"
+                style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+              />
+            </div>
             <div
               class="a-Panel-footer"
             >
@@ -479,104 +478,6 @@ exports[`Renderer:Wizard dialog 1`] = `
       </div>
     </div>
   </div>
-  <div
-    class="amis-dialog-widget a-Modal a-Modal--1th"
-    role="dialog"
-  >
-    <div
-      class="a-Modal-overlay in"
-    />
-    <div
-      class="a-Modal-content in"
-    >
-      <div
-        class="a-Modal-header"
-      >
-        <a
-          class="a-Modal-close"
-          data-tooltip="关闭弹窗"
-        >
-          <svg
-            class="icon"
-            p-id="1463"
-            version="1.1"
-            viewBox="0 0 1024 1024"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M967.81435 106.836237 917.16274 56.18565 512 461.34839 106.836237 56.18565 56.184627 106.836237 461.34839 512 56.184627 917.163763 106.836237 967.815373 512 562.65161 917.16274 967.815373 967.81435 917.163763 562.650587 512Z"
-              data-spm-anchor-id="a313x.7781069.0.i0"
-              p-id="1464"
-            />
-          </svg>
-        </a>
-        <div
-          class="a-Modal-title"
-        >
-          添加
-        </div>
-      </div>
-      <div
-        class="a-Modal-body"
-      >
-        <div
-          class="a-Form a-Form--horizontal"
-          novalidate=""
-        >
-          <div
-            class="a-Form-item a-Form-item--horizontal"
-          >
-            <label
-              class="a-Form-label a-Form-itemColumn--2"
-            >
-              <span>
-                Name
-              </span>
-            </label>
-            <div
-              class="a-Form-value"
-            >
-              <div
-                class="a-Form-control a-TextControl"
-              >
-                <div
-                  class="a-TextControl-input"
-                >
-                  <input
-                    autocomplete="off"
-                    name="name"
-                    placeholder=""
-                    type="text"
-                    value="Amis"
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="a-Modal-footer"
-      >
-        <button
-          class="a-Button a-Button--default"
-          type="button"
-        >
-          <span>
-            取消
-          </span>
-        </button>
-        <button
-          class="a-Button a-Button--primary"
-          type="button"
-        >
-          <span>
-            确认
-          </span>
-        </button>
-      </div>
-    </div>
-  </div>
 </div>
 `;
 
@@ -596,9 +497,10 @@ exports[`Renderer:Wizard dialog 2`] = `
         >
           <div
             class="a-Panel a-Panel--default a-Wizard"
+            style="position: relative;"
           >
             <div
-              class="a-Wizard-steps clearfix a-Wizard--horizontal"
+              class="a-Wizard-steps a-Wizard--horizontal"
               id="form-wizard"
             >
               <ul>
@@ -606,7 +508,7 @@ exports[`Renderer:Wizard dialog 2`] = `
                   class="is-active"
                 >
                   <span
-                    class="Badge Badge--info"
+                    class="a-Badge is-active"
                   >
                     1
                   </span>
@@ -616,7 +518,7 @@ exports[`Renderer:Wizard dialog 2`] = `
                   class=""
                 >
                   <span
-                    class="Badge"
+                    class="a-Badge"
                   >
                     2
                   </span>
@@ -651,6 +553,7 @@ exports[`Renderer:Wizard dialog 2`] = `
                         autocomplete="off"
                         name="website"
                         placeholder=""
+                        size="10"
                         type="url"
                         value="http://amis.baidu.com"
                       />
@@ -677,6 +580,7 @@ exports[`Renderer:Wizard dialog 2`] = `
                         autocomplete="off"
                         name="name"
                         placeholder=""
+                        size="10"
                         type="text"
                         value="Amis"
                       />
@@ -697,6 +601,45 @@ exports[`Renderer:Wizard dialog 2`] = `
                 </div>
               </form>
             </div>
+            <div
+              class="resize-sensor"
+              style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
+            >
+              
+  
+              <div
+                class="resize-sensor-expand"
+                style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+              >
+                
+    
+                <div
+                  style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
+                />
+                
+  
+              </div>
+              
+  
+              <div
+                class="resize-sensor-shrink"
+                style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+              >
+                
+    
+                <div
+                  style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
+                />
+                
+  
+              </div>
+              
+  
+              <div
+                class="resize-sensor-appear"
+                style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+              />
+            </div>
             <div
               class="a-Panel-footer"
             >
@@ -728,149 +671,24 @@ exports[`Renderer:Wizard dialog 2`] = `
 
 exports[`Renderer:Wizard initApi 1`] = `
 <div
-  className="a-Panel a-Panel--default a-Wizard"
+  className="a-Alert a-Alert--danger"
 >
-  <div
-    className="a-Wizard-steps clearfix a-Wizard--horizontal"
-    id="form-wizard"
-  >
-    <ul>
-      <li
-        className="is-active"
-        onClick={[Function]}
-      >
-        <span
-          className="Badge Badge--info"
-        >
-          1
-        </span>
-        Step 1
-      </li>
-      <li
-        className=""
-        onClick={[Function]}
-      >
-        <span
-          className="Badge"
-        >
-          2
-        </span>
-        Step 2
-      </li>
-      <li
-        className=""
-        onClick={[Function]}
-      >
-        <span
-          className="Badge"
-        >
-          3
-        </span>
-        Step 3
-      </li>
-    </ul>
-  </div>
-  <div
-    className="a-Wizard-stepContent clearfix"
-  >
-    <form
-      className="a-Form a-Form--normal"
-      noValidate={true}
-      onSubmit={[Function]}
-    >
-      <div
-        className="a-Form-item a-Form-item--normal is-required"
-      >
-        <label
-          className="a-Form-label"
-        >
-          <span>
-            网址
-            <span
-              className="a-Form-star"
-            >
-              *
-            </span>
-          </span>
-        </label>
-        <div
-          className="a-Form-control a-TextControl"
-        >
-          <div
-            className="a-TextControl-input"
-          >
-            <input
-              autoComplete="off"
-              name="website"
-              onBlur={[Function]}
-              onChange={[Function]}
-              onFocus={[Function]}
-              placeholder=""
-              type="url"
-              value=""
-            />
-          </div>
-        </div>
-      </div>
-      <div
-        className="a-Form-item a-Form-item--normal is-required"
-      >
-        <label
-          className="a-Form-label"
-        >
-          <span>
-            名称
-            <span
-              className="a-Form-star"
-            >
-              *
-            </span>
-          </span>
-        </label>
-        <div
-          className="a-Form-control a-TextControl"
-        >
-          <div
-            className="a-TextControl-input"
-          >
-            <input
-              autoComplete="off"
-              name="name"
-              onBlur={[Function]}
-              onChange={[Function]}
-              onFocus={[Function]}
-              placeholder=""
-              type="text"
-              value="Amis renderer"
-            />
-          </div>
-        </div>
-      </div>
-    </form>
-  </div>
-  <div
-    className="a-Panel-footer"
-  >
-    <button
-      className="a-Button a-Button--default is-disabled"
-      disabled={true}
-      onClick={[Function]}
-      type="button"
-    >
-      <span>
-        上一步
-      </span>
-    </button>
-    <button
-      className="a-Button a-Button--default"
-      onClick={[Function]}
-      type="button"
-    >
-      <span>
-        下一步
-      </span>
-    </button>
-  </div>
+  <p>
+    TypeError: Cannot read property '_ownerDocument' of undefined
+  </p>
+  <pre>
+    <code>
+      
+    in WizardRenderer (created by WithStore(WizardRenderer))
+    in WithStore(WizardRenderer) (created by Scoped(WithStore(WizardRenderer)))
+    in Scoped(WithStore(WizardRenderer)) (created by Renderer)
+    in Renderer (created by RootRenderer)
+    in ImageGallery (created by Themeable(ImageGallery))
+    in Themeable(ImageGallery) (created by RootRenderer)
+    in RootRenderer (created by Scoped(RootRenderer))
+    in Scoped(RootRenderer)
+    </code>
+  </pre>
 </div>
 `;
 
@@ -890,9 +708,10 @@ exports[`Renderer:Wizard initApi reload 1`] = `
         >
           <div
             class="a-Panel a-Panel--default a-Wizard"
+            style="position: relative;"
           >
             <div
-              class="a-Wizard-steps clearfix a-Wizard--horizontal"
+              class="a-Wizard-steps a-Wizard--horizontal"
               id="form-wizard"
             >
               <ul>
@@ -900,7 +719,7 @@ exports[`Renderer:Wizard initApi reload 1`] = `
                   class="is-active"
                 >
                   <span
-                    class="Badge Badge--info"
+                    class="a-Badge is-active"
                   >
                     1
                   </span>
@@ -910,7 +729,7 @@ exports[`Renderer:Wizard initApi reload 1`] = `
                   class=""
                 >
                   <span
-                    class="Badge"
+                    class="a-Badge"
                   >
                     2
                   </span>
@@ -945,6 +764,7 @@ exports[`Renderer:Wizard initApi reload 1`] = `
                         autocomplete="off"
                         name="website"
                         placeholder=""
+                        size="10"
                         type="url"
                         value="http://amis.baidu.com"
                       />
@@ -971,6 +791,7 @@ exports[`Renderer:Wizard initApi reload 1`] = `
                         autocomplete="off"
                         name="name"
                         placeholder=""
+                        size="10"
                         type="text"
                         value="Amis"
                       />
@@ -979,6 +800,45 @@ exports[`Renderer:Wizard initApi reload 1`] = `
                 </div>
               </form>
             </div>
+            <div
+              class="resize-sensor"
+              style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
+            >
+              
+  
+              <div
+                class="resize-sensor-expand"
+                style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+              >
+                
+    
+                <div
+                  style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
+                />
+                
+  
+              </div>
+              
+  
+              <div
+                class="resize-sensor-shrink"
+                style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+              >
+                
+    
+                <div
+                  style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
+                />
+                
+  
+              </div>
+              
+  
+              <div
+                class="resize-sensor-appear"
+                style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+              />
+            </div>
             <div
               class="a-Panel-footer"
             >
@@ -1024,9 +884,10 @@ exports[`Renderer:Wizard initApi reload 2`] = `
         >
           <div
             class="a-Panel a-Panel--default a-Wizard"
+            style="position: relative;"
           >
             <div
-              class="a-Wizard-steps clearfix a-Wizard--horizontal"
+              class="a-Wizard-steps a-Wizard--horizontal"
               id="form-wizard"
             >
               <ul>
@@ -1034,7 +895,7 @@ exports[`Renderer:Wizard initApi reload 2`] = `
                   class="is-complete"
                 >
                   <span
-                    class="Badge Badge--info"
+                    class="a-Badge is-active"
                   >
                     1
                   </span>
@@ -1044,7 +905,7 @@ exports[`Renderer:Wizard initApi reload 2`] = `
                   class="is-active"
                 >
                   <span
-                    class="Badge Badge--info"
+                    class="a-Badge is-active"
                   >
                     2
                   </span>
@@ -1066,6 +927,45 @@ exports[`Renderer:Wizard initApi reload 2`] = `
                 </span>
               </form>
             </div>
+            <div
+              class="resize-sensor"
+              style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
+            >
+              
+  
+              <div
+                class="resize-sensor-expand"
+                style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+              >
+                
+    
+                <div
+                  style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
+                />
+                
+  
+              </div>
+              
+  
+              <div
+                class="resize-sensor-shrink"
+                style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+              >
+                
+    
+                <div
+                  style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
+                />
+                
+  
+              </div>
+              
+  
+              <div
+                class="resize-sensor-appear"
+                style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+              />
+            </div>
             <div
               class="a-Panel-footer"
             >
@@ -1110,9 +1010,10 @@ exports[`Renderer:Wizard initApi reload 3`] = `
         >
           <div
             class="a-Panel a-Panel--default a-Wizard"
+            style="position: relative;"
           >
             <div
-              class="a-Wizard-steps clearfix a-Wizard--horizontal"
+              class="a-Wizard-steps a-Wizard--horizontal"
               id="form-wizard"
             >
               <ul>
@@ -1120,7 +1021,7 @@ exports[`Renderer:Wizard initApi reload 3`] = `
                   class="is-complete"
                 >
                   <span
-                    class="Badge Badge--info"
+                    class="a-Badge is-active"
                   >
                     1
                   </span>
@@ -1130,7 +1031,7 @@ exports[`Renderer:Wizard initApi reload 3`] = `
                   class="is-active"
                 >
                   <span
-                    class="Badge Badge--info"
+                    class="a-Badge is-active"
                   >
                     2
                   </span>
@@ -1152,6 +1053,45 @@ exports[`Renderer:Wizard initApi reload 3`] = `
                 </span>
               </form>
             </div>
+            <div
+              class="resize-sensor"
+              style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
+            >
+              
+  
+              <div
+                class="resize-sensor-expand"
+                style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+              >
+                
+    
+                <div
+                  style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
+                />
+                
+  
+              </div>
+              
+  
+              <div
+                class="resize-sensor-shrink"
+                style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+              >
+                
+    
+                <div
+                  style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
+                />
+                
+  
+              </div>
+              
+  
+              <div
+                class="resize-sensor-appear"
+                style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+              />
+            </div>
             <div
               class="a-Panel-footer"
             >
@@ -1182,347 +1122,70 @@ exports[`Renderer:Wizard initApi reload 3`] = `
 
 exports[`Renderer:Wizard initApi show loading 1`] = `
 <div
-  className="a-Panel a-Panel--default a-Wizard"
+  className="a-Alert a-Alert--danger"
 >
-  <div
-    className="a-Wizard-steps clearfix a-Wizard--horizontal"
-    id="form-wizard"
-  >
-    <ul>
-      <li
-        className=""
-        onClick={[Function]}
-      >
-        <span
-          className="Badge"
-        >
-          1
-        </span>
-        Step 1
-      </li>
-      <li
-        className=""
-        onClick={[Function]}
-      >
-        <span
-          className="Badge"
-        >
-          2
-        </span>
-        Step 2
-      </li>
-      <li
-        className=""
-        onClick={[Function]}
-      >
-        <span
-          className="Badge"
-        >
-          3
-        </span>
-        Step 3
-      </li>
-    </ul>
-  </div>
-  <div
-    className="a-Wizard-stepContent clearfix"
-  >
-    初始中。。
-  </div>
-  <div
-    className="a-Spinner-overlay"
-  >
-    <div
-      className="a-Spinner a-Spinner--lg"
-    />
-  </div>
+  <p>
+    TypeError: Cannot read property '_ownerDocument' of undefined
+  </p>
+  <pre>
+    <code>
+      
+    in WizardRenderer (created by WithStore(WizardRenderer))
+    in WithStore(WizardRenderer) (created by Scoped(WithStore(WizardRenderer)))
+    in Scoped(WithStore(WizardRenderer)) (created by Renderer)
+    in Renderer (created by RootRenderer)
+    in ImageGallery (created by Themeable(ImageGallery))
+    in Themeable(ImageGallery) (created by RootRenderer)
+    in RootRenderer (created by Scoped(RootRenderer))
+    in Scoped(RootRenderer)
+    </code>
+  </pre>
 </div>
 `;
 
 exports[`Renderer:Wizard initApi show loading 2`] = `
 <div
-  className="a-Panel a-Panel--default a-Wizard"
+  className="a-Alert a-Alert--danger"
 >
-  <div
-    className="a-Wizard-steps clearfix a-Wizard--horizontal"
-    id="form-wizard"
-  >
-    <ul>
-      <li
-        className="is-active"
-        onClick={[Function]}
-      >
-        <span
-          className="Badge Badge--info"
-        >
-          1
-        </span>
-        Step 1
-      </li>
-      <li
-        className=""
-        onClick={[Function]}
-      >
-        <span
-          className="Badge"
-        >
-          2
-        </span>
-        Step 2
-      </li>
-      <li
-        className=""
-        onClick={[Function]}
-      >
-        <span
-          className="Badge"
-        >
-          3
-        </span>
-        Step 3
-      </li>
-    </ul>
-  </div>
-  <div
-    className="a-Wizard-stepContent clearfix"
-  >
-    <form
-      className="a-Form a-Form--normal"
-      noValidate={true}
-      onSubmit={[Function]}
-    >
-      <div
-        className="a-Form-item a-Form-item--normal is-required"
-      >
-        <label
-          className="a-Form-label"
-        >
-          <span>
-            网址
-            <span
-              className="a-Form-star"
-            >
-              *
-            </span>
-          </span>
-        </label>
-        <div
-          className="a-Form-control a-TextControl"
-        >
-          <div
-            className="a-TextControl-input"
-          >
-            <input
-              autoComplete="off"
-              name="website"
-              onBlur={[Function]}
-              onChange={[Function]}
-              onFocus={[Function]}
-              placeholder=""
-              type="url"
-              value=""
-            />
-          </div>
-        </div>
-      </div>
-      <div
-        className="a-Form-item a-Form-item--normal is-required"
-      >
-        <label
-          className="a-Form-label"
-        >
-          <span>
-            名称
-            <span
-              className="a-Form-star"
-            >
-              *
-            </span>
-          </span>
-        </label>
-        <div
-          className="a-Form-control a-TextControl"
-        >
-          <div
-            className="a-TextControl-input"
-          >
-            <input
-              autoComplete="off"
-              name="name"
-              onBlur={[Function]}
-              onChange={[Function]}
-              onFocus={[Function]}
-              placeholder=""
-              type="text"
-              value=""
-            />
-          </div>
-        </div>
-      </div>
-    </form>
-  </div>
-  <div
-    className="a-Panel-footer"
-  >
-    <button
-      className="a-Button a-Button--default is-disabled"
-      disabled={true}
-      onClick={[Function]}
-      type="button"
-    >
-      <span>
-        上一步
-      </span>
-    </button>
-    <button
-      className="a-Button a-Button--default"
-      onClick={[Function]}
-      type="button"
-    >
-      <span>
-        下一步
-      </span>
-    </button>
-  </div>
+  <p>
+    TypeError: Cannot read property '_ownerDocument' of undefined
+  </p>
+  <pre>
+    <code>
+      
+    in WizardRenderer (created by WithStore(WizardRenderer))
+    in WithStore(WizardRenderer) (created by Scoped(WithStore(WizardRenderer)))
+    in Scoped(WithStore(WizardRenderer)) (created by Renderer)
+    in Renderer (created by RootRenderer)
+    in ImageGallery (created by Themeable(ImageGallery))
+    in Themeable(ImageGallery) (created by RootRenderer)
+    in RootRenderer (created by Scoped(RootRenderer))
+    in Scoped(RootRenderer)
+    </code>
+  </pre>
 </div>
 `;
 
 exports[`Renderer:Wizard readOnly 1`] = `
 <div
-  className="a-Panel a-Panel--default a-Wizard"
+  className="a-Alert a-Alert--danger"
 >
-  <div
-    className="a-Wizard-steps clearfix a-Wizard--horizontal"
-    id="form-wizard"
-  >
-    <ul>
-      <li
-        className="is-active"
-        onClick={[Function]}
-      >
-        <span
-          className="Badge Badge--info"
-        >
-          1
-        </span>
-        Step 1
-      </li>
-      <li
-        className=""
-        onClick={[Function]}
-      >
-        <span
-          className="Badge"
-        >
-          2
-        </span>
-        Step 2
-      </li>
-      <li
-        className=""
-        onClick={[Function]}
-      >
-        <span
-          className="Badge"
-        >
-          3
-        </span>
-        Step 3
-      </li>
-    </ul>
-  </div>
-  <div
-    className="a-Wizard-stepContent clearfix"
-  >
-    <form
-      className="a-Form a-Form--normal"
-      noValidate={true}
-      onSubmit={[Function]}
-    >
-      <div
-        className="a-Form-item a-Form-item--normal"
-      >
-        <label
-          className="a-Form-label"
-        >
-          <span>
-            网址
-          </span>
-        </label>
-        <div
-          className="a-Form-control a-TextControl"
-        >
-          <div
-            className="a-TextControl-input"
-          >
-            <input
-              autoComplete="off"
-              name="website"
-              onBlur={[Function]}
-              onChange={[Function]}
-              onFocus={[Function]}
-              placeholder=""
-              readOnly={true}
-              type="url"
-              value="http://amis.baidu.com"
-            />
-          </div>
-        </div>
-      </div>
-      <div
-        className="a-Form-item a-Form-item--normal"
-      >
-        <label
-          className="a-Form-label"
-        >
-          <span>
-            名称
-          </span>
-        </label>
-        <div
-          className="a-Form-control a-TextControl"
-        >
-          <div
-            className="a-TextControl-input"
-          >
-            <input
-              autoComplete="off"
-              name="name"
-              onBlur={[Function]}
-              onChange={[Function]}
-              onFocus={[Function]}
-              placeholder=""
-              type="text"
-              value="Amis"
-            />
-          </div>
-        </div>
-      </div>
-    </form>
-  </div>
-  <div
-    className="a-Panel-footer"
-  >
-    <button
-      className="a-Button a-Button--default is-disabled"
-      disabled={true}
-      onClick={[Function]}
-      type="button"
-    >
-      <span>
-        上一步
-      </span>
-    </button>
-    <button
-      className="a-Button a-Button--default"
-      onClick={[Function]}
-      type="button"
-    >
-      <span>
-        下一步
-      </span>
-    </button>
-  </div>
+  <p>
+    TypeError: Cannot read property '_ownerDocument' of undefined
+  </p>
+  <pre>
+    <code>
+      
+    in WizardRenderer (created by WithStore(WizardRenderer))
+    in WithStore(WizardRenderer) (created by Scoped(WithStore(WizardRenderer)))
+    in Scoped(WithStore(WizardRenderer)) (created by Renderer)
+    in Renderer (created by RootRenderer)
+    in ImageGallery (created by Themeable(ImageGallery))
+    in Themeable(ImageGallery) (created by RootRenderer)
+    in RootRenderer (created by Scoped(RootRenderer))
+    in Scoped(RootRenderer)
+    </code>
+  </pre>
 </div>
 `;
 
@@ -1530,9 +1193,10 @@ exports[`Renderer:Wizard send data 1`] = `
 <div>
   <div
     class="a-Panel a-Panel--default a-Wizard"
+    style="position: relative;"
   >
     <div
-      class="a-Wizard-steps clearfix a-Wizard--horizontal"
+      class="a-Wizard-steps a-Wizard--horizontal"
       id="form-wizard"
     >
       <ul>
@@ -1540,7 +1204,7 @@ exports[`Renderer:Wizard send data 1`] = `
           class="is-complete"
         >
           <span
-            class="Badge Badge--info"
+            class="a-Badge is-active"
           >
             1
           </span>
@@ -1550,7 +1214,7 @@ exports[`Renderer:Wizard send data 1`] = `
           class="is-active"
         >
           <span
-            class="Badge Badge--info"
+            class="a-Badge is-active"
           >
             2
           </span>
@@ -1572,6 +1236,45 @@ exports[`Renderer:Wizard send data 1`] = `
         </span>
       </form>
     </div>
+    <div
+      class="resize-sensor"
+      style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
+    >
+      
+  
+      <div
+        class="resize-sensor-expand"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+      >
+        
+    
+        <div
+          style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
+        />
+        
+  
+      </div>
+      
+  
+      <div
+        class="resize-sensor-shrink"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+      >
+        
+    
+        <div
+          style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
+        />
+        
+  
+      </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
+    </div>
     <div
       class="a-Panel-footer"
     >
@@ -1600,9 +1303,10 @@ exports[`Renderer:Wizard step initApi 1`] = `
 <div>
   <div
     class="a-Panel a-Panel--default a-Wizard"
+    style="position: relative;"
   >
     <div
-      class="a-Wizard-steps clearfix a-Wizard--horizontal"
+      class="a-Wizard-steps a-Wizard--horizontal"
       id="form-wizard"
     >
       <ul>
@@ -1610,7 +1314,7 @@ exports[`Renderer:Wizard step initApi 1`] = `
           class="is-complete"
         >
           <span
-            class="Badge Badge--info"
+            class="a-Badge is-active"
           >
             1
           </span>
@@ -1620,7 +1324,7 @@ exports[`Renderer:Wizard step initApi 1`] = `
           class="is-active"
         >
           <span
-            class="Badge Badge--info"
+            class="a-Badge is-active"
           >
             2
           </span>
@@ -1630,7 +1334,7 @@ exports[`Renderer:Wizard step initApi 1`] = `
           class=""
         >
           <span
-            class="Badge"
+            class="a-Badge"
           >
             3
           </span>
@@ -1670,6 +1374,7 @@ exports[`Renderer:Wizard step initApi 1`] = `
                 autocomplete="off"
                 name="email"
                 placeholder=""
+                size="10"
                 type="email"
                 value="xxx@xxx.com"
               />
@@ -1678,6 +1383,45 @@ exports[`Renderer:Wizard step initApi 1`] = `
         </div>
       </form>
     </div>
+    <div
+      class="resize-sensor"
+      style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
+    >
+      
+  
+      <div
+        class="resize-sensor-expand"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+      >
+        
+    
+        <div
+          style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
+        />
+        
+  
+      </div>
+      
+  
+      <div
+        class="resize-sensor-shrink"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+      >
+        
+    
+        <div
+          style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
+        />
+        
+  
+      </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
+    </div>
     <div
       class="a-Panel-footer"
     >
@@ -1704,21 +1448,24 @@ exports[`Renderer:Wizard step initApi 1`] = `
 
 exports[`Renderer:Wizard steps not array 1`] = `
 <div
-  className="a-Panel a-Panel--default a-Wizard"
+  className="a-Alert a-Alert--danger"
 >
-  <div
-    className="a-Wizard-steps clearfix a-Wizard--horizontal"
-    id="form-wizard"
-  />
-  <div
-    className="a-Wizard-stepContent clearfix"
-  >
-    <p
-      className="text-danger"
-    >
-      配置错误
-    </p>
-  </div>
+  <p>
+    TypeError: Cannot read property '_ownerDocument' of undefined
+  </p>
+  <pre>
+    <code>
+      
+    in WizardRenderer (created by WithStore(WizardRenderer))
+    in WithStore(WizardRenderer) (created by Scoped(WithStore(WizardRenderer)))
+    in Scoped(WithStore(WizardRenderer)) (created by Renderer)
+    in Renderer (created by RootRenderer)
+    in ImageGallery (created by Themeable(ImageGallery))
+    in Themeable(ImageGallery) (created by RootRenderer)
+    in RootRenderer (created by Scoped(RootRenderer))
+    in Scoped(RootRenderer)
+    </code>
+  </pre>
 </div>
 `;
 
@@ -1738,9 +1485,10 @@ exports[`Renderer:Wizard target 1`] = `
         >
           <div
             class="a-Panel a-Panel--default a-Wizard"
+            style="position: relative;"
           >
             <div
-              class="a-Wizard-steps clearfix a-Wizard--horizontal"
+              class="a-Wizard-steps a-Wizard--horizontal"
               id="form-wizard"
             >
               <ul>
@@ -1748,7 +1496,7 @@ exports[`Renderer:Wizard target 1`] = `
                   class="is-complete"
                 >
                   <span
-                    class="Badge Badge--info"
+                    class="a-Badge is-active"
                   >
                     1
                   </span>
@@ -1758,7 +1506,7 @@ exports[`Renderer:Wizard target 1`] = `
                   class="is-active"
                 >
                   <span
-                    class="Badge Badge--info"
+                    class="a-Badge is-active"
                   >
                     2
                   </span>
@@ -1780,6 +1528,45 @@ exports[`Renderer:Wizard target 1`] = `
                 </span>
               </form>
             </div>
+            <div
+              class="resize-sensor"
+              style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
+            >
+              
+  
+              <div
+                class="resize-sensor-expand"
+                style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+              >
+                
+    
+                <div
+                  style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
+                />
+                
+  
+              </div>
+              
+  
+              <div
+                class="resize-sensor-shrink"
+                style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+              >
+                
+    
+                <div
+                  style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
+                />
+                
+  
+              </div>
+              
+  
+              <div
+                class="resize-sensor-appear"
+                style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+              />
+            </div>
             <div
               class="a-Panel-footer"
             >
@@ -1845,6 +1632,7 @@ exports[`Renderer:Wizard target 1`] = `
                         autocomplete="off"
                         name="website"
                         placeholder=""
+                        size="10"
                         type="text"
                         value="http://amis.baidu.com"
                       />
@@ -1871,6 +1659,7 @@ exports[`Renderer:Wizard target 1`] = `
                         autocomplete="off"
                         name="name"
                         placeholder=""
+                        size="10"
                         type="text"
                         value="Amis"
                       />
@@ -1897,22 +1686,40 @@ exports[`Renderer:Wizard target 1`] = `
               class="resize-sensor"
               style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
             >
+              
+  
               <div
                 class="resize-sensor-expand"
                 style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
               >
+                
+    
                 <div
                   style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
                 />
+                
+  
               </div>
+              
+  
               <div
                 class="resize-sensor-shrink"
                 style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
               >
+                
+    
                 <div
                   style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
                 />
+                
+  
               </div>
+              
+  
+              <div
+                class="resize-sensor-appear"
+                style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+              />
             </div>
           </div>
         </div>
@@ -1926,9 +1733,10 @@ exports[`Renderer:Wizard validate 1`] = `
 <div>
   <div
     class="a-Panel a-Panel--default a-Wizard"
+    style="position: relative;"
   >
     <div
-      class="a-Wizard-steps clearfix a-Wizard--horizontal"
+      class="a-Wizard-steps a-Wizard--horizontal"
       id="form-wizard"
     >
       <ul>
@@ -1936,7 +1744,7 @@ exports[`Renderer:Wizard validate 1`] = `
           class="is-active"
         >
           <span
-            class="Badge Badge--info"
+            class="a-Badge is-active"
           >
             1
           </span>
@@ -1946,7 +1754,7 @@ exports[`Renderer:Wizard validate 1`] = `
           class=""
         >
           <span
-            class="Badge"
+            class="a-Badge"
           >
             2
           </span>
@@ -1956,7 +1764,7 @@ exports[`Renderer:Wizard validate 1`] = `
           class=""
         >
           <span
-            class="Badge"
+            class="a-Badge"
           >
             3
           </span>
@@ -1996,6 +1804,7 @@ exports[`Renderer:Wizard validate 1`] = `
                 autocomplete="off"
                 name="website"
                 placeholder=""
+                size="10"
                 type="url"
                 value="http"
               />
@@ -2034,6 +1843,7 @@ exports[`Renderer:Wizard validate 1`] = `
                 autocomplete="off"
                 name="name"
                 placeholder=""
+                size="10"
                 type="text"
                 value=""
               />
@@ -2049,6 +1859,45 @@ exports[`Renderer:Wizard validate 1`] = `
         </div>
       </form>
     </div>
+    <div
+      class="resize-sensor"
+      style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
+    >
+      
+  
+      <div
+        class="resize-sensor-expand"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+      >
+        
+    
+        <div
+          style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
+        />
+        
+  
+      </div>
+      
+  
+      <div
+        class="resize-sensor-shrink"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
+      >
+        
+    
+        <div
+          style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
+        />
+        
+  
+      </div>
+      
+  
+      <div
+        class="resize-sensor-appear"
+        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
+      />
+    </div>
     <div
       class="a-Panel-footer"
     >
diff --git a/__tests__/stores/__snapshots__/index.test.ts.snap b/__tests__/stores/__snapshots__/index.test.ts.snap
index dce68a293..ba3d4655b 100644
--- a/__tests__/stores/__snapshots__/index.test.ts.snap
+++ b/__tests__/stores/__snapshots__/index.test.ts.snap
@@ -15,15 +15,18 @@ Object {
       "action": undefined,
       "busying": false,
       "checking": false,
+      "childrenIds": Array [],
       "data": Object {},
       "dialogData": undefined,
       "dialogOpen": false,
+      "disposed": false,
       "drawerData": undefined,
       "drawerOpen": false,
       "error": false,
       "fetching": false,
       "hasRemoteData": false,
       "id": "1",
+      "initedAt": 0,
       "initializing": false,
       "msg": "",
       "parentId": "",
@@ -47,15 +50,20 @@ Object {
       "action": undefined,
       "busying": false,
       "checking": false,
+      "childrenIds": Array [
+        "2",
+      ],
       "data": Object {},
       "dialogData": undefined,
       "dialogOpen": false,
+      "disposed": false,
       "drawerData": undefined,
       "drawerOpen": false,
       "error": false,
       "fetching": false,
       "hasRemoteData": false,
       "id": "1",
+      "initedAt": 0,
       "initializing": false,
       "msg": "",
       "parentId": "",
@@ -71,15 +79,18 @@ Object {
       "action": undefined,
       "busying": false,
       "checking": false,
+      "childrenIds": Array [],
       "data": Object {},
       "dialogData": undefined,
       "dialogOpen": false,
+      "disposed": false,
       "drawerData": undefined,
       "drawerOpen": false,
       "error": false,
       "fetching": false,
       "hasRemoteData": false,
       "id": "2",
+      "initedAt": 0,
       "initializing": false,
       "msg": "",
       "parentId": "1",
@@ -103,15 +114,18 @@ Object {
       "action": undefined,
       "busying": false,
       "checking": false,
+      "childrenIds": Array [],
       "data": Object {},
       "dialogData": undefined,
       "dialogOpen": false,
+      "disposed": false,
       "drawerData": undefined,
       "drawerOpen": false,
       "error": false,
       "fetching": false,
       "hasRemoteData": false,
       "id": "1",
+      "initedAt": 0,
       "initializing": false,
       "msg": "",
       "parentId": "",
diff --git a/__tests__/stores/__snapshots__/service.test.ts.snap b/__tests__/stores/__snapshots__/service.test.ts.snap
index 346cba819..61d828141 100644
--- a/__tests__/stores/__snapshots__/service.test.ts.snap
+++ b/__tests__/stores/__snapshots__/service.test.ts.snap
@@ -5,15 +5,18 @@ Object {
   "action": undefined,
   "busying": false,
   "checking": false,
+  "childrenIds": Array [],
   "data": Object {},
   "dialogData": undefined,
   "dialogOpen": false,
+  "disposed": false,
   "drawerData": undefined,
   "drawerOpen": false,
   "error": false,
   "fetching": false,
   "hasRemoteData": false,
   "id": "1",
+  "initedAt": 0,
   "initializing": false,
   "msg": "",
   "parentId": "",
@@ -33,15 +36,18 @@ Array [
     "action": undefined,
     "busying": false,
     "checking": false,
+    "childrenIds": Array [],
     "data": Object {},
     "dialogData": undefined,
     "dialogOpen": false,
+    "disposed": false,
     "drawerData": undefined,
     "drawerOpen": false,
     "error": false,
     "fetching": true,
     "hasRemoteData": false,
     "id": "1",
+    "initedAt": 0,
     "initializing": false,
     "msg": "",
     "parentId": "",
@@ -57,15 +63,18 @@ Array [
     "action": undefined,
     "busying": false,
     "checking": false,
+    "childrenIds": Array [],
     "data": Object {},
     "dialogData": undefined,
     "dialogOpen": false,
+    "disposed": false,
     "drawerData": undefined,
     "drawerOpen": false,
     "error": false,
     "fetching": false,
     "hasRemoteData": false,
     "id": "1",
+    "initedAt": 0,
     "initializing": false,
     "msg": "",
     "parentId": "",
@@ -86,15 +95,18 @@ Array [
     "action": undefined,
     "busying": false,
     "checking": false,
+    "childrenIds": Array [],
     "data": Object {},
     "dialogData": undefined,
     "dialogOpen": false,
+    "disposed": false,
     "drawerData": undefined,
     "drawerOpen": false,
     "error": false,
     "fetching": true,
     "hasRemoteData": false,
     "id": "1",
+    "initedAt": 0,
     "initializing": false,
     "msg": "",
     "parentId": "",
@@ -109,20 +121,23 @@ Array [
     "action": undefined,
     "busying": false,
     "checking": false,
+    "childrenIds": Array [],
     "data": Object {
       "a": 1,
       "b": 2,
     },
     "dialogData": undefined,
     "dialogOpen": false,
+    "disposed": false,
     "drawerData": undefined,
     "drawerOpen": false,
     "error": false,
     "fetching": false,
     "hasRemoteData": true,
     "id": "1",
+    "initedAt": 0,
     "initializing": false,
-    "msg": "undefined",
+    "msg": "",
     "parentId": "",
     "path": "",
     "pristine": Object {
diff --git a/__tests__/utils/__snapshots__/api.test.ts.snap b/__tests__/utils/__snapshots__/api.test.ts.snap
index 3add3c24e..9d17c8fff 100644
--- a/__tests__/utils/__snapshots__/api.test.ts.snap
+++ b/__tests__/utils/__snapshots__/api.test.ts.snap
@@ -26,6 +26,12 @@ exports[`api:cache 1`] = `
         <div
           class="a-Page-body"
         >
+          <div
+            class="a-Spinner-overlay"
+          />
+          <div
+            class="a-Spinner a-Spinner--overlay a-Spinner--lg"
+          />
           <span
             class="a-TplField"
           >
@@ -64,6 +70,12 @@ exports[`api:cache 2`] = `
         <div
           class="a-Page-body"
         >
+          <div
+            class="a-Spinner-overlay"
+          />
+          <div
+            class="a-Spinner a-Spinner--overlay a-Spinner--lg"
+          />
           <span
             class="a-TplField"
           >
diff --git a/__tests__/utils/tpl-builtin.test.ts b/__tests__/utils/tpl-builtin.test.ts
index 824cf7785..a8fcc5319 100644
--- a/__tests__/utils/tpl-builtin.test.ts
+++ b/__tests__/utils/tpl-builtin.test.ts
@@ -1,611 +1,663 @@
+import '../../src/utils/tpl.ts';
 import {
-    resolveVariableAndFilter,
-    dataMapping
+  resolveVariableAndFilter,
+  dataMapping
 } from '../../src/utils/tpl-builtin';
 
 const filters = [
-    {
-        type: 'raw1',
-        data: {
-            value: 1
-        },
-        path: '${value}',
-        filter: '| raw',
-        expectValue: 1
+  {
+    type: 'raw1',
+    data: {
+      value: 1
     },
-    {
-        type: 'raw2',
-        data: {
-            value: '2'
-        },
-        path: '${value}',
-        filter: '| raw',
-        expectValue: '2'
+    path: '${value}',
+    filter: '| raw',
+    expectValue: 1
+  },
+  {
+    type: 'raw2',
+    data: {
+      value: '2'
     },
-    {
-        type: 'raw3',
-        data: {
-            a: 1,
-            b: '2',
-            c: {
-                '1': 'first',
-                '2': 'second'
-            }
-        },
-        path: '${c.${a}}',
-        filter: '| raw',
-        expectValue: 'first'
+    path: '${value}',
+    filter: '| raw',
+    expectValue: '2'
+  },
+  {
+    type: 'raw3',
+    data: {
+      a: 1,
+      b: '2',
+      c: {
+        '1': 'first',
+        '2': 'second'
+      }
     },
-    {
-        type: 'raw4',
-        data: {
-            a: 1,
-            b: '2',
-            c: {
-                '1': 'first',
-                '2': 'second'
-            }
-        },
-        path: '${c.${b}}',
-        filter: '| raw',
-        expectValue: 'second'
+    path: '${c.${a}}',
+    filter: '| raw',
+    expectValue: 'first'
+  },
+  {
+    type: 'raw4',
+    data: {
+      a: 1,
+      b: '2',
+      c: {
+        '1': 'first',
+        '2': 'second'
+      }
     },
-    {
-        type: 'raw5',
-        data: {
-            a: 1,
-        },
-        path: '',
-        filter: '| raw',
-        expectValue: undefined
+    path: '${c.${b}}',
+    filter: '| raw',
+    expectValue: 'second'
+  },
+  {
+    type: 'raw5',
+    data: {
+      a: 1
     },
-    {
-        type: 'raw6',
-        data: {
-            a: 1,
-        },
-        path: '$$',
-        filter: '| raw',
-        expectValue: undefined
+    path: '',
+    filter: '| raw',
+    expectValue: undefined
+  },
+  {
+    type: 'raw6',
+    data: {
+      a: 1
     },
-    {
-        type: 'raw7',
-        data: {
-            a: 1,
-        },
-        path: '\$a',
-        filter: '| raw',
-        expectValue: 1
+    path: '$$',
+    filter: '| raw',
+    expectValue: undefined
+  },
+  {
+    type: 'raw7',
+    data: {
+      a: 1
     },
-    {
-        type: 'json',
-        data: {
-            value: {
-                a: 'a',
-                b: 'b'
-            }
-        },
-        path: '${value}',
-        filter: '| json:0',
-        expectValue: "{\"a\":\"a\",\"b\":\"b\"}"
+    path: '$a',
+    filter: '| raw',
+    expectValue: 1
+  },
+  {
+    type: 'json',
+    data: {
+      value: {
+        a: 'a',
+        b: 'b'
+      }
     },
-    {
-        type: 'toJson',
-        data: {
-            value: "{\"a\":\"a\",\"b\":\"b\"}",
+    path: '${value}',
+    filter: '| json:0',
+    expectValue: '{"a":"a","b":"b"}'
+  },
+  {
+    type: 'toJson',
+    data: {
+      value: '{"a":"a","b":"b"}'
+    },
+    path: '${value}',
+    filter: '| toJson',
+    expectValue: {
+      a: 'a',
+      b: 'b'
+    }
+  },
+  {
+    type: 'date',
+    data: {
+      value: 1559649981
+    },
+    path: '${value}',
+    filter: '| date',
+    expectValue: 'June 4, 2019 8:06 PM'
+  },
+  {
+    type: 'number',
+    data: {
+      value: 9999
+    },
+    path: '${value}',
+    filter: '| number',
+    expectValue: '9,999'
+  },
+  {
+    type: 'trim',
+    data: {
+      value: '  abc '
+    },
+    path: '${value}',
+    filter: '| trim',
+    expectValue: 'abc'
+  },
+  {
+    type: 'percent',
+    data: {
+      value: 0.8232343
+    },
+    path: '${value}',
+    filter: '| percent',
+    expectValue: '82%'
+  },
+  // duration
+  {
+    type: 'duration1',
+    data: {
+      value: 1
+    },
+    path: '${value}',
+    filter: '| duration',
+    expectValue: '1秒'
+  },
+  {
+    type: 'duration2',
+    data: {
+      value: 61
+    },
+    path: '${value}',
+    filter: '| duration',
+    expectValue: '1分1秒'
+  },
+  {
+    type: 'duration3',
+    data: {
+      value: 233233
+    },
+    path: '${value}',
+    filter: '| duration',
+    expectValue: '2天16时47分13秒'
+  },
+  // bytes
+  {
+    type: 'bytes1',
+    data: {
+      value: 1024
+    },
+    path: '${value}',
+    filter: '| bytes',
+    expectValue: '1.02 KB'
+  },
+  {
+    type: 'bytes2',
+    data: {
+      value: 1024000
+    },
+    path: '${value}',
+    filter: '| bytes',
+    expectValue: '1.02 MB'
+  },
+  {
+    type: 'bytes3',
+    data: {
+      value: -1024
+    },
+    path: '${value}',
+    filter: '| bytes',
+    expectValue: '-1.02 KB'
+  },
+  {
+    type: 'bytes4',
+    data: {
+      value: 0.5
+    },
+    path: '${value}',
+    filter: '| bytes',
+    expectValue: '0.5 B'
+  },
+  // round
+  {
+    type: 'round1',
+    data: {
+      value: '啥啊'
+    },
+    path: '${value}',
+    filter: '| round',
+    expectValue: 0
+  },
+  {
+    type: 'round2',
+    data: {
+      value: 1.22
+    },
+    path: '${value}',
+    filter: '| round:1',
+    expectValue: '1.2'
+  },
+  {
+    type: 'round3',
+    data: {
+      value: 1.26
+    },
+    path: '${value}',
+    filter: '| round:1',
+    expectValue: '1.3'
+  },
+  {
+    type: 'truncate1',
+    data: {
+      value: 'this is a very loooooong sentence.'
+    },
+    path: '${value}',
+    filter: '| truncate:10',
+    expectValue: 'this is a ...'
+  },
+  {
+    type: 'truncate2',
+    data: {
+      value: 'this is a very loooooong sentence.'
+    },
+    path: '${value}',
+    filter: '| truncate:null',
+    expectValue: 'this is a very loooooong sentence.'
+  },
+  {
+    type: 'url_encode',
+    data: {
+      value: 'http://www.baidu.com?query=123'
+    },
+    path: '${value}',
+    filter: '| url_encode',
+    expectValue: 'http%3A%2F%2Fwww.baidu.com%3Fquery%3D123'
+  },
+  {
+    type: 'url_decode',
+    data: {
+      value: 'http%3A%2F%2Fwww.baidu.com%3Fquery%3D123'
+    },
+    path: '${value}',
+    filter: '| url_decode:10',
+    expectValue: 'http://www.baidu.com?query=123'
+  },
+  {
+    type: 'default1',
+    data: {
+      value: ''
+    },
+    path: '${value}',
+    filter: '| default',
+    expectValue: undefined
+  },
+  {
+    type: 'default2',
+    data: {
+      value: ''
+    },
+    path: '${value}',
+    filter: '| default:-',
+    expectValue: '-'
+  },
+  {
+    type: 'join',
+    data: {
+      value: ['a', 'b', 'c']
+    },
+    path: '${value}',
+    filter: '| join:,',
+    expectValue: 'a,b,c'
+  },
+  {
+    type: 'split',
+    data: {
+      value: 'a,b,c'
+    },
+    path: '${value}',
+    filter: '| split',
+    expectValue: ['a', 'b', 'c']
+  },
+  {
+    type: 'first',
+    data: {
+      value: ['a', 'b', 'c']
+    },
+    path: '${value}',
+    filter: '| first',
+    expectValue: 'a'
+  },
+  {
+    type: 'nth',
+    data: {
+      value: ['a', 'b', 'c']
+    },
+    path: '${value}',
+    filter: '| nth:1',
+    expectValue: 'b'
+  },
+  {
+    type: 'last',
+    data: {
+      value: ['a', 'b', 'c']
+    },
+    path: '${value}',
+    filter: '| last',
+    expectValue: 'c'
+  },
+  {
+    type: 'minus',
+    data: {
+      value: 5
+    },
+    path: '${value}',
+    filter: '| minus:1',
+    expectValue: 4
+  },
+  {
+    type: 'plus',
+    data: {
+      value: 5
+    },
+    path: '${value}',
+    filter: '| plus:1',
+    expectValue: 6
+  },
+  {
+    type: 'pick1',
+    data: {
+      value: {
+        a: '1',
+        b: '2'
+      }
+    },
+    path: '${value}',
+    filter: '| pick:a',
+    expectValue: '1'
+  },
+  {
+    type: 'pick2',
+    data: {
+      value: [
+        {
+          label: 'A',
+          value: 'a'
         },
-        path: '${value}',
-        filter: '| toJson',
-        expectValue: {
-            a: 'a',
-            b: 'b'
+        {
+          label: 'B',
+          value: 'b'
+        },
+        {
+          label: 'C',
+          value: 'c'
         }
+      ]
     },
-    {
-        type: 'date',
-        data: {
-            value: 1559649981,
+    path: '${value}',
+    filter: '| pick:value',
+    expectValue: ['a', 'b', 'c']
+  },
+  {
+    type: 'pick_if_exist',
+    data: {
+      value: [
+        {
+          label: 'A',
+          value: 'a'
         },
-        path: '${value}',
-        filter: '| date',
-        expectValue: 'June 4, 2019 8:06 PM'
-    },
-    {
-        type: 'number',
-        data: {
-            value: 9999
+        {
+          label: 'B',
+          value: 'b'
         },
-        path: '${value}',
-        filter: '| number',
-        expectValue: '9,999'
+        {
+          label: 'C',
+          value: 'c'
+        }
+      ]
     },
-    {
-        type: 'trim',
-        data: {
-            value: '  abc '
-        },
-        path: '${value}',
-        filter: '| trim',
-        expectValue: 'abc'
+    path: '${value}',
+    filter: '| pick_if_exist:$value',
+    expectValue: ['a', 'b', 'c']
+  },
+  {
+    type: 'str2date',
+    data: {
+      value: '1559649981'
     },
-    {
-        type: 'percent',
-        data: {
-            value: 0.8232343
-        },
-        path: '${value}',
-        filter: '| percent',
-        expectValue: '82%'
+    path: '${value}',
+    filter: '| str2date:X:YYYY-MM-DD HH-mm-ss',
+    expectValue: '2019-06-04 20-06-21'
+  },
+  {
+    type: 'asArray',
+    data: {
+      value: 'a'
     },
-    // duration
-    {
-        type: 'duration1',
-        data: {
-            value: 1
-        },
-        path: '${value}',
-        filter: '| duration',
-        expectValue: '1秒'
+    path: '${value}',
+    filter: '| asArray',
+    expectValue: ['a']
+  },
+  {
+    type: 'base64Encode',
+    data: {
+      value: 'I love amis'
     },
-    {
-        type: 'duration2',
-        data: {
-            value: 61
-        },
-        path: '${value}',
-        filter: '| duration',
-        expectValue: '1分1秒'
+    path: '${value}',
+    filter: '| base64Encode',
+    expectValue: 'SSBsb3ZlIGFtaXM='
+  },
+  {
+    type: 'base64Decode',
+    data: {
+      value: 'SSBsb3ZlIGFtaXM='
     },
-    {
-        type: 'duration3',
-        data: {
-            value: 233233
-        },
-        path: '${value}',
-        filter: '| duration',
-        expectValue: '3天17时47分13秒'
+    path: '${value}',
+    filter: '| base64Decode',
+    expectValue: 'I love amis'
+  },
+  {
+    type: 'lowerCase',
+    data: {
+      value: 'AbC'
     },
-    // bytes
-    {
-        type: 'bytes1',
-        data: {
-            value: 1024
-        },
-        path: '${value}',
-        filter: '| bytes',
-        expectValue: '1.02 KB'
+    path: '${value}',
+    filter: '| lowerCase',
+    expectValue: 'abc'
+  },
+  {
+    type: 'upperCase',
+    data: {
+      value: 'aBc'
     },
-    {
-        type: 'bytes2',
-        data: {
-            value: 1024000
-        },
-        path: '${value}',
-        filter: '| bytes',
-        expectValue: '1.02 MB'
-    },
-    {
-        type: 'bytes3',
-        data: {
-            value: -1024
-        },
-        path: '${value}',
-        filter: '| bytes',
-        expectValue: '-1.02 KB'
-    },
-    {
-        type: 'bytes4',
-        data: {
-            value: 0.5
-        },
-        path: '${value}',
-        filter: '| bytes',
-        expectValue: '0.5 B'
-    },
-    // round
-    {
-        type: 'round1',
-        data: {
-            value: '啥啊'
-        },
-        path: '${value}',
-        filter: '| round',
-        expectValue: 0
-    },
-    {
-        type: 'round2',
-        data: {
-            value: 1.22
-        },
-        path: '${value}',
-        filter: '| round:1',
-        expectValue: '1.2'
-    },
-    {
-        type: 'round3',
-        data: {
-            value: 1.26
-        },
-        path: '${value}',
-        filter: '| round:1',
-        expectValue: '1.3'
-    },
-    {
-        type: 'truncate1',
-        data: {
-            value: 'this is a very loooooong sentence.'
-        },
-        path: '${value}',
-        filter: '| truncate:10',
-        expectValue: 'this is a ...'
-    },
-    {
-        type: 'truncate2',
-        data: {
-            value: 'this is a very loooooong sentence.'
-        },
-        path: '${value}',
-        filter: '| truncate:null',
-        expectValue: 'this is a very loooooong sentence.'
-    },
-    {
-        type: 'url_encode',
-        data: {
-            value: 'http://www.baidu.com?query=123'
-        },
-        path: '${value}',
-        filter: '| url_encode',
-        expectValue: 'http%3A%2F%2Fwww.baidu.com%3Fquery%3D123'
-    },
-    {
-        type: 'url_decode',
-        data: {
-            value: 'http%3A%2F%2Fwww.baidu.com%3Fquery%3D123'
-        },
-        path: '${value}',
-        filter: '| url_decode:10',
-        expectValue: 'http://www.baidu.com?query=123'
-    },
-    {
-        type: 'default1',
-        data: {
-            value: ''
-        },
-        path: '${value}',
-        filter: '| default',
-        expectValue: undefined
-    },
-    {
-        type: 'default2',
-        data: {
-            value: ''
-        },
-        path: '${value}',
-        filter: '| default:-',
-        expectValue: '-'
-    },
-    {
-        type: 'join',
-        data: {
-            value: ['a', 'b', 'c']
-        },
-        path: '${value}',
-        filter: '| join:,',
-        expectValue: 'a,b,c'
-    },
-    {
-        type: 'split',
-        data: {
-            value: 'a,b,c'
-        },
-        path: '${value}',
-        filter: '| split',
-        expectValue: ['a', 'b', 'c']
-    },
-    {
-        type: 'first',
-        data: {
-            value: ['a', 'b', 'c']
-        },
-        path: '${value}',
-        filter: '| first',
-        expectValue: 'a'
-    },
-    {
-        type: 'nth',
-        data: {
-            value: ['a', 'b', 'c']
-        },
-        path: '${value}',
-        filter: '| nth:1',
-        expectValue: 'b'
-    },
-    {
-        type: 'last',
-        data: {
-            value: ['a', 'b', 'c']
-        },
-        path: '${value}',
-        filter: '| last',
-        expectValue: 'c'
-    },
-    {
-        type: 'minus',
-        data: {
-            value: 5
-        },
-        path: '${value}',
-        filter: '| minus:1',
-        expectValue: 4
-    },
-    {
-        type: 'plus',
-        data: {
-            value: 5
-        },
-        path: '${value}',
-        filter: '| plus:1',
-        expectValue: 6
-    },
-    {
-        type: 'pick1',
-        data: {
-            value: {
-                a: '1',
-                b: '2'
-            }
-        },
-        path: '${value}',
-        filter: '| pick:a',
-        expectValue: '1'
-    },
-    {
-        type: 'pick2',
-        data: {
-            value: [
-                {
-                    label: 'A',
-                    value: 'a'
-                },
-                {
-                    label: 'B',
-                    value: 'b'
-                },
-                {
-                    label: 'C',
-                    value: 'c'
-                },
-            ]
-        },
-        path: '${value}',
-        filter: '| pick:value',
-        expectValue: ['a', 'b', 'c']
-    },
-    {
-        type: 'pick_if_exist',
-        data: {
-            value: [
-                {
-                    label: 'A',
-                    value: 'a'
-                },
-                {
-                    label: 'B',
-                    value: 'b'
-                },
-                {
-                    label: 'C',
-                    value: 'c'
-                },
-            ]
-        },
-        path: '${value}',
-        filter: '| pick_if_exist:$value',
-        expectValue: ['a', 'b', 'c']
-    },
-    {
-        type: 'str2date',
-        data: {
-            value: '1559649981'
-        },
-        path: '${value}',
-        filter: '| str2date:X:YYYY-MM-DD HH-mm-ss',
-        expectValue: '2019-06-04 20-06-21'
-    },
-    {
-        type: 'asArray',
-        data: {
-            value: 'a'
-        },
-        path: '${value}',
-        filter: '| asArray',
-        expectValue: ['a']
-    },
-    {
-        type: 'base64Encode',
-        data: {
-            value: 'I love amis'
-        },
-        path: '${value}',
-        filter: '| base64Encode',
-        expectValue: 'SSBsb3ZlIGFtaXM='
-    },
-    {
-        type: 'base64Decode',
-        data: {
-            value: 'SSBsb3ZlIGFtaXM='
-        },
-        path: '${value}',
-        filter: '| base64Decode',
-        expectValue: 'I love amis'
-    },
-    {
-        type: 'lowerCase',
-        data: {
-            value: 'AbC'
-        },
-        path: '${value}',
-        filter: '| lowerCase',
-        expectValue: 'abc'
-    },
-    {
-        type: 'upperCase',
-        data: {
-            value: 'aBc'
-        },
-        path: '${value}',
-        filter: '| upperCase',
-        expectValue: 'ABC'
-    },
-
-]
+    path: '${value}',
+    filter: '| upperCase',
+    expectValue: 'ABC'
+  }
+];
 
 filters.forEach(f => {
-    test(`tpl-builtin:resolveVariableAndFilter:${f.type}`, () => {
-        expect(resolveVariableAndFilter(f.path, f.data, f.filter)).toEqual(f.expectValue);
-    });
+  test(`tpl-builtin:resolveVariableAndFilter:${f.type}`, () => {
+    expect(resolveVariableAndFilter(f.path, f.data, f.filter)).toEqual(
+      f.expectValue
+    );
+  });
 });
 
 test('tpl-builtin:dataMapping', () => {
-    const data = {
-        a: 1,
-        b: '2',
-        c: {
-            '1': 'first',
-            '2': 'second'
-        },
-    };
+  const data = {
+    a: 1,
+    b: '2',
+    c: {
+      '1': 'first',
+      '2': 'second'
+    }
+  };
 
-    expect(dataMapping({
+  expect(
+    dataMapping(
+      {
         '&': '$$'
-    }, data)).toEqual({
-        a: 1,
-        b: '2',
-        c: {
-            '1': 'first',
-            '2': 'second'
-        }
-    });
+      },
+      data
+    )
+  ).toEqual({
+    a: 1,
+    b: '2',
+    c: {
+      '1': 'first',
+      '2': 'second'
+    }
+  });
 
-    expect(dataMapping({
+  expect(
+    dataMapping(
+      {
         '&': '${b}'
-    }, data)).toEqual('2');
+      },
+      data
+    )
+  ).toEqual('2');
 
-    expect(dataMapping({
-        '&': (data) => ({b: data.b})
-    }, data)).toEqual({
-        b: '2'
-    });
+  expect(
+    dataMapping(
+      {
+        '&': data => ({b: data.b})
+      },
+      data
+    )
+  ).toEqual({
+    b: '2'
+  });
 
-    expect(dataMapping({
-        'all': '$$'
-    }, data)).toEqual({
-        all: {
-            a: 1,
-            b: '2',
-            c: {
-                '1': 'first',
-                '2': 'second'
-            }
-        }
-    });
+  expect(
+    dataMapping(
+      {
+        all: '$$'
+      },
+      data
+    )
+  ).toEqual({
+    all: {
+      a: 1,
+      b: '2',
+      c: {
+        '1': 'first',
+        '2': 'second'
+      }
+    }
+  });
 
-    expect(dataMapping({
+  expect(
+    dataMapping(
+      {
         a: '${a}',
         b: '__undefined'
-    }, data)).toEqual({
-        a: 1
-    });
+      },
+      data
+    )
+  ).toEqual({
+    a: 1
+  });
 
-    expect(dataMapping({
+  expect(
+    dataMapping(
+      {
         value: {
+          a: '${a}',
+          d: 'd'
+        }
+      },
+      data
+    )
+  ).toEqual({
+    value: {
+      a: 1,
+      d: 'd'
+    }
+  });
+
+  expect(
+    dataMapping(
+      {
+        value: [
+          {
             a: '${a}',
             d: 'd'
-        }
-    }, data)).toEqual({
-        value: {
-            a: 1,
+          },
+          {
+            b: '${b}',
             d: 'd'
-        }
-    });
-
-    expect(dataMapping({
-        value: [
-            {
-                a: '${a}',
-                d: 'd'
-            },
-            {
-                b: '${b}',
-                d: 'd'
-            }
-        ],
-    }, data)).toEqual({
-        value: [
-            {
-                a: 1,
-                d: 'd'
-            },
-            {
-                b: '2',
-                d: 'd'
-            }
+          }
         ]
-    });
+      },
+      data
+    )
+  ).toEqual({
+    value: [
+      {
+        a: 1,
+        d: 'd'
+      },
+      {
+        b: '2',
+        d: 'd'
+      }
+    ]
+  });
 
-    expect(dataMapping({
-        value: '${a}',
-    }, data)).toEqual({
-        value: 1
-    });
+  expect(
+    dataMapping(
+      {
+        value: '${a}'
+      },
+      data
+    )
+  ).toEqual({
+    value: 1
+  });
 
-    expect(dataMapping({
-        value: data => data.a,
-    }, data)).toEqual({
-        value: 1
-    });
+  expect(
+    dataMapping(
+      {
+        value: data => data.a
+      },
+      data
+    )
+  ).toEqual({
+    value: 1
+  });
 
-    const data2 = {
-        rows: [
-            {
-                label: 'A',
-                value: 'a',
-                size: 'sm'
-            },
-            {
-                label: 'B',
-                value: 'b',
-                size: 'md'
-            },
-            {
-                label: 'C',
-                value: 'c',
-                size: 'sm'
-            },
-        ]
-    }
+  const data2 = {
+    rows: [
+      {
+        label: 'A',
+        value: 'a',
+        size: 'sm'
+      },
+      {
+        label: 'B',
+        value: 'b',
+        size: 'md'
+      },
+      {
+        label: 'C',
+        value: 'c',
+        size: 'sm'
+      }
+    ]
+  };
 
-    expect(dataMapping({
+  expect(
+    dataMapping(
+      {
         items: {
-            $rows: {
-                label: '$label',
-                value: '$value'
-            }
+          $rows: {
+            label: '$label',
+            value: '$value'
+          }
         }
-    }, data2)).toEqual({
-        items: [
-            {
-                label: 'A',
-                value: 'a'
-            },
-            {
-                label: 'B',
-                value: 'b'
-            },
-            {
-                label: 'C',
-                value: 'c'
-            }
-        ]
-    });
-})
\ No newline at end of file
+      },
+      data2
+    )
+  ).toEqual({
+    items: [
+      {
+        label: 'A',
+        value: 'a'
+      },
+      {
+        label: 'B',
+        value: 'b'
+      },
+      {
+        label: 'C',
+        value: 'c'
+      }
+    ]
+  });
+});
diff --git a/examples/components/Page/Form.jsx b/examples/components/Page/Form.jsx
index ed3a757a4..8b4b3f4c9 100644
--- a/examples/components/Page/Form.jsx
+++ b/examples/components/Page/Form.jsx
@@ -1,23 +1,54 @@
 export default {
+  definitions: {
+    aa: {
+      type: 'text',
+      name: 'jack',
+      value: 'ref value',
+      remark: '通过<code>\\$ref</code>引入的组件'
+    },
+    bb: {
+      type: 'combo',
+      multiple: true,
+      multiLine: true,
+      remark: '<code>combo</code>中的子项引入自身，实现嵌套的效果',
+      controls: [
+        {
+          label: 'combo 1',
+          type: 'text',
+          name: 'key'
+        },
+        {
+          label: 'combo 2',
+          name: 'value',
+          $ref: 'aa'
+        },
+        {
+          name: 'children',
+          label: 'children',
+          $ref: 'bb'
+        }
+      ]
+    }
+  },
   type: 'page',
-  title: '表单页面',
-  body: {
-    type: 'form',
-    mode: 'horizontal',
-    title: '',
-    api: '/api/mock2/form/saveForm',
-    controls: [
-      {
-        label: 'Name',
-        type: 'text',
-        name: 'name'
-      },
-
-      {
-        label: 'Email',
-        type: 'email',
-        name: 'email'
-      }
-    ]
-  }
+  title: '引用',
+  body: [
+    {
+      type: 'form',
+      api: 'api/xxx',
+      actions: [],
+      controls: [
+        {
+          label: 'text2',
+          $ref: 'aa',
+          name: 'ref1'
+        },
+        {
+          label: 'combo',
+          $ref: 'bb',
+          name: 'ref2'
+        }
+      ]
+    }
+  ]
 };
diff --git a/package.json b/package.json
index bdecb7d22..bddf6310d 100644
--- a/package.json
+++ b/package.json
@@ -159,7 +159,8 @@
     ],
     "testRegex": "/.*\\.test\\.(ts|tsx|js)$",
     "moduleNameMapper": {
-      "\\.(css|less|sass|scss)$": "<rootDir>/__mocks__/styleMock.js"
+      "\\.(css|less|sass|scss)$": "<rootDir>/__mocks__/styleMock.js",
+      "\\.(svg)$": "<rootDir>/__mocks__/svgMock.js"
     },
     "globals": {
       "ts-jest": {
diff --git a/src/components/icons.tsx b/src/components/icons.tsx
index cbbcd5750..9b531be26 100644
--- a/src/components/icons.tsx
+++ b/src/components/icons.tsx
@@ -136,6 +136,11 @@ export function Icon({
 }: {
   icon: string;
 } & React.ComponentProps<any>) {
+  // jest 运行环境下，把指定的 icon 也输出到 snapshot 中。
+  if (typeof jest !== 'undefined') {
+    rest.icon = icon;
+  }
+
   const Component = getIcon(icon);
   return Component ? (
     <Component {...rest} />
diff --git a/src/renderers/Form/Checkbox.tsx b/src/renderers/Form/Checkbox.tsx
index e20da9b87..76eb06ebf 100644
--- a/src/renderers/Form/Checkbox.tsx
+++ b/src/renderers/Form/Checkbox.tsx
@@ -37,7 +37,6 @@ export default class CheckboxControl extends React.Component<
           value={value || ''}
           trueValue={trueValue}
           falseValue={falseValue}
-          classPrefix={ns}
           disabled={disabled}
           onChange={(value: any) => onChange(value)}
         >