Merge remote-tracking branch 'upstream/master'

* upstream/master: 减少对fontawesome 的依赖减少一处对fontawesome 的依赖替换 svg icon 改成 svg icon 补充 svg icon 将一些 font icon 改成 svg icon 添加 listGroup 组件边界限制渲染方式换成svg，用于支持长文本整理多语言相关数据获取错误修复多语言问题优化 table 样式 icon 改用 svg 修改文案 fix fix文档文档和版本号修复 chart 被 reload 通信数据没有传过来的问题
2020-06-08 18:13:46 +08:00 · 2020-06-08 18:13:46 +08:00 · 7ee1e7c3c8
parent 9620367366 fc43676996
commit 7ee1e7c3c8
81 changed files with 753 additions and 350 deletions
--- a/docs/renderers/CRUD.md
+++ b/docs/renderers/CRUD.md
@ -18,7 +18,7 @@ CRUD 支持三种模式：`table`、`cards`、`list`，默认为 `table`。
 | filterTogglable                       | `boolean`                      | `false`                          | 是否可显隐过滤器                                                                                                                                        |
 | filterDefaultVisible                  | `boolean`                      | `true`                           | 设置过滤器默认是否可见。                                                                                                                                |
 | initFetch                             | `boolean`                      | `true`                           | 是否初始化的时候拉取数据, 只针对有 filter 的情况, 没有 filter 初始都会拉取数据                                                                          |
-| interval                              | `number`                       | `3000`                           | 刷新时间(最低 3000)                                                                                                                                     |
+| interval                              | `number`                       | `3000`                           | 刷新时间(最低 3000)，单位是毫秒                                                                                                                         |
 | silentPolling                         | `boolean`                      | `false`                          | 配置刷新时是否隐藏加载动画                                                                                                                              |
 | stopAutoRefreshWhen                   | `string`                       | `""`                             | 通过[表达式](./Types.md#表达式)来配置停止刷新的条件                                                                                                     |
 | stopAutoRefreshWhenModalIsOpen        | `boolean`                      | `false`                          | 当有弹框时关闭自动刷新，关闭弹框又恢复                                                                                                                  |
--- a/docs/renderers/Chart.md
+++ b/docs/renderers/Chart.md
@ -1,15 +1,15 @@
 ## Chart

-图表渲染器，采用 echarts 渲染，配置格式跟 echarts 相同，[echarts配置文档](http://echarts.baidu.com/option.html#title)
+图表渲染器，采用 echarts 渲染，配置格式跟 echarts 相同，[echarts 配置文档](http://echarts.baidu.com/option.html#title)

 | 属性名             | 类型                              | 默认值    | 说明                                                               |
-|--------------------|-----------------------------------|-----------|--------------------------------------------------------------------|
+| ------------------ | --------------------------------- | --------- | ------------------------------------------------------------------ |
 | type               | `string`                          | `"chart"` | 指定为 chart 渲染器                                                |
 | className          | `string`                          |           | 外层 Dom 的类名                                                    |
 | body               | [Container](./Types.md#container) |           | 内容容器                                                           |
 | api                | [api](./Types.md#Api)             |           | 配置项远程地址                                                     |
 | initFetch          | `boolean`                         |           | 是否默认拉取                                                       |
-| interval           | `number`                          |           | 刷新时间(最低 3000)                                                |
+| interval           | `number`                          |           | 刷新时间(最低 3000) ，单位是毫秒                                   |
 | config             | `object/string`                   |           | 设置 eschars 的配置项,当为`string`的时候可以设置 function 等配置项 |
 | style              | `object`                          |           | 设置根元素的 style                                                 |
 | width              | `string`                          |           | 设置根元素的宽度                                                   |
--- a/docs/renderers/Form/Form.md
+++ b/docs/renderers/Form/Form.md
@ -27,7 +27,7 @@
 ```

 | 属性名                        | 类型                                 | 默认值                                                                 | 说明                                                                                                                                                                                                                                                                                                                                                         |
-|-------------------------------|--------------------------------------|------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| ----------------------------- | ------------------------------------ | ---------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | type                          | `string`                             |                                                                        | `"form"` 指定为 Form 渲染器                                                                                                                                                                                                                                                                                                                                  |
 | mode                          | `string`                             | `normal`                                                               | 表单展示方式，可以是：`normal`、`horizontal` 或者 `inline`                                                                                                                                                                                                                                                                                                   |
 | horizontal                    | `Object`                             | `{"left":"col-sm-2", "right":"col-sm-10", "offset":"col-sm-offset-2"}` | 当 mode 为 `horizontal` 时有用，用来控制 label                                                                                                                                                                                                                                                                                                               |
@ -39,13 +39,13 @@
 | messages                      | `Object`                             |                                                                        | 消息提示覆写，默认消息读取的是 API 返回的消息，但是在此可以覆写它。                                                                                                                                                                                                                                                                                          |
 | messages.fetchSuccess         | `string`                             |                                                                        | 获取成功时提示                                                                                                                                                                                                                                                                                                                                               |
 | messages.fetchFailed          | `string`                             |                                                                        | 获取失败时提示                                                                                                                                                                                                                                                                                                                                               |
-| messages.saveSuccess           | `string`                             |                                                                        | 保存成功时提示                                                                                                                                                                                                                                                                                                                                               |
-| messages.saveFailed          | `string`                             |                                                                        | 保存失败时提示                                                                                                                                                                                                                                                                                                                                               |
+| messages.saveSuccess          | `string`                             |                                                                        | 保存成功时提示                                                                                                                                                                                                                                                                                                                                               |
+| messages.saveFailed           | `string`                             |                                                                        | 保存失败时提示                                                                                                                                                                                                                                                                                                                                               |
 | wrapWithPanel                 | `boolean`                            | `true`                                                                 | 是否让 Form 用 panel 包起来，设置为 false 后，actions 将无效。                                                                                                                                                                                                                                                                                               |
-| panelClassName                | `boolean`                            | `true`                                                                 | panel的类名。                                                                                                                                                                                                                                                                                               |
+| panelClassName                | `boolean`                            | `true`                                                                 | panel 的类名。                                                                                                                                                                                                                                                                                                                                               |
 | [api](#api)                   | [Api](../Types.md#api)               |                                                                        | Form 用来保存数据的 api。                                                                                                                                                                                                                                                                                                                                    |
 | [initApi](#initApi)           | [Api](../Types.md#api)               |                                                                        | Form 用来获取初始数据的 api。                                                                                                                                                                                                                                                                                                                                |
-| interval                      | `number`                             | `3000`                                                                 | 刷新时间(最低 3000)                                                                                                                                                                                                                                                                                                                                          |
+| interval                      | `number`                             | `3000`                                                                 | 刷新时间(最低 3000)，单位是毫秒                                                                                                                                                                                                                                                                                                                              |
 | silentPolling                 | `boolean`                            | `false`                                                                | 配置刷新时是否显示加载动画                                                                                                                                                                                                                                                                                                                                   |
 | stopAutoRefreshWhen           | `string`                             | `""`                                                                   | 通过[表达式](./Types.md#表达式) 来配置停止刷新的条件                                                                                                                                                                                                                                                                                                         |
 | [initAsyncApi](#initAsyncApi) | [Api](../Types.md#api)               |                                                                        | Form 用来获取初始数据的 api,与 initApi 不同的是，会一直轮训请求该接口，直到返回 finished 属性为 true 才 结束。                                                                                                                                                                                                                                               |
@ -55,7 +55,7 @@
 | initCheckInterval             | `number`                             | `3000`                                                                 | 设置了 initAsyncApi 以后，默认拉取的时间间隔                                                                                                                                                                                                                                                                                                                 |
 | schemaApi                     | [Api](../Types.md#api)               |                                                                        | `已不支持`，请改用 controls 里面放置 Service 渲染器实现                                                                                                                                                                                                                                                                                                      |
 | [asyncApi](#asyncApi)         | [Api](../Types.md#api)               |                                                                        | 设置此属性后，表单提交发送保存接口后，还会继续轮训请求该接口，直到返回 `finished` 属性为 `true` 才 结束。                                                                                                                                                                                                                                                    |
-| checkInterval                 | `number`                             | 3000                                                                   | 轮训请求的时间间隔，默认为 3 秒。设置 `asyncApi` 才有效                                                                                                                                                                                                                                                                                                      |
+| checkInterval                 | `number`                             | 3000                                                                   | 轮训请求的时间间隔，默认为 3000 毫秒。设置 `asyncApi` 才有效                                                                                                                                                                                                                                                                                                 |
 | finishedField                 | `string`                             | `"finished"`                                                           | 如果决定结束的字段名不是 `finished` 请设置此属性，比如 `is_success`                                                                                                                                                                                                                                                                                          |
 | submitOnChange                | `boolean`                            | `false`                                                                | 表单修改即提交                                                                                                                                                                                                                                                                                                                                               |
 | submitOnInit                  | `boolean`                            | `false`                                                                | 初始就提交一次                                                                                                                                                                                                                                                                                                                                               |
@ -201,7 +201,6 @@
 }
 ```

-
 ### 接口说明

 开始之前请你先阅读[整体要求](../api.md)。
@ -216,58 +215,57 @@

 **响应**

- 要求返回的数据 data 是对象，不要返回其他格式，且注意层级问题，data 中返回的数据正好跟 form 中的变量一一对应。
+要求返回的数据 data 是对象，不要返回其他格式，且注意层级问题，data 中返回的数据正好跟 form 中的变量一一对应。

- ```
- {
-   status: 0,
-   msg: '',
-   data: {
-     a: '123'
-   }
- }
- ```
+```
+{
+  status: 0,
+  msg: '',
+  data: {
+    a: '123'
+  }
+}
+```

- 如果有个表单项的 name 配置成  a，initApi 返回后会自动填充 '123'。
+如果有个表单项的 name 配置成 a，initApi 返回后会自动填充 '123'。

- #### api
+#### api

- 用来保存表单结果。
+用来保存表单结果。

- **发送**
+**发送**

- 默认为 `POST` 方式，会将所有表单项整理成一个对象发送过过去。除此之外你开可以主动的获取以下信息。
+默认为 `POST` 方式，会将所有表单项整理成一个对象发送过过去。除此之外你开可以主动的获取以下信息。

- * `diff` 只会包含diff 结果
- * `prinstine` 原始数据。
+- `diff` 只会包含 diff 结果
+- `prinstine` 原始数据。

- 如: 
- 
+如:

- ```json
- {
-   "api": {
-     "method": "post",
-     "url": "/api/xxx/save",
-     "data": {
-       "modified": "$$",
-       "diff": "${diff}",
-       "origin": "${prinstine}"
-     }
-   }
- }
- ```
+```json
+{
+  "api": {
+    "method": "post",
+    "url": "/api/xxx/save",
+    "data": {
+      "modified": "$$",
+      "diff": "${diff}",
+      "origin": "${prinstine}"
+    }
+  }
+}
+```

- **响应**
+**响应**

- 如果 返回了 data 对象，且是对象，会把结果 merge 到表单数据里面。
+如果 返回了 data 对象，且是对象，会把结果 merge 到表单数据里面。

- #### initAsyncApi
+#### initAsyncApi

- 这个接口的作用在于解决接口耗时比较长导致超时问题的情况，当配置此接口后，初始化接口的时候先请求 initApi 如果 initApi 接口返回了 data.finished 为 true，则初始化完成。如果返回为 false 则之后每隔 3s 请求 initAsyncApi，直到接口返回了 data.finished 为 true 才结束。 用这种机制的话，业务 api 不需要完全等待操作完成才输出结果，而是直接检测状态，没完成也直接返回，后续还会发起请求检测。
+这个接口的作用在于解决接口耗时比较长导致超时问题的情况，当配置此接口后，初始化接口的时候先请求 initApi 如果 initApi 接口返回了 data.finished 为 true，则初始化完成。如果返回为 false 则之后每隔 3s 请求 initAsyncApi，直到接口返回了 data.finished 为 true 才结束。 用这种机制的话，业务 api 不需要完全等待操作完成才输出结果，而是直接检测状态，没完成也直接返回，后续还会发起请求检测。

- 格式要求就是 data 是对象，且 有 finished 这个字段。返回的其他字段会被 merge 到表单数据里面。
+格式要求就是 data 是对象，且 有 finished 这个字段。返回的其他字段会被 merge 到表单数据里面。

- ##### asyncApi
+##### asyncApi

- 保存同样也可以采用异步模式，具体请参考 initAsyncApi。
+保存同样也可以采用异步模式，具体请参考 initAsyncApi。
--- a/docs/renderers/Page.md
+++ b/docs/renderers/Page.md
@ -36,11 +36,10 @@
 | initApi             | [Api](./Types.md#Api)             |                                            | Page 用来获取初始数据的 api。返回的数据可以整个 page 级别使用。                     |
 | initFetch           | `boolean`                         | `true`                                     | 是否起始拉取 initApi                                                                |
 | initFetchOn         | `string`                          |                                            | 是否起始拉取 initApi, 通过表达式配置                                                |
-| interval            | `number`                          | `3000`                                     | 刷新时间(最低 3000)                                                                 |
-| silentPolling       | `boolean`                         | `false`                                    | 配置刷新时是否显示加载动画                                                          |
+| interval            | `number`                          | `3000`                                     | 刷新时间(最低 3000)，单位是毫秒                                                     |
+| silentPolling       | `boolean`                         | `false`                                    | 配置刷新时是否隐藏加载动画                                                          |
 | stopAutoRefreshWhen | `string`                          | `""`                                       | 通过[表达式](./Types.md#表达式)来配置停止刷新的条件                                 |

-
 ### 接口说明

 开始之前请你先阅读[整体要求](../api.md)。
@ -75,11 +74,10 @@ data 返回是对象即可。

 当配置了 initApi 且返回如上数据后，当前 page 渲染器，以及所有孩子渲染器都能取到这个这个变量了如：

-
 ```json
 {
  "type": "page",
  "initApi": "/api/xxx",
  "body": "${a}"
 }
-```
+```
--- a/docs/renderers/Service.md
+++ b/docs/renderers/Service.md
@ -16,7 +16,7 @@
 | messages              | `Object`                          |                | 消息提示覆写，默认消息读取的是 API 返回的消息，但是在此可以覆写它。 |
 | messages.fetchSuccess | `string`                          |                | 获取成功时提示                                                      |
 | messages.fetchFailed  | `string`                          | `"初始化失败"` | 获取失败时提示                                                      |
-| interval              | `number`                          | `3000`         | 刷新时间(最低 3000)                                                 |
+| interval              | `number`                          | `3000`         | 刷新时间(最低 3000)，单位是毫秒                                     |
 | silentPolling         | `boolean`                         | `false`        | 配置刷新时是否显示加载动画                                          |
 | stopAutoRefreshWhen   | `string`                          | `""`           | 通过[表达式](./Types.md#表达式)来配置停止刷新的条件                 |

@ -32,7 +32,6 @@
 }
 ```

-
 ### 动态配置

 Service 还有个重要的功能就是支持配置 `schemaApi`，通过它可以实现动态渲染。
@ -44,4 +43,4 @@ Service 还有个重要的功能就是支持配置 `schemaApi`，通过它可以
  "className": "m-t",
  "schemaApi": "/api/mock2/service/schema?type=tabs"
 }
-```
+```
--- a/docs/renderers/Tasks.md
+++ b/docs/renderers/Tasks.md
@ -40,7 +40,7 @@
 | checkApi          | [api](./Types.md#api) |                                                                                                     | 返回任务列表，返回的数据请参考 items。                                                                                                    |
 | submitApi         | [api](./Types.md#api) |                                                                                                     | 提交任务使用的 API                                                                                                                        |
 | reSubmitApi       | [api](./Types.md#api) |                                                                                                     | 如果任务失败，且可以重试，提交的时候会使用此 API                                                                                          |
-| interval          | `number`              | `3000`                                                                                              | 当有任务进行中，会每隔一段时间再次检测，而时间间隔就是通过此项配置，默认 3s。                                                             |
+| interval          | `number`              | `3000`                                                                                              | 当有任务进行中，会每隔一段时间再次检测，而时间间隔就是通过此项配置，默认 3000，单位是毫秒                                                 |
 | taskNameLabel     | `string`              | 任务名称                                                                                            | 任务名称列说明                                                                                                                            |
 | operationLabel    | `string`              | 操作                                                                                                | 操作列说明                                                                                                                                |
 | statusLabel       | `string`              | 状态                                                                                                | 状态列说明                                                                                                                                |
--- a/examples/components/CRUD/Table.jsx
+++ b/examples/components/CRUD/Table.jsx
@ -179,13 +179,7 @@ export default {
        name: 'platform',
        label: 'Platform(s)',
        popOver: {
-          body: {
-            type: 'tpl',
-            tpl: '偏了一点的popover'
-          },
-          offset: {
-            y: 100
-          }
+          body: 'Popover 内容：${platform}'
        },
        sortable: true,
        type: 'text',
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "amis",
-  "version": "1.0.11",
+  "version": "1.0.12",
  "description": "一种MIS页面生成工具",
  "main": "lib/index.js",
  "scripts": {
--- a/scss/_utilities.scss
+++ b/scss/_utilities.scss
@ -1552,8 +1552,16 @@
  }
 }

+.visible-xs {
+  display: none;
+}
+
 /*phone*/
@media (max-width: 767px) {
+  .visible-xs {
+    display: block;
+  }
+
  .w-auto-xs {
    width: auto;
  }
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@ -168,9 +168,7 @@ $Layout-asideLink-fontSize: $fontSizeBase !default;
 $Layout-asideLink-color: #b4b6bd !default;
 $Layout-asideLink-onHover-color: #fff !default;
 $Layout-asideLink-onActive-color: #fff !default;
-$Layout-asideLink-arrowVendor: 'FontAwesome' !default;
-$Layout-asideLink-arrowFontSize: $fontFamilyBase !default;
-$Layout-asideLink-arrowIcon: '\f105' !default;
+
 $Layout-asideLink-arrowColor: $Layout-asideLink-color !default;
 $Layout-asideLink-onActive-arrowColor: $Layout-asideLink-onActive-color !default;
 $Layout-asideLabel-color: darken($Layout-aside-color, 10%) !default;
@ -569,8 +567,8 @@ $QuickEdit-onFocus-borderColor: $info !default;
 $QuickEdit-onFocus-borderWidth: $borderWidth !default;

 // Copyable
-$Copyable-iconColor: inherit !default;
-$Copyable-onHover-iconColor: inherit !default;
+$Copyable-iconColor: $icon-color !default;
+$Copyable-onHover-iconColor: $icon-onHover-color !default;

 // PopOverAble
 $PopOverAble-iconColor: inherit !default;
@ -724,9 +722,6 @@ $Form-selectValue-borderColor: saturate(
  2.5%
 ) !default;
 $Form-selectValue-fontSize: $fontSizeSm !default;
-$Form-select-caret-vender: 'FontAwesome' !default;
-$Form-select-caret-icon: '\f0d7' !default;
-$Form-select-caret-fontSize: $fontSizeBase !default;
 $Form-select-caret-iconColor: $icon-color !default;
 $Form-select-caret-onHover-iconColor: $icon-onHover-color !default;
 $Form-select-outer-borderWidth: px2rem(1px) !default;
@ -1042,15 +1037,6 @@ $DatePicker-placeholderColor: $Form-input-placeholderColor !default;
 $DatePicker-iconColor: $icon-color !default;
 $DatePicker-onHover-iconColor: $icon-onHover-color !default;
 $DatePicker-onFocused-borderColor: $Form-input-onFocused-borderColor !default;
-$DatePicker-toggler-vendor: 'FontAwesome' !default;
-$DatePicker-toggler-fontSize: $Form-fontSize !default;
-$DatePicker-toggler-icon: '\f073' !default;
-$DatePicker-prevBtn-vendor: 'FontAwesome' !default;
-$DatePicker-prevBtn-fontSize: $fontSizeMd !default;
-$DatePicker-prevBtn-icon: '\f104' !default;
-$DatePicker-nextBtn-vendor: 'FontAwesome' !default;
-$DatePicker-nextBtn-fontSize: $fontSizeMd !default;
-$DatePicker-nextBtn-icon: '\f105' !default;
 $DatePicker-header-select-borderColor: #fff !default;

 $Calendar-fontSize: $fontSizeBase !default;
@ -1211,7 +1197,7 @@ $Combo--vertical-itemToolbar-positionTop: -$Combo--vertical-itemToolbar-height !
 $Combo--vertical-itemToolbar-positionRight: px2rem(5px) !default;

 $Combo--horizontal-item-gap: px2rem(5px);
-$Combo--horizontal-dragger-top: px2rem(8px) !default;
+$Combo--horizontal-dragger-top: px2rem(10px) !default;

 // Sub Form
 $SubForm--addBtn-bg: $Button--info-bg !default;
@ -1395,9 +1381,6 @@ $Panel-fixedBottom-borderTop: none !default;
 $Pagination-height: px2rem(30px) !default;
 $Pagination-minWidth: px2rem(30px) !default;
 $Pagination-padding: 0 px2rem(8px) !default;
-$Pagination-arrowVendor: 'FontAwesome' !default;
-$Pagination-prevArrowContent: '\f053' !default;
-$Pagination-nextArrowContent: '\f054' !default;
 $Pagination-fontSize: $fontSizeBase !default;
 $Pagination-onActive-backgroundColor: $primary !default;
 $Pagination-onActive-color: $white !default;
@ -1491,6 +1474,3 @@ $Carousel-imageDescription-bottom: px2rem(25px) !default;
 // Picker
 $Picker-iconColor: $icon-color !default;
 $Picker-onHover-iconColor: $icon-onHover-color !default;
-$Picker-btn-vendor: 'FontAwesome' !default;
-$Picker-btn-fontSize: $Form-fontSize !default;
-$Picker-btn-icon: '\f2d2' !default;
--- a/scss/base/_normalize.scss
+++ b/scss/base/_normalize.scss
@ -347,3 +347,7 @@ svg.icon {
  position: relative;
  fill: currentColor;
 }
+
+svg.r90 {
+  transform: rotate(90deg);
+}
--- a/scss/components/_button.scss
+++ b/scss/components/_button.scss
@ -276,6 +276,12 @@ fieldset:disabled a.#{$ns}Button {
  min-width: $Button-height * $Button--iconOnly-minWidthRate;

  &:not(.#{$ns}Button--link) {
+    > svg.icon {
+      width: px2rem(14px);
+      height: px2rem(14px);
+      top: px2rem(2px);
+    }
+
    > .fa,
    > .iconfont {
      font-size: $fontSizeMd;
--- a/scss/components/_cards.scss
+++ b/scss/components/_cards.scss
@ -62,7 +62,8 @@
  }

  &-dragTip {
-    color: $text--loud-color;
+    width: 100%;
+    color: $info;
    clear: both;
    margin-top: $gap-xs;
  }
@ -130,7 +131,7 @@

  .#{$ns}Cards-toolbar {
    display: flex;
-    flex-wrap: nowrap;
+    flex-wrap: wrap;
  }
 }

--- a/scss/components/_dropdown.scss
+++ b/scss/components/_dropdown.scss
@ -4,6 +4,12 @@

  &-caret {
    margin-left: $DropDown-caret-marginLeft;
+
+    > svg {
+      width: px2rem(10px);
+      height: px2rem(10px);
+      top: 0.125em;
+    }
  }

  &--block {
--- a/scss/components/_list.scss
+++ b/scss/components/_list.scss
@ -8,7 +8,7 @@
  &-toolbar {
    @include clearfix();
    display: flex;
-    flex-wrap: nowrap;
+    flex-wrap: wrap;
    padding: $List-toolbar-paddingY $List-toolbar-paddingX;
  }

@ -69,7 +69,8 @@
  }

  &-dragTip {
-    color: $text--loud-color;
+    width: 100%;
+    color: $info;
    clear: both;
    margin-top: $gap-xs;
  }
@ -82,6 +83,58 @@
  }
 }

+.#{$ns}ListGroup {
+  max-width: px2rem(400px);
+  display: flex;
+  flex-direction: column;
+
+  &-item {
+    position: relative;
+    display: block;
+    padding: $ListItem-paddingY $ListItem-paddingX;
+    margin-bottom: px2rem(-1px);
+    background-color: $white;
+    border: $ListItem-borderWidth solid $ListItem-borderColor;
+
+    &:first-child {
+      border-top-left-radius: $borderRadius;
+      border-top-right-radius: $borderRadius;
+    }
+
+    &:last-child {
+      border-bottom-left-radius: $borderRadius;
+      border-bottom-right-radius: $borderRadius;
+      margin-bottom: 0;
+    }
+
+    &:hover {
+      // todo
+      z-index: 1;
+    }
+
+    &.is-active {
+      // todo
+      z-index: 2;
+    }
+
+    &.is-disabled {
+      color: $text--muted-color;
+    }
+  }
+
+  &--expanded {
+    .#{$ns}ListGroup-item {
+      border-radius: $borderRadius;
+
+      margin-bottom: $gap-sm;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+}
+
 .#{$ns}ListItem {
  @include clearfix();

@ -103,7 +156,7 @@
  }

  &-dragBtn {
-    cursor: pointer;
+    cursor: move;
    float: left;
    margin-right: $gap-sm;
  }
--- a/scss/components/_nav.scss
+++ b/scss/components/_nav.scss
@ -1,8 +1,13 @@
 .#{$ns}Nav {
  list-style: none;
+  user-select: none;
  margin: 0;
  padding: 0;

+  .#{$ns}Nav-itemIcon {
+    margin-right: $gap-xs;
+  }
+
  &--tabs {
    border-bottom: $Tabs-borderWidth solid $Tabs-borderColor;

@ -46,10 +51,6 @@
        border-bottom-color: $Tabs-content-bg;
      }
    }
-
-    .#{$ns}Nav-itemIcon {
-      margin-right: $gap-xs;
-    }
  }

  &--stacked {
@ -111,6 +112,12 @@
        cursor: pointer;
        transform: scale(0.8);
        transition: transform 0.3s;
+
+        > svg {
+          width: 10px;
+          height: 10px;
+          top: 0;
+        }
      }

      .#{$ns}Nav-subItems {
--- a/scss/components/_pagination.scss
+++ b/scss/components/_pagination.scss
@ -34,7 +34,7 @@
    }
  }

-  > li.disabled {
+  > li.is-disabled {
    > span,
    > a {
      cursor: not-allowed;
@ -50,7 +50,7 @@
    }
  }

-  > li.active {
+  > li.is-active {
    > a,
    > span,
    > a:hover,
@ -63,18 +63,9 @@
    }
  }

-  &-prev,
-  &-next {
-    font-family: $Pagination-arrowVendor;
-  }
-
  &-prev {
    > span {
      cursor: pointer;
-
-      &::before {
-        content: $Pagination-prevArrowContent;
-      }
    }
  }

@ -88,10 +79,6 @@
  &-next {
    > span {
      cursor: pointer;
-
-      &::before {
-        content: $Pagination-nextArrowContent;
-      }
    }
  }

--- a/scss/components/_popoverable.scss
+++ b/scss/components/_popoverable.scss
@ -5,6 +5,7 @@
  display: inline-block;
  cursor: pointer;
  opacity: 0.6;
+  vertical-align: middle;

  &:hover {
    color: $PopOverAble-onHover-iconColor;
--- a/scss/components/_spinner.scss
+++ b/scss/components/_spinner.scss
@ -58,6 +58,13 @@
  }

  transition: ease-out all 0.3s;
+
+  &--icon {
+    background: transparent;
+    animation: spin 2s linear infinite;
+    width: auto;
+    height: auto;
+  }
 }

 // 当启用 overlay 的时候，应该是居中模式。
--- a/scss/components/_status.scss
+++ b/scss/components/_status.scss
@ -34,6 +34,11 @@
    }
  }

+  svg.#{$ns}Status-icon {
+    width: 16px;
+    height: 16px;
+  }
+
  .#{$ns}Status-icon {
    &--danger,
    &--primary,
--- a/scss/components/_table.scss
+++ b/scss/components/_table.scss
@ -117,6 +117,7 @@
    @include clearfix();
    display: flex;
    padding: $Table-toolbar-paddingY $Table-toolbar-paddingX;
+    flex-wrap: wrap;

    .#{$ns}DropDown {
      &-menuItem {
@ -424,6 +425,7 @@
      border-right: 0;
      width: px2rem(1px);
      padding-right: 0;
+      cursor: move;
    }

    > tbody > tr > td.#{$ns}Table-expandCell {
@ -651,6 +653,8 @@
    color: $text--loud-color;
    clear: both;
    margin-top: $gap-xs;
+    width: 100%;
+    color: $info;
  }

  &-footTable {
@ -737,4 +741,9 @@
  > .#{$ns}Button--disabled-wrap > .#{$ns}Button {
    margin: px2rem(3px);
  }
+
+  > .#{$ns}Button--link {
+    padding: 0;
+    margin-right: px2rem(10px);
+  }
 }
--- a/scss/components/form/_combo.scss
+++ b/scss/components/form/_combo.scss
@ -22,6 +22,11 @@
  }

  &-addBtn {
+    > svg {
+      width: $Combo-addBtn-fontSize;
+      height: $Combo-addBtn-fontSize;
+    }
+
    font-size: $Combo-addBtn-fontSize;

    @include button-size(
@ -70,9 +75,17 @@
  &-itemDrager {
    cursor: move;

+    > a {
+      color: $icon-color;
+
+      &:hover {
+        color: $icon-onHover-color;
+      }
+    }
+
    svg {
-      width: px2rem(20px);
-      height: px2rem(20px);
+      width: px2rem(16px);
+      height: px2rem(16px);
      top: $Combo--horizontal-dragger-top;
    }
  }
--- a/scss/components/form/_date.scss
+++ b/scss/components/form/_date.scss
@ -60,15 +60,6 @@
    &:hover {
      color: $DatePicker-onHover-iconColor;
    }
-
-    &:before {
-      line-height: 1;
-      color: inherit;
-      content: $DatePicker-toggler-icon;
-      display: inline-block;
-      font-size: $DatePicker-toggler-fontSize;
-      font-family: $DatePicker-toggler-vendor;
-    }
  }

  &-clear {
@ -303,18 +294,6 @@
  line-height: 1;
 }

-.rdtBtnPrev:before {
-  font-family: $DatePicker-prevBtn-vendor;
-  font-size: $DatePicker-prevBtn-fontSize;
-  content: $DatePicker-prevBtn-icon;
-}
-
-.rdtBtnNext:before {
-  font-family: $DatePicker-nextBtn-vendor;
-  font-size: $DatePicker-nextBtn-fontSize;
-  content: $DatePicker-nextBtn-icon;
-}
-
 .rdtPrev,
 .rdtNext {
  cursor: pointer !important;
--- a/scss/components/form/_picker.scss
+++ b/scss/components/form/_picker.scss
@ -85,15 +85,6 @@
    &:hover {
      color: $Picker-onHover-iconColor;
    }
-
-    &:before {
-      line-height: 1;
-      color: inherit;
-      content: $Picker-btn-icon;
-      display: inline-block;
-      font-size: $Picker-btn-fontSize;
-      font-family: $Picker-btn-vendor;
-    }
  }

  &-clear {
--- a/scss/components/form/_select.scss
+++ b/scss/components/form/_select.scss
@ -121,17 +121,16 @@
    justify-content: center;
    line-height: 1;

-    &:before {
+    > svg {
      transition: transform 0.3s;
-      content: $Form-select-caret-icon;
-      font-family: $Form-select-caret-vender;
-      font-size: $Form-select-caret-fontSize;
      display: inline-block;
      color: $Form-select-caret-iconColor;
+      width: 10px;
+      height: 10px;
    }
  }

-  &.is-opened &-arrow:before {
+  &.is-opened &-arrow > svg {
    transform: rotate(180deg);
  }

--- a/scss/layout/_aside.scss
+++ b/scss/layout/_aside.scss
@ -22,14 +22,18 @@
    width: px2rem(20px);
    text-align: center;
    line-height: px2rem(17px);
+    margin-top: px2rem(2px);

    &::before {
-      content: $Layout-asideLink-arrowIcon;
+      content: '';
      display: inline-block;
-      font-family: $Layout-asideLink-arrowVendor;
      transform-origin: center;
-      color: $Layout-asideLink-arrowColor;
-      font-size: $Layout-asideLink-arrowFontSize;
+      transition: transform 0.2s ease;
+      background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB2aWV3Qm94PSIwIDAgNTEzIDEwMjEiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+Cgk8ZyBpZD0icmlnaHQtYXJyb3ciIGZpbGw9IiNmZmZmZmYiIGZpbGwtcnVsZT0ibm9uemVybyI+CgkJPHBhdGggZD0iTTU2LjU1OTA1NCwxMDEzLjc3MzY5IEw1MTIuOTA4MTE2LDUxMi42ODQ1MjQgTDU2LjU1OTA1NCwxMi4yMzQ1MDEgQzQ5LjQxMTQ2NzgsMi45MzQ1NTkxMiAzNy42NjY0MjM4LC0xLjU5MTg4MTc2IDI2LjEyNjIzMjQsMC41MDU5NDgyNDYgQzE0LjU4NjA0MSwyLjYwMzc3ODI1IDUuMTg1NDQ0MDksMTAuOTc0MTcyNyAxLjc2ODE1NTE2LDIyLjE5NDY0NzEgQy0xLjY0OTEzMzc3LDMzLjQxNTEyMTQgMS40ODk4MDIyOCw0NS42MDQ1MzUxIDkuOTAxNTE2LDUzLjc3ODg4NCBMNDI0LjcwNjE5Nyw1MTIuNjg0NTI0IEwxMi40NTgwOTQsOTY5LjY3MjczMSBDMi40NTgyMDU5Niw5ODIuNTUxNDk4IDQuMDEyOTc3MzcsMTAwMC45NDgzIDE2LjAzMjQ0MjIsMTAxMS45NjYxNSBDMjguMDUxOTA3MSwxMDIyLjk4Mzk5IDQ2LjUxNDIzNDYsMTAyMi45MzYxOSA1OC40NzY0ODcsMTAxMS44NTYyNiBMNTYuNTU5MDU0LDEwMTMuNzczNjkgWiIgaWQ9Iui3r+W+hCI+CgkJPC9wYXRoPgoJPC9nPgo8L3N2Zz4K);
+      width: px2rem(10px);
+      height: px2rem(10px);
+      background-position: center center;
+      background-repeat: no-repeat;
    }

    .#{$ns}AsideNav-item.is-open > a > &::before {
--- a/src/components/DatePicker.tsx
+++ b/src/components/DatePicker.tsx
@ -546,7 +546,9 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
          </a>
        ) : null}

-        <a className={`${ns}DatePicker-toggler`} />
+        <a className={`${ns}DatePicker-toggler`}>
+          <Icon icon="calendar" className="icon" />
+        </a>

        {isOpened ? (
          <Overlay
--- a/src/components/DateRangePicker.tsx
+++ b/src/components/DateRangePicker.tsx
@ -27,7 +27,6 @@ export interface DateRangePickerProps extends ThemeProps, LocaleProps {
  inputFormat?: string;
  ranges?: string | Array<ShortCuts>;
  clearable?: boolean;
-  iconClassName?: string;
  minDate?: moment.Moment;
  maxDate?: moment.Moment;
  joinValues: boolean;
@ -165,7 +164,6 @@ export class DateRangePicker extends React.Component<
    clearable: true,
    delimiter: ',',
    ranges: 'yesterday,7daysago,prevweek,thismonth,prevmonth,prevquarter',
-    iconClassName: 'fa fa-calendar',
    resetValue: '',
    closeOnSelect: true,
    overlayPlacement: 'auto'
@ -525,7 +523,7 @@ export class DateRangePicker extends React.Component<
      timeFormat,
      ranges,
      disabled,
-      iconClassName,
+      locale,
      overlayPlacement
    } = this.props;

@ -582,7 +580,7 @@ export class DateRangePicker extends React.Component<
        ) : null}

        <a className={`${ns}DateRangePicker-toggler`}>
-          <i className={iconClassName} />
+          <Icon icon="calendar" className="icon" />
        </a>

        {isOpened ? (
@ -616,6 +614,7 @@ export class DateRangePicker extends React.Component<
                  input={false}
                  onClose={this.close}
                  renderDay={this.renderDay}
+                  locale={locale}
                />

                <Calendar
@ -632,6 +631,7 @@ export class DateRangePicker extends React.Component<
                  input={false}
                  onClose={this.close}
                  renderDay={this.renderDay}
+                  locale={locale}
                />

                <div key="button" className={`${ns}DateRangePicker-actions`}>
--- a/src/components/ListGroup.tsx
+++ b/src/components/ListGroup.tsx
@ -0,0 +1,71 @@
+import {ThemeProps, themeable} from '../theme';
+import React from 'react';
+
+export interface ListGroupProps
+  extends ThemeProps,
+    Omit<React.InputHTMLAttributes<HTMLDivElement>, 'placeholder'> {
+  expand?: boolean;
+  items?: Array<any>;
+  itemClassName?: string;
+  itemRender: (item: any) => JSX.Element;
+  placeholder?: JSX.Element;
+  getItemProps?: (props: {item: any; index: number}) => any;
+}
+
+export class ListGroup extends React.Component<ListGroupProps> {
+  static defaultProps = {
+    itemRender: (item: any) => <>{`${item}`}</>
+  };
+
+  render() {
+    const {
+      classnames: cx,
+      className,
+      expand,
+      placeholder,
+      items,
+      children,
+      itemClassName,
+      itemRender,
+      getItemProps,
+      ...rest
+    } = this.props;
+
+    return (
+      <div
+        {...rest}
+        className={cx(
+          'ListGroup',
+          className,
+          expand ? 'ListGroup--expanded' : ''
+        )}
+      >
+        {Array.isArray(items) && items.length ? (
+          items.map((item: any, index) => {
+            const itemProps = getItemProps?.({item, index}) || {};
+
+            return (
+              <div
+                key={index}
+                {...itemProps}
+                className={cx(
+                  'ListGroup-item',
+                  itemClassName,
+                  itemProps.className
+                )}
+              >
+                {itemRender(item)}
+              </div>
+            );
+          })
+        ) : placeholder ? (
+          <div className={cx('Placeholder ListGroup-placeholder')}></div>
+        ) : null}
+
+        {children}
+      </div>
+    );
+  }
+}
+
+export default themeable(ListGroup);
--- a/src/components/ResultList.tsx
+++ b/src/components/ResultList.tsx
@ -144,10 +144,7 @@ export class ResultList extends React.Component<ResultListProps> {
                key={index}
              >
                {sortable && !disabled && value.length > 1 ? (
-                  <Icon
-                    className={cx('Selections-dragbar')}
-                    icon="combo-dragger"
-                  />
+                  <Icon className={cx('Selections-dragbar')} icon="drag-bar" />
                ) : null}

                <label>{itemRender(option)}</label>
--- a/src/components/Select.tsx
+++ b/src/components/Select.tsx
@ -24,6 +24,7 @@ import Checkbox from './Checkbox';
 import Input from './Input';
 import {Api} from '../types';
 import {LocaleProps, localeable} from '../locale';
+import Spinner from './Spinner';

 export interface Option {
  label?: string;
@ -330,7 +331,6 @@ export class Select extends React.Component<SelectProps, SelectState> {
    placeholder: '请选择',
    valueField: 'value',
    labelField: 'label',
-    spinnerClassName: 'fa fa-spinner fa-spin fa-1x fa-fw',
    inline: false,
    disabled: false,
    checkAll: false,
@ -871,7 +871,6 @@ export class Select extends React.Component<SelectProps, SelectState> {
      className,
      value,
      loading,
-      spinnerClassName,
      clearable,
      labelField,
      disabled,
@ -927,12 +926,16 @@ export class Select extends React.Component<SelectProps, SelectState> {
                </a>
              ) : null}
              {loading ? (
-                <span className={cx('Select-spinner')}>
-                  <i className={spinnerClassName} />
-                </span>
+                <Spinner
+                  show
+                  icon="reload"
+                  spinnerClassName={cx('Select-spinner')}
+                />
              ) : null}

-              <span className={cx('Select-arrow')} />
+              <span className={cx('Select-arrow')}>
+                <Icon icon="caret" className="icon" />
+              </span>
              {isOpen ? this.renderOuter(options) : null}
            </div>
          );
--- a/src/components/Spinner.tsx
+++ b/src/components/Spinner.tsx
@ -6,8 +6,9 @@
 */

 import React from 'react';
-import {ClassNamesFn, themeable} from '../theme';
+import {themeable, ThemeProps} from '../theme';
 import Transition, {ENTERED, ENTERING} from 'react-transition-group/Transition';
+import {Icon} from './icons';

 const fadeStyles: {
  [propName: string]: string;
@ -16,25 +17,21 @@ const fadeStyles: {
  [ENTERED]: 'in'
 };

-interface SpinnerProps {
+interface SpinnerProps extends ThemeProps {
  overlay: boolean;
  spinnerClassName: string;
  mode: string;
  size: 'sm' | 'lg' | '';
-  classPrefix: string;
-  classnames: ClassNamesFn;
  show: boolean;
+  icon?: string;
 }

 export class Spinner extends React.Component<SpinnerProps, object> {
-  static defaultProps: Pick<
-    SpinnerProps,
-    'overlay' | 'spinnerClassName' | 'size' | 'mode' | 'show'
-  > = {
+  static defaultProps = {
    overlay: false,
    spinnerClassName: '',
    mode: '',
-    size: '',
+    size: '' as '',
    show: true
  };

@ -48,7 +45,8 @@ export class Spinner extends React.Component<SpinnerProps, object> {
      spinnerClassName,
      mode,
      size,
-      overlay
+      overlay,
+      icon
    } = this.props;
    return (
      <Transition mountOnEnter unmountOnExit in={show} timeout={350}>
@ -75,9 +73,12 @@ export class Spinner extends React.Component<SpinnerProps, object> {
                className={cx(`Spinner`, spinnerClassName, fadeStyles[status], {
                  [`Spinner--${mode}`]: mode,
                  [`Spinner--overlay`]: overlay,
-                  [`Spinner--${size}`]: size
+                  [`Spinner--${size}`]: size,
+                  [`Spinner--icon`]: icon
                })}
-              />
+              >
+                {icon ? <Icon icon={icon} className="icon" /> : null}
+              </div>
            </>
          );
        }}
--- a/src/components/icons.tsx
+++ b/src/components/icons.tsx
@ -64,11 +64,43 @@ import InfoIcon from '../icons/info.svg';
 import LocationIcon from '../icons/location.svg';

 // @ts-ignore
-import ComboDraggerIcon from '../icons/combo-dragger.svg';
+import DragBarIcon from '../icons/drag-bar.svg';

 // @ts-ignore
 import ReloadIcon from '../icons/reload.svg';

+// @ts-ignore
+import ExchangeIcon from '../icons/exchange.svg';
+
+// @ts-ignore
+import ColmunsIcon from '../icons/columns.svg';
+
+// @ts-ignore
+import CalendarIcon from '../icons/calendar.svg';
+
+// @ts-ignore
+import CopyIcon from '../icons/copy.svg';
+
+// @ts-ignore
+import FilterIcon from '../icons/filter.svg';
+
+// @ts-ignore
+import CaretIcon from '../icons/caret.svg';
+
+// @ts-ignore
+import ColumnFilterIcon from '../icons/column-filter.svg';
+
+// @ts-ignore
+import ZoomInIcon from '../icons/zoom-in.svg';
+// @ts-ignore
+import ZoomOutIcon from '../icons/zoom-out.svg';
+
+// @ts-ignore
+import QuestionIcon from '../icons/question.svg';
+
+// @ts-ignore
+import WindowRestoreIcon from '../icons/window-restore.svg';
+
 // 兼容原来的用法，后续不直接试用。
 // @ts-ignore
 export const closeIcon = <CloseIcon />;
@ -117,6 +149,7 @@ registerIcon('prev', LeftArrowIcon);
 registerIcon('next', RightArrowIcon);
 registerIcon('check', CheckIcon);
 registerIcon('plus', PlusIcon);
+registerIcon('add', PlusIcon);
 registerIcon('minus', MinusIcon);
 registerIcon('pencil', PencilIcon);
 registerIcon('view', ViewIcon);
@ -131,8 +164,19 @@ registerIcon('back', BackIcon);
 registerIcon('move', MoveIcon);
 registerIcon('info', InfoIcon);
 registerIcon('location', LocationIcon);
-registerIcon('combo-dragger', ComboDraggerIcon);
+registerIcon('drag-bar', DragBarIcon);
 registerIcon('reload', ReloadIcon);
+registerIcon('exchange', ExchangeIcon);
+registerIcon('columns', ColmunsIcon);
+registerIcon('calendar', CalendarIcon);
+registerIcon('copy', CopyIcon);
+registerIcon('filter', FilterIcon);
+registerIcon('column-filter', ColumnFilterIcon);
+registerIcon('caret', CaretIcon);
+registerIcon('zoom-in', ZoomInIcon);
+registerIcon('zoom-out', ZoomOutIcon);
+registerIcon('question', QuestionIcon);
+registerIcon('window-restore', WindowRestoreIcon);

 export function Icon({
  icon,
--- a/src/icons/calendar.svg
+++ b/src/icons/calendar.svg
@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+		<g transform="translate(-136.000000, -8.000000)">
+			<path d="M159.5,0.5 L0.5,0.5 L0.5,29.5 L159.5,29.5 L159.5,0.5 Z" stroke="currentColor">
+			</path>
+			<g transform="translate(136.000000, 8.000000)" fill="currentColor" fill-rule="nonzero">
+				<path d="M0,14 L14,14 L14,3 L0,3 L0,14 Z M2,5 L12,5 L12,12 L2,12 L2,5 Z" id="Shape">
+				</path>
+				<rect id="Rectangle-path" x="0" y="0" width="14" height="2">
+				</rect>
+				<rect id="Rectangle-path" x="9" y="6" width="2" height="2">
+				</rect>
+				<rect id="Rectangle-path" x="9" y="9" width="2" height="2">
+				</rect>
+				<rect id="Rectangle-path" x="6" y="6" width="2" height="2">
+				</rect>
+				<rect id="Rectangle-path" x="6" y="9" width="2" height="2">
+				</rect>
+				<rect id="Rectangle-path" x="3" y="6" width="2" height="2">
+				</rect>
+				<rect id="Rectangle-path" x="3" y="9" width="2" height="2">
+				</rect>
+			</g>
+		</g>
+	</g>
+</svg>
--- a/src/icons/caret.svg
+++ b/src/icons/caret.svg
@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg viewBox="0 0 150 87" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<g id="caret-down" transform="translate(0.390625, -0.109375)" fill="currentColor" fill-rule="nonzero">
+		<path d="M145.321875,21.578125 L83.453125,83.446875 C78.5718769,88.3266492 70.6593731,88.3266492 65.778125,83.446875 L3.903125,21.578125 C0.653667694,18.4396941 -0.649532465,13.7921513 0.494410543,9.42178345 C1.63835355,5.05141555 5.05141555,1.63835355 9.42178345,0.494410543 C13.7921513,-0.649532465 18.4396941,0.653667694 21.578125,3.903125 L74.609375,56.934375 L127.640625,3.903125 C132.521441,-0.979417366 140.436208,-0.980816477 145.31875,3.9 C150.201292,8.78081648 150.202691,16.6955826 145.321875,21.578125 Z" id="路径">
+		</path>
+	</g>
+</svg>
--- a/src/icons/column-filter.svg
+++ b/src/icons/column-filter.svg
@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<g id="组件" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+		<g fill="currentColor">
+			<path d="M0,0 L4,4.999 L4.082,10 L8,12 L8,4.999 L12,0 L0,0 Z M5.0528196,9.05445227 L4.97933146,4.82735426 L4.97320745,4.49967969 L4.75580505,4.24311339 L2,1 L10,1 L7.24419495,4.24311339 L7.02066854,4.50640615 L7.02066854,4.84272902 L7.02066854,10 L5.0528196,9.05445227 Z" id="Page-1">
+			</path>
+		</g>
+	</g>
+</svg>
--- a/src/icons/columns.svg
+++ b/src/icons/columns.svg
--- a/src/icons/combo-dragger.svg
+++ b/src/icons/combo-dragger.svg
@ -1 +0,0 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1586501480188" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1509" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M469.333333 256a85.333333 85.333333 0 1 1-85.333333-85.333333 85.333333 85.333333 0 0 1 85.333333 85.333333z m-85.333333 170.666667a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m0 256a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m256-341.333334a85.333333 85.333333 0 1 0-85.333333-85.333333 85.333333 85.333333 0 0 0 85.333333 85.333333z m0 85.333334a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m0 256a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z" p-id="1510" data-spm-anchor-id="a313x.7781069.0.i6" class="selected" fill="#999999"></path></svg>
--- a/src/icons/copy.svg
+++ b/src/icons/copy.svg
@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<defs>
+		<polygon id="path-1" points="0 12 12 12 12 0 0 0">
+		</polygon>
+	</defs>
+	<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+		<g id="Page-1">
+			<polyline id="Stroke-1" stroke="currentColor" points="2.5 9.5 0.5 9.5 0.5 0.5 9.5 0.5 9.5 2.5">
+			</polyline>
+			<mask id="mask-2" fill="white">
+				<use xlink:href="#path-1">
+				</use>
+			</mask>
+			<g id="Clip-4">
+			</g>
+			<polygon id="Stroke-3" stroke="currentColor" mask="url(#mask-2)" points="2.5 11.5 11.5 11.5 11.5 2.5 2.5 2.5">
+			</polygon>
+		</g>
+	</g>
+</svg>
--- a/src/icons/drag-bar.svg
+++ b/src/icons/drag-bar.svg
@ -0,0 +1,7 @@
+<svg viewBox="0 0 428 684" version="1.1" 
+    xmlns="http://www.w3.org/2000/svg" 
+    xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="drag-bar" fill="currentColor" fill-rule="nonzero">
+        <path d="M171.333333,86 C171.333333,133.128298 133.128298,171.333333 86,171.333333 C38.8717015,171.333333 0.666667,133.128298 0.666667,86 C0.666667,38.8717015 38.8717015,0.666667 86,0.666667 C133.128298,0.666667 171.333333,38.8717015 171.333333,86 L171.333333,86 Z M86,256.666667 C38.8717015,256.666667 0.666667,294.871702 0.666667,342 C0.666667,389.128298 38.8717015,427.333333 86,427.333333 C133.128298,427.333333 171.333333,389.128298 171.333333,342 C171.333333,294.871702 133.128298,256.666667 86,256.666667 L86,256.666667 Z M86,512.666667 C38.8717015,512.666667 0.666667,550.871702 0.666667,598 C0.666667,645.128298 38.8717015,683.333333 86,683.333333 C133.128298,683.333333 171.333333,645.128298 171.333333,598 C171.333333,550.871702 133.128298,512.666667 86,512.666667 L86,512.666667 Z M342,171.333333 C389.128298,171.333333 427.333333,133.128298 427.333333,86 C427.333333,38.8717015 389.128298,0.666667 342,0.666667 C294.871702,0.666667 256.666667,38.8717015 256.666667,86 C256.666667,133.128298 294.871702,171.333333 342,171.333333 L342,171.333333 Z M342,256.666667 C294.871702,256.666667 256.666667,294.871702 256.666667,342 C256.666667,389.128298 294.871702,427.333333 342,427.333333 C389.128298,427.333333 427.333333,389.128298 427.333333,342 C427.333333,294.871702 389.128298,256.666667 342,256.666667 L342,256.666667 Z M342,512.666667 C294.871702,512.666667 256.666667,550.871702 256.666667,598 C256.666667,645.128298 294.871702,683.333333 342,683.333333 C389.128298,683.333333 427.333333,645.128298 427.333333,598 C427.333333,575.368193 418.342883,553.663326 402.339778,537.660222 C386.336674,521.657117 364.631807,512.666667 342,512.666667 L342,512.666667 Z" id="形状"></path>
+    </g>
+</svg>
--- a/src/icons/exchange.svg
+++ b/src/icons/exchange.svg
@ -0,0 +1,7 @@
+<svg viewBox="0 0 175 201" version="1.1" 
+	xmlns="http://www.w3.org/2000/svg" 
+	xmlns:xlink="http://www.w3.org/1999/xlink">
+	<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+		<path d="M-1.01710969,84.1828903 L176.48289,84.1828903 C182.68289,84.1828903 187.78289,79.0828903 187.78289,72.8828903 C187.78289,69.4828903 186.28289,66.3828903 183.68289,64.1828903 C183.08289,63.3828903 182.28289,62.6828903 181.48289,62.0828903 L115.18289,15.5828903 C110.08289,11.9828903 103.08289,13.1828903 99.4828903,18.2828903 C95.8828903,23.3828903 97.1828903,30.3828903 102.28289,33.9828903 L141.58289,61.5828903 L-1.01710969,61.5828903 C-7.21710969,61.6828903 -12.3171097,66.7828903 -12.3171097,72.9828903 C-12.3171097,79.1828903 -7.21710969,84.1828903 -1.01710969,84.1828903 Z M-1.01710969,117.38289 C-7.21710969,117.38289 -12.3171097,122.48289 -12.3171097,128.68289 C-12.3171097,132.08289 -10.8171097,135.18289 -8.21710969,137.38289 C-7.51710969,138.18289 -6.81710969,138.88289 -6.01710969,139.48289 L60.2828903,185.98289 C62.1828903,187.28289 64.3828903,187.98289 66.7828903,187.98289 C70.4828903,187.98289 73.8828903,186.18289 75.9828903,183.18289 C77.6828903,180.68289 78.3828903,177.78289 77.8828903,174.78289 C77.3828903,171.78289 75.6828903,169.28289 73.2828903,167.48289 L33.9828903,139.88289 L176.48289,139.88289 C182.68289,139.88289 187.78289,134.78289 187.78289,128.58289 C187.68289,122.38289 182.58289,117.38289 176.38289,117.38289 L-1.01710969,117.38289 Z" fill="currentColor" fill-rule="nonzero" transform="translate(87.732890, 100.745312) rotate(-270.000000) translate(-87.732890, -100.745312) "></path>
+	</g>
+</svg>
--- a/src/icons/filter.svg
+++ b/src/icons/filter.svg
@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg viewBox="0 0 150 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<g fill="currentColor" fill-rule="nonzero">
+		<path d="M58.3333334,100 L91.6666666,100 L91.6666666,83.3333334 L58.3333334,83.3333334 L58.3333334,100 L58.3333334,100 Z M0,0 L0,16.6666666 L150,16.6666666 L150,0 L0,0 Z M25,58.3333334 L125,58.3333334 L125,41.6666666 L25,41.6666666 L25,58.3333334 Z" id="形状">
+		</path>
+	</g>
+</svg>
--- a/src/icons/left-arrow.svg
+++ b/src/icons/left-arrow.svg
@ -1,4 +1,7 @@
-<svg xmlns="http://www.w3.org/2000/svg" 
-    xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1024 1024" version="1.1" p-id="1463">
-    <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>
+<?xml version="1.0" encoding="UTF-8"?>
+<svg viewBox="0 0 577 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<g id="left-arrow" transform="translate(-1.000000, 0.000000)" fill="currentColor" fill-rule="nonzero">
+		<path d="M101.211517,511.805631 L564.889594,73.082583 C581.083814,56.452218 581.083814,29.107879 564.889594,12.477515 C548.695374,-4.15285 522.393987,-4.15285 506.275618,12.477515 L12.750113,479.360302 C4.103082,488.3297 0.405338,500.295219 1.03111,511.805631 C0.386375,523.714261 4.103082,535.67978 12.750113,544.630216 L506.256655,1011.513 C522.375024,1028.16233 548.695373,1028.16233 564.870631,1011.513 C581.064851,994.427533 581.064851,967.5383 564.870631,950.907936 L101.211517,511.805631" id="路径">
+		</path>
+	</g>
+</svg>
--- a/src/icons/location.svg
+++ b/src/icons/location.svg
@ -1,9 +1,10 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg t="1585402743083" class="icon" viewBox="0 0 1024 1024" version="1.1" 
-    xmlns="http://www.w3.org/2000/svg" p-id="2408" 
-    xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
-    <defs>
-        <style type="text/css"></style>
-    </defs>
-    <path d="M511.968 0c-207.84 0-376.96 169.12-376.96 376.992 0 54.208 11.104 105.984 32.96 153.888 94.24 206.24 274.976 424 328.128 485.824 3.968 4.608 9.792 7.296 15.904 7.296s11.904-2.656 15.904-7.296c53.12-61.824 233.856-279.552 328.128-485.824 21.888-47.904 32.96-99.648 32.96-153.888-0.032-207.872-169.152-376.992-376.992-376.992zM511.968 572.8c-107.968 0-195.808-87.84-195.808-195.808s87.84-195.84 195.808-195.84 195.808 87.84 195.808 195.84c0 107.968-87.84 195.808-195.808 195.808z" p-id="2409"></path>
-</svg>
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg t="1585402743083" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2408" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<defs>
+		<style type="text/css">
+		</style>
+	</defs>
+	<path d="M511.968 0c-207.84 0-376.96 169.12-376.96 376.992 0 54.208 11.104 105.984 32.96 153.888 94.24 206.24 274.976 424 328.128 485.824 3.968 4.608 9.792 7.296 15.904 7.296s11.904-2.656 15.904-7.296c53.12-61.824 233.856-279.552 328.128-485.824 21.888-47.904 32.96-99.648 32.96-153.888-0.032-207.872-169.152-376.992-376.992-376.992zM511.968 572.8c-107.968 0-195.808-87.84-195.808-195.808s87.84-195.84 195.808-195.84 195.808 87.84 195.808 195.84c0 107.968-87.84 195.808-195.808 195.808z" p-id="2409">
+	</path>
+</svg>
--- a/src/icons/minus.svg
+++ b/src/icons/minus.svg
@ -1,4 +1,7 @@
-<svg xmlns="http://www.w3.org/2000/svg" 
-    xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 20" version="1.1" p-id="1463">
-    <polygon id="path-1" points="4 10.6 4 9.4 16 9.4 16 10.6"></polygon>
-</svg>
+<?xml version="1.0" encoding="UTF-8"?>
+<svg viewBox="0 0 12 2" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<g id="minus" fill="currentColor" fill-rule="nonzero">
+		<polygon id="path-1" points="0 1.6 0 0.4 12 0.4 12 1.6">
+		</polygon>
+	</g>
+</svg>
--- a/src/icons/pencil.svg
+++ b/src/icons/pencil.svg
@ -1,4 +1,6 @@
-<svg xmlns="http://www.w3.org/2000/svg" 
-    xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16" version="1.1" p-id="1463">
-    <path d="M11.496,1.834 L14.168,4.506 C14.48,4.818 14.48,5.322 14.168,5.634 L11.904,7.898 L5.4,14.402 L1.6,14.402 L1.6,10.602 L8.848,3.354 L8.848,3.354 L10.368,1.834 C10.68,1.522 11.184,1.522 11.496,1.834 Z M8.67,4.663 L2.4,10.9333708 L2.4,13.602 L5.06862915,13.602 L11.338,7.331 L8.67,4.663 Z M10.932,2.40137085 L9.23537085,4.098 L11.904,6.76662915 L13.6006292,5.07 L10.932,2.40137085 Z M8,13.6 L12.8,13.6 L12.8,14.4 L8,14.4 L8,13.6 Z" id="path-1"></path>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16" version="1.1">
+	<g fill="currentColor" fill-rule="nonzero">
+		<path d="M11.496,1.834 L14.168,4.506 C14.48,4.818 14.48,5.322 14.168,5.634 L11.904,7.898 L5.4,14.402 L1.6,14.402 L1.6,10.602 L8.848,3.354 L8.848,3.354 L10.368,1.834 C10.68,1.522 11.184,1.522 11.496,1.834 Z M8.67,4.663 L2.4,10.9333708 L2.4,13.602 L5.06862915,13.602 L11.338,7.331 L8.67,4.663 Z M10.932,2.40137085 L9.23537085,4.098 L11.904,6.76662915 L13.6006292,5.07 L10.932,2.40137085 Z M8,13.6 L12.8,13.6 L12.8,14.4 L8,14.4 L8,13.6 Z">
+		</path>
+	</g>
+</svg>
--- a/src/icons/plus.svg
+++ b/src/icons/plus.svg
@ -1,4 +1,9 @@
-<svg xmlns="http://www.w3.org/2000/svg" 
-    xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 20" version="1.1" p-id="1463">
-    <polygon id="path-1" points="10.6 10.6 10.6 16 9.4 16 9.4 10.6 4 10.6 4 9.4 9.4 9.4 9.4 4 10.6 4 10.6 9.4 16 9.4 16 10.6"></polygon>
-</svg>
+<?xml version="1.0" encoding="UTF-8"?>
+<svg viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+		<g id="plus" fill="currentColor" fill-rule="nonzero">
+			<polygon id="path-1" points="6.6 6.6 6.6 12 5.4 12 5.4 6.6 0 6.6 0 5.4 5.4 5.4 5.4 0 6.6 0 6.6 5.4 12 5.4 12 6.6">
+			</polygon>
+		</g>
+	</g>
+</svg>
--- a/src/icons/question.svg
+++ b/src/icons/question.svg
@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg viewBox="0 0 175 175" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<g id="question-(1)" transform="translate(0.304688, 0.500000)" fill="currentColor" fill-rule="nonzero">
+		<path d="M167.56875,53.3876953 C163.179297,43.0103516 156.89707,33.6917969 148.896094,25.6910156 C140.895312,17.6902344 131.576758,11.4078125 121.199414,7.01855469 C110.452539,2.47285156 99.0396484,0.16796875 87.2785156,0.16796875 C75.5173828,0.16796875 64.1046875,2.47285156 53.3574219,7.01855469 C42.9800781,11.4078125 33.6615234,17.6902344 25.6607422,25.6910156 C17.6599609,33.6917969 11.3775391,43.0103516 6.98828125,53.3876953 C2.44257813,64.1349609 0.137695313,75.5474609 0.137695313,87.3087891 C0.137695313,99.0701172 2.44257813,110.482617 6.98828125,121.229883 C11.3775391,131.607227 17.6599609,140.925781 25.6607422,148.926562 C33.6615234,156.927539 42.9800781,163.209766 53.3574219,167.599219 C64.1046875,172.144727 75.5171875,174.449609 87.2785156,174.449609 C99.0396484,174.449609 110.452344,172.144727 121.199609,167.599219 C131.576953,163.209766 140.895508,156.927539 148.896289,148.926562 C156.897266,140.925781 163.179492,131.607227 167.568945,121.229883 C172.114453,110.482617 174.419336,99.0699219 174.419336,87.3087891 C174.419336,75.5476562 172.114453,64.1349609 167.56875,53.3876953 L167.56875,53.3876953 Z M95.5601563,149.20625 C93.1902344,151.314648 90.4513672,152.366016 87.3447266,152.366016 C84.1318359,152.366016 81.328125,151.326172 78.9310547,149.246484 C76.5353516,147.166797 75.3375,144.256836 75.3375,140.519727 C75.3375,137.199023 76.4951172,134.409766 78.8132813,132.143359 C81.1300781,129.879883 83.9738281,128.748047 87.3447266,128.748047 C90.6625,128.748047 93.453125,129.879883 95.7181641,132.143359 C97.9816406,134.409766 99.1150391,137.199023 99.1150391,140.519727 C99.1150391,144.205273 97.9298828,147.100781 95.5601563,149.20625 Z M125.063867,76.0599609 C123.248437,79.4294922 121.088281,82.3392578 118.586328,84.7867187 C116.085742,87.2369141 111.595898,91.35625 105.118359,97.1501953 C103.327344,98.7818359 101.892578,100.218164 100.813867,101.456055 C99.7337891,102.694141 98.9294922,103.825977 98.4037109,104.851367 C97.8765625,105.879688 97.46875,106.905273 97.1800781,107.933594 C96.8900391,108.95918 96.4546875,110.763086 95.8759766,113.345508 C94.875,118.820508 91.7410156,121.560937 86.4755859,121.560937 C83.7365234,121.560937 81.4328125,120.664648 79.5628906,118.872266 C77.6943359,117.082617 76.759375,114.422656 76.759375,110.895312 C76.759375,106.47168 77.4429687,102.639648 78.8132812,99.4023437 C80.1820312,96.1621094 81.9990234,93.3183594 84.2638672,90.8708984 C86.5273437,88.4207031 89.5824219,85.5107422 93.4273437,82.1412109 C96.796875,79.1910156 99.2341797,76.9677734 100.733594,75.4654297 C102.225903,73.9792131 103.50228,72.290943 104.525391,70.45 C105.553711,68.6058594 106.066602,66.6066406 106.066602,64.4464844 C106.066602,60.2324219 104.499609,56.6791016 101.365625,53.7806641 C98.2332031,50.8851562 94.1900391,49.4373047 89.240625,49.4373047 C83.4466797,49.4373047 79.1810547,50.8994141 76.4433594,53.8207031 C73.7044922,56.7449219 71.3876953,61.0480469 69.4917969,66.7357422 C67.7007812,72.6876953 64.3039062,75.6636719 59.3015625,75.6636719 C56.3515625,75.6636719 53.8638672,74.6238281 51.8373047,72.5441406 C49.809375,70.4644531 48.7953125,68.2123047 48.7953125,65.7878906 C48.7953125,60.7867187 50.4009766,55.7167969 53.6140625,50.5835937 C56.8255859,45.4474609 61.5134766,41.1960937 67.6751953,37.8265625 C73.8367187,34.4542969 81.0253906,32.7708984 89.2408203,32.7708984 C96.8759766,32.7708984 103.617969,34.1785156 109.463477,36.9964844 C115.308984,39.8144531 119.824805,43.6435547 123.010352,48.4894531 C126.197461,53.3353516 127.790234,58.6007812 127.790234,64.2884766 C127.790234,68.7636719 126.882227,72.6875 125.063867,76.0599609 L125.063867,76.0599609 Z" id="形状">
+		</path>
+	</g>
+</svg>
--- a/src/icons/redo.svg
+++ b/src/icons/redo.svg
@ -1,4 +1,7 @@
-<svg xmlns="http://www.w3.org/2000/svg" 
-    xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1024 1024" version="1.1" p-id="1463">
-    <path d="M704 128l-30.08 30.08L856.96 341.333333H362.666667a277.333333 277.333333 0 0 0 0 554.666667h213.333333v-42.666667H362.666667a234.666667 234.666667 0 0 1 0-469.333333h494.293333l-183.253333 183.253333L704 597.333333l234.666667-234.666666z" />
-</svg>
+<?xml version="1.0" encoding="UTF-8"?>
+<svg viewBox="0 0 854 768" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<g id="redo" fill="currentColor" fill-rule="nonzero">
+		<path d="M619,0 L588.92,30.08 L771.96,213.333333 L277.666667,213.333333 C124.499696,213.333333 0.3333335,337.499696 0.3333335,490.666667 C0.3333335,643.833637 124.499696,768 277.666667,768 L491,768 L491,725.333333 L277.666667,725.333333 C148.069828,725.324873 43.0153188,620.263506 43.0153188,490.666667 C43.0153188,361.069827 148.069828,256.00846 277.666667,256 L771.96,256 L588.706667,439.253333 L619,469.333333 L853.666667,234.666667 L619,0 Z" id="路径">
+		</path>
+	</g>
+</svg>
--- a/src/icons/right-arrow.svg
+++ b/src/icons/right-arrow.svg
@ -1,4 +1,7 @@
-<svg xmlns="http://www.w3.org/2000/svg" 
-    xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1024 1024" version="1.1" p-id="1463">
-    <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>
+<?xml version="1.0" encoding="UTF-8"?>
+<svg viewBox="0 0 513 1021" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<g id="right-arrow" fill="currentColor" fill-rule="nonzero">
+		<path d="M56.559054,1013.77369 L512.908116,512.684524 L56.559054,12.234501 C49.4114678,2.93455912 37.6664238,-1.59188176 26.1262324,0.505948246 C14.586041,2.60377825 5.18544409,10.9741727 1.76815516,22.1946471 C-1.64913377,33.4151214 1.48980228,45.6045351 9.901516,53.778884 L424.706197,512.684524 L12.458094,969.672731 C2.45820596,982.551498 4.01297737,1000.9483 16.0324422,1011.96615 C28.0519071,1022.98399 46.5142346,1022.93619 58.476487,1011.85626 L56.559054,1013.77369 Z" id="路径">
+		</path>
+	</g>
+</svg>
--- a/src/icons/undo.svg
+++ b/src/icons/undo.svg
@ -1,4 +1,7 @@
-<svg xmlns="http://www.w3.org/2000/svg" 
-    xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1024 1024" version="1.1" p-id="1463">
-    <path d="M661.333333 341.333333H167.04l183.253333-183.253333L320 128 85.333333 362.666667l234.666667 234.666666 30.08-30.08L167.04 384H661.333333a234.666667 234.666667 0 0 1 0 469.333333H448v42.666667h213.333333a277.333333 277.333333 0 0 0 0-554.666667z" />
-</svg>
+<?xml version="1.0" encoding="UTF-8"?>
+<svg viewBox="0 0 854 768" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<g id="undo" fill="currentColor" fill-rule="nonzero">
+		<path d="M576.333333,213.333333 L82.04,213.333333 L265.293333,30.08 L235,0 L0.333333,234.666667 L235,469.333333 L265.08,439.253333 L82.04,256 L576.333333,256 C705.930172,256.00846 810.984681,361.069827 810.984681,490.666667 C810.984681,620.263506 705.930172,725.324873 576.333333,725.333333 L363,725.333333 L363,768 L576.333333,768 C729.500304,768 853.666667,643.833637 853.666667,490.666667 C853.666667,337.499696 729.500304,213.333333 576.333333,213.333333 Z" id="路径">
+		</path>
+	</g>
+</svg>
--- a/src/icons/window-restore.svg
+++ b/src/icons/window-restore.svg
@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<g id="window-restore" fill="currentColor" fill-rule="nonzero">
+		<path d="M181.25,0 L56.25,0 C45.8984375,0 37.5,8.3984375 37.5,18.75 L37.5,37.5 L18.75,37.5 C8.3984375,37.5 0,45.8984375 0,56.25 L0,181.25 C0,191.601562 8.3984375,200 18.75,200 L143.75,200 C154.101562,200 162.5,191.601562 162.5,181.25 L162.5,162.5 L181.25,162.5 C191.601562,162.5 200,154.101562 200,143.75 L200,18.75 C200,8.3984375 191.601562,0 181.25,0 Z M143.75,181.25 L18.75,181.25 L18.75,100 L143.75,100 L143.75,181.25 Z M181.25,143.75 L162.5,143.75 L162.5,56.25 C162.5,45.8984375 154.101562,37.5 143.75,37.5 L56.25,37.5 L56.25,18.75 L181.25,18.75 L181.25,143.75 Z" id="形状">
+		</path>
+	</g>
+</svg>
--- a/src/icons/zoom-in.svg
+++ b/src/icons/zoom-in.svg
@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg viewBox="0 0 201 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<g id="Zoom-In-(1)" transform="translate(-0.195312, 0.000000)" fill="currentColor" fill-rule="nonzero">
+		<path d="M200.969037,185.426237 L186.577193,199.885458 L132.526927,145.673486 C118.265005,157.063662 100.555788,163.269253 82.3037053,163.2725 C44.3450876,163.501364 11.2373309,137.535745 2.41322763,100.616316 C-6.41087568,63.6968867 11.3773428,25.5666334 45.3369837,8.60633202 C79.2966246,-8.35396931 120.465786,0.331480961 144.679988,29.5647067 C168.894189,58.7979325 169.763336,100.864327 146.777278,131.072772 L200.969037,185.426237 Z M82.3037053,18.6663447 C56.751881,18.5686211 33.6615322,33.8854576 23.8157876,57.4644032 C13.970043,81.0433489 19.3114596,108.232298 37.3456107,126.334087 C55.3797618,144.435876 82.5485248,149.879037 106.164163,140.121629 C129.779801,130.364221 145.182969,107.331373 145.180448,81.7793602 C145.206592,47.004448 117.078472,18.7708318 82.3037053,18.6663447 L82.3037053,18.6663447 Z M91.4198871,118.452958 L73.1605725,118.452958 L73.1605725,90.9427063 L45.7783383,90.9427063 L45.7783383,72.6092764 L73.1605725,72.6092764 L73.1605725,45.1192381 L91.4198871,45.1192381 L91.4198871,72.6092764 L118.822334,72.6092764 L118.822334,90.9427063 L91.4198871,90.9427063 L91.4198871,118.452958 Z" id="形状">
+		</path>
+	</g>
+</svg>
--- a/src/icons/zoom-out.svg
+++ b/src/icons/zoom-out.svg
@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg viewBox="0 0 187 187" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<g id="Zoom-In" fill="currentColor" fill-rule="nonzero">
+		<path d="M45.4545455,90.9090908 L118.181818,90.9090908 L118.181818,72.7272727 L45.4545455,72.7272727 L45.4545455,90.9090908 Z M145.709091,132.854546 C157.32865,118.383803 163.653932,100.376636 163.636364,81.8181818 C163.636364,36.6272727 127.009091,0 81.8181818,0 C36.6272727,0 0,36.6272727 0,81.8181818 C0,127.009091 36.6272727,163.636364 81.8181818,163.636364 C101.136364,163.636364 118.854546,156.909091 132.854546,145.709091 L173.827273,186.681818 L186.681818,173.827273 L145.709091,132.854546 Z M81.8181818,145.454546 C46.6727886,145.454546 18.1818182,116.963575 18.1818182,81.8181818 C18.1818182,46.6727886 46.6727886,18.1818182 81.8181818,18.1818182 C116.963575,18.1818182 145.454546,46.6727886 145.454546,81.8181818 C145.454546,116.963575 116.963575,145.454546 81.8181818,145.454546 L81.8181818,145.454546 Z" id="形状">
+		</path>
+	</g>
+</svg>
--- a/src/index.tsx
+++ b/src/index.tsx
@ -27,6 +27,12 @@ import {resizeSensor} from './utils/resize-sensor';
 import {setIconVendor} from './renderers/Form/IconPickerIcons';
 import {Icon, registerIcon} from './components/icons';
 import {RegisterStore} from './store';
+import {
+  setDefaultLocale,
+  getDefaultLocale,
+  makeTranslator,
+  register as registerLocale
+} from './locale';

 // 注册渲染器
 import './renderers/Action';
@ -203,5 +209,10 @@ export {
  getTheme,
  classPrefix,
  getClassPrefix,
-  classnames
+  classnames,
+  // 多语言相关
+  getDefaultLocale,
+  setDefaultLocale,
+  registerLocale,
+  makeTranslator
 };
--- a/src/locale/en.ts
+++ b/src/locale/en.ts
@ -69,8 +69,8 @@ register('en', {
  '拖拽排序': 'Drag to sort',
  '删除失败': 'Delete failed',
  '确认要删除？': 'Are you sure you want to delete?',
-  '组合表单成员数量不够，低于设定的最小{{minLenth}}个，请添加更多的成员。':
-    'The number of combined form members is not enough. It is lower than the minimum {{minlenth}} set. Please add more members.',
+  '组合表单成员数量不够，低于设定的最小{{minLength}}个，请添加更多的成员。':
+    'The number of combined form members is not enough. It is lower than the minimum {{minLength}} set. Please add more members.',
  '组合表单成员数量超出，超出设定的最大{{maxLength}}个，请删除多余的成员。':
    'The number of combined form members exceeds the set maximum of {{MaxLength}}}. Please delete the extra members.',
  '子表单验证失败，请仔细检查': 'Validate failed, please check this Subform.',
@ -202,5 +202,7 @@ register('en', {
  '上一步': 'Prev',
  '下一步': 'Next',
  '保存并下一步': 'Save & Next',
-  '完成': 'Finish'
+  '完成': 'Finish',
+  '点击选择图片或者将图片拖入该区域':
+    'Click to select the picture or drag the picture into the area'
 });
--- a/src/renderers/CRUD.tsx
+++ b/src/renderers/CRUD.tsx
@ -29,6 +29,7 @@ import find from 'lodash/find';
 import findIndex from 'lodash/findIndex';
 import Html from '../components/Html';
 import {Spinner} from '../components';
+import {Icon} from '../components/icons';

 export interface CRUDProps extends RendererProps {
  api?: Api;
@ -1402,7 +1403,6 @@ export default class CRUD extends React.Component<CRUDProps, any> {
            this.search({page: page + 1, loadDataMode: 'load-more'})
          }
          size="sm"
-          className="btn-primary"
        >
          {__('加载更多')}
        </Button>
@ -1426,7 +1426,7 @@ export default class CRUD extends React.Component<CRUDProps, any> {
          'is-active': store.filterVisible
        })}
      >
-        <i className="fa fa-sliders m-r-sm" />
+        <Icon icon="filter" className="icon m-r-xs" />
        {__('筛选')}
      </button>
    );
--- a/src/renderers/Card.tsx
+++ b/src/renderers/Card.tsx
@ -12,6 +12,7 @@ import QuickEdit from './QuickEdit';
 import PopOver from './PopOver';
 import {TableCell} from './Table';
 import Copyable from './Copyable';
+import {Icon} from '../components/icons';

 export interface CardProps extends RendererProps {
  onCheck: (item: IItem) => void;
@ -115,7 +116,7 @@ export class Card extends React.Component<CardProps> {
    if (dragging) {
      return (
        <div className={cx('Card-dragBtn')}>
-          <i className="fa fa-exchange" />
+          <Icon icon="drag-bar" className="icon" />
        </div>
      );
    } else if (selectable && !hideCheckToggler) {
--- a/src/renderers/Cards.tsx
+++ b/src/renderers/Cards.tsx
@ -17,6 +17,7 @@ import Sortable from 'sortablejs';
 import {filter} from '../utils/tpl';
 import debounce from 'lodash/debounce';
 import {resizeSensor} from '../utils/resize-sensor';
+import {Icon} from '../components/icons';

 export interface Column {
  type: string;
@ -524,7 +525,7 @@ export default class Cards extends React.Component<GridProps, object> {
                className={cx('Button Button--xs Button--success m-l-sm')}
                onClick={this.handleSave}
              >
-                <i className="fa fa-check m-r-xs" />
+                <Icon icon="check" className="icon m-r-xs" />
                提交
              </button>
              <button
@ -532,7 +533,7 @@ export default class Cards extends React.Component<GridProps, object> {
                className={cx('Button Button--xs Button--danger m-l-sm')}
                onClick={this.reset}
              >
-                <i className="fa fa-times m-r-xs" />
+                <Icon icon="close" className="icon m-r-xs" />
                放弃
              </button>
            </span>
@ -544,7 +545,7 @@ export default class Cards extends React.Component<GridProps, object> {
                className={cx('Button Button--xs Button--success m-l-sm')}
                onClick={this.handleSaveOrder}
              >
-                <i className="fa fa-check m-r-xs" />
+                <Icon icon="check" className="icon m-r-xs" />
                提交
              </button>
              <button
@ -552,7 +553,7 @@ export default class Cards extends React.Component<GridProps, object> {
                className={cx('Button Button--xs Button--danger m-l-sm')}
                onClick={this.reset}
              >
-                <i className="fa fa-times m-r-xs" />
+                <Icon icon="close" className="icon m-r-xs" />
                放弃
              </button>
            </span>
@ -577,7 +578,8 @@ export default class Cards extends React.Component<GridProps, object> {
      showHeader,
      render,
      store,
-      classnames: cx
+      classnames: cx,
+      translate: __
    } = this.props;

    if (showHeader === false) {
@ -603,7 +605,7 @@ export default class Cards extends React.Component<GridProps, object> {
          {child}
          {store.dragging ? (
            <div className={cx('Cards-dragTip')} ref={this.dragTipRef}>
-              请拖动右边的按钮进行排序
+              {__('请拖动顶部的按钮进行排序')}
            </div>
          ) : null}
        </div>
@ -691,7 +693,7 @@ export default class Cards extends React.Component<GridProps, object> {
  }

  renderDragToggler() {
-    const {store, multiple, selectable, env} = this.props;
+    const {store, multiple, selectable, env, translate: __} = this.props;

    if (!store.draggable || store.items.length < 2) {
      return null;
@ -701,7 +703,7 @@ export default class Cards extends React.Component<GridProps, object> {
      <Button
        iconOnly
        key="dragging-toggle"
-        tooltip="对卡片进行排序操作"
+        tooltip={__('对卡片进行排序操作')}
        tooltipContainer={
          env && env.getModalContainer ? env.getModalContainer : undefined
        }
@ -713,7 +715,7 @@ export default class Cards extends React.Component<GridProps, object> {
          store.dragging && store.clear();
        }}
      >
-        <i className="fa fa-exchange" />
+        <Icon icon="exchange" className="icon r90" />
      </Button>
    );
  }
--- a/src/renderers/Chart.tsx
+++ b/src/renderers/Chart.tsx
@ -11,6 +11,7 @@ import {resolveVariableAndFilter, isPureVariable} from '../utils/tpl-builtin';
 import {isApiOutdated, isEffectiveApi} from '../utils/api';
 import {ScopedContext, IScopedContext} from '../Scoped';
 import {createObject} from '../utils/helper';
+import Spinner from '../components/Spinner';

 export interface ChartProps extends RendererProps {
  chartRef?: (echart: any) => void;
@ -134,7 +135,7 @@ export class Chart extends React.Component<ChartProps> {
    this.ref = ref;
  }

-  reload(query?: any) {
+  reload(subpath?: string, query?: any) {
    const {api, env, store, interval} = this.props;

    if (query) {
@ -238,7 +239,11 @@ export class Chart extends React.Component<ChartProps> {
        placeholder={
          <div className={cx(`${ns}Chart`, className)} style={style}>
            <div className={`${ns}Chart-placeholder`}>
-              <i key="loading" className="fa fa-spinner fa-spin fa-2x fa-fw" />
+              <Spinner
+                show
+                icon="reload"
+                spinnerClassName={cx('Chart-spinner')}
+              />
            </div>
          </div>
        }
--- a/src/renderers/Copyable.tsx
+++ b/src/renderers/Copyable.tsx
@ -9,6 +9,7 @@ import cx from 'classnames';
 import hoistNonReactStatic from 'hoist-non-react-statics';
 import Button from '../components/Button';
 import {filter} from '../utils/tpl';
+import {Icon} from '../components/icons';

 export interface CopyableConfig {}

@ -54,12 +55,14 @@ export const HocCopyable = () => (Component: React.ComponentType<any>): any => {
              className={cx(`Field--copyable`, className)}
            >
              <Component {...this.props} wrapperComponent={''} noHoc />
-              <i
+              <a
                key="edit-btn"
                data-tooltip={__('点击复制')}
-                className={cx('Field-copyBtn fa fa-clipboard')}
+                className={cx('Field-copyBtn')}
                onClick={this.handleClick.bind(this, content)}
-              />
+              >
+                <Icon icon="copy" className="icon" />
+              </a>
            </Component>
          );
        }
--- a/src/renderers/DropDownButton.tsx
+++ b/src/renderers/DropDownButton.tsx
@ -6,13 +6,13 @@ import PopOver from '../components/PopOver';
 import cx from 'classnames';
 import {isVisible, noop} from '../utils/helper';
 import {filter} from '../utils/tpl';
+import {Icon} from '../components/icons';

 export interface DropDownButtonProps extends RendererProps {
  block?: boolean;
  size?: 'xs' | 'sm' | 'md' | 'lg';
  align?: 'left' | 'right';
  buttons?: Array<any>;
-  caretIcon?: string;
  iconOnly?: boolean;
  defaultIsOpened?: boolean;
  closeOnOutside?: boolean;
@ -30,9 +30,7 @@ export default class DropDownButton extends React.Component<
    isOpened: false
  };

-  static defaultProps = {
-    caretIcon: 'fa fa-angle-down'
-  };
+  static defaultProps = {};

  target: any;
  constructor(props: DropDownButtonProps) {
@ -48,7 +46,7 @@ export default class DropDownButton extends React.Component<
    if (this.props.defaultIsOpened) {
      this.setState({
        isOpened: true
-      })
+      });
    }
  }

@ -154,7 +152,6 @@ export default class DropDownButton extends React.Component<
      primary,
      className,
      classnames: cx,
-      caretIcon,
      align,
      iconOnly,
      icon,
@ -189,9 +186,17 @@ export default class DropDownButton extends React.Component<
            size ? `Button--${size}` : ''
          )}
        >
-          {icon ? <i className={cx(icon, 'm-r-xs')} /> : null}
+          {icon ? (
+            typeof icon === 'string' ? (
+              <i className={cx(icon, 'm-r-xs')} />
+            ) : (
+              icon
+            )
+          ) : null}
          {typeof label === 'string' ? filter(label, data) : label}
-          <i className={cx('DropDown-caret', caretIcon)} />
+          <span className={cx('DropDown-caret')}>
+            <Icon icon="caret" className="icon" />
+          </span>
        </button>

        {this.state.isOpened ? this.renderOuter() : null}
--- a/src/renderers/Form/Combo.tsx
+++ b/src/renderers/Form/Combo.tsx
@ -109,7 +109,7 @@ export default class ComboControl extends React.Component<ComboProps> {
    draggableTip: '可拖拽排序',
    addButtonText: '新增',
    canAccessSuperData: false,
-    addIcon: 'fa fa-plus',
+    addIcon: true,
    dragIcon: '',
    deleteIcon: '',
    tabsMode: false,
@ -493,7 +493,7 @@ export default class ComboControl extends React.Component<ComboProps> {
    if (minLength && (!Array.isArray(value) || value.length < minLength)) {
      return __(
        (messages && messages.minLengthValidateFailed) ||
-          '组合表单成员数量不够，低于设定的最小{{minLenth}}个，请添加更多的成员。',
+          '组合表单成员数量不够，低于设定的最小{{minLength}}个，请添加更多的成员。',
        {minLength}
      );
    } else if (maxLength && Array.isArray(value) && value.length > maxLength) {
@ -771,7 +771,11 @@ export default class ComboControl extends React.Component<ComboProps> {
                    'add-button',
                    {
                      type: 'dropdown-button',
-                      icon: addIcon,
+                      icon: addIcon ? (
+                        <Icon icon="plus" className="icon m-r-xs" />
+                      ) : (
+                        ''
+                      ),
                      label: __(addButtonText || '新增'),
                      level: 'info',
                      size: 'sm',
@ -793,7 +797,9 @@ export default class ComboControl extends React.Component<ComboProps> {
                    data-position="left"
                    data-tooltip={__('新增一条数据')}
                  >
-                    {addIcon ? <i className={cx('m-r-xs', addIcon)} /> : null}
+                    {addIcon ? (
+                      <Icon icon="plus" className="icon m-r-xs" />
+                    ) : null}
                    <span>{__(addButtonText || '新增')}</span>
                  </a>
                )
@ -1050,7 +1056,7 @@ export default class ComboControl extends React.Component<ComboProps> {
                        {dragIcon ? (
                          <i className={dragIcon} />
                        ) : (
-                          <Icon icon="combo-dragger" />
+                          <Icon icon="drag-bar" />
                        )}
                      </a>
                    </div>
@ -1121,7 +1127,6 @@ export default class ComboControl extends React.Component<ComboProps> {
                  'add-button',
                  {
                    type: 'dropdown-button',
-                    icon: addIcon,
                    label: __(addButtonText || '新增'),
                    level: 'info',
                    size: 'sm',
@ -1145,7 +1150,7 @@ export default class ComboControl extends React.Component<ComboProps> {
                  data-tooltip={__('新增一条数据')}
                >
                  {addIcon ? (
-                    <i className={cx('Button-icon', addIcon)} />
+                    <Icon icon="plus" className="icon m-r-xs" />
                  ) : null}
                  <span>{__(addButtonText || '新增')}</span>
                </button>
--- a/src/renderers/Form/Date.tsx
+++ b/src/renderers/Form/Date.tsx
@ -38,8 +38,7 @@ export default class DateControl extends React.PureComponent<
        step: 1
      }
    },
-    clearable: true,
-    iconClassName: 'fa fa-calendar'
+    clearable: true
  };

  componentWillMount() {
--- a/src/renderers/Form/Picker.tsx
+++ b/src/renderers/Form/Picker.tsx
@ -424,7 +424,9 @@ export default class PickerControl extends React.PureComponent<
                </a>
              ) : null}

-              <span onClick={this.open} className={cx('Picker-btn')} />
+              <span onClick={this.open} className={cx('Picker-btn')}>
+                <Icon icon="window-restore" className="icon" />
+              </span>
            </div>

            {render(
--- a/src/renderers/Form/SubForm.tsx
+++ b/src/renderers/Form/SubForm.tsx
@ -4,6 +4,7 @@ import cx from 'classnames';
 import omit from 'lodash/omit';
 import pick from 'lodash/pick';
 import {createObject} from '../../utils/helper';
+import {Icon} from '../../components/icons';

 export interface SubFormProps extends FormControlProps {
  placeholder?: string;
@ -210,7 +211,7 @@ export default class SubFormControl extends React.PureComponent<
        disabled={disabled}
        data-tooltip={__('新增一条数据')}
      >
-        <i className="fa fa-plus m-r-xs" />
+        <Icon icon="plus" className="icon m-r-xs" />
        <span>{__('新增')}</span>
      </button>
    ];
--- a/src/renderers/Form/Table.tsx
+++ b/src/renderers/Form/Table.tsx
@ -11,6 +11,7 @@ import {dataMapping} from '../../utils/tpl-builtin';
 import findIndex from 'lodash/findIndex';
 import memoize from 'lodash/memoize';
 import {SimpleMap} from '../../utils/SimpleMap';
+import {Icon} from '../../components/icons';

 export interface TableProps extends FormControlProps {
  placeholder?: string;
@ -48,11 +49,11 @@ export default class FormTable extends React.Component<TableProps, TableState> {
  static defaultProps = {
    placeholder: '空',
    scaffold: {},
-    addBtnIcon: 'fa fa-plus',
-    updateBtnIcon: 'fa fa-pencil',
-    deleteBtnIcon: 'fa fa-minus',
-    confirmBtnIcon: 'fa fa-check',
-    cancelBtnIcon: 'fa fa-times',
+    addBtnIcon: 'plus',
+    updateBtnIcon: 'pencil',
+    deleteBtnIcon: 'minus',
+    confirmBtnIcon: 'check',
+    cancelBtnIcon: 'close',
    valueField: ''
  };

@ -107,7 +108,7 @@ export default class FormTable extends React.Component<TableProps, TableState> {

    if (minLength && (!Array.isArray(value) || value.length < minLength)) {
      return __(
-        '组合表单成员数量不够，低于设定的最小{{minLenth}}个，请添加更多的成员。',
+        '组合表单成员数量不够，低于设定的最小{{minLength}}个，请添加更多的成员。',
        {minLength}
      );
    } else if (maxLength && Array.isArray(value) && value.length > maxLength) {
@ -376,7 +377,9 @@ export default class FormTable extends React.Component<TableProps, TableState> {
              onClick={this.addItem.bind(this, rowIndex, undefined)}
            >
              {props.addBtnLabel ? <span>{props.addBtnLabel}</span> : null}
-              {props.addBtnIcon ? <i className={props.addBtnIcon} /> : null}
+              {props.addBtnIcon ? (
+                <Icon icon={props.addBtnIcon} className="icon" />
+              ) : null}
            </Button>
          )
      });
@ -428,7 +431,7 @@ export default class FormTable extends React.Component<TableProps, TableState> {
                <span>{props.updateBtnLabel}</span>
              ) : null}
              {props.updateBtnIcon ? (
-                <i className={props.updateBtnIcon} />
+                <Icon icon={props.updateBtnIcon} className="icon" />
              ) : null}
            </Button>
          )
@ -452,7 +455,7 @@ export default class FormTable extends React.Component<TableProps, TableState> {
                <span>{props.confirmBtnLabel}</span>
              ) : null}
              {props.confirmBtnIcon ? (
-                <i className={props.confirmBtnIcon} />
+                <Icon icon={props.confirmBtnIcon} className="icon" />
              ) : null}
            </Button>
          ) : null
@ -476,7 +479,7 @@ export default class FormTable extends React.Component<TableProps, TableState> {
                <span>{props.cancelBtnLabel}</span>
              ) : null}
              {props.cancelBtnIcon ? (
-                <i className={props.cancelBtnIcon} />
+                <Icon icon={props.cancelBtnIcon} className="icon" />
              ) : null}
            </Button>
          ) : null
@ -510,7 +513,7 @@ export default class FormTable extends React.Component<TableProps, TableState> {
                <span>{props.deleteBtnLabel}</span>
              ) : null}
              {props.deleteBtnIcon ? (
-                <i className={props.deleteBtnIcon} />
+                <Icon icon={props.deleteBtnIcon} className="icon" />
              ) : null}
            </Button>
          )
--- a/src/renderers/Form/Text.tsx
+++ b/src/renderers/Form/Text.tsx
@ -12,6 +12,7 @@ import {Icon} from '../../components/icons';
 import Input from '../../components/Input';
 import {autobind, createObject, setVariable} from '../../utils/helper';
 import {isEffectiveApi} from '../../utils/api';
+import Spinner from '../../components/Spinner';

 // declare function matchSorter(items:Array<any>, input:any, options:any): Array<any>;

@ -74,8 +75,7 @@ export default class TextControl extends React.PureComponent<
    labelField: 'label',
    valueField: 'value',
    placeholder: '',
-    allowInputText: true,
-    spinnerClassName: 'fa fa-spinner fa-spin fa-1x fa-fw'
+    allowInputText: true
  };

  componentWillReceiveProps(nextProps: TextProps) {
@ -415,7 +415,6 @@ export default class TextControl extends React.PureComponent<
      labelField,
      valueField,
      multiple,
-      spinnerClassName,
      translate: __
    } = this.props;

@ -523,7 +522,11 @@ export default class TextControl extends React.PureComponent<
                </a>
              ) : null}
              {loading ? (
-                <i className={cx(`TextControl-spinner`, spinnerClassName)} />
+                <Spinner
+                  show
+                  icon="reload"
+                  spinnerClassName={cx('TextControl-spinner')}
+                />
              ) : null}
              {isOpen && filtedOptions.length ? (
                <div className={cx('TextControl-sugs')}>
--- a/src/renderers/Form/TreeSelect.tsx
+++ b/src/renderers/Form/TreeSelect.tsx
@ -12,6 +12,7 @@ import debouce from 'lodash/debounce';
 import find from 'lodash/find';
 import {Api} from '../../types';
 import {isEffectiveApi} from '../../utils/api';
+import Spinner from '../../components/Spinner';

 export interface TreeSelectProps extends OptionsControlProps {
  placeholder?: any;
@ -39,8 +40,7 @@ export default class TreeSelectControl extends React.Component<
    joinValues: true,
    extractValue: false,
    delimiter: ',',
-    resetValue: '',
-    spinnerClassName: 'fa fa-spinner fa-spin fa-1x fa-fw'
+    resetValue: ''
  };

  container: React.RefObject<HTMLDivElement>;
@ -456,7 +456,6 @@ export default class TreeSelectControl extends React.Component<
    const {
      className,
      disabled,
-      spinnerClassName,
      inline,
      loading,
      multiple,
@ -521,9 +520,11 @@ export default class TreeSelectControl extends React.Component<
            ) : null}

            {loading ? (
-              <span className={cx('TreeSelect-spinner')}>
-                <i className={spinnerClassName} />
-              </span>
+              <Spinner
+                show
+                icon="reload"
+                spinnerClassName={cx('TreeSelect-spinner')}
+              />
            ) : null}
            <span className={cx('TreeSelect-arrow')} />
          </div>
--- a/src/renderers/Form/index.tsx
+++ b/src/renderers/Form/index.tsx
@ -465,7 +465,7 @@ export default class Form extends React.Component<FormProps, object> {

    return store.submit(
      fn,
-      this.hooks['validate' || []],
+      this.hooks['validate'] || [],
      __(messages && messages.validateFailed)
    );
  }
--- a/src/renderers/List.tsx
+++ b/src/renderers/List.tsx
@ -22,6 +22,7 @@ import PopOver from './PopOver';
 import Sortable from 'sortablejs';
 import {TableCell} from './Table';
 import Copyable from './Copyable';
+import {Icon} from '../components/icons';

 export interface Column {
  type: string;
@ -498,7 +499,7 @@ export default class List extends React.Component<ListProps, object> {
                className={cx('Button Button--xs Button--success m-l-sm')}
                onClick={this.handleSave}
              >
-                <i className="fa fa-check m-r-xs" />
+                <Icon icon="check" className="icon m-r-xs" />
                提交
              </button>
              <button
@ -506,7 +507,7 @@ export default class List extends React.Component<ListProps, object> {
                className={cx('Button Button--xs Button--danger m-l-sm')}
                onClick={this.reset}
              >
-                <i className="fa fa-times m-r-xs" />
+                <Icon icon="close" className="icon m-r-xs" />
                放弃
              </button>
            </span>
@ -518,7 +519,7 @@ export default class List extends React.Component<ListProps, object> {
                className={cx('Button Button--xs Button--success m-l-sm')}
                onClick={this.handleSaveOrder}
              >
-                <i className="fa fa-check m-r-xs" />
+                <Icon icon="check" className="icon m-r-xs" />
                提交
              </button>
              <button
@ -526,7 +527,7 @@ export default class List extends React.Component<ListProps, object> {
                className={cx('Button Button--xs Button--danger m-l-sm')}
                onClick={this.reset}
              >
-                <i className="fa fa-times m-r-xs" />
+                <Icon icon="close" className="icon m-r-xs" />
                放弃
              </button>
            </span>
@ -695,7 +696,7 @@ export default class List extends React.Component<ListProps, object> {
          store.dragging && store.clear();
        }}
      >
-        <i className="fa fa-exchange" />
+        <Icon icon="exchange" className="icon r90" />
      </Button>
    );
  }
@ -893,7 +894,7 @@ export class ListItem extends React.Component<ListItemProps> {
    if (dragging) {
      return (
        <div className={cx('ListItem-dragBtn')}>
-          <i className="glyphicon glyphicon-sort" />
+          <Icon icon="drag-bar" />
        </div>
      );
    } else if (selectable && !hideCheckToggler) {
--- a/src/renderers/Nav.tsx
+++ b/src/renderers/Nav.tsx
@ -11,6 +11,7 @@ import {isApiOutdated, isEffectiveApi} from '../utils/api';
 import {ScopedContext, IScopedContext} from '../Scoped';
 import {Api} from '../types';
 import {ClassNamesFn, themeable} from '../theme';
+import {Icon} from '../components/icons';

 export interface Link {
  className?: string;
@ -44,9 +45,7 @@ export class Navigation extends React.Component<
  NavigationProps,
  NavigationState
 > {
-  static defaultProps: Partial<NavigationProps> = {
-    togglerClassName: 'fa fa-angle-down'
-  };
+  static defaultProps: Partial<NavigationProps> = {};

  mounted: boolean = true;
  constructor(props: NavigationProps) {
@ -280,10 +279,12 @@ export class Navigation extends React.Component<
        </a>

        {link.children && link.children.length ? (
-          <i
+          <span
            onClick={() => this.toggleLink(link)}
            className={cx('Nav-itemToggler', togglerClassName)}
-          />
+          >
+            <Icon icon="caret" className="icon" />
+          </span>
        ) : null}

        {link.children && link.children.length ? (
--- a/src/renderers/Pagination.tsx
+++ b/src/renderers/Pagination.tsx
@ -1,6 +1,7 @@
 import React from 'react';
 import {Renderer, RendererProps} from '../factory';
 import {autobind} from '../utils/helper';
+import {Icon} from '../components/icons';

 export interface PaginationProps extends RendererProps {
  activePage: number;
@ -48,7 +49,7 @@ export default class Pagination extends React.Component<
      <ul className={cx('Pagination', 'Pagination--sm')}>
        <li
          className={cx({
-            disabled: activePage < 2
+            'is-disabled': activePage < 2
          })}
          onClick={
            activePage < 2
@ -57,12 +58,12 @@ export default class Pagination extends React.Component<
          }
        >
          <a>
-            <i className="fa fa-chevron-left" />
+            <Icon icon="left-arrow" className="icon" />
          </a>
        </li>
        <li
          className={cx({
-            disabled: !hasNext
+            'is-disabled': !hasNext
          })}
          onClick={
            !hasNext
@ -71,7 +72,7 @@ export default class Pagination extends React.Component<
          }
        >
          <a>
-            <i className="fa fa-chevron-right" />
+            <Icon icon="right-arrow" className="icon" />
          </a>
        </li>
      </ul>
@ -133,7 +134,7 @@ export default class Pagination extends React.Component<
          onClick={() => onPageChange(page)}
          key={page}
          className={cx({
-            active: page === activePage
+            'is-active': page === activePage
          })}
        >
          <a role="button">{page}</a>
@ -155,7 +156,7 @@ export default class Pagination extends React.Component<
          onClick={() => onPageChange(1)}
          key={1}
          className={cx({
-            active: 1 === activePage
+            'is-active': 1 === activePage
          })}
        >
          <a role="button">{1}</a>
@ -183,7 +184,7 @@ export default class Pagination extends React.Component<
          onClick={() => onPageChange(items)}
          key={items}
          className={cx({
-            active: items === activePage
+            'is-active': items === activePage
          })}
        >
          <a role="button">{items}</a>
@ -194,7 +195,7 @@ export default class Pagination extends React.Component<
    pageButtons.unshift(
      <li
        className={cx('Pagination-prev', {
-          disabled: activePage === 1
+          'is-disabled': activePage === 1
        })}
        onClick={
          activePage === 1
@ -203,14 +204,16 @@ export default class Pagination extends React.Component<
        }
        key="prev"
      >
-        <span />
+        <span>
+          <Icon icon="left-arrow" className="icon" />
+        </span>
      </li>
    );

    pageButtons.push(
      <li
        className={cx('Pagination-next', {
-          disabled: activePage === items
+          'is-disabled': activePage === items
        })}
        onClick={
          activePage === items
@ -219,7 +222,9 @@ export default class Pagination extends React.Component<
        }
        key="next"
      >
-        <span />
+        <span>
+          <Icon icon="right-arrow" className="icon" />
+        </span>
      </li>
    );

--- a/src/renderers/PopOver.tsx
+++ b/src/renderers/PopOver.tsx
@ -11,6 +11,7 @@ import hoistNonReactStatic from 'hoist-non-react-statics';
 import {RootCloseWrapper} from 'react-overlays';
 import PopOver, {Offset} from '../components/PopOver';
 import Overlay from '../components/Overlay';
+import {Icon} from '../components/icons';

 export interface PopOverConfig {
  saveImmediately?: boolean;
@ -212,11 +213,13 @@ export const HocPopOver = (config: Partial<PopOverConfig> = {}) => (
            noHoc
            ref={this.targetRef}
          />
-          <i
+          <span
            key="popover-btn"
-            className={cx('Field-popOverBtn fa fa-search-plus')}
+            className={cx('Field-popOverBtn')}
            onClick={this.openPopOver}
-          />
+          >
+            <Icon icon="zoom-in" className="icon" />
+          </span>
          {this.state.isOpened ? this.renderPopOver() : null}
        </Component>
      );
--- a/src/renderers/QRCode.tsx
+++ b/src/renderers/QRCode.tsx
@ -7,6 +7,7 @@ import {filter} from '../utils/tpl';
 import QrCode from 'qrcode.react';

 export interface QRCodeProps extends FormControlProps {
+  qrcodeClassName?: string;
  codeSize?: number;
  backgroundColor?: string;
  foregroundColor?: string;
@ -17,6 +18,7 @@ export interface QRCodeProps extends FormControlProps {
 export default class QRCode extends React.Component<QRCodeProps, any> {
  static defaultProps: Partial<QRCodeProps> = {
    codeSize: 128,
+    qrcodeClassName: '',
    backgroundColor: '#fff',
    foregroundColor: '#000',
    level: 'L',
@ -26,6 +28,7 @@ export default class QRCode extends React.Component<QRCodeProps, any> {
  render() {
    const {
      className,
+      qrcodeClassName,
      codeSize,
      backgroundColor,
      foregroundColor,
@ -36,18 +39,27 @@ export default class QRCode extends React.Component<QRCodeProps, any> {
      classPrefix: ns
    } = this.props;

+    const finalValue = filter(value, data, '| raw');
+
    return (
      <div className={cx(`${ns}QrCode`, className)}>
-        {value ? (
+        {!finalValue ? (
+          <span className={`${ns}QrCode--placeholder`}>{placeholder}</span>
+        ) : finalValue.length > 2953 ? (
+          // https://github.com/zpao/qrcode.react/issues/69
+          <span className="text-danger">
+            二维码值过长，请设置2953个字符以下的文本
+          </span>
+        ) : (
          <QrCode
-            value={filter(value, data, '| raw')}
+            className={qrcodeClassName}
+            value={finalValue}
+            renderAs={'svg'}
            size={codeSize}
            bgColor={backgroundColor}
            fgColor={foregroundColor}
            level={level || 'L'}
          />
-        ) : (
-          <span className={`${ns}QrCode--placeholder`}>{placeholder}</span>
        )}
      </div>
    );
--- a/src/renderers/QuickEdit.tsx
+++ b/src/renderers/QuickEdit.tsx
@ -17,6 +17,7 @@ import keycode from 'keycode';
 import matches from 'dom-helpers/query/matches';
 import Overlay from '../components/Overlay';
 import PopOver from '../components/PopOver';
+import {Icon} from '../components/icons';

 export interface QuickEditConfig {}

@ -491,11 +492,13 @@ export const HocQuickEdit = (config: Partial<QuickEditConfig> = {}) => (
            onKeyUp={this.handleKeyUp}
          >
            <Component {...this.props} wrapperComponent={''} noHoc />
-            <i
+            <span
              key="edit-btn"
-              className={cx('Field-quickEditBtn fa fa-edit')}
+              className={cx('Field-quickEditBtn')}
              onClick={this.openQuickEdit}
-            />
+            >
+              <Icon icon="pencil" className="icon" />
+            </span>
            {this.state.isOpened ? this.renderPopOver() : null}
          </Component>
        );
--- a/src/renderers/Remark.tsx
+++ b/src/renderers/Remark.tsx
@ -5,6 +5,7 @@ import cx from 'classnames';
 import TooltipWrapper from '../components/TooltipWrapper';
 import {filter} from '../utils/tpl';
 import {themeable} from '../theme';
+import {Icon} from '../components/icons';

 export function filterContents(
  tooltip:
@ -43,7 +44,7 @@ type RemarkProps = {
 class Remark extends React.Component<RemarkProps> {
  static propsList: Array<string> = [];
  static defaultProps = {
-    icon: 'fa fa-question-circle',
+    icon: '',
    trigger: ['hover', 'focus']
  };

@ -62,6 +63,8 @@ class Remark extends React.Component<RemarkProps> {
      data
    } = this.props;

+    const finalIcon = (tooltip && tooltip.icon) || icon;
+
    return (
      <div
        className={cx(
@ -79,7 +82,11 @@ class Remark extends React.Component<RemarkProps> {
          container={container}
          delay={tooltip && tooltip.delay}
        >
-          <i className={cx('Remark-icon', (tooltip && tooltip.icon) || icon)} />
+          {finalIcon ? (
+            <i className={cx('Remark-icon', finalIcon)} />
+          ) : (
+            <Icon icon="question" className="icon" />
+          )}
        </TooltipWrapper>
      </div>
    );
--- a/src/renderers/Status.tsx
+++ b/src/renderers/Status.tsx
@ -4,6 +4,7 @@ import {ServiceStore, IServiceStore} from '../store/service';
 import {Api, SchemaNode, PlainObject} from '../types';
 import {filter} from '../utils/tpl';
 import cx from 'classnames';
+import {Icon} from '../components/icons';

 export interface StatusProps extends RendererProps {
  className?: string;
@ -15,8 +16,8 @@ export class StatusField extends React.Component<StatusProps, object> {
  static defaultProps: Partial<StatusProps> = {
    placeholder: '-',
    map: {
-      0: 'fa fa-times text-danger',
-      1: 'fa fa-check text-success'
+      0: 'svg-success',
+      1: 'svg-fail'
    },
    labelMap: {
      // 0: '失败',
@ -47,10 +48,25 @@ export class StatusField extends React.Component<StatusProps, object> {
      }

      wrapClassName = `StatusField--${value}`;
-      viewValue = (
-        <i className={cx('StatusField-icon', map[value])} key="icon" />
+      let itemClassName = map[value];
+      let svgIcon: string = '';
+
+      itemClassName = itemClassName.replace(
+        /\bsvg-(.*)\b/,
+        (_: string, icon: string) => {
+          svgIcon = icon;
+          return 'icon';
+        }
      );

+      if (svgIcon) {
+        viewValue = (
+          <Icon icon={svgIcon} className={cx('Status-icon', itemClassName)} />
+        );
+      } else {
+        viewValue = <i className={cx('Status-icon', map[value])} key="icon" />;
+      }
+
      if (labelMap && labelMap[value]) {
        viewValue = [
          viewValue,
--- a/src/renderers/Table.tsx
+++ b/src/renderers/Table.tsx
@ -36,6 +36,7 @@ import {resizeSensor} from '../utils/resize-sensor';
 import find from 'lodash/find';
 import Overlay from '../components/Overlay';
 import PopOverable from './PopOver';
+import {Icon} from '../components/icons';

 export interface Column {
  type: string;
@ -158,8 +159,7 @@ export default class Table extends React.Component<TableProps, object> {
    primaryField: 'id',
    itemCheckableOn: '',
    itemDraggableOn: '',
-    hideCheckToggler: false,
-    dragIcon: 'glyphicon glyphicon-sort'
+    hideCheckToggler: false
  };

  table?: HTMLTableElement;
@ -983,7 +983,7 @@ export default class Table extends React.Component<TableProps, object> {
                className={cx('Button Button--xs Button--success m-l-sm')}
                onClick={this.handleSave}
              >
-                <i className="fa fa-check m-r-xs" />
+                <Icon icon="check" className="icon m-r-xs" />
                {__('提交')}
              </button>
              <button
@ -991,7 +991,7 @@ export default class Table extends React.Component<TableProps, object> {
                className={cx('Button Button--xs Button--danger m-l-sm')}
                onClick={this.reset}
              >
-                <i className="fa fa-times m-r-xs" />
+                <Icon icon="close" className="icon m-r-xs" />
                {__('放弃')}
              </button>
            </span>
@ -1005,7 +1005,7 @@ export default class Table extends React.Component<TableProps, object> {
                className={cx('Button Button--xs Button--success m-l-sm')}
                onClick={this.handleSaveOrder}
              >
-                <i className="fa fa-check m-r-xs" />
+                <Icon icon="check" className="icon m-r-xs" />
                {__('提交')}
              </button>
              <button
@ -1013,7 +1013,7 @@ export default class Table extends React.Component<TableProps, object> {
                className={cx('Button Button--xs Button--danger m-l-sm')}
                onClick={this.reset}
              >
-                <i className="fa fa-times m-r-xs" />
+                <Icon icon="close" className="icon m-r-xs" />
                {__('放弃')}
              </button>
            </span>
@ -1237,7 +1237,7 @@ export default class Table extends React.Component<TableProps, object> {
    } else if (column.type === '__dragme') {
      return (
        <td key={props.key} className={cx(column.pristine.className)}>
-          {item.draggable ? <i className="glyphicon glyphicon-sort" /> : null}
+          {item.draggable ? <Icon icon="drag-bar" className="icon" /> : null}
        </td>
      );
    } else if (column.type === '__expandme') {
@ -1281,7 +1281,7 @@ export default class Table extends React.Component<TableProps, object> {
          onDragStart={this.handleDragStart}
          className={cx('Table-dragBtn')}
        >
-          <i className="glyphicon glyphicon-sort" />
+          <Icon icon="drag-bar" className="icon" />
        </a>
      );
    }
@ -1487,15 +1487,15 @@ export default class Table extends React.Component<TableProps, object> {
        classPrefix={ns}
        key="columns-toggable"
        size="sm"
-        label={<i className="glyphicon glyphicon-th icon-th" />}
+        label={<Icon icon="columns" className="icon" />}
      >
        {store.toggableColumns.map(column => (
-          <li className={cx('DropDown-menuItem')} key={column.index}>
-            <Checkbox
-              classPrefix={ns}
-              checked={column.toggled}
-              onChange={column.toggleToggle}
-            >
+          <li
+            className={cx('DropDown-menuItem')}
+            key={column.index}
+            onClick={column.toggleToggle}
+          >
+            <Checkbox size="sm" classPrefix={ns} checked={column.toggled}>
              {column.label ? render('tpl', column.label) : null}
            </Checkbox>
          </li>
@ -1505,14 +1505,7 @@ export default class Table extends React.Component<TableProps, object> {
  }

  renderDragToggler() {
-    const {
-      store,
-      env,
-      draggable,
-      classPrefix: ns,
-      dragIcon,
-      translate: __
-    } = this.props;
+    const {store, env, draggable, classPrefix: ns, translate: __} = this.props;

    if (!draggable || store.isNested) {
      return null;
@ -1536,7 +1529,7 @@ export default class Table extends React.Component<TableProps, object> {
        }}
        iconOnly
      >
-        <i className={dragIcon} />
+        <Icon icon="exchange" className="icon" />
      </Button>
    );
  }
@ -2318,7 +2311,9 @@ export class HeadCellSearchDropDown extends React.Component<

    return (
      <span className={cx(`${ns}TableCell-searchBtn`)}>
-        <i className="fa fa-search" onClick={this.open} />
+        <span onClick={this.open}>
+          <Icon icon="search" className="icon" />
+        </span>
        {this.state.isOpened ? (
          <Overlay
            container={popOverContainer || (() => findDOMNode(this))}
@ -2517,7 +2512,9 @@ export class HeadCellFilterDropDown extends React.Component<

    return (
      <span className={cx(`${ns}TableCell-filterBtn`)}>
-        <i className="fa fa-filter" onClick={this.open} />
+        <span onClick={this.open}>
+          <Icon icon="column-filter" className="icon" />
+        </span>
        {isOpened ? (
          <Overlay
            container={popOverContainer || (() => findDOMNode(this))}
--- a/src/renderers/Tasks.tsx
+++ b/src/renderers/Tasks.tsx
@ -7,6 +7,7 @@ import {Api, ApiObject, Payload} from '../types';
 import update from 'react-addons-update';
 import {isEffectiveApi, isApiOutdated} from '../utils/api';
 import {ScopedContext, IScopedContext} from '../Scoped';
+import Spinner from '../components/Spinner';

 export interface TaskProps extends RendererProps {
  className?: string;
@ -297,7 +298,11 @@ export default class Task extends React.Component<TaskProps, TaskState> {
                  <td>{item.label}</td>
                  <td>
                    {item.status == loadingStatusCode ? (
-                      <i className="fa fa-spinner fa-spin fa-2x fa-fw" />
+                      <Spinner
+                        show
+                        icon="reload"
+                        spinnerClassName={cx('Task-spinner')}
+                      />
                    ) : item.status == canRetryStatusCode ? (
                      <a
                        onClick={() => this.submitTask(item, key, true)}
--- a/src/theme.tsx
+++ b/src/theme.tsx
@ -108,6 +108,7 @@ export function getTheme(theme: string): ThemeInstance {
 }

 export interface ThemeProps {
+  className?: string;
  classPrefix: string;
  classnames: ClassNamesFn;
 }
				`@ -1 +0,0 @@`
				<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1586501480188" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1509" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M469.333333 256a85.333333 85.333333 0 1 1-85.333333-85.333333 85.333333 85.333333 0 0 1 85.333333 85.333333z m-85.333333 170.666667a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m0 256a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m256-341.333334a85.333333 85.333333 0 1 0-85.333333-85.333333 85.333333 85.333333 0 0 0 85.333333 85.333333z m0 85.333334a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m0 256a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z" p-id="1510" data-spm-anchor-id="a313x.7781069.0.i6" class="selected" fill="#999999"></path></svg>