From 6ef0c23f370e316bbdb132fd69523ca51a2eef89 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=B8=85?= <qixian.cs@outlook.com>
Date: Tue, 18 Jun 2019 10:46:55 +0800
Subject: [PATCH]  fix all eslint-error (#28)

* run eslint fix

* import sorted

* fix some warning

* fix all eslint-error

* fix all eslint-error

* fix all eslint error

* remove .eslintcache
---
 .eslintignore                                 |   4 +-
 .eslintrc.js                                  |  41 +--
 .gitignore                                    |   4 +-
 .prettierrc                                   |  14 -
 .prettierrc.js                                |   5 +
 .stylelintrc.js                               |   5 +
 .stylelintrc.json                             |  13 -
 AccountCenter/package.json                    |   9 +-
 AccountCenter/src/_mock.ts                    |  67 +---
 .../src/components/Applications/index.tsx     |   7 +-
 .../components/ArticleListContent/index.tsx   |   2 +-
 .../src/components/Articles/index.tsx         |   7 +-
 .../src/components/AvatarList/index.tsx       |  11 +-
 .../src/components/Projects/index.tsx         |   9 +-
 AccountCenter/src/data.d.ts                   |  20 +-
 AccountCenter/src/index.tsx                   |  27 +-
 AccountCenter/src/model.ts                    |  12 +-
 AccountCenter/src/service.ts                  |   2 +-
 AccountSettings/package.json                  |  11 +-
 .../src/components/GeographicView.tsx         |  34 +-
 AccountSettings/src/components/PhoneView.tsx  |  11 +-
 AccountSettings/src/components/base.tsx       |  17 +-
 AccountSettings/src/components/binding.tsx    |   4 +-
 .../src/components/notification.tsx           |   3 +-
 AccountSettings/src/components/security.tsx   |   3 +-
 AccountSettings/src/data.d.ts                 |  20 +-
 AccountSettings/src/index.tsx                 |  12 +-
 AccountSettings/src/model.ts                  |  11 +-
 DashboardAnalysis/package.json                |  13 +-
 DashboardAnalysis/src/_mock.ts                |   8 +-
 .../src/components/Charts/Bar/index.tsx       |  54 ++--
 .../src/components/Charts/ChartCard/index.tsx |  11 +-
 .../src/components/Charts/Field/index.tsx     |   5 +-
 .../src/components/Charts/Gauge/index.tsx     | 272 ++++++++--------
 .../src/components/Charts/MiniArea/index.tsx  | 209 ++++++-------
 .../src/components/Charts/MiniBar/index.tsx   |  87 +++---
 .../components/Charts/MiniProgress/index.tsx  |  42 ++-
 .../src/components/Charts/Pie/index.tsx       |  95 +++---
 .../src/components/Charts/TagCloud/index.tsx  |  52 ++--
 .../components/Charts/TimelineChart/index.tsx | 205 ++++++------
 .../src/components/Charts/WaterWave/index.tsx |  16 +-
 .../src/components/Charts/autoHeight.tsx      |  26 +-
 .../src/components/Charts/index.tsx           |   6 +-
 .../src/components/IntroduceRow.tsx           | 293 +++++++++---------
 .../src/components/NumberInfo/index.tsx       |   3 +-
 .../src/components/OfflineData.tsx            |  76 +++--
 .../src/components/ProportionSales.tsx        | 117 ++++---
 .../src/components/SalesCard.tsx              |  15 +-
 .../src/components/TopSearch.tsx              |  19 +-
 .../src/components/Trend/index.tsx            |   6 +-
 DashboardAnalysis/src/data.d.ts               |  57 +---
 DashboardAnalysis/src/index.tsx               |  24 +-
 DashboardAnalysis/src/model.tsx               |  16 +-
 DashboardAnalysis/src/utils/Yuan.tsx          |   4 +-
 DashboardAnalysis/src/utils/utils.ts          |   2 +-
 DashboardMonitor/package.json                 |  16 +-
 .../src/components/ActiveChart/index.tsx      |  12 +-
 .../src/components/Charts/Gauge/index.tsx     | 272 ++++++++--------
 .../src/components/Charts/MiniArea/index.tsx  | 210 ++++++-------
 .../src/components/Charts/Pie/index.tsx       |  98 +++---
 .../src/components/Charts/TagCloud/index.tsx  |  52 ++--
 .../src/components/Charts/WaterWave/index.tsx |  16 +-
 .../src/components/Charts/autoHeight.tsx      |  25 +-
 .../src/components/Charts/index.tsx           |   7 +-
 DashboardMonitor/src/data.d.ts                |   2 +-
 DashboardMonitor/src/index.tsx                |  19 +-
 DashboardMonitor/src/model.ts                 |  18 +-
 DashboardWorkplace/package.json               |   6 +-
 .../components/EditableLinkGroup/index.tsx    |   1 +
 .../src/components/Radar/autoHeight.tsx       |  26 +-
 .../src/components/Radar/index.tsx            |  35 ++-
 DashboardWorkplace/src/data.d.ts              |  28 +-
 DashboardWorkplace/src/index.tsx              |  35 +--
 DashboardWorkplace/src/model.ts               |  12 +-
 EditorFlow/README.md                          |   1 +
 EditorFlow/package.json                       |   9 +-
 .../EditorContextMenu/FlowContextMenu.tsx     |  59 ++--
 .../components/EditorContextMenu/MenuItem.tsx |   7 +-
 .../EditorContextMenu/MindContextMenu.tsx     |  35 +--
 .../components/EditorContextMenu/index.tsx    |   2 +-
 .../EditorDetailPanel/DetailForm.tsx          |  26 +-
 .../EditorDetailPanel/FlowDetailPanel.tsx     |  45 ++-
 .../EditorDetailPanel/MindDetailPanel.tsx     |  27 +-
 .../components/EditorDetailPanel/index.tsx    |   2 +-
 .../EditorItemPanel/FlowItemPanel.tsx         |  99 +++---
 .../EditorItemPanel/KoniItemPanel.tsx         |  97 +++---
 .../src/components/EditorMinimap/index.tsx    |  14 +-
 .../components/EditorToolbar/FlowToolbar.tsx  |  48 ++-
 .../components/EditorToolbar/MindToolbar.tsx  |  38 ++-
 .../EditorToolbar/ToolbarButton.tsx           |   7 +-
 .../src/components/EditorToolbar/index.tsx    |   2 +-
 EditorFlow/src/index.tsx                      |  73 +++--
 EditorKoni/README.md                          |   1 +
 EditorKoni/package.json                       |  12 +-
 .../EditorContextMenu/FlowContextMenu.tsx     |  59 ++--
 .../components/EditorContextMenu/MenuItem.tsx |   7 +-
 .../EditorContextMenu/MindContextMenu.tsx     |  35 +--
 .../components/EditorContextMenu/index.tsx    |   2 +-
 .../EditorDetailPanel/DetailForm.tsx          |  26 +-
 .../EditorDetailPanel/FlowDetailPanel.tsx     |  45 ++-
 .../EditorDetailPanel/MindDetailPanel.tsx     |  27 +-
 .../components/EditorDetailPanel/index.tsx    |   2 +-
 .../EditorItemPanel/FlowItemPanel.tsx         |  99 +++---
 .../EditorItemPanel/KoniItemPanel.tsx         |  97 +++---
 .../src/components/EditorMinimap/index.tsx    |  14 +-
 .../components/EditorToolbar/FlowToolbar.tsx  |  48 ++-
 .../components/EditorToolbar/MindToolbar.tsx  |  38 ++-
 .../EditorToolbar/ToolbarButton.tsx           |   7 +-
 .../src/components/EditorToolbar/index.tsx    |   2 +-
 EditorKoni/src/index.tsx                      |  73 +++--
 EditorMind/README.md                          |   1 +
 EditorMind/package.json                       |   7 +-
 .../EditorContextMenu/FlowContextMenu.tsx     |  59 ++--
 .../components/EditorContextMenu/MenuItem.tsx |   7 +-
 .../EditorContextMenu/MindContextMenu.tsx     |  35 +--
 .../components/EditorContextMenu/index.tsx    |   2 +-
 .../EditorDetailPanel/DetailForm.tsx          |  26 +-
 .../EditorDetailPanel/FlowDetailPanel.tsx     |  45 ++-
 .../EditorDetailPanel/MindDetailPanel.tsx     |  27 +-
 .../components/EditorDetailPanel/index.tsx    |   2 +-
 .../EditorItemPanel/FlowItemPanel.tsx         |  99 +++---
 .../EditorItemPanel/KoniItemPanel.tsx         |  97 +++---
 .../src/components/EditorMinimap/index.tsx    |  14 +-
 .../components/EditorToolbar/FlowToolbar.tsx  |  48 ++-
 .../components/EditorToolbar/MindToolbar.tsx  |  38 ++-
 .../EditorToolbar/ToolbarButton.tsx           |   7 +-
 .../src/components/EditorToolbar/index.tsx    |   2 +-
 EditorMind/src/index.tsx                      |  65 ++--
 Exception403/package.json                     |   5 +-
 .../src/components/Exception/index.tsx        |  12 +-
 Exception403/src/index.tsx                    |   2 +-
 Exception404/package.json                     |   8 +-
 .../src/components/Exception/index.tsx        |  12 +-
 Exception404/src/index.tsx                    |   2 +-
 Exception500/package.json                     |   8 +-
 .../src/components/Exception/index.tsx        |  12 +-
 Exception500/src/index.tsx                    |   2 +-
 FormAdvancedForm/package.json                 |   4 +
 .../src/components/FooterToolbar/index.tsx    |   6 +-
 FormAdvancedForm/src/components/TableForm.tsx | 109 ++++---
 FormAdvancedForm/src/index.tsx                |  23 +-
 FormAdvancedForm/src/model.ts                 |  10 +-
 FormBasicForm/package.json                    |   5 +-
 FormBasicForm/src/index.tsx                   |  21 +-
 FormBasicForm/src/model.ts                    |  10 +-
 FormStepForm/package.json                     |  11 +-
 FormStepForm/src/components/Result/index.tsx  |   2 +-
 FormStepForm/src/components/Step1/index.tsx   | 201 ++++++------
 FormStepForm/src/components/Step2/index.tsx   | 175 ++++++-----
 FormStepForm/src/components/Step3/index.tsx   | 158 +++++-----
 FormStepForm/src/index.tsx                    |  11 +-
 FormStepForm/src/model.ts                     |  18 +-
 ListBasicList/package.json                    |   3 +
 ListBasicList/src/Result/index.tsx            |   2 +-
 ListBasicList/src/_mock.ts                    |   8 +-
 ListBasicList/src/index.tsx                   |  46 +--
 ListBasicList/src/model.ts                    |  18 +-
 ListBasicList/src/service.ts                  |   2 +-
 ListCardList/package.json                     |   6 +-
 ListCardList/src/_mock.ts                     |   4 +-
 ListCardList/src/index.tsx                    |  67 ++--
 ListCardList/src/model.ts                     |  16 +-
 ListCardList/src/service.ts                   |   2 +-
 ListSearch/package.json                       |   5 +-
 ListSearch/src/index.tsx                      |   6 +-
 ListSearchApplications/package.json           |   5 +-
 ListSearchApplications/src/_mock.ts           |   4 +-
 .../src/components/TagSelect/index.tsx        |   8 +-
 ListSearchApplications/src/index.tsx          |  21 +-
 ListSearchApplications/src/model.ts           |  16 +-
 ListSearchApplications/src/service.ts         |   5 +-
 ListSearchArticles/package.json               |   5 +-
 ListSearchArticles/src/_mock.ts               |   4 +-
 .../components/ArticleListContent/index.tsx   |   2 +-
 .../src/components/TagSelect/index.tsx        |   8 +-
 ListSearchArticles/src/index.tsx              |  22 +-
 ListSearchArticles/src/model.ts               |  20 +-
 ListSearchArticles/src/service.ts             |   4 +-
 ListSearchProjects/package.json               |   5 +-
 ListSearchProjects/src/_mock.ts               |   4 +-
 .../src/components/AvatarList/index.tsx       |   9 +-
 .../src/components/TagSelect/index.tsx        |   8 +-
 ListSearchProjects/src/index.tsx              |  26 +-
 ListSearchProjects/src/model.ts               |  16 +-
 ListSearchProjects/src/service.ts             |   2 +-
 ListTableList/package.json                    |   6 +-
 ListTableList/src/_mock.ts                    |  18 +-
 ListTableList/src/components/CreateForm.tsx   |   5 +-
 .../src/components/StandardTable/index.tsx    |  38 ++-
 ListTableList/src/components/UpdateForm.tsx   |  19 +-
 ListTableList/src/index.tsx                   |  50 +--
 ListTableList/src/model.ts                    |  16 +-
 ListTableList/src/service.ts                  |   4 +-
 ProfileAdvanced/package.json                  |   9 +-
 ProfileAdvanced/src/index.tsx                 |  56 ++--
 ProfileAdvanced/src/model.ts                  |   9 +-
 ProfileBasic/package.json                     |   6 +-
 ProfileBasic/src/data.d.ts                    |  10 +-
 ProfileBasic/src/index.tsx                    |  33 +-
 ProfileBasic/src/model.ts                     |  16 +-
 ResultFail/package.json                       |   8 +-
 ResultFail/src/Result/index.tsx               |   2 +-
 ResultFail/src/index.tsx                      |   5 +-
 ResultSuccess/package.json                    |   7 +-
 ResultSuccess/src/Result/index.tsx            |   2 +-
 ResultSuccess/src/index.tsx                   |   7 +-
 UserLogin/package.json                        |   9 +-
 .../src/components/Login/LoginContext.tsx     |   4 +-
 UserLogin/src/components/Login/LoginItem.tsx  |  46 +--
 .../src/components/Login/LoginSubmit.tsx      |   6 +-
 UserLogin/src/components/Login/LoginTab.tsx   |  11 +-
 UserLogin/src/components/Login/index.tsx      |  23 +-
 UserLogin/src/components/Login/map.tsx        |   2 +-
 UserLogin/src/index.tsx                       |  63 ++--
 UserLogin/src/model.ts                        |  15 +-
 UserRegister/package.json                     |   5 +-
 UserRegister/src/index.tsx                    |  33 +-
 UserRegister/src/model.ts                     |  14 +-
 UserRegister/src/service.ts                   |   4 +-
 UserRegisterResult/package.json               |   8 +-
 UserRegisterResult/src/Result/index.tsx       |   2 +-
 UserRegisterResult/src/index.tsx              |   7 +-
 _scripts/getPrettierFiles.js                  |  23 --
 _scripts/lint-prettier.js                     |  50 ---
 _scripts/prettier.js                          |  47 ---
 _scripts/screenshot.js                        |  26 +-
 package.json                                  |  45 ++-
 tslint.yml                                    |  95 ------
 typings.d.ts                                  |   2 +-
 229 files changed, 3313 insertions(+), 3533 deletions(-)
 delete mode 100644 .prettierrc
 create mode 100644 .prettierrc.js
 create mode 100644 .stylelintrc.js
 delete mode 100644 .stylelintrc.json
 delete mode 100644 _scripts/getPrettierFiles.js
 delete mode 100644 _scripts/lint-prettier.js
 delete mode 100644 _scripts/prettier.js
 delete mode 100644 tslint.yml

diff --git a/.eslintignore b/.eslintignore
index 43ab7824..3015390d 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,3 +1,5 @@
 /functions/mock/**
 /scripts
-/config
\ No newline at end of file
+/config
+**/node_modules/**
+_scripts
\ No newline at end of file
diff --git a/.eslintrc.js b/.eslintrc.js
index 02f5cb12..4e515e07 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,39 +1,14 @@
+const fabric = require('@umijs/fabric');
+
 module.exports = {
-  parser: 'babel-eslint',
-  extends: ['airbnb', 'prettier', 'plugin:compat/recommended'],
-  env: {
-    browser: true,
-    node: true,
-    es6: true,
-    mocha: true,
-    jest: true,
-    jasmine: true,
+  ...fabric.default,
+  rules: {
+    ...fabric.default.rules,
+    '@typescript-eslint/camelcase': 0,
+    '@typescript-eslint/class-name-casing': 0,
   },
   globals: {
-    APP_TYPE: true,
+    ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION: true,
     page: true,
   },
-  rules: {
-    'react/jsx-filename-extension': [1, { extensions: ['.js'] }],
-    'react/jsx-wrap-multilines': 0,
-    'react/prop-types': 0,
-    'react/forbid-prop-types': 0,
-    'react/jsx-one-expression-per-line': 0,
-    'import/no-unresolved': [2, { ignore: ['^@/', '^umi/'] }],
-    'import/no-extraneous-dependencies': [
-      2,
-      {
-        optionalDependencies: true,
-        devDependencies: ['**/tests/**.js', '/mock/**.js', '**/**.test.js'],
-      },
-    ],
-    'jsx-a11y/no-noninteractive-element-interactions': 0,
-    'jsx-a11y/click-events-have-key-events': 0,
-    'jsx-a11y/no-static-element-interactions': 0,
-    'jsx-a11y/anchor-is-valid': 0,
-    'linebreak-style': 0,
-  },
-  settings: {
-    polyfills: ['fetch', 'promises', 'url'],
-  },
 };
diff --git a/.gitignore b/.gitignore
index 28592158..67904bdd 100644
--- a/.gitignore
+++ b/.gitignore
@@ -35,4 +35,6 @@ functions/mock
 
 # screenshot
 screenshot
-.firebase
\ No newline at end of file
+.firebase
+
+.eslintcache
diff --git a/.prettierrc b/.prettierrc
deleted file mode 100644
index 3dc446bf..00000000
--- a/.prettierrc
+++ /dev/null
@@ -1,14 +0,0 @@
-{
-  "singleQuote": true,
-  "trailingComma": "all",
-  "printWidth": 100,
-  "proseWrap": "never",
-  "overrides": [
-    {
-      "files": ".prettierrc",
-      "options": {
-        "parser": "json"
-      }
-    }
-  ]
-}
\ No newline at end of file
diff --git a/.prettierrc.js b/.prettierrc.js
new file mode 100644
index 00000000..7b597d78
--- /dev/null
+++ b/.prettierrc.js
@@ -0,0 +1,5 @@
+const fabric = require('@umijs/fabric');
+
+module.exports = {
+  ...fabric.prettier,
+};
diff --git a/.stylelintrc.js b/.stylelintrc.js
new file mode 100644
index 00000000..c2030787
--- /dev/null
+++ b/.stylelintrc.js
@@ -0,0 +1,5 @@
+const fabric = require('@umijs/fabric');
+
+module.exports = {
+  ...fabric.stylelint,
+};
diff --git a/.stylelintrc.json b/.stylelintrc.json
deleted file mode 100644
index 215bf081..00000000
--- a/.stylelintrc.json
+++ /dev/null
@@ -1,13 +0,0 @@
-{
-  "extends": [
-    "stylelint-config-standard",
-    "stylelint-config-css-modules",
-    "stylelint-config-rational-order",
-    "stylelint-config-prettier"
-  ],
-  "plugins": ["stylelint-order", "stylelint-declaration-block-no-ignored-properties"],
-  "rules": {
-    "no-descending-specificity": null,
-    "plugin/declaration-block-no-ignored-properties": true
-  }
-}
diff --git a/AccountCenter/package.json b/AccountCenter/package.json
index 835a993a..fa1f41d4 100644
--- a/AccountCenter/package.json
+++ b/AccountCenter/package.json
@@ -11,16 +11,21 @@
     "url": "https://github.com/umijs/umi-blocks/ant-design-pro/accountcenter"
   },
   "dependencies": {
+    "@ant-design/pro-layout": "^4.5.5",
     "antd": "^3.16.3",
+    "classnames": "^2.2.6",
     "dva": "^2.4.0",
+    "moment": "^2.24.0",
     "numeral": "^2.0.6",
     "react": "^16.6.3",
+    "react-router": "^5.0.1",
+    "redux": "^4.0.1",
     "umi-request": "^1.0.0"
   },
   "devDependencies": {
     "umi": "^2.6.9",
-    "umi-plugin-react": "^1.7.2",
-    "umi-plugin-block-dev": "^1.0.0"
+    "umi-plugin-block-dev": "^1.0.0",
+    "umi-plugin-react": "^1.7.2"
   },
   "license": "ISC",
   "blockConfig": {
diff --git a/AccountCenter/src/_mock.ts b/AccountCenter/src/_mock.ts
index 5083e62a..ea19d21f 100644
--- a/AccountCenter/src/_mock.ts
+++ b/AccountCenter/src/_mock.ts
@@ -1,4 +1,4 @@
-import { ListItemDataType } from './data';
+import { ListItemDataType } from './data.d';
 
 const titles = [
   'Alipay',
@@ -21,69 +21,6 @@ const avatars = [
   'https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlMTCEe.png', // Webpack
 ];
 
-const getNotice = [
-  {
-    id: 'xxx1',
-    title: titles[0],
-    logo: avatars[0],
-    description: '那是一种内在的东西，他们到达不了，也无法触及的',
-    updatedAt: new Date(),
-    member: '科学搬砖组',
-    href: '',
-    memberLink: '',
-  },
-  {
-    id: 'xxx2',
-    title: titles[1],
-    logo: avatars[1],
-    description: '希望是一个好东西，也许是最好的，好东西是不会消亡的',
-    updatedAt: new Date('2017-07-24'),
-    member: '全组都是吴彦祖',
-    href: '',
-    memberLink: '',
-  },
-  {
-    id: 'xxx3',
-    title: titles[2],
-    logo: avatars[2],
-    description: '城镇中有那么多的酒馆，她却偏偏走进了我的酒馆',
-    updatedAt: new Date(),
-    member: '中二少女团',
-    href: '',
-    memberLink: '',
-  },
-  {
-    id: 'xxx4',
-    title: titles[3],
-    logo: avatars[3],
-    description: '那时候我只会想自己想要什么，从不想自己拥有什么',
-    updatedAt: new Date('2017-07-23'),
-    member: '程序员日常',
-    href: '',
-    memberLink: '',
-  },
-  {
-    id: 'xxx5',
-    title: titles[4],
-    logo: avatars[4],
-    description: '凛冬将至',
-    updatedAt: new Date('2017-07-23'),
-    member: '高逼格设计天团',
-    href: '',
-    memberLink: '',
-  },
-  {
-    id: 'xxx6',
-    title: titles[5],
-    logo: avatars[5],
-    description: '生命就像一盒巧克力，结果往往出人意料',
-    updatedAt: new Date('2017-07-23'),
-    member: '骗你来学计算机',
-    href: '',
-    memberLink: '',
-  },
-];
-
 const covers = [
   'https://gw.alipayobjects.com/zos/rmsportal/uMfMFlvUuceEyPpotzlq.png',
   'https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png',
@@ -119,7 +56,7 @@ function fakeList(count: number): ListItemDataType[] {
       owner: user[i % 10],
       title: titles[i % 8],
       avatar: avatars[i % 8],
-      cover: parseInt(i / 4 + '', 10) % 2 === 0 ? covers[i % 4] : covers[3 - (i % 4)],
+      cover: parseInt(`${i / 4}`, 10) % 2 === 0 ? covers[i % 4] : covers[3 - (i % 4)],
       status: ['active', 'exception', 'normal'][i % 3] as
         | 'normal'
         | 'exception'
diff --git a/AccountCenter/src/components/Applications/index.tsx b/AccountCenter/src/components/Applications/index.tsx
index 7d2737f6..86f69078 100644
--- a/AccountCenter/src/components/Applications/index.tsx
+++ b/AccountCenter/src/components/Applications/index.tsx
@@ -1,9 +1,10 @@
+import { Avatar, Card, Dropdown, Icon, List, Menu, Tooltip } from 'antd';
 import React, { Component } from 'react';
-import { List, Card, Icon, Dropdown, Menu, Avatar, Tooltip } from 'antd';
-import numeral from 'numeral';
+
 import { connect } from 'dva';
-import stylesApplications from './index.less';
+import numeral from 'numeral';
 import { ModalState } from '../../model';
+import stylesApplications from './index.less';
 
 export function formatWan(val: number) {
   const v = val * 1;
diff --git a/AccountCenter/src/components/ArticleListContent/index.tsx b/AccountCenter/src/components/ArticleListContent/index.tsx
index 2179e13a..74c8b2f0 100644
--- a/AccountCenter/src/components/ArticleListContent/index.tsx
+++ b/AccountCenter/src/components/ArticleListContent/index.tsx
@@ -1,6 +1,6 @@
+import { Avatar } from 'antd';
 import React from 'react';
 import moment from 'moment';
-import { Avatar } from 'antd';
 import styles from './index.less';
 
 export interface ApplicationsProps {
diff --git a/AccountCenter/src/components/Articles/index.tsx b/AccountCenter/src/components/Articles/index.tsx
index 727bba52..1050aa84 100644
--- a/AccountCenter/src/components/Articles/index.tsx
+++ b/AccountCenter/src/components/Articles/index.tsx
@@ -1,10 +1,11 @@
+import { Icon, List, Tag } from 'antd';
 import React, { Component } from 'react';
-import { List, Icon, Tag } from 'antd';
+
 import { connect } from 'dva';
 import ArticleListContent from '../ArticleListContent';
-import styles from './index.less';
+import { ListItemDataType } from '../../data.d';
 import { ModalState } from '../../model';
-import { ListItemDataType } from '../../data';
+import styles from './index.less';
 
 @connect(({ BLOCK_NAME_CAMEL_CASE }: { BLOCK_NAME_CAMEL_CASE: ModalState }) => ({
   list: BLOCK_NAME_CAMEL_CASE.list,
diff --git a/AccountCenter/src/components/AvatarList/index.tsx b/AccountCenter/src/components/AvatarList/index.tsx
index 0e633596..650df830 100644
--- a/AccountCenter/src/components/AvatarList/index.tsx
+++ b/AccountCenter/src/components/AvatarList/index.tsx
@@ -1,5 +1,6 @@
+import { Avatar, Tooltip } from 'antd';
+
 import React from 'react';
-import { Tooltip, Avatar } from 'antd';
 import classNames from 'classnames';
 import styles from './index.less';
 
@@ -19,10 +20,10 @@ export interface AvatarListProps {
   maxLength?: number;
   excessItemsStyle?: React.CSSProperties;
   style?: React.CSSProperties;
-  children: React.ReactElement<AvatarItemProps> | Array<React.ReactElement<AvatarItemProps>>;
+  children: React.ReactElement<AvatarItemProps> | React.ReactElement<AvatarItemProps>[];
 }
 
-const avatarSizeToClassName = (size?: SizeType) =>
+const avatarSizeToClassName = (size?: SizeType | 'mini') =>
   classNames(styles.avatarItem, {
     [styles.avatarItemLarge]: size === 'large',
     [styles.avatarItemSmall]: size === 'small',
@@ -54,9 +55,7 @@ const AvatarList: React.SFC<AvatarListProps> & { Item: typeof Item } = ({
 }) => {
   const numOfChildren = React.Children.count(children);
   const numToShow = maxLength >= numOfChildren ? numOfChildren : maxLength;
-  const childrenArray = React.Children.toArray(children) as Array<
-    React.ReactElement<AvatarItemProps>
-  >;
+  const childrenArray = React.Children.toArray(children) as React.ReactElement<AvatarItemProps>[];
   const childrenWithProps = childrenArray.slice(0, numToShow).map(child =>
     React.cloneElement(child, {
       size,
diff --git a/AccountCenter/src/components/Projects/index.tsx b/AccountCenter/src/components/Projects/index.tsx
index 918ffbb6..a9a46a1b 100644
--- a/AccountCenter/src/components/Projects/index.tsx
+++ b/AccountCenter/src/components/Projects/index.tsx
@@ -1,11 +1,12 @@
+import { Card, List } from 'antd';
 import React, { Component } from 'react';
-import { List, Card } from 'antd';
-import moment from 'moment';
+
 import { connect } from 'dva';
+import moment from 'moment';
 import AvatarList from '../AvatarList';
-import styles from './index.less';
+import { ListItemDataType } from '../../data.d';
 import { ModalState } from '../../model';
-import { ListItemDataType } from '../../data';
+import styles from './index.less';
 
 @connect(({ BLOCK_NAME_CAMEL_CASE }: { BLOCK_NAME_CAMEL_CASE: ModalState }) => ({
   list: BLOCK_NAME_CAMEL_CASE.list,
diff --git a/AccountCenter/src/data.d.ts b/AccountCenter/src/data.d.ts
index beba7f37..0b604c40 100644
--- a/AccountCenter/src/data.d.ts
+++ b/AccountCenter/src/data.d.ts
@@ -1,24 +1,24 @@
-export interface ITag {
+export interface TagType {
   key: string;
   label: string;
 }
 
-export interface IProvince {
+export interface ProvinceType {
   label: string;
   key: string;
 }
 
-export interface ICity {
+export interface CityType {
   label: string;
   key: string;
 }
 
-export interface IGeographic {
-  province: IProvince;
-  city: ICity;
+export interface GeographicType {
+  province: ProvinceType;
+  city: CityType;
 }
 
-export interface INotice {
+export interface NoticeType {
   id: string;
   title: string;
   logo: string;
@@ -33,16 +33,16 @@ export interface CurrentUser {
   name: string;
   avatar: string;
   userid: string;
-  notice: INotice[];
+  notice: NoticeType[];
   email: string;
   signature: string;
   title: string;
   group: string;
-  tags: ITag[];
+  tags: TagType[];
   notifyCount: number;
   unreadCount: number;
   country: string;
-  geographic: IGeographic;
+  geographic: GeographicType;
   address: string;
   phone: string;
 }
diff --git a/AccountCenter/src/index.tsx b/AccountCenter/src/index.tsx
index 14c4c514..7fafaf7f 100644
--- a/AccountCenter/src/index.tsx
+++ b/AccountCenter/src/index.tsx
@@ -1,16 +1,17 @@
+import { Avatar, Card, Col, Divider, Icon, Input, Row, Tag } from 'antd';
 import React, { PureComponent } from 'react';
-import { connect } from 'dva';
+
 import { Dispatch } from 'redux';
-import Link from 'umi/link';
 import { GridContent } from '@ant-design/pro-layout';
+import Link from 'umi/link';
 import { RouteChildrenProps } from 'react-router';
-import { Card, Row, Col, Icon, Avatar, Tag, Divider, Input } from 'antd';
-import styles from './Center.less';
-import { ITag, CurrentUser } from './data';
+import { connect } from 'dva';
 import { ModalState } from './model';
+import Projects from './components/Projects';
 import Articles from './components/Articles';
 import Applications from './components/Applications';
-import Projects from './components/Projects';
+import { CurrentUser, TagType } from './data.d';
+import styles from './Center.less';
 
 const operationTabList = [
   {
@@ -45,7 +46,7 @@ interface BLOCK_NAME_CAMEL_CASEProps extends RouteChildrenProps {
   currentUserLoading: boolean;
 }
 interface BLOCK_NAME_CAMEL_CASEState {
-  newTags: ITag[];
+  newTags: TagType[];
   tabKey: 'articles' | 'applications' | 'projects';
   inputVisible: boolean;
   inputValue: string;
@@ -56,7 +57,7 @@ interface BLOCK_NAME_CAMEL_CASEState {
     loading,
     BLOCK_NAME_CAMEL_CASE,
   }: {
-    loading: { effects: any };
+    loading: { effects: { [key: string]: boolean } };
     BLOCK_NAME_CAMEL_CASE: ModalState;
   }) => ({
     currentUser: BLOCK_NAME_CAMEL_CASE.currentUser,
@@ -92,7 +93,7 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends PureComponent<
     tabKey: 'articles',
   };
 
-  input: Input | null | undefined;
+  public input: Input | null | undefined = undefined;
 
   componentDidMount() {
     const { dispatch } = this.props;
@@ -138,6 +139,7 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends PureComponent<
       inputValue: '',
     });
   };
+
   renderChildrenByTabKey = (tabKey: BLOCK_NAME_CAMEL_CASEState['tabKey']) => {
     if (tabKey === 'projects') {
       return <Projects />;
@@ -150,6 +152,7 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends PureComponent<
     }
     return null;
   };
+
   render() {
     const { newTags, inputVisible, inputValue, tabKey } = this.state;
     const { currentUser, currentUserLoading } = this.props;
@@ -184,9 +187,9 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends PureComponent<
                   <Divider dashed />
                   <div className={styles.tags}>
                     <div className={styles.tagsTitle}>标签</div>
-                    {currentUser.tags.concat(newTags).map(item => {
-                      return <Tag key={item.key}>{item.label}</Tag>;
-                    })}
+                    {currentUser.tags.concat(newTags).map(item => (
+                      <Tag key={item.key}>{item.label}</Tag>
+                    ))}
                     {inputVisible && (
                       <Input
                         ref={ref => this.saveInputRef(ref)}
diff --git a/AccountCenter/src/model.ts b/AccountCenter/src/model.ts
index bf482ba9..aac34934 100644
--- a/AccountCenter/src/model.ts
+++ b/AccountCenter/src/model.ts
@@ -1,15 +1,13 @@
+import { AnyAction, Reducer } from 'redux';
+import { EffectsCommandMap } from 'dva';
+import { CurrentUser, ListItemDataType } from './data.d';
 import { queryCurrent, queryFakeList } from './service';
-import { CurrentUser, ListItemDataType } from './data';
 
 export interface ModalState {
   currentUser: Partial<CurrentUser>;
   list: ListItemDataType[];
 }
 
-import { Reducer } from 'redux';
-import { EffectsCommandMap } from 'dva';
-import { AnyAction } from 'redux';
-
 export type Effect = (
   action: AnyAction,
   effects: EffectsCommandMap & { select: <T>(func: (state: ModalState) => T) => T },
@@ -56,13 +54,13 @@ const Model: ModelType = {
   reducers: {
     saveCurrentUser(state, action) {
       return {
-        ...state!,
+        ...(state as ModalState),
         currentUser: action.payload || {},
       };
     },
     queryList(state, action) {
       return {
-        ...state!,
+        ...(state as ModalState),
         list: action.payload,
       };
     },
diff --git a/AccountCenter/src/service.ts b/AccountCenter/src/service.ts
index 5f602ebc..db8254d5 100644
--- a/AccountCenter/src/service.ts
+++ b/AccountCenter/src/service.ts
@@ -5,7 +5,7 @@ export async function queryCurrent() {
 }
 
 export async function queryFakeList(params: { count: number }) {
-  return request(`/api/fake_list`, {
+  return request('/api/fake_list', {
     params,
   });
 }
diff --git a/AccountSettings/package.json b/AccountSettings/package.json
index b6c3571e..a5aa24eb 100644
--- a/AccountSettings/package.json
+++ b/AccountSettings/package.json
@@ -12,15 +12,18 @@
     "dev": "umi dev"
   },
   "dependencies": {
+    "@ant-design/pro-layout": "^4.5.5",
     "antd": "^3.16.3",
     "dva": "^2.4.0",
     "react": "^16.6.3",
-    "umi-request": "^1.0.0"
+    "redux": "^4.0.1",
+    "umi-request": "^1.0.0",
+    "umi-plugin-react": "^1.8.4",
+    "umi": "^2.6.9"
+
   },
   "devDependencies": {
-    "umi": "^2.6.9",
-    "umi-plugin-block-dev": "^1.0.0",
-    "umi-plugin-react": "^1.3.0-beta.1"
+    "umi-plugin-block-dev": "^1.0.0"
   },
   "blockConfig": {
     "specVersion": "0.1"
diff --git a/AccountSettings/src/components/GeographicView.tsx b/AccountSettings/src/components/GeographicView.tsx
index fac71c4f..911e3a0a 100644
--- a/AccountSettings/src/components/GeographicView.tsx
+++ b/AccountSettings/src/components/GeographicView.tsx
@@ -1,24 +1,26 @@
 import React, { Component } from 'react';
 import { Select, Spin } from 'antd';
+
+import { Dispatch } from 'redux';
 import { connect } from 'dva';
+import { CityType, ProvinceType } from '../data.d';
 import styles from './GeographicView.less';
-import { Dispatch } from 'redux';
-import { ProvinceData, CityData } from '../data';
+
 const { Option } = Select;
 
 interface SelectItem {
   label: string;
   key: string;
 }
-const nullSlectItem: SelectItem = {
+const nullSelectItem: SelectItem = {
   label: '',
   key: '',
 };
 
 interface GeographicViewProps {
   dispatch?: Dispatch<any>;
-  province?: ProvinceData[];
-  city?: CityData[];
+  province?: ProvinceType[];
+  city?: CityType[];
   value?: {
     province: SelectItem;
     city: SelectItem;
@@ -33,8 +35,8 @@ interface GeographicViewProps {
     loading,
   }: {
     BLOCK_NAME_CAMEL_CASE: {
-      province: ProvinceData[];
-      city: CityData[];
+      province: ProvinceType[];
+      city: CityType[];
     };
     loading: any;
   }) => {
@@ -85,7 +87,7 @@ class GeographicView extends Component<GeographicViewProps> {
     return [];
   };
 
-  getOption = (list: CityData[] | ProvinceData[]) => {
+  getOption = (list: CityType[] | ProvinceType[]) => {
     if (!list || list.length < 1) {
       return (
         <Option key={0} value={0}>
@@ -93,9 +95,9 @@ class GeographicView extends Component<GeographicViewProps> {
         </Option>
       );
     }
-    return (list as CityData[]).map(item => (
-      <Option key={item.id} value={item.id}>
-        {item.name}
+    return (list as CityType[]).map(item => (
+      <Option key={item.key} value={item.key}>
+        {item.label}
       </Option>
     ));
   };
@@ -112,7 +114,7 @@ class GeographicView extends Component<GeographicViewProps> {
     if (onChange) {
       onChange({
         province: item,
-        city: nullSlectItem,
+        city: nullSelectItem,
       });
     }
   };
@@ -131,14 +133,14 @@ class GeographicView extends Component<GeographicViewProps> {
     const { value } = this.props;
     if (!value) {
       return {
-        province: nullSlectItem,
-        city: nullSlectItem,
+        province: nullSelectItem,
+        city: nullSelectItem,
       };
     }
     const { province, city } = value;
     return {
-      province: province || nullSlectItem,
-      city: city || nullSlectItem,
+      province: province || nullSelectItem,
+      city: city || nullSelectItem,
     };
   }
 
diff --git a/AccountSettings/src/components/PhoneView.tsx b/AccountSettings/src/components/PhoneView.tsx
index 98a8bcb7..e97ec0c1 100644
--- a/AccountSettings/src/components/PhoneView.tsx
+++ b/AccountSettings/src/components/PhoneView.tsx
@@ -1,4 +1,5 @@
 import React, { Fragment, PureComponent } from 'react';
+
 import { Input } from 'antd';
 import styles from './PhoneView.less';
 
@@ -20,15 +21,17 @@ class PhoneView extends PureComponent<PhoneViewProps> {
           className={styles.area_code}
           value={values[0]}
           onChange={e => {
-            // tslint:disable-next-line: no-unused-expression
-            onChange && onChange(`${e.target.value}-${values[1]}`);
+            if (onChange) {
+              onChange(`${e.target.value}-${values[1]}`);
+            }
           }}
         />
         <Input
           className={styles.phone_number}
           onChange={e => {
-            // tslint:disable-next-line: no-unused-expression
-            onChange && onChange(`${values[0]}-${e.target.value}`);
+            if (onChange) {
+              onChange(`${values[0]}-${e.target.value}`);
+            }
           }}
           value={values[1]}
         />
diff --git a/AccountSettings/src/components/base.tsx b/AccountSettings/src/components/base.tsx
index 033fb1e1..8175ab38 100644
--- a/AccountSettings/src/components/base.tsx
+++ b/AccountSettings/src/components/base.tsx
@@ -1,12 +1,14 @@
+import { Button, Form, Input, Select, Upload, message } from 'antd';
+import { FormattedMessage, formatMessage } from 'umi-plugin-react/locale';
 import React, { Component, Fragment } from 'react';
-import { formatMessage, FormattedMessage } from 'umi-plugin-react/locale';
-import { Form, Input, Upload, Select, Button, message } from 'antd';
+
 import { FormComponentProps } from 'antd/es/form';
 import { connect } from 'dva';
-import styles from './BaseView.less';
+import { CurrentUser } from '../data.d';
 import GeographicView from './GeographicView';
 import PhoneView from './PhoneView';
-import { CurrentUser } from '../data';
+import styles from './BaseView.less';
+
 const FormItem = Form.Item;
 const { Option } = Select;
 
@@ -70,7 +72,8 @@ interface BaseViewProps extends FormComponentProps {
   currentUser: BLOCK_NAME_CAMEL_CASE.currentUser,
 }))
 class BaseView extends Component<BaseViewProps> {
-  view: HTMLDivElement | undefined;
+  view: HTMLDivElement | undefined = undefined;
+
   componentDidMount() {
     this.setBaseInfo();
   }
@@ -102,10 +105,10 @@ class BaseView extends Component<BaseViewProps> {
     this.view = ref;
   };
 
-  handlerSubmit = (event: Event) => {
+  handlerSubmit = (event: React.MouseEvent) => {
     event.preventDefault();
     const { form } = this.props;
-    form.validateFields((err, values) => {
+    form.validateFields(err => {
       if (!err) {
         message.success(formatMessage({ id: 'BLOCK_NAME.basic.update.success' }));
       }
diff --git a/AccountSettings/src/components/binding.tsx b/AccountSettings/src/components/binding.tsx
index 5f1d3d9b..4efae7ea 100644
--- a/AccountSettings/src/components/binding.tsx
+++ b/AccountSettings/src/components/binding.tsx
@@ -1,6 +1,6 @@
-import React, { Component, Fragment } from 'react';
-import { formatMessage, FormattedMessage } from 'umi-plugin-react/locale';
+import { FormattedMessage, formatMessage } from 'umi-plugin-react/locale';
 import { Icon, List } from 'antd';
+import React, { Component, Fragment } from 'react';
 
 class BindingView extends Component {
   getData = () => [
diff --git a/AccountSettings/src/components/notification.tsx b/AccountSettings/src/components/notification.tsx
index e06f54d6..eea2bf04 100644
--- a/AccountSettings/src/components/notification.tsx
+++ b/AccountSettings/src/components/notification.tsx
@@ -1,6 +1,7 @@
+import { List, Switch } from 'antd';
 import React, { Component, Fragment } from 'react';
+
 import { formatMessage } from 'umi-plugin-react/locale';
-import { Switch, List } from 'antd';
 
 type Unpacked<T> = T extends (infer U)[] ? U : T;
 
diff --git a/AccountSettings/src/components/security.tsx b/AccountSettings/src/components/security.tsx
index 89642eb4..47ecac4b 100644
--- a/AccountSettings/src/components/security.tsx
+++ b/AccountSettings/src/components/security.tsx
@@ -1,5 +1,6 @@
+import { FormattedMessage, formatMessage } from 'umi-plugin-react/locale';
 import React, { Component, Fragment } from 'react';
-import { formatMessage, FormattedMessage } from 'umi-plugin-react/locale';
+
 import { List } from 'antd';
 
 type Unpacked<T> = T extends (infer U)[] ? U : T;
diff --git a/AccountSettings/src/data.d.ts b/AccountSettings/src/data.d.ts
index 0f4070e6..8b0a824a 100644
--- a/AccountSettings/src/data.d.ts
+++ b/AccountSettings/src/data.d.ts
@@ -1,24 +1,24 @@
-export interface ITag {
+export interface TagType {
   key: string;
   label: string;
 }
 
-export interface IProvince {
+export interface ProvinceType {
   label: string;
   key: string;
 }
 
-export interface ICity {
+export interface CityType {
   label: string;
   key: string;
 }
 
-export interface IGeographic {
-  province: IProvince;
-  city: ICity;
+export interface GeographicType {
+  province: ProvinceType;
+  city: CityType;
 }
 
-export interface INotice {
+export interface NoticeType {
   id: string;
   title: string;
   logo: string;
@@ -33,16 +33,16 @@ export interface CurrentUser {
   name: string;
   avatar: string;
   userid: string;
-  notice: INotice[];
+  notice: NoticeType[];
   email: string;
   signature: string;
   title: string;
   group: string;
-  tags: ITag[];
+  tags: TagType[];
   notifyCount: number;
   unreadCount: number;
   country: string;
-  geographic: IGeographic;
+  geographic: GeographicType;
   address: string;
   phone: string;
 }
diff --git a/AccountSettings/src/index.tsx b/AccountSettings/src/index.tsx
index 9968d060..41abe48d 100644
--- a/AccountSettings/src/index.tsx
+++ b/AccountSettings/src/index.tsx
@@ -1,15 +1,16 @@
 import React, { Component } from 'react';
-import { connect } from 'dva';
+
 import { Dispatch } from 'redux';
 import { FormattedMessage } from 'umi-plugin-react/locale';
 import { GridContent } from '@ant-design/pro-layout';
 import { Menu } from 'antd';
-import styles from './style.less';
+import { connect } from 'dva';
 import BaseView from './components/base';
-import SecurityView from './components/security';
 import BindingView from './components/binding';
+import { CurrentUser } from './data.d';
 import NotificationView from './components/notification';
-import { CurrentUser } from './data';
+import SecurityView from './components/security';
+import styles from './style.less';
 
 const { Item } = Menu;
 
@@ -33,7 +34,8 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<
   PAGE_NAME_UPPER_CAMEL_CASEProps,
   PAGE_NAME_UPPER_CAMEL_CASEState
 > {
-  main: HTMLDivElement | undefined;
+  main: HTMLDivElement | undefined = undefined;
+
   constructor(props: PAGE_NAME_UPPER_CAMEL_CASEProps) {
     super(props);
     const menuMap = {
diff --git a/AccountSettings/src/model.ts b/AccountSettings/src/model.ts
index 138a842e..ba55cdd7 100644
--- a/AccountSettings/src/model.ts
+++ b/AccountSettings/src/model.ts
@@ -1,13 +1,12 @@
-import { query as queryUsers, queryCurrent, queryProvince, queryCity } from './service';
-import { Reducer } from 'redux';
+import { AnyAction, Reducer } from 'redux';
 import { EffectsCommandMap } from 'dva';
-import { AnyAction } from 'redux';
-import { CurrentUser, City, Province } from './data';
+import { CityType, CurrentUser, ProvinceType } from './data.d';
+import { queryCity, queryCurrent, queryProvince, query as queryUsers } from './service';
 
 export interface ModalState {
   currentUser?: Partial<CurrentUser>;
-  province?: Province[];
-  city?: City[];
+  province?: ProvinceType[];
+  city?: CityType[];
   isLoading?: boolean;
 }
 
diff --git a/DashboardAnalysis/package.json b/DashboardAnalysis/package.json
index 58f319f4..8568a261 100644
--- a/DashboardAnalysis/package.json
+++ b/DashboardAnalysis/package.json
@@ -12,22 +12,27 @@
     "dev": "umi dev"
   },
   "dependencies": {
+    "@ant-design/pro-layout": "^4.5.5",
     "@antv/data-set": "^0.10.2",
     "antd": "^3.16.3",
     "bizcharts": "^3.5.3-beta.0",
     "bizcharts-plugin-slider": "^2.1.1-beta.1",
-    "dva": "^2.4.0",
+    "classnames": "^2.2.6",
+    "dva": "^2.4.0", 
+    "@types/lodash.debounce": "^4.0.6",
+    "lodash.debounce": "^4.0.8",
     "moment": "^2.22.2",
     "numeral": "^2.0.6",
     "react": "^16.6.3",
     "react-fittext": "^1.0.0",
+    "redux": "^4.0.1",
+    "umi-plugin-react": "^1.7.2",
     "umi-request": "^1.0.0"
   },
   "devDependencies": {
+    "@types/numeral": "^0.0.25",
     "umi": "^2.6.9",
-    "umi-plugin-block-dev": "^1.1.0",
-    "umi-plugin-react": "^1.7.2",
-    "@types/numeral": "^0.0.25"
+    "umi-plugin-block-dev": "^1.1.0"
   },
   "blockConfig": {
     "specVersion": "0.1"
diff --git a/DashboardAnalysis/src/_mock.ts b/DashboardAnalysis/src/_mock.ts
index 8d1b78ab..03e49108 100644
--- a/DashboardAnalysis/src/_mock.ts
+++ b/DashboardAnalysis/src/_mock.ts
@@ -1,8 +1,8 @@
 import moment from 'moment';
-import { IVisitData, IRadarData, IAnalysisData } from './data';
+import { AnalysisData, RadarData, VisitDataType } from './data.d';
 
 // mock data
-const visitData: IVisitData[] = [];
+const visitData: VisitDataType[] = [];
 const beginDay = new Date().getTime();
 
 const fakeY = [7, 5, 4, 2, 4, 7, 5, 6, 5, 9, 6, 3, 1, 5, 3, 6, 5];
@@ -159,7 +159,7 @@ const radarOriginData = [
   },
 ];
 
-const radarData: IRadarData[] = [];
+const radarData: RadarData[] = [];
 const radarTitleMap = {
   ref: '引用',
   koubei: '口碑',
@@ -179,7 +179,7 @@ radarOriginData.forEach(item => {
   });
 });
 
-const getFakeChartData: IAnalysisData = {
+const getFakeChartData: AnalysisData = {
   visitData,
   visitData2,
   salesData,
diff --git a/DashboardAnalysis/src/components/Charts/Bar/index.tsx b/DashboardAnalysis/src/components/Charts/Bar/index.tsx
index 2b512501..86f9fbc9 100644
--- a/DashboardAnalysis/src/components/Charts/Bar/index.tsx
+++ b/DashboardAnalysis/src/components/Charts/Bar/index.tsx
@@ -1,26 +1,26 @@
+import { Axis, Chart, Geom, Tooltip } from 'bizcharts';
 import React, { Component } from 'react';
-import { Chart, Axis, Tooltip, Geom } from 'bizcharts';
-import Debounce from 'lodash-decorators/debounce';
-import Bind from 'lodash-decorators/bind';
+
+import Debounce from 'lodash.debounce';
 import autoHeight from '../autoHeight';
 import styles from '../index.less';
 
-export interface IBarProps {
+export interface BarProps {
   title: React.ReactNode;
   color?: string;
   padding?: [number, number, number, number];
   height?: number;
-  data: Array<{
+  data: {
     x: string;
     y: number;
-  }>;
+  }[];
   forceFit?: boolean;
   autoLabel?: boolean;
   style?: React.CSSProperties;
 }
 
 class Bar extends Component<
-  IBarProps,
+  BarProps,
   {
     autoHideXLabels: boolean;
   }
@@ -28,26 +28,12 @@ class Bar extends Component<
   state = {
     autoHideXLabels: false,
   };
-  root: HTMLDivElement | undefined;
-  node: HTMLDivElement | undefined;
 
-  componentDidMount() {
-    window.addEventListener('resize', this.resize, { passive: true });
-  }
+  root: HTMLDivElement | undefined = undefined;
 
-  componentWillUnmount() {
-    window.removeEventListener('resize', this.resize);
-  }
-  handleRoot = (n: HTMLDivElement) => {
-    this.root = n;
-  };
-  handleRef = (n: HTMLDivElement) => {
-    this.node = n;
-  };
+  node: HTMLDivElement | undefined = undefined;
 
-  @Bind()
-  @Debounce(400)
-  resize() {
+  resize = Debounce(() => {
     if (!this.node || !this.node.parentNode) {
       return;
     }
@@ -70,8 +56,24 @@ class Bar extends Component<
         autoHideXLabels: false,
       });
     }
+  }, 500);
+
+  componentDidMount() {
+    window.addEventListener('resize', this.resize, { passive: true });
   }
 
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.resize);
+  }
+
+  handleRoot = (n: HTMLDivElement) => {
+    this.root = n;
+  };
+
+  handleRef = (n: HTMLDivElement) => {
+    this.node = n;
+  };
+
   render() {
     const {
       height = 1,
@@ -115,8 +117,8 @@ class Bar extends Component<
             <Axis
               name="x"
               title={false}
-              label={autoHideXLabels ? false : {}}
-              tickLine={autoHideXLabels ? false : {}}
+              label={autoHideXLabels ? undefined : {}}
+              tickLine={autoHideXLabels ? undefined : {}}
             />
             <Axis name="y" min={0} />
             <Tooltip showTitle={false} crosshairs={false} />
diff --git a/DashboardAnalysis/src/components/Charts/ChartCard/index.tsx b/DashboardAnalysis/src/components/Charts/ChartCard/index.tsx
index 41bbb630..8d367b80 100644
--- a/DashboardAnalysis/src/components/Charts/ChartCard/index.tsx
+++ b/DashboardAnalysis/src/components/Charts/ChartCard/index.tsx
@@ -1,15 +1,14 @@
-import React from 'react';
 import { Card } from 'antd';
-import classNames from 'classnames';
 import { CardProps } from 'antd/es/card';
-
+import React from 'react';
+import classNames from 'classnames';
 import styles from './index.less';
 
 type totalType = () => React.ReactNode;
 
 const renderTotal = (total?: number | totalType | React.ReactNode) => {
   if (!total) {
-    return;
+    return null;
   }
   let totalDom;
   switch (typeof total) {
@@ -25,7 +24,7 @@ const renderTotal = (total?: number | totalType | React.ReactNode) => {
   return totalDom;
 };
 
-export interface IChartCardProps extends CardProps {
+export interface ChartCardProps extends CardProps {
   title: React.ReactNode;
   action?: React.ReactNode;
   total?: React.ReactNode | number | (() => React.ReactNode | number);
@@ -35,7 +34,7 @@ export interface IChartCardProps extends CardProps {
   style?: React.CSSProperties;
 }
 
-class ChartCard extends React.Component<IChartCardProps> {
+class ChartCard extends React.Component<ChartCardProps> {
   renderContent = () => {
     const { contentHeight, title, avatar, action, total, footer, children, loading } = this.props;
     if (loading) {
diff --git a/DashboardAnalysis/src/components/Charts/Field/index.tsx b/DashboardAnalysis/src/components/Charts/Field/index.tsx
index ee3c1245..876673fa 100644
--- a/DashboardAnalysis/src/components/Charts/Field/index.tsx
+++ b/DashboardAnalysis/src/components/Charts/Field/index.tsx
@@ -1,14 +1,13 @@
 import React from 'react';
-
 import styles from './index.less';
 
-export interface IFieldProps {
+export interface FieldProps {
   label: React.ReactNode;
   value: React.ReactNode;
   style?: React.CSSProperties;
 }
 
-const Field: React.SFC<IFieldProps> = ({ label, value, ...rest }) => (
+const Field: React.SFC<FieldProps> = ({ label, value, ...rest }) => (
   <div className={styles.field} {...rest}>
     <span className={styles.label}>{label}</span>
     <span className={styles.number}>{value}</span>
diff --git a/DashboardAnalysis/src/components/Charts/Gauge/index.tsx b/DashboardAnalysis/src/components/Charts/Gauge/index.tsx
index b5d33c60..bf928966 100644
--- a/DashboardAnalysis/src/components/Charts/Gauge/index.tsx
+++ b/DashboardAnalysis/src/components/Charts/Gauge/index.tsx
@@ -1,10 +1,11 @@
+import { Axis, Chart, Coord, Geom, Guide, Shape } from 'bizcharts';
+
 import React from 'react';
-import { Chart, Geom, Axis, Coord, Guide, Shape } from 'bizcharts';
 import autoHeight from '../autoHeight';
 
 const { Arc, Html, Line } = Guide;
 
-export interface IGaugeProps {
+export interface GaugeProps {
   title: React.ReactNode;
   color?: string;
   height?: number;
@@ -30,148 +31,149 @@ const defaultFormatter = (val: string): string => {
   }
 };
 
-Shape.registerShape!('point', 'pointer', {
-  drawShape(cfg: any, group: any) {
-    let point = cfg.points[0];
-    point = (this as any).parsePoint(point);
-    const center = (this as any).parsePoint({
-      x: 0,
-      y: 0,
-    });
-    group.addShape('line', {
-      attrs: {
-        x1: center.x,
-        y1: center.y,
-        x2: point.x,
-        y2: point.y,
-        stroke: cfg.color,
-        lineWidth: 2,
-        lineCap: 'round',
-      },
-    });
-    return group.addShape('circle', {
-      attrs: {
-        x: center.x,
-        y: center.y,
-        r: 6,
-        stroke: cfg.color,
-        lineWidth: 3,
-        fill: '#fff',
-      },
-    });
-  },
-});
+if (Shape.registerShape) {
+  Shape.registerShape('point', 'pointer', {
+    drawShape(cfg: any, group: any) {
+      let point = cfg.points[0];
+      point = (this as any).parsePoint(point);
+      const center = (this as any).parsePoint({
+        x: 0,
+        y: 0,
+      });
+      group.addShape('line', {
+        attrs: {
+          x1: center.x,
+          y1: center.y,
+          x2: point.x,
+          y2: point.y,
+          stroke: cfg.color,
+          lineWidth: 2,
+          lineCap: 'round',
+        },
+      });
+      return group.addShape('circle', {
+        attrs: {
+          x: center.x,
+          y: center.y,
+          r: 6,
+          stroke: cfg.color,
+          lineWidth: 3,
+          fill: '#fff',
+        },
+      });
+    },
+  });
+}
 
-class Gauge extends React.Component<IGaugeProps> {
-  render() {
-    const {
-      title,
-      height = 1,
-      percent,
-      forceFit = true,
-      formatter = defaultFormatter,
-      color = '#2F9CFF',
-      bgColor = '#F0F2F5',
-    } = this.props;
-    const cols = {
-      value: {
-        type: 'linear',
-        min: 0,
-        max: 10,
-        tickCount: 6,
-        nice: true,
-      },
-    };
-    const renderHtml = () => `
+const Gauge: React.FC<GaugeProps> = props => {
+  const {
+    title,
+    height = 1,
+    percent,
+    forceFit = true,
+    formatter = defaultFormatter,
+    color = '#2F9CFF',
+    bgColor = '#F0F2F5',
+  } = props;
+  const cols = {
+    value: {
+      type: 'linear',
+      min: 0,
+      max: 10,
+      tickCount: 6,
+      nice: true,
+    },
+  };
+  const data = [{ value: percent / 10 }];
+  const renderHtml = () => `
     <div style="width: 300px;text-align: center;font-size: 12px!important;">
       <p style="font-size: 14px; color: rgba(0,0,0,0.43);margin: 0;">${title}</p>
       <p style="font-size: 24px;color: rgba(0,0,0,0.85);margin: 0;">
         ${(data[0].value * 10).toFixed(2)}%
       </p>
     </div>`;
-    const data = [{ value: percent / 10 }];
-    const textStyle: {
-      fontSize: number;
-      fill: string;
-      textAlign: 'center';
-    } = {
-      fontSize: 12,
-      fill: 'rgba(0, 0, 0, 0.65)',
-      textAlign: 'center',
-    };
-    return (
-      <Chart height={height} data={data} scale={cols} padding={[-16, 0, 16, 0]} forceFit={forceFit}>
-        <Coord type="polar" startAngle={-1.25 * Math.PI} endAngle={0.25 * Math.PI} radius={0.8} />
-        <Axis name="1" line={undefined} />
-        <Axis
-          line={undefined}
-          tickLine={undefined}
-          subTickLine={undefined}
-          name="value"
-          zIndex={2}
-          label={{
-            offset: -12,
-            formatter,
-            textStyle: textStyle,
+  const textStyle: {
+    fontSize: number;
+    fill: string;
+    textAlign: 'center';
+  } = {
+    fontSize: 12,
+    fill: 'rgba(0, 0, 0, 0.65)',
+    textAlign: 'center',
+  };
+
+  return (
+    <Chart height={height} data={data} scale={cols} padding={[-16, 0, 16, 0]} forceFit={forceFit}>
+      <Coord type="polar" startAngle={-1.25 * Math.PI} endAngle={0.25 * Math.PI} radius={0.8} />
+      <Axis name="1" line={undefined} />
+      <Axis
+        line={undefined}
+        tickLine={undefined}
+        subTickLine={undefined}
+        name="value"
+        zIndex={2}
+        label={{
+          offset: -12,
+          formatter,
+          textStyle,
+        }}
+      />
+      <Guide>
+        <Line
+          start={[3, 0.905]}
+          end={[3, 0.85]}
+          lineStyle={{
+            stroke: color,
+            lineDash: undefined,
+            lineWidth: 2,
           }}
         />
-        <Guide>
-          <Line
-            start={[3, 0.905]}
-            end={[3, 0.85]}
-            lineStyle={{
-              stroke: color,
-              lineDash: undefined,
-              lineWidth: 2,
-            }}
-          />
-          <Line
-            start={[5, 0.905]}
-            end={[5, 0.85]}
-            lineStyle={{
-              stroke: color,
-              lineDash: undefined,
-              lineWidth: 3,
-            }}
-          />
-          <Line
-            start={[7, 0.905]}
-            end={[7, 0.85]}
-            lineStyle={{
-              stroke: color,
-              lineDash: undefined,
-              lineWidth: 3,
-            }}
-          />
-          <Arc
-            start={[0, 0.965]}
-            end={[10, 0.965]}
-            style={{
-              stroke: bgColor,
-              lineWidth: 10,
-            }}
-          />
-          <Arc
-            start={[0, 0.965]}
-            end={[data[0].value, 0.965]}
-            style={{
-              stroke: color,
-              lineWidth: 10,
-            }}
-          />
-          <Html position={['50%', '95%']} html={renderHtml()} />
-        </Guide>
-        <Geom
-          line={false}
-          type="point"
-          position="value*1"
-          shape="pointer"
-          color={color}
-          active={false}
+        <Line
+          start={[5, 0.905]}
+          end={[5, 0.85]}
+          lineStyle={{
+            stroke: color,
+            lineDash: undefined,
+            lineWidth: 3,
+          }}
         />
-      </Chart>
-    );
-  }
-}
+        <Line
+          start={[7, 0.905]}
+          end={[7, 0.85]}
+          lineStyle={{
+            stroke: color,
+            lineDash: undefined,
+            lineWidth: 3,
+          }}
+        />
+        <Arc
+          start={[0, 0.965]}
+          end={[10, 0.965]}
+          style={{
+            stroke: bgColor,
+            lineWidth: 10,
+          }}
+        />
+        <Arc
+          start={[0, 0.965]}
+          end={[data[0].value, 0.965]}
+          style={{
+            stroke: color,
+            lineWidth: 10,
+          }}
+        />
+        <Html position={['50%', '95%']} html={renderHtml()} />
+      </Guide>
+      <Geom
+        line={false}
+        type="point"
+        position="value*1"
+        shape="pointer"
+        color={color}
+        active={false}
+      />
+    </Chart>
+  );
+};
 
 export default autoHeight()(Gauge);
diff --git a/DashboardAnalysis/src/components/Charts/MiniArea/index.tsx b/DashboardAnalysis/src/components/Charts/MiniArea/index.tsx
index 5684aa51..e2eecb42 100644
--- a/DashboardAnalysis/src/components/Charts/MiniArea/index.tsx
+++ b/DashboardAnalysis/src/components/Charts/MiniArea/index.tsx
@@ -1,133 +1,130 @@
+import { Axis, Chart, Geom, Tooltip, AxisProps } from 'bizcharts';
+
 import React from 'react';
-import { Chart, Axis, Tooltip, Geom } from 'bizcharts';
 import autoHeight from '../autoHeight';
 import styles from '../index.less';
 
-export interface IAxis {
-  title: any;
-  line: any;
-  gridAlign: any;
-  labels: any;
-  tickLine: any;
-  grid: any;
-}
-
-export interface IMiniAreaProps {
+export interface MiniAreaProps {
   color?: string;
   height?: number;
   borderColor?: string;
   line?: boolean;
   animate?: boolean;
-  xAxis?: IAxis;
+  xAxis?: AxisProps;
   forceFit?: boolean;
-  scale?: { x: any; y: any };
-  yAxis?: IAxis;
+  scale?: {
+    x?: {
+      tickCount: number;
+    };
+    y?: {
+      tickCount: number;
+    };
+  };
+  yAxis?: Partial<AxisProps>;
   borderWidth?: number;
-  data: Array<{
+  data: {
     x: number | string;
     y: number;
-  }>;
+  }[];
 }
 
-class MiniArea extends React.Component<IMiniAreaProps> {
-  render() {
-    const {
-      height = 1,
-      data = [],
-      forceFit = true,
-      color = 'rgba(24, 144, 255, 0.2)',
-      borderColor = '#1089ff',
-      scale = { x: {}, y: {} },
-      borderWidth = 2,
-      line,
-      xAxis,
-      yAxis,
-      animate = true,
-    } = this.props;
+const MiniArea: React.FC<MiniAreaProps> = props => {
+  const {
+    height = 1,
+    data = [],
+    forceFit = true,
+    color = 'rgba(24, 144, 255, 0.2)',
+    borderColor = '#1089ff',
+    scale = { x: {}, y: {} },
+    borderWidth = 2,
+    line,
+    xAxis,
+    yAxis,
+    animate = true,
+  } = props;
 
-    const padding: [number, number, number, number] = [36, 5, 30, 5];
+  const padding: [number, number, number, number] = [36, 5, 30, 5];
 
-    const scaleProps = {
-      x: {
-        type: 'cat',
-        range: [0, 1],
-        ...scale!.x,
-      },
-      y: {
-        min: 0,
-        ...scale!.y,
-      },
-    };
+  const scaleProps = {
+    x: {
+      type: 'cat',
+      range: [0, 1],
+      ...scale.x,
+    },
+    y: {
+      min: 0,
+      ...scale.y,
+    },
+  };
 
-    const tooltip: [string, (...args: any[]) => { name?: string; value: string }] = [
-      'x*y',
-      (x: string, y: string) => ({
-        name: x,
-        value: y,
-      }),
-    ];
+  const tooltip: [string, (...args: any[]) => { name?: string; value: string }] = [
+    'x*y',
+    (x: string, y: string) => ({
+      name: x,
+      value: y,
+    }),
+  ];
 
-    const chartHeight = height + 54;
+  const chartHeight = height + 54;
 
-    return (
-      <div className={styles.miniChart} style={{ height }}>
-        <div className={styles.chartContent}>
-          {height > 0 && (
-            <Chart
-              animate={animate}
-              scale={scaleProps}
-              height={chartHeight}
-              forceFit={forceFit}
-              data={data}
-              padding={padding}
-            >
-              <Axis
-                key="axis-x"
-                name="x"
-                label={false}
-                line={false}
-                tickLine={false}
-                grid={false}
-                {...xAxis}
-              />
-              <Axis
-                key="axis-y"
-                name="y"
-                label={false}
-                line={false}
-                tickLine={false}
-                grid={false}
-                {...yAxis}
-              />
-              <Tooltip showTitle={false} crosshairs={false} />
+  return (
+    <div className={styles.miniChart} style={{ height }}>
+      <div className={styles.chartContent}>
+        {height > 0 && (
+          <Chart
+            animate={animate}
+            scale={scaleProps}
+            height={chartHeight}
+            forceFit={forceFit}
+            data={data}
+            padding={padding}
+          >
+            <Axis
+              key="axis-x"
+              name="x"
+              label={undefined}
+              line={undefined}
+              tickLine={undefined}
+              grid={undefined}
+              {...xAxis}
+            />
+            <Axis
+              key="axis-y"
+              name="y"
+              label={undefined}
+              line={undefined}
+              tickLine={undefined}
+              grid={undefined}
+              {...yAxis}
+            />
+            <Tooltip showTitle={false} crosshairs={false} />
+            <Geom
+              type="area"
+              position="x*y"
+              color={color}
+              tooltip={tooltip}
+              shape="smooth"
+              style={{
+                fillOpacity: 1,
+              }}
+            />
+            {line ? (
               <Geom
-                type="area"
+                type="line"
                 position="x*y"
-                color={color}
-                tooltip={tooltip}
                 shape="smooth"
-                style={{
-                  fillOpacity: 1,
-                }}
+                color={borderColor}
+                size={borderWidth}
+                tooltip={false}
               />
-              {line ? (
-                <Geom
-                  type="line"
-                  position="x*y"
-                  shape="smooth"
-                  color={borderColor}
-                  size={borderWidth}
-                  tooltip={false}
-                />
-              ) : (
-                <span style={{ display: 'none' }} />
-              )}
-            </Chart>
-          )}
-        </div>
+            ) : (
+              <span style={{ display: 'none' }} />
+            )}
+          </Chart>
+        )}
       </div>
-    );
-  }
-}
+    </div>
+  );
+};
 
 export default autoHeight()(MiniArea);
diff --git a/DashboardAnalysis/src/components/Charts/MiniBar/index.tsx b/DashboardAnalysis/src/components/Charts/MiniBar/index.tsx
index d0fe9d4c..044ba3c0 100644
--- a/DashboardAnalysis/src/components/Charts/MiniBar/index.tsx
+++ b/DashboardAnalysis/src/components/Charts/MiniBar/index.tsx
@@ -1,61 +1,54 @@
+import { Chart, Geom, Tooltip } from 'bizcharts';
+
 import React from 'react';
-import { Chart, Tooltip, Geom } from 'bizcharts';
 import autoHeight from '../autoHeight';
 import styles from '../index.less';
 
-export interface IMiniBarProps {
+export interface MiniBarProps {
   color?: string;
   height?: number;
-  data: Array<{
+  data: {
     x: number | string;
     y: number;
-  }>;
+  }[];
   forceFit?: boolean;
   style?: React.CSSProperties;
 }
 
-class MiniBar extends React.Component<IMiniBarProps> {
-  render() {
-    const { height = 0, forceFit = true, color = '#1890FF', data = [] } = this.props;
-
-    const scale = {
-      x: {
-        type: 'cat',
-      },
-      y: {
-        min: 0,
-      },
-    };
-
-    const padding: [number, number, number, number] = [36, 5, 30, 5];
-
-    const tooltip: [string, (...args: any[]) => { name?: string; value: string }] = [
-      'x*y',
-      (x: string, y: string) => ({
-        name: x,
-        value: y,
-      }),
-    ];
-
-    // for tooltip not to be hide
-    const chartHeight = height + 54;
-
-    return (
-      <div className={styles.miniChart} style={{ height }}>
-        <div className={styles.chartContent}>
-          <Chart
-            scale={scale}
-            height={chartHeight}
-            forceFit={forceFit}
-            data={data}
-            padding={padding}
-          >
-            <Tooltip showTitle={false} crosshairs={false} />
-            <Geom type="interval" position="x*y" color={color} tooltip={tooltip} />
-          </Chart>
-        </div>
+const MiniBar: React.FC<MiniBarProps> = props => {
+  const { height = 0, forceFit = true, color = '#1890FF', data = [] } = props;
+
+  const scale = {
+    x: {
+      type: 'cat',
+    },
+    y: {
+      min: 0,
+    },
+  };
+
+  const padding: [number, number, number, number] = [36, 5, 30, 5];
+
+  const tooltip: [string, (...args: any[]) => { name?: string; value: string }] = [
+    'x*y',
+    (x: string, y: string) => ({
+      name: x,
+      value: y,
+    }),
+  ];
+
+  // for tooltip not to be hide
+  const chartHeight = height + 54;
+
+  return (
+    <div className={styles.miniChart} style={{ height }}>
+      <div className={styles.chartContent}>
+        <Chart scale={scale} height={chartHeight} forceFit={forceFit} data={data} padding={padding}>
+          <Tooltip showTitle={false} crosshairs={false} />
+          <Geom type="interval" position="x*y" color={color} tooltip={tooltip} />
+        </Chart>
       </div>
-    );
-  }
-}
+    </div>
+  );
+};
 export default autoHeight()(MiniBar);
diff --git a/DashboardAnalysis/src/components/Charts/MiniProgress/index.tsx b/DashboardAnalysis/src/components/Charts/MiniProgress/index.tsx
index c0d1507d..5ea0b993 100644
--- a/DashboardAnalysis/src/components/Charts/MiniProgress/index.tsx
+++ b/DashboardAnalysis/src/components/Charts/MiniProgress/index.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Tooltip } from 'antd';
 import styles from './index.less';
 
-export interface IMiniProgressProps {
+export interface MiniProgressProps {
   target: number;
   targetLabel?: string;
   color?: string;
@@ -11,33 +11,31 @@ export interface IMiniProgressProps {
   style?: React.CSSProperties;
 }
 
-const MiniProgress: React.SFC<IMiniProgressProps> = ({
+const MiniProgress: React.SFC<MiniProgressProps> = ({
   targetLabel,
   target,
   color = 'rgb(19, 194, 194)',
   strokeWidth,
   percent,
-}) => {
-  return (
-    <div className={styles.miniProgress}>
-      <Tooltip title={targetLabel}>
-        <div className={styles.target} style={{ left: target ? `${target}%` : undefined }}>
-          <span style={{ backgroundColor: color || undefined }} />
-          <span style={{ backgroundColor: color || undefined }} />
-        </div>
-      </Tooltip>
-      <div className={styles.progressWrap}>
-        <div
-          className={styles.progress}
-          style={{
-            backgroundColor: color || undefined,
-            width: percent ? `${percent}%` : undefined,
-            height: strokeWidth || undefined,
-          }}
-        />
+}) => (
+  <div className={styles.miniProgress}>
+    <Tooltip title={targetLabel}>
+      <div className={styles.target} style={{ left: target ? `${target}%` : undefined }}>
+        <span style={{ backgroundColor: color || undefined }} />
+        <span style={{ backgroundColor: color || undefined }} />
       </div>
+    </Tooltip>
+    <div className={styles.progressWrap}>
+      <div
+        className={styles.progress}
+        style={{
+          backgroundColor: color || undefined,
+          width: percent ? `${percent}%` : undefined,
+          height: strokeWidth || undefined,
+        }}
+      />
     </div>
-  );
-};
+  </div>
+);
 
 export default MiniProgress;
diff --git a/DashboardAnalysis/src/components/Charts/Pie/index.tsx b/DashboardAnalysis/src/components/Charts/Pie/index.tsx
index 9ed8a9a3..ad27d90d 100644
--- a/DashboardAnalysis/src/components/Charts/Pie/index.tsx
+++ b/DashboardAnalysis/src/components/Charts/Pie/index.tsx
@@ -1,15 +1,15 @@
+import { Chart, Coord, Geom, Tooltip } from 'bizcharts';
 import React, { Component } from 'react';
-import { Chart, Tooltip, Geom, Coord } from 'bizcharts';
+
 import { DataView } from '@antv/data-set';
+import Debounce from 'lodash.debounce';
 import { Divider } from 'antd';
-import classNames from 'classnames';
 import ReactFitText from 'react-fittext';
-import Debounce from 'lodash-decorators/debounce';
-import Bind from 'lodash-decorators/bind';
+import classNames from 'classnames';
 import autoHeight from '../autoHeight';
-
 import styles from './index.less';
-export interface IPieProps {
+
+export interface PieProps {
   animate?: boolean;
   color?: string;
   colors?: string[];
@@ -19,10 +19,10 @@ export interface IPieProps {
   hasLegend?: boolean;
   padding?: [number, number, number, number];
   percent?: number;
-  data?: Array<{
+  data?: {
     x: string | string;
     y: number;
-  }>;
+  }[];
   inner?: number;
   lineWidth?: number;
   forceFit?: boolean;
@@ -34,19 +34,46 @@ export interface IPieProps {
   valueFormat?: (value: string) => string | React.ReactNode;
   subTitle?: React.ReactNode;
 }
-interface IPieState {
-  legendData: Array<{ checked: boolean; x: string; color: string; percent: number; y: string }>;
+interface PieState {
+  legendData: { checked: boolean; x: string; color: string; percent: number; y: string }[];
   legendBlock: boolean;
 }
-class Pie extends Component<IPieProps, IPieState> {
-  state: IPieState = {
+class Pie extends Component<PieProps, PieState> {
+  state: PieState = {
     legendData: [],
     legendBlock: false,
   };
 
-  requestRef: number | undefined;
-  root!: HTMLDivElement;
-  chart: G2.Chart | undefined;
+  requestRef: number | undefined = undefined;
+
+  root: HTMLDivElement | undefined = undefined;
+
+  chart: G2.Chart | undefined = undefined;
+
+  // for window resize auto responsive legend
+  resize = Debounce(() => {
+    const { hasLegend } = this.props;
+    const { legendBlock } = this.state;
+    if (!hasLegend || !this.root) {
+      window.removeEventListener('resize', this.resize);
+      return;
+    }
+    if (
+      this.root &&
+      this.root.parentNode &&
+      (this.root.parentNode as HTMLElement).clientWidth <= 380
+    ) {
+      if (!legendBlock) {
+        this.setState({
+          legendBlock: true,
+        });
+      }
+    } else if (legendBlock) {
+      this.setState({
+        legendBlock: false,
+      });
+    }
+  }, 400);
 
   componentDidMount() {
     window.addEventListener(
@@ -58,7 +85,7 @@ class Pie extends Component<IPieProps, IPieState> {
     );
   }
 
-  componentDidUpdate(preProps: IPieProps) {
+  componentDidUpdate(preProps: PieProps) {
     const { data } = this.props;
     if (data !== preProps.data) {
       // because of charts data create when rendered
@@ -90,7 +117,7 @@ class Pie extends Component<IPieProps, IPieState> {
     if (!this.chart) return;
     const geom = this.chart.getAllGeoms()[0]; // 获取所有的图形
     if (!geom) return;
-    const items = geom.get('dataArray') || []; // 获取图形对应的
+    const items = (geom as any).get('dataArray') || []; // 获取图形对应的
 
     const legendData = items.map((item: { color: any; _origin: any }[]) => {
       /* eslint no-underscore-dangle:0 */
@@ -104,6 +131,7 @@ class Pie extends Component<IPieProps, IPieState> {
       legendData,
     });
   };
+
   handleRoot = (n: HTMLDivElement) => {
     this.root = n;
   };
@@ -118,7 +146,7 @@ class Pie extends Component<IPieProps, IPieState> {
     const filteredLegendData = legendData.filter(l => l.checked).map(l => l.x);
 
     if (this.chart) {
-      this.chart.filter('x', val => filteredLegendData.indexOf(val + '') > -1);
+      this.chart.filter('x', val => filteredLegendData.indexOf(`${val}`) > -1);
     }
 
     this.setState({
@@ -126,33 +154,6 @@ class Pie extends Component<IPieProps, IPieState> {
     });
   };
 
-  // for window resize auto responsive legend
-  @Bind()
-  @Debounce(300)
-  resize() {
-    const { hasLegend } = this.props;
-    const { legendBlock } = this.state;
-    if (!hasLegend || !this.root) {
-      window.removeEventListener('resize', this.resize);
-      return;
-    }
-    if (
-      this.root &&
-      this.root.parentNode &&
-      (this.root.parentNode as HTMLElement).clientWidth <= 380
-    ) {
-      if (!legendBlock) {
-        this.setState({
-          legendBlock: true,
-        });
-      }
-    } else if (legendBlock) {
-      this.setState({
-        legendBlock: false,
-      });
-    }
-  }
-
   render() {
     const {
       valueFormat,
@@ -216,11 +217,11 @@ class Pie extends Component<IPieProps, IPieState> {
       data = [
         {
           x: '占比',
-          y: parseFloat(percent + ''),
+          y: parseFloat(`${percent}`),
         },
         {
           x: '反比',
-          y: 100 - parseFloat(percent + ''),
+          y: 100 - parseFloat(`${percent}`),
         },
       ];
     }
diff --git a/DashboardAnalysis/src/components/Charts/TagCloud/index.tsx b/DashboardAnalysis/src/components/Charts/TagCloud/index.tsx
index fc809826..8515ad86 100644
--- a/DashboardAnalysis/src/components/Charts/TagCloud/index.tsx
+++ b/DashboardAnalysis/src/components/Charts/TagCloud/index.tsx
@@ -1,8 +1,8 @@
+import { Chart, Coord, Geom, Shape, Tooltip } from 'bizcharts';
 import React, { Component } from 'react';
-import { Chart, Geom, Coord, Shape, Tooltip } from 'bizcharts';
+
 import DataSet from '@antv/data-set';
-import Debounce from 'lodash-decorators/debounce';
-import Bind from 'lodash-decorators/bind';
+import Debounce from 'lodash.debounce';
 import classNames from 'classnames';
 import autoHeight from '../autoHeight';
 import styles from './index.less';
@@ -12,33 +12,36 @@ import styles from './index.less';
 
 const imgUrl = 'https://gw.alipayobjects.com/zos/rmsportal/gWyeGLCdFFRavBGIDzWk.png';
 
-export interface ITagCloudProps {
-  data: Array<{
+export interface TagCloudProps {
+  data: {
     name: string;
     value: number;
-  }>;
+  }[];
   height?: number;
   className?: string;
   style?: React.CSSProperties;
 }
 
-interface ITagCloudState {
+interface TagCloudState {
   dv: any;
   height?: number;
   width: number;
 }
 
-class TagCloud extends Component<ITagCloudProps, ITagCloudState> {
+class TagCloud extends Component<TagCloudProps, TagCloudState> {
   state = {
     dv: null,
     height: 0,
     width: 0,
   };
-  isUnmount!: boolean;
-  requestRef!: number;
 
-  root: HTMLDivElement | undefined;
-  imageMask: HTMLImageElement | undefined;
+  isUnmount: boolean = false;
+
+  requestRef: number = 0;
+
+  root: HTMLDivElement | undefined = undefined;
+
+  imageMask: HTMLImageElement | undefined = undefined;
 
   componentDidMount() {
     requestAnimationFrame(() => {
@@ -48,22 +51,25 @@ class TagCloud extends Component<ITagCloudProps, ITagCloudState> {
     window.addEventListener('resize', this.resize, { passive: true });
   }
 
-  componentDidUpdate(preProps?: ITagCloudProps) {
+  componentDidUpdate(preProps?: TagCloudProps) {
     const { data } = this.props;
     if (preProps && JSON.stringify(preProps.data) !== JSON.stringify(data)) {
       this.renderChart(this.props);
     }
   }
+
   componentWillUnmount() {
     this.isUnmount = true;
     window.cancelAnimationFrame(this.requestRef);
     window.removeEventListener('resize', this.resize);
   }
+
   resize = () => {
     this.requestRef = requestAnimationFrame(() => {
       this.renderChart(this.props);
     });
   };
+
   saveRootRef = (node: HTMLDivElement) => {
     this.root = node;
   };
@@ -77,7 +83,8 @@ class TagCloud extends Component<ITagCloudProps, ITagCloudState> {
       origin?: any;
       color?: any;
     }) {
-      return Object.assign({}, cfg.style, {
+      return {
+        ...cfg.style,
         fillOpacity: cfg.opacity,
         fontSize: cfg.origin._origin.size,
         rotate: cfg.origin._origin.rotate,
@@ -86,7 +93,7 @@ class TagCloud extends Component<ITagCloudProps, ITagCloudState> {
         fontFamily: cfg.origin._origin.font,
         fill: cfg.color,
         textBaseline: 'Alphabetic',
-      });
+      };
     }
 
     (Shape as any).registerShape('point', 'cloud', {
@@ -96,18 +103,17 @@ class TagCloud extends Component<ITagCloudProps, ITagCloudState> {
       ) {
         const attrs = getTextAttrs(cfg);
         return container.addShape('text', {
-          attrs: Object.assign(attrs, {
+          attrs: {
+            ...attrs,
             x: cfg.x,
             y: cfg.y,
-          }),
+          },
         });
       },
     });
   };
 
-  @Bind()
-  @Debounce(500)
-  renderChart(nextProps: ITagCloudProps) {
+  renderChart = Debounce((nextProps: TagCloudProps) => {
     // const colors = ['#1890FF', '#41D9C7', '#2FC25B', '#FACC14', '#9AE65C'];
     const { data, height } = nextProps || this.props;
 
@@ -134,8 +140,8 @@ class TagCloud extends Component<ITagCloudProps, ITagCloudState> {
           return 0;
         },
         fontSize(d: { value: number }) {
-          // eslint-disable-next-line
-          return Math.pow((d.value - min) / (max - min), 2) * (17.5 - 5) + 5;
+          const size = ((d.value - min) / (max - min)) ** 2;
+          return size * (17.5 - 5) + 5;
         },
       });
 
@@ -159,7 +165,7 @@ class TagCloud extends Component<ITagCloudProps, ITagCloudState> {
     } else {
       onload();
     }
-  }
+  }, 500);
 
   render() {
     const { className, height } = this.props;
diff --git a/DashboardAnalysis/src/components/Charts/TimelineChart/index.tsx b/DashboardAnalysis/src/components/Charts/TimelineChart/index.tsx
index 2ccc3728..57c1516f 100644
--- a/DashboardAnalysis/src/components/Charts/TimelineChart/index.tsx
+++ b/DashboardAnalysis/src/components/Charts/TimelineChart/index.tsx
@@ -1,16 +1,17 @@
-import React from 'react';
-import { Chart, Tooltip, Geom, Legend, Axis } from 'bizcharts';
+import { Axis, Chart, Geom, Legend, Tooltip } from 'bizcharts';
+
 import DataSet from '@antv/data-set';
+import React from 'react';
 import Slider from 'bizcharts-plugin-slider';
 import autoHeight from '../autoHeight';
 import styles from './index.less';
 
-export interface ITimelineChartProps {
-  data: Array<{
+export interface TimelineChartProps {
+  data: {
     x: number;
     y1: number;
     y2: number;
-  }>;
+  }[];
   title?: string;
   titleMap: { y1: string; y2: string };
   padding?: [number, number, number, number];
@@ -19,115 +20,113 @@ export interface ITimelineChartProps {
   borderWidth?: number;
 }
 
-class TimelineChart extends React.Component<ITimelineChartProps> {
-  render() {
-    const {
-      title,
-      height = 400,
-      padding = [60, 20, 40, 40] as [number, number, number, number],
-      titleMap = {
-        y1: 'y1',
-        y2: 'y2',
-      },
-      borderWidth = 2,
-      data: sourceData,
-    } = this.props;
+const TimelineChart: React.FC<TimelineChartProps> = props => {
+  const {
+    title,
+    height = 400,
+    padding = [60, 20, 40, 40] as [number, number, number, number],
+    titleMap = {
+      y1: 'y1',
+      y2: 'y2',
+    },
+    borderWidth = 2,
+    data: sourceData,
+  } = props;
 
-    const data = Array.isArray(sourceData) ? sourceData : [{ x: 0, y1: 0, y2: 0 }];
+  const data = Array.isArray(sourceData) ? sourceData : [{ x: 0, y1: 0, y2: 0 }];
 
-    data.sort((a, b) => a.x - b.x);
+  data.sort((a, b) => a.x - b.x);
+
+  let max;
+  if (data[0] && data[0].y1 && data[0].y2) {
+    max = Math.max(
+      [...data].sort((a, b) => b.y1 - a.y1)[0].y1,
+      [...data].sort((a, b) => b.y2 - a.y2)[0].y2,
+    );
+  }
 
-    let max;
-    if (data[0] && data[0].y1 && data[0].y2) {
-      max = Math.max(
-        [...data].sort((a, b) => b.y1 - a.y1)[0].y1,
-        [...data].sort((a, b) => b.y2 - a.y2)[0].y2,
-      );
-    }
+  const ds = new DataSet({
+    state: {
+      start: data[0].x,
+      end: data[data.length - 1].x,
+    },
+  });
 
-    const ds = new DataSet({
-      state: {
-        start: data[0].x,
-        end: data[data.length - 1].x,
+  const dv = ds.createView();
+  dv.source(data)
+    .transform({
+      type: 'filter',
+      callback: (obj: { x: string }) => {
+        const date = obj.x;
+        return date <= ds.state.end && date >= ds.state.start;
       },
+    })
+    .transform({
+      type: 'map',
+      callback(row: { y1: string; y2: string }) {
+        const newRow = { ...row };
+        newRow[titleMap.y1] = row.y1;
+        newRow[titleMap.y2] = row.y2;
+        return newRow;
+      },
+    })
+    .transform({
+      type: 'fold',
+      fields: [titleMap.y1, titleMap.y2], // 展开字段集
+      key: 'key', // key字段
+      value: 'value', // value字段
     });
 
-    const dv = ds.createView();
-    dv.source(data)
-      .transform({
-        type: 'filter',
-        callback: (obj: { x: string }) => {
-          const date = obj.x;
-          return date <= ds.state.end && date >= ds.state.start;
-        },
-      })
-      .transform({
-        type: 'map',
-        callback(row: { y1: string; y2: string }) {
-          const newRow = { ...row };
-          newRow[titleMap.y1] = row.y1;
-          newRow[titleMap.y2] = row.y2;
-          return newRow;
-        },
-      })
-      .transform({
-        type: 'fold',
-        fields: [titleMap.y1, titleMap.y2], // 展开字段集
-        key: 'key', // key字段
-        value: 'value', // value字段
-      });
-
-    const timeScale = {
-      type: 'time',
-      tickInterval: 60 * 60 * 1000,
-      mask: 'HH:mm',
-      range: [0, 1],
-    };
+  const timeScale = {
+    type: 'time',
+    tickInterval: 60 * 60 * 1000,
+    mask: 'HH:mm',
+    range: [0, 1],
+  };
 
-    const cols = {
-      x: timeScale,
-      value: {
-        max,
-        min: 0,
-      },
-    };
+  const cols = {
+    x: timeScale,
+    value: {
+      max,
+      min: 0,
+    },
+  };
 
-    const SliderGen = () => (
-      <Slider
-        padding={[0, padding[1] + 20, 0, padding[3]]}
-        width="auto"
-        height={26}
-        xAxis="x"
-        yAxis="y1"
-        scales={{ x: timeScale }}
-        data={data}
-        start={ds.state.start}
-        end={ds.state.end}
-        backgroundChart={{ type: 'line' }}
-        onChange={({ startValue, endValue }: { startValue: string; endValue: string }) => {
-          ds.setState('start', startValue);
-          ds.setState('end', endValue);
-        }}
-      />
-    );
+  const SliderGen = () => (
+    <Slider
+      padding={[0, padding[1] + 20, 0, padding[3]]}
+      width="auto"
+      height={26}
+      xAxis="x"
+      yAxis="y1"
+      scales={{ x: timeScale }}
+      data={data}
+      start={ds.state.start}
+      end={ds.state.end}
+      backgroundChart={{ type: 'line' }}
+      onChange={({ startValue, endValue }: { startValue: string; endValue: string }) => {
+        ds.setState('start', startValue);
+        ds.setState('end', endValue);
+      }}
+    />
+  );
 
-    return (
-      <div className={styles.timelineChart} style={{ height: height + 30 }}>
-        <div>
-          {title && <h4>{title}</h4>}
-          <Chart height={height} padding={padding} data={dv} scale={cols} forceFit>
-            <Axis name="x" />
-            <Tooltip />
-            <Legend name="key" position="top" />
-            <Geom type="line" position="x*value" size={borderWidth} color="key" />
-          </Chart>
-          <div style={{ marginRight: -20 }}>
-            <SliderGen />
-          </div>
+  return (
+    <div className={styles.timelineChart} style={{ height: height + 30 }}>
+      <div>
+        {title && <h4>{title}</h4>}
+        <Chart height={height} padding={padding} data={dv} scale={cols} forceFit>
+          <Axis name="x" />
+          <Tooltip />
+          <Legend name="key" position="top" />
+          <Geom type="line" position="x*value" size={borderWidth} color="key" />
+        </Chart>
+        <div style={{ marginRight: -20 }}>
+          <SliderGen />
         </div>
       </div>
-    );
-  }
-}
+    </div>
+  );
+};
 
 export default autoHeight()(TimelineChart);
diff --git a/DashboardAnalysis/src/components/Charts/WaterWave/index.tsx b/DashboardAnalysis/src/components/Charts/WaterWave/index.tsx
index 9dba8216..065cd0c6 100644
--- a/DashboardAnalysis/src/components/Charts/WaterWave/index.tsx
+++ b/DashboardAnalysis/src/components/Charts/WaterWave/index.tsx
@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+
 import autoHeight from '../autoHeight';
 import styles from './index.less';
 
@@ -6,7 +7,7 @@ import styles from './index.less';
 /* eslint no-mixed-operators: 0 */
 // riddle: https://riddle.alibaba-inc.com/riddles/2d9a4b90
 
-export interface IWaterWaveProps {
+export interface WaterWaveProps {
   title: React.ReactNode;
   color?: string;
   height?: number;
@@ -14,13 +15,16 @@ export interface IWaterWaveProps {
   style?: React.CSSProperties;
 }
 
-class WaterWave extends Component<IWaterWaveProps> {
+class WaterWave extends Component<WaterWaveProps> {
   state = {
     radio: 1,
   };
+
   timer: number = 0;
-  root: HTMLDivElement | undefined | null;
-  node: HTMLCanvasElement | undefined | null;
+
+  root: HTMLDivElement | undefined | null = null;
+
+  node: HTMLCanvasElement | undefined | null = null;
 
   componentDidMount() {
     this.renderChart();
@@ -34,7 +38,7 @@ class WaterWave extends Component<IWaterWaveProps> {
     );
   }
 
-  componentDidUpdate(props: IWaterWaveProps) {
+  componentDidUpdate(props: WaterWaveProps) {
     const { percent } = this.props;
     if (props.percent !== percent) {
       // 不加这个会造成绘制缓慢
@@ -59,6 +63,7 @@ class WaterWave extends Component<IWaterWaveProps> {
       });
     }
   };
+
   renderChart(type?: string) {
     const { percent, color = '#1890FF' } = this.props;
     const data = percent / 100;
@@ -201,6 +206,7 @@ class WaterWave extends Component<IWaterWaveProps> {
     }
     render();
   }
+
   render() {
     const { radio } = this.state;
     const { percent, title, height = 1 } = this.props;
diff --git a/DashboardAnalysis/src/components/Charts/autoHeight.tsx b/DashboardAnalysis/src/components/Charts/autoHeight.tsx
index e7d14e07..ba20956d 100644
--- a/DashboardAnalysis/src/components/Charts/autoHeight.tsx
+++ b/DashboardAnalysis/src/components/Charts/autoHeight.tsx
@@ -6,15 +6,16 @@ export type IReactComponent<P = any> =
   | React.ClassicComponentClass<P>;
 
 function computeHeight(node: HTMLDivElement) {
-  node.style.height = '100%';
-  const totalHeight = parseInt(getComputedStyle(node).height + '', 10);
+  const { style } = node;
+  style.height = '100%';
+  const totalHeight = parseInt(`${getComputedStyle(node).height}`, 10);
   const padding =
-    parseInt(getComputedStyle(node).paddingTop + '', 10) +
-    parseInt(getComputedStyle(node).paddingBottom + '', 10);
+    parseInt(`${getComputedStyle(node).paddingTop}`, 10) +
+    parseInt(`${getComputedStyle(node).paddingBottom}`, 10);
   return totalHeight - padding;
 }
 
-function getAutoHeight(n: HTMLDivElement) {
+function getAutoHeight(n: HTMLDivElement | undefined) {
   if (!n) {
     return 0;
   }
@@ -30,24 +31,25 @@ function getAutoHeight(n: HTMLDivElement) {
   return height;
 }
 
-interface IAutoHeightProps {
+interface AutoHeightProps {
   height?: number;
 }
 
 function autoHeight() {
-  return function<P extends IAutoHeightProps>(
+  return <P extends AutoHeightProps>(
     WrappedComponent: React.ComponentClass<P> | React.SFC<P>,
-  ): React.ComponentClass<P> {
-    class AutoHeightComponent extends React.Component<P & IAutoHeightProps> {
+  ): React.ComponentClass<P> => {
+    class AutoHeightComponent extends React.Component<P & AutoHeightProps> {
       state = {
         computedHeight: 0,
       };
-      root!: HTMLDivElement;
+
+      root: HTMLDivElement | undefined = undefined;
+
       componentDidMount() {
         const { height } = this.props;
         if (!height) {
           let h = getAutoHeight(this.root);
-          // eslint-disable-next-line
           this.setState({ computedHeight: h });
           if (h < 1) {
             h = getAutoHeight(this.root);
@@ -55,9 +57,11 @@ function autoHeight() {
           }
         }
       }
+
       handleRoot = (node: HTMLDivElement) => {
         this.root = node;
       };
+
       render() {
         const { height } = this.props;
         const { computedHeight } = this.state;
diff --git a/DashboardAnalysis/src/components/Charts/index.tsx b/DashboardAnalysis/src/components/Charts/index.tsx
index 5e0815f1..50c27030 100644
--- a/DashboardAnalysis/src/components/Charts/index.tsx
+++ b/DashboardAnalysis/src/components/Charts/index.tsx
@@ -1,15 +1,15 @@
 import numeral from 'numeral';
+import Bar from './Bar';
 import ChartCard from './ChartCard';
 import Field from './Field';
-import Bar from './Bar';
-import Pie from './Pie';
 import Gauge from './Gauge';
 import MiniArea from './MiniArea';
 import MiniBar from './MiniBar';
 import MiniProgress from './MiniProgress';
-import WaterWave from './WaterWave';
+import Pie from './Pie';
 import TagCloud from './TagCloud';
 import TimelineChart from './TimelineChart';
+import WaterWave from './WaterWave';
 
 const yuan = (val: number | string) => `¥ ${numeral(val).format('0,0')}`;
 
diff --git a/DashboardAnalysis/src/components/IntroduceRow.tsx b/DashboardAnalysis/src/components/IntroduceRow.tsx
index c939584d..8057b6c8 100644
--- a/DashboardAnalysis/src/components/IntroduceRow.tsx
+++ b/DashboardAnalysis/src/components/IntroduceRow.tsx
@@ -1,13 +1,13 @@
-import React from 'react';
-import { Row, Col, Icon, Tooltip } from 'antd';
+import { Col, Icon, Row, Tooltip } from 'antd';
+
 import { FormattedMessage } from 'umi-plugin-react/locale';
-import Charts from './Charts';
+import React from 'react';
 import numeral from 'numeral';
-import styles from '../style.less';
-import Yuan from '../utils/Yuan';
+import { ChartCard, MiniArea, MiniBar, MiniProgress, Field } from './Charts';
+import { VisitDataType } from '../data.d';
 import Trend from './Trend';
-import { IVisitData } from '../data.d';
-const { ChartCard, MiniArea, MiniBar, MiniProgress, Field } = Charts;
+import Yuan from '../utils/Yuan';
+import styles from '../style.less';
 
 const topColResponsiveProps = {
   xs: 24,
@@ -18,148 +18,143 @@ const topColResponsiveProps = {
   style: { marginBottom: 24 },
 };
 
-const IntroduceRow = ({ loading, visitData }: { loading: boolean; visitData: IVisitData[] }) => {
-  return (
-    <Row gutter={24}>
-      <Col {...topColResponsiveProps}>
-        <ChartCard
-          bordered={false}
-          title={
-            <FormattedMessage id="BLOCK_NAME.analysis.total-sales" defaultMessage="Total Sales" />
-          }
-          action={
-            <Tooltip
-              title={
-                <FormattedMessage id="BLOCK_NAME.analysis.introduce" defaultMessage="Introduce" />
-              }
-            >
-              <Icon type="info-circle-o" />
-            </Tooltip>
-          }
-          loading={loading}
-          total={() => <Yuan>126560</Yuan>}
-          footer={
-            <Field
-              label={
-                <FormattedMessage id="BLOCK_NAME.analysis.day-sales" defaultMessage="Daily Sales" />
-              }
-              value={`￥${numeral(12423).format('0,0')}`}
-            />
-          }
-          contentHeight={46}
-        >
-          <Trend flag="up" style={{ marginRight: 16 }}>
-            <FormattedMessage id="BLOCK_NAME.analysis.week" defaultMessage="Weekly Changes" />
-            <span className={styles.trendText}>12%</span>
-          </Trend>
-          <Trend flag="down">
-            <FormattedMessage id="BLOCK_NAME.analysis.day" defaultMessage="Daily Changes" />
-            <span className={styles.trendText}>11%</span>
-          </Trend>
-        </ChartCard>
-      </Col>
+const IntroduceRow = ({ loading, visitData }: { loading: boolean; visitData: VisitDataType[] }) => (
+  <Row gutter={24}>
+    <Col {...topColResponsiveProps}>
+      <ChartCard
+        bordered={false}
+        title={
+          <FormattedMessage id="BLOCK_NAME.analysis.total-sales" defaultMessage="Total Sales" />
+        }
+        action={
+          <Tooltip
+            title={
+              <FormattedMessage id="BLOCK_NAME.analysis.introduce" defaultMessage="Introduce" />
+            }
+          >
+            <Icon type="info-circle-o" />
+          </Tooltip>
+        }
+        loading={loading}
+        total={() => <Yuan>126560</Yuan>}
+        footer={
+          <Field
+            label={
+              <FormattedMessage id="BLOCK_NAME.analysis.day-sales" defaultMessage="Daily Sales" />
+            }
+            value={`￥${numeral(12423).format('0,0')}`}
+          />
+        }
+        contentHeight={46}
+      >
+        <Trend flag="up" style={{ marginRight: 16 }}>
+          <FormattedMessage id="BLOCK_NAME.analysis.week" defaultMessage="Weekly Changes" />
+          <span className={styles.trendText}>12%</span>
+        </Trend>
+        <Trend flag="down">
+          <FormattedMessage id="BLOCK_NAME.analysis.day" defaultMessage="Daily Changes" />
+          <span className={styles.trendText}>11%</span>
+        </Trend>
+      </ChartCard>
+    </Col>
 
-      <Col {...topColResponsiveProps}>
-        <ChartCard
-          bordered={false}
-          loading={loading}
-          title={<FormattedMessage id="BLOCK_NAME.analysis.visits" defaultMessage="Visits" />}
-          action={
-            <Tooltip
-              title={
-                <FormattedMessage id="BLOCK_NAME.analysis.introduce" defaultMessage="Introduce" />
-              }
-            >
-              <Icon type="info-circle-o" />
-            </Tooltip>
-          }
-          total={numeral(8846).format('0,0')}
-          footer={
-            <Field
-              label={
-                <FormattedMessage
-                  id="BLOCK_NAME.analysis.day-visits"
-                  defaultMessage="Daily Visits"
-                />
-              }
-              value={numeral(1234).format('0,0')}
-            />
-          }
-          contentHeight={46}
-        >
-          <MiniArea color="#975FE4" data={visitData} />
-        </ChartCard>
-      </Col>
-      <Col {...topColResponsiveProps}>
-        <ChartCard
-          bordered={false}
-          loading={loading}
-          title={<FormattedMessage id="BLOCK_NAME.analysis.payments" defaultMessage="Payments" />}
-          action={
-            <Tooltip
-              title={
-                <FormattedMessage id="BLOCK_NAME.analysis.introduce" defaultMessage="Introduce" />
-              }
-            >
-              <Icon type="info-circle-o" />
-            </Tooltip>
-          }
-          total={numeral(6560).format('0,0')}
-          footer={
-            <Field
-              label={
-                <FormattedMessage
-                  id="BLOCK_NAME.analysis.conversion-rate"
-                  defaultMessage="Conversion Rate"
-                />
-              }
-              value="60%"
-            />
-          }
-          contentHeight={46}
-        >
-          <MiniBar data={visitData} />
-        </ChartCard>
-      </Col>
-      <Col {...topColResponsiveProps}>
-        <ChartCard
-          loading={loading}
-          bordered={false}
-          title={
-            <FormattedMessage
-              id="BLOCK_NAME.analysis.operational-effect"
-              defaultMessage="Operational Effect"
-            />
-          }
-          action={
-            <Tooltip
-              title={
-                <FormattedMessage id="BLOCK_NAME.analysis.introduce" defaultMessage="Introduce" />
-              }
-            >
-              <Icon type="info-circle-o" />
-            </Tooltip>
-          }
-          total="78%"
-          footer={
-            <div style={{ whiteSpace: 'nowrap', overflow: 'hidden' }}>
-              <Trend flag="up" style={{ marginRight: 16 }}>
-                <FormattedMessage id="BLOCK_NAME.analysis.week" defaultMessage="Weekly Changes" />
-                <span className={styles.trendText}>12%</span>
-              </Trend>
-              <Trend flag="down">
-                <FormattedMessage id="BLOCK_NAME.analysis.day" defaultMessage="Weekly Changes" />
-                <span className={styles.trendText}>11%</span>
-              </Trend>
-            </div>
-          }
-          contentHeight={46}
-        >
-          <MiniProgress percent={78} strokeWidth={8} target={80} color="#13C2C2" />
-        </ChartCard>
-      </Col>
-    </Row>
-  );
-};
+    <Col {...topColResponsiveProps}>
+      <ChartCard
+        bordered={false}
+        loading={loading}
+        title={<FormattedMessage id="BLOCK_NAME.analysis.visits" defaultMessage="Visits" />}
+        action={
+          <Tooltip
+            title={
+              <FormattedMessage id="BLOCK_NAME.analysis.introduce" defaultMessage="Introduce" />
+            }
+          >
+            <Icon type="info-circle-o" />
+          </Tooltip>
+        }
+        total={numeral(8846).format('0,0')}
+        footer={
+          <Field
+            label={
+              <FormattedMessage id="BLOCK_NAME.analysis.day-visits" defaultMessage="Daily Visits" />
+            }
+            value={numeral(1234).format('0,0')}
+          />
+        }
+        contentHeight={46}
+      >
+        <MiniArea color="#975FE4" data={visitData} />
+      </ChartCard>
+    </Col>
+    <Col {...topColResponsiveProps}>
+      <ChartCard
+        bordered={false}
+        loading={loading}
+        title={<FormattedMessage id="BLOCK_NAME.analysis.payments" defaultMessage="Payments" />}
+        action={
+          <Tooltip
+            title={
+              <FormattedMessage id="BLOCK_NAME.analysis.introduce" defaultMessage="Introduce" />
+            }
+          >
+            <Icon type="info-circle-o" />
+          </Tooltip>
+        }
+        total={numeral(6560).format('0,0')}
+        footer={
+          <Field
+            label={
+              <FormattedMessage
+                id="BLOCK_NAME.analysis.conversion-rate"
+                defaultMessage="Conversion Rate"
+              />
+            }
+            value="60%"
+          />
+        }
+        contentHeight={46}
+      >
+        <MiniBar data={visitData} />
+      </ChartCard>
+    </Col>
+    <Col {...topColResponsiveProps}>
+      <ChartCard
+        loading={loading}
+        bordered={false}
+        title={
+          <FormattedMessage
+            id="BLOCK_NAME.analysis.operational-effect"
+            defaultMessage="Operational Effect"
+          />
+        }
+        action={
+          <Tooltip
+            title={
+              <FormattedMessage id="BLOCK_NAME.analysis.introduce" defaultMessage="Introduce" />
+            }
+          >
+            <Icon type="info-circle-o" />
+          </Tooltip>
+        }
+        total="78%"
+        footer={
+          <div style={{ whiteSpace: 'nowrap', overflow: 'hidden' }}>
+            <Trend flag="up" style={{ marginRight: 16 }}>
+              <FormattedMessage id="BLOCK_NAME.analysis.week" defaultMessage="Weekly Changes" />
+              <span className={styles.trendText}>12%</span>
+            </Trend>
+            <Trend flag="down">
+              <FormattedMessage id="BLOCK_NAME.analysis.day" defaultMessage="Weekly Changes" />
+              <span className={styles.trendText}>11%</span>
+            </Trend>
+          </div>
+        }
+        contentHeight={46}
+      >
+        <MiniProgress percent={78} strokeWidth={8} target={80} color="#13C2C2" />
+      </ChartCard>
+    </Col>
+  </Row>
+);
 
 export default IntroduceRow;
diff --git a/DashboardAnalysis/src/components/NumberInfo/index.tsx b/DashboardAnalysis/src/components/NumberInfo/index.tsx
index a8df6e6d..d573c091 100644
--- a/DashboardAnalysis/src/components/NumberInfo/index.tsx
+++ b/DashboardAnalysis/src/components/NumberInfo/index.tsx
@@ -1,7 +1,8 @@
-import React from 'react';
 import { Icon } from 'antd';
+import React from 'react';
 import classNames from 'classnames';
 import styles from './index.less';
+
 export interface NumberInfoProps {
   title?: React.ReactNode | string;
   subTitle?: React.ReactNode | string;
diff --git a/DashboardAnalysis/src/components/OfflineData.tsx b/DashboardAnalysis/src/components/OfflineData.tsx
index 18992698..deec77a8 100644
--- a/DashboardAnalysis/src/components/OfflineData.tsx
+++ b/DashboardAnalysis/src/components/OfflineData.tsx
@@ -1,48 +1,46 @@
+import { Card, Col, Row, Tabs } from 'antd';
+import { FormattedMessage, formatMessage } from 'umi-plugin-react/locale';
 import React from 'react';
-import { Card, Tabs, Row, Col } from 'antd';
-import { formatMessage, FormattedMessage } from 'umi-plugin-react/locale';
-import Charts from './Charts';
-import styles from '../style.less';
+import { OfflineChartData, OfflineDataType } from '../data.d';
+
+import { TimelineChart, Pie } from './Charts';
 import NumberInfo from './NumberInfo';
-import { IOfflineData, IOfflineChartData } from '../data';
-const { TimelineChart, Pie } = Charts;
+import styles from '../style.less';
 
 const CustomTab = ({
   data,
   currentTabKey: currentKey,
 }: {
-  data: IOfflineData;
+  data: OfflineDataType;
   currentTabKey: string;
-}) => {
-  return (
-    <Row gutter={8} style={{ width: 138, margin: '8px 0' }}>
-      <Col span={12}>
-        <NumberInfo
-          title={data.name}
-          subTitle={
-            <FormattedMessage
-              id="BLOCK_NAME.analysis.conversion-rate"
-              defaultMessage="Conversion Rate"
-            />
-          }
-          gap={2}
-          total={`${data.cvr * 100}%`}
-          theme={currentKey !== data.name ? 'light' : undefined}
-        />
-      </Col>
-      <Col span={12} style={{ paddingTop: 36 }}>
-        <Pie
-          animate={false}
-          inner={0.55}
-          tooltip={false}
-          margin={[0, 0, 0, 0]}
-          percent={data.cvr * 100}
-          height={64}
-        />
-      </Col>
-    </Row>
-  );
-};
+}) => (
+  <Row gutter={8} style={{ width: 138, margin: '8px 0' }}>
+    <Col span={12}>
+      <NumberInfo
+        title={data.name}
+        subTitle={
+          <FormattedMessage
+            id="BLOCK_NAME.analysis.conversion-rate"
+            defaultMessage="Conversion Rate"
+          />
+        }
+        gap={2}
+        total={`${data.cvr * 100}%`}
+        theme={currentKey !== data.name ? 'light' : undefined}
+      />
+    </Col>
+    <Col span={12} style={{ paddingTop: 36 }}>
+      <Pie
+        animate={false}
+        inner={0.55}
+        tooltip={false}
+        margin={[0, 0, 0, 0]}
+        percent={data.cvr * 100}
+        height={64}
+      />
+    </Col>
+  </Row>
+);
 
 const { TabPane } = Tabs;
 
@@ -55,8 +53,8 @@ const OfflineData = ({
 }: {
   activeKey: string;
   loading: boolean;
-  offlineData: IOfflineData[];
-  offlineChartData: IOfflineChartData[];
+  offlineData: OfflineDataType[];
+  offlineChartData: OfflineChartData[];
   handleTabChange: (activeKey: string) => void;
 }) => (
   <Card loading={loading} className={styles.offlineCard} bordered={false} style={{ marginTop: 32 }}>
diff --git a/DashboardAnalysis/src/components/ProportionSales.tsx b/DashboardAnalysis/src/components/ProportionSales.tsx
index e37cda0f..29ffb432 100644
--- a/DashboardAnalysis/src/components/ProportionSales.tsx
+++ b/DashboardAnalysis/src/components/ProportionSales.tsx
@@ -1,13 +1,12 @@
-import React from 'react';
 import { Card, Radio } from 'antd';
-import Charts from './Charts';
+
 import { FormattedMessage } from 'umi-plugin-react/locale';
-import styles from '../style.less';
-import Yuan from '../utils/Yuan';
 import { RadioChangeEvent } from 'antd/es/radio';
-import { ISalesData } from '../data';
-
-const { Pie } = Charts;
+import React from 'react';
+import { VisitDataType } from '../data.d';
+import { Pie } from './Charts';
+import Yuan from '../utils/Yuan';
+import styles from '../style.less';
 
 const ProportionSales = ({
   dropdownGroup,
@@ -19,61 +18,59 @@ const ProportionSales = ({
   loading: boolean;
   dropdownGroup: React.ReactNode;
   salesType: 'all' | 'online' | 'stores';
-  salesPieData: ISalesData[];
+  salesPieData: VisitDataType[];
   handleChangeSalesType?: (e: RadioChangeEvent) => void;
-}) => {
-  return (
-    <Card
-      loading={loading}
-      className={styles.salesCard}
-      bordered={false}
-      title={
-        <FormattedMessage
-          id="BLOCK_NAME.analysis.the-proportion-of-sales"
-          defaultMessage="The Proportion of Sales"
-        />
-      }
-      bodyStyle={{ padding: 24 }}
-      extra={
-        <div className={styles.salesCardExtra}>
-          {dropdownGroup}
-          <div className={styles.salesTypeRadio}>
-            <Radio.Group value={salesType} onChange={handleChangeSalesType}>
-              <Radio.Button value="all">
-                <FormattedMessage id="BLOCK_NAME.channel.all" defaultMessage="ALL" />
-              </Radio.Button>
-              <Radio.Button value="online">
-                <FormattedMessage id="BLOCK_NAME.channel.online" defaultMessage="Online" />
-              </Radio.Button>
-              <Radio.Button value="stores">
-                <FormattedMessage id="BLOCK_NAME.channel.stores" defaultMessage="Stores" />
-              </Radio.Button>
-            </Radio.Group>
-          </div>
+}) => (
+  <Card
+    loading={loading}
+    className={styles.salesCard}
+    bordered={false}
+    title={
+      <FormattedMessage
+        id="BLOCK_NAME.analysis.the-proportion-of-sales"
+        defaultMessage="The Proportion of Sales"
+      />
+    }
+    bodyStyle={{ padding: 24 }}
+    extra={
+      <div className={styles.salesCardExtra}>
+        {dropdownGroup}
+        <div className={styles.salesTypeRadio}>
+          <Radio.Group value={salesType} onChange={handleChangeSalesType}>
+            <Radio.Button value="all">
+              <FormattedMessage id="BLOCK_NAME.channel.all" defaultMessage="ALL" />
+            </Radio.Button>
+            <Radio.Button value="online">
+              <FormattedMessage id="BLOCK_NAME.channel.online" defaultMessage="Online" />
+            </Radio.Button>
+            <Radio.Button value="stores">
+              <FormattedMessage id="BLOCK_NAME.channel.stores" defaultMessage="Stores" />
+            </Radio.Button>
+          </Radio.Group>
         </div>
-      }
-      style={{ marginTop: 24 }}
-    >
-      <div
-        style={{
-          minHeight: 380,
-        }}
-      >
-        <h4 style={{ marginTop: 8, marginBottom: 32 }}>
-          <FormattedMessage id="BLOCK_NAME.analysis.sales" defaultMessage="Sales" />
-        </h4>
-        <Pie
-          hasLegend
-          subTitle={<FormattedMessage id="BLOCK_NAME.analysis.sales" defaultMessage="Sales" />}
-          total={() => <Yuan>{salesPieData.reduce((pre, now) => now.y + pre, 0)}</Yuan>}
-          data={salesPieData}
-          valueFormat={value => <Yuan>{value}</Yuan>}
-          height={248}
-          lineWidth={4}
-        />
       </div>
-    </Card>
-  );
-};
+    }
+    style={{ marginTop: 24 }}
+  >
+    <div
+      style={{
+        minHeight: 380,
+      }}
+    >
+      <h4 style={{ marginTop: 8, marginBottom: 32 }}>
+        <FormattedMessage id="BLOCK_NAME.analysis.sales" defaultMessage="Sales" />
+      </h4>
+      <Pie
+        hasLegend
+        subTitle={<FormattedMessage id="BLOCK_NAME.analysis.sales" defaultMessage="Sales" />}
+        total={() => <Yuan>{salesPieData.reduce((pre, now) => now.y + pre, 0)}</Yuan>}
+        data={salesPieData}
+        valueFormat={value => <Yuan>{value}</Yuan>}
+        height={248}
+        lineWidth={4}
+      />
+    </div>
+  </Card>
+);
 
 export default ProportionSales;
diff --git a/DashboardAnalysis/src/components/SalesCard.tsx b/DashboardAnalysis/src/components/SalesCard.tsx
index d8b1f30c..269e1902 100644
--- a/DashboardAnalysis/src/components/SalesCard.tsx
+++ b/DashboardAnalysis/src/components/SalesCard.tsx
@@ -1,14 +1,13 @@
-import React from 'react';
-import { Row, Col, Card, Tabs, DatePicker } from 'antd';
+import { Card, Col, DatePicker, Row, Tabs } from 'antd';
 import { FormattedMessage, formatMessage } from 'umi-plugin-react/locale';
-import numeral from 'numeral';
-import Charts from './Charts';
+
 import { RangePickerValue } from 'antd/es/date-picker/interface';
-import { ISalesData } from '../data';
+import React from 'react';
+import numeral from 'numeral';
+import { VisitDataType } from '../data.d';
+import { Bar } from './Charts';
 import styles from '../style.less';
 
-const { Bar } = Charts;
-
 const { RangePicker } = DatePicker;
 const { TabPane } = Tabs;
 
@@ -30,7 +29,7 @@ const SalesCard = ({
 }: {
   rangePickerValue: RangePickerValue;
   isActive: (key: 'today' | 'week' | 'month' | 'year') => string;
-  salesData: ISalesData[];
+  salesData: VisitDataType[];
   loading: boolean;
   handleRangePickerChange: (dates: RangePickerValue, dateStrings: [string, string]) => void;
   selectDate: (key: 'today' | 'week' | 'month' | 'year') => void;
diff --git a/DashboardAnalysis/src/components/TopSearch.tsx b/DashboardAnalysis/src/components/TopSearch.tsx
index aab57b0f..198147ff 100644
--- a/DashboardAnalysis/src/components/TopSearch.tsx
+++ b/DashboardAnalysis/src/components/TopSearch.tsx
@@ -1,14 +1,13 @@
-import React from 'react';
-import { Row, Col, Table, Tooltip, Card, Icon } from 'antd';
+import { Card, Col, Icon, Row, Table, Tooltip } from 'antd';
 import { FormattedMessage } from 'umi-plugin-react/locale';
-import Charts from './Charts';
-import Trend from './Trend';
-import NumberInfo from './NumberInfo';
+import React from 'react';
 import numeral from 'numeral';
-import styles from '../style.less';
-import { ISearchData, IVisitData2 } from '../data';
+import { SearchDataType, VisitDataType } from '../data.d';
 
-const { MiniArea } = Charts;
+import { MiniArea } from './Charts';
+import NumberInfo from './NumberInfo';
+import Trend from './Trend';
+import styles from '../style.less';
 
 const columns = [
   {
@@ -51,9 +50,9 @@ const TopSearch = ({
   dropdownGroup,
 }: {
   loading: boolean;
-  visitData2: IVisitData2[];
+  visitData2: VisitDataType[];
   dropdownGroup: React.ReactNode;
-  searchData: ISearchData[];
+  searchData: SearchDataType[];
 }) => (
   <Card
     loading={loading}
diff --git a/DashboardAnalysis/src/components/Trend/index.tsx b/DashboardAnalysis/src/components/Trend/index.tsx
index ee8df20e..2bba484e 100644
--- a/DashboardAnalysis/src/components/Trend/index.tsx
+++ b/DashboardAnalysis/src/components/Trend/index.tsx
@@ -1,9 +1,9 @@
-import React from 'react';
 import { Icon } from 'antd';
+import React from 'react';
 import classNames from 'classnames';
 import styles from './index.less';
 
-export interface ITrendProps {
+export interface TrendProps {
   colorful?: boolean;
   flag: 'up' | 'down';
   style?: React.CSSProperties;
@@ -11,7 +11,7 @@ export interface ITrendProps {
   className?: string;
 }
 
-const Trend: React.SFC<ITrendProps> = ({
+const Trend: React.SFC<TrendProps> = ({
   colorful = true,
   reverseColor = false,
   flag,
diff --git a/DashboardAnalysis/src/data.d.ts b/DashboardAnalysis/src/data.d.ts
index 20df2e20..adc1c993 100644
--- a/DashboardAnalysis/src/data.d.ts
+++ b/DashboardAnalysis/src/data.d.ts
@@ -1,19 +1,9 @@
-export interface IVisitData {
+export interface VisitDataType {
   x: string;
   y: number;
 }
 
-export interface IVisitData2 {
-  x: string;
-  y: number;
-}
-
-export interface ISalesData {
-  x: string;
-  y: number;
-}
-
-export interface ISearchData {
+export interface SearchDataType {
   index: number;
   keyword: string;
   count: number;
@@ -21,47 +11,32 @@ export interface ISearchData {
   status: number;
 }
 
-export interface IOfflineData {
+export interface OfflineDataType {
   name: string;
   cvr: number;
 }
 
-export interface IOfflineChartData {
+export interface OfflineChartData {
   x: any;
   y1: number;
   y2: number;
 }
 
-export interface ISalesTypeData {
-  x: string;
-  y: number;
-}
-
-export interface ISalesTypeDataOnline {
-  x: string;
-  y: number;
-}
-
-export interface ISalesTypeDataOffline {
-  x: string;
-  y: number;
-}
-
-export interface IRadarData {
+export interface RadarData {
   name: string;
   label: string;
   value: number;
 }
 
-export interface IAnalysisData {
-  visitData: IVisitData[];
-  visitData2: IVisitData2[];
-  salesData: ISalesData[];
-  searchData: ISearchData[];
-  offlineData: IOfflineData[];
-  offlineChartData: IOfflineChartData[];
-  salesTypeData: ISalesTypeData[];
-  salesTypeDataOnline: ISalesTypeDataOnline[];
-  salesTypeDataOffline: ISalesTypeDataOffline[];
-  radarData: IRadarData[];
+export interface AnalysisData {
+  visitData: VisitDataType[];
+  visitData2: VisitDataType[];
+  salesData: VisitDataType[];
+  searchData: SearchDataType[];
+  offlineData: OfflineDataType[];
+  offlineChartData: OfflineChartData[];
+  salesTypeData: VisitDataType[];
+  salesTypeDataOnline: VisitDataType[];
+  salesTypeDataOffline: VisitDataType[];
+  radarData: RadarData[];
 }
diff --git a/DashboardAnalysis/src/index.tsx b/DashboardAnalysis/src/index.tsx
index 40d7341d..e66186ce 100644
--- a/DashboardAnalysis/src/index.tsx
+++ b/DashboardAnalysis/src/index.tsx
@@ -1,14 +1,15 @@
+import { Col, Dropdown, Icon, Menu, Row } from 'antd';
 import React, { Component, Suspense } from 'react';
-import { connect } from 'dva';
-import { Row, Col, Icon, Menu, Dropdown } from 'antd';
+
+import { Dispatch } from 'redux';
+import { GridContent } from '@ant-design/pro-layout';
+import { RadioChangeEvent } from 'antd/es/radio';
 import { RangePickerValue } from 'antd/es/date-picker/interface';
+import { connect } from 'dva';
+import PageLoading from './components/PageLoading';
 import { getTimeDistance } from './utils/utils';
+import { AnalysisData } from './data.d';
 import styles from './style.less';
-import PageLoading from './components/PageLoading';
-import { Dispatch } from 'redux';
-import { IAnalysisData } from './data.d';
-import { RadioChangeEvent } from 'antd/es/radio';
-import { GridContent } from '@ant-design/pro-layout';
 
 const IntroduceRow = React.lazy(() => import('./components/IntroduceRow'));
 const SalesCard = React.lazy(() => import('./components/SalesCard'));
@@ -17,7 +18,7 @@ const ProportionSales = React.lazy(() => import('./components/ProportionSales'))
 const OfflineData = React.lazy(() => import('./components/OfflineData'));
 
 interface BLOCK_NAME_CAMEL_CASEProps {
-  BLOCK_NAME_CAMEL_CASE: IAnalysisData;
+  BLOCK_NAME_CAMEL_CASE: AnalysisData;
   dispatch: Dispatch<any>;
   loading: boolean;
 }
@@ -51,8 +52,11 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<
     currentTabKey: '',
     rangePickerValue: getTimeDistance('year'),
   };
-  reqRef!: number;
-  timeoutId!: number;
+
+  reqRef: number = 0;
+
+  timeoutId: number = 0;
+
   componentDidMount() {
     const { dispatch } = this.props;
     this.reqRef = requestAnimationFrame(() => {
diff --git a/DashboardAnalysis/src/model.tsx b/DashboardAnalysis/src/model.tsx
index bfe131a9..f6e17748 100644
--- a/DashboardAnalysis/src/model.tsx
+++ b/DashboardAnalysis/src/model.tsx
@@ -1,24 +1,24 @@
-import { fakeChartData } from './service';
-import { IAnalysisData } from './data';
-import { Reducer } from 'redux';
+import { AnyAction, Reducer } from 'redux';
+
 import { EffectsCommandMap } from 'dva';
-import { AnyAction } from 'redux';
+import { AnalysisData } from './data.d';
+import { fakeChartData } from './service';
 
 export type Effect = (
   action: AnyAction,
-  effects: EffectsCommandMap & { select: <T>(func: (state: IAnalysisData) => T) => T },
+  effects: EffectsCommandMap & { select: <T>(func: (state: AnalysisData) => T) => T },
 ) => void;
 
 export interface ModelType {
   namespace: string;
-  state: IAnalysisData;
+  state: AnalysisData;
   effects: {
     fetch: Effect;
     fetchSalesData: Effect;
   };
   reducers: {
-    save: Reducer<IAnalysisData>;
-    clear: Reducer<IAnalysisData>;
+    save: Reducer<AnalysisData>;
+    clear: Reducer<AnalysisData>;
   };
 }
 
diff --git a/DashboardAnalysis/src/utils/Yuan.tsx b/DashboardAnalysis/src/utils/Yuan.tsx
index eafefd41..9f71019c 100644
--- a/DashboardAnalysis/src/utils/Yuan.tsx
+++ b/DashboardAnalysis/src/utils/Yuan.tsx
@@ -6,7 +6,8 @@ import { yuan } from '../components/Charts';
 export default class Yuan extends React.Component<{
   children: React.ReactText;
 }> {
-  main: HTMLSpanElement | undefined | null;
+  main: HTMLSpanElement | undefined | null = null;
+
   componentDidMount() {
     this.renderToHtml();
   }
@@ -14,6 +15,7 @@ export default class Yuan extends React.Component<{
   componentDidUpdate() {
     this.renderToHtml();
   }
+
   renderToHtml = () => {
     const { children } = this.props;
     if (this.main) {
diff --git a/DashboardAnalysis/src/utils/utils.ts b/DashboardAnalysis/src/utils/utils.ts
index dfd9bd7d..f2ce1b66 100644
--- a/DashboardAnalysis/src/utils/utils.ts
+++ b/DashboardAnalysis/src/utils/utils.ts
@@ -1,5 +1,5 @@
-import moment from 'moment';
 import { RangePickerValue } from 'antd/es/date-picker/interface';
+import moment from 'moment';
 
 export function fixedZero(val: number) {
   return val * 1 < 10 ? `0${val}` : val;
diff --git a/DashboardMonitor/package.json b/DashboardMonitor/package.json
index 30fdbd68..ba645b33 100644
--- a/DashboardMonitor/package.json
+++ b/DashboardMonitor/package.json
@@ -13,21 +13,25 @@
   "dependencies": {
     "@ant-design/pro-layout": "^4.5.2",
     "@antv/data-set": "^0.10.2",
+    "@types/lodash.debounce": "^4.0.6",
     "antd": "^3.16.3",
     "bizcharts": "^3.5.3-beta.0",
     "bizcharts-plugin-slider": "^2.1.1-beta.1",
+    "classnames": "^2.2.6",
     "dva": "^2.4.0",
+    "lodash.debounce": "^4.0.8",
     "numeral": "^2.0.6",
     "react": "^16.8.6",
     "react-fittext": "^1.0.0",
-    "umi-request": "^1.0.0"
-  },
-  "devDependencies": {
-    "@types/numeral": "^0.0.25",
-    "mockjs": "^1.0.1-beta3",
+    "redux": "^4.0.1",
     "umi": "^2.6.9",
     "umi-plugin-block-dev": "^1.0.0",
-    "umi-plugin-react": "^1.7.2"
+    "umi-plugin-react": "^1.7.2",
+    "umi-request": "^1.0.0",
+    "mockjs": "^1.0.1-beta3"
+  },
+  "devDependencies": {
+    "@types/numeral": "^0.0.25"
   },
   "license": "ISC",
   "blockConfig": {
diff --git a/DashboardMonitor/src/components/ActiveChart/index.tsx b/DashboardMonitor/src/components/ActiveChart/index.tsx
index 6437ad24..71d508f8 100644
--- a/DashboardMonitor/src/components/ActiveChart/index.tsx
+++ b/DashboardMonitor/src/components/ActiveChart/index.tsx
@@ -1,10 +1,9 @@
 import React, { Component } from 'react';
-import Charts from '../Charts';
+
 import { Statistic } from 'antd';
+import { MiniArea } from '../Charts';
 import styles from './index.less';
 
-const { MiniArea } = Charts;
-
 function fixedZero(val: number) {
   return val * 1 < 10 ? `0${val}` : val;
 }
@@ -24,12 +23,15 @@ export default class ActiveChart extends Component {
   state = {
     activeData: getActiveData(),
   };
-  timer: number | undefined;
-  requestRef: number | undefined;
+
+  timer: number | undefined = undefined;
+
+  requestRef: number | undefined = undefined;
 
   componentDidMount() {
     this.loopData();
   }
+
   componentWillUnmount() {
     clearTimeout(this.timer);
     if (this.requestRef) {
diff --git a/DashboardMonitor/src/components/Charts/Gauge/index.tsx b/DashboardMonitor/src/components/Charts/Gauge/index.tsx
index 45e18614..78c97968 100644
--- a/DashboardMonitor/src/components/Charts/Gauge/index.tsx
+++ b/DashboardMonitor/src/components/Charts/Gauge/index.tsx
@@ -1,10 +1,11 @@
+import { Axis, Chart, Coord, Geom, Guide, Shape } from 'bizcharts';
+
 import React from 'react';
-import { Chart, Geom, Axis, Coord, Guide, Shape } from 'bizcharts';
 import autoHeight from '../autoHeight';
 
 const { Arc, Html, Line } = Guide;
 
-export interface IGaugeProps {
+export interface GaugeProps {
   title: React.ReactNode;
   color?: string;
   height?: number;
@@ -30,148 +31,149 @@ const defaultFormatter = (val: string): string => {
   }
 };
 
-Shape.registerShape!('point', 'pointer', {
-  drawShape(cfg: any, group: any) {
-    let point = cfg.points[0];
-    point = (this as any).parsePoint(point);
-    const center = (this as any).parsePoint({
-      x: 0,
-      y: 0,
-    });
-    group.addShape('line', {
-      attrs: {
-        x1: center.x,
-        y1: center.y,
-        x2: point.x,
-        y2: point.y,
-        stroke: cfg.color,
-        lineWidth: 2,
-        lineCap: 'round',
-      },
-    });
-    return group.addShape('circle', {
-      attrs: {
-        x: center.x,
-        y: center.y,
-        r: 6,
-        stroke: cfg.color,
-        lineWidth: 3,
-        fill: '#fff',
-      },
-    });
-  },
-});
+if (Shape.registerShape) {
+  Shape.registerShape('point', 'pointer', {
+    drawShape(cfg: any, group: any) {
+      let point = cfg.points[0];
+      point = (this as any).parsePoint(point);
+      const center = (this as any).parsePoint({
+        x: 0,
+        y: 0,
+      });
+      group.addShape('line', {
+        attrs: {
+          x1: center.x,
+          y1: center.y,
+          x2: point.x,
+          y2: point.y,
+          stroke: cfg.color,
+          lineWidth: 2,
+          lineCap: 'round',
+        },
+      });
+      return group.addShape('circle', {
+        attrs: {
+          x: center.x,
+          y: center.y,
+          r: 6,
+          stroke: cfg.color,
+          lineWidth: 3,
+          fill: '#fff',
+        },
+      });
+    },
+  });
+}
+
+const Gauge: React.FC<GaugeProps> = props => {
+  const {
+    title,
+    height = 1,
+    percent,
+    forceFit = true,
+    formatter = defaultFormatter,
+    color = '#2F9CFF',
+    bgColor = '#F0F2F5',
+  } = props;
+  const cols = {
+    value: {
+      type: 'linear',
+      min: 0,
+      max: 10,
+      tickCount: 6,
+      nice: true,
+    },
+  };
+  const data = [{ value: percent / 10 }];
 
-class Gauge extends React.Component<IGaugeProps> {
-  render() {
-    const {
-      title,
-      height = 1,
-      percent,
-      forceFit = true,
-      formatter = defaultFormatter,
-      color = '#2F9CFF',
-      bgColor = '#F0F2F5',
-    } = this.props;
-    const cols = {
-      value: {
-        type: 'linear',
-        min: 0,
-        max: 10,
-        tickCount: 6,
-        nice: true,
-      },
-    };
-    const renderHtml = () => `
+  const renderHtml = () => `
     <div style="width: 300px;text-align: center;font-size: 12px!important;">
       <p style="font-size: 14px; color: rgba(0,0,0,0.43);margin: 0;">${title}</p>
       <p style="font-size: 24px;color: rgba(0,0,0,0.85);margin: 0;">
         ${(data[0].value * 10).toFixed(2)}%
       </p>
     </div>`;
-    const data = [{ value: percent / 10 }];
-    const textStyle: {
-      fontSize: number;
-      fill: string;
-      textAlign: 'center';
-    } = {
-      fontSize: 12,
-      fill: 'rgba(0, 0, 0, 0.65)',
-      textAlign: 'center',
-    };
-    return (
-      <Chart height={height} data={data} scale={cols} padding={[-16, 0, 16, 0]} forceFit={forceFit}>
-        <Coord type="polar" startAngle={-1.25 * Math.PI} endAngle={0.25 * Math.PI} radius={0.8} />
-        <Axis name="1" line={undefined} />
-        <Axis
-          line={undefined}
-          tickLine={undefined}
-          subTickLine={undefined}
-          name="value"
-          zIndex={2}
-          label={{
-            offset: -12,
-            formatter,
-            textStyle: textStyle,
+  const textStyle: {
+    fontSize: number;
+    fill: string;
+    textAlign: 'center';
+  } = {
+    fontSize: 12,
+    fill: 'rgba(0, 0, 0, 0.65)',
+    textAlign: 'center',
+  };
+  return (
+    <Chart height={height} data={data} scale={cols} padding={[-16, 0, 16, 0]} forceFit={forceFit}>
+      <Coord type="polar" startAngle={-1.25 * Math.PI} endAngle={0.25 * Math.PI} radius={0.8} />
+      <Axis name="1" line={undefined} />
+      <Axis
+        line={undefined}
+        tickLine={undefined}
+        subTickLine={undefined}
+        name="value"
+        zIndex={2}
+        label={{
+          offset: -12,
+          formatter,
+          textStyle,
+        }}
+      />
+      <Guide>
+        <Line
+          start={[3, 0.905]}
+          end={[3, 0.85]}
+          lineStyle={{
+            stroke: color,
+            lineDash: undefined,
+            lineWidth: 2,
           }}
         />
-        <Guide>
-          <Line
-            start={[3, 0.905]}
-            end={[3, 0.85]}
-            lineStyle={{
-              stroke: color,
-              lineDash: undefined,
-              lineWidth: 2,
-            }}
-          />
-          <Line
-            start={[5, 0.905]}
-            end={[5, 0.85]}
-            lineStyle={{
-              stroke: color,
-              lineDash: undefined,
-              lineWidth: 3,
-            }}
-          />
-          <Line
-            start={[7, 0.905]}
-            end={[7, 0.85]}
-            lineStyle={{
-              stroke: color,
-              lineDash: undefined,
-              lineWidth: 3,
-            }}
-          />
-          <Arc
-            start={[0, 0.965]}
-            end={[10, 0.965]}
-            style={{
-              stroke: bgColor,
-              lineWidth: 10,
-            }}
-          />
-          <Arc
-            start={[0, 0.965]}
-            end={[data[0].value, 0.965]}
-            style={{
-              stroke: color,
-              lineWidth: 10,
-            }}
-          />
-          <Html position={['50%', '95%']} html={renderHtml()} />
-        </Guide>
-        <Geom
-          line={false}
-          type="point"
-          position="value*1"
-          shape="pointer"
-          color={color}
-          active={false}
+        <Line
+          start={[5, 0.905]}
+          end={[5, 0.85]}
+          lineStyle={{
+            stroke: color,
+            lineDash: undefined,
+            lineWidth: 3,
+          }}
         />
-      </Chart>
-    );
-  }
-}
+        <Line
+          start={[7, 0.905]}
+          end={[7, 0.85]}
+          lineStyle={{
+            stroke: color,
+            lineDash: undefined,
+            lineWidth: 3,
+          }}
+        />
+        <Arc
+          start={[0, 0.965]}
+          end={[10, 0.965]}
+          style={{
+            stroke: bgColor,
+            lineWidth: 10,
+          }}
+        />
+        <Arc
+          start={[0, 0.965]}
+          end={[data[0].value, 0.965]}
+          style={{
+            stroke: color,
+            lineWidth: 10,
+          }}
+        />
+        <Html position={['50%', '95%']} html={renderHtml()} />
+      </Guide>
+      <Geom
+        line={false}
+        type="point"
+        position="value*1"
+        shape="pointer"
+        color={color}
+        active={false}
+      />
+    </Chart>
+  );
+};
 
 export default autoHeight()(Gauge);
diff --git a/DashboardMonitor/src/components/Charts/MiniArea/index.tsx b/DashboardMonitor/src/components/Charts/MiniArea/index.tsx
index 3eb588d6..22ea7f0b 100644
--- a/DashboardMonitor/src/components/Charts/MiniArea/index.tsx
+++ b/DashboardMonitor/src/components/Charts/MiniArea/index.tsx
@@ -1,134 +1,130 @@
+import { Axis, AxisProps, Chart, Geom, Tooltip } from 'bizcharts';
+
 import React from 'react';
-import { Chart, Axis, Tooltip, Geom } from 'bizcharts';
 import autoHeight from '../autoHeight';
 import styles from '../index.less';
 
-export interface IAxis {
-  title: any;
-  line: any;
-  gridAlign: any;
-  labels: any;
-  tickLine: any;
-  grid: any;
-  label: any;
-}
-
-export interface IMiniAreaProps {
+export interface MiniAreaProps {
   color?: string;
   height?: number;
   borderColor?: string;
   line?: boolean;
   animate?: boolean;
-  xAxis?: IAxis;
+  xAxis?: AxisProps;
   forceFit?: boolean;
-  scale?: { x?: any; y?: any };
-  yAxis?: Partial<IAxis>;
+  scale?: {
+    x?: {
+      tickCount: number;
+    };
+    y?: {
+      tickCount: number;
+    };
+  };
+  yAxis?: Partial<AxisProps>;
   borderWidth?: number;
-  data: Array<{
+  data: {
     x: number | string;
     y: number;
-  }>;
+  }[];
 }
 
-class MiniArea extends React.Component<IMiniAreaProps> {
-  render() {
-    const {
-      height = 1,
-      data = [],
-      forceFit = true,
-      color = 'rgba(24, 144, 255, 0.2)',
-      borderColor = '#1089ff',
-      scale = { x: {}, y: {} },
-      borderWidth = 2,
-      line,
-      xAxis,
-      yAxis,
-      animate = true,
-    } = this.props;
+const MiniArea: React.FC<MiniAreaProps> = props => {
+  const {
+    height = 1,
+    data = [],
+    forceFit = true,
+    color = 'rgba(24, 144, 255, 0.2)',
+    borderColor = '#1089ff',
+    scale = { x: {}, y: {} },
+    borderWidth = 2,
+    line,
+    xAxis,
+    yAxis,
+    animate = true,
+  } = props;
 
-    const padding: [number, number, number, number] = [36, 5, 30, 5];
+  const padding: [number, number, number, number] = [36, 5, 30, 5];
 
-    const scaleProps = {
-      x: {
-        type: 'cat',
-        range: [0, 1],
-        ...scale!.x,
-      },
-      y: {
-        min: 0,
-        ...scale!.y,
-      },
-    };
+  const scaleProps = {
+    x: {
+      type: 'cat',
+      range: [0, 1],
+      ...scale.x,
+    },
+    y: {
+      min: 0,
+      ...scale.y,
+    },
+  };
 
-    const tooltip: [string, (...args: any[]) => { name?: string; value: string }] = [
-      'x*y',
-      (x: string, y: string) => ({
-        name: x,
-        value: y,
-      }),
-    ];
+  const tooltip: [string, (...args: any[]) => { name?: string; value: string }] = [
+    'x*y',
+    (x: string, y: string) => ({
+      name: x,
+      value: y,
+    }),
+  ];
 
-    const chartHeight = height + 54;
+  const chartHeight = height + 54;
 
-    return (
-      <div className={styles.miniChart} style={{ height }}>
-        <div className={styles.chartContent}>
-          {height > 0 && (
-            <Chart
-              animate={animate}
-              scale={scaleProps}
-              height={chartHeight}
-              forceFit={forceFit}
-              data={data}
-              padding={padding}
-            >
-              <Axis
-                key="axis-x"
-                name="x"
-                label={false}
-                line={false}
-                tickLine={false}
-                grid={false}
-                {...xAxis}
-              />
-              <Axis
-                key="axis-y"
-                name="y"
-                label={false}
-                line={false}
-                tickLine={false}
-                grid={false}
-                {...yAxis}
-              />
-              <Tooltip showTitle={false} crosshairs={false} />
+  return (
+    <div className={styles.miniChart} style={{ height }}>
+      <div className={styles.chartContent}>
+        {height > 0 && (
+          <Chart
+            animate={animate}
+            scale={scaleProps}
+            height={chartHeight}
+            forceFit={forceFit}
+            data={data}
+            padding={padding}
+          >
+            <Axis
+              key="axis-x"
+              name="x"
+              label={null}
+              line={null}
+              tickLine={null}
+              grid={null}
+              {...xAxis}
+            />
+            <Axis
+              key="axis-y"
+              name="y"
+              label={null}
+              line={null}
+              tickLine={null}
+              grid={null}
+              {...yAxis}
+            />
+            <Tooltip showTitle={false} crosshairs={false} />
+            <Geom
+              type="area"
+              position="x*y"
+              color={color}
+              tooltip={tooltip}
+              shape="smooth"
+              style={{
+                fillOpacity: 1,
+              }}
+            />
+            {line ? (
               <Geom
-                type="area"
+                type="line"
                 position="x*y"
-                color={color}
-                tooltip={tooltip}
                 shape="smooth"
-                style={{
-                  fillOpacity: 1,
-                }}
+                color={borderColor}
+                size={borderWidth}
+                tooltip={false}
               />
-              {line ? (
-                <Geom
-                  type="line"
-                  position="x*y"
-                  shape="smooth"
-                  color={borderColor}
-                  size={borderWidth}
-                  tooltip={false}
-                />
-              ) : (
-                <span style={{ display: 'none' }} />
-              )}
-            </Chart>
-          )}
-        </div>
+            ) : (
+              <span style={{ display: 'none' }} />
+            )}
+          </Chart>
+        )}
       </div>
-    );
-  }
-}
+    </div>
+  );
+};
 
 export default autoHeight()(MiniArea);
diff --git a/DashboardMonitor/src/components/Charts/Pie/index.tsx b/DashboardMonitor/src/components/Charts/Pie/index.tsx
index 9ed8a9a3..b0071a5b 100644
--- a/DashboardMonitor/src/components/Charts/Pie/index.tsx
+++ b/DashboardMonitor/src/components/Charts/Pie/index.tsx
@@ -1,15 +1,15 @@
+import { Chart, Coord, Geom, Tooltip } from 'bizcharts';
 import React, { Component } from 'react';
-import { Chart, Tooltip, Geom, Coord } from 'bizcharts';
+
 import { DataView } from '@antv/data-set';
+import Debounce from 'lodash.debounce';
 import { Divider } from 'antd';
-import classNames from 'classnames';
 import ReactFitText from 'react-fittext';
-import Debounce from 'lodash-decorators/debounce';
-import Bind from 'lodash-decorators/bind';
+import classNames from 'classnames';
 import autoHeight from '../autoHeight';
-
 import styles from './index.less';
-export interface IPieProps {
+
+export interface PieProps {
   animate?: boolean;
   color?: string;
   colors?: string[];
@@ -19,10 +19,10 @@ export interface IPieProps {
   hasLegend?: boolean;
   padding?: [number, number, number, number];
   percent?: number;
-  data?: Array<{
+  data?: {
     x: string | string;
     y: number;
-  }>;
+  }[];
   inner?: number;
   lineWidth?: number;
   forceFit?: boolean;
@@ -34,19 +34,46 @@ export interface IPieProps {
   valueFormat?: (value: string) => string | React.ReactNode;
   subTitle?: React.ReactNode;
 }
-interface IPieState {
-  legendData: Array<{ checked: boolean; x: string; color: string; percent: number; y: string }>;
+interface PieState {
+  legendData: { checked: boolean; x: string; color: string; percent: number; y: string }[];
   legendBlock: boolean;
 }
-class Pie extends Component<IPieProps, IPieState> {
-  state: IPieState = {
+class Pie extends Component<PieProps, PieState> {
+  state: PieState = {
     legendData: [],
     legendBlock: false,
   };
 
-  requestRef: number | undefined;
-  root!: HTMLDivElement;
-  chart: G2.Chart | undefined;
+  chart: G2.Chart | undefined = undefined;
+
+  root: HTMLDivElement | undefined = undefined;
+
+  requestRef: number | undefined = 0;
+
+  // for window resize auto responsive legend
+  resize = Debounce(() => {
+    const { hasLegend } = this.props;
+    const { legendBlock } = this.state;
+    if (!hasLegend || !this.root) {
+      window.removeEventListener('resize', this.resize);
+      return;
+    }
+    if (
+      this.root &&
+      this.root.parentNode &&
+      (this.root.parentNode as HTMLElement).clientWidth <= 380
+    ) {
+      if (!legendBlock) {
+        this.setState({
+          legendBlock: true,
+        });
+      }
+    } else if (legendBlock) {
+      this.setState({
+        legendBlock: false,
+      });
+    }
+  }, 300);
 
   componentDidMount() {
     window.addEventListener(
@@ -58,7 +85,7 @@ class Pie extends Component<IPieProps, IPieState> {
     );
   }
 
-  componentDidUpdate(preProps: IPieProps) {
+  componentDidUpdate(preProps: PieProps) {
     const { data } = this.props;
     if (data !== preProps.data) {
       // because of charts data create when rendered
@@ -90,7 +117,8 @@ class Pie extends Component<IPieProps, IPieState> {
     if (!this.chart) return;
     const geom = this.chart.getAllGeoms()[0]; // 获取所有的图形
     if (!geom) return;
-    const items = geom.get('dataArray') || []; // 获取图形对应的
+    // g2 的类型有问题
+    const items = (geom as any).get('dataArray') || []; // 获取图形对应的
 
     const legendData = items.map((item: { color: any; _origin: any }[]) => {
       /* eslint no-underscore-dangle:0 */
@@ -104,11 +132,12 @@ class Pie extends Component<IPieProps, IPieState> {
       legendData,
     });
   };
+
   handleRoot = (n: HTMLDivElement) => {
     this.root = n;
   };
 
-  handleLegendClick = (item: any, i: string | number) => {
+  handleLegendClick = (item: { checked: boolean }, i: string | number) => {
     const newItem = item;
     newItem.checked = !newItem.checked;
 
@@ -118,7 +147,7 @@ class Pie extends Component<IPieProps, IPieState> {
     const filteredLegendData = legendData.filter(l => l.checked).map(l => l.x);
 
     if (this.chart) {
-      this.chart.filter('x', val => filteredLegendData.indexOf(val + '') > -1);
+      this.chart.filter('x', val => filteredLegendData.indexOf(`${val}`) > -1);
     }
 
     this.setState({
@@ -126,33 +155,6 @@ class Pie extends Component<IPieProps, IPieState> {
     });
   };
 
-  // for window resize auto responsive legend
-  @Bind()
-  @Debounce(300)
-  resize() {
-    const { hasLegend } = this.props;
-    const { legendBlock } = this.state;
-    if (!hasLegend || !this.root) {
-      window.removeEventListener('resize', this.resize);
-      return;
-    }
-    if (
-      this.root &&
-      this.root.parentNode &&
-      (this.root.parentNode as HTMLElement).clientWidth <= 380
-    ) {
-      if (!legendBlock) {
-        this.setState({
-          legendBlock: true,
-        });
-      }
-    } else if (legendBlock) {
-      this.setState({
-        legendBlock: false,
-      });
-    }
-  }
-
   render() {
     const {
       valueFormat,
@@ -216,11 +218,11 @@ class Pie extends Component<IPieProps, IPieState> {
       data = [
         {
           x: '占比',
-          y: parseFloat(percent + ''),
+          y: parseFloat(`${percent}`),
         },
         {
           x: '反比',
-          y: 100 - parseFloat(percent + ''),
+          y: 100 - parseFloat(`${percent}`),
         },
       ];
     }
diff --git a/DashboardMonitor/src/components/Charts/TagCloud/index.tsx b/DashboardMonitor/src/components/Charts/TagCloud/index.tsx
index ce2d6ca9..c6565427 100644
--- a/DashboardMonitor/src/components/Charts/TagCloud/index.tsx
+++ b/DashboardMonitor/src/components/Charts/TagCloud/index.tsx
@@ -1,8 +1,8 @@
+import { Chart, Coord, Geom, Shape, Tooltip } from 'bizcharts';
 import React, { Component } from 'react';
-import { Chart, Geom, Coord, Shape, Tooltip } from 'bizcharts';
+
 import DataSet from '@antv/data-set';
-import Debounce from 'lodash-decorators/debounce';
-import Bind from 'lodash-decorators/bind';
+import Debounce from 'lodash.debounce';
 import classNames from 'classnames';
 import autoHeight from '../autoHeight';
 import styles from './index.less';
@@ -12,33 +12,36 @@ import styles from './index.less';
 
 const imgUrl = 'https://gw.alipayobjects.com/zos/rmsportal/gWyeGLCdFFRavBGIDzWk.png';
 
-export interface ITagCloudProps {
-  data: Array<{
+export interface TagCloudProps {
+  data: {
     name: string;
     value: string;
-  }>;
+  }[];
   height?: number;
   className?: string;
   style?: React.CSSProperties;
 }
 
-interface ITagCloudState {
+interface TagCloudState {
   dv: any;
   height?: number;
   width: number;
 }
 
-class TagCloud extends Component<ITagCloudProps, ITagCloudState> {
+class TagCloud extends Component<TagCloudProps, TagCloudState> {
   state = {
     dv: null,
     height: 0,
     width: 0,
   };
-  isUnmount!: boolean;
-  requestRef!: number;
 
-  root: HTMLDivElement | undefined;
-  imageMask: HTMLImageElement | undefined;
+  requestRef: number = 0;
+
+  isUnmount: boolean = false;
+
+  root: HTMLDivElement | undefined = undefined;
+
+  imageMask: HTMLImageElement | undefined = undefined;
 
   componentDidMount() {
     requestAnimationFrame(() => {
@@ -48,22 +51,25 @@ class TagCloud extends Component<ITagCloudProps, ITagCloudState> {
     window.addEventListener('resize', this.resize, { passive: true });
   }
 
-  componentDidUpdate(preProps?: ITagCloudProps) {
+  componentDidUpdate(preProps?: TagCloudProps) {
     const { data } = this.props;
     if (preProps && JSON.stringify(preProps.data) !== JSON.stringify(data)) {
       this.renderChart(this.props);
     }
   }
+
   componentWillUnmount() {
     this.isUnmount = true;
     window.cancelAnimationFrame(this.requestRef);
     window.removeEventListener('resize', this.resize);
   }
+
   resize = () => {
     this.requestRef = requestAnimationFrame(() => {
       this.renderChart(this.props);
     });
   };
+
   saveRootRef = (node: HTMLDivElement) => {
     this.root = node;
   };
@@ -77,7 +83,8 @@ class TagCloud extends Component<ITagCloudProps, ITagCloudState> {
       origin?: any;
       color?: any;
     }) {
-      return Object.assign({}, cfg.style, {
+      return {
+        ...cfg.style,
         fillOpacity: cfg.opacity,
         fontSize: cfg.origin._origin.size,
         rotate: cfg.origin._origin.rotate,
@@ -86,7 +93,7 @@ class TagCloud extends Component<ITagCloudProps, ITagCloudState> {
         fontFamily: cfg.origin._origin.font,
         fill: cfg.color,
         textBaseline: 'Alphabetic',
-      });
+      };
     }
 
     (Shape as any).registerShape('point', 'cloud', {
@@ -96,18 +103,17 @@ class TagCloud extends Component<ITagCloudProps, ITagCloudState> {
       ) {
         const attrs = getTextAttrs(cfg);
         return container.addShape('text', {
-          attrs: Object.assign(attrs, {
+          attrs: {
+            ...attrs,
             x: cfg.x,
             y: cfg.y,
-          }),
+          },
         });
       },
     });
   };
 
-  @Bind()
-  @Debounce(500)
-  renderChart(nextProps: ITagCloudProps) {
+  renderChart = Debounce((nextProps: TagCloudProps) => {
     // const colors = ['#1890FF', '#41D9C7', '#2FC25B', '#FACC14', '#9AE65C'];
     const { data, height } = nextProps || this.props;
     if (data.length < 1 || !this.root) {
@@ -133,8 +139,8 @@ class TagCloud extends Component<ITagCloudProps, ITagCloudState> {
           return 0;
         },
         fontSize(d: { value: number }) {
-          // eslint-disable-next-line
-          return Math.pow((d.value - min) / (max - min), 2) * (17.5 - 5) + 5;
+          const size = ((d.value - min) / (max - min)) ** 2;
+          return size * (17.5 - 5) + 5;
         },
       });
 
@@ -158,7 +164,7 @@ class TagCloud extends Component<ITagCloudProps, ITagCloudState> {
     } else {
       onload();
     }
-  }
+  }, 200);
 
   render() {
     const { className, height } = this.props;
diff --git a/DashboardMonitor/src/components/Charts/WaterWave/index.tsx b/DashboardMonitor/src/components/Charts/WaterWave/index.tsx
index 9dba8216..065cd0c6 100644
--- a/DashboardMonitor/src/components/Charts/WaterWave/index.tsx
+++ b/DashboardMonitor/src/components/Charts/WaterWave/index.tsx
@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+
 import autoHeight from '../autoHeight';
 import styles from './index.less';
 
@@ -6,7 +7,7 @@ import styles from './index.less';
 /* eslint no-mixed-operators: 0 */
 // riddle: https://riddle.alibaba-inc.com/riddles/2d9a4b90
 
-export interface IWaterWaveProps {
+export interface WaterWaveProps {
   title: React.ReactNode;
   color?: string;
   height?: number;
@@ -14,13 +15,16 @@ export interface IWaterWaveProps {
   style?: React.CSSProperties;
 }
 
-class WaterWave extends Component<IWaterWaveProps> {
+class WaterWave extends Component<WaterWaveProps> {
   state = {
     radio: 1,
   };
+
   timer: number = 0;
-  root: HTMLDivElement | undefined | null;
-  node: HTMLCanvasElement | undefined | null;
+
+  root: HTMLDivElement | undefined | null = null;
+
+  node: HTMLCanvasElement | undefined | null = null;
 
   componentDidMount() {
     this.renderChart();
@@ -34,7 +38,7 @@ class WaterWave extends Component<IWaterWaveProps> {
     );
   }
 
-  componentDidUpdate(props: IWaterWaveProps) {
+  componentDidUpdate(props: WaterWaveProps) {
     const { percent } = this.props;
     if (props.percent !== percent) {
       // 不加这个会造成绘制缓慢
@@ -59,6 +63,7 @@ class WaterWave extends Component<IWaterWaveProps> {
       });
     }
   };
+
   renderChart(type?: string) {
     const { percent, color = '#1890FF' } = this.props;
     const data = percent / 100;
@@ -201,6 +206,7 @@ class WaterWave extends Component<IWaterWaveProps> {
     }
     render();
   }
+
   render() {
     const { radio } = this.state;
     const { percent, title, height = 1 } = this.props;
diff --git a/DashboardMonitor/src/components/Charts/autoHeight.tsx b/DashboardMonitor/src/components/Charts/autoHeight.tsx
index 78514e4d..66784f29 100644
--- a/DashboardMonitor/src/components/Charts/autoHeight.tsx
+++ b/DashboardMonitor/src/components/Charts/autoHeight.tsx
@@ -6,11 +6,12 @@ export type IReactComponent<P = any> =
   | React.ClassicComponentClass<P>;
 
 function computeHeight(node: HTMLDivElement) {
-  node.style.height = '100%';
-  const totalHeight = parseInt(getComputedStyle(node).height + '', 10);
+  const { style } = node;
+  style.height = '100%';
+  const totalHeight = parseInt(`${getComputedStyle(node).height}`, 10);
   const padding =
-    parseInt(getComputedStyle(node).paddingTop + '', 10) +
-    parseInt(getComputedStyle(node).paddingBottom + '', 10);
+    parseInt(`${getComputedStyle(node).paddingTop}`, 10) +
+    parseInt(`${getComputedStyle(node).paddingBottom}`, 10);
   return totalHeight - padding;
 }
 
@@ -30,22 +31,24 @@ function getAutoHeight(n: HTMLDivElement) {
   return height;
 }
 
-interface IAutoHeightProps {
+interface AutoHeightProps {
   height?: number;
 }
 
 function autoHeight() {
-  return function<P extends IAutoHeightProps>(
+  return <P extends AutoHeightProps>(
     WrappedComponent: React.ComponentClass<P> | React.SFC<P>,
-  ): React.ComponentClass<P> {
-    class AutoHeightComponent extends React.Component<P & IAutoHeightProps> {
+  ): React.ComponentClass<P> => {
+    class AutoHeightComponent extends React.Component<P & AutoHeightProps> {
       state = {
         computedHeight: 0,
       };
-      root!: HTMLDivElement;
+
+      root: HTMLDivElement | null = null;
+
       componentDidMount() {
         const { height } = this.props;
-        if (!height) {
+        if (!height && this.root) {
           let h = getAutoHeight(this.root);
           this.setState({ computedHeight: h });
           if (h < 1) {
@@ -54,9 +57,11 @@ function autoHeight() {
           }
         }
       }
+
       handleRoot = (node: HTMLDivElement) => {
         this.root = node;
       };
+
       render() {
         const { height } = this.props;
         const { computedHeight } = this.state;
diff --git a/DashboardMonitor/src/components/Charts/index.tsx b/DashboardMonitor/src/components/Charts/index.tsx
index 0df3ba59..d3d1dac4 100644
--- a/DashboardMonitor/src/components/Charts/index.tsx
+++ b/DashboardMonitor/src/components/Charts/index.tsx
@@ -1,8 +1,9 @@
-import Pie from './Pie';
 import Gauge from './Gauge';
-import WaterWave from './WaterWave';
-import TagCloud from './TagCloud';
 import MiniArea from './MiniArea';
+import Pie from './Pie';
+import TagCloud from './TagCloud';
+import WaterWave from './WaterWave';
+
 const Charts = {
   Pie,
   WaterWave,
diff --git a/DashboardMonitor/src/data.d.ts b/DashboardMonitor/src/data.d.ts
index 939988dd..1ee2217a 100644
--- a/DashboardMonitor/src/data.d.ts
+++ b/DashboardMonitor/src/data.d.ts
@@ -1,4 +1,4 @@
-export interface ITag {
+export interface TagType {
   name: string;
   value: string;
   type: string;
diff --git a/DashboardMonitor/src/index.tsx b/DashboardMonitor/src/index.tsx
index 050f4a3c..3ea34bab 100644
--- a/DashboardMonitor/src/index.tsx
+++ b/DashboardMonitor/src/index.tsx
@@ -1,23 +1,22 @@
+import { Card, Col, Row, Statistic, Tooltip } from 'antd';
+import { FormattedMessage, formatMessage } from 'umi-plugin-react/locale';
 import React, { Component } from 'react';
+
+import { Dispatch } from 'redux';
+import { GridContent } from '@ant-design/pro-layout';
 import { connect } from 'dva';
-import { formatMessage, FormattedMessage } from 'umi-plugin-react/locale';
-import { Row, Col, Card, Statistic, Tooltip } from 'antd';
 import numeral from 'numeral';
-import { Dispatch } from 'redux';
-import { IStateType } from './model';
+import { StateType } from './model';
+import { Pie, WaterWave, Gauge, TagCloud } from './components/Charts';
 import ActiveChart from './components/ActiveChart';
 import styles from './style.less';
-import Charts from './components/Charts';
-import { GridContent } from '@ant-design/pro-layout';
 
 const { Countdown } = Statistic;
 
-const { Pie, WaterWave, Gauge, TagCloud } = Charts;
-
 const targetTime = new Date().getTime() + 3900000;
 
 interface PAGE_NAME_UPPER_CAMEL_CASEProps {
-  BLOCK_NAME_CAMEL_CASE: IStateType;
+  BLOCK_NAME_CAMEL_CASE: StateType;
   dispatch: Dispatch<any>;
   loading: boolean;
 }
@@ -27,7 +26,7 @@ interface PAGE_NAME_UPPER_CAMEL_CASEProps {
     BLOCK_NAME_CAMEL_CASE,
     loading,
   }: {
-    BLOCK_NAME_CAMEL_CASE: IStateType;
+    BLOCK_NAME_CAMEL_CASE: StateType;
     loading: {
       models: { [key: string]: boolean };
     };
diff --git a/DashboardMonitor/src/model.ts b/DashboardMonitor/src/model.ts
index df140aee..1da6f4ed 100644
--- a/DashboardMonitor/src/model.ts
+++ b/DashboardMonitor/src/model.ts
@@ -1,26 +1,26 @@
-import { queryTags } from './service';
-import { ITag } from './data';
-import { Reducer } from 'redux';
+import { AnyAction, Reducer } from 'redux';
+
 import { EffectsCommandMap } from 'dva';
-import { AnyAction } from 'redux';
+import { TagType } from './data.d';
+import { queryTags } from './service';
 
-export interface IStateType {
-  tags: ITag[];
+export interface StateType {
+  tags: TagType[];
 }
 
 export type Effect = (
   action: AnyAction,
-  effects: EffectsCommandMap & { select: <T>(func: (state: IStateType) => T) => T },
+  effects: EffectsCommandMap & { select: <T>(func: (state: StateType) => T) => T },
 ) => void;
 
 export interface ModelType {
   namespace: string;
-  state: IStateType;
+  state: StateType;
   effects: {
     fetchTags: Effect;
   };
   reducers: {
-    saveTags: Reducer<IStateType>;
+    saveTags: Reducer<StateType>;
   };
 }
 
diff --git a/DashboardWorkplace/package.json b/DashboardWorkplace/package.json
index a428343a..dcd41f53 100644
--- a/DashboardWorkplace/package.json
+++ b/DashboardWorkplace/package.json
@@ -11,13 +11,15 @@
     "url": "https://github.com/umijs/umi-blocks/ant-design-pro/workplace"
   },
   "dependencies": {
+    "@ant-design/pro-layout": "^4.5.5",
     "antd": "^3.16.3",
+    "bizcharts": "^3.5.3-beta.0",
     "dva": "^2.4.0",
     "moment": "^2.22.2",
     "prop-types": "^15.5.10",
     "react": "^16.6.3",
-    "umi-request": "^1.0.0",
-    "bizcharts": "^3.5.3-beta.0"
+    "redux": "^4.0.1",
+    "umi-request": "^1.0.0"
   },
   "devDependencies": {
     "umi": "^2.6.9",
diff --git a/DashboardWorkplace/src/components/EditableLinkGroup/index.tsx b/DashboardWorkplace/src/components/EditableLinkGroup/index.tsx
index be9b253c..60784638 100644
--- a/DashboardWorkplace/src/components/EditableLinkGroup/index.tsx
+++ b/DashboardWorkplace/src/components/EditableLinkGroup/index.tsx
@@ -1,4 +1,5 @@
 import React, { PureComponent, createElement } from 'react';
+
 import { Button } from 'antd';
 import styles from './index.less';
 
diff --git a/DashboardWorkplace/src/components/Radar/autoHeight.tsx b/DashboardWorkplace/src/components/Radar/autoHeight.tsx
index e7d14e07..ba20956d 100644
--- a/DashboardWorkplace/src/components/Radar/autoHeight.tsx
+++ b/DashboardWorkplace/src/components/Radar/autoHeight.tsx
@@ -6,15 +6,16 @@ export type IReactComponent<P = any> =
   | React.ClassicComponentClass<P>;
 
 function computeHeight(node: HTMLDivElement) {
-  node.style.height = '100%';
-  const totalHeight = parseInt(getComputedStyle(node).height + '', 10);
+  const { style } = node;
+  style.height = '100%';
+  const totalHeight = parseInt(`${getComputedStyle(node).height}`, 10);
   const padding =
-    parseInt(getComputedStyle(node).paddingTop + '', 10) +
-    parseInt(getComputedStyle(node).paddingBottom + '', 10);
+    parseInt(`${getComputedStyle(node).paddingTop}`, 10) +
+    parseInt(`${getComputedStyle(node).paddingBottom}`, 10);
   return totalHeight - padding;
 }
 
-function getAutoHeight(n: HTMLDivElement) {
+function getAutoHeight(n: HTMLDivElement | undefined) {
   if (!n) {
     return 0;
   }
@@ -30,24 +31,25 @@ function getAutoHeight(n: HTMLDivElement) {
   return height;
 }
 
-interface IAutoHeightProps {
+interface AutoHeightProps {
   height?: number;
 }
 
 function autoHeight() {
-  return function<P extends IAutoHeightProps>(
+  return <P extends AutoHeightProps>(
     WrappedComponent: React.ComponentClass<P> | React.SFC<P>,
-  ): React.ComponentClass<P> {
-    class AutoHeightComponent extends React.Component<P & IAutoHeightProps> {
+  ): React.ComponentClass<P> => {
+    class AutoHeightComponent extends React.Component<P & AutoHeightProps> {
       state = {
         computedHeight: 0,
       };
-      root!: HTMLDivElement;
+
+      root: HTMLDivElement | undefined = undefined;
+
       componentDidMount() {
         const { height } = this.props;
         if (!height) {
           let h = getAutoHeight(this.root);
-          // eslint-disable-next-line
           this.setState({ computedHeight: h });
           if (h < 1) {
             h = getAutoHeight(this.root);
@@ -55,9 +57,11 @@ function autoHeight() {
           }
         }
       }
+
       handleRoot = (node: HTMLDivElement) => {
         this.root = node;
       };
+
       render() {
         const { height } = this.props;
         const { computedHeight } = this.state;
diff --git a/DashboardWorkplace/src/components/Radar/index.tsx b/DashboardWorkplace/src/components/Radar/index.tsx
index 13d633ae..17634569 100644
--- a/DashboardWorkplace/src/components/Radar/index.tsx
+++ b/DashboardWorkplace/src/components/Radar/index.tsx
@@ -1,47 +1,50 @@
+import { Axis, Chart, Coord, Geom, Tooltip } from 'bizcharts';
+import { Col, Row } from 'antd';
 import React, { Component } from 'react';
-import { Chart, Tooltip, Geom, Coord, Axis } from 'bizcharts';
-import { Row, Col } from 'antd';
+
 import autoHeight from './autoHeight';
 import styles from './index.less';
 
-export interface IRadarProps {
+export interface RadarProps {
   title?: React.ReactNode;
   height?: number;
   padding?: [number, number, number, number];
   hasLegend?: boolean;
-  data: Array<{
+  data: {
     name: string;
     label: string;
     value: string | number;
-  }>;
+  }[];
   colors?: string[];
   animate?: boolean;
   forceFit?: boolean;
   tickCount?: number;
   style?: React.CSSProperties;
 }
-interface IRadarState {
-  legendData: Array<{
+interface RadarState {
+  legendData: {
     checked: boolean;
     name: string;
     color: string;
     percent: number;
     value: string;
-  }>;
+  }[];
 }
 /* eslint react/no-danger:0 */
-class Radar extends Component<IRadarProps, IRadarState> {
-  state: IRadarState = {
+class Radar extends Component<RadarProps, RadarState> {
+  state: RadarState = {
     legendData: [],
   };
-  chart: G2.Chart | undefined;
-  node: HTMLDivElement | undefined;
+
+  chart: G2.Chart | undefined = undefined;
+
+  node: HTMLDivElement | undefined = undefined;
 
   componentDidMount() {
     this.getLegendData();
   }
 
-  componentDidUpdate(preProps: IRadarProps) {
+  componentDidUpdate(preProps: RadarProps) {
     const { data } = this.props;
     if (data !== preProps.data) {
       this.getLegendData();
@@ -57,10 +60,10 @@ class Radar extends Component<IRadarProps, IRadarState> {
     if (!this.chart) return;
     const geom = this.chart.getAllGeoms()[0]; // 获取所有的图形
     if (!geom) return;
-    const items = geom.get('dataArray') || []; // 获取图形对应的
+    const items = (geom as any).get('dataArray') || []; // 获取图形对应的
 
     const legendData = items.map((item: { color: any; _origin: any }[]) => {
-      // eslint-disable-next-line
+      // eslint-disable-next-line no-underscore-dangle
       const origins = item.map(t => t._origin);
       const result = {
         name: origins[0].name,
@@ -97,7 +100,7 @@ class Radar extends Component<IRadarProps, IRadarState> {
     const filteredLegendData = legendData.filter(l => l.checked).map(l => l.name);
 
     if (this.chart) {
-      this.chart.filter('name', val => filteredLegendData.indexOf(val + '') > -1);
+      this.chart.filter('name', val => filteredLegendData.indexOf(`${val}`) > -1);
       this.chart.repaint();
     }
 
diff --git a/DashboardWorkplace/src/data.d.ts b/DashboardWorkplace/src/data.d.ts
index 8634a39c..f8ea5b83 100644
--- a/DashboardWorkplace/src/data.d.ts
+++ b/DashboardWorkplace/src/data.d.ts
@@ -1,24 +1,24 @@
-export interface ITag {
+export interface TagType {
   key: string;
   label: string;
 }
 
-export interface IProvince {
+export interface ProvinceType {
   label: string;
   key: string;
 }
 
-export interface ICity {
+export interface CityType {
   label: string;
   key: string;
 }
 
-export interface IGeographic {
-  province: IProvince;
-  city: ICity;
+export interface GeographicType {
+  province: ProvinceType;
+  city: CityType;
 }
 
-export interface INotice {
+export interface NoticeType {
   id: string;
   title: string;
   logo: string;
@@ -29,30 +29,30 @@ export interface INotice {
   memberLink: string;
 }
 
-export interface ICurrentUser {
+export interface CurrentUser {
   name: string;
   avatar: string;
   userid: string;
-  notice: INotice[];
+  notice: NoticeType[];
   email: string;
   signature: string;
   title: string;
   group: string;
-  tags: ITag[];
+  tags: TagType[];
   notifyCount: number;
   unreadCount: number;
   country: string;
-  geographic: IGeographic;
+  geographic: GeographicType;
   address: string;
   phone: string;
 }
-export interface IMember {
+export interface Member {
   avatar: string;
   name: string;
   id: string;
 }
 
-export interface IActivities {
+export interface ActivitiesType {
   id: string;
   updatedAt: string;
   user: {
@@ -71,7 +71,7 @@ export interface IActivities {
   template: string;
 }
 
-export interface IRadarData {
+export interface RadarDataType {
   label: string;
   name: string;
   value: number;
diff --git a/DashboardWorkplace/src/index.tsx b/DashboardWorkplace/src/index.tsx
index 327dab31..4996459a 100644
--- a/DashboardWorkplace/src/index.tsx
+++ b/DashboardWorkplace/src/index.tsx
@@ -1,17 +1,16 @@
+import { Avatar, Card, Col, List, Row } from 'antd';
 import React, { PureComponent } from 'react';
-import moment from 'moment';
-import { connect } from 'dva';
-import Link from 'umi/link';
-import { Row, Col, Card, List, Avatar } from 'antd';
-import { Dispatch } from 'redux';
 
-import EditableLinkGroup from './components/EditableLinkGroup';
+import { Dispatch } from 'redux';
+import Link from 'umi/link';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import { connect } from 'dva';
+import moment from 'moment';
 import Radar from './components/Radar';
 import { ModalState } from './model';
-import { ICurrentUser, IActivities, IRadarData, INotice } from './data';
-import { PageHeaderWrapper } from '@ant-design/pro-layout';
-
+import EditableLinkGroup from './components/EditableLinkGroup';
 import styles from './style.less';
+import { ActivitiesType, CurrentUser, NoticeType, RadarDataType } from './data.d';
 
 const links = [
   {
@@ -41,10 +40,10 @@ const links = [
 ];
 
 interface BLOCK_NAME_CAMEL_CASEProps {
-  currentUser: ICurrentUser;
-  projectNotice: INotice[];
-  activities: IActivities[];
-  radarData: IRadarData[];
+  currentUser: CurrentUser;
+  projectNotice: NoticeType[];
+  activities: ActivitiesType[];
+  radarData: RadarDataType[];
   dispatch: Dispatch<any>;
   currentUserLoading: boolean;
   projectLoading: boolean;
@@ -83,7 +82,7 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends PureComponent<BLOCK_NAME_CAMEL_CASEProp
     });
   }
 
-  renderActivities(item: IActivities) {
+  renderActivities = (item: ActivitiesType) => {
     const events = item.template.split(/@\{([^{}]*)\}/gi).map(key => {
       if (item[key]) {
         return (
@@ -113,7 +112,7 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends PureComponent<BLOCK_NAME_CAMEL_CASEProp
         />
       </List.Item>
     );
-  }
+  };
 
   render() {
     const {
@@ -207,11 +206,9 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends PureComponent<BLOCK_NAME_CAMEL_CASEProp
               title="动态"
               loading={activitiesLoading}
             >
-              <List<IActivities>
+              <List<ActivitiesType>
                 loading={activitiesLoading}
-                renderItem={item => {
-                  return this.renderActivities(item);
-                }}
+                renderItem={item => this.renderActivities(item)}
                 dataSource={activities}
                 className={styles.activitiesList}
                 size="large"
diff --git a/DashboardWorkplace/src/model.ts b/DashboardWorkplace/src/model.ts
index 6863351c..7f47c724 100644
--- a/DashboardWorkplace/src/model.ts
+++ b/DashboardWorkplace/src/model.ts
@@ -1,13 +1,13 @@
+import { AnyAction, Reducer } from 'redux';
 import { EffectsCommandMap } from 'dva';
-import { Reducer, AnyAction } from 'redux';
-import { queryCurrent, queryProjectNotice, queryActivities, fakeChartData } from './service';
-import { CurrentUser, Notice, Activeties, RadarData } from './data';
+import { ActivitiesType, CurrentUser, NoticeType, RadarDataType } from './data.d';
+import { fakeChartData, queryActivities, queryCurrent, queryProjectNotice } from './service';
 
 export interface ModalState {
   currentUser: Partial<CurrentUser>;
-  projectNotice: Notice[];
-  activities: Activeties[];
-  radarData: RadarData[];
+  projectNotice: NoticeType[];
+  activities: ActivitiesType[];
+  radarData: RadarDataType[];
 }
 
 export type Effect = (
diff --git a/EditorFlow/README.md b/EditorFlow/README.md
index dbe39275..12e6a46c 100644
--- a/EditorFlow/README.md
+++ b/EditorFlow/README.md
@@ -7,6 +7,7 @@ flow
 ```sh
 umi block add ant-design-pro/flow
 ```
+
 ## SNAPSHOT
 
 ![SNAPSHOT](./snapshot.png)
diff --git a/EditorFlow/package.json b/EditorFlow/package.json
index 1bf18eff..4c947576 100644
--- a/EditorFlow/package.json
+++ b/EditorFlow/package.json
@@ -12,6 +12,7 @@
     "dev": "umi dev"
   },
   "dependencies": {
+    "@ant-design/pro-layout": "^4.5.5",
     "@antv/data-set": "^0.10.2",
     "antd": "^3.16.3",
     "bizcharts": "^3.5.3-beta.0",
@@ -22,13 +23,13 @@
     "numeral": "^2.0.6",
     "react": "^16.6.3",
     "react-fittext": "^1.0.0",
+    "umi": "^2.6.9",
+    "umi-plugin-react": "^1.7.2",
     "umi-request": "^1.0.0"
   },
   "devDependencies": {
-    "umi": "^2.6.9",
-    "umi-plugin-block-dev": "^1.1.0",
-    "umi-plugin-react": "^1.7.2",
-    "@types/numeral": "^0.0.25"
+    "@types/numeral": "^0.0.25",
+    "umi-plugin-block-dev": "^1.1.0"
   },
   "blockConfig": {
     "specVersion": "0.1"
diff --git a/EditorFlow/src/components/EditorContextMenu/FlowContextMenu.tsx b/EditorFlow/src/components/EditorContextMenu/FlowContextMenu.tsx
index cbb7041f..32f17aa1 100644
--- a/EditorFlow/src/components/EditorContextMenu/FlowContextMenu.tsx
+++ b/EditorFlow/src/components/EditorContextMenu/FlowContextMenu.tsx
@@ -1,36 +1,35 @@
+import { CanvasMenu, ContextMenu, EdgeMenu, GroupMenu, MultiMenu, NodeMenu } from 'gg-editor';
+
 import React from 'react';
-import { NodeMenu, EdgeMenu, GroupMenu, MultiMenu, CanvasMenu, ContextMenu } from 'gg-editor';
 import MenuItem from './MenuItem';
 import styles from './index.less';
 
-const FlowContextMenu = () => {
-  return (
-    <ContextMenu className={styles.contextMenu}>
-      <NodeMenu>
-        <MenuItem command="copy" />
-        <MenuItem command="delete" />
-      </NodeMenu>
-      <EdgeMenu>
-        <MenuItem command="delete" />
-      </EdgeMenu>
-      <GroupMenu>
-        <MenuItem command="copy" />
-        <MenuItem command="delete" />
-        <MenuItem command="unGroup" icon="ungroup" text="Ungroup" />
-      </GroupMenu>
-      <MultiMenu>
-        <MenuItem command="copy" />
-        <MenuItem command="paste" />
-        <MenuItem command="addGroup" icon="group" text="Add Group" />
-        <MenuItem command="delete" />
-      </MultiMenu>
-      <CanvasMenu>
-        <MenuItem command="undo" />
-        <MenuItem command="redo" />
-        <MenuItem command="pasteHere" icon="paste" text="Paste Here" />
-      </CanvasMenu>
-    </ContextMenu>
-  );
-};
+const FlowContextMenu = () => (
+  <ContextMenu className={styles.contextMenu}>
+    <NodeMenu>
+      <MenuItem command="copy" />
+      <MenuItem command="delete" />
+    </NodeMenu>
+    <EdgeMenu>
+      <MenuItem command="delete" />
+    </EdgeMenu>
+    <GroupMenu>
+      <MenuItem command="copy" />
+      <MenuItem command="delete" />
+      <MenuItem command="unGroup" icon="ungroup" text="Ungroup" />
+    </GroupMenu>
+    <MultiMenu>
+      <MenuItem command="copy" />
+      <MenuItem command="paste" />
+      <MenuItem command="addGroup" icon="group" text="Add Group" />
+      <MenuItem command="delete" />
+    </MultiMenu>
+    <CanvasMenu>
+      <MenuItem command="undo" />
+      <MenuItem command="redo" />
+      <MenuItem command="pasteHere" icon="paste" text="Paste Here" />
+    </CanvasMenu>
+  </ContextMenu>
+);
 
 export default FlowContextMenu;
diff --git a/EditorFlow/src/components/EditorContextMenu/MenuItem.tsx b/EditorFlow/src/components/EditorContextMenu/MenuItem.tsx
index afbefe31..63b584ca 100644
--- a/EditorFlow/src/components/EditorContextMenu/MenuItem.tsx
+++ b/EditorFlow/src/components/EditorContextMenu/MenuItem.tsx
@@ -1,11 +1,10 @@
-import React from 'react';
 import { Command } from 'gg-editor';
+import React from 'react';
 import IconFont from '../../common/IconFont';
 import styles from './index.less';
 
-const upperFirst = (str: string) => {
-  return str.toLowerCase().replace(/( |^)[a-z]/g, (l: string) => l.toUpperCase());
-};
+const upperFirst = (str: string) =>
+  str.toLowerCase().replace(/( |^)[a-z]/g, (l: string) => l.toUpperCase());
 
 interface MenuItemProps {
   command: string;
diff --git a/EditorFlow/src/components/EditorContextMenu/MindContextMenu.tsx b/EditorFlow/src/components/EditorContextMenu/MindContextMenu.tsx
index 2a9d43cd..2dc5247d 100644
--- a/EditorFlow/src/components/EditorContextMenu/MindContextMenu.tsx
+++ b/EditorFlow/src/components/EditorContextMenu/MindContextMenu.tsx
@@ -1,24 +1,23 @@
+import { CanvasMenu, ContextMenu, NodeMenu } from 'gg-editor';
+
 import React from 'react';
-import { NodeMenu, CanvasMenu, ContextMenu } from 'gg-editor';
 import MenuItem from './MenuItem';
 import styles from './index.less';
 
-const MindContextMenu = () => {
-  return (
-    <ContextMenu className={styles.contextMenu}>
-      <NodeMenu>
-        <MenuItem command="append" text="Topic" />
-        <MenuItem command="appendChild" icon="append-child" text="Subtopic" />
-        <MenuItem command="collapse" text="Fold" />
-        <MenuItem command="expand" text="Unfold" />
-        <MenuItem command="delete" />
-      </NodeMenu>
-      <CanvasMenu>
-        <MenuItem command="undo" />
-        <MenuItem command="redo" />
-      </CanvasMenu>
-    </ContextMenu>
-  );
-};
+const MindContextMenu = () => (
+  <ContextMenu className={styles.contextMenu}>
+    <NodeMenu>
+      <MenuItem command="append" text="Topic" />
+      <MenuItem command="appendChild" icon="append-child" text="Subtopic" />
+      <MenuItem command="collapse" text="Fold" />
+      <MenuItem command="expand" text="Unfold" />
+      <MenuItem command="delete" />
+    </NodeMenu>
+    <CanvasMenu>
+      <MenuItem command="undo" />
+      <MenuItem command="redo" />
+    </CanvasMenu>
+  </ContextMenu>
+);
 
 export default MindContextMenu;
diff --git a/EditorFlow/src/components/EditorContextMenu/index.tsx b/EditorFlow/src/components/EditorContextMenu/index.tsx
index 16fcde01..6ee93423 100644
--- a/EditorFlow/src/components/EditorContextMenu/index.tsx
+++ b/EditorFlow/src/components/EditorContextMenu/index.tsx
@@ -1,5 +1,5 @@
 import FlowContextMenu from './FlowContextMenu';
-import MindContextMenu from './MindContextMenu';
 import KoniContextMenu from './KoniContextMenu';
+import MindContextMenu from './MindContextMenu';
 
 export { FlowContextMenu, MindContextMenu, KoniContextMenu };
diff --git a/EditorFlow/src/components/EditorDetailPanel/DetailForm.tsx b/EditorFlow/src/components/EditorDetailPanel/DetailForm.tsx
index 0a9690d7..713d6dbb 100644
--- a/EditorFlow/src/components/EditorDetailPanel/DetailForm.tsx
+++ b/EditorFlow/src/components/EditorDetailPanel/DetailForm.tsx
@@ -1,11 +1,11 @@
-import React, { Fragment } from 'react';
 import { Card, Form, Input, Select } from 'antd';
-import { withPropsAPI } from 'gg-editor';
+import React, { Fragment } from 'react';
+
 import { FormComponentProps } from 'antd/es/form';
+import { withPropsAPI } from 'gg-editor';
 
-const upperFirst = (str: string) => {
-  return str.toLowerCase().replace(/( |^)[a-z]/g, (l: string) => l.toUpperCase());
-};
+const upperFirst = (str: string) =>
+  str.toLowerCase().replace(/( |^)[a-z]/g, (l: string) => l.toUpperCase());
 
 const { Item } = Form;
 const { Option } = Select;
@@ -60,15 +60,13 @@ class DetailForm extends React.Component<DetailFormProps> {
     }, 0);
   };
 
-  renderEdgeShapeSelect = () => {
-    return (
-      <Select onChange={this.handleSubmit}>
-        <Option value="flow-smooth">Smooth</Option>
-        <Option value="flow-polyline">Polyline</Option>
-        <Option value="flow-polyline-round">Polyline Round</Option>
-      </Select>
-    );
-  };
+  renderEdgeShapeSelect = () => (
+    <Select onChange={this.handleSubmit}>
+      <Option value="flow-smooth">Smooth</Option>
+      <Option value="flow-polyline">Polyline</Option>
+      <Option value="flow-polyline-round">Polyline Round</Option>
+    </Select>
+  );
 
   renderNodeDetail = () => {
     const { form } = this.props;
diff --git a/EditorFlow/src/components/EditorDetailPanel/FlowDetailPanel.tsx b/EditorFlow/src/components/EditorDetailPanel/FlowDetailPanel.tsx
index 8d681618..ce38ea16 100644
--- a/EditorFlow/src/components/EditorDetailPanel/FlowDetailPanel.tsx
+++ b/EditorFlow/src/components/EditorDetailPanel/FlowDetailPanel.tsx
@@ -1,29 +1,28 @@
-import React from 'react';
+import { CanvasPanel, DetailPanel, EdgePanel, GroupPanel, MultiPanel, NodePanel } from 'gg-editor';
+
 import { Card } from 'antd';
-import { NodePanel, EdgePanel, GroupPanel, MultiPanel, CanvasPanel, DetailPanel } from 'gg-editor';
+import React from 'react';
 import DetailForm from './DetailForm';
 import styles from './index.less';
 
-const FlowDetailPanel = () => {
-  return (
-    <DetailPanel className={styles.detailPanel}>
-      <NodePanel>
-        <DetailForm type="node" />
-      </NodePanel>
-      <EdgePanel>
-        <DetailForm type="edge" />
-      </EdgePanel>
-      <GroupPanel>
-        <DetailForm type="group" />
-      </GroupPanel>
-      <MultiPanel>
-        <Card type="inner" size="small" title="Multi Select" bordered={false} />
-      </MultiPanel>
-      <CanvasPanel>
-        <Card type="inner" size="small" title="Canvas" bordered={false} />
-      </CanvasPanel>
-    </DetailPanel>
-  );
-};
+const FlowDetailPanel = () => (
+  <DetailPanel className={styles.detailPanel}>
+    <NodePanel>
+      <DetailForm type="node" />
+    </NodePanel>
+    <EdgePanel>
+      <DetailForm type="edge" />
+    </EdgePanel>
+    <GroupPanel>
+      <DetailForm type="group" />
+    </GroupPanel>
+    <MultiPanel>
+      <Card type="inner" size="small" title="Multi Select" bordered={false} />
+    </MultiPanel>
+    <CanvasPanel>
+      <Card type="inner" size="small" title="Canvas" bordered={false} />
+    </CanvasPanel>
+  </DetailPanel>
+);
 
 export default FlowDetailPanel;
diff --git a/EditorFlow/src/components/EditorDetailPanel/MindDetailPanel.tsx b/EditorFlow/src/components/EditorDetailPanel/MindDetailPanel.tsx
index 6b4d5c9e..bf8f4834 100644
--- a/EditorFlow/src/components/EditorDetailPanel/MindDetailPanel.tsx
+++ b/EditorFlow/src/components/EditorDetailPanel/MindDetailPanel.tsx
@@ -1,20 +1,19 @@
-import React from 'react';
+import { CanvasPanel, DetailPanel, NodePanel } from 'gg-editor';
+
 import { Card } from 'antd';
-import { NodePanel, CanvasPanel, DetailPanel } from 'gg-editor';
+import React from 'react';
 import DetailForm from './DetailForm';
 import styles from './index.less';
 
-const MindDetailPanel = () => {
-  return (
-    <DetailPanel className={styles.detailPanel}>
-      <NodePanel>
-        <DetailForm type="node" />
-      </NodePanel>
-      <CanvasPanel>
-        <Card type="inner" size="small" title="Canvas" bordered={false} />
-      </CanvasPanel>
-    </DetailPanel>
-  );
-};
+const MindDetailPanel = () => (
+  <DetailPanel className={styles.detailPanel}>
+    <NodePanel>
+      <DetailForm type="node" />
+    </NodePanel>
+    <CanvasPanel>
+      <Card type="inner" size="small" title="Canvas" bordered={false} />
+    </CanvasPanel>
+  </DetailPanel>
+);
 
 export default MindDetailPanel;
diff --git a/EditorFlow/src/components/EditorDetailPanel/index.tsx b/EditorFlow/src/components/EditorDetailPanel/index.tsx
index 8df063ef..50aa37a8 100644
--- a/EditorFlow/src/components/EditorDetailPanel/index.tsx
+++ b/EditorFlow/src/components/EditorDetailPanel/index.tsx
@@ -1,5 +1,5 @@
 import FlowDetailPanel from './FlowDetailPanel';
-import MindDetailPanel from './MindDetailPanel';
 import KoniDetailPanel from './KoniDetailPanel';
+import MindDetailPanel from './MindDetailPanel';
 
 export { FlowDetailPanel, MindDetailPanel, KoniDetailPanel };
diff --git a/EditorFlow/src/components/EditorItemPanel/FlowItemPanel.tsx b/EditorFlow/src/components/EditorItemPanel/FlowItemPanel.tsx
index e6912793..dce9855d 100644
--- a/EditorFlow/src/components/EditorItemPanel/FlowItemPanel.tsx
+++ b/EditorFlow/src/components/EditorItemPanel/FlowItemPanel.tsx
@@ -1,55 +1,54 @@
-import React from 'react';
+import { Item, ItemPanel } from 'gg-editor';
+
 import { Card } from 'antd';
-import { ItemPanel, Item } from 'gg-editor';
+import React from 'react';
 import styles from './index.less';
 
-const FlowItemPanel = () => {
-  return (
-    <ItemPanel className={styles.itemPanel}>
-      <Card bordered={false}>
-        <Item
-          type="node"
-          size="72*72"
-          shape="flow-circle"
-          model={{
-            color: '#FA8C16',
-            label: 'Start',
-          }}
-          src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAiIGhlaWdodD0iODAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxjaXJjbGUgaWQ9ImIiIGN4PSIzNiIgY3k9IjM2IiByPSIzNiIvPjxmaWx0ZXIgeD0iLTkuNyUiIHk9Ii02LjklIiB3aWR0aD0iMTE5LjQlIiBoZWlnaHQ9IjExOS40JSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiBpZD0iYSI+PGZlT2Zmc2V0IGR5PSIyIiBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIi8+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMiIgaW49InNoYWRvd09mZnNldE91dGVyMSIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29tcG9zaXRlIGluPSJzaGFkb3dCbHVyT3V0ZXIxIiBpbjI9IlNvdXJjZUFscGhhIiBvcGVyYXRvcj0ib3V0IiByZXN1bHQ9InNoYWRvd0JsdXJPdXRlcjEiLz48ZmVDb2xvck1hdHJpeCB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAuMDQgMCIgaW49InNoYWRvd0JsdXJPdXRlcjEiLz48L2ZpbHRlcj48L2RlZnM+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0IDIpIj48dXNlIGZpbGw9IiMwMDAiIGZpbHRlcj0idXJsKCNhKSIgeGxpbms6aHJlZj0iI2IiLz48dXNlIGZpbGwtb3BhY2l0eT0iLjkyIiBmaWxsPSIjRkZGMkU4IiB4bGluazpocmVmPSIjYiIvPjxjaXJjbGUgc3Ryb2tlPSIjRkZDMDY5IiBjeD0iMzYiIGN5PSIzNiIgcj0iMzUuNSIvPjwvZz48dGV4dCBmb250LWZhbWlseT0iUGluZ0ZhbmdTQy1SZWd1bGFyLCBQaW5nRmFuZyBTQyIgZm9udC1zaXplPSIxMiIgZmlsbD0iIzAwMCIgZmlsbC1vcGFjaXR5PSIuNjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQgMikiPjx0c3BhbiB4PSIyMyIgeT0iNDEiPlN0YXJ0PC90c3Bhbj48L3RleHQ+PC9nPjwvc3ZnPg=="
-        />
-        <Item
-          type="node"
-          size="80*48"
-          shape="flow-rect"
-          model={{
-            color: '#1890FF',
-            label: 'Normal',
-          }}
-          src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODgiIGhlaWdodD0iNTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxyZWN0IGlkPSJiIiB4PSIwIiB5PSIwIiB3aWR0aD0iODAiIGhlaWdodD0iNDgiIHJ4PSI0Ii8+PGZpbHRlciB4PSItOC44JSIgeT0iLTEwLjQlIiB3aWR0aD0iMTE3LjUlIiBoZWlnaHQ9IjEyOS4yJSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiBpZD0iYSI+PGZlT2Zmc2V0IGR5PSIyIiBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIi8+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMiIgaW49InNoYWRvd09mZnNldE91dGVyMSIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29tcG9zaXRlIGluPSJzaGFkb3dCbHVyT3V0ZXIxIiBpbjI9IlNvdXJjZUFscGhhIiBvcGVyYXRvcj0ib3V0IiByZXN1bHQ9InNoYWRvd0JsdXJPdXRlcjEiLz48ZmVDb2xvck1hdHJpeCB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAuMDQgMCIgaW49InNoYWRvd0JsdXJPdXRlcjEiLz48L2ZpbHRlcj48L2RlZnM+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0IDIpIj48dXNlIGZpbGw9IiMwMDAiIGZpbHRlcj0idXJsKCNhKSIgeGxpbms6aHJlZj0iI2IiLz48dXNlIGZpbGwtb3BhY2l0eT0iLjkyIiBmaWxsPSIjRTZGN0ZGIiB4bGluazpocmVmPSIjYiIvPjxyZWN0IHN0cm9rZT0iIzE4OTBGRiIgeD0iLjUiIHk9Ii41IiB3aWR0aD0iNzkiIGhlaWdodD0iNDciIHJ4PSI0Ii8+PC9nPjx0ZXh0IGZvbnQtZmFtaWx5PSJQaW5nRmFuZ1NDLVJlZ3VsYXIsIFBpbmdGYW5nIFNDIiBmb250LXNpemU9IjEyIiBmaWxsPSIjMDAwIiBmaWxsLW9wYWNpdHk9Ii42NSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNCAyKSI+PHRzcGFuIHg9IjIxIiB5PSIyOSI+Tm9ybWFsPC90c3Bhbj48L3RleHQ+PC9nPjwvc3ZnPg=="
-        />
-        <Item
-          type="node"
-          size="80*72"
-          shape="flow-rhombus"
-          model={{
-            color: '#13C2C2',
-            label: 'Decision',
-          }}
-          src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODYiIGhlaWdodD0iNzgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxwYXRoIGQ9Ik00Mi42NyAxLjY3bDM0Ljk2NSAzMS4zNTJhNCA0IDAgMCAxIDAgNS45NTZMNDIuNjcgNzAuMzNhNCA0IDAgMCAxLTUuMzQgMEwyLjM2NSAzOC45NzhhNCA0IDAgMCAxIDAtNS45NTZMMzcuMzMgMS42N2E0IDQgMCAwIDEgNS4zNCAweiIgaWQ9ImIiLz48ZmlsdGVyIHg9Ii04LjglIiB5PSItNi45JSIgd2lkdGg9IjExNy41JSIgaGVpZ2h0PSIxMTkuNCUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9ImEiPjxmZU9mZnNldCBkeT0iMiIgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSIvPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSIvPjxmZUNvbXBvc2l0ZSBpbj0ic2hhZG93Qmx1ck91dGVyMSIgaW4yPSJTb3VyY2VBbHBoYSIgb3BlcmF0b3I9Im91dCIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjA0IDAiIGluPSJzaGFkb3dCbHVyT3V0ZXIxIi8+PC9maWx0ZXI+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMyAxKSI+PHVzZSBmaWxsPSIjMDAwIiBmaWx0ZXI9InVybCgjYSkiIHhsaW5rOmhyZWY9IiNiIi8+PHVzZSBmaWxsLW9wYWNpdHk9Ii45MiIgZmlsbD0iI0U2RkZGQiIgeGxpbms6aHJlZj0iI2IiLz48cGF0aCBzdHJva2U9IiM1Q0RCRDMiIGQ9Ik00Mi4zMzcgMi4wNDJhMy41IDMuNSAwIDAgMC00LjY3NCAwTDIuNjk4IDMzLjM5NGEzLjUgMy41IDAgMCAwIDAgNS4yMTJsMzQuOTY1IDMxLjM1MmEzLjUgMy41IDAgMCAwIDQuNjc0IDBsMzQuOTY1LTMxLjM1MmEzLjUgMy41IDAgMCAwIDAtNS4yMTJMNDIuMzM3IDIuMDQyeiIvPjwvZz48dGV4dCBmb250LWZhbWlseT0iUGluZ0ZhbmdTQy1SZWd1bGFyLCBQaW5nRmFuZyBTQyIgZm9udC1zaXplPSIxMiIgZmlsbD0iIzAwMCIgZmlsbC1vcGFjaXR5PSIuNjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMgMSkiPjx0c3BhbiB4PSIxOCIgeT0iNDIiPkRlY2lzaW9uPC90c3Bhbj48L3RleHQ+PC9nPjwvc3ZnPg=="
-        />
-        <Item
-          type="node"
-          size="80*48"
-          shape="flow-capsule"
-          model={{
-            color: '#722ED1',
-            label: 'Model',
-          }}
-          src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODgiIGhlaWdodD0iNTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxyZWN0IGlkPSJiIiB4PSIwIiB5PSIwIiB3aWR0aD0iODAiIGhlaWdodD0iNDgiIHJ4PSIyNCIvPjxmaWx0ZXIgeD0iLTguOCUiIHk9Ii0xMC40JSIgd2lkdGg9IjExNy41JSIgaGVpZ2h0PSIxMjkuMiUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9ImEiPjxmZU9mZnNldCBkeT0iMiIgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSIvPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSIvPjxmZUNvbXBvc2l0ZSBpbj0ic2hhZG93Qmx1ck91dGVyMSIgaW4yPSJTb3VyY2VBbHBoYSIgb3BlcmF0b3I9Im91dCIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjA0IDAiIGluPSJzaGFkb3dCbHVyT3V0ZXIxIi8+PC9maWx0ZXI+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNCAyKSI+PHVzZSBmaWxsPSIjMDAwIiBmaWx0ZXI9InVybCgjYSkiIHhsaW5rOmhyZWY9IiNiIi8+PHVzZSBmaWxsLW9wYWNpdHk9Ii45MiIgZmlsbD0iI0Y5RjBGRiIgeGxpbms6aHJlZj0iI2IiLz48cmVjdCBzdHJva2U9IiNCMzdGRUIiIHg9Ii41IiB5PSIuNSIgd2lkdGg9Ijc5IiBoZWlnaHQ9IjQ3IiByeD0iMjMuNSIvPjwvZz48dGV4dCBmb250LWZhbWlseT0iUGluZ0ZhbmdTQy1SZWd1bGFyLCBQaW5nRmFuZyBTQyIgZm9udC1zaXplPSIxMiIgZmlsbD0iIzAwMCIgZmlsbC1vcGFjaXR5PSIuNjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQgMikiPjx0c3BhbiB4PSIyNCIgeT0iMjkiPk1vZGVsPC90c3Bhbj48L3RleHQ+PC9nPjwvc3ZnPg=="
-        />
-      </Card>
-    </ItemPanel>
-  );
-};
+const FlowItemPanel = () => (
+  <ItemPanel className={styles.itemPanel}>
+    <Card bordered={false}>
+      <Item
+        type="node"
+        size="72*72"
+        shape="flow-circle"
+        model={{
+          color: '#FA8C16',
+          label: 'Start',
+        }}
+        src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAiIGhlaWdodD0iODAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxjaXJjbGUgaWQ9ImIiIGN4PSIzNiIgY3k9IjM2IiByPSIzNiIvPjxmaWx0ZXIgeD0iLTkuNyUiIHk9Ii02LjklIiB3aWR0aD0iMTE5LjQlIiBoZWlnaHQ9IjExOS40JSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiBpZD0iYSI+PGZlT2Zmc2V0IGR5PSIyIiBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIi8+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMiIgaW49InNoYWRvd09mZnNldE91dGVyMSIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29tcG9zaXRlIGluPSJzaGFkb3dCbHVyT3V0ZXIxIiBpbjI9IlNvdXJjZUFscGhhIiBvcGVyYXRvcj0ib3V0IiByZXN1bHQ9InNoYWRvd0JsdXJPdXRlcjEiLz48ZmVDb2xvck1hdHJpeCB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAuMDQgMCIgaW49InNoYWRvd0JsdXJPdXRlcjEiLz48L2ZpbHRlcj48L2RlZnM+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0IDIpIj48dXNlIGZpbGw9IiMwMDAiIGZpbHRlcj0idXJsKCNhKSIgeGxpbms6aHJlZj0iI2IiLz48dXNlIGZpbGwtb3BhY2l0eT0iLjkyIiBmaWxsPSIjRkZGMkU4IiB4bGluazpocmVmPSIjYiIvPjxjaXJjbGUgc3Ryb2tlPSIjRkZDMDY5IiBjeD0iMzYiIGN5PSIzNiIgcj0iMzUuNSIvPjwvZz48dGV4dCBmb250LWZhbWlseT0iUGluZ0ZhbmdTQy1SZWd1bGFyLCBQaW5nRmFuZyBTQyIgZm9udC1zaXplPSIxMiIgZmlsbD0iIzAwMCIgZmlsbC1vcGFjaXR5PSIuNjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQgMikiPjx0c3BhbiB4PSIyMyIgeT0iNDEiPlN0YXJ0PC90c3Bhbj48L3RleHQ+PC9nPjwvc3ZnPg=="
+      />
+      <Item
+        type="node"
+        size="80*48"
+        shape="flow-rect"
+        model={{
+          color: '#1890FF',
+          label: 'Normal',
+        }}
+        src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODgiIGhlaWdodD0iNTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxyZWN0IGlkPSJiIiB4PSIwIiB5PSIwIiB3aWR0aD0iODAiIGhlaWdodD0iNDgiIHJ4PSI0Ii8+PGZpbHRlciB4PSItOC44JSIgeT0iLTEwLjQlIiB3aWR0aD0iMTE3LjUlIiBoZWlnaHQ9IjEyOS4yJSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiBpZD0iYSI+PGZlT2Zmc2V0IGR5PSIyIiBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIi8+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMiIgaW49InNoYWRvd09mZnNldE91dGVyMSIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29tcG9zaXRlIGluPSJzaGFkb3dCbHVyT3V0ZXIxIiBpbjI9IlNvdXJjZUFscGhhIiBvcGVyYXRvcj0ib3V0IiByZXN1bHQ9InNoYWRvd0JsdXJPdXRlcjEiLz48ZmVDb2xvck1hdHJpeCB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAuMDQgMCIgaW49InNoYWRvd0JsdXJPdXRlcjEiLz48L2ZpbHRlcj48L2RlZnM+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0IDIpIj48dXNlIGZpbGw9IiMwMDAiIGZpbHRlcj0idXJsKCNhKSIgeGxpbms6aHJlZj0iI2IiLz48dXNlIGZpbGwtb3BhY2l0eT0iLjkyIiBmaWxsPSIjRTZGN0ZGIiB4bGluazpocmVmPSIjYiIvPjxyZWN0IHN0cm9rZT0iIzE4OTBGRiIgeD0iLjUiIHk9Ii41IiB3aWR0aD0iNzkiIGhlaWdodD0iNDciIHJ4PSI0Ii8+PC9nPjx0ZXh0IGZvbnQtZmFtaWx5PSJQaW5nRmFuZ1NDLVJlZ3VsYXIsIFBpbmdGYW5nIFNDIiBmb250LXNpemU9IjEyIiBmaWxsPSIjMDAwIiBmaWxsLW9wYWNpdHk9Ii42NSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNCAyKSI+PHRzcGFuIHg9IjIxIiB5PSIyOSI+Tm9ybWFsPC90c3Bhbj48L3RleHQ+PC9nPjwvc3ZnPg=="
+      />
+      <Item
+        type="node"
+        size="80*72"
+        shape="flow-rhombus"
+        model={{
+          color: '#13C2C2',
+          label: 'Decision',
+        }}
+        src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODYiIGhlaWdodD0iNzgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxwYXRoIGQ9Ik00Mi42NyAxLjY3bDM0Ljk2NSAzMS4zNTJhNCA0IDAgMCAxIDAgNS45NTZMNDIuNjcgNzAuMzNhNCA0IDAgMCAxLTUuMzQgMEwyLjM2NSAzOC45NzhhNCA0IDAgMCAxIDAtNS45NTZMMzcuMzMgMS42N2E0IDQgMCAwIDEgNS4zNCAweiIgaWQ9ImIiLz48ZmlsdGVyIHg9Ii04LjglIiB5PSItNi45JSIgd2lkdGg9IjExNy41JSIgaGVpZ2h0PSIxMTkuNCUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9ImEiPjxmZU9mZnNldCBkeT0iMiIgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSIvPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSIvPjxmZUNvbXBvc2l0ZSBpbj0ic2hhZG93Qmx1ck91dGVyMSIgaW4yPSJTb3VyY2VBbHBoYSIgb3BlcmF0b3I9Im91dCIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjA0IDAiIGluPSJzaGFkb3dCbHVyT3V0ZXIxIi8+PC9maWx0ZXI+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMyAxKSI+PHVzZSBmaWxsPSIjMDAwIiBmaWx0ZXI9InVybCgjYSkiIHhsaW5rOmhyZWY9IiNiIi8+PHVzZSBmaWxsLW9wYWNpdHk9Ii45MiIgZmlsbD0iI0U2RkZGQiIgeGxpbms6aHJlZj0iI2IiLz48cGF0aCBzdHJva2U9IiM1Q0RCRDMiIGQ9Ik00Mi4zMzcgMi4wNDJhMy41IDMuNSAwIDAgMC00LjY3NCAwTDIuNjk4IDMzLjM5NGEzLjUgMy41IDAgMCAwIDAgNS4yMTJsMzQuOTY1IDMxLjM1MmEzLjUgMy41IDAgMCAwIDQuNjc0IDBsMzQuOTY1LTMxLjM1MmEzLjUgMy41IDAgMCAwIDAtNS4yMTJMNDIuMzM3IDIuMDQyeiIvPjwvZz48dGV4dCBmb250LWZhbWlseT0iUGluZ0ZhbmdTQy1SZWd1bGFyLCBQaW5nRmFuZyBTQyIgZm9udC1zaXplPSIxMiIgZmlsbD0iIzAwMCIgZmlsbC1vcGFjaXR5PSIuNjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMgMSkiPjx0c3BhbiB4PSIxOCIgeT0iNDIiPkRlY2lzaW9uPC90c3Bhbj48L3RleHQ+PC9nPjwvc3ZnPg=="
+      />
+      <Item
+        type="node"
+        size="80*48"
+        shape="flow-capsule"
+        model={{
+          color: '#722ED1',
+          label: 'Model',
+        }}
+        src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODgiIGhlaWdodD0iNTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxyZWN0IGlkPSJiIiB4PSIwIiB5PSIwIiB3aWR0aD0iODAiIGhlaWdodD0iNDgiIHJ4PSIyNCIvPjxmaWx0ZXIgeD0iLTguOCUiIHk9Ii0xMC40JSIgd2lkdGg9IjExNy41JSIgaGVpZ2h0PSIxMjkuMiUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9ImEiPjxmZU9mZnNldCBkeT0iMiIgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSIvPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSIvPjxmZUNvbXBvc2l0ZSBpbj0ic2hhZG93Qmx1ck91dGVyMSIgaW4yPSJTb3VyY2VBbHBoYSIgb3BlcmF0b3I9Im91dCIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjA0IDAiIGluPSJzaGFkb3dCbHVyT3V0ZXIxIi8+PC9maWx0ZXI+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNCAyKSI+PHVzZSBmaWxsPSIjMDAwIiBmaWx0ZXI9InVybCgjYSkiIHhsaW5rOmhyZWY9IiNiIi8+PHVzZSBmaWxsLW9wYWNpdHk9Ii45MiIgZmlsbD0iI0Y5RjBGRiIgeGxpbms6aHJlZj0iI2IiLz48cmVjdCBzdHJva2U9IiNCMzdGRUIiIHg9Ii41IiB5PSIuNSIgd2lkdGg9Ijc5IiBoZWlnaHQ9IjQ3IiByeD0iMjMuNSIvPjwvZz48dGV4dCBmb250LWZhbWlseT0iUGluZ0ZhbmdTQy1SZWd1bGFyLCBQaW5nRmFuZyBTQyIgZm9udC1zaXplPSIxMiIgZmlsbD0iIzAwMCIgZmlsbC1vcGFjaXR5PSIuNjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQgMikiPjx0c3BhbiB4PSIyNCIgeT0iMjkiPk1vZGVsPC90c3Bhbj48L3RleHQ+PC9nPjwvc3ZnPg=="
+      />
+    </Card>
+  </ItemPanel>
+);
 
 export default FlowItemPanel;
diff --git a/EditorFlow/src/components/EditorItemPanel/KoniItemPanel.tsx b/EditorFlow/src/components/EditorItemPanel/KoniItemPanel.tsx
index 9df51f98..ad446f80 100644
--- a/EditorFlow/src/components/EditorItemPanel/KoniItemPanel.tsx
+++ b/EditorFlow/src/components/EditorItemPanel/KoniItemPanel.tsx
@@ -1,54 +1,53 @@
-import React from 'react';
+import { Item, ItemPanel } from 'gg-editor';
+
 import { Card } from 'antd';
-import { ItemPanel, Item } from 'gg-editor';
+import React from 'react';
 import styles from './index.less';
 
-const KoniItemPanel = () => {
-  return (
-    <ItemPanel className={styles.itemPanel}>
-      <Card bordered={false}>
-        <Item
-          type="node"
-          size="40"
-          shape="koni-custom-node"
-          model={{
-            color: '#69C0FF',
-            label: 'Bank',
-            labelOffsetY: 28,
-            icon:
-              'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEyLjM1IDExLjUxNGwuMDEtLjAxNEE2Ljk2NiA2Ljk2NiAwIDAgMCAxNCA3YTYuOTczIDYuOTczIDAgMCAwLTEuNjM3LTQuNWwtLjAxMS0uMDEzLS4wNS0uMDU3LS4wMi0uMDIyLS4wNjMtLjA3NC0uMDAyLS4wMDEtLjA3Mi0uMDgtLjAwMS0uMDAxYy0uMDUtLjA1NC0uMS0uMTA3LS4xNTItLjE1OGwtLjAwMS0uMDAyLS4wNzUtLjA3NS0uMDA1LS4wMDQtLjA3LS4wNjgtLjAyNS0uMDIzLS4wNDctLjA0NC0uMDE2LS4wMTZBNi45NjYgNi45NjYgMCAwIDAgNyAwYTYuOTczIDYuOTczIDAgMCAwLTQuNzU1IDEuODYybC0uMDE1LjAxNi0uMDQ3LjA0NS0uMDI1LjAyNC0uMDcuMDY3LS4wMDUuMDA1LS4wNzUuMDc1LS4wMDIuMDAxLS4xNTEuMTU4LS4wMDIuMDAyYTMuMzA5IDMuMzA5IDAgMCAwLS4wNzIuMDhIMS43OGExLjQzNiAxLjQzNiAwIDAgMC0uMDY0LjA3NGwtLjAyLjAyMmMtLjAxNi4wMTktLjAzMi4wNC0uMDUuMDU4LS4wMDIuMDA1LS4wMDcuMDA4LS4wMS4wMTNBNi45NzMgNi45NzMgMCAwIDAgMCA3YzAgMS43MTQuNjE2IDMuMjgzIDEuNjM4IDQuNWwuMDEuMDE0LjA0OS4wNTguMDE5LjAyMi4wNjQuMDczLjAwMS4wMDNjLjAyNC4wMjcuMDQ3LjA1My4wNzIuMDc4bC4wMDIuMDAyLjE1LjE1OC4wMDEuMDAxLjA3NC4wNzQuMDA0LjAwNUE2Ljk4NyA2Ljk4NyAwIDAgMCA3IDE0YTYuOTczIDYuOTczIDAgMCAwIDQuOTEtMi4wMTJsLjAwNi0uMDA1Yy4wMjUtLjAyNS4wNS0uMDQ5LjA3My0uMDc0bC4wMDItLjAwMWE0LjczIDQuNzMgMCAwIDAgLjE1LS4xNThsLjAwMS0uMDAyYy4wMjQtLjAyNi4wNDktLjA1MS4wNzItLjA3OCAwLS4wMDEuMDAyLS4wMDEuMDAyLS4wMDMuMDIyLS4wMjMuMDQzLS4wNDguMDY0LS4wNzNsLjAxOC0uMDIyYy4wMi0uMDIuMDM2LS4wNC4wNTItLjA1OHptLjA2NC0yLjIyOGMtLjIxNi41MS0uNS45ODEtLjg0NyAxLjQxYTYuOTM5IDYuOTM5IDAgMCAwLTEuMjczLS44NzRjLjE4MS0uNzMzLjI5My0xLjUzOC4zMjMtMi4zODRoMi4yNDJhNS44NDIgNS44NDIgMCAwIDEtLjQ0NSAxLjg0OHptLjQ0NS0yLjcyM2gtMi4yNDJhMTEuNjgxIDExLjY4MSAwIDAgMC0uMzIzLTIuMzg1IDYuOTM5IDYuOTM5IDAgMCAwIDEuMjczLS44NzMgNS44NDIgNS44NDIgMCAwIDEgMS4yOTIgMy4yNTh6TTkuMjg2IDEuNTg1YTUuODQgNS44NCAwIDAgMSAxLjY4MSAxLjA4MWMtLjI4OS4yNDctLjYuNDY0LS45MjguNjUzLS4yNDUtLjcwMy0uNTYtMS4zMTQtLjkyNS0xLjgwMy4wNTguMDIyLjExNi4wNDYuMTcyLjA2OXpNNy44NyAxMi41MzNhMS43NjggMS43NjggMCAwIDEtLjQzMy4yNTZWOS44OTFhNi4wOCA2LjA4IDAgMCAxIDEuODA4LjQwOWMtLjEzLjM4NC0uMjguNzQtLjQ1MyAxLjA2LS4yNzIuNTA2LS41OS45MS0uOTIyIDEuMTczem0uOTIyLTkuODkyYy4xNzIuMzIxLjMyNC42NzYuNDUzIDEuMDU5YTYuMDggNi4wOCAwIDAgMS0xLjgwNy40MVYxLjIxMWMuMTQzLjA1OC4yODkuMTQzLjQzMi4yNTcuMzMyLjI2LjY1LjY2NS45MjIgMS4xNzJ6TTcuNDM4IDkuMDE0VjcuNDM4aDIuMzA0Yy0uMDI1LjY5LS4xMSAxLjM2LS4yNTUgMS45OTZsLS4wMDQuMDJhNi45NTMgNi45NTMgMCAwIDAtMi4wNDYtLjQ0em0wLTIuNDUxVjQuOTg2YTYuOTUzIDYuOTUzIDAgMCAwIDIuMDQ1LS40NGwuMDA1LjAyYy4xNDMuNjM2LjIzIDEuMzA0LjI1NCAxLjk5N0g3LjQzN3ptLS44NzUuODc1djEuNTc2YTYuOTUzIDYuOTUzIDAgMCAwLTIuMDQ2LjQ0bC0uMDA1LS4wMmExMC44MzUgMTAuODM1IDAgMCAxLS4yNTQtMS45OTZoMi4zMDR6bS0yLjMwNS0uODc1Yy4wMjUtLjY5MS4xMS0xLjM2MS4yNTUtMS45OTdsLjAwNC0uMDJhNi45NDMgNi45NDMgMCAwIDAgMi4wNDUuNDR2MS41NzdINC4yNTh6TTYuNTYyIDkuODl2Mi44OTZhMS43NDggMS43NDggMCAwIDEtLjQzMi0uMjU2Yy0uMzMyLS4yNi0uNjUyLS42NjctLjkyNC0xLjE3M2E3LjA2IDcuMDYgMCAwIDEtLjQ1My0xLjA2IDYuMDk4IDYuMDk4IDAgMCAxIDEuODEtLjQwN3ptMC01Ljc4MkE2LjA4IDYuMDggMCAwIDEgNC43NTUgMy43Yy4xMy0uMzg0LjI4LS43NC40NTMtMS4wNi4yNzItLjUwNi41OS0uOTEyLjkyMy0xLjE3M2ExLjggMS44IDAgMCAxIC40MzMtLjI1NnYyLjg5OGgtLjAwMnpNNC43MTUgMS41ODZjLjA1OC0uMDI0LjExNC0uMDQ3LjE3Mi0uMDY5LS4zNjYuNDktLjY4IDEuMS0uOTI1IDEuODAzYTYuMDU3IDYuMDU3IDAgMCAxLS45MjgtLjY1MyA1Ljg0IDUuODQgMCAwIDEgMS42ODEtMS4wODF6TTEuNTg2IDQuNzE0Yy4yMTYtLjUxLjUtLjk4MS44NDctMS40MS4zODkuMzM3LjgxNS42MyAxLjI3My44NzRhMTEuNjgxIDExLjY4MSAwIDAgMC0uMzIzIDIuMzg1SDEuMTRhNS44IDUuOCAwIDAgMSAuNDQ1LTEuODQ5ek0xLjE0IDcuNDM3aDIuMjQyYy4wMy44NDcuMTQyIDEuNjUyLjMyMyAyLjM4NWE2LjkzOSA2LjkzOSAwIDAgMC0xLjI3My44NzNBNS44NDIgNS44NDIgMCAwIDEgMS4xNCA3LjQzN3ptMy41NzMgNC45NzdhNS44NCA1Ljg0IDAgMCAxLTEuNjgxLTEuMDgxYy4yODktLjI0Ny42LS40NjQuOTI4LS42NTMuMjQ1LjcwMy41NiAxLjMxNC45MjUgMS44MDNhNS42MjQgNS42MjQgMCAwIDEtLjE3Mi0uMDY5em00LjU3MiAwYTYuMTY4IDYuMTY4IDAgMCAxLS4xNzIuMDY5Yy4zNjYtLjQ5LjY4LTEuMS45MjUtMS44MDMuMzI4LjE4Ny42NC40MDYuOTI4LjY1M2E1Ljg0IDUuODQgMCAwIDEtMS42ODEgMS4wODF6IiBmaWxsPSIjRkZGIi8+PC9zdmc+',
-          }}
-          src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxjaXJjbGUgaWQ9ImIiIGN4PSIyMCIgY3k9IjIwIiByPSIyMCIvPjxmaWx0ZXIgeD0iLTE3LjUlIiB5PSItMTIuNSUiIHdpZHRoPSIxMzUlIiBoZWlnaHQ9IjEzNSUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9ImEiPjxmZU9mZnNldCBkeT0iMiIgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSIvPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSIvPjxmZUNvbXBvc2l0ZSBpbj0ic2hhZG93Qmx1ck91dGVyMSIgaW4yPSJTb3VyY2VBbHBoYSIgb3BlcmF0b3I9Im91dCIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjA0IDAiIGluPSJzaGFkb3dCbHVyT3V0ZXIxIi8+PC9maWx0ZXI+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNCAyKSI+PHVzZSBmaWxsPSIjMDAwIiBmaWx0ZXI9InVybCgjYSkiIHhsaW5rOmhyZWY9IiNiIi8+PGNpcmNsZSBzdHJva2U9IiM2OUMwRkYiIHN0cm9rZS1saW5lam9pbj0ic3F1YXJlIiBmaWxsLW9wYWNpdHk9Ii45MiIgZmlsbD0iIzY5QzBGRiIgY3g9IjIwIiBjeT0iMjAiIHI9IjE5LjUiLz48L2c+PHBhdGggZD0iTTI5LjM1IDI2LjUxNGwuMDEtLjAxNEE2Ljk2NiA2Ljk2NiAwIDAgMCAzMSAyMmE2Ljk3MyA2Ljk3MyAwIDAgMC0xLjYzNy00LjVsLS4wMTEtLjAxMy0uMDUtLjA1Ny0uMDItLjAyMi0uMDYzLS4wNzQtLjAwMi0uMDAxLS4wNzItLjA4LS4wMDEtLjAwMWMtLjA1LS4wNTQtLjEtLjEwNy0uMTUyLS4xNThsLS4wMDEtLjAwMi0uMDc1LS4wNzUtLjAwNS0uMDA0Yy0uMDIzLS4wMjQtLjA0Ny0uMDQ2LS4wNy0uMDY4bC0uMDI1LS4wMjMtLjA0Ny0uMDQ0LS4wMTYtLjAxNUE2Ljk2NiA2Ljk2NiAwIDAgMCAyNCAxNWE2Ljk3MyA2Ljk3MyAwIDAgMC00Ljc1NSAxLjg2M2wtLjAxNS4wMTUtLjA0Ny4wNDUtLjAyNS4wMjQtLjA3LjA2Ny0uMDA1LjAwNS0uMDc1LjA3NS0uMDAyLjAwMS0uMTUxLjE1OC0uMDAyLjAwMmEzLjMwOSAzLjMwOSAwIDAgMC0uMDcyLjA4aC0uMDAxYTEuNDM2IDEuNDM2IDAgMCAwLS4wNjQuMDc0bC0uMDIuMDIyYy0uMDE2LjAxOS0uMDMyLjA0LS4wNS4wNTgtLjAwMi4wMDUtLjAwNy4wMDgtLjAxLjAxM0E2Ljk3MyA2Ljk3MyAwIDAgMCAxNyAyMmMwIDEuNzE0LjYxNiAzLjI4MyAxLjYzOCA0LjVsLjAxLjAxNC4wNDkuMDU4LjAxOS4wMjIuMDY0LjA3My4wMDEuMDAzYy4wMjQuMDI3LjA0Ny4wNTMuMDcyLjA3OGwuMDAyLjAwMi4xNS4xNTguMDAxLjAwMS4wNzQuMDc0LjAwNC4wMDRBNi45ODcgNi45ODcgMCAwIDAgMjQgMjlhNi45NzMgNi45NzMgMCAwIDAgNC45MS0yLjAxMmwuMDA2LS4wMDRjLjAyNS0uMDI1LjA1LS4wNDkuMDczLS4wNzRsLjAwMi0uMDAxYTQuNzMgNC43MyAwIDAgMCAuMTUtLjE1OGwuMDAxLS4wMDJjLjAyNC0uMDI2LjA0OS0uMDUxLjA3Mi0uMDc4IDAtLjAwMS4wMDItLjAwMS4wMDItLjAwM2wuMDY0LS4wNzMuMDE4LS4wMjJjLjAyLS4wMi4wMzYtLjA0LjA1Mi0uMDU4em0uMDY0LTIuMjI4Yy0uMjE2LjUxLS41Ljk4MS0uODQ3IDEuNDFhNi45MzkgNi45MzkgMCAwIDAtMS4yNzMtLjg3NGMuMTgxLS43MzMuMjkzLTEuNTM4LjMyMy0yLjM4NGgyLjI0MmE1Ljg0MiA1Ljg0MiAwIDAgMS0uNDQ1IDEuODQ4em0uNDQ1LTIuNzIzaC0yLjI0MmExMS42ODEgMTEuNjgxIDAgMCAwLS4zMjMtMi4zODUgNi45MzkgNi45MzkgMCAwIDAgMS4yNzMtLjg3MyA1Ljg0MiA1Ljg0MiAwIDAgMSAxLjI5MiAzLjI1OHptLTMuNTczLTQuOTc3YTUuODQgNS44NCAwIDAgMSAxLjY4MSAxLjA4MWMtLjI4OS4yNDctLjYuNDY0LS45MjguNjUzLS4yNDUtLjcwMy0uNTYtMS4zMTQtLjkyNS0xLjgwMy4wNTguMDIyLjExNi4wNDYuMTcyLjA2OXpNMjQuODcgMjcuNTMzYTEuNzY4IDEuNzY4IDAgMCAxLS40MzMuMjU2di0yLjg5OGE2LjA4IDYuMDggMCAwIDEgMS44MDguNDA5Yy0uMTMuMzg0LS4yOC43NC0uNDUzIDEuMDYtLjI3Mi41MDYtLjU5LjkxLS45MjIgMS4xNzN6bS45MjItOS44OTJjLjE3Mi4zMjIuMzI0LjY3Ni40NTMgMS4wNTlhNi4wOCA2LjA4IDAgMCAxLTEuODA4LjQxdi0yLjg5N2MuMTQ0LjA1Ny4yOS4xNDIuNDMzLjI1Ni4zMzIuMjYuNjUuNjY1LjkyMiAxLjE3MnptLTEuMzU1IDYuMzczdi0xLjU3NmgyLjMwNWMtLjAyNS42OS0uMTEgMS4zNi0uMjU1IDEuOTk2bC0uMDA0LjAyYTYuOTUzIDYuOTUzIDAgMCAwLTIuMDQ1LS40NHptMC0yLjQ1MXYtMS41NzdhNi45NTMgNi45NTMgMCAwIDAgMi4wNDYtLjQ0bC4wMDUuMDJjLjE0My42MzYuMjMgMS4zMDQuMjU0IDEuOTk3aC0yLjMwNHptLS44NzUuODc1djEuNTc2YTYuOTUzIDYuOTUzIDAgMCAwLTIuMDQ1LjQ0bC0uMDA1LS4wMmExMC44MzUgMTAuODM1IDAgMCAxLS4yNTQtMS45OTZoMi4zMDV6bS0yLjMwNC0uODc1Yy4wMjUtLjY5MS4xMS0xLjM2MS4yNTUtMS45OTdsLjAwNC0uMDJhNi45NDMgNi45NDMgMCAwIDAgMi4wNDUuNDR2MS41NzdoLTIuMzA0em0yLjMwNSAzLjMyOHYyLjg5N2ExLjc0OCAxLjc0OCAwIDAgMS0uNDMzLS4yNTdjLS4zMzItLjI2LS42NTItLjY2Ny0uOTI0LTEuMTczYTcuMDYgNy4wNiAwIDAgMS0uNDUzLTEuMDYgNi4wOTggNi4wOTggMCAwIDEgMS44MS0uNDA3em0wLTUuNzgyYTYuMDggNi4wOCAwIDAgMS0xLjgwOC0uNDA5Yy4xMy0uMzg0LjI4LS43NC40NTMtMS4wNi4yNzItLjUwNi41OS0uOTEyLjkyMy0xLjE3M2ExLjggMS44IDAgMCAxIC40MzMtLjI1NnYyLjg5OGgtLjAwMnptLTEuODQ5LTIuNTIzYy4wNTgtLjAyMy4xMTQtLjA0Ny4xNzItLjA2OS0uMzY2LjQ5LS42OCAxLjEtLjkyNSAxLjgwM2E2LjA1NyA2LjA1NyAwIDAgMS0uOTI4LS42NTMgNS44NCA1Ljg0IDAgMCAxIDEuNjgxLTEuMDgxem0tMy4xMjggMy4xMjhjLjIxNi0uNTEuNS0uOTgxLjg0Ny0xLjQxLjM4OS4zMzcuODE1LjYzIDEuMjczLjg3NGExMS42ODEgMTEuNjgxIDAgMCAwLS4zMjMgMi4zODVIMTguMTRjLjA0Ny0uNjQuMTk3LTEuMjYuNDQ1LTEuODQ5em0tLjQ0NSAyLjcyNGgyLjI0MmMuMDMuODQ2LjE0MiAxLjY1MS4zMjMgMi4zODRhNi45MzkgNi45MzkgMCAwIDAtMS4yNzMuODczIDUuODQyIDUuODQyIDAgMCAxLTEuMjkyLTMuMjU4em0zLjU3MyA0Ljk3NmE1Ljg0IDUuODQgMCAwIDEtMS42ODEtMS4wODFjLjI4OS0uMjQ3LjYtLjQ2NC45MjgtLjY1My4yNDUuNzAzLjU2IDEuMzE0LjkyNSAxLjgwM2E1LjYyNCA1LjYyNCAwIDAgMS0uMTcyLS4wNjl6bTQuNTcyIDBhNi4xNjggNi4xNjggMCAwIDEtLjE3Mi4wNjljLjM2Ni0uNDkuNjgtMS4xLjkyNS0xLjgwMy4zMjguMTg3LjY0LjQwNi45MjguNjUzYTUuODQgNS44NCAwIDAgMS0xLjY4MSAxLjA4MXoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0ibm9uemVybyIvPjwvZz48L3N2Zz4="
-        />
-        <Item
-          type="node"
-          size="40"
-          shape="koni-custom-node"
-          model={{
-            color: '#5CDBD3',
-            label: 'Person',
-            labelOffsetY: 28,
-            icon:
-              'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEyLjM1IDExLjUxNGwuMDEtLjAxNEE2Ljk2NiA2Ljk2NiAwIDAgMCAxNCA3YTYuOTczIDYuOTczIDAgMCAwLTEuNjM3LTQuNWwtLjAxMS0uMDEzLS4wNS0uMDU3LS4wMi0uMDIyLS4wNjMtLjA3NC0uMDAyLS4wMDEtLjA3Mi0uMDgtLjAwMS0uMDAxYy0uMDUtLjA1NC0uMS0uMTA3LS4xNTItLjE1OGwtLjAwMS0uMDAyLS4wNzUtLjA3NS0uMDA1LS4wMDQtLjA3LS4wNjgtLjAyNS0uMDIzLS4wNDctLjA0NC0uMDE2LS4wMTZBNi45NjYgNi45NjYgMCAwIDAgNyAwYTYuOTczIDYuOTczIDAgMCAwLTQuNzU1IDEuODYybC0uMDE1LjAxNi0uMDQ3LjA0NS0uMDI1LjAyNC0uMDcuMDY3LS4wMDUuMDA1LS4wNzUuMDc1LS4wMDIuMDAxLS4xNTEuMTU4LS4wMDIuMDAyYTMuMzA5IDMuMzA5IDAgMCAwLS4wNzIuMDhIMS43OGExLjQzNiAxLjQzNiAwIDAgMC0uMDY0LjA3NGwtLjAyLjAyMmMtLjAxNi4wMTktLjAzMi4wNC0uMDUuMDU4LS4wMDIuMDA1LS4wMDcuMDA4LS4wMS4wMTNBNi45NzMgNi45NzMgMCAwIDAgMCA3YzAgMS43MTQuNjE2IDMuMjgzIDEuNjM4IDQuNWwuMDEuMDE0LjA0OS4wNTguMDE5LjAyMi4wNjQuMDczLjAwMS4wMDNjLjAyNC4wMjcuMDQ3LjA1My4wNzIuMDc4bC4wMDIuMDAyLjE1LjE1OC4wMDEuMDAxLjA3NC4wNzQuMDA0LjAwNUE2Ljk4NyA2Ljk4NyAwIDAgMCA3IDE0YTYuOTczIDYuOTczIDAgMCAwIDQuOTEtMi4wMTJsLjAwNi0uMDA1Yy4wMjUtLjAyNS4wNS0uMDQ5LjA3My0uMDc0bC4wMDItLjAwMWE0LjczIDQuNzMgMCAwIDAgLjE1LS4xNThsLjAwMS0uMDAyYy4wMjQtLjAyNi4wNDktLjA1MS4wNzItLjA3OCAwLS4wMDEuMDAyLS4wMDEuMDAyLS4wMDMuMDIyLS4wMjMuMDQzLS4wNDguMDY0LS4wNzNsLjAxOC0uMDIyYy4wMi0uMDIuMDM2LS4wNC4wNTItLjA1OHptLjA2NC0yLjIyOGMtLjIxNi41MS0uNS45ODEtLjg0NyAxLjQxYTYuOTM5IDYuOTM5IDAgMCAwLTEuMjczLS44NzRjLjE4MS0uNzMzLjI5My0xLjUzOC4zMjMtMi4zODRoMi4yNDJhNS44NDIgNS44NDIgMCAwIDEtLjQ0NSAxLjg0OHptLjQ0NS0yLjcyM2gtMi4yNDJhMTEuNjgxIDExLjY4MSAwIDAgMC0uMzIzLTIuMzg1IDYuOTM5IDYuOTM5IDAgMCAwIDEuMjczLS44NzMgNS44NDIgNS44NDIgMCAwIDEgMS4yOTIgMy4yNTh6TTkuMjg2IDEuNTg1YTUuODQgNS44NCAwIDAgMSAxLjY4MSAxLjA4MWMtLjI4OS4yNDctLjYuNDY0LS45MjguNjUzLS4yNDUtLjcwMy0uNTYtMS4zMTQtLjkyNS0xLjgwMy4wNTguMDIyLjExNi4wNDYuMTcyLjA2OXpNNy44NyAxMi41MzNhMS43NjggMS43NjggMCAwIDEtLjQzMy4yNTZWOS44OTFhNi4wOCA2LjA4IDAgMCAxIDEuODA4LjQwOWMtLjEzLjM4NC0uMjguNzQtLjQ1MyAxLjA2LS4yNzIuNTA2LS41OS45MS0uOTIyIDEuMTczem0uOTIyLTkuODkyYy4xNzIuMzIxLjMyNC42NzYuNDUzIDEuMDU5YTYuMDggNi4wOCAwIDAgMS0xLjgwNy40MVYxLjIxMWMuMTQzLjA1OC4yODkuMTQzLjQzMi4yNTcuMzMyLjI2LjY1LjY2NS45MjIgMS4xNzJ6TTcuNDM4IDkuMDE0VjcuNDM4aDIuMzA0Yy0uMDI1LjY5LS4xMSAxLjM2LS4yNTUgMS45OTZsLS4wMDQuMDJhNi45NTMgNi45NTMgMCAwIDAtMi4wNDYtLjQ0em0wLTIuNDUxVjQuOTg2YTYuOTUzIDYuOTUzIDAgMCAwIDIuMDQ1LS40NGwuMDA1LjAyYy4xNDMuNjM2LjIzIDEuMzA0LjI1NCAxLjk5N0g3LjQzN3ptLS44NzUuODc1djEuNTc2YTYuOTUzIDYuOTUzIDAgMCAwLTIuMDQ2LjQ0bC0uMDA1LS4wMmExMC44MzUgMTAuODM1IDAgMCAxLS4yNTQtMS45OTZoMi4zMDR6bS0yLjMwNS0uODc1Yy4wMjUtLjY5MS4xMS0xLjM2MS4yNTUtMS45OTdsLjAwNC0uMDJhNi45NDMgNi45NDMgMCAwIDAgMi4wNDUuNDR2MS41NzdINC4yNTh6TTYuNTYyIDkuODl2Mi44OTZhMS43NDggMS43NDggMCAwIDEtLjQzMi0uMjU2Yy0uMzMyLS4yNi0uNjUyLS42NjctLjkyNC0xLjE3M2E3LjA2IDcuMDYgMCAwIDEtLjQ1My0xLjA2IDYuMDk4IDYuMDk4IDAgMCAxIDEuODEtLjQwN3ptMC01Ljc4MkE2LjA4IDYuMDggMCAwIDEgNC43NTUgMy43Yy4xMy0uMzg0LjI4LS43NC40NTMtMS4wNi4yNzItLjUwNi41OS0uOTEyLjkyMy0xLjE3M2ExLjggMS44IDAgMCAxIC40MzMtLjI1NnYyLjg5OGgtLjAwMnpNNC43MTUgMS41ODZjLjA1OC0uMDI0LjExNC0uMDQ3LjE3Mi0uMDY5LS4zNjYuNDktLjY4IDEuMS0uOTI1IDEuODAzYTYuMDU3IDYuMDU3IDAgMCAxLS45MjgtLjY1MyA1Ljg0IDUuODQgMCAwIDEgMS42ODEtMS4wODF6TTEuNTg2IDQuNzE0Yy4yMTYtLjUxLjUtLjk4MS44NDctMS40MS4zODkuMzM3LjgxNS42MyAxLjI3My44NzRhMTEuNjgxIDExLjY4MSAwIDAgMC0uMzIzIDIuMzg1SDEuMTRhNS44IDUuOCAwIDAgMSAuNDQ1LTEuODQ5ek0xLjE0IDcuNDM3aDIuMjQyYy4wMy44NDcuMTQyIDEuNjUyLjMyMyAyLjM4NWE2LjkzOSA2LjkzOSAwIDAgMC0xLjI3My44NzNBNS44NDIgNS44NDIgMCAwIDEgMS4xNCA3LjQzN3ptMy41NzMgNC45NzdhNS44NCA1Ljg0IDAgMCAxLTEuNjgxLTEuMDgxYy4yODktLjI0Ny42LS40NjQuOTI4LS42NTMuMjQ1LjcwMy41NiAxLjMxNC45MjUgMS44MDNhNS42MjQgNS42MjQgMCAwIDEtLjE3Mi0uMDY5em00LjU3MiAwYTYuMTY4IDYuMTY4IDAgMCAxLS4xNzIuMDY5Yy4zNjYtLjQ5LjY4LTEuMS45MjUtMS44MDMuMzI4LjE4Ny42NC40MDYuOTI4LjY1M2E1Ljg0IDUuODQgMCAwIDEtMS42ODEgMS4wODF6IiBmaWxsPSIjRkZGIi8+PC9zdmc+',
-          }}
-          src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxjaXJjbGUgaWQ9ImIiIGN4PSIyMCIgY3k9IjIwIiByPSIyMCIvPjxmaWx0ZXIgeD0iLTE3LjUlIiB5PSItMTIuNSUiIHdpZHRoPSIxMzUlIiBoZWlnaHQ9IjEzNSUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9ImEiPjxmZU9mZnNldCBkeT0iMiIgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSIvPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSIvPjxmZUNvbXBvc2l0ZSBpbj0ic2hhZG93Qmx1ck91dGVyMSIgaW4yPSJTb3VyY2VBbHBoYSIgb3BlcmF0b3I9Im91dCIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjA0IDAiIGluPSJzaGFkb3dCbHVyT3V0ZXIxIi8+PC9maWx0ZXI+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNCAyKSI+PHVzZSBmaWxsPSIjMDAwIiBmaWx0ZXI9InVybCgjYSkiIHhsaW5rOmhyZWY9IiNiIi8+PGNpcmNsZSBzdHJva2U9IiM1Q0RCRDMiIHN0cm9rZS1saW5lam9pbj0ic3F1YXJlIiBmaWxsLW9wYWNpdHk9Ii45MiIgZmlsbD0iIzVDREJEMyIgY3g9IjIwIiBjeT0iMjAiIHI9IjE5LjUiLz48L2c+PHBhdGggZD0iTTI5LjM1IDI2LjUxNGwuMDEtLjAxNEE2Ljk2NiA2Ljk2NiAwIDAgMCAzMSAyMmE2Ljk3MyA2Ljk3MyAwIDAgMC0xLjYzNy00LjVsLS4wMTEtLjAxMy0uMDUtLjA1Ny0uMDItLjAyMi0uMDYzLS4wNzQtLjAwMi0uMDAxLS4wNzItLjA4LS4wMDEtLjAwMWMtLjA1LS4wNTQtLjEtLjEwNy0uMTUyLS4xNThsLS4wMDEtLjAwMi0uMDc1LS4wNzUtLjAwNS0uMDA0Yy0uMDIzLS4wMjQtLjA0Ny0uMDQ2LS4wNy0uMDY4bC0uMDI1LS4wMjMtLjA0Ny0uMDQ0LS4wMTYtLjAxNUE2Ljk2NiA2Ljk2NiAwIDAgMCAyNCAxNWE2Ljk3MyA2Ljk3MyAwIDAgMC00Ljc1NSAxLjg2M2wtLjAxNS4wMTUtLjA0Ny4wNDUtLjAyNS4wMjQtLjA3LjA2Ny0uMDA1LjAwNS0uMDc1LjA3NS0uMDAyLjAwMS0uMTUxLjE1OC0uMDAyLjAwMmEzLjMwOSAzLjMwOSAwIDAgMC0uMDcyLjA4aC0uMDAxYTEuNDM2IDEuNDM2IDAgMCAwLS4wNjQuMDc0bC0uMDIuMDIyYy0uMDE2LjAxOS0uMDMyLjA0LS4wNS4wNTgtLjAwMi4wMDUtLjAwNy4wMDgtLjAxLjAxM0E2Ljk3MyA2Ljk3MyAwIDAgMCAxNyAyMmMwIDEuNzE0LjYxNiAzLjI4MyAxLjYzOCA0LjVsLjAxLjAxNC4wNDkuMDU4LjAxOS4wMjIuMDY0LjA3My4wMDEuMDAzYy4wMjQuMDI3LjA0Ny4wNTMuMDcyLjA3OGwuMDAyLjAwMi4xNS4xNTguMDAxLjAwMS4wNzQuMDc0LjAwNC4wMDRBNi45ODcgNi45ODcgMCAwIDAgMjQgMjlhNi45NzMgNi45NzMgMCAwIDAgNC45MS0yLjAxMmwuMDA2LS4wMDRjLjAyNS0uMDI1LjA1LS4wNDkuMDczLS4wNzRsLjAwMi0uMDAxYTQuNzMgNC43MyAwIDAgMCAuMTUtLjE1OGwuMDAxLS4wMDJjLjAyNC0uMDI2LjA0OS0uMDUxLjA3Mi0uMDc4IDAtLjAwMS4wMDItLjAwMS4wMDItLjAwM2wuMDY0LS4wNzMuMDE4LS4wMjJjLjAyLS4wMi4wMzYtLjA0LjA1Mi0uMDU4em0uMDY0LTIuMjI4Yy0uMjE2LjUxLS41Ljk4MS0uODQ3IDEuNDFhNi45MzkgNi45MzkgMCAwIDAtMS4yNzMtLjg3NGMuMTgxLS43MzMuMjkzLTEuNTM4LjMyMy0yLjM4NGgyLjI0MmE1Ljg0MiA1Ljg0MiAwIDAgMS0uNDQ1IDEuODQ4em0uNDQ1LTIuNzIzaC0yLjI0MmExMS42ODEgMTEuNjgxIDAgMCAwLS4zMjMtMi4zODUgNi45MzkgNi45MzkgMCAwIDAgMS4yNzMtLjg3MyA1Ljg0MiA1Ljg0MiAwIDAgMSAxLjI5MiAzLjI1OHptLTMuNTczLTQuOTc3YTUuODQgNS44NCAwIDAgMSAxLjY4MSAxLjA4MWMtLjI4OS4yNDctLjYuNDY0LS45MjguNjUzLS4yNDUtLjcwMy0uNTYtMS4zMTQtLjkyNS0xLjgwMy4wNTguMDIyLjExNi4wNDYuMTcyLjA2OXpNMjQuODcgMjcuNTMzYTEuNzY4IDEuNzY4IDAgMCAxLS40MzMuMjU2di0yLjg5OGE2LjA4IDYuMDggMCAwIDEgMS44MDguNDA5Yy0uMTMuMzg0LS4yOC43NC0uNDUzIDEuMDYtLjI3Mi41MDYtLjU5LjkxLS45MjIgMS4xNzN6bS45MjItOS44OTJjLjE3Mi4zMjIuMzI0LjY3Ni40NTMgMS4wNTlhNi4wOCA2LjA4IDAgMCAxLTEuODA4LjQxdi0yLjg5N2MuMTQ0LjA1Ny4yOS4xNDIuNDMzLjI1Ni4zMzIuMjYuNjUuNjY1LjkyMiAxLjE3MnptLTEuMzU1IDYuMzczdi0xLjU3NmgyLjMwNWMtLjAyNS42OS0uMTEgMS4zNi0uMjU1IDEuOTk2bC0uMDA0LjAyYTYuOTUzIDYuOTUzIDAgMCAwLTIuMDQ1LS40NHptMC0yLjQ1MXYtMS41NzdhNi45NTMgNi45NTMgMCAwIDAgMi4wNDYtLjQ0bC4wMDUuMDJjLjE0My42MzYuMjMgMS4zMDQuMjU0IDEuOTk3aC0yLjMwNHptLS44NzUuODc1djEuNTc2YTYuOTUzIDYuOTUzIDAgMCAwLTIuMDQ1LjQ0bC0uMDA1LS4wMmExMC44MzUgMTAuODM1IDAgMCAxLS4yNTQtMS45OTZoMi4zMDV6bS0yLjMwNC0uODc1Yy4wMjUtLjY5MS4xMS0xLjM2MS4yNTUtMS45OTdsLjAwNC0uMDJhNi45NDMgNi45NDMgMCAwIDAgMi4wNDUuNDR2MS41NzdoLTIuMzA0em0yLjMwNSAzLjMyOHYyLjg5N2ExLjc0OCAxLjc0OCAwIDAgMS0uNDMzLS4yNTdjLS4zMzItLjI2LS42NTItLjY2Ny0uOTI0LTEuMTczYTcuMDYgNy4wNiAwIDAgMS0uNDUzLTEuMDYgNi4wOTggNi4wOTggMCAwIDEgMS44MS0uNDA3em0wLTUuNzgyYTYuMDggNi4wOCAwIDAgMS0xLjgwOC0uNDA5Yy4xMy0uMzg0LjI4LS43NC40NTMtMS4wNi4yNzItLjUwNi41OS0uOTEyLjkyMy0xLjE3M2ExLjggMS44IDAgMCAxIC40MzMtLjI1NnYyLjg5OGgtLjAwMnptLTEuODQ5LTIuNTIzYy4wNTgtLjAyMy4xMTQtLjA0Ny4xNzItLjA2OS0uMzY2LjQ5LS42OCAxLjEtLjkyNSAxLjgwM2E2LjA1NyA2LjA1NyAwIDAgMS0uOTI4LS42NTMgNS44NCA1Ljg0IDAgMCAxIDEuNjgxLTEuMDgxem0tMy4xMjggMy4xMjhjLjIxNi0uNTEuNS0uOTgxLjg0Ny0xLjQxLjM4OS4zMzcuODE1LjYzIDEuMjczLjg3NGExMS42ODEgMTEuNjgxIDAgMCAwLS4zMjMgMi4zODVIMTguMTRjLjA0Ny0uNjQuMTk3LTEuMjYuNDQ1LTEuODQ5em0tLjQ0NSAyLjcyNGgyLjI0MmMuMDMuODQ2LjE0MiAxLjY1MS4zMjMgMi4zODRhNi45MzkgNi45MzkgMCAwIDAtMS4yNzMuODczIDUuODQyIDUuODQyIDAgMCAxLTEuMjkyLTMuMjU4em0zLjU3MyA0Ljk3NmE1Ljg0IDUuODQgMCAwIDEtMS42ODEtMS4wODFjLjI4OS0uMjQ3LjYtLjQ2NC45MjgtLjY1My4yNDUuNzAzLjU2IDEuMzE0LjkyNSAxLjgwM2E1LjYyNCA1LjYyNCAwIDAgMS0uMTcyLS4wNjl6bTQuNTcyIDBhNi4xNjggNi4xNjggMCAwIDEtLjE3Mi4wNjljLjM2Ni0uNDkuNjgtMS4xLjkyNS0xLjgwMy4zMjguMTg3LjY0LjQwNi45MjguNjUzYTUuODQgNS44NCAwIDAgMS0xLjY4MSAxLjA4MXoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0ibm9uemVybyIvPjwvZz48L3N2Zz4="
-        />
-        <Item
-          type="node"
-          size="40"
-          shape="koni-custom-node"
-          model={{
-            color: '#B37FEB',
-            label: 'Country',
-            labelOffsetY: 28,
-            icon:
-              'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEyLjM1IDExLjUxNGwuMDEtLjAxNEE2Ljk2NiA2Ljk2NiAwIDAgMCAxNCA3YTYuOTczIDYuOTczIDAgMCAwLTEuNjM3LTQuNWwtLjAxMS0uMDEzLS4wNS0uMDU3LS4wMi0uMDIyLS4wNjMtLjA3NC0uMDAyLS4wMDEtLjA3Mi0uMDgtLjAwMS0uMDAxYy0uMDUtLjA1NC0uMS0uMTA3LS4xNTItLjE1OGwtLjAwMS0uMDAyLS4wNzUtLjA3NS0uMDA1LS4wMDQtLjA3LS4wNjgtLjAyNS0uMDIzLS4wNDctLjA0NC0uMDE2LS4wMTZBNi45NjYgNi45NjYgMCAwIDAgNyAwYTYuOTczIDYuOTczIDAgMCAwLTQuNzU1IDEuODYybC0uMDE1LjAxNi0uMDQ3LjA0NS0uMDI1LjAyNC0uMDcuMDY3LS4wMDUuMDA1LS4wNzUuMDc1LS4wMDIuMDAxLS4xNTEuMTU4LS4wMDIuMDAyYTMuMzA5IDMuMzA5IDAgMCAwLS4wNzIuMDhIMS43OGExLjQzNiAxLjQzNiAwIDAgMC0uMDY0LjA3NGwtLjAyLjAyMmMtLjAxNi4wMTktLjAzMi4wNC0uMDUuMDU4LS4wMDIuMDA1LS4wMDcuMDA4LS4wMS4wMTNBNi45NzMgNi45NzMgMCAwIDAgMCA3YzAgMS43MTQuNjE2IDMuMjgzIDEuNjM4IDQuNWwuMDEuMDE0LjA0OS4wNTguMDE5LjAyMi4wNjQuMDczLjAwMS4wMDNjLjAyNC4wMjcuMDQ3LjA1My4wNzIuMDc4bC4wMDIuMDAyLjE1LjE1OC4wMDEuMDAxLjA3NC4wNzQuMDA0LjAwNUE2Ljk4NyA2Ljk4NyAwIDAgMCA3IDE0YTYuOTczIDYuOTczIDAgMCAwIDQuOTEtMi4wMTJsLjAwNi0uMDA1Yy4wMjUtLjAyNS4wNS0uMDQ5LjA3My0uMDc0bC4wMDItLjAwMWE0LjczIDQuNzMgMCAwIDAgLjE1LS4xNThsLjAwMS0uMDAyYy4wMjQtLjAyNi4wNDktLjA1MS4wNzItLjA3OCAwLS4wMDEuMDAyLS4wMDEuMDAyLS4wMDMuMDIyLS4wMjMuMDQzLS4wNDguMDY0LS4wNzNsLjAxOC0uMDIyYy4wMi0uMDIuMDM2LS4wNC4wNTItLjA1OHptLjA2NC0yLjIyOGMtLjIxNi41MS0uNS45ODEtLjg0NyAxLjQxYTYuOTM5IDYuOTM5IDAgMCAwLTEuMjczLS44NzRjLjE4MS0uNzMzLjI5My0xLjUzOC4zMjMtMi4zODRoMi4yNDJhNS44NDIgNS44NDIgMCAwIDEtLjQ0NSAxLjg0OHptLjQ0NS0yLjcyM2gtMi4yNDJhMTEuNjgxIDExLjY4MSAwIDAgMC0uMzIzLTIuMzg1IDYuOTM5IDYuOTM5IDAgMCAwIDEuMjczLS44NzMgNS44NDIgNS44NDIgMCAwIDEgMS4yOTIgMy4yNTh6TTkuMjg2IDEuNTg1YTUuODQgNS44NCAwIDAgMSAxLjY4MSAxLjA4MWMtLjI4OS4yNDctLjYuNDY0LS45MjguNjUzLS4yNDUtLjcwMy0uNTYtMS4zMTQtLjkyNS0xLjgwMy4wNTguMDIyLjExNi4wNDYuMTcyLjA2OXpNNy44NyAxMi41MzNhMS43NjggMS43NjggMCAwIDEtLjQzMy4yNTZWOS44OTFhNi4wOCA2LjA4IDAgMCAxIDEuODA4LjQwOWMtLjEzLjM4NC0uMjguNzQtLjQ1MyAxLjA2LS4yNzIuNTA2LS41OS45MS0uOTIyIDEuMTczem0uOTIyLTkuODkyYy4xNzIuMzIxLjMyNC42NzYuNDUzIDEuMDU5YTYuMDggNi4wOCAwIDAgMS0xLjgwNy40MVYxLjIxMWMuMTQzLjA1OC4yODkuMTQzLjQzMi4yNTcuMzMyLjI2LjY1LjY2NS45MjIgMS4xNzJ6TTcuNDM4IDkuMDE0VjcuNDM4aDIuMzA0Yy0uMDI1LjY5LS4xMSAxLjM2LS4yNTUgMS45OTZsLS4wMDQuMDJhNi45NTMgNi45NTMgMCAwIDAtMi4wNDYtLjQ0em0wLTIuNDUxVjQuOTg2YTYuOTUzIDYuOTUzIDAgMCAwIDIuMDQ1LS40NGwuMDA1LjAyYy4xNDMuNjM2LjIzIDEuMzA0LjI1NCAxLjk5N0g3LjQzN3ptLS44NzUuODc1djEuNTc2YTYuOTUzIDYuOTUzIDAgMCAwLTIuMDQ2LjQ0bC0uMDA1LS4wMmExMC44MzUgMTAuODM1IDAgMCAxLS4yNTQtMS45OTZoMi4zMDR6bS0yLjMwNS0uODc1Yy4wMjUtLjY5MS4xMS0xLjM2MS4yNTUtMS45OTdsLjAwNC0uMDJhNi45NDMgNi45NDMgMCAwIDAgMi4wNDUuNDR2MS41NzdINC4yNTh6TTYuNTYyIDkuODl2Mi44OTZhMS43NDggMS43NDggMCAwIDEtLjQzMi0uMjU2Yy0uMzMyLS4yNi0uNjUyLS42NjctLjkyNC0xLjE3M2E3LjA2IDcuMDYgMCAwIDEtLjQ1My0xLjA2IDYuMDk4IDYuMDk4IDAgMCAxIDEuODEtLjQwN3ptMC01Ljc4MkE2LjA4IDYuMDggMCAwIDEgNC43NTUgMy43Yy4xMy0uMzg0LjI4LS43NC40NTMtMS4wNi4yNzItLjUwNi41OS0uOTEyLjkyMy0xLjE3M2ExLjggMS44IDAgMCAxIC40MzMtLjI1NnYyLjg5OGgtLjAwMnpNNC43MTUgMS41ODZjLjA1OC0uMDI0LjExNC0uMDQ3LjE3Mi0uMDY5LS4zNjYuNDktLjY4IDEuMS0uOTI1IDEuODAzYTYuMDU3IDYuMDU3IDAgMCAxLS45MjgtLjY1MyA1Ljg0IDUuODQgMCAwIDEgMS42ODEtMS4wODF6TTEuNTg2IDQuNzE0Yy4yMTYtLjUxLjUtLjk4MS44NDctMS40MS4zODkuMzM3LjgxNS42MyAxLjI3My44NzRhMTEuNjgxIDExLjY4MSAwIDAgMC0uMzIzIDIuMzg1SDEuMTRhNS44IDUuOCAwIDAgMSAuNDQ1LTEuODQ5ek0xLjE0IDcuNDM3aDIuMjQyYy4wMy44NDcuMTQyIDEuNjUyLjMyMyAyLjM4NWE2LjkzOSA2LjkzOSAwIDAgMC0xLjI3My44NzNBNS44NDIgNS44NDIgMCAwIDEgMS4xNCA3LjQzN3ptMy41NzMgNC45NzdhNS44NCA1Ljg0IDAgMCAxLTEuNjgxLTEuMDgxYy4yODktLjI0Ny42LS40NjQuOTI4LS42NTMuMjQ1LjcwMy41NiAxLjMxNC45MjUgMS44MDNhNS42MjQgNS42MjQgMCAwIDEtLjE3Mi0uMDY5em00LjU3MiAwYTYuMTY4IDYuMTY4IDAgMCAxLS4xNzIuMDY5Yy4zNjYtLjQ5LjY4LTEuMS45MjUtMS44MDMuMzI4LjE4Ny42NC40MDYuOTI4LjY1M2E1Ljg0IDUuODQgMCAwIDEtMS42ODEgMS4wODF6IiBmaWxsPSIjRkZGIi8+PC9zdmc+',
-          }}
-          src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxjaXJjbGUgaWQ9ImIiIGN4PSIyMCIgY3k9IjIwIiByPSIyMCIvPjxmaWx0ZXIgeD0iLTE3LjUlIiB5PSItMTIuNSUiIHdpZHRoPSIxMzUlIiBoZWlnaHQ9IjEzNSUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9ImEiPjxmZU9mZnNldCBkeT0iMiIgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSIvPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSIvPjxmZUNvbXBvc2l0ZSBpbj0ic2hhZG93Qmx1ck91dGVyMSIgaW4yPSJTb3VyY2VBbHBoYSIgb3BlcmF0b3I9Im91dCIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjA0IDAiIGluPSJzaGFkb3dCbHVyT3V0ZXIxIi8+PC9maWx0ZXI+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNCAyKSI+PHVzZSBmaWxsPSIjMDAwIiBmaWx0ZXI9InVybCgjYSkiIHhsaW5rOmhyZWY9IiNiIi8+PGNpcmNsZSBzdHJva2U9IiNCMzdGRUIiIHN0cm9rZS1saW5lam9pbj0ic3F1YXJlIiBmaWxsLW9wYWNpdHk9Ii45MiIgZmlsbD0iI0IzN0ZFQiIgY3g9IjIwIiBjeT0iMjAiIHI9IjE5LjUiLz48L2c+PHBhdGggZD0iTTI5LjM1IDI2LjUxNGwuMDEtLjAxNEE2Ljk2NiA2Ljk2NiAwIDAgMCAzMSAyMmE2Ljk3MyA2Ljk3MyAwIDAgMC0xLjYzNy00LjVsLS4wMTEtLjAxMy0uMDUtLjA1Ny0uMDItLjAyMi0uMDYzLS4wNzQtLjAwMi0uMDAxLS4wNzItLjA4LS4wMDEtLjAwMWMtLjA1LS4wNTQtLjEtLjEwNy0uMTUyLS4xNThsLS4wMDEtLjAwMi0uMDc1LS4wNzUtLjAwNS0uMDA0Yy0uMDIzLS4wMjQtLjA0Ny0uMDQ2LS4wNy0uMDY4bC0uMDI1LS4wMjMtLjA0Ny0uMDQ0LS4wMTYtLjAxNUE2Ljk2NiA2Ljk2NiAwIDAgMCAyNCAxNWE2Ljk3MyA2Ljk3MyAwIDAgMC00Ljc1NSAxLjg2M2wtLjAxNS4wMTUtLjA0Ny4wNDUtLjAyNS4wMjQtLjA3LjA2Ny0uMDA1LjAwNS0uMDc1LjA3NS0uMDAyLjAwMS0uMTUxLjE1OC0uMDAyLjAwMmEzLjMwOSAzLjMwOSAwIDAgMC0uMDcyLjA4aC0uMDAxYTEuNDM2IDEuNDM2IDAgMCAwLS4wNjQuMDc0bC0uMDIuMDIyYy0uMDE2LjAxOS0uMDMyLjA0LS4wNS4wNTgtLjAwMi4wMDUtLjAwNy4wMDgtLjAxLjAxM0E2Ljk3MyA2Ljk3MyAwIDAgMCAxNyAyMmMwIDEuNzE0LjYxNiAzLjI4MyAxLjYzOCA0LjVsLjAxLjAxNC4wNDkuMDU4LjAxOS4wMjIuMDY0LjA3My4wMDEuMDAzYy4wMjQuMDI3LjA0Ny4wNTMuMDcyLjA3OGwuMDAyLjAwMi4xNS4xNTguMDAxLjAwMS4wNzQuMDc0LjAwNC4wMDRBNi45ODcgNi45ODcgMCAwIDAgMjQgMjlhNi45NzMgNi45NzMgMCAwIDAgNC45MS0yLjAxMmwuMDA2LS4wMDRjLjAyNS0uMDI1LjA1LS4wNDkuMDczLS4wNzRsLjAwMi0uMDAxYTQuNzMgNC43MyAwIDAgMCAuMTUtLjE1OGwuMDAxLS4wMDJjLjAyNC0uMDI2LjA0OS0uMDUxLjA3Mi0uMDc4IDAtLjAwMS4wMDItLjAwMS4wMDItLjAwM2wuMDY0LS4wNzMuMDE4LS4wMjJjLjAyLS4wMi4wMzYtLjA0LjA1Mi0uMDU4em0uMDY0LTIuMjI4Yy0uMjE2LjUxLS41Ljk4MS0uODQ3IDEuNDFhNi45MzkgNi45MzkgMCAwIDAtMS4yNzMtLjg3NGMuMTgxLS43MzMuMjkzLTEuNTM4LjMyMy0yLjM4NGgyLjI0MmE1Ljg0MiA1Ljg0MiAwIDAgMS0uNDQ1IDEuODQ4em0uNDQ1LTIuNzIzaC0yLjI0MmExMS42ODEgMTEuNjgxIDAgMCAwLS4zMjMtMi4zODUgNi45MzkgNi45MzkgMCAwIDAgMS4yNzMtLjg3MyA1Ljg0MiA1Ljg0MiAwIDAgMSAxLjI5MiAzLjI1OHptLTMuNTczLTQuOTc3YTUuODQgNS44NCAwIDAgMSAxLjY4MSAxLjA4MWMtLjI4OS4yNDctLjYuNDY0LS45MjguNjUzLS4yNDUtLjcwMy0uNTYtMS4zMTQtLjkyNS0xLjgwMy4wNTguMDIyLjExNi4wNDYuMTcyLjA2OXpNMjQuODcgMjcuNTMzYTEuNzY4IDEuNzY4IDAgMCAxLS40MzMuMjU2di0yLjg5OGE2LjA4IDYuMDggMCAwIDEgMS44MDguNDA5Yy0uMTMuMzg0LS4yOC43NC0uNDUzIDEuMDYtLjI3Mi41MDYtLjU5LjkxLS45MjIgMS4xNzN6bS45MjItOS44OTJjLjE3Mi4zMjIuMzI0LjY3Ni40NTMgMS4wNTlhNi4wOCA2LjA4IDAgMCAxLTEuODA4LjQxdi0yLjg5N2MuMTQ0LjA1Ny4yOS4xNDIuNDMzLjI1Ni4zMzIuMjYuNjUuNjY1LjkyMiAxLjE3MnptLTEuMzU1IDYuMzczdi0xLjU3NmgyLjMwNWMtLjAyNS42OS0uMTEgMS4zNi0uMjU1IDEuOTk2bC0uMDA0LjAyYTYuOTUzIDYuOTUzIDAgMCAwLTIuMDQ1LS40NHptMC0yLjQ1MXYtMS41NzdhNi45NTMgNi45NTMgMCAwIDAgMi4wNDYtLjQ0bC4wMDUuMDJjLjE0My42MzYuMjMgMS4zMDQuMjU0IDEuOTk3aC0yLjMwNHptLS44NzUuODc1djEuNTc2YTYuOTUzIDYuOTUzIDAgMCAwLTIuMDQ1LjQ0bC0uMDA1LS4wMmExMC44MzUgMTAuODM1IDAgMCAxLS4yNTQtMS45OTZoMi4zMDV6bS0yLjMwNC0uODc1Yy4wMjUtLjY5MS4xMS0xLjM2MS4yNTUtMS45OTdsLjAwNC0uMDJhNi45NDMgNi45NDMgMCAwIDAgMi4wNDUuNDR2MS41NzdoLTIuMzA0em0yLjMwNSAzLjMyOHYyLjg5N2ExLjc0OCAxLjc0OCAwIDAgMS0uNDMzLS4yNTdjLS4zMzItLjI2LS42NTItLjY2Ny0uOTI0LTEuMTczYTcuMDYgNy4wNiAwIDAgMS0uNDUzLTEuMDYgNi4wOTggNi4wOTggMCAwIDEgMS44MS0uNDA3em0wLTUuNzgyYTYuMDggNi4wOCAwIDAgMS0xLjgwOC0uNDA5Yy4xMy0uMzg0LjI4LS43NC40NTMtMS4wNi4yNzItLjUwNi41OS0uOTEyLjkyMy0xLjE3M2ExLjggMS44IDAgMCAxIC40MzMtLjI1NnYyLjg5OGgtLjAwMnptLTEuODQ5LTIuNTIzYy4wNTgtLjAyMy4xMTQtLjA0Ny4xNzItLjA2OS0uMzY2LjQ5LS42OCAxLjEtLjkyNSAxLjgwM2E2LjA1NyA2LjA1NyAwIDAgMS0uOTI4LS42NTMgNS44NCA1Ljg0IDAgMCAxIDEuNjgxLTEuMDgxem0tMy4xMjggMy4xMjhjLjIxNi0uNTEuNS0uOTgxLjg0Ny0xLjQxLjM4OS4zMzcuODE1LjYzIDEuMjczLjg3NGExMS42ODEgMTEuNjgxIDAgMCAwLS4zMjMgMi4zODVIMTguMTRjLjA0Ny0uNjQuMTk3LTEuMjYuNDQ1LTEuODQ5em0tLjQ0NSAyLjcyNGgyLjI0MmMuMDMuODQ2LjE0MiAxLjY1MS4zMjMgMi4zODRhNi45MzkgNi45MzkgMCAwIDAtMS4yNzMuODczIDUuODQyIDUuODQyIDAgMCAxLTEuMjkyLTMuMjU4em0zLjU3MyA0Ljk3NmE1Ljg0IDUuODQgMCAwIDEtMS42ODEtMS4wODFjLjI4OS0uMjQ3LjYtLjQ2NC45MjgtLjY1My4yNDUuNzAzLjU2IDEuMzE0LjkyNSAxLjgwM2E1LjYyNCA1LjYyNCAwIDAgMS0uMTcyLS4wNjl6bTQuNTcyIDBhNi4xNjggNi4xNjggMCAwIDEtLjE3Mi4wNjljLjM2Ni0uNDkuNjgtMS4xLjkyNS0xLjgwMy4zMjguMTg3LjY0LjQwNi45MjguNjUzYTUuODQgNS44NCAwIDAgMS0xLjY4MSAxLjA4MXoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0ibm9uemVybyIvPjwvZz48L3N2Zz4="
-        />
-      </Card>
-    </ItemPanel>
-  );
-};
+const KoniItemPanel = () => (
+  <ItemPanel className={styles.itemPanel}>
+    <Card bordered={false}>
+      <Item
+        type="node"
+        size="40"
+        shape="koni-custom-node"
+        model={{
+          color: '#69C0FF',
+          label: 'Bank',
+          labelOffsetY: 28,
+          icon:
+            'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEyLjM1IDExLjUxNGwuMDEtLjAxNEE2Ljk2NiA2Ljk2NiAwIDAgMCAxNCA3YTYuOTczIDYuOTczIDAgMCAwLTEuNjM3LTQuNWwtLjAxMS0uMDEzLS4wNS0uMDU3LS4wMi0uMDIyLS4wNjMtLjA3NC0uMDAyLS4wMDEtLjA3Mi0uMDgtLjAwMS0uMDAxYy0uMDUtLjA1NC0uMS0uMTA3LS4xNTItLjE1OGwtLjAwMS0uMDAyLS4wNzUtLjA3NS0uMDA1LS4wMDQtLjA3LS4wNjgtLjAyNS0uMDIzLS4wNDctLjA0NC0uMDE2LS4wMTZBNi45NjYgNi45NjYgMCAwIDAgNyAwYTYuOTczIDYuOTczIDAgMCAwLTQuNzU1IDEuODYybC0uMDE1LjAxNi0uMDQ3LjA0NS0uMDI1LjAyNC0uMDcuMDY3LS4wMDUuMDA1LS4wNzUuMDc1LS4wMDIuMDAxLS4xNTEuMTU4LS4wMDIuMDAyYTMuMzA5IDMuMzA5IDAgMCAwLS4wNzIuMDhIMS43OGExLjQzNiAxLjQzNiAwIDAgMC0uMDY0LjA3NGwtLjAyLjAyMmMtLjAxNi4wMTktLjAzMi4wNC0uMDUuMDU4LS4wMDIuMDA1LS4wMDcuMDA4LS4wMS4wMTNBNi45NzMgNi45NzMgMCAwIDAgMCA3YzAgMS43MTQuNjE2IDMuMjgzIDEuNjM4IDQuNWwuMDEuMDE0LjA0OS4wNTguMDE5LjAyMi4wNjQuMDczLjAwMS4wMDNjLjAyNC4wMjcuMDQ3LjA1My4wNzIuMDc4bC4wMDIuMDAyLjE1LjE1OC4wMDEuMDAxLjA3NC4wNzQuMDA0LjAwNUE2Ljk4NyA2Ljk4NyAwIDAgMCA3IDE0YTYuOTczIDYuOTczIDAgMCAwIDQuOTEtMi4wMTJsLjAwNi0uMDA1Yy4wMjUtLjAyNS4wNS0uMDQ5LjA3My0uMDc0bC4wMDItLjAwMWE0LjczIDQuNzMgMCAwIDAgLjE1LS4xNThsLjAwMS0uMDAyYy4wMjQtLjAyNi4wNDktLjA1MS4wNzItLjA3OCAwLS4wMDEuMDAyLS4wMDEuMDAyLS4wMDMuMDIyLS4wMjMuMDQzLS4wNDguMDY0LS4wNzNsLjAxOC0uMDIyYy4wMi0uMDIuMDM2LS4wNC4wNTItLjA1OHptLjA2NC0yLjIyOGMtLjIxNi41MS0uNS45ODEtLjg0NyAxLjQxYTYuOTM5IDYuOTM5IDAgMCAwLTEuMjczLS44NzRjLjE4MS0uNzMzLjI5My0xLjUzOC4zMjMtMi4zODRoMi4yNDJhNS44NDIgNS44NDIgMCAwIDEtLjQ0NSAxLjg0OHptLjQ0NS0yLjcyM2gtMi4yNDJhMTEuNjgxIDExLjY4MSAwIDAgMC0uMzIzLTIuMzg1IDYuOTM5IDYuOTM5IDAgMCAwIDEuMjczLS44NzMgNS44NDIgNS44NDIgMCAwIDEgMS4yOTIgMy4yNTh6TTkuMjg2IDEuNTg1YTUuODQgNS44NCAwIDAgMSAxLjY4MSAxLjA4MWMtLjI4OS4yNDctLjYuNDY0LS45MjguNjUzLS4yNDUtLjcwMy0uNTYtMS4zMTQtLjkyNS0xLjgwMy4wNTguMDIyLjExNi4wNDYuMTcyLjA2OXpNNy44NyAxMi41MzNhMS43NjggMS43NjggMCAwIDEtLjQzMy4yNTZWOS44OTFhNi4wOCA2LjA4IDAgMCAxIDEuODA4LjQwOWMtLjEzLjM4NC0uMjguNzQtLjQ1MyAxLjA2LS4yNzIuNTA2LS41OS45MS0uOTIyIDEuMTczem0uOTIyLTkuODkyYy4xNzIuMzIxLjMyNC42NzYuNDUzIDEuMDU5YTYuMDggNi4wOCAwIDAgMS0xLjgwNy40MVYxLjIxMWMuMTQzLjA1OC4yODkuMTQzLjQzMi4yNTcuMzMyLjI2LjY1LjY2NS45MjIgMS4xNzJ6TTcuNDM4IDkuMDE0VjcuNDM4aDIuMzA0Yy0uMDI1LjY5LS4xMSAxLjM2LS4yNTUgMS45OTZsLS4wMDQuMDJhNi45NTMgNi45NTMgMCAwIDAtMi4wNDYtLjQ0em0wLTIuNDUxVjQuOTg2YTYuOTUzIDYuOTUzIDAgMCAwIDIuMDQ1LS40NGwuMDA1LjAyYy4xNDMuNjM2LjIzIDEuMzA0LjI1NCAxLjk5N0g3LjQzN3ptLS44NzUuODc1djEuNTc2YTYuOTUzIDYuOTUzIDAgMCAwLTIuMDQ2LjQ0bC0uMDA1LS4wMmExMC44MzUgMTAuODM1IDAgMCAxLS4yNTQtMS45OTZoMi4zMDR6bS0yLjMwNS0uODc1Yy4wMjUtLjY5MS4xMS0xLjM2MS4yNTUtMS45OTdsLjAwNC0uMDJhNi45NDMgNi45NDMgMCAwIDAgMi4wNDUuNDR2MS41NzdINC4yNTh6TTYuNTYyIDkuODl2Mi44OTZhMS43NDggMS43NDggMCAwIDEtLjQzMi0uMjU2Yy0uMzMyLS4yNi0uNjUyLS42NjctLjkyNC0xLjE3M2E3LjA2IDcuMDYgMCAwIDEtLjQ1My0xLjA2IDYuMDk4IDYuMDk4IDAgMCAxIDEuODEtLjQwN3ptMC01Ljc4MkE2LjA4IDYuMDggMCAwIDEgNC43NTUgMy43Yy4xMy0uMzg0LjI4LS43NC40NTMtMS4wNi4yNzItLjUwNi41OS0uOTEyLjkyMy0xLjE3M2ExLjggMS44IDAgMCAxIC40MzMtLjI1NnYyLjg5OGgtLjAwMnpNNC43MTUgMS41ODZjLjA1OC0uMDI0LjExNC0uMDQ3LjE3Mi0uMDY5LS4zNjYuNDktLjY4IDEuMS0uOTI1IDEuODAzYTYuMDU3IDYuMDU3IDAgMCAxLS45MjgtLjY1MyA1Ljg0IDUuODQgMCAwIDEgMS42ODEtMS4wODF6TTEuNTg2IDQuNzE0Yy4yMTYtLjUxLjUtLjk4MS44NDctMS40MS4zODkuMzM3LjgxNS42MyAxLjI3My44NzRhMTEuNjgxIDExLjY4MSAwIDAgMC0uMzIzIDIuMzg1SDEuMTRhNS44IDUuOCAwIDAgMSAuNDQ1LTEuODQ5ek0xLjE0IDcuNDM3aDIuMjQyYy4wMy44NDcuMTQyIDEuNjUyLjMyMyAyLjM4NWE2LjkzOSA2LjkzOSAwIDAgMC0xLjI3My44NzNBNS44NDIgNS44NDIgMCAwIDEgMS4xNCA3LjQzN3ptMy41NzMgNC45NzdhNS44NCA1Ljg0IDAgMCAxLTEuNjgxLTEuMDgxYy4yODktLjI0Ny42LS40NjQuOTI4LS42NTMuMjQ1LjcwMy41NiAxLjMxNC45MjUgMS44MDNhNS42MjQgNS42MjQgMCAwIDEtLjE3Mi0uMDY5em00LjU3MiAwYTYuMTY4IDYuMTY4IDAgMCAxLS4xNzIuMDY5Yy4zNjYtLjQ5LjY4LTEuMS45MjUtMS44MDMuMzI4LjE4Ny42NC40MDYuOTI4LjY1M2E1Ljg0IDUuODQgMCAwIDEtMS42ODEgMS4wODF6IiBmaWxsPSIjRkZGIi8+PC9zdmc+',
+        }}
+        src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxjaXJjbGUgaWQ9ImIiIGN4PSIyMCIgY3k9IjIwIiByPSIyMCIvPjxmaWx0ZXIgeD0iLTE3LjUlIiB5PSItMTIuNSUiIHdpZHRoPSIxMzUlIiBoZWlnaHQ9IjEzNSUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9ImEiPjxmZU9mZnNldCBkeT0iMiIgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSIvPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSIvPjxmZUNvbXBvc2l0ZSBpbj0ic2hhZG93Qmx1ck91dGVyMSIgaW4yPSJTb3VyY2VBbHBoYSIgb3BlcmF0b3I9Im91dCIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjA0IDAiIGluPSJzaGFkb3dCbHVyT3V0ZXIxIi8+PC9maWx0ZXI+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNCAyKSI+PHVzZSBmaWxsPSIjMDAwIiBmaWx0ZXI9InVybCgjYSkiIHhsaW5rOmhyZWY9IiNiIi8+PGNpcmNsZSBzdHJva2U9IiM2OUMwRkYiIHN0cm9rZS1saW5lam9pbj0ic3F1YXJlIiBmaWxsLW9wYWNpdHk9Ii45MiIgZmlsbD0iIzY5QzBGRiIgY3g9IjIwIiBjeT0iMjAiIHI9IjE5LjUiLz48L2c+PHBhdGggZD0iTTI5LjM1IDI2LjUxNGwuMDEtLjAxNEE2Ljk2NiA2Ljk2NiAwIDAgMCAzMSAyMmE2Ljk3MyA2Ljk3MyAwIDAgMC0xLjYzNy00LjVsLS4wMTEtLjAxMy0uMDUtLjA1Ny0uMDItLjAyMi0uMDYzLS4wNzQtLjAwMi0uMDAxLS4wNzItLjA4LS4wMDEtLjAwMWMtLjA1LS4wNTQtLjEtLjEwNy0uMTUyLS4xNThsLS4wMDEtLjAwMi0uMDc1LS4wNzUtLjAwNS0uMDA0Yy0uMDIzLS4wMjQtLjA0Ny0uMDQ2LS4wNy0uMDY4bC0uMDI1LS4wMjMtLjA0Ny0uMDQ0LS4wMTYtLjAxNUE2Ljk2NiA2Ljk2NiAwIDAgMCAyNCAxNWE2Ljk3MyA2Ljk3MyAwIDAgMC00Ljc1NSAxLjg2M2wtLjAxNS4wMTUtLjA0Ny4wNDUtLjAyNS4wMjQtLjA3LjA2Ny0uMDA1LjAwNS0uMDc1LjA3NS0uMDAyLjAwMS0uMTUxLjE1OC0uMDAyLjAwMmEzLjMwOSAzLjMwOSAwIDAgMC0uMDcyLjA4aC0uMDAxYTEuNDM2IDEuNDM2IDAgMCAwLS4wNjQuMDc0bC0uMDIuMDIyYy0uMDE2LjAxOS0uMDMyLjA0LS4wNS4wNTgtLjAwMi4wMDUtLjAwNy4wMDgtLjAxLjAxM0E2Ljk3MyA2Ljk3MyAwIDAgMCAxNyAyMmMwIDEuNzE0LjYxNiAzLjI4MyAxLjYzOCA0LjVsLjAxLjAxNC4wNDkuMDU4LjAxOS4wMjIuMDY0LjA3My4wMDEuMDAzYy4wMjQuMDI3LjA0Ny4wNTMuMDcyLjA3OGwuMDAyLjAwMi4xNS4xNTguMDAxLjAwMS4wNzQuMDc0LjAwNC4wMDRBNi45ODcgNi45ODcgMCAwIDAgMjQgMjlhNi45NzMgNi45NzMgMCAwIDAgNC45MS0yLjAxMmwuMDA2LS4wMDRjLjAyNS0uMDI1LjA1LS4wNDkuMDczLS4wNzRsLjAwMi0uMDAxYTQuNzMgNC43MyAwIDAgMCAuMTUtLjE1OGwuMDAxLS4wMDJjLjAyNC0uMDI2LjA0OS0uMDUxLjA3Mi0uMDc4IDAtLjAwMS4wMDItLjAwMS4wMDItLjAwM2wuMDY0LS4wNzMuMDE4LS4wMjJjLjAyLS4wMi4wMzYtLjA0LjA1Mi0uMDU4em0uMDY0LTIuMjI4Yy0uMjE2LjUxLS41Ljk4MS0uODQ3IDEuNDFhNi45MzkgNi45MzkgMCAwIDAtMS4yNzMtLjg3NGMuMTgxLS43MzMuMjkzLTEuNTM4LjMyMy0yLjM4NGgyLjI0MmE1Ljg0MiA1Ljg0MiAwIDAgMS0uNDQ1IDEuODQ4em0uNDQ1LTIuNzIzaC0yLjI0MmExMS42ODEgMTEuNjgxIDAgMCAwLS4zMjMtMi4zODUgNi45MzkgNi45MzkgMCAwIDAgMS4yNzMtLjg3MyA1Ljg0MiA1Ljg0MiAwIDAgMSAxLjI5MiAzLjI1OHptLTMuNTczLTQuOTc3YTUuODQgNS44NCAwIDAgMSAxLjY4MSAxLjA4MWMtLjI4OS4yNDctLjYuNDY0LS45MjguNjUzLS4yNDUtLjcwMy0uNTYtMS4zMTQtLjkyNS0xLjgwMy4wNTguMDIyLjExNi4wNDYuMTcyLjA2OXpNMjQuODcgMjcuNTMzYTEuNzY4IDEuNzY4IDAgMCAxLS40MzMuMjU2di0yLjg5OGE2LjA4IDYuMDggMCAwIDEgMS44MDguNDA5Yy0uMTMuMzg0LS4yOC43NC0uNDUzIDEuMDYtLjI3Mi41MDYtLjU5LjkxLS45MjIgMS4xNzN6bS45MjItOS44OTJjLjE3Mi4zMjIuMzI0LjY3Ni40NTMgMS4wNTlhNi4wOCA2LjA4IDAgMCAxLTEuODA4LjQxdi0yLjg5N2MuMTQ0LjA1Ny4yOS4xNDIuNDMzLjI1Ni4zMzIuMjYuNjUuNjY1LjkyMiAxLjE3MnptLTEuMzU1IDYuMzczdi0xLjU3NmgyLjMwNWMtLjAyNS42OS0uMTEgMS4zNi0uMjU1IDEuOTk2bC0uMDA0LjAyYTYuOTUzIDYuOTUzIDAgMCAwLTIuMDQ1LS40NHptMC0yLjQ1MXYtMS41NzdhNi45NTMgNi45NTMgMCAwIDAgMi4wNDYtLjQ0bC4wMDUuMDJjLjE0My42MzYuMjMgMS4zMDQuMjU0IDEuOTk3aC0yLjMwNHptLS44NzUuODc1djEuNTc2YTYuOTUzIDYuOTUzIDAgMCAwLTIuMDQ1LjQ0bC0uMDA1LS4wMmExMC44MzUgMTAuODM1IDAgMCAxLS4yNTQtMS45OTZoMi4zMDV6bS0yLjMwNC0uODc1Yy4wMjUtLjY5MS4xMS0xLjM2MS4yNTUtMS45OTdsLjAwNC0uMDJhNi45NDMgNi45NDMgMCAwIDAgMi4wNDUuNDR2MS41NzdoLTIuMzA0em0yLjMwNSAzLjMyOHYyLjg5N2ExLjc0OCAxLjc0OCAwIDAgMS0uNDMzLS4yNTdjLS4zMzItLjI2LS42NTItLjY2Ny0uOTI0LTEuMTczYTcuMDYgNy4wNiAwIDAgMS0uNDUzLTEuMDYgNi4wOTggNi4wOTggMCAwIDEgMS44MS0uNDA3em0wLTUuNzgyYTYuMDggNi4wOCAwIDAgMS0xLjgwOC0uNDA5Yy4xMy0uMzg0LjI4LS43NC40NTMtMS4wNi4yNzItLjUwNi41OS0uOTEyLjkyMy0xLjE3M2ExLjggMS44IDAgMCAxIC40MzMtLjI1NnYyLjg5OGgtLjAwMnptLTEuODQ5LTIuNTIzYy4wNTgtLjAyMy4xMTQtLjA0Ny4xNzItLjA2OS0uMzY2LjQ5LS42OCAxLjEtLjkyNSAxLjgwM2E2LjA1NyA2LjA1NyAwIDAgMS0uOTI4LS42NTMgNS44NCA1Ljg0IDAgMCAxIDEuNjgxLTEuMDgxem0tMy4xMjggMy4xMjhjLjIxNi0uNTEuNS0uOTgxLjg0Ny0xLjQxLjM4OS4zMzcuODE1LjYzIDEuMjczLjg3NGExMS42ODEgMTEuNjgxIDAgMCAwLS4zMjMgMi4zODVIMTguMTRjLjA0Ny0uNjQuMTk3LTEuMjYuNDQ1LTEuODQ5em0tLjQ0NSAyLjcyNGgyLjI0MmMuMDMuODQ2LjE0MiAxLjY1MS4zMjMgMi4zODRhNi45MzkgNi45MzkgMCAwIDAtMS4yNzMuODczIDUuODQyIDUuODQyIDAgMCAxLTEuMjkyLTMuMjU4em0zLjU3MyA0Ljk3NmE1Ljg0IDUuODQgMCAwIDEtMS42ODEtMS4wODFjLjI4OS0uMjQ3LjYtLjQ2NC45MjgtLjY1My4yNDUuNzAzLjU2IDEuMzE0LjkyNSAxLjgwM2E1LjYyNCA1LjYyNCAwIDAgMS0uMTcyLS4wNjl6bTQuNTcyIDBhNi4xNjggNi4xNjggMCAwIDEtLjE3Mi4wNjljLjM2Ni0uNDkuNjgtMS4xLjkyNS0xLjgwMy4zMjguMTg3LjY0LjQwNi45MjguNjUzYTUuODQgNS44NCAwIDAgMS0xLjY4MSAxLjA4MXoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0ibm9uemVybyIvPjwvZz48L3N2Zz4="
+      />
+      <Item
+        type="node"
+        size="40"
+        shape="koni-custom-node"
+        model={{
+          color: '#5CDBD3',
+          label: 'Person',
+          labelOffsetY: 28,
+          icon:
+            'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEyLjM1IDExLjUxNGwuMDEtLjAxNEE2Ljk2NiA2Ljk2NiAwIDAgMCAxNCA3YTYuOTczIDYuOTczIDAgMCAwLTEuNjM3LTQuNWwtLjAxMS0uMDEzLS4wNS0uMDU3LS4wMi0uMDIyLS4wNjMtLjA3NC0uMDAyLS4wMDEtLjA3Mi0uMDgtLjAwMS0uMDAxYy0uMDUtLjA1NC0uMS0uMTA3LS4xNTItLjE1OGwtLjAwMS0uMDAyLS4wNzUtLjA3NS0uMDA1LS4wMDQtLjA3LS4wNjgtLjAyNS0uMDIzLS4wNDctLjA0NC0uMDE2LS4wMTZBNi45NjYgNi45NjYgMCAwIDAgNyAwYTYuOTczIDYuOTczIDAgMCAwLTQuNzU1IDEuODYybC0uMDE1LjAxNi0uMDQ3LjA0NS0uMDI1LjAyNC0uMDcuMDY3LS4wMDUuMDA1LS4wNzUuMDc1LS4wMDIuMDAxLS4xNTEuMTU4LS4wMDIuMDAyYTMuMzA5IDMuMzA5IDAgMCAwLS4wNzIuMDhIMS43OGExLjQzNiAxLjQzNiAwIDAgMC0uMDY0LjA3NGwtLjAyLjAyMmMtLjAxNi4wMTktLjAzMi4wNC0uMDUuMDU4LS4wMDIuMDA1LS4wMDcuMDA4LS4wMS4wMTNBNi45NzMgNi45NzMgMCAwIDAgMCA3YzAgMS43MTQuNjE2IDMuMjgzIDEuNjM4IDQuNWwuMDEuMDE0LjA0OS4wNTguMDE5LjAyMi4wNjQuMDczLjAwMS4wMDNjLjAyNC4wMjcuMDQ3LjA1My4wNzIuMDc4bC4wMDIuMDAyLjE1LjE1OC4wMDEuMDAxLjA3NC4wNzQuMDA0LjAwNUE2Ljk4NyA2Ljk4NyAwIDAgMCA3IDE0YTYuOTczIDYuOTczIDAgMCAwIDQuOTEtMi4wMTJsLjAwNi0uMDA1Yy4wMjUtLjAyNS4wNS0uMDQ5LjA3My0uMDc0bC4wMDItLjAwMWE0LjczIDQuNzMgMCAwIDAgLjE1LS4xNThsLjAwMS0uMDAyYy4wMjQtLjAyNi4wNDktLjA1MS4wNzItLjA3OCAwLS4wMDEuMDAyLS4wMDEuMDAyLS4wMDMuMDIyLS4wMjMuMDQzLS4wNDguMDY0LS4wNzNsLjAxOC0uMDIyYy4wMi0uMDIuMDM2LS4wNC4wNTItLjA1OHptLjA2NC0yLjIyOGMtLjIxNi41MS0uNS45ODEtLjg0NyAxLjQxYTYuOTM5IDYuOTM5IDAgMCAwLTEuMjczLS44NzRjLjE4MS0uNzMzLjI5My0xLjUzOC4zMjMtMi4zODRoMi4yNDJhNS44NDIgNS44NDIgMCAwIDEtLjQ0NSAxLjg0OHptLjQ0NS0yLjcyM2gtMi4yNDJhMTEuNjgxIDExLjY4MSAwIDAgMC0uMzIzLTIuMzg1IDYuOTM5IDYuOTM5IDAgMCAwIDEuMjczLS44NzMgNS44NDIgNS44NDIgMCAwIDEgMS4yOTIgMy4yNTh6TTkuMjg2IDEuNTg1YTUuODQgNS44NCAwIDAgMSAxLjY4MSAxLjA4MWMtLjI4OS4yNDctLjYuNDY0LS45MjguNjUzLS4yNDUtLjcwMy0uNTYtMS4zMTQtLjkyNS0xLjgwMy4wNTguMDIyLjExNi4wNDYuMTcyLjA2OXpNNy44NyAxMi41MzNhMS43NjggMS43NjggMCAwIDEtLjQzMy4yNTZWOS44OTFhNi4wOCA2LjA4IDAgMCAxIDEuODA4LjQwOWMtLjEzLjM4NC0uMjguNzQtLjQ1MyAxLjA2LS4yNzIuNTA2LS41OS45MS0uOTIyIDEuMTczem0uOTIyLTkuODkyYy4xNzIuMzIxLjMyNC42NzYuNDUzIDEuMDU5YTYuMDggNi4wOCAwIDAgMS0xLjgwNy40MVYxLjIxMWMuMTQzLjA1OC4yODkuMTQzLjQzMi4yNTcuMzMyLjI2LjY1LjY2NS45MjIgMS4xNzJ6TTcuNDM4IDkuMDE0VjcuNDM4aDIuMzA0Yy0uMDI1LjY5LS4xMSAxLjM2LS4yNTUgMS45OTZsLS4wMDQuMDJhNi45NTMgNi45NTMgMCAwIDAtMi4wNDYtLjQ0em0wLTIuNDUxVjQuOTg2YTYuOTUzIDYuOTUzIDAgMCAwIDIuMDQ1LS40NGwuMDA1LjAyYy4xNDMuNjM2LjIzIDEuMzA0LjI1NCAxLjk5N0g3LjQzN3ptLS44NzUuODc1djEuNTc2YTYuOTUzIDYuOTUzIDAgMCAwLTIuMDQ2LjQ0bC0uMDA1LS4wMmExMC44MzUgMTAuODM1IDAgMCAxLS4yNTQtMS45OTZoMi4zMDR6bS0yLjMwNS0uODc1Yy4wMjUtLjY5MS4xMS0xLjM2MS4yNTUtMS45OTdsLjAwNC0uMDJhNi45NDMgNi45NDMgMCAwIDAgMi4wNDUuNDR2MS41NzdINC4yNTh6TTYuNTYyIDkuODl2Mi44OTZhMS43NDggMS43NDggMCAwIDEtLjQzMi0uMjU2Yy0uMzMyLS4yNi0uNjUyLS42NjctLjkyNC0xLjE3M2E3LjA2IDcuMDYgMCAwIDEtLjQ1My0xLjA2IDYuMDk4IDYuMDk4IDAgMCAxIDEuODEtLjQwN3ptMC01Ljc4MkE2LjA4IDYuMDggMCAwIDEgNC43NTUgMy43Yy4xMy0uMzg0LjI4LS43NC40NTMtMS4wNi4yNzItLjUwNi41OS0uOTEyLjkyMy0xLjE3M2ExLjggMS44IDAgMCAxIC40MzMtLjI1NnYyLjg5OGgtLjAwMnpNNC43MTUgMS41ODZjLjA1OC0uMDI0LjExNC0uMDQ3LjE3Mi0uMDY5LS4zNjYuNDktLjY4IDEuMS0uOTI1IDEuODAzYTYuMDU3IDYuMDU3IDAgMCAxLS45MjgtLjY1MyA1Ljg0IDUuODQgMCAwIDEgMS42ODEtMS4wODF6TTEuNTg2IDQuNzE0Yy4yMTYtLjUxLjUtLjk4MS44NDctMS40MS4zODkuMzM3LjgxNS42MyAxLjI3My44NzRhMTEuNjgxIDExLjY4MSAwIDAgMC0uMzIzIDIuMzg1SDEuMTRhNS44IDUuOCAwIDAgMSAuNDQ1LTEuODQ5ek0xLjE0IDcuNDM3aDIuMjQyYy4wMy44NDcuMTQyIDEuNjUyLjMyMyAyLjM4NWE2LjkzOSA2LjkzOSAwIDAgMC0xLjI3My44NzNBNS44NDIgNS44NDIgMCAwIDEgMS4xNCA3LjQzN3ptMy41NzMgNC45NzdhNS44NCA1Ljg0IDAgMCAxLTEuNjgxLTEuMDgxYy4yODktLjI0Ny42LS40NjQuOTI4LS42NTMuMjQ1LjcwMy41NiAxLjMxNC45MjUgMS44MDNhNS42MjQgNS42MjQgMCAwIDEtLjE3Mi0uMDY5em00LjU3MiAwYTYuMTY4IDYuMTY4IDAgMCAxLS4xNzIuMDY5Yy4zNjYtLjQ5LjY4LTEuMS45MjUtMS44MDMuMzI4LjE4Ny42NC40MDYuOTI4LjY1M2E1Ljg0IDUuODQgMCAwIDEtMS42ODEgMS4wODF6IiBmaWxsPSIjRkZGIi8+PC9zdmc+',
+        }}
+        src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxjaXJjbGUgaWQ9ImIiIGN4PSIyMCIgY3k9IjIwIiByPSIyMCIvPjxmaWx0ZXIgeD0iLTE3LjUlIiB5PSItMTIuNSUiIHdpZHRoPSIxMzUlIiBoZWlnaHQ9IjEzNSUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9ImEiPjxmZU9mZnNldCBkeT0iMiIgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSIvPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSIvPjxmZUNvbXBvc2l0ZSBpbj0ic2hhZG93Qmx1ck91dGVyMSIgaW4yPSJTb3VyY2VBbHBoYSIgb3BlcmF0b3I9Im91dCIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjA0IDAiIGluPSJzaGFkb3dCbHVyT3V0ZXIxIi8+PC9maWx0ZXI+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNCAyKSI+PHVzZSBmaWxsPSIjMDAwIiBmaWx0ZXI9InVybCgjYSkiIHhsaW5rOmhyZWY9IiNiIi8+PGNpcmNsZSBzdHJva2U9IiM1Q0RCRDMiIHN0cm9rZS1saW5lam9pbj0ic3F1YXJlIiBmaWxsLW9wYWNpdHk9Ii45MiIgZmlsbD0iIzVDREJEMyIgY3g9IjIwIiBjeT0iMjAiIHI9IjE5LjUiLz48L2c+PHBhdGggZD0iTTI5LjM1IDI2LjUxNGwuMDEtLjAxNEE2Ljk2NiA2Ljk2NiAwIDAgMCAzMSAyMmE2Ljk3MyA2Ljk3MyAwIDAgMC0xLjYzNy00LjVsLS4wMTEtLjAxMy0uMDUtLjA1Ny0uMDItLjAyMi0uMDYzLS4wNzQtLjAwMi0uMDAxLS4wNzItLjA4LS4wMDEtLjAwMWMtLjA1LS4wNTQtLjEtLjEwNy0uMTUyLS4xNThsLS4wMDEtLjAwMi0uMDc1LS4wNzUtLjAwNS0uMDA0Yy0uMDIzLS4wMjQtLjA0Ny0uMDQ2LS4wNy0uMDY4bC0uMDI1LS4wMjMtLjA0Ny0uMDQ0LS4wMTYtLjAxNUE2Ljk2NiA2Ljk2NiAwIDAgMCAyNCAxNWE2Ljk3MyA2Ljk3MyAwIDAgMC00Ljc1NSAxLjg2M2wtLjAxNS4wMTUtLjA0Ny4wNDUtLjAyNS4wMjQtLjA3LjA2Ny0uMDA1LjAwNS0uMDc1LjA3NS0uMDAyLjAwMS0uMTUxLjE1OC0uMDAyLjAwMmEzLjMwOSAzLjMwOSAwIDAgMC0uMDcyLjA4aC0uMDAxYTEuNDM2IDEuNDM2IDAgMCAwLS4wNjQuMDc0bC0uMDIuMDIyYy0uMDE2LjAxOS0uMDMyLjA0LS4wNS4wNTgtLjAwMi4wMDUtLjAwNy4wMDgtLjAxLjAxM0E2Ljk3MyA2Ljk3MyAwIDAgMCAxNyAyMmMwIDEuNzE0LjYxNiAzLjI4MyAxLjYzOCA0LjVsLjAxLjAxNC4wNDkuMDU4LjAxOS4wMjIuMDY0LjA3My4wMDEuMDAzYy4wMjQuMDI3LjA0Ny4wNTMuMDcyLjA3OGwuMDAyLjAwMi4xNS4xNTguMDAxLjAwMS4wNzQuMDc0LjAwNC4wMDRBNi45ODcgNi45ODcgMCAwIDAgMjQgMjlhNi45NzMgNi45NzMgMCAwIDAgNC45MS0yLjAxMmwuMDA2LS4wMDRjLjAyNS0uMDI1LjA1LS4wNDkuMDczLS4wNzRsLjAwMi0uMDAxYTQuNzMgNC43MyAwIDAgMCAuMTUtLjE1OGwuMDAxLS4wMDJjLjAyNC0uMDI2LjA0OS0uMDUxLjA3Mi0uMDc4IDAtLjAwMS4wMDItLjAwMS4wMDItLjAwM2wuMDY0LS4wNzMuMDE4LS4wMjJjLjAyLS4wMi4wMzYtLjA0LjA1Mi0uMDU4em0uMDY0LTIuMjI4Yy0uMjE2LjUxLS41Ljk4MS0uODQ3IDEuNDFhNi45MzkgNi45MzkgMCAwIDAtMS4yNzMtLjg3NGMuMTgxLS43MzMuMjkzLTEuNTM4LjMyMy0yLjM4NGgyLjI0MmE1Ljg0MiA1Ljg0MiAwIDAgMS0uNDQ1IDEuODQ4em0uNDQ1LTIuNzIzaC0yLjI0MmExMS42ODEgMTEuNjgxIDAgMCAwLS4zMjMtMi4zODUgNi45MzkgNi45MzkgMCAwIDAgMS4yNzMtLjg3MyA1Ljg0MiA1Ljg0MiAwIDAgMSAxLjI5MiAzLjI1OHptLTMuNTczLTQuOTc3YTUuODQgNS44NCAwIDAgMSAxLjY4MSAxLjA4MWMtLjI4OS4yNDctLjYuNDY0LS45MjguNjUzLS4yNDUtLjcwMy0uNTYtMS4zMTQtLjkyNS0xLjgwMy4wNTguMDIyLjExNi4wNDYuMTcyLjA2OXpNMjQuODcgMjcuNTMzYTEuNzY4IDEuNzY4IDAgMCAxLS40MzMuMjU2di0yLjg5OGE2LjA4IDYuMDggMCAwIDEgMS44MDguNDA5Yy0uMTMuMzg0LS4yOC43NC0uNDUzIDEuMDYtLjI3Mi41MDYtLjU5LjkxLS45MjIgMS4xNzN6bS45MjItOS44OTJjLjE3Mi4zMjIuMzI0LjY3Ni40NTMgMS4wNTlhNi4wOCA2LjA4IDAgMCAxLTEuODA4LjQxdi0yLjg5N2MuMTQ0LjA1Ny4yOS4xNDIuNDMzLjI1Ni4zMzIuMjYuNjUuNjY1LjkyMiAxLjE3MnptLTEuMzU1IDYuMzczdi0xLjU3NmgyLjMwNWMtLjAyNS42OS0uMTEgMS4zNi0uMjU1IDEuOTk2bC0uMDA0LjAyYTYuOTUzIDYuOTUzIDAgMCAwLTIuMDQ1LS40NHptMC0yLjQ1MXYtMS41NzdhNi45NTMgNi45NTMgMCAwIDAgMi4wNDYtLjQ0bC4wMDUuMDJjLjE0My42MzYuMjMgMS4zMDQuMjU0IDEuOTk3aC0yLjMwNHptLS44NzUuODc1djEuNTc2YTYuOTUzIDYuOTUzIDAgMCAwLTIuMDQ1LjQ0bC0uMDA1LS4wMmExMC44MzUgMTAuODM1IDAgMCAxLS4yNTQtMS45OTZoMi4zMDV6bS0yLjMwNC0uODc1Yy4wMjUtLjY5MS4xMS0xLjM2MS4yNTUtMS45OTdsLjAwNC0uMDJhNi45NDMgNi45NDMgMCAwIDAgMi4wNDUuNDR2MS41NzdoLTIuMzA0em0yLjMwNSAzLjMyOHYyLjg5N2ExLjc0OCAxLjc0OCAwIDAgMS0uNDMzLS4yNTdjLS4zMzItLjI2LS42NTItLjY2Ny0uOTI0LTEuMTczYTcuMDYgNy4wNiAwIDAgMS0uNDUzLTEuMDYgNi4wOTggNi4wOTggMCAwIDEgMS44MS0uNDA3em0wLTUuNzgyYTYuMDggNi4wOCAwIDAgMS0xLjgwOC0uNDA5Yy4xMy0uMzg0LjI4LS43NC40NTMtMS4wNi4yNzItLjUwNi41OS0uOTEyLjkyMy0xLjE3M2ExLjggMS44IDAgMCAxIC40MzMtLjI1NnYyLjg5OGgtLjAwMnptLTEuODQ5LTIuNTIzYy4wNTgtLjAyMy4xMTQtLjA0Ny4xNzItLjA2OS0uMzY2LjQ5LS42OCAxLjEtLjkyNSAxLjgwM2E2LjA1NyA2LjA1NyAwIDAgMS0uOTI4LS42NTMgNS44NCA1Ljg0IDAgMCAxIDEuNjgxLTEuMDgxem0tMy4xMjggMy4xMjhjLjIxNi0uNTEuNS0uOTgxLjg0Ny0xLjQxLjM4OS4zMzcuODE1LjYzIDEuMjczLjg3NGExMS42ODEgMTEuNjgxIDAgMCAwLS4zMjMgMi4zODVIMTguMTRjLjA0Ny0uNjQuMTk3LTEuMjYuNDQ1LTEuODQ5em0tLjQ0NSAyLjcyNGgyLjI0MmMuMDMuODQ2LjE0MiAxLjY1MS4zMjMgMi4zODRhNi45MzkgNi45MzkgMCAwIDAtMS4yNzMuODczIDUuODQyIDUuODQyIDAgMCAxLTEuMjkyLTMuMjU4em0zLjU3MyA0Ljk3NmE1Ljg0IDUuODQgMCAwIDEtMS42ODEtMS4wODFjLjI4OS0uMjQ3LjYtLjQ2NC45MjgtLjY1My4yNDUuNzAzLjU2IDEuMzE0LjkyNSAxLjgwM2E1LjYyNCA1LjYyNCAwIDAgMS0uMTcyLS4wNjl6bTQuNTcyIDBhNi4xNjggNi4xNjggMCAwIDEtLjE3Mi4wNjljLjM2Ni0uNDkuNjgtMS4xLjkyNS0xLjgwMy4zMjguMTg3LjY0LjQwNi45MjguNjUzYTUuODQgNS44NCAwIDAgMS0xLjY4MSAxLjA4MXoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0ibm9uemVybyIvPjwvZz48L3N2Zz4="
+      />
+      <Item
+        type="node"
+        size="40"
+        shape="koni-custom-node"
+        model={{
+          color: '#B37FEB',
+          label: 'Country',
+          labelOffsetY: 28,
+          icon:
+            'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEyLjM1IDExLjUxNGwuMDEtLjAxNEE2Ljk2NiA2Ljk2NiAwIDAgMCAxNCA3YTYuOTczIDYuOTczIDAgMCAwLTEuNjM3LTQuNWwtLjAxMS0uMDEzLS4wNS0uMDU3LS4wMi0uMDIyLS4wNjMtLjA3NC0uMDAyLS4wMDEtLjA3Mi0uMDgtLjAwMS0uMDAxYy0uMDUtLjA1NC0uMS0uMTA3LS4xNTItLjE1OGwtLjAwMS0uMDAyLS4wNzUtLjA3NS0uMDA1LS4wMDQtLjA3LS4wNjgtLjAyNS0uMDIzLS4wNDctLjA0NC0uMDE2LS4wMTZBNi45NjYgNi45NjYgMCAwIDAgNyAwYTYuOTczIDYuOTczIDAgMCAwLTQuNzU1IDEuODYybC0uMDE1LjAxNi0uMDQ3LjA0NS0uMDI1LjAyNC0uMDcuMDY3LS4wMDUuMDA1LS4wNzUuMDc1LS4wMDIuMDAxLS4xNTEuMTU4LS4wMDIuMDAyYTMuMzA5IDMuMzA5IDAgMCAwLS4wNzIuMDhIMS43OGExLjQzNiAxLjQzNiAwIDAgMC0uMDY0LjA3NGwtLjAyLjAyMmMtLjAxNi4wMTktLjAzMi4wNC0uMDUuMDU4LS4wMDIuMDA1LS4wMDcuMDA4LS4wMS4wMTNBNi45NzMgNi45NzMgMCAwIDAgMCA3YzAgMS43MTQuNjE2IDMuMjgzIDEuNjM4IDQuNWwuMDEuMDE0LjA0OS4wNTguMDE5LjAyMi4wNjQuMDczLjAwMS4wMDNjLjAyNC4wMjcuMDQ3LjA1My4wNzIuMDc4bC4wMDIuMDAyLjE1LjE1OC4wMDEuMDAxLjA3NC4wNzQuMDA0LjAwNUE2Ljk4NyA2Ljk4NyAwIDAgMCA3IDE0YTYuOTczIDYuOTczIDAgMCAwIDQuOTEtMi4wMTJsLjAwNi0uMDA1Yy4wMjUtLjAyNS4wNS0uMDQ5LjA3My0uMDc0bC4wMDItLjAwMWE0LjczIDQuNzMgMCAwIDAgLjE1LS4xNThsLjAwMS0uMDAyYy4wMjQtLjAyNi4wNDktLjA1MS4wNzItLjA3OCAwLS4wMDEuMDAyLS4wMDEuMDAyLS4wMDMuMDIyLS4wMjMuMDQzLS4wNDguMDY0LS4wNzNsLjAxOC0uMDIyYy4wMi0uMDIuMDM2LS4wNC4wNTItLjA1OHptLjA2NC0yLjIyOGMtLjIxNi41MS0uNS45ODEtLjg0NyAxLjQxYTYuOTM5IDYuOTM5IDAgMCAwLTEuMjczLS44NzRjLjE4MS0uNzMzLjI5My0xLjUzOC4zMjMtMi4zODRoMi4yNDJhNS44NDIgNS44NDIgMCAwIDEtLjQ0NSAxLjg0OHptLjQ0NS0yLjcyM2gtMi4yNDJhMTEuNjgxIDExLjY4MSAwIDAgMC0uMzIzLTIuMzg1IDYuOTM5IDYuOTM5IDAgMCAwIDEuMjczLS44NzMgNS44NDIgNS44NDIgMCAwIDEgMS4yOTIgMy4yNTh6TTkuMjg2IDEuNTg1YTUuODQgNS44NCAwIDAgMSAxLjY4MSAxLjA4MWMtLjI4OS4yNDctLjYuNDY0LS45MjguNjUzLS4yNDUtLjcwMy0uNTYtMS4zMTQtLjkyNS0xLjgwMy4wNTguMDIyLjExNi4wNDYuMTcyLjA2OXpNNy44NyAxMi41MzNhMS43NjggMS43NjggMCAwIDEtLjQzMy4yNTZWOS44OTFhNi4wOCA2LjA4IDAgMCAxIDEuODA4LjQwOWMtLjEzLjM4NC0uMjguNzQtLjQ1MyAxLjA2LS4yNzIuNTA2LS41OS45MS0uOTIyIDEuMTczem0uOTIyLTkuODkyYy4xNzIuMzIxLjMyNC42NzYuNDUzIDEuMDU5YTYuMDggNi4wOCAwIDAgMS0xLjgwNy40MVYxLjIxMWMuMTQzLjA1OC4yODkuMTQzLjQzMi4yNTcuMzMyLjI2LjY1LjY2NS45MjIgMS4xNzJ6TTcuNDM4IDkuMDE0VjcuNDM4aDIuMzA0Yy0uMDI1LjY5LS4xMSAxLjM2LS4yNTUgMS45OTZsLS4wMDQuMDJhNi45NTMgNi45NTMgMCAwIDAtMi4wNDYtLjQ0em0wLTIuNDUxVjQuOTg2YTYuOTUzIDYuOTUzIDAgMCAwIDIuMDQ1LS40NGwuMDA1LjAyYy4xNDMuNjM2LjIzIDEuMzA0LjI1NCAxLjk5N0g3LjQzN3ptLS44NzUuODc1djEuNTc2YTYuOTUzIDYuOTUzIDAgMCAwLTIuMDQ2LjQ0bC0uMDA1LS4wMmExMC44MzUgMTAuODM1IDAgMCAxLS4yNTQtMS45OTZoMi4zMDR6bS0yLjMwNS0uODc1Yy4wMjUtLjY5MS4xMS0xLjM2MS4yNTUtMS45OTdsLjAwNC0uMDJhNi45NDMgNi45NDMgMCAwIDAgMi4wNDUuNDR2MS41NzdINC4yNTh6TTYuNTYyIDkuODl2Mi44OTZhMS43NDggMS43NDggMCAwIDEtLjQzMi0uMjU2Yy0uMzMyLS4yNi0uNjUyLS42NjctLjkyNC0xLjE3M2E3LjA2IDcuMDYgMCAwIDEtLjQ1My0xLjA2IDYuMDk4IDYuMDk4IDAgMCAxIDEuODEtLjQwN3ptMC01Ljc4MkE2LjA4IDYuMDggMCAwIDEgNC43NTUgMy43Yy4xMy0uMzg0LjI4LS43NC40NTMtMS4wNi4yNzItLjUwNi41OS0uOTEyLjkyMy0xLjE3M2ExLjggMS44IDAgMCAxIC40MzMtLjI1NnYyLjg5OGgtLjAwMnpNNC43MTUgMS41ODZjLjA1OC0uMDI0LjExNC0uMDQ3LjE3Mi0uMDY5LS4zNjYuNDktLjY4IDEuMS0uOTI1IDEuODAzYTYuMDU3IDYuMDU3IDAgMCAxLS45MjgtLjY1MyA1Ljg0IDUuODQgMCAwIDEgMS42ODEtMS4wODF6TTEuNTg2IDQuNzE0Yy4yMTYtLjUxLjUtLjk4MS44NDctMS40MS4zODkuMzM3LjgxNS42MyAxLjI3My44NzRhMTEuNjgxIDExLjY4MSAwIDAgMC0uMzIzIDIuMzg1SDEuMTRhNS44IDUuOCAwIDAgMSAuNDQ1LTEuODQ5ek0xLjE0IDcuNDM3aDIuMjQyYy4wMy44NDcuMTQyIDEuNjUyLjMyMyAyLjM4NWE2LjkzOSA2LjkzOSAwIDAgMC0xLjI3My44NzNBNS44NDIgNS44NDIgMCAwIDEgMS4xNCA3LjQzN3ptMy41NzMgNC45NzdhNS44NCA1Ljg0IDAgMCAxLTEuNjgxLTEuMDgxYy4yODktLjI0Ny42LS40NjQuOTI4LS42NTMuMjQ1LjcwMy41NiAxLjMxNC45MjUgMS44MDNhNS42MjQgNS42MjQgMCAwIDEtLjE3Mi0uMDY5em00LjU3MiAwYTYuMTY4IDYuMTY4IDAgMCAxLS4xNzIuMDY5Yy4zNjYtLjQ5LjY4LTEuMS45MjUtMS44MDMuMzI4LjE4Ny42NC40MDYuOTI4LjY1M2E1Ljg0IDUuODQgMCAwIDEtMS42ODEgMS4wODF6IiBmaWxsPSIjRkZGIi8+PC9zdmc+',
+        }}
+        src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxjaXJjbGUgaWQ9ImIiIGN4PSIyMCIgY3k9IjIwIiByPSIyMCIvPjxmaWx0ZXIgeD0iLTE3LjUlIiB5PSItMTIuNSUiIHdpZHRoPSIxMzUlIiBoZWlnaHQ9IjEzNSUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9ImEiPjxmZU9mZnNldCBkeT0iMiIgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSIvPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSIvPjxmZUNvbXBvc2l0ZSBpbj0ic2hhZG93Qmx1ck91dGVyMSIgaW4yPSJTb3VyY2VBbHBoYSIgb3BlcmF0b3I9Im91dCIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjA0IDAiIGluPSJzaGFkb3dCbHVyT3V0ZXIxIi8+PC9maWx0ZXI+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNCAyKSI+PHVzZSBmaWxsPSIjMDAwIiBmaWx0ZXI9InVybCgjYSkiIHhsaW5rOmhyZWY9IiNiIi8+PGNpcmNsZSBzdHJva2U9IiNCMzdGRUIiIHN0cm9rZS1saW5lam9pbj0ic3F1YXJlIiBmaWxsLW9wYWNpdHk9Ii45MiIgZmlsbD0iI0IzN0ZFQiIgY3g9IjIwIiBjeT0iMjAiIHI9IjE5LjUiLz48L2c+PHBhdGggZD0iTTI5LjM1IDI2LjUxNGwuMDEtLjAxNEE2Ljk2NiA2Ljk2NiAwIDAgMCAzMSAyMmE2Ljk3MyA2Ljk3MyAwIDAgMC0xLjYzNy00LjVsLS4wMTEtLjAxMy0uMDUtLjA1Ny0uMDItLjAyMi0uMDYzLS4wNzQtLjAwMi0uMDAxLS4wNzItLjA4LS4wMDEtLjAwMWMtLjA1LS4wNTQtLjEtLjEwNy0uMTUyLS4xNThsLS4wMDEtLjAwMi0uMDc1LS4wNzUtLjAwNS0uMDA0Yy0uMDIzLS4wMjQtLjA0Ny0uMDQ2LS4wNy0uMDY4bC0uMDI1LS4wMjMtLjA0Ny0uMDQ0LS4wMTYtLjAxNUE2Ljk2NiA2Ljk2NiAwIDAgMCAyNCAxNWE2Ljk3MyA2Ljk3MyAwIDAgMC00Ljc1NSAxLjg2M2wtLjAxNS4wMTUtLjA0Ny4wNDUtLjAyNS4wMjQtLjA3LjA2Ny0uMDA1LjAwNS0uMDc1LjA3NS0uMDAyLjAwMS0uMTUxLjE1OC0uMDAyLjAwMmEzLjMwOSAzLjMwOSAwIDAgMC0uMDcyLjA4aC0uMDAxYTEuNDM2IDEuNDM2IDAgMCAwLS4wNjQuMDc0bC0uMDIuMDIyYy0uMDE2LjAxOS0uMDMyLjA0LS4wNS4wNTgtLjAwMi4wMDUtLjAwNy4wMDgtLjAxLjAxM0E2Ljk3MyA2Ljk3MyAwIDAgMCAxNyAyMmMwIDEuNzE0LjYxNiAzLjI4MyAxLjYzOCA0LjVsLjAxLjAxNC4wNDkuMDU4LjAxOS4wMjIuMDY0LjA3My4wMDEuMDAzYy4wMjQuMDI3LjA0Ny4wNTMuMDcyLjA3OGwuMDAyLjAwMi4xNS4xNTguMDAxLjAwMS4wNzQuMDc0LjAwNC4wMDRBNi45ODcgNi45ODcgMCAwIDAgMjQgMjlhNi45NzMgNi45NzMgMCAwIDAgNC45MS0yLjAxMmwuMDA2LS4wMDRjLjAyNS0uMDI1LjA1LS4wNDkuMDczLS4wNzRsLjAwMi0uMDAxYTQuNzMgNC43MyAwIDAgMCAuMTUtLjE1OGwuMDAxLS4wMDJjLjAyNC0uMDI2LjA0OS0uMDUxLjA3Mi0uMDc4IDAtLjAwMS4wMDItLjAwMS4wMDItLjAwM2wuMDY0LS4wNzMuMDE4LS4wMjJjLjAyLS4wMi4wMzYtLjA0LjA1Mi0uMDU4em0uMDY0LTIuMjI4Yy0uMjE2LjUxLS41Ljk4MS0uODQ3IDEuNDFhNi45MzkgNi45MzkgMCAwIDAtMS4yNzMtLjg3NGMuMTgxLS43MzMuMjkzLTEuNTM4LjMyMy0yLjM4NGgyLjI0MmE1Ljg0MiA1Ljg0MiAwIDAgMS0uNDQ1IDEuODQ4em0uNDQ1LTIuNzIzaC0yLjI0MmExMS42ODEgMTEuNjgxIDAgMCAwLS4zMjMtMi4zODUgNi45MzkgNi45MzkgMCAwIDAgMS4yNzMtLjg3MyA1Ljg0MiA1Ljg0MiAwIDAgMSAxLjI5MiAzLjI1OHptLTMuNTczLTQuOTc3YTUuODQgNS44NCAwIDAgMSAxLjY4MSAxLjA4MWMtLjI4OS4yNDctLjYuNDY0LS45MjguNjUzLS4yNDUtLjcwMy0uNTYtMS4zMTQtLjkyNS0xLjgwMy4wNTguMDIyLjExNi4wNDYuMTcyLjA2OXpNMjQuODcgMjcuNTMzYTEuNzY4IDEuNzY4IDAgMCAxLS40MzMuMjU2di0yLjg5OGE2LjA4IDYuMDggMCAwIDEgMS44MDguNDA5Yy0uMTMuMzg0LS4yOC43NC0uNDUzIDEuMDYtLjI3Mi41MDYtLjU5LjkxLS45MjIgMS4xNzN6bS45MjItOS44OTJjLjE3Mi4zMjIuMzI0LjY3Ni40NTMgMS4wNTlhNi4wOCA2LjA4IDAgMCAxLTEuODA4LjQxdi0yLjg5N2MuMTQ0LjA1Ny4yOS4xNDIuNDMzLjI1Ni4zMzIuMjYuNjUuNjY1LjkyMiAxLjE3MnptLTEuMzU1IDYuMzczdi0xLjU3NmgyLjMwNWMtLjAyNS42OS0uMTEgMS4zNi0uMjU1IDEuOTk2bC0uMDA0LjAyYTYuOTUzIDYuOTUzIDAgMCAwLTIuMDQ1LS40NHptMC0yLjQ1MXYtMS41NzdhNi45NTMgNi45NTMgMCAwIDAgMi4wNDYtLjQ0bC4wMDUuMDJjLjE0My42MzYuMjMgMS4zMDQuMjU0IDEuOTk3aC0yLjMwNHptLS44NzUuODc1djEuNTc2YTYuOTUzIDYuOTUzIDAgMCAwLTIuMDQ1LjQ0bC0uMDA1LS4wMmExMC44MzUgMTAuODM1IDAgMCAxLS4yNTQtMS45OTZoMi4zMDV6bS0yLjMwNC0uODc1Yy4wMjUtLjY5MS4xMS0xLjM2MS4yNTUtMS45OTdsLjAwNC0uMDJhNi45NDMgNi45NDMgMCAwIDAgMi4wNDUuNDR2MS41NzdoLTIuMzA0em0yLjMwNSAzLjMyOHYyLjg5N2ExLjc0OCAxLjc0OCAwIDAgMS0uNDMzLS4yNTdjLS4zMzItLjI2LS42NTItLjY2Ny0uOTI0LTEuMTczYTcuMDYgNy4wNiAwIDAgMS0uNDUzLTEuMDYgNi4wOTggNi4wOTggMCAwIDEgMS44MS0uNDA3em0wLTUuNzgyYTYuMDggNi4wOCAwIDAgMS0xLjgwOC0uNDA5Yy4xMy0uMzg0LjI4LS43NC40NTMtMS4wNi4yNzItLjUwNi41OS0uOTEyLjkyMy0xLjE3M2ExLjggMS44IDAgMCAxIC40MzMtLjI1NnYyLjg5OGgtLjAwMnptLTEuODQ5LTIuNTIzYy4wNTgtLjAyMy4xMTQtLjA0Ny4xNzItLjA2OS0uMzY2LjQ5LS42OCAxLjEtLjkyNSAxLjgwM2E2LjA1NyA2LjA1NyAwIDAgMS0uOTI4LS42NTMgNS44NCA1Ljg0IDAgMCAxIDEuNjgxLTEuMDgxem0tMy4xMjggMy4xMjhjLjIxNi0uNTEuNS0uOTgxLjg0Ny0xLjQxLjM4OS4zMzcuODE1LjYzIDEuMjczLjg3NGExMS42ODEgMTEuNjgxIDAgMCAwLS4zMjMgMi4zODVIMTguMTRjLjA0Ny0uNjQuMTk3LTEuMjYuNDQ1LTEuODQ5em0tLjQ0NSAyLjcyNGgyLjI0MmMuMDMuODQ2LjE0MiAxLjY1MS4zMjMgMi4zODRhNi45MzkgNi45MzkgMCAwIDAtMS4yNzMuODczIDUuODQyIDUuODQyIDAgMCAxLTEuMjkyLTMuMjU4em0zLjU3MyA0Ljk3NmE1Ljg0IDUuODQgMCAwIDEtMS42ODEtMS4wODFjLjI4OS0uMjQ3LjYtLjQ2NC45MjgtLjY1My4yNDUuNzAzLjU2IDEuMzE0LjkyNSAxLjgwM2E1LjYyNCA1LjYyNCAwIDAgMS0uMTcyLS4wNjl6bTQuNTcyIDBhNi4xNjggNi4xNjggMCAwIDEtLjE3Mi4wNjljLjM2Ni0uNDkuNjgtMS4xLjkyNS0xLjgwMy4zMjguMTg3LjY0LjQwNi45MjguNjUzYTUuODQgNS44NCAwIDAgMS0xLjY4MSAxLjA4MXoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0ibm9uemVybyIvPjwvZz48L3N2Zz4="
+      />
+    </Card>
+  </ItemPanel>
+);
 
 export default KoniItemPanel;
diff --git a/EditorFlow/src/components/EditorMinimap/index.tsx b/EditorFlow/src/components/EditorMinimap/index.tsx
index 8c86b242..ca27e2f9 100644
--- a/EditorFlow/src/components/EditorMinimap/index.tsx
+++ b/EditorFlow/src/components/EditorMinimap/index.tsx
@@ -1,13 +1,11 @@
-import React from 'react';
 import { Card } from 'antd';
 import { Minimap } from 'gg-editor';
+import React from 'react';
 
-const EditorMinimap = () => {
-  return (
-    <Card type="inner" size="small" title="Minimap" bordered={false}>
-      <Minimap height={200} />
-    </Card>
-  );
-};
+const EditorMinimap = () => (
+  <Card type="inner" size="small" title="Minimap" bordered={false}>
+    <Minimap height={200} />
+  </Card>
+);
 
 export default EditorMinimap;
diff --git a/EditorFlow/src/components/EditorToolbar/FlowToolbar.tsx b/EditorFlow/src/components/EditorToolbar/FlowToolbar.tsx
index 374c1858..fe888be8 100644
--- a/EditorFlow/src/components/EditorToolbar/FlowToolbar.tsx
+++ b/EditorFlow/src/components/EditorToolbar/FlowToolbar.tsx
@@ -1,32 +1,30 @@
-import React from 'react';
 import { Divider } from 'antd';
+import React from 'react';
 import { Toolbar } from 'gg-editor';
 import ToolbarButton from './ToolbarButton';
 import styles from './index.less';
 
-const FlowToolbar = () => {
-  return (
-    <Toolbar className={styles.toolbar}>
-      <ToolbarButton command="undo" />
-      <ToolbarButton command="redo" />
-      <Divider type="vertical" />
-      <ToolbarButton command="copy" />
-      <ToolbarButton command="paste" />
-      <ToolbarButton command="delete" />
-      <Divider type="vertical" />
-      <ToolbarButton command="zoomIn" icon="zoom-in" text="Zoom In" />
-      <ToolbarButton command="zoomOut" icon="zoom-out" text="Zoom Out" />
-      <ToolbarButton command="autoZoom" icon="fit-map" text="Fit Map" />
-      <ToolbarButton command="resetZoom" icon="actual-size" text="Actual Size" />
-      <Divider type="vertical" />
-      <ToolbarButton command="toBack" icon="to-back" text="To Back" />
-      <ToolbarButton command="toFront" icon="to-front" text="To Front" />
-      <Divider type="vertical" />
-      <ToolbarButton command="multiSelect" icon="multi-select" text="Multi Select" />
-      <ToolbarButton command="addGroup" icon="group" text="Add Group" />
-      <ToolbarButton command="unGroup" icon="ungroup" text="Ungroup" />
-    </Toolbar>
-  );
-};
+const FlowToolbar = () => (
+  <Toolbar className={styles.toolbar}>
+    <ToolbarButton command="undo" />
+    <ToolbarButton command="redo" />
+    <Divider type="vertical" />
+    <ToolbarButton command="copy" />
+    <ToolbarButton command="paste" />
+    <ToolbarButton command="delete" />
+    <Divider type="vertical" />
+    <ToolbarButton command="zoomIn" icon="zoom-in" text="Zoom In" />
+    <ToolbarButton command="zoomOut" icon="zoom-out" text="Zoom Out" />
+    <ToolbarButton command="autoZoom" icon="fit-map" text="Fit Map" />
+    <ToolbarButton command="resetZoom" icon="actual-size" text="Actual Size" />
+    <Divider type="vertical" />
+    <ToolbarButton command="toBack" icon="to-back" text="To Back" />
+    <ToolbarButton command="toFront" icon="to-front" text="To Front" />
+    <Divider type="vertical" />
+    <ToolbarButton command="multiSelect" icon="multi-select" text="Multi Select" />
+    <ToolbarButton command="addGroup" icon="group" text="Add Group" />
+    <ToolbarButton command="unGroup" icon="ungroup" text="Ungroup" />
+  </Toolbar>
+);
 
 export default FlowToolbar;
diff --git a/EditorFlow/src/components/EditorToolbar/MindToolbar.tsx b/EditorFlow/src/components/EditorToolbar/MindToolbar.tsx
index 1c83286a..536c06d8 100644
--- a/EditorFlow/src/components/EditorToolbar/MindToolbar.tsx
+++ b/EditorFlow/src/components/EditorToolbar/MindToolbar.tsx
@@ -1,27 +1,25 @@
-import React from 'react';
 import { Divider } from 'antd';
+import React from 'react';
 import { Toolbar } from 'gg-editor';
 import ToolbarButton from './ToolbarButton';
 import styles from './index.less';
 
-const FlowToolbar = () => {
-  return (
-    <Toolbar className={styles.toolbar}>
-      <ToolbarButton command="undo" />
-      <ToolbarButton command="redo" />
-      <Divider type="vertical" />
-      <ToolbarButton command="zoomIn" icon="zoom-in" text="Zoom In" />
-      <ToolbarButton command="zoomOut" icon="zoom-out" text="Zoom Out" />
-      <ToolbarButton command="autoZoom" icon="fit-map" text="Fit Map" />
-      <ToolbarButton command="resetZoom" icon="actual-size" text="Actual Size" />
-      <Divider type="vertical" />
-      <ToolbarButton command="append" text="Topic" />
-      <ToolbarButton command="appendChild" icon="append-child" text="Subtopic" />
-      <Divider type="vertical" />
-      <ToolbarButton command="collapse" text="Fold" />
-      <ToolbarButton command="expand" text="Unfold" />
-    </Toolbar>
-  );
-};
+const FlowToolbar = () => (
+  <Toolbar className={styles.toolbar}>
+    <ToolbarButton command="undo" />
+    <ToolbarButton command="redo" />
+    <Divider type="vertical" />
+    <ToolbarButton command="zoomIn" icon="zoom-in" text="Zoom In" />
+    <ToolbarButton command="zoomOut" icon="zoom-out" text="Zoom Out" />
+    <ToolbarButton command="autoZoom" icon="fit-map" text="Fit Map" />
+    <ToolbarButton command="resetZoom" icon="actual-size" text="Actual Size" />
+    <Divider type="vertical" />
+    <ToolbarButton command="append" text="Topic" />
+    <ToolbarButton command="appendChild" icon="append-child" text="Subtopic" />
+    <Divider type="vertical" />
+    <ToolbarButton command="collapse" text="Fold" />
+    <ToolbarButton command="expand" text="Unfold" />
+  </Toolbar>
+);
 
 export default FlowToolbar;
diff --git a/EditorFlow/src/components/EditorToolbar/ToolbarButton.tsx b/EditorFlow/src/components/EditorToolbar/ToolbarButton.tsx
index 30958f0e..15a96b7a 100644
--- a/EditorFlow/src/components/EditorToolbar/ToolbarButton.tsx
+++ b/EditorFlow/src/components/EditorToolbar/ToolbarButton.tsx
@@ -1,12 +1,11 @@
+import { Command } from 'gg-editor';
 import React from 'react';
 import { Tooltip } from 'antd';
-import { Command } from 'gg-editor';
 import IconFont from '../../common/IconFont';
 import styles from './index.less';
 
-const upperFirst = (str: string) => {
-  return str.toLowerCase().replace(/( |^)[a-z]/g, (l: string) => l.toUpperCase());
-};
+const upperFirst = (str: string) =>
+  str.toLowerCase().replace(/( |^)[a-z]/g, (l: string) => l.toUpperCase());
 
 interface ToolbarButtonProps {
   command: string;
diff --git a/EditorFlow/src/components/EditorToolbar/index.tsx b/EditorFlow/src/components/EditorToolbar/index.tsx
index ac08e3dc..58f1d277 100644
--- a/EditorFlow/src/components/EditorToolbar/index.tsx
+++ b/EditorFlow/src/components/EditorToolbar/index.tsx
@@ -1,5 +1,5 @@
 import FlowToolbar from './FlowToolbar';
-import MindToolbar from './MindToolbar';
 import KoniToolbar from './KoniToolbar';
+import MindToolbar from './MindToolbar';
 
 export { FlowToolbar, MindToolbar, KoniToolbar };
diff --git a/EditorFlow/src/index.tsx b/EditorFlow/src/index.tsx
index ce6bfba4..a8069953 100644
--- a/EditorFlow/src/index.tsx
+++ b/EditorFlow/src/index.tsx
@@ -1,45 +1,44 @@
-import React from 'react';
-import { Row, Col } from 'antd';
+import { Col, Row } from 'antd';
 import GGEditor, { Flow } from 'gg-editor';
+
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import React from 'react';
+import { formatMessage } from 'umi-plugin-react/locale';
 import EditorMinimap from './components/EditorMinimap';
 import { FlowContextMenu } from './components/EditorContextMenu';
-import { FlowToolbar } from './components/EditorToolbar';
-import { FlowItemPanel } from './components/EditorItemPanel';
 import { FlowDetailPanel } from './components/EditorDetailPanel';
+import { FlowItemPanel } from './components/EditorItemPanel';
+import { FlowToolbar } from './components/EditorToolbar';
 import styles from './index.less';
-import { PageHeaderWrapper } from '@ant-design/pro-layout';
-import { formatMessage } from 'umi-plugin-react/locale';
 
 GGEditor.setTrackable(false);
 
-export default () => {
-  return (
-    <PageHeaderWrapper
-      content={formatMessage({
-        id: 'BLOCK_NAME.description',
-        defaultMessage: 'description',
-      })}
-    >
-      <GGEditor className={styles.editor}>
-        <Row type="flex" className={styles.editorHd}>
-          <Col span={24}>
-            <FlowToolbar />
-          </Col>
-        </Row>
-        <Row type="flex" className={styles.editorBd}>
-          <Col span={4} className={styles.editorSidebar}>
-            <FlowItemPanel />
-          </Col>
-          <Col span={16} className={styles.editorContent}>
-            <Flow className={styles.flow} />
-          </Col>
-          <Col span={4} className={styles.editorSidebar}>
-            <FlowDetailPanel />
-            <EditorMinimap />
-          </Col>
-        </Row>
-        <FlowContextMenu />
-      </GGEditor>
-    </PageHeaderWrapper>
-  );
-};
+export default () => (
+  <PageHeaderWrapper
+    content={formatMessage({
+      id: 'BLOCK_NAME.description',
+      defaultMessage: 'description',
+    })}
+  >
+    <GGEditor className={styles.editor}>
+      <Row type="flex" className={styles.editorHd}>
+        <Col span={24}>
+          <FlowToolbar />
+        </Col>
+      </Row>
+      <Row type="flex" className={styles.editorBd}>
+        <Col span={4} className={styles.editorSidebar}>
+          <FlowItemPanel />
+        </Col>
+        <Col span={16} className={styles.editorContent}>
+          <Flow className={styles.flow} />
+        </Col>
+        <Col span={4} className={styles.editorSidebar}>
+          <FlowDetailPanel />
+          <EditorMinimap />
+        </Col>
+      </Row>
+      <FlowContextMenu />
+    </GGEditor>
+  </PageHeaderWrapper>
+);
diff --git a/EditorKoni/README.md b/EditorKoni/README.md
index dbe39275..12e6a46c 100644
--- a/EditorKoni/README.md
+++ b/EditorKoni/README.md
@@ -7,6 +7,7 @@ flow
 ```sh
 umi block add ant-design-pro/flow
 ```
+
 ## SNAPSHOT
 
 ![SNAPSHOT](./snapshot.png)
diff --git a/EditorKoni/package.json b/EditorKoni/package.json
index 1bf18eff..592c4073 100644
--- a/EditorKoni/package.json
+++ b/EditorKoni/package.json
@@ -12,6 +12,7 @@
     "dev": "umi dev"
   },
   "dependencies": {
+    "@ant-design/pro-layout": "^4.5.5",
     "@antv/data-set": "^0.10.2",
     "antd": "^3.16.3",
     "bizcharts": "^3.5.3-beta.0",
@@ -22,13 +23,14 @@
     "numeral": "^2.0.6",
     "react": "^16.6.3",
     "react-fittext": "^1.0.0",
-    "umi-request": "^1.0.0"
+    "umi-request": "^1.0.0",
+    "umi-plugin-react": "^1.7.2",
+    "umi-plugin-block-dev": "^1.1.0"
+
   },
   "devDependencies": {
-    "umi": "^2.6.9",
-    "umi-plugin-block-dev": "^1.1.0",
-    "umi-plugin-react": "^1.7.2",
-    "@types/numeral": "^0.0.25"
+    "@types/numeral": "^0.0.25",
+    "umi": "^2.6.9"
   },
   "blockConfig": {
     "specVersion": "0.1"
diff --git a/EditorKoni/src/components/EditorContextMenu/FlowContextMenu.tsx b/EditorKoni/src/components/EditorContextMenu/FlowContextMenu.tsx
index cbb7041f..32f17aa1 100644
--- a/EditorKoni/src/components/EditorContextMenu/FlowContextMenu.tsx
+++ b/EditorKoni/src/components/EditorContextMenu/FlowContextMenu.tsx
@@ -1,36 +1,35 @@
+import { CanvasMenu, ContextMenu, EdgeMenu, GroupMenu, MultiMenu, NodeMenu } from 'gg-editor';
+
 import React from 'react';
-import { NodeMenu, EdgeMenu, GroupMenu, MultiMenu, CanvasMenu, ContextMenu } from 'gg-editor';
 import MenuItem from './MenuItem';
 import styles from './index.less';
 
-const FlowContextMenu = () => {
-  return (
-    <ContextMenu className={styles.contextMenu}>
-      <NodeMenu>
-        <MenuItem command="copy" />
-        <MenuItem command="delete" />
-      </NodeMenu>
-      <EdgeMenu>
-        <MenuItem command="delete" />
-      </EdgeMenu>
-      <GroupMenu>
-        <MenuItem command="copy" />
-        <MenuItem command="delete" />
-        <MenuItem command="unGroup" icon="ungroup" text="Ungroup" />
-      </GroupMenu>
-      <MultiMenu>
-        <MenuItem command="copy" />
-        <MenuItem command="paste" />
-        <MenuItem command="addGroup" icon="group" text="Add Group" />
-        <MenuItem command="delete" />
-      </MultiMenu>
-      <CanvasMenu>
-        <MenuItem command="undo" />
-        <MenuItem command="redo" />
-        <MenuItem command="pasteHere" icon="paste" text="Paste Here" />
-      </CanvasMenu>
-    </ContextMenu>
-  );
-};
+const FlowContextMenu = () => (
+  <ContextMenu className={styles.contextMenu}>
+    <NodeMenu>
+      <MenuItem command="copy" />
+      <MenuItem command="delete" />
+    </NodeMenu>
+    <EdgeMenu>
+      <MenuItem command="delete" />
+    </EdgeMenu>
+    <GroupMenu>
+      <MenuItem command="copy" />
+      <MenuItem command="delete" />
+      <MenuItem command="unGroup" icon="ungroup" text="Ungroup" />
+    </GroupMenu>
+    <MultiMenu>
+      <MenuItem command="copy" />
+      <MenuItem command="paste" />
+      <MenuItem command="addGroup" icon="group" text="Add Group" />
+      <MenuItem command="delete" />
+    </MultiMenu>
+    <CanvasMenu>
+      <MenuItem command="undo" />
+      <MenuItem command="redo" />
+      <MenuItem command="pasteHere" icon="paste" text="Paste Here" />
+    </CanvasMenu>
+  </ContextMenu>
+);
 
 export default FlowContextMenu;
diff --git a/EditorKoni/src/components/EditorContextMenu/MenuItem.tsx b/EditorKoni/src/components/EditorContextMenu/MenuItem.tsx
index afbefe31..63b584ca 100644
--- a/EditorKoni/src/components/EditorContextMenu/MenuItem.tsx
+++ b/EditorKoni/src/components/EditorContextMenu/MenuItem.tsx
@@ -1,11 +1,10 @@
-import React from 'react';
 import { Command } from 'gg-editor';
+import React from 'react';
 import IconFont from '../../common/IconFont';
 import styles from './index.less';
 
-const upperFirst = (str: string) => {
-  return str.toLowerCase().replace(/( |^)[a-z]/g, (l: string) => l.toUpperCase());
-};
+const upperFirst = (str: string) =>
+  str.toLowerCase().replace(/( |^)[a-z]/g, (l: string) => l.toUpperCase());
 
 interface MenuItemProps {
   command: string;
diff --git a/EditorKoni/src/components/EditorContextMenu/MindContextMenu.tsx b/EditorKoni/src/components/EditorContextMenu/MindContextMenu.tsx
index 2a9d43cd..2dc5247d 100644
--- a/EditorKoni/src/components/EditorContextMenu/MindContextMenu.tsx
+++ b/EditorKoni/src/components/EditorContextMenu/MindContextMenu.tsx
@@ -1,24 +1,23 @@
+import { CanvasMenu, ContextMenu, NodeMenu } from 'gg-editor';
+
 import React from 'react';
-import { NodeMenu, CanvasMenu, ContextMenu } from 'gg-editor';
 import MenuItem from './MenuItem';
 import styles from './index.less';
 
-const MindContextMenu = () => {
-  return (
-    <ContextMenu className={styles.contextMenu}>
-      <NodeMenu>
-        <MenuItem command="append" text="Topic" />
-        <MenuItem command="appendChild" icon="append-child" text="Subtopic" />
-        <MenuItem command="collapse" text="Fold" />
-        <MenuItem command="expand" text="Unfold" />
-        <MenuItem command="delete" />
-      </NodeMenu>
-      <CanvasMenu>
-        <MenuItem command="undo" />
-        <MenuItem command="redo" />
-      </CanvasMenu>
-    </ContextMenu>
-  );
-};
+const MindContextMenu = () => (
+  <ContextMenu className={styles.contextMenu}>
+    <NodeMenu>
+      <MenuItem command="append" text="Topic" />
+      <MenuItem command="appendChild" icon="append-child" text="Subtopic" />
+      <MenuItem command="collapse" text="Fold" />
+      <MenuItem command="expand" text="Unfold" />
+      <MenuItem command="delete" />
+    </NodeMenu>
+    <CanvasMenu>
+      <MenuItem command="undo" />
+      <MenuItem command="redo" />
+    </CanvasMenu>
+  </ContextMenu>
+);
 
 export default MindContextMenu;
diff --git a/EditorKoni/src/components/EditorContextMenu/index.tsx b/EditorKoni/src/components/EditorContextMenu/index.tsx
index 16fcde01..6ee93423 100644
--- a/EditorKoni/src/components/EditorContextMenu/index.tsx
+++ b/EditorKoni/src/components/EditorContextMenu/index.tsx
@@ -1,5 +1,5 @@
 import FlowContextMenu from './FlowContextMenu';
-import MindContextMenu from './MindContextMenu';
 import KoniContextMenu from './KoniContextMenu';
+import MindContextMenu from './MindContextMenu';
 
 export { FlowContextMenu, MindContextMenu, KoniContextMenu };
diff --git a/EditorKoni/src/components/EditorDetailPanel/DetailForm.tsx b/EditorKoni/src/components/EditorDetailPanel/DetailForm.tsx
index 0a9690d7..713d6dbb 100644
--- a/EditorKoni/src/components/EditorDetailPanel/DetailForm.tsx
+++ b/EditorKoni/src/components/EditorDetailPanel/DetailForm.tsx
@@ -1,11 +1,11 @@
-import React, { Fragment } from 'react';
 import { Card, Form, Input, Select } from 'antd';
-import { withPropsAPI } from 'gg-editor';
+import React, { Fragment } from 'react';
+
 import { FormComponentProps } from 'antd/es/form';
+import { withPropsAPI } from 'gg-editor';
 
-const upperFirst = (str: string) => {
-  return str.toLowerCase().replace(/( |^)[a-z]/g, (l: string) => l.toUpperCase());
-};
+const upperFirst = (str: string) =>
+  str.toLowerCase().replace(/( |^)[a-z]/g, (l: string) => l.toUpperCase());
 
 const { Item } = Form;
 const { Option } = Select;
@@ -60,15 +60,13 @@ class DetailForm extends React.Component<DetailFormProps> {
     }, 0);
   };
 
-  renderEdgeShapeSelect = () => {
-    return (
-      <Select onChange={this.handleSubmit}>
-        <Option value="flow-smooth">Smooth</Option>
-        <Option value="flow-polyline">Polyline</Option>
-        <Option value="flow-polyline-round">Polyline Round</Option>
-      </Select>
-    );
-  };
+  renderEdgeShapeSelect = () => (
+    <Select onChange={this.handleSubmit}>
+      <Option value="flow-smooth">Smooth</Option>
+      <Option value="flow-polyline">Polyline</Option>
+      <Option value="flow-polyline-round">Polyline Round</Option>
+    </Select>
+  );
 
   renderNodeDetail = () => {
     const { form } = this.props;
diff --git a/EditorKoni/src/components/EditorDetailPanel/FlowDetailPanel.tsx b/EditorKoni/src/components/EditorDetailPanel/FlowDetailPanel.tsx
index 8d681618..ce38ea16 100644
--- a/EditorKoni/src/components/EditorDetailPanel/FlowDetailPanel.tsx
+++ b/EditorKoni/src/components/EditorDetailPanel/FlowDetailPanel.tsx
@@ -1,29 +1,28 @@
-import React from 'react';
+import { CanvasPanel, DetailPanel, EdgePanel, GroupPanel, MultiPanel, NodePanel } from 'gg-editor';
+
 import { Card } from 'antd';
-import { NodePanel, EdgePanel, GroupPanel, MultiPanel, CanvasPanel, DetailPanel } from 'gg-editor';
+import React from 'react';
 import DetailForm from './DetailForm';
 import styles from './index.less';
 
-const FlowDetailPanel = () => {
-  return (
-    <DetailPanel className={styles.detailPanel}>
-      <NodePanel>
-        <DetailForm type="node" />
-      </NodePanel>
-      <EdgePanel>
-        <DetailForm type="edge" />
-      </EdgePanel>
-      <GroupPanel>
-        <DetailForm type="group" />
-      </GroupPanel>
-      <MultiPanel>
-        <Card type="inner" size="small" title="Multi Select" bordered={false} />
-      </MultiPanel>
-      <CanvasPanel>
-        <Card type="inner" size="small" title="Canvas" bordered={false} />
-      </CanvasPanel>
-    </DetailPanel>
-  );
-};
+const FlowDetailPanel = () => (
+  <DetailPanel className={styles.detailPanel}>
+    <NodePanel>
+      <DetailForm type="node" />
+    </NodePanel>
+    <EdgePanel>
+      <DetailForm type="edge" />
+    </EdgePanel>
+    <GroupPanel>
+      <DetailForm type="group" />
+    </GroupPanel>
+    <MultiPanel>
+      <Card type="inner" size="small" title="Multi Select" bordered={false} />
+    </MultiPanel>
+    <CanvasPanel>
+      <Card type="inner" size="small" title="Canvas" bordered={false} />
+    </CanvasPanel>
+  </DetailPanel>
+);
 
 export default FlowDetailPanel;
diff --git a/EditorKoni/src/components/EditorDetailPanel/MindDetailPanel.tsx b/EditorKoni/src/components/EditorDetailPanel/MindDetailPanel.tsx
index 6b4d5c9e..bf8f4834 100644
--- a/EditorKoni/src/components/EditorDetailPanel/MindDetailPanel.tsx
+++ b/EditorKoni/src/components/EditorDetailPanel/MindDetailPanel.tsx
@@ -1,20 +1,19 @@
-import React from 'react';
+import { CanvasPanel, DetailPanel, NodePanel } from 'gg-editor';
+
 import { Card } from 'antd';
-import { NodePanel, CanvasPanel, DetailPanel } from 'gg-editor';
+import React from 'react';
 import DetailForm from './DetailForm';
 import styles from './index.less';
 
-const MindDetailPanel = () => {
-  return (
-    <DetailPanel className={styles.detailPanel}>
-      <NodePanel>
-        <DetailForm type="node" />
-      </NodePanel>
-      <CanvasPanel>
-        <Card type="inner" size="small" title="Canvas" bordered={false} />
-      </CanvasPanel>
-    </DetailPanel>
-  );
-};
+const MindDetailPanel = () => (
+  <DetailPanel className={styles.detailPanel}>
+    <NodePanel>
+      <DetailForm type="node" />
+    </NodePanel>
+    <CanvasPanel>
+      <Card type="inner" size="small" title="Canvas" bordered={false} />
+    </CanvasPanel>
+  </DetailPanel>
+);
 
 export default MindDetailPanel;
diff --git a/EditorKoni/src/components/EditorDetailPanel/index.tsx b/EditorKoni/src/components/EditorDetailPanel/index.tsx
index 8df063ef..50aa37a8 100644
--- a/EditorKoni/src/components/EditorDetailPanel/index.tsx
+++ b/EditorKoni/src/components/EditorDetailPanel/index.tsx
@@ -1,5 +1,5 @@
 import FlowDetailPanel from './FlowDetailPanel';
-import MindDetailPanel from './MindDetailPanel';
 import KoniDetailPanel from './KoniDetailPanel';
+import MindDetailPanel from './MindDetailPanel';
 
 export { FlowDetailPanel, MindDetailPanel, KoniDetailPanel };
diff --git a/EditorKoni/src/components/EditorItemPanel/FlowItemPanel.tsx b/EditorKoni/src/components/EditorItemPanel/FlowItemPanel.tsx
index e6912793..dce9855d 100644
--- a/EditorKoni/src/components/EditorItemPanel/FlowItemPanel.tsx
+++ b/EditorKoni/src/components/EditorItemPanel/FlowItemPanel.tsx
@@ -1,55 +1,54 @@
-import React from 'react';
+import { Item, ItemPanel } from 'gg-editor';
+
 import { Card } from 'antd';
-import { ItemPanel, Item } from 'gg-editor';
+import React from 'react';
 import styles from './index.less';
 
-const FlowItemPanel = () => {
-  return (
-    <ItemPanel className={styles.itemPanel}>
-      <Card bordered={false}>
-        <Item
-          type="node"
-          size="72*72"
-          shape="flow-circle"
-          model={{
-            color: '#FA8C16',
-            label: 'Start',
-          }}
-          src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAiIGhlaWdodD0iODAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxjaXJjbGUgaWQ9ImIiIGN4PSIzNiIgY3k9IjM2IiByPSIzNiIvPjxmaWx0ZXIgeD0iLTkuNyUiIHk9Ii02LjklIiB3aWR0aD0iMTE5LjQlIiBoZWlnaHQ9IjExOS40JSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiBpZD0iYSI+PGZlT2Zmc2V0IGR5PSIyIiBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIi8+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMiIgaW49InNoYWRvd09mZnNldE91dGVyMSIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29tcG9zaXRlIGluPSJzaGFkb3dCbHVyT3V0ZXIxIiBpbjI9IlNvdXJjZUFscGhhIiBvcGVyYXRvcj0ib3V0IiByZXN1bHQ9InNoYWRvd0JsdXJPdXRlcjEiLz48ZmVDb2xvck1hdHJpeCB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAuMDQgMCIgaW49InNoYWRvd0JsdXJPdXRlcjEiLz48L2ZpbHRlcj48L2RlZnM+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0IDIpIj48dXNlIGZpbGw9IiMwMDAiIGZpbHRlcj0idXJsKCNhKSIgeGxpbms6aHJlZj0iI2IiLz48dXNlIGZpbGwtb3BhY2l0eT0iLjkyIiBmaWxsPSIjRkZGMkU4IiB4bGluazpocmVmPSIjYiIvPjxjaXJjbGUgc3Ryb2tlPSIjRkZDMDY5IiBjeD0iMzYiIGN5PSIzNiIgcj0iMzUuNSIvPjwvZz48dGV4dCBmb250LWZhbWlseT0iUGluZ0ZhbmdTQy1SZWd1bGFyLCBQaW5nRmFuZyBTQyIgZm9udC1zaXplPSIxMiIgZmlsbD0iIzAwMCIgZmlsbC1vcGFjaXR5PSIuNjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQgMikiPjx0c3BhbiB4PSIyMyIgeT0iNDEiPlN0YXJ0PC90c3Bhbj48L3RleHQ+PC9nPjwvc3ZnPg=="
-        />
-        <Item
-          type="node"
-          size="80*48"
-          shape="flow-rect"
-          model={{
-            color: '#1890FF',
-            label: 'Normal',
-          }}
-          src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODgiIGhlaWdodD0iNTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxyZWN0IGlkPSJiIiB4PSIwIiB5PSIwIiB3aWR0aD0iODAiIGhlaWdodD0iNDgiIHJ4PSI0Ii8+PGZpbHRlciB4PSItOC44JSIgeT0iLTEwLjQlIiB3aWR0aD0iMTE3LjUlIiBoZWlnaHQ9IjEyOS4yJSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiBpZD0iYSI+PGZlT2Zmc2V0IGR5PSIyIiBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIi8+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMiIgaW49InNoYWRvd09mZnNldE91dGVyMSIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29tcG9zaXRlIGluPSJzaGFkb3dCbHVyT3V0ZXIxIiBpbjI9IlNvdXJjZUFscGhhIiBvcGVyYXRvcj0ib3V0IiByZXN1bHQ9InNoYWRvd0JsdXJPdXRlcjEiLz48ZmVDb2xvck1hdHJpeCB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAuMDQgMCIgaW49InNoYWRvd0JsdXJPdXRlcjEiLz48L2ZpbHRlcj48L2RlZnM+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0IDIpIj48dXNlIGZpbGw9IiMwMDAiIGZpbHRlcj0idXJsKCNhKSIgeGxpbms6aHJlZj0iI2IiLz48dXNlIGZpbGwtb3BhY2l0eT0iLjkyIiBmaWxsPSIjRTZGN0ZGIiB4bGluazpocmVmPSIjYiIvPjxyZWN0IHN0cm9rZT0iIzE4OTBGRiIgeD0iLjUiIHk9Ii41IiB3aWR0aD0iNzkiIGhlaWdodD0iNDciIHJ4PSI0Ii8+PC9nPjx0ZXh0IGZvbnQtZmFtaWx5PSJQaW5nRmFuZ1NDLVJlZ3VsYXIsIFBpbmdGYW5nIFNDIiBmb250LXNpemU9IjEyIiBmaWxsPSIjMDAwIiBmaWxsLW9wYWNpdHk9Ii42NSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNCAyKSI+PHRzcGFuIHg9IjIxIiB5PSIyOSI+Tm9ybWFsPC90c3Bhbj48L3RleHQ+PC9nPjwvc3ZnPg=="
-        />
-        <Item
-          type="node"
-          size="80*72"
-          shape="flow-rhombus"
-          model={{
-            color: '#13C2C2',
-            label: 'Decision',
-          }}
-          src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODYiIGhlaWdodD0iNzgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxwYXRoIGQ9Ik00Mi42NyAxLjY3bDM0Ljk2NSAzMS4zNTJhNCA0IDAgMCAxIDAgNS45NTZMNDIuNjcgNzAuMzNhNCA0IDAgMCAxLTUuMzQgMEwyLjM2NSAzOC45NzhhNCA0IDAgMCAxIDAtNS45NTZMMzcuMzMgMS42N2E0IDQgMCAwIDEgNS4zNCAweiIgaWQ9ImIiLz48ZmlsdGVyIHg9Ii04LjglIiB5PSItNi45JSIgd2lkdGg9IjExNy41JSIgaGVpZ2h0PSIxMTkuNCUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9ImEiPjxmZU9mZnNldCBkeT0iMiIgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSIvPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSIvPjxmZUNvbXBvc2l0ZSBpbj0ic2hhZG93Qmx1ck91dGVyMSIgaW4yPSJTb3VyY2VBbHBoYSIgb3BlcmF0b3I9Im91dCIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjA0IDAiIGluPSJzaGFkb3dCbHVyT3V0ZXIxIi8+PC9maWx0ZXI+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMyAxKSI+PHVzZSBmaWxsPSIjMDAwIiBmaWx0ZXI9InVybCgjYSkiIHhsaW5rOmhyZWY9IiNiIi8+PHVzZSBmaWxsLW9wYWNpdHk9Ii45MiIgZmlsbD0iI0U2RkZGQiIgeGxpbms6aHJlZj0iI2IiLz48cGF0aCBzdHJva2U9IiM1Q0RCRDMiIGQ9Ik00Mi4zMzcgMi4wNDJhMy41IDMuNSAwIDAgMC00LjY3NCAwTDIuNjk4IDMzLjM5NGEzLjUgMy41IDAgMCAwIDAgNS4yMTJsMzQuOTY1IDMxLjM1MmEzLjUgMy41IDAgMCAwIDQuNjc0IDBsMzQuOTY1LTMxLjM1MmEzLjUgMy41IDAgMCAwIDAtNS4yMTJMNDIuMzM3IDIuMDQyeiIvPjwvZz48dGV4dCBmb250LWZhbWlseT0iUGluZ0ZhbmdTQy1SZWd1bGFyLCBQaW5nRmFuZyBTQyIgZm9udC1zaXplPSIxMiIgZmlsbD0iIzAwMCIgZmlsbC1vcGFjaXR5PSIuNjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMgMSkiPjx0c3BhbiB4PSIxOCIgeT0iNDIiPkRlY2lzaW9uPC90c3Bhbj48L3RleHQ+PC9nPjwvc3ZnPg=="
-        />
-        <Item
-          type="node"
-          size="80*48"
-          shape="flow-capsule"
-          model={{
-            color: '#722ED1',
-            label: 'Model',
-          }}
-          src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODgiIGhlaWdodD0iNTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxyZWN0IGlkPSJiIiB4PSIwIiB5PSIwIiB3aWR0aD0iODAiIGhlaWdodD0iNDgiIHJ4PSIyNCIvPjxmaWx0ZXIgeD0iLTguOCUiIHk9Ii0xMC40JSIgd2lkdGg9IjExNy41JSIgaGVpZ2h0PSIxMjkuMiUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9ImEiPjxmZU9mZnNldCBkeT0iMiIgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSIvPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSIvPjxmZUNvbXBvc2l0ZSBpbj0ic2hhZG93Qmx1ck91dGVyMSIgaW4yPSJTb3VyY2VBbHBoYSIgb3BlcmF0b3I9Im91dCIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjA0IDAiIGluPSJzaGFkb3dCbHVyT3V0ZXIxIi8+PC9maWx0ZXI+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNCAyKSI+PHVzZSBmaWxsPSIjMDAwIiBmaWx0ZXI9InVybCgjYSkiIHhsaW5rOmhyZWY9IiNiIi8+PHVzZSBmaWxsLW9wYWNpdHk9Ii45MiIgZmlsbD0iI0Y5RjBGRiIgeGxpbms6aHJlZj0iI2IiLz48cmVjdCBzdHJva2U9IiNCMzdGRUIiIHg9Ii41IiB5PSIuNSIgd2lkdGg9Ijc5IiBoZWlnaHQ9IjQ3IiByeD0iMjMuNSIvPjwvZz48dGV4dCBmb250LWZhbWlseT0iUGluZ0ZhbmdTQy1SZWd1bGFyLCBQaW5nRmFuZyBTQyIgZm9udC1zaXplPSIxMiIgZmlsbD0iIzAwMCIgZmlsbC1vcGFjaXR5PSIuNjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQgMikiPjx0c3BhbiB4PSIyNCIgeT0iMjkiPk1vZGVsPC90c3Bhbj48L3RleHQ+PC9nPjwvc3ZnPg=="
-        />
-      </Card>
-    </ItemPanel>
-  );
-};
+const FlowItemPanel = () => (
+  <ItemPanel className={styles.itemPanel}>
+    <Card bordered={false}>
+      <Item
+        type="node"
+        size="72*72"
+        shape="flow-circle"
+        model={{
+          color: '#FA8C16',
+          label: 'Start',
+        }}
+        src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAiIGhlaWdodD0iODAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxjaXJjbGUgaWQ9ImIiIGN4PSIzNiIgY3k9IjM2IiByPSIzNiIvPjxmaWx0ZXIgeD0iLTkuNyUiIHk9Ii02LjklIiB3aWR0aD0iMTE5LjQlIiBoZWlnaHQ9IjExOS40JSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiBpZD0iYSI+PGZlT2Zmc2V0IGR5PSIyIiBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIi8+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMiIgaW49InNoYWRvd09mZnNldE91dGVyMSIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29tcG9zaXRlIGluPSJzaGFkb3dCbHVyT3V0ZXIxIiBpbjI9IlNvdXJjZUFscGhhIiBvcGVyYXRvcj0ib3V0IiByZXN1bHQ9InNoYWRvd0JsdXJPdXRlcjEiLz48ZmVDb2xvck1hdHJpeCB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAuMDQgMCIgaW49InNoYWRvd0JsdXJPdXRlcjEiLz48L2ZpbHRlcj48L2RlZnM+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0IDIpIj48dXNlIGZpbGw9IiMwMDAiIGZpbHRlcj0idXJsKCNhKSIgeGxpbms6aHJlZj0iI2IiLz48dXNlIGZpbGwtb3BhY2l0eT0iLjkyIiBmaWxsPSIjRkZGMkU4IiB4bGluazpocmVmPSIjYiIvPjxjaXJjbGUgc3Ryb2tlPSIjRkZDMDY5IiBjeD0iMzYiIGN5PSIzNiIgcj0iMzUuNSIvPjwvZz48dGV4dCBmb250LWZhbWlseT0iUGluZ0ZhbmdTQy1SZWd1bGFyLCBQaW5nRmFuZyBTQyIgZm9udC1zaXplPSIxMiIgZmlsbD0iIzAwMCIgZmlsbC1vcGFjaXR5PSIuNjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQgMikiPjx0c3BhbiB4PSIyMyIgeT0iNDEiPlN0YXJ0PC90c3Bhbj48L3RleHQ+PC9nPjwvc3ZnPg=="
+      />
+      <Item
+        type="node"
+        size="80*48"
+        shape="flow-rect"
+        model={{
+          color: '#1890FF',
+          label: 'Normal',
+        }}
+        src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODgiIGhlaWdodD0iNTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxyZWN0IGlkPSJiIiB4PSIwIiB5PSIwIiB3aWR0aD0iODAiIGhlaWdodD0iNDgiIHJ4PSI0Ii8+PGZpbHRlciB4PSItOC44JSIgeT0iLTEwLjQlIiB3aWR0aD0iMTE3LjUlIiBoZWlnaHQ9IjEyOS4yJSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiBpZD0iYSI+PGZlT2Zmc2V0IGR5PSIyIiBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIi8+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMiIgaW49InNoYWRvd09mZnNldE91dGVyMSIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29tcG9zaXRlIGluPSJzaGFkb3dCbHVyT3V0ZXIxIiBpbjI9IlNvdXJjZUFscGhhIiBvcGVyYXRvcj0ib3V0IiByZXN1bHQ9InNoYWRvd0JsdXJPdXRlcjEiLz48ZmVDb2xvck1hdHJpeCB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAuMDQgMCIgaW49InNoYWRvd0JsdXJPdXRlcjEiLz48L2ZpbHRlcj48L2RlZnM+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0IDIpIj48dXNlIGZpbGw9IiMwMDAiIGZpbHRlcj0idXJsKCNhKSIgeGxpbms6aHJlZj0iI2IiLz48dXNlIGZpbGwtb3BhY2l0eT0iLjkyIiBmaWxsPSIjRTZGN0ZGIiB4bGluazpocmVmPSIjYiIvPjxyZWN0IHN0cm9rZT0iIzE4OTBGRiIgeD0iLjUiIHk9Ii41IiB3aWR0aD0iNzkiIGhlaWdodD0iNDciIHJ4PSI0Ii8+PC9nPjx0ZXh0IGZvbnQtZmFtaWx5PSJQaW5nRmFuZ1NDLVJlZ3VsYXIsIFBpbmdGYW5nIFNDIiBmb250LXNpemU9IjEyIiBmaWxsPSIjMDAwIiBmaWxsLW9wYWNpdHk9Ii42NSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNCAyKSI+PHRzcGFuIHg9IjIxIiB5PSIyOSI+Tm9ybWFsPC90c3Bhbj48L3RleHQ+PC9nPjwvc3ZnPg=="
+      />
+      <Item
+        type="node"
+        size="80*72"
+        shape="flow-rhombus"
+        model={{
+          color: '#13C2C2',
+          label: 'Decision',
+        }}
+        src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODYiIGhlaWdodD0iNzgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxwYXRoIGQ9Ik00Mi42NyAxLjY3bDM0Ljk2NSAzMS4zNTJhNCA0IDAgMCAxIDAgNS45NTZMNDIuNjcgNzAuMzNhNCA0IDAgMCAxLTUuMzQgMEwyLjM2NSAzOC45NzhhNCA0IDAgMCAxIDAtNS45NTZMMzcuMzMgMS42N2E0IDQgMCAwIDEgNS4zNCAweiIgaWQ9ImIiLz48ZmlsdGVyIHg9Ii04LjglIiB5PSItNi45JSIgd2lkdGg9IjExNy41JSIgaGVpZ2h0PSIxMTkuNCUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9ImEiPjxmZU9mZnNldCBkeT0iMiIgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSIvPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSIvPjxmZUNvbXBvc2l0ZSBpbj0ic2hhZG93Qmx1ck91dGVyMSIgaW4yPSJTb3VyY2VBbHBoYSIgb3BlcmF0b3I9Im91dCIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjA0IDAiIGluPSJzaGFkb3dCbHVyT3V0ZXIxIi8+PC9maWx0ZXI+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMyAxKSI+PHVzZSBmaWxsPSIjMDAwIiBmaWx0ZXI9InVybCgjYSkiIHhsaW5rOmhyZWY9IiNiIi8+PHVzZSBmaWxsLW9wYWNpdHk9Ii45MiIgZmlsbD0iI0U2RkZGQiIgeGxpbms6aHJlZj0iI2IiLz48cGF0aCBzdHJva2U9IiM1Q0RCRDMiIGQ9Ik00Mi4zMzcgMi4wNDJhMy41IDMuNSAwIDAgMC00LjY3NCAwTDIuNjk4IDMzLjM5NGEzLjUgMy41IDAgMCAwIDAgNS4yMTJsMzQuOTY1IDMxLjM1MmEzLjUgMy41IDAgMCAwIDQuNjc0IDBsMzQuOTY1LTMxLjM1MmEzLjUgMy41IDAgMCAwIDAtNS4yMTJMNDIuMzM3IDIuMDQyeiIvPjwvZz48dGV4dCBmb250LWZhbWlseT0iUGluZ0ZhbmdTQy1SZWd1bGFyLCBQaW5nRmFuZyBTQyIgZm9udC1zaXplPSIxMiIgZmlsbD0iIzAwMCIgZmlsbC1vcGFjaXR5PSIuNjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMgMSkiPjx0c3BhbiB4PSIxOCIgeT0iNDIiPkRlY2lzaW9uPC90c3Bhbj48L3RleHQ+PC9nPjwvc3ZnPg=="
+      />
+      <Item
+        type="node"
+        size="80*48"
+        shape="flow-capsule"
+        model={{
+          color: '#722ED1',
+          label: 'Model',
+        }}
+        src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODgiIGhlaWdodD0iNTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxyZWN0IGlkPSJiIiB4PSIwIiB5PSIwIiB3aWR0aD0iODAiIGhlaWdodD0iNDgiIHJ4PSIyNCIvPjxmaWx0ZXIgeD0iLTguOCUiIHk9Ii0xMC40JSIgd2lkdGg9IjExNy41JSIgaGVpZ2h0PSIxMjkuMiUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9ImEiPjxmZU9mZnNldCBkeT0iMiIgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSIvPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSIvPjxmZUNvbXBvc2l0ZSBpbj0ic2hhZG93Qmx1ck91dGVyMSIgaW4yPSJTb3VyY2VBbHBoYSIgb3BlcmF0b3I9Im91dCIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjA0IDAiIGluPSJzaGFkb3dCbHVyT3V0ZXIxIi8+PC9maWx0ZXI+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNCAyKSI+PHVzZSBmaWxsPSIjMDAwIiBmaWx0ZXI9InVybCgjYSkiIHhsaW5rOmhyZWY9IiNiIi8+PHVzZSBmaWxsLW9wYWNpdHk9Ii45MiIgZmlsbD0iI0Y5RjBGRiIgeGxpbms6aHJlZj0iI2IiLz48cmVjdCBzdHJva2U9IiNCMzdGRUIiIHg9Ii41IiB5PSIuNSIgd2lkdGg9Ijc5IiBoZWlnaHQ9IjQ3IiByeD0iMjMuNSIvPjwvZz48dGV4dCBmb250LWZhbWlseT0iUGluZ0ZhbmdTQy1SZWd1bGFyLCBQaW5nRmFuZyBTQyIgZm9udC1zaXplPSIxMiIgZmlsbD0iIzAwMCIgZmlsbC1vcGFjaXR5PSIuNjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQgMikiPjx0c3BhbiB4PSIyNCIgeT0iMjkiPk1vZGVsPC90c3Bhbj48L3RleHQ+PC9nPjwvc3ZnPg=="
+      />
+    </Card>
+  </ItemPanel>
+);
 
 export default FlowItemPanel;
diff --git a/EditorKoni/src/components/EditorItemPanel/KoniItemPanel.tsx b/EditorKoni/src/components/EditorItemPanel/KoniItemPanel.tsx
index 9df51f98..ad446f80 100644
--- a/EditorKoni/src/components/EditorItemPanel/KoniItemPanel.tsx
+++ b/EditorKoni/src/components/EditorItemPanel/KoniItemPanel.tsx
@@ -1,54 +1,53 @@
-import React from 'react';
+import { Item, ItemPanel } from 'gg-editor';
+
 import { Card } from 'antd';
-import { ItemPanel, Item } from 'gg-editor';
+import React from 'react';
 import styles from './index.less';
 
-const KoniItemPanel = () => {
-  return (
-    <ItemPanel className={styles.itemPanel}>
-      <Card bordered={false}>
-        <Item
-          type="node"
-          size="40"
-          shape="koni-custom-node"
-          model={{
-            color: '#69C0FF',
-            label: 'Bank',
-            labelOffsetY: 28,
-            icon:
-              'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEyLjM1IDExLjUxNGwuMDEtLjAxNEE2Ljk2NiA2Ljk2NiAwIDAgMCAxNCA3YTYuOTczIDYuOTczIDAgMCAwLTEuNjM3LTQuNWwtLjAxMS0uMDEzLS4wNS0uMDU3LS4wMi0uMDIyLS4wNjMtLjA3NC0uMDAyLS4wMDEtLjA3Mi0uMDgtLjAwMS0uMDAxYy0uMDUtLjA1NC0uMS0uMTA3LS4xNTItLjE1OGwtLjAwMS0uMDAyLS4wNzUtLjA3NS0uMDA1LS4wMDQtLjA3LS4wNjgtLjAyNS0uMDIzLS4wNDctLjA0NC0uMDE2LS4wMTZBNi45NjYgNi45NjYgMCAwIDAgNyAwYTYuOTczIDYuOTczIDAgMCAwLTQuNzU1IDEuODYybC0uMDE1LjAxNi0uMDQ3LjA0NS0uMDI1LjAyNC0uMDcuMDY3LS4wMDUuMDA1LS4wNzUuMDc1LS4wMDIuMDAxLS4xNTEuMTU4LS4wMDIuMDAyYTMuMzA5IDMuMzA5IDAgMCAwLS4wNzIuMDhIMS43OGExLjQzNiAxLjQzNiAwIDAgMC0uMDY0LjA3NGwtLjAyLjAyMmMtLjAxNi4wMTktLjAzMi4wNC0uMDUuMDU4LS4wMDIuMDA1LS4wMDcuMDA4LS4wMS4wMTNBNi45NzMgNi45NzMgMCAwIDAgMCA3YzAgMS43MTQuNjE2IDMuMjgzIDEuNjM4IDQuNWwuMDEuMDE0LjA0OS4wNTguMDE5LjAyMi4wNjQuMDczLjAwMS4wMDNjLjAyNC4wMjcuMDQ3LjA1My4wNzIuMDc4bC4wMDIuMDAyLjE1LjE1OC4wMDEuMDAxLjA3NC4wNzQuMDA0LjAwNUE2Ljk4NyA2Ljk4NyAwIDAgMCA3IDE0YTYuOTczIDYuOTczIDAgMCAwIDQuOTEtMi4wMTJsLjAwNi0uMDA1Yy4wMjUtLjAyNS4wNS0uMDQ5LjA3My0uMDc0bC4wMDItLjAwMWE0LjczIDQuNzMgMCAwIDAgLjE1LS4xNThsLjAwMS0uMDAyYy4wMjQtLjAyNi4wNDktLjA1MS4wNzItLjA3OCAwLS4wMDEuMDAyLS4wMDEuMDAyLS4wMDMuMDIyLS4wMjMuMDQzLS4wNDguMDY0LS4wNzNsLjAxOC0uMDIyYy4wMi0uMDIuMDM2LS4wNC4wNTItLjA1OHptLjA2NC0yLjIyOGMtLjIxNi41MS0uNS45ODEtLjg0NyAxLjQxYTYuOTM5IDYuOTM5IDAgMCAwLTEuMjczLS44NzRjLjE4MS0uNzMzLjI5My0xLjUzOC4zMjMtMi4zODRoMi4yNDJhNS44NDIgNS44NDIgMCAwIDEtLjQ0NSAxLjg0OHptLjQ0NS0yLjcyM2gtMi4yNDJhMTEuNjgxIDExLjY4MSAwIDAgMC0uMzIzLTIuMzg1IDYuOTM5IDYuOTM5IDAgMCAwIDEuMjczLS44NzMgNS44NDIgNS44NDIgMCAwIDEgMS4yOTIgMy4yNTh6TTkuMjg2IDEuNTg1YTUuODQgNS44NCAwIDAgMSAxLjY4MSAxLjA4MWMtLjI4OS4yNDctLjYuNDY0LS45MjguNjUzLS4yNDUtLjcwMy0uNTYtMS4zMTQtLjkyNS0xLjgwMy4wNTguMDIyLjExNi4wNDYuMTcyLjA2OXpNNy44NyAxMi41MzNhMS43NjggMS43NjggMCAwIDEtLjQzMy4yNTZWOS44OTFhNi4wOCA2LjA4IDAgMCAxIDEuODA4LjQwOWMtLjEzLjM4NC0uMjguNzQtLjQ1MyAxLjA2LS4yNzIuNTA2LS41OS45MS0uOTIyIDEuMTczem0uOTIyLTkuODkyYy4xNzIuMzIxLjMyNC42NzYuNDUzIDEuMDU5YTYuMDggNi4wOCAwIDAgMS0xLjgwNy40MVYxLjIxMWMuMTQzLjA1OC4yODkuMTQzLjQzMi4yNTcuMzMyLjI2LjY1LjY2NS45MjIgMS4xNzJ6TTcuNDM4IDkuMDE0VjcuNDM4aDIuMzA0Yy0uMDI1LjY5LS4xMSAxLjM2LS4yNTUgMS45OTZsLS4wMDQuMDJhNi45NTMgNi45NTMgMCAwIDAtMi4wNDYtLjQ0em0wLTIuNDUxVjQuOTg2YTYuOTUzIDYuOTUzIDAgMCAwIDIuMDQ1LS40NGwuMDA1LjAyYy4xNDMuNjM2LjIzIDEuMzA0LjI1NCAxLjk5N0g3LjQzN3ptLS44NzUuODc1djEuNTc2YTYuOTUzIDYuOTUzIDAgMCAwLTIuMDQ2LjQ0bC0uMDA1LS4wMmExMC44MzUgMTAuODM1IDAgMCAxLS4yNTQtMS45OTZoMi4zMDR6bS0yLjMwNS0uODc1Yy4wMjUtLjY5MS4xMS0xLjM2MS4yNTUtMS45OTdsLjAwNC0uMDJhNi45NDMgNi45NDMgMCAwIDAgMi4wNDUuNDR2MS41NzdINC4yNTh6TTYuNTYyIDkuODl2Mi44OTZhMS43NDggMS43NDggMCAwIDEtLjQzMi0uMjU2Yy0uMzMyLS4yNi0uNjUyLS42NjctLjkyNC0xLjE3M2E3LjA2IDcuMDYgMCAwIDEtLjQ1My0xLjA2IDYuMDk4IDYuMDk4IDAgMCAxIDEuODEtLjQwN3ptMC01Ljc4MkE2LjA4IDYuMDggMCAwIDEgNC43NTUgMy43Yy4xMy0uMzg0LjI4LS43NC40NTMtMS4wNi4yNzItLjUwNi41OS0uOTEyLjkyMy0xLjE3M2ExLjggMS44IDAgMCAxIC40MzMtLjI1NnYyLjg5OGgtLjAwMnpNNC43MTUgMS41ODZjLjA1OC0uMDI0LjExNC0uMDQ3LjE3Mi0uMDY5LS4zNjYuNDktLjY4IDEuMS0uOTI1IDEuODAzYTYuMDU3IDYuMDU3IDAgMCAxLS45MjgtLjY1MyA1Ljg0IDUuODQgMCAwIDEgMS42ODEtMS4wODF6TTEuNTg2IDQuNzE0Yy4yMTYtLjUxLjUtLjk4MS44NDctMS40MS4zODkuMzM3LjgxNS42MyAxLjI3My44NzRhMTEuNjgxIDExLjY4MSAwIDAgMC0uMzIzIDIuMzg1SDEuMTRhNS44IDUuOCAwIDAgMSAuNDQ1LTEuODQ5ek0xLjE0IDcuNDM3aDIuMjQyYy4wMy44NDcuMTQyIDEuNjUyLjMyMyAyLjM4NWE2LjkzOSA2LjkzOSAwIDAgMC0xLjI3My44NzNBNS44NDIgNS44NDIgMCAwIDEgMS4xNCA3LjQzN3ptMy41NzMgNC45NzdhNS44NCA1Ljg0IDAgMCAxLTEuNjgxLTEuMDgxYy4yODktLjI0Ny42LS40NjQuOTI4LS42NTMuMjQ1LjcwMy41NiAxLjMxNC45MjUgMS44MDNhNS42MjQgNS42MjQgMCAwIDEtLjE3Mi0uMDY5em00LjU3MiAwYTYuMTY4IDYuMTY4IDAgMCAxLS4xNzIuMDY5Yy4zNjYtLjQ5LjY4LTEuMS45MjUtMS44MDMuMzI4LjE4Ny42NC40MDYuOTI4LjY1M2E1Ljg0IDUuODQgMCAwIDEtMS42ODEgMS4wODF6IiBmaWxsPSIjRkZGIi8+PC9zdmc+',
-          }}
-          src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxjaXJjbGUgaWQ9ImIiIGN4PSIyMCIgY3k9IjIwIiByPSIyMCIvPjxmaWx0ZXIgeD0iLTE3LjUlIiB5PSItMTIuNSUiIHdpZHRoPSIxMzUlIiBoZWlnaHQ9IjEzNSUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9ImEiPjxmZU9mZnNldCBkeT0iMiIgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSIvPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSIvPjxmZUNvbXBvc2l0ZSBpbj0ic2hhZG93Qmx1ck91dGVyMSIgaW4yPSJTb3VyY2VBbHBoYSIgb3BlcmF0b3I9Im91dCIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjA0IDAiIGluPSJzaGFkb3dCbHVyT3V0ZXIxIi8+PC9maWx0ZXI+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNCAyKSI+PHVzZSBmaWxsPSIjMDAwIiBmaWx0ZXI9InVybCgjYSkiIHhsaW5rOmhyZWY9IiNiIi8+PGNpcmNsZSBzdHJva2U9IiM2OUMwRkYiIHN0cm9rZS1saW5lam9pbj0ic3F1YXJlIiBmaWxsLW9wYWNpdHk9Ii45MiIgZmlsbD0iIzY5QzBGRiIgY3g9IjIwIiBjeT0iMjAiIHI9IjE5LjUiLz48L2c+PHBhdGggZD0iTTI5LjM1IDI2LjUxNGwuMDEtLjAxNEE2Ljk2NiA2Ljk2NiAwIDAgMCAzMSAyMmE2Ljk3MyA2Ljk3MyAwIDAgMC0xLjYzNy00LjVsLS4wMTEtLjAxMy0uMDUtLjA1Ny0uMDItLjAyMi0uMDYzLS4wNzQtLjAwMi0uMDAxLS4wNzItLjA4LS4wMDEtLjAwMWMtLjA1LS4wNTQtLjEtLjEwNy0uMTUyLS4xNThsLS4wMDEtLjAwMi0uMDc1LS4wNzUtLjAwNS0uMDA0Yy0uMDIzLS4wMjQtLjA0Ny0uMDQ2LS4wNy0uMDY4bC0uMDI1LS4wMjMtLjA0Ny0uMDQ0LS4wMTYtLjAxNUE2Ljk2NiA2Ljk2NiAwIDAgMCAyNCAxNWE2Ljk3MyA2Ljk3MyAwIDAgMC00Ljc1NSAxLjg2M2wtLjAxNS4wMTUtLjA0Ny4wNDUtLjAyNS4wMjQtLjA3LjA2Ny0uMDA1LjAwNS0uMDc1LjA3NS0uMDAyLjAwMS0uMTUxLjE1OC0uMDAyLjAwMmEzLjMwOSAzLjMwOSAwIDAgMC0uMDcyLjA4aC0uMDAxYTEuNDM2IDEuNDM2IDAgMCAwLS4wNjQuMDc0bC0uMDIuMDIyYy0uMDE2LjAxOS0uMDMyLjA0LS4wNS4wNTgtLjAwMi4wMDUtLjAwNy4wMDgtLjAxLjAxM0E2Ljk3MyA2Ljk3MyAwIDAgMCAxNyAyMmMwIDEuNzE0LjYxNiAzLjI4MyAxLjYzOCA0LjVsLjAxLjAxNC4wNDkuMDU4LjAxOS4wMjIuMDY0LjA3My4wMDEuMDAzYy4wMjQuMDI3LjA0Ny4wNTMuMDcyLjA3OGwuMDAyLjAwMi4xNS4xNTguMDAxLjAwMS4wNzQuMDc0LjAwNC4wMDRBNi45ODcgNi45ODcgMCAwIDAgMjQgMjlhNi45NzMgNi45NzMgMCAwIDAgNC45MS0yLjAxMmwuMDA2LS4wMDRjLjAyNS0uMDI1LjA1LS4wNDkuMDczLS4wNzRsLjAwMi0uMDAxYTQuNzMgNC43MyAwIDAgMCAuMTUtLjE1OGwuMDAxLS4wMDJjLjAyNC0uMDI2LjA0OS0uMDUxLjA3Mi0uMDc4IDAtLjAwMS4wMDItLjAwMS4wMDItLjAwM2wuMDY0LS4wNzMuMDE4LS4wMjJjLjAyLS4wMi4wMzYtLjA0LjA1Mi0uMDU4em0uMDY0LTIuMjI4Yy0uMjE2LjUxLS41Ljk4MS0uODQ3IDEuNDFhNi45MzkgNi45MzkgMCAwIDAtMS4yNzMtLjg3NGMuMTgxLS43MzMuMjkzLTEuNTM4LjMyMy0yLjM4NGgyLjI0MmE1Ljg0MiA1Ljg0MiAwIDAgMS0uNDQ1IDEuODQ4em0uNDQ1LTIuNzIzaC0yLjI0MmExMS42ODEgMTEuNjgxIDAgMCAwLS4zMjMtMi4zODUgNi45MzkgNi45MzkgMCAwIDAgMS4yNzMtLjg3MyA1Ljg0MiA1Ljg0MiAwIDAgMSAxLjI5MiAzLjI1OHptLTMuNTczLTQuOTc3YTUuODQgNS44NCAwIDAgMSAxLjY4MSAxLjA4MWMtLjI4OS4yNDctLjYuNDY0LS45MjguNjUzLS4yNDUtLjcwMy0uNTYtMS4zMTQtLjkyNS0xLjgwMy4wNTguMDIyLjExNi4wNDYuMTcyLjA2OXpNMjQuODcgMjcuNTMzYTEuNzY4IDEuNzY4IDAgMCAxLS40MzMuMjU2di0yLjg5OGE2LjA4IDYuMDggMCAwIDEgMS44MDguNDA5Yy0uMTMuMzg0LS4yOC43NC0uNDUzIDEuMDYtLjI3Mi41MDYtLjU5LjkxLS45MjIgMS4xNzN6bS45MjItOS44OTJjLjE3Mi4zMjIuMzI0LjY3Ni40NTMgMS4wNTlhNi4wOCA2LjA4IDAgMCAxLTEuODA4LjQxdi0yLjg5N2MuMTQ0LjA1Ny4yOS4xNDIuNDMzLjI1Ni4zMzIuMjYuNjUuNjY1LjkyMiAxLjE3MnptLTEuMzU1IDYuMzczdi0xLjU3NmgyLjMwNWMtLjAyNS42OS0uMTEgMS4zNi0uMjU1IDEuOTk2bC0uMDA0LjAyYTYuOTUzIDYuOTUzIDAgMCAwLTIuMDQ1LS40NHptMC0yLjQ1MXYtMS41NzdhNi45NTMgNi45NTMgMCAwIDAgMi4wNDYtLjQ0bC4wMDUuMDJjLjE0My42MzYuMjMgMS4zMDQuMjU0IDEuOTk3aC0yLjMwNHptLS44NzUuODc1djEuNTc2YTYuOTUzIDYuOTUzIDAgMCAwLTIuMDQ1LjQ0bC0uMDA1LS4wMmExMC44MzUgMTAuODM1IDAgMCAxLS4yNTQtMS45OTZoMi4zMDV6bS0yLjMwNC0uODc1Yy4wMjUtLjY5MS4xMS0xLjM2MS4yNTUtMS45OTdsLjAwNC0uMDJhNi45NDMgNi45NDMgMCAwIDAgMi4wNDUuNDR2MS41NzdoLTIuMzA0em0yLjMwNSAzLjMyOHYyLjg5N2ExLjc0OCAxLjc0OCAwIDAgMS0uNDMzLS4yNTdjLS4zMzItLjI2LS42NTItLjY2Ny0uOTI0LTEuMTczYTcuMDYgNy4wNiAwIDAgMS0uNDUzLTEuMDYgNi4wOTggNi4wOTggMCAwIDEgMS44MS0uNDA3em0wLTUuNzgyYTYuMDggNi4wOCAwIDAgMS0xLjgwOC0uNDA5Yy4xMy0uMzg0LjI4LS43NC40NTMtMS4wNi4yNzItLjUwNi41OS0uOTEyLjkyMy0xLjE3M2ExLjggMS44IDAgMCAxIC40MzMtLjI1NnYyLjg5OGgtLjAwMnptLTEuODQ5LTIuNTIzYy4wNTgtLjAyMy4xMTQtLjA0Ny4xNzItLjA2OS0uMzY2LjQ5LS42OCAxLjEtLjkyNSAxLjgwM2E2LjA1NyA2LjA1NyAwIDAgMS0uOTI4LS42NTMgNS44NCA1Ljg0IDAgMCAxIDEuNjgxLTEuMDgxem0tMy4xMjggMy4xMjhjLjIxNi0uNTEuNS0uOTgxLjg0Ny0xLjQxLjM4OS4zMzcuODE1LjYzIDEuMjczLjg3NGExMS42ODEgMTEuNjgxIDAgMCAwLS4zMjMgMi4zODVIMTguMTRjLjA0Ny0uNjQuMTk3LTEuMjYuNDQ1LTEuODQ5em0tLjQ0NSAyLjcyNGgyLjI0MmMuMDMuODQ2LjE0MiAxLjY1MS4zMjMgMi4zODRhNi45MzkgNi45MzkgMCAwIDAtMS4yNzMuODczIDUuODQyIDUuODQyIDAgMCAxLTEuMjkyLTMuMjU4em0zLjU3MyA0Ljk3NmE1Ljg0IDUuODQgMCAwIDEtMS42ODEtMS4wODFjLjI4OS0uMjQ3LjYtLjQ2NC45MjgtLjY1My4yNDUuNzAzLjU2IDEuMzE0LjkyNSAxLjgwM2E1LjYyNCA1LjYyNCAwIDAgMS0uMTcyLS4wNjl6bTQuNTcyIDBhNi4xNjggNi4xNjggMCAwIDEtLjE3Mi4wNjljLjM2Ni0uNDkuNjgtMS4xLjkyNS0xLjgwMy4zMjguMTg3LjY0LjQwNi45MjguNjUzYTUuODQgNS44NCAwIDAgMS0xLjY4MSAxLjA4MXoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0ibm9uemVybyIvPjwvZz48L3N2Zz4="
-        />
-        <Item
-          type="node"
-          size="40"
-          shape="koni-custom-node"
-          model={{
-            color: '#5CDBD3',
-            label: 'Person',
-            labelOffsetY: 28,
-            icon:
-              'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEyLjM1IDExLjUxNGwuMDEtLjAxNEE2Ljk2NiA2Ljk2NiAwIDAgMCAxNCA3YTYuOTczIDYuOTczIDAgMCAwLTEuNjM3LTQuNWwtLjAxMS0uMDEzLS4wNS0uMDU3LS4wMi0uMDIyLS4wNjMtLjA3NC0uMDAyLS4wMDEtLjA3Mi0uMDgtLjAwMS0uMDAxYy0uMDUtLjA1NC0uMS0uMTA3LS4xNTItLjE1OGwtLjAwMS0uMDAyLS4wNzUtLjA3NS0uMDA1LS4wMDQtLjA3LS4wNjgtLjAyNS0uMDIzLS4wNDctLjA0NC0uMDE2LS4wMTZBNi45NjYgNi45NjYgMCAwIDAgNyAwYTYuOTczIDYuOTczIDAgMCAwLTQuNzU1IDEuODYybC0uMDE1LjAxNi0uMDQ3LjA0NS0uMDI1LjAyNC0uMDcuMDY3LS4wMDUuMDA1LS4wNzUuMDc1LS4wMDIuMDAxLS4xNTEuMTU4LS4wMDIuMDAyYTMuMzA5IDMuMzA5IDAgMCAwLS4wNzIuMDhIMS43OGExLjQzNiAxLjQzNiAwIDAgMC0uMDY0LjA3NGwtLjAyLjAyMmMtLjAxNi4wMTktLjAzMi4wNC0uMDUuMDU4LS4wMDIuMDA1LS4wMDcuMDA4LS4wMS4wMTNBNi45NzMgNi45NzMgMCAwIDAgMCA3YzAgMS43MTQuNjE2IDMuMjgzIDEuNjM4IDQuNWwuMDEuMDE0LjA0OS4wNTguMDE5LjAyMi4wNjQuMDczLjAwMS4wMDNjLjAyNC4wMjcuMDQ3LjA1My4wNzIuMDc4bC4wMDIuMDAyLjE1LjE1OC4wMDEuMDAxLjA3NC4wNzQuMDA0LjAwNUE2Ljk4NyA2Ljk4NyAwIDAgMCA3IDE0YTYuOTczIDYuOTczIDAgMCAwIDQuOTEtMi4wMTJsLjAwNi0uMDA1Yy4wMjUtLjAyNS4wNS0uMDQ5LjA3My0uMDc0bC4wMDItLjAwMWE0LjczIDQuNzMgMCAwIDAgLjE1LS4xNThsLjAwMS0uMDAyYy4wMjQtLjAyNi4wNDktLjA1MS4wNzItLjA3OCAwLS4wMDEuMDAyLS4wMDEuMDAyLS4wMDMuMDIyLS4wMjMuMDQzLS4wNDguMDY0LS4wNzNsLjAxOC0uMDIyYy4wMi0uMDIuMDM2LS4wNC4wNTItLjA1OHptLjA2NC0yLjIyOGMtLjIxNi41MS0uNS45ODEtLjg0NyAxLjQxYTYuOTM5IDYuOTM5IDAgMCAwLTEuMjczLS44NzRjLjE4MS0uNzMzLjI5My0xLjUzOC4zMjMtMi4zODRoMi4yNDJhNS44NDIgNS44NDIgMCAwIDEtLjQ0NSAxLjg0OHptLjQ0NS0yLjcyM2gtMi4yNDJhMTEuNjgxIDExLjY4MSAwIDAgMC0uMzIzLTIuMzg1IDYuOTM5IDYuOTM5IDAgMCAwIDEuMjczLS44NzMgNS44NDIgNS44NDIgMCAwIDEgMS4yOTIgMy4yNTh6TTkuMjg2IDEuNTg1YTUuODQgNS44NCAwIDAgMSAxLjY4MSAxLjA4MWMtLjI4OS4yNDctLjYuNDY0LS45MjguNjUzLS4yNDUtLjcwMy0uNTYtMS4zMTQtLjkyNS0xLjgwMy4wNTguMDIyLjExNi4wNDYuMTcyLjA2OXpNNy44NyAxMi41MzNhMS43NjggMS43NjggMCAwIDEtLjQzMy4yNTZWOS44OTFhNi4wOCA2LjA4IDAgMCAxIDEuODA4LjQwOWMtLjEzLjM4NC0uMjguNzQtLjQ1MyAxLjA2LS4yNzIuNTA2LS41OS45MS0uOTIyIDEuMTczem0uOTIyLTkuODkyYy4xNzIuMzIxLjMyNC42NzYuNDUzIDEuMDU5YTYuMDggNi4wOCAwIDAgMS0xLjgwNy40MVYxLjIxMWMuMTQzLjA1OC4yODkuMTQzLjQzMi4yNTcuMzMyLjI2LjY1LjY2NS45MjIgMS4xNzJ6TTcuNDM4IDkuMDE0VjcuNDM4aDIuMzA0Yy0uMDI1LjY5LS4xMSAxLjM2LS4yNTUgMS45OTZsLS4wMDQuMDJhNi45NTMgNi45NTMgMCAwIDAtMi4wNDYtLjQ0em0wLTIuNDUxVjQuOTg2YTYuOTUzIDYuOTUzIDAgMCAwIDIuMDQ1LS40NGwuMDA1LjAyYy4xNDMuNjM2LjIzIDEuMzA0LjI1NCAxLjk5N0g3LjQzN3ptLS44NzUuODc1djEuNTc2YTYuOTUzIDYuOTUzIDAgMCAwLTIuMDQ2LjQ0bC0uMDA1LS4wMmExMC44MzUgMTAuODM1IDAgMCAxLS4yNTQtMS45OTZoMi4zMDR6bS0yLjMwNS0uODc1Yy4wMjUtLjY5MS4xMS0xLjM2MS4yNTUtMS45OTdsLjAwNC0uMDJhNi45NDMgNi45NDMgMCAwIDAgMi4wNDUuNDR2MS41NzdINC4yNTh6TTYuNTYyIDkuODl2Mi44OTZhMS43NDggMS43NDggMCAwIDEtLjQzMi0uMjU2Yy0uMzMyLS4yNi0uNjUyLS42NjctLjkyNC0xLjE3M2E3LjA2IDcuMDYgMCAwIDEtLjQ1My0xLjA2IDYuMDk4IDYuMDk4IDAgMCAxIDEuODEtLjQwN3ptMC01Ljc4MkE2LjA4IDYuMDggMCAwIDEgNC43NTUgMy43Yy4xMy0uMzg0LjI4LS43NC40NTMtMS4wNi4yNzItLjUwNi41OS0uOTEyLjkyMy0xLjE3M2ExLjggMS44IDAgMCAxIC40MzMtLjI1NnYyLjg5OGgtLjAwMnpNNC43MTUgMS41ODZjLjA1OC0uMDI0LjExNC0uMDQ3LjE3Mi0uMDY5LS4zNjYuNDktLjY4IDEuMS0uOTI1IDEuODAzYTYuMDU3IDYuMDU3IDAgMCAxLS45MjgtLjY1MyA1Ljg0IDUuODQgMCAwIDEgMS42ODEtMS4wODF6TTEuNTg2IDQuNzE0Yy4yMTYtLjUxLjUtLjk4MS44NDctMS40MS4zODkuMzM3LjgxNS42MyAxLjI3My44NzRhMTEuNjgxIDExLjY4MSAwIDAgMC0uMzIzIDIuMzg1SDEuMTRhNS44IDUuOCAwIDAgMSAuNDQ1LTEuODQ5ek0xLjE0IDcuNDM3aDIuMjQyYy4wMy44NDcuMTQyIDEuNjUyLjMyMyAyLjM4NWE2LjkzOSA2LjkzOSAwIDAgMC0xLjI3My44NzNBNS44NDIgNS44NDIgMCAwIDEgMS4xNCA3LjQzN3ptMy41NzMgNC45NzdhNS44NCA1Ljg0IDAgMCAxLTEuNjgxLTEuMDgxYy4yODktLjI0Ny42LS40NjQuOTI4LS42NTMuMjQ1LjcwMy41NiAxLjMxNC45MjUgMS44MDNhNS42MjQgNS42MjQgMCAwIDEtLjE3Mi0uMDY5em00LjU3MiAwYTYuMTY4IDYuMTY4IDAgMCAxLS4xNzIuMDY5Yy4zNjYtLjQ5LjY4LTEuMS45MjUtMS44MDMuMzI4LjE4Ny42NC40MDYuOTI4LjY1M2E1Ljg0IDUuODQgMCAwIDEtMS42ODEgMS4wODF6IiBmaWxsPSIjRkZGIi8+PC9zdmc+',
-          }}
-          src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxjaXJjbGUgaWQ9ImIiIGN4PSIyMCIgY3k9IjIwIiByPSIyMCIvPjxmaWx0ZXIgeD0iLTE3LjUlIiB5PSItMTIuNSUiIHdpZHRoPSIxMzUlIiBoZWlnaHQ9IjEzNSUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9ImEiPjxmZU9mZnNldCBkeT0iMiIgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSIvPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSIvPjxmZUNvbXBvc2l0ZSBpbj0ic2hhZG93Qmx1ck91dGVyMSIgaW4yPSJTb3VyY2VBbHBoYSIgb3BlcmF0b3I9Im91dCIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjA0IDAiIGluPSJzaGFkb3dCbHVyT3V0ZXIxIi8+PC9maWx0ZXI+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNCAyKSI+PHVzZSBmaWxsPSIjMDAwIiBmaWx0ZXI9InVybCgjYSkiIHhsaW5rOmhyZWY9IiNiIi8+PGNpcmNsZSBzdHJva2U9IiM1Q0RCRDMiIHN0cm9rZS1saW5lam9pbj0ic3F1YXJlIiBmaWxsLW9wYWNpdHk9Ii45MiIgZmlsbD0iIzVDREJEMyIgY3g9IjIwIiBjeT0iMjAiIHI9IjE5LjUiLz48L2c+PHBhdGggZD0iTTI5LjM1IDI2LjUxNGwuMDEtLjAxNEE2Ljk2NiA2Ljk2NiAwIDAgMCAzMSAyMmE2Ljk3MyA2Ljk3MyAwIDAgMC0xLjYzNy00LjVsLS4wMTEtLjAxMy0uMDUtLjA1Ny0uMDItLjAyMi0uMDYzLS4wNzQtLjAwMi0uMDAxLS4wNzItLjA4LS4wMDEtLjAwMWMtLjA1LS4wNTQtLjEtLjEwNy0uMTUyLS4xNThsLS4wMDEtLjAwMi0uMDc1LS4wNzUtLjAwNS0uMDA0Yy0uMDIzLS4wMjQtLjA0Ny0uMDQ2LS4wNy0uMDY4bC0uMDI1LS4wMjMtLjA0Ny0uMDQ0LS4wMTYtLjAxNUE2Ljk2NiA2Ljk2NiAwIDAgMCAyNCAxNWE2Ljk3MyA2Ljk3MyAwIDAgMC00Ljc1NSAxLjg2M2wtLjAxNS4wMTUtLjA0Ny4wNDUtLjAyNS4wMjQtLjA3LjA2Ny0uMDA1LjAwNS0uMDc1LjA3NS0uMDAyLjAwMS0uMTUxLjE1OC0uMDAyLjAwMmEzLjMwOSAzLjMwOSAwIDAgMC0uMDcyLjA4aC0uMDAxYTEuNDM2IDEuNDM2IDAgMCAwLS4wNjQuMDc0bC0uMDIuMDIyYy0uMDE2LjAxOS0uMDMyLjA0LS4wNS4wNTgtLjAwMi4wMDUtLjAwNy4wMDgtLjAxLjAxM0E2Ljk3MyA2Ljk3MyAwIDAgMCAxNyAyMmMwIDEuNzE0LjYxNiAzLjI4MyAxLjYzOCA0LjVsLjAxLjAxNC4wNDkuMDU4LjAxOS4wMjIuMDY0LjA3My4wMDEuMDAzYy4wMjQuMDI3LjA0Ny4wNTMuMDcyLjA3OGwuMDAyLjAwMi4xNS4xNTguMDAxLjAwMS4wNzQuMDc0LjAwNC4wMDRBNi45ODcgNi45ODcgMCAwIDAgMjQgMjlhNi45NzMgNi45NzMgMCAwIDAgNC45MS0yLjAxMmwuMDA2LS4wMDRjLjAyNS0uMDI1LjA1LS4wNDkuMDczLS4wNzRsLjAwMi0uMDAxYTQuNzMgNC43MyAwIDAgMCAuMTUtLjE1OGwuMDAxLS4wMDJjLjAyNC0uMDI2LjA0OS0uMDUxLjA3Mi0uMDc4IDAtLjAwMS4wMDItLjAwMS4wMDItLjAwM2wuMDY0LS4wNzMuMDE4LS4wMjJjLjAyLS4wMi4wMzYtLjA0LjA1Mi0uMDU4em0uMDY0LTIuMjI4Yy0uMjE2LjUxLS41Ljk4MS0uODQ3IDEuNDFhNi45MzkgNi45MzkgMCAwIDAtMS4yNzMtLjg3NGMuMTgxLS43MzMuMjkzLTEuNTM4LjMyMy0yLjM4NGgyLjI0MmE1Ljg0MiA1Ljg0MiAwIDAgMS0uNDQ1IDEuODQ4em0uNDQ1LTIuNzIzaC0yLjI0MmExMS42ODEgMTEuNjgxIDAgMCAwLS4zMjMtMi4zODUgNi45MzkgNi45MzkgMCAwIDAgMS4yNzMtLjg3MyA1Ljg0MiA1Ljg0MiAwIDAgMSAxLjI5MiAzLjI1OHptLTMuNTczLTQuOTc3YTUuODQgNS44NCAwIDAgMSAxLjY4MSAxLjA4MWMtLjI4OS4yNDctLjYuNDY0LS45MjguNjUzLS4yNDUtLjcwMy0uNTYtMS4zMTQtLjkyNS0xLjgwMy4wNTguMDIyLjExNi4wNDYuMTcyLjA2OXpNMjQuODcgMjcuNTMzYTEuNzY4IDEuNzY4IDAgMCAxLS40MzMuMjU2di0yLjg5OGE2LjA4IDYuMDggMCAwIDEgMS44MDguNDA5Yy0uMTMuMzg0LS4yOC43NC0uNDUzIDEuMDYtLjI3Mi41MDYtLjU5LjkxLS45MjIgMS4xNzN6bS45MjItOS44OTJjLjE3Mi4zMjIuMzI0LjY3Ni40NTMgMS4wNTlhNi4wOCA2LjA4IDAgMCAxLTEuODA4LjQxdi0yLjg5N2MuMTQ0LjA1Ny4yOS4xNDIuNDMzLjI1Ni4zMzIuMjYuNjUuNjY1LjkyMiAxLjE3MnptLTEuMzU1IDYuMzczdi0xLjU3NmgyLjMwNWMtLjAyNS42OS0uMTEgMS4zNi0uMjU1IDEuOTk2bC0uMDA0LjAyYTYuOTUzIDYuOTUzIDAgMCAwLTIuMDQ1LS40NHptMC0yLjQ1MXYtMS41NzdhNi45NTMgNi45NTMgMCAwIDAgMi4wNDYtLjQ0bC4wMDUuMDJjLjE0My42MzYuMjMgMS4zMDQuMjU0IDEuOTk3aC0yLjMwNHptLS44NzUuODc1djEuNTc2YTYuOTUzIDYuOTUzIDAgMCAwLTIuMDQ1LjQ0bC0uMDA1LS4wMmExMC44MzUgMTAuODM1IDAgMCAxLS4yNTQtMS45OTZoMi4zMDV6bS0yLjMwNC0uODc1Yy4wMjUtLjY5MS4xMS0xLjM2MS4yNTUtMS45OTdsLjAwNC0uMDJhNi45NDMgNi45NDMgMCAwIDAgMi4wNDUuNDR2MS41NzdoLTIuMzA0em0yLjMwNSAzLjMyOHYyLjg5N2ExLjc0OCAxLjc0OCAwIDAgMS0uNDMzLS4yNTdjLS4zMzItLjI2LS42NTItLjY2Ny0uOTI0LTEuMTczYTcuMDYgNy4wNiAwIDAgMS0uNDUzLTEuMDYgNi4wOTggNi4wOTggMCAwIDEgMS44MS0uNDA3em0wLTUuNzgyYTYuMDggNi4wOCAwIDAgMS0xLjgwOC0uNDA5Yy4xMy0uMzg0LjI4LS43NC40NTMtMS4wNi4yNzItLjUwNi41OS0uOTEyLjkyMy0xLjE3M2ExLjggMS44IDAgMCAxIC40MzMtLjI1NnYyLjg5OGgtLjAwMnptLTEuODQ5LTIuNTIzYy4wNTgtLjAyMy4xMTQtLjA0Ny4xNzItLjA2OS0uMzY2LjQ5LS42OCAxLjEtLjkyNSAxLjgwM2E2LjA1NyA2LjA1NyAwIDAgMS0uOTI4LS42NTMgNS44NCA1Ljg0IDAgMCAxIDEuNjgxLTEuMDgxem0tMy4xMjggMy4xMjhjLjIxNi0uNTEuNS0uOTgxLjg0Ny0xLjQxLjM4OS4zMzcuODE1LjYzIDEuMjczLjg3NGExMS42ODEgMTEuNjgxIDAgMCAwLS4zMjMgMi4zODVIMTguMTRjLjA0Ny0uNjQuMTk3LTEuMjYuNDQ1LTEuODQ5em0tLjQ0NSAyLjcyNGgyLjI0MmMuMDMuODQ2LjE0MiAxLjY1MS4zMjMgMi4zODRhNi45MzkgNi45MzkgMCAwIDAtMS4yNzMuODczIDUuODQyIDUuODQyIDAgMCAxLTEuMjkyLTMuMjU4em0zLjU3MyA0Ljk3NmE1Ljg0IDUuODQgMCAwIDEtMS42ODEtMS4wODFjLjI4OS0uMjQ3LjYtLjQ2NC45MjgtLjY1My4yNDUuNzAzLjU2IDEuMzE0LjkyNSAxLjgwM2E1LjYyNCA1LjYyNCAwIDAgMS0uMTcyLS4wNjl6bTQuNTcyIDBhNi4xNjggNi4xNjggMCAwIDEtLjE3Mi4wNjljLjM2Ni0uNDkuNjgtMS4xLjkyNS0xLjgwMy4zMjguMTg3LjY0LjQwNi45MjguNjUzYTUuODQgNS44NCAwIDAgMS0xLjY4MSAxLjA4MXoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0ibm9uemVybyIvPjwvZz48L3N2Zz4="
-        />
-        <Item
-          type="node"
-          size="40"
-          shape="koni-custom-node"
-          model={{
-            color: '#B37FEB',
-            label: 'Country',
-            labelOffsetY: 28,
-            icon:
-              'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEyLjM1IDExLjUxNGwuMDEtLjAxNEE2Ljk2NiA2Ljk2NiAwIDAgMCAxNCA3YTYuOTczIDYuOTczIDAgMCAwLTEuNjM3LTQuNWwtLjAxMS0uMDEzLS4wNS0uMDU3LS4wMi0uMDIyLS4wNjMtLjA3NC0uMDAyLS4wMDEtLjA3Mi0uMDgtLjAwMS0uMDAxYy0uMDUtLjA1NC0uMS0uMTA3LS4xNTItLjE1OGwtLjAwMS0uMDAyLS4wNzUtLjA3NS0uMDA1LS4wMDQtLjA3LS4wNjgtLjAyNS0uMDIzLS4wNDctLjA0NC0uMDE2LS4wMTZBNi45NjYgNi45NjYgMCAwIDAgNyAwYTYuOTczIDYuOTczIDAgMCAwLTQuNzU1IDEuODYybC0uMDE1LjAxNi0uMDQ3LjA0NS0uMDI1LjAyNC0uMDcuMDY3LS4wMDUuMDA1LS4wNzUuMDc1LS4wMDIuMDAxLS4xNTEuMTU4LS4wMDIuMDAyYTMuMzA5IDMuMzA5IDAgMCAwLS4wNzIuMDhIMS43OGExLjQzNiAxLjQzNiAwIDAgMC0uMDY0LjA3NGwtLjAyLjAyMmMtLjAxNi4wMTktLjAzMi4wNC0uMDUuMDU4LS4wMDIuMDA1LS4wMDcuMDA4LS4wMS4wMTNBNi45NzMgNi45NzMgMCAwIDAgMCA3YzAgMS43MTQuNjE2IDMuMjgzIDEuNjM4IDQuNWwuMDEuMDE0LjA0OS4wNTguMDE5LjAyMi4wNjQuMDczLjAwMS4wMDNjLjAyNC4wMjcuMDQ3LjA1My4wNzIuMDc4bC4wMDIuMDAyLjE1LjE1OC4wMDEuMDAxLjA3NC4wNzQuMDA0LjAwNUE2Ljk4NyA2Ljk4NyAwIDAgMCA3IDE0YTYuOTczIDYuOTczIDAgMCAwIDQuOTEtMi4wMTJsLjAwNi0uMDA1Yy4wMjUtLjAyNS4wNS0uMDQ5LjA3My0uMDc0bC4wMDItLjAwMWE0LjczIDQuNzMgMCAwIDAgLjE1LS4xNThsLjAwMS0uMDAyYy4wMjQtLjAyNi4wNDktLjA1MS4wNzItLjA3OCAwLS4wMDEuMDAyLS4wMDEuMDAyLS4wMDMuMDIyLS4wMjMuMDQzLS4wNDguMDY0LS4wNzNsLjAxOC0uMDIyYy4wMi0uMDIuMDM2LS4wNC4wNTItLjA1OHptLjA2NC0yLjIyOGMtLjIxNi41MS0uNS45ODEtLjg0NyAxLjQxYTYuOTM5IDYuOTM5IDAgMCAwLTEuMjczLS44NzRjLjE4MS0uNzMzLjI5My0xLjUzOC4zMjMtMi4zODRoMi4yNDJhNS44NDIgNS44NDIgMCAwIDEtLjQ0NSAxLjg0OHptLjQ0NS0yLjcyM2gtMi4yNDJhMTEuNjgxIDExLjY4MSAwIDAgMC0uMzIzLTIuMzg1IDYuOTM5IDYuOTM5IDAgMCAwIDEuMjczLS44NzMgNS44NDIgNS44NDIgMCAwIDEgMS4yOTIgMy4yNTh6TTkuMjg2IDEuNTg1YTUuODQgNS44NCAwIDAgMSAxLjY4MSAxLjA4MWMtLjI4OS4yNDctLjYuNDY0LS45MjguNjUzLS4yNDUtLjcwMy0uNTYtMS4zMTQtLjkyNS0xLjgwMy4wNTguMDIyLjExNi4wNDYuMTcyLjA2OXpNNy44NyAxMi41MzNhMS43NjggMS43NjggMCAwIDEtLjQzMy4yNTZWOS44OTFhNi4wOCA2LjA4IDAgMCAxIDEuODA4LjQwOWMtLjEzLjM4NC0uMjguNzQtLjQ1MyAxLjA2LS4yNzIuNTA2LS41OS45MS0uOTIyIDEuMTczem0uOTIyLTkuODkyYy4xNzIuMzIxLjMyNC42NzYuNDUzIDEuMDU5YTYuMDggNi4wOCAwIDAgMS0xLjgwNy40MVYxLjIxMWMuMTQzLjA1OC4yODkuMTQzLjQzMi4yNTcuMzMyLjI2LjY1LjY2NS45MjIgMS4xNzJ6TTcuNDM4IDkuMDE0VjcuNDM4aDIuMzA0Yy0uMDI1LjY5LS4xMSAxLjM2LS4yNTUgMS45OTZsLS4wMDQuMDJhNi45NTMgNi45NTMgMCAwIDAtMi4wNDYtLjQ0em0wLTIuNDUxVjQuOTg2YTYuOTUzIDYuOTUzIDAgMCAwIDIuMDQ1LS40NGwuMDA1LjAyYy4xNDMuNjM2LjIzIDEuMzA0LjI1NCAxLjk5N0g3LjQzN3ptLS44NzUuODc1djEuNTc2YTYuOTUzIDYuOTUzIDAgMCAwLTIuMDQ2LjQ0bC0uMDA1LS4wMmExMC44MzUgMTAuODM1IDAgMCAxLS4yNTQtMS45OTZoMi4zMDR6bS0yLjMwNS0uODc1Yy4wMjUtLjY5MS4xMS0xLjM2MS4yNTUtMS45OTdsLjAwNC0uMDJhNi45NDMgNi45NDMgMCAwIDAgMi4wNDUuNDR2MS41NzdINC4yNTh6TTYuNTYyIDkuODl2Mi44OTZhMS43NDggMS43NDggMCAwIDEtLjQzMi0uMjU2Yy0uMzMyLS4yNi0uNjUyLS42NjctLjkyNC0xLjE3M2E3LjA2IDcuMDYgMCAwIDEtLjQ1My0xLjA2IDYuMDk4IDYuMDk4IDAgMCAxIDEuODEtLjQwN3ptMC01Ljc4MkE2LjA4IDYuMDggMCAwIDEgNC43NTUgMy43Yy4xMy0uMzg0LjI4LS43NC40NTMtMS4wNi4yNzItLjUwNi41OS0uOTEyLjkyMy0xLjE3M2ExLjggMS44IDAgMCAxIC40MzMtLjI1NnYyLjg5OGgtLjAwMnpNNC43MTUgMS41ODZjLjA1OC0uMDI0LjExNC0uMDQ3LjE3Mi0uMDY5LS4zNjYuNDktLjY4IDEuMS0uOTI1IDEuODAzYTYuMDU3IDYuMDU3IDAgMCAxLS45MjgtLjY1MyA1Ljg0IDUuODQgMCAwIDEgMS42ODEtMS4wODF6TTEuNTg2IDQuNzE0Yy4yMTYtLjUxLjUtLjk4MS44NDctMS40MS4zODkuMzM3LjgxNS42MyAxLjI3My44NzRhMTEuNjgxIDExLjY4MSAwIDAgMC0uMzIzIDIuMzg1SDEuMTRhNS44IDUuOCAwIDAgMSAuNDQ1LTEuODQ5ek0xLjE0IDcuNDM3aDIuMjQyYy4wMy44NDcuMTQyIDEuNjUyLjMyMyAyLjM4NWE2LjkzOSA2LjkzOSAwIDAgMC0xLjI3My44NzNBNS44NDIgNS44NDIgMCAwIDEgMS4xNCA3LjQzN3ptMy41NzMgNC45NzdhNS44NCA1Ljg0IDAgMCAxLTEuNjgxLTEuMDgxYy4yODktLjI0Ny42LS40NjQuOTI4LS42NTMuMjQ1LjcwMy41NiAxLjMxNC45MjUgMS44MDNhNS42MjQgNS42MjQgMCAwIDEtLjE3Mi0uMDY5em00LjU3MiAwYTYuMTY4IDYuMTY4IDAgMCAxLS4xNzIuMDY5Yy4zNjYtLjQ5LjY4LTEuMS45MjUtMS44MDMuMzI4LjE4Ny42NC40MDYuOTI4LjY1M2E1Ljg0IDUuODQgMCAwIDEtMS42ODEgMS4wODF6IiBmaWxsPSIjRkZGIi8+PC9zdmc+',
-          }}
-          src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxjaXJjbGUgaWQ9ImIiIGN4PSIyMCIgY3k9IjIwIiByPSIyMCIvPjxmaWx0ZXIgeD0iLTE3LjUlIiB5PSItMTIuNSUiIHdpZHRoPSIxMzUlIiBoZWlnaHQ9IjEzNSUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9ImEiPjxmZU9mZnNldCBkeT0iMiIgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSIvPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSIvPjxmZUNvbXBvc2l0ZSBpbj0ic2hhZG93Qmx1ck91dGVyMSIgaW4yPSJTb3VyY2VBbHBoYSIgb3BlcmF0b3I9Im91dCIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjA0IDAiIGluPSJzaGFkb3dCbHVyT3V0ZXIxIi8+PC9maWx0ZXI+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNCAyKSI+PHVzZSBmaWxsPSIjMDAwIiBmaWx0ZXI9InVybCgjYSkiIHhsaW5rOmhyZWY9IiNiIi8+PGNpcmNsZSBzdHJva2U9IiNCMzdGRUIiIHN0cm9rZS1saW5lam9pbj0ic3F1YXJlIiBmaWxsLW9wYWNpdHk9Ii45MiIgZmlsbD0iI0IzN0ZFQiIgY3g9IjIwIiBjeT0iMjAiIHI9IjE5LjUiLz48L2c+PHBhdGggZD0iTTI5LjM1IDI2LjUxNGwuMDEtLjAxNEE2Ljk2NiA2Ljk2NiAwIDAgMCAzMSAyMmE2Ljk3MyA2Ljk3MyAwIDAgMC0xLjYzNy00LjVsLS4wMTEtLjAxMy0uMDUtLjA1Ny0uMDItLjAyMi0uMDYzLS4wNzQtLjAwMi0uMDAxLS4wNzItLjA4LS4wMDEtLjAwMWMtLjA1LS4wNTQtLjEtLjEwNy0uMTUyLS4xNThsLS4wMDEtLjAwMi0uMDc1LS4wNzUtLjAwNS0uMDA0Yy0uMDIzLS4wMjQtLjA0Ny0uMDQ2LS4wNy0uMDY4bC0uMDI1LS4wMjMtLjA0Ny0uMDQ0LS4wMTYtLjAxNUE2Ljk2NiA2Ljk2NiAwIDAgMCAyNCAxNWE2Ljk3MyA2Ljk3MyAwIDAgMC00Ljc1NSAxLjg2M2wtLjAxNS4wMTUtLjA0Ny4wNDUtLjAyNS4wMjQtLjA3LjA2Ny0uMDA1LjAwNS0uMDc1LjA3NS0uMDAyLjAwMS0uMTUxLjE1OC0uMDAyLjAwMmEzLjMwOSAzLjMwOSAwIDAgMC0uMDcyLjA4aC0uMDAxYTEuNDM2IDEuNDM2IDAgMCAwLS4wNjQuMDc0bC0uMDIuMDIyYy0uMDE2LjAxOS0uMDMyLjA0LS4wNS4wNTgtLjAwMi4wMDUtLjAwNy4wMDgtLjAxLjAxM0E2Ljk3MyA2Ljk3MyAwIDAgMCAxNyAyMmMwIDEuNzE0LjYxNiAzLjI4MyAxLjYzOCA0LjVsLjAxLjAxNC4wNDkuMDU4LjAxOS4wMjIuMDY0LjA3My4wMDEuMDAzYy4wMjQuMDI3LjA0Ny4wNTMuMDcyLjA3OGwuMDAyLjAwMi4xNS4xNTguMDAxLjAwMS4wNzQuMDc0LjAwNC4wMDRBNi45ODcgNi45ODcgMCAwIDAgMjQgMjlhNi45NzMgNi45NzMgMCAwIDAgNC45MS0yLjAxMmwuMDA2LS4wMDRjLjAyNS0uMDI1LjA1LS4wNDkuMDczLS4wNzRsLjAwMi0uMDAxYTQuNzMgNC43MyAwIDAgMCAuMTUtLjE1OGwuMDAxLS4wMDJjLjAyNC0uMDI2LjA0OS0uMDUxLjA3Mi0uMDc4IDAtLjAwMS4wMDItLjAwMS4wMDItLjAwM2wuMDY0LS4wNzMuMDE4LS4wMjJjLjAyLS4wMi4wMzYtLjA0LjA1Mi0uMDU4em0uMDY0LTIuMjI4Yy0uMjE2LjUxLS41Ljk4MS0uODQ3IDEuNDFhNi45MzkgNi45MzkgMCAwIDAtMS4yNzMtLjg3NGMuMTgxLS43MzMuMjkzLTEuNTM4LjMyMy0yLjM4NGgyLjI0MmE1Ljg0MiA1Ljg0MiAwIDAgMS0uNDQ1IDEuODQ4em0uNDQ1LTIuNzIzaC0yLjI0MmExMS42ODEgMTEuNjgxIDAgMCAwLS4zMjMtMi4zODUgNi45MzkgNi45MzkgMCAwIDAgMS4yNzMtLjg3MyA1Ljg0MiA1Ljg0MiAwIDAgMSAxLjI5MiAzLjI1OHptLTMuNTczLTQuOTc3YTUuODQgNS44NCAwIDAgMSAxLjY4MSAxLjA4MWMtLjI4OS4yNDctLjYuNDY0LS45MjguNjUzLS4yNDUtLjcwMy0uNTYtMS4zMTQtLjkyNS0xLjgwMy4wNTguMDIyLjExNi4wNDYuMTcyLjA2OXpNMjQuODcgMjcuNTMzYTEuNzY4IDEuNzY4IDAgMCAxLS40MzMuMjU2di0yLjg5OGE2LjA4IDYuMDggMCAwIDEgMS44MDguNDA5Yy0uMTMuMzg0LS4yOC43NC0uNDUzIDEuMDYtLjI3Mi41MDYtLjU5LjkxLS45MjIgMS4xNzN6bS45MjItOS44OTJjLjE3Mi4zMjIuMzI0LjY3Ni40NTMgMS4wNTlhNi4wOCA2LjA4IDAgMCAxLTEuODA4LjQxdi0yLjg5N2MuMTQ0LjA1Ny4yOS4xNDIuNDMzLjI1Ni4zMzIuMjYuNjUuNjY1LjkyMiAxLjE3MnptLTEuMzU1IDYuMzczdi0xLjU3NmgyLjMwNWMtLjAyNS42OS0uMTEgMS4zNi0uMjU1IDEuOTk2bC0uMDA0LjAyYTYuOTUzIDYuOTUzIDAgMCAwLTIuMDQ1LS40NHptMC0yLjQ1MXYtMS41NzdhNi45NTMgNi45NTMgMCAwIDAgMi4wNDYtLjQ0bC4wMDUuMDJjLjE0My42MzYuMjMgMS4zMDQuMjU0IDEuOTk3aC0yLjMwNHptLS44NzUuODc1djEuNTc2YTYuOTUzIDYuOTUzIDAgMCAwLTIuMDQ1LjQ0bC0uMDA1LS4wMmExMC44MzUgMTAuODM1IDAgMCAxLS4yNTQtMS45OTZoMi4zMDV6bS0yLjMwNC0uODc1Yy4wMjUtLjY5MS4xMS0xLjM2MS4yNTUtMS45OTdsLjAwNC0uMDJhNi45NDMgNi45NDMgMCAwIDAgMi4wNDUuNDR2MS41NzdoLTIuMzA0em0yLjMwNSAzLjMyOHYyLjg5N2ExLjc0OCAxLjc0OCAwIDAgMS0uNDMzLS4yNTdjLS4zMzItLjI2LS42NTItLjY2Ny0uOTI0LTEuMTczYTcuMDYgNy4wNiAwIDAgMS0uNDUzLTEuMDYgNi4wOTggNi4wOTggMCAwIDEgMS44MS0uNDA3em0wLTUuNzgyYTYuMDggNi4wOCAwIDAgMS0xLjgwOC0uNDA5Yy4xMy0uMzg0LjI4LS43NC40NTMtMS4wNi4yNzItLjUwNi41OS0uOTEyLjkyMy0xLjE3M2ExLjggMS44IDAgMCAxIC40MzMtLjI1NnYyLjg5OGgtLjAwMnptLTEuODQ5LTIuNTIzYy4wNTgtLjAyMy4xMTQtLjA0Ny4xNzItLjA2OS0uMzY2LjQ5LS42OCAxLjEtLjkyNSAxLjgwM2E2LjA1NyA2LjA1NyAwIDAgMS0uOTI4LS42NTMgNS44NCA1Ljg0IDAgMCAxIDEuNjgxLTEuMDgxem0tMy4xMjggMy4xMjhjLjIxNi0uNTEuNS0uOTgxLjg0Ny0xLjQxLjM4OS4zMzcuODE1LjYzIDEuMjczLjg3NGExMS42ODEgMTEuNjgxIDAgMCAwLS4zMjMgMi4zODVIMTguMTRjLjA0Ny0uNjQuMTk3LTEuMjYuNDQ1LTEuODQ5em0tLjQ0NSAyLjcyNGgyLjI0MmMuMDMuODQ2LjE0MiAxLjY1MS4zMjMgMi4zODRhNi45MzkgNi45MzkgMCAwIDAtMS4yNzMuODczIDUuODQyIDUuODQyIDAgMCAxLTEuMjkyLTMuMjU4em0zLjU3MyA0Ljk3NmE1Ljg0IDUuODQgMCAwIDEtMS42ODEtMS4wODFjLjI4OS0uMjQ3LjYtLjQ2NC45MjgtLjY1My4yNDUuNzAzLjU2IDEuMzE0LjkyNSAxLjgwM2E1LjYyNCA1LjYyNCAwIDAgMS0uMTcyLS4wNjl6bTQuNTcyIDBhNi4xNjggNi4xNjggMCAwIDEtLjE3Mi4wNjljLjM2Ni0uNDkuNjgtMS4xLjkyNS0xLjgwMy4zMjguMTg3LjY0LjQwNi45MjguNjUzYTUuODQgNS44NCAwIDAgMS0xLjY4MSAxLjA4MXoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0ibm9uemVybyIvPjwvZz48L3N2Zz4="
-        />
-      </Card>
-    </ItemPanel>
-  );
-};
+const KoniItemPanel = () => (
+  <ItemPanel className={styles.itemPanel}>
+    <Card bordered={false}>
+      <Item
+        type="node"
+        size="40"
+        shape="koni-custom-node"
+        model={{
+          color: '#69C0FF',
+          label: 'Bank',
+          labelOffsetY: 28,
+          icon:
+            'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEyLjM1IDExLjUxNGwuMDEtLjAxNEE2Ljk2NiA2Ljk2NiAwIDAgMCAxNCA3YTYuOTczIDYuOTczIDAgMCAwLTEuNjM3LTQuNWwtLjAxMS0uMDEzLS4wNS0uMDU3LS4wMi0uMDIyLS4wNjMtLjA3NC0uMDAyLS4wMDEtLjA3Mi0uMDgtLjAwMS0uMDAxYy0uMDUtLjA1NC0uMS0uMTA3LS4xNTItLjE1OGwtLjAwMS0uMDAyLS4wNzUtLjA3NS0uMDA1LS4wMDQtLjA3LS4wNjgtLjAyNS0uMDIzLS4wNDctLjA0NC0uMDE2LS4wMTZBNi45NjYgNi45NjYgMCAwIDAgNyAwYTYuOTczIDYuOTczIDAgMCAwLTQuNzU1IDEuODYybC0uMDE1LjAxNi0uMDQ3LjA0NS0uMDI1LjAyNC0uMDcuMDY3LS4wMDUuMDA1LS4wNzUuMDc1LS4wMDIuMDAxLS4xNTEuMTU4LS4wMDIuMDAyYTMuMzA5IDMuMzA5IDAgMCAwLS4wNzIuMDhIMS43OGExLjQzNiAxLjQzNiAwIDAgMC0uMDY0LjA3NGwtLjAyLjAyMmMtLjAxNi4wMTktLjAzMi4wNC0uMDUuMDU4LS4wMDIuMDA1LS4wMDcuMDA4LS4wMS4wMTNBNi45NzMgNi45NzMgMCAwIDAgMCA3YzAgMS43MTQuNjE2IDMuMjgzIDEuNjM4IDQuNWwuMDEuMDE0LjA0OS4wNTguMDE5LjAyMi4wNjQuMDczLjAwMS4wMDNjLjAyNC4wMjcuMDQ3LjA1My4wNzIuMDc4bC4wMDIuMDAyLjE1LjE1OC4wMDEuMDAxLjA3NC4wNzQuMDA0LjAwNUE2Ljk4NyA2Ljk4NyAwIDAgMCA3IDE0YTYuOTczIDYuOTczIDAgMCAwIDQuOTEtMi4wMTJsLjAwNi0uMDA1Yy4wMjUtLjAyNS4wNS0uMDQ5LjA3My0uMDc0bC4wMDItLjAwMWE0LjczIDQuNzMgMCAwIDAgLjE1LS4xNThsLjAwMS0uMDAyYy4wMjQtLjAyNi4wNDktLjA1MS4wNzItLjA3OCAwLS4wMDEuMDAyLS4wMDEuMDAyLS4wMDMuMDIyLS4wMjMuMDQzLS4wNDguMDY0LS4wNzNsLjAxOC0uMDIyYy4wMi0uMDIuMDM2LS4wNC4wNTItLjA1OHptLjA2NC0yLjIyOGMtLjIxNi41MS0uNS45ODEtLjg0NyAxLjQxYTYuOTM5IDYuOTM5IDAgMCAwLTEuMjczLS44NzRjLjE4MS0uNzMzLjI5My0xLjUzOC4zMjMtMi4zODRoMi4yNDJhNS44NDIgNS44NDIgMCAwIDEtLjQ0NSAxLjg0OHptLjQ0NS0yLjcyM2gtMi4yNDJhMTEuNjgxIDExLjY4MSAwIDAgMC0uMzIzLTIuMzg1IDYuOTM5IDYuOTM5IDAgMCAwIDEuMjczLS44NzMgNS44NDIgNS44NDIgMCAwIDEgMS4yOTIgMy4yNTh6TTkuMjg2IDEuNTg1YTUuODQgNS44NCAwIDAgMSAxLjY4MSAxLjA4MWMtLjI4OS4yNDctLjYuNDY0LS45MjguNjUzLS4yNDUtLjcwMy0uNTYtMS4zMTQtLjkyNS0xLjgwMy4wNTguMDIyLjExNi4wNDYuMTcyLjA2OXpNNy44NyAxMi41MzNhMS43NjggMS43NjggMCAwIDEtLjQzMy4yNTZWOS44OTFhNi4wOCA2LjA4IDAgMCAxIDEuODA4LjQwOWMtLjEzLjM4NC0uMjguNzQtLjQ1MyAxLjA2LS4yNzIuNTA2LS41OS45MS0uOTIyIDEuMTczem0uOTIyLTkuODkyYy4xNzIuMzIxLjMyNC42NzYuNDUzIDEuMDU5YTYuMDggNi4wOCAwIDAgMS0xLjgwNy40MVYxLjIxMWMuMTQzLjA1OC4yODkuMTQzLjQzMi4yNTcuMzMyLjI2LjY1LjY2NS45MjIgMS4xNzJ6TTcuNDM4IDkuMDE0VjcuNDM4aDIuMzA0Yy0uMDI1LjY5LS4xMSAxLjM2LS4yNTUgMS45OTZsLS4wMDQuMDJhNi45NTMgNi45NTMgMCAwIDAtMi4wNDYtLjQ0em0wLTIuNDUxVjQuOTg2YTYuOTUzIDYuOTUzIDAgMCAwIDIuMDQ1LS40NGwuMDA1LjAyYy4xNDMuNjM2LjIzIDEuMzA0LjI1NCAxLjk5N0g3LjQzN3ptLS44NzUuODc1djEuNTc2YTYuOTUzIDYuOTUzIDAgMCAwLTIuMDQ2LjQ0bC0uMDA1LS4wMmExMC44MzUgMTAuODM1IDAgMCAxLS4yNTQtMS45OTZoMi4zMDR6bS0yLjMwNS0uODc1Yy4wMjUtLjY5MS4xMS0xLjM2MS4yNTUtMS45OTdsLjAwNC0uMDJhNi45NDMgNi45NDMgMCAwIDAgMi4wNDUuNDR2MS41NzdINC4yNTh6TTYuNTYyIDkuODl2Mi44OTZhMS43NDggMS43NDggMCAwIDEtLjQzMi0uMjU2Yy0uMzMyLS4yNi0uNjUyLS42NjctLjkyNC0xLjE3M2E3LjA2IDcuMDYgMCAwIDEtLjQ1My0xLjA2IDYuMDk4IDYuMDk4IDAgMCAxIDEuODEtLjQwN3ptMC01Ljc4MkE2LjA4IDYuMDggMCAwIDEgNC43NTUgMy43Yy4xMy0uMzg0LjI4LS43NC40NTMtMS4wNi4yNzItLjUwNi41OS0uOTEyLjkyMy0xLjE3M2ExLjggMS44IDAgMCAxIC40MzMtLjI1NnYyLjg5OGgtLjAwMnpNNC43MTUgMS41ODZjLjA1OC0uMDI0LjExNC0uMDQ3LjE3Mi0uMDY5LS4zNjYuNDktLjY4IDEuMS0uOTI1IDEuODAzYTYuMDU3IDYuMDU3IDAgMCAxLS45MjgtLjY1MyA1Ljg0IDUuODQgMCAwIDEgMS42ODEtMS4wODF6TTEuNTg2IDQuNzE0Yy4yMTYtLjUxLjUtLjk4MS44NDctMS40MS4zODkuMzM3LjgxNS42MyAxLjI3My44NzRhMTEuNjgxIDExLjY4MSAwIDAgMC0uMzIzIDIuMzg1SDEuMTRhNS44IDUuOCAwIDAgMSAuNDQ1LTEuODQ5ek0xLjE0IDcuNDM3aDIuMjQyYy4wMy44NDcuMTQyIDEuNjUyLjMyMyAyLjM4NWE2LjkzOSA2LjkzOSAwIDAgMC0xLjI3My44NzNBNS44NDIgNS44NDIgMCAwIDEgMS4xNCA3LjQzN3ptMy41NzMgNC45NzdhNS44NCA1Ljg0IDAgMCAxLTEuNjgxLTEuMDgxYy4yODktLjI0Ny42LS40NjQuOTI4LS42NTMuMjQ1LjcwMy41NiAxLjMxNC45MjUgMS44MDNhNS42MjQgNS42MjQgMCAwIDEtLjE3Mi0uMDY5em00LjU3MiAwYTYuMTY4IDYuMTY4IDAgMCAxLS4xNzIuMDY5Yy4zNjYtLjQ5LjY4LTEuMS45MjUtMS44MDMuMzI4LjE4Ny42NC40MDYuOTI4LjY1M2E1Ljg0IDUuODQgMCAwIDEtMS42ODEgMS4wODF6IiBmaWxsPSIjRkZGIi8+PC9zdmc+',
+        }}
+        src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxjaXJjbGUgaWQ9ImIiIGN4PSIyMCIgY3k9IjIwIiByPSIyMCIvPjxmaWx0ZXIgeD0iLTE3LjUlIiB5PSItMTIuNSUiIHdpZHRoPSIxMzUlIiBoZWlnaHQ9IjEzNSUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9ImEiPjxmZU9mZnNldCBkeT0iMiIgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSIvPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSIvPjxmZUNvbXBvc2l0ZSBpbj0ic2hhZG93Qmx1ck91dGVyMSIgaW4yPSJTb3VyY2VBbHBoYSIgb3BlcmF0b3I9Im91dCIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjA0IDAiIGluPSJzaGFkb3dCbHVyT3V0ZXIxIi8+PC9maWx0ZXI+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNCAyKSI+PHVzZSBmaWxsPSIjMDAwIiBmaWx0ZXI9InVybCgjYSkiIHhsaW5rOmhyZWY9IiNiIi8+PGNpcmNsZSBzdHJva2U9IiM2OUMwRkYiIHN0cm9rZS1saW5lam9pbj0ic3F1YXJlIiBmaWxsLW9wYWNpdHk9Ii45MiIgZmlsbD0iIzY5QzBGRiIgY3g9IjIwIiBjeT0iMjAiIHI9IjE5LjUiLz48L2c+PHBhdGggZD0iTTI5LjM1IDI2LjUxNGwuMDEtLjAxNEE2Ljk2NiA2Ljk2NiAwIDAgMCAzMSAyMmE2Ljk3MyA2Ljk3MyAwIDAgMC0xLjYzNy00LjVsLS4wMTEtLjAxMy0uMDUtLjA1Ny0uMDItLjAyMi0uMDYzLS4wNzQtLjAwMi0uMDAxLS4wNzItLjA4LS4wMDEtLjAwMWMtLjA1LS4wNTQtLjEtLjEwNy0uMTUyLS4xNThsLS4wMDEtLjAwMi0uMDc1LS4wNzUtLjAwNS0uMDA0Yy0uMDIzLS4wMjQtLjA0Ny0uMDQ2LS4wNy0uMDY4bC0uMDI1LS4wMjMtLjA0Ny0uMDQ0LS4wMTYtLjAxNUE2Ljk2NiA2Ljk2NiAwIDAgMCAyNCAxNWE2Ljk3MyA2Ljk3MyAwIDAgMC00Ljc1NSAxLjg2M2wtLjAxNS4wMTUtLjA0Ny4wNDUtLjAyNS4wMjQtLjA3LjA2Ny0uMDA1LjAwNS0uMDc1LjA3NS0uMDAyLjAwMS0uMTUxLjE1OC0uMDAyLjAwMmEzLjMwOSAzLjMwOSAwIDAgMC0uMDcyLjA4aC0uMDAxYTEuNDM2IDEuNDM2IDAgMCAwLS4wNjQuMDc0bC0uMDIuMDIyYy0uMDE2LjAxOS0uMDMyLjA0LS4wNS4wNTgtLjAwMi4wMDUtLjAwNy4wMDgtLjAxLjAxM0E2Ljk3MyA2Ljk3MyAwIDAgMCAxNyAyMmMwIDEuNzE0LjYxNiAzLjI4MyAxLjYzOCA0LjVsLjAxLjAxNC4wNDkuMDU4LjAxOS4wMjIuMDY0LjA3My4wMDEuMDAzYy4wMjQuMDI3LjA0Ny4wNTMuMDcyLjA3OGwuMDAyLjAwMi4xNS4xNTguMDAxLjAwMS4wNzQuMDc0LjAwNC4wMDRBNi45ODcgNi45ODcgMCAwIDAgMjQgMjlhNi45NzMgNi45NzMgMCAwIDAgNC45MS0yLjAxMmwuMDA2LS4wMDRjLjAyNS0uMDI1LjA1LS4wNDkuMDczLS4wNzRsLjAwMi0uMDAxYTQuNzMgNC43MyAwIDAgMCAuMTUtLjE1OGwuMDAxLS4wMDJjLjAyNC0uMDI2LjA0OS0uMDUxLjA3Mi0uMDc4IDAtLjAwMS4wMDItLjAwMS4wMDItLjAwM2wuMDY0LS4wNzMuMDE4LS4wMjJjLjAyLS4wMi4wMzYtLjA0LjA1Mi0uMDU4em0uMDY0LTIuMjI4Yy0uMjE2LjUxLS41Ljk4MS0uODQ3IDEuNDFhNi45MzkgNi45MzkgMCAwIDAtMS4yNzMtLjg3NGMuMTgxLS43MzMuMjkzLTEuNTM4LjMyMy0yLjM4NGgyLjI0MmE1Ljg0MiA1Ljg0MiAwIDAgMS0uNDQ1IDEuODQ4em0uNDQ1LTIuNzIzaC0yLjI0MmExMS42ODEgMTEuNjgxIDAgMCAwLS4zMjMtMi4zODUgNi45MzkgNi45MzkgMCAwIDAgMS4yNzMtLjg3MyA1Ljg0MiA1Ljg0MiAwIDAgMSAxLjI5MiAzLjI1OHptLTMuNTczLTQuOTc3YTUuODQgNS44NCAwIDAgMSAxLjY4MSAxLjA4MWMtLjI4OS4yNDctLjYuNDY0LS45MjguNjUzLS4yNDUtLjcwMy0uNTYtMS4zMTQtLjkyNS0xLjgwMy4wNTguMDIyLjExNi4wNDYuMTcyLjA2OXpNMjQuODcgMjcuNTMzYTEuNzY4IDEuNzY4IDAgMCAxLS40MzMuMjU2di0yLjg5OGE2LjA4IDYuMDggMCAwIDEgMS44MDguNDA5Yy0uMTMuMzg0LS4yOC43NC0uNDUzIDEuMDYtLjI3Mi41MDYtLjU5LjkxLS45MjIgMS4xNzN6bS45MjItOS44OTJjLjE3Mi4zMjIuMzI0LjY3Ni40NTMgMS4wNTlhNi4wOCA2LjA4IDAgMCAxLTEuODA4LjQxdi0yLjg5N2MuMTQ0LjA1Ny4yOS4xNDIuNDMzLjI1Ni4zMzIuMjYuNjUuNjY1LjkyMiAxLjE3MnptLTEuMzU1IDYuMzczdi0xLjU3NmgyLjMwNWMtLjAyNS42OS0uMTEgMS4zNi0uMjU1IDEuOTk2bC0uMDA0LjAyYTYuOTUzIDYuOTUzIDAgMCAwLTIuMDQ1LS40NHptMC0yLjQ1MXYtMS41NzdhNi45NTMgNi45NTMgMCAwIDAgMi4wNDYtLjQ0bC4wMDUuMDJjLjE0My42MzYuMjMgMS4zMDQuMjU0IDEuOTk3aC0yLjMwNHptLS44NzUuODc1djEuNTc2YTYuOTUzIDYuOTUzIDAgMCAwLTIuMDQ1LjQ0bC0uMDA1LS4wMmExMC44MzUgMTAuODM1IDAgMCAxLS4yNTQtMS45OTZoMi4zMDV6bS0yLjMwNC0uODc1Yy4wMjUtLjY5MS4xMS0xLjM2MS4yNTUtMS45OTdsLjAwNC0uMDJhNi45NDMgNi45NDMgMCAwIDAgMi4wNDUuNDR2MS41NzdoLTIuMzA0em0yLjMwNSAzLjMyOHYyLjg5N2ExLjc0OCAxLjc0OCAwIDAgMS0uNDMzLS4yNTdjLS4zMzItLjI2LS42NTItLjY2Ny0uOTI0LTEuMTczYTcuMDYgNy4wNiAwIDAgMS0uNDUzLTEuMDYgNi4wOTggNi4wOTggMCAwIDEgMS44MS0uNDA3em0wLTUuNzgyYTYuMDggNi4wOCAwIDAgMS0xLjgwOC0uNDA5Yy4xMy0uMzg0LjI4LS43NC40NTMtMS4wNi4yNzItLjUwNi41OS0uOTEyLjkyMy0xLjE3M2ExLjggMS44IDAgMCAxIC40MzMtLjI1NnYyLjg5OGgtLjAwMnptLTEuODQ5LTIuNTIzYy4wNTgtLjAyMy4xMTQtLjA0Ny4xNzItLjA2OS0uMzY2LjQ5LS42OCAxLjEtLjkyNSAxLjgwM2E2LjA1NyA2LjA1NyAwIDAgMS0uOTI4LS42NTMgNS44NCA1Ljg0IDAgMCAxIDEuNjgxLTEuMDgxem0tMy4xMjggMy4xMjhjLjIxNi0uNTEuNS0uOTgxLjg0Ny0xLjQxLjM4OS4zMzcuODE1LjYzIDEuMjczLjg3NGExMS42ODEgMTEuNjgxIDAgMCAwLS4zMjMgMi4zODVIMTguMTRjLjA0Ny0uNjQuMTk3LTEuMjYuNDQ1LTEuODQ5em0tLjQ0NSAyLjcyNGgyLjI0MmMuMDMuODQ2LjE0MiAxLjY1MS4zMjMgMi4zODRhNi45MzkgNi45MzkgMCAwIDAtMS4yNzMuODczIDUuODQyIDUuODQyIDAgMCAxLTEuMjkyLTMuMjU4em0zLjU3MyA0Ljk3NmE1Ljg0IDUuODQgMCAwIDEtMS42ODEtMS4wODFjLjI4OS0uMjQ3LjYtLjQ2NC45MjgtLjY1My4yNDUuNzAzLjU2IDEuMzE0LjkyNSAxLjgwM2E1LjYyNCA1LjYyNCAwIDAgMS0uMTcyLS4wNjl6bTQuNTcyIDBhNi4xNjggNi4xNjggMCAwIDEtLjE3Mi4wNjljLjM2Ni0uNDkuNjgtMS4xLjkyNS0xLjgwMy4zMjguMTg3LjY0LjQwNi45MjguNjUzYTUuODQgNS44NCAwIDAgMS0xLjY4MSAxLjA4MXoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0ibm9uemVybyIvPjwvZz48L3N2Zz4="
+      />
+      <Item
+        type="node"
+        size="40"
+        shape="koni-custom-node"
+        model={{
+          color: '#5CDBD3',
+          label: 'Person',
+          labelOffsetY: 28,
+          icon:
+            'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEyLjM1IDExLjUxNGwuMDEtLjAxNEE2Ljk2NiA2Ljk2NiAwIDAgMCAxNCA3YTYuOTczIDYuOTczIDAgMCAwLTEuNjM3LTQuNWwtLjAxMS0uMDEzLS4wNS0uMDU3LS4wMi0uMDIyLS4wNjMtLjA3NC0uMDAyLS4wMDEtLjA3Mi0uMDgtLjAwMS0uMDAxYy0uMDUtLjA1NC0uMS0uMTA3LS4xNTItLjE1OGwtLjAwMS0uMDAyLS4wNzUtLjA3NS0uMDA1LS4wMDQtLjA3LS4wNjgtLjAyNS0uMDIzLS4wNDctLjA0NC0uMDE2LS4wMTZBNi45NjYgNi45NjYgMCAwIDAgNyAwYTYuOTczIDYuOTczIDAgMCAwLTQuNzU1IDEuODYybC0uMDE1LjAxNi0uMDQ3LjA0NS0uMDI1LjAyNC0uMDcuMDY3LS4wMDUuMDA1LS4wNzUuMDc1LS4wMDIuMDAxLS4xNTEuMTU4LS4wMDIuMDAyYTMuMzA5IDMuMzA5IDAgMCAwLS4wNzIuMDhIMS43OGExLjQzNiAxLjQzNiAwIDAgMC0uMDY0LjA3NGwtLjAyLjAyMmMtLjAxNi4wMTktLjAzMi4wNC0uMDUuMDU4LS4wMDIuMDA1LS4wMDcuMDA4LS4wMS4wMTNBNi45NzMgNi45NzMgMCAwIDAgMCA3YzAgMS43MTQuNjE2IDMuMjgzIDEuNjM4IDQuNWwuMDEuMDE0LjA0OS4wNTguMDE5LjAyMi4wNjQuMDczLjAwMS4wMDNjLjAyNC4wMjcuMDQ3LjA1My4wNzIuMDc4bC4wMDIuMDAyLjE1LjE1OC4wMDEuMDAxLjA3NC4wNzQuMDA0LjAwNUE2Ljk4NyA2Ljk4NyAwIDAgMCA3IDE0YTYuOTczIDYuOTczIDAgMCAwIDQuOTEtMi4wMTJsLjAwNi0uMDA1Yy4wMjUtLjAyNS4wNS0uMDQ5LjA3My0uMDc0bC4wMDItLjAwMWE0LjczIDQuNzMgMCAwIDAgLjE1LS4xNThsLjAwMS0uMDAyYy4wMjQtLjAyNi4wNDktLjA1MS4wNzItLjA3OCAwLS4wMDEuMDAyLS4wMDEuMDAyLS4wMDMuMDIyLS4wMjMuMDQzLS4wNDguMDY0LS4wNzNsLjAxOC0uMDIyYy4wMi0uMDIuMDM2LS4wNC4wNTItLjA1OHptLjA2NC0yLjIyOGMtLjIxNi41MS0uNS45ODEtLjg0NyAxLjQxYTYuOTM5IDYuOTM5IDAgMCAwLTEuMjczLS44NzRjLjE4MS0uNzMzLjI5My0xLjUzOC4zMjMtMi4zODRoMi4yNDJhNS44NDIgNS44NDIgMCAwIDEtLjQ0NSAxLjg0OHptLjQ0NS0yLjcyM2gtMi4yNDJhMTEuNjgxIDExLjY4MSAwIDAgMC0uMzIzLTIuMzg1IDYuOTM5IDYuOTM5IDAgMCAwIDEuMjczLS44NzMgNS44NDIgNS44NDIgMCAwIDEgMS4yOTIgMy4yNTh6TTkuMjg2IDEuNTg1YTUuODQgNS44NCAwIDAgMSAxLjY4MSAxLjA4MWMtLjI4OS4yNDctLjYuNDY0LS45MjguNjUzLS4yNDUtLjcwMy0uNTYtMS4zMTQtLjkyNS0xLjgwMy4wNTguMDIyLjExNi4wNDYuMTcyLjA2OXpNNy44NyAxMi41MzNhMS43NjggMS43NjggMCAwIDEtLjQzMy4yNTZWOS44OTFhNi4wOCA2LjA4IDAgMCAxIDEuODA4LjQwOWMtLjEzLjM4NC0uMjguNzQtLjQ1MyAxLjA2LS4yNzIuNTA2LS41OS45MS0uOTIyIDEuMTczem0uOTIyLTkuODkyYy4xNzIuMzIxLjMyNC42NzYuNDUzIDEuMDU5YTYuMDggNi4wOCAwIDAgMS0xLjgwNy40MVYxLjIxMWMuMTQzLjA1OC4yODkuMTQzLjQzMi4yNTcuMzMyLjI2LjY1LjY2NS45MjIgMS4xNzJ6TTcuNDM4IDkuMDE0VjcuNDM4aDIuMzA0Yy0uMDI1LjY5LS4xMSAxLjM2LS4yNTUgMS45OTZsLS4wMDQuMDJhNi45NTMgNi45NTMgMCAwIDAtMi4wNDYtLjQ0em0wLTIuNDUxVjQuOTg2YTYuOTUzIDYuOTUzIDAgMCAwIDIuMDQ1LS40NGwuMDA1LjAyYy4xNDMuNjM2LjIzIDEuMzA0LjI1NCAxLjk5N0g3LjQzN3ptLS44NzUuODc1djEuNTc2YTYuOTUzIDYuOTUzIDAgMCAwLTIuMDQ2LjQ0bC0uMDA1LS4wMmExMC44MzUgMTAuODM1IDAgMCAxLS4yNTQtMS45OTZoMi4zMDR6bS0yLjMwNS0uODc1Yy4wMjUtLjY5MS4xMS0xLjM2MS4yNTUtMS45OTdsLjAwNC0uMDJhNi45NDMgNi45NDMgMCAwIDAgMi4wNDUuNDR2MS41NzdINC4yNTh6TTYuNTYyIDkuODl2Mi44OTZhMS43NDggMS43NDggMCAwIDEtLjQzMi0uMjU2Yy0uMzMyLS4yNi0uNjUyLS42NjctLjkyNC0xLjE3M2E3LjA2IDcuMDYgMCAwIDEtLjQ1My0xLjA2IDYuMDk4IDYuMDk4IDAgMCAxIDEuODEtLjQwN3ptMC01Ljc4MkE2LjA4IDYuMDggMCAwIDEgNC43NTUgMy43Yy4xMy0uMzg0LjI4LS43NC40NTMtMS4wNi4yNzItLjUwNi41OS0uOTEyLjkyMy0xLjE3M2ExLjggMS44IDAgMCAxIC40MzMtLjI1NnYyLjg5OGgtLjAwMnpNNC43MTUgMS41ODZjLjA1OC0uMDI0LjExNC0uMDQ3LjE3Mi0uMDY5LS4zNjYuNDktLjY4IDEuMS0uOTI1IDEuODAzYTYuMDU3IDYuMDU3IDAgMCAxLS45MjgtLjY1MyA1Ljg0IDUuODQgMCAwIDEgMS42ODEtMS4wODF6TTEuNTg2IDQuNzE0Yy4yMTYtLjUxLjUtLjk4MS44NDctMS40MS4zODkuMzM3LjgxNS42MyAxLjI3My44NzRhMTEuNjgxIDExLjY4MSAwIDAgMC0uMzIzIDIuMzg1SDEuMTRhNS44IDUuOCAwIDAgMSAuNDQ1LTEuODQ5ek0xLjE0IDcuNDM3aDIuMjQyYy4wMy44NDcuMTQyIDEuNjUyLjMyMyAyLjM4NWE2LjkzOSA2LjkzOSAwIDAgMC0xLjI3My44NzNBNS44NDIgNS44NDIgMCAwIDEgMS4xNCA3LjQzN3ptMy41NzMgNC45NzdhNS44NCA1Ljg0IDAgMCAxLTEuNjgxLTEuMDgxYy4yODktLjI0Ny42LS40NjQuOTI4LS42NTMuMjQ1LjcwMy41NiAxLjMxNC45MjUgMS44MDNhNS42MjQgNS42MjQgMCAwIDEtLjE3Mi0uMDY5em00LjU3MiAwYTYuMTY4IDYuMTY4IDAgMCAxLS4xNzIuMDY5Yy4zNjYtLjQ5LjY4LTEuMS45MjUtMS44MDMuMzI4LjE4Ny42NC40MDYuOTI4LjY1M2E1Ljg0IDUuODQgMCAwIDEtMS42ODEgMS4wODF6IiBmaWxsPSIjRkZGIi8+PC9zdmc+',
+        }}
+        src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxjaXJjbGUgaWQ9ImIiIGN4PSIyMCIgY3k9IjIwIiByPSIyMCIvPjxmaWx0ZXIgeD0iLTE3LjUlIiB5PSItMTIuNSUiIHdpZHRoPSIxMzUlIiBoZWlnaHQ9IjEzNSUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9ImEiPjxmZU9mZnNldCBkeT0iMiIgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSIvPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSIvPjxmZUNvbXBvc2l0ZSBpbj0ic2hhZG93Qmx1ck91dGVyMSIgaW4yPSJTb3VyY2VBbHBoYSIgb3BlcmF0b3I9Im91dCIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjA0IDAiIGluPSJzaGFkb3dCbHVyT3V0ZXIxIi8+PC9maWx0ZXI+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNCAyKSI+PHVzZSBmaWxsPSIjMDAwIiBmaWx0ZXI9InVybCgjYSkiIHhsaW5rOmhyZWY9IiNiIi8+PGNpcmNsZSBzdHJva2U9IiM1Q0RCRDMiIHN0cm9rZS1saW5lam9pbj0ic3F1YXJlIiBmaWxsLW9wYWNpdHk9Ii45MiIgZmlsbD0iIzVDREJEMyIgY3g9IjIwIiBjeT0iMjAiIHI9IjE5LjUiLz48L2c+PHBhdGggZD0iTTI5LjM1IDI2LjUxNGwuMDEtLjAxNEE2Ljk2NiA2Ljk2NiAwIDAgMCAzMSAyMmE2Ljk3MyA2Ljk3MyAwIDAgMC0xLjYzNy00LjVsLS4wMTEtLjAxMy0uMDUtLjA1Ny0uMDItLjAyMi0uMDYzLS4wNzQtLjAwMi0uMDAxLS4wNzItLjA4LS4wMDEtLjAwMWMtLjA1LS4wNTQtLjEtLjEwNy0uMTUyLS4xNThsLS4wMDEtLjAwMi0uMDc1LS4wNzUtLjAwNS0uMDA0Yy0uMDIzLS4wMjQtLjA0Ny0uMDQ2LS4wNy0uMDY4bC0uMDI1LS4wMjMtLjA0Ny0uMDQ0LS4wMTYtLjAxNUE2Ljk2NiA2Ljk2NiAwIDAgMCAyNCAxNWE2Ljk3MyA2Ljk3MyAwIDAgMC00Ljc1NSAxLjg2M2wtLjAxNS4wMTUtLjA0Ny4wNDUtLjAyNS4wMjQtLjA3LjA2Ny0uMDA1LjAwNS0uMDc1LjA3NS0uMDAyLjAwMS0uMTUxLjE1OC0uMDAyLjAwMmEzLjMwOSAzLjMwOSAwIDAgMC0uMDcyLjA4aC0uMDAxYTEuNDM2IDEuNDM2IDAgMCAwLS4wNjQuMDc0bC0uMDIuMDIyYy0uMDE2LjAxOS0uMDMyLjA0LS4wNS4wNTgtLjAwMi4wMDUtLjAwNy4wMDgtLjAxLjAxM0E2Ljk3MyA2Ljk3MyAwIDAgMCAxNyAyMmMwIDEuNzE0LjYxNiAzLjI4MyAxLjYzOCA0LjVsLjAxLjAxNC4wNDkuMDU4LjAxOS4wMjIuMDY0LjA3My4wMDEuMDAzYy4wMjQuMDI3LjA0Ny4wNTMuMDcyLjA3OGwuMDAyLjAwMi4xNS4xNTguMDAxLjAwMS4wNzQuMDc0LjAwNC4wMDRBNi45ODcgNi45ODcgMCAwIDAgMjQgMjlhNi45NzMgNi45NzMgMCAwIDAgNC45MS0yLjAxMmwuMDA2LS4wMDRjLjAyNS0uMDI1LjA1LS4wNDkuMDczLS4wNzRsLjAwMi0uMDAxYTQuNzMgNC43MyAwIDAgMCAuMTUtLjE1OGwuMDAxLS4wMDJjLjAyNC0uMDI2LjA0OS0uMDUxLjA3Mi0uMDc4IDAtLjAwMS4wMDItLjAwMS4wMDItLjAwM2wuMDY0LS4wNzMuMDE4LS4wMjJjLjAyLS4wMi4wMzYtLjA0LjA1Mi0uMDU4em0uMDY0LTIuMjI4Yy0uMjE2LjUxLS41Ljk4MS0uODQ3IDEuNDFhNi45MzkgNi45MzkgMCAwIDAtMS4yNzMtLjg3NGMuMTgxLS43MzMuMjkzLTEuNTM4LjMyMy0yLjM4NGgyLjI0MmE1Ljg0MiA1Ljg0MiAwIDAgMS0uNDQ1IDEuODQ4em0uNDQ1LTIuNzIzaC0yLjI0MmExMS42ODEgMTEuNjgxIDAgMCAwLS4zMjMtMi4zODUgNi45MzkgNi45MzkgMCAwIDAgMS4yNzMtLjg3MyA1Ljg0MiA1Ljg0MiAwIDAgMSAxLjI5MiAzLjI1OHptLTMuNTczLTQuOTc3YTUuODQgNS44NCAwIDAgMSAxLjY4MSAxLjA4MWMtLjI4OS4yNDctLjYuNDY0LS45MjguNjUzLS4yNDUtLjcwMy0uNTYtMS4zMTQtLjkyNS0xLjgwMy4wNTguMDIyLjExNi4wNDYuMTcyLjA2OXpNMjQuODcgMjcuNTMzYTEuNzY4IDEuNzY4IDAgMCAxLS40MzMuMjU2di0yLjg5OGE2LjA4IDYuMDggMCAwIDEgMS44MDguNDA5Yy0uMTMuMzg0LS4yOC43NC0uNDUzIDEuMDYtLjI3Mi41MDYtLjU5LjkxLS45MjIgMS4xNzN6bS45MjItOS44OTJjLjE3Mi4zMjIuMzI0LjY3Ni40NTMgMS4wNTlhNi4wOCA2LjA4IDAgMCAxLTEuODA4LjQxdi0yLjg5N2MuMTQ0LjA1Ny4yOS4xNDIuNDMzLjI1Ni4zMzIuMjYuNjUuNjY1LjkyMiAxLjE3MnptLTEuMzU1IDYuMzczdi0xLjU3NmgyLjMwNWMtLjAyNS42OS0uMTEgMS4zNi0uMjU1IDEuOTk2bC0uMDA0LjAyYTYuOTUzIDYuOTUzIDAgMCAwLTIuMDQ1LS40NHptMC0yLjQ1MXYtMS41NzdhNi45NTMgNi45NTMgMCAwIDAgMi4wNDYtLjQ0bC4wMDUuMDJjLjE0My42MzYuMjMgMS4zMDQuMjU0IDEuOTk3aC0yLjMwNHptLS44NzUuODc1djEuNTc2YTYuOTUzIDYuOTUzIDAgMCAwLTIuMDQ1LjQ0bC0uMDA1LS4wMmExMC44MzUgMTAuODM1IDAgMCAxLS4yNTQtMS45OTZoMi4zMDV6bS0yLjMwNC0uODc1Yy4wMjUtLjY5MS4xMS0xLjM2MS4yNTUtMS45OTdsLjAwNC0uMDJhNi45NDMgNi45NDMgMCAwIDAgMi4wNDUuNDR2MS41NzdoLTIuMzA0em0yLjMwNSAzLjMyOHYyLjg5N2ExLjc0OCAxLjc0OCAwIDAgMS0uNDMzLS4yNTdjLS4zMzItLjI2LS42NTItLjY2Ny0uOTI0LTEuMTczYTcuMDYgNy4wNiAwIDAgMS0uNDUzLTEuMDYgNi4wOTggNi4wOTggMCAwIDEgMS44MS0uNDA3em0wLTUuNzgyYTYuMDggNi4wOCAwIDAgMS0xLjgwOC0uNDA5Yy4xMy0uMzg0LjI4LS43NC40NTMtMS4wNi4yNzItLjUwNi41OS0uOTEyLjkyMy0xLjE3M2ExLjggMS44IDAgMCAxIC40MzMtLjI1NnYyLjg5OGgtLjAwMnptLTEuODQ5LTIuNTIzYy4wNTgtLjAyMy4xMTQtLjA0Ny4xNzItLjA2OS0uMzY2LjQ5LS42OCAxLjEtLjkyNSAxLjgwM2E2LjA1NyA2LjA1NyAwIDAgMS0uOTI4LS42NTMgNS44NCA1Ljg0IDAgMCAxIDEuNjgxLTEuMDgxem0tMy4xMjggMy4xMjhjLjIxNi0uNTEuNS0uOTgxLjg0Ny0xLjQxLjM4OS4zMzcuODE1LjYzIDEuMjczLjg3NGExMS42ODEgMTEuNjgxIDAgMCAwLS4zMjMgMi4zODVIMTguMTRjLjA0Ny0uNjQuMTk3LTEuMjYuNDQ1LTEuODQ5em0tLjQ0NSAyLjcyNGgyLjI0MmMuMDMuODQ2LjE0MiAxLjY1MS4zMjMgMi4zODRhNi45MzkgNi45MzkgMCAwIDAtMS4yNzMuODczIDUuODQyIDUuODQyIDAgMCAxLTEuMjkyLTMuMjU4em0zLjU3MyA0Ljk3NmE1Ljg0IDUuODQgMCAwIDEtMS42ODEtMS4wODFjLjI4OS0uMjQ3LjYtLjQ2NC45MjgtLjY1My4yNDUuNzAzLjU2IDEuMzE0LjkyNSAxLjgwM2E1LjYyNCA1LjYyNCAwIDAgMS0uMTcyLS4wNjl6bTQuNTcyIDBhNi4xNjggNi4xNjggMCAwIDEtLjE3Mi4wNjljLjM2Ni0uNDkuNjgtMS4xLjkyNS0xLjgwMy4zMjguMTg3LjY0LjQwNi45MjguNjUzYTUuODQgNS44NCAwIDAgMS0xLjY4MSAxLjA4MXoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0ibm9uemVybyIvPjwvZz48L3N2Zz4="
+      />
+      <Item
+        type="node"
+        size="40"
+        shape="koni-custom-node"
+        model={{
+          color: '#B37FEB',
+          label: 'Country',
+          labelOffsetY: 28,
+          icon:
+            'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEyLjM1IDExLjUxNGwuMDEtLjAxNEE2Ljk2NiA2Ljk2NiAwIDAgMCAxNCA3YTYuOTczIDYuOTczIDAgMCAwLTEuNjM3LTQuNWwtLjAxMS0uMDEzLS4wNS0uMDU3LS4wMi0uMDIyLS4wNjMtLjA3NC0uMDAyLS4wMDEtLjA3Mi0uMDgtLjAwMS0uMDAxYy0uMDUtLjA1NC0uMS0uMTA3LS4xNTItLjE1OGwtLjAwMS0uMDAyLS4wNzUtLjA3NS0uMDA1LS4wMDQtLjA3LS4wNjgtLjAyNS0uMDIzLS4wNDctLjA0NC0uMDE2LS4wMTZBNi45NjYgNi45NjYgMCAwIDAgNyAwYTYuOTczIDYuOTczIDAgMCAwLTQuNzU1IDEuODYybC0uMDE1LjAxNi0uMDQ3LjA0NS0uMDI1LjAyNC0uMDcuMDY3LS4wMDUuMDA1LS4wNzUuMDc1LS4wMDIuMDAxLS4xNTEuMTU4LS4wMDIuMDAyYTMuMzA5IDMuMzA5IDAgMCAwLS4wNzIuMDhIMS43OGExLjQzNiAxLjQzNiAwIDAgMC0uMDY0LjA3NGwtLjAyLjAyMmMtLjAxNi4wMTktLjAzMi4wNC0uMDUuMDU4LS4wMDIuMDA1LS4wMDcuMDA4LS4wMS4wMTNBNi45NzMgNi45NzMgMCAwIDAgMCA3YzAgMS43MTQuNjE2IDMuMjgzIDEuNjM4IDQuNWwuMDEuMDE0LjA0OS4wNTguMDE5LjAyMi4wNjQuMDczLjAwMS4wMDNjLjAyNC4wMjcuMDQ3LjA1My4wNzIuMDc4bC4wMDIuMDAyLjE1LjE1OC4wMDEuMDAxLjA3NC4wNzQuMDA0LjAwNUE2Ljk4NyA2Ljk4NyAwIDAgMCA3IDE0YTYuOTczIDYuOTczIDAgMCAwIDQuOTEtMi4wMTJsLjAwNi0uMDA1Yy4wMjUtLjAyNS4wNS0uMDQ5LjA3My0uMDc0bC4wMDItLjAwMWE0LjczIDQuNzMgMCAwIDAgLjE1LS4xNThsLjAwMS0uMDAyYy4wMjQtLjAyNi4wNDktLjA1MS4wNzItLjA3OCAwLS4wMDEuMDAyLS4wMDEuMDAyLS4wMDMuMDIyLS4wMjMuMDQzLS4wNDguMDY0LS4wNzNsLjAxOC0uMDIyYy4wMi0uMDIuMDM2LS4wNC4wNTItLjA1OHptLjA2NC0yLjIyOGMtLjIxNi41MS0uNS45ODEtLjg0NyAxLjQxYTYuOTM5IDYuOTM5IDAgMCAwLTEuMjczLS44NzRjLjE4MS0uNzMzLjI5My0xLjUzOC4zMjMtMi4zODRoMi4yNDJhNS44NDIgNS44NDIgMCAwIDEtLjQ0NSAxLjg0OHptLjQ0NS0yLjcyM2gtMi4yNDJhMTEuNjgxIDExLjY4MSAwIDAgMC0uMzIzLTIuMzg1IDYuOTM5IDYuOTM5IDAgMCAwIDEuMjczLS44NzMgNS44NDIgNS44NDIgMCAwIDEgMS4yOTIgMy4yNTh6TTkuMjg2IDEuNTg1YTUuODQgNS44NCAwIDAgMSAxLjY4MSAxLjA4MWMtLjI4OS4yNDctLjYuNDY0LS45MjguNjUzLS4yNDUtLjcwMy0uNTYtMS4zMTQtLjkyNS0xLjgwMy4wNTguMDIyLjExNi4wNDYuMTcyLjA2OXpNNy44NyAxMi41MzNhMS43NjggMS43NjggMCAwIDEtLjQzMy4yNTZWOS44OTFhNi4wOCA2LjA4IDAgMCAxIDEuODA4LjQwOWMtLjEzLjM4NC0uMjguNzQtLjQ1MyAxLjA2LS4yNzIuNTA2LS41OS45MS0uOTIyIDEuMTczem0uOTIyLTkuODkyYy4xNzIuMzIxLjMyNC42NzYuNDUzIDEuMDU5YTYuMDggNi4wOCAwIDAgMS0xLjgwNy40MVYxLjIxMWMuMTQzLjA1OC4yODkuMTQzLjQzMi4yNTcuMzMyLjI2LjY1LjY2NS45MjIgMS4xNzJ6TTcuNDM4IDkuMDE0VjcuNDM4aDIuMzA0Yy0uMDI1LjY5LS4xMSAxLjM2LS4yNTUgMS45OTZsLS4wMDQuMDJhNi45NTMgNi45NTMgMCAwIDAtMi4wNDYtLjQ0em0wLTIuNDUxVjQuOTg2YTYuOTUzIDYuOTUzIDAgMCAwIDIuMDQ1LS40NGwuMDA1LjAyYy4xNDMuNjM2LjIzIDEuMzA0LjI1NCAxLjk5N0g3LjQzN3ptLS44NzUuODc1djEuNTc2YTYuOTUzIDYuOTUzIDAgMCAwLTIuMDQ2LjQ0bC0uMDA1LS4wMmExMC44MzUgMTAuODM1IDAgMCAxLS4yNTQtMS45OTZoMi4zMDR6bS0yLjMwNS0uODc1Yy4wMjUtLjY5MS4xMS0xLjM2MS4yNTUtMS45OTdsLjAwNC0uMDJhNi45NDMgNi45NDMgMCAwIDAgMi4wNDUuNDR2MS41NzdINC4yNTh6TTYuNTYyIDkuODl2Mi44OTZhMS43NDggMS43NDggMCAwIDEtLjQzMi0uMjU2Yy0uMzMyLS4yNi0uNjUyLS42NjctLjkyNC0xLjE3M2E3LjA2IDcuMDYgMCAwIDEtLjQ1My0xLjA2IDYuMDk4IDYuMDk4IDAgMCAxIDEuODEtLjQwN3ptMC01Ljc4MkE2LjA4IDYuMDggMCAwIDEgNC43NTUgMy43Yy4xMy0uMzg0LjI4LS43NC40NTMtMS4wNi4yNzItLjUwNi41OS0uOTEyLjkyMy0xLjE3M2ExLjggMS44IDAgMCAxIC40MzMtLjI1NnYyLjg5OGgtLjAwMnpNNC43MTUgMS41ODZjLjA1OC0uMDI0LjExNC0uMDQ3LjE3Mi0uMDY5LS4zNjYuNDktLjY4IDEuMS0uOTI1IDEuODAzYTYuMDU3IDYuMDU3IDAgMCAxLS45MjgtLjY1MyA1Ljg0IDUuODQgMCAwIDEgMS42ODEtMS4wODF6TTEuNTg2IDQuNzE0Yy4yMTYtLjUxLjUtLjk4MS44NDctMS40MS4zODkuMzM3LjgxNS42MyAxLjI3My44NzRhMTEuNjgxIDExLjY4MSAwIDAgMC0uMzIzIDIuMzg1SDEuMTRhNS44IDUuOCAwIDAgMSAuNDQ1LTEuODQ5ek0xLjE0IDcuNDM3aDIuMjQyYy4wMy44NDcuMTQyIDEuNjUyLjMyMyAyLjM4NWE2LjkzOSA2LjkzOSAwIDAgMC0xLjI3My44NzNBNS44NDIgNS44NDIgMCAwIDEgMS4xNCA3LjQzN3ptMy41NzMgNC45NzdhNS44NCA1Ljg0IDAgMCAxLTEuNjgxLTEuMDgxYy4yODktLjI0Ny42LS40NjQuOTI4LS42NTMuMjQ1LjcwMy41NiAxLjMxNC45MjUgMS44MDNhNS42MjQgNS42MjQgMCAwIDEtLjE3Mi0uMDY5em00LjU3MiAwYTYuMTY4IDYuMTY4IDAgMCAxLS4xNzIuMDY5Yy4zNjYtLjQ5LjY4LTEuMS45MjUtMS44MDMuMzI4LjE4Ny42NC40MDYuOTI4LjY1M2E1Ljg0IDUuODQgMCAwIDEtMS42ODEgMS4wODF6IiBmaWxsPSIjRkZGIi8+PC9zdmc+',
+        }}
+        src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxjaXJjbGUgaWQ9ImIiIGN4PSIyMCIgY3k9IjIwIiByPSIyMCIvPjxmaWx0ZXIgeD0iLTE3LjUlIiB5PSItMTIuNSUiIHdpZHRoPSIxMzUlIiBoZWlnaHQ9IjEzNSUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9ImEiPjxmZU9mZnNldCBkeT0iMiIgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSIvPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSIvPjxmZUNvbXBvc2l0ZSBpbj0ic2hhZG93Qmx1ck91dGVyMSIgaW4yPSJTb3VyY2VBbHBoYSIgb3BlcmF0b3I9Im91dCIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjA0IDAiIGluPSJzaGFkb3dCbHVyT3V0ZXIxIi8+PC9maWx0ZXI+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNCAyKSI+PHVzZSBmaWxsPSIjMDAwIiBmaWx0ZXI9InVybCgjYSkiIHhsaW5rOmhyZWY9IiNiIi8+PGNpcmNsZSBzdHJva2U9IiNCMzdGRUIiIHN0cm9rZS1saW5lam9pbj0ic3F1YXJlIiBmaWxsLW9wYWNpdHk9Ii45MiIgZmlsbD0iI0IzN0ZFQiIgY3g9IjIwIiBjeT0iMjAiIHI9IjE5LjUiLz48L2c+PHBhdGggZD0iTTI5LjM1IDI2LjUxNGwuMDEtLjAxNEE2Ljk2NiA2Ljk2NiAwIDAgMCAzMSAyMmE2Ljk3MyA2Ljk3MyAwIDAgMC0xLjYzNy00LjVsLS4wMTEtLjAxMy0uMDUtLjA1Ny0uMDItLjAyMi0uMDYzLS4wNzQtLjAwMi0uMDAxLS4wNzItLjA4LS4wMDEtLjAwMWMtLjA1LS4wNTQtLjEtLjEwNy0uMTUyLS4xNThsLS4wMDEtLjAwMi0uMDc1LS4wNzUtLjAwNS0uMDA0Yy0uMDIzLS4wMjQtLjA0Ny0uMDQ2LS4wNy0uMDY4bC0uMDI1LS4wMjMtLjA0Ny0uMDQ0LS4wMTYtLjAxNUE2Ljk2NiA2Ljk2NiAwIDAgMCAyNCAxNWE2Ljk3MyA2Ljk3MyAwIDAgMC00Ljc1NSAxLjg2M2wtLjAxNS4wMTUtLjA0Ny4wNDUtLjAyNS4wMjQtLjA3LjA2Ny0uMDA1LjAwNS0uMDc1LjA3NS0uMDAyLjAwMS0uMTUxLjE1OC0uMDAyLjAwMmEzLjMwOSAzLjMwOSAwIDAgMC0uMDcyLjA4aC0uMDAxYTEuNDM2IDEuNDM2IDAgMCAwLS4wNjQuMDc0bC0uMDIuMDIyYy0uMDE2LjAxOS0uMDMyLjA0LS4wNS4wNTgtLjAwMi4wMDUtLjAwNy4wMDgtLjAxLjAxM0E2Ljk3MyA2Ljk3MyAwIDAgMCAxNyAyMmMwIDEuNzE0LjYxNiAzLjI4MyAxLjYzOCA0LjVsLjAxLjAxNC4wNDkuMDU4LjAxOS4wMjIuMDY0LjA3My4wMDEuMDAzYy4wMjQuMDI3LjA0Ny4wNTMuMDcyLjA3OGwuMDAyLjAwMi4xNS4xNTguMDAxLjAwMS4wNzQuMDc0LjAwNC4wMDRBNi45ODcgNi45ODcgMCAwIDAgMjQgMjlhNi45NzMgNi45NzMgMCAwIDAgNC45MS0yLjAxMmwuMDA2LS4wMDRjLjAyNS0uMDI1LjA1LS4wNDkuMDczLS4wNzRsLjAwMi0uMDAxYTQuNzMgNC43MyAwIDAgMCAuMTUtLjE1OGwuMDAxLS4wMDJjLjAyNC0uMDI2LjA0OS0uMDUxLjA3Mi0uMDc4IDAtLjAwMS4wMDItLjAwMS4wMDItLjAwM2wuMDY0LS4wNzMuMDE4LS4wMjJjLjAyLS4wMi4wMzYtLjA0LjA1Mi0uMDU4em0uMDY0LTIuMjI4Yy0uMjE2LjUxLS41Ljk4MS0uODQ3IDEuNDFhNi45MzkgNi45MzkgMCAwIDAtMS4yNzMtLjg3NGMuMTgxLS43MzMuMjkzLTEuNTM4LjMyMy0yLjM4NGgyLjI0MmE1Ljg0MiA1Ljg0MiAwIDAgMS0uNDQ1IDEuODQ4em0uNDQ1LTIuNzIzaC0yLjI0MmExMS42ODEgMTEuNjgxIDAgMCAwLS4zMjMtMi4zODUgNi45MzkgNi45MzkgMCAwIDAgMS4yNzMtLjg3MyA1Ljg0MiA1Ljg0MiAwIDAgMSAxLjI5MiAzLjI1OHptLTMuNTczLTQuOTc3YTUuODQgNS44NCAwIDAgMSAxLjY4MSAxLjA4MWMtLjI4OS4yNDctLjYuNDY0LS45MjguNjUzLS4yNDUtLjcwMy0uNTYtMS4zMTQtLjkyNS0xLjgwMy4wNTguMDIyLjExNi4wNDYuMTcyLjA2OXpNMjQuODcgMjcuNTMzYTEuNzY4IDEuNzY4IDAgMCAxLS40MzMuMjU2di0yLjg5OGE2LjA4IDYuMDggMCAwIDEgMS44MDguNDA5Yy0uMTMuMzg0LS4yOC43NC0uNDUzIDEuMDYtLjI3Mi41MDYtLjU5LjkxLS45MjIgMS4xNzN6bS45MjItOS44OTJjLjE3Mi4zMjIuMzI0LjY3Ni40NTMgMS4wNTlhNi4wOCA2LjA4IDAgMCAxLTEuODA4LjQxdi0yLjg5N2MuMTQ0LjA1Ny4yOS4xNDIuNDMzLjI1Ni4zMzIuMjYuNjUuNjY1LjkyMiAxLjE3MnptLTEuMzU1IDYuMzczdi0xLjU3NmgyLjMwNWMtLjAyNS42OS0uMTEgMS4zNi0uMjU1IDEuOTk2bC0uMDA0LjAyYTYuOTUzIDYuOTUzIDAgMCAwLTIuMDQ1LS40NHptMC0yLjQ1MXYtMS41NzdhNi45NTMgNi45NTMgMCAwIDAgMi4wNDYtLjQ0bC4wMDUuMDJjLjE0My42MzYuMjMgMS4zMDQuMjU0IDEuOTk3aC0yLjMwNHptLS44NzUuODc1djEuNTc2YTYuOTUzIDYuOTUzIDAgMCAwLTIuMDQ1LjQ0bC0uMDA1LS4wMmExMC44MzUgMTAuODM1IDAgMCAxLS4yNTQtMS45OTZoMi4zMDV6bS0yLjMwNC0uODc1Yy4wMjUtLjY5MS4xMS0xLjM2MS4yNTUtMS45OTdsLjAwNC0uMDJhNi45NDMgNi45NDMgMCAwIDAgMi4wNDUuNDR2MS41NzdoLTIuMzA0em0yLjMwNSAzLjMyOHYyLjg5N2ExLjc0OCAxLjc0OCAwIDAgMS0uNDMzLS4yNTdjLS4zMzItLjI2LS42NTItLjY2Ny0uOTI0LTEuMTczYTcuMDYgNy4wNiAwIDAgMS0uNDUzLTEuMDYgNi4wOTggNi4wOTggMCAwIDEgMS44MS0uNDA3em0wLTUuNzgyYTYuMDggNi4wOCAwIDAgMS0xLjgwOC0uNDA5Yy4xMy0uMzg0LjI4LS43NC40NTMtMS4wNi4yNzItLjUwNi41OS0uOTEyLjkyMy0xLjE3M2ExLjggMS44IDAgMCAxIC40MzMtLjI1NnYyLjg5OGgtLjAwMnptLTEuODQ5LTIuNTIzYy4wNTgtLjAyMy4xMTQtLjA0Ny4xNzItLjA2OS0uMzY2LjQ5LS42OCAxLjEtLjkyNSAxLjgwM2E2LjA1NyA2LjA1NyAwIDAgMS0uOTI4LS42NTMgNS44NCA1Ljg0IDAgMCAxIDEuNjgxLTEuMDgxem0tMy4xMjggMy4xMjhjLjIxNi0uNTEuNS0uOTgxLjg0Ny0xLjQxLjM4OS4zMzcuODE1LjYzIDEuMjczLjg3NGExMS42ODEgMTEuNjgxIDAgMCAwLS4zMjMgMi4zODVIMTguMTRjLjA0Ny0uNjQuMTk3LTEuMjYuNDQ1LTEuODQ5em0tLjQ0NSAyLjcyNGgyLjI0MmMuMDMuODQ2LjE0MiAxLjY1MS4zMjMgMi4zODRhNi45MzkgNi45MzkgMCAwIDAtMS4yNzMuODczIDUuODQyIDUuODQyIDAgMCAxLTEuMjkyLTMuMjU4em0zLjU3MyA0Ljk3NmE1Ljg0IDUuODQgMCAwIDEtMS42ODEtMS4wODFjLjI4OS0uMjQ3LjYtLjQ2NC45MjgtLjY1My4yNDUuNzAzLjU2IDEuMzE0LjkyNSAxLjgwM2E1LjYyNCA1LjYyNCAwIDAgMS0uMTcyLS4wNjl6bTQuNTcyIDBhNi4xNjggNi4xNjggMCAwIDEtLjE3Mi4wNjljLjM2Ni0uNDkuNjgtMS4xLjkyNS0xLjgwMy4zMjguMTg3LjY0LjQwNi45MjguNjUzYTUuODQgNS44NCAwIDAgMS0xLjY4MSAxLjA4MXoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0ibm9uemVybyIvPjwvZz48L3N2Zz4="
+      />
+    </Card>
+  </ItemPanel>
+);
 
 export default KoniItemPanel;
diff --git a/EditorKoni/src/components/EditorMinimap/index.tsx b/EditorKoni/src/components/EditorMinimap/index.tsx
index 8c86b242..ca27e2f9 100644
--- a/EditorKoni/src/components/EditorMinimap/index.tsx
+++ b/EditorKoni/src/components/EditorMinimap/index.tsx
@@ -1,13 +1,11 @@
-import React from 'react';
 import { Card } from 'antd';
 import { Minimap } from 'gg-editor';
+import React from 'react';
 
-const EditorMinimap = () => {
-  return (
-    <Card type="inner" size="small" title="Minimap" bordered={false}>
-      <Minimap height={200} />
-    </Card>
-  );
-};
+const EditorMinimap = () => (
+  <Card type="inner" size="small" title="Minimap" bordered={false}>
+    <Minimap height={200} />
+  </Card>
+);
 
 export default EditorMinimap;
diff --git a/EditorKoni/src/components/EditorToolbar/FlowToolbar.tsx b/EditorKoni/src/components/EditorToolbar/FlowToolbar.tsx
index 374c1858..fe888be8 100644
--- a/EditorKoni/src/components/EditorToolbar/FlowToolbar.tsx
+++ b/EditorKoni/src/components/EditorToolbar/FlowToolbar.tsx
@@ -1,32 +1,30 @@
-import React from 'react';
 import { Divider } from 'antd';
+import React from 'react';
 import { Toolbar } from 'gg-editor';
 import ToolbarButton from './ToolbarButton';
 import styles from './index.less';
 
-const FlowToolbar = () => {
-  return (
-    <Toolbar className={styles.toolbar}>
-      <ToolbarButton command="undo" />
-      <ToolbarButton command="redo" />
-      <Divider type="vertical" />
-      <ToolbarButton command="copy" />
-      <ToolbarButton command="paste" />
-      <ToolbarButton command="delete" />
-      <Divider type="vertical" />
-      <ToolbarButton command="zoomIn" icon="zoom-in" text="Zoom In" />
-      <ToolbarButton command="zoomOut" icon="zoom-out" text="Zoom Out" />
-      <ToolbarButton command="autoZoom" icon="fit-map" text="Fit Map" />
-      <ToolbarButton command="resetZoom" icon="actual-size" text="Actual Size" />
-      <Divider type="vertical" />
-      <ToolbarButton command="toBack" icon="to-back" text="To Back" />
-      <ToolbarButton command="toFront" icon="to-front" text="To Front" />
-      <Divider type="vertical" />
-      <ToolbarButton command="multiSelect" icon="multi-select" text="Multi Select" />
-      <ToolbarButton command="addGroup" icon="group" text="Add Group" />
-      <ToolbarButton command="unGroup" icon="ungroup" text="Ungroup" />
-    </Toolbar>
-  );
-};
+const FlowToolbar = () => (
+  <Toolbar className={styles.toolbar}>
+    <ToolbarButton command="undo" />
+    <ToolbarButton command="redo" />
+    <Divider type="vertical" />
+    <ToolbarButton command="copy" />
+    <ToolbarButton command="paste" />
+    <ToolbarButton command="delete" />
+    <Divider type="vertical" />
+    <ToolbarButton command="zoomIn" icon="zoom-in" text="Zoom In" />
+    <ToolbarButton command="zoomOut" icon="zoom-out" text="Zoom Out" />
+    <ToolbarButton command="autoZoom" icon="fit-map" text="Fit Map" />
+    <ToolbarButton command="resetZoom" icon="actual-size" text="Actual Size" />
+    <Divider type="vertical" />
+    <ToolbarButton command="toBack" icon="to-back" text="To Back" />
+    <ToolbarButton command="toFront" icon="to-front" text="To Front" />
+    <Divider type="vertical" />
+    <ToolbarButton command="multiSelect" icon="multi-select" text="Multi Select" />
+    <ToolbarButton command="addGroup" icon="group" text="Add Group" />
+    <ToolbarButton command="unGroup" icon="ungroup" text="Ungroup" />
+  </Toolbar>
+);
 
 export default FlowToolbar;
diff --git a/EditorKoni/src/components/EditorToolbar/MindToolbar.tsx b/EditorKoni/src/components/EditorToolbar/MindToolbar.tsx
index 1c83286a..536c06d8 100644
--- a/EditorKoni/src/components/EditorToolbar/MindToolbar.tsx
+++ b/EditorKoni/src/components/EditorToolbar/MindToolbar.tsx
@@ -1,27 +1,25 @@
-import React from 'react';
 import { Divider } from 'antd';
+import React from 'react';
 import { Toolbar } from 'gg-editor';
 import ToolbarButton from './ToolbarButton';
 import styles from './index.less';
 
-const FlowToolbar = () => {
-  return (
-    <Toolbar className={styles.toolbar}>
-      <ToolbarButton command="undo" />
-      <ToolbarButton command="redo" />
-      <Divider type="vertical" />
-      <ToolbarButton command="zoomIn" icon="zoom-in" text="Zoom In" />
-      <ToolbarButton command="zoomOut" icon="zoom-out" text="Zoom Out" />
-      <ToolbarButton command="autoZoom" icon="fit-map" text="Fit Map" />
-      <ToolbarButton command="resetZoom" icon="actual-size" text="Actual Size" />
-      <Divider type="vertical" />
-      <ToolbarButton command="append" text="Topic" />
-      <ToolbarButton command="appendChild" icon="append-child" text="Subtopic" />
-      <Divider type="vertical" />
-      <ToolbarButton command="collapse" text="Fold" />
-      <ToolbarButton command="expand" text="Unfold" />
-    </Toolbar>
-  );
-};
+const FlowToolbar = () => (
+  <Toolbar className={styles.toolbar}>
+    <ToolbarButton command="undo" />
+    <ToolbarButton command="redo" />
+    <Divider type="vertical" />
+    <ToolbarButton command="zoomIn" icon="zoom-in" text="Zoom In" />
+    <ToolbarButton command="zoomOut" icon="zoom-out" text="Zoom Out" />
+    <ToolbarButton command="autoZoom" icon="fit-map" text="Fit Map" />
+    <ToolbarButton command="resetZoom" icon="actual-size" text="Actual Size" />
+    <Divider type="vertical" />
+    <ToolbarButton command="append" text="Topic" />
+    <ToolbarButton command="appendChild" icon="append-child" text="Subtopic" />
+    <Divider type="vertical" />
+    <ToolbarButton command="collapse" text="Fold" />
+    <ToolbarButton command="expand" text="Unfold" />
+  </Toolbar>
+);
 
 export default FlowToolbar;
diff --git a/EditorKoni/src/components/EditorToolbar/ToolbarButton.tsx b/EditorKoni/src/components/EditorToolbar/ToolbarButton.tsx
index 30958f0e..15a96b7a 100644
--- a/EditorKoni/src/components/EditorToolbar/ToolbarButton.tsx
+++ b/EditorKoni/src/components/EditorToolbar/ToolbarButton.tsx
@@ -1,12 +1,11 @@
+import { Command } from 'gg-editor';
 import React from 'react';
 import { Tooltip } from 'antd';
-import { Command } from 'gg-editor';
 import IconFont from '../../common/IconFont';
 import styles from './index.less';
 
-const upperFirst = (str: string) => {
-  return str.toLowerCase().replace(/( |^)[a-z]/g, (l: string) => l.toUpperCase());
-};
+const upperFirst = (str: string) =>
+  str.toLowerCase().replace(/( |^)[a-z]/g, (l: string) => l.toUpperCase());
 
 interface ToolbarButtonProps {
   command: string;
diff --git a/EditorKoni/src/components/EditorToolbar/index.tsx b/EditorKoni/src/components/EditorToolbar/index.tsx
index ac08e3dc..58f1d277 100644
--- a/EditorKoni/src/components/EditorToolbar/index.tsx
+++ b/EditorKoni/src/components/EditorToolbar/index.tsx
@@ -1,5 +1,5 @@
 import FlowToolbar from './FlowToolbar';
-import MindToolbar from './MindToolbar';
 import KoniToolbar from './KoniToolbar';
+import MindToolbar from './MindToolbar';
 
 export { FlowToolbar, MindToolbar, KoniToolbar };
diff --git a/EditorKoni/src/index.tsx b/EditorKoni/src/index.tsx
index af0bb8ea..3fc0e7fd 100644
--- a/EditorKoni/src/index.tsx
+++ b/EditorKoni/src/index.tsx
@@ -1,45 +1,44 @@
-import React from 'react';
-import { Row, Col } from 'antd';
+import { Col, Row } from 'antd';
 import GGEditor, { Koni } from 'gg-editor';
+
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import React from 'react';
+import { formatMessage } from 'umi-plugin-react/locale';
 import EditorMinimap from './components/EditorMinimap';
 import { KoniContextMenu } from './components/EditorContextMenu';
-import { KoniToolbar } from './components/EditorToolbar';
-import { KoniItemPanel } from './components/EditorItemPanel';
 import { KoniDetailPanel } from './components/EditorDetailPanel';
+import { KoniItemPanel } from './components/EditorItemPanel';
+import { KoniToolbar } from './components/EditorToolbar';
 import styles from './index.less';
-import { PageHeaderWrapper } from '@ant-design/pro-layout';
-import { formatMessage } from 'umi-plugin-react/locale';
 
 GGEditor.setTrackable(false);
 
-export default () => {
-  return (
-    <PageHeaderWrapper
-      content={formatMessage({
-        id: 'BLOCK_NAME.description',
-        defaultMessage: 'description',
-      })}
-    >
-      <GGEditor className={styles.editor}>
-        <Row type="flex" className={styles.editorHd}>
-          <Col span={24}>
-            <KoniToolbar />
-          </Col>
-        </Row>
-        <Row type="flex" className={styles.editorBd}>
-          <Col span={2} className={styles.editorSidebar}>
-            <KoniItemPanel />
-          </Col>
-          <Col span={16} className={styles.editorContent}>
-            <Koni className={styles.koni} />
-          </Col>
-          <Col span={6} className={styles.editorSidebar}>
-            <KoniDetailPanel />
-            <EditorMinimap />
-          </Col>
-        </Row>
-        <KoniContextMenu />
-      </GGEditor>
-    </PageHeaderWrapper>
-  );
-};
+export default () => (
+  <PageHeaderWrapper
+    content={formatMessage({
+      id: 'BLOCK_NAME.description',
+      defaultMessage: 'description',
+    })}
+  >
+    <GGEditor className={styles.editor}>
+      <Row type="flex" className={styles.editorHd}>
+        <Col span={24}>
+          <KoniToolbar />
+        </Col>
+      </Row>
+      <Row type="flex" className={styles.editorBd}>
+        <Col span={2} className={styles.editorSidebar}>
+          <KoniItemPanel />
+        </Col>
+        <Col span={16} className={styles.editorContent}>
+          <Koni className={styles.koni} />
+        </Col>
+        <Col span={6} className={styles.editorSidebar}>
+          <KoniDetailPanel />
+          <EditorMinimap />
+        </Col>
+      </Row>
+      <KoniContextMenu />
+    </GGEditor>
+  </PageHeaderWrapper>
+);
diff --git a/EditorMind/README.md b/EditorMind/README.md
index dbe39275..12e6a46c 100644
--- a/EditorMind/README.md
+++ b/EditorMind/README.md
@@ -7,6 +7,7 @@ flow
 ```sh
 umi block add ant-design-pro/flow
 ```
+
 ## SNAPSHOT
 
 ![SNAPSHOT](./snapshot.png)
diff --git a/EditorMind/package.json b/EditorMind/package.json
index 1bf18eff..31ec4a21 100644
--- a/EditorMind/package.json
+++ b/EditorMind/package.json
@@ -12,6 +12,7 @@
     "dev": "umi dev"
   },
   "dependencies": {
+    "@ant-design/pro-layout": "^4.5.5",
     "@antv/data-set": "^0.10.2",
     "antd": "^3.16.3",
     "bizcharts": "^3.5.3-beta.0",
@@ -22,13 +23,13 @@
     "numeral": "^2.0.6",
     "react": "^16.6.3",
     "react-fittext": "^1.0.0",
+    "umi-plugin-react": "^1.7.2",
     "umi-request": "^1.0.0"
   },
   "devDependencies": {
+    "@types/numeral": "^0.0.25",
     "umi": "^2.6.9",
-    "umi-plugin-block-dev": "^1.1.0",
-    "umi-plugin-react": "^1.7.2",
-    "@types/numeral": "^0.0.25"
+    "umi-plugin-block-dev": "^1.1.0"
   },
   "blockConfig": {
     "specVersion": "0.1"
diff --git a/EditorMind/src/components/EditorContextMenu/FlowContextMenu.tsx b/EditorMind/src/components/EditorContextMenu/FlowContextMenu.tsx
index cbb7041f..32f17aa1 100644
--- a/EditorMind/src/components/EditorContextMenu/FlowContextMenu.tsx
+++ b/EditorMind/src/components/EditorContextMenu/FlowContextMenu.tsx
@@ -1,36 +1,35 @@
+import { CanvasMenu, ContextMenu, EdgeMenu, GroupMenu, MultiMenu, NodeMenu } from 'gg-editor';
+
 import React from 'react';
-import { NodeMenu, EdgeMenu, GroupMenu, MultiMenu, CanvasMenu, ContextMenu } from 'gg-editor';
 import MenuItem from './MenuItem';
 import styles from './index.less';
 
-const FlowContextMenu = () => {
-  return (
-    <ContextMenu className={styles.contextMenu}>
-      <NodeMenu>
-        <MenuItem command="copy" />
-        <MenuItem command="delete" />
-      </NodeMenu>
-      <EdgeMenu>
-        <MenuItem command="delete" />
-      </EdgeMenu>
-      <GroupMenu>
-        <MenuItem command="copy" />
-        <MenuItem command="delete" />
-        <MenuItem command="unGroup" icon="ungroup" text="Ungroup" />
-      </GroupMenu>
-      <MultiMenu>
-        <MenuItem command="copy" />
-        <MenuItem command="paste" />
-        <MenuItem command="addGroup" icon="group" text="Add Group" />
-        <MenuItem command="delete" />
-      </MultiMenu>
-      <CanvasMenu>
-        <MenuItem command="undo" />
-        <MenuItem command="redo" />
-        <MenuItem command="pasteHere" icon="paste" text="Paste Here" />
-      </CanvasMenu>
-    </ContextMenu>
-  );
-};
+const FlowContextMenu = () => (
+  <ContextMenu className={styles.contextMenu}>
+    <NodeMenu>
+      <MenuItem command="copy" />
+      <MenuItem command="delete" />
+    </NodeMenu>
+    <EdgeMenu>
+      <MenuItem command="delete" />
+    </EdgeMenu>
+    <GroupMenu>
+      <MenuItem command="copy" />
+      <MenuItem command="delete" />
+      <MenuItem command="unGroup" icon="ungroup" text="Ungroup" />
+    </GroupMenu>
+    <MultiMenu>
+      <MenuItem command="copy" />
+      <MenuItem command="paste" />
+      <MenuItem command="addGroup" icon="group" text="Add Group" />
+      <MenuItem command="delete" />
+    </MultiMenu>
+    <CanvasMenu>
+      <MenuItem command="undo" />
+      <MenuItem command="redo" />
+      <MenuItem command="pasteHere" icon="paste" text="Paste Here" />
+    </CanvasMenu>
+  </ContextMenu>
+);
 
 export default FlowContextMenu;
diff --git a/EditorMind/src/components/EditorContextMenu/MenuItem.tsx b/EditorMind/src/components/EditorContextMenu/MenuItem.tsx
index afbefe31..63b584ca 100644
--- a/EditorMind/src/components/EditorContextMenu/MenuItem.tsx
+++ b/EditorMind/src/components/EditorContextMenu/MenuItem.tsx
@@ -1,11 +1,10 @@
-import React from 'react';
 import { Command } from 'gg-editor';
+import React from 'react';
 import IconFont from '../../common/IconFont';
 import styles from './index.less';
 
-const upperFirst = (str: string) => {
-  return str.toLowerCase().replace(/( |^)[a-z]/g, (l: string) => l.toUpperCase());
-};
+const upperFirst = (str: string) =>
+  str.toLowerCase().replace(/( |^)[a-z]/g, (l: string) => l.toUpperCase());
 
 interface MenuItemProps {
   command: string;
diff --git a/EditorMind/src/components/EditorContextMenu/MindContextMenu.tsx b/EditorMind/src/components/EditorContextMenu/MindContextMenu.tsx
index 2a9d43cd..2dc5247d 100644
--- a/EditorMind/src/components/EditorContextMenu/MindContextMenu.tsx
+++ b/EditorMind/src/components/EditorContextMenu/MindContextMenu.tsx
@@ -1,24 +1,23 @@
+import { CanvasMenu, ContextMenu, NodeMenu } from 'gg-editor';
+
 import React from 'react';
-import { NodeMenu, CanvasMenu, ContextMenu } from 'gg-editor';
 import MenuItem from './MenuItem';
 import styles from './index.less';
 
-const MindContextMenu = () => {
-  return (
-    <ContextMenu className={styles.contextMenu}>
-      <NodeMenu>
-        <MenuItem command="append" text="Topic" />
-        <MenuItem command="appendChild" icon="append-child" text="Subtopic" />
-        <MenuItem command="collapse" text="Fold" />
-        <MenuItem command="expand" text="Unfold" />
-        <MenuItem command="delete" />
-      </NodeMenu>
-      <CanvasMenu>
-        <MenuItem command="undo" />
-        <MenuItem command="redo" />
-      </CanvasMenu>
-    </ContextMenu>
-  );
-};
+const MindContextMenu = () => (
+  <ContextMenu className={styles.contextMenu}>
+    <NodeMenu>
+      <MenuItem command="append" text="Topic" />
+      <MenuItem command="appendChild" icon="append-child" text="Subtopic" />
+      <MenuItem command="collapse" text="Fold" />
+      <MenuItem command="expand" text="Unfold" />
+      <MenuItem command="delete" />
+    </NodeMenu>
+    <CanvasMenu>
+      <MenuItem command="undo" />
+      <MenuItem command="redo" />
+    </CanvasMenu>
+  </ContextMenu>
+);
 
 export default MindContextMenu;
diff --git a/EditorMind/src/components/EditorContextMenu/index.tsx b/EditorMind/src/components/EditorContextMenu/index.tsx
index 16fcde01..6ee93423 100644
--- a/EditorMind/src/components/EditorContextMenu/index.tsx
+++ b/EditorMind/src/components/EditorContextMenu/index.tsx
@@ -1,5 +1,5 @@
 import FlowContextMenu from './FlowContextMenu';
-import MindContextMenu from './MindContextMenu';
 import KoniContextMenu from './KoniContextMenu';
+import MindContextMenu from './MindContextMenu';
 
 export { FlowContextMenu, MindContextMenu, KoniContextMenu };
diff --git a/EditorMind/src/components/EditorDetailPanel/DetailForm.tsx b/EditorMind/src/components/EditorDetailPanel/DetailForm.tsx
index 0a9690d7..713d6dbb 100644
--- a/EditorMind/src/components/EditorDetailPanel/DetailForm.tsx
+++ b/EditorMind/src/components/EditorDetailPanel/DetailForm.tsx
@@ -1,11 +1,11 @@
-import React, { Fragment } from 'react';
 import { Card, Form, Input, Select } from 'antd';
-import { withPropsAPI } from 'gg-editor';
+import React, { Fragment } from 'react';
+
 import { FormComponentProps } from 'antd/es/form';
+import { withPropsAPI } from 'gg-editor';
 
-const upperFirst = (str: string) => {
-  return str.toLowerCase().replace(/( |^)[a-z]/g, (l: string) => l.toUpperCase());
-};
+const upperFirst = (str: string) =>
+  str.toLowerCase().replace(/( |^)[a-z]/g, (l: string) => l.toUpperCase());
 
 const { Item } = Form;
 const { Option } = Select;
@@ -60,15 +60,13 @@ class DetailForm extends React.Component<DetailFormProps> {
     }, 0);
   };
 
-  renderEdgeShapeSelect = () => {
-    return (
-      <Select onChange={this.handleSubmit}>
-        <Option value="flow-smooth">Smooth</Option>
-        <Option value="flow-polyline">Polyline</Option>
-        <Option value="flow-polyline-round">Polyline Round</Option>
-      </Select>
-    );
-  };
+  renderEdgeShapeSelect = () => (
+    <Select onChange={this.handleSubmit}>
+      <Option value="flow-smooth">Smooth</Option>
+      <Option value="flow-polyline">Polyline</Option>
+      <Option value="flow-polyline-round">Polyline Round</Option>
+    </Select>
+  );
 
   renderNodeDetail = () => {
     const { form } = this.props;
diff --git a/EditorMind/src/components/EditorDetailPanel/FlowDetailPanel.tsx b/EditorMind/src/components/EditorDetailPanel/FlowDetailPanel.tsx
index 8d681618..ce38ea16 100644
--- a/EditorMind/src/components/EditorDetailPanel/FlowDetailPanel.tsx
+++ b/EditorMind/src/components/EditorDetailPanel/FlowDetailPanel.tsx
@@ -1,29 +1,28 @@
-import React from 'react';
+import { CanvasPanel, DetailPanel, EdgePanel, GroupPanel, MultiPanel, NodePanel } from 'gg-editor';
+
 import { Card } from 'antd';
-import { NodePanel, EdgePanel, GroupPanel, MultiPanel, CanvasPanel, DetailPanel } from 'gg-editor';
+import React from 'react';
 import DetailForm from './DetailForm';
 import styles from './index.less';
 
-const FlowDetailPanel = () => {
-  return (
-    <DetailPanel className={styles.detailPanel}>
-      <NodePanel>
-        <DetailForm type="node" />
-      </NodePanel>
-      <EdgePanel>
-        <DetailForm type="edge" />
-      </EdgePanel>
-      <GroupPanel>
-        <DetailForm type="group" />
-      </GroupPanel>
-      <MultiPanel>
-        <Card type="inner" size="small" title="Multi Select" bordered={false} />
-      </MultiPanel>
-      <CanvasPanel>
-        <Card type="inner" size="small" title="Canvas" bordered={false} />
-      </CanvasPanel>
-    </DetailPanel>
-  );
-};
+const FlowDetailPanel = () => (
+  <DetailPanel className={styles.detailPanel}>
+    <NodePanel>
+      <DetailForm type="node" />
+    </NodePanel>
+    <EdgePanel>
+      <DetailForm type="edge" />
+    </EdgePanel>
+    <GroupPanel>
+      <DetailForm type="group" />
+    </GroupPanel>
+    <MultiPanel>
+      <Card type="inner" size="small" title="Multi Select" bordered={false} />
+    </MultiPanel>
+    <CanvasPanel>
+      <Card type="inner" size="small" title="Canvas" bordered={false} />
+    </CanvasPanel>
+  </DetailPanel>
+);
 
 export default FlowDetailPanel;
diff --git a/EditorMind/src/components/EditorDetailPanel/MindDetailPanel.tsx b/EditorMind/src/components/EditorDetailPanel/MindDetailPanel.tsx
index 6b4d5c9e..bf8f4834 100644
--- a/EditorMind/src/components/EditorDetailPanel/MindDetailPanel.tsx
+++ b/EditorMind/src/components/EditorDetailPanel/MindDetailPanel.tsx
@@ -1,20 +1,19 @@
-import React from 'react';
+import { CanvasPanel, DetailPanel, NodePanel } from 'gg-editor';
+
 import { Card } from 'antd';
-import { NodePanel, CanvasPanel, DetailPanel } from 'gg-editor';
+import React from 'react';
 import DetailForm from './DetailForm';
 import styles from './index.less';
 
-const MindDetailPanel = () => {
-  return (
-    <DetailPanel className={styles.detailPanel}>
-      <NodePanel>
-        <DetailForm type="node" />
-      </NodePanel>
-      <CanvasPanel>
-        <Card type="inner" size="small" title="Canvas" bordered={false} />
-      </CanvasPanel>
-    </DetailPanel>
-  );
-};
+const MindDetailPanel = () => (
+  <DetailPanel className={styles.detailPanel}>
+    <NodePanel>
+      <DetailForm type="node" />
+    </NodePanel>
+    <CanvasPanel>
+      <Card type="inner" size="small" title="Canvas" bordered={false} />
+    </CanvasPanel>
+  </DetailPanel>
+);
 
 export default MindDetailPanel;
diff --git a/EditorMind/src/components/EditorDetailPanel/index.tsx b/EditorMind/src/components/EditorDetailPanel/index.tsx
index 8df063ef..50aa37a8 100644
--- a/EditorMind/src/components/EditorDetailPanel/index.tsx
+++ b/EditorMind/src/components/EditorDetailPanel/index.tsx
@@ -1,5 +1,5 @@
 import FlowDetailPanel from './FlowDetailPanel';
-import MindDetailPanel from './MindDetailPanel';
 import KoniDetailPanel from './KoniDetailPanel';
+import MindDetailPanel from './MindDetailPanel';
 
 export { FlowDetailPanel, MindDetailPanel, KoniDetailPanel };
diff --git a/EditorMind/src/components/EditorItemPanel/FlowItemPanel.tsx b/EditorMind/src/components/EditorItemPanel/FlowItemPanel.tsx
index e6912793..dce9855d 100644
--- a/EditorMind/src/components/EditorItemPanel/FlowItemPanel.tsx
+++ b/EditorMind/src/components/EditorItemPanel/FlowItemPanel.tsx
@@ -1,55 +1,54 @@
-import React from 'react';
+import { Item, ItemPanel } from 'gg-editor';
+
 import { Card } from 'antd';
-import { ItemPanel, Item } from 'gg-editor';
+import React from 'react';
 import styles from './index.less';
 
-const FlowItemPanel = () => {
-  return (
-    <ItemPanel className={styles.itemPanel}>
-      <Card bordered={false}>
-        <Item
-          type="node"
-          size="72*72"
-          shape="flow-circle"
-          model={{
-            color: '#FA8C16',
-            label: 'Start',
-          }}
-          src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAiIGhlaWdodD0iODAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxjaXJjbGUgaWQ9ImIiIGN4PSIzNiIgY3k9IjM2IiByPSIzNiIvPjxmaWx0ZXIgeD0iLTkuNyUiIHk9Ii02LjklIiB3aWR0aD0iMTE5LjQlIiBoZWlnaHQ9IjExOS40JSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiBpZD0iYSI+PGZlT2Zmc2V0IGR5PSIyIiBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIi8+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMiIgaW49InNoYWRvd09mZnNldE91dGVyMSIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29tcG9zaXRlIGluPSJzaGFkb3dCbHVyT3V0ZXIxIiBpbjI9IlNvdXJjZUFscGhhIiBvcGVyYXRvcj0ib3V0IiByZXN1bHQ9InNoYWRvd0JsdXJPdXRlcjEiLz48ZmVDb2xvck1hdHJpeCB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAuMDQgMCIgaW49InNoYWRvd0JsdXJPdXRlcjEiLz48L2ZpbHRlcj48L2RlZnM+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0IDIpIj48dXNlIGZpbGw9IiMwMDAiIGZpbHRlcj0idXJsKCNhKSIgeGxpbms6aHJlZj0iI2IiLz48dXNlIGZpbGwtb3BhY2l0eT0iLjkyIiBmaWxsPSIjRkZGMkU4IiB4bGluazpocmVmPSIjYiIvPjxjaXJjbGUgc3Ryb2tlPSIjRkZDMDY5IiBjeD0iMzYiIGN5PSIzNiIgcj0iMzUuNSIvPjwvZz48dGV4dCBmb250LWZhbWlseT0iUGluZ0ZhbmdTQy1SZWd1bGFyLCBQaW5nRmFuZyBTQyIgZm9udC1zaXplPSIxMiIgZmlsbD0iIzAwMCIgZmlsbC1vcGFjaXR5PSIuNjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQgMikiPjx0c3BhbiB4PSIyMyIgeT0iNDEiPlN0YXJ0PC90c3Bhbj48L3RleHQ+PC9nPjwvc3ZnPg=="
-        />
-        <Item
-          type="node"
-          size="80*48"
-          shape="flow-rect"
-          model={{
-            color: '#1890FF',
-            label: 'Normal',
-          }}
-          src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODgiIGhlaWdodD0iNTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxyZWN0IGlkPSJiIiB4PSIwIiB5PSIwIiB3aWR0aD0iODAiIGhlaWdodD0iNDgiIHJ4PSI0Ii8+PGZpbHRlciB4PSItOC44JSIgeT0iLTEwLjQlIiB3aWR0aD0iMTE3LjUlIiBoZWlnaHQ9IjEyOS4yJSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiBpZD0iYSI+PGZlT2Zmc2V0IGR5PSIyIiBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIi8+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMiIgaW49InNoYWRvd09mZnNldE91dGVyMSIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29tcG9zaXRlIGluPSJzaGFkb3dCbHVyT3V0ZXIxIiBpbjI9IlNvdXJjZUFscGhhIiBvcGVyYXRvcj0ib3V0IiByZXN1bHQ9InNoYWRvd0JsdXJPdXRlcjEiLz48ZmVDb2xvck1hdHJpeCB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAuMDQgMCIgaW49InNoYWRvd0JsdXJPdXRlcjEiLz48L2ZpbHRlcj48L2RlZnM+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0IDIpIj48dXNlIGZpbGw9IiMwMDAiIGZpbHRlcj0idXJsKCNhKSIgeGxpbms6aHJlZj0iI2IiLz48dXNlIGZpbGwtb3BhY2l0eT0iLjkyIiBmaWxsPSIjRTZGN0ZGIiB4bGluazpocmVmPSIjYiIvPjxyZWN0IHN0cm9rZT0iIzE4OTBGRiIgeD0iLjUiIHk9Ii41IiB3aWR0aD0iNzkiIGhlaWdodD0iNDciIHJ4PSI0Ii8+PC9nPjx0ZXh0IGZvbnQtZmFtaWx5PSJQaW5nRmFuZ1NDLVJlZ3VsYXIsIFBpbmdGYW5nIFNDIiBmb250LXNpemU9IjEyIiBmaWxsPSIjMDAwIiBmaWxsLW9wYWNpdHk9Ii42NSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNCAyKSI+PHRzcGFuIHg9IjIxIiB5PSIyOSI+Tm9ybWFsPC90c3Bhbj48L3RleHQ+PC9nPjwvc3ZnPg=="
-        />
-        <Item
-          type="node"
-          size="80*72"
-          shape="flow-rhombus"
-          model={{
-            color: '#13C2C2',
-            label: 'Decision',
-          }}
-          src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODYiIGhlaWdodD0iNzgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxwYXRoIGQ9Ik00Mi42NyAxLjY3bDM0Ljk2NSAzMS4zNTJhNCA0IDAgMCAxIDAgNS45NTZMNDIuNjcgNzAuMzNhNCA0IDAgMCAxLTUuMzQgMEwyLjM2NSAzOC45NzhhNCA0IDAgMCAxIDAtNS45NTZMMzcuMzMgMS42N2E0IDQgMCAwIDEgNS4zNCAweiIgaWQ9ImIiLz48ZmlsdGVyIHg9Ii04LjglIiB5PSItNi45JSIgd2lkdGg9IjExNy41JSIgaGVpZ2h0PSIxMTkuNCUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9ImEiPjxmZU9mZnNldCBkeT0iMiIgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSIvPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSIvPjxmZUNvbXBvc2l0ZSBpbj0ic2hhZG93Qmx1ck91dGVyMSIgaW4yPSJTb3VyY2VBbHBoYSIgb3BlcmF0b3I9Im91dCIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjA0IDAiIGluPSJzaGFkb3dCbHVyT3V0ZXIxIi8+PC9maWx0ZXI+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMyAxKSI+PHVzZSBmaWxsPSIjMDAwIiBmaWx0ZXI9InVybCgjYSkiIHhsaW5rOmhyZWY9IiNiIi8+PHVzZSBmaWxsLW9wYWNpdHk9Ii45MiIgZmlsbD0iI0U2RkZGQiIgeGxpbms6aHJlZj0iI2IiLz48cGF0aCBzdHJva2U9IiM1Q0RCRDMiIGQ9Ik00Mi4zMzcgMi4wNDJhMy41IDMuNSAwIDAgMC00LjY3NCAwTDIuNjk4IDMzLjM5NGEzLjUgMy41IDAgMCAwIDAgNS4yMTJsMzQuOTY1IDMxLjM1MmEzLjUgMy41IDAgMCAwIDQuNjc0IDBsMzQuOTY1LTMxLjM1MmEzLjUgMy41IDAgMCAwIDAtNS4yMTJMNDIuMzM3IDIuMDQyeiIvPjwvZz48dGV4dCBmb250LWZhbWlseT0iUGluZ0ZhbmdTQy1SZWd1bGFyLCBQaW5nRmFuZyBTQyIgZm9udC1zaXplPSIxMiIgZmlsbD0iIzAwMCIgZmlsbC1vcGFjaXR5PSIuNjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMgMSkiPjx0c3BhbiB4PSIxOCIgeT0iNDIiPkRlY2lzaW9uPC90c3Bhbj48L3RleHQ+PC9nPjwvc3ZnPg=="
-        />
-        <Item
-          type="node"
-          size="80*48"
-          shape="flow-capsule"
-          model={{
-            color: '#722ED1',
-            label: 'Model',
-          }}
-          src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODgiIGhlaWdodD0iNTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxyZWN0IGlkPSJiIiB4PSIwIiB5PSIwIiB3aWR0aD0iODAiIGhlaWdodD0iNDgiIHJ4PSIyNCIvPjxmaWx0ZXIgeD0iLTguOCUiIHk9Ii0xMC40JSIgd2lkdGg9IjExNy41JSIgaGVpZ2h0PSIxMjkuMiUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9ImEiPjxmZU9mZnNldCBkeT0iMiIgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSIvPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSIvPjxmZUNvbXBvc2l0ZSBpbj0ic2hhZG93Qmx1ck91dGVyMSIgaW4yPSJTb3VyY2VBbHBoYSIgb3BlcmF0b3I9Im91dCIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjA0IDAiIGluPSJzaGFkb3dCbHVyT3V0ZXIxIi8+PC9maWx0ZXI+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNCAyKSI+PHVzZSBmaWxsPSIjMDAwIiBmaWx0ZXI9InVybCgjYSkiIHhsaW5rOmhyZWY9IiNiIi8+PHVzZSBmaWxsLW9wYWNpdHk9Ii45MiIgZmlsbD0iI0Y5RjBGRiIgeGxpbms6aHJlZj0iI2IiLz48cmVjdCBzdHJva2U9IiNCMzdGRUIiIHg9Ii41IiB5PSIuNSIgd2lkdGg9Ijc5IiBoZWlnaHQ9IjQ3IiByeD0iMjMuNSIvPjwvZz48dGV4dCBmb250LWZhbWlseT0iUGluZ0ZhbmdTQy1SZWd1bGFyLCBQaW5nRmFuZyBTQyIgZm9udC1zaXplPSIxMiIgZmlsbD0iIzAwMCIgZmlsbC1vcGFjaXR5PSIuNjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQgMikiPjx0c3BhbiB4PSIyNCIgeT0iMjkiPk1vZGVsPC90c3Bhbj48L3RleHQ+PC9nPjwvc3ZnPg=="
-        />
-      </Card>
-    </ItemPanel>
-  );
-};
+const FlowItemPanel = () => (
+  <ItemPanel className={styles.itemPanel}>
+    <Card bordered={false}>
+      <Item
+        type="node"
+        size="72*72"
+        shape="flow-circle"
+        model={{
+          color: '#FA8C16',
+          label: 'Start',
+        }}
+        src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAiIGhlaWdodD0iODAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxjaXJjbGUgaWQ9ImIiIGN4PSIzNiIgY3k9IjM2IiByPSIzNiIvPjxmaWx0ZXIgeD0iLTkuNyUiIHk9Ii02LjklIiB3aWR0aD0iMTE5LjQlIiBoZWlnaHQ9IjExOS40JSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiBpZD0iYSI+PGZlT2Zmc2V0IGR5PSIyIiBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIi8+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMiIgaW49InNoYWRvd09mZnNldE91dGVyMSIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29tcG9zaXRlIGluPSJzaGFkb3dCbHVyT3V0ZXIxIiBpbjI9IlNvdXJjZUFscGhhIiBvcGVyYXRvcj0ib3V0IiByZXN1bHQ9InNoYWRvd0JsdXJPdXRlcjEiLz48ZmVDb2xvck1hdHJpeCB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAuMDQgMCIgaW49InNoYWRvd0JsdXJPdXRlcjEiLz48L2ZpbHRlcj48L2RlZnM+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0IDIpIj48dXNlIGZpbGw9IiMwMDAiIGZpbHRlcj0idXJsKCNhKSIgeGxpbms6aHJlZj0iI2IiLz48dXNlIGZpbGwtb3BhY2l0eT0iLjkyIiBmaWxsPSIjRkZGMkU4IiB4bGluazpocmVmPSIjYiIvPjxjaXJjbGUgc3Ryb2tlPSIjRkZDMDY5IiBjeD0iMzYiIGN5PSIzNiIgcj0iMzUuNSIvPjwvZz48dGV4dCBmb250LWZhbWlseT0iUGluZ0ZhbmdTQy1SZWd1bGFyLCBQaW5nRmFuZyBTQyIgZm9udC1zaXplPSIxMiIgZmlsbD0iIzAwMCIgZmlsbC1vcGFjaXR5PSIuNjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQgMikiPjx0c3BhbiB4PSIyMyIgeT0iNDEiPlN0YXJ0PC90c3Bhbj48L3RleHQ+PC9nPjwvc3ZnPg=="
+      />
+      <Item
+        type="node"
+        size="80*48"
+        shape="flow-rect"
+        model={{
+          color: '#1890FF',
+          label: 'Normal',
+        }}
+        src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODgiIGhlaWdodD0iNTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxyZWN0IGlkPSJiIiB4PSIwIiB5PSIwIiB3aWR0aD0iODAiIGhlaWdodD0iNDgiIHJ4PSI0Ii8+PGZpbHRlciB4PSItOC44JSIgeT0iLTEwLjQlIiB3aWR0aD0iMTE3LjUlIiBoZWlnaHQ9IjEyOS4yJSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiBpZD0iYSI+PGZlT2Zmc2V0IGR5PSIyIiBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIi8+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMiIgaW49InNoYWRvd09mZnNldE91dGVyMSIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29tcG9zaXRlIGluPSJzaGFkb3dCbHVyT3V0ZXIxIiBpbjI9IlNvdXJjZUFscGhhIiBvcGVyYXRvcj0ib3V0IiByZXN1bHQ9InNoYWRvd0JsdXJPdXRlcjEiLz48ZmVDb2xvck1hdHJpeCB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAuMDQgMCIgaW49InNoYWRvd0JsdXJPdXRlcjEiLz48L2ZpbHRlcj48L2RlZnM+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0IDIpIj48dXNlIGZpbGw9IiMwMDAiIGZpbHRlcj0idXJsKCNhKSIgeGxpbms6aHJlZj0iI2IiLz48dXNlIGZpbGwtb3BhY2l0eT0iLjkyIiBmaWxsPSIjRTZGN0ZGIiB4bGluazpocmVmPSIjYiIvPjxyZWN0IHN0cm9rZT0iIzE4OTBGRiIgeD0iLjUiIHk9Ii41IiB3aWR0aD0iNzkiIGhlaWdodD0iNDciIHJ4PSI0Ii8+PC9nPjx0ZXh0IGZvbnQtZmFtaWx5PSJQaW5nRmFuZ1NDLVJlZ3VsYXIsIFBpbmdGYW5nIFNDIiBmb250LXNpemU9IjEyIiBmaWxsPSIjMDAwIiBmaWxsLW9wYWNpdHk9Ii42NSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNCAyKSI+PHRzcGFuIHg9IjIxIiB5PSIyOSI+Tm9ybWFsPC90c3Bhbj48L3RleHQ+PC9nPjwvc3ZnPg=="
+      />
+      <Item
+        type="node"
+        size="80*72"
+        shape="flow-rhombus"
+        model={{
+          color: '#13C2C2',
+          label: 'Decision',
+        }}
+        src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODYiIGhlaWdodD0iNzgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxwYXRoIGQ9Ik00Mi42NyAxLjY3bDM0Ljk2NSAzMS4zNTJhNCA0IDAgMCAxIDAgNS45NTZMNDIuNjcgNzAuMzNhNCA0IDAgMCAxLTUuMzQgMEwyLjM2NSAzOC45NzhhNCA0IDAgMCAxIDAtNS45NTZMMzcuMzMgMS42N2E0IDQgMCAwIDEgNS4zNCAweiIgaWQ9ImIiLz48ZmlsdGVyIHg9Ii04LjglIiB5PSItNi45JSIgd2lkdGg9IjExNy41JSIgaGVpZ2h0PSIxMTkuNCUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9ImEiPjxmZU9mZnNldCBkeT0iMiIgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSIvPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSIvPjxmZUNvbXBvc2l0ZSBpbj0ic2hhZG93Qmx1ck91dGVyMSIgaW4yPSJTb3VyY2VBbHBoYSIgb3BlcmF0b3I9Im91dCIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjA0IDAiIGluPSJzaGFkb3dCbHVyT3V0ZXIxIi8+PC9maWx0ZXI+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMyAxKSI+PHVzZSBmaWxsPSIjMDAwIiBmaWx0ZXI9InVybCgjYSkiIHhsaW5rOmhyZWY9IiNiIi8+PHVzZSBmaWxsLW9wYWNpdHk9Ii45MiIgZmlsbD0iI0U2RkZGQiIgeGxpbms6aHJlZj0iI2IiLz48cGF0aCBzdHJva2U9IiM1Q0RCRDMiIGQ9Ik00Mi4zMzcgMi4wNDJhMy41IDMuNSAwIDAgMC00LjY3NCAwTDIuNjk4IDMzLjM5NGEzLjUgMy41IDAgMCAwIDAgNS4yMTJsMzQuOTY1IDMxLjM1MmEzLjUgMy41IDAgMCAwIDQuNjc0IDBsMzQuOTY1LTMxLjM1MmEzLjUgMy41IDAgMCAwIDAtNS4yMTJMNDIuMzM3IDIuMDQyeiIvPjwvZz48dGV4dCBmb250LWZhbWlseT0iUGluZ0ZhbmdTQy1SZWd1bGFyLCBQaW5nRmFuZyBTQyIgZm9udC1zaXplPSIxMiIgZmlsbD0iIzAwMCIgZmlsbC1vcGFjaXR5PSIuNjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMgMSkiPjx0c3BhbiB4PSIxOCIgeT0iNDIiPkRlY2lzaW9uPC90c3Bhbj48L3RleHQ+PC9nPjwvc3ZnPg=="
+      />
+      <Item
+        type="node"
+        size="80*48"
+        shape="flow-capsule"
+        model={{
+          color: '#722ED1',
+          label: 'Model',
+        }}
+        src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODgiIGhlaWdodD0iNTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxyZWN0IGlkPSJiIiB4PSIwIiB5PSIwIiB3aWR0aD0iODAiIGhlaWdodD0iNDgiIHJ4PSIyNCIvPjxmaWx0ZXIgeD0iLTguOCUiIHk9Ii0xMC40JSIgd2lkdGg9IjExNy41JSIgaGVpZ2h0PSIxMjkuMiUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9ImEiPjxmZU9mZnNldCBkeT0iMiIgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSIvPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSIvPjxmZUNvbXBvc2l0ZSBpbj0ic2hhZG93Qmx1ck91dGVyMSIgaW4yPSJTb3VyY2VBbHBoYSIgb3BlcmF0b3I9Im91dCIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjA0IDAiIGluPSJzaGFkb3dCbHVyT3V0ZXIxIi8+PC9maWx0ZXI+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNCAyKSI+PHVzZSBmaWxsPSIjMDAwIiBmaWx0ZXI9InVybCgjYSkiIHhsaW5rOmhyZWY9IiNiIi8+PHVzZSBmaWxsLW9wYWNpdHk9Ii45MiIgZmlsbD0iI0Y5RjBGRiIgeGxpbms6aHJlZj0iI2IiLz48cmVjdCBzdHJva2U9IiNCMzdGRUIiIHg9Ii41IiB5PSIuNSIgd2lkdGg9Ijc5IiBoZWlnaHQ9IjQ3IiByeD0iMjMuNSIvPjwvZz48dGV4dCBmb250LWZhbWlseT0iUGluZ0ZhbmdTQy1SZWd1bGFyLCBQaW5nRmFuZyBTQyIgZm9udC1zaXplPSIxMiIgZmlsbD0iIzAwMCIgZmlsbC1vcGFjaXR5PSIuNjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQgMikiPjx0c3BhbiB4PSIyNCIgeT0iMjkiPk1vZGVsPC90c3Bhbj48L3RleHQ+PC9nPjwvc3ZnPg=="
+      />
+    </Card>
+  </ItemPanel>
+);
 
 export default FlowItemPanel;
diff --git a/EditorMind/src/components/EditorItemPanel/KoniItemPanel.tsx b/EditorMind/src/components/EditorItemPanel/KoniItemPanel.tsx
index 9df51f98..ad446f80 100644
--- a/EditorMind/src/components/EditorItemPanel/KoniItemPanel.tsx
+++ b/EditorMind/src/components/EditorItemPanel/KoniItemPanel.tsx
@@ -1,54 +1,53 @@
-import React from 'react';
+import { Item, ItemPanel } from 'gg-editor';
+
 import { Card } from 'antd';
-import { ItemPanel, Item } from 'gg-editor';
+import React from 'react';
 import styles from './index.less';
 
-const KoniItemPanel = () => {
-  return (
-    <ItemPanel className={styles.itemPanel}>
-      <Card bordered={false}>
-        <Item
-          type="node"
-          size="40"
-          shape="koni-custom-node"
-          model={{
-            color: '#69C0FF',
-            label: 'Bank',
-            labelOffsetY: 28,
-            icon:
-              'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEyLjM1IDExLjUxNGwuMDEtLjAxNEE2Ljk2NiA2Ljk2NiAwIDAgMCAxNCA3YTYuOTczIDYuOTczIDAgMCAwLTEuNjM3LTQuNWwtLjAxMS0uMDEzLS4wNS0uMDU3LS4wMi0uMDIyLS4wNjMtLjA3NC0uMDAyLS4wMDEtLjA3Mi0uMDgtLjAwMS0uMDAxYy0uMDUtLjA1NC0uMS0uMTA3LS4xNTItLjE1OGwtLjAwMS0uMDAyLS4wNzUtLjA3NS0uMDA1LS4wMDQtLjA3LS4wNjgtLjAyNS0uMDIzLS4wNDctLjA0NC0uMDE2LS4wMTZBNi45NjYgNi45NjYgMCAwIDAgNyAwYTYuOTczIDYuOTczIDAgMCAwLTQuNzU1IDEuODYybC0uMDE1LjAxNi0uMDQ3LjA0NS0uMDI1LjAyNC0uMDcuMDY3LS4wMDUuMDA1LS4wNzUuMDc1LS4wMDIuMDAxLS4xNTEuMTU4LS4wMDIuMDAyYTMuMzA5IDMuMzA5IDAgMCAwLS4wNzIuMDhIMS43OGExLjQzNiAxLjQzNiAwIDAgMC0uMDY0LjA3NGwtLjAyLjAyMmMtLjAxNi4wMTktLjAzMi4wNC0uMDUuMDU4LS4wMDIuMDA1LS4wMDcuMDA4LS4wMS4wMTNBNi45NzMgNi45NzMgMCAwIDAgMCA3YzAgMS43MTQuNjE2IDMuMjgzIDEuNjM4IDQuNWwuMDEuMDE0LjA0OS4wNTguMDE5LjAyMi4wNjQuMDczLjAwMS4wMDNjLjAyNC4wMjcuMDQ3LjA1My4wNzIuMDc4bC4wMDIuMDAyLjE1LjE1OC4wMDEuMDAxLjA3NC4wNzQuMDA0LjAwNUE2Ljk4NyA2Ljk4NyAwIDAgMCA3IDE0YTYuOTczIDYuOTczIDAgMCAwIDQuOTEtMi4wMTJsLjAwNi0uMDA1Yy4wMjUtLjAyNS4wNS0uMDQ5LjA3My0uMDc0bC4wMDItLjAwMWE0LjczIDQuNzMgMCAwIDAgLjE1LS4xNThsLjAwMS0uMDAyYy4wMjQtLjAyNi4wNDktLjA1MS4wNzItLjA3OCAwLS4wMDEuMDAyLS4wMDEuMDAyLS4wMDMuMDIyLS4wMjMuMDQzLS4wNDguMDY0LS4wNzNsLjAxOC0uMDIyYy4wMi0uMDIuMDM2LS4wNC4wNTItLjA1OHptLjA2NC0yLjIyOGMtLjIxNi41MS0uNS45ODEtLjg0NyAxLjQxYTYuOTM5IDYuOTM5IDAgMCAwLTEuMjczLS44NzRjLjE4MS0uNzMzLjI5My0xLjUzOC4zMjMtMi4zODRoMi4yNDJhNS44NDIgNS44NDIgMCAwIDEtLjQ0NSAxLjg0OHptLjQ0NS0yLjcyM2gtMi4yNDJhMTEuNjgxIDExLjY4MSAwIDAgMC0uMzIzLTIuMzg1IDYuOTM5IDYuOTM5IDAgMCAwIDEuMjczLS44NzMgNS44NDIgNS44NDIgMCAwIDEgMS4yOTIgMy4yNTh6TTkuMjg2IDEuNTg1YTUuODQgNS44NCAwIDAgMSAxLjY4MSAxLjA4MWMtLjI4OS4yNDctLjYuNDY0LS45MjguNjUzLS4yNDUtLjcwMy0uNTYtMS4zMTQtLjkyNS0xLjgwMy4wNTguMDIyLjExNi4wNDYuMTcyLjA2OXpNNy44NyAxMi41MzNhMS43NjggMS43NjggMCAwIDEtLjQzMy4yNTZWOS44OTFhNi4wOCA2LjA4IDAgMCAxIDEuODA4LjQwOWMtLjEzLjM4NC0uMjguNzQtLjQ1MyAxLjA2LS4yNzIuNTA2LS41OS45MS0uOTIyIDEuMTczem0uOTIyLTkuODkyYy4xNzIuMzIxLjMyNC42NzYuNDUzIDEuMDU5YTYuMDggNi4wOCAwIDAgMS0xLjgwNy40MVYxLjIxMWMuMTQzLjA1OC4yODkuMTQzLjQzMi4yNTcuMzMyLjI2LjY1LjY2NS45MjIgMS4xNzJ6TTcuNDM4IDkuMDE0VjcuNDM4aDIuMzA0Yy0uMDI1LjY5LS4xMSAxLjM2LS4yNTUgMS45OTZsLS4wMDQuMDJhNi45NTMgNi45NTMgMCAwIDAtMi4wNDYtLjQ0em0wLTIuNDUxVjQuOTg2YTYuOTUzIDYuOTUzIDAgMCAwIDIuMDQ1LS40NGwuMDA1LjAyYy4xNDMuNjM2LjIzIDEuMzA0LjI1NCAxLjk5N0g3LjQzN3ptLS44NzUuODc1djEuNTc2YTYuOTUzIDYuOTUzIDAgMCAwLTIuMDQ2LjQ0bC0uMDA1LS4wMmExMC44MzUgMTAuODM1IDAgMCAxLS4yNTQtMS45OTZoMi4zMDR6bS0yLjMwNS0uODc1Yy4wMjUtLjY5MS4xMS0xLjM2MS4yNTUtMS45OTdsLjAwNC0uMDJhNi45NDMgNi45NDMgMCAwIDAgMi4wNDUuNDR2MS41NzdINC4yNTh6TTYuNTYyIDkuODl2Mi44OTZhMS43NDggMS43NDggMCAwIDEtLjQzMi0uMjU2Yy0uMzMyLS4yNi0uNjUyLS42NjctLjkyNC0xLjE3M2E3LjA2IDcuMDYgMCAwIDEtLjQ1My0xLjA2IDYuMDk4IDYuMDk4IDAgMCAxIDEuODEtLjQwN3ptMC01Ljc4MkE2LjA4IDYuMDggMCAwIDEgNC43NTUgMy43Yy4xMy0uMzg0LjI4LS43NC40NTMtMS4wNi4yNzItLjUwNi41OS0uOTEyLjkyMy0xLjE3M2ExLjggMS44IDAgMCAxIC40MzMtLjI1NnYyLjg5OGgtLjAwMnpNNC43MTUgMS41ODZjLjA1OC0uMDI0LjExNC0uMDQ3LjE3Mi0uMDY5LS4zNjYuNDktLjY4IDEuMS0uOTI1IDEuODAzYTYuMDU3IDYuMDU3IDAgMCAxLS45MjgtLjY1MyA1Ljg0IDUuODQgMCAwIDEgMS42ODEtMS4wODF6TTEuNTg2IDQuNzE0Yy4yMTYtLjUxLjUtLjk4MS44NDctMS40MS4zODkuMzM3LjgxNS42MyAxLjI3My44NzRhMTEuNjgxIDExLjY4MSAwIDAgMC0uMzIzIDIuMzg1SDEuMTRhNS44IDUuOCAwIDAgMSAuNDQ1LTEuODQ5ek0xLjE0IDcuNDM3aDIuMjQyYy4wMy44NDcuMTQyIDEuNjUyLjMyMyAyLjM4NWE2LjkzOSA2LjkzOSAwIDAgMC0xLjI3My44NzNBNS44NDIgNS44NDIgMCAwIDEgMS4xNCA3LjQzN3ptMy41NzMgNC45NzdhNS44NCA1Ljg0IDAgMCAxLTEuNjgxLTEuMDgxYy4yODktLjI0Ny42LS40NjQuOTI4LS42NTMuMjQ1LjcwMy41NiAxLjMxNC45MjUgMS44MDNhNS42MjQgNS42MjQgMCAwIDEtLjE3Mi0uMDY5em00LjU3MiAwYTYuMTY4IDYuMTY4IDAgMCAxLS4xNzIuMDY5Yy4zNjYtLjQ5LjY4LTEuMS45MjUtMS44MDMuMzI4LjE4Ny42NC40MDYuOTI4LjY1M2E1Ljg0IDUuODQgMCAwIDEtMS42ODEgMS4wODF6IiBmaWxsPSIjRkZGIi8+PC9zdmc+',
-          }}
-          src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxjaXJjbGUgaWQ9ImIiIGN4PSIyMCIgY3k9IjIwIiByPSIyMCIvPjxmaWx0ZXIgeD0iLTE3LjUlIiB5PSItMTIuNSUiIHdpZHRoPSIxMzUlIiBoZWlnaHQ9IjEzNSUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9ImEiPjxmZU9mZnNldCBkeT0iMiIgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSIvPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSIvPjxmZUNvbXBvc2l0ZSBpbj0ic2hhZG93Qmx1ck91dGVyMSIgaW4yPSJTb3VyY2VBbHBoYSIgb3BlcmF0b3I9Im91dCIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjA0IDAiIGluPSJzaGFkb3dCbHVyT3V0ZXIxIi8+PC9maWx0ZXI+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNCAyKSI+PHVzZSBmaWxsPSIjMDAwIiBmaWx0ZXI9InVybCgjYSkiIHhsaW5rOmhyZWY9IiNiIi8+PGNpcmNsZSBzdHJva2U9IiM2OUMwRkYiIHN0cm9rZS1saW5lam9pbj0ic3F1YXJlIiBmaWxsLW9wYWNpdHk9Ii45MiIgZmlsbD0iIzY5QzBGRiIgY3g9IjIwIiBjeT0iMjAiIHI9IjE5LjUiLz48L2c+PHBhdGggZD0iTTI5LjM1IDI2LjUxNGwuMDEtLjAxNEE2Ljk2NiA2Ljk2NiAwIDAgMCAzMSAyMmE2Ljk3MyA2Ljk3MyAwIDAgMC0xLjYzNy00LjVsLS4wMTEtLjAxMy0uMDUtLjA1Ny0uMDItLjAyMi0uMDYzLS4wNzQtLjAwMi0uMDAxLS4wNzItLjA4LS4wMDEtLjAwMWMtLjA1LS4wNTQtLjEtLjEwNy0uMTUyLS4xNThsLS4wMDEtLjAwMi0uMDc1LS4wNzUtLjAwNS0uMDA0Yy0uMDIzLS4wMjQtLjA0Ny0uMDQ2LS4wNy0uMDY4bC0uMDI1LS4wMjMtLjA0Ny0uMDQ0LS4wMTYtLjAxNUE2Ljk2NiA2Ljk2NiAwIDAgMCAyNCAxNWE2Ljk3MyA2Ljk3MyAwIDAgMC00Ljc1NSAxLjg2M2wtLjAxNS4wMTUtLjA0Ny4wNDUtLjAyNS4wMjQtLjA3LjA2Ny0uMDA1LjAwNS0uMDc1LjA3NS0uMDAyLjAwMS0uMTUxLjE1OC0uMDAyLjAwMmEzLjMwOSAzLjMwOSAwIDAgMC0uMDcyLjA4aC0uMDAxYTEuNDM2IDEuNDM2IDAgMCAwLS4wNjQuMDc0bC0uMDIuMDIyYy0uMDE2LjAxOS0uMDMyLjA0LS4wNS4wNTgtLjAwMi4wMDUtLjAwNy4wMDgtLjAxLjAxM0E2Ljk3MyA2Ljk3MyAwIDAgMCAxNyAyMmMwIDEuNzE0LjYxNiAzLjI4MyAxLjYzOCA0LjVsLjAxLjAxNC4wNDkuMDU4LjAxOS4wMjIuMDY0LjA3My4wMDEuMDAzYy4wMjQuMDI3LjA0Ny4wNTMuMDcyLjA3OGwuMDAyLjAwMi4xNS4xNTguMDAxLjAwMS4wNzQuMDc0LjAwNC4wMDRBNi45ODcgNi45ODcgMCAwIDAgMjQgMjlhNi45NzMgNi45NzMgMCAwIDAgNC45MS0yLjAxMmwuMDA2LS4wMDRjLjAyNS0uMDI1LjA1LS4wNDkuMDczLS4wNzRsLjAwMi0uMDAxYTQuNzMgNC43MyAwIDAgMCAuMTUtLjE1OGwuMDAxLS4wMDJjLjAyNC0uMDI2LjA0OS0uMDUxLjA3Mi0uMDc4IDAtLjAwMS4wMDItLjAwMS4wMDItLjAwM2wuMDY0LS4wNzMuMDE4LS4wMjJjLjAyLS4wMi4wMzYtLjA0LjA1Mi0uMDU4em0uMDY0LTIuMjI4Yy0uMjE2LjUxLS41Ljk4MS0uODQ3IDEuNDFhNi45MzkgNi45MzkgMCAwIDAtMS4yNzMtLjg3NGMuMTgxLS43MzMuMjkzLTEuNTM4LjMyMy0yLjM4NGgyLjI0MmE1Ljg0MiA1Ljg0MiAwIDAgMS0uNDQ1IDEuODQ4em0uNDQ1LTIuNzIzaC0yLjI0MmExMS42ODEgMTEuNjgxIDAgMCAwLS4zMjMtMi4zODUgNi45MzkgNi45MzkgMCAwIDAgMS4yNzMtLjg3MyA1Ljg0MiA1Ljg0MiAwIDAgMSAxLjI5MiAzLjI1OHptLTMuNTczLTQuOTc3YTUuODQgNS44NCAwIDAgMSAxLjY4MSAxLjA4MWMtLjI4OS4yNDctLjYuNDY0LS45MjguNjUzLS4yNDUtLjcwMy0uNTYtMS4zMTQtLjkyNS0xLjgwMy4wNTguMDIyLjExNi4wNDYuMTcyLjA2OXpNMjQuODcgMjcuNTMzYTEuNzY4IDEuNzY4IDAgMCAxLS40MzMuMjU2di0yLjg5OGE2LjA4IDYuMDggMCAwIDEgMS44MDguNDA5Yy0uMTMuMzg0LS4yOC43NC0uNDUzIDEuMDYtLjI3Mi41MDYtLjU5LjkxLS45MjIgMS4xNzN6bS45MjItOS44OTJjLjE3Mi4zMjIuMzI0LjY3Ni40NTMgMS4wNTlhNi4wOCA2LjA4IDAgMCAxLTEuODA4LjQxdi0yLjg5N2MuMTQ0LjA1Ny4yOS4xNDIuNDMzLjI1Ni4zMzIuMjYuNjUuNjY1LjkyMiAxLjE3MnptLTEuMzU1IDYuMzczdi0xLjU3NmgyLjMwNWMtLjAyNS42OS0uMTEgMS4zNi0uMjU1IDEuOTk2bC0uMDA0LjAyYTYuOTUzIDYuOTUzIDAgMCAwLTIuMDQ1LS40NHptMC0yLjQ1MXYtMS41NzdhNi45NTMgNi45NTMgMCAwIDAgMi4wNDYtLjQ0bC4wMDUuMDJjLjE0My42MzYuMjMgMS4zMDQuMjU0IDEuOTk3aC0yLjMwNHptLS44NzUuODc1djEuNTc2YTYuOTUzIDYuOTUzIDAgMCAwLTIuMDQ1LjQ0bC0uMDA1LS4wMmExMC44MzUgMTAuODM1IDAgMCAxLS4yNTQtMS45OTZoMi4zMDV6bS0yLjMwNC0uODc1Yy4wMjUtLjY5MS4xMS0xLjM2MS4yNTUtMS45OTdsLjAwNC0uMDJhNi45NDMgNi45NDMgMCAwIDAgMi4wNDUuNDR2MS41NzdoLTIuMzA0em0yLjMwNSAzLjMyOHYyLjg5N2ExLjc0OCAxLjc0OCAwIDAgMS0uNDMzLS4yNTdjLS4zMzItLjI2LS42NTItLjY2Ny0uOTI0LTEuMTczYTcuMDYgNy4wNiAwIDAgMS0uNDUzLTEuMDYgNi4wOTggNi4wOTggMCAwIDEgMS44MS0uNDA3em0wLTUuNzgyYTYuMDggNi4wOCAwIDAgMS0xLjgwOC0uNDA5Yy4xMy0uMzg0LjI4LS43NC40NTMtMS4wNi4yNzItLjUwNi41OS0uOTEyLjkyMy0xLjE3M2ExLjggMS44IDAgMCAxIC40MzMtLjI1NnYyLjg5OGgtLjAwMnptLTEuODQ5LTIuNTIzYy4wNTgtLjAyMy4xMTQtLjA0Ny4xNzItLjA2OS0uMzY2LjQ5LS42OCAxLjEtLjkyNSAxLjgwM2E2LjA1NyA2LjA1NyAwIDAgMS0uOTI4LS42NTMgNS44NCA1Ljg0IDAgMCAxIDEuNjgxLTEuMDgxem0tMy4xMjggMy4xMjhjLjIxNi0uNTEuNS0uOTgxLjg0Ny0xLjQxLjM4OS4zMzcuODE1LjYzIDEuMjczLjg3NGExMS42ODEgMTEuNjgxIDAgMCAwLS4zMjMgMi4zODVIMTguMTRjLjA0Ny0uNjQuMTk3LTEuMjYuNDQ1LTEuODQ5em0tLjQ0NSAyLjcyNGgyLjI0MmMuMDMuODQ2LjE0MiAxLjY1MS4zMjMgMi4zODRhNi45MzkgNi45MzkgMCAwIDAtMS4yNzMuODczIDUuODQyIDUuODQyIDAgMCAxLTEuMjkyLTMuMjU4em0zLjU3MyA0Ljk3NmE1Ljg0IDUuODQgMCAwIDEtMS42ODEtMS4wODFjLjI4OS0uMjQ3LjYtLjQ2NC45MjgtLjY1My4yNDUuNzAzLjU2IDEuMzE0LjkyNSAxLjgwM2E1LjYyNCA1LjYyNCAwIDAgMS0uMTcyLS4wNjl6bTQuNTcyIDBhNi4xNjggNi4xNjggMCAwIDEtLjE3Mi4wNjljLjM2Ni0uNDkuNjgtMS4xLjkyNS0xLjgwMy4zMjguMTg3LjY0LjQwNi45MjguNjUzYTUuODQgNS44NCAwIDAgMS0xLjY4MSAxLjA4MXoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0ibm9uemVybyIvPjwvZz48L3N2Zz4="
-        />
-        <Item
-          type="node"
-          size="40"
-          shape="koni-custom-node"
-          model={{
-            color: '#5CDBD3',
-            label: 'Person',
-            labelOffsetY: 28,
-            icon:
-              'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEyLjM1IDExLjUxNGwuMDEtLjAxNEE2Ljk2NiA2Ljk2NiAwIDAgMCAxNCA3YTYuOTczIDYuOTczIDAgMCAwLTEuNjM3LTQuNWwtLjAxMS0uMDEzLS4wNS0uMDU3LS4wMi0uMDIyLS4wNjMtLjA3NC0uMDAyLS4wMDEtLjA3Mi0uMDgtLjAwMS0uMDAxYy0uMDUtLjA1NC0uMS0uMTA3LS4xNTItLjE1OGwtLjAwMS0uMDAyLS4wNzUtLjA3NS0uMDA1LS4wMDQtLjA3LS4wNjgtLjAyNS0uMDIzLS4wNDctLjA0NC0uMDE2LS4wMTZBNi45NjYgNi45NjYgMCAwIDAgNyAwYTYuOTczIDYuOTczIDAgMCAwLTQuNzU1IDEuODYybC0uMDE1LjAxNi0uMDQ3LjA0NS0uMDI1LjAyNC0uMDcuMDY3LS4wMDUuMDA1LS4wNzUuMDc1LS4wMDIuMDAxLS4xNTEuMTU4LS4wMDIuMDAyYTMuMzA5IDMuMzA5IDAgMCAwLS4wNzIuMDhIMS43OGExLjQzNiAxLjQzNiAwIDAgMC0uMDY0LjA3NGwtLjAyLjAyMmMtLjAxNi4wMTktLjAzMi4wNC0uMDUuMDU4LS4wMDIuMDA1LS4wMDcuMDA4LS4wMS4wMTNBNi45NzMgNi45NzMgMCAwIDAgMCA3YzAgMS43MTQuNjE2IDMuMjgzIDEuNjM4IDQuNWwuMDEuMDE0LjA0OS4wNTguMDE5LjAyMi4wNjQuMDczLjAwMS4wMDNjLjAyNC4wMjcuMDQ3LjA1My4wNzIuMDc4bC4wMDIuMDAyLjE1LjE1OC4wMDEuMDAxLjA3NC4wNzQuMDA0LjAwNUE2Ljk4NyA2Ljk4NyAwIDAgMCA3IDE0YTYuOTczIDYuOTczIDAgMCAwIDQuOTEtMi4wMTJsLjAwNi0uMDA1Yy4wMjUtLjAyNS4wNS0uMDQ5LjA3My0uMDc0bC4wMDItLjAwMWE0LjczIDQuNzMgMCAwIDAgLjE1LS4xNThsLjAwMS0uMDAyYy4wMjQtLjAyNi4wNDktLjA1MS4wNzItLjA3OCAwLS4wMDEuMDAyLS4wMDEuMDAyLS4wMDMuMDIyLS4wMjMuMDQzLS4wNDguMDY0LS4wNzNsLjAxOC0uMDIyYy4wMi0uMDIuMDM2LS4wNC4wNTItLjA1OHptLjA2NC0yLjIyOGMtLjIxNi41MS0uNS45ODEtLjg0NyAxLjQxYTYuOTM5IDYuOTM5IDAgMCAwLTEuMjczLS44NzRjLjE4MS0uNzMzLjI5My0xLjUzOC4zMjMtMi4zODRoMi4yNDJhNS44NDIgNS44NDIgMCAwIDEtLjQ0NSAxLjg0OHptLjQ0NS0yLjcyM2gtMi4yNDJhMTEuNjgxIDExLjY4MSAwIDAgMC0uMzIzLTIuMzg1IDYuOTM5IDYuOTM5IDAgMCAwIDEuMjczLS44NzMgNS44NDIgNS44NDIgMCAwIDEgMS4yOTIgMy4yNTh6TTkuMjg2IDEuNTg1YTUuODQgNS44NCAwIDAgMSAxLjY4MSAxLjA4MWMtLjI4OS4yNDctLjYuNDY0LS45MjguNjUzLS4yNDUtLjcwMy0uNTYtMS4zMTQtLjkyNS0xLjgwMy4wNTguMDIyLjExNi4wNDYuMTcyLjA2OXpNNy44NyAxMi41MzNhMS43NjggMS43NjggMCAwIDEtLjQzMy4yNTZWOS44OTFhNi4wOCA2LjA4IDAgMCAxIDEuODA4LjQwOWMtLjEzLjM4NC0uMjguNzQtLjQ1MyAxLjA2LS4yNzIuNTA2LS41OS45MS0uOTIyIDEuMTczem0uOTIyLTkuODkyYy4xNzIuMzIxLjMyNC42NzYuNDUzIDEuMDU5YTYuMDggNi4wOCAwIDAgMS0xLjgwNy40MVYxLjIxMWMuMTQzLjA1OC4yODkuMTQzLjQzMi4yNTcuMzMyLjI2LjY1LjY2NS45MjIgMS4xNzJ6TTcuNDM4IDkuMDE0VjcuNDM4aDIuMzA0Yy0uMDI1LjY5LS4xMSAxLjM2LS4yNTUgMS45OTZsLS4wMDQuMDJhNi45NTMgNi45NTMgMCAwIDAtMi4wNDYtLjQ0em0wLTIuNDUxVjQuOTg2YTYuOTUzIDYuOTUzIDAgMCAwIDIuMDQ1LS40NGwuMDA1LjAyYy4xNDMuNjM2LjIzIDEuMzA0LjI1NCAxLjk5N0g3LjQzN3ptLS44NzUuODc1djEuNTc2YTYuOTUzIDYuOTUzIDAgMCAwLTIuMDQ2LjQ0bC0uMDA1LS4wMmExMC44MzUgMTAuODM1IDAgMCAxLS4yNTQtMS45OTZoMi4zMDR6bS0yLjMwNS0uODc1Yy4wMjUtLjY5MS4xMS0xLjM2MS4yNTUtMS45OTdsLjAwNC0uMDJhNi45NDMgNi45NDMgMCAwIDAgMi4wNDUuNDR2MS41NzdINC4yNTh6TTYuNTYyIDkuODl2Mi44OTZhMS43NDggMS43NDggMCAwIDEtLjQzMi0uMjU2Yy0uMzMyLS4yNi0uNjUyLS42NjctLjkyNC0xLjE3M2E3LjA2IDcuMDYgMCAwIDEtLjQ1My0xLjA2IDYuMDk4IDYuMDk4IDAgMCAxIDEuODEtLjQwN3ptMC01Ljc4MkE2LjA4IDYuMDggMCAwIDEgNC43NTUgMy43Yy4xMy0uMzg0LjI4LS43NC40NTMtMS4wNi4yNzItLjUwNi41OS0uOTEyLjkyMy0xLjE3M2ExLjggMS44IDAgMCAxIC40MzMtLjI1NnYyLjg5OGgtLjAwMnpNNC43MTUgMS41ODZjLjA1OC0uMDI0LjExNC0uMDQ3LjE3Mi0uMDY5LS4zNjYuNDktLjY4IDEuMS0uOTI1IDEuODAzYTYuMDU3IDYuMDU3IDAgMCAxLS45MjgtLjY1MyA1Ljg0IDUuODQgMCAwIDEgMS42ODEtMS4wODF6TTEuNTg2IDQuNzE0Yy4yMTYtLjUxLjUtLjk4MS44NDctMS40MS4zODkuMzM3LjgxNS42MyAxLjI3My44NzRhMTEuNjgxIDExLjY4MSAwIDAgMC0uMzIzIDIuMzg1SDEuMTRhNS44IDUuOCAwIDAgMSAuNDQ1LTEuODQ5ek0xLjE0IDcuNDM3aDIuMjQyYy4wMy44NDcuMTQyIDEuNjUyLjMyMyAyLjM4NWE2LjkzOSA2LjkzOSAwIDAgMC0xLjI3My44NzNBNS44NDIgNS44NDIgMCAwIDEgMS4xNCA3LjQzN3ptMy41NzMgNC45NzdhNS44NCA1Ljg0IDAgMCAxLTEuNjgxLTEuMDgxYy4yODktLjI0Ny42LS40NjQuOTI4LS42NTMuMjQ1LjcwMy41NiAxLjMxNC45MjUgMS44MDNhNS42MjQgNS42MjQgMCAwIDEtLjE3Mi0uMDY5em00LjU3MiAwYTYuMTY4IDYuMTY4IDAgMCAxLS4xNzIuMDY5Yy4zNjYtLjQ5LjY4LTEuMS45MjUtMS44MDMuMzI4LjE4Ny42NC40MDYuOTI4LjY1M2E1Ljg0IDUuODQgMCAwIDEtMS42ODEgMS4wODF6IiBmaWxsPSIjRkZGIi8+PC9zdmc+',
-          }}
-          src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxjaXJjbGUgaWQ9ImIiIGN4PSIyMCIgY3k9IjIwIiByPSIyMCIvPjxmaWx0ZXIgeD0iLTE3LjUlIiB5PSItMTIuNSUiIHdpZHRoPSIxMzUlIiBoZWlnaHQ9IjEzNSUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9ImEiPjxmZU9mZnNldCBkeT0iMiIgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSIvPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSIvPjxmZUNvbXBvc2l0ZSBpbj0ic2hhZG93Qmx1ck91dGVyMSIgaW4yPSJTb3VyY2VBbHBoYSIgb3BlcmF0b3I9Im91dCIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjA0IDAiIGluPSJzaGFkb3dCbHVyT3V0ZXIxIi8+PC9maWx0ZXI+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNCAyKSI+PHVzZSBmaWxsPSIjMDAwIiBmaWx0ZXI9InVybCgjYSkiIHhsaW5rOmhyZWY9IiNiIi8+PGNpcmNsZSBzdHJva2U9IiM1Q0RCRDMiIHN0cm9rZS1saW5lam9pbj0ic3F1YXJlIiBmaWxsLW9wYWNpdHk9Ii45MiIgZmlsbD0iIzVDREJEMyIgY3g9IjIwIiBjeT0iMjAiIHI9IjE5LjUiLz48L2c+PHBhdGggZD0iTTI5LjM1IDI2LjUxNGwuMDEtLjAxNEE2Ljk2NiA2Ljk2NiAwIDAgMCAzMSAyMmE2Ljk3MyA2Ljk3MyAwIDAgMC0xLjYzNy00LjVsLS4wMTEtLjAxMy0uMDUtLjA1Ny0uMDItLjAyMi0uMDYzLS4wNzQtLjAwMi0uMDAxLS4wNzItLjA4LS4wMDEtLjAwMWMtLjA1LS4wNTQtLjEtLjEwNy0uMTUyLS4xNThsLS4wMDEtLjAwMi0uMDc1LS4wNzUtLjAwNS0uMDA0Yy0uMDIzLS4wMjQtLjA0Ny0uMDQ2LS4wNy0uMDY4bC0uMDI1LS4wMjMtLjA0Ny0uMDQ0LS4wMTYtLjAxNUE2Ljk2NiA2Ljk2NiAwIDAgMCAyNCAxNWE2Ljk3MyA2Ljk3MyAwIDAgMC00Ljc1NSAxLjg2M2wtLjAxNS4wMTUtLjA0Ny4wNDUtLjAyNS4wMjQtLjA3LjA2Ny0uMDA1LjAwNS0uMDc1LjA3NS0uMDAyLjAwMS0uMTUxLjE1OC0uMDAyLjAwMmEzLjMwOSAzLjMwOSAwIDAgMC0uMDcyLjA4aC0uMDAxYTEuNDM2IDEuNDM2IDAgMCAwLS4wNjQuMDc0bC0uMDIuMDIyYy0uMDE2LjAxOS0uMDMyLjA0LS4wNS4wNTgtLjAwMi4wMDUtLjAwNy4wMDgtLjAxLjAxM0E2Ljk3MyA2Ljk3MyAwIDAgMCAxNyAyMmMwIDEuNzE0LjYxNiAzLjI4MyAxLjYzOCA0LjVsLjAxLjAxNC4wNDkuMDU4LjAxOS4wMjIuMDY0LjA3My4wMDEuMDAzYy4wMjQuMDI3LjA0Ny4wNTMuMDcyLjA3OGwuMDAyLjAwMi4xNS4xNTguMDAxLjAwMS4wNzQuMDc0LjAwNC4wMDRBNi45ODcgNi45ODcgMCAwIDAgMjQgMjlhNi45NzMgNi45NzMgMCAwIDAgNC45MS0yLjAxMmwuMDA2LS4wMDRjLjAyNS0uMDI1LjA1LS4wNDkuMDczLS4wNzRsLjAwMi0uMDAxYTQuNzMgNC43MyAwIDAgMCAuMTUtLjE1OGwuMDAxLS4wMDJjLjAyNC0uMDI2LjA0OS0uMDUxLjA3Mi0uMDc4IDAtLjAwMS4wMDItLjAwMS4wMDItLjAwM2wuMDY0LS4wNzMuMDE4LS4wMjJjLjAyLS4wMi4wMzYtLjA0LjA1Mi0uMDU4em0uMDY0LTIuMjI4Yy0uMjE2LjUxLS41Ljk4MS0uODQ3IDEuNDFhNi45MzkgNi45MzkgMCAwIDAtMS4yNzMtLjg3NGMuMTgxLS43MzMuMjkzLTEuNTM4LjMyMy0yLjM4NGgyLjI0MmE1Ljg0MiA1Ljg0MiAwIDAgMS0uNDQ1IDEuODQ4em0uNDQ1LTIuNzIzaC0yLjI0MmExMS42ODEgMTEuNjgxIDAgMCAwLS4zMjMtMi4zODUgNi45MzkgNi45MzkgMCAwIDAgMS4yNzMtLjg3MyA1Ljg0MiA1Ljg0MiAwIDAgMSAxLjI5MiAzLjI1OHptLTMuNTczLTQuOTc3YTUuODQgNS44NCAwIDAgMSAxLjY4MSAxLjA4MWMtLjI4OS4yNDctLjYuNDY0LS45MjguNjUzLS4yNDUtLjcwMy0uNTYtMS4zMTQtLjkyNS0xLjgwMy4wNTguMDIyLjExNi4wNDYuMTcyLjA2OXpNMjQuODcgMjcuNTMzYTEuNzY4IDEuNzY4IDAgMCAxLS40MzMuMjU2di0yLjg5OGE2LjA4IDYuMDggMCAwIDEgMS44MDguNDA5Yy0uMTMuMzg0LS4yOC43NC0uNDUzIDEuMDYtLjI3Mi41MDYtLjU5LjkxLS45MjIgMS4xNzN6bS45MjItOS44OTJjLjE3Mi4zMjIuMzI0LjY3Ni40NTMgMS4wNTlhNi4wOCA2LjA4IDAgMCAxLTEuODA4LjQxdi0yLjg5N2MuMTQ0LjA1Ny4yOS4xNDIuNDMzLjI1Ni4zMzIuMjYuNjUuNjY1LjkyMiAxLjE3MnptLTEuMzU1IDYuMzczdi0xLjU3NmgyLjMwNWMtLjAyNS42OS0uMTEgMS4zNi0uMjU1IDEuOTk2bC0uMDA0LjAyYTYuOTUzIDYuOTUzIDAgMCAwLTIuMDQ1LS40NHptMC0yLjQ1MXYtMS41NzdhNi45NTMgNi45NTMgMCAwIDAgMi4wNDYtLjQ0bC4wMDUuMDJjLjE0My42MzYuMjMgMS4zMDQuMjU0IDEuOTk3aC0yLjMwNHptLS44NzUuODc1djEuNTc2YTYuOTUzIDYuOTUzIDAgMCAwLTIuMDQ1LjQ0bC0uMDA1LS4wMmExMC44MzUgMTAuODM1IDAgMCAxLS4yNTQtMS45OTZoMi4zMDV6bS0yLjMwNC0uODc1Yy4wMjUtLjY5MS4xMS0xLjM2MS4yNTUtMS45OTdsLjAwNC0uMDJhNi45NDMgNi45NDMgMCAwIDAgMi4wNDUuNDR2MS41NzdoLTIuMzA0em0yLjMwNSAzLjMyOHYyLjg5N2ExLjc0OCAxLjc0OCAwIDAgMS0uNDMzLS4yNTdjLS4zMzItLjI2LS42NTItLjY2Ny0uOTI0LTEuMTczYTcuMDYgNy4wNiAwIDAgMS0uNDUzLTEuMDYgNi4wOTggNi4wOTggMCAwIDEgMS44MS0uNDA3em0wLTUuNzgyYTYuMDggNi4wOCAwIDAgMS0xLjgwOC0uNDA5Yy4xMy0uMzg0LjI4LS43NC40NTMtMS4wNi4yNzItLjUwNi41OS0uOTEyLjkyMy0xLjE3M2ExLjggMS44IDAgMCAxIC40MzMtLjI1NnYyLjg5OGgtLjAwMnptLTEuODQ5LTIuNTIzYy4wNTgtLjAyMy4xMTQtLjA0Ny4xNzItLjA2OS0uMzY2LjQ5LS42OCAxLjEtLjkyNSAxLjgwM2E2LjA1NyA2LjA1NyAwIDAgMS0uOTI4LS42NTMgNS44NCA1Ljg0IDAgMCAxIDEuNjgxLTEuMDgxem0tMy4xMjggMy4xMjhjLjIxNi0uNTEuNS0uOTgxLjg0Ny0xLjQxLjM4OS4zMzcuODE1LjYzIDEuMjczLjg3NGExMS42ODEgMTEuNjgxIDAgMCAwLS4zMjMgMi4zODVIMTguMTRjLjA0Ny0uNjQuMTk3LTEuMjYuNDQ1LTEuODQ5em0tLjQ0NSAyLjcyNGgyLjI0MmMuMDMuODQ2LjE0MiAxLjY1MS4zMjMgMi4zODRhNi45MzkgNi45MzkgMCAwIDAtMS4yNzMuODczIDUuODQyIDUuODQyIDAgMCAxLTEuMjkyLTMuMjU4em0zLjU3MyA0Ljk3NmE1Ljg0IDUuODQgMCAwIDEtMS42ODEtMS4wODFjLjI4OS0uMjQ3LjYtLjQ2NC45MjgtLjY1My4yNDUuNzAzLjU2IDEuMzE0LjkyNSAxLjgwM2E1LjYyNCA1LjYyNCAwIDAgMS0uMTcyLS4wNjl6bTQuNTcyIDBhNi4xNjggNi4xNjggMCAwIDEtLjE3Mi4wNjljLjM2Ni0uNDkuNjgtMS4xLjkyNS0xLjgwMy4zMjguMTg3LjY0LjQwNi45MjguNjUzYTUuODQgNS44NCAwIDAgMS0xLjY4MSAxLjA4MXoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0ibm9uemVybyIvPjwvZz48L3N2Zz4="
-        />
-        <Item
-          type="node"
-          size="40"
-          shape="koni-custom-node"
-          model={{
-            color: '#B37FEB',
-            label: 'Country',
-            labelOffsetY: 28,
-            icon:
-              'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEyLjM1IDExLjUxNGwuMDEtLjAxNEE2Ljk2NiA2Ljk2NiAwIDAgMCAxNCA3YTYuOTczIDYuOTczIDAgMCAwLTEuNjM3LTQuNWwtLjAxMS0uMDEzLS4wNS0uMDU3LS4wMi0uMDIyLS4wNjMtLjA3NC0uMDAyLS4wMDEtLjA3Mi0uMDgtLjAwMS0uMDAxYy0uMDUtLjA1NC0uMS0uMTA3LS4xNTItLjE1OGwtLjAwMS0uMDAyLS4wNzUtLjA3NS0uMDA1LS4wMDQtLjA3LS4wNjgtLjAyNS0uMDIzLS4wNDctLjA0NC0uMDE2LS4wMTZBNi45NjYgNi45NjYgMCAwIDAgNyAwYTYuOTczIDYuOTczIDAgMCAwLTQuNzU1IDEuODYybC0uMDE1LjAxNi0uMDQ3LjA0NS0uMDI1LjAyNC0uMDcuMDY3LS4wMDUuMDA1LS4wNzUuMDc1LS4wMDIuMDAxLS4xNTEuMTU4LS4wMDIuMDAyYTMuMzA5IDMuMzA5IDAgMCAwLS4wNzIuMDhIMS43OGExLjQzNiAxLjQzNiAwIDAgMC0uMDY0LjA3NGwtLjAyLjAyMmMtLjAxNi4wMTktLjAzMi4wNC0uMDUuMDU4LS4wMDIuMDA1LS4wMDcuMDA4LS4wMS4wMTNBNi45NzMgNi45NzMgMCAwIDAgMCA3YzAgMS43MTQuNjE2IDMuMjgzIDEuNjM4IDQuNWwuMDEuMDE0LjA0OS4wNTguMDE5LjAyMi4wNjQuMDczLjAwMS4wMDNjLjAyNC4wMjcuMDQ3LjA1My4wNzIuMDc4bC4wMDIuMDAyLjE1LjE1OC4wMDEuMDAxLjA3NC4wNzQuMDA0LjAwNUE2Ljk4NyA2Ljk4NyAwIDAgMCA3IDE0YTYuOTczIDYuOTczIDAgMCAwIDQuOTEtMi4wMTJsLjAwNi0uMDA1Yy4wMjUtLjAyNS4wNS0uMDQ5LjA3My0uMDc0bC4wMDItLjAwMWE0LjczIDQuNzMgMCAwIDAgLjE1LS4xNThsLjAwMS0uMDAyYy4wMjQtLjAyNi4wNDktLjA1MS4wNzItLjA3OCAwLS4wMDEuMDAyLS4wMDEuMDAyLS4wMDMuMDIyLS4wMjMuMDQzLS4wNDguMDY0LS4wNzNsLjAxOC0uMDIyYy4wMi0uMDIuMDM2LS4wNC4wNTItLjA1OHptLjA2NC0yLjIyOGMtLjIxNi41MS0uNS45ODEtLjg0NyAxLjQxYTYuOTM5IDYuOTM5IDAgMCAwLTEuMjczLS44NzRjLjE4MS0uNzMzLjI5My0xLjUzOC4zMjMtMi4zODRoMi4yNDJhNS44NDIgNS44NDIgMCAwIDEtLjQ0NSAxLjg0OHptLjQ0NS0yLjcyM2gtMi4yNDJhMTEuNjgxIDExLjY4MSAwIDAgMC0uMzIzLTIuMzg1IDYuOTM5IDYuOTM5IDAgMCAwIDEuMjczLS44NzMgNS44NDIgNS44NDIgMCAwIDEgMS4yOTIgMy4yNTh6TTkuMjg2IDEuNTg1YTUuODQgNS44NCAwIDAgMSAxLjY4MSAxLjA4MWMtLjI4OS4yNDctLjYuNDY0LS45MjguNjUzLS4yNDUtLjcwMy0uNTYtMS4zMTQtLjkyNS0xLjgwMy4wNTguMDIyLjExNi4wNDYuMTcyLjA2OXpNNy44NyAxMi41MzNhMS43NjggMS43NjggMCAwIDEtLjQzMy4yNTZWOS44OTFhNi4wOCA2LjA4IDAgMCAxIDEuODA4LjQwOWMtLjEzLjM4NC0uMjguNzQtLjQ1MyAxLjA2LS4yNzIuNTA2LS41OS45MS0uOTIyIDEuMTczem0uOTIyLTkuODkyYy4xNzIuMzIxLjMyNC42NzYuNDUzIDEuMDU5YTYuMDggNi4wOCAwIDAgMS0xLjgwNy40MVYxLjIxMWMuMTQzLjA1OC4yODkuMTQzLjQzMi4yNTcuMzMyLjI2LjY1LjY2NS45MjIgMS4xNzJ6TTcuNDM4IDkuMDE0VjcuNDM4aDIuMzA0Yy0uMDI1LjY5LS4xMSAxLjM2LS4yNTUgMS45OTZsLS4wMDQuMDJhNi45NTMgNi45NTMgMCAwIDAtMi4wNDYtLjQ0em0wLTIuNDUxVjQuOTg2YTYuOTUzIDYuOTUzIDAgMCAwIDIuMDQ1LS40NGwuMDA1LjAyYy4xNDMuNjM2LjIzIDEuMzA0LjI1NCAxLjk5N0g3LjQzN3ptLS44NzUuODc1djEuNTc2YTYuOTUzIDYuOTUzIDAgMCAwLTIuMDQ2LjQ0bC0uMDA1LS4wMmExMC44MzUgMTAuODM1IDAgMCAxLS4yNTQtMS45OTZoMi4zMDR6bS0yLjMwNS0uODc1Yy4wMjUtLjY5MS4xMS0xLjM2MS4yNTUtMS45OTdsLjAwNC0uMDJhNi45NDMgNi45NDMgMCAwIDAgMi4wNDUuNDR2MS41NzdINC4yNTh6TTYuNTYyIDkuODl2Mi44OTZhMS43NDggMS43NDggMCAwIDEtLjQzMi0uMjU2Yy0uMzMyLS4yNi0uNjUyLS42NjctLjkyNC0xLjE3M2E3LjA2IDcuMDYgMCAwIDEtLjQ1My0xLjA2IDYuMDk4IDYuMDk4IDAgMCAxIDEuODEtLjQwN3ptMC01Ljc4MkE2LjA4IDYuMDggMCAwIDEgNC43NTUgMy43Yy4xMy0uMzg0LjI4LS43NC40NTMtMS4wNi4yNzItLjUwNi41OS0uOTEyLjkyMy0xLjE3M2ExLjggMS44IDAgMCAxIC40MzMtLjI1NnYyLjg5OGgtLjAwMnpNNC43MTUgMS41ODZjLjA1OC0uMDI0LjExNC0uMDQ3LjE3Mi0uMDY5LS4zNjYuNDktLjY4IDEuMS0uOTI1IDEuODAzYTYuMDU3IDYuMDU3IDAgMCAxLS45MjgtLjY1MyA1Ljg0IDUuODQgMCAwIDEgMS42ODEtMS4wODF6TTEuNTg2IDQuNzE0Yy4yMTYtLjUxLjUtLjk4MS44NDctMS40MS4zODkuMzM3LjgxNS42MyAxLjI3My44NzRhMTEuNjgxIDExLjY4MSAwIDAgMC0uMzIzIDIuMzg1SDEuMTRhNS44IDUuOCAwIDAgMSAuNDQ1LTEuODQ5ek0xLjE0IDcuNDM3aDIuMjQyYy4wMy44NDcuMTQyIDEuNjUyLjMyMyAyLjM4NWE2LjkzOSA2LjkzOSAwIDAgMC0xLjI3My44NzNBNS44NDIgNS44NDIgMCAwIDEgMS4xNCA3LjQzN3ptMy41NzMgNC45NzdhNS44NCA1Ljg0IDAgMCAxLTEuNjgxLTEuMDgxYy4yODktLjI0Ny42LS40NjQuOTI4LS42NTMuMjQ1LjcwMy41NiAxLjMxNC45MjUgMS44MDNhNS42MjQgNS42MjQgMCAwIDEtLjE3Mi0uMDY5em00LjU3MiAwYTYuMTY4IDYuMTY4IDAgMCAxLS4xNzIuMDY5Yy4zNjYtLjQ5LjY4LTEuMS45MjUtMS44MDMuMzI4LjE4Ny42NC40MDYuOTI4LjY1M2E1Ljg0IDUuODQgMCAwIDEtMS42ODEgMS4wODF6IiBmaWxsPSIjRkZGIi8+PC9zdmc+',
-          }}
-          src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxjaXJjbGUgaWQ9ImIiIGN4PSIyMCIgY3k9IjIwIiByPSIyMCIvPjxmaWx0ZXIgeD0iLTE3LjUlIiB5PSItMTIuNSUiIHdpZHRoPSIxMzUlIiBoZWlnaHQ9IjEzNSUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9ImEiPjxmZU9mZnNldCBkeT0iMiIgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSIvPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSIvPjxmZUNvbXBvc2l0ZSBpbj0ic2hhZG93Qmx1ck91dGVyMSIgaW4yPSJTb3VyY2VBbHBoYSIgb3BlcmF0b3I9Im91dCIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjA0IDAiIGluPSJzaGFkb3dCbHVyT3V0ZXIxIi8+PC9maWx0ZXI+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNCAyKSI+PHVzZSBmaWxsPSIjMDAwIiBmaWx0ZXI9InVybCgjYSkiIHhsaW5rOmhyZWY9IiNiIi8+PGNpcmNsZSBzdHJva2U9IiNCMzdGRUIiIHN0cm9rZS1saW5lam9pbj0ic3F1YXJlIiBmaWxsLW9wYWNpdHk9Ii45MiIgZmlsbD0iI0IzN0ZFQiIgY3g9IjIwIiBjeT0iMjAiIHI9IjE5LjUiLz48L2c+PHBhdGggZD0iTTI5LjM1IDI2LjUxNGwuMDEtLjAxNEE2Ljk2NiA2Ljk2NiAwIDAgMCAzMSAyMmE2Ljk3MyA2Ljk3MyAwIDAgMC0xLjYzNy00LjVsLS4wMTEtLjAxMy0uMDUtLjA1Ny0uMDItLjAyMi0uMDYzLS4wNzQtLjAwMi0uMDAxLS4wNzItLjA4LS4wMDEtLjAwMWMtLjA1LS4wNTQtLjEtLjEwNy0uMTUyLS4xNThsLS4wMDEtLjAwMi0uMDc1LS4wNzUtLjAwNS0uMDA0Yy0uMDIzLS4wMjQtLjA0Ny0uMDQ2LS4wNy0uMDY4bC0uMDI1LS4wMjMtLjA0Ny0uMDQ0LS4wMTYtLjAxNUE2Ljk2NiA2Ljk2NiAwIDAgMCAyNCAxNWE2Ljk3MyA2Ljk3MyAwIDAgMC00Ljc1NSAxLjg2M2wtLjAxNS4wMTUtLjA0Ny4wNDUtLjAyNS4wMjQtLjA3LjA2Ny0uMDA1LjAwNS0uMDc1LjA3NS0uMDAyLjAwMS0uMTUxLjE1OC0uMDAyLjAwMmEzLjMwOSAzLjMwOSAwIDAgMC0uMDcyLjA4aC0uMDAxYTEuNDM2IDEuNDM2IDAgMCAwLS4wNjQuMDc0bC0uMDIuMDIyYy0uMDE2LjAxOS0uMDMyLjA0LS4wNS4wNTgtLjAwMi4wMDUtLjAwNy4wMDgtLjAxLjAxM0E2Ljk3MyA2Ljk3MyAwIDAgMCAxNyAyMmMwIDEuNzE0LjYxNiAzLjI4MyAxLjYzOCA0LjVsLjAxLjAxNC4wNDkuMDU4LjAxOS4wMjIuMDY0LjA3My4wMDEuMDAzYy4wMjQuMDI3LjA0Ny4wNTMuMDcyLjA3OGwuMDAyLjAwMi4xNS4xNTguMDAxLjAwMS4wNzQuMDc0LjAwNC4wMDRBNi45ODcgNi45ODcgMCAwIDAgMjQgMjlhNi45NzMgNi45NzMgMCAwIDAgNC45MS0yLjAxMmwuMDA2LS4wMDRjLjAyNS0uMDI1LjA1LS4wNDkuMDczLS4wNzRsLjAwMi0uMDAxYTQuNzMgNC43MyAwIDAgMCAuMTUtLjE1OGwuMDAxLS4wMDJjLjAyNC0uMDI2LjA0OS0uMDUxLjA3Mi0uMDc4IDAtLjAwMS4wMDItLjAwMS4wMDItLjAwM2wuMDY0LS4wNzMuMDE4LS4wMjJjLjAyLS4wMi4wMzYtLjA0LjA1Mi0uMDU4em0uMDY0LTIuMjI4Yy0uMjE2LjUxLS41Ljk4MS0uODQ3IDEuNDFhNi45MzkgNi45MzkgMCAwIDAtMS4yNzMtLjg3NGMuMTgxLS43MzMuMjkzLTEuNTM4LjMyMy0yLjM4NGgyLjI0MmE1Ljg0MiA1Ljg0MiAwIDAgMS0uNDQ1IDEuODQ4em0uNDQ1LTIuNzIzaC0yLjI0MmExMS42ODEgMTEuNjgxIDAgMCAwLS4zMjMtMi4zODUgNi45MzkgNi45MzkgMCAwIDAgMS4yNzMtLjg3MyA1Ljg0MiA1Ljg0MiAwIDAgMSAxLjI5MiAzLjI1OHptLTMuNTczLTQuOTc3YTUuODQgNS44NCAwIDAgMSAxLjY4MSAxLjA4MWMtLjI4OS4yNDctLjYuNDY0LS45MjguNjUzLS4yNDUtLjcwMy0uNTYtMS4zMTQtLjkyNS0xLjgwMy4wNTguMDIyLjExNi4wNDYuMTcyLjA2OXpNMjQuODcgMjcuNTMzYTEuNzY4IDEuNzY4IDAgMCAxLS40MzMuMjU2di0yLjg5OGE2LjA4IDYuMDggMCAwIDEgMS44MDguNDA5Yy0uMTMuMzg0LS4yOC43NC0uNDUzIDEuMDYtLjI3Mi41MDYtLjU5LjkxLS45MjIgMS4xNzN6bS45MjItOS44OTJjLjE3Mi4zMjIuMzI0LjY3Ni40NTMgMS4wNTlhNi4wOCA2LjA4IDAgMCAxLTEuODA4LjQxdi0yLjg5N2MuMTQ0LjA1Ny4yOS4xNDIuNDMzLjI1Ni4zMzIuMjYuNjUuNjY1LjkyMiAxLjE3MnptLTEuMzU1IDYuMzczdi0xLjU3NmgyLjMwNWMtLjAyNS42OS0uMTEgMS4zNi0uMjU1IDEuOTk2bC0uMDA0LjAyYTYuOTUzIDYuOTUzIDAgMCAwLTIuMDQ1LS40NHptMC0yLjQ1MXYtMS41NzdhNi45NTMgNi45NTMgMCAwIDAgMi4wNDYtLjQ0bC4wMDUuMDJjLjE0My42MzYuMjMgMS4zMDQuMjU0IDEuOTk3aC0yLjMwNHptLS44NzUuODc1djEuNTc2YTYuOTUzIDYuOTUzIDAgMCAwLTIuMDQ1LjQ0bC0uMDA1LS4wMmExMC44MzUgMTAuODM1IDAgMCAxLS4yNTQtMS45OTZoMi4zMDV6bS0yLjMwNC0uODc1Yy4wMjUtLjY5MS4xMS0xLjM2MS4yNTUtMS45OTdsLjAwNC0uMDJhNi45NDMgNi45NDMgMCAwIDAgMi4wNDUuNDR2MS41NzdoLTIuMzA0em0yLjMwNSAzLjMyOHYyLjg5N2ExLjc0OCAxLjc0OCAwIDAgMS0uNDMzLS4yNTdjLS4zMzItLjI2LS42NTItLjY2Ny0uOTI0LTEuMTczYTcuMDYgNy4wNiAwIDAgMS0uNDUzLTEuMDYgNi4wOTggNi4wOTggMCAwIDEgMS44MS0uNDA3em0wLTUuNzgyYTYuMDggNi4wOCAwIDAgMS0xLjgwOC0uNDA5Yy4xMy0uMzg0LjI4LS43NC40NTMtMS4wNi4yNzItLjUwNi41OS0uOTEyLjkyMy0xLjE3M2ExLjggMS44IDAgMCAxIC40MzMtLjI1NnYyLjg5OGgtLjAwMnptLTEuODQ5LTIuNTIzYy4wNTgtLjAyMy4xMTQtLjA0Ny4xNzItLjA2OS0uMzY2LjQ5LS42OCAxLjEtLjkyNSAxLjgwM2E2LjA1NyA2LjA1NyAwIDAgMS0uOTI4LS42NTMgNS44NCA1Ljg0IDAgMCAxIDEuNjgxLTEuMDgxem0tMy4xMjggMy4xMjhjLjIxNi0uNTEuNS0uOTgxLjg0Ny0xLjQxLjM4OS4zMzcuODE1LjYzIDEuMjczLjg3NGExMS42ODEgMTEuNjgxIDAgMCAwLS4zMjMgMi4zODVIMTguMTRjLjA0Ny0uNjQuMTk3LTEuMjYuNDQ1LTEuODQ5em0tLjQ0NSAyLjcyNGgyLjI0MmMuMDMuODQ2LjE0MiAxLjY1MS4zMjMgMi4zODRhNi45MzkgNi45MzkgMCAwIDAtMS4yNzMuODczIDUuODQyIDUuODQyIDAgMCAxLTEuMjkyLTMuMjU4em0zLjU3MyA0Ljk3NmE1Ljg0IDUuODQgMCAwIDEtMS42ODEtMS4wODFjLjI4OS0uMjQ3LjYtLjQ2NC45MjgtLjY1My4yNDUuNzAzLjU2IDEuMzE0LjkyNSAxLjgwM2E1LjYyNCA1LjYyNCAwIDAgMS0uMTcyLS4wNjl6bTQuNTcyIDBhNi4xNjggNi4xNjggMCAwIDEtLjE3Mi4wNjljLjM2Ni0uNDkuNjgtMS4xLjkyNS0xLjgwMy4zMjguMTg3LjY0LjQwNi45MjguNjUzYTUuODQgNS44NCAwIDAgMS0xLjY4MSAxLjA4MXoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0ibm9uemVybyIvPjwvZz48L3N2Zz4="
-        />
-      </Card>
-    </ItemPanel>
-  );
-};
+const KoniItemPanel = () => (
+  <ItemPanel className={styles.itemPanel}>
+    <Card bordered={false}>
+      <Item
+        type="node"
+        size="40"
+        shape="koni-custom-node"
+        model={{
+          color: '#69C0FF',
+          label: 'Bank',
+          labelOffsetY: 28,
+          icon:
+            'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEyLjM1IDExLjUxNGwuMDEtLjAxNEE2Ljk2NiA2Ljk2NiAwIDAgMCAxNCA3YTYuOTczIDYuOTczIDAgMCAwLTEuNjM3LTQuNWwtLjAxMS0uMDEzLS4wNS0uMDU3LS4wMi0uMDIyLS4wNjMtLjA3NC0uMDAyLS4wMDEtLjA3Mi0uMDgtLjAwMS0uMDAxYy0uMDUtLjA1NC0uMS0uMTA3LS4xNTItLjE1OGwtLjAwMS0uMDAyLS4wNzUtLjA3NS0uMDA1LS4wMDQtLjA3LS4wNjgtLjAyNS0uMDIzLS4wNDctLjA0NC0uMDE2LS4wMTZBNi45NjYgNi45NjYgMCAwIDAgNyAwYTYuOTczIDYuOTczIDAgMCAwLTQuNzU1IDEuODYybC0uMDE1LjAxNi0uMDQ3LjA0NS0uMDI1LjAyNC0uMDcuMDY3LS4wMDUuMDA1LS4wNzUuMDc1LS4wMDIuMDAxLS4xNTEuMTU4LS4wMDIuMDAyYTMuMzA5IDMuMzA5IDAgMCAwLS4wNzIuMDhIMS43OGExLjQzNiAxLjQzNiAwIDAgMC0uMDY0LjA3NGwtLjAyLjAyMmMtLjAxNi4wMTktLjAzMi4wNC0uMDUuMDU4LS4wMDIuMDA1LS4wMDcuMDA4LS4wMS4wMTNBNi45NzMgNi45NzMgMCAwIDAgMCA3YzAgMS43MTQuNjE2IDMuMjgzIDEuNjM4IDQuNWwuMDEuMDE0LjA0OS4wNTguMDE5LjAyMi4wNjQuMDczLjAwMS4wMDNjLjAyNC4wMjcuMDQ3LjA1My4wNzIuMDc4bC4wMDIuMDAyLjE1LjE1OC4wMDEuMDAxLjA3NC4wNzQuMDA0LjAwNUE2Ljk4NyA2Ljk4NyAwIDAgMCA3IDE0YTYuOTczIDYuOTczIDAgMCAwIDQuOTEtMi4wMTJsLjAwNi0uMDA1Yy4wMjUtLjAyNS4wNS0uMDQ5LjA3My0uMDc0bC4wMDItLjAwMWE0LjczIDQuNzMgMCAwIDAgLjE1LS4xNThsLjAwMS0uMDAyYy4wMjQtLjAyNi4wNDktLjA1MS4wNzItLjA3OCAwLS4wMDEuMDAyLS4wMDEuMDAyLS4wMDMuMDIyLS4wMjMuMDQzLS4wNDguMDY0LS4wNzNsLjAxOC0uMDIyYy4wMi0uMDIuMDM2LS4wNC4wNTItLjA1OHptLjA2NC0yLjIyOGMtLjIxNi41MS0uNS45ODEtLjg0NyAxLjQxYTYuOTM5IDYuOTM5IDAgMCAwLTEuMjczLS44NzRjLjE4MS0uNzMzLjI5My0xLjUzOC4zMjMtMi4zODRoMi4yNDJhNS44NDIgNS44NDIgMCAwIDEtLjQ0NSAxLjg0OHptLjQ0NS0yLjcyM2gtMi4yNDJhMTEuNjgxIDExLjY4MSAwIDAgMC0uMzIzLTIuMzg1IDYuOTM5IDYuOTM5IDAgMCAwIDEuMjczLS44NzMgNS44NDIgNS44NDIgMCAwIDEgMS4yOTIgMy4yNTh6TTkuMjg2IDEuNTg1YTUuODQgNS44NCAwIDAgMSAxLjY4MSAxLjA4MWMtLjI4OS4yNDctLjYuNDY0LS45MjguNjUzLS4yNDUtLjcwMy0uNTYtMS4zMTQtLjkyNS0xLjgwMy4wNTguMDIyLjExNi4wNDYuMTcyLjA2OXpNNy44NyAxMi41MzNhMS43NjggMS43NjggMCAwIDEtLjQzMy4yNTZWOS44OTFhNi4wOCA2LjA4IDAgMCAxIDEuODA4LjQwOWMtLjEzLjM4NC0uMjguNzQtLjQ1MyAxLjA2LS4yNzIuNTA2LS41OS45MS0uOTIyIDEuMTczem0uOTIyLTkuODkyYy4xNzIuMzIxLjMyNC42NzYuNDUzIDEuMDU5YTYuMDggNi4wOCAwIDAgMS0xLjgwNy40MVYxLjIxMWMuMTQzLjA1OC4yODkuMTQzLjQzMi4yNTcuMzMyLjI2LjY1LjY2NS45MjIgMS4xNzJ6TTcuNDM4IDkuMDE0VjcuNDM4aDIuMzA0Yy0uMDI1LjY5LS4xMSAxLjM2LS4yNTUgMS45OTZsLS4wMDQuMDJhNi45NTMgNi45NTMgMCAwIDAtMi4wNDYtLjQ0em0wLTIuNDUxVjQuOTg2YTYuOTUzIDYuOTUzIDAgMCAwIDIuMDQ1LS40NGwuMDA1LjAyYy4xNDMuNjM2LjIzIDEuMzA0LjI1NCAxLjk5N0g3LjQzN3ptLS44NzUuODc1djEuNTc2YTYuOTUzIDYuOTUzIDAgMCAwLTIuMDQ2LjQ0bC0uMDA1LS4wMmExMC44MzUgMTAuODM1IDAgMCAxLS4yNTQtMS45OTZoMi4zMDR6bS0yLjMwNS0uODc1Yy4wMjUtLjY5MS4xMS0xLjM2MS4yNTUtMS45OTdsLjAwNC0uMDJhNi45NDMgNi45NDMgMCAwIDAgMi4wNDUuNDR2MS41NzdINC4yNTh6TTYuNTYyIDkuODl2Mi44OTZhMS43NDggMS43NDggMCAwIDEtLjQzMi0uMjU2Yy0uMzMyLS4yNi0uNjUyLS42NjctLjkyNC0xLjE3M2E3LjA2IDcuMDYgMCAwIDEtLjQ1My0xLjA2IDYuMDk4IDYuMDk4IDAgMCAxIDEuODEtLjQwN3ptMC01Ljc4MkE2LjA4IDYuMDggMCAwIDEgNC43NTUgMy43Yy4xMy0uMzg0LjI4LS43NC40NTMtMS4wNi4yNzItLjUwNi41OS0uOTEyLjkyMy0xLjE3M2ExLjggMS44IDAgMCAxIC40MzMtLjI1NnYyLjg5OGgtLjAwMnpNNC43MTUgMS41ODZjLjA1OC0uMDI0LjExNC0uMDQ3LjE3Mi0uMDY5LS4zNjYuNDktLjY4IDEuMS0uOTI1IDEuODAzYTYuMDU3IDYuMDU3IDAgMCAxLS45MjgtLjY1MyA1Ljg0IDUuODQgMCAwIDEgMS42ODEtMS4wODF6TTEuNTg2IDQuNzE0Yy4yMTYtLjUxLjUtLjk4MS44NDctMS40MS4zODkuMzM3LjgxNS42MyAxLjI3My44NzRhMTEuNjgxIDExLjY4MSAwIDAgMC0uMzIzIDIuMzg1SDEuMTRhNS44IDUuOCAwIDAgMSAuNDQ1LTEuODQ5ek0xLjE0IDcuNDM3aDIuMjQyYy4wMy44NDcuMTQyIDEuNjUyLjMyMyAyLjM4NWE2LjkzOSA2LjkzOSAwIDAgMC0xLjI3My44NzNBNS44NDIgNS44NDIgMCAwIDEgMS4xNCA3LjQzN3ptMy41NzMgNC45NzdhNS44NCA1Ljg0IDAgMCAxLTEuNjgxLTEuMDgxYy4yODktLjI0Ny42LS40NjQuOTI4LS42NTMuMjQ1LjcwMy41NiAxLjMxNC45MjUgMS44MDNhNS42MjQgNS42MjQgMCAwIDEtLjE3Mi0uMDY5em00LjU3MiAwYTYuMTY4IDYuMTY4IDAgMCAxLS4xNzIuMDY5Yy4zNjYtLjQ5LjY4LTEuMS45MjUtMS44MDMuMzI4LjE4Ny42NC40MDYuOTI4LjY1M2E1Ljg0IDUuODQgMCAwIDEtMS42ODEgMS4wODF6IiBmaWxsPSIjRkZGIi8+PC9zdmc+',
+        }}
+        src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxjaXJjbGUgaWQ9ImIiIGN4PSIyMCIgY3k9IjIwIiByPSIyMCIvPjxmaWx0ZXIgeD0iLTE3LjUlIiB5PSItMTIuNSUiIHdpZHRoPSIxMzUlIiBoZWlnaHQ9IjEzNSUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9ImEiPjxmZU9mZnNldCBkeT0iMiIgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSIvPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSIvPjxmZUNvbXBvc2l0ZSBpbj0ic2hhZG93Qmx1ck91dGVyMSIgaW4yPSJTb3VyY2VBbHBoYSIgb3BlcmF0b3I9Im91dCIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjA0IDAiIGluPSJzaGFkb3dCbHVyT3V0ZXIxIi8+PC9maWx0ZXI+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNCAyKSI+PHVzZSBmaWxsPSIjMDAwIiBmaWx0ZXI9InVybCgjYSkiIHhsaW5rOmhyZWY9IiNiIi8+PGNpcmNsZSBzdHJva2U9IiM2OUMwRkYiIHN0cm9rZS1saW5lam9pbj0ic3F1YXJlIiBmaWxsLW9wYWNpdHk9Ii45MiIgZmlsbD0iIzY5QzBGRiIgY3g9IjIwIiBjeT0iMjAiIHI9IjE5LjUiLz48L2c+PHBhdGggZD0iTTI5LjM1IDI2LjUxNGwuMDEtLjAxNEE2Ljk2NiA2Ljk2NiAwIDAgMCAzMSAyMmE2Ljk3MyA2Ljk3MyAwIDAgMC0xLjYzNy00LjVsLS4wMTEtLjAxMy0uMDUtLjA1Ny0uMDItLjAyMi0uMDYzLS4wNzQtLjAwMi0uMDAxLS4wNzItLjA4LS4wMDEtLjAwMWMtLjA1LS4wNTQtLjEtLjEwNy0uMTUyLS4xNThsLS4wMDEtLjAwMi0uMDc1LS4wNzUtLjAwNS0uMDA0Yy0uMDIzLS4wMjQtLjA0Ny0uMDQ2LS4wNy0uMDY4bC0uMDI1LS4wMjMtLjA0Ny0uMDQ0LS4wMTYtLjAxNUE2Ljk2NiA2Ljk2NiAwIDAgMCAyNCAxNWE2Ljk3MyA2Ljk3MyAwIDAgMC00Ljc1NSAxLjg2M2wtLjAxNS4wMTUtLjA0Ny4wNDUtLjAyNS4wMjQtLjA3LjA2Ny0uMDA1LjAwNS0uMDc1LjA3NS0uMDAyLjAwMS0uMTUxLjE1OC0uMDAyLjAwMmEzLjMwOSAzLjMwOSAwIDAgMC0uMDcyLjA4aC0uMDAxYTEuNDM2IDEuNDM2IDAgMCAwLS4wNjQuMDc0bC0uMDIuMDIyYy0uMDE2LjAxOS0uMDMyLjA0LS4wNS4wNTgtLjAwMi4wMDUtLjAwNy4wMDgtLjAxLjAxM0E2Ljk3MyA2Ljk3MyAwIDAgMCAxNyAyMmMwIDEuNzE0LjYxNiAzLjI4MyAxLjYzOCA0LjVsLjAxLjAxNC4wNDkuMDU4LjAxOS4wMjIuMDY0LjA3My4wMDEuMDAzYy4wMjQuMDI3LjA0Ny4wNTMuMDcyLjA3OGwuMDAyLjAwMi4xNS4xNTguMDAxLjAwMS4wNzQuMDc0LjAwNC4wMDRBNi45ODcgNi45ODcgMCAwIDAgMjQgMjlhNi45NzMgNi45NzMgMCAwIDAgNC45MS0yLjAxMmwuMDA2LS4wMDRjLjAyNS0uMDI1LjA1LS4wNDkuMDczLS4wNzRsLjAwMi0uMDAxYTQuNzMgNC43MyAwIDAgMCAuMTUtLjE1OGwuMDAxLS4wMDJjLjAyNC0uMDI2LjA0OS0uMDUxLjA3Mi0uMDc4IDAtLjAwMS4wMDItLjAwMS4wMDItLjAwM2wuMDY0LS4wNzMuMDE4LS4wMjJjLjAyLS4wMi4wMzYtLjA0LjA1Mi0uMDU4em0uMDY0LTIuMjI4Yy0uMjE2LjUxLS41Ljk4MS0uODQ3IDEuNDFhNi45MzkgNi45MzkgMCAwIDAtMS4yNzMtLjg3NGMuMTgxLS43MzMuMjkzLTEuNTM4LjMyMy0yLjM4NGgyLjI0MmE1Ljg0MiA1Ljg0MiAwIDAgMS0uNDQ1IDEuODQ4em0uNDQ1LTIuNzIzaC0yLjI0MmExMS42ODEgMTEuNjgxIDAgMCAwLS4zMjMtMi4zODUgNi45MzkgNi45MzkgMCAwIDAgMS4yNzMtLjg3MyA1Ljg0MiA1Ljg0MiAwIDAgMSAxLjI5MiAzLjI1OHptLTMuNTczLTQuOTc3YTUuODQgNS44NCAwIDAgMSAxLjY4MSAxLjA4MWMtLjI4OS4yNDctLjYuNDY0LS45MjguNjUzLS4yNDUtLjcwMy0uNTYtMS4zMTQtLjkyNS0xLjgwMy4wNTguMDIyLjExNi4wNDYuMTcyLjA2OXpNMjQuODcgMjcuNTMzYTEuNzY4IDEuNzY4IDAgMCAxLS40MzMuMjU2di0yLjg5OGE2LjA4IDYuMDggMCAwIDEgMS44MDguNDA5Yy0uMTMuMzg0LS4yOC43NC0uNDUzIDEuMDYtLjI3Mi41MDYtLjU5LjkxLS45MjIgMS4xNzN6bS45MjItOS44OTJjLjE3Mi4zMjIuMzI0LjY3Ni40NTMgMS4wNTlhNi4wOCA2LjA4IDAgMCAxLTEuODA4LjQxdi0yLjg5N2MuMTQ0LjA1Ny4yOS4xNDIuNDMzLjI1Ni4zMzIuMjYuNjUuNjY1LjkyMiAxLjE3MnptLTEuMzU1IDYuMzczdi0xLjU3NmgyLjMwNWMtLjAyNS42OS0uMTEgMS4zNi0uMjU1IDEuOTk2bC0uMDA0LjAyYTYuOTUzIDYuOTUzIDAgMCAwLTIuMDQ1LS40NHptMC0yLjQ1MXYtMS41NzdhNi45NTMgNi45NTMgMCAwIDAgMi4wNDYtLjQ0bC4wMDUuMDJjLjE0My42MzYuMjMgMS4zMDQuMjU0IDEuOTk3aC0yLjMwNHptLS44NzUuODc1djEuNTc2YTYuOTUzIDYuOTUzIDAgMCAwLTIuMDQ1LjQ0bC0uMDA1LS4wMmExMC44MzUgMTAuODM1IDAgMCAxLS4yNTQtMS45OTZoMi4zMDV6bS0yLjMwNC0uODc1Yy4wMjUtLjY5MS4xMS0xLjM2MS4yNTUtMS45OTdsLjAwNC0uMDJhNi45NDMgNi45NDMgMCAwIDAgMi4wNDUuNDR2MS41NzdoLTIuMzA0em0yLjMwNSAzLjMyOHYyLjg5N2ExLjc0OCAxLjc0OCAwIDAgMS0uNDMzLS4yNTdjLS4zMzItLjI2LS42NTItLjY2Ny0uOTI0LTEuMTczYTcuMDYgNy4wNiAwIDAgMS0uNDUzLTEuMDYgNi4wOTggNi4wOTggMCAwIDEgMS44MS0uNDA3em0wLTUuNzgyYTYuMDggNi4wOCAwIDAgMS0xLjgwOC0uNDA5Yy4xMy0uMzg0LjI4LS43NC40NTMtMS4wNi4yNzItLjUwNi41OS0uOTEyLjkyMy0xLjE3M2ExLjggMS44IDAgMCAxIC40MzMtLjI1NnYyLjg5OGgtLjAwMnptLTEuODQ5LTIuNTIzYy4wNTgtLjAyMy4xMTQtLjA0Ny4xNzItLjA2OS0uMzY2LjQ5LS42OCAxLjEtLjkyNSAxLjgwM2E2LjA1NyA2LjA1NyAwIDAgMS0uOTI4LS42NTMgNS44NCA1Ljg0IDAgMCAxIDEuNjgxLTEuMDgxem0tMy4xMjggMy4xMjhjLjIxNi0uNTEuNS0uOTgxLjg0Ny0xLjQxLjM4OS4zMzcuODE1LjYzIDEuMjczLjg3NGExMS42ODEgMTEuNjgxIDAgMCAwLS4zMjMgMi4zODVIMTguMTRjLjA0Ny0uNjQuMTk3LTEuMjYuNDQ1LTEuODQ5em0tLjQ0NSAyLjcyNGgyLjI0MmMuMDMuODQ2LjE0MiAxLjY1MS4zMjMgMi4zODRhNi45MzkgNi45MzkgMCAwIDAtMS4yNzMuODczIDUuODQyIDUuODQyIDAgMCAxLTEuMjkyLTMuMjU4em0zLjU3MyA0Ljk3NmE1Ljg0IDUuODQgMCAwIDEtMS42ODEtMS4wODFjLjI4OS0uMjQ3LjYtLjQ2NC45MjgtLjY1My4yNDUuNzAzLjU2IDEuMzE0LjkyNSAxLjgwM2E1LjYyNCA1LjYyNCAwIDAgMS0uMTcyLS4wNjl6bTQuNTcyIDBhNi4xNjggNi4xNjggMCAwIDEtLjE3Mi4wNjljLjM2Ni0uNDkuNjgtMS4xLjkyNS0xLjgwMy4zMjguMTg3LjY0LjQwNi45MjguNjUzYTUuODQgNS44NCAwIDAgMS0xLjY4MSAxLjA4MXoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0ibm9uemVybyIvPjwvZz48L3N2Zz4="
+      />
+      <Item
+        type="node"
+        size="40"
+        shape="koni-custom-node"
+        model={{
+          color: '#5CDBD3',
+          label: 'Person',
+          labelOffsetY: 28,
+          icon:
+            'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEyLjM1IDExLjUxNGwuMDEtLjAxNEE2Ljk2NiA2Ljk2NiAwIDAgMCAxNCA3YTYuOTczIDYuOTczIDAgMCAwLTEuNjM3LTQuNWwtLjAxMS0uMDEzLS4wNS0uMDU3LS4wMi0uMDIyLS4wNjMtLjA3NC0uMDAyLS4wMDEtLjA3Mi0uMDgtLjAwMS0uMDAxYy0uMDUtLjA1NC0uMS0uMTA3LS4xNTItLjE1OGwtLjAwMS0uMDAyLS4wNzUtLjA3NS0uMDA1LS4wMDQtLjA3LS4wNjgtLjAyNS0uMDIzLS4wNDctLjA0NC0uMDE2LS4wMTZBNi45NjYgNi45NjYgMCAwIDAgNyAwYTYuOTczIDYuOTczIDAgMCAwLTQuNzU1IDEuODYybC0uMDE1LjAxNi0uMDQ3LjA0NS0uMDI1LjAyNC0uMDcuMDY3LS4wMDUuMDA1LS4wNzUuMDc1LS4wMDIuMDAxLS4xNTEuMTU4LS4wMDIuMDAyYTMuMzA5IDMuMzA5IDAgMCAwLS4wNzIuMDhIMS43OGExLjQzNiAxLjQzNiAwIDAgMC0uMDY0LjA3NGwtLjAyLjAyMmMtLjAxNi4wMTktLjAzMi4wNC0uMDUuMDU4LS4wMDIuMDA1LS4wMDcuMDA4LS4wMS4wMTNBNi45NzMgNi45NzMgMCAwIDAgMCA3YzAgMS43MTQuNjE2IDMuMjgzIDEuNjM4IDQuNWwuMDEuMDE0LjA0OS4wNTguMDE5LjAyMi4wNjQuMDczLjAwMS4wMDNjLjAyNC4wMjcuMDQ3LjA1My4wNzIuMDc4bC4wMDIuMDAyLjE1LjE1OC4wMDEuMDAxLjA3NC4wNzQuMDA0LjAwNUE2Ljk4NyA2Ljk4NyAwIDAgMCA3IDE0YTYuOTczIDYuOTczIDAgMCAwIDQuOTEtMi4wMTJsLjAwNi0uMDA1Yy4wMjUtLjAyNS4wNS0uMDQ5LjA3My0uMDc0bC4wMDItLjAwMWE0LjczIDQuNzMgMCAwIDAgLjE1LS4xNThsLjAwMS0uMDAyYy4wMjQtLjAyNi4wNDktLjA1MS4wNzItLjA3OCAwLS4wMDEuMDAyLS4wMDEuMDAyLS4wMDMuMDIyLS4wMjMuMDQzLS4wNDguMDY0LS4wNzNsLjAxOC0uMDIyYy4wMi0uMDIuMDM2LS4wNC4wNTItLjA1OHptLjA2NC0yLjIyOGMtLjIxNi41MS0uNS45ODEtLjg0NyAxLjQxYTYuOTM5IDYuOTM5IDAgMCAwLTEuMjczLS44NzRjLjE4MS0uNzMzLjI5My0xLjUzOC4zMjMtMi4zODRoMi4yNDJhNS44NDIgNS44NDIgMCAwIDEtLjQ0NSAxLjg0OHptLjQ0NS0yLjcyM2gtMi4yNDJhMTEuNjgxIDExLjY4MSAwIDAgMC0uMzIzLTIuMzg1IDYuOTM5IDYuOTM5IDAgMCAwIDEuMjczLS44NzMgNS44NDIgNS44NDIgMCAwIDEgMS4yOTIgMy4yNTh6TTkuMjg2IDEuNTg1YTUuODQgNS44NCAwIDAgMSAxLjY4MSAxLjA4MWMtLjI4OS4yNDctLjYuNDY0LS45MjguNjUzLS4yNDUtLjcwMy0uNTYtMS4zMTQtLjkyNS0xLjgwMy4wNTguMDIyLjExNi4wNDYuMTcyLjA2OXpNNy44NyAxMi41MzNhMS43NjggMS43NjggMCAwIDEtLjQzMy4yNTZWOS44OTFhNi4wOCA2LjA4IDAgMCAxIDEuODA4LjQwOWMtLjEzLjM4NC0uMjguNzQtLjQ1MyAxLjA2LS4yNzIuNTA2LS41OS45MS0uOTIyIDEuMTczem0uOTIyLTkuODkyYy4xNzIuMzIxLjMyNC42NzYuNDUzIDEuMDU5YTYuMDggNi4wOCAwIDAgMS0xLjgwNy40MVYxLjIxMWMuMTQzLjA1OC4yODkuMTQzLjQzMi4yNTcuMzMyLjI2LjY1LjY2NS45MjIgMS4xNzJ6TTcuNDM4IDkuMDE0VjcuNDM4aDIuMzA0Yy0uMDI1LjY5LS4xMSAxLjM2LS4yNTUgMS45OTZsLS4wMDQuMDJhNi45NTMgNi45NTMgMCAwIDAtMi4wNDYtLjQ0em0wLTIuNDUxVjQuOTg2YTYuOTUzIDYuOTUzIDAgMCAwIDIuMDQ1LS40NGwuMDA1LjAyYy4xNDMuNjM2LjIzIDEuMzA0LjI1NCAxLjk5N0g3LjQzN3ptLS44NzUuODc1djEuNTc2YTYuOTUzIDYuOTUzIDAgMCAwLTIuMDQ2LjQ0bC0uMDA1LS4wMmExMC44MzUgMTAuODM1IDAgMCAxLS4yNTQtMS45OTZoMi4zMDR6bS0yLjMwNS0uODc1Yy4wMjUtLjY5MS4xMS0xLjM2MS4yNTUtMS45OTdsLjAwNC0uMDJhNi45NDMgNi45NDMgMCAwIDAgMi4wNDUuNDR2MS41NzdINC4yNTh6TTYuNTYyIDkuODl2Mi44OTZhMS43NDggMS43NDggMCAwIDEtLjQzMi0uMjU2Yy0uMzMyLS4yNi0uNjUyLS42NjctLjkyNC0xLjE3M2E3LjA2IDcuMDYgMCAwIDEtLjQ1My0xLjA2IDYuMDk4IDYuMDk4IDAgMCAxIDEuODEtLjQwN3ptMC01Ljc4MkE2LjA4IDYuMDggMCAwIDEgNC43NTUgMy43Yy4xMy0uMzg0LjI4LS43NC40NTMtMS4wNi4yNzItLjUwNi41OS0uOTEyLjkyMy0xLjE3M2ExLjggMS44IDAgMCAxIC40MzMtLjI1NnYyLjg5OGgtLjAwMnpNNC43MTUgMS41ODZjLjA1OC0uMDI0LjExNC0uMDQ3LjE3Mi0uMDY5LS4zNjYuNDktLjY4IDEuMS0uOTI1IDEuODAzYTYuMDU3IDYuMDU3IDAgMCAxLS45MjgtLjY1MyA1Ljg0IDUuODQgMCAwIDEgMS42ODEtMS4wODF6TTEuNTg2IDQuNzE0Yy4yMTYtLjUxLjUtLjk4MS44NDctMS40MS4zODkuMzM3LjgxNS42MyAxLjI3My44NzRhMTEuNjgxIDExLjY4MSAwIDAgMC0uMzIzIDIuMzg1SDEuMTRhNS44IDUuOCAwIDAgMSAuNDQ1LTEuODQ5ek0xLjE0IDcuNDM3aDIuMjQyYy4wMy44NDcuMTQyIDEuNjUyLjMyMyAyLjM4NWE2LjkzOSA2LjkzOSAwIDAgMC0xLjI3My44NzNBNS44NDIgNS44NDIgMCAwIDEgMS4xNCA3LjQzN3ptMy41NzMgNC45NzdhNS44NCA1Ljg0IDAgMCAxLTEuNjgxLTEuMDgxYy4yODktLjI0Ny42LS40NjQuOTI4LS42NTMuMjQ1LjcwMy41NiAxLjMxNC45MjUgMS44MDNhNS42MjQgNS42MjQgMCAwIDEtLjE3Mi0uMDY5em00LjU3MiAwYTYuMTY4IDYuMTY4IDAgMCAxLS4xNzIuMDY5Yy4zNjYtLjQ5LjY4LTEuMS45MjUtMS44MDMuMzI4LjE4Ny42NC40MDYuOTI4LjY1M2E1Ljg0IDUuODQgMCAwIDEtMS42ODEgMS4wODF6IiBmaWxsPSIjRkZGIi8+PC9zdmc+',
+        }}
+        src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxjaXJjbGUgaWQ9ImIiIGN4PSIyMCIgY3k9IjIwIiByPSIyMCIvPjxmaWx0ZXIgeD0iLTE3LjUlIiB5PSItMTIuNSUiIHdpZHRoPSIxMzUlIiBoZWlnaHQ9IjEzNSUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9ImEiPjxmZU9mZnNldCBkeT0iMiIgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSIvPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSIvPjxmZUNvbXBvc2l0ZSBpbj0ic2hhZG93Qmx1ck91dGVyMSIgaW4yPSJTb3VyY2VBbHBoYSIgb3BlcmF0b3I9Im91dCIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjA0IDAiIGluPSJzaGFkb3dCbHVyT3V0ZXIxIi8+PC9maWx0ZXI+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNCAyKSI+PHVzZSBmaWxsPSIjMDAwIiBmaWx0ZXI9InVybCgjYSkiIHhsaW5rOmhyZWY9IiNiIi8+PGNpcmNsZSBzdHJva2U9IiM1Q0RCRDMiIHN0cm9rZS1saW5lam9pbj0ic3F1YXJlIiBmaWxsLW9wYWNpdHk9Ii45MiIgZmlsbD0iIzVDREJEMyIgY3g9IjIwIiBjeT0iMjAiIHI9IjE5LjUiLz48L2c+PHBhdGggZD0iTTI5LjM1IDI2LjUxNGwuMDEtLjAxNEE2Ljk2NiA2Ljk2NiAwIDAgMCAzMSAyMmE2Ljk3MyA2Ljk3MyAwIDAgMC0xLjYzNy00LjVsLS4wMTEtLjAxMy0uMDUtLjA1Ny0uMDItLjAyMi0uMDYzLS4wNzQtLjAwMi0uMDAxLS4wNzItLjA4LS4wMDEtLjAwMWMtLjA1LS4wNTQtLjEtLjEwNy0uMTUyLS4xNThsLS4wMDEtLjAwMi0uMDc1LS4wNzUtLjAwNS0uMDA0Yy0uMDIzLS4wMjQtLjA0Ny0uMDQ2LS4wNy0uMDY4bC0uMDI1LS4wMjMtLjA0Ny0uMDQ0LS4wMTYtLjAxNUE2Ljk2NiA2Ljk2NiAwIDAgMCAyNCAxNWE2Ljk3MyA2Ljk3MyAwIDAgMC00Ljc1NSAxLjg2M2wtLjAxNS4wMTUtLjA0Ny4wNDUtLjAyNS4wMjQtLjA3LjA2Ny0uMDA1LjAwNS0uMDc1LjA3NS0uMDAyLjAwMS0uMTUxLjE1OC0uMDAyLjAwMmEzLjMwOSAzLjMwOSAwIDAgMC0uMDcyLjA4aC0uMDAxYTEuNDM2IDEuNDM2IDAgMCAwLS4wNjQuMDc0bC0uMDIuMDIyYy0uMDE2LjAxOS0uMDMyLjA0LS4wNS4wNTgtLjAwMi4wMDUtLjAwNy4wMDgtLjAxLjAxM0E2Ljk3MyA2Ljk3MyAwIDAgMCAxNyAyMmMwIDEuNzE0LjYxNiAzLjI4MyAxLjYzOCA0LjVsLjAxLjAxNC4wNDkuMDU4LjAxOS4wMjIuMDY0LjA3My4wMDEuMDAzYy4wMjQuMDI3LjA0Ny4wNTMuMDcyLjA3OGwuMDAyLjAwMi4xNS4xNTguMDAxLjAwMS4wNzQuMDc0LjAwNC4wMDRBNi45ODcgNi45ODcgMCAwIDAgMjQgMjlhNi45NzMgNi45NzMgMCAwIDAgNC45MS0yLjAxMmwuMDA2LS4wMDRjLjAyNS0uMDI1LjA1LS4wNDkuMDczLS4wNzRsLjAwMi0uMDAxYTQuNzMgNC43MyAwIDAgMCAuMTUtLjE1OGwuMDAxLS4wMDJjLjAyNC0uMDI2LjA0OS0uMDUxLjA3Mi0uMDc4IDAtLjAwMS4wMDItLjAwMS4wMDItLjAwM2wuMDY0LS4wNzMuMDE4LS4wMjJjLjAyLS4wMi4wMzYtLjA0LjA1Mi0uMDU4em0uMDY0LTIuMjI4Yy0uMjE2LjUxLS41Ljk4MS0uODQ3IDEuNDFhNi45MzkgNi45MzkgMCAwIDAtMS4yNzMtLjg3NGMuMTgxLS43MzMuMjkzLTEuNTM4LjMyMy0yLjM4NGgyLjI0MmE1Ljg0MiA1Ljg0MiAwIDAgMS0uNDQ1IDEuODQ4em0uNDQ1LTIuNzIzaC0yLjI0MmExMS42ODEgMTEuNjgxIDAgMCAwLS4zMjMtMi4zODUgNi45MzkgNi45MzkgMCAwIDAgMS4yNzMtLjg3MyA1Ljg0MiA1Ljg0MiAwIDAgMSAxLjI5MiAzLjI1OHptLTMuNTczLTQuOTc3YTUuODQgNS44NCAwIDAgMSAxLjY4MSAxLjA4MWMtLjI4OS4yNDctLjYuNDY0LS45MjguNjUzLS4yNDUtLjcwMy0uNTYtMS4zMTQtLjkyNS0xLjgwMy4wNTguMDIyLjExNi4wNDYuMTcyLjA2OXpNMjQuODcgMjcuNTMzYTEuNzY4IDEuNzY4IDAgMCAxLS40MzMuMjU2di0yLjg5OGE2LjA4IDYuMDggMCAwIDEgMS44MDguNDA5Yy0uMTMuMzg0LS4yOC43NC0uNDUzIDEuMDYtLjI3Mi41MDYtLjU5LjkxLS45MjIgMS4xNzN6bS45MjItOS44OTJjLjE3Mi4zMjIuMzI0LjY3Ni40NTMgMS4wNTlhNi4wOCA2LjA4IDAgMCAxLTEuODA4LjQxdi0yLjg5N2MuMTQ0LjA1Ny4yOS4xNDIuNDMzLjI1Ni4zMzIuMjYuNjUuNjY1LjkyMiAxLjE3MnptLTEuMzU1IDYuMzczdi0xLjU3NmgyLjMwNWMtLjAyNS42OS0uMTEgMS4zNi0uMjU1IDEuOTk2bC0uMDA0LjAyYTYuOTUzIDYuOTUzIDAgMCAwLTIuMDQ1LS40NHptMC0yLjQ1MXYtMS41NzdhNi45NTMgNi45NTMgMCAwIDAgMi4wNDYtLjQ0bC4wMDUuMDJjLjE0My42MzYuMjMgMS4zMDQuMjU0IDEuOTk3aC0yLjMwNHptLS44NzUuODc1djEuNTc2YTYuOTUzIDYuOTUzIDAgMCAwLTIuMDQ1LjQ0bC0uMDA1LS4wMmExMC44MzUgMTAuODM1IDAgMCAxLS4yNTQtMS45OTZoMi4zMDV6bS0yLjMwNC0uODc1Yy4wMjUtLjY5MS4xMS0xLjM2MS4yNTUtMS45OTdsLjAwNC0uMDJhNi45NDMgNi45NDMgMCAwIDAgMi4wNDUuNDR2MS41NzdoLTIuMzA0em0yLjMwNSAzLjMyOHYyLjg5N2ExLjc0OCAxLjc0OCAwIDAgMS0uNDMzLS4yNTdjLS4zMzItLjI2LS42NTItLjY2Ny0uOTI0LTEuMTczYTcuMDYgNy4wNiAwIDAgMS0uNDUzLTEuMDYgNi4wOTggNi4wOTggMCAwIDEgMS44MS0uNDA3em0wLTUuNzgyYTYuMDggNi4wOCAwIDAgMS0xLjgwOC0uNDA5Yy4xMy0uMzg0LjI4LS43NC40NTMtMS4wNi4yNzItLjUwNi41OS0uOTEyLjkyMy0xLjE3M2ExLjggMS44IDAgMCAxIC40MzMtLjI1NnYyLjg5OGgtLjAwMnptLTEuODQ5LTIuNTIzYy4wNTgtLjAyMy4xMTQtLjA0Ny4xNzItLjA2OS0uMzY2LjQ5LS42OCAxLjEtLjkyNSAxLjgwM2E2LjA1NyA2LjA1NyAwIDAgMS0uOTI4LS42NTMgNS44NCA1Ljg0IDAgMCAxIDEuNjgxLTEuMDgxem0tMy4xMjggMy4xMjhjLjIxNi0uNTEuNS0uOTgxLjg0Ny0xLjQxLjM4OS4zMzcuODE1LjYzIDEuMjczLjg3NGExMS42ODEgMTEuNjgxIDAgMCAwLS4zMjMgMi4zODVIMTguMTRjLjA0Ny0uNjQuMTk3LTEuMjYuNDQ1LTEuODQ5em0tLjQ0NSAyLjcyNGgyLjI0MmMuMDMuODQ2LjE0MiAxLjY1MS4zMjMgMi4zODRhNi45MzkgNi45MzkgMCAwIDAtMS4yNzMuODczIDUuODQyIDUuODQyIDAgMCAxLTEuMjkyLTMuMjU4em0zLjU3MyA0Ljk3NmE1Ljg0IDUuODQgMCAwIDEtMS42ODEtMS4wODFjLjI4OS0uMjQ3LjYtLjQ2NC45MjgtLjY1My4yNDUuNzAzLjU2IDEuMzE0LjkyNSAxLjgwM2E1LjYyNCA1LjYyNCAwIDAgMS0uMTcyLS4wNjl6bTQuNTcyIDBhNi4xNjggNi4xNjggMCAwIDEtLjE3Mi4wNjljLjM2Ni0uNDkuNjgtMS4xLjkyNS0xLjgwMy4zMjguMTg3LjY0LjQwNi45MjguNjUzYTUuODQgNS44NCAwIDAgMS0xLjY4MSAxLjA4MXoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0ibm9uemVybyIvPjwvZz48L3N2Zz4="
+      />
+      <Item
+        type="node"
+        size="40"
+        shape="koni-custom-node"
+        model={{
+          color: '#B37FEB',
+          label: 'Country',
+          labelOffsetY: 28,
+          icon:
+            'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEyLjM1IDExLjUxNGwuMDEtLjAxNEE2Ljk2NiA2Ljk2NiAwIDAgMCAxNCA3YTYuOTczIDYuOTczIDAgMCAwLTEuNjM3LTQuNWwtLjAxMS0uMDEzLS4wNS0uMDU3LS4wMi0uMDIyLS4wNjMtLjA3NC0uMDAyLS4wMDEtLjA3Mi0uMDgtLjAwMS0uMDAxYy0uMDUtLjA1NC0uMS0uMTA3LS4xNTItLjE1OGwtLjAwMS0uMDAyLS4wNzUtLjA3NS0uMDA1LS4wMDQtLjA3LS4wNjgtLjAyNS0uMDIzLS4wNDctLjA0NC0uMDE2LS4wMTZBNi45NjYgNi45NjYgMCAwIDAgNyAwYTYuOTczIDYuOTczIDAgMCAwLTQuNzU1IDEuODYybC0uMDE1LjAxNi0uMDQ3LjA0NS0uMDI1LjAyNC0uMDcuMDY3LS4wMDUuMDA1LS4wNzUuMDc1LS4wMDIuMDAxLS4xNTEuMTU4LS4wMDIuMDAyYTMuMzA5IDMuMzA5IDAgMCAwLS4wNzIuMDhIMS43OGExLjQzNiAxLjQzNiAwIDAgMC0uMDY0LjA3NGwtLjAyLjAyMmMtLjAxNi4wMTktLjAzMi4wNC0uMDUuMDU4LS4wMDIuMDA1LS4wMDcuMDA4LS4wMS4wMTNBNi45NzMgNi45NzMgMCAwIDAgMCA3YzAgMS43MTQuNjE2IDMuMjgzIDEuNjM4IDQuNWwuMDEuMDE0LjA0OS4wNTguMDE5LjAyMi4wNjQuMDczLjAwMS4wMDNjLjAyNC4wMjcuMDQ3LjA1My4wNzIuMDc4bC4wMDIuMDAyLjE1LjE1OC4wMDEuMDAxLjA3NC4wNzQuMDA0LjAwNUE2Ljk4NyA2Ljk4NyAwIDAgMCA3IDE0YTYuOTczIDYuOTczIDAgMCAwIDQuOTEtMi4wMTJsLjAwNi0uMDA1Yy4wMjUtLjAyNS4wNS0uMDQ5LjA3My0uMDc0bC4wMDItLjAwMWE0LjczIDQuNzMgMCAwIDAgLjE1LS4xNThsLjAwMS0uMDAyYy4wMjQtLjAyNi4wNDktLjA1MS4wNzItLjA3OCAwLS4wMDEuMDAyLS4wMDEuMDAyLS4wMDMuMDIyLS4wMjMuMDQzLS4wNDguMDY0LS4wNzNsLjAxOC0uMDIyYy4wMi0uMDIuMDM2LS4wNC4wNTItLjA1OHptLjA2NC0yLjIyOGMtLjIxNi41MS0uNS45ODEtLjg0NyAxLjQxYTYuOTM5IDYuOTM5IDAgMCAwLTEuMjczLS44NzRjLjE4MS0uNzMzLjI5My0xLjUzOC4zMjMtMi4zODRoMi4yNDJhNS44NDIgNS44NDIgMCAwIDEtLjQ0NSAxLjg0OHptLjQ0NS0yLjcyM2gtMi4yNDJhMTEuNjgxIDExLjY4MSAwIDAgMC0uMzIzLTIuMzg1IDYuOTM5IDYuOTM5IDAgMCAwIDEuMjczLS44NzMgNS44NDIgNS44NDIgMCAwIDEgMS4yOTIgMy4yNTh6TTkuMjg2IDEuNTg1YTUuODQgNS44NCAwIDAgMSAxLjY4MSAxLjA4MWMtLjI4OS4yNDctLjYuNDY0LS45MjguNjUzLS4yNDUtLjcwMy0uNTYtMS4zMTQtLjkyNS0xLjgwMy4wNTguMDIyLjExNi4wNDYuMTcyLjA2OXpNNy44NyAxMi41MzNhMS43NjggMS43NjggMCAwIDEtLjQzMy4yNTZWOS44OTFhNi4wOCA2LjA4IDAgMCAxIDEuODA4LjQwOWMtLjEzLjM4NC0uMjguNzQtLjQ1MyAxLjA2LS4yNzIuNTA2LS41OS45MS0uOTIyIDEuMTczem0uOTIyLTkuODkyYy4xNzIuMzIxLjMyNC42NzYuNDUzIDEuMDU5YTYuMDggNi4wOCAwIDAgMS0xLjgwNy40MVYxLjIxMWMuMTQzLjA1OC4yODkuMTQzLjQzMi4yNTcuMzMyLjI2LjY1LjY2NS45MjIgMS4xNzJ6TTcuNDM4IDkuMDE0VjcuNDM4aDIuMzA0Yy0uMDI1LjY5LS4xMSAxLjM2LS4yNTUgMS45OTZsLS4wMDQuMDJhNi45NTMgNi45NTMgMCAwIDAtMi4wNDYtLjQ0em0wLTIuNDUxVjQuOTg2YTYuOTUzIDYuOTUzIDAgMCAwIDIuMDQ1LS40NGwuMDA1LjAyYy4xNDMuNjM2LjIzIDEuMzA0LjI1NCAxLjk5N0g3LjQzN3ptLS44NzUuODc1djEuNTc2YTYuOTUzIDYuOTUzIDAgMCAwLTIuMDQ2LjQ0bC0uMDA1LS4wMmExMC44MzUgMTAuODM1IDAgMCAxLS4yNTQtMS45OTZoMi4zMDR6bS0yLjMwNS0uODc1Yy4wMjUtLjY5MS4xMS0xLjM2MS4yNTUtMS45OTdsLjAwNC0uMDJhNi45NDMgNi45NDMgMCAwIDAgMi4wNDUuNDR2MS41NzdINC4yNTh6TTYuNTYyIDkuODl2Mi44OTZhMS43NDggMS43NDggMCAwIDEtLjQzMi0uMjU2Yy0uMzMyLS4yNi0uNjUyLS42NjctLjkyNC0xLjE3M2E3LjA2IDcuMDYgMCAwIDEtLjQ1My0xLjA2IDYuMDk4IDYuMDk4IDAgMCAxIDEuODEtLjQwN3ptMC01Ljc4MkE2LjA4IDYuMDggMCAwIDEgNC43NTUgMy43Yy4xMy0uMzg0LjI4LS43NC40NTMtMS4wNi4yNzItLjUwNi41OS0uOTEyLjkyMy0xLjE3M2ExLjggMS44IDAgMCAxIC40MzMtLjI1NnYyLjg5OGgtLjAwMnpNNC43MTUgMS41ODZjLjA1OC0uMDI0LjExNC0uMDQ3LjE3Mi0uMDY5LS4zNjYuNDktLjY4IDEuMS0uOTI1IDEuODAzYTYuMDU3IDYuMDU3IDAgMCAxLS45MjgtLjY1MyA1Ljg0IDUuODQgMCAwIDEgMS42ODEtMS4wODF6TTEuNTg2IDQuNzE0Yy4yMTYtLjUxLjUtLjk4MS44NDctMS40MS4zODkuMzM3LjgxNS42MyAxLjI3My44NzRhMTEuNjgxIDExLjY4MSAwIDAgMC0uMzIzIDIuMzg1SDEuMTRhNS44IDUuOCAwIDAgMSAuNDQ1LTEuODQ5ek0xLjE0IDcuNDM3aDIuMjQyYy4wMy44NDcuMTQyIDEuNjUyLjMyMyAyLjM4NWE2LjkzOSA2LjkzOSAwIDAgMC0xLjI3My44NzNBNS44NDIgNS44NDIgMCAwIDEgMS4xNCA3LjQzN3ptMy41NzMgNC45NzdhNS44NCA1Ljg0IDAgMCAxLTEuNjgxLTEuMDgxYy4yODktLjI0Ny42LS40NjQuOTI4LS42NTMuMjQ1LjcwMy41NiAxLjMxNC45MjUgMS44MDNhNS42MjQgNS42MjQgMCAwIDEtLjE3Mi0uMDY5em00LjU3MiAwYTYuMTY4IDYuMTY4IDAgMCAxLS4xNzIuMDY5Yy4zNjYtLjQ5LjY4LTEuMS45MjUtMS44MDMuMzI4LjE4Ny42NC40MDYuOTI4LjY1M2E1Ljg0IDUuODQgMCAwIDEtMS42ODEgMS4wODF6IiBmaWxsPSIjRkZGIi8+PC9zdmc+',
+        }}
+        src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxjaXJjbGUgaWQ9ImIiIGN4PSIyMCIgY3k9IjIwIiByPSIyMCIvPjxmaWx0ZXIgeD0iLTE3LjUlIiB5PSItMTIuNSUiIHdpZHRoPSIxMzUlIiBoZWlnaHQ9IjEzNSUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9ImEiPjxmZU9mZnNldCBkeT0iMiIgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSIvPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSIvPjxmZUNvbXBvc2l0ZSBpbj0ic2hhZG93Qmx1ck91dGVyMSIgaW4yPSJTb3VyY2VBbHBoYSIgb3BlcmF0b3I9Im91dCIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjA0IDAiIGluPSJzaGFkb3dCbHVyT3V0ZXIxIi8+PC9maWx0ZXI+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNCAyKSI+PHVzZSBmaWxsPSIjMDAwIiBmaWx0ZXI9InVybCgjYSkiIHhsaW5rOmhyZWY9IiNiIi8+PGNpcmNsZSBzdHJva2U9IiNCMzdGRUIiIHN0cm9rZS1saW5lam9pbj0ic3F1YXJlIiBmaWxsLW9wYWNpdHk9Ii45MiIgZmlsbD0iI0IzN0ZFQiIgY3g9IjIwIiBjeT0iMjAiIHI9IjE5LjUiLz48L2c+PHBhdGggZD0iTTI5LjM1IDI2LjUxNGwuMDEtLjAxNEE2Ljk2NiA2Ljk2NiAwIDAgMCAzMSAyMmE2Ljk3MyA2Ljk3MyAwIDAgMC0xLjYzNy00LjVsLS4wMTEtLjAxMy0uMDUtLjA1Ny0uMDItLjAyMi0uMDYzLS4wNzQtLjAwMi0uMDAxLS4wNzItLjA4LS4wMDEtLjAwMWMtLjA1LS4wNTQtLjEtLjEwNy0uMTUyLS4xNThsLS4wMDEtLjAwMi0uMDc1LS4wNzUtLjAwNS0uMDA0Yy0uMDIzLS4wMjQtLjA0Ny0uMDQ2LS4wNy0uMDY4bC0uMDI1LS4wMjMtLjA0Ny0uMDQ0LS4wMTYtLjAxNUE2Ljk2NiA2Ljk2NiAwIDAgMCAyNCAxNWE2Ljk3MyA2Ljk3MyAwIDAgMC00Ljc1NSAxLjg2M2wtLjAxNS4wMTUtLjA0Ny4wNDUtLjAyNS4wMjQtLjA3LjA2Ny0uMDA1LjAwNS0uMDc1LjA3NS0uMDAyLjAwMS0uMTUxLjE1OC0uMDAyLjAwMmEzLjMwOSAzLjMwOSAwIDAgMC0uMDcyLjA4aC0uMDAxYTEuNDM2IDEuNDM2IDAgMCAwLS4wNjQuMDc0bC0uMDIuMDIyYy0uMDE2LjAxOS0uMDMyLjA0LS4wNS4wNTgtLjAwMi4wMDUtLjAwNy4wMDgtLjAxLjAxM0E2Ljk3MyA2Ljk3MyAwIDAgMCAxNyAyMmMwIDEuNzE0LjYxNiAzLjI4MyAxLjYzOCA0LjVsLjAxLjAxNC4wNDkuMDU4LjAxOS4wMjIuMDY0LjA3My4wMDEuMDAzYy4wMjQuMDI3LjA0Ny4wNTMuMDcyLjA3OGwuMDAyLjAwMi4xNS4xNTguMDAxLjAwMS4wNzQuMDc0LjAwNC4wMDRBNi45ODcgNi45ODcgMCAwIDAgMjQgMjlhNi45NzMgNi45NzMgMCAwIDAgNC45MS0yLjAxMmwuMDA2LS4wMDRjLjAyNS0uMDI1LjA1LS4wNDkuMDczLS4wNzRsLjAwMi0uMDAxYTQuNzMgNC43MyAwIDAgMCAuMTUtLjE1OGwuMDAxLS4wMDJjLjAyNC0uMDI2LjA0OS0uMDUxLjA3Mi0uMDc4IDAtLjAwMS4wMDItLjAwMS4wMDItLjAwM2wuMDY0LS4wNzMuMDE4LS4wMjJjLjAyLS4wMi4wMzYtLjA0LjA1Mi0uMDU4em0uMDY0LTIuMjI4Yy0uMjE2LjUxLS41Ljk4MS0uODQ3IDEuNDFhNi45MzkgNi45MzkgMCAwIDAtMS4yNzMtLjg3NGMuMTgxLS43MzMuMjkzLTEuNTM4LjMyMy0yLjM4NGgyLjI0MmE1Ljg0MiA1Ljg0MiAwIDAgMS0uNDQ1IDEuODQ4em0uNDQ1LTIuNzIzaC0yLjI0MmExMS42ODEgMTEuNjgxIDAgMCAwLS4zMjMtMi4zODUgNi45MzkgNi45MzkgMCAwIDAgMS4yNzMtLjg3MyA1Ljg0MiA1Ljg0MiAwIDAgMSAxLjI5MiAzLjI1OHptLTMuNTczLTQuOTc3YTUuODQgNS44NCAwIDAgMSAxLjY4MSAxLjA4MWMtLjI4OS4yNDctLjYuNDY0LS45MjguNjUzLS4yNDUtLjcwMy0uNTYtMS4zMTQtLjkyNS0xLjgwMy4wNTguMDIyLjExNi4wNDYuMTcyLjA2OXpNMjQuODcgMjcuNTMzYTEuNzY4IDEuNzY4IDAgMCAxLS40MzMuMjU2di0yLjg5OGE2LjA4IDYuMDggMCAwIDEgMS44MDguNDA5Yy0uMTMuMzg0LS4yOC43NC0uNDUzIDEuMDYtLjI3Mi41MDYtLjU5LjkxLS45MjIgMS4xNzN6bS45MjItOS44OTJjLjE3Mi4zMjIuMzI0LjY3Ni40NTMgMS4wNTlhNi4wOCA2LjA4IDAgMCAxLTEuODA4LjQxdi0yLjg5N2MuMTQ0LjA1Ny4yOS4xNDIuNDMzLjI1Ni4zMzIuMjYuNjUuNjY1LjkyMiAxLjE3MnptLTEuMzU1IDYuMzczdi0xLjU3NmgyLjMwNWMtLjAyNS42OS0uMTEgMS4zNi0uMjU1IDEuOTk2bC0uMDA0LjAyYTYuOTUzIDYuOTUzIDAgMCAwLTIuMDQ1LS40NHptMC0yLjQ1MXYtMS41NzdhNi45NTMgNi45NTMgMCAwIDAgMi4wNDYtLjQ0bC4wMDUuMDJjLjE0My42MzYuMjMgMS4zMDQuMjU0IDEuOTk3aC0yLjMwNHptLS44NzUuODc1djEuNTc2YTYuOTUzIDYuOTUzIDAgMCAwLTIuMDQ1LjQ0bC0uMDA1LS4wMmExMC44MzUgMTAuODM1IDAgMCAxLS4yNTQtMS45OTZoMi4zMDV6bS0yLjMwNC0uODc1Yy4wMjUtLjY5MS4xMS0xLjM2MS4yNTUtMS45OTdsLjAwNC0uMDJhNi45NDMgNi45NDMgMCAwIDAgMi4wNDUuNDR2MS41NzdoLTIuMzA0em0yLjMwNSAzLjMyOHYyLjg5N2ExLjc0OCAxLjc0OCAwIDAgMS0uNDMzLS4yNTdjLS4zMzItLjI2LS42NTItLjY2Ny0uOTI0LTEuMTczYTcuMDYgNy4wNiAwIDAgMS0uNDUzLTEuMDYgNi4wOTggNi4wOTggMCAwIDEgMS44MS0uNDA3em0wLTUuNzgyYTYuMDggNi4wOCAwIDAgMS0xLjgwOC0uNDA5Yy4xMy0uMzg0LjI4LS43NC40NTMtMS4wNi4yNzItLjUwNi41OS0uOTEyLjkyMy0xLjE3M2ExLjggMS44IDAgMCAxIC40MzMtLjI1NnYyLjg5OGgtLjAwMnptLTEuODQ5LTIuNTIzYy4wNTgtLjAyMy4xMTQtLjA0Ny4xNzItLjA2OS0uMzY2LjQ5LS42OCAxLjEtLjkyNSAxLjgwM2E2LjA1NyA2LjA1NyAwIDAgMS0uOTI4LS42NTMgNS44NCA1Ljg0IDAgMCAxIDEuNjgxLTEuMDgxem0tMy4xMjggMy4xMjhjLjIxNi0uNTEuNS0uOTgxLjg0Ny0xLjQxLjM4OS4zMzcuODE1LjYzIDEuMjczLjg3NGExMS42ODEgMTEuNjgxIDAgMCAwLS4zMjMgMi4zODVIMTguMTRjLjA0Ny0uNjQuMTk3LTEuMjYuNDQ1LTEuODQ5em0tLjQ0NSAyLjcyNGgyLjI0MmMuMDMuODQ2LjE0MiAxLjY1MS4zMjMgMi4zODRhNi45MzkgNi45MzkgMCAwIDAtMS4yNzMuODczIDUuODQyIDUuODQyIDAgMCAxLTEuMjkyLTMuMjU4em0zLjU3MyA0Ljk3NmE1Ljg0IDUuODQgMCAwIDEtMS42ODEtMS4wODFjLjI4OS0uMjQ3LjYtLjQ2NC45MjgtLjY1My4yNDUuNzAzLjU2IDEuMzE0LjkyNSAxLjgwM2E1LjYyNCA1LjYyNCAwIDAgMS0uMTcyLS4wNjl6bTQuNTcyIDBhNi4xNjggNi4xNjggMCAwIDEtLjE3Mi4wNjljLjM2Ni0uNDkuNjgtMS4xLjkyNS0xLjgwMy4zMjguMTg3LjY0LjQwNi45MjguNjUzYTUuODQgNS44NCAwIDAgMS0xLjY4MSAxLjA4MXoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0ibm9uemVybyIvPjwvZz48L3N2Zz4="
+      />
+    </Card>
+  </ItemPanel>
+);
 
 export default KoniItemPanel;
diff --git a/EditorMind/src/components/EditorMinimap/index.tsx b/EditorMind/src/components/EditorMinimap/index.tsx
index 8c86b242..ca27e2f9 100644
--- a/EditorMind/src/components/EditorMinimap/index.tsx
+++ b/EditorMind/src/components/EditorMinimap/index.tsx
@@ -1,13 +1,11 @@
-import React from 'react';
 import { Card } from 'antd';
 import { Minimap } from 'gg-editor';
+import React from 'react';
 
-const EditorMinimap = () => {
-  return (
-    <Card type="inner" size="small" title="Minimap" bordered={false}>
-      <Minimap height={200} />
-    </Card>
-  );
-};
+const EditorMinimap = () => (
+  <Card type="inner" size="small" title="Minimap" bordered={false}>
+    <Minimap height={200} />
+  </Card>
+);
 
 export default EditorMinimap;
diff --git a/EditorMind/src/components/EditorToolbar/FlowToolbar.tsx b/EditorMind/src/components/EditorToolbar/FlowToolbar.tsx
index 374c1858..fe888be8 100644
--- a/EditorMind/src/components/EditorToolbar/FlowToolbar.tsx
+++ b/EditorMind/src/components/EditorToolbar/FlowToolbar.tsx
@@ -1,32 +1,30 @@
-import React from 'react';
 import { Divider } from 'antd';
+import React from 'react';
 import { Toolbar } from 'gg-editor';
 import ToolbarButton from './ToolbarButton';
 import styles from './index.less';
 
-const FlowToolbar = () => {
-  return (
-    <Toolbar className={styles.toolbar}>
-      <ToolbarButton command="undo" />
-      <ToolbarButton command="redo" />
-      <Divider type="vertical" />
-      <ToolbarButton command="copy" />
-      <ToolbarButton command="paste" />
-      <ToolbarButton command="delete" />
-      <Divider type="vertical" />
-      <ToolbarButton command="zoomIn" icon="zoom-in" text="Zoom In" />
-      <ToolbarButton command="zoomOut" icon="zoom-out" text="Zoom Out" />
-      <ToolbarButton command="autoZoom" icon="fit-map" text="Fit Map" />
-      <ToolbarButton command="resetZoom" icon="actual-size" text="Actual Size" />
-      <Divider type="vertical" />
-      <ToolbarButton command="toBack" icon="to-back" text="To Back" />
-      <ToolbarButton command="toFront" icon="to-front" text="To Front" />
-      <Divider type="vertical" />
-      <ToolbarButton command="multiSelect" icon="multi-select" text="Multi Select" />
-      <ToolbarButton command="addGroup" icon="group" text="Add Group" />
-      <ToolbarButton command="unGroup" icon="ungroup" text="Ungroup" />
-    </Toolbar>
-  );
-};
+const FlowToolbar = () => (
+  <Toolbar className={styles.toolbar}>
+    <ToolbarButton command="undo" />
+    <ToolbarButton command="redo" />
+    <Divider type="vertical" />
+    <ToolbarButton command="copy" />
+    <ToolbarButton command="paste" />
+    <ToolbarButton command="delete" />
+    <Divider type="vertical" />
+    <ToolbarButton command="zoomIn" icon="zoom-in" text="Zoom In" />
+    <ToolbarButton command="zoomOut" icon="zoom-out" text="Zoom Out" />
+    <ToolbarButton command="autoZoom" icon="fit-map" text="Fit Map" />
+    <ToolbarButton command="resetZoom" icon="actual-size" text="Actual Size" />
+    <Divider type="vertical" />
+    <ToolbarButton command="toBack" icon="to-back" text="To Back" />
+    <ToolbarButton command="toFront" icon="to-front" text="To Front" />
+    <Divider type="vertical" />
+    <ToolbarButton command="multiSelect" icon="multi-select" text="Multi Select" />
+    <ToolbarButton command="addGroup" icon="group" text="Add Group" />
+    <ToolbarButton command="unGroup" icon="ungroup" text="Ungroup" />
+  </Toolbar>
+);
 
 export default FlowToolbar;
diff --git a/EditorMind/src/components/EditorToolbar/MindToolbar.tsx b/EditorMind/src/components/EditorToolbar/MindToolbar.tsx
index 1c83286a..536c06d8 100644
--- a/EditorMind/src/components/EditorToolbar/MindToolbar.tsx
+++ b/EditorMind/src/components/EditorToolbar/MindToolbar.tsx
@@ -1,27 +1,25 @@
-import React from 'react';
 import { Divider } from 'antd';
+import React from 'react';
 import { Toolbar } from 'gg-editor';
 import ToolbarButton from './ToolbarButton';
 import styles from './index.less';
 
-const FlowToolbar = () => {
-  return (
-    <Toolbar className={styles.toolbar}>
-      <ToolbarButton command="undo" />
-      <ToolbarButton command="redo" />
-      <Divider type="vertical" />
-      <ToolbarButton command="zoomIn" icon="zoom-in" text="Zoom In" />
-      <ToolbarButton command="zoomOut" icon="zoom-out" text="Zoom Out" />
-      <ToolbarButton command="autoZoom" icon="fit-map" text="Fit Map" />
-      <ToolbarButton command="resetZoom" icon="actual-size" text="Actual Size" />
-      <Divider type="vertical" />
-      <ToolbarButton command="append" text="Topic" />
-      <ToolbarButton command="appendChild" icon="append-child" text="Subtopic" />
-      <Divider type="vertical" />
-      <ToolbarButton command="collapse" text="Fold" />
-      <ToolbarButton command="expand" text="Unfold" />
-    </Toolbar>
-  );
-};
+const FlowToolbar = () => (
+  <Toolbar className={styles.toolbar}>
+    <ToolbarButton command="undo" />
+    <ToolbarButton command="redo" />
+    <Divider type="vertical" />
+    <ToolbarButton command="zoomIn" icon="zoom-in" text="Zoom In" />
+    <ToolbarButton command="zoomOut" icon="zoom-out" text="Zoom Out" />
+    <ToolbarButton command="autoZoom" icon="fit-map" text="Fit Map" />
+    <ToolbarButton command="resetZoom" icon="actual-size" text="Actual Size" />
+    <Divider type="vertical" />
+    <ToolbarButton command="append" text="Topic" />
+    <ToolbarButton command="appendChild" icon="append-child" text="Subtopic" />
+    <Divider type="vertical" />
+    <ToolbarButton command="collapse" text="Fold" />
+    <ToolbarButton command="expand" text="Unfold" />
+  </Toolbar>
+);
 
 export default FlowToolbar;
diff --git a/EditorMind/src/components/EditorToolbar/ToolbarButton.tsx b/EditorMind/src/components/EditorToolbar/ToolbarButton.tsx
index 30958f0e..15a96b7a 100644
--- a/EditorMind/src/components/EditorToolbar/ToolbarButton.tsx
+++ b/EditorMind/src/components/EditorToolbar/ToolbarButton.tsx
@@ -1,12 +1,11 @@
+import { Command } from 'gg-editor';
 import React from 'react';
 import { Tooltip } from 'antd';
-import { Command } from 'gg-editor';
 import IconFont from '../../common/IconFont';
 import styles from './index.less';
 
-const upperFirst = (str: string) => {
-  return str.toLowerCase().replace(/( |^)[a-z]/g, (l: string) => l.toUpperCase());
-};
+const upperFirst = (str: string) =>
+  str.toLowerCase().replace(/( |^)[a-z]/g, (l: string) => l.toUpperCase());
 
 interface ToolbarButtonProps {
   command: string;
diff --git a/EditorMind/src/components/EditorToolbar/index.tsx b/EditorMind/src/components/EditorToolbar/index.tsx
index ac08e3dc..58f1d277 100644
--- a/EditorMind/src/components/EditorToolbar/index.tsx
+++ b/EditorMind/src/components/EditorToolbar/index.tsx
@@ -1,5 +1,5 @@
 import FlowToolbar from './FlowToolbar';
-import MindToolbar from './MindToolbar';
 import KoniToolbar from './KoniToolbar';
+import MindToolbar from './MindToolbar';
 
 export { FlowToolbar, MindToolbar, KoniToolbar };
diff --git a/EditorMind/src/index.tsx b/EditorMind/src/index.tsx
index 6b0e93b8..2674be1e 100644
--- a/EditorMind/src/index.tsx
+++ b/EditorMind/src/index.tsx
@@ -1,42 +1,41 @@
-import React from 'react';
-import { Row, Col } from 'antd';
+import { Col, Row } from 'antd';
 import GGEditor, { Mind } from 'gg-editor';
+
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import React from 'react';
+import { formatMessage } from 'umi-plugin-react/locale';
 import EditorMinimap from './components/EditorMinimap';
 import { MindContextMenu } from './components/EditorContextMenu';
-import { MindToolbar } from './components/EditorToolbar';
 import { MindDetailPanel } from './components/EditorDetailPanel';
+import { MindToolbar } from './components/EditorToolbar';
 import data from './worldCup2018.json';
 import styles from './index.less';
-import { PageHeaderWrapper } from '@ant-design/pro-layout';
-import { formatMessage } from 'umi-plugin-react/locale';
 
 GGEditor.setTrackable(false);
 
-export default () => {
-  return (
-    <PageHeaderWrapper
-      content={formatMessage({
-        id: 'BLOCK_NAME.description',
-        defaultMessage: 'description',
-      })}
-    >
-      <GGEditor className={styles.editor}>
-        <Row type="flex" className={styles.editorHd}>
-          <Col span={24}>
-            <MindToolbar />
-          </Col>
-        </Row>
-        <Row type="flex" className={styles.editorBd}>
-          <Col span={20} className={styles.editorContent}>
-            <Mind data={data} className={styles.mind} />
-          </Col>
-          <Col span={4} className={styles.editorSidebar}>
-            <MindDetailPanel />
-            <EditorMinimap />
-          </Col>
-        </Row>
-        <MindContextMenu />
-      </GGEditor>
-    </PageHeaderWrapper>
-  );
-};
+export default () => (
+  <PageHeaderWrapper
+    content={formatMessage({
+      id: 'BLOCK_NAME.description',
+      defaultMessage: 'description',
+    })}
+  >
+    <GGEditor className={styles.editor}>
+      <Row type="flex" className={styles.editorHd}>
+        <Col span={24}>
+          <MindToolbar />
+        </Col>
+      </Row>
+      <Row type="flex" className={styles.editorBd}>
+        <Col span={20} className={styles.editorContent}>
+          <Mind data={data} className={styles.mind} />
+        </Col>
+        <Col span={4} className={styles.editorSidebar}>
+          <MindDetailPanel />
+          <EditorMinimap />
+        </Col>
+      </Row>
+      <MindContextMenu />
+    </GGEditor>
+  </PageHeaderWrapper>
+);
diff --git a/Exception403/package.json b/Exception403/package.json
index b0c8ec2f..1d85007f 100644
--- a/Exception403/package.json
+++ b/Exception403/package.json
@@ -11,12 +11,13 @@
     "url": "https://github.com/ant-design/pro-blocks/tree/master/Exception403"
   },
   "dependencies": {
+    "antd": "^3.19.5",
     "classnames": "^2.2.6",
     "dva": "^2.4.0",
     "react": "^16.6.3",
-    "umi-request": "^1.0.4",
     "umi": "^2.6.8",
-    "umi-plugin-react": "^1.7.2"
+    "umi-plugin-react": "^1.7.2",
+    "umi-request": "^1.0.4"
   },
   "devDependencies": {
     "umi-plugin-block-dev": "^1.3.0"
diff --git a/Exception403/src/components/Exception/index.tsx b/Exception403/src/components/Exception/index.tsx
index c37683fc..5111bf2a 100644
--- a/Exception403/src/components/Exception/index.tsx
+++ b/Exception403/src/components/Exception/index.tsx
@@ -1,15 +1,15 @@
+import React, { createElement } from 'react';
+
 import { Button } from 'antd';
+import Link from 'umi/link';
 import classNames from 'classnames';
-import * as H from 'history';
-import React, { createElement } from 'react';
-import styles from './index.less';
 import config from './typeConfig';
-import Link from 'umi/link';
+import styles from './index.less';
 
 export interface ExceptionProps<
   L = {
-    to: H.LocationDescriptor;
-    href?: H.LocationDescriptor;
+    to: string;
+    href?: string;
     replace?: boolean;
     innerRef?: (node: HTMLAnchorElement | null) => void;
   }
diff --git a/Exception403/src/index.tsx b/Exception403/src/index.tsx
index bba87ac1..7d9f9da0 100644
--- a/Exception403/src/index.tsx
+++ b/Exception403/src/index.tsx
@@ -1,6 +1,6 @@
+import Link from 'umi/link';
 import React from 'react';
 import { formatMessage } from 'umi-plugin-react/locale';
-import Link from 'umi/link';
 import Exception from './components/Exception';
 
 export default () => (
diff --git a/Exception404/package.json b/Exception404/package.json
index 50f71ef8..5abec265 100644
--- a/Exception404/package.json
+++ b/Exception404/package.json
@@ -11,13 +11,15 @@
     "url": "https://github.com/ant-design/pro-blocks/tree/master/Exception404"
   },
   "dependencies": {
-    "react": "^16.6.3",
+    "antd": "^3.19.5",
+    "classnames": "^2.2.6",
     "dva": "^2.4.0",
-    "umi-request": "^1.0.0-beta.1"
+    "react": "^16.6.3",
+    "umi-plugin-react": "^1.7.2",
+    "umi-request": "^1.0.8"
   },
   "devDependencies": {
     "umi": "^2.6.9",
-    "umi-plugin-react": "^1.7.2",
     "umi-plugin-block-dev": "^1.0.0"
   },
   "license": "MIT",
diff --git a/Exception404/src/components/Exception/index.tsx b/Exception404/src/components/Exception/index.tsx
index c37683fc..5111bf2a 100644
--- a/Exception404/src/components/Exception/index.tsx
+++ b/Exception404/src/components/Exception/index.tsx
@@ -1,15 +1,15 @@
+import React, { createElement } from 'react';
+
 import { Button } from 'antd';
+import Link from 'umi/link';
 import classNames from 'classnames';
-import * as H from 'history';
-import React, { createElement } from 'react';
-import styles from './index.less';
 import config from './typeConfig';
-import Link from 'umi/link';
+import styles from './index.less';
 
 export interface ExceptionProps<
   L = {
-    to: H.LocationDescriptor;
-    href?: H.LocationDescriptor;
+    to: string;
+    href?: string;
     replace?: boolean;
     innerRef?: (node: HTMLAnchorElement | null) => void;
   }
diff --git a/Exception404/src/index.tsx b/Exception404/src/index.tsx
index 59097efd..26ba3789 100644
--- a/Exception404/src/index.tsx
+++ b/Exception404/src/index.tsx
@@ -1,6 +1,6 @@
+import Link from 'umi/link';
 import React from 'react';
 import { formatMessage } from 'umi-plugin-react/locale';
-import Link from 'umi/link';
 import Exception from './components/Exception';
 
 export default () => (
diff --git a/Exception500/package.json b/Exception500/package.json
index 3b398861..7d86e3d4 100644
--- a/Exception500/package.json
+++ b/Exception500/package.json
@@ -11,13 +11,15 @@
     "url": "https://github.com/ant-design/pro-blocks/tree/master/Exception500"
   },
   "dependencies": {
-    "react": "^16.6.3",
+    "antd": "^3.19.5",
+    "classnames": "^2.2.6",
     "dva": "^2.4.0",
-    "umi-request": "^1.0.0-beta.1"
+    "react": "^16.6.3",
+    "umi-plugin-react": "^1.7.2",
+    "umi-request": "^1.0.8"
   },
   "devDependencies": {
     "umi": "^2.6.9",
-    "umi-plugin-react": "^1.7.2",
     "umi-plugin-block-dev": "^1.0.0"
   },
   "license": "MIT",
diff --git a/Exception500/src/components/Exception/index.tsx b/Exception500/src/components/Exception/index.tsx
index c37683fc..5111bf2a 100644
--- a/Exception500/src/components/Exception/index.tsx
+++ b/Exception500/src/components/Exception/index.tsx
@@ -1,15 +1,15 @@
+import React, { createElement } from 'react';
+
 import { Button } from 'antd';
+import Link from 'umi/link';
 import classNames from 'classnames';
-import * as H from 'history';
-import React, { createElement } from 'react';
-import styles from './index.less';
 import config from './typeConfig';
-import Link from 'umi/link';
+import styles from './index.less';
 
 export interface ExceptionProps<
   L = {
-    to: H.LocationDescriptor;
-    href?: H.LocationDescriptor;
+    to: string;
+    href?: string;
     replace?: boolean;
     innerRef?: (node: HTMLAnchorElement | null) => void;
   }
diff --git a/Exception500/src/index.tsx b/Exception500/src/index.tsx
index 87c15a97..51cfa08b 100644
--- a/Exception500/src/index.tsx
+++ b/Exception500/src/index.tsx
@@ -1,6 +1,6 @@
+import Link from 'umi/link';
 import React from 'react';
 import { formatMessage } from 'umi-plugin-react/locale';
-import Link from 'umi/link';
 import Exception from './components/Exception';
 
 export default () => (
diff --git a/FormAdvancedForm/package.json b/FormAdvancedForm/package.json
index 4c2101e4..048ae976 100644
--- a/FormAdvancedForm/package.json
+++ b/FormAdvancedForm/package.json
@@ -12,10 +12,14 @@
     "dev": "umi dev"
   },
   "dependencies": {
+    "@ant-design/pro-layout": "^4.5.5",
+    "@types/lodash": "^4.14.134",
     "antd": "^3.16.3",
+    "classnames": "^2.2.6",
     "dva": "^2.4.0",
     "lodash": "^4.17.10",
     "react": "^16.6.3",
+    "redux": "^4.0.1",
     "umi-request": "^1.0.0"
   },
   "devDependencies": {
diff --git a/FormAdvancedForm/src/components/FooterToolbar/index.tsx b/FormAdvancedForm/src/components/FooterToolbar/index.tsx
index 389e4c28..ec11d2b8 100644
--- a/FormAdvancedForm/src/components/FooterToolbar/index.tsx
+++ b/FormAdvancedForm/src/components/FooterToolbar/index.tsx
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+
 import classNames from 'classnames';
 import styles from './index.less';
 
@@ -10,10 +10,6 @@ export interface FooterToolbarProps {
 }
 
 export default class FooterToolbar extends Component<FooterToolbarProps> {
-  static contextTypes = {
-    isMobile: PropTypes.bool,
-  };
-
   state = {
     width: undefined,
   };
diff --git a/FormAdvancedForm/src/components/TableForm.tsx b/FormAdvancedForm/src/components/TableForm.tsx
index 9c878d02..92d6347b 100644
--- a/FormAdvancedForm/src/components/TableForm.tsx
+++ b/FormAdvancedForm/src/components/TableForm.tsx
@@ -1,10 +1,30 @@
-import React, { PureComponent, Fragment } from 'react';
-import { Table, Button, Input, message, Popconfirm, Divider } from 'antd';
+import { Button, Divider, Input, Popconfirm, Table, message } from 'antd';
+import React, { Fragment, PureComponent } from 'react';
+
 import { isEqual } from 'lodash';
 import styles from '../style.less';
 
-class TableForm extends PureComponent {
-  static getDerivedStateFromProps(nextProps, preState) {
+interface TableFormDateType {
+  key: string;
+  workId?: string;
+  name?: string;
+  department?: string;
+  isNew?: boolean;
+  editable?: boolean;
+}
+interface TableFormProps {
+  loading?: boolean;
+  value?: TableFormDateType[];
+  onChange?: (value: TableFormDateType[]) => void;
+}
+
+interface TableFormState {
+  loading?: boolean;
+  value?: TableFormDateType[];
+  data?: TableFormDateType[];
+}
+class TableForm extends PureComponent<TableFormProps, TableFormState> {
+  static getDerivedStateFromProps(nextProps: TableFormProps, preState: TableFormState) {
     if (isEqual(nextProps.value, preState.value)) {
       return null;
     }
@@ -13,16 +33,20 @@ class TableForm extends PureComponent {
       value: nextProps.value,
     };
   }
+
+  clickedCancel: boolean = false;
+
   index = 0;
 
   cacheOriginData = {};
+
   columns = [
     {
       title: '成员姓名',
       dataIndex: 'name',
       key: 'name',
       width: '20%',
-      render: (text, record) => {
+      render: (text: string, record: TableFormDateType) => {
         if (record.editable) {
           return (
             <Input
@@ -42,7 +66,7 @@ class TableForm extends PureComponent {
       dataIndex: 'workId',
       key: 'workId',
       width: '20%',
-      render: (text, record) => {
+      render: (text: string, record: TableFormDateType) => {
         if (record.editable) {
           return (
             <Input
@@ -61,7 +85,7 @@ class TableForm extends PureComponent {
       dataIndex: 'department',
       key: 'department',
       width: '40%',
-      render: (text, record) => {
+      render: (text: string, record: TableFormDateType) => {
         if (record.editable) {
           return (
             <Input
@@ -78,7 +102,7 @@ class TableForm extends PureComponent {
     {
       title: '操作',
       key: 'action',
-      render: (text, record) => {
+      render: (text: string, record: TableFormDateType) => {
         const { loading } = this.state;
         if (!!record.editable && loading) {
           return null;
@@ -116,25 +140,23 @@ class TableForm extends PureComponent {
     },
   ];
 
-  constructor(props) {
+  constructor(props: TableFormProps) {
     super(props);
-
     this.state = {
       data: props.value,
       loading: false,
-      /* eslint-disable-next-line react/no-unused-state */
       value: props.value,
     };
   }
 
-  getRowByKey(key, newData) {
-    const { data } = this.state;
+  getRowByKey(key: string, newData?: TableFormDateType[]) {
+    const { data = [] } = this.state;
     return (newData || data).filter(item => item.key === key)[0];
   }
 
-  toggleEditable = (e, key) => {
+  toggleEditable = (e: React.MouseEvent | React.KeyboardEvent, key: string) => {
     e.preventDefault();
-    const { data } = this.state;
+    const { data = [] } = this.state;
     const newData = data.map(item => ({ ...item }));
     const target = this.getRowByKey(key, newData);
     if (target) {
@@ -148,7 +170,7 @@ class TableForm extends PureComponent {
   };
 
   newMember = () => {
-    const { data } = this.state;
+    const { data = [] } = this.state;
     const newData = data.map(item => ({ ...item }));
     newData.push({
       key: `NEW_TEMP_ID_${this.index}`,
@@ -162,23 +184,25 @@ class TableForm extends PureComponent {
     this.setState({ data: newData });
   };
 
-  remove(key) {
-    const { data } = this.state;
+  remove(key: string) {
+    const { data = [] } = this.state;
     const { onChange } = this.props;
     const newData = data.filter(item => item.key !== key);
     this.setState({ data: newData });
-    onChange(newData);
+    if (onChange) {
+      onChange(newData);
+    }
   }
 
-  handleKeyPress(e, key) {
+  handleKeyPress(e: React.KeyboardEvent, key: string) {
     if (e.key === 'Enter') {
       this.saveRow(e, key);
     }
   }
 
-  handleFieldChange(e, fieldName, key) {
-    const { data } = this.state;
-    const newData = data.map(item => ({ ...item }));
+  handleFieldChange(e: React.ChangeEvent<HTMLInputElement>, fieldName: string, key: string) {
+    const { data = [] } = this.state;
+    const newData = [...data];
     const target = this.getRowByKey(key, newData);
     if (target) {
       target[fieldName] = e.target.value;
@@ -186,7 +210,7 @@ class TableForm extends PureComponent {
     }
   }
 
-  saveRow(e, key) {
+  saveRow(e: React.MouseEvent | React.KeyboardEvent, key: string) {
     e.persist();
     this.setState({
       loading: true,
@@ -199,7 +223,7 @@ class TableForm extends PureComponent {
       const target = this.getRowByKey(key) || {};
       if (!target.workId || !target.name || !target.department) {
         message.error('请填写完整成员信息。');
-        e.target.focus();
+        (e.target as HTMLInputElement).focus();
         this.setState({
           loading: false,
         });
@@ -207,35 +231,46 @@ class TableForm extends PureComponent {
       }
       delete target.isNew;
       this.toggleEditable(e, key);
-      const { data } = this.state;
+      const { data = [] } = this.state;
       const { onChange } = this.props;
-      onChange(data);
+      if (onChange) {
+        onChange(data);
+      }
       this.setState({
         loading: false,
       });
     }, 500);
   }
 
-  cancel(e, key) {
+  cancel(e: React.MouseEvent, key: string) {
     this.clickedCancel = true;
     e.preventDefault();
-    const { data } = this.state;
-    const newData = data.map(item => ({ ...item }));
-    const target = this.getRowByKey(key, newData);
-    if (this.cacheOriginData[key]) {
-      Object.assign(target, this.cacheOriginData[key]);
-      delete this.cacheOriginData[key];
-    }
-    target.editable = false;
+    const { data = [] } = this.state;
+    const newData = [...data];
+    newData.map(item => {
+      if (item.key === key) {
+        if (this.cacheOriginData[key]) {
+          delete this.cacheOriginData[key];
+          return {
+            ...item,
+            ...this.cacheOriginData[key],
+            editable: false,
+          };
+        }
+      }
+      return item;
+    });
+
     this.setState({ data: newData });
     this.clickedCancel = false;
   }
+
   render() {
     const { loading, data } = this.state;
 
     return (
       <Fragment>
-        <Table
+        <Table<TableFormDateType>
           loading={loading}
           columns={this.columns}
           dataSource={data}
diff --git a/FormAdvancedForm/src/index.tsx b/FormAdvancedForm/src/index.tsx
index acd3e490..5640923e 100644
--- a/FormAdvancedForm/src/index.tsx
+++ b/FormAdvancedForm/src/index.tsx
@@ -1,24 +1,25 @@
-import React, { Component } from 'react';
 import {
-  Card,
-  Form,
-  Icon,
   Button,
+  Card,
   Col,
-  Row,
   DatePicker,
-  TimePicker,
+  Form,
+  Icon,
   Input,
-  Select,
   Popover,
+  Row,
+  Select,
+  TimePicker,
 } from 'antd';
+import React, { Component } from 'react';
+
+import { Dispatch } from 'redux';
+import { FormComponentProps } from 'antd/es/form';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
 import { connect } from 'dva';
 import TableForm from './components/TableForm';
-import styles from './style.less';
-import { FormComponentProps } from 'antd/es/form';
-import { Dispatch } from 'redux';
 import FooterToolbar from './components/FooterToolbar';
-import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import styles from './style.less';
 
 const { Option } = Select;
 const { RangePicker } = DatePicker;
diff --git a/FormAdvancedForm/src/model.ts b/FormAdvancedForm/src/model.ts
index 44eb2fae..d3b32b3c 100644
--- a/FormAdvancedForm/src/model.ts
+++ b/FormAdvancedForm/src/model.ts
@@ -1,18 +1,16 @@
+import { AnyAction } from 'redux';
+import { EffectsCommandMap } from 'dva';
 import { message } from 'antd';
 import { fakeSubmitForm } from './service';
-import { EffectsCommandMap } from 'dva';
-import { AnyAction } from 'redux';
-
-export interface ModalState {}
 
 export type Effect = (
   action: AnyAction,
-  effects: EffectsCommandMap & { select: <T>(func: (state: ModalState) => T) => T },
+  effects: EffectsCommandMap & { select: <T>(func: (state: {}) => T) => T },
 ) => void;
 
 export interface ModelType {
   namespace: string;
-  state: ModalState;
+  state: {};
   effects: {
     submitAdvancedForm: Effect;
   };
diff --git a/FormBasicForm/package.json b/FormBasicForm/package.json
index dc792d1f..5d7c18ab 100644
--- a/FormBasicForm/package.json
+++ b/FormBasicForm/package.json
@@ -11,15 +11,16 @@
     "url": "https://github.com/umijs/umi-blocks/ant-design-pro/basicform"
   },
   "dependencies": {
+    "@ant-design/pro-layout": "^4.0.5",
     "antd": "^3.16.3",
     "dva": "^2.4.0",
     "react": "^16.6.3",
+    "redux": "^4.0.1",
     "umi-request": "^1.0.0",
-    "@ant-design/pro-layout": "^4.0.5"
+    "umi-plugin-react": "^1.7.2"
   },
   "devDependencies": {
     "umi": "^2.6.9",
-    "umi-plugin-react": "^1.7.2",
     "umi-plugin-block-dev": "^1.0.0"
   },
   "license": "ISC",
diff --git a/FormBasicForm/src/index.tsx b/FormBasicForm/src/index.tsx
index f8b8b31f..54603636 100644
--- a/FormBasicForm/src/index.tsx
+++ b/FormBasicForm/src/index.tsx
@@ -1,22 +1,23 @@
-import React, { Component } from 'react';
-import { connect } from 'dva';
-import { formatMessage, FormattedMessage } from 'umi-plugin-react/locale';
 import {
-  Form,
-  Input,
-  DatePicker,
-  Select,
   Button,
   Card,
+  DatePicker,
+  Form,
+  Icon,
+  Input,
   InputNumber,
   Radio,
-  Icon,
+  Select,
   Tooltip,
 } from 'antd';
+import { FormattedMessage, formatMessage } from 'umi-plugin-react/locale';
+import React, { Component } from 'react';
+
+import { Dispatch } from 'redux';
+import { FormComponentProps } from 'antd/es/form';
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import { connect } from 'dva';
 import styles from './style.less';
-import { FormComponentProps } from 'antd/es/form';
-import { Dispatch } from 'redux';
 
 const FormItem = Form.Item;
 const { Option } = Select;
diff --git a/FormBasicForm/src/model.ts b/FormBasicForm/src/model.ts
index ea3f48ca..150b1106 100644
--- a/FormBasicForm/src/model.ts
+++ b/FormBasicForm/src/model.ts
@@ -1,18 +1,16 @@
+import { AnyAction } from 'redux';
+import { EffectsCommandMap } from 'dva';
 import { message } from 'antd';
 import { fakeSubmitForm } from './service';
-import { EffectsCommandMap } from 'dva';
-import { AnyAction } from 'redux';
-
-export interface ModalState {}
 
 export type Effect = (
   action: AnyAction,
-  effects: EffectsCommandMap & { select: <T>(func: (state: ModalState) => T) => T },
+  effects: EffectsCommandMap & { select: <T>(func: (state: {}) => T) => T },
 ) => void;
 
 export interface ModelType {
   namespace: string;
-  state: ModalState;
+  state: {};
   effects: {
     submitRegularForm: Effect;
   };
diff --git a/FormStepForm/package.json b/FormStepForm/package.json
index 0924b83f..de15278a 100644
--- a/FormStepForm/package.json
+++ b/FormStepForm/package.json
@@ -11,16 +11,19 @@
     "url": "https://github.com/umijs/umi-blocks/ant-design-pro/stepform"
   },
   "dependencies": {
+    "@ant-design/pro-layout": "^4.5.5",
     "antd": "^3.16.3",
+    "classnames": "^2.2.6",
     "dva": "^2.4.0",
+    "nzh": "^1.0.3",
     "react": "^16.6.3",
-    "umi-request": "^1.0.0",
-    "nzh": "^1.0.3"
+    "redux": "^4.0.1",
+    "umi-request": "^1.0.0"
   },
   "devDependencies": {
     "umi": "^2.6.9",
-    "umi-plugin-react": "^1.7.2",
-    "umi-plugin-block-dev": "^1.0.0"
+    "umi-plugin-block-dev": "^1.0.0",
+    "umi-plugin-react": "^1.7.2"
   },
   "license": "ISC",
   "blockConfig": {
diff --git a/FormStepForm/src/components/Result/index.tsx b/FormStepForm/src/components/Result/index.tsx
index 63ba3ebc..8c8ea1e4 100644
--- a/FormStepForm/src/components/Result/index.tsx
+++ b/FormStepForm/src/components/Result/index.tsx
@@ -1,6 +1,6 @@
+import { Icon } from 'antd';
 import React from 'react';
 import classNames from 'classnames';
-import { Icon } from 'antd';
 import styles from './index.less';
 
 export interface ResultProps {
diff --git a/FormStepForm/src/components/Step1/index.tsx b/FormStepForm/src/components/Step1/index.tsx
index fd87d08e..a58db65e 100644
--- a/FormStepForm/src/components/Step1/index.tsx
+++ b/FormStepForm/src/components/Step1/index.tsx
@@ -1,10 +1,11 @@
+import { Button, Divider, Form, Input, Select } from 'antd';
 import React, { Fragment } from 'react';
+
+import { Dispatch } from 'redux';
+import { FormComponentProps } from 'antd/es/form';
 import { connect } from 'dva';
-import { Form, Input, Button, Select, Divider } from 'antd';
+import { StateType } from '../../model';
 import styles from './index.less';
-import { FormComponentProps } from 'antd/es/form';
-import { IStateType } from '../../model';
-import { Dispatch } from 'redux';
 
 const { Option } = Select;
 
@@ -17,109 +18,107 @@ const formItemLayout = {
   },
 };
 interface Step1Props extends FormComponentProps {
-  data?: IStateType['step'];
+  data?: StateType['step'];
   dispatch?: Dispatch<any>;
 }
 
-class Step1 extends React.PureComponent<Step1Props> {
-  render() {
-    const { form, dispatch, data } = this.props;
-    if (!data) {
-      return;
-    }
-    const { getFieldDecorator, validateFields } = form;
-    const onValidateForm = () => {
-      validateFields((err, values) => {
-        if (!err && dispatch) {
-          dispatch({
-            type: 'BLOCK_NAME_CAMEL_CASE/saveStepFormData',
-            payload: values,
-          });
-          dispatch({
-            type: 'BLOCK_NAME_CAMEL_CASE/saveCurrentStep',
-            payload: 'confirm',
-          });
-        }
-      });
-    };
-    return (
-      <Fragment>
-        <Form layout="horizontal" className={styles.stepForm} hideRequiredMark>
-          <Form.Item {...formItemLayout} label="付款账户">
-            {getFieldDecorator('payAccount', {
-              initialValue: data.payAccount,
-              rules: [{ required: true, message: '请选择付款账户' }],
-            })(
-              <Select placeholder="test@example.com">
-                <Option value="ant-design@alipay.com">ant-design@alipay.com</Option>
-              </Select>,
-            )}
-          </Form.Item>
-          <Form.Item {...formItemLayout} label="收款账户">
-            <Input.Group compact>
-              <Select defaultValue="alipay" style={{ width: 100 }}>
-                <Option value="alipay">支付宝</Option>
-                <Option value="bank">银行账户</Option>
-              </Select>
-              {getFieldDecorator('receiverAccount', {
-                initialValue: data.receiverAccount,
-                rules: [
-                  { required: true, message: '请输入收款人账户' },
-                  { type: 'email', message: '账户名应为邮箱格式' },
-                ],
-              })(<Input style={{ width: 'calc(100% - 100px)' }} placeholder="test@example.com" />)}
-            </Input.Group>
-          </Form.Item>
-          <Form.Item {...formItemLayout} label="收款人姓名">
-            {getFieldDecorator('receiverName', {
-              initialValue: data.receiverName,
-              rules: [{ required: true, message: '请输入收款人姓名' }],
-            })(<Input placeholder="请输入收款人姓名" />)}
-          </Form.Item>
-          <Form.Item {...formItemLayout} label="转账金额">
-            {getFieldDecorator('amount', {
-              initialValue: data.amount,
+const Step1: React.FC<Step1Props> = props => {
+  const { form, dispatch, data } = props;
+  if (!data) {
+    return null;
+  }
+  const { getFieldDecorator, validateFields } = form;
+  const onValidateForm = () => {
+    validateFields((err: any, values: StateType['step']) => {
+      if (!err && dispatch) {
+        dispatch({
+          type: 'BLOCK_NAME_CAMEL_CASE/saveStepFormData',
+          payload: values,
+        });
+        dispatch({
+          type: 'BLOCK_NAME_CAMEL_CASE/saveCurrentStep',
+          payload: 'confirm',
+        });
+      }
+    });
+  };
+  return (
+    <Fragment>
+      <Form layout="horizontal" className={styles.stepForm} hideRequiredMark>
+        <Form.Item {...formItemLayout} label="付款账户">
+          {getFieldDecorator('payAccount', {
+            initialValue: data.payAccount,
+            rules: [{ required: true, message: '请选择付款账户' }],
+          })(
+            <Select placeholder="test@example.com">
+              <Option value="ant-design@alipay.com">ant-design@alipay.com</Option>
+            </Select>,
+          )}
+        </Form.Item>
+        <Form.Item {...formItemLayout} label="收款账户">
+          <Input.Group compact>
+            <Select defaultValue="alipay" style={{ width: 100 }}>
+              <Option value="alipay">支付宝</Option>
+              <Option value="bank">银行账户</Option>
+            </Select>
+            {getFieldDecorator('receiverAccount', {
+              initialValue: data.receiverAccount,
               rules: [
-                { required: true, message: '请输入转账金额' },
-                {
-                  pattern: /^(\d+)((?:\.\d+)?)$/,
-                  message: '请输入合法金额数字',
-                },
+                { required: true, message: '请输入收款人账户' },
+                { type: 'email', message: '账户名应为邮箱格式' },
               ],
-            })(<Input prefix="￥" placeholder="请输入金额" />)}
-          </Form.Item>
-          <Form.Item
-            wrapperCol={{
-              xs: { span: 24, offset: 0 },
-              sm: {
-                span: formItemLayout.wrapperCol.span,
-                offset: formItemLayout.labelCol.span,
+            })(<Input style={{ width: 'calc(100% - 100px)' }} placeholder="test@example.com" />)}
+          </Input.Group>
+        </Form.Item>
+        <Form.Item {...formItemLayout} label="收款人姓名">
+          {getFieldDecorator('receiverName', {
+            initialValue: data.receiverName,
+            rules: [{ required: true, message: '请输入收款人姓名' }],
+          })(<Input placeholder="请输入收款人姓名" />)}
+        </Form.Item>
+        <Form.Item {...formItemLayout} label="转账金额">
+          {getFieldDecorator('amount', {
+            initialValue: data.amount,
+            rules: [
+              { required: true, message: '请输入转账金额' },
+              {
+                pattern: /^(\d+)((?:\.\d+)?)$/,
+                message: '请输入合法金额数字',
               },
-            }}
-            label=""
-          >
-            <Button type="primary" onClick={onValidateForm}>
-              下一步
-            </Button>
-          </Form.Item>
-        </Form>
-        <Divider style={{ margin: '40px 0 24px' }} />
-        <div className={styles.desc}>
-          <h3>说明</h3>
-          <h4>转账到支付宝账户</h4>
-          <p>
-            如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。
-          </p>
-          <h4>转账到银行卡</h4>
-          <p>
-            如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。
-          </p>
-        </div>
-      </Fragment>
-    );
-  }
-}
+            ],
+          })(<Input prefix="￥" placeholder="请输入金额" />)}
+        </Form.Item>
+        <Form.Item
+          wrapperCol={{
+            xs: { span: 24, offset: 0 },
+            sm: {
+              span: formItemLayout.wrapperCol.span,
+              offset: formItemLayout.labelCol.span,
+            },
+          }}
+          label=""
+        >
+          <Button type="primary" onClick={onValidateForm}>
+            下一步
+          </Button>
+        </Form.Item>
+      </Form>
+      <Divider style={{ margin: '40px 0 24px' }} />
+      <div className={styles.desc}>
+        <h3>说明</h3>
+        <h4>转账到支付宝账户</h4>
+        <p>
+          如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。
+        </p>
+        <h4>转账到银行卡</h4>
+        <p>
+          如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。
+        </p>
+      </div>
+    </Fragment>
+  );
+};
 
-export default connect(({ BLOCK_NAME_CAMEL_CASE }: { BLOCK_NAME_CAMEL_CASE: IStateType }) => ({
+export default connect(({ BLOCK_NAME_CAMEL_CASE }: { BLOCK_NAME_CAMEL_CASE: StateType }) => ({
   data: BLOCK_NAME_CAMEL_CASE.step,
 }))(Form.create<Step1Props>()(Step1));
diff --git a/FormStepForm/src/components/Step2/index.tsx b/FormStepForm/src/components/Step2/index.tsx
index 2c48b406..a0921f08 100644
--- a/FormStepForm/src/components/Step2/index.tsx
+++ b/FormStepForm/src/components/Step2/index.tsx
@@ -1,10 +1,11 @@
+import { Alert, Button, Divider, Form, Input } from 'antd';
+
+import { Dispatch } from 'redux';
+import { FormComponentProps } from 'antd/es/form';
 import React from 'react';
 import { connect } from 'dva';
-import { Form, Input, Button, Alert, Divider, Statistic } from 'antd';
+import { StateType } from '../../model';
 import styles from './index.less';
-import { FormComponentProps } from 'antd/es/form';
-import { IStateType } from '../../model';
-import { Dispatch } from 'redux';
 
 const formItemLayout = {
   labelCol: {
@@ -15,102 +16,100 @@ const formItemLayout = {
   },
 };
 interface Step2Props extends FormComponentProps {
-  data?: IStateType['step'];
+  data?: StateType['step'];
   dispatch?: Dispatch<any>;
   submitting?: boolean;
 }
 
-class Step2 extends React.Component<Step2Props> {
-  render() {
-    const { form, data, dispatch, submitting } = this.props;
-    if (!data) {
-      return;
+const Step2: React.FC<Step2Props> = props => {
+  const { form, data, dispatch, submitting } = props;
+  if (!data) {
+    return null;
+  }
+  const { getFieldDecorator, validateFields } = form;
+  const onPrev = () => {
+    if (dispatch) {
+      dispatch({
+        type: 'BLOCK_NAME_CAMEL_CASE/saveCurrentStep',
+        payload: 'info',
+      });
     }
-    const { getFieldDecorator, validateFields } = form;
-    const onPrev = () => {
-      if (dispatch) {
-        dispatch({
-          type: 'BLOCK_NAME_CAMEL_CASE/saveCurrentStep',
-          payload: 'info',
-        });
-      }
-    };
-    const onValidateForm = (e: React.FormEvent) => {
-      e.preventDefault();
-      validateFields((err, values) => {
-        if (!err) {
-          if (dispatch) {
-            dispatch({
-              type: 'BLOCK_NAME_CAMEL_CASE/submitStepForm',
-              payload: {
-                ...data,
-                ...values,
-              },
-            });
-          }
+  };
+  const onValidateForm = (e: React.FormEvent) => {
+    e.preventDefault();
+    validateFields((err, values) => {
+      if (!err) {
+        if (dispatch) {
+          dispatch({
+            type: 'BLOCK_NAME_CAMEL_CASE/submitStepForm',
+            payload: {
+              ...data,
+              ...values,
+            },
+          });
         }
-      });
-    };
-    return (
-      <Form layout="horizontal" className={styles.stepForm}>
-        <Alert
-          closable
-          showIcon
-          message="确认转账后，资金将直接打入对方账户，无法退回。"
-          style={{ marginBottom: 24 }}
-        />
-        <Form.Item {...formItemLayout} className={styles.stepFormText} label="付款账户">
-          {data.payAccount}
-        </Form.Item>
-        <Form.Item {...formItemLayout} className={styles.stepFormText} label="收款账户">
-          {data.receiverAccount}
-        </Form.Item>
-        <Form.Item {...formItemLayout} className={styles.stepFormText} label="收款人姓名">
-          {data.receiverName}
-        </Form.Item>
-        <Form.Item {...formItemLayout} className={styles.stepFormText} label="转账金额">
-          <span className={styles.money}>{data.amount}</span>
-        </Form.Item>
-        <Divider style={{ margin: '24px 0' }} />
-        <Form.Item {...formItemLayout} label="支付密码" required={false}>
-          {getFieldDecorator('password', {
-            initialValue: '123456',
-            rules: [
-              {
-                required: true,
-                message: '需要支付密码才能进行支付',
-              },
-            ],
-          })(<Input type="password" autoComplete="off" style={{ width: '80%' }} />)}
-        </Form.Item>
-        <Form.Item
-          style={{ marginBottom: 8 }}
-          wrapperCol={{
-            xs: { span: 24, offset: 0 },
-            sm: {
-              span: formItemLayout.wrapperCol.span,
-              offset: formItemLayout.labelCol.span,
+      }
+    });
+  };
+  return (
+    <Form layout="horizontal" className={styles.stepForm}>
+      <Alert
+        closable
+        showIcon
+        message="确认转账后，资金将直接打入对方账户，无法退回。"
+        style={{ marginBottom: 24 }}
+      />
+      <Form.Item {...formItemLayout} className={styles.stepFormText} label="付款账户">
+        {data.payAccount}
+      </Form.Item>
+      <Form.Item {...formItemLayout} className={styles.stepFormText} label="收款账户">
+        {data.receiverAccount}
+      </Form.Item>
+      <Form.Item {...formItemLayout} className={styles.stepFormText} label="收款人姓名">
+        {data.receiverName}
+      </Form.Item>
+      <Form.Item {...formItemLayout} className={styles.stepFormText} label="转账金额">
+        <span className={styles.money}>{data.amount}</span>
+      </Form.Item>
+      <Divider style={{ margin: '24px 0' }} />
+      <Form.Item {...formItemLayout} label="支付密码" required={false}>
+        {getFieldDecorator('password', {
+          initialValue: '123456',
+          rules: [
+            {
+              required: true,
+              message: '需要支付密码才能进行支付',
             },
-          }}
-          label=""
-        >
-          <Button type="primary" onClick={onValidateForm} loading={submitting}>
-            提交
-          </Button>
-          <Button onClick={onPrev} style={{ marginLeft: 8 }}>
-            上一步
-          </Button>
-        </Form.Item>
-      </Form>
-    );
-  }
-}
+          ],
+        })(<Input type="password" autoComplete="off" style={{ width: '80%' }} />)}
+      </Form.Item>
+      <Form.Item
+        style={{ marginBottom: 8 }}
+        wrapperCol={{
+          xs: { span: 24, offset: 0 },
+          sm: {
+            span: formItemLayout.wrapperCol.span,
+            offset: formItemLayout.labelCol.span,
+          },
+        }}
+        label=""
+      >
+        <Button type="primary" onClick={onValidateForm} loading={submitting}>
+          提交
+        </Button>
+        <Button onClick={onPrev} style={{ marginLeft: 8 }}>
+          上一步
+        </Button>
+      </Form.Item>
+    </Form>
+  );
+};
 export default connect(
   ({
     BLOCK_NAME_CAMEL_CASE,
     loading,
   }: {
-    BLOCK_NAME_CAMEL_CASE: IStateType;
+    BLOCK_NAME_CAMEL_CASE: StateType;
     loading: {
       effects: { [key: string]: boolean };
     };
diff --git a/FormStepForm/src/components/Step3/index.tsx b/FormStepForm/src/components/Step3/index.tsx
index a1f12078..2c47daf4 100644
--- a/FormStepForm/src/components/Step3/index.tsx
+++ b/FormStepForm/src/components/Step3/index.tsx
@@ -1,97 +1,83 @@
+import { Button, Col, Row } from 'antd';
 import React, { Fragment } from 'react';
-import { connect } from 'dva';
-import { Button, Row, Col } from 'antd';
+
+import { Dispatch } from 'redux';
+import { StateType } from '../../model';
 import Result from '../Result';
 import styles from './index.less';
-import { IStateType } from '../../model';
-import { Dispatch } from 'redux';
 
 interface Step3Props {
-  data?: IStateType['step'];
+  data?: StateType['step'];
   dispatch?: Dispatch<any>;
 }
 
-@connect(
-  ({
-    BLOCK_NAME_CAMEL_CASE,
-  }: {
-    BLOCK_NAME_CAMEL_CASE: IStateType;
-    loading: {
-      effects: { [key: string]: boolean };
-    };
-  }) => ({
-    data: BLOCK_NAME_CAMEL_CASE.step,
-  }),
-)
-class Step3 extends React.Component<Step3Props> {
-  render() {
-    const { data, dispatch } = this.props;
-    if (!data) {
-      return;
-    }
-    const onFinish = () => {
-      if (dispatch) {
-        dispatch({
-          type: 'BLOCK_NAME_CAMEL_CASE/saveCurrentStep',
-          payload: 'info',
-        });
-      }
-    };
-    const information = (
-      <div className={styles.information}>
-        <Row>
-          <Col xs={24} sm={8} className={styles.label}>
-            付款账户：
-          </Col>
-          <Col xs={24} sm={16}>
-            {data.payAccount}
-          </Col>
-        </Row>
-        <Row>
-          <Col xs={24} sm={8} className={styles.label}>
-            收款账户：
-          </Col>
-          <Col xs={24} sm={16}>
-            {data.receiverAccount}
-          </Col>
-        </Row>
-        <Row>
-          <Col xs={24} sm={8} className={styles.label}>
-            收款人姓名：
-          </Col>
-          <Col xs={24} sm={16}>
-            {data.receiverName}
-          </Col>
-        </Row>
-        <Row>
-          <Col xs={24} sm={8} className={styles.label}>
-            转账金额：
-          </Col>
-          <Col xs={24} sm={16}>
-            <span className={styles.money}>{data.amount}</span> 元
-          </Col>
-        </Row>
-      </div>
-    );
-    const actions = (
-      <Fragment>
-        <Button type="primary" onClick={onFinish}>
-          再转一笔
-        </Button>
-        <Button>查看账单</Button>
-      </Fragment>
-    );
-    return (
-      <Result
-        type="success"
-        title="操作成功"
-        description="预计两小时内到账"
-        extra={information}
-        actions={actions}
-        className={styles.result}
-      />
-    );
+const Step3: React.FC<Step3Props> = props => {
+  const { data, dispatch } = props;
+  if (!data) {
+    return null;
   }
-}
+  const onFinish = () => {
+    if (dispatch) {
+      dispatch({
+        type: 'BLOCK_NAME_CAMEL_CASE/saveCurrentStep',
+        payload: 'info',
+      });
+    }
+  };
+  const information = (
+    <div className={styles.information}>
+      <Row>
+        <Col xs={24} sm={8} className={styles.label}>
+          付款账户：
+        </Col>
+        <Col xs={24} sm={16}>
+          {data.payAccount}
+        </Col>
+      </Row>
+      <Row>
+        <Col xs={24} sm={8} className={styles.label}>
+          收款账户：
+        </Col>
+        <Col xs={24} sm={16}>
+          {data.receiverAccount}
+        </Col>
+      </Row>
+      <Row>
+        <Col xs={24} sm={8} className={styles.label}>
+          收款人姓名：
+        </Col>
+        <Col xs={24} sm={16}>
+          {data.receiverName}
+        </Col>
+      </Row>
+      <Row>
+        <Col xs={24} sm={8} className={styles.label}>
+          转账金额：
+        </Col>
+        <Col xs={24} sm={16}>
+          <span className={styles.money}>{data.amount}</span> 元
+        </Col>
+      </Row>
+    </div>
+  );
+  const actions = (
+    <Fragment>
+      <Button type="primary" onClick={onFinish}>
+        再转一笔
+      </Button>
+      <Button>查看账单</Button>
+    </Fragment>
+  );
+  return (
+    <Result
+      type="success"
+      title="操作成功"
+      description="预计两小时内到账"
+      extra={information}
+      actions={actions}
+      className={styles.result}
+    />
+  );
+};
 
 export default Step3;
diff --git a/FormStepForm/src/index.tsx b/FormStepForm/src/index.tsx
index 62ebc682..f752e8fc 100644
--- a/FormStepForm/src/index.tsx
+++ b/FormStepForm/src/index.tsx
@@ -1,20 +1,21 @@
-import React, { Component, Fragment } from 'react';
 import { Card, Steps } from 'antd';
-import { connect } from 'dva';
+import React, { Component, Fragment } from 'react';
+
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import { connect } from 'dva';
+import { StateType } from './model';
 import Step1 from './components/Step1';
 import Step2 from './components/Step2';
 import Step3 from './components/Step3';
 import styles from './style.less';
-import { IStateType } from './model';
 
 const { Step } = Steps;
 
 interface PAGE_NAME_UPPER_CAMEL_CASEProps {
-  current: IStateType['current'];
+  current: StateType['current'];
 }
 
-@connect(({ BLOCK_NAME_CAMEL_CASE }: { BLOCK_NAME_CAMEL_CASE: IStateType }) => ({
+@connect(({ BLOCK_NAME_CAMEL_CASE }: { BLOCK_NAME_CAMEL_CASE: StateType }) => ({
   current: BLOCK_NAME_CAMEL_CASE.current,
 }))
 class PAGE_NAME_UPPER_CAMEL_CASE extends Component<PAGE_NAME_UPPER_CAMEL_CASEProps> {
diff --git a/FormStepForm/src/model.ts b/FormStepForm/src/model.ts
index cac2ea50..5bdbcb84 100644
--- a/FormStepForm/src/model.ts
+++ b/FormStepForm/src/model.ts
@@ -1,9 +1,9 @@
-import { fakeSubmitForm } from './service';
-import { Reducer } from 'redux';
+import { AnyAction, Reducer } from 'redux';
+
 import { EffectsCommandMap } from 'dva';
-import { AnyAction } from 'redux';
+import { fakeSubmitForm } from './service';
 
-export interface IStateType {
+export interface StateType {
   current?: string;
   step?: {
     payAccount: string;
@@ -15,18 +15,18 @@ export interface IStateType {
 
 export type Effect = (
   action: AnyAction,
-  effects: EffectsCommandMap & { select: <T>(func: (state: IStateType) => T) => T },
+  effects: EffectsCommandMap & { select: <T>(func: (state: StateType) => T) => T },
 ) => void;
 
 export interface ModelType {
   namespace: string;
-  state: IStateType;
+  state: StateType;
   effects: {
     submitStepForm: Effect;
   };
   reducers: {
-    saveStepFormData: Reducer<IStateType>;
-    saveCurrentStep: Reducer<IStateType>;
+    saveStepFormData: Reducer<StateType>;
+    saveCurrentStep: Reducer<StateType>;
   };
 }
 
@@ -69,7 +69,7 @@ const Model: ModelType = {
       return {
         ...state,
         step: {
-          ...state!.step,
+          ...(state as StateType).step,
           ...payload,
         },
       };
diff --git a/ListBasicList/package.json b/ListBasicList/package.json
index c18afc24..8bfdaf3b 100644
--- a/ListBasicList/package.json
+++ b/ListBasicList/package.json
@@ -12,12 +12,15 @@
     "dev": "umi dev"
   },
   "dependencies": {
+    "@ant-design/pro-layout": "^4.5.5",
     "antd": "^3.16.3",
+    "classnames": "^2.2.6",
     "dva": "^2.4.0",
     "hash.js": "^1.1.5",
     "moment": "^2.22.2",
     "react": "^16.6.3",
     "react-dom": "^16.6.3",
+    "redux": "^4.0.1",
     "umi-request": "^1.0.0"
   },
   "devDependencies": {
diff --git a/ListBasicList/src/Result/index.tsx b/ListBasicList/src/Result/index.tsx
index 63ba3ebc..8c8ea1e4 100644
--- a/ListBasicList/src/Result/index.tsx
+++ b/ListBasicList/src/Result/index.tsx
@@ -1,6 +1,6 @@
+import { Icon } from 'antd';
 import React from 'react';
 import classNames from 'classnames';
-import { Icon } from 'antd';
 import styles from './index.less';
 
 export interface ResultProps {
diff --git a/ListBasicList/src/_mock.ts b/ListBasicList/src/_mock.ts
index 7567867f..374f17d1 100644
--- a/ListBasicList/src/_mock.ts
+++ b/ListBasicList/src/_mock.ts
@@ -1,4 +1,4 @@
-import { BasicListItemDataType } from './data';
+import { BasicListItemDataType } from './data.d';
 
 const titles = [
   'Alipay',
@@ -56,7 +56,7 @@ function fakeList(count: number): BasicListItemDataType[] {
       owner: user[i % 10],
       title: titles[i % 8],
       avatar: avatars[i % 8],
-      cover: parseInt(i / 4 + '', 10) % 2 === 0 ? covers[i % 4] : covers[3 - (i % 4)],
+      cover: parseInt(`${i / 4}`, 10) % 2 === 0 ? covers[i % 4] : covers[3 - (i % 4)],
       status: ['active', 'exception', 'normal'][i % 3] as
         | 'normal'
         | 'exception'
@@ -100,7 +100,7 @@ function fakeList(count: number): BasicListItemDataType[] {
   return list;
 }
 
-let sourceData: Array<BasicListItemDataType> = [];
+let sourceData: BasicListItemDataType[] = [];
 
 function getFakeList(req: { query: any }, res: { json: (arg0: BasicListItemDataType[]) => void }) {
   const params = req.query;
@@ -126,7 +126,7 @@ function postFakeList(req: { body: any }, res: { json: (arg0: BasicListItemDataT
     case 'update':
       result.forEach((item, i) => {
         if (item.id === id) {
-          result[i] = Object.assign(item, body);
+          result[i] = { ...item, ...body };
         }
       });
       break;
diff --git a/ListBasicList/src/index.tsx b/ListBasicList/src/index.tsx
index ca9e98ec..7980a435 100644
--- a/ListBasicList/src/index.tsx
+++ b/ListBasicList/src/index.tsx
@@ -1,32 +1,32 @@
-import React, { Component } from 'react';
-import { findDOMNode } from 'react-dom';
-import moment from 'moment';
-import { connect } from 'dva';
 import {
-  List,
+  Avatar,
+  Button,
   Card,
-  Row,
   Col,
-  Radio,
-  Input,
-  Progress,
-  Button,
-  Icon,
+  DatePicker,
   Dropdown,
+  Form,
+  Icon,
+  Input,
+  List,
   Menu,
-  Avatar,
   Modal,
-  Form,
-  DatePicker,
+  Progress,
+  Radio,
+  Row,
   Select,
 } from 'antd';
-import { FormComponentProps } from 'antd/es/form';
-import { IStateType } from './model';
+import React, { Component } from 'react';
+
 import { Dispatch } from 'redux';
-import { BasicListItemDataType } from './data';
-import Result from './Result';
+import { FormComponentProps } from 'antd/es/form';
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
-
+import { connect } from 'dva';
+import { findDOMNode } from 'react-dom';
+import moment from 'moment';
+import Result from './Result';
+import { StateType } from './model';
+import { BasicListItemDataType } from './data.d';
 import styles from './style.less';
 
 const FormItem = Form.Item;
@@ -36,7 +36,7 @@ const SelectOption = Select.Option;
 const { Search, TextArea } = Input;
 
 interface PAGE_NAME_UPPER_CAMEL_CASEProps extends FormComponentProps {
-  BLOCK_NAME_CAMEL_CASE: IStateType;
+  BLOCK_NAME_CAMEL_CASE: StateType;
   dispatch: Dispatch<any>;
   loading: boolean;
 }
@@ -50,7 +50,7 @@ interface PAGE_NAME_UPPER_CAMEL_CASEState {
     BLOCK_NAME_CAMEL_CASE,
     loading,
   }: {
-    BLOCK_NAME_CAMEL_CASE: IStateType;
+    BLOCK_NAME_CAMEL_CASE: StateType;
     loading: {
       models: { [key: string]: boolean };
     };
@@ -69,7 +69,8 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<
     labelCol: { span: 7 },
     wrapperCol: { span: 13 },
   };
-  addBtn: HTMLButtonElement | undefined | null;
+
+  addBtn: HTMLButtonElement | undefined | null = undefined;
 
   componentDidMount() {
     const { dispatch } = this.props;
@@ -321,6 +322,7 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<
                 icon="plus"
                 onClick={this.showModal}
                 ref={component => {
+                  // eslint-disable-next-line  react/no-find-dom-node
                   this.addBtn = findDOMNode(component) as HTMLButtonElement;
                 }}
               >
diff --git a/ListBasicList/src/model.ts b/ListBasicList/src/model.ts
index 4113bc79..58740d54 100644
--- a/ListBasicList/src/model.ts
+++ b/ListBasicList/src/model.ts
@@ -1,29 +1,29 @@
-import { queryFakeList, removeFakeList, addFakeList, updateFakeList } from './service';
-import { BasicListItemDataType } from './data';
-import { Reducer } from 'redux';
+import { AnyAction, Reducer } from 'redux';
 import { EffectsCommandMap } from 'dva';
-import { AnyAction } from 'redux';
+import { addFakeList, queryFakeList, removeFakeList, updateFakeList } from './service';
 
-export interface IStateType {
+import { BasicListItemDataType } from './data.d';
+
+export interface StateType {
   list: BasicListItemDataType[];
 }
 
 export type Effect = (
   action: AnyAction,
-  effects: EffectsCommandMap & { select: <T>(func: (state: IStateType) => T) => T },
+  effects: EffectsCommandMap & { select: <T>(func: (state: StateType) => T) => T },
 ) => void;
 
 export interface ModelType {
   namespace: string;
-  state: IStateType;
+  state: StateType;
   effects: {
     fetch: Effect;
     appendFetch: Effect;
     submit: Effect;
   };
   reducers: {
-    queryList: Reducer<IStateType>;
-    appendList: Reducer<IStateType>;
+    queryList: Reducer<StateType>;
+    appendList: Reducer<StateType>;
   };
 }
 
diff --git a/ListBasicList/src/service.ts b/ListBasicList/src/service.ts
index fbcbb37b..38001c9c 100644
--- a/ListBasicList/src/service.ts
+++ b/ListBasicList/src/service.ts
@@ -1,5 +1,5 @@
 import request from 'umi-request';
-import { BasicListItemDataType } from './data';
+import { BasicListItemDataType } from './data.d';
 
 interface ParamsType extends Partial<BasicListItemDataType> {
   count?: number;
diff --git a/ListCardList/package.json b/ListCardList/package.json
index 6319a4ff..6b7760a8 100644
--- a/ListCardList/package.json
+++ b/ListCardList/package.json
@@ -11,15 +11,17 @@
     "url": "https://github.com/umijs/umi-blocks/ant-design-pro/cardlist"
   },
   "dependencies": {
+    "@ant-design/pro-layout": "^4.5.5",
     "antd": "^3.16.3",
     "dva": "^2.4.0",
     "react": "^16.6.3",
+    "redux": "^4.0.1",
     "umi-request": "^1.0.0"
   },
   "devDependencies": {
     "umi": "^2.6.9",
-    "umi-plugin-react": "^1.7.2",
-    "umi-plugin-block-dev": "^1.0.0"
+    "umi-plugin-block-dev": "^1.0.0",
+    "umi-plugin-react": "^1.7.2"
   },
   "license": "ISC",
   "blockConfig": {
diff --git a/ListCardList/src/_mock.ts b/ListCardList/src/_mock.ts
index 23e164fe..5e732aa0 100644
--- a/ListCardList/src/_mock.ts
+++ b/ListCardList/src/_mock.ts
@@ -1,4 +1,4 @@
-import { CardListItemDataType } from './data';
+import { CardListItemDataType } from './data.d';
 
 const titles = [
   'Alipay',
@@ -56,7 +56,7 @@ function fakeList(count: number): CardListItemDataType[] {
       owner: user[i % 10],
       title: titles[i % 8],
       avatar: avatars[i % 8],
-      cover: parseInt(i / 4 + '', 10) % 2 === 0 ? covers[i % 4] : covers[3 - (i % 4)],
+      cover: parseInt(`${i / 4}`, 10) % 2 === 0 ? covers[i % 4] : covers[3 - (i % 4)],
       status: ['active', 'exception', 'normal'][i % 3] as
         | 'normal'
         | 'exception'
diff --git a/ListCardList/src/index.tsx b/ListCardList/src/index.tsx
index f5e8e915..0eced379 100644
--- a/ListCardList/src/index.tsx
+++ b/ListCardList/src/index.tsx
@@ -1,17 +1,17 @@
+import { Button, Card, Icon, List, Typography } from 'antd';
 import React, { Component } from 'react';
-import { connect } from 'dva';
+
 import { Dispatch } from 'redux';
-import { IStateType } from './model';
-import { CardListItemDataType } from './data';
-import { Card, Button, Typography, Icon, List } from 'antd';
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import { connect } from 'dva';
+import { StateType } from './model';
+import { CardListItemDataType } from './data.d';
+import styles from './style.less';
 
 const { Paragraph } = Typography;
 
-import styles from './style.less';
-
 interface PAGE_NAME_UPPER_CAMEL_CASEProps {
-  BLOCK_NAME_CAMEL_CASE: IStateType;
+  BLOCK_NAME_CAMEL_CASE: StateType;
   dispatch: Dispatch<any>;
   loading: boolean;
 }
@@ -26,7 +26,7 @@ interface PAGE_NAME_UPPER_CAMEL_CASEState {
     BLOCK_NAME_CAMEL_CASE,
     loading,
   }: {
-    BLOCK_NAME_CAMEL_CASE: IStateType;
+    BLOCK_NAME_CAMEL_CASE: StateType;
     loading: {
       models: { [key: string]: boolean };
     };
@@ -86,42 +86,45 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<
         />
       </div>
     );
-    const nullData = {} as CardListItemDataType;
+    const nullData: Partial<CardListItemDataType> = {};
     return (
       <PageHeaderWrapper content={content} extraContent={extraContent}>
         <div className={styles.cardList}>
-          <List
+          <List<Partial<CardListItemDataType>>
             rowKey="id"
             loading={loading}
             grid={{ gutter: 24, lg: 3, md: 2, sm: 1, xs: 1 }}
             dataSource={[nullData, ...list]}
-            renderItem={item =>
-              item && item.id ? (
-                <List.Item key={item.id}>
-                  <Card
-                    hoverable
-                    className={styles.card}
-                    actions={[<a key="option1">操作一</a>, <a key="option2">操作二</a>]}
-                  >
-                    <Card.Meta
-                      avatar={<img alt="" className={styles.cardAvatar} src={item.avatar} />}
-                      title={<a>{item.title}</a>}
-                      description={
-                        <Paragraph className={styles.item} ellipsis={{ rows: 3 }}>
-                          {item.description}
-                        </Paragraph>
-                      }
-                    />
-                  </Card>
-                </List.Item>
-              ) : (
+            renderItem={item => {
+              if (item && item.id) {
+                return (
+                  <List.Item key={item.id}>
+                    <Card
+                      hoverable
+                      className={styles.card}
+                      actions={[<a key="option1">操作一</a>, <a key="option2">操作二</a>]}
+                    >
+                      <Card.Meta
+                        avatar={<img alt="" className={styles.cardAvatar} src={item.avatar} />}
+                        title={<a>{item.title}</a>}
+                        description={
+                          <Paragraph className={styles.item} ellipsis={{ rows: 3 }}>
+                            {item.description}
+                          </Paragraph>
+                        }
+                      />
+                    </Card>
+                  </List.Item>
+                );
+              }
+              return (
                 <List.Item>
                   <Button type="dashed" className={styles.newButton}>
                     <Icon type="plus" /> 新增产品
                   </Button>
                 </List.Item>
-              )
-            }
+              );
+            }}
           />
         </div>
       </PageHeaderWrapper>
diff --git a/ListCardList/src/model.ts b/ListCardList/src/model.ts
index abfc49d9..8efd9eab 100644
--- a/ListCardList/src/model.ts
+++ b/ListCardList/src/model.ts
@@ -1,26 +1,26 @@
-import { queryFakeList } from './service';
-import { CardListItemDataType } from './data';
-import { Reducer } from 'redux';
+import { AnyAction, Reducer } from 'redux';
+
 import { EffectsCommandMap } from 'dva';
-import { AnyAction } from 'redux';
+import { CardListItemDataType } from './data.d';
+import { queryFakeList } from './service';
 
-export interface IStateType {
+export interface StateType {
   list: CardListItemDataType[];
 }
 
 export type Effect = (
   action: AnyAction,
-  effects: EffectsCommandMap & { select: <T>(func: (state: IStateType) => T) => T },
+  effects: EffectsCommandMap & { select: <T>(func: (state: StateType) => T) => T },
 ) => void;
 
 export interface ModelType {
   namespace: string;
-  state: IStateType;
+  state: StateType;
   effects: {
     fetch: Effect;
   };
   reducers: {
-    queryList: Reducer<IStateType>;
+    queryList: Reducer<StateType>;
   };
 }
 
diff --git a/ListCardList/src/service.ts b/ListCardList/src/service.ts
index 104ca6db..fcd22bc0 100644
--- a/ListCardList/src/service.ts
+++ b/ListCardList/src/service.ts
@@ -1,7 +1,7 @@
 import request from 'umi-request';
 
 export async function queryFakeList(params: { count: number }) {
-  return request(`/api/fake_list`, {
+  return request('/api/fake_list', {
     params,
   });
 }
diff --git a/ListSearch/package.json b/ListSearch/package.json
index e4ce46c1..13937efd 100644
--- a/ListSearch/package.json
+++ b/ListSearch/package.json
@@ -11,6 +11,7 @@
     "url": "https://github.com/umijs/umi-blocks/ant-design-pro/searchlistapplications"
   },
   "dependencies": {
+    "@ant-design/pro-layout": "^4.5.5",
     "antd": "^3.16.3",
     "classnames": "^2.2.6",
     "dva": "^2.4.0",
@@ -23,8 +24,8 @@
   },
   "devDependencies": {
     "umi": "^2.6.9",
-    "umi-plugin-react": "^1.7.2",
-    "umi-plugin-block-dev": "^1.0.0"
+    "umi-plugin-block-dev": "^1.0.0",
+    "umi-plugin-react": "^1.7.2"
   },
   "license": "ISC",
   "blockConfig": {
diff --git a/ListSearch/src/index.tsx b/ListSearch/src/index.tsx
index 418a8244..522bf136 100644
--- a/ListSearch/src/index.tsx
+++ b/ListSearch/src/index.tsx
@@ -1,8 +1,9 @@
 import React, { Component } from 'react';
-import router from 'umi/router';
-import { connect } from 'dva';
+
 import { Input } from 'antd';
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import { connect } from 'dva';
+import router from 'umi/router';
 
 interface PAGE_NAME_UPPER_CAMEL_CASEProps {
   match: {
@@ -35,7 +36,6 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<PAGE_NAME_UPPER_CAMEL_CASEPro
   };
 
   handleFormSubmit = (value: string) => {
-    // tslint:disable-next-line: no-console
     console.log(value);
   };
 
diff --git a/ListSearchApplications/package.json b/ListSearchApplications/package.json
index d08675c9..94f6ca9e 100644
--- a/ListSearchApplications/package.json
+++ b/ListSearchApplications/package.json
@@ -19,12 +19,13 @@
     "numeral": "^2.0.6",
     "nzh": "^1.0.3",
     "react": "^16.6.3",
+    "redux": "^4.0.1",
     "umi-request": "^1.0.0"
   },
   "devDependencies": {
     "umi": "^2.6.9",
-    "umi-plugin-react": "^1.7.2",
-    "umi-plugin-block-dev": "^1.0.0"
+    "umi-plugin-block-dev": "^1.0.0",
+    "umi-plugin-react": "^1.7.2"
   },
   "license": "ISC",
   "blockConfig": {
diff --git a/ListSearchApplications/src/_mock.ts b/ListSearchApplications/src/_mock.ts
index f2a8de9c..5a12c6e2 100644
--- a/ListSearchApplications/src/_mock.ts
+++ b/ListSearchApplications/src/_mock.ts
@@ -1,4 +1,4 @@
-import { ListItemDataType } from './data';
+import { ListItemDataType } from './data.d';
 
 const titles = [
   'Alipay',
@@ -55,7 +55,7 @@ function fakeList(count: number): ListItemDataType[] {
       owner: user[i % 10],
       title: titles[i % 8],
       avatar: avatars[i % 8],
-      cover: parseInt(i / 4 + '', 10) % 2 === 0 ? covers[i % 4] : covers[3 - (i % 4)],
+      cover: parseInt(`${i / 4}`, 10) % 2 === 0 ? covers[i % 4] : covers[3 - (i % 4)],
       status: ['active', 'exception', 'normal'][i % 3] as
         | 'normal'
         | 'exception'
diff --git a/ListSearchApplications/src/components/TagSelect/index.tsx b/ListSearchApplications/src/components/TagSelect/index.tsx
index 2a2c0009..9536230a 100644
--- a/ListSearchApplications/src/components/TagSelect/index.tsx
+++ b/ListSearchApplications/src/components/TagSelect/index.tsx
@@ -1,7 +1,7 @@
+import { Icon, Tag } from 'antd';
 import React, { Component } from 'react';
-import classNames from 'classnames';
-import { Tag, Icon } from 'antd';
 
+import classNames from 'classnames';
 import styles from './index.less';
 
 const { CheckableTag } = Tag;
@@ -27,7 +27,7 @@ export interface TagSelectProps {
   };
   className?: string;
   Option?: TagSelectOptionProps;
-  children?: React.ReactElement<TagSelectOption> | Array<React.ReactElement<TagSelectOption>>;
+  children?: React.ReactElement<TagSelectOption> | React.ReactElement<TagSelectOption>[];
 }
 
 const TagSelectOption: React.SFC<TagSelectOptionProps> & {
@@ -58,6 +58,7 @@ class TagSelect extends Component<TagSelectProps, TagSelectState> {
       selectAllText: '全部',
     },
   };
+
   static Option: TagSelectOption = TagSelectOption;
 
   static getDerivedStateFromProps(nextProps: TagSelectProps) {
@@ -66,6 +67,7 @@ class TagSelect extends Component<TagSelectProps, TagSelectState> {
     }
     return null;
   }
+
   constructor(props: TagSelectProps) {
     super(props);
     this.state = {
diff --git a/ListSearchApplications/src/index.tsx b/ListSearchApplications/src/index.tsx
index 6832a768..550580e2 100644
--- a/ListSearchApplications/src/index.tsx
+++ b/ListSearchApplications/src/index.tsx
@@ -1,14 +1,15 @@
+import { Avatar, Card, Col, Dropdown, Form, Icon, List, Menu, Row, Select, Tooltip } from 'antd';
 import React, { Component } from 'react';
-import numeral from 'numeral';
+
+import { Dispatch } from 'redux';
+import { FormComponentProps } from 'antd/es/form';
 import { connect } from 'dva';
-import { Row, Col, Form, Card, Select, Icon, Avatar, List, Tooltip, Dropdown, Menu } from 'antd';
-import TagSelect from './components/TagSelect';
+import numeral from 'numeral';
+import { StateType } from './model';
+import { ListItemDataType } from './data.d';
 import StandardFormRow from './components/StandardFormRow';
+import TagSelect from './components/TagSelect';
 import styles from './style.less';
-import { IStateType } from './model';
-import { Dispatch } from 'redux';
-import { FormComponentProps } from 'antd/es/form';
-import { ListItemDataType } from './data';
 
 const { Option } = Select;
 const FormItem = Form.Item;
@@ -41,7 +42,7 @@ export function formatWan(val: number) {
 
 interface PAGE_NAME_UPPER_CAMEL_CASEProps extends FormComponentProps {
   dispatch: Dispatch<any>;
-  BLOCK_NAME_CAMEL_CASE: IStateType;
+  BLOCK_NAME_CAMEL_CASE: StateType;
   loading: boolean;
 }
 
@@ -199,7 +200,7 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<PAGE_NAME_UPPER_CAMEL_CASEPro
 }
 
 const WarpForm = Form.create<PAGE_NAME_UPPER_CAMEL_CASEProps>({
-  onValuesChange({ dispatch }: PAGE_NAME_UPPER_CAMEL_CASEProps, changedValues, allValues) {
+  onValuesChange({ dispatch }: PAGE_NAME_UPPER_CAMEL_CASEProps) {
     // 表单项变化时请求数据
     // 模拟查询表单生效
     dispatch({
@@ -216,7 +217,7 @@ export default connect(
     BLOCK_NAME_CAMEL_CASE,
     loading,
   }: {
-    BLOCK_NAME_CAMEL_CASE: IStateType;
+    BLOCK_NAME_CAMEL_CASE: StateType;
     loading: { models: { [key: string]: boolean } };
   }) => ({
     BLOCK_NAME_CAMEL_CASE,
diff --git a/ListSearchApplications/src/model.ts b/ListSearchApplications/src/model.ts
index ef64e05a..16b30607 100644
--- a/ListSearchApplications/src/model.ts
+++ b/ListSearchApplications/src/model.ts
@@ -1,26 +1,26 @@
-import { queryFakeList } from './service';
-import { ListItemDataType } from './data';
-import { Reducer } from 'redux';
+import { AnyAction, Reducer } from 'redux';
+
 import { EffectsCommandMap } from 'dva';
-import { AnyAction } from 'redux';
+import { ListItemDataType } from './data.d';
+import { queryFakeList } from './service';
 
-export interface IStateType {
+export interface StateType {
   list: ListItemDataType[];
 }
 
 export type Effect = (
   action: AnyAction,
-  effects: EffectsCommandMap & { select: <T>(func: (state: IStateType) => T) => T },
+  effects: EffectsCommandMap & { select: <T>(func: (state: StateType) => T) => T },
 ) => void;
 
 export interface ModelType {
   namespace: string;
-  state: IStateType;
+  state: StateType;
   effects: {
     fetch: Effect;
   };
   reducers: {
-    queryList: Reducer<IStateType>;
+    queryList: Reducer<StateType>;
   };
 }
 
diff --git a/ListSearchApplications/src/service.ts b/ListSearchApplications/src/service.ts
index 49ddaa1a..1fbbdf95 100644
--- a/ListSearchApplications/src/service.ts
+++ b/ListSearchApplications/src/service.ts
@@ -1,7 +1,8 @@
 import request from 'umi-request';
-import { ListItemDataType } from './data';
+import { ListItemDataType } from './data.d';
+
 export async function queryFakeList(params: ListItemDataType) {
-  return request(`/api/fake_list`, {
+  return request('/api/fake_list', {
     params,
   });
 }
diff --git a/ListSearchArticles/package.json b/ListSearchArticles/package.json
index c5d102d5..3e79565c 100644
--- a/ListSearchArticles/package.json
+++ b/ListSearchArticles/package.json
@@ -16,12 +16,13 @@
     "dva": "^2.4.0",
     "moment": "^2.22.2",
     "react": "^16.6.3",
+    "redux": "^4.0.1",
     "umi-request": "^1.0.0"
   },
   "devDependencies": {
     "umi": "^2.6.9",
-    "umi-plugin-react": "^1.7.2",
-    "umi-plugin-block-dev": "^1.0.0"
+    "umi-plugin-block-dev": "^1.0.0",
+    "umi-plugin-react": "^1.7.2"
   },
   "license": "ISC",
   "blockConfig": {
diff --git a/ListSearchArticles/src/_mock.ts b/ListSearchArticles/src/_mock.ts
index f2a8de9c..5a12c6e2 100644
--- a/ListSearchArticles/src/_mock.ts
+++ b/ListSearchArticles/src/_mock.ts
@@ -1,4 +1,4 @@
-import { ListItemDataType } from './data';
+import { ListItemDataType } from './data.d';
 
 const titles = [
   'Alipay',
@@ -55,7 +55,7 @@ function fakeList(count: number): ListItemDataType[] {
       owner: user[i % 10],
       title: titles[i % 8],
       avatar: avatars[i % 8],
-      cover: parseInt(i / 4 + '', 10) % 2 === 0 ? covers[i % 4] : covers[3 - (i % 4)],
+      cover: parseInt(`${i / 4}`, 10) % 2 === 0 ? covers[i % 4] : covers[3 - (i % 4)],
       status: ['active', 'exception', 'normal'][i % 3] as
         | 'normal'
         | 'exception'
diff --git a/ListSearchArticles/src/components/ArticleListContent/index.tsx b/ListSearchArticles/src/components/ArticleListContent/index.tsx
index bb1abbf1..c5a2d4fa 100644
--- a/ListSearchArticles/src/components/ArticleListContent/index.tsx
+++ b/ListSearchArticles/src/components/ArticleListContent/index.tsx
@@ -1,6 +1,6 @@
+import { Avatar } from 'antd';
 import React from 'react';
 import moment from 'moment';
-import { Avatar } from 'antd';
 import styles from './index.less';
 
 interface ArticleListContentProps {
diff --git a/ListSearchArticles/src/components/TagSelect/index.tsx b/ListSearchArticles/src/components/TagSelect/index.tsx
index 2a2c0009..9536230a 100644
--- a/ListSearchArticles/src/components/TagSelect/index.tsx
+++ b/ListSearchArticles/src/components/TagSelect/index.tsx
@@ -1,7 +1,7 @@
+import { Icon, Tag } from 'antd';
 import React, { Component } from 'react';
-import classNames from 'classnames';
-import { Tag, Icon } from 'antd';
 
+import classNames from 'classnames';
 import styles from './index.less';
 
 const { CheckableTag } = Tag;
@@ -27,7 +27,7 @@ export interface TagSelectProps {
   };
   className?: string;
   Option?: TagSelectOptionProps;
-  children?: React.ReactElement<TagSelectOption> | Array<React.ReactElement<TagSelectOption>>;
+  children?: React.ReactElement<TagSelectOption> | React.ReactElement<TagSelectOption>[];
 }
 
 const TagSelectOption: React.SFC<TagSelectOptionProps> & {
@@ -58,6 +58,7 @@ class TagSelect extends Component<TagSelectProps, TagSelectState> {
       selectAllText: '全部',
     },
   };
+
   static Option: TagSelectOption = TagSelectOption;
 
   static getDerivedStateFromProps(nextProps: TagSelectProps) {
@@ -66,6 +67,7 @@ class TagSelect extends Component<TagSelectProps, TagSelectState> {
     }
     return null;
   }
+
   constructor(props: TagSelectProps) {
     super(props);
     this.state = {
diff --git a/ListSearchArticles/src/index.tsx b/ListSearchArticles/src/index.tsx
index 6a66708f..73b3765b 100644
--- a/ListSearchArticles/src/index.tsx
+++ b/ListSearchArticles/src/index.tsx
@@ -1,15 +1,15 @@
+import { Button, Card, Col, Form, Icon, List, Row, Select, Tag } from 'antd';
 import React, { Component } from 'react';
-import { connect } from 'dva';
-import { Form, Card, Select, List, Tag, Icon, Row, Col, Button } from 'antd';
 
-import TagSelect from './components/TagSelect';
-import StandardFormRow from './components/StandardFormRow';
-import ArticleListContent from './components/ArticleListContent';
-import styles from './style.less';
 import { Dispatch } from 'redux';
 import { FormComponentProps } from 'antd/es/form';
-import { ListItemDataType } from './data';
-import { IStateType } from './model';
+import { connect } from 'dva';
+import ArticleListContent from './components/ArticleListContent';
+import { StateType } from './model';
+import { ListItemDataType } from './data.d';
+import StandardFormRow from './components/StandardFormRow';
+import TagSelect from './components/TagSelect';
+import styles from './style.less';
 
 const { Option } = Select;
 const FormItem = Form.Item;
@@ -18,7 +18,7 @@ const pageSize = 5;
 
 interface PAGE_NAME_UPPER_CAMEL_CASEProps extends FormComponentProps {
   dispatch: Dispatch<any>;
-  BLOCK_NAME_CAMEL_CASE: IStateType;
+  BLOCK_NAME_CAMEL_CASE: StateType;
   loading: boolean;
 }
 
@@ -235,7 +235,7 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<PAGE_NAME_UPPER_CAMEL_CASEPro
 }
 
 const WarpForm = Form.create<PAGE_NAME_UPPER_CAMEL_CASEProps>({
-  onValuesChange({ dispatch }: PAGE_NAME_UPPER_CAMEL_CASEProps, changedValues, allValues) {
+  onValuesChange({ dispatch }: PAGE_NAME_UPPER_CAMEL_CASEProps) {
     // 表单项变化时请求数据
     // 模拟查询表单生效
     dispatch({
@@ -252,7 +252,7 @@ export default connect(
     BLOCK_NAME_CAMEL_CASE,
     loading,
   }: {
-    BLOCK_NAME_CAMEL_CASE: IStateType;
+    BLOCK_NAME_CAMEL_CASE: StateType;
     loading: { models: { [key: string]: boolean } };
   }) => ({
     BLOCK_NAME_CAMEL_CASE,
diff --git a/ListSearchArticles/src/model.ts b/ListSearchArticles/src/model.ts
index 8a05b1bd..64db89e9 100644
--- a/ListSearchArticles/src/model.ts
+++ b/ListSearchArticles/src/model.ts
@@ -1,28 +1,28 @@
-import { queryFakeList } from './service';
-import { ListItemDataType } from './data';
-import { Reducer } from 'redux';
+import { AnyAction, Reducer } from 'redux';
+
 import { EffectsCommandMap } from 'dva';
-import { AnyAction } from 'redux';
+import { ListItemDataType } from './data.d';
+import { queryFakeList } from './service';
 
-export interface IStateType {
+export interface StateType {
   list: ListItemDataType[];
 }
 
 export type Effect = (
   action: AnyAction,
-  effects: EffectsCommandMap & { select: <T>(func: (state: IStateType) => T) => T },
+  effects: EffectsCommandMap & { select: <T>(func: (state: StateType) => T) => T },
 ) => void;
 
 export interface ModelType {
   namespace: string;
-  state: IStateType;
+  state: StateType;
   effects: {
     fetch: Effect;
     appendFetch: Effect;
   };
   reducers: {
-    queryList: Reducer<IStateType>;
-    appendList: Reducer<IStateType>;
+    queryList: Reducer<StateType>;
+    appendList: Reducer<StateType>;
   };
 }
 
@@ -60,7 +60,7 @@ const Model: ModelType = {
     appendList(state, action) {
       return {
         ...state,
-        list: state!.list.concat(action.payload),
+        list: (state as StateType).list.concat(action.payload),
       };
     },
   },
diff --git a/ListSearchArticles/src/service.ts b/ListSearchArticles/src/service.ts
index 3d4be295..1fbbdf95 100644
--- a/ListSearchArticles/src/service.ts
+++ b/ListSearchArticles/src/service.ts
@@ -1,8 +1,8 @@
 import request from 'umi-request';
-import { ListItemDataType } from './data';
+import { ListItemDataType } from './data.d';
 
 export async function queryFakeList(params: ListItemDataType) {
-  return request(`/api/fake_list`, {
+  return request('/api/fake_list', {
     params,
   });
 }
diff --git a/ListSearchProjects/package.json b/ListSearchProjects/package.json
index 2a77d035..503ea121 100644
--- a/ListSearchProjects/package.json
+++ b/ListSearchProjects/package.json
@@ -16,12 +16,13 @@
     "dva": "^2.4.0",
     "moment": "^2.22.2",
     "react": "^16.6.3",
+    "redux": "^4.0.1",
     "umi-request": "^1.0.0"
   },
   "devDependencies": {
     "umi": "^2.6.9",
-    "umi-plugin-react": "^1.7.2",
-    "umi-plugin-block-dev": "^1.0.0"
+    "umi-plugin-block-dev": "^1.0.0",
+    "umi-plugin-react": "^1.7.2"
   },
   "license": "ISC",
   "blockConfig": {
diff --git a/ListSearchProjects/src/_mock.ts b/ListSearchProjects/src/_mock.ts
index f2a8de9c..5a12c6e2 100644
--- a/ListSearchProjects/src/_mock.ts
+++ b/ListSearchProjects/src/_mock.ts
@@ -1,4 +1,4 @@
-import { ListItemDataType } from './data';
+import { ListItemDataType } from './data.d';
 
 const titles = [
   'Alipay',
@@ -55,7 +55,7 @@ function fakeList(count: number): ListItemDataType[] {
       owner: user[i % 10],
       title: titles[i % 8],
       avatar: avatars[i % 8],
-      cover: parseInt(i / 4 + '', 10) % 2 === 0 ? covers[i % 4] : covers[3 - (i % 4)],
+      cover: parseInt(`${i / 4}`, 10) % 2 === 0 ? covers[i % 4] : covers[3 - (i % 4)],
       status: ['active', 'exception', 'normal'][i % 3] as
         | 'normal'
         | 'exception'
diff --git a/ListSearchProjects/src/components/AvatarList/index.tsx b/ListSearchProjects/src/components/AvatarList/index.tsx
index 0e633596..2bb09b37 100644
--- a/ListSearchProjects/src/components/AvatarList/index.tsx
+++ b/ListSearchProjects/src/components/AvatarList/index.tsx
@@ -1,5 +1,6 @@
+import { Avatar, Tooltip } from 'antd';
+
 import React from 'react';
-import { Tooltip, Avatar } from 'antd';
 import classNames from 'classnames';
 import styles from './index.less';
 
@@ -19,7 +20,7 @@ export interface AvatarListProps {
   maxLength?: number;
   excessItemsStyle?: React.CSSProperties;
   style?: React.CSSProperties;
-  children: React.ReactElement<AvatarItemProps> | Array<React.ReactElement<AvatarItemProps>>;
+  children: React.ReactElement<AvatarItemProps> | React.ReactElement<AvatarItemProps>[];
 }
 
 const avatarSizeToClassName = (size?: SizeType) =>
@@ -54,9 +55,7 @@ const AvatarList: React.SFC<AvatarListProps> & { Item: typeof Item } = ({
 }) => {
   const numOfChildren = React.Children.count(children);
   const numToShow = maxLength >= numOfChildren ? numOfChildren : maxLength;
-  const childrenArray = React.Children.toArray(children) as Array<
-    React.ReactElement<AvatarItemProps>
-  >;
+  const childrenArray = React.Children.toArray(children) as React.ReactElement<AvatarItemProps>[];
   const childrenWithProps = childrenArray.slice(0, numToShow).map(child =>
     React.cloneElement(child, {
       size,
diff --git a/ListSearchProjects/src/components/TagSelect/index.tsx b/ListSearchProjects/src/components/TagSelect/index.tsx
index 2a2c0009..9536230a 100644
--- a/ListSearchProjects/src/components/TagSelect/index.tsx
+++ b/ListSearchProjects/src/components/TagSelect/index.tsx
@@ -1,7 +1,7 @@
+import { Icon, Tag } from 'antd';
 import React, { Component } from 'react';
-import classNames from 'classnames';
-import { Tag, Icon } from 'antd';
 
+import classNames from 'classnames';
 import styles from './index.less';
 
 const { CheckableTag } = Tag;
@@ -27,7 +27,7 @@ export interface TagSelectProps {
   };
   className?: string;
   Option?: TagSelectOptionProps;
-  children?: React.ReactElement<TagSelectOption> | Array<React.ReactElement<TagSelectOption>>;
+  children?: React.ReactElement<TagSelectOption> | React.ReactElement<TagSelectOption>[];
 }
 
 const TagSelectOption: React.SFC<TagSelectOptionProps> & {
@@ -58,6 +58,7 @@ class TagSelect extends Component<TagSelectProps, TagSelectState> {
       selectAllText: '全部',
     },
   };
+
   static Option: TagSelectOption = TagSelectOption;
 
   static getDerivedStateFromProps(nextProps: TagSelectProps) {
@@ -66,6 +67,7 @@ class TagSelect extends Component<TagSelectProps, TagSelectState> {
     }
     return null;
   }
+
   constructor(props: TagSelectProps) {
     super(props);
     this.state = {
diff --git a/ListSearchProjects/src/index.tsx b/ListSearchProjects/src/index.tsx
index 2144ef7a..55059e84 100644
--- a/ListSearchProjects/src/index.tsx
+++ b/ListSearchProjects/src/index.tsx
@@ -1,22 +1,24 @@
+import { Card, Col, Form, List, Row, Select, Typography } from 'antd';
 import React, { Component } from 'react';
-import moment from 'moment';
+
+import { Dispatch } from 'redux';
+import { FormComponentProps } from 'antd/es/form';
 import { connect } from 'dva';
-import { Row, Col, Form, Card, Select, List, Typography } from 'antd';
+import moment from 'moment';
+import AvatarList from './components/AvatarList';
+import { StateType } from './model';
+import { ListItemDataType } from './data.d';
 import StandardFormRow from './components/StandardFormRow';
 import TagSelect from './components/TagSelect';
-import AvatarList from './components/AvatarList';
 import styles from './style.less';
-import { IStateType } from './model';
-import { Dispatch } from 'redux';
-import { FormComponentProps } from 'antd/es/form';
-import { ListItemDataType } from './data';
+
 const { Option } = Select;
 const FormItem = Form.Item;
 const { Paragraph } = Typography;
 
 interface PAGE_NAME_UPPER_CAMEL_CASEProps extends FormComponentProps {
   dispatch: Dispatch<any>;
-  BLOCK_NAME_CAMEL_CASE: IStateType;
+  BLOCK_NAME_CAMEL_CASE: StateType;
   loading: boolean;
 }
 
@@ -64,9 +66,9 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<PAGE_NAME_UPPER_CAMEL_CASEPro
                 <span>{moment(item.updatedAt).fromNow()}</span>
                 <div className={styles.avatarList}>
                   <AvatarList size="small">
-                    {item.members.map((member, i) => (
+                    {item.members.map(member => (
                       <AvatarList.Item
-                        key={`${item.id}-avatar-${i}`}
+                        key={`${item.id}-avatar`}
                         src={member.avatar}
                         tips={member.name}
                       />
@@ -143,7 +145,7 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<PAGE_NAME_UPPER_CAMEL_CASEPro
 }
 
 const WarpForm = Form.create<PAGE_NAME_UPPER_CAMEL_CASEProps>({
-  onValuesChange({ dispatch }: PAGE_NAME_UPPER_CAMEL_CASEProps, changedValues, allValues) {
+  onValuesChange({ dispatch }: PAGE_NAME_UPPER_CAMEL_CASEProps) {
     // 表单项变化时请求数据
     // 模拟查询表单生效
     dispatch({
@@ -160,7 +162,7 @@ export default connect(
     BLOCK_NAME_CAMEL_CASE,
     loading,
   }: {
-    BLOCK_NAME_CAMEL_CASE: IStateType;
+    BLOCK_NAME_CAMEL_CASE: StateType;
     loading: { models: { [key: string]: boolean } };
   }) => ({
     BLOCK_NAME_CAMEL_CASE,
diff --git a/ListSearchProjects/src/model.ts b/ListSearchProjects/src/model.ts
index ef64e05a..16b30607 100644
--- a/ListSearchProjects/src/model.ts
+++ b/ListSearchProjects/src/model.ts
@@ -1,26 +1,26 @@
-import { queryFakeList } from './service';
-import { ListItemDataType } from './data';
-import { Reducer } from 'redux';
+import { AnyAction, Reducer } from 'redux';
+
 import { EffectsCommandMap } from 'dva';
-import { AnyAction } from 'redux';
+import { ListItemDataType } from './data.d';
+import { queryFakeList } from './service';
 
-export interface IStateType {
+export interface StateType {
   list: ListItemDataType[];
 }
 
 export type Effect = (
   action: AnyAction,
-  effects: EffectsCommandMap & { select: <T>(func: (state: IStateType) => T) => T },
+  effects: EffectsCommandMap & { select: <T>(func: (state: StateType) => T) => T },
 ) => void;
 
 export interface ModelType {
   namespace: string;
-  state: IStateType;
+  state: StateType;
   effects: {
     fetch: Effect;
   };
   reducers: {
-    queryList: Reducer<IStateType>;
+    queryList: Reducer<StateType>;
   };
 }
 
diff --git a/ListSearchProjects/src/service.ts b/ListSearchProjects/src/service.ts
index 104ca6db..fcd22bc0 100644
--- a/ListSearchProjects/src/service.ts
+++ b/ListSearchProjects/src/service.ts
@@ -1,7 +1,7 @@
 import request from 'umi-request';
 
 export async function queryFakeList(params: { count: number }) {
-  return request(`/api/fake_list`, {
+  return request('/api/fake_list', {
     params,
   });
 }
diff --git a/ListTableList/package.json b/ListTableList/package.json
index 9249ac84..97b71c12 100644
--- a/ListTableList/package.json
+++ b/ListTableList/package.json
@@ -11,16 +11,18 @@
     "url": "https://github.com/umijs/umi-blocks/ant-design-pro/tablelist"
   },
   "dependencies": {
+    "@ant-design/pro-layout": "^4.5.5",
     "antd": "^3.16.3",
     "dva": "^2.4.0",
     "moment": "^2.22.2",
     "react": "^16.6.3",
+    "redux": "^4.0.1",
     "umi-request": "^1.0.0"
   },
   "devDependencies": {
     "umi": "^2.6.9",
-    "umi-plugin-react": "^1.7.2",
-    "umi-plugin-block-dev": "^1.0.0"
+    "umi-plugin-block-dev": "^1.0.0",
+    "umi-plugin-react": "^1.7.2"
   },
   "license": "ISC",
   "blockConfig": {
diff --git a/ListTableList/src/_mock.ts b/ListTableList/src/_mock.ts
index fe29d304..c22e0ca0 100644
--- a/ListTableList/src/_mock.ts
+++ b/ListTableList/src/_mock.ts
@@ -1,5 +1,6 @@
 import { parse } from 'url';
-import { TableListItem, TableListParams } from './data';
+import { TableListItem, TableListParams } from './data.d';
+
 // mock tableListDataSource
 let tableListDataSource: TableListItem[] = [];
 
@@ -38,7 +39,8 @@ function getRule(
 ) {
   let url = u;
   if (!url || Object.prototype.toString.call(url) !== '[object String]') {
-    url = req.url; // eslint-disable-line
+    // eslint-disable-next-line prefer-destructuring
+    url = req.url;
   }
 
   const params = (parse(url, true).query as unknown) as TableListParams;
@@ -61,7 +63,7 @@ function getRule(
     status.forEach((s: string) => {
       filterDataSource = filterDataSource.concat(
         dataSource.filter(item => {
-          if (parseInt(item.status + '', 10) === parseInt(s.split('')[0], 10)) {
+          if (parseInt(`${item.status}`, 10) === parseInt(s.split('')[0], 10)) {
             return true;
           }
           return false;
@@ -75,9 +77,9 @@ function getRule(
     dataSource = dataSource.filter(data => data.name.indexOf(params.name) > -1);
   }
 
-  let pageSize: number = 10;
+  let pageSize = 10;
   if (params.pageSize) {
-    pageSize = parseInt(params.pageSize + '', 0);
+    pageSize = parseInt(`${params.pageSize}`, 0);
   }
 
   const result = {
@@ -100,7 +102,8 @@ function postRule(
 ) {
   let url = u;
   if (!url || Object.prototype.toString.call(url) !== '[object String]') {
-    url = req.url; // eslint-disable-line
+    // eslint-disable-next-line prefer-destructuring
+    url = req.url;
   }
 
   const body = (b && b.body) || req.body;
@@ -134,8 +137,7 @@ function postRule(
     case 'update':
       tableListDataSource = tableListDataSource.map(item => {
         if (item.key === key) {
-          Object.assign(item, { desc, name });
-          return item;
+          return { ...item, desc, name };
         }
         return item;
       });
diff --git a/ListTableList/src/components/CreateForm.tsx b/ListTableList/src/components/CreateForm.tsx
index ef5f30a2..323dc31f 100644
--- a/ListTableList/src/components/CreateForm.tsx
+++ b/ListTableList/src/components/CreateForm.tsx
@@ -1,6 +1,7 @@
-import React from 'react';
-import { Input, Modal, Form } from 'antd';
+import { Form, Input, Modal } from 'antd';
+
 import { FormComponentProps } from 'antd/es/form';
+import React from 'react';
 
 const FormItem = Form.Item;
 
diff --git a/ListTableList/src/components/StandardTable/index.tsx b/ListTableList/src/components/StandardTable/index.tsx
index b282b39c..451b7760 100644
--- a/ListTableList/src/components/StandardTable/index.tsx
+++ b/ListTableList/src/components/StandardTable/index.tsx
@@ -1,25 +1,26 @@
+import { Alert, Table } from 'antd';
+import { ColumnProps, TableRowSelection, TableProps } from 'antd/es/table';
 import React, { Component, Fragment } from 'react';
-import { Table, Alert } from 'antd';
-import { TableProps, ColumnProps, SorterResult } from 'antd/es/table';
+
+import { TableListItem } from '../../data.d';
 import styles from './index.less';
-import { TableListItem } from '../../data';
 
 type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
 
 export interface StandardTableProps<T> extends Omit<TableProps<T>, 'columns'> {
   columns: StandardTableColumnProps[];
   data: {
-    list: Array<TableListItem>;
+    list: TableListItem[];
     pagination: StandardTableProps<TableListItem>['pagination'];
   };
   selectedRows: TableListItem[];
   onSelectRow: (rows: any) => void;
 }
 
-export type StandardTableColumnProps = ColumnProps<TableListItem> & {
+export interface StandardTableColumnProps extends ColumnProps<TableListItem> {
   needTotal?: boolean;
   total?: number;
-};
+}
 
 function initTotalList(columns: StandardTableColumnProps[]) {
   if (!columns) {
@@ -51,6 +52,7 @@ class StandardTable extends Component<StandardTableProps<TableListItem>, Standar
     }
     return null;
   }
+
   constructor(props: StandardTableProps<TableListItem>) {
     super(props);
     const { columns } = props;
@@ -62,24 +64,28 @@ class StandardTable extends Component<StandardTableProps<TableListItem>, Standar
     };
   }
 
-  handleRowSelectChange = (selectedRowKeys: string[], selectedRows: TableListItem[]) => {
+  handleRowSelectChange: TableRowSelection<TableListItem>['onChange'] = (
+    selectedRowKeys,
+    selectedRows: TableListItem[],
+  ) => {
+    const currySelectedRowKeys = selectedRowKeys as string[];
     let { needTotalList } = this.state;
     needTotalList = needTotalList.map(item => ({
       ...item,
-      total: selectedRows.reduce((sum, val) => sum + parseFloat(val[item.dataIndex], 10), 0),
+      total: selectedRows.reduce((sum, val) => sum + parseFloat(val[item.dataIndex || 0]), 0),
     }));
     const { onSelectRow } = this.props;
     if (onSelectRow) {
       onSelectRow(selectedRows);
     }
 
-    this.setState({ selectedRowKeys, needTotalList });
+    this.setState({ selectedRowKeys: currySelectedRowKeys, needTotalList });
   };
 
-  handleTableChange = (
-    pagination: StandardTableProps<TableListItem>['pagination'],
-    filters: Record<keyof TableListItem, string[]>,
-    sorter: SorterResult<TableListItem>,
+  handleTableChange: TableProps<TableListItem>['onChange'] = (
+    pagination,
+    filters,
+    sorter,
     ...rest
   ) => {
     const { onChange } = this.props;
@@ -89,7 +95,9 @@ class StandardTable extends Component<StandardTableProps<TableListItem>, Standar
   };
 
   cleanSelectedKeys = () => {
-    this.handleRowSelectChange([], []);
+    if (this.handleRowSelectChange) {
+      this.handleRowSelectChange([], []);
+    }
   };
 
   render() {
@@ -103,7 +111,7 @@ class StandardTable extends Component<StandardTableProps<TableListItem>, Standar
       ...pagination,
     };
 
-    const rowSelection = {
+    const rowSelection: TableRowSelection<TableListItem> = {
       selectedRowKeys,
       onChange: this.handleRowSelectChange,
       getCheckboxProps: (record: TableListItem) => ({
diff --git a/ListTableList/src/components/UpdateForm.tsx b/ListTableList/src/components/UpdateForm.tsx
index 7d60e5da..2b69092d 100644
--- a/ListTableList/src/components/UpdateForm.tsx
+++ b/ListTableList/src/components/UpdateForm.tsx
@@ -1,19 +1,20 @@
+import { Button, DatePicker, Form, Input, Modal, Radio, Select, Steps } from 'antd';
 import React, { Component } from 'react';
-import { Input, Select, Button, DatePicker, Form, Modal, Steps, Radio } from 'antd';
-import { TableListItem } from '../data';
+
 import { FormComponentProps } from 'antd/es/form';
+import { TableListItem } from '../data.d';
 
-export type IFormValsType = {
+export interface FormValsType extends Partial<TableListItem> {
   target?: string;
   template?: string;
   type?: string;
   time?: string;
   frequency?: string;
-} & Partial<TableListItem>;
+}
 
 export interface UpdateFormProps extends FormComponentProps {
-  handleUpdateModalVisible: (flag?: boolean, formVals?: IFormValsType) => void;
-  handleUpdate: (values: IFormValsType) => void;
+  handleUpdateModalVisible: (flag?: boolean, formVals?: FormValsType) => void;
+  handleUpdate: (values: FormValsType) => void;
   updateModalVisible: boolean;
   values: Partial<TableListItem>;
 }
@@ -24,7 +25,7 @@ const { Option } = Select;
 const RadioGroup = Radio.Group;
 
 export interface UpdateFormState {
-  formVals: IFormValsType;
+  formVals: FormValsType;
   currentStep: number;
 }
 
@@ -34,10 +35,12 @@ class UpdateForm extends Component<UpdateFormProps, UpdateFormState> {
     handleUpdateModalVisible: () => {},
     values: {},
   };
+
   formLayout = {
     labelCol: { span: 7 },
     wrapperCol: { span: 13 },
   };
+
   constructor(props: UpdateFormProps) {
     super(props);
 
@@ -91,7 +94,7 @@ class UpdateForm extends Component<UpdateFormProps, UpdateFormState> {
     });
   };
 
-  renderContent = (currentStep: number, formVals: IFormValsType) => {
+  renderContent = (currentStep: number, formVals: FormValsType) => {
     const { form } = this.props;
     if (currentStep === 1) {
       return [
diff --git a/ListTableList/src/index.tsx b/ListTableList/src/index.tsx
index a342ac73..3274ec20 100644
--- a/ListTableList/src/index.tsx
+++ b/ListTableList/src/index.tsx
@@ -1,33 +1,35 @@
-import React, { Component, Fragment } from 'react';
-import { connect } from 'dva';
-import moment from 'moment';
 import {
-  Row,
-  Col,
+  Badge,
+  Button,
   Card,
+  Col,
+  DatePicker,
+  Divider,
+  Dropdown,
   Form,
-  Input,
-  Select,
   Icon,
-  Button,
-  Dropdown,
-  Menu,
+  Input,
   InputNumber,
-  DatePicker,
+  Menu,
+  Row,
+  Select,
   message,
-  Badge,
-  Divider,
 } from 'antd';
+import React, { Component, Fragment } from 'react';
+
+import { Dispatch } from 'redux';
 import { FormComponentProps } from 'antd/es/form';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
 import { SorterResult } from 'antd/es/table';
+import { connect } from 'dva';
+import moment from 'moment';
+import { StateType } from './model';
+import CreateForm from './components/CreateForm';
 import StandardTable, { StandardTableColumnProps } from './components/StandardTable';
-import { TableListItem, TableListParams, TableListPagination } from './data';
-import { Dispatch } from 'redux';
-import { IStateType } from './model';
+import UpdateForm, { FormValsType } from './components/UpdateForm';
+import { TableListItem, TableListPagination, TableListParams } from './data.d';
+
 import styles from './style.less';
-import UpdateForm, { IFormValsType } from './components/UpdateForm';
-import CreateForm from './components/CreateForm';
-import { PageHeaderWrapper } from '@ant-design/pro-layout';
 
 const FormItem = Form.Item;
 const { Option } = Select;
@@ -43,14 +45,14 @@ const status = ['关闭', '运行中', '已上线', '异常'];
 interface TableListProps extends FormComponentProps {
   dispatch: Dispatch<any>;
   loading: boolean;
-  BLOCK_NAME_CAMEL_CASE: IStateType;
+  BLOCK_NAME_CAMEL_CASE: StateType;
 }
 
 interface TableListState {
   modalVisible: boolean;
   updateModalVisible: boolean;
   expandForm: boolean;
-  selectedRows: Array<TableListItem>;
+  selectedRows: TableListItem[];
   formValues: { [key: string]: string };
   stepFormValues: Partial<TableListItem>;
 }
@@ -61,7 +63,7 @@ interface TableListState {
     BLOCK_NAME_CAMEL_CASE,
     loading,
   }: {
-    BLOCK_NAME_CAMEL_CASE: IStateType;
+    BLOCK_NAME_CAMEL_CASE: StateType;
     loading: {
       models: {
         [key: string]: boolean;
@@ -259,7 +261,7 @@ class TableList extends Component<TableListProps, TableListState> {
     });
   };
 
-  handleUpdateModalVisible = (flag?: boolean, record?: IFormValsType) => {
+  handleUpdateModalVisible = (flag?: boolean, record?: FormValsType) => {
     this.setState({
       updateModalVisible: !!flag,
       stepFormValues: record || {},
@@ -279,7 +281,7 @@ class TableList extends Component<TableListProps, TableListState> {
     this.handleModalVisible();
   };
 
-  handleUpdate = (fields: IFormValsType) => {
+  handleUpdate = (fields: FormValsType) => {
     const { dispatch } = this.props;
     dispatch({
       type: 'BLOCK_NAME_CAMEL_CASE/update',
diff --git a/ListTableList/src/model.ts b/ListTableList/src/model.ts
index 231a3d2b..0b484508 100644
--- a/ListTableList/src/model.ts
+++ b/ListTableList/src/model.ts
@@ -1,21 +1,21 @@
-import { queryRule, removeRule, addRule, updateRule } from './service';
-import { TableListDate } from './data';
-import { Reducer } from 'redux';
+import { AnyAction, Reducer } from 'redux';
 import { EffectsCommandMap } from 'dva';
-import { AnyAction } from 'redux';
+import { addRule, queryRule, removeRule, updateRule } from './service';
 
-export interface IStateType {
+import { TableListDate } from './data.d';
+
+export interface StateType {
   data: TableListDate;
 }
 
 export type Effect = (
   action: AnyAction,
-  effects: EffectsCommandMap & { select: <T>(func: (state: IStateType) => T) => T },
+  effects: EffectsCommandMap & { select: <T>(func: (state: StateType) => T) => T },
 ) => void;
 
 export interface ModelType {
   namespace: string;
-  state: IStateType;
+  state: StateType;
   effects: {
     fetch: Effect;
     add: Effect;
@@ -23,7 +23,7 @@ export interface ModelType {
     update: Effect;
   };
   reducers: {
-    save: Reducer<IStateType>;
+    save: Reducer<StateType>;
   };
 }
 
diff --git a/ListTableList/src/service.ts b/ListTableList/src/service.ts
index 003cabb4..24d6348e 100644
--- a/ListTableList/src/service.ts
+++ b/ListTableList/src/service.ts
@@ -1,8 +1,8 @@
 import request from 'umi-request';
-import { TableListParams } from './data';
+import { TableListParams } from './data.d';
 
 export async function queryRule(params: TableListParams) {
-  return request(`/api/rule`, {
+  return request('/api/rule', {
     params,
   });
 }
diff --git a/ProfileAdvanced/package.json b/ProfileAdvanced/package.json
index a26f3703..0fea7f01 100644
--- a/ProfileAdvanced/package.json
+++ b/ProfileAdvanced/package.json
@@ -11,18 +11,19 @@
     "url": "https://github.com/umijs/umi-blocks/ant-design-pro/advancedprofile"
   },
   "dependencies": {
+    "@ant-design/pro-layout": "^4.0.5",
     "antd": "^3.16.3",
     "classnames": "^2.2.6",
     "dva": "^2.4.0",
     "lodash-decorators": "^6.0.0",
     "react": "^16.6.3",
-    "umi-request": "^1.0.0",
-    "@ant-design/pro-layout": "^4.0.5"
+    "redux": "^4.0.1",
+    "umi-request": "^1.0.0"
   },
   "devDependencies": {
     "umi": "^2.6.9",
-    "umi-plugin-react": "^1.7.2",
-    "umi-plugin-block-dev": "^1.0.0"
+    "umi-plugin-block-dev": "^1.0.0",
+    "umi-plugin-react": "^1.7.2"
   },
   "license": "ISC",
   "blockConfig": {
diff --git a/ProfileAdvanced/src/index.tsx b/ProfileAdvanced/src/index.tsx
index c3603c3b..54062c64 100644
--- a/ProfileAdvanced/src/index.tsx
+++ b/ProfileAdvanced/src/index.tsx
@@ -1,26 +1,27 @@
-import React, { Component, Fragment } from 'react';
-import { Dispatch } from 'redux';
-import { GridContent, PageHeaderWrapper } from '@ant-design/pro-layout';
-import { connect } from 'dva';
 import {
+  Badge,
   Button,
-  Menu,
+  Card,
+  Col,
+  Descriptions,
+  Divider,
   Dropdown,
   Icon,
+  Menu,
+  Popover,
   Row,
-  Col,
   Steps,
-  Card,
-  Popover,
-  Badge,
   Table,
   Tooltip,
-  Divider,
-  Descriptions,
 } from 'antd';
+import { GridContent, PageHeaderWrapper } from '@ant-design/pro-layout';
+import React, { Component, Fragment } from 'react';
+
+import { Dispatch } from 'redux';
 import classNames from 'classnames';
+import { connect } from 'dva';
+import { AdvancedProfileData } from './data.d';
 import styles from './style.less';
-import { AdvancedProfileData } from './data';
 
 const { Step } = Steps;
 const ButtonGroup = Button.Group;
@@ -121,14 +122,16 @@ const customDot = (
   }: {
     status: string;
   },
-) =>
-  status === 'process' ? (
-    <Popover placement="topLeft" arrowPointAtCenter content={popoverContent}>
-      {dot}
-    </Popover>
-  ) : (
-    dot
-  );
+) => {
+  if (status === 'process') {
+    return (
+      <Popover placement="topLeft" arrowPointAtCenter content={popoverContent}>
+        {dot}
+      </Popover>
+    );
+  }
+  return dot;
+};
 
 const operationTabList = [
   {
@@ -160,12 +163,12 @@ const columns = [
     title: '执行结果',
     dataIndex: 'status',
     key: 'status',
-    render: (text: string) =>
-      text === 'agree' ? (
-        <Badge status="success" text="成功" />
-      ) : (
-        <Badge status="error" text="驳回" />
-      ),
+    render: (text: string) => {
+      if (text === 'agree') {
+        return <Badge status="success" text="成功" />;
+      }
+      return <Badge status="error" text="驳回" />;
+    },
   },
   {
     title: '操作时间',
@@ -225,6 +228,7 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<
   onOperationTabChange = (key: string) => {
     this.setState({ operationKey: key });
   };
+
   setStepDirection = () => {
     const { stepDirection } = this.state;
     const w = getWindowWidth();
diff --git a/ProfileAdvanced/src/model.ts b/ProfileAdvanced/src/model.ts
index c5012752..5c6ca7fe 100644
--- a/ProfileAdvanced/src/model.ts
+++ b/ProfileAdvanced/src/model.ts
@@ -1,9 +1,8 @@
-import { queryAdvancedProfile } from './service';
-import { Reducer } from 'redux';
-import { EffectsCommandMap } from 'dva';
-import { AnyAction } from 'redux';
+import { AnyAction, Reducer } from 'redux';
 
-import { AdvancedProfileData } from './data';
+import { EffectsCommandMap } from 'dva';
+import { AdvancedProfileData } from './data.d';
+import { queryAdvancedProfile } from './service';
 
 export type Effect = (
   action: AnyAction,
diff --git a/ProfileBasic/package.json b/ProfileBasic/package.json
index a01d5bac..96b97a01 100644
--- a/ProfileBasic/package.json
+++ b/ProfileBasic/package.json
@@ -11,15 +11,17 @@
     "url": "https://github.com/umijs/umi-blocks/ant-design-pro/basicprofile"
   },
   "dependencies": {
+    "@ant-design/pro-layout": "^4.5.5",
     "antd": "^3.16.3",
     "dva": "^2.4.0",
     "react": "^16.6.3",
+    "redux": "^4.0.1",
     "umi-request": "^1.0.0"
   },
   "devDependencies": {
     "umi": "^2.6.9",
-    "umi-plugin-react": "^1.7.2",
-    "umi-plugin-block-dev": "^1.0.0"
+    "umi-plugin-block-dev": "^1.0.0",
+    "umi-plugin-react": "^1.7.2"
   },
   "license": "ISC",
   "blockConfig": {
diff --git a/ProfileBasic/src/data.d.ts b/ProfileBasic/src/data.d.ts
index 786f796d..e8a601ed 100644
--- a/ProfileBasic/src/data.d.ts
+++ b/ProfileBasic/src/data.d.ts
@@ -1,10 +1,10 @@
 export interface BasicGood {
   id: string;
-  name: string;
-  barcode: string;
-  price: string;
-  num: string | number;
-  amount: string | number;
+  name?: string;
+  barcode?: string;
+  price?: string;
+  num?: string | number;
+  amount?: string | number;
 }
 
 export interface BasicProgress {
diff --git a/ProfileBasic/src/index.tsx b/ProfileBasic/src/index.tsx
index 6a10cabe..643d8b95 100644
--- a/ProfileBasic/src/index.tsx
+++ b/ProfileBasic/src/index.tsx
@@ -1,10 +1,11 @@
+import { Badge, Card, Descriptions, Divider, Table } from 'antd';
 import React, { Component } from 'react';
-import { connect } from 'dva';
-import { Card, Badge, Table, Descriptions, Divider } from 'antd';
+
+import { Dispatch } from 'redux';
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import { connect } from 'dva';
+import { BasicProfileDataType } from './data.d';
 import styles from './style.less';
-import { BasicProfileDataType, BasicGood } from './data';
-import { Dispatch } from 'redux';
 
 const progressColumns = [
   {
@@ -21,13 +22,14 @@ const progressColumns = [
     title: '状态',
     dataIndex: 'status',
     key: 'status',
-    render: (text: string) =>
-      text === 'success' ? (
-        <Badge status="success" text="成功" />
-      ) : (
-        <Badge status="processing" text="进行中" />
-      ),
+    render: (text: string) => {
+      if (text === 'success') {
+        return <Badge status="success" text="成功" />;
+      }
+      return <Badge status="processing" text="进行中" />;
+    },
   },
+
   {
     title: '操作员ID',
     dataIndex: 'operator',
@@ -89,14 +91,15 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<
         id: '总计',
         num,
         amount,
-      } as BasicGood);
+      });
     }
     const renderContent = (value: any, row: any, index: any) => {
-      const obj = {
+      const obj: {
+        children: any;
+        props: { colSpan?: number };
+      } = {
         children: value,
-        props: {} as {
-          colSpan?: number;
-        },
+        props: {},
       };
       if (index === basicGoods.length) {
         obj.props.colSpan = 0;
diff --git a/ProfileBasic/src/model.ts b/ProfileBasic/src/model.ts
index fbb19527..223a9a49 100644
--- a/ProfileBasic/src/model.ts
+++ b/ProfileBasic/src/model.ts
@@ -1,26 +1,26 @@
-import { queryBasicProfile } from './service';
-import { BasicGood } from './data';
-import { Reducer } from 'redux';
+import { AnyAction, Reducer } from 'redux';
+
 import { EffectsCommandMap } from 'dva';
-import { AnyAction } from 'redux';
+import { BasicGood } from './data.d';
+import { queryBasicProfile } from './service';
 
-export interface IStateType {
+export interface StateType {
   basicGoods: BasicGood[];
 }
 
 export type Effect = (
   action: AnyAction,
-  effects: EffectsCommandMap & { select: <T>(func: (state: IStateType) => T) => T },
+  effects: EffectsCommandMap & { select: <T>(func: (state: StateType) => T) => T },
 ) => void;
 
 export interface ModelType {
   namespace: string;
-  state: IStateType;
+  state: StateType;
   effects: {
     fetchBasic: Effect;
   };
   reducers: {
-    show: Reducer<IStateType>;
+    show: Reducer<StateType>;
   };
 }
 
diff --git a/ResultFail/package.json b/ResultFail/package.json
index 30719758..2f090a9b 100644
--- a/ResultFail/package.json
+++ b/ResultFail/package.json
@@ -11,12 +11,14 @@
     "url": "https://github.com/umijs/umi-blocks/ant-design-pro/resultfail"
   },
   "dependencies": {
-    "react": "^16.6.3",
-    "antd": "^3.16.3"
+    "@ant-design/pro-layout": "^4.5.5",
+    "antd": "^3.16.3",
+    "classnames": "^2.2.6",
+    "umi-plugin-react": "^1.7.2",
+    "react": "^16.6.3"
   },
   "devDependencies": {
     "umi": "^2.6.9",
-    "umi-plugin-react": "^1.7.2",
     "umi-plugin-block-dev": "^1.0.0"
   },
   "license": "ISC",
diff --git a/ResultFail/src/Result/index.tsx b/ResultFail/src/Result/index.tsx
index 63ba3ebc..8c8ea1e4 100644
--- a/ResultFail/src/Result/index.tsx
+++ b/ResultFail/src/Result/index.tsx
@@ -1,6 +1,6 @@
+import { Icon } from 'antd';
 import React from 'react';
 import classNames from 'classnames';
-import { Icon } from 'antd';
 import styles from './index.less';
 
 export interface ResultProps {
diff --git a/ResultFail/src/index.tsx b/ResultFail/src/index.tsx
index d0d38363..601c7bb2 100644
--- a/ResultFail/src/index.tsx
+++ b/ResultFail/src/index.tsx
@@ -1,6 +1,7 @@
+import { Button, Card, Icon } from 'antd';
+import { FormattedMessage, formatMessage } from 'umi-plugin-react/locale';
 import React, { Fragment } from 'react';
-import { formatMessage, FormattedMessage } from 'umi-plugin-react/locale';
-import { Button, Icon, Card } from 'antd';
+
 import { GridContent } from '@ant-design/pro-layout';
 import Result from './Result';
 import styles from './index.less';
diff --git a/ResultSuccess/package.json b/ResultSuccess/package.json
index 75add821..19f639e2 100644
--- a/ResultSuccess/package.json
+++ b/ResultSuccess/package.json
@@ -11,8 +11,11 @@
     "url": "https://github.com/umijs/umi-blocks/ant-design-pro/resultsuccess"
   },
   "dependencies": {
-    "react": "^16.6.3",
-    "antd": "^3.10.9"
+    "@ant-design/pro-layout": "^4.5.5",
+    "antd": "^3.16.3",
+    "classnames": "^2.2.6",
+    "umi-plugin-react": "^1.7.2",
+    "react": "^16.6.3"
   },
   "devDependencies": {
     "umi": "^2.6.9",
diff --git a/ResultSuccess/src/Result/index.tsx b/ResultSuccess/src/Result/index.tsx
index 63ba3ebc..8c8ea1e4 100644
--- a/ResultSuccess/src/Result/index.tsx
+++ b/ResultSuccess/src/Result/index.tsx
@@ -1,6 +1,6 @@
+import { Icon } from 'antd';
 import React from 'react';
 import classNames from 'classnames';
-import { Icon } from 'antd';
 import styles from './index.less';
 
 export interface ResultProps {
diff --git a/ResultSuccess/src/index.tsx b/ResultSuccess/src/index.tsx
index 4a45c2cd..0f597b1f 100644
--- a/ResultSuccess/src/index.tsx
+++ b/ResultSuccess/src/index.tsx
@@ -1,8 +1,9 @@
+import { Button, Card, Col, Icon, Row, Steps } from 'antd';
+import { FormattedMessage, formatMessage } from 'umi-plugin-react/locale';
 import React, { Fragment } from 'react';
-import { formatMessage, FormattedMessage } from 'umi-plugin-react/locale';
-import { Button, Row, Col, Icon, Steps, Card } from 'antd';
-import Result from './Result';
+
 import { GridContent } from '@ant-design/pro-layout';
+import Result from './Result';
 import styles from './index.less';
 
 const { Step } = Steps;
diff --git a/UserLogin/package.json b/UserLogin/package.json
index 183e4ba7..3e217480 100644
--- a/UserLogin/package.json
+++ b/UserLogin/package.json
@@ -12,17 +12,20 @@
   },
   "dependencies": {
     "antd": "^3.16.3",
+    "classnames": "^2.2.6",
     "dva": "^2.4.0",
     "moment": "^2.22.2",
+    "omit.js": "^1.0.2",
     "qs": "^6.7.0",
     "react": "^16.6.3",
+    "redux": "^4.0.1",
+    "umi-plugin-react": "^1.3.0",
     "umi-request": "^1.0.0"
   },
   "devDependencies": {
+    "@types/qs": "^6.5.3",
     "umi": "^2.6.9",
-    "umi-plugin-block-dev": "^1.0.0",
-    "umi-plugin-react": "^1.3.0-beta.1",
-    "@types/qs": "^6.5.3"
+    "umi-plugin-block-dev": "^1.0.0"
   },
   "license": "MIT",
   "blockConfig": {
diff --git a/UserLogin/src/components/Login/LoginContext.tsx b/UserLogin/src/components/Login/LoginContext.tsx
index 6e46556f..ae571e0d 100644
--- a/UserLogin/src/components/Login/LoginContext.tsx
+++ b/UserLogin/src/components/Login/LoginContext.tsx
@@ -1,6 +1,6 @@
 import { createContext } from 'react';
 
-export interface ILoginContext {
+export interface LoginContextProps {
   tabUtil?: {
     addTab: (id: string) => void;
     removeTab: (id: string) => void;
@@ -8,6 +8,6 @@ export interface ILoginContext {
   updateActive?: (activeItem: { [key: string]: string } | string) => void;
 }
 
-const LoginContext: React.Context<ILoginContext> = createContext({});
+const LoginContext: React.Context<LoginContextProps> = createContext({});
 
 export default LoginContext;
diff --git a/UserLogin/src/components/Login/LoginItem.tsx b/UserLogin/src/components/Login/LoginItem.tsx
index 8766e628..6daea72b 100644
--- a/UserLogin/src/components/Login/LoginItem.tsx
+++ b/UserLogin/src/components/Login/LoginItem.tsx
@@ -1,16 +1,22 @@
+import { Button, Col, Form, Input, Row } from 'antd';
 import React, { Component } from 'react';
-import { Form, Input, Button, Row, Col } from 'antd';
+
+import { FormComponentProps } from 'antd/es/form';
 import omit from 'omit.js';
-import styles from './index.less';
 import ItemMap from './map';
-import LoginContext, { ILoginContext } from './LoginContext';
-import { FormComponentProps } from 'antd/es/form';
+import LoginContext, { LoginContextProps } from './LoginContext';
+import styles from './index.less';
 
 type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
 
 export type WrappedLoginItemProps = Omit<LoginItemProps, 'form' | 'type' | 'updateActive'>;
 export type LoginItemKeyType = keyof typeof ItemMap;
-export type LoginItemType = { [K in keyof typeof ItemMap]: React.FC<WrappedLoginItemProps> };
+export interface LoginItemType {
+  UserName: React.FC<WrappedLoginItemProps>;
+  Password: React.FC<WrappedLoginItemProps>;
+  Mobile: React.FC<WrappedLoginItemProps>;
+  Captcha: React.FC<WrappedLoginItemProps>;
+}
 
 export interface LoginItemProps {
   name?: string;
@@ -23,7 +29,7 @@ export interface LoginItemProps {
   countDown?: number;
   getCaptchaButtonText?: string;
   getCaptchaSecondText?: string;
-  updateActive?: ILoginContext['updateActive'];
+  updateActive?: LoginContextProps['updateActive'];
   type?: string;
   defaultValue?: string;
   form?: FormComponentProps['form'];
@@ -43,7 +49,8 @@ class WrapFormItem extends Component<LoginItemProps, LoginItemState> {
     getCaptchaButtonText: 'captcha',
     getCaptchaSecondText: 'second',
   };
-  interval: number | undefined;
+
+  interval: number | undefined = undefined;
 
   constructor(props: LoginItemProps) {
     super(props);
@@ -51,6 +58,7 @@ class WrapFormItem extends Component<LoginItemProps, LoginItemState> {
       count: 0,
     };
   }
+
   componentDidMount() {
     const { updateActive, name = '' } = this.props;
     if (updateActive) {
@@ -77,7 +85,7 @@ class WrapFormItem extends Component<LoginItemProps, LoginItemState> {
 
   getFormItemOptions = ({ onChange, defaultValue, customProps = {}, rules }: LoginItemProps) => {
     const options: {
-      rules?: Array<any>;
+      rules?: any[];
       onChange?: LoginItemProps['onChange'];
       initialValue?: LoginItemProps['defaultValue'];
     } = {
@@ -171,18 +179,16 @@ Object.keys(ItemMap).forEach(key => {
   const item = ItemMap[key];
   LoginItem[key] = (props: LoginItemProps) => (
     <LoginContext.Consumer>
-      {context => {
-        return (
-          <WrapFormItem
-            customProps={item.props}
-            rules={item.rules}
-            {...props}
-            type={key}
-            {...context}
-            updateActive={context.updateActive}
-          />
-        );
-      }}
+      {context => (
+        <WrapFormItem
+          customProps={item.props}
+          rules={item.rules}
+          {...props}
+          type={key}
+          {...context}
+          updateActive={context.updateActive}
+        />
+      )}
     </LoginContext.Consumer>
   );
 });
diff --git a/UserLogin/src/components/Login/LoginSubmit.tsx b/UserLogin/src/components/Login/LoginSubmit.tsx
index 766da7e8..e4d75cb6 100644
--- a/UserLogin/src/components/Login/LoginSubmit.tsx
+++ b/UserLogin/src/components/Login/LoginSubmit.tsx
@@ -1,8 +1,10 @@
+import { Button, Form } from 'antd';
+
+import { ButtonProps } from 'antd/es/button';
 import React from 'react';
 import classNames from 'classnames';
-import { Button, Form } from 'antd';
 import styles from './index.less';
-import { ButtonProps } from 'antd/es/button';
+
 const FormItem = Form.Item;
 
 interface LoginSubmitProps extends ButtonProps {
diff --git a/UserLogin/src/components/Login/LoginTab.tsx b/UserLogin/src/components/Login/LoginTab.tsx
index efcca855..0344d30e 100644
--- a/UserLogin/src/components/Login/LoginTab.tsx
+++ b/UserLogin/src/components/Login/LoginTab.tsx
@@ -1,7 +1,8 @@
 import React, { Component } from 'react';
-import { Tabs } from 'antd';
+
 import { TabPaneProps } from 'antd/es/tabs';
-import LoginContext, { ILoginContext } from './LoginContext';
+import { Tabs } from 'antd';
+import LoginContext, { LoginContextProps } from './LoginContext';
 
 const { TabPane } = Tabs;
 
@@ -14,15 +15,17 @@ const generateId = (() => {
 })();
 
 interface LoginTabProps extends TabPaneProps {
-  tabUtil: ILoginContext['tabUtil'];
+  tabUtil: LoginContextProps['tabUtil'];
 }
 
 class LoginTab extends Component<LoginTabProps> {
-  uniqueId: string;
+  uniqueId: string = '';
+
   constructor(props: LoginTabProps) {
     super(props);
     this.uniqueId = generateId('login-tab-');
   }
+
   componentDidMount() {
     const { tabUtil } = this.props;
     if (tabUtil) {
diff --git a/UserLogin/src/components/Login/index.tsx b/UserLogin/src/components/Login/index.tsx
index 4957c86a..01a75cd3 100644
--- a/UserLogin/src/components/Login/index.tsx
+++ b/UserLogin/src/components/Login/index.tsx
@@ -1,12 +1,13 @@
-import React, { Component } from 'react';
 import { Form, Tabs } from 'antd';
+import React, { Component } from 'react';
+import { FormComponentProps } from 'antd/es/form';
 import classNames from 'classnames';
-import LoginItem, { LoginItemType, LoginItemProps } from './LoginItem';
+import LoginContext, { LoginContextProps } from './LoginContext';
+import LoginItem, { LoginItemProps } from './LoginItem';
+
+import LoginSubmit from './LoginSubmit';
 import LoginTab from './LoginTab';
 import styles from './index.less';
-import LoginContext, { ILoginContext } from './LoginContext';
-import { FormComponentProps } from 'antd/es/form';
-import LoginSubmit from './LoginSubmit';
 
 export interface LoginProps {
   defaultActiveKey?: string;
@@ -21,16 +22,22 @@ export interface LoginProps {
 interface LoginState {
   tabs?: string[];
   type?: string;
-  active?: { [key: string]: Array<any> };
+  active?: { [key: string]: any[] };
 }
 
 class Login extends Component<LoginProps, LoginState> {
   public static Tab = LoginTab;
+
   public static Submit = LoginSubmit;
+
   public static UserName: React.FunctionComponent<LoginItemProps>;
+
   public static Password: React.FunctionComponent<LoginItemProps>;
+
   public static Mobile: React.FunctionComponent<LoginItemProps>;
+
   public static Captcha: React.FunctionComponent<LoginItemProps>;
+
   static defaultProps = {
     className: '',
     defaultActiveKey: '',
@@ -61,7 +68,7 @@ class Login extends Component<LoginProps, LoginState> {
     );
   };
 
-  getContext: () => ILoginContext = () => {
+  getContext: () => LoginContextProps = () => {
     const { form } = this.props;
     const { tabs = [] } = this.state;
     return {
@@ -150,7 +157,7 @@ class Login extends Component<LoginProps, LoginState> {
   }
 }
 
-(Object.keys(LoginItem) as Array<keyof LoginItemType>).forEach(item => {
+(Object.keys(LoginItem) as (keyof LoginItemType)[]).forEach(item => {
   Login[item] = LoginItem[item];
 });
 
diff --git a/UserLogin/src/components/Login/map.tsx b/UserLogin/src/components/Login/map.tsx
index dfa88199..babd226f 100644
--- a/UserLogin/src/components/Login/map.tsx
+++ b/UserLogin/src/components/Login/map.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
 import { Icon } from 'antd';
+import React from 'react';
 import styles from './index.less';
 
 export default {
diff --git a/UserLogin/src/index.tsx b/UserLogin/src/index.tsx
index aae93f68..68fea572 100644
--- a/UserLogin/src/index.tsx
+++ b/UserLogin/src/index.tsx
@@ -1,20 +1,21 @@
+import { Alert, Checkbox, Icon } from 'antd';
+import { FormattedMessage, formatMessage } from 'umi-plugin-react/locale';
 import React, { Component } from 'react';
-import { connect } from 'dva';
-import { formatMessage, FormattedMessage } from 'umi-plugin-react/locale';
+
+import { CheckboxChangeEvent } from 'antd/es/checkbox';
+import { Dispatch } from 'redux';
+import { FormComponentProps } from 'antd/es/form';
 import Link from 'umi/link';
-import { Checkbox, Alert, Icon } from 'antd';
+import { connect } from 'dva';
+import { StateType } from './model';
 import LoginComponents from './components/Login';
 import styles from './style.less';
-import { Dispatch } from 'redux';
-import { IStateType } from './model';
-import { FormComponentProps } from 'antd/es/form';
-import { CheckboxChangeEvent } from 'antd/es/checkbox';
 
 const { Tab, UserName, Password, Mobile, Captcha, Submit } = LoginComponents;
 
 interface PAGE_NAME_UPPER_CAMEL_CASEProps {
   dispatch: Dispatch<any>;
-  BLOCK_NAME_CAMEL_CASE: IStateType;
+  BLOCK_NAME_CAMEL_CASE: StateType;
   submitting: boolean;
 }
 interface PAGE_NAME_UPPER_CAMEL_CASEState {
@@ -33,7 +34,7 @@ export interface FromDataType {
     BLOCK_NAME_CAMEL_CASE,
     loading,
   }: {
-    BLOCK_NAME_CAMEL_CASE: IStateType;
+    BLOCK_NAME_CAMEL_CASE: StateType;
     loading: {
       effects: {
         [key: string]: string;
@@ -48,15 +49,37 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<
   PAGE_NAME_UPPER_CAMEL_CASEProps,
   PAGE_NAME_UPPER_CAMEL_CASEState
 > {
+  loginForm: FormComponentProps['form'] | undefined | null = undefined;
+
   state: PAGE_NAME_UPPER_CAMEL_CASEState = {
     type: 'account',
     autoLogin: true,
   };
-  loginForm: FormComponentProps['form'] | undefined | null;
+
+  changeAutoLogin = (e: CheckboxChangeEvent) => {
+    this.setState({
+      autoLogin: e.target.checked,
+    });
+  };
+
+  handleSubmit = (err: any, values: FromDataType) => {
+    const { type } = this.state;
+    if (!err) {
+      const { dispatch } = this.props;
+      dispatch({
+        type: 'BLOCK_NAME_CAMEL_CASE/login',
+        payload: {
+          ...values,
+          type,
+        },
+      });
+    }
+  };
 
   onTabChange = (type: string) => {
     this.setState({ type });
   };
+
   onGetCaptcha = () =>
     new Promise((resolve, reject) => {
       if (!this.loginForm) {
@@ -77,26 +100,6 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<
       });
     });
 
-  handleSubmit = (err: any, values: FromDataType) => {
-    const { type } = this.state;
-    if (!err) {
-      const { dispatch } = this.props;
-      dispatch({
-        type: 'BLOCK_NAME_CAMEL_CASE/login',
-        payload: {
-          ...values,
-          type,
-        },
-      });
-    }
-  };
-
-  changeAutoLogin = (e: CheckboxChangeEvent) => {
-    this.setState({
-      autoLogin: e.target.checked,
-    });
-  };
-
   renderMessage = (content: string) => (
     <Alert style={{ marginBottom: 24 }} message={content} type="error" showIcon />
   );
diff --git a/UserLogin/src/model.ts b/UserLogin/src/model.ts
index eb4e1c97..4bb89653 100644
--- a/UserLogin/src/model.ts
+++ b/UserLogin/src/model.ts
@@ -1,11 +1,10 @@
+import { AnyAction, Reducer } from 'redux';
+import { EffectsCommandMap } from 'dva';
 import { routerRedux } from 'dva/router';
-import { getPageQuery, setAuthority } from './utils/utils';
 import { fakeAccountLogin, getFakeCaptcha } from './service';
-import { Reducer } from 'redux';
-import { EffectsCommandMap } from 'dva';
-import { AnyAction } from 'redux';
+import { getPageQuery, setAuthority } from './utils/utils';
 
-export interface IStateType {
+export interface StateType {
   status?: 'ok' | 'error';
   type?: string;
   currentAuthority?: 'user' | 'guest' | 'admin';
@@ -13,18 +12,18 @@ export interface IStateType {
 
 export type Effect = (
   action: AnyAction,
-  effects: EffectsCommandMap & { select: <T>(func: (state: IStateType) => T) => T },
+  effects: EffectsCommandMap & { select: <T>(func: (state: StateType) => T) => T },
 ) => void;
 
 export interface ModelType {
   namespace: string;
-  state: IStateType;
+  state: StateType;
   effects: {
     login: Effect;
     getCaptcha: Effect;
   };
   reducers: {
-    changeLoginStatus: Reducer<IStateType>;
+    changeLoginStatus: Reducer<StateType>;
   };
 }
 
diff --git a/UserRegister/package.json b/UserRegister/package.json
index 8d6268ab..1f43d04b 100644
--- a/UserRegister/package.json
+++ b/UserRegister/package.json
@@ -17,11 +17,12 @@
     "moment": "^2.22.2",
     "nzh": "^1.0.3",
     "react": "^16.6.3",
-    "umi-request": "^1.0.0"
+    "redux": "^4.0.1",
+    "umi-request": "^1.0.0",
+    "umi-plugin-react": "^1.7.2"
   },
   "devDependencies": {
     "umi": "^2.6.9",
-    "umi-plugin-react": "^1.7.2",
     "umi-plugin-block-dev": "^1.0.0"
   },
   "license": "MIT",
diff --git a/UserRegister/src/index.tsx b/UserRegister/src/index.tsx
index 2df5dc26..acae70c4 100644
--- a/UserRegister/src/index.tsx
+++ b/UserRegister/src/index.tsx
@@ -1,13 +1,14 @@
+import { Button, Col, Form, Input, Popover, Progress, Row, Select, message } from 'antd';
+import { FormattedMessage, formatMessage } from 'umi-plugin-react/locale';
 import React, { Component } from 'react';
-import { connect } from 'dva';
-import { formatMessage, FormattedMessage } from 'umi-plugin-react/locale';
-import Link from 'umi/link';
-import { Form, Input, message, Button, Select, Row, Col, Popover, Progress } from 'antd';
-import styles from './style.less';
+
 import { Dispatch } from 'redux';
-import { IStateType } from './model';
 import { FormComponentProps } from 'antd/es/form';
+import Link from 'umi/link';
+import { connect } from 'dva';
 import router from 'umi/router';
+import { StateType } from './model';
+import styles from './style.less';
 
 const FormItem = Form.Item;
 const { Option } = Select;
@@ -43,7 +44,7 @@ const passwordProgressMap: {
 
 interface BLOCK_NAME_CAMEL_CASEProps extends FormComponentProps {
   dispatch: Dispatch<any>;
-  BLOCK_NAME_CAMEL_CASE: IStateType;
+  BLOCK_NAME_CAMEL_CASE: StateType;
   submitting: boolean;
 }
 interface BLOCK_NAME_CAMEL_CASEState {
@@ -54,7 +55,7 @@ interface BLOCK_NAME_CAMEL_CASEState {
   prefix: string;
 }
 
-export interface IUserRegisterParams {
+export interface UserRegisterParams {
   mail: string;
   password: string;
   confirm: string;
@@ -68,7 +69,7 @@ export interface IUserRegisterParams {
     BLOCK_NAME_CAMEL_CASE,
     loading,
   }: {
-    BLOCK_NAME_CAMEL_CASE: IStateType;
+    BLOCK_NAME_CAMEL_CASE: StateType;
     loading: {
       effects: {
         [key: string]: string;
@@ -90,7 +91,8 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<
     help: '',
     prefix: '86',
   };
-  interval: number | undefined;
+
+  interval: number | undefined = undefined;
 
   componentDidUpdate() {
     const { BLOCK_NAME_CAMEL_CASE, form } = this.props;
@@ -109,6 +111,7 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<
   componentWillUnmount() {
     clearInterval(this.interval);
   }
+
   onGetCaptcha = () => {
     let count = 59;
     this.setState({ count });
@@ -201,7 +204,6 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<
     return value && value.length ? (
       <div className={styles[`progress-${passwordStatus}`]}>
         <Progress
-          default={passwordProgressMap[passwordStatus]}
           status={passwordProgressMap[passwordStatus]}
           className={styles.progress}
           strokeWidth={6}
@@ -243,9 +245,12 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<
           </FormItem>
           <FormItem help={help}>
             <Popover
-              getPopupContainer={node =>
-                node && node.parentNode ? (node.parentNode as HTMLElement) : node
-              }
+              getPopupContainer={node => {
+                if (node && node.parentNode) {
+                  return node.parentNode as HTMLElement;
+                }
+                return node;
+              }}
               content={
                 <div style={{ padding: '4px 0' }}>
                   {passwordStatusMap[this.getPasswordStatus()]}
diff --git a/UserRegister/src/model.ts b/UserRegister/src/model.ts
index d138c909..99b0380a 100644
--- a/UserRegister/src/model.ts
+++ b/UserRegister/src/model.ts
@@ -1,26 +1,26 @@
-import { fakeRegister } from './service';
-import { Reducer } from 'redux';
+import { AnyAction, Reducer } from 'redux';
+
 import { EffectsCommandMap } from 'dva';
-import { AnyAction } from 'redux';
+import { fakeRegister } from './service';
 
-export interface IStateType {
+export interface StateType {
   status?: 'ok' | 'error';
   currentAuthority?: 'user' | 'guest' | 'admin';
 }
 
 export type Effect = (
   action: AnyAction,
-  effects: EffectsCommandMap & { select: <T>(func: (state: IStateType) => T) => T },
+  effects: EffectsCommandMap & { select: <T>(func: (state: StateType) => T) => T },
 ) => void;
 
 export interface ModelType {
   namespace: string;
-  state: IStateType;
+  state: StateType;
   effects: {
     submit: Effect;
   };
   reducers: {
-    registerHandle: Reducer<IStateType>;
+    registerHandle: Reducer<StateType>;
   };
 }
 
diff --git a/UserRegister/src/service.ts b/UserRegister/src/service.ts
index 0bde8eb0..2f8d0117 100644
--- a/UserRegister/src/service.ts
+++ b/UserRegister/src/service.ts
@@ -1,7 +1,7 @@
 import request from 'umi-request';
-import { IUserRegisterParams } from './index';
+import { UserRegisterParams } from './index';
 
-export async function fakeRegister(params: IUserRegisterParams) {
+export async function fakeRegister(params: UserRegisterParams) {
   return request('/api/register', {
     method: 'POST',
     data: params,
diff --git a/UserRegisterResult/package.json b/UserRegisterResult/package.json
index e77d52de..f34780b8 100644
--- a/UserRegisterResult/package.json
+++ b/UserRegisterResult/package.json
@@ -11,12 +11,16 @@
     "url": "https://github.com/umijs/umi-blocks/ant-design-pro/userregisterresult"
   },
   "dependencies": {
+    "@types/react-router": "^5.0.2",
+    "antd": "^3.16.3",
+    "classnames": "^2.2.6",
     "react": "^16.6.3",
-    "antd": "^3.16.3"
+    "react-router": "^4.3.1",
+    "umi-plugin-react": "^1.7.2"
+
   },
   "devDependencies": {
     "umi": "^2.6.9",
-    "umi-plugin-react": "^1.7.2",
     "umi-plugin-block-dev": "^1.0.0"
   },
   "license": "MIT",
diff --git a/UserRegisterResult/src/Result/index.tsx b/UserRegisterResult/src/Result/index.tsx
index 63ba3ebc..8c8ea1e4 100644
--- a/UserRegisterResult/src/Result/index.tsx
+++ b/UserRegisterResult/src/Result/index.tsx
@@ -1,6 +1,6 @@
+import { Icon } from 'antd';
 import React from 'react';
 import classNames from 'classnames';
-import { Icon } from 'antd';
 import styles from './index.less';
 
 export interface ResultProps {
diff --git a/UserRegisterResult/src/index.tsx b/UserRegisterResult/src/index.tsx
index 1c838192..5843881e 100644
--- a/UserRegisterResult/src/index.tsx
+++ b/UserRegisterResult/src/index.tsx
@@ -1,10 +1,11 @@
-import React from 'react';
-import { formatMessage, FormattedMessage } from 'umi-plugin-react/locale';
+import { FormattedMessage, formatMessage } from 'umi-plugin-react/locale';
+
 import { Button } from 'antd';
 import Link from 'umi/link';
+import React from 'react';
+import { RouteChildrenProps } from 'react-router';
 import Result from './Result';
 import styles from './style.less';
-import { RouteChildrenProps } from 'react-router';
 
 const actions = (
   <div className={styles.actions}>
diff --git a/_scripts/getPrettierFiles.js b/_scripts/getPrettierFiles.js
deleted file mode 100644
index de4cc6ef..00000000
--- a/_scripts/getPrettierFiles.js
+++ /dev/null
@@ -1,23 +0,0 @@
-const glob = require('glob');
-
-const getPrettierFiles = () => {
-  let files = [];
-  const jsFiles = glob.sync('**/*.js*', { ignore: ['**/node_modules/**', 'build/**'] });
-  const tsFiles = glob.sync('**/*.ts*', { ignore: ['**/node_modules/**', 'build/**'] });
-  const configFiles = glob.sync('config/**/*.js*', { ignore: ['**/node_modules/**', 'build/**'] });
-  const scriptFiles = glob.sync('scripts/**/*.js');
-  const lessFiles = glob.sync('**/*.less*', { ignore: ['**/node_modules/**', 'build/**'] });
-  const mdFiles = glob.sync('**/*.md*', { ignore: ['**/node_modules/**', 'build/**'] });
-  files = files.concat(jsFiles);
-  files = files.concat(tsFiles);
-  files = files.concat(configFiles);
-  files = files.concat(scriptFiles);
-  files = files.concat(lessFiles);
-  files = files.concat(mdFiles);
-  if (!files.length) {
-    return;
-  }
-  return files;
-};
-
-module.exports = getPrettierFiles;
diff --git a/_scripts/lint-prettier.js b/_scripts/lint-prettier.js
deleted file mode 100644
index 677f793b..00000000
--- a/_scripts/lint-prettier.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * copy to https://github.com/facebook/react/blob/master/scripts/prettier/index.js
- * prettier api doc https://prettier.io/docs/en/api.html
- *----------*****--------------
- *  lint file is prettier
- *----------*****--------------
- */
-
-const prettier = require('prettier');
-const fs = require('fs');
-const chalk = require('chalk');
-const prettierConfigPath = require.resolve('../.prettierrc');
-
-const files = process.argv.slice(2);
-
-let didError = false;
-
-files.forEach(file => {
-  Promise.all([
-    prettier.resolveConfig(file, {
-      config: prettierConfigPath,
-    }),
-    prettier.getFileInfo(file),
-  ])
-    .then(resolves => {
-      const [options, fileInfo] = resolves;
-      if (fileInfo.ignored) {
-        return;
-      }
-      const input = fs.readFileSync(file, 'utf8');
-      const withParserOptions = {
-        ...options,
-        parser: fileInfo.inferredParser,
-      };
-      const output = prettier.format(input, withParserOptions);
-      if (output !== input) {
-        fs.writeFileSync(file, output, 'utf8');
-        console.log(chalk.green(`${file} is prettier`));
-      }
-    })
-    .catch(e => {
-      didError = true;
-    })
-    .finally(() => {
-      if (didError) {
-        process.exit(1);
-      }
-      console.log(chalk.hex('#1890FF')('prettier success!'));
-    });
-});
diff --git a/_scripts/prettier.js b/_scripts/prettier.js
deleted file mode 100644
index 22a6b2d4..00000000
--- a/_scripts/prettier.js
+++ /dev/null
@@ -1,47 +0,0 @@
-/**
- * copy to https://github.com/facebook/react/blob/master/scripts/prettier/index.js
- * prettier api doc https://prettier.io/docs/en/api.html
- *----------*****--------------
- *  prettier all js and all ts.
- *----------*****--------------
- */
-
-const prettier = require('prettier');
-const fs = require('fs');
-const getPrettierFiles = require('./getPrettierFiles');
-const prettierConfigPath = require.resolve('../.prettierrc');
-const chalk = require('chalk');
-
-let didError = false;
-
-const files = getPrettierFiles();
-
-files.forEach(file => {
-  const options = prettier.resolveConfig.sync(file, {
-    config: prettierConfigPath,
-  });
-  const fileInfo = prettier.getFileInfo.sync(file);
-  if (fileInfo.ignored) {
-    return;
-  }
-  try {
-    const input = fs.readFileSync(file, 'utf8');
-    const withParserOptions = {
-      ...options,
-      parser: fileInfo.inferredParser,
-    };
-    const output = prettier.format(input, withParserOptions);
-    if (output !== input) {
-      fs.writeFileSync(file, output, 'utf8');
-      console.log(chalk.green(`${file} is prettier`));
-    }
-  } catch (e) {
-    console.log(e);
-    didError = true;
-  }
-});
-
-if (didError) {
-  process.exit(1);
-}
-console.log(chalk.hex('#1890FF')('prettier success!'));
diff --git a/_scripts/screenshot.js b/_scripts/screenshot.js
index 1bde009b..7b2941d2 100644
--- a/_scripts/screenshot.js
+++ b/_scripts/screenshot.js
@@ -1,6 +1,4 @@
-/* eslint-disable eslint-comments/disable-enable-pair */
-/* eslint-disable @typescript-eslint/no-var-requires */
-/* eslint-disable eslint-comments/no-unlimited-disable */
+
 const { spawn } = require('child_process');
 const puppeteer = require('puppeteer');
 const { join, dirname } = require('path');
@@ -22,7 +20,7 @@ let browser;
 const startServer = async path => {
   let once = false;
   return new Promise(resolve => {
-    env.PAGES_PATH = path + '/src';
+    env.PAGES_PATH = `${path}/src`;
     console.log(path);
     const startServer = spawn(/^win/.test(process.platform) ? 'npm.cmd' : 'npm', ['run', 'start'], {
       env,
@@ -44,13 +42,11 @@ const startServer = async path => {
   });
 };
 
-const autoScroll = page => {
-  return page.evaluate(() => {
-    return new Promise((resolve, reject) => {
-      var totalHeight = 0;
-      var distance = 100;
+const autoScroll = page => page.evaluate(() => new Promise((resolve, reject) => {
+      let totalHeight = 0;
+      const distance = 100;
       var timer = setInterval(() => {
-        var scrollHeight = document.body.scrollHeight;
+        const { scrollHeight } = document.body;
         window.scrollBy(0, distance);
         totalHeight += distance;
         if (totalHeight >= scrollHeight) {
@@ -58,9 +54,7 @@ const autoScroll = page => {
           resolve();
         }
       }, 100);
-    });
-  });
-};
+    }));
 
 const getImage = async (page, path) => {
   kill(env.PORT || 8000);
@@ -119,14 +113,14 @@ getAllFile().then(async dirList => {
   const page = await openBrowser();
   const loopGetImage = async index => {
     try {
-      console.log('install ' + dirList[index] + ' dependencies');
+      console.log(`install ${dirList[index]} dependencies`);
       await execa('yarn', ['install', `--registry=${registry}`], {
-        cwd: join(__dirname, '../' + dirList[index]),
+        cwd: join(__dirname, `../${dirList[index]}`),
       });
       await getImage(page, dirList[index]);
 
       if (dirList.length > index && dirList[index + 1]) {
-        console.log('Screenshot ' + dirList[index]);
+        console.log(`Screenshot ${dirList[index]}`);
 
         return loopGetImage(index + 1);
       }
diff --git a/package.json b/package.json
index 94eb83c9..48f51cc4 100644
--- a/package.json
+++ b/package.json
@@ -1,17 +1,16 @@
 {
   "private": true,
   "scripts": {
-    "dev": "cross-env PAGES_PATH='ProfileAdvanced/src' umi dev",
+    "dev": "cross-env PAGES_PATH='DashboardMonitor/src' umi dev",
     "start": "umi dev",
-    "lint": "npm run lint:ts && npm run lint:style && npm run lint:prettier",
     "lint-staged": "lint-staged",
-    "lint-staged:ts": "tslint",
-    "lint:fix": "npm run lint:style",
-    "lint:prettier": "check-prettier write",
-    "lint:style": "stylelint --syntax less --fix **/**.less ",
-    "lint:ts": "tslint -p . -c tslint.yml",
-    "prettier": "node ./_scripts/prettier.js",
-    "tslint": "npm run tslint:fix"
+    "lint": "npm run lint:js && npm run lint:style",
+    "lint-staged:js": "eslint --ext .js,.jsx,.ts,.tsx",
+    "lint:fix": "eslint --fix --cache --ext .js,.jsx,.ts,.tsx --format=pretty  ./ && npm run lint:style",
+    "lint:js": "eslint --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./",
+    "lint:style": "stylelint --fix '**/*.less' --syntax less",
+    "prettier": "prettier -c --write **/*",
+    "format-imports": "import-sort --write '**/*.{js,jsx,ts,tsx}'"
   },
   "husky": {
     "hooks": {
@@ -20,11 +19,12 @@
   },
   "lint-staged": {
     "**/*.less": "stylelint --syntax less",
-    "**/*.{js,ts,tsx,json,jsx,less}": [
-      "node ./_scripts/lint-prettier.js",
+    "**/*.{js,jsx,tsx,ts,less,md,json}": [
+      "prettier --write",
       "git add"
     ],
-    "**/*.{ts,tsx}": "npm run lint-staged:ts"
+    "**/*.{js,jsx}": "npm run lint-staged:js",
+    "**/*.{js,ts,tsx}": "npm run lint-staged:js"
   },
   "dependencies": {
     "@types/react-dom": "^16.8.4",
@@ -38,7 +38,6 @@
   "devDependencies": {
     "@types/classnames": "^2.2.7",
     "@types/numeral": "^0.0.25",
-    "babel-eslint": "^10.0.1",
     "check-prettier": "^1.0.3",
     "cross-port-killer": "^1.1.1",
     "execa": "^1.0.0",
@@ -48,21 +47,17 @@
     "lint-staged": "^8.1.0",
     "prettier": "1.15.2",
     "stylelint": "^10.0.1",
-    "stylelint-config-css-modules": "^1.4.0",
-    "stylelint-config-prettier": "^5.1.0",
-    "stylelint-config-rational-order": "^0.1.2",
-    "stylelint-config-standard": "^18.3.0",
-    "stylelint-declaration-block-no-ignored-properties": "^2.1.0",
-    "stylelint-order": "^3.0.0",
-    "tslint": "^5.12.1",
-    "tslint-config-prettier": "^1.17.0",
-    "tslint-eslint-rules": "^5.4.0",
-    "tslint-react": "^3.6.0",
+    "eslint": "^5.16.0",
     "typescript": "^3.5.1",
     "umi": "^2.6.17",
     "umi-plugin-block-dev": "^2.1.11",
     "umi-plugin-react": "^1.7.6",
-    "umi-request": "^1.0.0"
+    "umi-request": "^1.0.0",
+    "@umijs/fabric": "^1.0.5",
+    "import-sort-cli": "^6.0.0",
+    "import-sort-parser-babylon": "^6.0.0",
+    "import-sort-parser-typescript": "^6.0.0",
+    "import-sort-style-module": "^6.0.0"
   },
   "peerDependencies": {
     "antd": "^3.17.0"
@@ -72,4 +67,4 @@
     "**/*.less",
     "**/*.md"
   ]
-}
+}
\ No newline at end of file
diff --git a/tslint.yml b/tslint.yml
deleted file mode 100644
index f47baedf..00000000
--- a/tslint.yml
+++ /dev/null
@@ -1,95 +0,0 @@
-defaultSeverity: error
-extends:
-  - tslint-react
-  - tslint-eslint-rules
-  - tslint-config-prettier
-jsRules:
-rules:
-  class-name: false
-  eofline: true
-  forin: true
-  jsdoc-format: false
-  label-position: true
-  member-ordering:
-    - true
-    - order: statics-first
-  new-parens: true
-  no-arg: true
-  no-bitwise: true
-  no-conditional-assignment: true
-  no-consecutive-blank-lines: true
-  no-console:
-    - true
-    - debug
-    - info
-    - log
-    - time
-    - timeEnd
-    - trace
-    - warn
-  no-construct: true
-  no-debugger: true
-  no-duplicate-variable: true
-  no-eval: true
-  no-internal-module: true
-  no-multi-spaces: true
-  no-namespace: true
-  no-reference: true
-  no-shadowed-variable: true
-  no-string-literal: true
-  no-trailing-whitespace: true
-  no-unused-expression: true
-  no-var-keyword: true
-  one-variable-per-declaration:
-    - true
-    - ignore-for-loop
-  prefer-const:
-    - true
-    - destructuring: all
-  radix: true
-  space-in-parens: true
-  switch-default: true
-  trailing-comma:
-    - true
-    - singleline: never
-      multiline: always
-      esSpecCompliant: true
-  triple-equals:
-    - true
-    - allow-null-check
-  typedef-whitespace:
-    - true
-    - call-signature: nospace
-      index-signature: nospace
-      parameter: nospace
-      property-declaration: nospace
-      variable-declaration: nospace
-    - call-signature: onespace
-      index-signature: onespace
-      parameter: onespace
-      property-declaration: onespace
-      variable-declaration: onespace
-  use-isnan: true
-  variable-name:
-    - true
-    - allow-leading-underscore
-    - ban-keywords
-    - check-format
-    - allow-pascal-case
-  jsx-no-lambda: false
-  jsx-no-string-ref: false
-  jsx-boolean-value:
-    - true
-    - never
-  jsx-no-multiline-js: false
-  whitespace:
-    - true
-    - check-branch
-    - check-decl
-    - check-operator
-    - check-module
-    - check-separator
-    - check-rest-spread
-    - check-type
-    - check-type-operator
-    - check-preblock
diff --git a/typings.d.ts b/typings.d.ts
index 6d2c56e7..062ef32b 100644
--- a/typings.d.ts
+++ b/typings.d.ts
@@ -10,7 +10,7 @@ declare module '*.gif';
 declare module '*.bmp';
 declare module '*.tiff';
 
-declare var APP_TYPE: string;
+declare module 'bizcharts-plugin-slider';
 
 declare module 'react-fittext';
 declare module '@antv/data-set';
-- 
GitLab