diff --git a/config/config.ts b/config/config.ts
index ee8811032ba6accfbaa61bf5d91b59022abaf3c7..d5c90e6aeed832dafaa8c22c4394fc10b3873c42 100644
--- a/config/config.ts
+++ b/config/config.ts
@@ -1,14 +1,10 @@
 import { IConfig, IPlugin } from 'umi-types';
+import defaultSettings from './defaultSettings'; // https://umijs.org/config/
 
-import defaultSettings from './defaultSettings';
-// https://umijs.org/config/
 import os from 'os';
 import slash from 'slash2';
 import webpackPlugin from './plugin.config';
-
-const { pwa, primaryColor } = defaultSettings;
-
-// preview.pro.ant.design only do not use in your production ;
+const { pwa, primaryColor } = defaultSettings; // preview.pro.ant.design only do not use in your production ;
 // preview.pro.ant.design 专用环境变量，请不要在你的项目中使用它。
 
 const { ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION, TEST, NODE_ENV } = process.env;
@@ -104,15 +100,232 @@ export default {
   routes: [
     {
       path: '/',
-      component: '../layouts/BasicLayout',
-      Routes: ['src/pages/Authorized'],
-      authority: ['admin', 'user'],
+      component: '../layouts/BlankLayout',
       routes: [
+        {
+          path: '/user',
+          component: '../layouts/UserLayout',
+          routes: [
+            {
+              path: '/user',
+              redirect: '/user/login',
+            },
+            {
+              name: 'login',
+              path: '/user/login',
+              component: './user/login',
+            },
+            {
+              name: 'register-result',
+              path: '/user/register-result',
+              component: './user/register-result',
+            },
+            {
+              name: 'register',
+              path: '/user/register',
+              component: './user/register',
+            },
+          ],
+        },
         {
           path: '/',
-          name: 'welcome',
-          icon: 'smile',
-          component: './Welcome',
+          component: '../layouts/BasicLayout',
+          Routes: ['src/pages/Authorized'],
+          authority: ['admin', 'user'],
+          routes: [
+            {
+              path: '/dashboard',
+              name: 'dashboard',
+              icon: 'dashboard',
+              routes: [
+                {
+                  name: 'analysis',
+                  path: '/dashboard/analysis',
+                  component: './dashboard/analysis',
+                },
+                {
+                  name: 'monitor',
+                  path: '/dashboard/monitor',
+                  component: './dashboard/monitor',
+                },
+                {
+                  name: 'workplace',
+                  path: '/dashboard/workplace',
+                  component: './dashboard/workplace',
+                },
+              ],
+            },
+            {
+              path: '/form',
+              icon: 'form',
+              name: 'form',
+              routes: [
+                {
+                  name: 'basic-form',
+                  path: '/form/basic-form',
+                  component: './form/basic-form',
+                },
+                {
+                  name: 'step-form',
+                  path: '/form/step-form',
+                  component: './form/step-form',
+                },
+                {
+                  name: 'advanced-form',
+                  path: '/form/advanced-form',
+                  component: './form/advanced-form',
+                },
+              ],
+            },
+            {
+              path: '/list',
+              icon: 'table',
+              name: 'list',
+              routes: [
+                {
+                  path: '/list/search',
+                  name: 'search-list',
+                  component: './list/search',
+                  routes: [
+                    {
+                      path: '/list/search',
+                      redirect: '/list/search/articles',
+                    },
+                    {
+                      name: 'articles',
+                      path: '/list/search/articles',
+                      component: './list/search/articles',
+                    },
+                    {
+                      name: 'projects',
+                      path: '/list/search/projects',
+                      component: './list/search/projects',
+                    },
+                    {
+                      name: 'applications',
+                      path: '/list/search/applications',
+                      component: './list/search/applications',
+                    },
+                  ],
+                },
+                {
+                  name: 'table-list',
+                  path: '/list/table-list',
+                  component: './list/table-list',
+                },
+                {
+                  name: 'basic-list',
+                  path: '/list/basic-list',
+                  component: './list/basic-list',
+                },
+                {
+                  name: 'card-list',
+                  path: '/list/card-list',
+                  component: './list/card-list',
+                },
+              ],
+            },
+            {
+              path: '/profile',
+              name: 'profile',
+              icon: 'profile',
+              routes: [
+                {
+                  name: 'basic',
+                  path: '/profile/basic',
+                  component: './profile/basic',
+                },
+                {
+                  name: 'advanced',
+                  path: '/profile/advanced',
+                  component: './profile/advanced',
+                },
+              ],
+            },
+            {
+              name: 'result',
+              icon: 'check-circle-o',
+              path: '/result',
+              routes: [
+                {
+                  name: 'success',
+                  path: '/result/success',
+                  component: './result/success',
+                },
+                {
+                  name: 'fail',
+                  path: '/result/fail',
+                  component: './result/fail',
+                },
+              ],
+            },
+            {
+              name: 'exception',
+              icon: 'warning',
+              path: '/exception',
+              routes: [
+                {
+                  name: '403',
+                  path: '/exception/403',
+                  component: './exception/403',
+                },
+                {
+                  name: '404',
+                  path: '/exception/404',
+                  component: './exception/404',
+                },
+                {
+                  name: '500',
+                  path: '/exception/500',
+                  component: './exception/500',
+                },
+              ],
+            },
+            {
+              name: 'account',
+              icon: 'user',
+              path: '/account',
+              routes: [
+                {
+                  name: 'center',
+                  path: '/account/center',
+                  component: './account/center',
+                },
+                {
+                  name: 'settings',
+                  path: '/account/settings',
+                  component: './account/settings',
+                },
+              ],
+            },
+            {
+              name: 'editor',
+              icon: 'highlight',
+              path: '/editor',
+              routes: [
+                {
+                  name: 'flow',
+                  path: '/editor/flow',
+                  component: './editor/flow',
+                },
+                {
+                  name: 'mind',
+                  path: '/editor/mind',
+                  component: './editor/mind',
+                },
+                {
+                  name: 'koni',
+                  path: '/editor/koni',
+                  component: './editor/koni',
+                },
+              ],
+            },
+            {
+              path: '/',
+              redirect: '/dashboard/analysis',
+              authority: ['admin', 'user'],
+            },
+          ],
         },
       ],
     },
@@ -141,7 +354,7 @@ export default {
         resourcePath: string;
       },
       localIdentName: string,
-      localName: string,
+      localName: string
     ) => {
       if (
         context.resourcePath.includes('node_modules') ||
diff --git a/package.json b/package.json
index 7cd6eba6280251bcd3cb830fd0072ce5f6207e76..870182a30155907c12bb012f50f9b85281b2fd3a 100644
--- a/package.json
+++ b/package.json
@@ -34,7 +34,6 @@
   },
   "husky": {
     "hooks": {
-      "pre-commit": "npm run lint-staged"
     }
   },
   "lint-staged": {
@@ -54,13 +53,22 @@
   "dependencies": {
     "@ant-design/pro-layout": "^4.5.0",
     "@antv/data-set": "^0.10.2",
+    "@types/lodash.debounce": "^4.0.6",
+    "@types/react-router": "^5.0.2",
     "antd": "^3.19.1",
+    "bizcharts": "^3.5.3-beta.0",
+    "bizcharts-plugin-slider": "^2.1.1-beta.1",
     "classnames": "^2.2.6",
     "dva": "^2.4.1",
+    "gg-editor": "^2.0.2",
+    "hash.js": "^1.1.5",
     "lodash": "^4.17.11",
     "lodash-decorators": "^6.0.1",
+    "lodash.debounce": "^4.0.8",
     "memoize-one": "^5.0.4",
     "moment": "^2.24.0",
+    "numeral": "^2.0.6",
+    "nzh": "^1.0.3",
     "omit.js": "^1.0.2",
     "path-to-regexp": "^3.0.0",
     "prop-types": "^15.7.2",
@@ -71,10 +79,13 @@
     "react-copy-to-clipboard": "^5.0.1",
     "react-document-title": "^2.0.3",
     "react-dom": "^16.8.6",
+    "react-fittext": "^1.0.0",
     "react-media": "^1.9.2",
     "react-media-hook2": "^1.0.5",
+    "react-router": "^4.3.1",
     "redux": "^4.0.1",
     "umi": "^2.7.2",
+    "umi-plugin-block-dev": "^1.0.0",
     "umi-plugin-ga": "^1.1.3",
     "umi-plugin-pro-block": "^1.3.2",
     "umi-plugin-react": "^1.8.2",
@@ -85,11 +96,12 @@
     "@types/classnames": "^2.2.7",
     "@types/history": "^4.7.2",
     "@types/jest": "^24.0.13",
-    "@types/lodash": "^4.14.133",
+    "@types/lodash": "^4.14.134",
     "@types/qs": "^6.5.3",
     "@types/react": "^16.8.19",
     "@types/react-document-title": "^2.0.3",
     "@types/react-dom": "^16.8.4",
+    "@types/numeral":"^0.0.25",
     "@umijs/fabric": "^1.0.4",
     "babel-eslint": "^10.0.1",
     "chalk": "^2.4.2",
@@ -158,4 +170,4 @@
       "create-umi"
     ]
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/GlobalHeader/RightContent.tsx b/src/components/GlobalHeader/RightContent.tsx
index 9200785daf02123b233d95550d9e224b0a83b4c4..6fc42e819630e8976c747c122d56214474b7da0b 100644
--- a/src/components/GlobalHeader/RightContent.tsx
+++ b/src/components/GlobalHeader/RightContent.tsx
@@ -1,6 +1,5 @@
 import { ConnectProps, ConnectState } from '@/models/connect';
 import { Icon, Tooltip } from 'antd';
-
 import Avatar from './AvatarDropdown';
 import HeaderSearch from '../HeaderSearch';
 import React from 'react';
@@ -8,6 +7,7 @@ import SelectLang from '../SelectLang';
 import { connect } from 'dva';
 import { formatMessage } from 'umi-plugin-react/locale';
 import styles from './index.less';
+import NoticeIconView from './NoticeIconView';
 
 export type SiderTheme = 'light' | 'dark';
 export interface GlobalHeaderRightProps extends ConnectProps {
@@ -62,7 +62,8 @@ const GlobalHeaderRight: React.SFC<GlobalHeaderRightProps> = props => {
           <Icon type="question-circle-o" />
         </a>
       </Tooltip>
-      <Avatar />
+      <NoticeIconView />
+      <Avatar menu />
       <SelectLang className={styles.action} />
     </div>
   );
diff --git a/src/layouts/BasicLayout.tsx b/src/layouts/BasicLayout.tsx
index 2ac74fcc4e5b67890884e13e0357ca2480fd2c37..c5e634f2e17e94252b05394eb9a91a94a65abd18 100644
--- a/src/layouts/BasicLayout.tsx
+++ b/src/layouts/BasicLayout.tsx
@@ -3,15 +3,14 @@
  * You can view component api by:
  * https://github.com/ant-design/ant-design-pro-layout
  */
-
 import { ConnectProps, ConnectState } from '@/models/connect';
 import ProLayout, {
   MenuDataItem,
   BasicLayoutProps as ProLayoutProps,
   Settings,
+  SettingDrawer,
 } from '@ant-design/pro-layout';
 import React, { useState } from 'react';
-
 import Authorized from '@/utils/Authorized';
 import Link from 'umi/link';
 import RightContent from '@/components/GlobalHeader/RightContent';
@@ -31,16 +30,13 @@ export type BasicLayoutContext = { [K in 'location']: BasicLayoutProps[K] } & {
     [path: string]: MenuDataItem;
   };
 };
-
 /**
  * use Authorized check all menu item
  */
+
 const menuDataRender = (menuList: MenuDataItem[]): MenuDataItem[] =>
   menuList.map(item => {
-    const localItem = {
-      ...item,
-      children: item.children ? menuDataRender(item.children) : [],
-    };
+    const localItem = { ...item, children: item.children ? menuDataRender(item.children) : [] };
     return Authorized.check(item.authority, localItem, null) as MenuDataItem;
   });
 
@@ -48,6 +44,7 @@ const footerRender: BasicLayoutProps['footerRender'] = (_, defaultDom) => {
   if (!isAntDesignPro()) {
     return defaultDom;
   }
+
   return (
     <>
       {defaultDom}
@@ -85,10 +82,10 @@ const BasicLayout: React.FC<BasicLayoutProps> = props => {
       });
     }
   });
-
   /**
    * init variables
    */
+
   const handleMenuCollapse = (payload: boolean): void =>
     dispatch &&
     dispatch({
@@ -97,31 +94,42 @@ const BasicLayout: React.FC<BasicLayoutProps> = props => {
     });
 
   return (
-    <ProLayout
-      logo={logo}
-      onCollapse={handleMenuCollapse}
-      menuItemRender={(menuItemProps, defaultDom) => (
-        <Link to={menuItemProps.path}>{defaultDom}</Link>
-      )}
-      breadcrumbRender={(routers = []) => [
-        {
-          path: '/',
-          breadcrumbName: formatMessage({
-            id: 'menu.home',
-            defaultMessage: 'Home',
-          }),
-        },
-        ...routers,
-      ]}
-      footerRender={footerRender}
-      menuDataRender={menuDataRender}
-      formatMessage={formatMessage}
-      rightContentRender={rightProps => <RightContent {...rightProps} />}
-      {...props}
-      {...settings}
-    >
-      {children}
-    </ProLayout>
+    <>
+      <ProLayout
+        logo={logo}
+        onCollapse={handleMenuCollapse}
+        menuItemRender={(menuItemProps, defaultDom) => (
+          <Link to={menuItemProps.path}>{defaultDom}</Link>
+        )}
+        breadcrumbRender={(routers = []) => [
+          {
+            path: '/',
+            breadcrumbName: formatMessage({
+              id: 'menu.home',
+              defaultMessage: 'Home',
+            }),
+          },
+          ...routers,
+        ]}
+        footerRender={footerRender}
+        menuDataRender={menuDataRender}
+        formatMessage={formatMessage}
+        rightContentRender={rightProps => <RightContent {...rightProps} />}
+        {...props}
+        {...settings}
+      >
+        {children}
+      </ProLayout>
+      <SettingDrawer
+        settings={settings}
+        onSettingChange={config =>
+          dispatch({
+            type: 'settings/changeSetting',
+            payload: config,
+          })
+        }
+      />
+    </>
   );
 };
 
diff --git a/src/layouts/BlankLayout.tsx b/src/layouts/BlankLayout.tsx
index a5ff8c4cfa1909981083292a26ae7966f23d825e..35f28e8dfd43a2000d7b28df14626205b76d72a6 100644
--- a/src/layouts/BlankLayout.tsx
+++ b/src/layouts/BlankLayout.tsx
@@ -1,5 +1,11 @@
 import React from 'react';
+import CopyBlock from '@/components/CopyBlock';
 
-const Layout: React.FC = ({ children }) => <div>{children}</div>;
+const Layout: React.FC = ({ children }) => (
+  <>
+    <div>{children}</div>
+    <CopyBlock id={Date.now()} />
+  </>
+);
 
 export default Layout;
diff --git a/src/pages/account/center/Center.less b/src/pages/account/center/Center.less
new file mode 100644
index 0000000000000000000000000000000000000000..7f65fb761164fc3a498c558c0c749878ebdec43c
--- /dev/null
+++ b/src/pages/account/center/Center.less
@@ -0,0 +1,99 @@
+@import '~antd/es/style/themes/default.less';
+
+.avatarHolder {
+  margin-bottom: 24px;
+  text-align: center;
+
+  & > img {
+    width: 104px;
+    height: 104px;
+    margin-bottom: 20px;
+  }
+
+  .name {
+    margin-bottom: 4px;
+    color: @heading-color;
+    font-weight: 500;
+    font-size: 20px;
+    line-height: 28px;
+  }
+}
+
+.detail {
+  p {
+    position: relative;
+    margin-bottom: 8px;
+    padding-left: 26px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  i {
+    position: absolute;
+    top: 4px;
+    left: 0;
+    width: 14px;
+    height: 14px;
+    background: url(https://gw.alipayobjects.com/zos/rmsportal/pBjWzVAHnOOtAUvZmZfy.svg);
+
+    &.title {
+      background-position: 0 0;
+    }
+
+    &.group {
+      background-position: 0 -22px;
+    }
+
+    &.address {
+      background-position: 0 -44px;
+    }
+  }
+}
+
+.tagsTitle,
+.teamTitle {
+  margin-bottom: 12px;
+  color: @heading-color;
+  font-weight: 500;
+}
+
+.tags {
+  :global {
+    .ant-tag {
+      margin-bottom: 8px;
+    }
+  }
+}
+
+.team {
+  :global {
+    .ant-avatar {
+      margin-right: 12px;
+    }
+  }
+
+  a {
+    display: block;
+    margin-bottom: 24px;
+    overflow: hidden;
+    color: @text-color;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    word-break: break-all;
+    transition: color 0.3s;
+
+    &:hover {
+      color: @primary-color;
+    }
+  }
+}
+
+.tabsCard {
+  :global {
+    .ant-card-head {
+      padding: 0 16px;
+    }
+  }
+}
diff --git a/src/pages/account/center/_mock.ts b/src/pages/account/center/_mock.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ea19d21f6c15b6468cf612e1c861197437ed4da6
--- /dev/null
+++ b/src/pages/account/center/_mock.ts
@@ -0,0 +1,227 @@
+import { ListItemDataType } from './data.d';
+
+const titles = [
+  'Alipay',
+  'Angular',
+  'Ant Design',
+  'Ant Design Pro',
+  'Bootstrap',
+  'React',
+  'Vue',
+  'Webpack',
+];
+const avatars = [
+  'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png', // Alipay
+  'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png', // Angular
+  'https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png', // Ant Design
+  'https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png', // Ant Design Pro
+  'https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png', // Bootstrap
+  'https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png', // React
+  'https://gw.alipayobjects.com/zos/rmsportal/ComBAopevLwENQdKWiIn.png', // Vue
+  'https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlMTCEe.png', // Webpack
+];
+
+const covers = [
+  'https://gw.alipayobjects.com/zos/rmsportal/uMfMFlvUuceEyPpotzlq.png',
+  'https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png',
+  'https://gw.alipayobjects.com/zos/rmsportal/iXjVmWVHbCJAyqvDxdtx.png',
+  'https://gw.alipayobjects.com/zos/rmsportal/gLaIAoVWTtLbBWZNYEMg.png',
+];
+const desc = [
+  '那是一种内在的东西， 他们到达不了，也无法触及的',
+  '希望是一个好东西，也许是最好的，好东西是不会消亡的',
+  '生命就像一盒巧克力，结果往往出人意料',
+  '城镇中有那么多的酒馆，她却偏偏走进了我的酒馆',
+  '那时候我只会想自己想要什么，从不想自己拥有什么',
+];
+
+const user = [
+  '付小小',
+  '曲丽丽',
+  '林东东',
+  '周星星',
+  '吴加好',
+  '朱偏右',
+  '鱼酱',
+  '乐哥',
+  '谭小仪',
+  '仲尼',
+];
+
+function fakeList(count: number): ListItemDataType[] {
+  const list = [];
+  for (let i = 0; i < count; i += 1) {
+    list.push({
+      id: `fake-list-${i}`,
+      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)],
+      status: ['active', 'exception', 'normal'][i % 3] as
+        | 'normal'
+        | 'exception'
+        | 'active'
+        | 'success',
+      percent: Math.ceil(Math.random() * 50) + 50,
+      logo: avatars[i % 8],
+      href: 'https://ant.design',
+      updatedAt: new Date(new Date().getTime() - 1000 * 60 * 60 * 2 * i).getTime(),
+      createdAt: new Date(new Date().getTime() - 1000 * 60 * 60 * 2 * i).getTime(),
+      subDescription: desc[i % 5],
+      description:
+        '在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的组件会被抽离成一套标准规范。',
+      activeUser: Math.ceil(Math.random() * 100000) + 100000,
+      newUser: Math.ceil(Math.random() * 1000) + 1000,
+      star: Math.ceil(Math.random() * 100) + 100,
+      like: Math.ceil(Math.random() * 100) + 100,
+      message: Math.ceil(Math.random() * 10) + 10,
+      content:
+        '段落示意：蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。',
+      members: [
+        {
+          avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png',
+          name: '曲丽丽',
+          id: 'member1',
+        },
+        {
+          avatar: 'https://gw.alipayobjects.com/zos/rmsportal/tBOxZPlITHqwlGjsJWaF.png',
+          name: '王昭君',
+          id: 'member2',
+        },
+        {
+          avatar: 'https://gw.alipayobjects.com/zos/rmsportal/sBxjgqiuHMGRkIjqlQCd.png',
+          name: '董娜娜',
+          id: 'member3',
+        },
+      ],
+    });
+  }
+
+  return list;
+}
+
+function getFakeList(req: { query: any }, res: { json: (arg0: ListItemDataType[]) => void }) {
+  const params = req.query;
+
+  const count = params.count * 1 || 5;
+
+  const result = fakeList(count);
+  return res.json(result);
+}
+
+export default {
+  'GET  /api/fake_list': getFakeList,
+  // 支持值为 Object 和 Array
+  'GET  /api/currentUser': {
+    name: 'Serati Ma',
+    avatar: 'https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png',
+    userid: '00000001',
+    email: 'antdesign@alipay.com',
+    signature: '海纳百川，有容乃大',
+    title: '交互专家',
+    group: '蚂蚁金服－某某某事业群－某某平台部－某某技术部－UED',
+    tags: [
+      {
+        key: '0',
+        label: '很有想法的',
+      },
+      {
+        key: '1',
+        label: '专注设计',
+      },
+      {
+        key: '2',
+        label: '辣~',
+      },
+      {
+        key: '3',
+        label: '大长腿',
+      },
+      {
+        key: '4',
+        label: '川妹子',
+      },
+      {
+        key: '5',
+        label: '海纳百川',
+      },
+    ],
+    notice: [
+      {
+        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: '',
+      },
+    ],
+    notifyCount: 12,
+    unreadCount: 11,
+    country: 'China',
+    geographic: {
+      province: {
+        label: '浙江省',
+        key: '330000',
+      },
+      city: {
+        label: '杭州市',
+        key: '330100',
+      },
+    },
+    address: '西湖区工专路 77 号',
+    phone: '0752-268888888',
+  },
+};
diff --git a/src/pages/account/center/components/Applications/index.less b/src/pages/account/center/components/Applications/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..c550b333da1612abb92f9bb2527afce9dcc3f1c2
--- /dev/null
+++ b/src/pages/account/center/components/Applications/index.less
@@ -0,0 +1,51 @@
+@import '~antd/es/style/themes/default.less';
+
+.filterCardList {
+  margin-bottom: -24px;
+  :global {
+    .ant-card-meta-content {
+      margin-top: 0;
+    }
+    // disabled white space
+    .ant-card-meta-avatar {
+      font-size: 0;
+    }
+
+    .ant-list .ant-list-item-content-single {
+      max-width: 100%;
+    }
+  }
+  .cardInfo {
+    margin-top: 16px;
+    margin-left: 40px;
+    zoom: 1;
+    &::before,
+    &::after {
+      display: table;
+      content: ' ';
+    }
+    &::after {
+      clear: both;
+      height: 0;
+      font-size: 0;
+      visibility: hidden;
+    }
+    & > div {
+      position: relative;
+      float: left;
+      width: 50%;
+      text-align: left;
+      p {
+        margin: 0;
+        font-size: 24px;
+        line-height: 32px;
+      }
+      p:first-child {
+        margin-bottom: 4px;
+        color: @text-color-secondary;
+        font-size: 12px;
+        line-height: 20px;
+      }
+    }
+  }
+}
diff --git a/src/pages/account/center/components/Applications/index.tsx b/src/pages/account/center/components/Applications/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..fda73be7801c54846e47f8c3fcd3561b47b1beb3
--- /dev/null
+++ b/src/pages/account/center/components/Applications/index.tsx
@@ -0,0 +1,116 @@
+import { Avatar, Card, Dropdown, Icon, List, Menu, Tooltip } from 'antd';
+import React, { Component } from 'react';
+
+import { connect } from 'dva';
+import numeral from 'numeral';
+import { ModalState } from '../../model';
+import stylesApplications from './index.less';
+
+export function formatWan(val: number) {
+  const v = val * 1;
+  if (!v || Number.isNaN(v)) return '';
+
+  let result: React.ReactNode = val;
+  if (val > 10000) {
+    result = (
+      <span>
+        {Math.floor(val / 10000)}
+        <span
+          style={{
+            position: 'relative',
+            top: -2,
+            fontSize: 14,
+            fontStyle: 'normal',
+            marginLeft: 2,
+          }}
+        >
+          万
+        </span>
+      </span>
+    );
+  }
+  return result;
+}
+
+@connect(({ accountCenter }: { accountCenter: ModalState }) => ({
+  list: accountCenter.list,
+}))
+class Applications extends Component<Partial<ModalState>> {
+  render() {
+    const { list } = this.props;
+    const itemMenu = (
+      <Menu>
+        <Menu.Item>
+          <a target="_blank" rel="noopener noreferrer" href="https://www.alipay.com/">
+            1st menu item
+          </a>
+        </Menu.Item>
+        <Menu.Item>
+          <a target="_blank" rel="noopener noreferrer" href="https://www.taobao.com/">
+            2nd menu item
+          </a>
+        </Menu.Item>
+        <Menu.Item>
+          <a target="_blank" rel="noopener noreferrer" href="https://www.tmall.com/">
+            3d menu item
+          </a>
+        </Menu.Item>
+      </Menu>
+    );
+    const CardInfo: React.SFC<{
+      activeUser: React.ReactNode;
+      newUser: React.ReactNode;
+    }> = ({ activeUser, newUser }) => (
+      <div className={stylesApplications.cardInfo}>
+        <div>
+          <p>活跃用户</p>
+          <p>{activeUser}</p>
+        </div>
+        <div>
+          <p>新增用户</p>
+          <p>{newUser}</p>
+        </div>
+      </div>
+    );
+    return (
+      <List
+        rowKey="id"
+        className={stylesApplications.filterCardList}
+        grid={{ gutter: 24, xxl: 3, xl: 2, lg: 2, md: 2, sm: 2, xs: 1 }}
+        dataSource={list}
+        renderItem={item => (
+          <List.Item key={item.id}>
+            <Card
+              hoverable
+              bodyStyle={{ paddingBottom: 20 }}
+              actions={[
+                <Tooltip key="download" title="下载">
+                  <Icon type="download" />
+                </Tooltip>,
+                <Tooltip title="编辑" key="edit">
+                  <Icon type="edit" />
+                </Tooltip>,
+                <Tooltip title="分享" key="share">
+                  <Icon type="share-alt" />
+                </Tooltip>,
+                <Dropdown overlay={itemMenu} key="ellipsis">
+                  <Icon type="ellipsis" />
+                </Dropdown>,
+              ]}
+            >
+              <Card.Meta avatar={<Avatar size="small" src={item.avatar} />} title={item.title} />
+              <div className={stylesApplications.cardItemContent}>
+                <CardInfo
+                  activeUser={formatWan(item.activeUser)}
+                  newUser={numeral(item.newUser).format('0,0')}
+                />
+              </div>
+            </Card>
+          </List.Item>
+        )}
+      />
+    );
+  }
+}
+
+export default Applications;
diff --git a/src/pages/account/center/components/ArticleListContent/index.less b/src/pages/account/center/components/ArticleListContent/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..eca0811cd021d24a8127cb0b1bb91fd748c2a5ab
--- /dev/null
+++ b/src/pages/account/center/components/ArticleListContent/index.less
@@ -0,0 +1,38 @@
+@import '~antd/es/style/themes/default.less';
+
+.listContent {
+  .description {
+    max-width: 720px;
+    line-height: 22px;
+  }
+  .extra {
+    margin-top: 16px;
+    color: @text-color-secondary;
+    line-height: 22px;
+    & > :global(.ant-avatar) {
+      position: relative;
+      top: 1px;
+      width: 20px;
+      height: 20px;
+      margin-right: 8px;
+      vertical-align: top;
+    }
+    & > em {
+      margin-left: 16px;
+      color: @disabled-color;
+      font-style: normal;
+    }
+  }
+}
+
+@media screen and (max-width: @screen-xs) {
+  .listContent {
+    .extra {
+      & > em {
+        display: block;
+        margin-top: 8px;
+        margin-left: 0;
+      }
+    }
+  }
+}
diff --git a/src/pages/account/center/components/ArticleListContent/index.tsx b/src/pages/account/center/components/ArticleListContent/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..74c8b2f0d849c05900aedecbaeb451d0b2ff6a99
--- /dev/null
+++ b/src/pages/account/center/components/ArticleListContent/index.tsx
@@ -0,0 +1,28 @@
+import { Avatar } from 'antd';
+import React from 'react';
+import moment from 'moment';
+import styles from './index.less';
+
+export interface ApplicationsProps {
+  data: {
+    content?: string;
+    updatedAt?: any;
+    avatar?: string;
+    owner?: string;
+    href?: string;
+  };
+}
+const ArticleListContent: React.SFC<ApplicationsProps> = ({
+  data: { content, updatedAt, avatar, owner, href },
+}) => (
+  <div className={styles.listContent}>
+    <div className={styles.description}>{content}</div>
+    <div className={styles.extra}>
+      <Avatar src={avatar} size="small" />
+      <a href={href}>{owner}</a> 发布在 <a href={href}>{href}</a>
+      <em>{moment(updatedAt).format('YYYY-MM-DD HH:mm')}</em>
+    </div>
+  </div>
+);
+
+export default ArticleListContent;
diff --git a/src/pages/account/center/components/Articles/index.less b/src/pages/account/center/components/Articles/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..e78c412cf00649b2679d8f67491f7992a021ddc7
--- /dev/null
+++ b/src/pages/account/center/components/Articles/index.less
@@ -0,0 +1,12 @@
+@import '~antd/es/style/themes/default.less';
+
+.articleList {
+  :global {
+    .ant-list-item:first-child {
+      padding-top: 0;
+    }
+  }
+}
+a.listItemMetaTitle {
+  color: @heading-color;
+}
diff --git a/src/pages/account/center/components/Articles/index.tsx b/src/pages/account/center/components/Articles/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..bdd53176d00689f5f8815c7ce24a6fc011d583e5
--- /dev/null
+++ b/src/pages/account/center/components/Articles/index.tsx
@@ -0,0 +1,63 @@
+import { Icon, List, Tag } from 'antd';
+import React, { Component } from 'react';
+
+import { connect } from 'dva';
+import ArticleListContent from '../ArticleListContent';
+import { ListItemDataType } from '../../data.d';
+import { ModalState } from '../../model';
+import styles from './index.less';
+
+@connect(({ accountCenter }: { accountCenter: ModalState }) => ({
+  list: accountCenter.list,
+}))
+class Articles extends Component<Partial<ModalState>> {
+  render() {
+    const { list } = this.props;
+    const IconText: React.SFC<{
+      type: string;
+      text: React.ReactNode;
+    }> = ({ type, text }) => (
+      <span>
+        <Icon type={type} style={{ marginRight: 8 }} />
+        {text}
+      </span>
+    );
+    return (
+      <List<ListItemDataType>
+        size="large"
+        className={styles.articleList}
+        rowKey="id"
+        itemLayout="vertical"
+        dataSource={list}
+        renderItem={item => (
+          <List.Item
+            key={item.id}
+            actions={[
+              <IconText key="star" type="star-o" text={item.star} />,
+              <IconText key="like" type="like-o" text={item.like} />,
+              <IconText key="message" type="message" text={item.message} />,
+            ]}
+          >
+            <List.Item.Meta
+              title={
+                <a className={styles.listItemMetaTitle} href={item.href}>
+                  {item.title}
+                </a>
+              }
+              description={
+                <span>
+                  <Tag>Ant Design</Tag>
+                  <Tag>设计语言</Tag>
+                  <Tag>蚂蚁金服</Tag>
+                </span>
+              }
+            />
+            <ArticleListContent data={item} />
+          </List.Item>
+        )}
+      />
+    );
+  }
+}
+
+export default Articles;
diff --git a/src/pages/account/center/components/AvatarList/index.less b/src/pages/account/center/components/AvatarList/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..8c342fd17d509e1128061e5cf3ebbbd162f843f3
--- /dev/null
+++ b/src/pages/account/center/components/AvatarList/index.less
@@ -0,0 +1,50 @@
+@import '~antd/es/style/themes/default.less';
+
+.avatarList {
+  display: inline-block;
+  ul {
+    display: inline-block;
+    margin-left: 8px;
+    font-size: 0;
+  }
+}
+
+.avatarItem {
+  display: inline-block;
+  width: @avatar-size-base;
+  height: @avatar-size-base;
+  margin-left: -8px;
+  font-size: @font-size-base;
+  :global {
+    .ant-avatar {
+      border: 1px solid #fff;
+    }
+  }
+}
+
+.avatarItemLarge {
+  width: @avatar-size-lg;
+  height: @avatar-size-lg;
+}
+
+.avatarItemSmall {
+  width: @avatar-size-sm;
+  height: @avatar-size-sm;
+}
+
+.avatarItemMini {
+  width: 20px;
+  height: 20px;
+  :global {
+    .ant-avatar {
+      width: 20px;
+      height: 20px;
+      line-height: 20px;
+
+      .ant-avatar-string {
+        font-size: 12px;
+        line-height: 18px;
+      }
+    }
+  }
+}
diff --git a/src/pages/account/center/components/AvatarList/index.tsx b/src/pages/account/center/components/AvatarList/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..650df830d9ca2720554e49639b5916febd5dbc5c
--- /dev/null
+++ b/src/pages/account/center/components/AvatarList/index.tsx
@@ -0,0 +1,84 @@
+import { Avatar, Tooltip } from 'antd';
+
+import React from 'react';
+import classNames from 'classnames';
+import styles from './index.less';
+
+export declare type SizeType = number | 'small' | 'default' | 'large';
+
+export interface AvatarItemProps {
+  tips: React.ReactNode;
+  src: string;
+  size?: SizeType;
+  style?: React.CSSProperties;
+  onClick?: () => void;
+}
+
+export interface AvatarListProps {
+  Item?: React.ReactElement<AvatarItemProps>;
+  size?: SizeType;
+  maxLength?: number;
+  excessItemsStyle?: React.CSSProperties;
+  style?: React.CSSProperties;
+  children: React.ReactElement<AvatarItemProps> | React.ReactElement<AvatarItemProps>[];
+}
+
+const avatarSizeToClassName = (size?: SizeType | 'mini') =>
+  classNames(styles.avatarItem, {
+    [styles.avatarItemLarge]: size === 'large',
+    [styles.avatarItemSmall]: size === 'small',
+    [styles.avatarItemMini]: size === 'mini',
+  });
+
+const Item: React.SFC<AvatarItemProps> = ({ src, size, tips, onClick = () => {} }) => {
+  const cls = avatarSizeToClassName(size);
+
+  return (
+    <li className={cls} onClick={onClick}>
+      {tips ? (
+        <Tooltip title={tips}>
+          <Avatar src={src} size={size} style={{ cursor: 'pointer' }} />
+        </Tooltip>
+      ) : (
+        <Avatar src={src} size={size} />
+      )}
+    </li>
+  );
+};
+
+const AvatarList: React.SFC<AvatarListProps> & { Item: typeof Item } = ({
+  children,
+  size,
+  maxLength = 5,
+  excessItemsStyle,
+  ...other
+}) => {
+  const numOfChildren = React.Children.count(children);
+  const numToShow = maxLength >= numOfChildren ? numOfChildren : maxLength;
+  const childrenArray = React.Children.toArray(children) as React.ReactElement<AvatarItemProps>[];
+  const childrenWithProps = childrenArray.slice(0, numToShow).map(child =>
+    React.cloneElement(child, {
+      size,
+    }),
+  );
+
+  if (numToShow < numOfChildren) {
+    const cls = avatarSizeToClassName(size);
+
+    childrenWithProps.push(
+      <li key="exceed" className={cls}>
+        <Avatar size={size} style={excessItemsStyle}>{`+${numOfChildren - maxLength}`}</Avatar>
+      </li>,
+    );
+  }
+
+  return (
+    <div {...other} className={styles.avatarList}>
+      <ul> {childrenWithProps} </ul>
+    </div>
+  );
+};
+
+AvatarList.Item = Item;
+
+export default AvatarList;
diff --git a/src/pages/account/center/components/Projects/index.less b/src/pages/account/center/components/Projects/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..ab2fcfc7aee820947f731e84716af459936a9dbb
--- /dev/null
+++ b/src/pages/account/center/components/Projects/index.less
@@ -0,0 +1,56 @@
+@import '~antd/es/style/themes/default.less';
+
+.coverCardList {
+  margin-bottom: -24px;
+
+  .card {
+    :global {
+      .ant-card-meta-title {
+        margin-bottom: 4px;
+        & > a {
+          display: inline-block;
+          max-width: 100%;
+          color: @heading-color;
+        }
+      }
+      .ant-card-meta-description {
+        height: 44px;
+        overflow: hidden;
+        line-height: 22px;
+      }
+    }
+
+    &:hover {
+      :global {
+        .ant-card-meta-title > a {
+          color: @primary-color;
+        }
+      }
+    }
+  }
+
+  .cardItemContent {
+    display: flex;
+    height: 20px;
+    margin-top: 16px;
+    margin-bottom: -4px;
+    line-height: 20px;
+    & > span {
+      flex: 1;
+      color: @text-color-secondary;
+      font-size: 12px;
+    }
+    .avatarList {
+      flex: 0 1 auto;
+    }
+  }
+  .cardList {
+    margin-top: 24px;
+  }
+
+  :global {
+    .ant-list .ant-list-item-content-single {
+      max-width: 100%;
+    }
+  }
+}
diff --git a/src/pages/account/center/components/Projects/index.tsx b/src/pages/account/center/components/Projects/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..0c88b78276eedaca20252a35f99c57a2c09861e7
--- /dev/null
+++ b/src/pages/account/center/components/Projects/index.tsx
@@ -0,0 +1,53 @@
+import { Card, List } from 'antd';
+import React, { Component } from 'react';
+
+import { connect } from 'dva';
+import moment from 'moment';
+import AvatarList from '../AvatarList';
+import { ListItemDataType } from '../../data.d';
+import { ModalState } from '../../model';
+import styles from './index.less';
+
+@connect(({ accountCenter }: { accountCenter: ModalState }) => ({
+  list: accountCenter.list,
+}))
+class Projects extends Component<Partial<ModalState>> {
+  render() {
+    const { list } = this.props;
+    return (
+      <List<ListItemDataType>
+        className={styles.coverCardList}
+        rowKey="id"
+        grid={{ gutter: 24, xxl: 3, xl: 2, lg: 2, md: 2, sm: 2, xs: 1 }}
+        dataSource={list}
+        renderItem={item => (
+          <List.Item>
+            <Card
+              className={styles.card}
+              hoverable
+              cover={<img alt={item.title} src={item.cover} />}
+            >
+              <Card.Meta title={<a>{item.title}</a>} description={item.subDescription} />
+              <div className={styles.cardItemContent}>
+                <span>{moment(item.updatedAt).fromNow()}</span>
+                <div className={styles.avatarList}>
+                  <AvatarList size="small">
+                    {item.members.map(member => (
+                      <AvatarList.Item
+                        key={`${item.id}-avatar-${member.id}`}
+                        src={member.avatar}
+                        tips={member.name}
+                      />
+                    ))}
+                  </AvatarList>
+                </div>
+              </div>
+            </Card>
+          </List.Item>
+        )}
+      />
+    );
+  }
+}
+
+export default Projects;
diff --git a/src/pages/account/center/data.d.ts b/src/pages/account/center/data.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0b604c402cafcb224ebb6295b4b465468810ca01
--- /dev/null
+++ b/src/pages/account/center/data.d.ts
@@ -0,0 +1,78 @@
+export interface TagType {
+  key: string;
+  label: string;
+}
+
+export interface ProvinceType {
+  label: string;
+  key: string;
+}
+
+export interface CityType {
+  label: string;
+  key: string;
+}
+
+export interface GeographicType {
+  province: ProvinceType;
+  city: CityType;
+}
+
+export interface NoticeType {
+  id: string;
+  title: string;
+  logo: string;
+  description: string;
+  updatedAt: string;
+  member: string;
+  href: string;
+  memberLink: string;
+}
+
+export interface CurrentUser {
+  name: string;
+  avatar: string;
+  userid: string;
+  notice: NoticeType[];
+  email: string;
+  signature: string;
+  title: string;
+  group: string;
+  tags: TagType[];
+  notifyCount: number;
+  unreadCount: number;
+  country: string;
+  geographic: GeographicType;
+  address: string;
+  phone: string;
+}
+
+export interface Member {
+  avatar: string;
+  name: string;
+  id: string;
+}
+
+export interface ListItemDataType {
+  id: string;
+  owner: string;
+  title: string;
+  avatar: string;
+  cover: string;
+  status: 'normal' | 'exception' | 'active' | 'success';
+  percent: number;
+  logo: string;
+  href: string;
+  body?: any;
+  updatedAt: number;
+  createdAt: number;
+  subDescription: string;
+  description: string;
+  activeUser: number;
+  newUser: number;
+  star: number;
+  like: number;
+  message: number;
+  content: string;
+  members: Member[];
+}
diff --git a/src/pages/account/center/index.tsx b/src/pages/account/center/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..f457223c9ecc87661b003a43c522de41b4b38280
--- /dev/null
+++ b/src/pages/account/center/index.tsx
@@ -0,0 +1,250 @@
+import { Avatar, Card, Col, Divider, Icon, Input, Row, Tag } from 'antd';
+import React, { PureComponent } from 'react';
+
+import { Dispatch } from 'redux';
+import { GridContent } from '@ant-design/pro-layout';
+import Link from 'umi/link';
+import { RouteChildrenProps } from 'react-router';
+import { connect } from 'dva';
+import { ModalState } from './model';
+import Projects from './components/Projects';
+import Articles from './components/Articles';
+import Applications from './components/Applications';
+import { CurrentUser, TagType } from './data.d';
+import styles from './Center.less';
+
+const operationTabList = [
+  {
+    key: 'articles',
+    tab: (
+      <span>
+        文章 <span style={{ fontSize: 14 }}>(8)</span>
+      </span>
+    ),
+  },
+  {
+    key: 'applications',
+    tab: (
+      <span>
+        应用 <span style={{ fontSize: 14 }}>(8)</span>
+      </span>
+    ),
+  },
+  {
+    key: 'projects',
+    tab: (
+      <span>
+        项目 <span style={{ fontSize: 14 }}>(8)</span>
+      </span>
+    ),
+  },
+];
+
+interface accountCenterProps extends RouteChildrenProps {
+  dispatch: Dispatch<any>;
+  currentUser: CurrentUser;
+  currentUserLoading: boolean;
+}
+interface accountCenterState {
+  newTags: TagType[];
+  tabKey: 'articles' | 'applications' | 'projects';
+  inputVisible: boolean;
+  inputValue: string;
+}
+
+@connect(
+  ({
+    loading,
+    accountCenter,
+  }: {
+    loading: { effects: { [key: string]: boolean } };
+    accountCenter: ModalState;
+  }) => ({
+    currentUser: accountCenter.currentUser,
+    currentUserLoading: loading.effects['accountCenter/fetchCurrent'],
+  }),
+)
+class Center extends PureComponent<
+  accountCenterProps,
+  accountCenterState
+> {
+  // static getDerivedStateFromProps(
+  //   props: accountCenterProps,
+  //   state: accountCenterState,
+  // ) {
+  //   const { match, location } = props;
+  //   const { tabKey } = state;
+  //   const path = match && match.path;
+
+  //   const urlTabKey = location.pathname.replace(`${path}/`, '');
+  //   if (urlTabKey && urlTabKey !== '/' && tabKey !== urlTabKey) {
+  //     return {
+  //       tabKey: urlTabKey,
+  //     };
+  //   }
+
+  //   return null;
+  // }
+
+  state: accountCenterState = {
+    newTags: [],
+    inputVisible: false,
+    inputValue: '',
+    tabKey: 'articles',
+  };
+
+  public input: Input | null | undefined = undefined;
+
+  componentDidMount() {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'accountCenter/fetchCurrent',
+    });
+    dispatch({
+      type: 'accountCenter/fetch',
+    });
+  }
+
+  onTabChange = (key: string) => {
+    // If you need to sync state to url
+    // const { match } = this.props;
+    // router.push(`${match.url}/${key}`);
+    this.setState({
+      tabKey: key as accountCenterState['tabKey'],
+    });
+  };
+
+  showInput = () => {
+    this.setState({ inputVisible: true }, () => this.input && this.input.focus());
+  };
+
+  saveInputRef = (input: Input | null) => {
+    this.input = input;
+  };
+
+  handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    this.setState({ inputValue: e.target.value });
+  };
+
+  handleInputConfirm = () => {
+    const { state } = this;
+    const { inputValue } = state;
+    let { newTags } = state;
+    if (inputValue && newTags.filter(tag => tag.label === inputValue).length === 0) {
+      newTags = [...newTags, { key: `new-${newTags.length}`, label: inputValue }];
+    }
+    this.setState({
+      newTags,
+      inputVisible: false,
+      inputValue: '',
+    });
+  };
+
+  renderChildrenByTabKey = (tabKey: accountCenterState['tabKey']) => {
+    if (tabKey === 'projects') {
+      return <Projects />;
+    }
+    if (tabKey === 'applications') {
+      return <Applications />;
+    }
+    if (tabKey === 'articles') {
+      return <Articles />;
+    }
+    return null;
+  };
+
+  render() {
+    const { newTags, inputVisible, inputValue, tabKey } = this.state;
+    const { currentUser, currentUserLoading } = this.props;
+    const dataLoading = currentUserLoading || !(currentUser && Object.keys(currentUser).length);
+    return (
+      <GridContent>
+        <Row gutter={24}>
+          <Col lg={7} md={24}>
+            <Card bordered={false} style={{ marginBottom: 24 }} loading={dataLoading}>
+              {!dataLoading ? (
+                <div>
+                  <div className={styles.avatarHolder}>
+                    <img alt="" src={currentUser.avatar} />
+                    <div className={styles.name}>{currentUser.name}</div>
+                    <div>{currentUser.signature}</div>
+                  </div>
+                  <div className={styles.detail}>
+                    <p>
+                      <i className={styles.title} />
+                      {currentUser.title}
+                    </p>
+                    <p>
+                      <i className={styles.group} />
+                      {currentUser.group}
+                    </p>
+                    <p>
+                      <i className={styles.address} />
+                      {currentUser.geographic.province.label}
+                      {currentUser.geographic.city.label}
+                    </p>
+                  </div>
+                  <Divider dashed />
+                  <div className={styles.tags}>
+                    <div className={styles.tagsTitle}>标签</div>
+                    {currentUser.tags.concat(newTags).map(item => (
+                      <Tag key={item.key}>{item.label}</Tag>
+                    ))}
+                    {inputVisible && (
+                      <Input
+                        ref={ref => this.saveInputRef(ref)}
+                        type="text"
+                        size="small"
+                        style={{ width: 78 }}
+                        value={inputValue}
+                        onChange={this.handleInputChange}
+                        onBlur={this.handleInputConfirm}
+                        onPressEnter={this.handleInputConfirm}
+                      />
+                    )}
+                    {!inputVisible && (
+                      <Tag
+                        onClick={this.showInput}
+                        style={{ background: '#fff', borderStyle: 'dashed' }}
+                      >
+                        <Icon type="plus" />
+                      </Tag>
+                    )}
+                  </div>
+                  <Divider style={{ marginTop: 16 }} dashed />
+                  <div className={styles.team}>
+                    <div className={styles.teamTitle}>团队</div>
+                    <Row gutter={36}>
+                      {currentUser.notice &&
+                        currentUser.notice.map(item => (
+                          <Col key={item.id} lg={24} xl={12}>
+                            <Link to={item.href}>
+                              <Avatar size="small" src={item.logo} />
+                              {item.member}
+                            </Link>
+                          </Col>
+                        ))}
+                    </Row>
+                  </div>
+                </div>
+              ) : null}
+            </Card>
+          </Col>
+          <Col lg={17} md={24}>
+            <Card
+              className={styles.tabsCard}
+              bordered={false}
+              tabList={operationTabList}
+              activeTabKey={tabKey}
+              onTabChange={this.onTabChange}
+            >
+              {this.renderChildrenByTabKey(tabKey)}
+            </Card>
+          </Col>
+        </Row>
+      </GridContent>
+    );
+  }
+}
+
+export default Center;
diff --git a/src/pages/account/center/model.ts b/src/pages/account/center/model.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d437337a971beddb5635267a9741850d2cb5528a
--- /dev/null
+++ b/src/pages/account/center/model.ts
@@ -0,0 +1,70 @@
+import { AnyAction, Reducer } from 'redux';
+import { EffectsCommandMap } from 'dva';
+import { CurrentUser, ListItemDataType } from './data.d';
+import { queryCurrent, queryFakeList } from './service';
+
+export interface ModalState {
+  currentUser: Partial<CurrentUser>;
+  list: ListItemDataType[];
+}
+
+export type Effect = (
+  action: AnyAction,
+  effects: EffectsCommandMap & { select: <T>(func: (state: ModalState) => T) => T },
+) => void;
+
+export interface ModelType {
+  namespace: string;
+  state: ModalState;
+  effects: {
+    fetchCurrent: Effect;
+    fetch: Effect;
+  };
+  reducers: {
+    saveCurrentUser: Reducer<ModalState>;
+    queryList: Reducer<ModalState>;
+  };
+}
+
+const Model: ModelType = {
+  namespace: 'accountCenter',
+
+  state: {
+    currentUser: {},
+    list: [],
+  },
+
+  effects: {
+    *fetchCurrent(_, { call, put }) {
+      const response = yield call(queryCurrent);
+      yield put({
+        type: 'saveCurrentUser',
+        payload: response,
+      });
+    },
+    *fetch({ payload }, { call, put }) {
+      const response = yield call(queryFakeList, payload);
+      yield put({
+        type: 'queryList',
+        payload: Array.isArray(response) ? response : [],
+      });
+    },
+  },
+
+  reducers: {
+    saveCurrentUser(state, action) {
+      return {
+        ...(state as ModalState),
+        currentUser: action.payload || {},
+      };
+    },
+    queryList(state, action) {
+      return {
+        ...(state as ModalState),
+        list: action.payload,
+      };
+    },
+  },
+};
+
+export default Model;
diff --git a/src/pages/account/center/service.ts b/src/pages/account/center/service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..db8254d58677ca4cf5db3be9efeb75680cdf6c2f
--- /dev/null
+++ b/src/pages/account/center/service.ts
@@ -0,0 +1,11 @@
+import request from 'umi-request';
+
+export async function queryCurrent() {
+  return request('/api/currentUser');
+}
+
+export async function queryFakeList(params: { count: number }) {
+  return request('/api/fake_list', {
+    params,
+  });
+}
diff --git a/src/pages/account/settings/_mock.ts b/src/pages/account/settings/_mock.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e2f20b9c969431e01cd671b2f42431cc8eb251a9
--- /dev/null
+++ b/src/pages/account/settings/_mock.ts
@@ -0,0 +1,69 @@
+import city from './geographic/city.json';
+import province from './geographic/province.json';
+
+function getProvince(req: any, res: { json: (arg0: { name: string; id: string }[]) => void }) {
+  return res.json(province);
+}
+
+function getCity(
+  req: { params: { province: string | number } },
+  res: { json: (arg: any) => void },
+) {
+  return res.json(city[req.params.province]);
+}
+// 代码中会兼容本地 service mock 以及部署站点的静态数据
+export default {
+  // 支持值为 Object 和 Array
+  'GET  /api/currentUser': {
+    name: 'Serati Ma',
+    avatar: 'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png',
+    userid: '00000001',
+    email: 'antdesign@alipay.com',
+    signature: '海纳百川，有容乃大',
+    title: '交互专家',
+    group: '蚂蚁金服－某某某事业群－某某平台部－某某技术部－UED',
+    tags: [
+      {
+        key: '0',
+        label: '很有想法的',
+      },
+      {
+        key: '1',
+        label: '专注设计',
+      },
+      {
+        key: '2',
+        label: '辣~',
+      },
+      {
+        key: '3',
+        label: '大长腿',
+      },
+      {
+        key: '4',
+        label: '川妹子',
+      },
+      {
+        key: '5',
+        label: '海纳百川',
+      },
+    ],
+    notifyCount: 12,
+    unreadCount: 11,
+    country: 'China',
+    geographic: {
+      province: {
+        label: '浙江省',
+        key: '330000',
+      },
+      city: {
+        label: '杭州市',
+        key: '330100',
+      },
+    },
+    address: '西湖区工专路 77 号',
+    phone: '0752-268888888',
+  },
+  'GET  /api/geographic/province': getProvince,
+  'GET  /api/geographic/city/:province': getCity,
+};
diff --git a/src/pages/account/settings/components/BaseView.less b/src/pages/account/settings/components/BaseView.less
new file mode 100644
index 0000000000000000000000000000000000000000..b731637e94e9301e4eb0e497f0eab3fce01dd033
--- /dev/null
+++ b/src/pages/account/settings/components/BaseView.less
@@ -0,0 +1,52 @@
+@import '~antd/es/style/themes/default.less';
+
+.baseView {
+  display: flex;
+  padding-top: 12px;
+
+  .left {
+    min-width: 224px;
+    max-width: 448px;
+  }
+  .right {
+    flex: 1;
+    padding-left: 104px;
+    .avatar_title {
+      height: 22px;
+      margin-bottom: 8px;
+      color: @heading-color;
+      font-size: @font-size-base;
+      line-height: 22px;
+    }
+    .avatar {
+      width: 144px;
+      height: 144px;
+      margin-bottom: 12px;
+      overflow: hidden;
+      img {
+        width: 100%;
+      }
+    }
+    .button_view {
+      width: 144px;
+      text-align: center;
+    }
+  }
+}
+
+@media screen and (max-width: @screen-xl) {
+  .baseView {
+    flex-direction: column-reverse;
+
+    .right {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      max-width: 448px;
+      padding: 20px;
+      .avatar_title {
+        display: none;
+      }
+    }
+  }
+}
diff --git a/src/pages/account/settings/components/GeographicView.less b/src/pages/account/settings/components/GeographicView.less
new file mode 100644
index 0000000000000000000000000000000000000000..9905aafe3468e8bab4323316e761c873aec77c56
--- /dev/null
+++ b/src/pages/account/settings/components/GeographicView.less
@@ -0,0 +1,19 @@
+@import '~antd/es/style/themes/default.less';
+
+.row {
+  .item {
+    width: 50%;
+    max-width: 220px;
+  }
+  .item:first-child {
+    width: ~'calc(50% - 8px)';
+    margin-right: 8px;
+  }
+}
+
+@media screen and (max-width: @screen-sm) {
+  .item:first-child {
+    margin: 0;
+    margin-bottom: 8px;
+  }
+}
diff --git a/src/pages/account/settings/components/GeographicView.tsx b/src/pages/account/settings/components/GeographicView.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..32559a51d199fa72c0b18163cbf37f0c39c4a440
--- /dev/null
+++ b/src/pages/account/settings/components/GeographicView.tsx
@@ -0,0 +1,175 @@
+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';
+
+const { Option } = Select;
+
+interface SelectItem {
+  label: string;
+  key: string;
+}
+const nullSelectItem: SelectItem = {
+  label: '',
+  key: '',
+};
+
+interface GeographicViewProps {
+  dispatch?: Dispatch<any>;
+  province?: ProvinceType[];
+  city?: CityType[];
+  value?: {
+    province: SelectItem;
+    city: SelectItem;
+  };
+  loading?: boolean;
+  onChange?: (value: { province: SelectItem; city: SelectItem }) => void;
+}
+
+@connect(
+  ({
+    accountSettings,
+    loading,
+  }: {
+    accountSettings: {
+      province: ProvinceType[];
+      city: CityType[];
+    };
+    loading: any;
+  }) => {
+    const { province, city } = accountSettings;
+    return {
+      province,
+      city,
+      loading: loading.models.accountSettings,
+    };
+  },
+)
+class GeographicView extends Component<GeographicViewProps> {
+  componentDidMount = () => {
+    const { dispatch } = this.props;
+    if (dispatch) {
+      dispatch({
+        type: 'accountSettings/fetchProvince',
+      });
+    }
+  };
+
+  componentDidUpdate(props: GeographicViewProps) {
+    const { dispatch, value } = this.props;
+
+    if (!props.value && !!value && !!value.province) {
+      if (dispatch) {
+        dispatch({
+          type: 'accountSettings/fetchCity',
+          payload: value.province.key,
+        });
+      }
+    }
+  }
+
+  getProvinceOption() {
+    const { province } = this.props;
+    if (province) {
+      return this.getOption(province);
+    }
+    return [];
+  }
+
+  getCityOption = () => {
+    const { city } = this.props;
+    if (city) {
+      return this.getOption(city);
+    }
+    return [];
+  };
+
+  getOption = (list: CityType[] | ProvinceType[]) => {
+    if (!list || list.length < 1) {
+      return (
+        <Option key={0} value={0}>
+          没有找到选项
+        </Option>
+      );
+    }
+    return (list as CityType[]).map(item => (
+      <Option key={item.key} value={item.key}>
+        {item.label}
+      </Option>
+    ));
+  };
+
+  selectProvinceItem = (item: SelectItem) => {
+    const { dispatch, onChange } = this.props;
+
+    if (dispatch) {
+      dispatch({
+        type: 'accountSettings/fetchCity',
+        payload: item.key,
+      });
+    }
+    if (onChange) {
+      onChange({
+        province: item,
+        city: nullSelectItem,
+      });
+    }
+  };
+
+  selectCityItem = (item: SelectItem) => {
+    const { value, onChange } = this.props;
+    if (value && onChange) {
+      onChange({
+        province: value.province,
+        city: item,
+      });
+    }
+  };
+
+  conversionObject() {
+    const { value } = this.props;
+    if (!value) {
+      return {
+        province: nullSelectItem,
+        city: nullSelectItem,
+      };
+    }
+    const { province, city } = value;
+    return {
+      province: province || nullSelectItem,
+      city: city || nullSelectItem,
+    };
+  }
+
+  render() {
+    const { province, city } = this.conversionObject();
+    const { loading } = this.props;
+    return (
+      <Spin spinning={loading} wrapperClassName={styles.row}>
+        <Select
+          className={styles.item}
+          value={province}
+          labelInValue
+          showSearch
+          onSelect={this.selectProvinceItem}
+        >
+          {this.getProvinceOption()}
+        </Select>
+        <Select
+          className={styles.item}
+          value={city}
+          labelInValue
+          showSearch
+          onSelect={this.selectCityItem}
+        >
+          {this.getCityOption()}
+        </Select>
+      </Spin>
+    );
+  }
+}
+
+export default GeographicView;
diff --git a/src/pages/account/settings/components/PhoneView.less b/src/pages/account/settings/components/PhoneView.less
new file mode 100644
index 0000000000000000000000000000000000000000..f66a32d6e318a09597d140bb721daa365ae15a2c
--- /dev/null
+++ b/src/pages/account/settings/components/PhoneView.less
@@ -0,0 +1,11 @@
+@import '~antd/es/style/themes/default.less';
+
+.area_code {
+  width: 30%;
+  max-width: 128px;
+  margin-right: 8px;
+}
+.phone_number {
+  width: ~'calc(70% - 8px)';
+  max-width: 312px;
+}
diff --git a/src/pages/account/settings/components/PhoneView.tsx b/src/pages/account/settings/components/PhoneView.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..e97ec0c104c23d36e37b17e966322d5f3d46e6cc
--- /dev/null
+++ b/src/pages/account/settings/components/PhoneView.tsx
@@ -0,0 +1,43 @@
+import React, { Fragment, PureComponent } from 'react';
+
+import { Input } from 'antd';
+import styles from './PhoneView.less';
+
+interface PhoneViewProps {
+  value?: string;
+  onChange?: (value: string) => void;
+}
+
+class PhoneView extends PureComponent<PhoneViewProps> {
+  render() {
+    const { value, onChange } = this.props;
+    let values = ['', ''];
+    if (value) {
+      values = value.split('-');
+    }
+    return (
+      <Fragment>
+        <Input
+          className={styles.area_code}
+          value={values[0]}
+          onChange={e => {
+            if (onChange) {
+              onChange(`${e.target.value}-${values[1]}`);
+            }
+          }}
+        />
+        <Input
+          className={styles.phone_number}
+          onChange={e => {
+            if (onChange) {
+              onChange(`${values[0]}-${e.target.value}`);
+            }
+          }}
+          value={values[1]}
+        />
+      </Fragment>
+    );
+  }
+}
+
+export default PhoneView;
diff --git a/src/pages/account/settings/components/base.tsx b/src/pages/account/settings/components/base.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..e7968677bdcf8e0c6a8b85c6ee1952e7242b34e8
--- /dev/null
+++ b/src/pages/account/settings/components/base.tsx
@@ -0,0 +1,222 @@
+import { Button, Form, Input, Select, Upload, message } from 'antd';
+import { FormattedMessage, formatMessage } from 'umi-plugin-react/locale';
+import React, { Component, Fragment } from 'react';
+
+import { FormComponentProps } from 'antd/es/form';
+import { connect } from 'dva';
+import { CurrentUser } from '../data.d';
+import GeographicView from './GeographicView';
+import PhoneView from './PhoneView';
+import styles from './BaseView.less';
+
+const FormItem = Form.Item;
+const { Option } = Select;
+
+// 头像组件 方便以后独立，增加裁剪之类的功能
+const AvatarView = ({ avatar }: { avatar: string }) => (
+  <Fragment>
+    <div className={styles.avatar_title}>
+      <FormattedMessage id="account-settings.basic.avatar" defaultMessage="Avatar" />
+    </div>
+    <div className={styles.avatar}>
+      <img src={avatar} alt="avatar" />
+    </div>
+    <Upload fileList={[]}>
+      <div className={styles.button_view}>
+        <Button icon="upload">
+          <FormattedMessage id="account-settings.basic.change-avatar" defaultMessage="Change avatar" />
+        </Button>
+      </div>
+    </Upload>
+  </Fragment>
+);
+interface SelectItem {
+  label: string;
+  key: string;
+}
+
+const validatorGeographic = (
+  _: any,
+  value: {
+    province: SelectItem;
+    city: SelectItem;
+  },
+  callback: (message?: string) => void,
+) => {
+  const { province, city } = value;
+  if (!province.key) {
+    callback('Please input your province!');
+  }
+  if (!city.key) {
+    callback('Please input your city!');
+  }
+  callback();
+};
+
+const validatorPhone = (rule: any, value: string, callback: (message?: string) => void) => {
+  const values = value.split('-');
+  if (!values[0]) {
+    callback('Please input your area code!');
+  }
+  if (!values[1]) {
+    callback('Please input your phone number!');
+  }
+  callback();
+};
+
+interface BaseViewProps extends FormComponentProps {
+  currentUser?: CurrentUser;
+}
+
+@connect(({ accountSettings }: { accountSettings: { currentUser: CurrentUser } }) => ({
+  currentUser: accountSettings.currentUser,
+}))
+class BaseView extends Component<BaseViewProps> {
+  view: HTMLDivElement | undefined = undefined;
+
+  componentDidMount() {
+    this.setBaseInfo();
+  }
+
+  setBaseInfo = () => {
+    const { currentUser, form } = this.props;
+    if (currentUser) {
+      Object.keys(form.getFieldsValue()).forEach(key => {
+        const obj = {};
+        obj[key] = currentUser[key] || null;
+        form.setFieldsValue(obj);
+      });
+    }
+  };
+
+  getAvatarURL() {
+    const { currentUser } = this.props;
+    if (currentUser) {
+      if (currentUser.avatar) {
+        return currentUser.avatar;
+      }
+      const url = 'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png';
+      return url;
+    }
+    return '';
+  }
+
+  getViewDom = (ref: HTMLDivElement) => {
+    this.view = ref;
+  };
+
+  handlerSubmit = (event: React.MouseEvent) => {
+    event.preventDefault();
+    const { form } = this.props;
+    form.validateFields(err => {
+      if (!err) {
+        message.success(formatMessage({ id: 'account-settings.basic.update.success' }));
+      }
+    });
+  };
+
+  render() {
+    const {
+      form: { getFieldDecorator },
+    } = this.props;
+    return (
+      <div className={styles.baseView} ref={this.getViewDom}>
+        <div className={styles.left}>
+          <Form layout="vertical" hideRequiredMark>
+            <FormItem label={formatMessage({ id: 'account-settings.basic.email' })}>
+              {getFieldDecorator('email', {
+                rules: [
+                  {
+                    required: true,
+                    message: formatMessage({ id: 'account-settings.basic.email-message' }, {}),
+                  },
+                ],
+              })(<Input />)}
+            </FormItem>
+            <FormItem label={formatMessage({ id: 'account-settings.basic.nickname' })}>
+              {getFieldDecorator('name', {
+                rules: [
+                  {
+                    required: true,
+                    message: formatMessage({ id: 'account-settings.basic.nickname-message' }, {}),
+                  },
+                ],
+              })(<Input />)}
+            </FormItem>
+            <FormItem label={formatMessage({ id: 'account-settings.basic.profile' })}>
+              {getFieldDecorator('profile', {
+                rules: [
+                  {
+                    required: true,
+                    message: formatMessage({ id: 'account-settings.basic.profile-message' }, {}),
+                  },
+                ],
+              })(
+                <Input.TextArea
+                  placeholder={formatMessage({ id: 'account-settings.basic.profile-placeholder' })}
+                  rows={4}
+                />,
+              )}
+            </FormItem>
+            <FormItem label={formatMessage({ id: 'account-settings.basic.country' })}>
+              {getFieldDecorator('country', {
+                rules: [
+                  {
+                    required: true,
+                    message: formatMessage({ id: 'account-settings.basic.country-message' }, {}),
+                  },
+                ],
+              })(
+                <Select style={{ maxWidth: 220 }}>
+                  <Option value="China">中国</Option>
+                </Select>,
+              )}
+            </FormItem>
+            <FormItem label={formatMessage({ id: 'account-settings.basic.geographic' })}>
+              {getFieldDecorator('geographic', {
+                rules: [
+                  {
+                    required: true,
+                    message: formatMessage({ id: 'account-settings.basic.geographic-message' }, {}),
+                  },
+                  {
+                    validator: validatorGeographic,
+                  },
+                ],
+              })(<GeographicView />)}
+            </FormItem>
+            <FormItem label={formatMessage({ id: 'account-settings.basic.address' })}>
+              {getFieldDecorator('address', {
+                rules: [
+                  {
+                    required: true,
+                    message: formatMessage({ id: 'account-settings.basic.address-message' }, {}),
+                  },
+                ],
+              })(<Input />)}
+            </FormItem>
+            <FormItem label={formatMessage({ id: 'account-settings.basic.phone' })}>
+              {getFieldDecorator('phone', {
+                rules: [
+                  {
+                    required: true,
+                    message: formatMessage({ id: 'account-settings.basic.phone-message' }, {}),
+                  },
+                  { validator: validatorPhone },
+                ],
+              })(<PhoneView />)}
+            </FormItem>
+            <Button type="primary" onClick={this.handlerSubmit}>
+              <FormattedMessage id="account-settings.basic.update" defaultMessage="Update Information" />
+            </Button>
+          </Form>
+        </div>
+        <div className={styles.right}>
+          <AvatarView avatar={this.getAvatarURL()} />
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Form.create<BaseViewProps>()(BaseView);
diff --git a/src/pages/account/settings/components/binding.tsx b/src/pages/account/settings/components/binding.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..390943343677534e835a0d4546dab6424c460369
--- /dev/null
+++ b/src/pages/account/settings/components/binding.tsx
@@ -0,0 +1,60 @@
+import { FormattedMessage, formatMessage } from 'umi-plugin-react/locale';
+import { Icon, List } from 'antd';
+import React, { Component, Fragment } from 'react';
+
+class BindingView extends Component {
+  getData = () => [
+    {
+      title: formatMessage({ id: 'account-settings.binding.taobao' }, {}),
+      description: formatMessage({ id: 'account-settings.binding.taobao-description' }, {}),
+      actions: [
+        <a key="Bind">
+          <FormattedMessage id="account-settings.binding.bind" defaultMessage="Bind" />
+        </a>,
+      ],
+      avatar: <Icon type="taobao" className="taobao" />,
+    },
+    {
+      title: formatMessage({ id: 'account-settings.binding.alipay' }, {}),
+      description: formatMessage({ id: 'account-settings.binding.alipay-description' }, {}),
+      actions: [
+        <a key="Bind">
+          <FormattedMessage id="account-settings.binding.bind" defaultMessage="Bind" />
+        </a>,
+      ],
+      avatar: <Icon type="alipay" className="alipay" />,
+    },
+    {
+      title: formatMessage({ id: 'account-settings.binding.dingding' }, {}),
+      description: formatMessage({ id: 'account-settings.binding.dingding-description' }, {}),
+      actions: [
+        <a key="Bind">
+          <FormattedMessage id="account-settings.binding.bind" defaultMessage="Bind" />
+        </a>,
+      ],
+      avatar: <Icon type="dingding" className="dingding" />,
+    },
+  ];
+
+  render() {
+    return (
+      <Fragment>
+        <List
+          itemLayout="horizontal"
+          dataSource={this.getData()}
+          renderItem={item => (
+            <List.Item actions={item.actions}>
+              <List.Item.Meta
+                avatar={item.avatar}
+                title={item.title}
+                description={item.description}
+              />
+            </List.Item>
+          )}
+        />
+      </Fragment>
+    );
+  }
+}
+
+export default BindingView;
diff --git a/src/pages/account/settings/components/notification.tsx b/src/pages/account/settings/components/notification.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..334686fb287467cc86826e30efed564ed36134b5
--- /dev/null
+++ b/src/pages/account/settings/components/notification.tsx
@@ -0,0 +1,54 @@
+import { List, Switch } from 'antd';
+import React, { Component, Fragment } from 'react';
+
+import { formatMessage } from 'umi-plugin-react/locale';
+
+type Unpacked<T> = T extends (infer U)[] ? U : T;
+
+class NotificationView extends Component {
+  getData = () => {
+    const Action = (
+      <Switch
+        checkedChildren={formatMessage({ id: 'account-settings.settings.open' })}
+        unCheckedChildren={formatMessage({ id: 'account-settings.settings.close' })}
+        defaultChecked
+      />
+    );
+    return [
+      {
+        title: formatMessage({ id: 'account-settings.notification.password' }, {}),
+        description: formatMessage({ id: 'account-settings.notification.password-description' }, {}),
+        actions: [Action],
+      },
+      {
+        title: formatMessage({ id: 'account-settings.notification.messages' }, {}),
+        description: formatMessage({ id: 'account-settings.notification.messages-description' }, {}),
+        actions: [Action],
+      },
+      {
+        title: formatMessage({ id: 'account-settings.notification.todo' }, {}),
+        description: formatMessage({ id: 'account-settings.notification.todo-description' }, {}),
+        actions: [Action],
+      },
+    ];
+  };
+
+  render() {
+    const data = this.getData();
+    return (
+      <Fragment>
+        <List<Unpacked<typeof data>>
+          itemLayout="horizontal"
+          dataSource={data}
+          renderItem={item => (
+            <List.Item actions={item.actions}>
+              <List.Item.Meta title={item.title} description={item.description} />
+            </List.Item>
+          )}
+        />
+      </Fragment>
+    );
+  }
+}
+
+export default NotificationView;
diff --git a/src/pages/account/settings/components/security.tsx b/src/pages/account/settings/components/security.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..408ad6443f0dbb25a62a1429a482aa7b565c5548
--- /dev/null
+++ b/src/pages/account/settings/components/security.tsx
@@ -0,0 +1,105 @@
+import { FormattedMessage, formatMessage } from 'umi-plugin-react/locale';
+import React, { Component, Fragment } from 'react';
+
+import { List } from 'antd';
+
+type Unpacked<T> = T extends (infer U)[] ? U : T;
+
+const passwordStrength = {
+  strong: (
+    <span className="strong">
+      <FormattedMessage id="account-settings.security.strong" defaultMessage="Strong" />
+    </span>
+  ),
+  medium: (
+    <span className="medium">
+      <FormattedMessage id="account-settings.security.medium" defaultMessage="Medium" />
+    </span>
+  ),
+  weak: (
+    <span className="weak">
+      <FormattedMessage id="account-settings.security.weak" defaultMessage="Weak" />
+      Weak
+    </span>
+  ),
+};
+
+class SecurityView extends Component {
+  getData = () => [
+    {
+      title: formatMessage({ id: 'account-settings.security.password' }, {}),
+      description: (
+        <Fragment>
+          {formatMessage({ id: 'account-settings.security.password-description' })}：
+          {passwordStrength.strong}
+        </Fragment>
+      ),
+      actions: [
+        <a key="Modify">
+          <FormattedMessage id="account-settings.security.modify" defaultMessage="Modify" />
+        </a>,
+      ],
+    },
+    {
+      title: formatMessage({ id: 'account-settings.security.phone' }, {}),
+      description: `${formatMessage(
+        { id: 'account-settings.security.phone-description' },
+        {},
+      )}：138****8293`,
+      actions: [
+        <a key="Modify">
+          <FormattedMessage id="account-settings.security.modify" defaultMessage="Modify" />
+        </a>,
+      ],
+    },
+    {
+      title: formatMessage({ id: 'account-settings.security.question' }, {}),
+      description: formatMessage({ id: 'account-settings.security.question-description' }, {}),
+      actions: [
+        <a key="Set">
+          <FormattedMessage id="account-settings.security.set" defaultMessage="Set" />
+        </a>,
+      ],
+    },
+    {
+      title: formatMessage({ id: 'account-settings.security.email' }, {}),
+      description: `${formatMessage(
+        { id: 'account-settings.security.email-description' },
+        {},
+      )}：ant***sign.com`,
+      actions: [
+        <a key="Modify">
+          <FormattedMessage id="account-settings.security.modify" defaultMessage="Modify" />
+        </a>,
+      ],
+    },
+    {
+      title: formatMessage({ id: 'account-settings.security.mfa' }, {}),
+      description: formatMessage({ id: 'account-settings.security.mfa-description' }, {}),
+      actions: [
+        <a key="bind">
+          <FormattedMessage id="account-settings.security.bind" defaultMessage="Bind" />
+        </a>,
+      ],
+    },
+  ];
+
+  render() {
+    const data = this.getData();
+    return (
+      <Fragment>
+        <List<Unpacked<typeof data>>
+          itemLayout="horizontal"
+          dataSource={data}
+          renderItem={item => (
+            <List.Item actions={item.actions}>
+              <List.Item.Meta title={item.title} description={item.description} />
+            </List.Item>
+          )}
+        />
+      </Fragment>
+    );
+  }
+}
+
+export default SecurityView;
diff --git a/src/pages/account/settings/data.d.ts b/src/pages/account/settings/data.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8b0a824add2f3c1e21a3e95de4308c964357f492
--- /dev/null
+++ b/src/pages/account/settings/data.d.ts
@@ -0,0 +1,48 @@
+export interface TagType {
+  key: string;
+  label: string;
+}
+
+export interface ProvinceType {
+  label: string;
+  key: string;
+}
+
+export interface CityType {
+  label: string;
+  key: string;
+}
+
+export interface GeographicType {
+  province: ProvinceType;
+  city: CityType;
+}
+
+export interface NoticeType {
+  id: string;
+  title: string;
+  logo: string;
+  description: string;
+  updatedAt: string;
+  member: string;
+  href: string;
+  memberLink: string;
+}
+
+export interface CurrentUser {
+  name: string;
+  avatar: string;
+  userid: string;
+  notice: NoticeType[];
+  email: string;
+  signature: string;
+  title: string;
+  group: string;
+  tags: TagType[];
+  notifyCount: number;
+  unreadCount: number;
+  country: string;
+  geographic: GeographicType;
+  address: string;
+  phone: string;
+}
diff --git a/src/pages/account/settings/geographic/city.json b/src/pages/account/settings/geographic/city.json
new file mode 100644
index 0000000000000000000000000000000000000000..297837477ab80c14edca173521e1b5e6f97461af
--- /dev/null
+++ b/src/pages/account/settings/geographic/city.json
@@ -0,0 +1,1784 @@
+{
+  "110000": [
+    {
+      "province": "北京市",
+      "name": "市辖区",
+      "id": "110100"
+    }
+  ],
+  "120000": [
+    {
+      "province": "天津市",
+      "name": "市辖区",
+      "id": "120100"
+    }
+  ],
+  "130000": [
+    {
+      "province": "河北省",
+      "name": "石家庄市",
+      "id": "130100"
+    },
+    {
+      "province": "河北省",
+      "name": "唐山市",
+      "id": "130200"
+    },
+    {
+      "province": "河北省",
+      "name": "秦皇岛市",
+      "id": "130300"
+    },
+    {
+      "province": "河北省",
+      "name": "邯郸市",
+      "id": "130400"
+    },
+    {
+      "province": "河北省",
+      "name": "邢台市",
+      "id": "130500"
+    },
+    {
+      "province": "河北省",
+      "name": "保定市",
+      "id": "130600"
+    },
+    {
+      "province": "河北省",
+      "name": "张家口市",
+      "id": "130700"
+    },
+    {
+      "province": "河北省",
+      "name": "承德市",
+      "id": "130800"
+    },
+    {
+      "province": "河北省",
+      "name": "沧州市",
+      "id": "130900"
+    },
+    {
+      "province": "河北省",
+      "name": "廊坊市",
+      "id": "131000"
+    },
+    {
+      "province": "河北省",
+      "name": "衡水市",
+      "id": "131100"
+    },
+    {
+      "province": "河北省",
+      "name": "省直辖县级行政区划",
+      "id": "139000"
+    }
+  ],
+  "140000": [
+    {
+      "province": "山西省",
+      "name": "太原市",
+      "id": "140100"
+    },
+    {
+      "province": "山西省",
+      "name": "大同市",
+      "id": "140200"
+    },
+    {
+      "province": "山西省",
+      "name": "阳泉市",
+      "id": "140300"
+    },
+    {
+      "province": "山西省",
+      "name": "长治市",
+      "id": "140400"
+    },
+    {
+      "province": "山西省",
+      "name": "晋城市",
+      "id": "140500"
+    },
+    {
+      "province": "山西省",
+      "name": "朔州市",
+      "id": "140600"
+    },
+    {
+      "province": "山西省",
+      "name": "晋中市",
+      "id": "140700"
+    },
+    {
+      "province": "山西省",
+      "name": "运城市",
+      "id": "140800"
+    },
+    {
+      "province": "山西省",
+      "name": "忻州市",
+      "id": "140900"
+    },
+    {
+      "province": "山西省",
+      "name": "临汾市",
+      "id": "141000"
+    },
+    {
+      "province": "山西省",
+      "name": "吕梁市",
+      "id": "141100"
+    }
+  ],
+  "150000": [
+    {
+      "province": "内蒙古自治区",
+      "name": "呼和浩特市",
+      "id": "150100"
+    },
+    {
+      "province": "内蒙古自治区",
+      "name": "包头市",
+      "id": "150200"
+    },
+    {
+      "province": "内蒙古自治区",
+      "name": "乌海市",
+      "id": "150300"
+    },
+    {
+      "province": "内蒙古自治区",
+      "name": "赤峰市",
+      "id": "150400"
+    },
+    {
+      "province": "内蒙古自治区",
+      "name": "通辽市",
+      "id": "150500"
+    },
+    {
+      "province": "内蒙古自治区",
+      "name": "鄂尔多斯市",
+      "id": "150600"
+    },
+    {
+      "province": "内蒙古自治区",
+      "name": "呼伦贝尔市",
+      "id": "150700"
+    },
+    {
+      "province": "内蒙古自治区",
+      "name": "巴彦淖尔市",
+      "id": "150800"
+    },
+    {
+      "province": "内蒙古自治区",
+      "name": "乌兰察布市",
+      "id": "150900"
+    },
+    {
+      "province": "内蒙古自治区",
+      "name": "兴安盟",
+      "id": "152200"
+    },
+    {
+      "province": "内蒙古自治区",
+      "name": "锡林郭勒盟",
+      "id": "152500"
+    },
+    {
+      "province": "内蒙古自治区",
+      "name": "阿拉善盟",
+      "id": "152900"
+    }
+  ],
+  "210000": [
+    {
+      "province": "辽宁省",
+      "name": "沈阳市",
+      "id": "210100"
+    },
+    {
+      "province": "辽宁省",
+      "name": "大连市",
+      "id": "210200"
+    },
+    {
+      "province": "辽宁省",
+      "name": "鞍山市",
+      "id": "210300"
+    },
+    {
+      "province": "辽宁省",
+      "name": "抚顺市",
+      "id": "210400"
+    },
+    {
+      "province": "辽宁省",
+      "name": "本溪市",
+      "id": "210500"
+    },
+    {
+      "province": "辽宁省",
+      "name": "丹东市",
+      "id": "210600"
+    },
+    {
+      "province": "辽宁省",
+      "name": "锦州市",
+      "id": "210700"
+    },
+    {
+      "province": "辽宁省",
+      "name": "营口市",
+      "id": "210800"
+    },
+    {
+      "province": "辽宁省",
+      "name": "阜新市",
+      "id": "210900"
+    },
+    {
+      "province": "辽宁省",
+      "name": "辽阳市",
+      "id": "211000"
+    },
+    {
+      "province": "辽宁省",
+      "name": "盘锦市",
+      "id": "211100"
+    },
+    {
+      "province": "辽宁省",
+      "name": "铁岭市",
+      "id": "211200"
+    },
+    {
+      "province": "辽宁省",
+      "name": "朝阳市",
+      "id": "211300"
+    },
+    {
+      "province": "辽宁省",
+      "name": "葫芦岛市",
+      "id": "211400"
+    }
+  ],
+  "220000": [
+    {
+      "province": "吉林省",
+      "name": "长春市",
+      "id": "220100"
+    },
+    {
+      "province": "吉林省",
+      "name": "吉林市",
+      "id": "220200"
+    },
+    {
+      "province": "吉林省",
+      "name": "四平市",
+      "id": "220300"
+    },
+    {
+      "province": "吉林省",
+      "name": "辽源市",
+      "id": "220400"
+    },
+    {
+      "province": "吉林省",
+      "name": "通化市",
+      "id": "220500"
+    },
+    {
+      "province": "吉林省",
+      "name": "白山市",
+      "id": "220600"
+    },
+    {
+      "province": "吉林省",
+      "name": "松原市",
+      "id": "220700"
+    },
+    {
+      "province": "吉林省",
+      "name": "白城市",
+      "id": "220800"
+    },
+    {
+      "province": "吉林省",
+      "name": "延边朝鲜族自治州",
+      "id": "222400"
+    }
+  ],
+  "230000": [
+    {
+      "province": "黑龙江省",
+      "name": "哈尔滨市",
+      "id": "230100"
+    },
+    {
+      "province": "黑龙江省",
+      "name": "齐齐哈尔市",
+      "id": "230200"
+    },
+    {
+      "province": "黑龙江省",
+      "name": "鸡西市",
+      "id": "230300"
+    },
+    {
+      "province": "黑龙江省",
+      "name": "鹤岗市",
+      "id": "230400"
+    },
+    {
+      "province": "黑龙江省",
+      "name": "双鸭山市",
+      "id": "230500"
+    },
+    {
+      "province": "黑龙江省",
+      "name": "大庆市",
+      "id": "230600"
+    },
+    {
+      "province": "黑龙江省",
+      "name": "伊春市",
+      "id": "230700"
+    },
+    {
+      "province": "黑龙江省",
+      "name": "佳木斯市",
+      "id": "230800"
+    },
+    {
+      "province": "黑龙江省",
+      "name": "七台河市",
+      "id": "230900"
+    },
+    {
+      "province": "黑龙江省",
+      "name": "牡丹江市",
+      "id": "231000"
+    },
+    {
+      "province": "黑龙江省",
+      "name": "黑河市",
+      "id": "231100"
+    },
+    {
+      "province": "黑龙江省",
+      "name": "绥化市",
+      "id": "231200"
+    },
+    {
+      "province": "黑龙江省",
+      "name": "大兴安岭地区",
+      "id": "232700"
+    }
+  ],
+  "310000": [
+    {
+      "province": "上海市",
+      "name": "市辖区",
+      "id": "310100"
+    }
+  ],
+  "320000": [
+    {
+      "province": "江苏省",
+      "name": "南京市",
+      "id": "320100"
+    },
+    {
+      "province": "江苏省",
+      "name": "无锡市",
+      "id": "320200"
+    },
+    {
+      "province": "江苏省",
+      "name": "徐州市",
+      "id": "320300"
+    },
+    {
+      "province": "江苏省",
+      "name": "常州市",
+      "id": "320400"
+    },
+    {
+      "province": "江苏省",
+      "name": "苏州市",
+      "id": "320500"
+    },
+    {
+      "province": "江苏省",
+      "name": "南通市",
+      "id": "320600"
+    },
+    {
+      "province": "江苏省",
+      "name": "连云港市",
+      "id": "320700"
+    },
+    {
+      "province": "江苏省",
+      "name": "淮安市",
+      "id": "320800"
+    },
+    {
+      "province": "江苏省",
+      "name": "盐城市",
+      "id": "320900"
+    },
+    {
+      "province": "江苏省",
+      "name": "扬州市",
+      "id": "321000"
+    },
+    {
+      "province": "江苏省",
+      "name": "镇江市",
+      "id": "321100"
+    },
+    {
+      "province": "江苏省",
+      "name": "泰州市",
+      "id": "321200"
+    },
+    {
+      "province": "江苏省",
+      "name": "宿迁市",
+      "id": "321300"
+    }
+  ],
+  "330000": [
+    {
+      "province": "浙江省",
+      "name": "杭州市",
+      "id": "330100"
+    },
+    {
+      "province": "浙江省",
+      "name": "宁波市",
+      "id": "330200"
+    },
+    {
+      "province": "浙江省",
+      "name": "温州市",
+      "id": "330300"
+    },
+    {
+      "province": "浙江省",
+      "name": "嘉兴市",
+      "id": "330400"
+    },
+    {
+      "province": "浙江省",
+      "name": "湖州市",
+      "id": "330500"
+    },
+    {
+      "province": "浙江省",
+      "name": "绍兴市",
+      "id": "330600"
+    },
+    {
+      "province": "浙江省",
+      "name": "金华市",
+      "id": "330700"
+    },
+    {
+      "province": "浙江省",
+      "name": "衢州市",
+      "id": "330800"
+    },
+    {
+      "province": "浙江省",
+      "name": "舟山市",
+      "id": "330900"
+    },
+    {
+      "province": "浙江省",
+      "name": "台州市",
+      "id": "331000"
+    },
+    {
+      "province": "浙江省",
+      "name": "丽水市",
+      "id": "331100"
+    }
+  ],
+  "340000": [
+    {
+      "province": "安徽省",
+      "name": "合肥市",
+      "id": "340100"
+    },
+    {
+      "province": "安徽省",
+      "name": "芜湖市",
+      "id": "340200"
+    },
+    {
+      "province": "安徽省",
+      "name": "蚌埠市",
+      "id": "340300"
+    },
+    {
+      "province": "安徽省",
+      "name": "淮南市",
+      "id": "340400"
+    },
+    {
+      "province": "安徽省",
+      "name": "马鞍山市",
+      "id": "340500"
+    },
+    {
+      "province": "安徽省",
+      "name": "淮北市",
+      "id": "340600"
+    },
+    {
+      "province": "安徽省",
+      "name": "铜陵市",
+      "id": "340700"
+    },
+    {
+      "province": "安徽省",
+      "name": "安庆市",
+      "id": "340800"
+    },
+    {
+      "province": "安徽省",
+      "name": "黄山市",
+      "id": "341000"
+    },
+    {
+      "province": "安徽省",
+      "name": "滁州市",
+      "id": "341100"
+    },
+    {
+      "province": "安徽省",
+      "name": "阜阳市",
+      "id": "341200"
+    },
+    {
+      "province": "安徽省",
+      "name": "宿州市",
+      "id": "341300"
+    },
+    {
+      "province": "安徽省",
+      "name": "六安市",
+      "id": "341500"
+    },
+    {
+      "province": "安徽省",
+      "name": "亳州市",
+      "id": "341600"
+    },
+    {
+      "province": "安徽省",
+      "name": "池州市",
+      "id": "341700"
+    },
+    {
+      "province": "安徽省",
+      "name": "宣城市",
+      "id": "341800"
+    }
+  ],
+  "350000": [
+    {
+      "province": "福建省",
+      "name": "福州市",
+      "id": "350100"
+    },
+    {
+      "province": "福建省",
+      "name": "厦门市",
+      "id": "350200"
+    },
+    {
+      "province": "福建省",
+      "name": "莆田市",
+      "id": "350300"
+    },
+    {
+      "province": "福建省",
+      "name": "三明市",
+      "id": "350400"
+    },
+    {
+      "province": "福建省",
+      "name": "泉州市",
+      "id": "350500"
+    },
+    {
+      "province": "福建省",
+      "name": "漳州市",
+      "id": "350600"
+    },
+    {
+      "province": "福建省",
+      "name": "南平市",
+      "id": "350700"
+    },
+    {
+      "province": "福建省",
+      "name": "龙岩市",
+      "id": "350800"
+    },
+    {
+      "province": "福建省",
+      "name": "宁德市",
+      "id": "350900"
+    }
+  ],
+  "360000": [
+    {
+      "province": "江西省",
+      "name": "南昌市",
+      "id": "360100"
+    },
+    {
+      "province": "江西省",
+      "name": "景德镇市",
+      "id": "360200"
+    },
+    {
+      "province": "江西省",
+      "name": "萍乡市",
+      "id": "360300"
+    },
+    {
+      "province": "江西省",
+      "name": "九江市",
+      "id": "360400"
+    },
+    {
+      "province": "江西省",
+      "name": "新余市",
+      "id": "360500"
+    },
+    {
+      "province": "江西省",
+      "name": "鹰潭市",
+      "id": "360600"
+    },
+    {
+      "province": "江西省",
+      "name": "赣州市",
+      "id": "360700"
+    },
+    {
+      "province": "江西省",
+      "name": "吉安市",
+      "id": "360800"
+    },
+    {
+      "province": "江西省",
+      "name": "宜春市",
+      "id": "360900"
+    },
+    {
+      "province": "江西省",
+      "name": "抚州市",
+      "id": "361000"
+    },
+    {
+      "province": "江西省",
+      "name": "上饶市",
+      "id": "361100"
+    }
+  ],
+  "370000": [
+    {
+      "province": "山东省",
+      "name": "济南市",
+      "id": "370100"
+    },
+    {
+      "province": "山东省",
+      "name": "青岛市",
+      "id": "370200"
+    },
+    {
+      "province": "山东省",
+      "name": "淄博市",
+      "id": "370300"
+    },
+    {
+      "province": "山东省",
+      "name": "枣庄市",
+      "id": "370400"
+    },
+    {
+      "province": "山东省",
+      "name": "东营市",
+      "id": "370500"
+    },
+    {
+      "province": "山东省",
+      "name": "烟台市",
+      "id": "370600"
+    },
+    {
+      "province": "山东省",
+      "name": "潍坊市",
+      "id": "370700"
+    },
+    {
+      "province": "山东省",
+      "name": "济宁市",
+      "id": "370800"
+    },
+    {
+      "province": "山东省",
+      "name": "泰安市",
+      "id": "370900"
+    },
+    {
+      "province": "山东省",
+      "name": "威海市",
+      "id": "371000"
+    },
+    {
+      "province": "山东省",
+      "name": "日照市",
+      "id": "371100"
+    },
+    {
+      "province": "山东省",
+      "name": "莱芜市",
+      "id": "371200"
+    },
+    {
+      "province": "山东省",
+      "name": "临沂市",
+      "id": "371300"
+    },
+    {
+      "province": "山东省",
+      "name": "德州市",
+      "id": "371400"
+    },
+    {
+      "province": "山东省",
+      "name": "聊城市",
+      "id": "371500"
+    },
+    {
+      "province": "山东省",
+      "name": "滨州市",
+      "id": "371600"
+    },
+    {
+      "province": "山东省",
+      "name": "菏泽市",
+      "id": "371700"
+    }
+  ],
+  "410000": [
+    {
+      "province": "河南省",
+      "name": "郑州市",
+      "id": "410100"
+    },
+    {
+      "province": "河南省",
+      "name": "开封市",
+      "id": "410200"
+    },
+    {
+      "province": "河南省",
+      "name": "洛阳市",
+      "id": "410300"
+    },
+    {
+      "province": "河南省",
+      "name": "平顶山市",
+      "id": "410400"
+    },
+    {
+      "province": "河南省",
+      "name": "安阳市",
+      "id": "410500"
+    },
+    {
+      "province": "河南省",
+      "name": "鹤壁市",
+      "id": "410600"
+    },
+    {
+      "province": "河南省",
+      "name": "新乡市",
+      "id": "410700"
+    },
+    {
+      "province": "河南省",
+      "name": "焦作市",
+      "id": "410800"
+    },
+    {
+      "province": "河南省",
+      "name": "濮阳市",
+      "id": "410900"
+    },
+    {
+      "province": "河南省",
+      "name": "许昌市",
+      "id": "411000"
+    },
+    {
+      "province": "河南省",
+      "name": "漯河市",
+      "id": "411100"
+    },
+    {
+      "province": "河南省",
+      "name": "三门峡市",
+      "id": "411200"
+    },
+    {
+      "province": "河南省",
+      "name": "南阳市",
+      "id": "411300"
+    },
+    {
+      "province": "河南省",
+      "name": "商丘市",
+      "id": "411400"
+    },
+    {
+      "province": "河南省",
+      "name": "信阳市",
+      "id": "411500"
+    },
+    {
+      "province": "河南省",
+      "name": "周口市",
+      "id": "411600"
+    },
+    {
+      "province": "河南省",
+      "name": "驻马店市",
+      "id": "411700"
+    },
+    {
+      "province": "河南省",
+      "name": "省直辖县级行政区划",
+      "id": "419000"
+    }
+  ],
+  "420000": [
+    {
+      "province": "湖北省",
+      "name": "武汉市",
+      "id": "420100"
+    },
+    {
+      "province": "湖北省",
+      "name": "黄石市",
+      "id": "420200"
+    },
+    {
+      "province": "湖北省",
+      "name": "十堰市",
+      "id": "420300"
+    },
+    {
+      "province": "湖北省",
+      "name": "宜昌市",
+      "id": "420500"
+    },
+    {
+      "province": "湖北省",
+      "name": "襄阳市",
+      "id": "420600"
+    },
+    {
+      "province": "湖北省",
+      "name": "鄂州市",
+      "id": "420700"
+    },
+    {
+      "province": "湖北省",
+      "name": "荆门市",
+      "id": "420800"
+    },
+    {
+      "province": "湖北省",
+      "name": "孝感市",
+      "id": "420900"
+    },
+    {
+      "province": "湖北省",
+      "name": "荆州市",
+      "id": "421000"
+    },
+    {
+      "province": "湖北省",
+      "name": "黄冈市",
+      "id": "421100"
+    },
+    {
+      "province": "湖北省",
+      "name": "咸宁市",
+      "id": "421200"
+    },
+    {
+      "province": "湖北省",
+      "name": "随州市",
+      "id": "421300"
+    },
+    {
+      "province": "湖北省",
+      "name": "恩施土家族苗族自治州",
+      "id": "422800"
+    },
+    {
+      "province": "湖北省",
+      "name": "省直辖县级行政区划",
+      "id": "429000"
+    }
+  ],
+  "430000": [
+    {
+      "province": "湖南省",
+      "name": "长沙市",
+      "id": "430100"
+    },
+    {
+      "province": "湖南省",
+      "name": "株洲市",
+      "id": "430200"
+    },
+    {
+      "province": "湖南省",
+      "name": "湘潭市",
+      "id": "430300"
+    },
+    {
+      "province": "湖南省",
+      "name": "衡阳市",
+      "id": "430400"
+    },
+    {
+      "province": "湖南省",
+      "name": "邵阳市",
+      "id": "430500"
+    },
+    {
+      "province": "湖南省",
+      "name": "岳阳市",
+      "id": "430600"
+    },
+    {
+      "province": "湖南省",
+      "name": "常德市",
+      "id": "430700"
+    },
+    {
+      "province": "湖南省",
+      "name": "张家界市",
+      "id": "430800"
+    },
+    {
+      "province": "湖南省",
+      "name": "益阳市",
+      "id": "430900"
+    },
+    {
+      "province": "湖南省",
+      "name": "郴州市",
+      "id": "431000"
+    },
+    {
+      "province": "湖南省",
+      "name": "永州市",
+      "id": "431100"
+    },
+    {
+      "province": "湖南省",
+      "name": "怀化市",
+      "id": "431200"
+    },
+    {
+      "province": "湖南省",
+      "name": "娄底市",
+      "id": "431300"
+    },
+    {
+      "province": "湖南省",
+      "name": "湘西土家族苗族自治州",
+      "id": "433100"
+    }
+  ],
+  "440000": [
+    {
+      "province": "广东省",
+      "name": "广州市",
+      "id": "440100"
+    },
+    {
+      "province": "广东省",
+      "name": "韶关市",
+      "id": "440200"
+    },
+    {
+      "province": "广东省",
+      "name": "深圳市",
+      "id": "440300"
+    },
+    {
+      "province": "广东省",
+      "name": "珠海市",
+      "id": "440400"
+    },
+    {
+      "province": "广东省",
+      "name": "汕头市",
+      "id": "440500"
+    },
+    {
+      "province": "广东省",
+      "name": "佛山市",
+      "id": "440600"
+    },
+    {
+      "province": "广东省",
+      "name": "江门市",
+      "id": "440700"
+    },
+    {
+      "province": "广东省",
+      "name": "湛江市",
+      "id": "440800"
+    },
+    {
+      "province": "广东省",
+      "name": "茂名市",
+      "id": "440900"
+    },
+    {
+      "province": "广东省",
+      "name": "肇庆市",
+      "id": "441200"
+    },
+    {
+      "province": "广东省",
+      "name": "惠州市",
+      "id": "441300"
+    },
+    {
+      "province": "广东省",
+      "name": "梅州市",
+      "id": "441400"
+    },
+    {
+      "province": "广东省",
+      "name": "汕尾市",
+      "id": "441500"
+    },
+    {
+      "province": "广东省",
+      "name": "河源市",
+      "id": "441600"
+    },
+    {
+      "province": "广东省",
+      "name": "阳江市",
+      "id": "441700"
+    },
+    {
+      "province": "广东省",
+      "name": "清远市",
+      "id": "441800"
+    },
+    {
+      "province": "广东省",
+      "name": "东莞市",
+      "id": "441900"
+    },
+    {
+      "province": "广东省",
+      "name": "中山市",
+      "id": "442000"
+    },
+    {
+      "province": "广东省",
+      "name": "潮州市",
+      "id": "445100"
+    },
+    {
+      "province": "广东省",
+      "name": "揭阳市",
+      "id": "445200"
+    },
+    {
+      "province": "广东省",
+      "name": "云浮市",
+      "id": "445300"
+    }
+  ],
+  "450000": [
+    {
+      "province": "广西壮族自治区",
+      "name": "南宁市",
+      "id": "450100"
+    },
+    {
+      "province": "广西壮族自治区",
+      "name": "柳州市",
+      "id": "450200"
+    },
+    {
+      "province": "广西壮族自治区",
+      "name": "桂林市",
+      "id": "450300"
+    },
+    {
+      "province": "广西壮族自治区",
+      "name": "梧州市",
+      "id": "450400"
+    },
+    {
+      "province": "广西壮族自治区",
+      "name": "北海市",
+      "id": "450500"
+    },
+    {
+      "province": "广西壮族自治区",
+      "name": "防城港市",
+      "id": "450600"
+    },
+    {
+      "province": "广西壮族自治区",
+      "name": "钦州市",
+      "id": "450700"
+    },
+    {
+      "province": "广西壮族自治区",
+      "name": "贵港市",
+      "id": "450800"
+    },
+    {
+      "province": "广西壮族自治区",
+      "name": "玉林市",
+      "id": "450900"
+    },
+    {
+      "province": "广西壮族自治区",
+      "name": "百色市",
+      "id": "451000"
+    },
+    {
+      "province": "广西壮族自治区",
+      "name": "贺州市",
+      "id": "451100"
+    },
+    {
+      "province": "广西壮族自治区",
+      "name": "河池市",
+      "id": "451200"
+    },
+    {
+      "province": "广西壮族自治区",
+      "name": "来宾市",
+      "id": "451300"
+    },
+    {
+      "province": "广西壮族自治区",
+      "name": "崇左市",
+      "id": "451400"
+    }
+  ],
+  "460000": [
+    {
+      "province": "海南省",
+      "name": "海口市",
+      "id": "460100"
+    },
+    {
+      "province": "海南省",
+      "name": "三亚市",
+      "id": "460200"
+    },
+    {
+      "province": "海南省",
+      "name": "三沙市",
+      "id": "460300"
+    },
+    {
+      "province": "海南省",
+      "name": "儋州市",
+      "id": "460400"
+    },
+    {
+      "province": "海南省",
+      "name": "省直辖县级行政区划",
+      "id": "469000"
+    }
+  ],
+  "500000": [
+    {
+      "province": "重庆市",
+      "name": "市辖区",
+      "id": "500100"
+    },
+    {
+      "province": "重庆市",
+      "name": "县",
+      "id": "500200"
+    }
+  ],
+  "510000": [
+    {
+      "province": "四川省",
+      "name": "成都市",
+      "id": "510100"
+    },
+    {
+      "province": "四川省",
+      "name": "自贡市",
+      "id": "510300"
+    },
+    {
+      "province": "四川省",
+      "name": "攀枝花市",
+      "id": "510400"
+    },
+    {
+      "province": "四川省",
+      "name": "泸州市",
+      "id": "510500"
+    },
+    {
+      "province": "四川省",
+      "name": "德阳市",
+      "id": "510600"
+    },
+    {
+      "province": "四川省",
+      "name": "绵阳市",
+      "id": "510700"
+    },
+    {
+      "province": "四川省",
+      "name": "广元市",
+      "id": "510800"
+    },
+    {
+      "province": "四川省",
+      "name": "遂宁市",
+      "id": "510900"
+    },
+    {
+      "province": "四川省",
+      "name": "内江市",
+      "id": "511000"
+    },
+    {
+      "province": "四川省",
+      "name": "乐山市",
+      "id": "511100"
+    },
+    {
+      "province": "四川省",
+      "name": "南充市",
+      "id": "511300"
+    },
+    {
+      "province": "四川省",
+      "name": "眉山市",
+      "id": "511400"
+    },
+    {
+      "province": "四川省",
+      "name": "宜宾市",
+      "id": "511500"
+    },
+    {
+      "province": "四川省",
+      "name": "广安市",
+      "id": "511600"
+    },
+    {
+      "province": "四川省",
+      "name": "达州市",
+      "id": "511700"
+    },
+    {
+      "province": "四川省",
+      "name": "雅安市",
+      "id": "511800"
+    },
+    {
+      "province": "四川省",
+      "name": "巴中市",
+      "id": "511900"
+    },
+    {
+      "province": "四川省",
+      "name": "资阳市",
+      "id": "512000"
+    },
+    {
+      "province": "四川省",
+      "name": "阿坝藏族羌族自治州",
+      "id": "513200"
+    },
+    {
+      "province": "四川省",
+      "name": "甘孜藏族自治州",
+      "id": "513300"
+    },
+    {
+      "province": "四川省",
+      "name": "凉山彝族自治州",
+      "id": "513400"
+    }
+  ],
+  "520000": [
+    {
+      "province": "贵州省",
+      "name": "贵阳市",
+      "id": "520100"
+    },
+    {
+      "province": "贵州省",
+      "name": "六盘水市",
+      "id": "520200"
+    },
+    {
+      "province": "贵州省",
+      "name": "遵义市",
+      "id": "520300"
+    },
+    {
+      "province": "贵州省",
+      "name": "安顺市",
+      "id": "520400"
+    },
+    {
+      "province": "贵州省",
+      "name": "毕节市",
+      "id": "520500"
+    },
+    {
+      "province": "贵州省",
+      "name": "铜仁市",
+      "id": "520600"
+    },
+    {
+      "province": "贵州省",
+      "name": "黔西南布依族苗族自治州",
+      "id": "522300"
+    },
+    {
+      "province": "贵州省",
+      "name": "黔东南苗族侗族自治州",
+      "id": "522600"
+    },
+    {
+      "province": "贵州省",
+      "name": "黔南布依族苗族自治州",
+      "id": "522700"
+    }
+  ],
+  "530000": [
+    {
+      "province": "云南省",
+      "name": "昆明市",
+      "id": "530100"
+    },
+    {
+      "province": "云南省",
+      "name": "曲靖市",
+      "id": "530300"
+    },
+    {
+      "province": "云南省",
+      "name": "玉溪市",
+      "id": "530400"
+    },
+    {
+      "province": "云南省",
+      "name": "保山市",
+      "id": "530500"
+    },
+    {
+      "province": "云南省",
+      "name": "昭通市",
+      "id": "530600"
+    },
+    {
+      "province": "云南省",
+      "name": "丽江市",
+      "id": "530700"
+    },
+    {
+      "province": "云南省",
+      "name": "普洱市",
+      "id": "530800"
+    },
+    {
+      "province": "云南省",
+      "name": "临沧市",
+      "id": "530900"
+    },
+    {
+      "province": "云南省",
+      "name": "楚雄彝族自治州",
+      "id": "532300"
+    },
+    {
+      "province": "云南省",
+      "name": "红河哈尼族彝族自治州",
+      "id": "532500"
+    },
+    {
+      "province": "云南省",
+      "name": "文山壮族苗族自治州",
+      "id": "532600"
+    },
+    {
+      "province": "云南省",
+      "name": "西双版纳傣族自治州",
+      "id": "532800"
+    },
+    {
+      "province": "云南省",
+      "name": "大理白族自治州",
+      "id": "532900"
+    },
+    {
+      "province": "云南省",
+      "name": "德宏傣族景颇族自治州",
+      "id": "533100"
+    },
+    {
+      "province": "云南省",
+      "name": "怒江傈僳族自治州",
+      "id": "533300"
+    },
+    {
+      "province": "云南省",
+      "name": "迪庆藏族自治州",
+      "id": "533400"
+    }
+  ],
+  "540000": [
+    {
+      "province": "西藏自治区",
+      "name": "拉萨市",
+      "id": "540100"
+    },
+    {
+      "province": "西藏自治区",
+      "name": "日喀则市",
+      "id": "540200"
+    },
+    {
+      "province": "西藏自治区",
+      "name": "昌都市",
+      "id": "540300"
+    },
+    {
+      "province": "西藏自治区",
+      "name": "林芝市",
+      "id": "540400"
+    },
+    {
+      "province": "西藏自治区",
+      "name": "山南市",
+      "id": "540500"
+    },
+    {
+      "province": "西藏自治区",
+      "name": "那曲地区",
+      "id": "542400"
+    },
+    {
+      "province": "西藏自治区",
+      "name": "阿里地区",
+      "id": "542500"
+    }
+  ],
+  "610000": [
+    {
+      "province": "陕西省",
+      "name": "西安市",
+      "id": "610100"
+    },
+    {
+      "province": "陕西省",
+      "name": "铜川市",
+      "id": "610200"
+    },
+    {
+      "province": "陕西省",
+      "name": "宝鸡市",
+      "id": "610300"
+    },
+    {
+      "province": "陕西省",
+      "name": "咸阳市",
+      "id": "610400"
+    },
+    {
+      "province": "陕西省",
+      "name": "渭南市",
+      "id": "610500"
+    },
+    {
+      "province": "陕西省",
+      "name": "延安市",
+      "id": "610600"
+    },
+    {
+      "province": "陕西省",
+      "name": "汉中市",
+      "id": "610700"
+    },
+    {
+      "province": "陕西省",
+      "name": "榆林市",
+      "id": "610800"
+    },
+    {
+      "province": "陕西省",
+      "name": "安康市",
+      "id": "610900"
+    },
+    {
+      "province": "陕西省",
+      "name": "商洛市",
+      "id": "611000"
+    }
+  ],
+  "620000": [
+    {
+      "province": "甘肃省",
+      "name": "兰州市",
+      "id": "620100"
+    },
+    {
+      "province": "甘肃省",
+      "name": "嘉峪关市",
+      "id": "620200"
+    },
+    {
+      "province": "甘肃省",
+      "name": "金昌市",
+      "id": "620300"
+    },
+    {
+      "province": "甘肃省",
+      "name": "白银市",
+      "id": "620400"
+    },
+    {
+      "province": "甘肃省",
+      "name": "天水市",
+      "id": "620500"
+    },
+    {
+      "province": "甘肃省",
+      "name": "武威市",
+      "id": "620600"
+    },
+    {
+      "province": "甘肃省",
+      "name": "张掖市",
+      "id": "620700"
+    },
+    {
+      "province": "甘肃省",
+      "name": "平凉市",
+      "id": "620800"
+    },
+    {
+      "province": "甘肃省",
+      "name": "酒泉市",
+      "id": "620900"
+    },
+    {
+      "province": "甘肃省",
+      "name": "庆阳市",
+      "id": "621000"
+    },
+    {
+      "province": "甘肃省",
+      "name": "定西市",
+      "id": "621100"
+    },
+    {
+      "province": "甘肃省",
+      "name": "陇南市",
+      "id": "621200"
+    },
+    {
+      "province": "甘肃省",
+      "name": "临夏回族自治州",
+      "id": "622900"
+    },
+    {
+      "province": "甘肃省",
+      "name": "甘南藏族自治州",
+      "id": "623000"
+    }
+  ],
+  "630000": [
+    {
+      "province": "青海省",
+      "name": "西宁市",
+      "id": "630100"
+    },
+    {
+      "province": "青海省",
+      "name": "海东市",
+      "id": "630200"
+    },
+    {
+      "province": "青海省",
+      "name": "海北藏族自治州",
+      "id": "632200"
+    },
+    {
+      "province": "青海省",
+      "name": "黄南藏族自治州",
+      "id": "632300"
+    },
+    {
+      "province": "青海省",
+      "name": "海南藏族自治州",
+      "id": "632500"
+    },
+    {
+      "province": "青海省",
+      "name": "果洛藏族自治州",
+      "id": "632600"
+    },
+    {
+      "province": "青海省",
+      "name": "玉树藏族自治州",
+      "id": "632700"
+    },
+    {
+      "province": "青海省",
+      "name": "海西蒙古族藏族自治州",
+      "id": "632800"
+    }
+  ],
+  "640000": [
+    {
+      "province": "宁夏回族自治区",
+      "name": "银川市",
+      "id": "640100"
+    },
+    {
+      "province": "宁夏回族自治区",
+      "name": "石嘴山市",
+      "id": "640200"
+    },
+    {
+      "province": "宁夏回族自治区",
+      "name": "吴忠市",
+      "id": "640300"
+    },
+    {
+      "province": "宁夏回族自治区",
+      "name": "固原市",
+      "id": "640400"
+    },
+    {
+      "province": "宁夏回族自治区",
+      "name": "中卫市",
+      "id": "640500"
+    }
+  ],
+  "650000": [
+    {
+      "province": "新疆维吾尔自治区",
+      "name": "乌鲁木齐市",
+      "id": "650100"
+    },
+    {
+      "province": "新疆维吾尔自治区",
+      "name": "克拉玛依市",
+      "id": "650200"
+    },
+    {
+      "province": "新疆维吾尔自治区",
+      "name": "吐鲁番市",
+      "id": "650400"
+    },
+    {
+      "province": "新疆维吾尔自治区",
+      "name": "哈密市",
+      "id": "650500"
+    },
+    {
+      "province": "新疆维吾尔自治区",
+      "name": "昌吉回族自治州",
+      "id": "652300"
+    },
+    {
+      "province": "新疆维吾尔自治区",
+      "name": "博尔塔拉蒙古自治州",
+      "id": "652700"
+    },
+    {
+      "province": "新疆维吾尔自治区",
+      "name": "巴音郭楞蒙古自治州",
+      "id": "652800"
+    },
+    {
+      "province": "新疆维吾尔自治区",
+      "name": "阿克苏地区",
+      "id": "652900"
+    },
+    {
+      "province": "新疆维吾尔自治区",
+      "name": "克孜勒苏柯尔克孜自治州",
+      "id": "653000"
+    },
+    {
+      "province": "新疆维吾尔自治区",
+      "name": "喀什地区",
+      "id": "653100"
+    },
+    {
+      "province": "新疆维吾尔自治区",
+      "name": "和田地区",
+      "id": "653200"
+    },
+    {
+      "province": "新疆维吾尔自治区",
+      "name": "伊犁哈萨克自治州",
+      "id": "654000"
+    },
+    {
+      "province": "新疆维吾尔自治区",
+      "name": "塔城地区",
+      "id": "654200"
+    },
+    {
+      "province": "新疆维吾尔自治区",
+      "name": "阿勒泰地区",
+      "id": "654300"
+    },
+    {
+      "province": "新疆维吾尔自治区",
+      "name": "自治区直辖县级行政区划",
+      "id": "659000"
+    }
+  ]
+}
diff --git a/src/pages/account/settings/geographic/province.json b/src/pages/account/settings/geographic/province.json
new file mode 100644
index 0000000000000000000000000000000000000000..910c83f08e3186bae3a6f13b19ae8b0e4b5c5a0d
--- /dev/null
+++ b/src/pages/account/settings/geographic/province.json
@@ -0,0 +1,138 @@
+[
+  {
+    "name": "北京市",
+    "id": "110000"
+  },
+  {
+    "name": "天津市",
+    "id": "120000"
+  },
+  {
+    "name": "河北省",
+    "id": "130000"
+  },
+  {
+    "name": "山西省",
+    "id": "140000"
+  },
+  {
+    "name": "内蒙古自治区",
+    "id": "150000"
+  },
+  {
+    "name": "辽宁省",
+    "id": "210000"
+  },
+  {
+    "name": "吉林省",
+    "id": "220000"
+  },
+  {
+    "name": "黑龙江省",
+    "id": "230000"
+  },
+  {
+    "name": "上海市",
+    "id": "310000"
+  },
+  {
+    "name": "江苏省",
+    "id": "320000"
+  },
+  {
+    "name": "浙江省",
+    "id": "330000"
+  },
+  {
+    "name": "安徽省",
+    "id": "340000"
+  },
+  {
+    "name": "福建省",
+    "id": "350000"
+  },
+  {
+    "name": "江西省",
+    "id": "360000"
+  },
+  {
+    "name": "山东省",
+    "id": "370000"
+  },
+  {
+    "name": "河南省",
+    "id": "410000"
+  },
+  {
+    "name": "湖北省",
+    "id": "420000"
+  },
+  {
+    "name": "湖南省",
+    "id": "430000"
+  },
+  {
+    "name": "广东省",
+    "id": "440000"
+  },
+  {
+    "name": "广西壮族自治区",
+    "id": "450000"
+  },
+  {
+    "name": "海南省",
+    "id": "460000"
+  },
+  {
+    "name": "重庆市",
+    "id": "500000"
+  },
+  {
+    "name": "四川省",
+    "id": "510000"
+  },
+  {
+    "name": "贵州省",
+    "id": "520000"
+  },
+  {
+    "name": "云南省",
+    "id": "530000"
+  },
+  {
+    "name": "西藏自治区",
+    "id": "540000"
+  },
+  {
+    "name": "陕西省",
+    "id": "610000"
+  },
+  {
+    "name": "甘肃省",
+    "id": "620000"
+  },
+  {
+    "name": "青海省",
+    "id": "630000"
+  },
+  {
+    "name": "宁夏回族自治区",
+    "id": "640000"
+  },
+  {
+    "name": "新疆维吾尔自治区",
+    "id": "650000"
+  },
+  {
+    "name": "台湾省",
+    "id": "710000"
+  },
+  {
+    "name": "香港特别行政区",
+    "id": "810000"
+  },
+  {
+    "name": "澳门特别行政区",
+    "id": "820000"
+  }
+]
diff --git a/src/pages/account/settings/index.tsx b/src/pages/account/settings/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..5ebf0a71dedd7bf7e3727ce4fdadb955d6e4ee70
--- /dev/null
+++ b/src/pages/account/settings/index.tsx
@@ -0,0 +1,167 @@
+import React, { Component } from 'react';
+
+import { Dispatch } from 'redux';
+import { FormattedMessage } from 'umi-plugin-react/locale';
+import { GridContent } from '@ant-design/pro-layout';
+import { Menu } from 'antd';
+import { connect } from 'dva';
+import BaseView from './components/base';
+import BindingView from './components/binding';
+import { CurrentUser } from './data.d';
+import NotificationView from './components/notification';
+import SecurityView from './components/security';
+import styles from './style.less';
+
+const { Item } = Menu;
+
+interface SettingsProps {
+  dispatch: Dispatch<any>;
+  currentUser: CurrentUser;
+}
+
+type SettingsStateKeys = 'base' | 'security' | 'binding' | 'notification';
+interface SettingsState {
+  mode: 'inline' | 'horizontal';
+  menuMap: {
+    [key: string]: React.ReactNode;
+  };
+  selectKey: SettingsStateKeys;
+}
+@connect(({ accountSettings }: { accountSettings: { currentUser: CurrentUser } }) => ({
+  currentUser: accountSettings.currentUser,
+}))
+class Settings extends Component<
+  SettingsProps,
+  SettingsState
+> {
+  main: HTMLDivElement | undefined = undefined;
+
+  constructor(props: SettingsProps) {
+    super(props);
+    const menuMap = {
+      base: <FormattedMessage id="account-settings.menuMap.basic" defaultMessage="Basic Settings" />,
+      security: (
+        <FormattedMessage id="account-settings.menuMap.security" defaultMessage="Security Settings" />
+      ),
+      binding: (
+        <FormattedMessage id="account-settings.menuMap.binding" defaultMessage="Account Binding" />
+      ),
+      notification: (
+        <FormattedMessage
+          id="account-settings.menuMap.notification"
+          defaultMessage="New Message Notification"
+        />
+      ),
+    };
+    this.state = {
+      mode: 'inline',
+      menuMap,
+      selectKey: 'base',
+    };
+  }
+
+  componentDidMount() {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'accountSettings/fetchCurrent',
+    });
+    window.addEventListener('resize', this.resize);
+    this.resize();
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.resize);
+  }
+
+  getMenu = () => {
+    const { menuMap } = this.state;
+    return Object.keys(menuMap).map(item => <Item key={item}>{menuMap[item]}</Item>);
+  };
+
+  getRightTitle = () => {
+    const { selectKey, menuMap } = this.state;
+    return menuMap[selectKey];
+  };
+
+  selectKey = (key: SettingsStateKeys) => {
+    this.setState({
+      selectKey: key,
+    });
+  };
+
+  resize = () => {
+    if (!this.main) {
+      return;
+    }
+    requestAnimationFrame(() => {
+      if (!this.main) {
+        return;
+      }
+      let mode: 'inline' | 'horizontal' = 'inline';
+      const { offsetWidth } = this.main;
+      if (this.main.offsetWidth < 641 && offsetWidth > 400) {
+        mode = 'horizontal';
+      }
+      if (window.innerWidth < 768 && offsetWidth > 400) {
+        mode = 'horizontal';
+      }
+      this.setState({
+        mode,
+      });
+    });
+  };
+
+  renderChildren = () => {
+    const { selectKey } = this.state;
+    switch (selectKey) {
+      case 'base':
+        return <BaseView />;
+      case 'security':
+        return <SecurityView />;
+      case 'binding':
+        return <BindingView />;
+      case 'notification':
+        return <NotificationView />;
+      default:
+        break;
+    }
+
+    return null;
+  };
+
+  render() {
+    const { currentUser } = this.props;
+    if (!currentUser.userid) {
+      return '';
+    }
+    const { mode, selectKey } = this.state;
+    return (
+      <GridContent>
+        <div
+          className={styles.main}
+          ref={ref => {
+            if (ref) {
+              this.main = ref;
+            }
+          }}
+        >
+          <div className={styles.leftMenu}>
+            <Menu
+              mode={mode}
+              selectedKeys={[selectKey]}
+              onClick={({ key }) => this.selectKey(key as SettingsStateKeys)}
+            >
+              {this.getMenu()}
+            </Menu>
+          </div>
+          <div className={styles.right}>
+            <div className={styles.title}>{this.getRightTitle()}</div>
+            {this.renderChildren()}
+          </div>
+        </div>
+      </GridContent>
+    );
+  }
+}
+
+export default Settings;
diff --git a/src/pages/account/settings/locales/en-US.ts b/src/pages/account/settings/locales/en-US.ts
new file mode 100644
index 0000000000000000000000000000000000000000..49b58a926fd7c8c7dedbc2d1fe5ec9216648399f
--- /dev/null
+++ b/src/pages/account/settings/locales/en-US.ts
@@ -0,0 +1,61 @@
+export default {
+  'account-settings.menuMap.basic': 'Basic Settings',
+  'account-settings.menuMap.security': 'Security Settings',
+  'account-settings.menuMap.binding': 'Account Binding',
+  'account-settings.menuMap.notification': 'New Message Notification',
+  'account-settings.basic.avatar': 'Avatar',
+  'account-settings.basic.change-avatar': 'Change avatar',
+  'account-settings.basic.email': 'Email',
+  'account-settings.basic.email-message': 'Please input your email!',
+  'account-settings.basic.nickname': 'Nickname',
+  'account-settings.basic.nickname-message': 'Please input your Nickname!',
+  'account-settings.basic.profile': 'Personal profile',
+  'account-settings.basic.profile-message': 'Please input your personal profile!',
+  'account-settings.basic.profile-placeholder': 'Brief introduction to yourself',
+  'account-settings.basic.country': 'Country/Region',
+  'account-settings.basic.country-message': 'Please input your country!',
+  'account-settings.basic.geographic': 'Province or city',
+  'account-settings.basic.geographic-message': 'Please input your geographic info!',
+  'account-settings.basic.address': 'Street Address',
+  'account-settings.basic.address-message': 'Please input your address!',
+  'account-settings.basic.phone': 'Phone Number',
+  'account-settings.basic.phone-message': 'Please input your phone!',
+  'account-settings.basic.update': 'Update Information',
+  'account-settings.basic.update.success': 'Update basic information successfully',
+  'account-settings.security.strong': 'Strong',
+  'account-settings.security.medium': 'Medium',
+  'account-settings.security.weak': 'Weak',
+  'account-settings.security.password': 'Account Password',
+  'account-settings.security.password-description': 'Current password strength：',
+  'account-settings.security.phone': 'Security Phone',
+  'account-settings.security.phone-description': 'Bound phone：',
+  'account-settings.security.question': 'Security Question',
+  'account-settings.security.question-description':
+    'The security question is not set, and the security policy can effectively protect the account security',
+  'account-settings.security.email': 'Backup Email',
+  'account-settings.security.email-description': 'Bound Email：',
+  'account-settings.security.mfa': 'MFA Device',
+  'account-settings.security.mfa-description':
+    'Unbound MFA device, after binding, can be confirmed twice',
+  'account-settings.security.modify': 'Modify',
+  'account-settings.security.set': 'Set',
+  'account-settings.security.bind': 'Bind',
+  'account-settings.binding.taobao': 'Binding Taobao',
+  'account-settings.binding.taobao-description': 'Currently unbound Taobao account',
+  'account-settings.binding.alipay': 'Binding Alipay',
+  'account-settings.binding.alipay-description': 'Currently unbound Alipay account',
+  'account-settings.binding.dingding': 'Binding DingTalk',
+  'account-settings.binding.dingding-description': 'Currently unbound DingTalk account',
+  'account-settings.binding.bind': 'Bind',
+  'account-settings.notification.password': 'Account Password',
+  'account-settings.notification.password-description':
+    'Messages from other users will be notified in the form of a station letter',
+  'account-settings.notification.messages': 'System Messages',
+  'account-settings.notification.messages-description':
+    'System messages will be notified in the form of a station letter',
+  'account-settings.notification.todo': 'To-do Notification',
+  'account-settings.notification.todo-description':
+    'The to-do list will be notified in the form of a letter from the station',
+  'account-settings.settings.open': 'Open',
+  'account-settings.settings.close': 'Close',
+};
diff --git a/src/pages/account/settings/locales/zh-CN.ts b/src/pages/account/settings/locales/zh-CN.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a05152d50f52b37806bdaa0524d5e99dbadfb6b8
--- /dev/null
+++ b/src/pages/account/settings/locales/zh-CN.ts
@@ -0,0 +1,56 @@
+export default {
+  'account-settings.menuMap.basic': '基本设置',
+  'account-settings.menuMap.security': '安全设置',
+  'account-settings.menuMap.binding': '账号绑定',
+  'account-settings.menuMap.notification': '新消息通知',
+  'account-settings.basic.avatar': '头像',
+  'account-settings.basic.change-avatar': '更换头像',
+  'account-settings.basic.email': '邮箱',
+  'account-settings.basic.email-message': '请输入您的邮箱!',
+  'account-settings.basic.nickname': '昵称',
+  'account-settings.basic.nickname-message': '请输入您的昵称!',
+  'account-settings.basic.profile': '个人简介',
+  'account-settings.basic.profile-message': '请输入个人简介!',
+  'account-settings.basic.profile-placeholder': '个人简介',
+  'account-settings.basic.country': '国家/地区',
+  'account-settings.basic.country-message': '请输入您的国家或地区!',
+  'account-settings.basic.geographic': '所在省市',
+  'account-settings.basic.geographic-message': '请输入您的所在省市!',
+  'account-settings.basic.address': '街道地址',
+  'account-settings.basic.address-message': '请输入您的街道地址!',
+  'account-settings.basic.phone': '联系电话',
+  'account-settings.basic.phone-message': '请输入您的联系电话!',
+  'account-settings.basic.update': '更新基本信息',
+  'account-settings.basic.update.success': '更新基本信息成功',
+  'account-settings.security.strong': '强',
+  'account-settings.security.medium': '中',
+  'account-settings.security.weak': '弱',
+  'account-settings.security.password': '账户密码',
+  'account-settings.security.password-description': '当前密码强度：',
+  'account-settings.security.phone': '密保手机',
+  'account-settings.security.phone-description': '已绑定手机：',
+  'account-settings.security.question': '密保问题',
+  'account-settings.security.question-description': '未设置密保问题，密保问题可有效保护账户安全',
+  'account-settings.security.email': '备用邮箱',
+  'account-settings.security.email-description': '已绑定邮箱：',
+  'account-settings.security.mfa': 'MFA 设备',
+  'account-settings.security.mfa-description': '未绑定 MFA 设备，绑定后，可以进行二次确认',
+  'account-settings.security.modify': '修改',
+  'account-settings.security.set': '设置',
+  'account-settings.security.bind': '绑定',
+  'account-settings.binding.taobao': '绑定淘宝',
+  'account-settings.binding.taobao-description': '当前未绑定淘宝账号',
+  'account-settings.binding.alipay': '绑定支付宝',
+  'account-settings.binding.alipay-description': '当前未绑定支付宝账号',
+  'account-settings.binding.dingding': '绑定钉钉',
+  'account-settings.binding.dingding-description': '当前未绑定钉钉账号',
+  'account-settings.binding.bind': '绑定',
+  'account-settings.notification.password': '账户密码',
+  'account-settings.notification.password-description': '其他用户的消息将以站内信的形式通知',
+  'account-settings.notification.messages': '系统消息',
+  'account-settings.notification.messages-description': '系统消息将以站内信的形式通知',
+  'account-settings.notification.todo': '待办任务',
+  'account-settings.notification.todo-description': '待办任务将以站内信的形式通知',
+  'account-settings.settings.open': '开',
+  'account-settings.settings.close': '关',
+};
diff --git a/src/pages/account/settings/locales/zh-TW.ts b/src/pages/account/settings/locales/zh-TW.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a769edd58741f243ed8b4dbf0e94aeda9de344c0
--- /dev/null
+++ b/src/pages/account/settings/locales/zh-TW.ts
@@ -0,0 +1,56 @@
+export default {
+  'account-settings.menuMap.basic': '基本設置',
+  'account-settings.menuMap.security': '安全設置',
+  'account-settings.menuMap.binding': '賬號綁定',
+  'account-settings.menuMap.notification': '新消息通知',
+  'account-settings.basic.avatar': '頭像',
+  'account-settings.basic.change-avatar': '更換頭像',
+  'account-settings.basic.email': '郵箱',
+  'account-settings.basic.email-message': '請輸入您的郵箱!',
+  'account-settings.basic.nickname': '昵稱',
+  'account-settings.basic.nickname-message': '請輸入您的昵稱!',
+  'account-settings.basic.profile': '個人簡介',
+  'account-settings.basic.profile-message': '請輸入個人簡介!',
+  'account-settings.basic.profile-placeholder': '個人簡介',
+  'account-settings.basic.country': '國家/地區',
+  'account-settings.basic.country-message': '請輸入您的國家或地區!',
+  'account-settings.basic.geographic': '所在省市',
+  'account-settings.basic.geographic-message': '請輸入您的所在省市!',
+  'account-settings.basic.address': '街道地址',
+  'account-settings.basic.address-message': '請輸入您的街道地址!',
+  'account-settings.basic.phone': '聯系電話',
+  'account-settings.basic.phone-message': '請輸入您的聯系電話!',
+  'account-settings.basic.update': '更新基本信息',
+  'account-settings.basic.update.success': '更新基本信息成功',
+  'account-settings.security.strong': '強',
+  'account-settings.security.medium': '中',
+  'account-settings.security.weak': '弱',
+  'account-settings.security.password': '賬戶密碼',
+  'account-settings.security.password-description': '當前密碼強度：',
+  'account-settings.security.phone': '密保手機',
+  'account-settings.security.phone-description': '已綁定手機：',
+  'account-settings.security.question': '密保問題',
+  'account-settings.security.question-description': '未設置密保問題，密保問題可有效保護賬戶安全',
+  'account-settings.security.email': '備用郵箱',
+  'account-settings.security.email-description': '已綁定郵箱：',
+  'account-settings.security.mfa': 'MFA 設備',
+  'account-settings.security.mfa-description': '未綁定 MFA 設備，綁定後，可以進行二次確認',
+  'account-settings.security.modify': '修改',
+  'account-settings.security.set': '設置',
+  'account-settings.security.bind': '綁定',
+  'account-settings.binding.taobao': '綁定淘寶',
+  'account-settings.binding.taobao-description': '當前未綁定淘寶賬號',
+  'account-settings.binding.alipay': '綁定支付寶',
+  'account-settings.binding.alipay-description': '當前未綁定支付寶賬號',
+  'account-settings.binding.dingding': '綁定釘釘',
+  'account-settings.binding.dingding-description': '當前未綁定釘釘賬號',
+  'account-settings.binding.bind': '綁定',
+  'account-settings.notification.password': '賬戶密碼',
+  'account-settings.notification.password-description': '其他用戶的消息將以站內信的形式通知',
+  'account-settings.notification.messages': '系統消息',
+  'account-settings.notification.messages-description': '系統消息將以站內信的形式通知',
+  'account-settings.notification.todo': '待辦任務',
+  'account-settings.notification.todo-description': '待辦任務將以站內信的形式通知',
+  'account-settings.settings.open': '開',
+  'account-settings.settings.close': '關',
+};
diff --git a/src/pages/account/settings/model.ts b/src/pages/account/settings/model.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a1fe8ac97e867992ca77c7fd4eca8ae9fa9d9e68
--- /dev/null
+++ b/src/pages/account/settings/model.ts
@@ -0,0 +1,119 @@
+import { AnyAction, Reducer } from 'redux';
+import { EffectsCommandMap } from 'dva';
+import { CityType, CurrentUser, ProvinceType } from './data.d';
+import { queryCity, queryCurrent, queryProvince, query as queryUsers } from './service';
+
+export interface ModalState {
+  currentUser?: Partial<CurrentUser>;
+  province?: ProvinceType[];
+  city?: CityType[];
+  isLoading?: boolean;
+}
+
+export type Effect = (
+  action: AnyAction,
+  effects: EffectsCommandMap & { select: <T>(func: (state: ModalState) => T) => T },
+) => void;
+
+export interface ModelType {
+  namespace: string;
+  state: ModalState;
+  effects: {
+    fetchCurrent: Effect;
+    fetch: Effect;
+    fetchProvince: Effect;
+    fetchCity: Effect;
+  };
+  reducers: {
+    saveCurrentUser: Reducer<ModalState>;
+    changeNotifyCount: Reducer<ModalState>;
+    setProvince: Reducer<ModalState>;
+    setCity: Reducer<ModalState>;
+    changeLoading: Reducer<ModalState>;
+  };
+}
+
+const Model: ModelType = {
+  namespace: 'accountSettings',
+
+  state: {
+    currentUser: {},
+    province: [],
+    city: [],
+    isLoading: false,
+  },
+
+  effects: {
+    *fetch(_, { call, put }) {
+      const response = yield call(queryUsers);
+      yield put({
+        type: 'save',
+        payload: response,
+      });
+    },
+    *fetchCurrent(_, { call, put }) {
+      const response = yield call(queryCurrent);
+      yield put({
+        type: 'saveCurrentUser',
+        payload: response,
+      });
+    },
+    *fetchProvince(_, { call, put }) {
+      yield put({
+        type: 'changeLoading',
+        payload: true,
+      });
+      const response = yield call(queryProvince);
+      yield put({
+        type: 'setProvince',
+        payload: response,
+      });
+    },
+    *fetchCity({ payload }, { call, put }) {
+      const response = yield call(queryCity, payload);
+      yield put({
+        type: 'setCity',
+        payload: response,
+      });
+    },
+  },
+
+  reducers: {
+    saveCurrentUser(state, action) {
+      return {
+        ...state,
+        currentUser: action.payload || {},
+      };
+    },
+    changeNotifyCount(state = {}, action) {
+      return {
+        ...state,
+        currentUser: {
+          ...state.currentUser,
+          notifyCount: action.payload.totalCount,
+          unreadCount: action.payload.unreadCount,
+        },
+      };
+    },
+    setProvince(state, action) {
+      return {
+        ...state,
+        province: action.payload,
+      };
+    },
+    setCity(state, action) {
+      return {
+        ...state,
+        city: action.payload,
+      };
+    },
+    changeLoading(state, action) {
+      return {
+        ...state,
+        isLoading: action.payload,
+      };
+    },
+  },
+};
+
+export default Model;
diff --git a/src/pages/account/settings/service.ts b/src/pages/account/settings/service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4da62fb1835236cfdf335f3a1a0a3d38994e81a1
--- /dev/null
+++ b/src/pages/account/settings/service.ts
@@ -0,0 +1,17 @@
+import request from 'umi-request';
+
+export async function queryCurrent() {
+  return request('/api/currentUser');
+}
+
+export async function queryProvince() {
+  return request('/api/geographic/province');
+}
+
+export async function queryCity(province: string) {
+  return request(`/api/geographic/city/${province}`);
+}
+
+export async function query() {
+  return request('/api/users');
+}
diff --git a/src/pages/account/settings/style.less b/src/pages/account/settings/style.less
new file mode 100644
index 0000000000000000000000000000000000000000..d5c3693c87fc728e257a02c65864c0b009b1473d
--- /dev/null
+++ b/src/pages/account/settings/style.less
@@ -0,0 +1,97 @@
+@import '~antd/es/style/themes/default.less';
+
+.main {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  padding-top: 16px;
+  padding-bottom: 16px;
+  overflow: auto;
+  background-color: @menu-bg;
+  .leftMenu {
+    width: 224px;
+    border-right: @border-width-base @border-style-base @border-color-split;
+    :global {
+      .ant-menu-inline {
+        border: none;
+      }
+      .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
+        font-weight: bold;
+      }
+    }
+  }
+  .right {
+    flex: 1;
+    padding-top: 8px;
+    padding-right: 40px;
+    padding-bottom: 8px;
+    padding-left: 40px;
+    .title {
+      margin-bottom: 12px;
+      color: @heading-color;
+      font-weight: 500;
+      font-size: 20px;
+      line-height: 28px;
+    }
+  }
+  :global {
+    .ant-list-split .ant-list-item:last-child {
+      border-bottom: 1px solid @border-color-split;
+    }
+    .ant-list-item {
+      padding-top: 14px;
+      padding-bottom: 14px;
+    }
+  }
+}
+:global {
+  .ant-list-item-meta {
+    // 账号绑定图标
+    .taobao {
+      display: block;
+      color: #ff4000;
+      font-size: 48px;
+      line-height: 48px;
+      border-radius: @border-radius-base;
+    }
+    .dingding {
+      margin: 2px;
+      padding: 6px;
+      color: #fff;
+      font-size: 32px;
+      line-height: 32px;
+      background-color: #2eabff;
+      border-radius: @border-radius-base;
+    }
+    .alipay {
+      color: #2eabff;
+      font-size: 48px;
+      line-height: 48px;
+      border-radius: @border-radius-base;
+    }
+  }
+
+  // 密码强度
+  font.strong {
+    color: @success-color;
+  }
+  font.medium {
+    color: @warning-color;
+  }
+  font.weak {
+    color: @error-color;
+  }
+}
+
+@media screen and (max-width: @screen-md) {
+  .main {
+    flex-direction: column;
+    .leftMenu {
+      width: 100%;
+      border: none;
+    }
+    .right {
+      padding: 40px;
+    }
+  }
+}
diff --git a/src/pages/dashboard/analysis/_mock.ts b/src/pages/dashboard/analysis/_mock.ts
new file mode 100644
index 0000000000000000000000000000000000000000..03e49108da4aa2b024fd53d6e6b8211031dbf574
--- /dev/null
+++ b/src/pages/dashboard/analysis/_mock.ts
@@ -0,0 +1,197 @@
+import moment from 'moment';
+import { AnalysisData, RadarData, VisitDataType } from './data.d';
+
+// mock data
+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];
+for (let i = 0; i < fakeY.length; i += 1) {
+  visitData.push({
+    x: moment(new Date(beginDay + 1000 * 60 * 60 * 24 * i)).format('YYYY-MM-DD'),
+    y: fakeY[i],
+  });
+}
+
+const visitData2 = [];
+const fakeY2 = [1, 6, 4, 8, 3, 7, 2];
+for (let i = 0; i < fakeY2.length; i += 1) {
+  visitData2.push({
+    x: moment(new Date(beginDay + 1000 * 60 * 60 * 24 * i)).format('YYYY-MM-DD'),
+    y: fakeY2[i],
+  });
+}
+
+const salesData = [];
+for (let i = 0; i < 12; i += 1) {
+  salesData.push({
+    x: `${i + 1}月`,
+    y: Math.floor(Math.random() * 1000) + 200,
+  });
+}
+const searchData = [];
+for (let i = 0; i < 50; i += 1) {
+  searchData.push({
+    index: i + 1,
+    keyword: `搜索关键词-${i}`,
+    count: Math.floor(Math.random() * 1000),
+    range: Math.floor(Math.random() * 100),
+    status: Math.floor((Math.random() * 10) % 2),
+  });
+}
+const salesTypeData = [
+  {
+    x: '家用电器',
+    y: 4544,
+  },
+  {
+    x: '食用酒水',
+    y: 3321,
+  },
+  {
+    x: '个护健康',
+    y: 3113,
+  },
+  {
+    x: '服饰箱包',
+    y: 2341,
+  },
+  {
+    x: '母婴产品',
+    y: 1231,
+  },
+  {
+    x: '其他',
+    y: 1231,
+  },
+];
+
+const salesTypeDataOnline = [
+  {
+    x: '家用电器',
+    y: 244,
+  },
+  {
+    x: '食用酒水',
+    y: 321,
+  },
+  {
+    x: '个护健康',
+    y: 311,
+  },
+  {
+    x: '服饰箱包',
+    y: 41,
+  },
+  {
+    x: '母婴产品',
+    y: 121,
+  },
+  {
+    x: '其他',
+    y: 111,
+  },
+];
+
+const salesTypeDataOffline = [
+  {
+    x: '家用电器',
+    y: 99,
+  },
+  {
+    x: '食用酒水',
+    y: 188,
+  },
+  {
+    x: '个护健康',
+    y: 344,
+  },
+  {
+    x: '服饰箱包',
+    y: 255,
+  },
+  {
+    x: '其他',
+    y: 65,
+  },
+];
+
+const offlineData = [];
+for (let i = 0; i < 10; i += 1) {
+  offlineData.push({
+    name: `Stores ${i}`,
+    cvr: Math.ceil(Math.random() * 9) / 10,
+  });
+}
+const offlineChartData = [];
+for (let i = 0; i < 20; i += 1) {
+  offlineChartData.push({
+    x: new Date().getTime() + 1000 * 60 * 30 * i,
+    y1: Math.floor(Math.random() * 100) + 10,
+    y2: Math.floor(Math.random() * 100) + 10,
+  });
+}
+
+const radarOriginData = [
+  {
+    name: '个人',
+    ref: 10,
+    koubei: 8,
+    output: 4,
+    contribute: 5,
+    hot: 7,
+  },
+  {
+    name: '团队',
+    ref: 3,
+    koubei: 9,
+    output: 6,
+    contribute: 3,
+    hot: 1,
+  },
+  {
+    name: '部门',
+    ref: 4,
+    koubei: 1,
+    output: 6,
+    contribute: 5,
+    hot: 7,
+  },
+];
+
+const radarData: RadarData[] = [];
+const radarTitleMap = {
+  ref: '引用',
+  koubei: '口碑',
+  output: '产量',
+  contribute: '贡献',
+  hot: '热度',
+};
+radarOriginData.forEach(item => {
+  Object.keys(item).forEach(key => {
+    if (key !== 'name') {
+      radarData.push({
+        name: item.name,
+        label: radarTitleMap[key],
+        value: item[key],
+      });
+    }
+  });
+});
+
+const getFakeChartData: AnalysisData = {
+  visitData,
+  visitData2,
+  salesData,
+  searchData,
+  offlineData,
+  offlineChartData,
+  salesTypeData,
+  salesTypeDataOnline,
+  salesTypeDataOffline,
+  radarData,
+};
+
+export default {
+  'GET  /api/fake_chart_data': getFakeChartData,
+};
diff --git a/src/pages/dashboard/analysis/components/Charts/Bar/index.tsx b/src/pages/dashboard/analysis/components/Charts/Bar/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..86f9fbc99285d214f3422dcd34f8f325af908b58
--- /dev/null
+++ b/src/pages/dashboard/analysis/components/Charts/Bar/index.tsx
@@ -0,0 +1,133 @@
+import { Axis, Chart, Geom, Tooltip } from 'bizcharts';
+import React, { Component } from 'react';
+
+import Debounce from 'lodash.debounce';
+import autoHeight from '../autoHeight';
+import styles from '../index.less';
+
+export interface BarProps {
+  title: React.ReactNode;
+  color?: string;
+  padding?: [number, number, number, number];
+  height?: number;
+  data: {
+    x: string;
+    y: number;
+  }[];
+  forceFit?: boolean;
+  autoLabel?: boolean;
+  style?: React.CSSProperties;
+}
+
+class Bar extends Component<
+  BarProps,
+  {
+    autoHideXLabels: boolean;
+  }
+> {
+  state = {
+    autoHideXLabels: false,
+  };
+
+  root: HTMLDivElement | undefined = undefined;
+
+  node: HTMLDivElement | undefined = undefined;
+
+  resize = Debounce(() => {
+    if (!this.node || !this.node.parentNode) {
+      return;
+    }
+    const canvasWidth = (this.node.parentNode as HTMLDivElement).clientWidth;
+    const { data = [], autoLabel = true } = this.props;
+    if (!autoLabel) {
+      return;
+    }
+    const minWidth = data.length * 30;
+    const { autoHideXLabels } = this.state;
+
+    if (canvasWidth <= minWidth) {
+      if (!autoHideXLabels) {
+        this.setState({
+          autoHideXLabels: true,
+        });
+      }
+    } else if (autoHideXLabels) {
+      this.setState({
+        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,
+      title,
+      forceFit = true,
+      data,
+      color = 'rgba(24, 144, 255, 0.85)',
+      padding,
+    } = this.props;
+
+    const { autoHideXLabels } = this.state;
+
+    const scale = {
+      x: {
+        type: 'cat',
+      },
+      y: {
+        min: 0,
+      },
+    };
+
+    const tooltip: [string, (...args: any[]) => { name?: string; value: string }] = [
+      'x*y',
+      (x: string, y: string) => ({
+        name: x,
+        value: y,
+      }),
+    ];
+
+    return (
+      <div className={styles.chart} style={{ height }} ref={this.handleRoot}>
+        <div ref={this.handleRef}>
+          {title && <h4 style={{ marginBottom: 20 }}>{title}</h4>}
+          <Chart
+            scale={scale}
+            height={title ? height - 41 : height}
+            forceFit={forceFit}
+            data={data}
+            padding={padding || 'auto'}
+          >
+            <Axis
+              name="x"
+              title={false}
+              label={autoHideXLabels ? undefined : {}}
+              tickLine={autoHideXLabels ? undefined : {}}
+            />
+            <Axis name="y" min={0} />
+            <Tooltip showTitle={false} crosshairs={false} />
+            <Geom type="interval" position="x*y" color={color} tooltip={tooltip} />
+          </Chart>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default autoHeight()(Bar);
diff --git a/src/pages/dashboard/analysis/components/Charts/ChartCard/index.less b/src/pages/dashboard/analysis/components/Charts/ChartCard/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..d7bf6dda6aef5e4c34cb485f40367a4242ceae03
--- /dev/null
+++ b/src/pages/dashboard/analysis/components/Charts/ChartCard/index.less
@@ -0,0 +1,75 @@
+@import '~antd/es/style/themes/default.less';
+
+.chartCard {
+  position: relative;
+  .chartTop {
+    position: relative;
+    width: 100%;
+    overflow: hidden;
+  }
+  .chartTopMargin {
+    margin-bottom: 12px;
+  }
+  .chartTopHasMargin {
+    margin-bottom: 20px;
+  }
+  .metaWrap {
+    float: left;
+  }
+  .avatar {
+    position: relative;
+    top: 4px;
+    float: left;
+    margin-right: 20px;
+    img {
+      border-radius: 100%;
+    }
+  }
+  .meta {
+    height: 22px;
+    color: @text-color-secondary;
+    font-size: @font-size-base;
+    line-height: 22px;
+  }
+  .action {
+    position: absolute;
+    top: 4px;
+    right: 0;
+    line-height: 1;
+    cursor: pointer;
+  }
+  .total {
+    height: 38px;
+    margin-top: 4px;
+    margin-bottom: 0;
+    overflow: hidden;
+    color: @heading-color;
+    font-size: 30px;
+    line-height: 38px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    word-break: break-all;
+  }
+  .content {
+    position: relative;
+    width: 100%;
+    margin-bottom: 12px;
+  }
+  .contentFixed {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+  }
+  .footer {
+    margin-top: 8px;
+    padding-top: 9px;
+    border-top: 1px solid @border-color-split;
+    & > * {
+      position: relative;
+    }
+  }
+  .footerMargin {
+    margin-top: 20px;
+  }
+}
diff --git a/src/pages/dashboard/analysis/components/Charts/ChartCard/index.tsx b/src/pages/dashboard/analysis/components/Charts/ChartCard/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..8d367b8026647133b64a98d247e25717d641fbb1
--- /dev/null
+++ b/src/pages/dashboard/analysis/components/Charts/ChartCard/index.tsx
@@ -0,0 +1,97 @@
+import { Card } from 'antd';
+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 null;
+  }
+  let totalDom;
+  switch (typeof total) {
+    case 'undefined':
+      totalDom = null;
+      break;
+    case 'function':
+      totalDom = <div className={styles.total}>{total()}</div>;
+      break;
+    default:
+      totalDom = <div className={styles.total}>{total}</div>;
+  }
+  return totalDom;
+};
+
+export interface ChartCardProps extends CardProps {
+  title: React.ReactNode;
+  action?: React.ReactNode;
+  total?: React.ReactNode | number | (() => React.ReactNode | number);
+  footer?: React.ReactNode;
+  contentHeight?: number;
+  avatar?: React.ReactNode;
+  style?: React.CSSProperties;
+}
+
+class ChartCard extends React.Component<ChartCardProps> {
+  renderContent = () => {
+    const { contentHeight, title, avatar, action, total, footer, children, loading } = this.props;
+    if (loading) {
+      return false;
+    }
+    return (
+      <div className={styles.chartCard}>
+        <div
+          className={classNames(styles.chartTop, {
+            [styles.chartTopMargin]: !children && !footer,
+          })}
+        >
+          <div className={styles.avatar}>{avatar}</div>
+          <div className={styles.metaWrap}>
+            <div className={styles.meta}>
+              <span className={styles.title}>{title}</span>
+              <span className={styles.action}>{action}</span>
+            </div>
+            {renderTotal(total)}
+          </div>
+        </div>
+        {children && (
+          <div className={styles.content} style={{ height: contentHeight || 'auto' }}>
+            <div className={contentHeight && styles.contentFixed}>{children}</div>
+          </div>
+        )}
+        {footer && (
+          <div
+            className={classNames(styles.footer, {
+              [styles.footerMargin]: !children,
+            })}
+          >
+            {footer}
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  render() {
+    const {
+      loading = false,
+      contentHeight,
+      title,
+      avatar,
+      action,
+      total,
+      footer,
+      children,
+      ...rest
+    } = this.props;
+    return (
+      <Card loading={loading} bodyStyle={{ padding: '20px 24px 8px 24px' }} {...rest}>
+        {this.renderContent()}
+      </Card>
+    );
+  }
+}
+
+export default ChartCard;
diff --git a/src/pages/dashboard/analysis/components/Charts/Field/index.less b/src/pages/dashboard/analysis/components/Charts/Field/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..4fe0d1f643748d0b46519d3873bf119facc46e49
--- /dev/null
+++ b/src/pages/dashboard/analysis/components/Charts/Field/index.less
@@ -0,0 +1,17 @@
+@import '~antd/es/style/themes/default.less';
+
+.field {
+  margin: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  .label,
+  .number {
+    font-size: @font-size-base;
+    line-height: 22px;
+  }
+  .number {
+    margin-left: 8px;
+    color: @heading-color;
+  }
+}
diff --git a/src/pages/dashboard/analysis/components/Charts/Field/index.tsx b/src/pages/dashboard/analysis/components/Charts/Field/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..876673faeeb7a079bdceb58faf27aec867541c95
--- /dev/null
+++ b/src/pages/dashboard/analysis/components/Charts/Field/index.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import styles from './index.less';
+
+export interface FieldProps {
+  label: React.ReactNode;
+  value: React.ReactNode;
+  style?: React.CSSProperties;
+}
+
+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>
+  </div>
+);
+
+export default Field;
diff --git a/src/pages/dashboard/analysis/components/Charts/Gauge/index.tsx b/src/pages/dashboard/analysis/components/Charts/Gauge/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..bf9289662dfab097eead4ae8d892a18e4c92073f
--- /dev/null
+++ b/src/pages/dashboard/analysis/components/Charts/Gauge/index.tsx
@@ -0,0 +1,179 @@
+import { Axis, Chart, Coord, Geom, Guide, Shape } from 'bizcharts';
+
+import React from 'react';
+import autoHeight from '../autoHeight';
+
+const { Arc, Html, Line } = Guide;
+
+export interface GaugeProps {
+  title: React.ReactNode;
+  color?: string;
+  height?: number;
+  bgColor?: number;
+  percent: number;
+  forceFit?: boolean;
+  style?: React.CSSProperties;
+  formatter: (value: string) => string;
+}
+
+const defaultFormatter = (val: string): string => {
+  switch (val) {
+    case '2':
+      return '差';
+    case '4':
+      return '中';
+    case '6':
+      return '良';
+    case '8':
+      return '优';
+    default:
+      return '';
+  }
+};
+
+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 }];
+  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 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,
+          }}
+        />
+        <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}
+      />
+    </Chart>
+  );
+};
+
+export default autoHeight()(Gauge);
diff --git a/src/pages/dashboard/analysis/components/Charts/MiniArea/index.tsx b/src/pages/dashboard/analysis/components/Charts/MiniArea/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..2e12183b629fb4fbe5dc52806fc8b016b62392b5
--- /dev/null
+++ b/src/pages/dashboard/analysis/components/Charts/MiniArea/index.tsx
@@ -0,0 +1,130 @@
+import { Axis, Chart, Geom, Tooltip, AxisProps } from 'bizcharts';
+
+import React from 'react';
+import autoHeight from '../autoHeight';
+import styles from '../index.less';
+
+export interface MiniAreaProps {
+  color?: string;
+  height?: number;
+  borderColor?: string;
+  line?: boolean;
+  animate?: boolean;
+  xAxis?: AxisProps;
+  forceFit?: boolean;
+  scale?: {
+    x?: {
+      tickCount: number;
+    };
+    y?: {
+      tickCount: number;
+    };
+  };
+  yAxis?: Partial<AxisProps>;
+  borderWidth?: number;
+  data: {
+    x: number | string;
+    y: number;
+  }[];
+}
+
+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 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 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={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="line"
+                position="x*y"
+                shape="smooth"
+                color={borderColor}
+                size={borderWidth}
+                tooltip={false}
+              />
+            ) : (
+              <span style={{ display: 'none' }} />
+            )}
+          </Chart>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default autoHeight()(MiniArea);
diff --git a/src/pages/dashboard/analysis/components/Charts/MiniBar/index.tsx b/src/pages/dashboard/analysis/components/Charts/MiniBar/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..044ba3c0672bb9ef579241c72169c7f6f6028342
--- /dev/null
+++ b/src/pages/dashboard/analysis/components/Charts/MiniBar/index.tsx
@@ -0,0 +1,54 @@
+import { Chart, Geom, Tooltip } from 'bizcharts';
+
+import React from 'react';
+import autoHeight from '../autoHeight';
+import styles from '../index.less';
+
+export interface MiniBarProps {
+  color?: string;
+  height?: number;
+  data: {
+    x: number | string;
+    y: number;
+  }[];
+  forceFit?: boolean;
+  style?: React.CSSProperties;
+}
+
+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/src/pages/dashboard/analysis/components/Charts/MiniProgress/index.less b/src/pages/dashboard/analysis/components/Charts/MiniProgress/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..918d6ac3d4c06778017686df02f4ef2a2e43dac8
--- /dev/null
+++ b/src/pages/dashboard/analysis/components/Charts/MiniProgress/index.less
@@ -0,0 +1,37 @@
+@import '~antd/es/style/themes/default.less';
+
+.miniProgress {
+  position: relative;
+  width: 100%;
+  padding: 5px 0;
+  .progressWrap {
+    position: relative;
+    background-color: @background-color-base;
+  }
+  .progress {
+    width: 0;
+    height: 100%;
+    background-color: @primary-color;
+    border-radius: 1px 0 0 1px;
+    transition: all 0.4s cubic-bezier(0.08, 0.82, 0.17, 1) 0s;
+  }
+  .target {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    z-index: 9;
+    width: 20px;
+    span {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 2px;
+      height: 4px;
+      border-radius: 100px;
+    }
+    span:last-child {
+      top: auto;
+      bottom: 0;
+    }
+  }
+}
diff --git a/src/pages/dashboard/analysis/components/Charts/MiniProgress/index.tsx b/src/pages/dashboard/analysis/components/Charts/MiniProgress/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..5ea0b993709c417e7b654364b85795234beb134b
--- /dev/null
+++ b/src/pages/dashboard/analysis/components/Charts/MiniProgress/index.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import { Tooltip } from 'antd';
+import styles from './index.less';
+
+export interface MiniProgressProps {
+  target: number;
+  targetLabel?: string;
+  color?: string;
+  strokeWidth?: number;
+  percent?: number;
+  style?: React.CSSProperties;
+}
+
+const MiniProgress: React.SFC<MiniProgressProps> = ({
+  targetLabel,
+  target,
+  color = 'rgb(19, 194, 194)',
+  strokeWidth,
+  percent,
+}) => (
+  <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/src/pages/dashboard/analysis/components/Charts/Pie/index.less b/src/pages/dashboard/analysis/components/Charts/Pie/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..8641d658058870152411c872c961d1ba351fef16
--- /dev/null
+++ b/src/pages/dashboard/analysis/components/Charts/Pie/index.less
@@ -0,0 +1,94 @@
+@import '~antd/es/style/themes/default.less';
+
+.pie {
+  position: relative;
+  .chart {
+    position: relative;
+  }
+  &.hasLegend .chart {
+    width: ~'calc(100% - 240px)';
+  }
+  .legend {
+    position: absolute;
+    top: 50%;
+    right: 0;
+    min-width: 200px;
+    margin: 0 20px;
+    padding: 0;
+    list-style: none;
+    transform: translateY(-50%);
+    li {
+      height: 22px;
+      margin-bottom: 16px;
+      line-height: 22px;
+      cursor: pointer;
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+  .dot {
+    position: relative;
+    top: -1px;
+    display: inline-block;
+    width: 8px;
+    height: 8px;
+    margin-right: 8px;
+    border-radius: 8px;
+  }
+  .line {
+    display: inline-block;
+    width: 1px;
+    height: 16px;
+    margin-right: 8px;
+    background-color: @border-color-split;
+  }
+  .legendTitle {
+    color: @text-color;
+  }
+  .percent {
+    color: @text-color-secondary;
+  }
+  .value {
+    position: absolute;
+    right: 0;
+  }
+  .title {
+    margin-bottom: 8px;
+  }
+  .total {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    max-height: 62px;
+    text-align: center;
+    transform: translate(-50%, -50%);
+    & > h4 {
+      height: 22px;
+      margin-bottom: 8px;
+      color: @text-color-secondary;
+      font-weight: normal;
+      font-size: 14px;
+      line-height: 22px;
+    }
+    & > p {
+      display: block;
+      height: 32px;
+      color: @heading-color;
+      font-size: 1.2em;
+      line-height: 32px;
+      white-space: nowrap;
+    }
+  }
+}
+
+.legendBlock {
+  &.hasLegend .chart {
+    width: 100%;
+    margin: 0 0 32px 0;
+  }
+  .legend {
+    position: relative;
+    transform: none;
+  }
+}
diff --git a/src/pages/dashboard/analysis/components/Charts/Pie/index.tsx b/src/pages/dashboard/analysis/components/Charts/Pie/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..ad27d90d69e7af2a7052fdaddd282c74fe37e26b
--- /dev/null
+++ b/src/pages/dashboard/analysis/components/Charts/Pie/index.tsx
@@ -0,0 +1,309 @@
+import { Chart, Coord, Geom, Tooltip } from 'bizcharts';
+import React, { Component } from 'react';
+
+import { DataView } from '@antv/data-set';
+import Debounce from 'lodash.debounce';
+import { Divider } from 'antd';
+import ReactFitText from 'react-fittext';
+import classNames from 'classnames';
+import autoHeight from '../autoHeight';
+import styles from './index.less';
+
+export interface PieProps {
+  animate?: boolean;
+  color?: string;
+  colors?: string[];
+  selected?: boolean;
+  height?: number;
+  margin?: [number, number, number, number];
+  hasLegend?: boolean;
+  padding?: [number, number, number, number];
+  percent?: number;
+  data?: {
+    x: string | string;
+    y: number;
+  }[];
+  inner?: number;
+  lineWidth?: number;
+  forceFit?: boolean;
+  style?: React.CSSProperties;
+  className?: string;
+  total?: React.ReactNode | number | (() => React.ReactNode | number);
+  title?: React.ReactNode;
+  tooltip?: boolean;
+  valueFormat?: (value: string) => string | React.ReactNode;
+  subTitle?: React.ReactNode;
+}
+interface PieState {
+  legendData: { checked: boolean; x: string; color: string; percent: number; y: string }[];
+  legendBlock: boolean;
+}
+class Pie extends Component<PieProps, PieState> {
+  state: PieState = {
+    legendData: [],
+    legendBlock: false,
+  };
+
+  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(
+      'resize',
+      () => {
+        this.requestRef = requestAnimationFrame(() => this.resize());
+      },
+      { passive: true },
+    );
+  }
+
+  componentDidUpdate(preProps: PieProps) {
+    const { data } = this.props;
+    if (data !== preProps.data) {
+      // because of charts data create when rendered
+      // so there is a trick for get rendered time
+      this.getLegendData();
+    }
+  }
+
+  componentWillUnmount() {
+    if (this.requestRef) {
+      window.cancelAnimationFrame(this.requestRef);
+    }
+    window.removeEventListener('resize', this.resize);
+    if (this.resize) {
+      (this.resize as any).cancel();
+    }
+  }
+
+  getG2Instance = (chart: G2.Chart) => {
+    this.chart = chart;
+    requestAnimationFrame(() => {
+      this.getLegendData();
+      this.resize();
+    });
+  };
+
+  // for custom lengend view
+  getLegendData = () => {
+    if (!this.chart) return;
+    const geom = this.chart.getAllGeoms()[0]; // 获取所有的图形
+    if (!geom) return;
+    const items = (geom as any).get('dataArray') || []; // 获取图形对应的
+
+    const legendData = items.map((item: { color: any; _origin: any }[]) => {
+      /* eslint no-underscore-dangle:0 */
+      const origin = item[0]._origin;
+      origin.color = item[0].color;
+      origin.checked = true;
+      return origin;
+    });
+
+    this.setState({
+      legendData,
+    });
+  };
+
+  handleRoot = (n: HTMLDivElement) => {
+    this.root = n;
+  };
+
+  handleLegendClick = (item: any, i: string | number) => {
+    const newItem = item;
+    newItem.checked = !newItem.checked;
+
+    const { legendData } = this.state;
+    legendData[i] = newItem;
+
+    const filteredLegendData = legendData.filter(l => l.checked).map(l => l.x);
+
+    if (this.chart) {
+      this.chart.filter('x', val => filteredLegendData.indexOf(`${val}`) > -1);
+    }
+
+    this.setState({
+      legendData,
+    });
+  };
+
+  render() {
+    const {
+      valueFormat,
+      subTitle,
+      total,
+      hasLegend = false,
+      className,
+      style,
+      height = 0,
+      forceFit = true,
+      percent,
+      color,
+      inner = 0.75,
+      animate = true,
+      colors,
+      lineWidth = 1,
+    } = this.props;
+
+    const { legendData, legendBlock } = this.state;
+    const pieClassName = classNames(styles.pie, className, {
+      [styles.hasLegend]: !!hasLegend,
+      [styles.legendBlock]: legendBlock,
+    });
+
+    const {
+      data: propsData,
+      selected: propsSelected = true,
+      tooltip: propsTooltip = true,
+    } = this.props;
+
+    let data = propsData || [];
+    let selected = propsSelected;
+    let tooltip = propsTooltip;
+
+    const defaultColors = colors;
+    data = data || [];
+    selected = selected || true;
+    tooltip = tooltip || true;
+    let formatColor;
+
+    const scale = {
+      x: {
+        type: 'cat',
+        range: [0, 1],
+      },
+      y: {
+        min: 0,
+      },
+    };
+
+    if (percent || percent === 0) {
+      selected = false;
+      tooltip = false;
+      formatColor = (value: string) => {
+        if (value === '占比') {
+          return color || 'rgba(24, 144, 255, 0.85)';
+        }
+        return '#F0F2F5';
+      };
+
+      data = [
+        {
+          x: '占比',
+          y: parseFloat(`${percent}`),
+        },
+        {
+          x: '反比',
+          y: 100 - parseFloat(`${percent}`),
+        },
+      ];
+    }
+
+    const tooltipFormat: [string, (...args: any[]) => { name?: string; value: string }] = [
+      'x*percent',
+      (x: string, p: number) => ({
+        name: x,
+        value: `${(p * 100).toFixed(2)}%`,
+      }),
+    ];
+
+    const padding = [12, 0, 12, 0] as [number, number, number, number];
+
+    const dv = new DataView();
+    dv.source(data).transform({
+      type: 'percent',
+      field: 'y',
+      dimension: 'x',
+      as: 'percent',
+    });
+
+    return (
+      <div ref={this.handleRoot} className={pieClassName} style={style}>
+        <ReactFitText maxFontSize={25}>
+          <div className={styles.chart}>
+            <Chart
+              scale={scale}
+              height={height}
+              forceFit={forceFit}
+              data={dv}
+              padding={padding}
+              animate={animate}
+              onGetG2Instance={this.getG2Instance}
+            >
+              {!!tooltip && <Tooltip showTitle={false} />}
+              <Coord type="theta" innerRadius={inner} />
+              <Geom
+                style={{ lineWidth, stroke: '#fff' }}
+                tooltip={tooltip ? tooltipFormat : undefined}
+                type="intervalStack"
+                position="percent"
+                color={['x', percent || percent === 0 ? formatColor : defaultColors] as any}
+                selected={selected}
+              />
+            </Chart>
+
+            {(subTitle || total) && (
+              <div className={styles.total}>
+                {subTitle && <h4 className="pie-sub-title">{subTitle}</h4>}
+                {/* eslint-disable-next-line */}
+                {total && (
+                  <div className="pie-stat">{typeof total === 'function' ? total() : total}</div>
+                )}
+              </div>
+            )}
+          </div>
+        </ReactFitText>
+
+        {hasLegend && (
+          <ul className={styles.legend}>
+            {legendData.map((item, i) => (
+              <li key={item.x} onClick={() => this.handleLegendClick(item, i)}>
+                <span
+                  className={styles.dot}
+                  style={{
+                    backgroundColor: !item.checked ? '#aaa' : item.color,
+                  }}
+                />
+                <span className={styles.legendTitle}>{item.x}</span>
+                <Divider type="vertical" />
+                <span className={styles.percent}>
+                  {`${(Number.isNaN(item.percent) ? 0 : item.percent * 100).toFixed(2)}%`}
+                </span>
+                <span className={styles.value}>{valueFormat ? valueFormat(item.y) : item.y}</span>
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+    );
+  }
+}
+
+export default autoHeight()(Pie);
diff --git a/src/pages/dashboard/analysis/components/Charts/TagCloud/index.less b/src/pages/dashboard/analysis/components/Charts/TagCloud/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..db8e4dabfdd3f1fd4566ff22f55962648c369c49
--- /dev/null
+++ b/src/pages/dashboard/analysis/components/Charts/TagCloud/index.less
@@ -0,0 +1,6 @@
+.tagCloud {
+  overflow: hidden;
+  canvas {
+    transform-origin: 0 0;
+  }
+}
diff --git a/src/pages/dashboard/analysis/components/Charts/TagCloud/index.tsx b/src/pages/dashboard/analysis/components/Charts/TagCloud/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..8515ad86f8a30ded8bdfc98ffc9f8abdfa8bf4b1
--- /dev/null
+++ b/src/pages/dashboard/analysis/components/Charts/TagCloud/index.tsx
@@ -0,0 +1,212 @@
+import { Chart, Coord, Geom, Shape, Tooltip } from 'bizcharts';
+import React, { Component } from 'react';
+
+import DataSet from '@antv/data-set';
+import Debounce from 'lodash.debounce';
+import classNames from 'classnames';
+import autoHeight from '../autoHeight';
+import styles from './index.less';
+
+/* eslint no-underscore-dangle: 0 */
+/* eslint no-param-reassign: 0 */
+
+const imgUrl = 'https://gw.alipayobjects.com/zos/rmsportal/gWyeGLCdFFRavBGIDzWk.png';
+
+export interface TagCloudProps {
+  data: {
+    name: string;
+    value: number;
+  }[];
+  height?: number;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+interface TagCloudState {
+  dv: any;
+  height?: number;
+  width: number;
+}
+
+class TagCloud extends Component<TagCloudProps, TagCloudState> {
+  state = {
+    dv: null,
+    height: 0,
+    width: 0,
+  };
+
+  isUnmount: boolean = false;
+
+  requestRef: number = 0;
+
+  root: HTMLDivElement | undefined = undefined;
+
+  imageMask: HTMLImageElement | undefined = undefined;
+
+  componentDidMount() {
+    requestAnimationFrame(() => {
+      this.initTagCloud();
+      this.renderChart(this.props);
+    });
+    window.addEventListener('resize', this.resize, { passive: true });
+  }
+
+  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;
+  };
+
+  initTagCloud = () => {
+    function getTextAttrs(cfg: {
+      x?: any;
+      y?: any;
+      style?: any;
+      opacity?: any;
+      origin?: any;
+      color?: any;
+    }) {
+      return {
+        ...cfg.style,
+        fillOpacity: cfg.opacity,
+        fontSize: cfg.origin._origin.size,
+        rotate: cfg.origin._origin.rotate,
+        text: cfg.origin._origin.text,
+        textAlign: 'center',
+        fontFamily: cfg.origin._origin.font,
+        fill: cfg.color,
+        textBaseline: 'Alphabetic',
+      };
+    }
+
+    (Shape as any).registerShape('point', 'cloud', {
+      drawShape(
+        cfg: { x: any; y: any },
+        container: { addShape: (arg0: string, arg1: { attrs: any }) => void },
+      ) {
+        const attrs = getTextAttrs(cfg);
+        return container.addShape('text', {
+          attrs: {
+            ...attrs,
+            x: cfg.x,
+            y: cfg.y,
+          },
+        });
+      },
+    });
+  };
+
+  renderChart = Debounce((nextProps: TagCloudProps) => {
+    // const colors = ['#1890FF', '#41D9C7', '#2FC25B', '#FACC14', '#9AE65C'];
+    const { data, height } = nextProps || this.props;
+
+    if (data.length < 1 || !this.root) {
+      return;
+    }
+
+    const h = height;
+    const w = this.root.offsetWidth;
+
+    const onload = () => {
+      const dv = new DataSet.View().source(data);
+      const range = dv.range('value');
+      const [min, max] = range;
+      dv.transform({
+        type: 'tag-cloud',
+        fields: ['name', 'value'],
+        imageMask: this.imageMask,
+        font: 'Verdana',
+        size: [w, h], // 宽高设置最好根据 imageMask 做调整
+        padding: 0,
+        timeInterval: 5000, // max execute time
+        rotate() {
+          return 0;
+        },
+        fontSize(d: { value: number }) {
+          const size = ((d.value - min) / (max - min)) ** 2;
+          return size * (17.5 - 5) + 5;
+        },
+      });
+
+      if (this.isUnmount) {
+        return;
+      }
+
+      this.setState({
+        dv,
+        width: w,
+        height: h,
+      });
+    };
+
+    if (!this.imageMask) {
+      this.imageMask = new Image();
+      this.imageMask.crossOrigin = '';
+      this.imageMask.src = imgUrl;
+
+      this.imageMask.onload = onload;
+    } else {
+      onload();
+    }
+  }, 500);
+
+  render() {
+    const { className, height } = this.props;
+    const { dv, width, height: stateHeight } = this.state;
+
+    return (
+      <div
+        className={classNames(styles.tagCloud, className)}
+        style={{ width: '100%', height }}
+        ref={this.saveRootRef}
+      >
+        {dv && (
+          <Chart
+            width={width}
+            height={stateHeight}
+            data={dv}
+            padding={0}
+            scale={{
+              x: { nice: false },
+              y: { nice: false },
+            }}
+          >
+            <Tooltip showTitle={false} />
+            <Coord reflect="y" />
+            <Geom
+              type="point"
+              position="x*y"
+              color="text"
+              shape="cloud"
+              tooltip={[
+                'text*value',
+                function trans(text, value) {
+                  return { name: text, value };
+                },
+              ]}
+            />
+          </Chart>
+        )}
+      </div>
+    );
+  }
+}
+
+export default autoHeight()(TagCloud);
diff --git a/src/pages/dashboard/analysis/components/Charts/TimelineChart/index.less b/src/pages/dashboard/analysis/components/Charts/TimelineChart/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..eadb5bc026ebbb519e7e2dcc1b5ef526e2f07bde
--- /dev/null
+++ b/src/pages/dashboard/analysis/components/Charts/TimelineChart/index.less
@@ -0,0 +1,5 @@
+@import '~antd/es/style/themes/default.less';
+
+.timelineChart {
+  background: @component-background;
+}
diff --git a/src/pages/dashboard/analysis/components/Charts/TimelineChart/index.tsx b/src/pages/dashboard/analysis/components/Charts/TimelineChart/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..57c1516f2be1f97ee8b3e8626a311259e6941b41
--- /dev/null
+++ b/src/pages/dashboard/analysis/components/Charts/TimelineChart/index.tsx
@@ -0,0 +1,132 @@
+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 TimelineChartProps {
+  data: {
+    x: number;
+    y1: number;
+    y2: number;
+  }[];
+  title?: string;
+  titleMap: { y1: string; y2: string };
+  padding?: [number, number, number, number];
+  height?: number;
+  style?: React.CSSProperties;
+  borderWidth?: number;
+}
+
+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 }];
+
+  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,
+    );
+  }
+
+  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 timeScale = {
+    type: 'time',
+    tickInterval: 60 * 60 * 1000,
+    mask: 'HH:mm',
+    range: [0, 1],
+  };
+
+  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);
+      }}
+    />
+  );
+
+  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/src/pages/dashboard/analysis/components/Charts/WaterWave/index.less b/src/pages/dashboard/analysis/components/Charts/WaterWave/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..f52ac142e2c59c12c2aeeb4bde42f45bb893e4b3
--- /dev/null
+++ b/src/pages/dashboard/analysis/components/Charts/WaterWave/index.less
@@ -0,0 +1,28 @@
+@import '~antd/es/style/themes/default.less';
+
+.waterWave {
+  position: relative;
+  display: inline-block;
+  transform-origin: left;
+  .text {
+    position: absolute;
+    top: 32px;
+    left: 0;
+    width: 100%;
+    text-align: center;
+    span {
+      color: @text-color-secondary;
+      font-size: 14px;
+      line-height: 22px;
+    }
+    h4 {
+      color: @heading-color;
+      font-size: 24px;
+      line-height: 32px;
+    }
+  }
+  .waterWaveCanvasWrapper {
+    transform: scale(0.5);
+    transform-origin: 0 0;
+  }
+}
diff --git a/src/pages/dashboard/analysis/components/Charts/WaterWave/index.tsx b/src/pages/dashboard/analysis/components/Charts/WaterWave/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..065cd0c607892a295f608a7d55adad484240c537
--- /dev/null
+++ b/src/pages/dashboard/analysis/components/Charts/WaterWave/index.tsx
@@ -0,0 +1,236 @@
+import React, { Component } from 'react';
+
+import autoHeight from '../autoHeight';
+import styles from './index.less';
+
+/* eslint no-return-assign: 0 */
+/* eslint no-mixed-operators: 0 */
+// riddle: https://riddle.alibaba-inc.com/riddles/2d9a4b90
+
+export interface WaterWaveProps {
+  title: React.ReactNode;
+  color?: string;
+  height?: number;
+  percent: number;
+  style?: React.CSSProperties;
+}
+
+class WaterWave extends Component<WaterWaveProps> {
+  state = {
+    radio: 1,
+  };
+
+  timer: number = 0;
+
+  root: HTMLDivElement | undefined | null = null;
+
+  node: HTMLCanvasElement | undefined | null = null;
+
+  componentDidMount() {
+    this.renderChart();
+    this.resize();
+    window.addEventListener(
+      'resize',
+      () => {
+        requestAnimationFrame(() => this.resize());
+      },
+      { passive: true },
+    );
+  }
+
+  componentDidUpdate(props: WaterWaveProps) {
+    const { percent } = this.props;
+    if (props.percent !== percent) {
+      // 不加这个会造成绘制缓慢
+      this.renderChart('update');
+    }
+  }
+
+  componentWillUnmount() {
+    cancelAnimationFrame(this.timer);
+    if (this.node) {
+      this.node.innerHTML = '';
+    }
+    window.removeEventListener('resize', this.resize);
+  }
+
+  resize = () => {
+    if (this.root) {
+      const { height = 1 } = this.props;
+      const { offsetWidth } = this.root.parentNode as HTMLElement;
+      this.setState({
+        radio: offsetWidth < height ? offsetWidth / height : 1,
+      });
+    }
+  };
+
+  renderChart(type?: string) {
+    const { percent, color = '#1890FF' } = this.props;
+    const data = percent / 100;
+    const self = this;
+    cancelAnimationFrame(this.timer);
+
+    if (!this.node || (data !== 0 && !data)) {
+      return;
+    }
+
+    const canvas = this.node;
+    const ctx = canvas.getContext('2d');
+    if (!ctx) {
+      return;
+    }
+    const canvasWidth = canvas.width;
+    const canvasHeight = canvas.height;
+    const radius = canvasWidth / 2;
+    const lineWidth = 2;
+    const cR = radius - lineWidth;
+
+    ctx.beginPath();
+    ctx.lineWidth = lineWidth * 2;
+
+    const axisLength = canvasWidth - lineWidth;
+    const unit = axisLength / 8;
+    const range = 0.2; // 振幅
+    let currRange = range;
+    const xOffset = lineWidth;
+    let sp = 0; // 周期偏移量
+    let currData = 0;
+    const waveupsp = 0.005; // 水波上涨速度
+
+    let arcStack: number[][] = [];
+    const bR = radius - lineWidth;
+    const circleOffset = -(Math.PI / 2);
+    let circleLock = true;
+
+    for (let i = circleOffset; i < circleOffset + 2 * Math.PI; i += 1 / (8 * Math.PI)) {
+      arcStack.push([radius + bR * Math.cos(i), radius + bR * Math.sin(i)]);
+    }
+
+    const cStartPoint = arcStack.shift() as number[];
+    ctx.strokeStyle = color;
+    ctx.moveTo(cStartPoint[0], cStartPoint[1]);
+
+    function drawSin() {
+      if (!ctx) {
+        return;
+      }
+      ctx.beginPath();
+      ctx.save();
+
+      const sinStack = [];
+      for (let i = xOffset; i <= xOffset + axisLength; i += 20 / axisLength) {
+        const x = sp + (xOffset + i) / unit;
+        const y = Math.sin(x) * currRange;
+        const dx = i;
+        const dy = 2 * cR * (1 - currData) + (radius - cR) - unit * y;
+
+        ctx.lineTo(dx, dy);
+        sinStack.push([dx, dy]);
+      }
+
+      const startPoint = sinStack.shift() as number[];
+
+      ctx.lineTo(xOffset + axisLength, canvasHeight);
+      ctx.lineTo(xOffset, canvasHeight);
+      ctx.lineTo(startPoint[0], startPoint[1]);
+
+      const gradient = ctx.createLinearGradient(0, 0, 0, canvasHeight);
+      gradient.addColorStop(0, '#ffffff');
+      gradient.addColorStop(1, color);
+      ctx.fillStyle = gradient;
+      ctx.fill();
+      ctx.restore();
+    }
+
+    function render() {
+      if (!ctx) {
+        return;
+      }
+      ctx.clearRect(0, 0, canvasWidth, canvasHeight);
+      if (circleLock && type !== 'update') {
+        if (arcStack.length) {
+          const temp = arcStack.shift() as number[];
+          ctx.lineTo(temp[0], temp[1]);
+          ctx.stroke();
+        } else {
+          circleLock = false;
+          ctx.lineTo(cStartPoint[0], cStartPoint[1]);
+          ctx.stroke();
+          arcStack = [];
+
+          ctx.globalCompositeOperation = 'destination-over';
+          ctx.beginPath();
+          ctx.lineWidth = lineWidth;
+          ctx.arc(radius, radius, bR, 0, 2 * Math.PI, true);
+
+          ctx.beginPath();
+          ctx.save();
+          ctx.arc(radius, radius, radius - 3 * lineWidth, 0, 2 * Math.PI, true);
+
+          ctx.restore();
+          ctx.clip();
+          ctx.fillStyle = color;
+        }
+      } else {
+        if (data >= 0.85) {
+          if (currRange > range / 4) {
+            const t = range * 0.01;
+            currRange -= t;
+          }
+        } else if (data <= 0.1) {
+          if (currRange < range * 1.5) {
+            const t = range * 0.01;
+            currRange += t;
+          }
+        } else {
+          if (currRange <= range) {
+            const t = range * 0.01;
+            currRange += t;
+          }
+          if (currRange >= range) {
+            const t = range * 0.01;
+            currRange -= t;
+          }
+        }
+        if (data - currData > 0) {
+          currData += waveupsp;
+        }
+        if (data - currData < 0) {
+          currData -= waveupsp;
+        }
+
+        sp += 0.07;
+        drawSin();
+      }
+      self.timer = requestAnimationFrame(render);
+    }
+    render();
+  }
+
+  render() {
+    const { radio } = this.state;
+    const { percent, title, height = 1 } = this.props;
+    return (
+      <div
+        className={styles.waterWave}
+        ref={n => (this.root = n)}
+        style={{ transform: `scale(${radio})` }}
+      >
+        <div style={{ width: height, height, overflow: 'hidden' }}>
+          <canvas
+            className={styles.waterWaveCanvasWrapper}
+            ref={n => (this.node = n)}
+            width={height * 2}
+            height={height * 2}
+          />
+        </div>
+        <div className={styles.text} style={{ width: height }}>
+          {title && <span>{title}</span>}
+          <h4>{percent}%</h4>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default autoHeight()(WaterWave);
diff --git a/src/pages/dashboard/analysis/components/Charts/autoHeight.tsx b/src/pages/dashboard/analysis/components/Charts/autoHeight.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..ba20956d1627dfeab788690945968b92d7e31774
--- /dev/null
+++ b/src/pages/dashboard/analysis/components/Charts/autoHeight.tsx
@@ -0,0 +1,79 @@
+import React from 'react';
+
+export type IReactComponent<P = any> =
+  | React.StatelessComponent<P>
+  | React.ComponentClass<P>
+  | React.ClassicComponentClass<P>;
+
+function computeHeight(node: HTMLDivElement) {
+  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);
+  return totalHeight - padding;
+}
+
+function getAutoHeight(n: HTMLDivElement | undefined) {
+  if (!n) {
+    return 0;
+  }
+
+  const node = n;
+
+  let height = computeHeight(node);
+  const parentNode = node.parentNode as HTMLDivElement;
+  if (parentNode) {
+    height = computeHeight(parentNode);
+  }
+
+  return height;
+}
+
+interface AutoHeightProps {
+  height?: number;
+}
+
+function autoHeight() {
+  return <P extends AutoHeightProps>(
+    WrappedComponent: React.ComponentClass<P> | React.SFC<P>,
+  ): React.ComponentClass<P> => {
+    class AutoHeightComponent extends React.Component<P & AutoHeightProps> {
+      state = {
+        computedHeight: 0,
+      };
+
+      root: HTMLDivElement | undefined = undefined;
+
+      componentDidMount() {
+        const { height } = this.props;
+        if (!height) {
+          let h = getAutoHeight(this.root);
+          this.setState({ computedHeight: h });
+          if (h < 1) {
+            h = getAutoHeight(this.root);
+            this.setState({ computedHeight: h });
+          }
+        }
+      }
+
+      handleRoot = (node: HTMLDivElement) => {
+        this.root = node;
+      };
+
+      render() {
+        const { height } = this.props;
+        const { computedHeight } = this.state;
+        const h = height || computedHeight;
+        return (
+          <div ref={this.handleRoot}>
+            {h > 0 && <WrappedComponent {...this.props} height={h} />}
+          </div>
+        );
+      }
+    }
+    return AutoHeightComponent;
+  };
+}
+export default autoHeight;
diff --git a/src/pages/dashboard/analysis/components/Charts/bizcharts.d.ts b/src/pages/dashboard/analysis/components/Charts/bizcharts.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0815ffeeffcacd0ac9710977ab3d4419d078491c
--- /dev/null
+++ b/src/pages/dashboard/analysis/components/Charts/bizcharts.d.ts
@@ -0,0 +1,3 @@
+import * as BizChart from 'bizcharts';
+
+export = BizChart;
diff --git a/src/pages/dashboard/analysis/components/Charts/bizcharts.tsx b/src/pages/dashboard/analysis/components/Charts/bizcharts.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..e08db8d6d2dca240451bdf6ab8a30be077a3fd9d
--- /dev/null
+++ b/src/pages/dashboard/analysis/components/Charts/bizcharts.tsx
@@ -0,0 +1,3 @@
+import * as BizChart from 'bizcharts';
+
+export default BizChart;
diff --git a/src/pages/dashboard/analysis/components/Charts/index.less b/src/pages/dashboard/analysis/components/Charts/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..190428bc80d7cd7f6f22d51fd48fa37b2d44eb10
--- /dev/null
+++ b/src/pages/dashboard/analysis/components/Charts/index.less
@@ -0,0 +1,19 @@
+.miniChart {
+  position: relative;
+  width: 100%;
+  .chartContent {
+    position: absolute;
+    bottom: -28px;
+    width: 100%;
+    > div {
+      margin: 0 -5px;
+      overflow: hidden;
+    }
+  }
+  .chartLoading {
+    position: absolute;
+    top: 16px;
+    left: 50%;
+    margin-left: -7px;
+  }
+}
diff --git a/src/pages/dashboard/analysis/components/Charts/index.tsx b/src/pages/dashboard/analysis/components/Charts/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..50c27030db0d66434d085b1d3cd831b966c215da
--- /dev/null
+++ b/src/pages/dashboard/analysis/components/Charts/index.tsx
@@ -0,0 +1,45 @@
+import numeral from 'numeral';
+import Bar from './Bar';
+import ChartCard from './ChartCard';
+import Field from './Field';
+import Gauge from './Gauge';
+import MiniArea from './MiniArea';
+import MiniBar from './MiniBar';
+import MiniProgress from './MiniProgress';
+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')}`;
+
+const Charts = {
+  yuan,
+  Bar,
+  Pie,
+  Gauge,
+  MiniBar,
+  MiniArea,
+  MiniProgress,
+  ChartCard,
+  Field,
+  WaterWave,
+  TagCloud,
+  TimelineChart,
+};
+
+export {
+  Charts as default,
+  yuan,
+  Bar,
+  Pie,
+  Gauge,
+  MiniBar,
+  MiniArea,
+  MiniProgress,
+  ChartCard,
+  Field,
+  WaterWave,
+  TagCloud,
+  TimelineChart,
+};
diff --git a/src/pages/dashboard/analysis/components/IntroduceRow.tsx b/src/pages/dashboard/analysis/components/IntroduceRow.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..e32004c6afd68306d02ce5b91efd34381f631abc
--- /dev/null
+++ b/src/pages/dashboard/analysis/components/IntroduceRow.tsx
@@ -0,0 +1,160 @@
+import { Col, Icon, Row, Tooltip } from 'antd';
+
+import { FormattedMessage } from 'umi-plugin-react/locale';
+import React from 'react';
+import numeral from 'numeral';
+import { ChartCard, MiniArea, MiniBar, MiniProgress, Field } from './Charts';
+import { VisitDataType } from '../data.d';
+import Trend from './Trend';
+import Yuan from '../utils/Yuan';
+import styles from '../style.less';
+
+const topColResponsiveProps = {
+  xs: 24,
+  sm: 12,
+  md: 12,
+  lg: 12,
+  xl: 6,
+  style: { marginBottom: 24 },
+};
+
+const IntroduceRow = ({ loading, visitData }: { loading: boolean; visitData: VisitDataType[] }) => (
+  <Row gutter={24} type="flex">
+    <Col {...topColResponsiveProps}>
+      <ChartCard
+        bordered={false}
+        title={
+          <FormattedMessage id="dashboard-analysis.analysis.total-sales" defaultMessage="Total Sales" />
+        }
+        action={
+          <Tooltip
+            title={
+              <FormattedMessage id="dashboard-analysis.analysis.introduce" defaultMessage="Introduce" />
+            }
+          >
+            <Icon type="info-circle-o" />
+          </Tooltip>
+        }
+        loading={loading}
+        total={() => <Yuan>126560</Yuan>}
+        footer={
+          <Field
+            label={
+              <FormattedMessage id="dashboard-analysis.analysis.day-sales" defaultMessage="Daily Sales" />
+            }
+            value={`￥${numeral(12423).format('0,0')}`}
+          />
+        }
+        contentHeight={46}
+      >
+        <Trend flag="up" style={{ marginRight: 16 }}>
+          <FormattedMessage id="dashboard-analysis.analysis.week" defaultMessage="Weekly Changes" />
+          <span className={styles.trendText}>12%</span>
+        </Trend>
+        <Trend flag="down">
+          <FormattedMessage id="dashboard-analysis.analysis.day" defaultMessage="Daily Changes" />
+          <span className={styles.trendText}>11%</span>
+        </Trend>
+      </ChartCard>
+    </Col>
+
+    <Col {...topColResponsiveProps}>
+      <ChartCard
+        bordered={false}
+        loading={loading}
+        title={<FormattedMessage id="dashboard-analysis.analysis.visits" defaultMessage="Visits" />}
+        action={
+          <Tooltip
+            title={
+              <FormattedMessage id="dashboard-analysis.analysis.introduce" defaultMessage="Introduce" />
+            }
+          >
+            <Icon type="info-circle-o" />
+          </Tooltip>
+        }
+        total={numeral(8846).format('0,0')}
+        footer={
+          <Field
+            label={
+              <FormattedMessage id="dashboard-analysis.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="dashboard-analysis.analysis.payments" defaultMessage="Payments" />}
+        action={
+          <Tooltip
+            title={
+              <FormattedMessage id="dashboard-analysis.analysis.introduce" defaultMessage="Introduce" />
+            }
+          >
+            <Icon type="info-circle-o" />
+          </Tooltip>
+        }
+        total={numeral(6560).format('0,0')}
+        footer={
+          <Field
+            label={
+              <FormattedMessage
+                id="dashboard-analysis.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="dashboard-analysis.analysis.operational-effect"
+            defaultMessage="Operational Effect"
+          />
+        }
+        action={
+          <Tooltip
+            title={
+              <FormattedMessage id="dashboard-analysis.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="dashboard-analysis.analysis.week" defaultMessage="Weekly Changes" />
+              <span className={styles.trendText}>12%</span>
+            </Trend>
+            <Trend flag="down">
+              <FormattedMessage id="dashboard-analysis.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/src/pages/dashboard/analysis/components/NumberInfo/index.less b/src/pages/dashboard/analysis/components/NumberInfo/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..3e7a3d90a7e2dfb62bb09851a18d35f1487d5575
--- /dev/null
+++ b/src/pages/dashboard/analysis/components/NumberInfo/index.less
@@ -0,0 +1,68 @@
+@import '~antd/es/style/themes/default.less';
+
+.numberInfo {
+  .suffix {
+    margin-left: 4px;
+    color: @text-color;
+    font-size: 16px;
+    font-style: normal;
+  }
+  .numberInfoTitle {
+    margin-bottom: 16px;
+    color: @text-color;
+    font-size: @font-size-lg;
+    transition: all 0.3s;
+  }
+  .numberInfoSubTitle {
+    height: 22px;
+    overflow: hidden;
+    color: @text-color-secondary;
+    font-size: @font-size-base;
+    line-height: 22px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    word-break: break-all;
+  }
+  .numberInfoValue {
+    margin-top: 4px;
+    overflow: hidden;
+    font-size: 0;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    word-break: break-all;
+    & > span {
+      display: inline-block;
+      height: 32px;
+      margin-right: 32px;
+      color: @heading-color;
+      font-size: 24px;
+      line-height: 32px;
+    }
+    .subTotal {
+      margin-right: 0;
+      color: @text-color-secondary;
+      font-size: @font-size-lg;
+      vertical-align: top;
+      i {
+        margin-left: 4px;
+        font-size: 12px;
+        transform: scale(0.82);
+      }
+      :global {
+        .anticon-caret-up {
+          color: @red-6;
+        }
+        .anticon-caret-down {
+          color: @green-6;
+        }
+      }
+    }
+  }
+}
+.numberInfolight {
+  .numberInfoValue {
+    & > span {
+      color: @text-color;
+    }
+  }
+}
diff --git a/src/pages/dashboard/analysis/components/NumberInfo/index.tsx b/src/pages/dashboard/analysis/components/NumberInfo/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..d573c0918adb091933c7d42d48570bbbf8711a37
--- /dev/null
+++ b/src/pages/dashboard/analysis/components/NumberInfo/index.tsx
@@ -0,0 +1,62 @@
+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;
+  total?: React.ReactNode | string;
+  status?: 'up' | 'down';
+  theme?: string;
+  gap?: number;
+  subTotal?: number;
+  suffix?: string;
+  style?: React.CSSProperties;
+}
+const NumberInfo: React.SFC<NumberInfoProps> = ({
+  theme,
+  title,
+  subTitle,
+  total,
+  subTotal,
+  status,
+  suffix,
+  gap,
+  ...rest
+}) => (
+  <div
+    className={classNames(styles.numberInfo, {
+      [styles[`numberInfo${theme}`]]: theme,
+    })}
+    {...rest}
+  >
+    {title && (
+      <div className={styles.numberInfoTitle} title={typeof title === 'string' ? title : ''}>
+        {title}
+      </div>
+    )}
+    {subTitle && (
+      <div
+        className={styles.numberInfoSubTitle}
+        title={typeof subTitle === 'string' ? subTitle : ''}
+      >
+        {subTitle}
+      </div>
+    )}
+    <div className={styles.numberInfoValue} style={gap ? { marginTop: gap } : {}}>
+      <span>
+        {total}
+        {suffix && <em className={styles.suffix}>{suffix}</em>}
+      </span>
+      {(status || subTotal) && (
+        <span className={styles.subTotal}>
+          {subTotal}
+          {status && <Icon type={`caret-${status}`} />}
+        </span>
+      )}
+    </div>
+  </div>
+);
+
+export default NumberInfo;
diff --git a/src/pages/dashboard/analysis/components/OfflineData.tsx b/src/pages/dashboard/analysis/components/OfflineData.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..f64275d7eec43f36dcbc8ace0f8281a186b38520
--- /dev/null
+++ b/src/pages/dashboard/analysis/components/OfflineData.tsx
@@ -0,0 +1,80 @@
+import { Card, Col, Row, Tabs } from 'antd';
+import { FormattedMessage, formatMessage } from 'umi-plugin-react/locale';
+import React from 'react';
+import { OfflineChartData, OfflineDataType } from '../data.d';
+
+import { TimelineChart, Pie } from './Charts';
+import NumberInfo from './NumberInfo';
+import styles from '../style.less';
+
+const CustomTab = ({
+  data,
+  currentTabKey: currentKey,
+}: {
+  data: OfflineDataType;
+  currentTabKey: string;
+}) => (
+  <Row gutter={8} style={{ width: 138, margin: '8px 0' }} type="flex">
+    <Col span={12}>
+      <NumberInfo
+        title={data.name}
+        subTitle={
+          <FormattedMessage
+            id="dashboard-analysis.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;
+
+const OfflineData = ({
+  activeKey,
+  loading,
+  offlineData,
+  offlineChartData,
+  handleTabChange,
+}: {
+  activeKey: string;
+  loading: boolean;
+  offlineData: OfflineDataType[];
+  offlineChartData: OfflineChartData[];
+  handleTabChange: (activeKey: string) => void;
+}) => (
+  <Card loading={loading} className={styles.offlineCard} bordered={false} style={{ marginTop: 32 }}>
+    <Tabs activeKey={activeKey} onChange={handleTabChange}>
+      {offlineData.map(shop => (
+        <TabPane tab={<CustomTab data={shop} currentTabKey={activeKey} />} key={shop.name}>
+          <div style={{ padding: '0 24px' }}>
+            <TimelineChart
+              height={400}
+              data={offlineChartData}
+              titleMap={{
+                y1: formatMessage({ id: 'dashboard-analysis.analysis.traffic' }),
+                y2: formatMessage({ id: 'dashboard-analysis.analysis.payments' }),
+              }}
+            />
+          </div>
+        </TabPane>
+      ))}
+    </Tabs>
+  </Card>
+);
+
+export default OfflineData;
diff --git a/src/pages/dashboard/analysis/components/PageLoading/index.tsx b/src/pages/dashboard/analysis/components/PageLoading/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..77c0f165f9d20b4f974e754efb9cf08606c41a49
--- /dev/null
+++ b/src/pages/dashboard/analysis/components/PageLoading/index.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import { Spin } from 'antd';
+
+// loading components from code split
+// https://umijs.org/plugin/umi-plugin-react.html#dynamicimport
+export default () => (
+  <div style={{ paddingTop: 100, textAlign: 'center' }}>
+    <Spin size="large" />
+  </div>
+);
diff --git a/src/pages/dashboard/analysis/components/ProportionSales.tsx b/src/pages/dashboard/analysis/components/ProportionSales.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..3a5b18802625dd17f145fc36e92dd3716809b044
--- /dev/null
+++ b/src/pages/dashboard/analysis/components/ProportionSales.tsx
@@ -0,0 +1,73 @@
+import { Card, Radio } from 'antd';
+
+import { FormattedMessage } from 'umi-plugin-react/locale';
+import { RadioChangeEvent } from 'antd/es/radio';
+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,
+  salesType,
+  loading,
+  salesPieData,
+  handleChangeSalesType,
+}: {
+  loading: boolean;
+  dropdownGroup: React.ReactNode;
+  salesType: 'all' | 'online' | 'stores';
+  salesPieData: VisitDataType[];
+  handleChangeSalesType?: (e: RadioChangeEvent) => void;
+}) => (
+  <Card
+    loading={loading}
+    className={styles.salesCard}
+    bordered={false}
+    title={
+      <FormattedMessage
+        id="dashboard-analysis.analysis.the-proportion-of-sales"
+        defaultMessage="The Proportion of Sales"
+      />
+    }
+    style={{
+      height: '100%',
+    }}
+    extra={
+      <div className={styles.salesCardExtra}>
+        {dropdownGroup}
+        <div className={styles.salesTypeRadio}>
+          <Radio.Group value={salesType} onChange={handleChangeSalesType}>
+            <Radio.Button value="all">
+              <FormattedMessage id="dashboard-analysis.channel.all" defaultMessage="ALL" />
+            </Radio.Button>
+            <Radio.Button value="online">
+              <FormattedMessage id="dashboard-analysis.channel.online" defaultMessage="Online" />
+            </Radio.Button>
+            <Radio.Button value="stores">
+              <FormattedMessage id="dashboard-analysis.channel.stores" defaultMessage="Stores" />
+            </Radio.Button>
+          </Radio.Group>
+        </div>
+      </div>
+    }
+  >
+    <div>
+      <h4 style={{ marginTop: 8, marginBottom: 32 }}>
+        <FormattedMessage id="dashboard-analysis.analysis.sales" defaultMessage="Sales" />
+      </h4>
+      <Pie
+        hasLegend
+        subTitle={<FormattedMessage id="dashboard-analysis.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/src/pages/dashboard/analysis/components/SalesCard.tsx b/src/pages/dashboard/analysis/components/SalesCard.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..c2a21fcf5093066366cd5d14381b7be7c140ed16
--- /dev/null
+++ b/src/pages/dashboard/analysis/components/SalesCard.tsx
@@ -0,0 +1,161 @@
+import { Card, Col, DatePicker, Row, Tabs } from 'antd';
+import { FormattedMessage, formatMessage } from 'umi-plugin-react/locale';
+
+import { RangePickerValue } from 'antd/es/date-picker/interface';
+import React from 'react';
+import numeral from 'numeral';
+import { VisitDataType } from '../data.d';
+import { Bar } from './Charts';
+import styles from '../style.less';
+
+const { RangePicker } = DatePicker;
+const { TabPane } = Tabs;
+
+const rankingListData: { title: string; total: number }[] = [];
+for (let i = 0; i < 7; i += 1) {
+  rankingListData.push({
+    title: formatMessage({ id: 'dashboard-analysis.analysis.test' }, { no: i }),
+    total: 323234,
+  });
+}
+
+const SalesCard = ({
+  rangePickerValue,
+  salesData,
+  isActive,
+  handleRangePickerChange,
+  loading,
+  selectDate,
+}: {
+  rangePickerValue: RangePickerValue;
+  isActive: (key: 'today' | 'week' | 'month' | 'year') => string;
+  salesData: VisitDataType[];
+  loading: boolean;
+  handleRangePickerChange: (dates: RangePickerValue, dateStrings: [string, string]) => void;
+  selectDate: (key: 'today' | 'week' | 'month' | 'year') => void;
+}) => (
+  <Card loading={loading} bordered={false} bodyStyle={{ padding: 0 }}>
+    <div className={styles.salesCard}>
+      <Tabs
+        tabBarExtraContent={
+          <div className={styles.salesExtraWrap}>
+            <div className={styles.salesExtra}>
+              <a className={isActive('today')} onClick={() => selectDate('today')}>
+                <FormattedMessage id="dashboard-analysis.analysis.all-day" defaultMessage="All Day" />
+              </a>
+              <a className={isActive('week')} onClick={() => selectDate('week')}>
+                <FormattedMessage id="dashboard-analysis.analysis.all-week" defaultMessage="All Week" />
+              </a>
+              <a className={isActive('month')} onClick={() => selectDate('month')}>
+                <FormattedMessage id="dashboard-analysis.analysis.all-month" defaultMessage="All Month" />
+              </a>
+              <a className={isActive('year')} onClick={() => selectDate('year')}>
+                <FormattedMessage id="dashboard-analysis.analysis.all-year" defaultMessage="All Year" />
+              </a>
+            </div>
+            <RangePicker
+              value={rangePickerValue}
+              onChange={handleRangePickerChange}
+              style={{ width: 256 }}
+            />
+          </div>
+        }
+        size="large"
+        tabBarStyle={{ marginBottom: 24 }}
+      >
+        <TabPane
+          tab={<FormattedMessage id="dashboard-analysis.analysis.sales" defaultMessage="Sales" />}
+          key="sales"
+        >
+          <Row type="flex">
+            <Col xl={16} lg={12} md={12} sm={24} xs={24}>
+              <div className={styles.salesBar}>
+                <Bar
+                  height={295}
+                  title={
+                    <FormattedMessage
+                      id="dashboard-analysis.analysis.sales-trend"
+                      defaultMessage="Sales Trend"
+                    />
+                  }
+                  data={salesData}
+                />
+              </div>
+            </Col>
+            <Col xl={8} lg={12} md={12} sm={24} xs={24}>
+              <div className={styles.salesRank}>
+                <h4 className={styles.rankingTitle}>
+                  <FormattedMessage
+                    id="dashboard-analysis.analysis.sales-ranking"
+                    defaultMessage="Sales Ranking"
+                  />
+                </h4>
+                <ul className={styles.rankingList}>
+                  {rankingListData.map((item, i) => (
+                    <li key={item.title}>
+                      <span className={`${styles.rankingItemNumber} ${i < 3 ? styles.active : ''}`}>
+                        {i + 1}
+                      </span>
+                      <span className={styles.rankingItemTitle} title={item.title}>
+                        {item.title}
+                      </span>
+                      <span className={styles.rankingItemValue}>
+                        {numeral(item.total).format('0,0')}
+                      </span>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            </Col>
+          </Row>
+        </TabPane>
+        <TabPane
+          tab={<FormattedMessage id="dashboard-analysis.analysis.visits" defaultMessage="Visits" />}
+          key="views"
+        >
+          <Row>
+            <Col xl={16} lg={12} md={12} sm={24} xs={24}>
+              <div className={styles.salesBar}>
+                <Bar
+                  height={292}
+                  title={
+                    <FormattedMessage
+                      id="dashboard-analysis.analysis.visits-trend"
+                      defaultMessage="Visits Trend"
+                    />
+                  }
+                  data={salesData}
+                />
+              </div>
+            </Col>
+            <Col xl={8} lg={12} md={12} sm={24} xs={24}>
+              <div className={styles.salesRank}>
+                <h4 className={styles.rankingTitle}>
+                  <FormattedMessage
+                    id="dashboard-analysis.analysis.visits-ranking"
+                    defaultMessage="Visits Ranking"
+                  />
+                </h4>
+                <ul className={styles.rankingList}>
+                  {rankingListData.map((item, i) => (
+                    <li key={item.title}>
+                      <span className={`${styles.rankingItemNumber} ${i < 3 ? styles.active : ''}`}>
+                        {i + 1}
+                      </span>
+                      <span className={styles.rankingItemTitle} title={item.title}>
+                        {item.title}
+                      </span>
+                      <span>{numeral(item.total).format('0,0')}</span>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            </Col>
+          </Row>
+        </TabPane>
+      </Tabs>
+    </div>
+  </Card>
+);
+
+export default SalesCard;
diff --git a/src/pages/dashboard/analysis/components/TopSearch.tsx b/src/pages/dashboard/analysis/components/TopSearch.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..a05e0aea83072d72c86dfc46e1d11f0c8f11efac
--- /dev/null
+++ b/src/pages/dashboard/analysis/components/TopSearch.tsx
@@ -0,0 +1,134 @@
+import { Card, Col, Icon, Row, Table, Tooltip } from 'antd';
+import { FormattedMessage } from 'umi-plugin-react/locale';
+import React from 'react';
+import numeral from 'numeral';
+import { SearchDataType, VisitDataType } from '../data.d';
+
+import { MiniArea } from './Charts';
+import NumberInfo from './NumberInfo';
+import Trend from './Trend';
+import styles from '../style.less';
+
+const columns = [
+  {
+    title: <FormattedMessage id="dashboard-analysis.table.rank" defaultMessage="Rank" />,
+    dataIndex: 'index',
+    key: 'index',
+  },
+  {
+    title: (
+      <FormattedMessage id="dashboard-analysis.table.search-keyword" defaultMessage="Search keyword" />
+    ),
+    dataIndex: 'keyword',
+    key: 'keyword',
+    render: (text: React.ReactNode) => <a href="/">{text}</a>,
+  },
+  {
+    title: <FormattedMessage id="dashboard-analysis.table.users" defaultMessage="Users" />,
+    dataIndex: 'count',
+    key: 'count',
+    sorter: (a: { count: number }, b: { count: number }) => a.count - b.count,
+    className: styles.alignRight,
+  },
+  {
+    title: <FormattedMessage id="dashboard-analysis.table.weekly-range" defaultMessage="Weekly Range" />,
+    dataIndex: 'range',
+    key: 'range',
+    sorter: (a: { range: number }, b: { range: number }) => a.range - b.range,
+    render: (text: React.ReactNode, record: { status: number }) => (
+      <Trend flag={record.status === 1 ? 'down' : 'up'}>
+        <span style={{ marginRight: 4 }}>{text}%</span>
+      </Trend>
+    ),
+  },
+];
+
+const TopSearch = ({
+  loading,
+  visitData2,
+  searchData,
+  dropdownGroup,
+}: {
+  loading: boolean;
+  visitData2: VisitDataType[];
+  dropdownGroup: React.ReactNode;
+  searchData: SearchDataType[];
+}) => (
+  <Card
+    loading={loading}
+    bordered={false}
+    title={
+      <FormattedMessage
+        id="dashboard-analysis.analysis.online-top-search"
+        defaultMessage="Online Top Search"
+      />
+    }
+    extra={dropdownGroup}
+    style={{
+      height: '100%',
+    }}
+  >
+    <Row gutter={68} type="flex">
+      <Col sm={12} xs={24} style={{ marginBottom: 24 }}>
+        <NumberInfo
+          subTitle={
+            <span>
+              <FormattedMessage
+                id="dashboard-analysis.analysis.search-users"
+                defaultMessage="search users"
+              />
+              <Tooltip
+                title={
+                  <FormattedMessage id="dashboard-analysis.analysis.introduce" defaultMessage="introduce" />
+                }
+              >
+                <Icon style={{ marginLeft: 8 }} type="info-circle-o" />
+              </Tooltip>
+            </span>
+          }
+          gap={8}
+          total={numeral(12321).format('0,0')}
+          status="up"
+          subTotal={17.1}
+        />
+        <MiniArea line height={45} data={visitData2} />
+      </Col>
+      <Col sm={12} xs={24} style={{ marginBottom: 24 }}>
+        <NumberInfo
+          subTitle={
+            <span>
+              <FormattedMessage
+                id="dashboard-analysis.analysis.per-capita-search"
+                defaultMessage="Per Capita Search"
+              />
+              <Tooltip
+                title={
+                  <FormattedMessage id="dashboard-analysis.analysis.introduce" defaultMessage="introduce" />
+                }
+              >
+                <Icon style={{ marginLeft: 8 }} type="info-circle-o" />
+              </Tooltip>
+            </span>
+          }
+          total={2.7}
+          status="down"
+          subTotal={26.2}
+          gap={8}
+        />
+        <MiniArea line height={45} data={visitData2} />
+      </Col>
+    </Row>
+    <Table<any>
+      rowKey={record => record.index}
+      size="small"
+      columns={columns}
+      dataSource={searchData}
+      pagination={{
+        style: { marginBottom: 0 },
+        pageSize: 5,
+      }}
+    />
+  </Card>
+);
+
+export default TopSearch;
diff --git a/src/pages/dashboard/analysis/components/Trend/index.less b/src/pages/dashboard/analysis/components/Trend/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..28c315142185367e763e4779bc43bdb65b8cdf1d
--- /dev/null
+++ b/src/pages/dashboard/analysis/components/Trend/index.less
@@ -0,0 +1,37 @@
+@import '~antd/es/style/themes/default.less';
+
+.trendItem {
+  display: inline-block;
+  font-size: @font-size-base;
+  line-height: 22px;
+
+  .up,
+  .down {
+    position: relative;
+    top: 1px;
+    margin-left: 4px;
+    i {
+      font-size: 12px;
+      transform: scale(0.83);
+    }
+  }
+  .up {
+    color: @red-6;
+  }
+  .down {
+    top: -1px;
+    color: @green-6;
+  }
+
+  &.trendItemGrey .up,
+  &.trendItemGrey .down {
+    color: @text-color;
+  }
+
+  &.reverseColor .up {
+    color: @green-6;
+  }
+  &.reverseColor .down {
+    color: @red-6;
+  }
+}
diff --git a/src/pages/dashboard/analysis/components/Trend/index.tsx b/src/pages/dashboard/analysis/components/Trend/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..2bba484e8d7608837c0c979eee52cdfaf9d57c5a
--- /dev/null
+++ b/src/pages/dashboard/analysis/components/Trend/index.tsx
@@ -0,0 +1,42 @@
+import { Icon } from 'antd';
+import React from 'react';
+import classNames from 'classnames';
+import styles from './index.less';
+
+export interface TrendProps {
+  colorful?: boolean;
+  flag: 'up' | 'down';
+  style?: React.CSSProperties;
+  reverseColor?: boolean;
+  className?: string;
+}
+
+const Trend: React.SFC<TrendProps> = ({
+  colorful = true,
+  reverseColor = false,
+  flag,
+  children,
+  className,
+  ...rest
+}) => {
+  const classString = classNames(
+    styles.trendItem,
+    {
+      [styles.trendItemGrey]: !colorful,
+      [styles.reverseColor]: reverseColor && colorful,
+    },
+    className,
+  );
+  return (
+    <div {...rest} className={classString} title={typeof children === 'string' ? children : ''}>
+      <span>{children}</span>
+      {flag && (
+        <span className={styles[flag]}>
+          <Icon type={`caret-${flag}`} />
+        </span>
+      )}
+    </div>
+  );
+};
+
+export default Trend;
diff --git a/src/pages/dashboard/analysis/data.d.ts b/src/pages/dashboard/analysis/data.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..adc1c9936d5e898588a79914e54239fe050ab356
--- /dev/null
+++ b/src/pages/dashboard/analysis/data.d.ts
@@ -0,0 +1,42 @@
+export interface VisitDataType {
+  x: string;
+  y: number;
+}
+
+export interface SearchDataType {
+  index: number;
+  keyword: string;
+  count: number;
+  range: number;
+  status: number;
+}
+
+export interface OfflineDataType {
+  name: string;
+  cvr: number;
+}
+
+export interface OfflineChartData {
+  x: any;
+  y1: number;
+  y2: number;
+}
+
+export interface RadarData {
+  name: string;
+  label: string;
+  value: number;
+}
+
+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/src/pages/dashboard/analysis/index.tsx b/src/pages/dashboard/analysis/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..ea04cce627c905099a0621abc2fcbeb649114e9b
--- /dev/null
+++ b/src/pages/dashboard/analysis/index.tsx
@@ -0,0 +1,223 @@
+import { Col, Dropdown, Icon, Menu, Row } from 'antd';
+import React, { Component, Suspense } from 'react';
+
+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';
+
+const IntroduceRow = React.lazy(() => import('./components/IntroduceRow'));
+const SalesCard = React.lazy(() => import('./components/SalesCard'));
+const TopSearch = React.lazy(() => import('./components/TopSearch'));
+const ProportionSales = React.lazy(() => import('./components/ProportionSales'));
+const OfflineData = React.lazy(() => import('./components/OfflineData'));
+
+interface dashboardAnalysisProps {
+  dashboardAnalysis: AnalysisData;
+  dispatch: Dispatch<any>;
+  loading: boolean;
+}
+
+interface dashboardAnalysisState {
+  salesType: 'all' | 'online' | 'stores';
+  currentTabKey: string;
+  rangePickerValue: RangePickerValue;
+}
+
+@connect(
+  ({
+    dashboardAnalysis,
+    loading,
+  }: {
+    dashboardAnalysis: any;
+    loading: {
+      effects: { [key: string]: boolean };
+    };
+  }) => ({
+    dashboardAnalysis,
+    loading: loading.effects['dashboardAnalysis/fetch'],
+  }),
+)
+class Analysis extends Component<
+  dashboardAnalysisProps,
+  dashboardAnalysisState
+> {
+  state: dashboardAnalysisState = {
+    salesType: 'all',
+    currentTabKey: '',
+    rangePickerValue: getTimeDistance('year'),
+  };
+
+  reqRef: number = 0;
+
+  timeoutId: number = 0;
+
+  componentDidMount() {
+    const { dispatch } = this.props;
+    this.reqRef = requestAnimationFrame(() => {
+      dispatch({
+        type: 'dashboardAnalysis/fetch',
+      });
+    });
+  }
+
+  componentWillUnmount() {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'dashboardAnalysis/clear',
+    });
+    cancelAnimationFrame(this.reqRef);
+    clearTimeout(this.timeoutId);
+  }
+
+  handleChangeSalesType = (e: RadioChangeEvent) => {
+    this.setState({
+      salesType: e.target.value,
+    });
+  };
+
+  handleTabChange = (key: string) => {
+    this.setState({
+      currentTabKey: key,
+    });
+  };
+
+  handleRangePickerChange = (rangePickerValue: RangePickerValue) => {
+    const { dispatch } = this.props;
+    this.setState({
+      rangePickerValue,
+    });
+
+    dispatch({
+      type: 'dashboardAnalysis/fetchSalesData',
+    });
+  };
+
+  selectDate = (type: 'today' | 'week' | 'month' | 'year') => {
+    const { dispatch } = this.props;
+    this.setState({
+      rangePickerValue: getTimeDistance(type),
+    });
+
+    dispatch({
+      type: 'dashboardAnalysis/fetchSalesData',
+    });
+  };
+
+  isActive = (type: 'today' | 'week' | 'month' | 'year') => {
+    const { rangePickerValue } = this.state;
+    const value = getTimeDistance(type);
+    if (!rangePickerValue[0] || !rangePickerValue[1]) {
+      return '';
+    }
+    if (
+      rangePickerValue[0].isSame(value[0], 'day') &&
+      rangePickerValue[1].isSame(value[1], 'day')
+    ) {
+      return styles.currentDate;
+    }
+    return '';
+  };
+
+  render() {
+    const { rangePickerValue, salesType, currentTabKey } = this.state;
+    const { dashboardAnalysis, loading } = this.props;
+    const {
+      visitData,
+      visitData2,
+      salesData,
+      searchData,
+      offlineData,
+      offlineChartData,
+      salesTypeData,
+      salesTypeDataOnline,
+      salesTypeDataOffline,
+    } = dashboardAnalysis;
+    let salesPieData;
+    if (salesType === 'all') {
+      salesPieData = salesTypeData;
+    } else {
+      salesPieData = salesType === 'online' ? salesTypeDataOnline : salesTypeDataOffline;
+    }
+    const menu = (
+      <Menu>
+        <Menu.Item>操作一</Menu.Item>
+        <Menu.Item>操作二</Menu.Item>
+      </Menu>
+    );
+
+    const dropdownGroup = (
+      <span className={styles.iconGroup}>
+        <Dropdown overlay={menu} placement="bottomRight">
+          <Icon type="ellipsis" />
+        </Dropdown>
+      </span>
+    );
+
+    const activeKey = currentTabKey || (offlineData[0] && offlineData[0].name);
+    return (
+      <GridContent>
+        <React.Fragment>
+          <Suspense fallback={<PageLoading />}>
+            <IntroduceRow loading={loading} visitData={visitData} />
+          </Suspense>
+          <Suspense fallback={null}>
+            <SalesCard
+              rangePickerValue={rangePickerValue}
+              salesData={salesData}
+              isActive={this.isActive}
+              handleRangePickerChange={this.handleRangePickerChange}
+              loading={loading}
+              selectDate={this.selectDate}
+            />
+          </Suspense>
+          <Row
+            gutter={24}
+            type="flex"
+            style={{
+              marginTop: 24,
+            }}
+          >
+            <Col xl={12} lg={24} md={24} sm={24} xs={24}>
+              <Suspense fallback={null}>
+                <TopSearch
+                  loading={loading}
+                  visitData2={visitData2}
+                  searchData={searchData}
+                  dropdownGroup={dropdownGroup}
+                />
+              </Suspense>
+            </Col>
+            <Col xl={12} lg={24} md={24} sm={24} xs={24}>
+              <Suspense fallback={null}>
+                <ProportionSales
+                  dropdownGroup={dropdownGroup}
+                  salesType={salesType}
+                  loading={loading}
+                  salesPieData={salesPieData}
+                  handleChangeSalesType={this.handleChangeSalesType}
+                />
+              </Suspense>
+            </Col>
+          </Row>
+          <Suspense fallback={null}>
+            <OfflineData
+              activeKey={activeKey}
+              loading={loading}
+              offlineData={offlineData}
+              offlineChartData={offlineChartData}
+              handleTabChange={this.handleTabChange}
+            />
+          </Suspense>
+        </React.Fragment>
+      </GridContent>
+    );
+  }
+}
+
+export default Analysis;
diff --git a/src/pages/dashboard/analysis/locales/en-US.ts b/src/pages/dashboard/analysis/locales/en-US.ts
new file mode 100644
index 0000000000000000000000000000000000000000..78407f194deb34f5dd9297d889f8f1019602229e
--- /dev/null
+++ b/src/pages/dashboard/analysis/locales/en-US.ts
@@ -0,0 +1,34 @@
+export default {
+  'dashboard-analysis.analysis.test': 'Gongzhuan No.{no} shop',
+  'dashboard-analysis.analysis.introduce': 'Introduce',
+  'dashboard-analysis.analysis.total-sales': 'Total Sales',
+  'dashboard-analysis.analysis.day-sales': 'Daily Sales',
+  'dashboard-analysis.analysis.visits': 'Visits',
+  'dashboard-analysis.analysis.visits-trend': 'Visits Trend',
+  'dashboard-analysis.analysis.visits-ranking': 'Visits Ranking',
+  'dashboard-analysis.analysis.day-visits': 'Daily Visits',
+  'dashboard-analysis.analysis.week': 'WoW Change',
+  'dashboard-analysis.analysis.day': 'DoD Change',
+  'dashboard-analysis.analysis.payments': 'Payments',
+  'dashboard-analysis.analysis.conversion-rate': 'Conversion Rate',
+  'dashboard-analysis.analysis.operational-effect': 'Operational Effect',
+  'dashboard-analysis.analysis.sales-trend': 'Stores Sales Trend',
+  'dashboard-analysis.analysis.sales-ranking': 'Sales Ranking',
+  'dashboard-analysis.analysis.all-year': 'All Year',
+  'dashboard-analysis.analysis.all-month': 'All Month',
+  'dashboard-analysis.analysis.all-week': 'All Week',
+  'dashboard-analysis.analysis.all-day': 'All day',
+  'dashboard-analysis.analysis.search-users': 'Search Users',
+  'dashboard-analysis.analysis.per-capita-search': 'Per Capita Search',
+  'dashboard-analysis.analysis.online-top-search': 'Online Top Search',
+  'dashboard-analysis.analysis.the-proportion-of-sales': 'The Proportion Of Sales',
+  'dashboard-analysis.channel.all': 'ALL',
+  'dashboard-analysis.channel.online': 'Online',
+  'dashboard-analysis.channel.stores': 'Stores',
+  'dashboard-analysis.analysis.sales': 'Sales',
+  'dashboard-analysis.analysis.traffic': 'Traffic',
+  'dashboard-analysis.table.rank': 'Rank',
+  'dashboard-analysis.table.search-keyword': 'Keyword',
+  'dashboard-analysis.table.users': 'Users',
+  'dashboard-analysis.table.weekly-range': 'Weekly Range',
+};
diff --git a/src/pages/dashboard/analysis/locales/pt-BR.ts b/src/pages/dashboard/analysis/locales/pt-BR.ts
new file mode 100644
index 0000000000000000000000000000000000000000..23355908da2634c2c108f3b1d0fa0bb8da36e14f
--- /dev/null
+++ b/src/pages/dashboard/analysis/locales/pt-BR.ts
@@ -0,0 +1,34 @@
+export default {
+  'dashboard-analysis.analysis.test': 'Gongzhuan No.{no} shop',
+  'dashboard-analysis.analysis.introduce': 'Introduzir',
+  'dashboard-analysis.analysis.total-sales': 'Vendas Totais',
+  'dashboard-analysis.analysis.day-sales': 'Vendas do Dia',
+  'dashboard-analysis.analysis.visits': 'Visitas',
+  'dashboard-analysis.analysis.visits-trend': 'Tendência de Visitas',
+  'dashboard-analysis.analysis.visits-ranking': 'Ranking de Visitas',
+  'dashboard-analysis.analysis.day-visits': 'Visitas do Dia',
+  'dashboard-analysis.analysis.week': 'Taxa Semanal',
+  'dashboard-analysis.analysis.day': 'Taxa Diária',
+  'dashboard-analysis.analysis.payments': 'Pagamentos',
+  'dashboard-analysis.analysis.conversion-rate': 'Taxa de Conversão',
+  'dashboard-analysis.analysis.operational-effect': 'Efeito Operacional',
+  'dashboard-analysis.analysis.sales-trend': 'Tendência de Vendas das Lojas',
+  'dashboard-analysis.analysis.sales-ranking': 'Ranking de Vendas',
+  'dashboard-analysis.$2': 'Todo ano',
+  'dashboard-analysis.analysis.all-month': 'Todo mês',
+  'dashboard-analysis.analysis.all-week': 'Toda semana',
+  'dashboard-analysis.analysis.all-day': 'Todo dia',
+  'dashboard-analysis.analysis.search-users': 'Pesquisa de Usuários',
+  'dashboard-analysis.analysis.per-capita-search': 'Busca Per Capta',
+  'dashboard-analysis.analysis.online-top-search': 'Mais Buscadas Online',
+  'dashboard-analysis.analysis.the-proportion-of-sales': 'The Proportion Of Sales',
+  'dashboard-analysis.channel.all': 'Tudo',
+  'dashboard-analysis.channel.online': 'Online',
+  'dashboard-analysis.channel.stores': 'Lojas',
+  'dashboard-analysis.analysis.sales': 'Vendas',
+  'dashboard-analysis.analysis.traffic': 'Tráfego',
+  'dashboard-analysis.table.rank': 'Rank',
+  'dashboard-analysis.table.search-keyword': 'Palavra chave',
+  'dashboard-analysis.table.users': 'Usuários',
+  'dashboard-analysis.table.weekly-range': 'Faixa Semanal',
+};
diff --git a/src/pages/dashboard/analysis/locales/zh-CN.ts b/src/pages/dashboard/analysis/locales/zh-CN.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ac9646c85db9cd21cadcff14294928b8bb1c6823
--- /dev/null
+++ b/src/pages/dashboard/analysis/locales/zh-CN.ts
@@ -0,0 +1,34 @@
+export default {
+  'dashboard-analysis.analysis.test': '工专路 {no} 号店',
+  'dashboard-analysis.analysis.introduce': '指标说明',
+  'dashboard-analysis.analysis.total-sales': '总销售额',
+  'dashboard-analysis.analysis.day-sales': '日销售额',
+  'dashboard-analysis.analysis.visits': '访问量',
+  'dashboard-analysis.analysis.visits-trend': '访问量趋势',
+  'dashboard-analysis.analysis.visits-ranking': '门店访问量排名',
+  'dashboard-analysis.analysis.day-visits': '日访问量',
+  'dashboard-analysis.analysis.week': '周同比',
+  'dashboard-analysis.analysis.day': '日同比',
+  'dashboard-analysis.analysis.payments': '支付笔数',
+  'dashboard-analysis.analysis.conversion-rate': '转化率',
+  'dashboard-analysis.analysis.operational-effect': '运营活动效果',
+  'dashboard-analysis.analysis.sales-trend': '销售趋势',
+  'dashboard-analysis.analysis.sales-ranking': '门店销售额排名',
+  'dashboard-analysis.analysis.all-year': '全年',
+  'dashboard-analysis.analysis.all-month': '本月',
+  'dashboard-analysis.analysis.all-week': '本周',
+  'dashboard-analysis.analysis.all-day': '今日',
+  'dashboard-analysis.analysis.search-users': '搜索用户数',
+  'dashboard-analysis.analysis.per-capita-search': '人均搜索次数',
+  'dashboard-analysis.analysis.online-top-search': '线上热门搜索',
+  'dashboard-analysis.analysis.the-proportion-of-sales': '销售额类别占比',
+  'dashboard-analysis.channel.all': '全部渠道',
+  'dashboard-analysis.channel.online': '线上',
+  'dashboard-analysis.channel.stores': '门店',
+  'dashboard-analysis.analysis.sales': '销售额',
+  'dashboard-analysis.analysis.traffic': '客流量',
+  'dashboard-analysis.table.rank': '排名',
+  'dashboard-analysis.table.search-keyword': '搜索关键词',
+  'dashboard-analysis.table.users': '用户数',
+  'dashboard-analysis.table.weekly-range': '周涨幅',
+};
diff --git a/src/pages/dashboard/analysis/locales/zh-TW.ts b/src/pages/dashboard/analysis/locales/zh-TW.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8040fd228498ac3b2a9bec7a475d753624c07fcc
--- /dev/null
+++ b/src/pages/dashboard/analysis/locales/zh-TW.ts
@@ -0,0 +1,34 @@
+export default {
+  'dashboard-analysis.analysis.test': '工專路 {no} 號店',
+  'dashboard-analysis.analysis.introduce': '指標說明',
+  'dashboard-analysis.analysis.total-sales': '總銷售額',
+  'dashboard-analysis.analysis.day-sales': '日銷售額',
+  'dashboard-analysis.analysis.visits': '訪問量',
+  'dashboard-analysis.analysis.visits-trend': '訪問量趨勢',
+  'dashboard-analysis.analysis.visits-ranking': '門店訪問量排名',
+  'dashboard-analysis.analysis.day-visits': '日訪問量',
+  'dashboard-analysis.analysis.week': '周同比',
+  'dashboard-analysis.analysis.day': '日同比',
+  'dashboard-analysis.analysis.payments': '支付筆數',
+  'dashboard-analysis.analysis.conversion-rate': '轉化率',
+  'dashboard-analysis.analysis.operational-effect': '運營活動效果',
+  'dashboard-analysis.analysis.sales-trend': '銷售趨勢',
+  'dashboard-analysis.analysis.sales-ranking': '門店銷售額排名',
+  'dashboard-analysis.analysis.all-year': '全年',
+  'dashboard-analysis.analysis.all-month': '本月',
+  'dashboard-analysis.analysis.all-week': '本周',
+  'dashboard-analysis.analysis.all-day': '今日',
+  'dashboard-analysis.analysis.search-users': '搜索用戶數',
+  'dashboard-analysis.analysis.per-capita-search': '人均搜索次數',
+  'dashboard-analysis.analysis.online-top-search': '線上熱門搜索',
+  'dashboard-analysis.analysis.the-proportion-of-sales': '銷售額類別占比',
+  'dashboard-analysis.channel.all': '全部渠道',
+  'dashboard-analysis.channel.online': '線上',
+  'dashboard-analysis.channel.stores': '門店',
+  'dashboard-analysis.analysis.sales': '銷售額',
+  'dashboard-analysis.analysis.traffic': '客流量',
+  'dashboard-analysis.table.rank': '排名',
+  'dashboard-analysis.table.search-keyword': '搜索關鍵詞',
+  'dashboard-analysis.table.users': '用戶數',
+  'dashboard-analysis.table.weekly-range': '周漲幅',
+};
diff --git a/src/pages/dashboard/analysis/model.tsx b/src/pages/dashboard/analysis/model.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..d2ffef01f36e61a20321fe675edb690f8f230fff
--- /dev/null
+++ b/src/pages/dashboard/analysis/model.tsx
@@ -0,0 +1,84 @@
+import { AnyAction, Reducer } from 'redux';
+
+import { EffectsCommandMap } from 'dva';
+import { AnalysisData } from './data.d';
+import { fakeChartData } from './service';
+
+export type Effect = (
+  action: AnyAction,
+  effects: EffectsCommandMap & { select: <T>(func: (state: AnalysisData) => T) => T },
+) => void;
+
+export interface ModelType {
+  namespace: string;
+  state: AnalysisData;
+  effects: {
+    fetch: Effect;
+    fetchSalesData: Effect;
+  };
+  reducers: {
+    save: Reducer<AnalysisData>;
+    clear: Reducer<AnalysisData>;
+  };
+}
+
+const Model: ModelType = {
+  namespace: 'dashboardAnalysis',
+
+  state: {
+    visitData: [],
+    visitData2: [],
+    salesData: [],
+    searchData: [],
+    offlineData: [],
+    offlineChartData: [],
+    salesTypeData: [],
+    salesTypeDataOnline: [],
+    salesTypeDataOffline: [],
+    radarData: [],
+  },
+
+  effects: {
+    *fetch(_, { call, put }) {
+      const response = yield call(fakeChartData);
+      yield put({
+        type: 'save',
+        payload: response,
+      });
+    },
+    *fetchSalesData(_, { call, put }) {
+      const response = yield call(fakeChartData);
+      yield put({
+        type: 'save',
+        payload: {
+          salesData: response.salesData,
+        },
+      });
+    },
+  },
+
+  reducers: {
+    save(state, { payload }) {
+      return {
+        ...state,
+        ...payload,
+      };
+    },
+    clear() {
+      return {
+        visitData: [],
+        visitData2: [],
+        salesData: [],
+        searchData: [],
+        offlineData: [],
+        offlineChartData: [],
+        salesTypeData: [],
+        salesTypeDataOnline: [],
+        salesTypeDataOffline: [],
+        radarData: [],
+      };
+    },
+  },
+};
+
+export default Model;
diff --git a/src/pages/dashboard/analysis/service.tsx b/src/pages/dashboard/analysis/service.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..26cd82f03661b7ad66b2da6174e665c34ac72436
--- /dev/null
+++ b/src/pages/dashboard/analysis/service.tsx
@@ -0,0 +1,5 @@
+import request from 'umi-request';
+
+export async function fakeChartData() {
+  return request('/api/fake_chart_data');
+}
diff --git a/src/pages/dashboard/analysis/style.less b/src/pages/dashboard/analysis/style.less
new file mode 100644
index 0000000000000000000000000000000000000000..e3cab4cdb37354fc2d438a2ed6018e55e2add03f
--- /dev/null
+++ b/src/pages/dashboard/analysis/style.less
@@ -0,0 +1,188 @@
+@import '~antd/es/style/themes/default.less';
+
+.iconGroup {
+  i {
+    margin-left: 16px;
+    color: @text-color-secondary;
+    cursor: pointer;
+    transition: color 0.32s;
+    &:hover {
+      color: @text-color;
+    }
+  }
+}
+
+.rankingList {
+  margin: 25px 0 0;
+  padding: 0;
+  list-style: none;
+  li {
+    display: flex;
+    align-items: center;
+    margin-top: 16px;
+    zoom: 1;
+    &::before,
+    &::after {
+      display: table;
+      content: ' ';
+    }
+    &::after {
+      clear: both;
+      height: 0;
+      font-size: 0;
+      visibility: hidden;
+    }
+    span {
+      color: @text-color;
+      font-size: 14px;
+      line-height: 22px;
+    }
+    .rankingItemNumber {
+      display: inline-block;
+      width: 20px;
+      height: 20px;
+      margin-top: 1.5px;
+      margin-right: 16px;
+      font-weight: 600;
+      font-size: 12px;
+      line-height: 20px;
+      text-align: center;
+      background-color: @tag-default-bg;
+      border-radius: 20px;
+      &.active {
+        color: #fff;
+        background-color: #314659;
+      }
+    }
+    .rankingItemTitle {
+      flex: 1;
+      margin-right: 8px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+  }
+}
+
+.salesExtra {
+  display: inline-block;
+  margin-right: 24px;
+  a {
+    margin-left: 24px;
+    color: @text-color;
+    &:hover {
+      color: @primary-color;
+    }
+    &.currentDate {
+      color: @primary-color;
+    }
+  }
+}
+
+.salesCard {
+  .salesBar {
+    padding: 0 0 32px 32px;
+  }
+  .salesRank {
+    padding: 0 32px 32px 72px;
+  }
+  :global {
+    .ant-tabs-bar {
+      padding-left: 16px;
+      .ant-tabs-nav .ant-tabs-tab {
+        padding-top: 16px;
+        padding-bottom: 14px;
+        line-height: 24px;
+      }
+    }
+    .ant-tabs-extra-content {
+      padding-right: 24px;
+      line-height: 55px;
+    }
+    .ant-card-head {
+      position: relative;
+    }
+    .ant-card-head-title {
+      align-items: normal;
+    }
+  }
+}
+
+.salesCardExtra {
+  height: inherit;
+}
+
+.salesTypeRadio {
+  position: absolute;
+  right: 54px;
+  bottom: 12px;
+}
+
+.offlineCard {
+  :global {
+    .ant-tabs-ink-bar {
+      bottom: auto;
+    }
+    .ant-tabs-bar {
+      border-bottom: none;
+    }
+    .ant-tabs-nav-container-scrolling {
+      padding-right: 40px;
+      padding-left: 40px;
+    }
+    .ant-tabs-tab-prev-icon::before {
+      position: relative;
+      left: 6px;
+    }
+    .ant-tabs-tab-next-icon::before {
+      position: relative;
+      right: 6px;
+    }
+    .ant-tabs-tab-active h4 {
+      color: @primary-color;
+    }
+  }
+}
+
+.trendText {
+  margin-left: 8px;
+  color: @heading-color;
+}
+
+@media screen and (max-width: @screen-lg) {
+  .salesExtra {
+    display: none;
+  }
+
+  .rankingList {
+    li {
+      span:first-child {
+        margin-right: 8px;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: @screen-md) {
+  .rankingTitle {
+    margin-top: 16px;
+  }
+
+  .salesCard .salesBar {
+    padding: 16px;
+  }
+}
+
+@media screen and (max-width: @screen-sm) {
+  .salesExtraWrap {
+    display: none;
+  }
+
+  .salesCard {
+    :global {
+      .ant-tabs-content {
+        padding-top: 30px;
+      }
+    }
+  }
+}
diff --git a/src/pages/dashboard/analysis/utils/Yuan.tsx b/src/pages/dashboard/analysis/utils/Yuan.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..9f71019cda858b6c9a9fe0faec116d7a3b50b906
--- /dev/null
+++ b/src/pages/dashboard/analysis/utils/Yuan.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import { yuan } from '../components/Charts';
+/**
+ * 减少使用 dangerouslySetInnerHTML
+ */
+export default class Yuan extends React.Component<{
+  children: React.ReactText;
+}> {
+  main: HTMLSpanElement | undefined | null = null;
+
+  componentDidMount() {
+    this.renderToHtml();
+  }
+
+  componentDidUpdate() {
+    this.renderToHtml();
+  }
+
+  renderToHtml = () => {
+    const { children } = this.props;
+    if (this.main) {
+      this.main.innerHTML = yuan(children);
+    }
+  };
+
+  render() {
+    return (
+      <span
+        ref={ref => {
+          this.main = ref;
+        }}
+      />
+    );
+  }
+}
diff --git a/src/pages/dashboard/analysis/utils/utils.less b/src/pages/dashboard/analysis/utils/utils.less
new file mode 100644
index 0000000000000000000000000000000000000000..de1aa64222b6f14328d3a9e3c262ac5a31cce5af
--- /dev/null
+++ b/src/pages/dashboard/analysis/utils/utils.less
@@ -0,0 +1,50 @@
+.textOverflow() {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  word-break: break-all;
+}
+
+.textOverflowMulti(@line: 3, @bg: #fff) {
+  position: relative;
+  max-height: @line * 1.5em;
+  margin-right: -1em;
+  padding-right: 1em;
+  overflow: hidden;
+  line-height: 1.5em;
+  text-align: justify;
+  &::before {
+    position: absolute;
+    right: 14px;
+    bottom: 0;
+    padding: 0 1px;
+    background: @bg;
+    content: '...';
+  }
+  &::after {
+    position: absolute;
+    right: 14px;
+    width: 1em;
+    height: 1em;
+    margin-top: 0.2em;
+    background: white;
+    content: '';
+  }
+}
+
+// mixins for clearfix
+// ------------------------
+.clearfix() {
+  zoom: 1;
+  &::before,
+  &::after {
+    display: table;
+    content: ' ';
+  }
+  &::after {
+    clear: both;
+    height: 0;
+    font-size: 0;
+    visibility: hidden;
+  }
+}
diff --git a/src/pages/dashboard/analysis/utils/utils.ts b/src/pages/dashboard/analysis/utils/utils.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f2ce1b66cdbff40dc269f80e4f193180be4d7176
--- /dev/null
+++ b/src/pages/dashboard/analysis/utils/utils.ts
@@ -0,0 +1,50 @@
+import { RangePickerValue } from 'antd/es/date-picker/interface';
+import moment from 'moment';
+
+export function fixedZero(val: number) {
+  return val * 1 < 10 ? `0${val}` : val;
+}
+
+export function getTimeDistance(type: 'today' | 'week' | 'month' | 'year'): RangePickerValue {
+  const now = new Date();
+  const oneDay = 1000 * 60 * 60 * 24;
+
+  if (type === 'today') {
+    now.setHours(0);
+    now.setMinutes(0);
+    now.setSeconds(0);
+    return [moment(now), moment(now.getTime() + (oneDay - 1000))];
+  }
+
+  if (type === 'week') {
+    let day = now.getDay();
+    now.setHours(0);
+    now.setMinutes(0);
+    now.setSeconds(0);
+
+    if (day === 0) {
+      day = 6;
+    } else {
+      day -= 1;
+    }
+
+    const beginTime = now.getTime() - day * oneDay;
+
+    return [moment(beginTime), moment(beginTime + (7 * oneDay - 1000))];
+  }
+  const year = now.getFullYear();
+
+  if (type === 'month') {
+    const month = now.getMonth();
+    const nextDate = moment(now).add(1, 'months');
+    const nextYear = nextDate.year();
+    const nextMonth = nextDate.month();
+
+    return [
+      moment(`${year}-${fixedZero(month + 1)}-01 00:00:00`),
+      moment(moment(`${nextYear}-${fixedZero(nextMonth + 1)}-01 00:00:00`).valueOf() - 1000),
+    ];
+  }
+
+  return [moment(`${year}-01-01 00:00:00`), moment(`${year}-12-31 23:59:59`)];
+}
diff --git a/src/pages/dashboard/monitor/_mock.ts b/src/pages/dashboard/monitor/_mock.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b523dfbded2d802a4818bb2c166b554f0395be3d
--- /dev/null
+++ b/src/pages/dashboard/monitor/_mock.ts
@@ -0,0 +1,7 @@
+import mockjs from 'mockjs';
+
+export default {
+  'GET  /api/tags': mockjs.mock({
+    'list|100': [{ name: '@city', 'value|1-100': 150, 'type|0-2': 1 }],
+  }),
+};
diff --git a/src/pages/dashboard/monitor/components/ActiveChart/index.less b/src/pages/dashboard/monitor/components/ActiveChart/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..2f5d15f2ba07962b56ca83e2cb1776492d79e7dd
--- /dev/null
+++ b/src/pages/dashboard/monitor/components/ActiveChart/index.less
@@ -0,0 +1,51 @@
+.activeChart {
+  position: relative;
+}
+.activeChartGrid {
+  p {
+    position: absolute;
+    top: 80px;
+  }
+  p:last-child {
+    top: 115px;
+  }
+}
+.activeChartLegend {
+  position: relative;
+  height: 20px;
+  margin-top: 8px;
+  font-size: 0;
+  line-height: 20px;
+  span {
+    display: inline-block;
+    width: 33.33%;
+    font-size: 12px;
+    text-align: center;
+  }
+  span:first-child {
+    text-align: left;
+  }
+  span:last-child {
+    text-align: right;
+  }
+}
+.dashedLine {
+  position: relative;
+  top: -70px;
+  left: -3px;
+  height: 1px;
+
+  .line {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-image: linear-gradient(to right, transparent 50%, #e9e9e9 50%);
+    background-size: 6px;
+  }
+}
+
+.dashedLine:last-child {
+  top: -36px;
+}
diff --git a/src/pages/dashboard/monitor/components/ActiveChart/index.tsx b/src/pages/dashboard/monitor/components/ActiveChart/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..71d508f8cbcdd418c6abd266464ee71652ebc375
--- /dev/null
+++ b/src/pages/dashboard/monitor/components/ActiveChart/index.tsx
@@ -0,0 +1,107 @@
+import React, { Component } from 'react';
+
+import { Statistic } from 'antd';
+import { MiniArea } from '../Charts';
+import styles from './index.less';
+
+function fixedZero(val: number) {
+  return val * 1 < 10 ? `0${val}` : val;
+}
+
+function getActiveData() {
+  const activeData = [];
+  for (let i = 0; i < 24; i += 1) {
+    activeData.push({
+      x: `${fixedZero(i)}:00`,
+      y: Math.floor(Math.random() * 200) + i * 50,
+    });
+  }
+  return activeData;
+}
+
+export default class ActiveChart extends Component {
+  state = {
+    activeData: getActiveData(),
+  };
+
+  timer: number | undefined = undefined;
+
+  requestRef: number | undefined = undefined;
+
+  componentDidMount() {
+    this.loopData();
+  }
+
+  componentWillUnmount() {
+    clearTimeout(this.timer);
+    if (this.requestRef) {
+      cancelAnimationFrame(this.requestRef);
+    }
+  }
+
+  loopData = () => {
+    this.requestRef = requestAnimationFrame(() => {
+      this.timer = window.setTimeout(() => {
+        this.setState(
+          {
+            activeData: getActiveData(),
+          },
+          () => {
+            this.loopData();
+          },
+        );
+      }, 1000);
+    });
+  };
+
+  render() {
+    const { activeData = [] } = this.state;
+
+    return (
+      <div className={styles.activeChart}>
+        <Statistic title="目标评估" value="有望达到预期" />
+        <div style={{ marginTop: 32 }}>
+          <MiniArea
+            animate={false}
+            line
+            borderWidth={2}
+            height={84}
+            scale={{
+              y: {
+                tickCount: 3,
+              },
+            }}
+            yAxis={{
+              tickLine: undefined,
+              label: undefined,
+              title: undefined,
+              line: undefined,
+            }}
+            data={activeData}
+          />
+        </div>
+        {activeData && (
+          <div>
+            <div className={styles.activeChartGrid}>
+              <p>{[...activeData].sort()[activeData.length - 1].y + 200} 亿元</p>
+              <p>{[...activeData].sort()[Math.floor(activeData.length / 2)].y} 亿元</p>
+            </div>
+            <div className={styles.dashedLine}>
+              <div className={styles.line} />
+            </div>
+            <div className={styles.dashedLine}>
+              <div className={styles.line} />
+            </div>
+          </div>
+        )}
+        {activeData && (
+          <div className={styles.activeChartLegend}>
+            <span>00:00</span>
+            <span>{activeData[Math.floor(activeData.length / 2)].x}</span>
+            <span>{activeData[activeData.length - 1].x}</span>
+          </div>
+        )}
+      </div>
+    );
+  }
+}
diff --git a/src/pages/dashboard/monitor/components/Charts/Gauge/index.tsx b/src/pages/dashboard/monitor/components/Charts/Gauge/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..78c979688ca5d81e1dbf3d4f51b6d2611507b0fc
--- /dev/null
+++ b/src/pages/dashboard/monitor/components/Charts/Gauge/index.tsx
@@ -0,0 +1,179 @@
+import { Axis, Chart, Coord, Geom, Guide, Shape } from 'bizcharts';
+
+import React from 'react';
+import autoHeight from '../autoHeight';
+
+const { Arc, Html, Line } = Guide;
+
+export interface GaugeProps {
+  title: React.ReactNode;
+  color?: string;
+  height?: number;
+  bgColor?: number;
+  percent: number;
+  forceFit?: boolean;
+  style?: React.CSSProperties;
+  formatter?: (value: string) => string;
+}
+
+const defaultFormatter = (val: string): string => {
+  switch (val) {
+    case '2':
+      return '差';
+    case '4':
+      return '中';
+    case '6':
+      return '良';
+    case '8':
+      return '优';
+    default:
+      return '';
+  }
+};
+
+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 }];
+
+  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 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,
+          }}
+        />
+        <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}
+      />
+    </Chart>
+  );
+};
+
+export default autoHeight()(Gauge);
diff --git a/src/pages/dashboard/monitor/components/Charts/MiniArea/index.tsx b/src/pages/dashboard/monitor/components/Charts/MiniArea/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..22ea7f0b4ef56c83a3ecfa296d0e618a79c7c788
--- /dev/null
+++ b/src/pages/dashboard/monitor/components/Charts/MiniArea/index.tsx
@@ -0,0 +1,130 @@
+import { Axis, AxisProps, Chart, Geom, Tooltip } from 'bizcharts';
+
+import React from 'react';
+import autoHeight from '../autoHeight';
+import styles from '../index.less';
+
+export interface MiniAreaProps {
+  color?: string;
+  height?: number;
+  borderColor?: string;
+  line?: boolean;
+  animate?: boolean;
+  xAxis?: AxisProps;
+  forceFit?: boolean;
+  scale?: {
+    x?: {
+      tickCount: number;
+    };
+    y?: {
+      tickCount: number;
+    };
+  };
+  yAxis?: Partial<AxisProps>;
+  borderWidth?: number;
+  data: {
+    x: number | string;
+    y: number;
+  }[];
+}
+
+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 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 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={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="line"
+                position="x*y"
+                shape="smooth"
+                color={borderColor}
+                size={borderWidth}
+                tooltip={false}
+              />
+            ) : (
+              <span style={{ display: 'none' }} />
+            )}
+          </Chart>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default autoHeight()(MiniArea);
diff --git a/src/pages/dashboard/monitor/components/Charts/Pie/index.less b/src/pages/dashboard/monitor/components/Charts/Pie/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..8641d658058870152411c872c961d1ba351fef16
--- /dev/null
+++ b/src/pages/dashboard/monitor/components/Charts/Pie/index.less
@@ -0,0 +1,94 @@
+@import '~antd/es/style/themes/default.less';
+
+.pie {
+  position: relative;
+  .chart {
+    position: relative;
+  }
+  &.hasLegend .chart {
+    width: ~'calc(100% - 240px)';
+  }
+  .legend {
+    position: absolute;
+    top: 50%;
+    right: 0;
+    min-width: 200px;
+    margin: 0 20px;
+    padding: 0;
+    list-style: none;
+    transform: translateY(-50%);
+    li {
+      height: 22px;
+      margin-bottom: 16px;
+      line-height: 22px;
+      cursor: pointer;
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+  .dot {
+    position: relative;
+    top: -1px;
+    display: inline-block;
+    width: 8px;
+    height: 8px;
+    margin-right: 8px;
+    border-radius: 8px;
+  }
+  .line {
+    display: inline-block;
+    width: 1px;
+    height: 16px;
+    margin-right: 8px;
+    background-color: @border-color-split;
+  }
+  .legendTitle {
+    color: @text-color;
+  }
+  .percent {
+    color: @text-color-secondary;
+  }
+  .value {
+    position: absolute;
+    right: 0;
+  }
+  .title {
+    margin-bottom: 8px;
+  }
+  .total {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    max-height: 62px;
+    text-align: center;
+    transform: translate(-50%, -50%);
+    & > h4 {
+      height: 22px;
+      margin-bottom: 8px;
+      color: @text-color-secondary;
+      font-weight: normal;
+      font-size: 14px;
+      line-height: 22px;
+    }
+    & > p {
+      display: block;
+      height: 32px;
+      color: @heading-color;
+      font-size: 1.2em;
+      line-height: 32px;
+      white-space: nowrap;
+    }
+  }
+}
+
+.legendBlock {
+  &.hasLegend .chart {
+    width: 100%;
+    margin: 0 0 32px 0;
+  }
+  .legend {
+    position: relative;
+    transform: none;
+  }
+}
diff --git a/src/pages/dashboard/monitor/components/Charts/Pie/index.tsx b/src/pages/dashboard/monitor/components/Charts/Pie/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..b0071a5b1949979bd2bfcf0e2ef89e8742f2f975
--- /dev/null
+++ b/src/pages/dashboard/monitor/components/Charts/Pie/index.tsx
@@ -0,0 +1,310 @@
+import { Chart, Coord, Geom, Tooltip } from 'bizcharts';
+import React, { Component } from 'react';
+
+import { DataView } from '@antv/data-set';
+import Debounce from 'lodash.debounce';
+import { Divider } from 'antd';
+import ReactFitText from 'react-fittext';
+import classNames from 'classnames';
+import autoHeight from '../autoHeight';
+import styles from './index.less';
+
+export interface PieProps {
+  animate?: boolean;
+  color?: string;
+  colors?: string[];
+  selected?: boolean;
+  height?: number;
+  margin?: [number, number, number, number];
+  hasLegend?: boolean;
+  padding?: [number, number, number, number];
+  percent?: number;
+  data?: {
+    x: string | string;
+    y: number;
+  }[];
+  inner?: number;
+  lineWidth?: number;
+  forceFit?: boolean;
+  style?: React.CSSProperties;
+  className?: string;
+  total?: React.ReactNode | number | (() => React.ReactNode | number);
+  title?: React.ReactNode;
+  tooltip?: boolean;
+  valueFormat?: (value: string) => string | React.ReactNode;
+  subTitle?: React.ReactNode;
+}
+interface PieState {
+  legendData: { checked: boolean; x: string; color: string; percent: number; y: string }[];
+  legendBlock: boolean;
+}
+class Pie extends Component<PieProps, PieState> {
+  state: PieState = {
+    legendData: [],
+    legendBlock: false,
+  };
+
+  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(
+      'resize',
+      () => {
+        this.requestRef = requestAnimationFrame(() => this.resize());
+      },
+      { passive: true },
+    );
+  }
+
+  componentDidUpdate(preProps: PieProps) {
+    const { data } = this.props;
+    if (data !== preProps.data) {
+      // because of charts data create when rendered
+      // so there is a trick for get rendered time
+      this.getLegendData();
+    }
+  }
+
+  componentWillUnmount() {
+    if (this.requestRef) {
+      window.cancelAnimationFrame(this.requestRef);
+    }
+    window.removeEventListener('resize', this.resize);
+    if (this.resize) {
+      (this.resize as any).cancel();
+    }
+  }
+
+  getG2Instance = (chart: G2.Chart) => {
+    this.chart = chart;
+    requestAnimationFrame(() => {
+      this.getLegendData();
+      this.resize();
+    });
+  };
+
+  // for custom lengend view
+  getLegendData = () => {
+    if (!this.chart) return;
+    const geom = this.chart.getAllGeoms()[0]; // 获取所有的图形
+    if (!geom) return;
+    // g2 的类型有问题
+    const items = (geom as any).get('dataArray') || []; // 获取图形对应的
+
+    const legendData = items.map((item: { color: any; _origin: any }[]) => {
+      /* eslint no-underscore-dangle:0 */
+      const origin = item[0]._origin;
+      origin.color = item[0].color;
+      origin.checked = true;
+      return origin;
+    });
+
+    this.setState({
+      legendData,
+    });
+  };
+
+  handleRoot = (n: HTMLDivElement) => {
+    this.root = n;
+  };
+
+  handleLegendClick = (item: { checked: boolean }, i: string | number) => {
+    const newItem = item;
+    newItem.checked = !newItem.checked;
+
+    const { legendData } = this.state;
+    legendData[i] = newItem;
+
+    const filteredLegendData = legendData.filter(l => l.checked).map(l => l.x);
+
+    if (this.chart) {
+      this.chart.filter('x', val => filteredLegendData.indexOf(`${val}`) > -1);
+    }
+
+    this.setState({
+      legendData,
+    });
+  };
+
+  render() {
+    const {
+      valueFormat,
+      subTitle,
+      total,
+      hasLegend = false,
+      className,
+      style,
+      height = 0,
+      forceFit = true,
+      percent,
+      color,
+      inner = 0.75,
+      animate = true,
+      colors,
+      lineWidth = 1,
+    } = this.props;
+
+    const { legendData, legendBlock } = this.state;
+    const pieClassName = classNames(styles.pie, className, {
+      [styles.hasLegend]: !!hasLegend,
+      [styles.legendBlock]: legendBlock,
+    });
+
+    const {
+      data: propsData,
+      selected: propsSelected = true,
+      tooltip: propsTooltip = true,
+    } = this.props;
+
+    let data = propsData || [];
+    let selected = propsSelected;
+    let tooltip = propsTooltip;
+
+    const defaultColors = colors;
+    data = data || [];
+    selected = selected || true;
+    tooltip = tooltip || true;
+    let formatColor;
+
+    const scale = {
+      x: {
+        type: 'cat',
+        range: [0, 1],
+      },
+      y: {
+        min: 0,
+      },
+    };
+
+    if (percent || percent === 0) {
+      selected = false;
+      tooltip = false;
+      formatColor = (value: string) => {
+        if (value === '占比') {
+          return color || 'rgba(24, 144, 255, 0.85)';
+        }
+        return '#F0F2F5';
+      };
+
+      data = [
+        {
+          x: '占比',
+          y: parseFloat(`${percent}`),
+        },
+        {
+          x: '反比',
+          y: 100 - parseFloat(`${percent}`),
+        },
+      ];
+    }
+
+    const tooltipFormat: [string, (...args: any[]) => { name?: string; value: string }] = [
+      'x*percent',
+      (x: string, p: number) => ({
+        name: x,
+        value: `${(p * 100).toFixed(2)}%`,
+      }),
+    ];
+
+    const padding = [12, 0, 12, 0] as [number, number, number, number];
+
+    const dv = new DataView();
+    dv.source(data).transform({
+      type: 'percent',
+      field: 'y',
+      dimension: 'x',
+      as: 'percent',
+    });
+
+    return (
+      <div ref={this.handleRoot} className={pieClassName} style={style}>
+        <ReactFitText maxFontSize={25}>
+          <div className={styles.chart}>
+            <Chart
+              scale={scale}
+              height={height}
+              forceFit={forceFit}
+              data={dv}
+              padding={padding}
+              animate={animate}
+              onGetG2Instance={this.getG2Instance}
+            >
+              {!!tooltip && <Tooltip showTitle={false} />}
+              <Coord type="theta" innerRadius={inner} />
+              <Geom
+                style={{ lineWidth, stroke: '#fff' }}
+                tooltip={tooltip ? tooltipFormat : undefined}
+                type="intervalStack"
+                position="percent"
+                color={['x', percent || percent === 0 ? formatColor : defaultColors] as any}
+                selected={selected}
+              />
+            </Chart>
+
+            {(subTitle || total) && (
+              <div className={styles.total}>
+                {subTitle && <h4 className="pie-sub-title">{subTitle}</h4>}
+                {/* eslint-disable-next-line */}
+                {total && (
+                  <div className="pie-stat">{typeof total === 'function' ? total() : total}</div>
+                )}
+              </div>
+            )}
+          </div>
+        </ReactFitText>
+
+        {hasLegend && (
+          <ul className={styles.legend}>
+            {legendData.map((item, i) => (
+              <li key={item.x} onClick={() => this.handleLegendClick(item, i)}>
+                <span
+                  className={styles.dot}
+                  style={{
+                    backgroundColor: !item.checked ? '#aaa' : item.color,
+                  }}
+                />
+                <span className={styles.legendTitle}>{item.x}</span>
+                <Divider type="vertical" />
+                <span className={styles.percent}>
+                  {`${(Number.isNaN(item.percent) ? 0 : item.percent * 100).toFixed(2)}%`}
+                </span>
+                <span className={styles.value}>{valueFormat ? valueFormat(item.y) : item.y}</span>
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+    );
+  }
+}
+
+export default autoHeight()(Pie);
diff --git a/src/pages/dashboard/monitor/components/Charts/TagCloud/index.less b/src/pages/dashboard/monitor/components/Charts/TagCloud/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..db8e4dabfdd3f1fd4566ff22f55962648c369c49
--- /dev/null
+++ b/src/pages/dashboard/monitor/components/Charts/TagCloud/index.less
@@ -0,0 +1,6 @@
+.tagCloud {
+  overflow: hidden;
+  canvas {
+    transform-origin: 0 0;
+  }
+}
diff --git a/src/pages/dashboard/monitor/components/Charts/TagCloud/index.tsx b/src/pages/dashboard/monitor/components/Charts/TagCloud/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..c6565427c981531247206ec1eda46049d79da335
--- /dev/null
+++ b/src/pages/dashboard/monitor/components/Charts/TagCloud/index.tsx
@@ -0,0 +1,211 @@
+import { Chart, Coord, Geom, Shape, Tooltip } from 'bizcharts';
+import React, { Component } from 'react';
+
+import DataSet from '@antv/data-set';
+import Debounce from 'lodash.debounce';
+import classNames from 'classnames';
+import autoHeight from '../autoHeight';
+import styles from './index.less';
+
+/* eslint no-underscore-dangle: 0 */
+/* eslint no-param-reassign: 0 */
+
+const imgUrl = 'https://gw.alipayobjects.com/zos/rmsportal/gWyeGLCdFFRavBGIDzWk.png';
+
+export interface TagCloudProps {
+  data: {
+    name: string;
+    value: string;
+  }[];
+  height?: number;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+interface TagCloudState {
+  dv: any;
+  height?: number;
+  width: number;
+}
+
+class TagCloud extends Component<TagCloudProps, TagCloudState> {
+  state = {
+    dv: null,
+    height: 0,
+    width: 0,
+  };
+
+  requestRef: number = 0;
+
+  isUnmount: boolean = false;
+
+  root: HTMLDivElement | undefined = undefined;
+
+  imageMask: HTMLImageElement | undefined = undefined;
+
+  componentDidMount() {
+    requestAnimationFrame(() => {
+      this.initTagCloud();
+      this.renderChart(this.props);
+    });
+    window.addEventListener('resize', this.resize, { passive: true });
+  }
+
+  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;
+  };
+
+  initTagCloud = () => {
+    function getTextAttrs(cfg: {
+      x?: any;
+      y?: any;
+      style?: any;
+      opacity?: any;
+      origin?: any;
+      color?: any;
+    }) {
+      return {
+        ...cfg.style,
+        fillOpacity: cfg.opacity,
+        fontSize: cfg.origin._origin.size,
+        rotate: cfg.origin._origin.rotate,
+        text: cfg.origin._origin.text,
+        textAlign: 'center',
+        fontFamily: cfg.origin._origin.font,
+        fill: cfg.color,
+        textBaseline: 'Alphabetic',
+      };
+    }
+
+    (Shape as any).registerShape('point', 'cloud', {
+      drawShape(
+        cfg: { x: any; y: any },
+        container: { addShape: (arg0: string, arg1: { attrs: any }) => void },
+      ) {
+        const attrs = getTextAttrs(cfg);
+        return container.addShape('text', {
+          attrs: {
+            ...attrs,
+            x: cfg.x,
+            y: cfg.y,
+          },
+        });
+      },
+    });
+  };
+
+  renderChart = Debounce((nextProps: TagCloudProps) => {
+    // const colors = ['#1890FF', '#41D9C7', '#2FC25B', '#FACC14', '#9AE65C'];
+    const { data, height } = nextProps || this.props;
+    if (data.length < 1 || !this.root) {
+      return;
+    }
+
+    const h = height;
+    const w = this.root.offsetWidth;
+
+    const onload = () => {
+      const dv = new DataSet.View().source(data);
+      const range = dv.range('value');
+      const [min, max] = range;
+      dv.transform({
+        type: 'tag-cloud',
+        fields: ['name', 'value'],
+        imageMask: this.imageMask,
+        font: 'Verdana',
+        size: [w, h], // 宽高设置最好根据 imageMask 做调整
+        padding: 0,
+        timeInterval: 5000, // max execute time
+        rotate() {
+          return 0;
+        },
+        fontSize(d: { value: number }) {
+          const size = ((d.value - min) / (max - min)) ** 2;
+          return size * (17.5 - 5) + 5;
+        },
+      });
+
+      if (this.isUnmount) {
+        return;
+      }
+
+      this.setState({
+        dv,
+        width: w,
+        height: h,
+      });
+    };
+
+    if (!this.imageMask) {
+      this.imageMask = new Image();
+      this.imageMask.crossOrigin = '';
+      this.imageMask.src = imgUrl;
+
+      this.imageMask.onload = onload;
+    } else {
+      onload();
+    }
+  }, 200);
+
+  render() {
+    const { className, height } = this.props;
+    const { dv, width, height: stateHeight } = this.state;
+
+    return (
+      <div
+        className={classNames(styles.tagCloud, className)}
+        style={{ width: '100%', height }}
+        ref={this.saveRootRef}
+      >
+        {dv && (
+          <Chart
+            width={width}
+            height={stateHeight}
+            data={dv}
+            padding={0}
+            scale={{
+              x: { nice: false },
+              y: { nice: false },
+            }}
+          >
+            <Tooltip showTitle={false} />
+            <Coord reflect="y" />
+            <Geom
+              type="point"
+              position="x*y"
+              color="text"
+              shape="cloud"
+              tooltip={[
+                'text*value',
+                function trans(text, value) {
+                  return { name: text, value };
+                },
+              ]}
+            />
+          </Chart>
+        )}
+      </div>
+    );
+  }
+}
+
+export default autoHeight()(TagCloud);
diff --git a/src/pages/dashboard/monitor/components/Charts/WaterWave/index.less b/src/pages/dashboard/monitor/components/Charts/WaterWave/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..f52ac142e2c59c12c2aeeb4bde42f45bb893e4b3
--- /dev/null
+++ b/src/pages/dashboard/monitor/components/Charts/WaterWave/index.less
@@ -0,0 +1,28 @@
+@import '~antd/es/style/themes/default.less';
+
+.waterWave {
+  position: relative;
+  display: inline-block;
+  transform-origin: left;
+  .text {
+    position: absolute;
+    top: 32px;
+    left: 0;
+    width: 100%;
+    text-align: center;
+    span {
+      color: @text-color-secondary;
+      font-size: 14px;
+      line-height: 22px;
+    }
+    h4 {
+      color: @heading-color;
+      font-size: 24px;
+      line-height: 32px;
+    }
+  }
+  .waterWaveCanvasWrapper {
+    transform: scale(0.5);
+    transform-origin: 0 0;
+  }
+}
diff --git a/src/pages/dashboard/monitor/components/Charts/WaterWave/index.tsx b/src/pages/dashboard/monitor/components/Charts/WaterWave/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..065cd0c607892a295f608a7d55adad484240c537
--- /dev/null
+++ b/src/pages/dashboard/monitor/components/Charts/WaterWave/index.tsx
@@ -0,0 +1,236 @@
+import React, { Component } from 'react';
+
+import autoHeight from '../autoHeight';
+import styles from './index.less';
+
+/* eslint no-return-assign: 0 */
+/* eslint no-mixed-operators: 0 */
+// riddle: https://riddle.alibaba-inc.com/riddles/2d9a4b90
+
+export interface WaterWaveProps {
+  title: React.ReactNode;
+  color?: string;
+  height?: number;
+  percent: number;
+  style?: React.CSSProperties;
+}
+
+class WaterWave extends Component<WaterWaveProps> {
+  state = {
+    radio: 1,
+  };
+
+  timer: number = 0;
+
+  root: HTMLDivElement | undefined | null = null;
+
+  node: HTMLCanvasElement | undefined | null = null;
+
+  componentDidMount() {
+    this.renderChart();
+    this.resize();
+    window.addEventListener(
+      'resize',
+      () => {
+        requestAnimationFrame(() => this.resize());
+      },
+      { passive: true },
+    );
+  }
+
+  componentDidUpdate(props: WaterWaveProps) {
+    const { percent } = this.props;
+    if (props.percent !== percent) {
+      // 不加这个会造成绘制缓慢
+      this.renderChart('update');
+    }
+  }
+
+  componentWillUnmount() {
+    cancelAnimationFrame(this.timer);
+    if (this.node) {
+      this.node.innerHTML = '';
+    }
+    window.removeEventListener('resize', this.resize);
+  }
+
+  resize = () => {
+    if (this.root) {
+      const { height = 1 } = this.props;
+      const { offsetWidth } = this.root.parentNode as HTMLElement;
+      this.setState({
+        radio: offsetWidth < height ? offsetWidth / height : 1,
+      });
+    }
+  };
+
+  renderChart(type?: string) {
+    const { percent, color = '#1890FF' } = this.props;
+    const data = percent / 100;
+    const self = this;
+    cancelAnimationFrame(this.timer);
+
+    if (!this.node || (data !== 0 && !data)) {
+      return;
+    }
+
+    const canvas = this.node;
+    const ctx = canvas.getContext('2d');
+    if (!ctx) {
+      return;
+    }
+    const canvasWidth = canvas.width;
+    const canvasHeight = canvas.height;
+    const radius = canvasWidth / 2;
+    const lineWidth = 2;
+    const cR = radius - lineWidth;
+
+    ctx.beginPath();
+    ctx.lineWidth = lineWidth * 2;
+
+    const axisLength = canvasWidth - lineWidth;
+    const unit = axisLength / 8;
+    const range = 0.2; // 振幅
+    let currRange = range;
+    const xOffset = lineWidth;
+    let sp = 0; // 周期偏移量
+    let currData = 0;
+    const waveupsp = 0.005; // 水波上涨速度
+
+    let arcStack: number[][] = [];
+    const bR = radius - lineWidth;
+    const circleOffset = -(Math.PI / 2);
+    let circleLock = true;
+
+    for (let i = circleOffset; i < circleOffset + 2 * Math.PI; i += 1 / (8 * Math.PI)) {
+      arcStack.push([radius + bR * Math.cos(i), radius + bR * Math.sin(i)]);
+    }
+
+    const cStartPoint = arcStack.shift() as number[];
+    ctx.strokeStyle = color;
+    ctx.moveTo(cStartPoint[0], cStartPoint[1]);
+
+    function drawSin() {
+      if (!ctx) {
+        return;
+      }
+      ctx.beginPath();
+      ctx.save();
+
+      const sinStack = [];
+      for (let i = xOffset; i <= xOffset + axisLength; i += 20 / axisLength) {
+        const x = sp + (xOffset + i) / unit;
+        const y = Math.sin(x) * currRange;
+        const dx = i;
+        const dy = 2 * cR * (1 - currData) + (radius - cR) - unit * y;
+
+        ctx.lineTo(dx, dy);
+        sinStack.push([dx, dy]);
+      }
+
+      const startPoint = sinStack.shift() as number[];
+
+      ctx.lineTo(xOffset + axisLength, canvasHeight);
+      ctx.lineTo(xOffset, canvasHeight);
+      ctx.lineTo(startPoint[0], startPoint[1]);
+
+      const gradient = ctx.createLinearGradient(0, 0, 0, canvasHeight);
+      gradient.addColorStop(0, '#ffffff');
+      gradient.addColorStop(1, color);
+      ctx.fillStyle = gradient;
+      ctx.fill();
+      ctx.restore();
+    }
+
+    function render() {
+      if (!ctx) {
+        return;
+      }
+      ctx.clearRect(0, 0, canvasWidth, canvasHeight);
+      if (circleLock && type !== 'update') {
+        if (arcStack.length) {
+          const temp = arcStack.shift() as number[];
+          ctx.lineTo(temp[0], temp[1]);
+          ctx.stroke();
+        } else {
+          circleLock = false;
+          ctx.lineTo(cStartPoint[0], cStartPoint[1]);
+          ctx.stroke();
+          arcStack = [];
+
+          ctx.globalCompositeOperation = 'destination-over';
+          ctx.beginPath();
+          ctx.lineWidth = lineWidth;
+          ctx.arc(radius, radius, bR, 0, 2 * Math.PI, true);
+
+          ctx.beginPath();
+          ctx.save();
+          ctx.arc(radius, radius, radius - 3 * lineWidth, 0, 2 * Math.PI, true);
+
+          ctx.restore();
+          ctx.clip();
+          ctx.fillStyle = color;
+        }
+      } else {
+        if (data >= 0.85) {
+          if (currRange > range / 4) {
+            const t = range * 0.01;
+            currRange -= t;
+          }
+        } else if (data <= 0.1) {
+          if (currRange < range * 1.5) {
+            const t = range * 0.01;
+            currRange += t;
+          }
+        } else {
+          if (currRange <= range) {
+            const t = range * 0.01;
+            currRange += t;
+          }
+          if (currRange >= range) {
+            const t = range * 0.01;
+            currRange -= t;
+          }
+        }
+        if (data - currData > 0) {
+          currData += waveupsp;
+        }
+        if (data - currData < 0) {
+          currData -= waveupsp;
+        }
+
+        sp += 0.07;
+        drawSin();
+      }
+      self.timer = requestAnimationFrame(render);
+    }
+    render();
+  }
+
+  render() {
+    const { radio } = this.state;
+    const { percent, title, height = 1 } = this.props;
+    return (
+      <div
+        className={styles.waterWave}
+        ref={n => (this.root = n)}
+        style={{ transform: `scale(${radio})` }}
+      >
+        <div style={{ width: height, height, overflow: 'hidden' }}>
+          <canvas
+            className={styles.waterWaveCanvasWrapper}
+            ref={n => (this.node = n)}
+            width={height * 2}
+            height={height * 2}
+          />
+        </div>
+        <div className={styles.text} style={{ width: height }}>
+          {title && <span>{title}</span>}
+          <h4>{percent}%</h4>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default autoHeight()(WaterWave);
diff --git a/src/pages/dashboard/monitor/components/Charts/autoHeight.tsx b/src/pages/dashboard/monitor/components/Charts/autoHeight.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..66784f295eb53b29481d77f8723425e8d5068785
--- /dev/null
+++ b/src/pages/dashboard/monitor/components/Charts/autoHeight.tsx
@@ -0,0 +1,79 @@
+import React from 'react';
+
+export type IReactComponent<P = any> =
+  | React.StatelessComponent<P>
+  | React.ComponentClass<P>
+  | React.ClassicComponentClass<P>;
+
+function computeHeight(node: HTMLDivElement) {
+  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);
+  return totalHeight - padding;
+}
+
+function getAutoHeight(n: HTMLDivElement) {
+  if (!n) {
+    return 0;
+  }
+
+  const node = n;
+
+  let height = computeHeight(node);
+  const parentNode = node.parentNode as HTMLDivElement;
+  if (parentNode) {
+    height = computeHeight(parentNode);
+  }
+
+  return height;
+}
+
+interface AutoHeightProps {
+  height?: number;
+}
+
+function autoHeight() {
+  return <P extends AutoHeightProps>(
+    WrappedComponent: React.ComponentClass<P> | React.SFC<P>,
+  ): React.ComponentClass<P> => {
+    class AutoHeightComponent extends React.Component<P & AutoHeightProps> {
+      state = {
+        computedHeight: 0,
+      };
+
+      root: HTMLDivElement | null = null;
+
+      componentDidMount() {
+        const { height } = this.props;
+        if (!height && this.root) {
+          let h = getAutoHeight(this.root);
+          this.setState({ computedHeight: h });
+          if (h < 1) {
+            h = getAutoHeight(this.root);
+            this.setState({ computedHeight: h });
+          }
+        }
+      }
+
+      handleRoot = (node: HTMLDivElement) => {
+        this.root = node;
+      };
+
+      render() {
+        const { height } = this.props;
+        const { computedHeight } = this.state;
+        const h = height || computedHeight;
+        return (
+          <div ref={this.handleRoot}>
+            {h > 0 && <WrappedComponent {...this.props} height={h} />}
+          </div>
+        );
+      }
+    }
+    return AutoHeightComponent;
+  };
+}
+export default autoHeight;
diff --git a/src/pages/dashboard/monitor/components/Charts/index.less b/src/pages/dashboard/monitor/components/Charts/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..190428bc80d7cd7f6f22d51fd48fa37b2d44eb10
--- /dev/null
+++ b/src/pages/dashboard/monitor/components/Charts/index.less
@@ -0,0 +1,19 @@
+.miniChart {
+  position: relative;
+  width: 100%;
+  .chartContent {
+    position: absolute;
+    bottom: -28px;
+    width: 100%;
+    > div {
+      margin: 0 -5px;
+      overflow: hidden;
+    }
+  }
+  .chartLoading {
+    position: absolute;
+    top: 16px;
+    left: 50%;
+    margin-left: -7px;
+  }
+}
diff --git a/src/pages/dashboard/monitor/components/Charts/index.tsx b/src/pages/dashboard/monitor/components/Charts/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..d3d1dac4710a03e1c18b51c010a384ea6b7a5101
--- /dev/null
+++ b/src/pages/dashboard/monitor/components/Charts/index.tsx
@@ -0,0 +1,15 @@
+import Gauge from './Gauge';
+import MiniArea from './MiniArea';
+import Pie from './Pie';
+import TagCloud from './TagCloud';
+import WaterWave from './WaterWave';
+
+const Charts = {
+  Pie,
+  WaterWave,
+  Gauge,
+  MiniArea,
+  TagCloud,
+};
+
+export { Charts as default, Pie, WaterWave, Gauge, TagCloud, MiniArea };
diff --git a/src/pages/dashboard/monitor/data.d.ts b/src/pages/dashboard/monitor/data.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1ee2217a259b3ce57f6bb0147b4400490d98247e
--- /dev/null
+++ b/src/pages/dashboard/monitor/data.d.ts
@@ -0,0 +1,5 @@
+export interface TagType {
+  name: string;
+  value: string;
+  type: string;
+}
diff --git a/src/pages/dashboard/monitor/index.tsx b/src/pages/dashboard/monitor/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..342987b1d7d5b26c3deb8d880355be60e994bf7d
--- /dev/null
+++ b/src/pages/dashboard/monitor/index.tsx
@@ -0,0 +1,272 @@
+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 numeral from 'numeral';
+import { StateType } from './model';
+import { Pie, WaterWave, Gauge, TagCloud } from './components/Charts';
+import ActiveChart from './components/ActiveChart';
+import styles from './style.less';
+
+const { Countdown } = Statistic;
+
+const targetTime = new Date().getTime() + 3900000;
+
+interface MonitorProps {
+  dashboardMonitor: StateType;
+  dispatch: Dispatch<any>;
+  loading: boolean;
+}
+
+@connect(
+  ({
+    dashboardMonitor,
+    loading,
+  }: {
+    dashboardMonitor: StateType;
+    loading: {
+      models: { [key: string]: boolean };
+    };
+  }) => ({
+    dashboardMonitor,
+    loading: loading.models.monitor,
+  }),
+)
+class Monitor extends Component<MonitorProps> {
+  componentDidMount() {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'dashboardMonitor/fetchTags',
+    });
+  }
+
+  render() {
+    const { dashboardMonitor, loading } = this.props;
+    const { tags } = dashboardMonitor;
+    return (
+      <GridContent>
+        <React.Fragment>
+          <Row gutter={24}>
+            <Col xl={18} lg={24} md={24} sm={24} xs={24} style={{ marginBottom: 24 }}>
+              <Card
+                title={
+                  <FormattedMessage
+                    id="dashboard-monitor.monitor.trading-activity"
+                    defaultMessage="Real-Time Trading Activity"
+                  />
+                }
+                bordered={false}
+              >
+                <Row>
+                  <Col md={6} sm={12} xs={24}>
+                    <Statistic
+                      title={
+                        <FormattedMessage
+                          id="dashboard-monitor.monitor.total-transactions"
+                          defaultMessage="Total transactions today"
+                        />
+                      }
+                      suffix="元"
+                      value={numeral(124543233).format('0,0')}
+                    />
+                  </Col>
+                  <Col md={6} sm={12} xs={24}>
+                    <Statistic
+                      title={
+                        <FormattedMessage
+                          id="dashboard-monitor.monitor.sales-target"
+                          defaultMessage="Sales target completion rate"
+                        />
+                      }
+                      value="92%"
+                    />
+                  </Col>
+                  <Col md={6} sm={12} xs={24}>
+                    <Statistic
+                      title={
+                        <FormattedMessage
+                          id="dashboard-monitor.monitor.remaining-time"
+                          defaultMessage="Remaining time of activity"
+                        />
+                      }
+                    >
+                      <Countdown value={targetTime} />
+                    </Statistic>
+                  </Col>
+                  <Col md={6} sm={12} xs={24}>
+                    <Statistic
+                      title={
+                        <FormattedMessage
+                          id="dashboard-monitor.monitor.total-transactions-per-second"
+                          defaultMessage="Total transactions per second"
+                        />
+                      }
+                      suffix="元"
+                      value={numeral(234).format('0,0')}
+                    />
+                  </Col>
+                </Row>
+                <div className={styles.mapChart}>
+                  <Tooltip
+                    title={
+                      <FormattedMessage
+                        id="dashboard-monitor.monitor.waiting-for-implementation"
+                        defaultMessage="Waiting for implementation"
+                      />
+                    }
+                  >
+                    <img
+                      src="https://gw.alipayobjects.com/zos/rmsportal/HBWnDEUXCnGnGrRfrpKa.png"
+                      alt="map"
+                    />
+                  </Tooltip>
+                </div>
+              </Card>
+            </Col>
+            <Col xl={6} lg={24} md={24} sm={24} xs={24}>
+              <Card
+                title={
+                  <FormattedMessage
+                    id="dashboard-monitor.monitor.activity-forecast"
+                    defaultMessage="Activity forecast"
+                  />
+                }
+                style={{ marginBottom: 24 }}
+                bordered={false}
+              >
+                <ActiveChart />
+              </Card>
+              <Card
+                title={
+                  <FormattedMessage
+                    id="dashboard-monitor.monitor.efficiency"
+                    defaultMessage="Efficiency"
+                  />
+                }
+                style={{ marginBottom: 24 }}
+                bodyStyle={{ textAlign: 'center' }}
+                bordered={false}
+              >
+                <Gauge
+                  title={formatMessage({
+                    id: 'dashboard-monitor.monitor.ratio',
+                    defaultMessage: 'Ratio',
+                  })}
+                  height={180}
+                  percent={87}
+                />
+              </Card>
+            </Col>
+          </Row>
+          <Row gutter={24}>
+            <Col xl={12} lg={24} sm={24} xs={24} style={{ marginBottom: 24 }}>
+              <Card
+                title={
+                  <FormattedMessage
+                    id="dashboard-monitor.monitor.proportion-per-category"
+                    defaultMessage="Proportion Per Category"
+                  />
+                }
+                bordered={false}
+                className={styles.pieCard}
+              >
+                <Row style={{ padding: '16px 0' }}>
+                  <Col span={8}>
+                    <Pie
+                      animate={false}
+                      percent={28}
+                      title={
+                        <FormattedMessage
+                          id="dashboard-monitor.monitor.fast-food"
+                          defaultMessage="Fast food"
+                        />
+                      }
+                      total="28%"
+                      height={128}
+                      lineWidth={2}
+                    />
+                  </Col>
+                  <Col span={8}>
+                    <Pie
+                      animate={false}
+                      color="#5DDECF"
+                      percent={22}
+                      title={
+                        <FormattedMessage
+                          id="dashboard-monitor.monitor.western-food"
+                          defaultMessage="Western food"
+                        />
+                      }
+                      total="22%"
+                      height={128}
+                      lineWidth={2}
+                    />
+                  </Col>
+                  <Col span={8}>
+                    <Pie
+                      animate={false}
+                      color="#2FC25B"
+                      percent={32}
+                      title={
+                        <FormattedMessage
+                          id="dashboard-monitor.monitor.hot-pot"
+                          defaultMessage="Hot pot"
+                        />
+                      }
+                      total="32%"
+                      height={128}
+                      lineWidth={2}
+                    />
+                  </Col>
+                </Row>
+              </Card>
+            </Col>
+            <Col xl={6} lg={12} sm={24} xs={24} style={{ marginBottom: 24 }}>
+              <Card
+                title={
+                  <FormattedMessage
+                    id="dashboard-monitor.monitor.popular-searches"
+                    defaultMessage="Popular Searches"
+                  />
+                }
+                loading={loading}
+                bordered={false}
+                bodyStyle={{ overflow: 'hidden' }}
+              >
+                <TagCloud data={tags || []} height={161} />
+              </Card>
+            </Col>
+            <Col xl={6} lg={12} sm={24} xs={24} style={{ marginBottom: 24 }}>
+              <Card
+                title={
+                  <FormattedMessage
+                    id="dashboard-monitor.monitor.resource-surplus"
+                    defaultMessage="Resource Surplus"
+                  />
+                }
+                bodyStyle={{ textAlign: 'center', fontSize: 0 }}
+                bordered={false}
+              >
+                <WaterWave
+                  height={161}
+                  title={
+                    <FormattedMessage
+                      id="dashboard-monitor.monitor.fund-surplus"
+                      defaultMessage="Fund Surplus"
+                    />
+                  }
+                  percent={34}
+                />
+              </Card>
+            </Col>
+          </Row>
+        </React.Fragment>
+      </GridContent>
+    );
+  }
+}
+
+export default Monitor;
diff --git a/src/pages/dashboard/monitor/locales/en-US.ts b/src/pages/dashboard/monitor/locales/en-US.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b1e3de41af2eabe50542a608984717bd76c9cf96
--- /dev/null
+++ b/src/pages/dashboard/monitor/locales/en-US.ts
@@ -0,0 +1,18 @@
+export default {
+  'dashboard-monitor.monitor.trading-activity': 'Real-Time Trading Activity',
+  'dashboard-monitor.monitor.total-transactions': 'Total transactions today',
+  'dashboard-monitor.monitor.sales-target': 'Sales target completion rate',
+  'dashboard-monitor.monitor.remaining-time': 'Remaining time of activity',
+  'dashboard-monitor.monitor.total-transactions-per-second': 'Total transactions per second',
+  'dashboard-monitor.monitor.activity-forecast': 'Activity forecast',
+  'dashboard-monitor.monitor.efficiency': 'Efficiency',
+  'dashboard-monitor.monitor.ratio': 'Ratio',
+  'dashboard-monitor.monitor.proportion-per-category': 'Proportion Per Category',
+  'dashboard-monitor.monitor.fast-food': 'Fast food',
+  'dashboard-monitor.monitor.western-food': 'Western food',
+  'dashboard-monitor.monitor.hot-pot': 'Hot pot',
+  'dashboard-monitor.monitor.waiting-for-implementation': 'Waiting for implementation',
+  'dashboard-monitor.monitor.popular-searches': 'Popular Searches',
+  'dashboard-monitor.monitor.resource-surplus': 'Resource Surplus',
+  'dashboard-monitor.monitor.fund-surplus': 'Fund Surplus',
+};
diff --git a/src/pages/dashboard/monitor/locales/pt-BR.ts b/src/pages/dashboard/monitor/locales/pt-BR.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b11425a8ca88a486ddb16beeb78291b8fc82ad21
--- /dev/null
+++ b/src/pages/dashboard/monitor/locales/pt-BR.ts
@@ -0,0 +1,19 @@
+export default {
+  'dashboard-monitor.monitor.trading-activity': 'Real-Time Trading Activity',
+  'dashboard-monitor.monitor.total-transactions': 'Total transactions today',
+  'dashboard-monitor.monitor.sales-target': 'Sales target completion rate',
+  'dashboard-monitor.monitor.remaining-time': 'Remaining time of activity',
+  'dashboard-monitor.monitor.total-transactions-per-second': 'Total transactions per second',
+  'dashboard-monitor.monitor.activity-forecast': 'Activity forecast',
+  'dashboard-monitor.monitor.efficiency': 'Efficiency',
+  'dashboard-monitor.monitor.ratio': 'Ratio',
+  'dashboard-monitor.monitor.proportion-per-category': 'Proportion Per Category',
+  'dashboard-monitor.monitor.fast-food': 'Fast food',
+  'dashboard-monitor.monitor.western-food': 'Western food',
+  'dashboard-monitor.monitor.hot-pot': 'Hot pot',
+  'dashboard-monitor.monitor.waiting-for-implementation': 'Waiting for implementation',
+  'dashboard-monitor.monitor.popular-searches': 'Popular Searches',
+  'dashboard-monitor.monitor.resource-surplus': 'Resource Surplus',
+  'dashboard-monitor.monitor.fund-surplus': 'Fund Surplus',
+  'dashboard-monitor.exception.back': 'Back to home',
+};
diff --git a/src/pages/dashboard/monitor/locales/zh-CN.ts b/src/pages/dashboard/monitor/locales/zh-CN.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f35f139bebeec667c93c29659b6967614eac91a5
--- /dev/null
+++ b/src/pages/dashboard/monitor/locales/zh-CN.ts
@@ -0,0 +1,18 @@
+export default {
+  'dashboard-monitor.monitor.trading-activity': '活动实时交易情况',
+  'dashboard-monitor.monitor.total-transactions': '今日交易总额',
+  'dashboard-monitor.monitor.sales-target': '销售目标完成率',
+  'dashboard-monitor.monitor.remaining-time': '活动剩余时间',
+  'dashboard-monitor.monitor.total-transactions-per-second': '每秒交易总额',
+  'dashboard-monitor.monitor.activity-forecast': '活动情况预测',
+  'dashboard-monitor.monitor.efficiency': '券核效率',
+  'dashboard-monitor.monitor.ratio': '跳出率',
+  'dashboard-monitor.monitor.proportion-per-category': '各品类占比',
+  'dashboard-monitor.monitor.fast-food': '中式快餐',
+  'dashboard-monitor.monitor.western-food': '西餐',
+  'dashboard-monitor.monitor.hot-pot': '火锅',
+  'dashboard-monitor.monitor.waiting-for-implementation': 'Waiting for implementation',
+  'dashboard-monitor.monitor.popular-searches': '热门搜索',
+  'dashboard-monitor.monitor.resource-surplus': '资源剩余',
+  'dashboard-monitor.monitor.fund-surplus': '补贴资金剩余',
+};
diff --git a/src/pages/dashboard/monitor/locales/zh-TW.ts b/src/pages/dashboard/monitor/locales/zh-TW.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8487b32858d6758eb2dd5fd333efc47b977ec1e0
--- /dev/null
+++ b/src/pages/dashboard/monitor/locales/zh-TW.ts
@@ -0,0 +1,18 @@
+export default {
+  'dashboard-monitor.monitor.trading-activity': '活動實時交易情況',
+  'dashboard-monitor.monitor.total-transactions': '今日交易總額',
+  'dashboard-monitor.monitor.sales-target': '銷售目標完成率',
+  'dashboard-monitor.monitor.remaining-time': '活動剩余時間',
+  'dashboard-monitor.monitor.total-transactions-per-second': '每秒交易總額',
+  'dashboard-monitor.monitor.activity-forecast': '活動情況預測',
+  'dashboard-monitor.monitor.efficiency': '券核效率',
+  'dashboard-monitor.monitor.ratio': '跳出率',
+  'dashboard-monitor.monitor.proportion-per-category': '各品類占比',
+  'dashboard-monitor.monitor.fast-food': '中式快餐',
+  'dashboard-monitor.monitor.western-food': '西餐',
+  'dashboard-monitor.monitor.hot-pot': '火鍋',
+  'dashboard-monitor.monitor.waiting-for-implementation': 'Waiting for implementation',
+  'dashboard-monitor.monitor.popular-searches': '熱門搜索',
+  'dashboard-monitor.monitor.resource-surplus': '資源剩余',
+  'dashboard-monitor.monitor.fund-surplus': '補貼資金剩余',
+};
diff --git a/src/pages/dashboard/monitor/model.ts b/src/pages/dashboard/monitor/model.ts
new file mode 100644
index 0000000000000000000000000000000000000000..bb5c35ce78f6dda46c03964f82f59295bc8f4c16
--- /dev/null
+++ b/src/pages/dashboard/monitor/model.ts
@@ -0,0 +1,54 @@
+import { AnyAction, Reducer } from 'redux';
+
+import { EffectsCommandMap } from 'dva';
+import { TagType } from './data.d';
+import { queryTags } from './service';
+
+export interface StateType {
+  tags: TagType[];
+}
+
+export type Effect = (
+  action: AnyAction,
+  effects: EffectsCommandMap & { select: <T>(func: (state: StateType) => T) => T },
+) => void;
+
+export interface ModelType {
+  namespace: string;
+  state: StateType;
+  effects: {
+    fetchTags: Effect;
+  };
+  reducers: {
+    saveTags: Reducer<StateType>;
+  };
+}
+
+const Model: ModelType = {
+  namespace: 'dashboardMonitor',
+
+  state: {
+    tags: [],
+  },
+
+  effects: {
+    *fetchTags(_, { call, put }) {
+      const response = yield call(queryTags);
+      yield put({
+        type: 'saveTags',
+        payload: response.list,
+      });
+    },
+  },
+
+  reducers: {
+    saveTags(state, action) {
+      return {
+        ...state,
+        tags: action.payload,
+      };
+    },
+  },
+};
+
+export default Model;
diff --git a/src/pages/dashboard/monitor/service.ts b/src/pages/dashboard/monitor/service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a0d7b872ab595f2ac1c9e71ed981c86dbee93e13
--- /dev/null
+++ b/src/pages/dashboard/monitor/service.ts
@@ -0,0 +1,5 @@
+import request from 'umi-request';
+
+export async function queryTags() {
+  return request('/api/tags');
+}
diff --git a/src/pages/dashboard/monitor/style.less b/src/pages/dashboard/monitor/style.less
new file mode 100644
index 0000000000000000000000000000000000000000..a03fbf19d5c46beb6359704df9116d62a8922dec
--- /dev/null
+++ b/src/pages/dashboard/monitor/style.less
@@ -0,0 +1,22 @@
+@import '~antd/es/style/themes/default.less';
+
+.mapChart {
+  height: 452px;
+  padding-top: 24px;
+  text-align: center;
+  img {
+    display: inline-block;
+    max-width: 100%;
+    max-height: 437px;
+  }
+}
+
+.pieCard :global(.pie-stat) {
+  font-size: 24px !important;
+}
+
+@media screen and (max-width: @screen-lg) {
+  .mapChart {
+    height: auto;
+  }
+}
diff --git a/src/pages/dashboard/workplace/_mock.ts b/src/pages/dashboard/workplace/_mock.ts
new file mode 100644
index 0000000000000000000000000000000000000000..619565745fe129ccb28b09c26de4e08ce800b045
--- /dev/null
+++ b/src/pages/dashboard/workplace/_mock.ts
@@ -0,0 +1,303 @@
+const titles = [
+  'Alipay',
+  'Angular',
+  'Ant Design',
+  'Ant Design Pro',
+  'Bootstrap',
+  'React',
+  'Vue',
+  'Webpack',
+];
+const avatars = [
+  'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png', // Alipay
+  'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png', // Angular
+  'https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png', // Ant Design
+  'https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png', // Ant Design Pro
+  'https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png', // Bootstrap
+  'https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png', // React
+  'https://gw.alipayobjects.com/zos/rmsportal/ComBAopevLwENQdKWiIn.png', // Vue
+  'https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlMTCEe.png', // Webpack
+];
+
+const avatars2 = [
+  'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png',
+  'https://gw.alipayobjects.com/zos/rmsportal/cnrhVkzwxjPwAaCfPbdc.png',
+  'https://gw.alipayobjects.com/zos/rmsportal/gaOngJwsRYRaVAuXXcmB.png',
+  'https://gw.alipayobjects.com/zos/rmsportal/ubnKSIfAJTxIgXOKlciN.png',
+  'https://gw.alipayobjects.com/zos/rmsportal/WhxKECPNujWoWEFNdnJE.png',
+  'https://gw.alipayobjects.com/zos/rmsportal/jZUIxmJycoymBprLOUbT.png',
+  'https://gw.alipayobjects.com/zos/rmsportal/psOgztMplJMGpVEqfcgF.png',
+  'https://gw.alipayobjects.com/zos/rmsportal/ZpBqSxLxVEXfcUNoPKrz.png',
+  'https://gw.alipayobjects.com/zos/rmsportal/laiEnJdGHVOhJrUShBaJ.png',
+  'https://gw.alipayobjects.com/zos/rmsportal/UrQsqscbKEpNuJcvBZBu.png',
+];
+
+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 getActivities = [
+  {
+    id: 'trend-1',
+    updatedAt: new Date(),
+    user: {
+      name: '曲丽丽',
+      avatar: avatars2[0],
+    },
+    group: {
+      name: '高逼格设计天团',
+      link: 'http://github.com/',
+    },
+    project: {
+      name: '六月迭代',
+      link: 'http://github.com/',
+    },
+    template: '在 @{group} 新建项目 @{project}',
+  },
+  {
+    id: 'trend-2',
+    updatedAt: new Date(),
+    user: {
+      name: '付小小',
+      avatar: avatars2[1],
+    },
+    group: {
+      name: '高逼格设计天团',
+      link: 'http://github.com/',
+    },
+    project: {
+      name: '六月迭代',
+      link: 'http://github.com/',
+    },
+    template: '在 @{group} 新建项目 @{project}',
+  },
+  {
+    id: 'trend-3',
+    updatedAt: new Date(),
+    user: {
+      name: '林东东',
+      avatar: avatars2[2],
+    },
+    group: {
+      name: '中二少女团',
+      link: 'http://github.com/',
+    },
+    project: {
+      name: '六月迭代',
+      link: 'http://github.com/',
+    },
+    template: '在 @{group} 新建项目 @{project}',
+  },
+  {
+    id: 'trend-4',
+    updatedAt: new Date(),
+    user: {
+      name: '周星星',
+      avatar: avatars2[4],
+    },
+    project: {
+      name: '5 月日常迭代',
+      link: 'http://github.com/',
+    },
+    template: '将 @{project} 更新至已发布状态',
+  },
+  {
+    id: 'trend-5',
+    updatedAt: new Date(),
+    user: {
+      name: '朱偏右',
+      avatar: avatars2[3],
+    },
+    project: {
+      name: '工程效能',
+      link: 'http://github.com/',
+    },
+    comment: {
+      name: '留言',
+      link: 'http://github.com/',
+    },
+    template: '在 @{project} 发布了 @{comment}',
+  },
+  {
+    id: 'trend-6',
+    updatedAt: new Date(),
+    user: {
+      name: '乐哥',
+      avatar: avatars2[5],
+    },
+    group: {
+      name: '程序员日常',
+      link: 'http://github.com/',
+    },
+    project: {
+      name: '品牌迭代',
+      link: 'http://github.com/',
+    },
+    template: '在 @{group} 新建项目 @{project}',
+  },
+];
+
+const radarOriginData = [
+  {
+    name: '个人',
+    ref: 10,
+    koubei: 8,
+    output: 4,
+    contribute: 5,
+    hot: 7,
+  },
+  {
+    name: '团队',
+    ref: 3,
+    koubei: 9,
+    output: 6,
+    contribute: 3,
+    hot: 1,
+  },
+  {
+    name: '部门',
+    ref: 4,
+    koubei: 1,
+    output: 6,
+    contribute: 5,
+    hot: 7,
+  },
+];
+
+const radarData: any[] = [];
+const radarTitleMap = {
+  ref: '引用',
+  koubei: '口碑',
+  output: '产量',
+  contribute: '贡献',
+  hot: '热度',
+};
+radarOriginData.forEach(item => {
+  Object.keys(item).forEach(key => {
+    if (key !== 'name') {
+      radarData.push({
+        name: item.name,
+        label: radarTitleMap[key],
+        value: item[key],
+      });
+    }
+  });
+});
+
+export default {
+  'GET  /api/project/notice': getNotice,
+  'GET  /api/activities': getActivities,
+  'GET  /api/fake_chart_data': {
+    radarData,
+  },
+
+  'GET  /api/currentUser': {
+    name: 'Serati Ma',
+    avatar: 'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png',
+    userid: '00000001',
+    email: 'antdesign@alipay.com',
+    signature: '海纳百川，有容乃大',
+    title: '交互专家',
+    group: '蚂蚁金服－某某某事业群－某某平台部－某某技术部－UED',
+    tags: [
+      {
+        key: '0',
+        label: '很有想法的',
+      },
+      {
+        key: '1',
+        label: '专注设计',
+      },
+      {
+        key: '2',
+        label: '辣~',
+      },
+      {
+        key: '3',
+        label: '大长腿',
+      },
+      {
+        key: '4',
+        label: '川妹子',
+      },
+      {
+        key: '5',
+        label: '海纳百川',
+      },
+    ],
+    notifyCount: 12,
+    unreadCount: 11,
+    country: 'China',
+    geographic: {
+      province: {
+        label: '浙江省',
+        key: '330000',
+      },
+      city: {
+        label: '杭州市',
+        key: '330100',
+      },
+    },
+    address: '西湖区工专路 77 号',
+    phone: '0752-268888888',
+  },
+};
diff --git a/src/pages/dashboard/workplace/components/EditableLinkGroup/index.less b/src/pages/dashboard/workplace/components/EditableLinkGroup/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..5add1b0b423752fb7d567e4df5b74959e88b10d2
--- /dev/null
+++ b/src/pages/dashboard/workplace/components/EditableLinkGroup/index.less
@@ -0,0 +1,16 @@
+@import '~antd/es/style/themes/default.less';
+
+.linkGroup {
+  padding: 20px 0 8px 24px;
+  font-size: 0;
+  & > a {
+    display: inline-block;
+    width: 25%;
+    margin-bottom: 13px;
+    color: @text-color;
+    font-size: @font-size-base;
+    &:hover {
+      color: @primary-color;
+    }
+  }
+}
diff --git a/src/pages/dashboard/workplace/components/EditableLinkGroup/index.tsx b/src/pages/dashboard/workplace/components/EditableLinkGroup/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..607846385a747bf3581fc724a4995790381e2d6c
--- /dev/null
+++ b/src/pages/dashboard/workplace/components/EditableLinkGroup/index.tsx
@@ -0,0 +1,50 @@
+import React, { PureComponent, createElement } from 'react';
+
+import { Button } from 'antd';
+import styles from './index.less';
+
+export interface EditableLink {
+  title: string;
+  href: string;
+  id?: string;
+}
+
+interface EditableLinkGroupProps {
+  onAdd: () => void;
+  links: EditableLink[];
+  linkElement: React.ComponentClass<any>;
+}
+
+class EditableLinkGroup extends PureComponent<EditableLinkGroupProps> {
+  static defaultProps = {
+    links: [],
+    onAdd: () => {},
+    linkElement: 'a',
+  };
+
+  render() {
+    const { links, linkElement, onAdd } = this.props;
+    return (
+      <div className={styles.linkGroup}>
+        {links.map(link =>
+          createElement(
+            linkElement,
+            {
+              key: `linkGroup-item-${link.id || link.title}`,
+              to: link.href,
+              href: link.href,
+            },
+            link.title,
+          ),
+        )}
+        {
+          <Button size="small" type="primary" ghost onClick={onAdd} icon="plus">
+            添加
+          </Button>
+        }
+      </div>
+    );
+  }
+}
+
+export default EditableLinkGroup;
diff --git a/src/pages/dashboard/workplace/components/Radar/autoHeight.tsx b/src/pages/dashboard/workplace/components/Radar/autoHeight.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..ba20956d1627dfeab788690945968b92d7e31774
--- /dev/null
+++ b/src/pages/dashboard/workplace/components/Radar/autoHeight.tsx
@@ -0,0 +1,79 @@
+import React from 'react';
+
+export type IReactComponent<P = any> =
+  | React.StatelessComponent<P>
+  | React.ComponentClass<P>
+  | React.ClassicComponentClass<P>;
+
+function computeHeight(node: HTMLDivElement) {
+  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);
+  return totalHeight - padding;
+}
+
+function getAutoHeight(n: HTMLDivElement | undefined) {
+  if (!n) {
+    return 0;
+  }
+
+  const node = n;
+
+  let height = computeHeight(node);
+  const parentNode = node.parentNode as HTMLDivElement;
+  if (parentNode) {
+    height = computeHeight(parentNode);
+  }
+
+  return height;
+}
+
+interface AutoHeightProps {
+  height?: number;
+}
+
+function autoHeight() {
+  return <P extends AutoHeightProps>(
+    WrappedComponent: React.ComponentClass<P> | React.SFC<P>,
+  ): React.ComponentClass<P> => {
+    class AutoHeightComponent extends React.Component<P & AutoHeightProps> {
+      state = {
+        computedHeight: 0,
+      };
+
+      root: HTMLDivElement | undefined = undefined;
+
+      componentDidMount() {
+        const { height } = this.props;
+        if (!height) {
+          let h = getAutoHeight(this.root);
+          this.setState({ computedHeight: h });
+          if (h < 1) {
+            h = getAutoHeight(this.root);
+            this.setState({ computedHeight: h });
+          }
+        }
+      }
+
+      handleRoot = (node: HTMLDivElement) => {
+        this.root = node;
+      };
+
+      render() {
+        const { height } = this.props;
+        const { computedHeight } = this.state;
+        const h = height || computedHeight;
+        return (
+          <div ref={this.handleRoot}>
+            {h > 0 && <WrappedComponent {...this.props} height={h} />}
+          </div>
+        );
+      }
+    }
+    return AutoHeightComponent;
+  };
+}
+export default autoHeight;
diff --git a/src/pages/dashboard/workplace/components/Radar/index.less b/src/pages/dashboard/workplace/components/Radar/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..f3c1af3ac7a3c060bc5e0358ab0148380100ca24
--- /dev/null
+++ b/src/pages/dashboard/workplace/components/Radar/index.less
@@ -0,0 +1,46 @@
+@import '~antd/es/style/themes/default.less';
+
+.radar {
+  .legend {
+    margin-top: 16px;
+    .legendItem {
+      position: relative;
+      color: @text-color-secondary;
+      line-height: 22px;
+      text-align: center;
+      cursor: pointer;
+      p {
+        margin: 0;
+      }
+      h6 {
+        margin-top: 4px;
+        margin-bottom: 0;
+        padding-left: 16px;
+        color: @heading-color;
+        font-size: 24px;
+        line-height: 32px;
+      }
+      &::after {
+        position: absolute;
+        top: 8px;
+        right: 0;
+        width: 1px;
+        height: 40px;
+        background-color: @border-color-split;
+        content: '';
+      }
+    }
+    > :last-child .legendItem::after {
+      display: none;
+    }
+    .dot {
+      position: relative;
+      top: -1px;
+      display: inline-block;
+      width: 6px;
+      height: 6px;
+      margin-right: 6px;
+      border-radius: 6px;
+    }
+  }
+}
diff --git a/src/pages/dashboard/workplace/components/Radar/index.tsx b/src/pages/dashboard/workplace/components/Radar/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..176345695d78f3f9c2626556c98164b3324486ac
--- /dev/null
+++ b/src/pages/dashboard/workplace/components/Radar/index.tsx
@@ -0,0 +1,219 @@
+import { Axis, Chart, Coord, Geom, Tooltip } from 'bizcharts';
+import { Col, Row } from 'antd';
+import React, { Component } from 'react';
+
+import autoHeight from './autoHeight';
+import styles from './index.less';
+
+export interface RadarProps {
+  title?: React.ReactNode;
+  height?: number;
+  padding?: [number, number, number, number];
+  hasLegend?: boolean;
+  data: {
+    name: string;
+    label: string;
+    value: string | number;
+  }[];
+  colors?: string[];
+  animate?: boolean;
+  forceFit?: boolean;
+  tickCount?: number;
+  style?: React.CSSProperties;
+}
+interface RadarState {
+  legendData: {
+    checked: boolean;
+    name: string;
+    color: string;
+    percent: number;
+    value: string;
+  }[];
+}
+/* eslint react/no-danger:0 */
+class Radar extends Component<RadarProps, RadarState> {
+  state: RadarState = {
+    legendData: [],
+  };
+
+  chart: G2.Chart | undefined = undefined;
+
+  node: HTMLDivElement | undefined = undefined;
+
+  componentDidMount() {
+    this.getLegendData();
+  }
+
+  componentDidUpdate(preProps: RadarProps) {
+    const { data } = this.props;
+    if (data !== preProps.data) {
+      this.getLegendData();
+    }
+  }
+
+  getG2Instance = (chart: G2.Chart) => {
+    this.chart = chart;
+  };
+
+  // for custom lengend view
+  getLegendData = () => {
+    if (!this.chart) return;
+    const geom = this.chart.getAllGeoms()[0]; // 获取所有的图形
+    if (!geom) return;
+    const items = (geom as any).get('dataArray') || []; // 获取图形对应的
+
+    const legendData = items.map((item: { color: any; _origin: any }[]) => {
+      // eslint-disable-next-line no-underscore-dangle
+      const origins = item.map(t => t._origin);
+      const result = {
+        name: origins[0].name,
+        color: item[0].color,
+        checked: true,
+        value: origins.reduce((p, n) => p + n.value, 0),
+      };
+
+      return result;
+    });
+
+    this.setState({
+      legendData,
+    });
+  };
+
+  handleRef = (n: HTMLDivElement) => {
+    this.node = n;
+  };
+
+  handleLegendClick = (
+    item: {
+      checked: boolean;
+      name: string;
+    },
+    i: string | number,
+  ) => {
+    const newItem = item;
+    newItem.checked = !newItem.checked;
+
+    const { legendData } = this.state;
+    legendData[i] = newItem;
+
+    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.repaint();
+    }
+
+    this.setState({
+      legendData,
+    });
+  };
+
+  render() {
+    const defaultColors = [
+      '#1890FF',
+      '#FACC14',
+      '#2FC25B',
+      '#8543E0',
+      '#F04864',
+      '#13C2C2',
+      '#fa8c16',
+      '#a0d911',
+    ];
+
+    const {
+      data = [],
+      height = 0,
+      title,
+      hasLegend = false,
+      forceFit = true,
+      tickCount = 5,
+      padding = [35, 30, 16, 30] as [number, number, number, number],
+      animate = true,
+      colors = defaultColors,
+    } = this.props;
+
+    const { legendData } = this.state;
+
+    const scale = {
+      value: {
+        min: 0,
+        tickCount,
+      },
+    };
+
+    const chartHeight = height - (hasLegend ? 80 : 22);
+
+    return (
+      <div className={styles.radar} style={{ height }}>
+        {title && <h4>{title}</h4>}
+        <Chart
+          scale={scale}
+          height={chartHeight}
+          forceFit={forceFit}
+          data={data}
+          padding={padding}
+          animate={animate}
+          onGetG2Instance={this.getG2Instance}
+        >
+          <Tooltip />
+          <Coord type="polar" />
+          <Axis
+            name="label"
+            line={undefined}
+            tickLine={undefined}
+            grid={{
+              lineStyle: {
+                lineDash: undefined,
+              },
+              hideFirstLine: false,
+            }}
+          />
+          <Axis
+            name="value"
+            grid={{
+              type: 'polygon',
+              lineStyle: {
+                lineDash: undefined,
+              },
+            }}
+          />
+          <Geom type="line" position="label*value" color={['name', colors]} size={1} />
+          <Geom
+            type="point"
+            position="label*value"
+            color={['name', colors]}
+            shape="circle"
+            size={3}
+          />
+        </Chart>
+        {hasLegend && (
+          <Row className={styles.legend}>
+            {legendData.map((item, i) => (
+              <Col
+                span={24 / legendData.length}
+                key={item.name}
+                onClick={() => this.handleLegendClick(item, i)}
+              >
+                <div className={styles.legendItem}>
+                  <p>
+                    <span
+                      className={styles.dot}
+                      style={{
+                        backgroundColor: !item.checked ? '#aaa' : item.color,
+                      }}
+                    />
+                    <span>{item.name}</span>
+                  </p>
+                  <h6>{item.value}</h6>
+                </div>
+              </Col>
+            ))}
+          </Row>
+        )}
+      </div>
+    );
+  }
+}
+
+export default autoHeight()(Radar);
diff --git a/src/pages/dashboard/workplace/data.d.ts b/src/pages/dashboard/workplace/data.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f8ea5b83347c75d5efb01827df54030ba701de0e
--- /dev/null
+++ b/src/pages/dashboard/workplace/data.d.ts
@@ -0,0 +1,78 @@
+export interface TagType {
+  key: string;
+  label: string;
+}
+
+export interface ProvinceType {
+  label: string;
+  key: string;
+}
+
+export interface CityType {
+  label: string;
+  key: string;
+}
+
+export interface GeographicType {
+  province: ProvinceType;
+  city: CityType;
+}
+
+export interface NoticeType {
+  id: string;
+  title: string;
+  logo: string;
+  description: string;
+  updatedAt: string;
+  member: string;
+  href: string;
+  memberLink: string;
+}
+
+export interface CurrentUser {
+  name: string;
+  avatar: string;
+  userid: string;
+  notice: NoticeType[];
+  email: string;
+  signature: string;
+  title: string;
+  group: string;
+  tags: TagType[];
+  notifyCount: number;
+  unreadCount: number;
+  country: string;
+  geographic: GeographicType;
+  address: string;
+  phone: string;
+}
+export interface Member {
+  avatar: string;
+  name: string;
+  id: string;
+}
+
+export interface ActivitiesType {
+  id: string;
+  updatedAt: string;
+  user: {
+    name: string;
+    avatar: string;
+  };
+  group: {
+    name: string;
+    link: string;
+  };
+  project: {
+    name: string;
+    link: string;
+  };
+
+  template: string;
+}
+
+export interface RadarDataType {
+  label: string;
+  name: string;
+  value: number;
+}
diff --git a/src/pages/dashboard/workplace/index.tsx b/src/pages/dashboard/workplace/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..fd87398e83091d228d314c64bbb3b3bfc024595e
--- /dev/null
+++ b/src/pages/dashboard/workplace/index.tsx
@@ -0,0 +1,263 @@
+import { Avatar, Card, Col, List, Row } from 'antd';
+import React, { PureComponent } from 'react';
+
+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 EditableLinkGroup from './components/EditableLinkGroup';
+import styles from './style.less';
+import { ActivitiesType, CurrentUser, NoticeType, RadarDataType } from './data.d';
+
+const links = [
+  {
+    title: '操作一',
+    href: '',
+  },
+  {
+    title: '操作二',
+    href: '',
+  },
+  {
+    title: '操作三',
+    href: '',
+  },
+  {
+    title: '操作四',
+    href: '',
+  },
+  {
+    title: '操作五',
+    href: '',
+  },
+  {
+    title: '操作六',
+    href: '',
+  },
+];
+
+interface dashboardWorkplaceProps {
+  currentUser: CurrentUser;
+  projectNotice: NoticeType[];
+  activities: ActivitiesType[];
+  radarData: RadarDataType[];
+  dispatch: Dispatch<any>;
+  currentUserLoading: boolean;
+  projectLoading: boolean;
+  activitiesLoading: boolean;
+}
+
+@connect(
+  ({
+    dashboardWorkplace: { currentUser, projectNotice, activities, radarData },
+    loading,
+  }: {
+    dashboardWorkplace: ModalState;
+    loading: { effects: any };
+  }) => ({
+    currentUser,
+    projectNotice,
+    activities,
+    radarData,
+    currentUserLoading: loading.effects['dashboardWorkplace/fetchUserCurrent'],
+    projectLoading: loading.effects['dashboardWorkplace/fetchProjectNotice'],
+    activitiesLoading: loading.effects['dashboardWorkplace/fetchActivitiesList'],
+  }),
+)
+class Workplace extends PureComponent<dashboardWorkplaceProps> {
+  componentDidMount() {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'dashboardWorkplace/init',
+    });
+  }
+
+  componentWillUnmount() {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'dashboardWorkplace/clear',
+    });
+  }
+
+  renderActivities = (item: ActivitiesType) => {
+    const events = item.template.split(/@\{([^{}]*)\}/gi).map(key => {
+      if (item[key]) {
+        return (
+          <a href={item[key].link} key={item[key].name}>
+            {item[key].name}
+          </a>
+        );
+      }
+      return key;
+    });
+    return (
+      <List.Item key={item.id}>
+        <List.Item.Meta
+          avatar={<Avatar src={item.user.avatar} />}
+          title={
+            <span>
+              <a className={styles.username}>{item.user.name}</a>
+              &nbsp;
+              <span className={styles.event}>{events}</span>
+            </span>
+          }
+          description={
+            <span className={styles.datetime} title={item.updatedAt}>
+              {moment(item.updatedAt).fromNow()}
+            </span>
+          }
+        />
+      </List.Item>
+    );
+  };
+
+  render() {
+    const {
+      currentUser,
+      activities,
+      projectNotice,
+      projectLoading,
+      activitiesLoading,
+      radarData,
+    } = this.props;
+
+    const pageHeaderContent =
+      currentUser && Object.keys(currentUser).length ? (
+        <div className={styles.pageHeaderContent}>
+          <div className={styles.avatar}>
+            <Avatar size="large" src={currentUser.avatar} />
+          </div>
+          <div className={styles.content}>
+            <div className={styles.contentTitle}>
+              早安，
+              {currentUser.name}
+              ，祝你开心每一天！
+            </div>
+            <div>
+              {currentUser.title} |{currentUser.group}
+            </div>
+          </div>
+        </div>
+      ) : null;
+
+    const extraContent = (
+      <div className={styles.extraContent}>
+        <div className={styles.statItem}>
+          <p>项目数</p>
+          <p>56</p>
+        </div>
+        <div className={styles.statItem}>
+          <p>团队内排名</p>
+          <p>
+            8<span> / 24</span>
+          </p>
+        </div>
+        <div className={styles.statItem}>
+          <p>项目访问</p>
+          <p>2,223</p>
+        </div>
+      </div>
+    );
+
+    return (
+      <PageHeaderWrapper content={pageHeaderContent} extraContent={extraContent}>
+        <Row gutter={24}>
+          <Col xl={16} lg={24} md={24} sm={24} xs={24}>
+            <Card
+              className={styles.projectList}
+              style={{ marginBottom: 24 }}
+              title="进行中的项目"
+              bordered={false}
+              extra={<Link to="/">全部项目</Link>}
+              loading={projectLoading}
+              bodyStyle={{ padding: 0 }}
+            >
+              {projectNotice.map(item => (
+                <Card.Grid className={styles.projectGrid} key={item.id}>
+                  <Card bodyStyle={{ padding: 0 }} bordered={false}>
+                    <Card.Meta
+                      title={
+                        <div className={styles.cardTitle}>
+                          <Avatar size="small" src={item.logo} />
+                          <Link to={item.href}>{item.title}</Link>
+                        </div>
+                      }
+                      description={item.description}
+                    />
+                    <div className={styles.projectItemContent}>
+                      <Link to={item.memberLink}>{item.member || ''}</Link>
+                      {item.updatedAt && (
+                        <span className={styles.datetime} title={item.updatedAt}>
+                          {moment(item.updatedAt).fromNow()}
+                        </span>
+                      )}
+                    </div>
+                  </Card>
+                </Card.Grid>
+              ))}
+            </Card>
+            <Card
+              bodyStyle={{ padding: 0 }}
+              bordered={false}
+              className={styles.activeCard}
+              title="动态"
+              loading={activitiesLoading}
+            >
+              <List<ActivitiesType>
+                loading={activitiesLoading}
+                renderItem={item => this.renderActivities(item)}
+                dataSource={activities}
+                className={styles.activitiesList}
+                size="large"
+              />
+            </Card>
+          </Col>
+          <Col xl={8} lg={24} md={24} sm={24} xs={24}>
+            <Card
+              style={{ marginBottom: 24 }}
+              title="快速开始 / 便捷导航"
+              bordered={false}
+              bodyStyle={{ padding: 0 }}
+            >
+              <EditableLinkGroup onAdd={() => {}} links={links} linkElement={Link} />
+            </Card>
+            <Card
+              style={{ marginBottom: 24 }}
+              bordered={false}
+              title="XX 指数"
+              loading={radarData.length === 0}
+            >
+              <div className={styles.chart}>
+                <Radar hasLegend height={343} data={radarData} />
+              </div>
+            </Card>
+            <Card
+              bodyStyle={{ paddingTop: 12, paddingBottom: 12 }}
+              bordered={false}
+              title="团队"
+              loading={projectLoading}
+            >
+              <div className={styles.members}>
+                <Row gutter={48}>
+                  {projectNotice.map(item => (
+                    <Col span={12} key={`members-item-${item.id}`}>
+                      <Link to={item.href}>
+                        <Avatar src={item.logo} size="small" />
+                        <span className={styles.member}>{item.member}</span>
+                      </Link>
+                    </Col>
+                  ))}
+                </Row>
+              </div>
+            </Card>
+          </Col>
+        </Row>
+      </PageHeaderWrapper>
+    );
+  }
+}
+
+export default Workplace;
diff --git a/src/pages/dashboard/workplace/model.ts b/src/pages/dashboard/workplace/model.ts
new file mode 100644
index 0000000000000000000000000000000000000000..362049ed8a27f70fc3a30d4f28cb97d1c55bce57
--- /dev/null
+++ b/src/pages/dashboard/workplace/model.ts
@@ -0,0 +1,104 @@
+import { AnyAction, Reducer } from 'redux';
+import { EffectsCommandMap } from 'dva';
+import { ActivitiesType, CurrentUser, NoticeType, RadarDataType } from './data.d';
+import { fakeChartData, queryActivities, queryCurrent, queryProjectNotice } from './service';
+
+export interface ModalState {
+  currentUser: Partial<CurrentUser>;
+  projectNotice: NoticeType[];
+  activities: ActivitiesType[];
+  radarData: RadarDataType[];
+}
+
+export type Effect = (
+  action: AnyAction,
+  effects: EffectsCommandMap & { select: <T>(func: (state: ModalState) => T) => T },
+) => void;
+
+export interface ModelType {
+  namespace: string;
+  state: ModalState;
+  reducers: {
+    save: Reducer<ModalState>;
+    clear: Reducer<ModalState>;
+  };
+  effects: {
+    init: Effect;
+    fetchUserCurrent: Effect;
+    fetchProjectNotice: Effect;
+    fetchActivitiesList: Effect;
+    fetchChart: Effect;
+  };
+}
+
+const Model: ModelType = {
+  namespace: 'dashboardWorkplace',
+  state: {
+    currentUser: {},
+    projectNotice: [],
+    activities: [],
+    radarData: [],
+  },
+  effects: {
+    *init(_, { put }) {
+      yield put({ type: 'fetchUserCurrent' });
+      yield put({ type: 'fetchProjectNotice' });
+      yield put({ type: 'fetchActivitiesList' });
+      yield put({ type: 'fetchChart' });
+    },
+    *fetchUserCurrent(_, { call, put }) {
+      const response = yield call(queryCurrent);
+      yield put({
+        type: 'save',
+        payload: {
+          currentUser: response,
+        },
+      });
+    },
+    *fetchProjectNotice(_, { call, put }) {
+      const response = yield call(queryProjectNotice);
+      yield put({
+        type: 'save',
+        payload: {
+          projectNotice: Array.isArray(response) ? response : [],
+        },
+      });
+    },
+    *fetchActivitiesList(_, { call, put }) {
+      const response = yield call(queryActivities);
+      yield put({
+        type: 'save',
+        payload: {
+          activities: Array.isArray(response) ? response : [],
+        },
+      });
+    },
+    *fetchChart(_, { call, put }) {
+      const { radarData } = yield call(fakeChartData);
+      yield put({
+        type: 'save',
+        payload: {
+          radarData,
+        },
+      });
+    },
+  },
+  reducers: {
+    save(state, { payload }) {
+      return {
+        ...state,
+        ...payload,
+      };
+    },
+    clear() {
+      return {
+        currentUser: {},
+        projectNotice: [],
+        activities: [],
+        radarData: [],
+      };
+    },
+  },
+};
+
+export default Model;
diff --git a/src/pages/dashboard/workplace/service.ts b/src/pages/dashboard/workplace/service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..fcd96ebefc7522b86256920f9f975e8e2115d5b4
--- /dev/null
+++ b/src/pages/dashboard/workplace/service.ts
@@ -0,0 +1,17 @@
+import request from 'umi-request';
+
+export async function queryProjectNotice() {
+  return request('/api/project/notice');
+}
+
+export async function queryActivities() {
+  return request('/api/activities');
+}
+
+export async function fakeChartData() {
+  return request('/api/fake_chart_data');
+}
+
+export async function queryCurrent() {
+  return request('/api/currentUser');
+}
diff --git a/src/pages/dashboard/workplace/style.less b/src/pages/dashboard/workplace/style.less
new file mode 100644
index 0000000000000000000000000000000000000000..584017ff746cf78679b1f44ded5a11bd9bfac1ad
--- /dev/null
+++ b/src/pages/dashboard/workplace/style.less
@@ -0,0 +1,251 @@
+@import '~antd/es/style/themes/default.less';
+
+.textOverflow() {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  word-break: break-all;
+}
+
+// mixins for clearfix
+// ------------------------
+.clearfix() {
+  zoom: 1;
+  &::before,
+  &::after {
+    display: table;
+    content: ' ';
+  }
+  &::after {
+    clear: both;
+    height: 0;
+    font-size: 0;
+    visibility: hidden;
+  }
+}
+
+.activitiesList {
+  padding: 0 24px 8px 24px;
+  .username {
+    color: @text-color;
+  }
+  .event {
+    font-weight: normal;
+  }
+}
+
+.pageHeaderContent {
+  display: flex;
+  .avatar {
+    flex: 0 1 72px;
+    margin-bottom: 8px;
+    & > span {
+      display: block;
+      width: 72px;
+      height: 72px;
+      border-radius: 72px;
+    }
+  }
+  .content {
+    position: relative;
+    top: 4px;
+    flex: 1 1 auto;
+    margin-left: 24px;
+    color: @text-color-secondary;
+    line-height: 22px;
+    .contentTitle {
+      margin-bottom: 12px;
+      color: @heading-color;
+      font-weight: 500;
+      font-size: 20px;
+      line-height: 28px;
+    }
+  }
+}
+
+.extraContent {
+  .clearfix();
+
+  float: right;
+  white-space: nowrap;
+  .statItem {
+    position: relative;
+    display: inline-block;
+    padding: 0 32px;
+    > p:first-child {
+      margin-bottom: 4px;
+      color: @text-color-secondary;
+      font-size: @font-size-base;
+      line-height: 22px;
+    }
+    > p {
+      margin: 0;
+      color: @heading-color;
+      font-size: 30px;
+      line-height: 38px;
+      > span {
+        color: @text-color-secondary;
+        font-size: 20px;
+      }
+    }
+    &::after {
+      position: absolute;
+      top: 8px;
+      right: 0;
+      width: 1px;
+      height: 40px;
+      background-color: @border-color-split;
+      content: '';
+    }
+    &:last-child {
+      padding-right: 0;
+      &::after {
+        display: none;
+      }
+    }
+  }
+}
+
+.members {
+  a {
+    display: block;
+    height: 24px;
+    margin: 12px 0;
+    color: @text-color;
+    transition: all 0.3s;
+    .textOverflow();
+    .member {
+      margin-left: 12px;
+      font-size: @font-size-base;
+      line-height: 24px;
+      vertical-align: top;
+    }
+    &:hover {
+      color: @primary-color;
+    }
+  }
+}
+
+.projectList {
+  :global {
+    .ant-card-meta-description {
+      height: 44px;
+      overflow: hidden;
+      color: @text-color-secondary;
+      line-height: 22px;
+    }
+  }
+  .cardTitle {
+    font-size: 0;
+    a {
+      display: inline-block;
+      height: 24px;
+      margin-left: 12px;
+      color: @heading-color;
+      font-size: @font-size-base;
+      line-height: 24px;
+      vertical-align: top;
+      &:hover {
+        color: @primary-color;
+      }
+    }
+  }
+  .projectGrid {
+    width: 33.33%;
+  }
+  .projectItemContent {
+    display: flex;
+    height: 20px;
+    margin-top: 8px;
+    overflow: hidden;
+    font-size: 12px;
+    line-height: 20px;
+    .textOverflow();
+    a {
+      display: inline-block;
+      flex: 1 1 0;
+      color: @text-color-secondary;
+      .textOverflow();
+      &:hover {
+        color: @primary-color;
+      }
+    }
+    .datetime {
+      flex: 0 0 auto;
+      float: right;
+      color: @disabled-color;
+    }
+  }
+}
+
+.datetime {
+  color: @disabled-color;
+}
+
+@media screen and (max-width: @screen-xl) and (min-width: @screen-lg) {
+  .activeCard {
+    margin-bottom: 24px;
+  }
+  .members {
+    margin-bottom: 0;
+  }
+  .extraContent {
+    margin-left: -44px;
+    .statItem {
+      padding: 0 16px;
+    }
+  }
+}
+
+@media screen and (max-width: @screen-lg) {
+  .activeCard {
+    margin-bottom: 24px;
+  }
+  .members {
+    margin-bottom: 0;
+  }
+  .extraContent {
+    float: none;
+    margin-right: 0;
+    .statItem {
+      padding: 0 16px;
+      text-align: left;
+      &::after {
+        display: none;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: @screen-md) {
+  .extraContent {
+    margin-left: -16px;
+  }
+  .projectList {
+    .projectGrid {
+      width: 50%;
+    }
+  }
+}
+
+@media screen and (max-width: @screen-sm) {
+  .pageHeaderContent {
+    display: block;
+    .content {
+      margin-left: 0;
+    }
+  }
+  .extraContent {
+    .statItem {
+      float: none;
+    }
+  }
+}
+
+@media screen and (max-width: @screen-xs) {
+  .projectList {
+    .projectGrid {
+      width: 100%;
+    }
+  }
+}
diff --git a/src/pages/editor/flow/common/IconFont/index.ts b/src/pages/editor/flow/common/IconFont/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3bba8d2ed7043dd0b4f542ad5ef64bd2e9939f66
--- /dev/null
+++ b/src/pages/editor/flow/common/IconFont/index.ts
@@ -0,0 +1,7 @@
+import { Icon } from 'antd';
+
+const IconFont = Icon.createFromIconfontCN({
+  scriptUrl: 'https://at.alicdn.com/t/font_1101588_01zniftxm9yp.js',
+});
+
+export default IconFont;
diff --git a/src/pages/editor/flow/components/EditorContextMenu/FlowContextMenu.tsx b/src/pages/editor/flow/components/EditorContextMenu/FlowContextMenu.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..32f17aa15e0ec59870af8cf437cff068bde4117a
--- /dev/null
+++ b/src/pages/editor/flow/components/EditorContextMenu/FlowContextMenu.tsx
@@ -0,0 +1,35 @@
+import { CanvasMenu, ContextMenu, EdgeMenu, GroupMenu, MultiMenu, NodeMenu } from 'gg-editor';
+
+import React from 'react';
+import MenuItem from './MenuItem';
+import styles from './index.less';
+
+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/src/pages/editor/flow/components/EditorContextMenu/KoniContextMenu.tsx b/src/pages/editor/flow/components/EditorContextMenu/KoniContextMenu.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..8b049a5ee7d0d0dae9216d6f01f1f5e40b4a9904
--- /dev/null
+++ b/src/pages/editor/flow/components/EditorContextMenu/KoniContextMenu.tsx
@@ -0,0 +1,3 @@
+import FlowContextMenu from './FlowContextMenu';
+
+export default FlowContextMenu;
diff --git a/src/pages/editor/flow/components/EditorContextMenu/MenuItem.tsx b/src/pages/editor/flow/components/EditorContextMenu/MenuItem.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..63b584ca9aa2dedcd91c81e93d020e1e6863ed48
--- /dev/null
+++ b/src/pages/editor/flow/components/EditorContextMenu/MenuItem.tsx
@@ -0,0 +1,27 @@
+import { Command } from 'gg-editor';
+import React from 'react';
+import IconFont from '../../common/IconFont';
+import styles from './index.less';
+
+const upperFirst = (str: string) =>
+  str.toLowerCase().replace(/( |^)[a-z]/g, (l: string) => l.toUpperCase());
+
+interface MenuItemProps {
+  command: string;
+  icon?: string;
+  text?: string;
+}
+const MenuItem: React.SFC<MenuItemProps> = props => {
+  const { command, icon, text } = props;
+
+  return (
+    <Command name={command}>
+      <div className={styles.item}>
+        <IconFont type={`icon-${icon || command}`} />
+        <span>{text || upperFirst(command)}</span>
+      </div>
+    </Command>
+  );
+};
+
+export default MenuItem;
diff --git a/src/pages/editor/flow/components/EditorContextMenu/MindContextMenu.tsx b/src/pages/editor/flow/components/EditorContextMenu/MindContextMenu.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..2dc5247dabe4e70c4ab219f93eeec46787d78ad1
--- /dev/null
+++ b/src/pages/editor/flow/components/EditorContextMenu/MindContextMenu.tsx
@@ -0,0 +1,23 @@
+import { CanvasMenu, ContextMenu, NodeMenu } from 'gg-editor';
+
+import React from 'react';
+import MenuItem from './MenuItem';
+import styles from './index.less';
+
+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/src/pages/editor/flow/components/EditorContextMenu/index.less b/src/pages/editor/flow/components/EditorContextMenu/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..8a2cdae3bfbe5ffaaef812f8ab22677f5340dc91
--- /dev/null
+++ b/src/pages/editor/flow/components/EditorContextMenu/index.less
@@ -0,0 +1,39 @@
+.contextMenu {
+  display: none;
+  overflow: hidden;
+  background: #fff;
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+
+  .item {
+    display: flex;
+    align-items: center;
+    padding: 5px 12px;
+    cursor: pointer;
+    transition: all 0.3s;
+    user-select: none;
+
+    &:hover {
+      background: #e6f7ff;
+    }
+
+    i {
+      margin-right: 8px;
+    }
+  }
+
+  :global {
+    .disable {
+      :local {
+        .item {
+          color: rgba(0, 0, 0, 0.25);
+          cursor: auto;
+
+          &:hover {
+            background: #fff;
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/src/pages/editor/flow/components/EditorContextMenu/index.tsx b/src/pages/editor/flow/components/EditorContextMenu/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..6ee93423b8ec66db49a081d6e92239c553ec0418
--- /dev/null
+++ b/src/pages/editor/flow/components/EditorContextMenu/index.tsx
@@ -0,0 +1,5 @@
+import FlowContextMenu from './FlowContextMenu';
+import KoniContextMenu from './KoniContextMenu';
+import MindContextMenu from './MindContextMenu';
+
+export { FlowContextMenu, MindContextMenu, KoniContextMenu };
diff --git a/src/pages/editor/flow/components/EditorDetailPanel/DetailForm.tsx b/src/pages/editor/flow/components/EditorDetailPanel/DetailForm.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..713d6dbbb2f03ab8c6c16546cb23de487d2f63d4
--- /dev/null
+++ b/src/pages/editor/flow/components/EditorDetailPanel/DetailForm.tsx
@@ -0,0 +1,136 @@
+import { Card, Form, Input, Select } from 'antd';
+import React, { Fragment } from 'react';
+
+import { FormComponentProps } from 'antd/es/form';
+import { withPropsAPI } from 'gg-editor';
+
+const upperFirst = (str: string) =>
+  str.toLowerCase().replace(/( |^)[a-z]/g, (l: string) => l.toUpperCase());
+
+const { Item } = Form;
+const { Option } = Select;
+
+const inlineFormItemLayout = {
+  labelCol: {
+    sm: { span: 8 },
+  },
+  wrapperCol: {
+    sm: { span: 16 },
+  },
+};
+
+interface DetailFormProps extends FormComponentProps {
+  type: string;
+  propsAPI?: any;
+}
+
+class DetailForm extends React.Component<DetailFormProps> {
+  get item() {
+    const { propsAPI } = this.props;
+
+    return propsAPI.getSelected()[0];
+  }
+
+  handleSubmit = (e: React.FormEvent) => {
+    if (e && e.preventDefault) {
+      e.preventDefault();
+    }
+
+    const { form, propsAPI } = this.props;
+    const { getSelected, executeCommand, update } = propsAPI;
+
+    setTimeout(() => {
+      form.validateFieldsAndScroll((err, values) => {
+        if (err) {
+          return;
+        }
+
+        const item = getSelected()[0];
+
+        if (!item) {
+          return;
+        }
+
+        executeCommand(() => {
+          update(item, {
+            ...values,
+          });
+        });
+      });
+    }, 0);
+  };
+
+  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;
+    const { label } = this.item.getModel();
+
+    return (
+      <Item label="Label" {...inlineFormItemLayout}>
+        {form.getFieldDecorator('label', {
+          initialValue: label,
+        })(<Input onBlur={this.handleSubmit} />)}
+      </Item>
+    );
+  };
+
+  renderEdgeDetail = () => {
+    const { form } = this.props;
+    const { label = '', shape = 'flow-smooth' } = this.item.getModel();
+
+    return (
+      <Fragment>
+        <Item label="Label" {...inlineFormItemLayout}>
+          {form.getFieldDecorator('label', {
+            initialValue: label,
+          })(<Input onBlur={this.handleSubmit} />)}
+        </Item>
+        <Item label="Shape" {...inlineFormItemLayout}>
+          {form.getFieldDecorator('shape', {
+            initialValue: shape,
+          })(this.renderEdgeShapeSelect())}
+        </Item>
+      </Fragment>
+    );
+  };
+
+  renderGroupDetail = () => {
+    const { form } = this.props;
+    const { label = '新建分组' } = this.item.getModel();
+
+    return (
+      <Item label="Label" {...inlineFormItemLayout}>
+        {form.getFieldDecorator('label', {
+          initialValue: label,
+        })(<Input onBlur={this.handleSubmit} />)}
+      </Item>
+    );
+  };
+
+  render() {
+    const { type } = this.props;
+
+    if (!this.item) {
+      return null;
+    }
+
+    return (
+      <Card type="inner" size="small" title={upperFirst(type)} bordered={false}>
+        <Form onSubmit={this.handleSubmit}>
+          {type === 'node' && this.renderNodeDetail()}
+          {type === 'edge' && this.renderEdgeDetail()}
+          {type === 'group' && this.renderGroupDetail()}
+        </Form>
+      </Card>
+    );
+  }
+}
+
+export default Form.create<DetailFormProps>()(withPropsAPI(DetailForm as any));
diff --git a/src/pages/editor/flow/components/EditorDetailPanel/FlowDetailPanel.tsx b/src/pages/editor/flow/components/EditorDetailPanel/FlowDetailPanel.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..ce38ea16add0aa97c3af0360302a2bdcab7bfe04
--- /dev/null
+++ b/src/pages/editor/flow/components/EditorDetailPanel/FlowDetailPanel.tsx
@@ -0,0 +1,28 @@
+import { CanvasPanel, DetailPanel, EdgePanel, GroupPanel, MultiPanel, NodePanel } from 'gg-editor';
+
+import { Card } from 'antd';
+import React from 'react';
+import DetailForm from './DetailForm';
+import styles from './index.less';
+
+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/src/pages/editor/flow/components/EditorDetailPanel/KoniDetailPanel.tsx b/src/pages/editor/flow/components/EditorDetailPanel/KoniDetailPanel.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..18aea9a44f5d96009d696e6bf145b3715c0d824c
--- /dev/null
+++ b/src/pages/editor/flow/components/EditorDetailPanel/KoniDetailPanel.tsx
@@ -0,0 +1,3 @@
+import FlowDetailPanel from './FlowDetailPanel';
+
+export default FlowDetailPanel;
diff --git a/src/pages/editor/flow/components/EditorDetailPanel/MindDetailPanel.tsx b/src/pages/editor/flow/components/EditorDetailPanel/MindDetailPanel.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..bf8f4834315f2640f3ae51900227a5b7762f8c0a
--- /dev/null
+++ b/src/pages/editor/flow/components/EditorDetailPanel/MindDetailPanel.tsx
@@ -0,0 +1,19 @@
+import { CanvasPanel, DetailPanel, NodePanel } from 'gg-editor';
+
+import { Card } from 'antd';
+import React from 'react';
+import DetailForm from './DetailForm';
+import styles from './index.less';
+
+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/src/pages/editor/flow/components/EditorDetailPanel/index.less b/src/pages/editor/flow/components/EditorDetailPanel/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..081945be43c093076bab1744984f5377a34f0fe2
--- /dev/null
+++ b/src/pages/editor/flow/components/EditorDetailPanel/index.less
@@ -0,0 +1,10 @@
+.detailPanel {
+  flex: 1;
+  background: #fafafa;
+
+  :global {
+    .ant-card {
+      background: #fafafa;
+    }
+  }
+}
diff --git a/src/pages/editor/flow/components/EditorDetailPanel/index.tsx b/src/pages/editor/flow/components/EditorDetailPanel/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..50aa37a8a3cfcc168cb687966767aa7ffbb095cc
--- /dev/null
+++ b/src/pages/editor/flow/components/EditorDetailPanel/index.tsx
@@ -0,0 +1,5 @@
+import FlowDetailPanel from './FlowDetailPanel';
+import KoniDetailPanel from './KoniDetailPanel';
+import MindDetailPanel from './MindDetailPanel';
+
+export { FlowDetailPanel, MindDetailPanel, KoniDetailPanel };
diff --git a/src/pages/editor/flow/components/EditorItemPanel/FlowItemPanel.tsx b/src/pages/editor/flow/components/EditorItemPanel/FlowItemPanel.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..dce9855d26704f7ef1292a4a1a90165682eb01bc
--- /dev/null
+++ b/src/pages/editor/flow/components/EditorItemPanel/FlowItemPanel.tsx
@@ -0,0 +1,54 @@
+import { Item, ItemPanel } from 'gg-editor';
+
+import { Card } from 'antd';
+import React from 'react';
+import styles from './index.less';
+
+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/src/pages/editor/flow/components/EditorItemPanel/KoniItemPanel.tsx b/src/pages/editor/flow/components/EditorItemPanel/KoniItemPanel.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..ad446f802201ed5a51779b920e4594e009ca7325
--- /dev/null
+++ b/src/pages/editor/flow/components/EditorItemPanel/KoniItemPanel.tsx
@@ -0,0 +1,53 @@
+import { Item, ItemPanel } from 'gg-editor';
+
+import { Card } from 'antd';
+import React from 'react';
+import styles from './index.less';
+
+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/src/pages/editor/flow/components/EditorItemPanel/index.less b/src/pages/editor/flow/components/EditorItemPanel/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..a7acc366d1715dc50003f7e7c1335e2844112a41
--- /dev/null
+++ b/src/pages/editor/flow/components/EditorItemPanel/index.less
@@ -0,0 +1,20 @@
+.itemPanel {
+  flex: 1;
+  background: #fafafa;
+
+  :global {
+    .ant-card {
+      background: #fafafa;
+    }
+
+    .ant-card-body {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      > div {
+        margin-bottom: 16px;
+      }
+    }
+  }
+}
diff --git a/src/pages/editor/flow/components/EditorItemPanel/index.tsx b/src/pages/editor/flow/components/EditorItemPanel/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..2ba03fbb700d78600d6ea668a57ffaad4e0586a6
--- /dev/null
+++ b/src/pages/editor/flow/components/EditorItemPanel/index.tsx
@@ -0,0 +1,4 @@
+import FlowItemPanel from './FlowItemPanel';
+import KoniItemPanel from './KoniItemPanel';
+
+export { FlowItemPanel, KoniItemPanel };
diff --git a/src/pages/editor/flow/components/EditorMinimap/index.tsx b/src/pages/editor/flow/components/EditorMinimap/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..ca27e2f9dc62c4ddbee09cafb0633521086c5d5b
--- /dev/null
+++ b/src/pages/editor/flow/components/EditorMinimap/index.tsx
@@ -0,0 +1,11 @@
+import { Card } from 'antd';
+import { Minimap } from 'gg-editor';
+import React from 'react';
+
+const EditorMinimap = () => (
+  <Card type="inner" size="small" title="Minimap" bordered={false}>
+    <Minimap height={200} />
+  </Card>
+);
+
+export default EditorMinimap;
diff --git a/src/pages/editor/flow/components/EditorToolbar/FlowToolbar.tsx b/src/pages/editor/flow/components/EditorToolbar/FlowToolbar.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..fe888be82cf31589b034236ad3771750e1275ff8
--- /dev/null
+++ b/src/pages/editor/flow/components/EditorToolbar/FlowToolbar.tsx
@@ -0,0 +1,30 @@
+import { Divider } from 'antd';
+import React from 'react';
+import { Toolbar } from 'gg-editor';
+import ToolbarButton from './ToolbarButton';
+import styles from './index.less';
+
+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/src/pages/editor/flow/components/EditorToolbar/KoniToolbar.tsx b/src/pages/editor/flow/components/EditorToolbar/KoniToolbar.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..f222007aff66a7d41abfd1f6bd459d7d7138c116
--- /dev/null
+++ b/src/pages/editor/flow/components/EditorToolbar/KoniToolbar.tsx
@@ -0,0 +1,3 @@
+import FlowToolbar from './FlowToolbar';
+
+export default FlowToolbar;
diff --git a/src/pages/editor/flow/components/EditorToolbar/MindToolbar.tsx b/src/pages/editor/flow/components/EditorToolbar/MindToolbar.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..536c06d84df8a1c25e3e7c2be8a6e8b7b3264cd7
--- /dev/null
+++ b/src/pages/editor/flow/components/EditorToolbar/MindToolbar.tsx
@@ -0,0 +1,25 @@
+import { Divider } from 'antd';
+import React from 'react';
+import { Toolbar } from 'gg-editor';
+import ToolbarButton from './ToolbarButton';
+import styles from './index.less';
+
+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/src/pages/editor/flow/components/EditorToolbar/ToolbarButton.tsx b/src/pages/editor/flow/components/EditorToolbar/ToolbarButton.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..15a96b7a05433c5d50c82347753487e1e33f51bd
--- /dev/null
+++ b/src/pages/editor/flow/components/EditorToolbar/ToolbarButton.tsx
@@ -0,0 +1,31 @@
+import { Command } from 'gg-editor';
+import React from 'react';
+import { Tooltip } from 'antd';
+import IconFont from '../../common/IconFont';
+import styles from './index.less';
+
+const upperFirst = (str: string) =>
+  str.toLowerCase().replace(/( |^)[a-z]/g, (l: string) => l.toUpperCase());
+
+interface ToolbarButtonProps {
+  command: string;
+  icon?: string;
+  text?: string;
+}
+const ToolbarButton: React.SFC<ToolbarButtonProps> = props => {
+  const { command, icon, text } = props;
+
+  return (
+    <Command name={command}>
+      <Tooltip
+        title={text || upperFirst(command)}
+        placement="bottom"
+        overlayClassName={styles.tooltip}
+      >
+        <IconFont type={`icon-${icon || command}`} />
+      </Tooltip>
+    </Command>
+  );
+};
+
+export default ToolbarButton;
diff --git a/src/pages/editor/flow/components/EditorToolbar/index.less b/src/pages/editor/flow/components/EditorToolbar/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..a5cca37c2931b149d39c94410e0d105922173e29
--- /dev/null
+++ b/src/pages/editor/flow/components/EditorToolbar/index.less
@@ -0,0 +1,39 @@
+.toolbar {
+  display: flex;
+  align-items: center;
+
+  :global {
+    .command i {
+      display: inline-block;
+      width: 27px;
+      height: 27px;
+      margin: 0 6px;
+      padding-top: 6px;
+      text-align: center;
+      border: 1px solid #fff;
+      cursor: pointer;
+
+      &:hover {
+        border: 1px solid #e6e9ed;
+      }
+    }
+
+    .disable i {
+      color: rgba(0, 0, 0, 0.25);
+      cursor: auto;
+
+      &:hover {
+        border: 1px solid #fff;
+      }
+    }
+  }
+}
+
+.tooltip {
+  :global {
+    .ant-tooltip-inner {
+      font-size: 12px;
+      border-radius: 0;
+    }
+  }
+}
diff --git a/src/pages/editor/flow/components/EditorToolbar/index.tsx b/src/pages/editor/flow/components/EditorToolbar/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..58f1d277256d82572f3f593ca727f991650c6699
--- /dev/null
+++ b/src/pages/editor/flow/components/EditorToolbar/index.tsx
@@ -0,0 +1,5 @@
+import FlowToolbar from './FlowToolbar';
+import KoniToolbar from './KoniToolbar';
+import MindToolbar from './MindToolbar';
+
+export { FlowToolbar, MindToolbar, KoniToolbar };
diff --git a/src/pages/editor/flow/index.less b/src/pages/editor/flow/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..aeffa8293bba01745b47148456f4df752bddbdf0
--- /dev/null
+++ b/src/pages/editor/flow/index.less
@@ -0,0 +1,41 @@
+.editor {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  width: 100%;
+  height: calc(100vh - 250px);
+  background: #fff;
+}
+
+.editorHd {
+  padding: 8px;
+  border: 1px solid #e6e9ed;
+}
+
+.editorBd {
+  flex: 1;
+}
+
+.editorSidebar,
+.editorContent {
+  display: flex;
+  flex-direction: column;
+}
+
+.editorSidebar {
+  background: #fafafa;
+
+  &:first-child {
+    border-right: 1px solid #e6e9ed;
+  }
+
+  &:last-child {
+    border-left: 1px solid #e6e9ed;
+  }
+}
+
+.flow,
+.mind,
+.koni {
+  flex: 1;
+}
diff --git a/src/pages/editor/flow/index.tsx b/src/pages/editor/flow/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..267e9d3cd9de849ad11056c7055fe079b0ecf4b2
--- /dev/null
+++ b/src/pages/editor/flow/index.tsx
@@ -0,0 +1,44 @@
+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 { FlowDetailPanel } from './components/EditorDetailPanel';
+import { FlowItemPanel } from './components/EditorItemPanel';
+import { FlowToolbar } from './components/EditorToolbar';
+import styles from './index.less';
+
+GGEditor.setTrackable(false);
+
+export default () => (
+  <PageHeaderWrapper
+    content={formatMessage({
+      id: 'editor-flow.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/src/pages/editor/flow/locales/en-US.ts b/src/pages/editor/flow/locales/en-US.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a24b98a3a8271466fa04416f550f4d05559e421c
--- /dev/null
+++ b/src/pages/editor/flow/locales/en-US.ts
@@ -0,0 +1,4 @@
+export default {
+  'editor-flow.description':
+    'The flow chart is an excellent way to represent the idea of the algorithm',
+};
diff --git a/src/pages/editor/flow/locales/zh-CN.ts b/src/pages/editor/flow/locales/zh-CN.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4571a32afc4fcb817aff0d71398f4ee481e080c4
--- /dev/null
+++ b/src/pages/editor/flow/locales/zh-CN.ts
@@ -0,0 +1,3 @@
+export default {
+  'editor-flow.description': '千言万语不如一张图，流程图是表示算法思路的好方法',
+};
diff --git a/src/pages/editor/koni/common/IconFont/index.ts b/src/pages/editor/koni/common/IconFont/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3bba8d2ed7043dd0b4f542ad5ef64bd2e9939f66
--- /dev/null
+++ b/src/pages/editor/koni/common/IconFont/index.ts
@@ -0,0 +1,7 @@
+import { Icon } from 'antd';
+
+const IconFont = Icon.createFromIconfontCN({
+  scriptUrl: 'https://at.alicdn.com/t/font_1101588_01zniftxm9yp.js',
+});
+
+export default IconFont;
diff --git a/src/pages/editor/koni/components/EditorContextMenu/FlowContextMenu.tsx b/src/pages/editor/koni/components/EditorContextMenu/FlowContextMenu.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..32f17aa15e0ec59870af8cf437cff068bde4117a
--- /dev/null
+++ b/src/pages/editor/koni/components/EditorContextMenu/FlowContextMenu.tsx
@@ -0,0 +1,35 @@
+import { CanvasMenu, ContextMenu, EdgeMenu, GroupMenu, MultiMenu, NodeMenu } from 'gg-editor';
+
+import React from 'react';
+import MenuItem from './MenuItem';
+import styles from './index.less';
+
+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/src/pages/editor/koni/components/EditorContextMenu/KoniContextMenu.tsx b/src/pages/editor/koni/components/EditorContextMenu/KoniContextMenu.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..8b049a5ee7d0d0dae9216d6f01f1f5e40b4a9904
--- /dev/null
+++ b/src/pages/editor/koni/components/EditorContextMenu/KoniContextMenu.tsx
@@ -0,0 +1,3 @@
+import FlowContextMenu from './FlowContextMenu';
+
+export default FlowContextMenu;
diff --git a/src/pages/editor/koni/components/EditorContextMenu/MenuItem.tsx b/src/pages/editor/koni/components/EditorContextMenu/MenuItem.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..63b584ca9aa2dedcd91c81e93d020e1e6863ed48
--- /dev/null
+++ b/src/pages/editor/koni/components/EditorContextMenu/MenuItem.tsx
@@ -0,0 +1,27 @@
+import { Command } from 'gg-editor';
+import React from 'react';
+import IconFont from '../../common/IconFont';
+import styles from './index.less';
+
+const upperFirst = (str: string) =>
+  str.toLowerCase().replace(/( |^)[a-z]/g, (l: string) => l.toUpperCase());
+
+interface MenuItemProps {
+  command: string;
+  icon?: string;
+  text?: string;
+}
+const MenuItem: React.SFC<MenuItemProps> = props => {
+  const { command, icon, text } = props;
+
+  return (
+    <Command name={command}>
+      <div className={styles.item}>
+        <IconFont type={`icon-${icon || command}`} />
+        <span>{text || upperFirst(command)}</span>
+      </div>
+    </Command>
+  );
+};
+
+export default MenuItem;
diff --git a/src/pages/editor/koni/components/EditorContextMenu/MindContextMenu.tsx b/src/pages/editor/koni/components/EditorContextMenu/MindContextMenu.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..2dc5247dabe4e70c4ab219f93eeec46787d78ad1
--- /dev/null
+++ b/src/pages/editor/koni/components/EditorContextMenu/MindContextMenu.tsx
@@ -0,0 +1,23 @@
+import { CanvasMenu, ContextMenu, NodeMenu } from 'gg-editor';
+
+import React from 'react';
+import MenuItem from './MenuItem';
+import styles from './index.less';
+
+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/src/pages/editor/koni/components/EditorContextMenu/index.less b/src/pages/editor/koni/components/EditorContextMenu/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..8a2cdae3bfbe5ffaaef812f8ab22677f5340dc91
--- /dev/null
+++ b/src/pages/editor/koni/components/EditorContextMenu/index.less
@@ -0,0 +1,39 @@
+.contextMenu {
+  display: none;
+  overflow: hidden;
+  background: #fff;
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+
+  .item {
+    display: flex;
+    align-items: center;
+    padding: 5px 12px;
+    cursor: pointer;
+    transition: all 0.3s;
+    user-select: none;
+
+    &:hover {
+      background: #e6f7ff;
+    }
+
+    i {
+      margin-right: 8px;
+    }
+  }
+
+  :global {
+    .disable {
+      :local {
+        .item {
+          color: rgba(0, 0, 0, 0.25);
+          cursor: auto;
+
+          &:hover {
+            background: #fff;
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/src/pages/editor/koni/components/EditorContextMenu/index.tsx b/src/pages/editor/koni/components/EditorContextMenu/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..6ee93423b8ec66db49a081d6e92239c553ec0418
--- /dev/null
+++ b/src/pages/editor/koni/components/EditorContextMenu/index.tsx
@@ -0,0 +1,5 @@
+import FlowContextMenu from './FlowContextMenu';
+import KoniContextMenu from './KoniContextMenu';
+import MindContextMenu from './MindContextMenu';
+
+export { FlowContextMenu, MindContextMenu, KoniContextMenu };
diff --git a/src/pages/editor/koni/components/EditorDetailPanel/DetailForm.tsx b/src/pages/editor/koni/components/EditorDetailPanel/DetailForm.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..713d6dbbb2f03ab8c6c16546cb23de487d2f63d4
--- /dev/null
+++ b/src/pages/editor/koni/components/EditorDetailPanel/DetailForm.tsx
@@ -0,0 +1,136 @@
+import { Card, Form, Input, Select } from 'antd';
+import React, { Fragment } from 'react';
+
+import { FormComponentProps } from 'antd/es/form';
+import { withPropsAPI } from 'gg-editor';
+
+const upperFirst = (str: string) =>
+  str.toLowerCase().replace(/( |^)[a-z]/g, (l: string) => l.toUpperCase());
+
+const { Item } = Form;
+const { Option } = Select;
+
+const inlineFormItemLayout = {
+  labelCol: {
+    sm: { span: 8 },
+  },
+  wrapperCol: {
+    sm: { span: 16 },
+  },
+};
+
+interface DetailFormProps extends FormComponentProps {
+  type: string;
+  propsAPI?: any;
+}
+
+class DetailForm extends React.Component<DetailFormProps> {
+  get item() {
+    const { propsAPI } = this.props;
+
+    return propsAPI.getSelected()[0];
+  }
+
+  handleSubmit = (e: React.FormEvent) => {
+    if (e && e.preventDefault) {
+      e.preventDefault();
+    }
+
+    const { form, propsAPI } = this.props;
+    const { getSelected, executeCommand, update } = propsAPI;
+
+    setTimeout(() => {
+      form.validateFieldsAndScroll((err, values) => {
+        if (err) {
+          return;
+        }
+
+        const item = getSelected()[0];
+
+        if (!item) {
+          return;
+        }
+
+        executeCommand(() => {
+          update(item, {
+            ...values,
+          });
+        });
+      });
+    }, 0);
+  };
+
+  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;
+    const { label } = this.item.getModel();
+
+    return (
+      <Item label="Label" {...inlineFormItemLayout}>
+        {form.getFieldDecorator('label', {
+          initialValue: label,
+        })(<Input onBlur={this.handleSubmit} />)}
+      </Item>
+    );
+  };
+
+  renderEdgeDetail = () => {
+    const { form } = this.props;
+    const { label = '', shape = 'flow-smooth' } = this.item.getModel();
+
+    return (
+      <Fragment>
+        <Item label="Label" {...inlineFormItemLayout}>
+          {form.getFieldDecorator('label', {
+            initialValue: label,
+          })(<Input onBlur={this.handleSubmit} />)}
+        </Item>
+        <Item label="Shape" {...inlineFormItemLayout}>
+          {form.getFieldDecorator('shape', {
+            initialValue: shape,
+          })(this.renderEdgeShapeSelect())}
+        </Item>
+      </Fragment>
+    );
+  };
+
+  renderGroupDetail = () => {
+    const { form } = this.props;
+    const { label = '新建分组' } = this.item.getModel();
+
+    return (
+      <Item label="Label" {...inlineFormItemLayout}>
+        {form.getFieldDecorator('label', {
+          initialValue: label,
+        })(<Input onBlur={this.handleSubmit} />)}
+      </Item>
+    );
+  };
+
+  render() {
+    const { type } = this.props;
+
+    if (!this.item) {
+      return null;
+    }
+
+    return (
+      <Card type="inner" size="small" title={upperFirst(type)} bordered={false}>
+        <Form onSubmit={this.handleSubmit}>
+          {type === 'node' && this.renderNodeDetail()}
+          {type === 'edge' && this.renderEdgeDetail()}
+          {type === 'group' && this.renderGroupDetail()}
+        </Form>
+      </Card>
+    );
+  }
+}
+
+export default Form.create<DetailFormProps>()(withPropsAPI(DetailForm as any));
diff --git a/src/pages/editor/koni/components/EditorDetailPanel/FlowDetailPanel.tsx b/src/pages/editor/koni/components/EditorDetailPanel/FlowDetailPanel.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..ce38ea16add0aa97c3af0360302a2bdcab7bfe04
--- /dev/null
+++ b/src/pages/editor/koni/components/EditorDetailPanel/FlowDetailPanel.tsx
@@ -0,0 +1,28 @@
+import { CanvasPanel, DetailPanel, EdgePanel, GroupPanel, MultiPanel, NodePanel } from 'gg-editor';
+
+import { Card } from 'antd';
+import React from 'react';
+import DetailForm from './DetailForm';
+import styles from './index.less';
+
+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/src/pages/editor/koni/components/EditorDetailPanel/KoniDetailPanel.tsx b/src/pages/editor/koni/components/EditorDetailPanel/KoniDetailPanel.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..18aea9a44f5d96009d696e6bf145b3715c0d824c
--- /dev/null
+++ b/src/pages/editor/koni/components/EditorDetailPanel/KoniDetailPanel.tsx
@@ -0,0 +1,3 @@
+import FlowDetailPanel from './FlowDetailPanel';
+
+export default FlowDetailPanel;
diff --git a/src/pages/editor/koni/components/EditorDetailPanel/MindDetailPanel.tsx b/src/pages/editor/koni/components/EditorDetailPanel/MindDetailPanel.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..bf8f4834315f2640f3ae51900227a5b7762f8c0a
--- /dev/null
+++ b/src/pages/editor/koni/components/EditorDetailPanel/MindDetailPanel.tsx
@@ -0,0 +1,19 @@
+import { CanvasPanel, DetailPanel, NodePanel } from 'gg-editor';
+
+import { Card } from 'antd';
+import React from 'react';
+import DetailForm from './DetailForm';
+import styles from './index.less';
+
+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/src/pages/editor/koni/components/EditorDetailPanel/index.less b/src/pages/editor/koni/components/EditorDetailPanel/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..081945be43c093076bab1744984f5377a34f0fe2
--- /dev/null
+++ b/src/pages/editor/koni/components/EditorDetailPanel/index.less
@@ -0,0 +1,10 @@
+.detailPanel {
+  flex: 1;
+  background: #fafafa;
+
+  :global {
+    .ant-card {
+      background: #fafafa;
+    }
+  }
+}
diff --git a/src/pages/editor/koni/components/EditorDetailPanel/index.tsx b/src/pages/editor/koni/components/EditorDetailPanel/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..50aa37a8a3cfcc168cb687966767aa7ffbb095cc
--- /dev/null
+++ b/src/pages/editor/koni/components/EditorDetailPanel/index.tsx
@@ -0,0 +1,5 @@
+import FlowDetailPanel from './FlowDetailPanel';
+import KoniDetailPanel from './KoniDetailPanel';
+import MindDetailPanel from './MindDetailPanel';
+
+export { FlowDetailPanel, MindDetailPanel, KoniDetailPanel };
diff --git a/src/pages/editor/koni/components/EditorItemPanel/FlowItemPanel.tsx b/src/pages/editor/koni/components/EditorItemPanel/FlowItemPanel.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..dce9855d26704f7ef1292a4a1a90165682eb01bc
--- /dev/null
+++ b/src/pages/editor/koni/components/EditorItemPanel/FlowItemPanel.tsx
@@ -0,0 +1,54 @@
+import { Item, ItemPanel } from 'gg-editor';
+
+import { Card } from 'antd';
+import React from 'react';
+import styles from './index.less';
+
+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/src/pages/editor/koni/components/EditorItemPanel/KoniItemPanel.tsx b/src/pages/editor/koni/components/EditorItemPanel/KoniItemPanel.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..ad446f802201ed5a51779b920e4594e009ca7325
--- /dev/null
+++ b/src/pages/editor/koni/components/EditorItemPanel/KoniItemPanel.tsx
@@ -0,0 +1,53 @@
+import { Item, ItemPanel } from 'gg-editor';
+
+import { Card } from 'antd';
+import React from 'react';
+import styles from './index.less';
+
+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/src/pages/editor/koni/components/EditorItemPanel/index.less b/src/pages/editor/koni/components/EditorItemPanel/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..a7acc366d1715dc50003f7e7c1335e2844112a41
--- /dev/null
+++ b/src/pages/editor/koni/components/EditorItemPanel/index.less
@@ -0,0 +1,20 @@
+.itemPanel {
+  flex: 1;
+  background: #fafafa;
+
+  :global {
+    .ant-card {
+      background: #fafafa;
+    }
+
+    .ant-card-body {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      > div {
+        margin-bottom: 16px;
+      }
+    }
+  }
+}
diff --git a/src/pages/editor/koni/components/EditorItemPanel/index.tsx b/src/pages/editor/koni/components/EditorItemPanel/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..2ba03fbb700d78600d6ea668a57ffaad4e0586a6
--- /dev/null
+++ b/src/pages/editor/koni/components/EditorItemPanel/index.tsx
@@ -0,0 +1,4 @@
+import FlowItemPanel from './FlowItemPanel';
+import KoniItemPanel from './KoniItemPanel';
+
+export { FlowItemPanel, KoniItemPanel };
diff --git a/src/pages/editor/koni/components/EditorMinimap/index.tsx b/src/pages/editor/koni/components/EditorMinimap/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..ca27e2f9dc62c4ddbee09cafb0633521086c5d5b
--- /dev/null
+++ b/src/pages/editor/koni/components/EditorMinimap/index.tsx
@@ -0,0 +1,11 @@
+import { Card } from 'antd';
+import { Minimap } from 'gg-editor';
+import React from 'react';
+
+const EditorMinimap = () => (
+  <Card type="inner" size="small" title="Minimap" bordered={false}>
+    <Minimap height={200} />
+  </Card>
+);
+
+export default EditorMinimap;
diff --git a/src/pages/editor/koni/components/EditorToolbar/FlowToolbar.tsx b/src/pages/editor/koni/components/EditorToolbar/FlowToolbar.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..fe888be82cf31589b034236ad3771750e1275ff8
--- /dev/null
+++ b/src/pages/editor/koni/components/EditorToolbar/FlowToolbar.tsx
@@ -0,0 +1,30 @@
+import { Divider } from 'antd';
+import React from 'react';
+import { Toolbar } from 'gg-editor';
+import ToolbarButton from './ToolbarButton';
+import styles from './index.less';
+
+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/src/pages/editor/koni/components/EditorToolbar/KoniToolbar.tsx b/src/pages/editor/koni/components/EditorToolbar/KoniToolbar.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..f222007aff66a7d41abfd1f6bd459d7d7138c116
--- /dev/null
+++ b/src/pages/editor/koni/components/EditorToolbar/KoniToolbar.tsx
@@ -0,0 +1,3 @@
+import FlowToolbar from './FlowToolbar';
+
+export default FlowToolbar;
diff --git a/src/pages/editor/koni/components/EditorToolbar/MindToolbar.tsx b/src/pages/editor/koni/components/EditorToolbar/MindToolbar.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..536c06d84df8a1c25e3e7c2be8a6e8b7b3264cd7
--- /dev/null
+++ b/src/pages/editor/koni/components/EditorToolbar/MindToolbar.tsx
@@ -0,0 +1,25 @@
+import { Divider } from 'antd';
+import React from 'react';
+import { Toolbar } from 'gg-editor';
+import ToolbarButton from './ToolbarButton';
+import styles from './index.less';
+
+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/src/pages/editor/koni/components/EditorToolbar/ToolbarButton.tsx b/src/pages/editor/koni/components/EditorToolbar/ToolbarButton.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..15a96b7a05433c5d50c82347753487e1e33f51bd
--- /dev/null
+++ b/src/pages/editor/koni/components/EditorToolbar/ToolbarButton.tsx
@@ -0,0 +1,31 @@
+import { Command } from 'gg-editor';
+import React from 'react';
+import { Tooltip } from 'antd';
+import IconFont from '../../common/IconFont';
+import styles from './index.less';
+
+const upperFirst = (str: string) =>
+  str.toLowerCase().replace(/( |^)[a-z]/g, (l: string) => l.toUpperCase());
+
+interface ToolbarButtonProps {
+  command: string;
+  icon?: string;
+  text?: string;
+}
+const ToolbarButton: React.SFC<ToolbarButtonProps> = props => {
+  const { command, icon, text } = props;
+
+  return (
+    <Command name={command}>
+      <Tooltip
+        title={text || upperFirst(command)}
+        placement="bottom"
+        overlayClassName={styles.tooltip}
+      >
+        <IconFont type={`icon-${icon || command}`} />
+      </Tooltip>
+    </Command>
+  );
+};
+
+export default ToolbarButton;
diff --git a/src/pages/editor/koni/components/EditorToolbar/index.less b/src/pages/editor/koni/components/EditorToolbar/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..a5cca37c2931b149d39c94410e0d105922173e29
--- /dev/null
+++ b/src/pages/editor/koni/components/EditorToolbar/index.less
@@ -0,0 +1,39 @@
+.toolbar {
+  display: flex;
+  align-items: center;
+
+  :global {
+    .command i {
+      display: inline-block;
+      width: 27px;
+      height: 27px;
+      margin: 0 6px;
+      padding-top: 6px;
+      text-align: center;
+      border: 1px solid #fff;
+      cursor: pointer;
+
+      &:hover {
+        border: 1px solid #e6e9ed;
+      }
+    }
+
+    .disable i {
+      color: rgba(0, 0, 0, 0.25);
+      cursor: auto;
+
+      &:hover {
+        border: 1px solid #fff;
+      }
+    }
+  }
+}
+
+.tooltip {
+  :global {
+    .ant-tooltip-inner {
+      font-size: 12px;
+      border-radius: 0;
+    }
+  }
+}
diff --git a/src/pages/editor/koni/components/EditorToolbar/index.tsx b/src/pages/editor/koni/components/EditorToolbar/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..58f1d277256d82572f3f593ca727f991650c6699
--- /dev/null
+++ b/src/pages/editor/koni/components/EditorToolbar/index.tsx
@@ -0,0 +1,5 @@
+import FlowToolbar from './FlowToolbar';
+import KoniToolbar from './KoniToolbar';
+import MindToolbar from './MindToolbar';
+
+export { FlowToolbar, MindToolbar, KoniToolbar };
diff --git a/src/pages/editor/koni/index.less b/src/pages/editor/koni/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..aeffa8293bba01745b47148456f4df752bddbdf0
--- /dev/null
+++ b/src/pages/editor/koni/index.less
@@ -0,0 +1,41 @@
+.editor {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  width: 100%;
+  height: calc(100vh - 250px);
+  background: #fff;
+}
+
+.editorHd {
+  padding: 8px;
+  border: 1px solid #e6e9ed;
+}
+
+.editorBd {
+  flex: 1;
+}
+
+.editorSidebar,
+.editorContent {
+  display: flex;
+  flex-direction: column;
+}
+
+.editorSidebar {
+  background: #fafafa;
+
+  &:first-child {
+    border-right: 1px solid #e6e9ed;
+  }
+
+  &:last-child {
+    border-left: 1px solid #e6e9ed;
+  }
+}
+
+.flow,
+.mind,
+.koni {
+  flex: 1;
+}
diff --git a/src/pages/editor/koni/index.tsx b/src/pages/editor/koni/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..104c7484290a606844c2fe1bfda2f6a85717dfad
--- /dev/null
+++ b/src/pages/editor/koni/index.tsx
@@ -0,0 +1,44 @@
+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 { KoniDetailPanel } from './components/EditorDetailPanel';
+import { KoniItemPanel } from './components/EditorItemPanel';
+import { KoniToolbar } from './components/EditorToolbar';
+import styles from './index.less';
+
+GGEditor.setTrackable(false);
+
+export default () => (
+  <PageHeaderWrapper
+    content={formatMessage({
+      id: 'editor-koni.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/src/pages/editor/koni/locales/en-US.ts b/src/pages/editor/koni/locales/en-US.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0040230f3ab73262bc92de838adcf295786859b5
--- /dev/null
+++ b/src/pages/editor/koni/locales/en-US.ts
@@ -0,0 +1,4 @@
+export default {
+  'editor-koni.description':
+    'The topology diagram refers to the network structure diagram composed of network node devices and communication media',
+};
diff --git a/src/pages/editor/koni/locales/zh-CN.ts b/src/pages/editor/koni/locales/zh-CN.ts
new file mode 100644
index 0000000000000000000000000000000000000000..fcc244c3d2ccf100830f0e4bf027c03fa9eda44b
--- /dev/null
+++ b/src/pages/editor/koni/locales/zh-CN.ts
@@ -0,0 +1,3 @@
+export default {
+  'editor-koni.description': '拓扑结构图是指由网络节点设备和通信介质构成的网络结构图',
+};
diff --git a/src/pages/editor/mind/common/IconFont/index.ts b/src/pages/editor/mind/common/IconFont/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3bba8d2ed7043dd0b4f542ad5ef64bd2e9939f66
--- /dev/null
+++ b/src/pages/editor/mind/common/IconFont/index.ts
@@ -0,0 +1,7 @@
+import { Icon } from 'antd';
+
+const IconFont = Icon.createFromIconfontCN({
+  scriptUrl: 'https://at.alicdn.com/t/font_1101588_01zniftxm9yp.js',
+});
+
+export default IconFont;
diff --git a/src/pages/editor/mind/components/EditorContextMenu/FlowContextMenu.tsx b/src/pages/editor/mind/components/EditorContextMenu/FlowContextMenu.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..32f17aa15e0ec59870af8cf437cff068bde4117a
--- /dev/null
+++ b/src/pages/editor/mind/components/EditorContextMenu/FlowContextMenu.tsx
@@ -0,0 +1,35 @@
+import { CanvasMenu, ContextMenu, EdgeMenu, GroupMenu, MultiMenu, NodeMenu } from 'gg-editor';
+
+import React from 'react';
+import MenuItem from './MenuItem';
+import styles from './index.less';
+
+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/src/pages/editor/mind/components/EditorContextMenu/KoniContextMenu.tsx b/src/pages/editor/mind/components/EditorContextMenu/KoniContextMenu.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..8b049a5ee7d0d0dae9216d6f01f1f5e40b4a9904
--- /dev/null
+++ b/src/pages/editor/mind/components/EditorContextMenu/KoniContextMenu.tsx
@@ -0,0 +1,3 @@
+import FlowContextMenu from './FlowContextMenu';
+
+export default FlowContextMenu;
diff --git a/src/pages/editor/mind/components/EditorContextMenu/MenuItem.tsx b/src/pages/editor/mind/components/EditorContextMenu/MenuItem.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..63b584ca9aa2dedcd91c81e93d020e1e6863ed48
--- /dev/null
+++ b/src/pages/editor/mind/components/EditorContextMenu/MenuItem.tsx
@@ -0,0 +1,27 @@
+import { Command } from 'gg-editor';
+import React from 'react';
+import IconFont from '../../common/IconFont';
+import styles from './index.less';
+
+const upperFirst = (str: string) =>
+  str.toLowerCase().replace(/( |^)[a-z]/g, (l: string) => l.toUpperCase());
+
+interface MenuItemProps {
+  command: string;
+  icon?: string;
+  text?: string;
+}
+const MenuItem: React.SFC<MenuItemProps> = props => {
+  const { command, icon, text } = props;
+
+  return (
+    <Command name={command}>
+      <div className={styles.item}>
+        <IconFont type={`icon-${icon || command}`} />
+        <span>{text || upperFirst(command)}</span>
+      </div>
+    </Command>
+  );
+};
+
+export default MenuItem;
diff --git a/src/pages/editor/mind/components/EditorContextMenu/MindContextMenu.tsx b/src/pages/editor/mind/components/EditorContextMenu/MindContextMenu.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..2dc5247dabe4e70c4ab219f93eeec46787d78ad1
--- /dev/null
+++ b/src/pages/editor/mind/components/EditorContextMenu/MindContextMenu.tsx
@@ -0,0 +1,23 @@
+import { CanvasMenu, ContextMenu, NodeMenu } from 'gg-editor';
+
+import React from 'react';
+import MenuItem from './MenuItem';
+import styles from './index.less';
+
+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/src/pages/editor/mind/components/EditorContextMenu/index.less b/src/pages/editor/mind/components/EditorContextMenu/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..8a2cdae3bfbe5ffaaef812f8ab22677f5340dc91
--- /dev/null
+++ b/src/pages/editor/mind/components/EditorContextMenu/index.less
@@ -0,0 +1,39 @@
+.contextMenu {
+  display: none;
+  overflow: hidden;
+  background: #fff;
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+
+  .item {
+    display: flex;
+    align-items: center;
+    padding: 5px 12px;
+    cursor: pointer;
+    transition: all 0.3s;
+    user-select: none;
+
+    &:hover {
+      background: #e6f7ff;
+    }
+
+    i {
+      margin-right: 8px;
+    }
+  }
+
+  :global {
+    .disable {
+      :local {
+        .item {
+          color: rgba(0, 0, 0, 0.25);
+          cursor: auto;
+
+          &:hover {
+            background: #fff;
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/src/pages/editor/mind/components/EditorContextMenu/index.tsx b/src/pages/editor/mind/components/EditorContextMenu/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..6ee93423b8ec66db49a081d6e92239c553ec0418
--- /dev/null
+++ b/src/pages/editor/mind/components/EditorContextMenu/index.tsx
@@ -0,0 +1,5 @@
+import FlowContextMenu from './FlowContextMenu';
+import KoniContextMenu from './KoniContextMenu';
+import MindContextMenu from './MindContextMenu';
+
+export { FlowContextMenu, MindContextMenu, KoniContextMenu };
diff --git a/src/pages/editor/mind/components/EditorDetailPanel/DetailForm.tsx b/src/pages/editor/mind/components/EditorDetailPanel/DetailForm.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..713d6dbbb2f03ab8c6c16546cb23de487d2f63d4
--- /dev/null
+++ b/src/pages/editor/mind/components/EditorDetailPanel/DetailForm.tsx
@@ -0,0 +1,136 @@
+import { Card, Form, Input, Select } from 'antd';
+import React, { Fragment } from 'react';
+
+import { FormComponentProps } from 'antd/es/form';
+import { withPropsAPI } from 'gg-editor';
+
+const upperFirst = (str: string) =>
+  str.toLowerCase().replace(/( |^)[a-z]/g, (l: string) => l.toUpperCase());
+
+const { Item } = Form;
+const { Option } = Select;
+
+const inlineFormItemLayout = {
+  labelCol: {
+    sm: { span: 8 },
+  },
+  wrapperCol: {
+    sm: { span: 16 },
+  },
+};
+
+interface DetailFormProps extends FormComponentProps {
+  type: string;
+  propsAPI?: any;
+}
+
+class DetailForm extends React.Component<DetailFormProps> {
+  get item() {
+    const { propsAPI } = this.props;
+
+    return propsAPI.getSelected()[0];
+  }
+
+  handleSubmit = (e: React.FormEvent) => {
+    if (e && e.preventDefault) {
+      e.preventDefault();
+    }
+
+    const { form, propsAPI } = this.props;
+    const { getSelected, executeCommand, update } = propsAPI;
+
+    setTimeout(() => {
+      form.validateFieldsAndScroll((err, values) => {
+        if (err) {
+          return;
+        }
+
+        const item = getSelected()[0];
+
+        if (!item) {
+          return;
+        }
+
+        executeCommand(() => {
+          update(item, {
+            ...values,
+          });
+        });
+      });
+    }, 0);
+  };
+
+  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;
+    const { label } = this.item.getModel();
+
+    return (
+      <Item label="Label" {...inlineFormItemLayout}>
+        {form.getFieldDecorator('label', {
+          initialValue: label,
+        })(<Input onBlur={this.handleSubmit} />)}
+      </Item>
+    );
+  };
+
+  renderEdgeDetail = () => {
+    const { form } = this.props;
+    const { label = '', shape = 'flow-smooth' } = this.item.getModel();
+
+    return (
+      <Fragment>
+        <Item label="Label" {...inlineFormItemLayout}>
+          {form.getFieldDecorator('label', {
+            initialValue: label,
+          })(<Input onBlur={this.handleSubmit} />)}
+        </Item>
+        <Item label="Shape" {...inlineFormItemLayout}>
+          {form.getFieldDecorator('shape', {
+            initialValue: shape,
+          })(this.renderEdgeShapeSelect())}
+        </Item>
+      </Fragment>
+    );
+  };
+
+  renderGroupDetail = () => {
+    const { form } = this.props;
+    const { label = '新建分组' } = this.item.getModel();
+
+    return (
+      <Item label="Label" {...inlineFormItemLayout}>
+        {form.getFieldDecorator('label', {
+          initialValue: label,
+        })(<Input onBlur={this.handleSubmit} />)}
+      </Item>
+    );
+  };
+
+  render() {
+    const { type } = this.props;
+
+    if (!this.item) {
+      return null;
+    }
+
+    return (
+      <Card type="inner" size="small" title={upperFirst(type)} bordered={false}>
+        <Form onSubmit={this.handleSubmit}>
+          {type === 'node' && this.renderNodeDetail()}
+          {type === 'edge' && this.renderEdgeDetail()}
+          {type === 'group' && this.renderGroupDetail()}
+        </Form>
+      </Card>
+    );
+  }
+}
+
+export default Form.create<DetailFormProps>()(withPropsAPI(DetailForm as any));
diff --git a/src/pages/editor/mind/components/EditorDetailPanel/FlowDetailPanel.tsx b/src/pages/editor/mind/components/EditorDetailPanel/FlowDetailPanel.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..ce38ea16add0aa97c3af0360302a2bdcab7bfe04
--- /dev/null
+++ b/src/pages/editor/mind/components/EditorDetailPanel/FlowDetailPanel.tsx
@@ -0,0 +1,28 @@
+import { CanvasPanel, DetailPanel, EdgePanel, GroupPanel, MultiPanel, NodePanel } from 'gg-editor';
+
+import { Card } from 'antd';
+import React from 'react';
+import DetailForm from './DetailForm';
+import styles from './index.less';
+
+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/src/pages/editor/mind/components/EditorDetailPanel/KoniDetailPanel.tsx b/src/pages/editor/mind/components/EditorDetailPanel/KoniDetailPanel.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..18aea9a44f5d96009d696e6bf145b3715c0d824c
--- /dev/null
+++ b/src/pages/editor/mind/components/EditorDetailPanel/KoniDetailPanel.tsx
@@ -0,0 +1,3 @@
+import FlowDetailPanel from './FlowDetailPanel';
+
+export default FlowDetailPanel;
diff --git a/src/pages/editor/mind/components/EditorDetailPanel/MindDetailPanel.tsx b/src/pages/editor/mind/components/EditorDetailPanel/MindDetailPanel.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..bf8f4834315f2640f3ae51900227a5b7762f8c0a
--- /dev/null
+++ b/src/pages/editor/mind/components/EditorDetailPanel/MindDetailPanel.tsx
@@ -0,0 +1,19 @@
+import { CanvasPanel, DetailPanel, NodePanel } from 'gg-editor';
+
+import { Card } from 'antd';
+import React from 'react';
+import DetailForm from './DetailForm';
+import styles from './index.less';
+
+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/src/pages/editor/mind/components/EditorDetailPanel/index.less b/src/pages/editor/mind/components/EditorDetailPanel/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..081945be43c093076bab1744984f5377a34f0fe2
--- /dev/null
+++ b/src/pages/editor/mind/components/EditorDetailPanel/index.less
@@ -0,0 +1,10 @@
+.detailPanel {
+  flex: 1;
+  background: #fafafa;
+
+  :global {
+    .ant-card {
+      background: #fafafa;
+    }
+  }
+}
diff --git a/src/pages/editor/mind/components/EditorDetailPanel/index.tsx b/src/pages/editor/mind/components/EditorDetailPanel/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..50aa37a8a3cfcc168cb687966767aa7ffbb095cc
--- /dev/null
+++ b/src/pages/editor/mind/components/EditorDetailPanel/index.tsx
@@ -0,0 +1,5 @@
+import FlowDetailPanel from './FlowDetailPanel';
+import KoniDetailPanel from './KoniDetailPanel';
+import MindDetailPanel from './MindDetailPanel';
+
+export { FlowDetailPanel, MindDetailPanel, KoniDetailPanel };
diff --git a/src/pages/editor/mind/components/EditorItemPanel/FlowItemPanel.tsx b/src/pages/editor/mind/components/EditorItemPanel/FlowItemPanel.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..dce9855d26704f7ef1292a4a1a90165682eb01bc
--- /dev/null
+++ b/src/pages/editor/mind/components/EditorItemPanel/FlowItemPanel.tsx
@@ -0,0 +1,54 @@
+import { Item, ItemPanel } from 'gg-editor';
+
+import { Card } from 'antd';
+import React from 'react';
+import styles from './index.less';
+
+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/src/pages/editor/mind/components/EditorItemPanel/KoniItemPanel.tsx b/src/pages/editor/mind/components/EditorItemPanel/KoniItemPanel.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..ad446f802201ed5a51779b920e4594e009ca7325
--- /dev/null
+++ b/src/pages/editor/mind/components/EditorItemPanel/KoniItemPanel.tsx
@@ -0,0 +1,53 @@
+import { Item, ItemPanel } from 'gg-editor';
+
+import { Card } from 'antd';
+import React from 'react';
+import styles from './index.less';
+
+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/src/pages/editor/mind/components/EditorItemPanel/index.less b/src/pages/editor/mind/components/EditorItemPanel/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..a7acc366d1715dc50003f7e7c1335e2844112a41
--- /dev/null
+++ b/src/pages/editor/mind/components/EditorItemPanel/index.less
@@ -0,0 +1,20 @@
+.itemPanel {
+  flex: 1;
+  background: #fafafa;
+
+  :global {
+    .ant-card {
+      background: #fafafa;
+    }
+
+    .ant-card-body {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      > div {
+        margin-bottom: 16px;
+      }
+    }
+  }
+}
diff --git a/src/pages/editor/mind/components/EditorItemPanel/index.tsx b/src/pages/editor/mind/components/EditorItemPanel/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..2ba03fbb700d78600d6ea668a57ffaad4e0586a6
--- /dev/null
+++ b/src/pages/editor/mind/components/EditorItemPanel/index.tsx
@@ -0,0 +1,4 @@
+import FlowItemPanel from './FlowItemPanel';
+import KoniItemPanel from './KoniItemPanel';
+
+export { FlowItemPanel, KoniItemPanel };
diff --git a/src/pages/editor/mind/components/EditorMinimap/index.tsx b/src/pages/editor/mind/components/EditorMinimap/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..ca27e2f9dc62c4ddbee09cafb0633521086c5d5b
--- /dev/null
+++ b/src/pages/editor/mind/components/EditorMinimap/index.tsx
@@ -0,0 +1,11 @@
+import { Card } from 'antd';
+import { Minimap } from 'gg-editor';
+import React from 'react';
+
+const EditorMinimap = () => (
+  <Card type="inner" size="small" title="Minimap" bordered={false}>
+    <Minimap height={200} />
+  </Card>
+);
+
+export default EditorMinimap;
diff --git a/src/pages/editor/mind/components/EditorToolbar/FlowToolbar.tsx b/src/pages/editor/mind/components/EditorToolbar/FlowToolbar.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..fe888be82cf31589b034236ad3771750e1275ff8
--- /dev/null
+++ b/src/pages/editor/mind/components/EditorToolbar/FlowToolbar.tsx
@@ -0,0 +1,30 @@
+import { Divider } from 'antd';
+import React from 'react';
+import { Toolbar } from 'gg-editor';
+import ToolbarButton from './ToolbarButton';
+import styles from './index.less';
+
+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/src/pages/editor/mind/components/EditorToolbar/KoniToolbar.tsx b/src/pages/editor/mind/components/EditorToolbar/KoniToolbar.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..f222007aff66a7d41abfd1f6bd459d7d7138c116
--- /dev/null
+++ b/src/pages/editor/mind/components/EditorToolbar/KoniToolbar.tsx
@@ -0,0 +1,3 @@
+import FlowToolbar from './FlowToolbar';
+
+export default FlowToolbar;
diff --git a/src/pages/editor/mind/components/EditorToolbar/MindToolbar.tsx b/src/pages/editor/mind/components/EditorToolbar/MindToolbar.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..536c06d84df8a1c25e3e7c2be8a6e8b7b3264cd7
--- /dev/null
+++ b/src/pages/editor/mind/components/EditorToolbar/MindToolbar.tsx
@@ -0,0 +1,25 @@
+import { Divider } from 'antd';
+import React from 'react';
+import { Toolbar } from 'gg-editor';
+import ToolbarButton from './ToolbarButton';
+import styles from './index.less';
+
+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/src/pages/editor/mind/components/EditorToolbar/ToolbarButton.tsx b/src/pages/editor/mind/components/EditorToolbar/ToolbarButton.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..15a96b7a05433c5d50c82347753487e1e33f51bd
--- /dev/null
+++ b/src/pages/editor/mind/components/EditorToolbar/ToolbarButton.tsx
@@ -0,0 +1,31 @@
+import { Command } from 'gg-editor';
+import React from 'react';
+import { Tooltip } from 'antd';
+import IconFont from '../../common/IconFont';
+import styles from './index.less';
+
+const upperFirst = (str: string) =>
+  str.toLowerCase().replace(/( |^)[a-z]/g, (l: string) => l.toUpperCase());
+
+interface ToolbarButtonProps {
+  command: string;
+  icon?: string;
+  text?: string;
+}
+const ToolbarButton: React.SFC<ToolbarButtonProps> = props => {
+  const { command, icon, text } = props;
+
+  return (
+    <Command name={command}>
+      <Tooltip
+        title={text || upperFirst(command)}
+        placement="bottom"
+        overlayClassName={styles.tooltip}
+      >
+        <IconFont type={`icon-${icon || command}`} />
+      </Tooltip>
+    </Command>
+  );
+};
+
+export default ToolbarButton;
diff --git a/src/pages/editor/mind/components/EditorToolbar/index.less b/src/pages/editor/mind/components/EditorToolbar/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..a5cca37c2931b149d39c94410e0d105922173e29
--- /dev/null
+++ b/src/pages/editor/mind/components/EditorToolbar/index.less
@@ -0,0 +1,39 @@
+.toolbar {
+  display: flex;
+  align-items: center;
+
+  :global {
+    .command i {
+      display: inline-block;
+      width: 27px;
+      height: 27px;
+      margin: 0 6px;
+      padding-top: 6px;
+      text-align: center;
+      border: 1px solid #fff;
+      cursor: pointer;
+
+      &:hover {
+        border: 1px solid #e6e9ed;
+      }
+    }
+
+    .disable i {
+      color: rgba(0, 0, 0, 0.25);
+      cursor: auto;
+
+      &:hover {
+        border: 1px solid #fff;
+      }
+    }
+  }
+}
+
+.tooltip {
+  :global {
+    .ant-tooltip-inner {
+      font-size: 12px;
+      border-radius: 0;
+    }
+  }
+}
diff --git a/src/pages/editor/mind/components/EditorToolbar/index.tsx b/src/pages/editor/mind/components/EditorToolbar/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..58f1d277256d82572f3f593ca727f991650c6699
--- /dev/null
+++ b/src/pages/editor/mind/components/EditorToolbar/index.tsx
@@ -0,0 +1,5 @@
+import FlowToolbar from './FlowToolbar';
+import KoniToolbar from './KoniToolbar';
+import MindToolbar from './MindToolbar';
+
+export { FlowToolbar, MindToolbar, KoniToolbar };
diff --git a/src/pages/editor/mind/index.less b/src/pages/editor/mind/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..aeffa8293bba01745b47148456f4df752bddbdf0
--- /dev/null
+++ b/src/pages/editor/mind/index.less
@@ -0,0 +1,41 @@
+.editor {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  width: 100%;
+  height: calc(100vh - 250px);
+  background: #fff;
+}
+
+.editorHd {
+  padding: 8px;
+  border: 1px solid #e6e9ed;
+}
+
+.editorBd {
+  flex: 1;
+}
+
+.editorSidebar,
+.editorContent {
+  display: flex;
+  flex-direction: column;
+}
+
+.editorSidebar {
+  background: #fafafa;
+
+  &:first-child {
+    border-right: 1px solid #e6e9ed;
+  }
+
+  &:last-child {
+    border-left: 1px solid #e6e9ed;
+  }
+}
+
+.flow,
+.mind,
+.koni {
+  flex: 1;
+}
diff --git a/src/pages/editor/mind/index.tsx b/src/pages/editor/mind/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..6fa0a05d84893ecc17f89c429035e7f20b72b56b
--- /dev/null
+++ b/src/pages/editor/mind/index.tsx
@@ -0,0 +1,41 @@
+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 { MindDetailPanel } from './components/EditorDetailPanel';
+import { MindToolbar } from './components/EditorToolbar';
+import data from './worldCup2018.json';
+import styles from './index.less';
+
+GGEditor.setTrackable(false);
+
+export default () => (
+  <PageHeaderWrapper
+    content={formatMessage({
+      id: 'editor-mind.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/src/pages/editor/mind/locales/en-US.ts b/src/pages/editor/mind/locales/en-US.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c0e527428d4c0c8af7ccf5d88155719e56cf997f
--- /dev/null
+++ b/src/pages/editor/mind/locales/en-US.ts
@@ -0,0 +1,4 @@
+export default {
+  'editor-mind.description':
+    'The brain map is an effective graphical thinking tool for expressing divergent thinking. It is simple but effective and is a practical thinking tool',
+};
diff --git a/src/pages/editor/mind/locales/zh-CN.ts b/src/pages/editor/mind/locales/zh-CN.ts
new file mode 100644
index 0000000000000000000000000000000000000000..36231a9890b66c7080dd12c6670498d0ae5e7086
--- /dev/null
+++ b/src/pages/editor/mind/locales/zh-CN.ts
@@ -0,0 +1,4 @@
+export default {
+  'editor-mind.description':
+    '脑图是表达发散性思维的有效图形思维工具 ，它简单却又很有效，是一种实用性的思维工具',
+};
diff --git a/src/pages/editor/mind/worldCup2018.json b/src/pages/editor/mind/worldCup2018.json
new file mode 100644
index 0000000000000000000000000000000000000000..44f3e63f56ae005d569335026a79f8f0012d4611
--- /dev/null
+++ b/src/pages/editor/mind/worldCup2018.json
@@ -0,0 +1,129 @@
+{
+  "roots": [
+    {
+      "label": "法国",
+      "children": [
+        {
+          "label": "克罗地亚",
+          "side": "left",
+          "children": [
+            {
+              "label": "克罗地亚",
+              "children": [
+                {
+                  "label": "克罗地亚",
+                  "children": [
+                    {
+                      "label": "克罗地亚"
+                    },
+                    {
+                      "label": "丹麦"
+                    }
+                  ]
+                },
+                {
+                  "label": "俄罗斯",
+                  "children": [
+                    {
+                      "label": "俄罗斯"
+                    },
+                    {
+                      "label": "西班牙"
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              "label": "英格兰",
+              "children": [
+                {
+                  "label": "英格兰",
+                  "children": [
+                    {
+                      "label": "英格兰"
+                    },
+                    {
+                      "label": "哥伦比亚"
+                    }
+                  ]
+                },
+                {
+                  "label": "瑞典",
+                  "children": [
+                    {
+                      "label": "瑞士"
+                    },
+                    {
+                      "label": "瑞典"
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "label": "法国",
+          "side": "right",
+          "children": [
+            {
+              "label": "法国",
+              "children": [
+                {
+                  "label": "法国",
+                  "children": [
+                    {
+                      "label": "法国"
+                    },
+                    {
+                      "label": "阿根廷"
+                    }
+                  ]
+                },
+                {
+                  "label": "乌拉圭",
+                  "children": [
+                    {
+                      "label": "乌拉圭"
+                    },
+                    {
+                      "label": "葡萄牙"
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              "label": "比利时",
+              "children": [
+                {
+                  "label": "比利时",
+                  "children": [
+                    {
+                      "label": "比利时"
+                    },
+                    {
+                      "label": "日本"
+                    }
+                  ]
+                },
+                {
+                  "label": "巴西",
+                  "children": [
+                    {
+                      "label": "巴西"
+                    },
+                    {
+                      "label": "墨西哥"
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}
diff --git a/src/pages/exception/403/components/Exception/index.less b/src/pages/exception/403/components/Exception/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..dd0dd575085cf2cb87d217655b1c607fee0a71b4
--- /dev/null
+++ b/src/pages/exception/403/components/Exception/index.less
@@ -0,0 +1,89 @@
+@import '~antd/es/style/themes/default.less';
+
+.exception {
+  display: flex;
+  align-items: center;
+  height: 80%;
+  min-height: 500px;
+
+  .imgBlock {
+    flex: 0 0 62.5%;
+    width: 62.5%;
+    padding-right: 152px;
+    zoom: 1;
+    &::before,
+    &::after {
+      display: table;
+      content: ' ';
+    }
+    &::after {
+      clear: both;
+      height: 0;
+      font-size: 0;
+      visibility: hidden;
+    }
+  }
+
+  .imgEle {
+    float: right;
+    width: 100%;
+    max-width: 430px;
+    height: 360px;
+    background-repeat: no-repeat;
+    background-position: 50% 50%;
+    background-size: contain;
+  }
+
+  .content {
+    flex: auto;
+
+    h1 {
+      margin-bottom: 24px;
+      color: #434e59;
+      font-weight: 600;
+      font-size: 72px;
+      line-height: 72px;
+    }
+
+    .desc {
+      margin-bottom: 16px;
+      color: @text-color-secondary;
+      font-size: 20px;
+      line-height: 28px;
+    }
+
+    .actions {
+      button:not(:last-child) {
+        margin-right: 8px;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: @screen-xl) {
+  .exception {
+    .imgBlock {
+      padding-right: 88px;
+    }
+  }
+}
+
+@media screen and (max-width: @screen-sm) {
+  .exception {
+    display: block;
+    text-align: center;
+    .imgBlock {
+      margin: 0 auto 24px;
+      padding-right: 0;
+    }
+  }
+}
+
+@media screen and (max-width: @screen-xs) {
+  .exception {
+    .imgBlock {
+      margin-bottom: -24px;
+      overflow: hidden;
+    }
+  }
+}
diff --git a/src/pages/exception/403/components/Exception/index.tsx b/src/pages/exception/403/components/Exception/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..5111bf2a546eb9d576ce593dc71eb05fbc63ab2c
--- /dev/null
+++ b/src/pages/exception/403/components/Exception/index.tsx
@@ -0,0 +1,83 @@
+import React, { createElement } from 'react';
+
+import { Button } from 'antd';
+import Link from 'umi/link';
+import classNames from 'classnames';
+import config from './typeConfig';
+import styles from './index.less';
+
+export interface ExceptionProps<
+  L = {
+    to: string;
+    href?: string;
+    replace?: boolean;
+    innerRef?: (node: HTMLAnchorElement | null) => void;
+  }
+> {
+  type?: '403' | '404' | '500';
+  title?: React.ReactNode;
+  desc?: React.ReactNode;
+  img?: string;
+  actions?: React.ReactNode;
+  linkElement?: string | React.ComponentType<L> | typeof Link;
+  style?: React.CSSProperties;
+  className?: string;
+  backText?: React.ReactNode;
+  redirect?: string;
+}
+
+class Exception extends React.Component<ExceptionProps, any> {
+  static defaultProps = {
+    backText: 'back to home',
+    redirect: '/',
+  };
+
+  constructor(props: ExceptionProps) {
+    super(props);
+    this.state = {};
+  }
+
+  render() {
+    const {
+      className,
+      backText,
+      linkElement = 'a',
+      type = '404',
+      title,
+      desc,
+      img,
+      actions,
+      redirect,
+      ...rest
+    } = this.props;
+    const pageType = type in config ? type : '404';
+    const clsString = classNames(styles.exception, className);
+    return (
+      <div className={clsString} {...rest}>
+        <div className={styles.imgBlock}>
+          <div
+            className={styles.imgEle}
+            style={{ backgroundImage: `url(${img || config[pageType].img})` }}
+          />
+        </div>
+        <div className={styles.content}>
+          <h1>{title || config[pageType].title}</h1>
+          <div className={styles.desc}>{desc || config[pageType].desc}</div>
+          <div className={styles.actions}>
+            {actions ||
+              createElement(
+                linkElement as any,
+                {
+                  to: redirect,
+                  href: redirect,
+                },
+                <Button type="primary">{backText}</Button>,
+              )}
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Exception;
diff --git a/src/pages/exception/403/components/Exception/typeConfig.ts b/src/pages/exception/403/components/Exception/typeConfig.ts
new file mode 100644
index 0000000000000000000000000000000000000000..453a5edcecb0b01f7f2cb720be3b0dfcc2302da4
--- /dev/null
+++ b/src/pages/exception/403/components/Exception/typeConfig.ts
@@ -0,0 +1,36 @@
+interface Config {
+  403: {
+    img: string;
+    title: string;
+    desc: string;
+  };
+  404: {
+    img: string;
+    title: string;
+    desc: string;
+  };
+  500: {
+    img: string;
+    title: string;
+    desc: string;
+  };
+}
+const config: Config = {
+  403: {
+    img: 'https://gw.alipayobjects.com/zos/rmsportal/wZcnGqRDyhPOEYFcZDnb.svg',
+    title: '403',
+    desc: '抱歉，你无权访问该页面',
+  },
+  404: {
+    img: 'https://gw.alipayobjects.com/zos/rmsportal/KpnpchXsobRgLElEozzI.svg',
+    title: '404',
+    desc: '抱歉，你访问的页面不存在',
+  },
+  500: {
+    img: 'https://gw.alipayobjects.com/zos/rmsportal/RVRUAYdCGeYNBWoKiIwB.svg',
+    title: '500',
+    desc: '抱歉，服务器出错了',
+  },
+};
+
+export default config;
diff --git a/src/pages/exception/403/index.tsx b/src/pages/exception/403/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..59406a4623dab8ced973e2954c3b3418581d5086
--- /dev/null
+++ b/src/pages/exception/403/index.tsx
@@ -0,0 +1,13 @@
+import Link from 'umi/link';
+import React from 'react';
+import { formatMessage } from 'umi-plugin-react/locale';
+import Exception from './components/Exception';
+
+export default () => (
+  <Exception
+    type="403"
+    desc={formatMessage({ id: 'exception-403.description.403' })}
+    linkElement={Link}
+    backText={formatMessage({ id: 'exception-403.exception.back' })}
+  />
+);
diff --git a/src/pages/exception/403/locales/en-US.ts b/src/pages/exception/403/locales/en-US.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4f5f46c500e4dde7947f94ba6dd790224a054ef6
--- /dev/null
+++ b/src/pages/exception/403/locales/en-US.ts
@@ -0,0 +1,4 @@
+export default {
+  'exception-403.exception.back': 'Back to home',
+  'exception-403.description.403': "Sorry, you don't have access to this page",
+};
diff --git a/src/pages/exception/403/locales/pt-BR.ts b/src/pages/exception/403/locales/pt-BR.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6261bddc6300effd655ca5a7b5c70044d45b7794
--- /dev/null
+++ b/src/pages/exception/403/locales/pt-BR.ts
@@ -0,0 +1,4 @@
+export default {
+  'exception-403.exception.back': 'Voltar para Início',
+  'exception-403.description.403': 'Desculpe, você não tem acesso a esta página',
+};
diff --git a/src/pages/exception/403/locales/zh-CN.ts b/src/pages/exception/403/locales/zh-CN.ts
new file mode 100644
index 0000000000000000000000000000000000000000..35855599bbb7ffc88ff6ce4d91bde953e1c9de81
--- /dev/null
+++ b/src/pages/exception/403/locales/zh-CN.ts
@@ -0,0 +1,4 @@
+export default {
+  'exception-403.exception.back': '返回首页',
+  'exception-403.description.403': '抱歉，你无权访问该页面',
+};
diff --git a/src/pages/exception/403/locales/zh-TW.ts b/src/pages/exception/403/locales/zh-TW.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8c5e41e3c21d2a5002da23b5708516d87eb72b42
--- /dev/null
+++ b/src/pages/exception/403/locales/zh-TW.ts
@@ -0,0 +1,4 @@
+export default {
+  'exception-403.exception.back': '返回首頁',
+  'exception-403.description.403': '抱歉，妳無權訪問該頁面',
+};
diff --git a/src/pages/exception/404/components/Exception/index.less b/src/pages/exception/404/components/Exception/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..dd0dd575085cf2cb87d217655b1c607fee0a71b4
--- /dev/null
+++ b/src/pages/exception/404/components/Exception/index.less
@@ -0,0 +1,89 @@
+@import '~antd/es/style/themes/default.less';
+
+.exception {
+  display: flex;
+  align-items: center;
+  height: 80%;
+  min-height: 500px;
+
+  .imgBlock {
+    flex: 0 0 62.5%;
+    width: 62.5%;
+    padding-right: 152px;
+    zoom: 1;
+    &::before,
+    &::after {
+      display: table;
+      content: ' ';
+    }
+    &::after {
+      clear: both;
+      height: 0;
+      font-size: 0;
+      visibility: hidden;
+    }
+  }
+
+  .imgEle {
+    float: right;
+    width: 100%;
+    max-width: 430px;
+    height: 360px;
+    background-repeat: no-repeat;
+    background-position: 50% 50%;
+    background-size: contain;
+  }
+
+  .content {
+    flex: auto;
+
+    h1 {
+      margin-bottom: 24px;
+      color: #434e59;
+      font-weight: 600;
+      font-size: 72px;
+      line-height: 72px;
+    }
+
+    .desc {
+      margin-bottom: 16px;
+      color: @text-color-secondary;
+      font-size: 20px;
+      line-height: 28px;
+    }
+
+    .actions {
+      button:not(:last-child) {
+        margin-right: 8px;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: @screen-xl) {
+  .exception {
+    .imgBlock {
+      padding-right: 88px;
+    }
+  }
+}
+
+@media screen and (max-width: @screen-sm) {
+  .exception {
+    display: block;
+    text-align: center;
+    .imgBlock {
+      margin: 0 auto 24px;
+      padding-right: 0;
+    }
+  }
+}
+
+@media screen and (max-width: @screen-xs) {
+  .exception {
+    .imgBlock {
+      margin-bottom: -24px;
+      overflow: hidden;
+    }
+  }
+}
diff --git a/src/pages/exception/404/components/Exception/index.tsx b/src/pages/exception/404/components/Exception/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..5111bf2a546eb9d576ce593dc71eb05fbc63ab2c
--- /dev/null
+++ b/src/pages/exception/404/components/Exception/index.tsx
@@ -0,0 +1,83 @@
+import React, { createElement } from 'react';
+
+import { Button } from 'antd';
+import Link from 'umi/link';
+import classNames from 'classnames';
+import config from './typeConfig';
+import styles from './index.less';
+
+export interface ExceptionProps<
+  L = {
+    to: string;
+    href?: string;
+    replace?: boolean;
+    innerRef?: (node: HTMLAnchorElement | null) => void;
+  }
+> {
+  type?: '403' | '404' | '500';
+  title?: React.ReactNode;
+  desc?: React.ReactNode;
+  img?: string;
+  actions?: React.ReactNode;
+  linkElement?: string | React.ComponentType<L> | typeof Link;
+  style?: React.CSSProperties;
+  className?: string;
+  backText?: React.ReactNode;
+  redirect?: string;
+}
+
+class Exception extends React.Component<ExceptionProps, any> {
+  static defaultProps = {
+    backText: 'back to home',
+    redirect: '/',
+  };
+
+  constructor(props: ExceptionProps) {
+    super(props);
+    this.state = {};
+  }
+
+  render() {
+    const {
+      className,
+      backText,
+      linkElement = 'a',
+      type = '404',
+      title,
+      desc,
+      img,
+      actions,
+      redirect,
+      ...rest
+    } = this.props;
+    const pageType = type in config ? type : '404';
+    const clsString = classNames(styles.exception, className);
+    return (
+      <div className={clsString} {...rest}>
+        <div className={styles.imgBlock}>
+          <div
+            className={styles.imgEle}
+            style={{ backgroundImage: `url(${img || config[pageType].img})` }}
+          />
+        </div>
+        <div className={styles.content}>
+          <h1>{title || config[pageType].title}</h1>
+          <div className={styles.desc}>{desc || config[pageType].desc}</div>
+          <div className={styles.actions}>
+            {actions ||
+              createElement(
+                linkElement as any,
+                {
+                  to: redirect,
+                  href: redirect,
+                },
+                <Button type="primary">{backText}</Button>,
+              )}
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Exception;
diff --git a/src/pages/exception/404/components/Exception/typeConfig.ts b/src/pages/exception/404/components/Exception/typeConfig.ts
new file mode 100644
index 0000000000000000000000000000000000000000..453a5edcecb0b01f7f2cb720be3b0dfcc2302da4
--- /dev/null
+++ b/src/pages/exception/404/components/Exception/typeConfig.ts
@@ -0,0 +1,36 @@
+interface Config {
+  403: {
+    img: string;
+    title: string;
+    desc: string;
+  };
+  404: {
+    img: string;
+    title: string;
+    desc: string;
+  };
+  500: {
+    img: string;
+    title: string;
+    desc: string;
+  };
+}
+const config: Config = {
+  403: {
+    img: 'https://gw.alipayobjects.com/zos/rmsportal/wZcnGqRDyhPOEYFcZDnb.svg',
+    title: '403',
+    desc: '抱歉，你无权访问该页面',
+  },
+  404: {
+    img: 'https://gw.alipayobjects.com/zos/rmsportal/KpnpchXsobRgLElEozzI.svg',
+    title: '404',
+    desc: '抱歉，你访问的页面不存在',
+  },
+  500: {
+    img: 'https://gw.alipayobjects.com/zos/rmsportal/RVRUAYdCGeYNBWoKiIwB.svg',
+    title: '500',
+    desc: '抱歉，服务器出错了',
+  },
+};
+
+export default config;
diff --git a/src/pages/exception/404/index.tsx b/src/pages/exception/404/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..5eacbfe48384a43a7166d8d30833726310a33f7d
--- /dev/null
+++ b/src/pages/exception/404/index.tsx
@@ -0,0 +1,13 @@
+import Link from 'umi/link';
+import React from 'react';
+import { formatMessage } from 'umi-plugin-react/locale';
+import Exception from './components/Exception';
+
+export default () => (
+  <Exception
+    type="404"
+    linkElement={Link}
+    desc={formatMessage({ id: 'exception-404.description.404' })}
+    backText={formatMessage({ id: 'exception-404.exception.back' })}
+  />
+);
diff --git a/src/pages/exception/404/locales/en-US.ts b/src/pages/exception/404/locales/en-US.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d524292a747892e09f0f5b8e8d756b31f9683ffb
--- /dev/null
+++ b/src/pages/exception/404/locales/en-US.ts
@@ -0,0 +1,4 @@
+export default {
+  'exception-404.exception.back': 'Back to home',
+  'exception-404.description.404': 'Sorry, the page you visited does not exist',
+};
diff --git a/src/pages/exception/404/locales/pt-BR.ts b/src/pages/exception/404/locales/pt-BR.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9c0421b4164f3910ddb6e92c4b46fc6bb77ccf1e
--- /dev/null
+++ b/src/pages/exception/404/locales/pt-BR.ts
@@ -0,0 +1,4 @@
+export default {
+  'exception-404.exception.back': 'Voltar para Início',
+  'exception-404.description.404': 'Desculpe, a página que você visitou não existe',
+};
diff --git a/src/pages/exception/404/locales/zh-CN.ts b/src/pages/exception/404/locales/zh-CN.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a26978631c98a16ea7b4d22ecb8ade2bc3abeea8
--- /dev/null
+++ b/src/pages/exception/404/locales/zh-CN.ts
@@ -0,0 +1,4 @@
+export default {
+  'exception-404.exception.back': '返回首页',
+  'exception-404.description.404': '抱歉，你访问的页面不存在',
+};
diff --git a/src/pages/exception/404/locales/zh-TW.ts b/src/pages/exception/404/locales/zh-TW.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1ab307f4f89e629712d2f729b80e140f6f4923a5
--- /dev/null
+++ b/src/pages/exception/404/locales/zh-TW.ts
@@ -0,0 +1,4 @@
+export default {
+  'exception-404.exception.back': '返回首頁',
+  'exception-404.description.404': '抱歉，妳訪問的頁面不存在',
+};
diff --git a/src/pages/exception/500/components/Exception/index.less b/src/pages/exception/500/components/Exception/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..dd0dd575085cf2cb87d217655b1c607fee0a71b4
--- /dev/null
+++ b/src/pages/exception/500/components/Exception/index.less
@@ -0,0 +1,89 @@
+@import '~antd/es/style/themes/default.less';
+
+.exception {
+  display: flex;
+  align-items: center;
+  height: 80%;
+  min-height: 500px;
+
+  .imgBlock {
+    flex: 0 0 62.5%;
+    width: 62.5%;
+    padding-right: 152px;
+    zoom: 1;
+    &::before,
+    &::after {
+      display: table;
+      content: ' ';
+    }
+    &::after {
+      clear: both;
+      height: 0;
+      font-size: 0;
+      visibility: hidden;
+    }
+  }
+
+  .imgEle {
+    float: right;
+    width: 100%;
+    max-width: 430px;
+    height: 360px;
+    background-repeat: no-repeat;
+    background-position: 50% 50%;
+    background-size: contain;
+  }
+
+  .content {
+    flex: auto;
+
+    h1 {
+      margin-bottom: 24px;
+      color: #434e59;
+      font-weight: 600;
+      font-size: 72px;
+      line-height: 72px;
+    }
+
+    .desc {
+      margin-bottom: 16px;
+      color: @text-color-secondary;
+      font-size: 20px;
+      line-height: 28px;
+    }
+
+    .actions {
+      button:not(:last-child) {
+        margin-right: 8px;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: @screen-xl) {
+  .exception {
+    .imgBlock {
+      padding-right: 88px;
+    }
+  }
+}
+
+@media screen and (max-width: @screen-sm) {
+  .exception {
+    display: block;
+    text-align: center;
+    .imgBlock {
+      margin: 0 auto 24px;
+      padding-right: 0;
+    }
+  }
+}
+
+@media screen and (max-width: @screen-xs) {
+  .exception {
+    .imgBlock {
+      margin-bottom: -24px;
+      overflow: hidden;
+    }
+  }
+}
diff --git a/src/pages/exception/500/components/Exception/index.tsx b/src/pages/exception/500/components/Exception/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..5111bf2a546eb9d576ce593dc71eb05fbc63ab2c
--- /dev/null
+++ b/src/pages/exception/500/components/Exception/index.tsx
@@ -0,0 +1,83 @@
+import React, { createElement } from 'react';
+
+import { Button } from 'antd';
+import Link from 'umi/link';
+import classNames from 'classnames';
+import config from './typeConfig';
+import styles from './index.less';
+
+export interface ExceptionProps<
+  L = {
+    to: string;
+    href?: string;
+    replace?: boolean;
+    innerRef?: (node: HTMLAnchorElement | null) => void;
+  }
+> {
+  type?: '403' | '404' | '500';
+  title?: React.ReactNode;
+  desc?: React.ReactNode;
+  img?: string;
+  actions?: React.ReactNode;
+  linkElement?: string | React.ComponentType<L> | typeof Link;
+  style?: React.CSSProperties;
+  className?: string;
+  backText?: React.ReactNode;
+  redirect?: string;
+}
+
+class Exception extends React.Component<ExceptionProps, any> {
+  static defaultProps = {
+    backText: 'back to home',
+    redirect: '/',
+  };
+
+  constructor(props: ExceptionProps) {
+    super(props);
+    this.state = {};
+  }
+
+  render() {
+    const {
+      className,
+      backText,
+      linkElement = 'a',
+      type = '404',
+      title,
+      desc,
+      img,
+      actions,
+      redirect,
+      ...rest
+    } = this.props;
+    const pageType = type in config ? type : '404';
+    const clsString = classNames(styles.exception, className);
+    return (
+      <div className={clsString} {...rest}>
+        <div className={styles.imgBlock}>
+          <div
+            className={styles.imgEle}
+            style={{ backgroundImage: `url(${img || config[pageType].img})` }}
+          />
+        </div>
+        <div className={styles.content}>
+          <h1>{title || config[pageType].title}</h1>
+          <div className={styles.desc}>{desc || config[pageType].desc}</div>
+          <div className={styles.actions}>
+            {actions ||
+              createElement(
+                linkElement as any,
+                {
+                  to: redirect,
+                  href: redirect,
+                },
+                <Button type="primary">{backText}</Button>,
+              )}
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Exception;
diff --git a/src/pages/exception/500/components/Exception/typeConfig.ts b/src/pages/exception/500/components/Exception/typeConfig.ts
new file mode 100644
index 0000000000000000000000000000000000000000..453a5edcecb0b01f7f2cb720be3b0dfcc2302da4
--- /dev/null
+++ b/src/pages/exception/500/components/Exception/typeConfig.ts
@@ -0,0 +1,36 @@
+interface Config {
+  403: {
+    img: string;
+    title: string;
+    desc: string;
+  };
+  404: {
+    img: string;
+    title: string;
+    desc: string;
+  };
+  500: {
+    img: string;
+    title: string;
+    desc: string;
+  };
+}
+const config: Config = {
+  403: {
+    img: 'https://gw.alipayobjects.com/zos/rmsportal/wZcnGqRDyhPOEYFcZDnb.svg',
+    title: '403',
+    desc: '抱歉，你无权访问该页面',
+  },
+  404: {
+    img: 'https://gw.alipayobjects.com/zos/rmsportal/KpnpchXsobRgLElEozzI.svg',
+    title: '404',
+    desc: '抱歉，你访问的页面不存在',
+  },
+  500: {
+    img: 'https://gw.alipayobjects.com/zos/rmsportal/RVRUAYdCGeYNBWoKiIwB.svg',
+    title: '500',
+    desc: '抱歉，服务器出错了',
+  },
+};
+
+export default config;
diff --git a/src/pages/exception/500/index.tsx b/src/pages/exception/500/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..0d6b3a80ae7066ac85ae0206c23f0c264dd23fd5
--- /dev/null
+++ b/src/pages/exception/500/index.tsx
@@ -0,0 +1,13 @@
+import Link from 'umi/link';
+import React from 'react';
+import { formatMessage } from 'umi-plugin-react/locale';
+import Exception from './components/Exception';
+
+export default () => (
+  <Exception
+    type="500"
+    desc={formatMessage({ id: 'exception-500.description.500' })}
+    linkElement={Link}
+    backText={formatMessage({ id: 'exception-500.exception.back' })}
+  />
+);
diff --git a/src/pages/exception/500/locales/en-US.ts b/src/pages/exception/500/locales/en-US.ts
new file mode 100644
index 0000000000000000000000000000000000000000..673b9fce415467329e271ee79c149beecabb0a3b
--- /dev/null
+++ b/src/pages/exception/500/locales/en-US.ts
@@ -0,0 +1,4 @@
+export default {
+  'exception-500.exception.back': 'Back to home',
+  'exception-500.description.500': 'Sorry, the server is reporting an error',
+};
diff --git a/src/pages/exception/500/locales/pt-BR.ts b/src/pages/exception/500/locales/pt-BR.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5342a7858ba1b3a1517536fc91a983bd40847415
--- /dev/null
+++ b/src/pages/exception/500/locales/pt-BR.ts
@@ -0,0 +1,4 @@
+export default {
+  'exception-500.exception.back': 'Voltar para Início',
+  'exception-500.description.500': 'Desculpe, o servidor está reportando um erro',
+};
diff --git a/src/pages/exception/500/locales/zh-CN.ts b/src/pages/exception/500/locales/zh-CN.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b5fe370cc6f127c8bc79baafd60372c9bda111a7
--- /dev/null
+++ b/src/pages/exception/500/locales/zh-CN.ts
@@ -0,0 +1,4 @@
+export default {
+  'exception-500.exception.back': '返回首页',
+  'exception-500.description.500': '抱歉，服务器出错了',
+};
diff --git a/src/pages/exception/500/locales/zh-TW.ts b/src/pages/exception/500/locales/zh-TW.ts
new file mode 100644
index 0000000000000000000000000000000000000000..cfbb9d1e8fbca57caff9c8d277baa1d8cead760c
--- /dev/null
+++ b/src/pages/exception/500/locales/zh-TW.ts
@@ -0,0 +1,4 @@
+export default {
+  'exception-500.exception.back': '返回首頁',
+  'exception-500.description.500': '抱歉，服務器出錯了',
+};
diff --git a/src/pages/form/advanced-form/_mock.ts b/src/pages/form/advanced-form/_mock.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e94c8af95a2632a83c5e64eae5da8194e8c39ab5
--- /dev/null
+++ b/src/pages/form/advanced-form/_mock.ts
@@ -0,0 +1,5 @@
+export default {
+  'POST  /api/forms': (req: any, res: any) => {
+    res.send({ message: 'Ok' });
+  },
+};
diff --git a/src/pages/form/advanced-form/components/FooterToolbar/index.less b/src/pages/form/advanced-form/components/FooterToolbar/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..2e6d8303462b2bc04df28ab7663d5a6a06d9da99
--- /dev/null
+++ b/src/pages/form/advanced-form/components/FooterToolbar/index.less
@@ -0,0 +1,33 @@
+@import '~antd/es/style/themes/default.less';
+
+.toolbar {
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  z-index: 99;
+  width: 100%;
+  height: 56px;
+  padding: 0 24px;
+  line-height: 56px;
+  background: @component-background;
+  border-top: 1px solid @border-color-split;
+  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.03);
+
+  &::after {
+    display: block;
+    clear: both;
+    content: '';
+  }
+
+  .left {
+    float: left;
+  }
+
+  .right {
+    float: right;
+  }
+
+  button + button {
+    margin-left: 8px;
+  }
+}
diff --git a/src/pages/form/advanced-form/components/FooterToolbar/index.tsx b/src/pages/form/advanced-form/components/FooterToolbar/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..ec11d2b86009a9c1dac736a787966cb553b0cd14
--- /dev/null
+++ b/src/pages/form/advanced-form/components/FooterToolbar/index.tsx
@@ -0,0 +1,49 @@
+import React, { Component } from 'react';
+
+import classNames from 'classnames';
+import styles from './index.less';
+
+export interface FooterToolbarProps {
+  extra?: React.ReactNode;
+  style?: React.CSSProperties;
+  className?: string;
+}
+
+export default class FooterToolbar extends Component<FooterToolbarProps> {
+  state = {
+    width: undefined,
+  };
+
+  componentDidMount() {
+    window.addEventListener('resize', this.resizeFooterToolbar);
+    this.resizeFooterToolbar();
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.resizeFooterToolbar);
+  }
+
+  resizeFooterToolbar = () => {
+    const sider = document.querySelector('.ant-layout-sider') as HTMLDivElement;
+    if (sider == null) {
+      return;
+    }
+    const { isMobile } = this.context;
+    const width = isMobile ? null : `calc(100% - ${sider.style.width})`;
+    const { width: stateWidth } = this.state;
+    if (stateWidth !== width) {
+      this.setState({ width });
+    }
+  };
+
+  render() {
+    const { children, className, extra, ...restProps } = this.props;
+    const { width } = this.state;
+    return (
+      <div className={classNames(className, styles.toolbar)} style={{ width }} {...restProps}>
+        <div className={styles.left}>{extra}</div>
+        <div className={styles.right}>{children}</div>
+      </div>
+    );
+  }
+}
diff --git a/src/pages/form/advanced-form/components/TableForm.tsx b/src/pages/form/advanced-form/components/TableForm.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..92d6347bb0c113875345aed6324b4c5f7d012bc7
--- /dev/null
+++ b/src/pages/form/advanced-form/components/TableForm.tsx
@@ -0,0 +1,293 @@
+import { Button, Divider, Input, Popconfirm, Table, message } from 'antd';
+import React, { Fragment, PureComponent } from 'react';
+
+import { isEqual } from 'lodash';
+import styles from '../style.less';
+
+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;
+    }
+    return {
+      data: nextProps.value,
+      value: nextProps.value,
+    };
+  }
+
+  clickedCancel: boolean = false;
+
+  index = 0;
+
+  cacheOriginData = {};
+
+  columns = [
+    {
+      title: '成员姓名',
+      dataIndex: 'name',
+      key: 'name',
+      width: '20%',
+      render: (text: string, record: TableFormDateType) => {
+        if (record.editable) {
+          return (
+            <Input
+              value={text}
+              autoFocus
+              onChange={e => this.handleFieldChange(e, 'name', record.key)}
+              onKeyPress={e => this.handleKeyPress(e, record.key)}
+              placeholder="成员姓名"
+            />
+          );
+        }
+        return text;
+      },
+    },
+    {
+      title: '工号',
+      dataIndex: 'workId',
+      key: 'workId',
+      width: '20%',
+      render: (text: string, record: TableFormDateType) => {
+        if (record.editable) {
+          return (
+            <Input
+              value={text}
+              onChange={e => this.handleFieldChange(e, 'workId', record.key)}
+              onKeyPress={e => this.handleKeyPress(e, record.key)}
+              placeholder="工号"
+            />
+          );
+        }
+        return text;
+      },
+    },
+    {
+      title: '所属部门',
+      dataIndex: 'department',
+      key: 'department',
+      width: '40%',
+      render: (text: string, record: TableFormDateType) => {
+        if (record.editable) {
+          return (
+            <Input
+              value={text}
+              onChange={e => this.handleFieldChange(e, 'department', record.key)}
+              onKeyPress={e => this.handleKeyPress(e, record.key)}
+              placeholder="所属部门"
+            />
+          );
+        }
+        return text;
+      },
+    },
+    {
+      title: '操作',
+      key: 'action',
+      render: (text: string, record: TableFormDateType) => {
+        const { loading } = this.state;
+        if (!!record.editable && loading) {
+          return null;
+        }
+        if (record.editable) {
+          if (record.isNew) {
+            return (
+              <span>
+                <a onClick={e => this.saveRow(e, record.key)}>添加</a>
+                <Divider type="vertical" />
+                <Popconfirm title="是否要删除此行？" onConfirm={() => this.remove(record.key)}>
+                  <a>删除</a>
+                </Popconfirm>
+              </span>
+            );
+          }
+          return (
+            <span>
+              <a onClick={e => this.saveRow(e, record.key)}>保存</a>
+              <Divider type="vertical" />
+              <a onClick={e => this.cancel(e, record.key)}>取消</a>
+            </span>
+          );
+        }
+        return (
+          <span>
+            <a onClick={e => this.toggleEditable(e, record.key)}>编辑</a>
+            <Divider type="vertical" />
+            <Popconfirm title="是否要删除此行？" onConfirm={() => this.remove(record.key)}>
+              <a>删除</a>
+            </Popconfirm>
+          </span>
+        );
+      },
+    },
+  ];
+
+  constructor(props: TableFormProps) {
+    super(props);
+    this.state = {
+      data: props.value,
+      loading: false,
+      value: props.value,
+    };
+  }
+
+  getRowByKey(key: string, newData?: TableFormDateType[]) {
+    const { data = [] } = this.state;
+    return (newData || data).filter(item => item.key === key)[0];
+  }
+
+  toggleEditable = (e: React.MouseEvent | React.KeyboardEvent, key: string) => {
+    e.preventDefault();
+    const { data = [] } = this.state;
+    const newData = data.map(item => ({ ...item }));
+    const target = this.getRowByKey(key, newData);
+    if (target) {
+      // 进入编辑状态时保存原始数据
+      if (!target.editable) {
+        this.cacheOriginData[key] = { ...target };
+      }
+      target.editable = !target.editable;
+      this.setState({ data: newData });
+    }
+  };
+
+  newMember = () => {
+    const { data = [] } = this.state;
+    const newData = data.map(item => ({ ...item }));
+    newData.push({
+      key: `NEW_TEMP_ID_${this.index}`,
+      workId: '',
+      name: '',
+      department: '',
+      editable: true,
+      isNew: true,
+    });
+    this.index += 1;
+    this.setState({ data: newData });
+  };
+
+  remove(key: string) {
+    const { data = [] } = this.state;
+    const { onChange } = this.props;
+    const newData = data.filter(item => item.key !== key);
+    this.setState({ data: newData });
+    if (onChange) {
+      onChange(newData);
+    }
+  }
+
+  handleKeyPress(e: React.KeyboardEvent, key: string) {
+    if (e.key === 'Enter') {
+      this.saveRow(e, key);
+    }
+  }
+
+  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;
+      this.setState({ data: newData });
+    }
+  }
+
+  saveRow(e: React.MouseEvent | React.KeyboardEvent, key: string) {
+    e.persist();
+    this.setState({
+      loading: true,
+    });
+    setTimeout(() => {
+      if (this.clickedCancel) {
+        this.clickedCancel = false;
+        return;
+      }
+      const target = this.getRowByKey(key) || {};
+      if (!target.workId || !target.name || !target.department) {
+        message.error('请填写完整成员信息。');
+        (e.target as HTMLInputElement).focus();
+        this.setState({
+          loading: false,
+        });
+        return;
+      }
+      delete target.isNew;
+      this.toggleEditable(e, key);
+      const { data = [] } = this.state;
+      const { onChange } = this.props;
+      if (onChange) {
+        onChange(data);
+      }
+      this.setState({
+        loading: false,
+      });
+    }, 500);
+  }
+
+  cancel(e: React.MouseEvent, key: string) {
+    this.clickedCancel = true;
+    e.preventDefault();
+    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<TableFormDateType>
+          loading={loading}
+          columns={this.columns}
+          dataSource={data}
+          pagination={false}
+          rowClassName={record => (record.editable ? styles.editable : '')}
+        />
+        <Button
+          style={{ width: '100%', marginTop: 16, marginBottom: 8 }}
+          type="dashed"
+          onClick={this.newMember}
+          icon="plus"
+        >
+          新增成员
+        </Button>
+      </Fragment>
+    );
+  }
+}
+
+export default TableForm;
diff --git a/src/pages/form/advanced-form/index.tsx b/src/pages/form/advanced-form/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..5291d390336aff1bc2331c318ecc8cdb754f399a
--- /dev/null
+++ b/src/pages/form/advanced-form/index.tsx
@@ -0,0 +1,341 @@
+import {
+  Button,
+  Card,
+  Col,
+  DatePicker,
+  Form,
+  Icon,
+  Input,
+  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 FooterToolbar from './components/FooterToolbar';
+import styles from './style.less';
+
+const { Option } = Select;
+const { RangePicker } = DatePicker;
+
+const fieldLabels = {
+  name: '仓库名',
+  url: '仓库域名',
+  owner: '仓库管理员',
+  approver: '审批人',
+  dateRange: '生效日期',
+  type: '仓库类型',
+  name2: '任务名',
+  url2: '任务描述',
+  owner2: '执行人',
+  approver2: '责任人',
+  dateRange2: '生效日期',
+  type2: '任务类型',
+};
+
+const tableData = [
+  {
+    key: '1',
+    workId: '00001',
+    name: 'John Brown',
+    department: 'New York No. 1 Lake Park',
+  },
+  {
+    key: '2',
+    workId: '00002',
+    name: 'Jim Green',
+    department: 'London No. 1 Lake Park',
+  },
+  {
+    key: '3',
+    workId: '00003',
+    name: 'Joe Black',
+    department: 'Sidney No. 1 Lake Park',
+  },
+];
+
+interface AdvancedFormProps extends FormComponentProps {
+  dispatch: Dispatch<any>;
+  submitting: boolean;
+}
+
+@connect(({ loading }: { loading: { effects: { [key: string]: boolean } } }) => ({
+  submitting: loading.effects['formAdvancedForm/submitAdvancedForm'],
+}))
+class AdvancedForm extends Component<AdvancedFormProps> {
+  state = {
+    width: '100%',
+  };
+
+  componentDidMount() {
+    window.addEventListener('resize', this.resizeFooterToolbar, { passive: true });
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.resizeFooterToolbar);
+  }
+
+  getErrorInfo = () => {
+    const {
+      form: { getFieldsError },
+    } = this.props;
+    const errors = getFieldsError();
+    const errorCount = Object.keys(errors).filter(key => errors[key]).length;
+    if (!errors || errorCount === 0) {
+      return null;
+    }
+    const scrollToField = (fieldKey: string) => {
+      const labelNode = document.querySelector(`label[for="${fieldKey}"]`);
+      if (labelNode) {
+        labelNode.scrollIntoView(true);
+      }
+    };
+    const errorList = Object.keys(errors).map(key => {
+      if (!errors[key]) {
+        return null;
+      }
+      const errorMessage = errors[key] || [];
+      return (
+        <li key={key} className={styles.errorListItem} onClick={() => scrollToField(key)}>
+          <Icon type="cross-circle-o" className={styles.errorIcon} />
+          <div className={styles.errorMessage}>{errorMessage[0]}</div>
+          <div className={styles.errorField}>{fieldLabels[key]}</div>
+        </li>
+      );
+    });
+    return (
+      <span className={styles.errorIcon}>
+        <Popover
+          title="表单校验信息"
+          content={errorList}
+          overlayClassName={styles.errorPopover}
+          trigger="click"
+          getPopupContainer={(trigger: HTMLElement) => {
+            if (trigger && trigger.parentNode) {
+              return trigger.parentNode as HTMLElement;
+            }
+            return trigger;
+          }}
+        >
+          <Icon type="exclamation-circle" />
+        </Popover>
+        {errorCount}
+      </span>
+    );
+  };
+
+  resizeFooterToolbar = () => {
+    requestAnimationFrame(() => {
+      const sider = document.querySelectorAll('.ant-layout-sider')[0] as HTMLDivElement;
+      if (sider) {
+        const width = `calc(100% - ${sider.style.width})`;
+        const { width: stateWidth } = this.state;
+        if (stateWidth !== width) {
+          this.setState({ width });
+        }
+      }
+    });
+  };
+
+  validate = () => {
+    const {
+      form: { validateFieldsAndScroll },
+      dispatch,
+    } = this.props;
+    validateFieldsAndScroll((error, values) => {
+      if (!error) {
+        // submit the values
+        dispatch({
+          type: 'formAdvancedForm/submitAdvancedForm',
+          payload: values,
+        });
+      }
+    });
+  };
+
+  render() {
+    const {
+      form: { getFieldDecorator },
+      submitting,
+    } = this.props;
+    const { width } = this.state;
+    return (
+      <>
+        <PageHeaderWrapper content="高级表单常见于一次性输入和提交大批量数据的场景。">
+          <Card title="仓库管理" className={styles.card} bordered={false}>
+            <Form layout="vertical" hideRequiredMark>
+              <Row gutter={16}>
+                <Col lg={6} md={12} sm={24}>
+                  <Form.Item label={fieldLabels.name}>
+                    {getFieldDecorator('name', {
+                      rules: [{ required: true, message: '请输入仓库名称' }],
+                    })(<Input placeholder="请输入仓库名称" />)}
+                  </Form.Item>
+                </Col>
+                <Col xl={{ span: 6, offset: 2 }} lg={{ span: 8 }} md={{ span: 12 }} sm={24}>
+                  <Form.Item label={fieldLabels.url}>
+                    {getFieldDecorator('url', {
+                      rules: [{ required: true, message: '请选择' }],
+                    })(
+                      <Input
+                        style={{ width: '100%' }}
+                        addonBefore="http://"
+                        addonAfter=".com"
+                        placeholder="请输入"
+                      />,
+                    )}
+                  </Form.Item>
+                </Col>
+                <Col xl={{ span: 8, offset: 2 }} lg={{ span: 10 }} md={{ span: 24 }} sm={24}>
+                  <Form.Item label={fieldLabels.owner}>
+                    {getFieldDecorator('owner', {
+                      rules: [{ required: true, message: '请选择管理员' }],
+                    })(
+                      <Select placeholder="请选择管理员">
+                        <Option value="xiao">付晓晓</Option>
+                        <Option value="mao">周毛毛</Option>
+                      </Select>,
+                    )}
+                  </Form.Item>
+                </Col>
+              </Row>
+              <Row gutter={16}>
+                <Col lg={6} md={12} sm={24}>
+                  <Form.Item label={fieldLabels.approver}>
+                    {getFieldDecorator('approver', {
+                      rules: [{ required: true, message: '请选择审批员' }],
+                    })(
+                      <Select placeholder="请选择审批员">
+                        <Option value="xiao">付晓晓</Option>
+                        <Option value="mao">周毛毛</Option>
+                      </Select>,
+                    )}
+                  </Form.Item>
+                </Col>
+                <Col xl={{ span: 6, offset: 2 }} lg={{ span: 8 }} md={{ span: 12 }} sm={24}>
+                  <Form.Item label={fieldLabels.dateRange}>
+                    {getFieldDecorator('dateRange', {
+                      rules: [{ required: true, message: '请选择生效日期' }],
+                    })(
+                      <RangePicker
+                        placeholder={['开始日期', '结束日期']}
+                        style={{ width: '100%' }}
+                      />,
+                    )}
+                  </Form.Item>
+                </Col>
+                <Col xl={{ span: 8, offset: 2 }} lg={{ span: 10 }} md={{ span: 24 }} sm={24}>
+                  <Form.Item label={fieldLabels.type}>
+                    {getFieldDecorator('type', {
+                      rules: [{ required: true, message: '请选择仓库类型' }],
+                    })(
+                      <Select placeholder="请选择仓库类型">
+                        <Option value="private">私密</Option>
+                        <Option value="public">公开</Option>
+                      </Select>,
+                    )}
+                  </Form.Item>
+                </Col>
+              </Row>
+            </Form>
+          </Card>
+          <Card title="任务管理" className={styles.card} bordered={false}>
+            <Form layout="vertical" hideRequiredMark>
+              <Row gutter={16}>
+                <Col lg={6} md={12} sm={24}>
+                  <Form.Item label={fieldLabels.name2}>
+                    {getFieldDecorator('name2', {
+                      rules: [{ required: true, message: '请输入' }],
+                    })(<Input placeholder="请输入" />)}
+                  </Form.Item>
+                </Col>
+                <Col xl={{ span: 6, offset: 2 }} lg={{ span: 8 }} md={{ span: 12 }} sm={24}>
+                  <Form.Item label={fieldLabels.url2}>
+                    {getFieldDecorator('url2', {
+                      rules: [{ required: true, message: '请选择' }],
+                    })(<Input placeholder="请输入" />)}
+                  </Form.Item>
+                </Col>
+                <Col xl={{ span: 8, offset: 2 }} lg={{ span: 10 }} md={{ span: 24 }} sm={24}>
+                  <Form.Item label={fieldLabels.owner2}>
+                    {getFieldDecorator('owner2', {
+                      rules: [{ required: true, message: '请选择管理员' }],
+                    })(
+                      <Select placeholder="请选择管理员">
+                        <Option value="xiao">付晓晓</Option>
+                        <Option value="mao">周毛毛</Option>
+                      </Select>,
+                    )}
+                  </Form.Item>
+                </Col>
+              </Row>
+              <Row gutter={16}>
+                <Col lg={6} md={12} sm={24}>
+                  <Form.Item label={fieldLabels.approver2}>
+                    {getFieldDecorator('approver2', {
+                      rules: [{ required: true, message: '请选择审批员' }],
+                    })(
+                      <Select placeholder="请选择审批员">
+                        <Option value="xiao">付晓晓</Option>
+                        <Option value="mao">周毛毛</Option>
+                      </Select>,
+                    )}
+                  </Form.Item>
+                </Col>
+                <Col xl={{ span: 6, offset: 2 }} lg={{ span: 8 }} md={{ span: 12 }} sm={24}>
+                  <Form.Item label={fieldLabels.dateRange2}>
+                    {getFieldDecorator('dateRange2', {
+                      rules: [{ required: true, message: '请输入' }],
+                    })(
+                      <TimePicker
+                        placeholder="提醒时间"
+                        style={{ width: '100%' }}
+                        getPopupContainer={trigger => {
+                          if (trigger && trigger.parentNode) {
+                            return trigger.parentNode as HTMLElement;
+                          }
+                          return trigger;
+                        }}
+                      />,
+                    )}
+                  </Form.Item>
+                </Col>
+                <Col xl={{ span: 8, offset: 2 }} lg={{ span: 10 }} md={{ span: 24 }} sm={24}>
+                  <Form.Item label={fieldLabels.type2}>
+                    {getFieldDecorator('type2', {
+                      rules: [{ required: true, message: '请选择仓库类型' }],
+                    })(
+                      <Select placeholder="请选择仓库类型">
+                        <Option value="private">私密</Option>
+                        <Option value="public">公开</Option>
+                      </Select>,
+                    )}
+                  </Form.Item>
+                </Col>
+              </Row>
+            </Form>
+          </Card>
+          <Card title="成员管理" bordered={false}>
+            {getFieldDecorator('members', {
+              initialValue: tableData,
+            })(<TableForm />)}
+          </Card>
+        </PageHeaderWrapper>
+        <FooterToolbar style={{ width }}>
+          {this.getErrorInfo()}
+          <Button type="primary" onClick={this.validate} loading={submitting}>
+            提交
+          </Button>
+        </FooterToolbar>
+      </>
+    );
+  }
+}
+
+export default Form.create<AdvancedFormProps>()(AdvancedForm);
diff --git a/src/pages/form/advanced-form/model.ts b/src/pages/form/advanced-form/model.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3f23b4463236eb1e7f43327ce748019d9ebcabbd
--- /dev/null
+++ b/src/pages/form/advanced-form/model.ts
@@ -0,0 +1,32 @@
+import { AnyAction } from 'redux';
+import { EffectsCommandMap } from 'dva';
+import { message } from 'antd';
+import { fakeSubmitForm } from './service';
+
+export type Effect = (
+  action: AnyAction,
+  effects: EffectsCommandMap & { select: <T>(func: (state: {}) => T) => T },
+) => void;
+
+export interface ModelType {
+  namespace: string;
+  state: {};
+  effects: {
+    submitAdvancedForm: Effect;
+  };
+}
+
+const Model: ModelType = {
+  namespace: 'formAdvancedForm',
+
+  state: {},
+
+  effects: {
+    *submitAdvancedForm({ payload }, { call }) {
+      yield call(fakeSubmitForm, payload);
+      message.success('提交成功');
+    },
+  },
+};
+
+export default Model;
diff --git a/src/pages/form/advanced-form/service.ts b/src/pages/form/advanced-form/service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..36024f2bb6b24b5ca7757eda0c6c6d15c98d0d90
--- /dev/null
+++ b/src/pages/form/advanced-form/service.ts
@@ -0,0 +1,8 @@
+import request from 'umi-request';
+
+export async function fakeSubmitForm(params: any) {
+  return request('/api/forms', {
+    method: 'POST',
+    data: params,
+  });
+}
diff --git a/src/pages/form/advanced-form/style.less b/src/pages/form/advanced-form/style.less
new file mode 100644
index 0000000000000000000000000000000000000000..83061335f4e4c5f51a814a831d4cfdde6433ebfa
--- /dev/null
+++ b/src/pages/form/advanced-form/style.less
@@ -0,0 +1,90 @@
+@import '~antd/es/style/themes/default.less';
+
+.card {
+  margin-bottom: 24px;
+}
+
+.heading {
+  margin: 0 0 16px 0;
+  font-size: 14px;
+  line-height: 22px;
+}
+
+.steps:global(.ant-steps) {
+  max-width: 750px;
+  margin: 16px auto;
+}
+
+.errorIcon {
+  margin-right: 24px;
+  color: @error-color;
+  cursor: pointer;
+  i {
+    margin-right: 4px;
+  }
+}
+
+.errorPopover {
+  :global {
+    .ant-popover-inner-content {
+      min-width: 256px;
+      max-height: 290px;
+      padding: 0;
+      overflow: auto;
+    }
+  }
+}
+
+.errorListItem {
+  padding: 8px 16px;
+  list-style: none;
+  border-bottom: 1px solid @border-color-split;
+  cursor: pointer;
+  transition: all 0.3s;
+  &:hover {
+    background: @primary-1;
+  }
+  &:last-child {
+    border: 0;
+  }
+  .errorIcon {
+    float: left;
+    margin-top: 4px;
+    margin-right: 12px;
+    padding-bottom: 22px;
+    color: @error-color;
+  }
+  .errorField {
+    margin-top: 2px;
+    color: @text-color-secondary;
+    font-size: 12px;
+  }
+}
+
+.editable {
+  td {
+    padding-top: 13px !important;
+    padding-bottom: 12.5px !important;
+  }
+}
+
+// custom footer for fixed footer toolbar
+.advancedForm + div {
+  padding-bottom: 64px;
+}
+
+.advancedForm {
+  :global {
+    .ant-form .ant-row:last-child .ant-form-item {
+      margin-bottom: 24px;
+    }
+    .ant-table td {
+      transition: none !important;
+    }
+  }
+}
+
+.optional {
+  color: @text-color-secondary;
+  font-style: normal;
+}
diff --git a/src/pages/form/basic-form/_mock.ts b/src/pages/form/basic-form/_mock.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e94c8af95a2632a83c5e64eae5da8194e8c39ab5
--- /dev/null
+++ b/src/pages/form/basic-form/_mock.ts
@@ -0,0 +1,5 @@
+export default {
+  'POST  /api/forms': (req: any, res: any) => {
+    res.send({ message: 'Ok' });
+  },
+};
diff --git a/src/pages/form/basic-form/index.tsx b/src/pages/form/basic-form/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..3a65b2bb0c61ec8e6e4d64d957d05608438d735c
--- /dev/null
+++ b/src/pages/form/basic-form/index.tsx
@@ -0,0 +1,254 @@
+import {
+  Button,
+  Card,
+  DatePicker,
+  Form,
+  Icon,
+  Input,
+  InputNumber,
+  Radio,
+  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';
+
+const FormItem = Form.Item;
+const { Option } = Select;
+const { RangePicker } = DatePicker;
+const { TextArea } = Input;
+
+interface BasicFormProps extends FormComponentProps {
+  submitting: boolean;
+  dispatch: Dispatch<any>;
+}
+
+class BasicForm extends Component<BasicFormProps> {
+  handleSubmit = (e: React.FormEvent) => {
+    const { dispatch, form } = this.props;
+    e.preventDefault();
+    form.validateFieldsAndScroll((err, values) => {
+      if (!err) {
+        dispatch({
+          type: 'formBasicForm/submitRegularForm',
+          payload: values,
+        });
+      }
+    });
+  };
+
+  render() {
+    const { submitting } = this.props;
+    const {
+      form: { getFieldDecorator, getFieldValue },
+    } = this.props;
+
+    const formItemLayout = {
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 7 },
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 12 },
+        md: { span: 10 },
+      },
+    };
+
+    const submitFormLayout = {
+      wrapperCol: {
+        xs: { span: 24, offset: 0 },
+        sm: { span: 10, offset: 7 },
+      },
+    };
+    return (
+      <PageHeaderWrapper content={<FormattedMessage id="form-basic-form.basic.description" />}>
+        <Card bordered={false}>
+          <Form onSubmit={this.handleSubmit} hideRequiredMark style={{ marginTop: 8 }}>
+            <FormItem {...formItemLayout} label={<FormattedMessage id="form-basic-form.title.label" />}>
+              {getFieldDecorator('title', {
+                rules: [
+                  {
+                    required: true,
+                    message: formatMessage({ id: 'form-basic-form.title.required' }),
+                  },
+                ],
+              })(<Input placeholder={formatMessage({ id: 'form-basic-form.title.placeholder' })} />)}
+            </FormItem>
+            <FormItem {...formItemLayout} label={<FormattedMessage id="form-basic-form.date.label" />}>
+              {getFieldDecorator('date', {
+                rules: [
+                  {
+                    required: true,
+                    message: formatMessage({ id: 'form-basic-form.date.required' }),
+                  },
+                ],
+              })(
+                <RangePicker
+                  style={{ width: '100%' }}
+                  placeholder={[
+                    formatMessage({ id: 'form-basic-form.placeholder.start' }),
+                    formatMessage({ id: 'form-basic-form.placeholder.end' }),
+                  ]}
+                />,
+              )}
+            </FormItem>
+            <FormItem {...formItemLayout} label={<FormattedMessage id="form-basic-form.goal.label" />}>
+              {getFieldDecorator('goal', {
+                rules: [
+                  {
+                    required: true,
+                    message: formatMessage({ id: 'form-basic-form.goal.required' }),
+                  },
+                ],
+              })(
+                <TextArea
+                  style={{ minHeight: 32 }}
+                  placeholder={formatMessage({ id: 'form-basic-form.goal.placeholder' })}
+                  rows={4}
+                />,
+              )}
+            </FormItem>
+            <FormItem
+              {...formItemLayout}
+              label={<FormattedMessage id="form-basic-form.standard.label" />}
+            >
+              {getFieldDecorator('standard', {
+                rules: [
+                  {
+                    required: true,
+                    message: formatMessage({ id: 'form-basic-form.standard.required' }),
+                  },
+                ],
+              })(
+                <TextArea
+                  style={{ minHeight: 32 }}
+                  placeholder={formatMessage({ id: 'form-basic-form.standard.placeholder' })}
+                  rows={4}
+                />,
+              )}
+            </FormItem>
+            <FormItem
+              {...formItemLayout}
+              label={
+                <span>
+                  <FormattedMessage id="form-basic-form.client.label" />
+                  <em className={styles.optional}>
+                    <FormattedMessage id="form-basic-form.form.optional" />
+                    <Tooltip title={<FormattedMessage id="form-basic-form.label.tooltip" />}>
+                      <Icon type="info-circle-o" style={{ marginRight: 4 }} />
+                    </Tooltip>
+                  </em>
+                </span>
+              }
+            >
+              {getFieldDecorator('client')(
+                <Input placeholder={formatMessage({ id: 'form-basic-form.client.placeholder' })} />,
+              )}
+            </FormItem>
+            <FormItem
+              {...formItemLayout}
+              label={
+                <span>
+                  <FormattedMessage id="form-basic-form.invites.label" />
+                  <em className={styles.optional}>
+                    <FormattedMessage id="form-basic-form.form.optional" />
+                  </em>
+                </span>
+              }
+            >
+              {getFieldDecorator('invites')(
+                <Input placeholder={formatMessage({ id: 'form-basic-form.invites.placeholder' })} />,
+              )}
+            </FormItem>
+            <FormItem
+              {...formItemLayout}
+              label={
+                <span>
+                  <FormattedMessage id="form-basic-form.weight.label" />
+                  <em className={styles.optional}>
+                    <FormattedMessage id="form-basic-form.form.optional" />
+                  </em>
+                </span>
+              }
+            >
+              {getFieldDecorator('weight')(
+                <InputNumber
+                  placeholder={formatMessage({ id: 'form-basic-form.weight.placeholder' })}
+                  min={0}
+                  max={100}
+                />,
+              )}
+              <span className="ant-form-text">%</span>
+            </FormItem>
+            <FormItem
+              {...formItemLayout}
+              label={<FormattedMessage id="form-basic-form.public.label" />}
+              help={<FormattedMessage id="form-basic-form.label.help" />}
+            >
+              <div>
+                {getFieldDecorator('public', {
+                  initialValue: '1',
+                })(
+                  <Radio.Group>
+                    <Radio value="1">
+                      <FormattedMessage id="form-basic-form.radio.public" />
+                    </Radio>
+                    <Radio value="2">
+                      <FormattedMessage id="form-basic-form.radio.partially-public" />
+                    </Radio>
+                    <Radio value="3">
+                      <FormattedMessage id="form-basic-form.radio.private" />
+                    </Radio>
+                  </Radio.Group>,
+                )}
+                <FormItem style={{ marginBottom: 0 }}>
+                  {getFieldDecorator('publicUsers')(
+                    <Select
+                      mode="multiple"
+                      placeholder={formatMessage({ id: 'form-basic-form.publicUsers.placeholder' })}
+                      style={{
+                        margin: '8px 0',
+                        display: getFieldValue('public') === '2' ? 'block' : 'none',
+                      }}
+                    >
+                      <Option value="1">
+                        <FormattedMessage id="form-basic-form.option.A" />
+                      </Option>
+                      <Option value="2">
+                        <FormattedMessage id="form-basic-form.option.B" />
+                      </Option>
+                      <Option value="3">
+                        <FormattedMessage id="form-basic-form.option.C" />
+                      </Option>
+                    </Select>,
+                  )}
+                </FormItem>
+              </div>
+            </FormItem>
+            <FormItem {...submitFormLayout} style={{ marginTop: 32 }}>
+              <Button type="primary" htmlType="submit" loading={submitting}>
+                <FormattedMessage id="form-basic-form.form.submit" />
+              </Button>
+              <Button style={{ marginLeft: 8 }}>
+                <FormattedMessage id="form-basic-form.form.save" />
+              </Button>
+            </FormItem>
+          </Form>
+        </Card>
+      </PageHeaderWrapper>
+    );
+  }
+}
+
+export default Form.create<BasicFormProps>()(
+  connect(({ loading }: { loading: { effects: { [key: string]: boolean } } }) => ({
+    submitting: loading.effects['formBasicForm/submitRegularForm'],
+  }))(BasicForm),
+);
diff --git a/src/pages/form/basic-form/locales/en-US.ts b/src/pages/form/basic-form/locales/en-US.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5f505d712ccd71c5b92d4041ca304bab99d9a008
--- /dev/null
+++ b/src/pages/form/basic-form/locales/en-US.ts
@@ -0,0 +1,62 @@
+export default {
+  'form-basic-form.basic.title': 'Basic form',
+  'form-basic-form.basic.description':
+    'Form pages are used to collect or verify information to users, and basic forms are common in scenarios where there are fewer data items.',
+
+  'form-basic-form.email.required': 'Please enter your email!',
+  'form-basic-form.email.wrong-format': 'The email address is in the wrong format!',
+  'form-basic-form.userName.required': 'Please enter your userName!',
+  'form-basic-form.password.required': 'Please enter your password!',
+  'form-basic-form.password.twice': 'The passwords entered twice do not match!',
+  'form-basic-form.strength.msg':
+    "Please enter at least 6 characters and don't use passwords that are easy to guess.",
+  'form-basic-form.strength.strong': 'Strength: strong',
+  'form-basic-form.strength.medium': 'Strength: medium',
+  'form-basic-form.strength.short': 'Strength: too short',
+  'form-basic-form.confirm-password.required': 'Please confirm your password!',
+  'form-basic-form.phone-number.required': 'Please enter your phone number!',
+  'form-basic-form.phone-number.wrong-format': 'Malformed phone number!',
+  'form-basic-form.verification-code.required': 'Please enter the verification code!',
+  'form-basic-form.title.required': 'Please enter a title',
+  'form-basic-form.date.required': 'Please select the start and end date',
+  'form-basic-form.goal.required': 'Please enter a description of the goal',
+  'form-basic-form.standard.required': 'Please enter a metric',
+
+  'form-basic-form.form.get-captcha': 'Get Captcha',
+  'form-basic-form.captcha.second': 'sec',
+  'form-basic-form.form.optional': ' (optional) ',
+  'form-basic-form.form.submit': 'Submit',
+  'form-basic-form.form.save': 'Save',
+  'form-basic-form.email.placeholder': 'Email',
+  'form-basic-form.password.placeholder': 'Password',
+  'form-basic-form.confirm-password.placeholder': 'Confirm password',
+  'form-basic-form.phone-number.placeholder': 'Phone number',
+  'form-basic-form.verification-code.placeholder': 'Verification code',
+  'form-basic-form.title.label': 'Title',
+  'form-basic-form.title.placeholder': 'Give the target a name',
+  'form-basic-form.date.label': 'Start and end date',
+  'form-basic-form.placeholder.start': 'Start date',
+  'form-basic-form.placeholder.end': 'End date',
+  'form-basic-form.goal.label': 'Goal description',
+  'form-basic-form.goal.placeholder': 'Please enter your work goals',
+  'form-basic-form.standard.label': 'Metrics',
+  'form-basic-form.standard.placeholder': 'Please enter a metric',
+  'form-basic-form.client.label': 'Client',
+  'form-basic-form.label.tooltip': 'Target service object',
+  'form-basic-form.client.placeholder':
+    'Please describe your customer service, internal customers directly @ Name / job number',
+  'form-basic-form.invites.label': 'Inviting critics',
+  'form-basic-form.invites.placeholder':
+    'Please direct @ Name / job number, you can invite up to 5 people',
+  'form-basic-form.weight.label': 'Weight',
+  'form-basic-form.weight.placeholder': 'Please enter weight',
+  'form-basic-form.public.label': 'Target disclosure',
+  'form-basic-form.label.help': 'Customers and invitees are shared by default',
+  'form-basic-form.radio.public': 'Public',
+  'form-basic-form.radio.partially-public': 'Partially public',
+  'form-basic-form.radio.private': 'Private',
+  'form-basic-form.publicUsers.placeholder': 'Open to',
+  'form-basic-form.option.A': 'Colleague A',
+  'form-basic-form.option.B': 'Colleague B',
+  'form-basic-form.option.C': 'Colleague C',
+};
diff --git a/src/pages/form/basic-form/locales/pt-BR.ts b/src/pages/form/basic-form/locales/pt-BR.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d8fa5b915933b9380199048aa18ee3162f59597d
--- /dev/null
+++ b/src/pages/form/basic-form/locales/pt-BR.ts
@@ -0,0 +1,58 @@
+export default {
+  'form-basic-form.basic.title': 'Basic form',
+  'form-basic-form.basic.description':
+    'Form pages are used to collect or verify information to users, and basic forms are common in scenarios where there are fewer data items.',
+
+  'form-basic-form.email.required': 'Por favor insira seu email!',
+  'form-basic-form.email.wrong-format': 'O email está errado!',
+  'form-basic-form.userName.required': 'Por favor insira nome de usuário!',
+  'form-basic-form.password.required': 'Por favor insira sua senha!',
+  'form-basic-form.password.twice': 'As senhas não estão iguais!',
+  'form-basic-form.strength.msg':
+    'Por favor insira pelo menos 6 caracteres e não use senhas fáceis de adivinhar.',
+  'form-basic-form.strength.strong': 'Força: forte',
+  'form-basic-form.strength.medium': 'Força: média',
+  'form-basic-form.strength.short': 'Força: curta',
+  'form-basic-form.confirm-password.required': 'Por favor confirme sua senha!',
+  'form-basic-form.phone-number.required': 'Por favor insira seu telefone!',
+  'form-basic-form.phone-number.wrong-format': 'Formato de telefone errado!',
+  'form-basic-form.verification-code.required': 'Por favor insira seu código de verificação!',
+
+  'form-basic-form.form.get-captcha': 'Get Captcha',
+  'form-basic-form.captcha.second': 'sec',
+  'form-basic-form.email.placeholder': 'Email',
+  'form-basic-form.password.placeholder': 'Senha',
+  'form-basic-form.confirm-password.placeholder': 'Confirme a senha',
+  'form-basic-form.phone-number.placeholder': 'Telefone',
+  'form-basic-form.verification-code.placeholder': 'Código de verificação',
+  'form-basic-form.form.optional': ' (optional) ',
+  'form-basic-form.form.submit': 'Submit',
+  'form-basic-form.form.save': 'Save',
+  'form-basic-form.title.label': 'Title',
+  'form-basic-form.title.placeholder': 'Give the target a name',
+  'form-basic-form.date.label': 'Start and end date',
+  'form-basic-form.placeholder.start': 'Start date',
+  'form-basic-form.placeholder.end': 'End date',
+  'form-basic-form.goal.label': 'Goal description',
+  'form-basic-form.goal.placeholder': 'Please enter your work goals',
+  'form-basic-form.standard.label': 'Metrics',
+  'form-basic-form.standard.placeholder': 'Please enter a metric',
+  'form-basic-form.client.label': 'Client',
+  'form-basic-form.label.tooltip': 'Target service object',
+  'form-basic-form.client.placeholder':
+    'Please describe your customer service, internal customers directly @ Name / job number',
+  'form-basic-form.invites.label': 'Inviting critics',
+  'form-basic-form.invites.placeholder':
+    'Please direct @ Name / job number, you can invite up to 5 people',
+  'form-basic-form.weight.label': 'Weight',
+  'form-basic-form.weight.placeholder': 'Please enter weight',
+  'form-basic-form.public.label': 'Target disclosure',
+  'form-basic-form.label.help': 'Customers and invitees are shared by default',
+  'form-basic-form.radio.public': 'Public',
+  'form-basic-form.radio.partially-public': 'Partially public',
+  'form-basic-form.radio.private': 'Private',
+  'form-basic-form.publicUsers.placeholder': 'Open to',
+  'form-basic-form.option.A': 'Colleague A',
+  'form-basic-form.option.B': 'Colleague B',
+  'form-basic-form.option.C': 'Colleague C',
+};
diff --git a/src/pages/form/basic-form/locales/zh-CN.ts b/src/pages/form/basic-form/locales/zh-CN.ts
new file mode 100644
index 0000000000000000000000000000000000000000..58c957ebf7071a8287486fc5d6f4c521d87349d5
--- /dev/null
+++ b/src/pages/form/basic-form/locales/zh-CN.ts
@@ -0,0 +1,59 @@
+export default {
+  'form-basic-form.basic.title': '基础表单',
+  'form-basic-form.basic.description':
+    '表单页用于向用户收集或验证信息，基础表单常见于数据项较少的表单场景。',
+
+  'form-basic-form.email.required': '请输入邮箱地址！',
+  'form-basic-form.email.wrong-format': '邮箱地址格式错误！',
+  'form-basic-form.userName.required': '请输入用户名!',
+  'form-basic-form.password.required': '请输入密码！',
+  'form-basic-form.password.twice': '两次输入的密码不匹配!',
+  'form-basic-form.strength.msg': '请至少输入 6 个字符。请不要使用容易被猜到的密码。',
+  'form-basic-form.strength.strong': '强度：强',
+  'form-basic-form.strength.medium': '强度：中',
+  'form-basic-form.strength.short': '强度：太短',
+  'form-basic-form.confirm-password.required': '请确认密码！',
+  'form-basic-form.phone-number.required': '请输入手机号！',
+  'form-basic-form.phone-number.wrong-format': '手机号格式错误！',
+  'form-basic-form.verification-code.required': '请输入验证码！',
+  'form-basic-form.title.required': '请输入标题',
+  'form-basic-form.date.required': '请选择起止日期',
+  'form-basic-form.goal.required': '请输入目标描述',
+  'form-basic-form.standard.required': '请输入衡量标准',
+
+  'form-basic-form.form.get-captcha': '获取验证码',
+  'form-basic-form.captcha.second': '秒',
+  'form-basic-form.form.optional': '（选填）',
+  'form-basic-form.form.submit': '提交',
+  'form-basic-form.form.save': '保存',
+  'form-basic-form.email.placeholder': '邮箱',
+  'form-basic-form.password.placeholder': '至少6位密码，区分大小写',
+  'form-basic-form.confirm-password.placeholder': '确认密码',
+  'form-basic-form.phone-number.placeholder': '手机号',
+  'form-basic-form.verification-code.placeholder': '验证码',
+  'form-basic-form.title.label': '标题',
+  'form-basic-form.title.placeholder': '给目标起个名字',
+  'form-basic-form.date.label': '起止日期',
+  'form-basic-form.placeholder.start': '开始日期',
+  'form-basic-form.placeholder.end': '结束日期',
+  'form-basic-form.goal.label': '目标描述',
+  'form-basic-form.goal.placeholder': '请输入你的阶段性工作目标',
+  'form-basic-form.standard.label': '衡量标准',
+  'form-basic-form.standard.placeholder': '请输入衡量标准',
+  'form-basic-form.client.label': '客户',
+  'form-basic-form.label.tooltip': '目标的服务对象',
+  'form-basic-form.client.placeholder': '请描述你服务的客户，内部客户直接 @姓名／工号',
+  'form-basic-form.invites.label': '邀评人',
+  'form-basic-form.invites.placeholder': '请直接 @姓名／工号，最多可邀请 5 人',
+  'form-basic-form.weight.label': '权重',
+  'form-basic-form.weight.placeholder': '请输入',
+  'form-basic-form.public.label': '目标公开',
+  'form-basic-form.label.help': '客户、邀评人默认被分享',
+  'form-basic-form.radio.public': '公开',
+  'form-basic-form.radio.partially-public': '部分公开',
+  'form-basic-form.radio.private': '不公开',
+  'form-basic-form.publicUsers.placeholder': '公开给',
+  'form-basic-form.option.A': '同事甲',
+  'form-basic-form.option.B': '同事乙',
+  'form-basic-form.option.C': '同事丙',
+};
diff --git a/src/pages/form/basic-form/locales/zh-TW.ts b/src/pages/form/basic-form/locales/zh-TW.ts
new file mode 100644
index 0000000000000000000000000000000000000000..91d9e4c449d865c8230642685090e67fce2336a8
--- /dev/null
+++ b/src/pages/form/basic-form/locales/zh-TW.ts
@@ -0,0 +1,59 @@
+export default {
+  'form-basic-form.basic.title': '基礎表單',
+  'form-basic-form.basic.description':
+    '表單頁用於向用戶收集或驗證信息，基礎表單常見於數據項較少的表單場景。',
+
+  'form-basic-form.email.required': '請輸入郵箱地址！',
+  'form-basic-form.email.wrong-format': '郵箱地址格式錯誤！',
+  'form-basic-form.userName.required': '請輸入賬戶!',
+  'form-basic-form.password.required': '請輸入密碼！',
+  'form-basic-form.password.twice': '兩次輸入的密碼不匹配!',
+  'form-basic-form.strength.msg': '請至少輸入 6 個字符。請不要使用容易被猜到的密碼。',
+  'form-basic-form.strength.strong': '強度：強',
+  'form-basic-form.strength.medium': '強度：中',
+  'form-basic-form.strength.short': '強度：太短',
+  'form-basic-form.confirm-password.required': '請確認密碼！',
+  'form-basic-form.phone-number.required': '請輸入手機號！',
+  'form-basic-form.phone-number.wrong-format': '手機號格式錯誤！',
+  'form-basic-form.verification-code.required': '請輸入驗證碼！',
+  'form-basic-form.title.required': '請輸入標題',
+  'form-basic-form.date.required': '請選擇起止日期',
+  'form-basic-form.goal.required': '請輸入目標描述',
+  'form-basic-form.standard.required': '請輸入衡量標淮',
+
+  'form-basic-form.form.get-captcha': '獲取驗證碼',
+  'form-basic-form.captcha.second': '秒',
+  'form-basic-form.form.optional': '（選填）',
+  'form-basic-form.form.submit': '提交',
+  'form-basic-form.form.save': '保存',
+  'form-basic-form.email.placeholder': '郵箱',
+  'form-basic-form.password.placeholder': '至少6位密碼，區分大小寫',
+  'form-basic-form.confirm-password.placeholder': '確認密碼',
+  'form-basic-form.phone-number.placeholder': '手機號',
+  'form-basic-form.verification-code.placeholder': '驗證碼',
+  'form-basic-form.title.label': '標題',
+  'form-basic-form.title.placeholder': '給目標起個名字',
+  'form-basic-form.date.label': '起止日期',
+  'form-basic-form.placeholder.start': '開始日期',
+  'form-basic-form.placeholder.end': '結束日期',
+  'form-basic-form.goal.label': '目標描述',
+  'form-basic-form.goal.placeholder': '請輸入妳的階段性工作目標',
+  'form-basic-form.standard.label': '衡量標淮',
+  'form-basic-form.standard.placeholder': '請輸入衡量標淮',
+  'form-basic-form.client.label': '客戶',
+  'form-basic-form.label.tooltip': '目標的服務對象',
+  'form-basic-form.client.placeholder': '請描述妳服務的客戶，內部客戶直接 @姓名／工號',
+  'form-basic-form.invites.label': '邀評人',
+  'form-basic-form.invites.placeholder': '請直接 @姓名／工號，最多可邀請 5 人',
+  'form-basic-form.weight.label': '權重',
+  'form-basic-form.weight.placeholder': '請輸入',
+  'form-basic-form.public.label': '目標公開',
+  'form-basic-form.label.help': '客戶、邀評人默認被分享',
+  'form-basic-form.radio.public': '公開',
+  'form-basic-form.radio.partially-public': '部分公開',
+  'form-basic-form.radio.private': '不公開',
+  'form-basic-form.publicUsers.placeholder': '公開給',
+  'form-basic-form.option.A': '同事甲',
+  'form-basic-form.option.B': '同事乙',
+  'form-basic-form.option.C': '同事丙',
+};
diff --git a/src/pages/form/basic-form/model.ts b/src/pages/form/basic-form/model.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3d98b1db11d804f7a011027cfbe71186254a0c86
--- /dev/null
+++ b/src/pages/form/basic-form/model.ts
@@ -0,0 +1,31 @@
+import { AnyAction } from 'redux';
+import { EffectsCommandMap } from 'dva';
+import { message } from 'antd';
+import { fakeSubmitForm } from './service';
+
+export type Effect = (
+  action: AnyAction,
+  effects: EffectsCommandMap & { select: <T>(func: (state: {}) => T) => T },
+) => void;
+
+export interface ModelType {
+  namespace: string;
+  state: {};
+  effects: {
+    submitRegularForm: Effect;
+  };
+}
+const Model: ModelType = {
+  namespace: 'formBasicForm',
+
+  state: {},
+
+  effects: {
+    *submitRegularForm({ payload }, { call }) {
+      yield call(fakeSubmitForm, payload);
+      message.success('提交成功');
+    },
+  },
+};
+
+export default Model;
diff --git a/src/pages/form/basic-form/service.ts b/src/pages/form/basic-form/service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..36024f2bb6b24b5ca7757eda0c6c6d15c98d0d90
--- /dev/null
+++ b/src/pages/form/basic-form/service.ts
@@ -0,0 +1,8 @@
+import request from 'umi-request';
+
+export async function fakeSubmitForm(params: any) {
+  return request('/api/forms', {
+    method: 'POST',
+    data: params,
+  });
+}
diff --git a/src/pages/form/basic-form/style.less b/src/pages/form/basic-form/style.less
new file mode 100644
index 0000000000000000000000000000000000000000..83061335f4e4c5f51a814a831d4cfdde6433ebfa
--- /dev/null
+++ b/src/pages/form/basic-form/style.less
@@ -0,0 +1,90 @@
+@import '~antd/es/style/themes/default.less';
+
+.card {
+  margin-bottom: 24px;
+}
+
+.heading {
+  margin: 0 0 16px 0;
+  font-size: 14px;
+  line-height: 22px;
+}
+
+.steps:global(.ant-steps) {
+  max-width: 750px;
+  margin: 16px auto;
+}
+
+.errorIcon {
+  margin-right: 24px;
+  color: @error-color;
+  cursor: pointer;
+  i {
+    margin-right: 4px;
+  }
+}
+
+.errorPopover {
+  :global {
+    .ant-popover-inner-content {
+      min-width: 256px;
+      max-height: 290px;
+      padding: 0;
+      overflow: auto;
+    }
+  }
+}
+
+.errorListItem {
+  padding: 8px 16px;
+  list-style: none;
+  border-bottom: 1px solid @border-color-split;
+  cursor: pointer;
+  transition: all 0.3s;
+  &:hover {
+    background: @primary-1;
+  }
+  &:last-child {
+    border: 0;
+  }
+  .errorIcon {
+    float: left;
+    margin-top: 4px;
+    margin-right: 12px;
+    padding-bottom: 22px;
+    color: @error-color;
+  }
+  .errorField {
+    margin-top: 2px;
+    color: @text-color-secondary;
+    font-size: 12px;
+  }
+}
+
+.editable {
+  td {
+    padding-top: 13px !important;
+    padding-bottom: 12.5px !important;
+  }
+}
+
+// custom footer for fixed footer toolbar
+.advancedForm + div {
+  padding-bottom: 64px;
+}
+
+.advancedForm {
+  :global {
+    .ant-form .ant-row:last-child .ant-form-item {
+      margin-bottom: 24px;
+    }
+    .ant-table td {
+      transition: none !important;
+    }
+  }
+}
+
+.optional {
+  color: @text-color-secondary;
+  font-style: normal;
+}
diff --git a/src/pages/form/step-form/_mock.ts b/src/pages/form/step-form/_mock.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9e686e7ba75384022944119437cfaab95ce1dfc2
--- /dev/null
+++ b/src/pages/form/step-form/_mock.ts
@@ -0,0 +1,5 @@
+export default {
+  'POST  /api/forms': (req: any, res: { send: (arg0: { message: string }) => void }) => {
+    res.send({ message: 'Ok' });
+  },
+};
diff --git a/src/pages/form/step-form/components/Result/index.less b/src/pages/form/step-form/components/Result/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..8f32788f0f55dcd73f963c2ab8ba193aa63ceb29
--- /dev/null
+++ b/src/pages/form/step-form/components/Result/index.less
@@ -0,0 +1,58 @@
+@import '~antd/es/style/themes/default.less';
+
+.result {
+  width: 72%;
+  margin: 0 auto;
+  text-align: center;
+  @media screen and (max-width: @screen-xs) {
+    width: 100%;
+  }
+
+  .icon {
+    margin-bottom: 24px;
+    font-size: 72px;
+    line-height: 72px;
+
+    & > .success {
+      color: @success-color;
+    }
+
+    & > .error {
+      color: @error-color;
+    }
+  }
+
+  .title {
+    margin-bottom: 16px;
+    color: @heading-color;
+    font-weight: 500;
+    font-size: 24px;
+    line-height: 32px;
+  }
+
+  .description {
+    margin-bottom: 24px;
+    color: @text-color-secondary;
+    font-size: 14px;
+    line-height: 22px;
+  }
+
+  .extra {
+    padding: 24px 40px;
+    text-align: left;
+    background: @component-background;
+    border-radius: @border-radius-sm;
+
+    @media screen and (max-width: @screen-xs) {
+      padding: 18px 20px;
+    }
+  }
+
+  .actions {
+    margin-top: 32px;
+
+    button:not(:last-child) {
+      margin-right: 8px;
+    }
+  }
+}
diff --git a/src/pages/form/step-form/components/Result/index.tsx b/src/pages/form/step-form/components/Result/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..8c8ea1e4bc38983144625451a2508c329a0e2098
--- /dev/null
+++ b/src/pages/form/step-form/components/Result/index.tsx
@@ -0,0 +1,41 @@
+import { Icon } from 'antd';
+import React from 'react';
+import classNames from 'classnames';
+import styles from './index.less';
+
+export interface ResultProps {
+  actions?: React.ReactNode;
+  className?: string;
+  description?: React.ReactNode;
+  extra?: React.ReactNode;
+  style?: React.CSSProperties;
+  title?: React.ReactNode;
+  type: 'success' | 'error';
+}
+
+const Result: React.SFC<ResultProps> = ({
+  className,
+  type,
+  title,
+  description,
+  extra,
+  actions,
+  ...restProps
+}) => {
+  const iconMap = {
+    error: <Icon className={styles.error} type="close-circle" theme="filled" />,
+    success: <Icon className={styles.success} type="check-circle" theme="filled" />,
+  };
+  const clsString = classNames(styles.result, className);
+  return (
+    <div className={clsString} {...restProps}>
+      <div className={styles.icon}>{iconMap[type]}</div>
+      <div className={styles.title}>{title}</div>
+      {description && <div className={styles.description}>{description}</div>}
+      {extra && <div className={styles.extra}>{extra}</div>}
+      {actions && <div className={styles.actions}>{actions}</div>}
+    </div>
+  );
+};
+
+export default Result;
diff --git a/src/pages/form/step-form/components/Step1/index.less b/src/pages/form/step-form/components/Step1/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..45f9b351910f49eafab210958ec9c4f1b45b42ac
--- /dev/null
+++ b/src/pages/form/step-form/components/Step1/index.less
@@ -0,0 +1,78 @@
+@import '~antd/es/style/themes/default.less';
+
+.stepForm {
+  max-width: 500px;
+  margin: 40px auto 0;
+}
+
+.stepFormText {
+  margin-bottom: 24px;
+  :global {
+    .ant-form-item-label,
+    .ant-form-item-control {
+      line-height: 22px;
+    }
+  }
+}
+
+.result {
+  max-width: 560px;
+  margin: 0 auto;
+  padding: 24px 0 8px;
+}
+
+.desc {
+  padding: 0 56px;
+  color: @text-color-secondary;
+  h3 {
+    margin: 0 0 12px 0;
+    color: @text-color-secondary;
+    font-size: 16px;
+    line-height: 32px;
+  }
+  h4 {
+    margin: 0 0 4px 0;
+    color: @text-color-secondary;
+    font-size: 14px;
+    line-height: 22px;
+  }
+  p {
+    margin-top: 0;
+    margin-bottom: 12px;
+    line-height: 22px;
+  }
+}
+
+@media screen and (max-width: @screen-md) {
+  .desc {
+    padding: 0;
+  }
+}
+
+.information {
+  line-height: 22px;
+  :global {
+    .ant-row:not(:last-child) {
+      margin-bottom: 24px;
+    }
+  }
+  .label {
+    padding-right: 8px;
+    color: @heading-color;
+    text-align: right;
+    @media screen and (max-width: @screen-sm) {
+      text-align: left;
+    }
+  }
+}
+
+.money {
+  font-weight: 500;
+  font-size: 20px;
+  font-family: 'Helvetica Neue', sans-serif;
+  line-height: 14px;
+}
+
+.uppercase {
+  font-size: 12px;
+}
diff --git a/src/pages/form/step-form/components/Step1/index.tsx b/src/pages/form/step-form/components/Step1/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..a8099f97ce48d7d55d456a93e7af112e227943c5
--- /dev/null
+++ b/src/pages/form/step-form/components/Step1/index.tsx
@@ -0,0 +1,124 @@
+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 { StateType } from '../../model';
+import styles from './index.less';
+
+const { Option } = Select;
+
+const formItemLayout = {
+  labelCol: {
+    span: 5,
+  },
+  wrapperCol: {
+    span: 19,
+  },
+};
+interface Step1Props extends FormComponentProps {
+  data?: StateType['step'];
+  dispatch?: Dispatch<any>;
+}
+
+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: 'formStepForm/saveStepFormData',
+          payload: values,
+        });
+        dispatch({
+          type: 'formStepForm/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,
+            rules: [
+              { required: true, message: '请输入转账金额' },
+              {
+                pattern: /^(\d+)((?:\.\d+)?)$/,
+                message: '请输入合法金额数字',
+              },
+            ],
+          })(<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(({ formStepForm }: { formStepForm: StateType }) => ({
+  data: formStepForm.step,
+}))(Form.create<Step1Props>()(Step1));
diff --git a/src/pages/form/step-form/components/Step2/index.less b/src/pages/form/step-form/components/Step2/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..45f9b351910f49eafab210958ec9c4f1b45b42ac
--- /dev/null
+++ b/src/pages/form/step-form/components/Step2/index.less
@@ -0,0 +1,78 @@
+@import '~antd/es/style/themes/default.less';
+
+.stepForm {
+  max-width: 500px;
+  margin: 40px auto 0;
+}
+
+.stepFormText {
+  margin-bottom: 24px;
+  :global {
+    .ant-form-item-label,
+    .ant-form-item-control {
+      line-height: 22px;
+    }
+  }
+}
+
+.result {
+  max-width: 560px;
+  margin: 0 auto;
+  padding: 24px 0 8px;
+}
+
+.desc {
+  padding: 0 56px;
+  color: @text-color-secondary;
+  h3 {
+    margin: 0 0 12px 0;
+    color: @text-color-secondary;
+    font-size: 16px;
+    line-height: 32px;
+  }
+  h4 {
+    margin: 0 0 4px 0;
+    color: @text-color-secondary;
+    font-size: 14px;
+    line-height: 22px;
+  }
+  p {
+    margin-top: 0;
+    margin-bottom: 12px;
+    line-height: 22px;
+  }
+}
+
+@media screen and (max-width: @screen-md) {
+  .desc {
+    padding: 0;
+  }
+}
+
+.information {
+  line-height: 22px;
+  :global {
+    .ant-row:not(:last-child) {
+      margin-bottom: 24px;
+    }
+  }
+  .label {
+    padding-right: 8px;
+    color: @heading-color;
+    text-align: right;
+    @media screen and (max-width: @screen-sm) {
+      text-align: left;
+    }
+  }
+}
+
+.money {
+  font-weight: 500;
+  font-size: 20px;
+  font-family: 'Helvetica Neue', sans-serif;
+  line-height: 14px;
+}
+
+.uppercase {
+  font-size: 12px;
+}
diff --git a/src/pages/form/step-form/components/Step2/index.tsx b/src/pages/form/step-form/components/Step2/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..4ac1789a7d1881fdb8ba9ae9314c8a228f8df99e
--- /dev/null
+++ b/src/pages/form/step-form/components/Step2/index.tsx
@@ -0,0 +1,120 @@
+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 { StateType } from '../../model';
+import styles from './index.less';
+
+const formItemLayout = {
+  labelCol: {
+    span: 5,
+  },
+  wrapperCol: {
+    span: 19,
+  },
+};
+interface Step2Props extends FormComponentProps {
+  data?: StateType['step'];
+  dispatch?: Dispatch<any>;
+  submitting?: boolean;
+}
+
+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: 'formStepForm/saveCurrentStep',
+        payload: 'info',
+      });
+    }
+  };
+  const onValidateForm = (e: React.FormEvent) => {
+    e.preventDefault();
+    validateFields((err, values) => {
+      if (!err) {
+        if (dispatch) {
+          dispatch({
+            type: 'formStepForm/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,
+          },
+        }}
+        label=""
+      >
+        <Button type="primary" onClick={onValidateForm} loading={submitting}>
+          提交
+        </Button>
+        <Button onClick={onPrev} style={{ marginLeft: 8 }}>
+          上一步
+        </Button>
+      </Form.Item>
+    </Form>
+  );
+};
+export default connect(
+  ({
+    formStepForm,
+    loading,
+  }: {
+    formStepForm: StateType;
+    loading: {
+      effects: { [key: string]: boolean };
+    };
+  }) => ({
+    submitting: loading.effects['formStepForm/submitStepForm'],
+    data: formStepForm.step,
+  }),
+)(Form.create<Step2Props>()(Step2));
diff --git a/src/pages/form/step-form/components/Step3/index.less b/src/pages/form/step-form/components/Step3/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..45f9b351910f49eafab210958ec9c4f1b45b42ac
--- /dev/null
+++ b/src/pages/form/step-form/components/Step3/index.less
@@ -0,0 +1,78 @@
+@import '~antd/es/style/themes/default.less';
+
+.stepForm {
+  max-width: 500px;
+  margin: 40px auto 0;
+}
+
+.stepFormText {
+  margin-bottom: 24px;
+  :global {
+    .ant-form-item-label,
+    .ant-form-item-control {
+      line-height: 22px;
+    }
+  }
+}
+
+.result {
+  max-width: 560px;
+  margin: 0 auto;
+  padding: 24px 0 8px;
+}
+
+.desc {
+  padding: 0 56px;
+  color: @text-color-secondary;
+  h3 {
+    margin: 0 0 12px 0;
+    color: @text-color-secondary;
+    font-size: 16px;
+    line-height: 32px;
+  }
+  h4 {
+    margin: 0 0 4px 0;
+    color: @text-color-secondary;
+    font-size: 14px;
+    line-height: 22px;
+  }
+  p {
+    margin-top: 0;
+    margin-bottom: 12px;
+    line-height: 22px;
+  }
+}
+
+@media screen and (max-width: @screen-md) {
+  .desc {
+    padding: 0;
+  }
+}
+
+.information {
+  line-height: 22px;
+  :global {
+    .ant-row:not(:last-child) {
+      margin-bottom: 24px;
+    }
+  }
+  .label {
+    padding-right: 8px;
+    color: @heading-color;
+    text-align: right;
+    @media screen and (max-width: @screen-sm) {
+      text-align: left;
+    }
+  }
+}
+
+.money {
+  font-weight: 500;
+  font-size: 20px;
+  font-family: 'Helvetica Neue', sans-serif;
+  line-height: 14px;
+}
+
+.uppercase {
+  font-size: 12px;
+}
diff --git a/src/pages/form/step-form/components/Step3/index.tsx b/src/pages/form/step-form/components/Step3/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..6ed8cc85c4b3bc9c8b0366125103baf71a902a03
--- /dev/null
+++ b/src/pages/form/step-form/components/Step3/index.tsx
@@ -0,0 +1,83 @@
+import { Button, Col, Row } from 'antd';
+import React, { Fragment } from 'react';
+
+import { Dispatch } from 'redux';
+import { StateType } from '../../model';
+import Result from '../Result';
+import styles from './index.less';
+
+interface Step3Props {
+  data?: StateType['step'];
+  dispatch?: Dispatch<any>;
+}
+
+const Step3: React.FC<Step3Props> = props => {
+  const { data, dispatch } = props;
+  if (!data) {
+    return null;
+  }
+  const onFinish = () => {
+    if (dispatch) {
+      dispatch({
+        type: 'formStepForm/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/src/pages/form/step-form/index.tsx b/src/pages/form/step-form/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..64b3ef15245328d70921c6195826becabe5c02f5
--- /dev/null
+++ b/src/pages/form/step-form/index.tsx
@@ -0,0 +1,63 @@
+import { Card, Steps } from 'antd';
+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';
+
+const { Step } = Steps;
+
+interface StepFormProps {
+  current: StateType['current'];
+}
+
+@connect(({ formStepForm }: { formStepForm: StateType }) => ({
+  current: formStepForm.current,
+}))
+class StepForm extends Component<StepFormProps> {
+  getCurrentStep() {
+    const { current } = this.props;
+    switch (current) {
+      case 'info':
+        return 0;
+      case 'confirm':
+        return 1;
+      case 'result':
+        return 2;
+      default:
+        return 0;
+    }
+  }
+
+  render() {
+    const currentStep = this.getCurrentStep();
+    let stepComponent;
+    if (currentStep === 1) {
+      stepComponent = <Step2 />;
+    } else if (currentStep === 2) {
+      stepComponent = <Step3 />;
+    } else {
+      stepComponent = <Step1 />;
+    }
+    return (
+      <PageHeaderWrapper content="将一个冗长或用户不熟悉的表单任务分成多个步骤，指导用户完成。">
+        <Card bordered={false}>
+          <Fragment>
+            <Steps current={currentStep} className={styles.steps}>
+              <Step title="填写转账信息" />
+              <Step title="确认转账信息" />
+              <Step title="完成" />
+            </Steps>
+            {stepComponent}
+          </Fragment>
+        </Card>
+      </PageHeaderWrapper>
+    );
+  }
+}
+
+export default StepForm;
diff --git a/src/pages/form/step-form/locales/en-US.ts b/src/pages/form/step-form/locales/en-US.ts
new file mode 100644
index 0000000000000000000000000000000000000000..88da20b1b099dff9cc398a75b96012acf79cfc72
--- /dev/null
+++ b/src/pages/form/step-form/locales/en-US.ts
@@ -0,0 +1,62 @@
+export default {
+  'form-step-form.basic.title': 'Basic form',
+  'form-step-form.basic.description':
+    'Form pages are used to collect or verify information to users, and basic forms are common in scenarios where there are fewer data items.',
+
+  'form-step-form.email.required': 'Please enter your email!',
+  'form-step-form.email.wrong-format': 'The email address is in the wrong format!',
+  'form-step-form.userName.required': 'Please enter your userName!',
+  'form-step-form.password.required': 'Please enter your password!',
+  'form-step-form.password.twice': 'The passwords entered twice do not match!',
+  'form-step-form.strength.msg':
+    "Please enter at least 6 characters and don't use passwords that are easy to guess.",
+  'form-step-form.strength.strong': 'Strength: strong',
+  'form-step-form.strength.medium': 'Strength: medium',
+  'form-step-form.strength.short': 'Strength: too short',
+  'form-step-form.confirm-password.required': 'Please confirm your password!',
+  'form-step-form.phone-number.required': 'Please enter your phone number!',
+  'form-step-form.phone-number.wrong-format': 'Malformed phone number!',
+  'form-step-form.verification-code.required': 'Please enter the verification code!',
+  'form-step-form.title.required': 'Please enter a title',
+  'form-step-form.date.required': 'Please select the start and end date',
+  'form-step-form.goal.required': 'Please enter a description of the goal',
+  'form-step-form.standard.required': 'Please enter a metric',
+
+  'form-step-form.form.get-captcha': 'Get Captcha',
+  'form-step-form.captcha.second': 'sec',
+  'form-step-form.form.optional': ' (optional) ',
+  'form-step-form.form.submit': 'Submit',
+  'form-step-form.form.save': 'Save',
+  'form-step-form.email.placeholder': 'Email',
+  'form-step-form.password.placeholder': 'Password',
+  'form-step-form.confirm-password.placeholder': 'Confirm password',
+  'form-step-form.phone-number.placeholder': 'Phone number',
+  'form-step-form.verification-code.placeholder': 'Verification code',
+  'form-step-form.title.label': 'Title',
+  'form-step-form.title.placeholder': 'Give the target a name',
+  'form-step-form.date.label': 'Start and end date',
+  'form-step-form.placeholder.start': 'Start date',
+  'form-step-form.placeholder.end': 'End date',
+  'form-step-form.goal.label': 'Goal description',
+  'form-step-form.goal.placeholder': 'Please enter your work goals',
+  'form-step-form.standard.label': 'Metrics',
+  'form-step-form.standard.placeholder': 'Please enter a metric',
+  'form-step-form.client.label': 'Client',
+  'form-step-form.label.tooltip': 'Target service object',
+  'form-step-form.client.placeholder':
+    'Please describe your customer service, internal customers directly @ Name / job number',
+  'form-step-form.invites.label': 'Inviting critics',
+  'form-step-form.invites.placeholder':
+    'Please direct @ Name / job number, you can invite up to 5 people',
+  'form-step-form.weight.label': 'Weight',
+  'form-step-form.weight.placeholder': 'Please enter weight',
+  'form-step-form.public.label': 'Target disclosure',
+  'form-step-form.label.help': 'Customers and invitees are shared by default',
+  'form-step-form.radio.public': 'Public',
+  'form-step-form.radio.partially-public': 'Partially public',
+  'form-step-form.radio.private': 'Private',
+  'form-step-form.publicUsers.placeholder': 'Open to',
+  'form-step-form.option.A': 'Colleague A',
+  'form-step-form.option.B': 'Colleague B',
+  'form-step-form.option.C': 'Colleague C',
+};
diff --git a/src/pages/form/step-form/locales/pt-BR.ts b/src/pages/form/step-form/locales/pt-BR.ts
new file mode 100644
index 0000000000000000000000000000000000000000..41cc737bd03557a1dd1d457e3eecd1db41bc8450
--- /dev/null
+++ b/src/pages/form/step-form/locales/pt-BR.ts
@@ -0,0 +1,58 @@
+export default {
+  'form-step-form.basic.title': 'Basic form',
+  'form-step-form.basic.description':
+    'Form pages are used to collect or verify information to users, and basic forms are common in scenarios where there are fewer data items.',
+
+  'form-step-form.email.required': 'Por favor insira seu email!',
+  'form-step-form.email.wrong-format': 'O email está errado!',
+  'form-step-form.userName.required': 'Por favor insira nome de usuário!',
+  'form-step-form.password.required': 'Por favor insira sua senha!',
+  'form-step-form.password.twice': 'As senhas não estão iguais!',
+  'form-step-form.strength.msg':
+    'Por favor insira pelo menos 6 caracteres e não use senhas fáceis de adivinhar.',
+  'form-step-form.strength.strong': 'Força: forte',
+  'form-step-form.strength.medium': 'Força: média',
+  'form-step-form.strength.short': 'Força: curta',
+  'form-step-form.confirm-password.required': 'Por favor confirme sua senha!',
+  'form-step-form.phone-number.required': 'Por favor insira seu telefone!',
+  'form-step-form.phone-number.wrong-format': 'Formato de telefone errado!',
+  'form-step-form.verification-code.required': 'Por favor insira seu código de verificação!',
+
+  'form-step-form.form.get-captcha': 'Get Captcha',
+  'form-step-form.captcha.second': 'sec',
+  'form-step-form.email.placeholder': 'Email',
+  'form-step-form.password.placeholder': 'Senha',
+  'form-step-form.confirm-password.placeholder': 'Confirme a senha',
+  'form-step-form.phone-number.placeholder': 'Telefone',
+  'form-step-form.verification-code.placeholder': 'Código de verificação',
+  'form-step-form.form.optional': ' (optional) ',
+  'form-step-form.form.submit': 'Submit',
+  'form-step-form.form.save': 'Save',
+  'form-step-form.title.label': 'Title',
+  'form-step-form.title.placeholder': 'Give the target a name',
+  'form-step-form.date.label': 'Start and end date',
+  'form-step-form.placeholder.start': 'Start date',
+  'form-step-form.placeholder.end': 'End date',
+  'form-step-form.goal.label': 'Goal description',
+  'form-step-form.goal.placeholder': 'Please enter your work goals',
+  'form-step-form.standard.label': 'Metrics',
+  'form-step-form.standard.placeholder': 'Please enter a metric',
+  'form-step-form.client.label': 'Client',
+  'form-step-form.label.tooltip': 'Target service object',
+  'form-step-form.client.placeholder':
+    'Please describe your customer service, internal customers directly @ Name / job number',
+  'form-step-form.invites.label': 'Inviting critics',
+  'form-step-form.invites.placeholder':
+    'Please direct @ Name / job number, you can invite up to 5 people',
+  'form-step-form.weight.label': 'Weight',
+  'form-step-form.weight.placeholder': 'Please enter weight',
+  'form-step-form.public.label': 'Target disclosure',
+  'form-step-form.label.help': 'Customers and invitees are shared by default',
+  'form-step-form.radio.public': 'Public',
+  'form-step-form.radio.partially-public': 'Partially public',
+  'form-step-form.radio.private': 'Private',
+  'form-step-form.publicUsers.placeholder': 'Open to',
+  'form-step-form.option.A': 'Colleague A',
+  'form-step-form.option.B': 'Colleague B',
+  'form-step-form.option.C': 'Colleague C',
+};
diff --git a/src/pages/form/step-form/locales/zh-CN.ts b/src/pages/form/step-form/locales/zh-CN.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5bda0284dbd165307ead03f503e6e1f7c20c05e1
--- /dev/null
+++ b/src/pages/form/step-form/locales/zh-CN.ts
@@ -0,0 +1,59 @@
+export default {
+  'form-step-form.basic.title': '基础表单',
+  'form-step-form.basic.description':
+    '表单页用于向用户收集或验证信息，基础表单常见于数据项较少的表单场景。',
+
+  'form-step-form.email.required': '请输入邮箱地址！',
+  'form-step-form.email.wrong-format': '邮箱地址格式错误！',
+  'form-step-form.userName.required': '请输入用户名!',
+  'form-step-form.password.required': '请输入密码！',
+  'form-step-form.password.twice': '两次输入的密码不匹配!',
+  'form-step-form.strength.msg': '请至少输入 6 个字符。请不要使用容易被猜到的密码。',
+  'form-step-form.strength.strong': '强度：强',
+  'form-step-form.strength.medium': '强度：中',
+  'form-step-form.strength.short': '强度：太短',
+  'form-step-form.confirm-password.required': '请确认密码！',
+  'form-step-form.phone-number.required': '请输入手机号！',
+  'form-step-form.phone-number.wrong-format': '手机号格式错误！',
+  'form-step-form.verification-code.required': '请输入验证码！',
+  'form-step-form.title.required': '请输入标题',
+  'form-step-form.date.required': '请选择起止日期',
+  'form-step-form.goal.required': '请输入目标描述',
+  'form-step-form.standard.required': '请输入衡量标准',
+
+  'form-step-form.form.get-captcha': '获取验证码',
+  'form-step-form.captcha.second': '秒',
+  'form-step-form.form.optional': '（选填）',
+  'form-step-form.form.submit': '提交',
+  'form-step-form.form.save': '保存',
+  'form-step-form.email.placeholder': '邮箱',
+  'form-step-form.password.placeholder': '至少6位密码，区分大小写',
+  'form-step-form.confirm-password.placeholder': '确认密码',
+  'form-step-form.phone-number.placeholder': '手机号',
+  'form-step-form.verification-code.placeholder': '验证码',
+  'form-step-form.title.label': '标题',
+  'form-step-form.title.placeholder': '给目标起个名字',
+  'form-step-form.date.label': '起止日期',
+  'form-step-form.placeholder.start': '开始日期',
+  'form-step-form.placeholder.end': '结束日期',
+  'form-step-form.goal.label': '目标描述',
+  'form-step-form.goal.placeholder': '请输入你的阶段性工作目标',
+  'form-step-form.standard.label': '衡量标准',
+  'form-step-form.standard.placeholder': '请输入衡量标准',
+  'form-step-form.client.label': '客户',
+  'form-step-form.label.tooltip': '目标的服务对象',
+  'form-step-form.client.placeholder': '请描述你服务的客户，内部客户直接 @姓名／工号',
+  'form-step-form.invites.label': '邀评人',
+  'form-step-form.invites.placeholder': '请直接 @姓名／工号，最多可邀请 5 人',
+  'form-step-form.weight.label': '权重',
+  'form-step-form.weight.placeholder': '请输入',
+  'form-step-form.public.label': '目标公开',
+  'form-step-form.label.help': '客户、邀评人默认被分享',
+  'form-step-form.radio.public': '公开',
+  'form-step-form.radio.partially-public': '部分公开',
+  'form-step-form.radio.private': '不公开',
+  'form-step-form.publicUsers.placeholder': '公开给',
+  'form-step-form.option.A': '同事甲',
+  'form-step-form.option.B': '同事乙',
+  'form-step-form.option.C': '同事丙',
+};
diff --git a/src/pages/form/step-form/locales/zh-TW.ts b/src/pages/form/step-form/locales/zh-TW.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e51562715cc8ba3bcc98b79e380a2fed49904469
--- /dev/null
+++ b/src/pages/form/step-form/locales/zh-TW.ts
@@ -0,0 +1,59 @@
+export default {
+  'form-step-form.basic.title': '基礎表單',
+  'form-step-form.basic.description':
+    '表單頁用於向用戶收集或驗證信息，基礎表單常見於數據項較少的表單場景。',
+
+  'form-step-form.email.required': '請輸入郵箱地址！',
+  'form-step-form.email.wrong-format': '郵箱地址格式錯誤！',
+  'form-step-form.userName.required': '請輸入賬戶!',
+  'form-step-form.password.required': '請輸入密碼！',
+  'form-step-form.password.twice': '兩次輸入的密碼不匹配!',
+  'form-step-form.strength.msg': '請至少輸入 6 個字符。請不要使用容易被猜到的密碼。',
+  'form-step-form.strength.strong': '強度：強',
+  'form-step-form.strength.medium': '強度：中',
+  'form-step-form.strength.short': '強度：太短',
+  'form-step-form.confirm-password.required': '請確認密碼！',
+  'form-step-form.phone-number.required': '請輸入手機號！',
+  'form-step-form.phone-number.wrong-format': '手機號格式錯誤！',
+  'form-step-form.verification-code.required': '請輸入驗證碼！',
+  'form-step-form.title.required': '請輸入標題',
+  'form-step-form.date.required': '請選擇起止日期',
+  'form-step-form.goal.required': '請輸入目標描述',
+  'form-step-form.standard.required': '請輸入衡量標淮',
+
+  'form-step-form.form.get-captcha': '獲取驗證碼',
+  'form-step-form.captcha.second': '秒',
+  'form-step-form.form.optional': '（選填）',
+  'form-step-form.form.submit': '提交',
+  'form-step-form.form.save': '保存',
+  'form-step-form.email.placeholder': '郵箱',
+  'form-step-form.password.placeholder': '至少6位密碼，區分大小寫',
+  'form-step-form.confirm-password.placeholder': '確認密碼',
+  'form-step-form.phone-number.placeholder': '手機號',
+  'form-step-form.verification-code.placeholder': '驗證碼',
+  'form-step-form.title.label': '標題',
+  'form-step-form.title.placeholder': '給目標起個名字',
+  'form-step-form.date.label': '起止日期',
+  'form-step-form.placeholder.start': '開始日期',
+  'form-step-form.placeholder.end': '結束日期',
+  'form-step-form.goal.label': '目標描述',
+  'form-step-form.goal.placeholder': '請輸入妳的階段性工作目標',
+  'form-step-form.standard.label': '衡量標淮',
+  'form-step-form.standard.placeholder': '請輸入衡量標淮',
+  'form-step-form.client.label': '客戶',
+  'form-step-form.label.tooltip': '目標的服務對象',
+  'form-step-form.client.placeholder': '請描述妳服務的客戶，內部客戶直接 @姓名／工號',
+  'form-step-form.invites.label': '邀評人',
+  'form-step-form.invites.placeholder': '請直接 @姓名／工號，最多可邀請 5 人',
+  'form-step-form.weight.label': '權重',
+  'form-step-form.weight.placeholder': '請輸入',
+  'form-step-form.public.label': '目標公開',
+  'form-step-form.label.help': '客戶、邀評人默認被分享',
+  'form-step-form.radio.public': '公開',
+  'form-step-form.radio.partially-public': '部分公開',
+  'form-step-form.radio.private': '不公開',
+  'form-step-form.publicUsers.placeholder': '公開給',
+  'form-step-form.option.A': '同事甲',
+  'form-step-form.option.B': '同事乙',
+  'form-step-form.option.C': '同事丙',
+};
diff --git a/src/pages/form/step-form/model.ts b/src/pages/form/step-form/model.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7c65e878a109039757e3ecf5da32620db9d25928
--- /dev/null
+++ b/src/pages/form/step-form/model.ts
@@ -0,0 +1,80 @@
+import { AnyAction, Reducer } from 'redux';
+
+import { EffectsCommandMap } from 'dva';
+import { fakeSubmitForm } from './service';
+
+export interface StateType {
+  current?: string;
+  step?: {
+    payAccount: string;
+    receiverAccount: string;
+    receiverName: string;
+    amount: string;
+  };
+}
+
+export type Effect = (
+  action: AnyAction,
+  effects: EffectsCommandMap & { select: <T>(func: (state: StateType) => T) => T },
+) => void;
+
+export interface ModelType {
+  namespace: string;
+  state: StateType;
+  effects: {
+    submitStepForm: Effect;
+  };
+  reducers: {
+    saveStepFormData: Reducer<StateType>;
+    saveCurrentStep: Reducer<StateType>;
+  };
+}
+
+const Model: ModelType = {
+  namespace: 'formStepForm',
+
+  state: {
+    current: 'info',
+    step: {
+      payAccount: 'ant-design@alipay.com',
+      receiverAccount: 'test@example.com',
+      receiverName: 'Alex',
+      amount: '500',
+    },
+  },
+
+  effects: {
+    *submitStepForm({ payload }, { call, put }) {
+      yield call(fakeSubmitForm, payload);
+      yield put({
+        type: 'saveStepFormData',
+        payload,
+      });
+      yield put({
+        type: 'saveCurrentStep',
+        payload: 'result',
+      });
+    },
+  },
+
+  reducers: {
+    saveCurrentStep(state, { payload }) {
+      return {
+        ...state,
+        current: payload,
+      };
+    },
+
+    saveStepFormData(state, { payload }) {
+      return {
+        ...state,
+        step: {
+          ...(state as StateType).step,
+          ...payload,
+        },
+      };
+    },
+  },
+};
+
+export default Model;
diff --git a/src/pages/form/step-form/service.ts b/src/pages/form/step-form/service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..36024f2bb6b24b5ca7757eda0c6c6d15c98d0d90
--- /dev/null
+++ b/src/pages/form/step-form/service.ts
@@ -0,0 +1,8 @@
+import request from 'umi-request';
+
+export async function fakeSubmitForm(params: any) {
+  return request('/api/forms', {
+    method: 'POST',
+    data: params,
+  });
+}
diff --git a/src/pages/form/step-form/style.less b/src/pages/form/step-form/style.less
new file mode 100644
index 0000000000000000000000000000000000000000..83061335f4e4c5f51a814a831d4cfdde6433ebfa
--- /dev/null
+++ b/src/pages/form/step-form/style.less
@@ -0,0 +1,90 @@
+@import '~antd/es/style/themes/default.less';
+
+.card {
+  margin-bottom: 24px;
+}
+
+.heading {
+  margin: 0 0 16px 0;
+  font-size: 14px;
+  line-height: 22px;
+}
+
+.steps:global(.ant-steps) {
+  max-width: 750px;
+  margin: 16px auto;
+}
+
+.errorIcon {
+  margin-right: 24px;
+  color: @error-color;
+  cursor: pointer;
+  i {
+    margin-right: 4px;
+  }
+}
+
+.errorPopover {
+  :global {
+    .ant-popover-inner-content {
+      min-width: 256px;
+      max-height: 290px;
+      padding: 0;
+      overflow: auto;
+    }
+  }
+}
+
+.errorListItem {
+  padding: 8px 16px;
+  list-style: none;
+  border-bottom: 1px solid @border-color-split;
+  cursor: pointer;
+  transition: all 0.3s;
+  &:hover {
+    background: @primary-1;
+  }
+  &:last-child {
+    border: 0;
+  }
+  .errorIcon {
+    float: left;
+    margin-top: 4px;
+    margin-right: 12px;
+    padding-bottom: 22px;
+    color: @error-color;
+  }
+  .errorField {
+    margin-top: 2px;
+    color: @text-color-secondary;
+    font-size: 12px;
+  }
+}
+
+.editable {
+  td {
+    padding-top: 13px !important;
+    padding-bottom: 12.5px !important;
+  }
+}
+
+// custom footer for fixed footer toolbar
+.advancedForm + div {
+  padding-bottom: 64px;
+}
+
+.advancedForm {
+  :global {
+    .ant-form .ant-row:last-child .ant-form-item {
+      margin-bottom: 24px;
+    }
+    .ant-table td {
+      transition: none !important;
+    }
+  }
+}
+
+.optional {
+  color: @text-color-secondary;
+  font-style: normal;
+}
diff --git a/src/pages/list/basic-list/Result/index.less b/src/pages/list/basic-list/Result/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..8f32788f0f55dcd73f963c2ab8ba193aa63ceb29
--- /dev/null
+++ b/src/pages/list/basic-list/Result/index.less
@@ -0,0 +1,58 @@
+@import '~antd/es/style/themes/default.less';
+
+.result {
+  width: 72%;
+  margin: 0 auto;
+  text-align: center;
+  @media screen and (max-width: @screen-xs) {
+    width: 100%;
+  }
+
+  .icon {
+    margin-bottom: 24px;
+    font-size: 72px;
+    line-height: 72px;
+
+    & > .success {
+      color: @success-color;
+    }
+
+    & > .error {
+      color: @error-color;
+    }
+  }
+
+  .title {
+    margin-bottom: 16px;
+    color: @heading-color;
+    font-weight: 500;
+    font-size: 24px;
+    line-height: 32px;
+  }
+
+  .description {
+    margin-bottom: 24px;
+    color: @text-color-secondary;
+    font-size: 14px;
+    line-height: 22px;
+  }
+
+  .extra {
+    padding: 24px 40px;
+    text-align: left;
+    background: @component-background;
+    border-radius: @border-radius-sm;
+
+    @media screen and (max-width: @screen-xs) {
+      padding: 18px 20px;
+    }
+  }
+
+  .actions {
+    margin-top: 32px;
+
+    button:not(:last-child) {
+      margin-right: 8px;
+    }
+  }
+}
diff --git a/src/pages/list/basic-list/Result/index.tsx b/src/pages/list/basic-list/Result/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..8c8ea1e4bc38983144625451a2508c329a0e2098
--- /dev/null
+++ b/src/pages/list/basic-list/Result/index.tsx
@@ -0,0 +1,41 @@
+import { Icon } from 'antd';
+import React from 'react';
+import classNames from 'classnames';
+import styles from './index.less';
+
+export interface ResultProps {
+  actions?: React.ReactNode;
+  className?: string;
+  description?: React.ReactNode;
+  extra?: React.ReactNode;
+  style?: React.CSSProperties;
+  title?: React.ReactNode;
+  type: 'success' | 'error';
+}
+
+const Result: React.SFC<ResultProps> = ({
+  className,
+  type,
+  title,
+  description,
+  extra,
+  actions,
+  ...restProps
+}) => {
+  const iconMap = {
+    error: <Icon className={styles.error} type="close-circle" theme="filled" />,
+    success: <Icon className={styles.success} type="check-circle" theme="filled" />,
+  };
+  const clsString = classNames(styles.result, className);
+  return (
+    <div className={clsString} {...restProps}>
+      <div className={styles.icon}>{iconMap[type]}</div>
+      <div className={styles.title}>{title}</div>
+      {description && <div className={styles.description}>{description}</div>}
+      {extra && <div className={styles.extra}>{extra}</div>}
+      {actions && <div className={styles.actions}>{actions}</div>}
+    </div>
+  );
+};
+
+export default Result;
diff --git a/src/pages/list/basic-list/_mock.ts b/src/pages/list/basic-list/_mock.ts
new file mode 100644
index 0000000000000000000000000000000000000000..374f17d1de7c128822688b5b9382ed0373246bf5
--- /dev/null
+++ b/src/pages/list/basic-list/_mock.ts
@@ -0,0 +1,150 @@
+import { BasicListItemDataType } from './data.d';
+
+const titles = [
+  'Alipay',
+  'Angular',
+  'Ant Design',
+  'Ant Design Pro',
+  'Bootstrap',
+  'React',
+  'Vue',
+  'Webpack',
+];
+const avatars = [
+  'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png', // Alipay
+  'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png', // Angular
+  'https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png', // Ant Design
+  'https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png', // Ant Design Pro
+  'https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png', // Bootstrap
+  'https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png', // React
+  'https://gw.alipayobjects.com/zos/rmsportal/ComBAopevLwENQdKWiIn.png', // Vue
+  'https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlMTCEe.png', // Webpack
+];
+
+const covers = [
+  'https://gw.alipayobjects.com/zos/rmsportal/uMfMFlvUuceEyPpotzlq.png',
+  'https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png',
+  'https://gw.alipayobjects.com/zos/rmsportal/iXjVmWVHbCJAyqvDxdtx.png',
+  'https://gw.alipayobjects.com/zos/rmsportal/gLaIAoVWTtLbBWZNYEMg.png',
+];
+const desc = [
+  '那是一种内在的东西， 他们到达不了，也无法触及的',
+  '希望是一个好东西，也许是最好的，好东西是不会消亡的',
+  '生命就像一盒巧克力，结果往往出人意料',
+  '城镇中有那么多的酒馆，她却偏偏走进了我的酒馆',
+  '那时候我只会想自己想要什么，从不想自己拥有什么',
+];
+
+const user = [
+  '付小小',
+  '曲丽丽',
+  '林东东',
+  '周星星',
+  '吴加好',
+  '朱偏右',
+  '鱼酱',
+  '乐哥',
+  '谭小仪',
+  '仲尼',
+];
+
+function fakeList(count: number): BasicListItemDataType[] {
+  const list = [];
+  for (let i = 0; i < count; i += 1) {
+    list.push({
+      id: `fake-list-${i}`,
+      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)],
+      status: ['active', 'exception', 'normal'][i % 3] as
+        | 'normal'
+        | 'exception'
+        | 'active'
+        | 'success',
+      percent: Math.ceil(Math.random() * 50) + 50,
+      logo: avatars[i % 8],
+      href: 'https://ant.design',
+      updatedAt: new Date(new Date().getTime() - 1000 * 60 * 60 * 2 * i).getTime(),
+      createdAt: new Date(new Date().getTime() - 1000 * 60 * 60 * 2 * i).getTime(),
+      subDescription: desc[i % 5],
+      description:
+        '在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的组件会被抽离成一套标准规范。',
+      activeUser: Math.ceil(Math.random() * 100000) + 100000,
+      newUser: Math.ceil(Math.random() * 1000) + 1000,
+      star: Math.ceil(Math.random() * 100) + 100,
+      like: Math.ceil(Math.random() * 100) + 100,
+      message: Math.ceil(Math.random() * 10) + 10,
+      content:
+        '段落示意：蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。',
+      members: [
+        {
+          avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png',
+          name: '曲丽丽',
+          id: 'member1',
+        },
+        {
+          avatar: 'https://gw.alipayobjects.com/zos/rmsportal/tBOxZPlITHqwlGjsJWaF.png',
+          name: '王昭君',
+          id: 'member2',
+        },
+        {
+          avatar: 'https://gw.alipayobjects.com/zos/rmsportal/sBxjgqiuHMGRkIjqlQCd.png',
+          name: '董娜娜',
+          id: 'member3',
+        },
+      ],
+    });
+  }
+
+  return list;
+}
+
+let sourceData: BasicListItemDataType[] = [];
+
+function getFakeList(req: { query: any }, res: { json: (arg0: BasicListItemDataType[]) => void }) {
+  const params = req.query;
+
+  const count = params.count * 1 || 20;
+
+  const result = fakeList(count);
+  sourceData = result;
+  return res.json(result);
+}
+
+function postFakeList(req: { body: any }, res: { json: (arg0: BasicListItemDataType[]) => void }) {
+  const { /* url = '', */ body } = req;
+  // const params = getUrlParams(url);
+  const { method, id } = body;
+  // const count = (params.count * 1) || 20;
+  let result = sourceData || [];
+
+  switch (method) {
+    case 'delete':
+      result = result.filter(item => item.id !== id);
+      break;
+    case 'update':
+      result.forEach((item, i) => {
+        if (item.id === id) {
+          result[i] = { ...item, ...body };
+        }
+      });
+      break;
+    case 'post':
+      result.unshift({
+        ...body,
+        id: `fake-list-${result.length}`,
+        createdAt: new Date().getTime(),
+      });
+      break;
+    default:
+      break;
+  }
+
+  return res.json(result);
+}
+
+export default {
+  'GET  /api/fake_list': getFakeList,
+  'POST  /api/fake_list': postFakeList,
+};
diff --git a/src/pages/list/basic-list/data.d.ts b/src/pages/list/basic-list/data.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9796369f880bbd79449c0f6b89c5f0d5b2388c3b
--- /dev/null
+++ b/src/pages/list/basic-list/data.d.ts
@@ -0,0 +1,29 @@
+export interface Member {
+  avatar: string;
+  name: string;
+  id: string;
+}
+
+export interface BasicListItemDataType {
+  id: string;
+  owner: string;
+  title: string;
+  avatar: string;
+  cover: string;
+  status: 'normal' | 'exception' | 'active' | 'success';
+  percent: number;
+  logo: string;
+  href: string;
+  body?: any;
+  updatedAt: number;
+  createdAt: number;
+  subDescription: string;
+  description: string;
+  activeUser: number;
+  newUser: number;
+  star: number;
+  like: number;
+  message: number;
+  content: string;
+  members: Member[];
+}
diff --git a/src/pages/list/basic-list/index.tsx b/src/pages/list/basic-list/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..69c33613d2f6f10dcaaca9c299db05ba87ae1fa1
--- /dev/null
+++ b/src/pages/list/basic-list/index.tsx
@@ -0,0 +1,381 @@
+import {
+  Avatar,
+  Button,
+  Card,
+  Col,
+  DatePicker,
+  Dropdown,
+  Form,
+  Icon,
+  Input,
+  List,
+  Menu,
+  Modal,
+  Progress,
+  Radio,
+  Row,
+  Select,
+} 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 { 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;
+const RadioButton = Radio.Button;
+const RadioGroup = Radio.Group;
+const SelectOption = Select.Option;
+const { Search, TextArea } = Input;
+
+interface BasicListProps extends FormComponentProps {
+  listBasicList: StateType;
+  dispatch: Dispatch<any>;
+  loading: boolean;
+}
+interface BasicListState {
+  visible: boolean;
+  done: boolean;
+  current?: Partial<BasicListItemDataType>;
+}
+@connect(
+  ({
+    listBasicList,
+    loading,
+  }: {
+    listBasicList: StateType;
+    loading: {
+      models: { [key: string]: boolean };
+    };
+  }) => ({
+    listBasicList,
+    loading: loading.models.listBasicList,
+  }),
+)
+class BasicList extends Component<
+  BasicListProps,
+  BasicListState
+> {
+  state: BasicListState = { visible: false, done: false, current: undefined };
+
+  formLayout = {
+    labelCol: { span: 7 },
+    wrapperCol: { span: 13 },
+  };
+
+  addBtn: HTMLButtonElement | undefined | null = undefined;
+
+  componentDidMount() {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'listBasicList/fetch',
+      payload: {
+        count: 5,
+      },
+    });
+  }
+
+  showModal = () => {
+    this.setState({
+      visible: true,
+      current: undefined,
+    });
+  };
+
+  showEditModal = (item: BasicListItemDataType) => {
+    this.setState({
+      visible: true,
+      current: item,
+    });
+  };
+
+  handleDone = () => {
+    setTimeout(() => this.addBtn && this.addBtn.blur(), 0);
+    this.setState({
+      done: false,
+      visible: false,
+    });
+  };
+
+  handleCancel = () => {
+    setTimeout(() => this.addBtn && this.addBtn.blur(), 0);
+    this.setState({
+      visible: false,
+    });
+  };
+
+  handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    const { dispatch, form } = this.props;
+    const { current } = this.state;
+    const id = current ? current.id : '';
+
+    setTimeout(() => this.addBtn && this.addBtn.blur(), 0);
+    form.validateFields((err: string | undefined, fieldsValue: BasicListItemDataType) => {
+      if (err) return;
+      this.setState({
+        done: true,
+      });
+      dispatch({
+        type: 'listBasicList/submit',
+        payload: { id, ...fieldsValue },
+      });
+    });
+  };
+
+  deleteItem = (id: string) => {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'listBasicList/submit',
+      payload: { id },
+    });
+  };
+
+  render() {
+    const {
+      listBasicList: { list },
+      loading,
+    } = this.props;
+    const {
+      form: { getFieldDecorator },
+    } = this.props;
+
+    const { visible, done, current = {} } = this.state;
+
+    const editAndDelete = (key: string, currentItem: BasicListItemDataType) => {
+      if (key === 'edit') this.showEditModal(currentItem);
+      else if (key === 'delete') {
+        Modal.confirm({
+          title: '删除任务',
+          content: '确定删除该任务吗？',
+          okText: '确认',
+          cancelText: '取消',
+          onOk: () => this.deleteItem(currentItem.id),
+        });
+      }
+    };
+
+    const modalFooter = done
+      ? { footer: null, onCancel: this.handleDone }
+      : { okText: '保存', onOk: this.handleSubmit, onCancel: this.handleCancel };
+
+    const Info: React.SFC<{
+      title: React.ReactNode;
+      value: React.ReactNode;
+      bordered?: boolean;
+    }> = ({ title, value, bordered }) => (
+      <div className={styles.headerInfo}>
+        <span>{title}</span>
+        <p>{value}</p>
+        {bordered && <em />}
+      </div>
+    );
+
+    const extraContent = (
+      <div className={styles.extraContent}>
+        <RadioGroup defaultValue="all">
+          <RadioButton value="all">全部</RadioButton>
+          <RadioButton value="progress">进行中</RadioButton>
+          <RadioButton value="waiting">等待中</RadioButton>
+        </RadioGroup>
+        <Search className={styles.extraContentSearch} placeholder="请输入" onSearch={() => ({})} />
+      </div>
+    );
+
+    const paginationProps = {
+      showSizeChanger: true,
+      showQuickJumper: true,
+      pageSize: 5,
+      total: 50,
+    };
+
+    const ListContent = ({
+      data: { owner, createdAt, percent, status },
+    }: {
+      data: BasicListItemDataType;
+    }) => (
+      <div className={styles.listContent}>
+        <div className={styles.listContentItem}>
+          <span>Owner</span>
+          <p>{owner}</p>
+        </div>
+        <div className={styles.listContentItem}>
+          <span>开始时间</span>
+          <p>{moment(createdAt).format('YYYY-MM-DD HH:mm')}</p>
+        </div>
+        <div className={styles.listContentItem}>
+          <Progress percent={percent} status={status} strokeWidth={6} style={{ width: 180 }} />
+        </div>
+      </div>
+    );
+
+    const MoreBtn: React.SFC<{
+      item: BasicListItemDataType;
+    }> = ({ item }) => (
+      <Dropdown
+        overlay={
+          <Menu onClick={({ key }) => editAndDelete(key, item)}>
+            <Menu.Item key="edit">编辑</Menu.Item>
+            <Menu.Item key="delete">删除</Menu.Item>
+          </Menu>
+        }
+      >
+        <a>
+          更多 <Icon type="down" />
+        </a>
+      </Dropdown>
+    );
+
+    const getModalContent = () => {
+      if (done) {
+        return (
+          <Result
+            type="success"
+            title="操作成功"
+            description="一系列的信息描述，很短同样也可以带标点。"
+            actions={
+              <Button type="primary" onClick={this.handleDone}>
+                知道了
+              </Button>
+            }
+            className={styles.formResult}
+          />
+        );
+      }
+      return (
+        <Form onSubmit={this.handleSubmit}>
+          <FormItem label="任务名称" {...this.formLayout}>
+            {getFieldDecorator('title', {
+              rules: [{ required: true, message: '请输入任务名称' }],
+              initialValue: current.title,
+            })(<Input placeholder="请输入" />)}
+          </FormItem>
+          <FormItem label="开始时间" {...this.formLayout}>
+            {getFieldDecorator('createdAt', {
+              rules: [{ required: true, message: '请选择开始时间' }],
+              initialValue: current.createdAt ? moment(current.createdAt) : null,
+            })(
+              <DatePicker
+                showTime
+                placeholder="请选择"
+                format="YYYY-MM-DD HH:mm:ss"
+                style={{ width: '100%' }}
+              />,
+            )}
+          </FormItem>
+          <FormItem label="任务负责人" {...this.formLayout}>
+            {getFieldDecorator('owner', {
+              rules: [{ required: true, message: '请选择任务负责人' }],
+              initialValue: current.owner,
+            })(
+              <Select placeholder="请选择">
+                <SelectOption value="付晓晓">付晓晓</SelectOption>
+                <SelectOption value="周毛毛">周毛毛</SelectOption>
+              </Select>,
+            )}
+          </FormItem>
+          <FormItem {...this.formLayout} label="产品描述">
+            {getFieldDecorator('subDescription', {
+              rules: [{ message: '请输入至少五个字符的产品描述！', min: 5 }],
+              initialValue: current.subDescription,
+            })(<TextArea rows={4} placeholder="请输入至少五个字符" />)}
+          </FormItem>
+        </Form>
+      );
+    };
+    return (
+      <>
+        <PageHeaderWrapper>
+          <div className={styles.standardList}>
+            <Card bordered={false}>
+              <Row>
+                <Col sm={8} xs={24}>
+                  <Info title="我的待办" value="8个任务" bordered />
+                </Col>
+                <Col sm={8} xs={24}>
+                  <Info title="本周任务平均处理时间" value="32分钟" bordered />
+                </Col>
+                <Col sm={8} xs={24}>
+                  <Info title="本周完成任务数" value="24个任务" />
+                </Col>
+              </Row>
+            </Card>
+
+            <Card
+              className={styles.listCard}
+              bordered={false}
+              title="基本列表"
+              style={{ marginTop: 24 }}
+              bodyStyle={{ padding: '0 32px 40px 32px' }}
+              extra={extraContent}
+            >
+              <Button
+                type="dashed"
+                style={{ width: '100%', marginBottom: 8 }}
+                icon="plus"
+                onClick={this.showModal}
+                ref={component => {
+                  // eslint-disable-next-line  react/no-find-dom-node
+                  this.addBtn = findDOMNode(component) as HTMLButtonElement;
+                }}
+              >
+                添加
+              </Button>
+              <List
+                size="large"
+                rowKey="id"
+                loading={loading}
+                pagination={paginationProps}
+                dataSource={list}
+                renderItem={item => (
+                  <List.Item
+                    actions={[
+                      <a
+                        key="edit"
+                        onClick={e => {
+                          e.preventDefault();
+                          this.showEditModal(item);
+                        }}
+                      >
+                        编辑
+                      </a>,
+                      <MoreBtn key="more" item={item} />,
+                    ]}
+                  >
+                    <List.Item.Meta
+                      avatar={<Avatar src={item.logo} shape="square" size="large" />}
+                      title={<a href={item.href}>{item.title}</a>}
+                      description={item.subDescription}
+                    />
+                    <ListContent data={item} />
+                  </List.Item>
+                )}
+              />
+            </Card>
+          </div>
+        </PageHeaderWrapper>
+
+        <Modal
+          title={done ? null : `任务${current ? '编辑' : '添加'}`}
+          className={styles.standardListForm}
+          width={640}
+          bodyStyle={done ? { padding: '72px 0' } : { padding: '28px 0 0' }}
+          destroyOnClose
+          visible={visible}
+          {...modalFooter}
+        >
+          {getModalContent()}
+        </Modal>
+      </>
+    );
+  }
+}
+
+export default Form.create<BasicListProps>()(BasicList);
diff --git a/src/pages/list/basic-list/model.ts b/src/pages/list/basic-list/model.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a7067710d665caa672b7878e1e458aea35202b6f
--- /dev/null
+++ b/src/pages/list/basic-list/model.ts
@@ -0,0 +1,83 @@
+import { AnyAction, Reducer } from 'redux';
+import { EffectsCommandMap } from 'dva';
+import { addFakeList, queryFakeList, removeFakeList, updateFakeList } from './service';
+
+import { BasicListItemDataType } from './data.d';
+
+export interface StateType {
+  list: BasicListItemDataType[];
+}
+
+export type Effect = (
+  action: AnyAction,
+  effects: EffectsCommandMap & { select: <T>(func: (state: StateType) => T) => T },
+) => void;
+
+export interface ModelType {
+  namespace: string;
+  state: StateType;
+  effects: {
+    fetch: Effect;
+    appendFetch: Effect;
+    submit: Effect;
+  };
+  reducers: {
+    queryList: Reducer<StateType>;
+    appendList: Reducer<StateType>;
+  };
+}
+
+const Model: ModelType = {
+  namespace: 'listBasicList',
+
+  state: {
+    list: [],
+  },
+
+  effects: {
+    *fetch({ payload }, { call, put }) {
+      const response = yield call(queryFakeList, payload);
+      yield put({
+        type: 'queryList',
+        payload: Array.isArray(response) ? response : [],
+      });
+    },
+    *appendFetch({ payload }, { call, put }) {
+      const response = yield call(queryFakeList, payload);
+      yield put({
+        type: 'appendList',
+        payload: Array.isArray(response) ? response : [],
+      });
+    },
+    *submit({ payload }, { call, put }) {
+      let callback;
+      if (payload.id) {
+        callback = Object.keys(payload).length === 1 ? removeFakeList : updateFakeList;
+      } else {
+        callback = addFakeList;
+      }
+      const response = yield call(callback, payload); // post
+      yield put({
+        type: 'queryList',
+        payload: response,
+      });
+    },
+  },
+
+  reducers: {
+    queryList(state, action) {
+      return {
+        ...state,
+        list: action.payload,
+      };
+    },
+    appendList(state = { list: [] }, action) {
+      return {
+        ...state,
+        list: state.list.concat(action.payload),
+      };
+    },
+  },
+};
+
+export default Model;
diff --git a/src/pages/list/basic-list/service.ts b/src/pages/list/basic-list/service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..38001c9cd2f54986bc3bf4bd735258023504ce9f
--- /dev/null
+++ b/src/pages/list/basic-list/service.ts
@@ -0,0 +1,54 @@
+import request from 'umi-request';
+import { BasicListItemDataType } from './data.d';
+
+interface ParamsType extends Partial<BasicListItemDataType> {
+  count?: number;
+}
+
+export async function queryFakeList(params: ParamsType) {
+  return request('/api/fake_list', {
+    params,
+  });
+}
+
+export async function removeFakeList(params: ParamsType) {
+  const { count = 5, ...restParams } = params;
+  return request('/api/fake_list', {
+    method: 'POST',
+    params: {
+      count,
+    },
+    data: {
+      ...restParams,
+      method: 'delete',
+    },
+  });
+}
+
+export async function addFakeList(params: ParamsType) {
+  const { count = 5, ...restParams } = params;
+  return request('/api/fake_list', {
+    method: 'POST',
+    params: {
+      count,
+    },
+    data: {
+      ...restParams,
+      method: 'post',
+    },
+  });
+}
+
+export async function updateFakeList(params: ParamsType) {
+  const { count = 5, ...restParams } = params;
+  return request('/api/fake_list', {
+    method: 'POST',
+    params: {
+      count,
+    },
+    data: {
+      ...restParams,
+      method: 'update',
+    },
+  });
+}
diff --git a/src/pages/list/basic-list/style.less b/src/pages/list/basic-list/style.less
new file mode 100644
index 0000000000000000000000000000000000000000..2d3a58cc8064ff627a6f3f3c77a0fac56a2f9527
--- /dev/null
+++ b/src/pages/list/basic-list/style.less
@@ -0,0 +1,195 @@
+@import '~antd/es/style/themes/default.less';
+@import './utils/utils.less';
+
+.standardList {
+  :global {
+    .ant-card-head {
+      border-bottom: none;
+    }
+    .ant-card-head-title {
+      padding: 24px 0;
+      line-height: 32px;
+    }
+    .ant-card-extra {
+      padding: 24px 0;
+    }
+    .ant-list-pagination {
+      margin-top: 24px;
+      text-align: right;
+    }
+    .ant-avatar-lg {
+      width: 48px;
+      height: 48px;
+      line-height: 48px;
+    }
+  }
+  .headerInfo {
+    position: relative;
+    text-align: center;
+    & > span {
+      display: inline-block;
+      margin-bottom: 4px;
+      color: @text-color-secondary;
+      font-size: @font-size-base;
+      line-height: 22px;
+    }
+    & > p {
+      margin: 0;
+      color: @heading-color;
+      font-size: 24px;
+      line-height: 32px;
+    }
+    & > em {
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 1px;
+      height: 56px;
+      background-color: @border-color-split;
+    }
+  }
+  .listContent {
+    font-size: 0;
+    .listContentItem {
+      display: inline-block;
+      margin-left: 40px;
+      color: @text-color-secondary;
+      font-size: @font-size-base;
+      vertical-align: middle;
+      > span {
+        line-height: 20px;
+      }
+      > p {
+        margin-top: 4px;
+        margin-bottom: 0;
+        line-height: 22px;
+      }
+    }
+  }
+  .extraContentSearch {
+    width: 272px;
+    margin-left: 16px;
+  }
+}
+
+@media screen and (max-width: @screen-xs) {
+  .standardList {
+    :global {
+      .ant-list-item-content {
+        display: block;
+        flex: none;
+        width: 100%;
+      }
+      .ant-list-item-action {
+        margin-left: 0;
+      }
+    }
+    .listContent {
+      margin-left: 0;
+      & > div {
+        margin-left: 0;
+      }
+    }
+    .listCard {
+      :global {
+        .ant-card-head-title {
+          overflow: visible;
+        }
+      }
+    }
+  }
+}
+
+@media screen and (max-width: @screen-sm) {
+  .standardList {
+    .extraContentSearch {
+      width: 100%;
+      margin-left: 0;
+    }
+    .headerInfo {
+      margin-bottom: 16px;
+      & > em {
+        display: none;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: @screen-md) {
+  .standardList {
+    .listContent {
+      & > div {
+        display: block;
+      }
+      & > div:last-child {
+        top: 0;
+        width: 100%;
+      }
+    }
+  }
+  .listCard {
+    :global {
+      .ant-radio-group {
+        display: block;
+        margin-bottom: 8px;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: @screen-lg) and (min-width: @screen-md) {
+  .standardList {
+    .listContent {
+      & > div {
+        display: block;
+      }
+      & > div:last-child {
+        top: 0;
+        width: 100%;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: @screen-xl) {
+  .standardList {
+    .listContent {
+      & > div {
+        margin-left: 24px;
+      }
+      & > div:last-child {
+        top: 0;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 1400px) {
+  .standardList {
+    .listContent {
+      text-align: right;
+      & > div:last-child {
+        top: 0;
+      }
+    }
+  }
+}
+
+.standardListForm {
+  :global {
+    .ant-form-item {
+      margin-bottom: 12px;
+      &:last-child {
+        margin-bottom: 32px;
+        padding-top: 4px;
+      }
+    }
+  }
+}
+
+.formResult {
+  width: 100%;
+  [class^='title'] {
+    margin-bottom: 8px;
+  }
+}
diff --git a/src/pages/list/basic-list/utils/utils.less b/src/pages/list/basic-list/utils/utils.less
new file mode 100644
index 0000000000000000000000000000000000000000..de1aa64222b6f14328d3a9e3c262ac5a31cce5af
--- /dev/null
+++ b/src/pages/list/basic-list/utils/utils.less
@@ -0,0 +1,50 @@
+.textOverflow() {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  word-break: break-all;
+}
+
+.textOverflowMulti(@line: 3, @bg: #fff) {
+  position: relative;
+  max-height: @line * 1.5em;
+  margin-right: -1em;
+  padding-right: 1em;
+  overflow: hidden;
+  line-height: 1.5em;
+  text-align: justify;
+  &::before {
+    position: absolute;
+    right: 14px;
+    bottom: 0;
+    padding: 0 1px;
+    background: @bg;
+    content: '...';
+  }
+  &::after {
+    position: absolute;
+    right: 14px;
+    width: 1em;
+    height: 1em;
+    margin-top: 0.2em;
+    background: white;
+    content: '';
+  }
+}
+
+// mixins for clearfix
+// ------------------------
+.clearfix() {
+  zoom: 1;
+  &::before,
+  &::after {
+    display: table;
+    content: ' ';
+  }
+  &::after {
+    clear: both;
+    height: 0;
+    font-size: 0;
+    visibility: hidden;
+  }
+}
diff --git a/src/pages/list/card-list/_mock.ts b/src/pages/list/card-list/_mock.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5e732aa01ff62c27e1e3818b845cf95408456411
--- /dev/null
+++ b/src/pages/list/card-list/_mock.ts
@@ -0,0 +1,114 @@
+import { CardListItemDataType } from './data.d';
+
+const titles = [
+  'Alipay',
+  'Angular',
+  'Ant Design',
+  'Ant Design Pro',
+  'Bootstrap',
+  'React',
+  'Vue',
+  'Webpack',
+];
+const avatars = [
+  'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png', // Alipay
+  'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png', // Angular
+  'https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png', // Ant Design
+  'https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png', // Ant Design Pro
+  'https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png', // Bootstrap
+  'https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png', // React
+  'https://gw.alipayobjects.com/zos/rmsportal/ComBAopevLwENQdKWiIn.png', // Vue
+  'https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlMTCEe.png', // Webpack
+];
+
+const covers = [
+  'https://gw.alipayobjects.com/zos/rmsportal/uMfMFlvUuceEyPpotzlq.png',
+  'https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png',
+  'https://gw.alipayobjects.com/zos/rmsportal/iXjVmWVHbCJAyqvDxdtx.png',
+  'https://gw.alipayobjects.com/zos/rmsportal/gLaIAoVWTtLbBWZNYEMg.png',
+];
+const desc = [
+  '那是一种内在的东西， 他们到达不了，也无法触及的',
+  '希望是一个好东西，也许是最好的，好东西是不会消亡的',
+  '生命就像一盒巧克力，结果往往出人意料',
+  '城镇中有那么多的酒馆，她却偏偏走进了我的酒馆',
+  '那时候我只会想自己想要什么，从不想自己拥有什么',
+];
+
+const user = [
+  '付小小',
+  '曲丽丽',
+  '林东东',
+  '周星星',
+  '吴加好',
+  '朱偏右',
+  '鱼酱',
+  '乐哥',
+  '谭小仪',
+  '仲尼',
+];
+
+function fakeList(count: number): CardListItemDataType[] {
+  const list = [];
+  for (let i = 0; i < count; i += 1) {
+    list.push({
+      id: `fake-list-${i}`,
+      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)],
+      status: ['active', 'exception', 'normal'][i % 3] as
+        | 'normal'
+        | 'exception'
+        | 'active'
+        | 'success',
+      percent: Math.ceil(Math.random() * 50) + 50,
+      logo: avatars[i % 8],
+      href: 'https://ant.design',
+      updatedAt: new Date(new Date().getTime() - 1000 * 60 * 60 * 2 * i).getTime(),
+      createdAt: new Date(new Date().getTime() - 1000 * 60 * 60 * 2 * i).getTime(),
+      subDescription: desc[i % 5],
+      description:
+        '在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的组件会被抽离成一套标准规范。',
+      activeUser: Math.ceil(Math.random() * 100000) + 100000,
+      newUser: Math.ceil(Math.random() * 1000) + 1000,
+      star: Math.ceil(Math.random() * 100) + 100,
+      like: Math.ceil(Math.random() * 100) + 100,
+      message: Math.ceil(Math.random() * 10) + 10,
+      content:
+        '段落示意：蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。',
+      members: [
+        {
+          avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png',
+          name: '曲丽丽',
+          id: 'member1',
+        },
+        {
+          avatar: 'https://gw.alipayobjects.com/zos/rmsportal/tBOxZPlITHqwlGjsJWaF.png',
+          name: '王昭君',
+          id: 'member2',
+        },
+        {
+          avatar: 'https://gw.alipayobjects.com/zos/rmsportal/sBxjgqiuHMGRkIjqlQCd.png',
+          name: '董娜娜',
+          id: 'member3',
+        },
+      ],
+    });
+  }
+
+  return list;
+}
+
+function getFakeList(req: { query: any }, res: { json: (arg0: CardListItemDataType[]) => void }) {
+  const params = req.query;
+
+  const count = params.count * 1 || 20;
+
+  const result = fakeList(count);
+  return res.json(result);
+}
+
+export default {
+  'GET  /api/fake_list': getFakeList,
+};
diff --git a/src/pages/list/card-list/data.d.ts b/src/pages/list/card-list/data.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..35fbca30db1bd8a5eb119879a8a453d2770b3ccf
--- /dev/null
+++ b/src/pages/list/card-list/data.d.ts
@@ -0,0 +1,29 @@
+export interface Member {
+  avatar: string;
+  name: string;
+  id: string;
+}
+
+export interface CardListItemDataType {
+  id: string;
+  owner: string;
+  title: string;
+  avatar: string;
+  cover: string;
+  status: 'normal' | 'exception' | 'active' | 'success';
+  percent: number;
+  logo: string;
+  href: string;
+  body?: any;
+  updatedAt: number;
+  createdAt: number;
+  subDescription: string;
+  description: string;
+  activeUser: number;
+  newUser: number;
+  star: number;
+  like: number;
+  message: number;
+  content: string;
+  members: Member[];
+}
diff --git a/src/pages/list/card-list/index.tsx b/src/pages/list/card-list/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..6a39333ff3deb42d90f4d27ec9657f4db15d3da0
--- /dev/null
+++ b/src/pages/list/card-list/index.tsx
@@ -0,0 +1,135 @@
+import { Button, Card, Icon, List, Typography } from 'antd';
+import React, { Component } from 'react';
+
+import { Dispatch } from 'redux';
+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;
+
+interface CardListProps {
+  listCardList: StateType;
+  dispatch: Dispatch<any>;
+  loading: boolean;
+}
+interface CardListState {
+  visible: boolean;
+  done: boolean;
+  current?: Partial<CardListItemDataType>;
+}
+
+@connect(
+  ({
+    listCardList,
+    loading,
+  }: {
+    listCardList: StateType;
+    loading: {
+      models: { [key: string]: boolean };
+    };
+  }) => ({
+    listCardList,
+    loading: loading.models.list,
+  }),
+)
+class CardList extends Component<
+  CardListProps,
+  CardListState
+> {
+  componentDidMount() {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'listCardList/fetch',
+      payload: {
+        count: 8,
+      },
+    });
+  }
+
+  render() {
+    const {
+      listCardList: { list },
+      loading,
+    } = this.props;
+
+    const content = (
+      <div className={styles.pageHeaderContent}>
+        <p>
+          段落示意：蚂蚁金服务设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，
+          提供跨越设计与开发的体验解决方案。
+        </p>
+        <div className={styles.contentLink}>
+          <a>
+            <img alt="" src="https://gw.alipayobjects.com/zos/rmsportal/MjEImQtenlyueSmVEfUD.svg" />{' '}
+            快速开始
+          </a>
+          <a>
+            <img alt="" src="https://gw.alipayobjects.com/zos/rmsportal/NbuDUAuBlIApFuDvWiND.svg" />{' '}
+            产品简介
+          </a>
+          <a>
+            <img alt="" src="https://gw.alipayobjects.com/zos/rmsportal/ohOEPSYdDTNnyMbGuyLb.svg" />{' '}
+            产品文档
+          </a>
+        </div>
+      </div>
+    );
+
+    const extraContent = (
+      <div className={styles.extraImg}>
+        <img
+          alt="这是一个标题"
+          src="https://gw.alipayobjects.com/zos/rmsportal/RzwpdLnhmvDJToTdfDPe.png"
+        />
+      </div>
+    );
+    const nullData: Partial<CardListItemDataType> = {};
+    return (
+      <PageHeaderWrapper content={content} extraContent={extraContent}>
+        <div className={styles.cardList}>
+          <List<Partial<CardListItemDataType>>
+            rowKey="id"
+            loading={loading}
+            grid={{ gutter: 24, lg: 3, md: 2, sm: 1, xs: 1 }}
+            dataSource={[nullData, ...list]}
+            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>
+    );
+  }
+}
+
+export default CardList;
diff --git a/src/pages/list/card-list/model.ts b/src/pages/list/card-list/model.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2c19d1514d11bae4a4f5ac9d9ef2a5bb2c7425e5
--- /dev/null
+++ b/src/pages/list/card-list/model.ts
@@ -0,0 +1,54 @@
+import { AnyAction, Reducer } from 'redux';
+
+import { EffectsCommandMap } from 'dva';
+import { CardListItemDataType } from './data.d';
+import { queryFakeList } from './service';
+
+export interface StateType {
+  list: CardListItemDataType[];
+}
+
+export type Effect = (
+  action: AnyAction,
+  effects: EffectsCommandMap & { select: <T>(func: (state: StateType) => T) => T },
+) => void;
+
+export interface ModelType {
+  namespace: string;
+  state: StateType;
+  effects: {
+    fetch: Effect;
+  };
+  reducers: {
+    queryList: Reducer<StateType>;
+  };
+}
+
+const Model: ModelType = {
+  namespace: 'listCardList',
+
+  state: {
+    list: [],
+  },
+
+  effects: {
+    *fetch({ payload }, { call, put }) {
+      const response = yield call(queryFakeList, payload);
+      yield put({
+        type: 'queryList',
+        payload: Array.isArray(response) ? response : [],
+      });
+    },
+  },
+
+  reducers: {
+    queryList(state, action) {
+      return {
+        ...state,
+        list: action.payload,
+      };
+    },
+  },
+};
+
+export default Model;
diff --git a/src/pages/list/card-list/service.ts b/src/pages/list/card-list/service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..fcd22bc04b4b79761ac54e00a4de98752b38869d
--- /dev/null
+++ b/src/pages/list/card-list/service.ts
@@ -0,0 +1,7 @@
+import request from 'umi-request';
+
+export async function queryFakeList(params: { count: number }) {
+  return request('/api/fake_list', {
+    params,
+  });
+}
diff --git a/src/pages/list/card-list/style.less b/src/pages/list/card-list/style.less
new file mode 100644
index 0000000000000000000000000000000000000000..53257611d1c3f56d34d5b29752a6a2a8acdbd33c
--- /dev/null
+++ b/src/pages/list/card-list/style.less
@@ -0,0 +1,110 @@
+@import '~antd/es/style/themes/default.less';
+@import './utils/utils.less';
+
+.cardList {
+  margin-bottom: -24px;
+
+  .card {
+    :global {
+      .ant-card-meta-title {
+        margin-bottom: 12px;
+        & > a {
+          display: inline-block;
+          max-width: 100%;
+          color: @heading-color;
+        }
+      }
+      .ant-card-body:hover {
+        .ant-card-meta-title > a {
+          color: @primary-color;
+        }
+      }
+    }
+  }
+  .item {
+    height: 64px;
+  }
+
+  :global {
+    .ant-list .ant-list-item-content-single {
+      max-width: 100%;
+    }
+  }
+}
+
+.extraImg {
+  width: 155px;
+  margin-top: -20px;
+  text-align: center;
+  img {
+    width: 100%;
+  }
+}
+
+.newButton {
+  width: 100%;
+  height: 188px;
+  color: @text-color-secondary;
+  background-color: @component-background;
+  border-color: @border-color-base;
+  border-radius: @border-radius-sm;
+}
+
+.cardAvatar {
+  width: 48px;
+  height: 48px;
+  border-radius: 48px;
+}
+
+.cardDescription {
+  .textOverflowMulti();
+}
+
+.pageHeaderContent {
+  position: relative;
+}
+
+.contentLink {
+  margin-top: 16px;
+  a {
+    margin-right: 32px;
+    img {
+      width: 24px;
+    }
+  }
+  img {
+    margin-right: 8px;
+    vertical-align: middle;
+  }
+}
+
+@media screen and (max-width: @screen-lg) {
+  .contentLink {
+    a {
+      margin-right: 16px;
+    }
+  }
+}
+@media screen and (max-width: @screen-md) {
+  .extraImg {
+    display: none;
+  }
+}
+
+@media screen and (max-width: @screen-sm) {
+  .pageHeaderContent {
+    padding-bottom: 30px;
+  }
+  .contentLink {
+    position: absolute;
+    bottom: -4px;
+    left: 0;
+    width: 1000px;
+    a {
+      margin-right: 16px;
+    }
+    img {
+      margin-right: 4px;
+    }
+  }
+}
diff --git a/src/pages/list/card-list/utils/utils.less b/src/pages/list/card-list/utils/utils.less
new file mode 100644
index 0000000000000000000000000000000000000000..de1aa64222b6f14328d3a9e3c262ac5a31cce5af
--- /dev/null
+++ b/src/pages/list/card-list/utils/utils.less
@@ -0,0 +1,50 @@
+.textOverflow() {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  word-break: break-all;
+}
+
+.textOverflowMulti(@line: 3, @bg: #fff) {
+  position: relative;
+  max-height: @line * 1.5em;
+  margin-right: -1em;
+  padding-right: 1em;
+  overflow: hidden;
+  line-height: 1.5em;
+  text-align: justify;
+  &::before {
+    position: absolute;
+    right: 14px;
+    bottom: 0;
+    padding: 0 1px;
+    background: @bg;
+    content: '...';
+  }
+  &::after {
+    position: absolute;
+    right: 14px;
+    width: 1em;
+    height: 1em;
+    margin-top: 0.2em;
+    background: white;
+    content: '';
+  }
+}
+
+// mixins for clearfix
+// ------------------------
+.clearfix() {
+  zoom: 1;
+  &::before,
+  &::after {
+    display: table;
+    content: ' ';
+  }
+  &::after {
+    clear: both;
+    height: 0;
+    font-size: 0;
+    visibility: hidden;
+  }
+}
diff --git a/src/pages/list/search/applications/_mock.ts b/src/pages/list/search/applications/_mock.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5a12c6e299f1930822807da46f9a73d33eef8ff6
--- /dev/null
+++ b/src/pages/list/search/applications/_mock.ts
@@ -0,0 +1,113 @@
+import { ListItemDataType } from './data.d';
+
+const titles = [
+  'Alipay',
+  'Angular',
+  'Ant Design',
+  'Ant Design Pro',
+  'Bootstrap',
+  'React',
+  'Vue',
+  'Webpack',
+];
+const avatars = [
+  'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png', // Alipay
+  'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png', // Angular
+  'https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png', // Ant Design
+  'https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png', // Ant Design Pro
+  'https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png', // Bootstrap
+  'https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png', // React
+  'https://gw.alipayobjects.com/zos/rmsportal/ComBAopevLwENQdKWiIn.png', // Vue
+  'https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlMTCEe.png', // Webpack
+];
+
+const covers = [
+  'https://gw.alipayobjects.com/zos/rmsportal/uMfMFlvUuceEyPpotzlq.png',
+  'https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png',
+  'https://gw.alipayobjects.com/zos/rmsportal/iXjVmWVHbCJAyqvDxdtx.png',
+  'https://gw.alipayobjects.com/zos/rmsportal/gLaIAoVWTtLbBWZNYEMg.png',
+];
+const desc = [
+  '那是一种内在的东西， 他们到达不了，也无法触及的',
+  '希望是一个好东西，也许是最好的，好东西是不会消亡的',
+  '生命就像一盒巧克力，结果往往出人意料',
+  '城镇中有那么多的酒馆，她却偏偏走进了我的酒馆',
+  '那时候我只会想自己想要什么，从不想自己拥有什么',
+];
+const user = [
+  '付小小',
+  '曲丽丽',
+  '林东东',
+  '周星星',
+  '吴加好',
+  '朱偏右',
+  '鱼酱',
+  '乐哥',
+  '谭小仪',
+  '仲尼',
+];
+
+function fakeList(count: number): ListItemDataType[] {
+  const list = [];
+  for (let i = 0; i < count; i += 1) {
+    list.push({
+      id: `fake-list-${i}`,
+      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)],
+      status: ['active', 'exception', 'normal'][i % 3] as
+        | 'normal'
+        | 'exception'
+        | 'active'
+        | 'success',
+      percent: Math.ceil(Math.random() * 50) + 50,
+      logo: avatars[i % 8],
+      href: 'https://ant.design',
+      updatedAt: new Date(new Date().getTime() - 1000 * 60 * 60 * 2 * i).getTime(),
+      createdAt: new Date(new Date().getTime() - 1000 * 60 * 60 * 2 * i).getTime(),
+      subDescription: desc[i % 5],
+      description:
+        '在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的组件会被抽离成一套标准规范。',
+      activeUser: Math.ceil(Math.random() * 100000) + 100000,
+      newUser: Math.ceil(Math.random() * 1000) + 1000,
+      star: Math.ceil(Math.random() * 100) + 100,
+      like: Math.ceil(Math.random() * 100) + 100,
+      message: Math.ceil(Math.random() * 10) + 10,
+      content:
+        '段落示意：蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。',
+      members: [
+        {
+          avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png',
+          name: '曲丽丽',
+          id: 'member1',
+        },
+        {
+          avatar: 'https://gw.alipayobjects.com/zos/rmsportal/tBOxZPlITHqwlGjsJWaF.png',
+          name: '王昭君',
+          id: 'member2',
+        },
+        {
+          avatar: 'https://gw.alipayobjects.com/zos/rmsportal/sBxjgqiuHMGRkIjqlQCd.png',
+          name: '董娜娜',
+          id: 'member3',
+        },
+      ],
+    });
+  }
+
+  return list;
+}
+
+function getFakeList(req: { query: any }, res: { json: (arg0: any[]) => void }) {
+  const params = req.query;
+
+  const count = params.count * 1 || 20;
+
+  const result = fakeList(count);
+  return res.json(result);
+}
+
+export default {
+  'GET  /api/fake_list': getFakeList,
+};
diff --git a/src/pages/list/search/applications/components/StandardFormRow/index.less b/src/pages/list/search/applications/components/StandardFormRow/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..f9ef95689f29e90c1a65ff03aa8dc4857bca7e9e
--- /dev/null
+++ b/src/pages/list/search/applications/components/StandardFormRow/index.less
@@ -0,0 +1,72 @@
+@import '~antd/es/style/themes/default.less';
+
+.standardFormRow {
+  display: flex;
+  margin-bottom: 16px;
+  padding-bottom: 16px;
+  border-bottom: 1px dashed @border-color-split;
+  :global {
+    .ant-form-item {
+      margin-right: 24px;
+    }
+    .ant-form-item-label label {
+      margin-right: 0;
+      color: @text-color;
+    }
+    .ant-form-item-label,
+    .ant-form-item-control {
+      padding: 0;
+      line-height: 32px;
+    }
+  }
+  .label {
+    flex: 0 0 auto;
+    margin-right: 24px;
+    color: @heading-color;
+    font-size: @font-size-base;
+    text-align: right;
+    & > span {
+      display: inline-block;
+      height: 32px;
+      line-height: 32px;
+      &::after {
+        content: '：';
+      }
+    }
+  }
+  .content {
+    flex: 1 1 0;
+    :global {
+      .ant-form-item:last-child {
+        margin-right: 0;
+      }
+    }
+  }
+}
+
+.standardFormRowLast {
+  margin-bottom: 0;
+  padding-bottom: 0;
+  border: none;
+}
+
+.standardFormRowBlock {
+  :global {
+    .ant-form-item,
+    div.ant-form-item-control-wrapper {
+      display: block;
+    }
+  }
+}
+
+.standardFormRowGrid {
+  :global {
+    .ant-form-item,
+    div.ant-form-item-control-wrapper {
+      display: block;
+    }
+    .ant-form-item-label {
+      float: left;
+    }
+  }
+}
diff --git a/src/pages/list/search/applications/components/StandardFormRow/index.tsx b/src/pages/list/search/applications/components/StandardFormRow/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..01a8bb5dabd9f232d14b6186c74909de407dfcb0
--- /dev/null
+++ b/src/pages/list/search/applications/components/StandardFormRow/index.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import classNames from 'classnames';
+import styles from './index.less';
+
+interface StandardFormRowProps {
+  title?: string;
+  last?: boolean;
+  block?: boolean;
+  grid?: boolean;
+  style?: React.CSSProperties;
+}
+
+const StandardFormRow: React.SFC<StandardFormRowProps> = ({
+  title,
+  children,
+  last,
+  block,
+  grid,
+  ...rest
+}) => {
+  const cls = classNames(styles.standardFormRow, {
+    [styles.standardFormRowBlock]: block,
+    [styles.standardFormRowLast]: last,
+    [styles.standardFormRowGrid]: grid,
+  });
+
+  return (
+    <div className={cls} {...rest}>
+      {title && (
+        <div className={styles.label}>
+          <span>{title}</span>
+        </div>
+      )}
+      <div className={styles.content}>{children}</div>
+    </div>
+  );
+};
+
+export default StandardFormRow;
diff --git a/src/pages/list/search/applications/components/TagSelect/index.less b/src/pages/list/search/applications/components/TagSelect/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..f38fa5c9c69ad8115b028acf31df84ad3c2c654f
--- /dev/null
+++ b/src/pages/list/search/applications/components/TagSelect/index.less
@@ -0,0 +1,33 @@
+@import '~antd/es/style/themes/default.less';
+
+.tagSelect {
+  position: relative;
+  max-height: 32px;
+  margin-left: -8px;
+  overflow: hidden;
+  line-height: 32px;
+  transition: all 0.3s;
+  user-select: none;
+  :global {
+    .ant-tag {
+      margin-right: 24px;
+      padding: 0 8px;
+      font-size: @font-size-base;
+    }
+  }
+  &.expanded {
+    max-height: 200px;
+    transition: all 0.3s;
+  }
+  .trigger {
+    position: absolute;
+    top: 0;
+    right: 0;
+    i {
+      font-size: 12px;
+    }
+  }
+  &.hasExpandTag {
+    padding-right: 50px;
+  }
+}
diff --git a/src/pages/list/search/applications/components/TagSelect/index.tsx b/src/pages/list/search/applications/components/TagSelect/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..9536230a6eff0030182a782d8db8605cca31e23c
--- /dev/null
+++ b/src/pages/list/search/applications/components/TagSelect/index.tsx
@@ -0,0 +1,172 @@
+import { Icon, Tag } from 'antd';
+import React, { Component } from 'react';
+
+import classNames from 'classnames';
+import styles from './index.less';
+
+const { CheckableTag } = Tag;
+
+export interface TagSelectOptionProps {
+  value?: string | number;
+  style?: React.CSSProperties;
+  checked?: boolean;
+  onChange?: (value: string | number | undefined, state: boolean) => void;
+}
+
+export interface TagSelectProps {
+  onChange?: (value: (string | number)[]) => void;
+  expandable?: boolean;
+  value?: (string | number)[];
+  defaultValue?: (string | number)[];
+  style?: React.CSSProperties;
+  hideCheckAll?: boolean;
+  actionsText?: {
+    expandText?: React.ReactNode;
+    collapseText?: React.ReactNode;
+    selectAllText?: React.ReactNode;
+  };
+  className?: string;
+  Option?: TagSelectOptionProps;
+  children?: React.ReactElement<TagSelectOption> | React.ReactElement<TagSelectOption>[];
+}
+
+const TagSelectOption: React.SFC<TagSelectOptionProps> & {
+  isTagSelectOption: boolean;
+} = ({ children, checked, onChange, value }) => (
+  <CheckableTag
+    checked={!!checked}
+    key={value}
+    onChange={state => onChange && onChange(value, state)}
+  >
+    {children}
+  </CheckableTag>
+);
+
+TagSelectOption.isTagSelectOption = true;
+
+interface TagSelectState {
+  expand: boolean;
+  value: (string | number)[];
+}
+
+class TagSelect extends Component<TagSelectProps, TagSelectState> {
+  static defaultProps = {
+    hideCheckAll: false,
+    actionsText: {
+      expandText: '展开',
+      collapseText: '收起',
+      selectAllText: '全部',
+    },
+  };
+
+  static Option: TagSelectOption = TagSelectOption;
+
+  static getDerivedStateFromProps(nextProps: TagSelectProps) {
+    if ('value' in nextProps) {
+      return { value: nextProps.value || [] };
+    }
+    return null;
+  }
+
+  constructor(props: TagSelectProps) {
+    super(props);
+    this.state = {
+      expand: false,
+      value: props.value || props.defaultValue || [],
+    };
+  }
+
+  onChange = (value: (string | number)[]) => {
+    const { onChange } = this.props;
+    if (!('value' in this.props)) {
+      this.setState({ value });
+    }
+    if (onChange) {
+      onChange(value);
+    }
+  };
+
+  onSelectAll = (checked: boolean) => {
+    let checkedTags: (string | number)[] = [];
+    if (checked) {
+      checkedTags = this.getAllTags();
+    }
+    this.onChange(checkedTags);
+  };
+
+  getAllTags() {
+    const { children } = this.props;
+    const childrenArray = React.Children.toArray(children) as React.ReactElement<TagSelectOption>[];
+    const checkedTags = childrenArray
+      .filter(child => this.isTagSelectOption(child))
+      .map(child => child.props.value);
+    return checkedTags || [];
+  }
+
+  handleTagChange = (value: string | number, checked: boolean) => {
+    const { value: StateValue } = this.state;
+    const checkedTags: (string | number)[] = [...StateValue];
+
+    const index = checkedTags.indexOf(value);
+    if (checked && index === -1) {
+      checkedTags.push(value);
+    } else if (!checked && index > -1) {
+      checkedTags.splice(index, 1);
+    }
+    this.onChange(checkedTags);
+  };
+
+  handleExpand = () => {
+    const { expand } = this.state;
+    this.setState({
+      expand: !expand,
+    });
+  };
+
+  isTagSelectOption = (node: React.ReactElement<TagSelectOption, TagSelectOption>) =>
+    node &&
+    node.type &&
+    (node.type.isTagSelectOption || node.type.displayName === 'TagSelectOption');
+
+  render() {
+    const { value, expand } = this.state;
+    const { children, hideCheckAll, className, style, expandable, actionsText = {} } = this.props;
+    const checkedAll = this.getAllTags().length === value.length;
+    const { expandText = '展开', collapseText = '收起', selectAllText = '全部' } = actionsText;
+
+    const cls = classNames(styles.tagSelect, className, {
+      [styles.hasExpandTag]: expandable,
+      [styles.expanded]: expand,
+    });
+
+    return (
+      <div className={cls} style={style}>
+        {hideCheckAll ? null : (
+          <CheckableTag checked={checkedAll} key="tag-select-__all__" onChange={this.onSelectAll}>
+            {selectAllText}
+          </CheckableTag>
+        )}
+        {value &&
+          children &&
+          React.Children.map(children, (child: React.ReactElement<TagSelectOption>) => {
+            if (this.isTagSelectOption(child)) {
+              return React.cloneElement(child, {
+                key: `tag-select-${child.props.value}`,
+                value: child.props.value,
+                checked: value.indexOf(child.props.value) > -1,
+                onChange: this.handleTagChange,
+              });
+            }
+            return child;
+          })}
+        {expandable && (
+          <a className={styles.trigger} onClick={this.handleExpand}>
+            {expand ? collapseText : expandText} <Icon type={expand ? 'up' : 'down'} />
+          </a>
+        )}
+      </div>
+    );
+  }
+}
+
+export default TagSelect;
diff --git a/src/pages/list/search/applications/data.d.ts b/src/pages/list/search/applications/data.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6a4a88ce1a0c1b9d32dd8a5925828858d27cc0b4
--- /dev/null
+++ b/src/pages/list/search/applications/data.d.ts
@@ -0,0 +1,29 @@
+export interface Member {
+  avatar: string;
+  name: string;
+  id: string;
+}
+
+export interface ListItemDataType {
+  id: string;
+  owner: string;
+  title: string;
+  avatar: string;
+  cover: string;
+  status: 'normal' | 'exception' | 'active' | 'success';
+  percent: number;
+  logo: string;
+  href: string;
+  body?: any;
+  updatedAt: number;
+  createdAt: number;
+  subDescription: string;
+  description: string;
+  activeUser: number;
+  newUser: number;
+  star: number;
+  like: number;
+  message: number;
+  content: string;
+  members: Member[];
+}
diff --git a/src/pages/list/search/applications/index.tsx b/src/pages/list/search/applications/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..56e75835bd52e25f619cb692318a788e7917743c
--- /dev/null
+++ b/src/pages/list/search/applications/index.tsx
@@ -0,0 +1,226 @@
+import { Avatar, Card, Col, Dropdown, Form, Icon, List, Menu, Row, Select, Tooltip } from 'antd';
+import React, { Component } from 'react';
+
+import { Dispatch } from 'redux';
+import { FormComponentProps } from 'antd/es/form';
+import { connect } from 'dva';
+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';
+
+const { Option } = Select;
+const FormItem = Form.Item;
+
+export function formatWan(val: number) {
+  const v = val * 1;
+  if (!v || Number.isNaN(v)) return '';
+
+  let result: React.ReactNode = val;
+  if (val > 10000) {
+    result = (
+      <span>
+        {Math.floor(val / 10000)}
+        <span
+          style={{
+            position: 'relative',
+            top: -2,
+            fontSize: 14,
+            fontStyle: 'normal',
+            marginLeft: 2,
+          }}
+        >
+          万
+        </span>
+      </span>
+    );
+  }
+  return result;
+}
+
+interface ApplicationsProps extends FormComponentProps {
+  dispatch: Dispatch<any>;
+  listSearchApplications: StateType;
+  loading: boolean;
+}
+
+class Applications extends Component<ApplicationsProps> {
+  componentDidMount() {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'listSearchApplications/fetch',
+      payload: {
+        count: 8,
+      },
+    });
+  }
+
+  render() {
+    const {
+      listSearchApplications: { list },
+      loading,
+      form,
+    } = this.props;
+    const { getFieldDecorator } = form;
+
+    const CardInfo: React.SFC<{
+      activeUser: React.ReactNode;
+      newUser: React.ReactNode;
+    }> = ({ activeUser, newUser }) => (
+      <div className={styles.cardInfo}>
+        <div>
+          <p>活跃用户</p>
+          <p>{activeUser}</p>
+        </div>
+        <div>
+          <p>新增用户</p>
+          <p>{newUser}</p>
+        </div>
+      </div>
+    );
+
+    const formItemLayout = {
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 16 },
+      },
+    };
+
+    const itemMenu = (
+      <Menu>
+        <Menu.Item>
+          <a target="_blank" rel="noopener noreferrer" href="https://www.alipay.com/">
+            1st menu item
+          </a>
+        </Menu.Item>
+        <Menu.Item>
+          <a target="_blank" rel="noopener noreferrer" href="https://www.taobao.com/">
+            2nd menu item
+          </a>
+        </Menu.Item>
+        <Menu.Item>
+          <a target="_blank" rel="noopener noreferrer" href="https://www.tmall.com/">
+            3d menu item
+          </a>
+        </Menu.Item>
+      </Menu>
+    );
+
+    return (
+      <div className={styles.filterCardList}>
+        <Card bordered={false}>
+          <Form layout="inline">
+            <StandardFormRow title="所属类目" block style={{ paddingBottom: 11 }}>
+              <FormItem>
+                {getFieldDecorator('category')(
+                  <TagSelect expandable>
+                    <TagSelect.Option value="cat1">类目一</TagSelect.Option>
+                    <TagSelect.Option value="cat2">类目二</TagSelect.Option>
+                    <TagSelect.Option value="cat3">类目三</TagSelect.Option>
+                    <TagSelect.Option value="cat4">类目四</TagSelect.Option>
+                    <TagSelect.Option value="cat5">类目五</TagSelect.Option>
+                    <TagSelect.Option value="cat6">类目六</TagSelect.Option>
+                    <TagSelect.Option value="cat7">类目七</TagSelect.Option>
+                    <TagSelect.Option value="cat8">类目八</TagSelect.Option>
+                    <TagSelect.Option value="cat9">类目九</TagSelect.Option>
+                    <TagSelect.Option value="cat10">类目十</TagSelect.Option>
+                    <TagSelect.Option value="cat11">类目十一</TagSelect.Option>
+                    <TagSelect.Option value="cat12">类目十二</TagSelect.Option>
+                  </TagSelect>,
+                )}
+              </FormItem>
+            </StandardFormRow>
+            <StandardFormRow title="其它选项" grid last>
+              <Row gutter={16}>
+                <Col lg={8} md={10} sm={10} xs={24}>
+                  <FormItem {...formItemLayout} label="作者">
+                    {getFieldDecorator('author', {})(
+                      <Select placeholder="不限" style={{ maxWidth: 200, width: '100%' }}>
+                        <Option value="lisa">王昭君</Option>
+                      </Select>,
+                    )}
+                  </FormItem>
+                </Col>
+                <Col lg={8} md={10} sm={10} xs={24}>
+                  <FormItem {...formItemLayout} label="好评度">
+                    {getFieldDecorator('rate', {})(
+                      <Select placeholder="不限" style={{ maxWidth: 200, width: '100%' }}>
+                        <Option value="good">优秀</Option>
+                        <Option value="normal">普通</Option>
+                      </Select>,
+                    )}
+                  </FormItem>
+                </Col>
+              </Row>
+            </StandardFormRow>
+          </Form>
+        </Card>
+        <br />
+        <List<ListItemDataType>
+          rowKey="id"
+          grid={{ gutter: 24, xl: 4, lg: 3, md: 3, sm: 2, xs: 1 }}
+          loading={loading}
+          dataSource={list}
+          renderItem={item => (
+            <List.Item key={item.id}>
+              <Card
+                hoverable
+                bodyStyle={{ paddingBottom: 20 }}
+                actions={[
+                  <Tooltip key="download" title="下载">
+                    <Icon type="download" />
+                  </Tooltip>,
+                  <Tooltip key="edit" title="编辑">
+                    <Icon type="edit" />
+                  </Tooltip>,
+                  <Tooltip title="分享" key="share">
+                    <Icon type="share-alt" />
+                  </Tooltip>,
+                  <Dropdown key="ellipsis" overlay={itemMenu}>
+                    <Icon type="ellipsis" />
+                  </Dropdown>,
+                ]}
+              >
+                <Card.Meta avatar={<Avatar size="small" src={item.avatar} />} title={item.title} />
+                <div className={styles.cardItemContent}>
+                  <CardInfo
+                    activeUser={formatWan(item.activeUser)}
+                    newUser={numeral(item.newUser).format('0,0')}
+                  />
+                </div>
+              </Card>
+            </List.Item>
+          )}
+        />
+      </div>
+    );
+  }
+}
+
+const WarpForm = Form.create<ApplicationsProps>({
+  onValuesChange({ dispatch }: ApplicationsProps) {
+    // 表单项变化时请求数据
+    // 模拟查询表单生效
+    dispatch({
+      type: 'listSearchApplications/fetch',
+      payload: {
+        count: 8,
+      },
+    });
+  },
+})(Applications);
+
+export default connect(
+  ({
+    listSearchApplications,
+    loading,
+  }: {
+    listSearchApplications: StateType;
+    loading: { models: { [key: string]: boolean } };
+  }) => ({
+    listSearchApplications,
+    loading: loading.models.listSearchApplications,
+  }),
+)(WarpForm);
diff --git a/src/pages/list/search/applications/model.ts b/src/pages/list/search/applications/model.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e748c153010a74fe9d9be57b22a812c60849c0ef
--- /dev/null
+++ b/src/pages/list/search/applications/model.ts
@@ -0,0 +1,54 @@
+import { AnyAction, Reducer } from 'redux';
+
+import { EffectsCommandMap } from 'dva';
+import { ListItemDataType } from './data.d';
+import { queryFakeList } from './service';
+
+export interface StateType {
+  list: ListItemDataType[];
+}
+
+export type Effect = (
+  action: AnyAction,
+  effects: EffectsCommandMap & { select: <T>(func: (state: StateType) => T) => T },
+) => void;
+
+export interface ModelType {
+  namespace: string;
+  state: StateType;
+  effects: {
+    fetch: Effect;
+  };
+  reducers: {
+    queryList: Reducer<StateType>;
+  };
+}
+
+const Model: ModelType = {
+  namespace: 'listSearchApplications',
+
+  state: {
+    list: [],
+  },
+
+  effects: {
+    *fetch({ payload }, { call, put }) {
+      const response = yield call(queryFakeList, payload);
+      yield put({
+        type: 'queryList',
+        payload: Array.isArray(response) ? response : [],
+      });
+    },
+  },
+
+  reducers: {
+    queryList(state, action) {
+      return {
+        ...state,
+        list: action.payload,
+      };
+    },
+  },
+};
+
+export default Model;
diff --git a/src/pages/list/search/applications/service.ts b/src/pages/list/search/applications/service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1fbbdf958276c0b1ad231785f735739f445ea752
--- /dev/null
+++ b/src/pages/list/search/applications/service.ts
@@ -0,0 +1,8 @@
+import request from 'umi-request';
+import { ListItemDataType } from './data.d';
+
+export async function queryFakeList(params: ListItemDataType) {
+  return request('/api/fake_list', {
+    params,
+  });
+}
diff --git a/src/pages/list/search/applications/style.less b/src/pages/list/search/applications/style.less
new file mode 100644
index 0000000000000000000000000000000000000000..c550b333da1612abb92f9bb2527afce9dcc3f1c2
--- /dev/null
+++ b/src/pages/list/search/applications/style.less
@@ -0,0 +1,51 @@
+@import '~antd/es/style/themes/default.less';
+
+.filterCardList {
+  margin-bottom: -24px;
+  :global {
+    .ant-card-meta-content {
+      margin-top: 0;
+    }
+    // disabled white space
+    .ant-card-meta-avatar {
+      font-size: 0;
+    }
+
+    .ant-list .ant-list-item-content-single {
+      max-width: 100%;
+    }
+  }
+  .cardInfo {
+    margin-top: 16px;
+    margin-left: 40px;
+    zoom: 1;
+    &::before,
+    &::after {
+      display: table;
+      content: ' ';
+    }
+    &::after {
+      clear: both;
+      height: 0;
+      font-size: 0;
+      visibility: hidden;
+    }
+    & > div {
+      position: relative;
+      float: left;
+      width: 50%;
+      text-align: left;
+      p {
+        margin: 0;
+        font-size: 24px;
+        line-height: 32px;
+      }
+      p:first-child {
+        margin-bottom: 4px;
+        color: @text-color-secondary;
+        font-size: 12px;
+        line-height: 20px;
+      }
+    }
+  }
+}
diff --git a/src/pages/list/search/applications/utils/utils.less b/src/pages/list/search/applications/utils/utils.less
new file mode 100644
index 0000000000000000000000000000000000000000..de1aa64222b6f14328d3a9e3c262ac5a31cce5af
--- /dev/null
+++ b/src/pages/list/search/applications/utils/utils.less
@@ -0,0 +1,50 @@
+.textOverflow() {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  word-break: break-all;
+}
+
+.textOverflowMulti(@line: 3, @bg: #fff) {
+  position: relative;
+  max-height: @line * 1.5em;
+  margin-right: -1em;
+  padding-right: 1em;
+  overflow: hidden;
+  line-height: 1.5em;
+  text-align: justify;
+  &::before {
+    position: absolute;
+    right: 14px;
+    bottom: 0;
+    padding: 0 1px;
+    background: @bg;
+    content: '...';
+  }
+  &::after {
+    position: absolute;
+    right: 14px;
+    width: 1em;
+    height: 1em;
+    margin-top: 0.2em;
+    background: white;
+    content: '';
+  }
+}
+
+// mixins for clearfix
+// ------------------------
+.clearfix() {
+  zoom: 1;
+  &::before,
+  &::after {
+    display: table;
+    content: ' ';
+  }
+  &::after {
+    clear: both;
+    height: 0;
+    font-size: 0;
+    visibility: hidden;
+  }
+}
diff --git a/src/pages/list/search/articles/_mock.ts b/src/pages/list/search/articles/_mock.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5a12c6e299f1930822807da46f9a73d33eef8ff6
--- /dev/null
+++ b/src/pages/list/search/articles/_mock.ts
@@ -0,0 +1,113 @@
+import { ListItemDataType } from './data.d';
+
+const titles = [
+  'Alipay',
+  'Angular',
+  'Ant Design',
+  'Ant Design Pro',
+  'Bootstrap',
+  'React',
+  'Vue',
+  'Webpack',
+];
+const avatars = [
+  'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png', // Alipay
+  'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png', // Angular
+  'https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png', // Ant Design
+  'https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png', // Ant Design Pro
+  'https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png', // Bootstrap
+  'https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png', // React
+  'https://gw.alipayobjects.com/zos/rmsportal/ComBAopevLwENQdKWiIn.png', // Vue
+  'https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlMTCEe.png', // Webpack
+];
+
+const covers = [
+  'https://gw.alipayobjects.com/zos/rmsportal/uMfMFlvUuceEyPpotzlq.png',
+  'https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png',
+  'https://gw.alipayobjects.com/zos/rmsportal/iXjVmWVHbCJAyqvDxdtx.png',
+  'https://gw.alipayobjects.com/zos/rmsportal/gLaIAoVWTtLbBWZNYEMg.png',
+];
+const desc = [
+  '那是一种内在的东西， 他们到达不了，也无法触及的',
+  '希望是一个好东西，也许是最好的，好东西是不会消亡的',
+  '生命就像一盒巧克力，结果往往出人意料',
+  '城镇中有那么多的酒馆，她却偏偏走进了我的酒馆',
+  '那时候我只会想自己想要什么，从不想自己拥有什么',
+];
+const user = [
+  '付小小',
+  '曲丽丽',
+  '林东东',
+  '周星星',
+  '吴加好',
+  '朱偏右',
+  '鱼酱',
+  '乐哥',
+  '谭小仪',
+  '仲尼',
+];
+
+function fakeList(count: number): ListItemDataType[] {
+  const list = [];
+  for (let i = 0; i < count; i += 1) {
+    list.push({
+      id: `fake-list-${i}`,
+      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)],
+      status: ['active', 'exception', 'normal'][i % 3] as
+        | 'normal'
+        | 'exception'
+        | 'active'
+        | 'success',
+      percent: Math.ceil(Math.random() * 50) + 50,
+      logo: avatars[i % 8],
+      href: 'https://ant.design',
+      updatedAt: new Date(new Date().getTime() - 1000 * 60 * 60 * 2 * i).getTime(),
+      createdAt: new Date(new Date().getTime() - 1000 * 60 * 60 * 2 * i).getTime(),
+      subDescription: desc[i % 5],
+      description:
+        '在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的组件会被抽离成一套标准规范。',
+      activeUser: Math.ceil(Math.random() * 100000) + 100000,
+      newUser: Math.ceil(Math.random() * 1000) + 1000,
+      star: Math.ceil(Math.random() * 100) + 100,
+      like: Math.ceil(Math.random() * 100) + 100,
+      message: Math.ceil(Math.random() * 10) + 10,
+      content:
+        '段落示意：蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。',
+      members: [
+        {
+          avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png',
+          name: '曲丽丽',
+          id: 'member1',
+        },
+        {
+          avatar: 'https://gw.alipayobjects.com/zos/rmsportal/tBOxZPlITHqwlGjsJWaF.png',
+          name: '王昭君',
+          id: 'member2',
+        },
+        {
+          avatar: 'https://gw.alipayobjects.com/zos/rmsportal/sBxjgqiuHMGRkIjqlQCd.png',
+          name: '董娜娜',
+          id: 'member3',
+        },
+      ],
+    });
+  }
+
+  return list;
+}
+
+function getFakeList(req: { query: any }, res: { json: (arg0: any[]) => void }) {
+  const params = req.query;
+
+  const count = params.count * 1 || 20;
+
+  const result = fakeList(count);
+  return res.json(result);
+}
+
+export default {
+  'GET  /api/fake_list': getFakeList,
+};
diff --git a/src/pages/list/search/articles/components/ArticleListContent/index.less b/src/pages/list/search/articles/components/ArticleListContent/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..eca0811cd021d24a8127cb0b1bb91fd748c2a5ab
--- /dev/null
+++ b/src/pages/list/search/articles/components/ArticleListContent/index.less
@@ -0,0 +1,38 @@
+@import '~antd/es/style/themes/default.less';
+
+.listContent {
+  .description {
+    max-width: 720px;
+    line-height: 22px;
+  }
+  .extra {
+    margin-top: 16px;
+    color: @text-color-secondary;
+    line-height: 22px;
+    & > :global(.ant-avatar) {
+      position: relative;
+      top: 1px;
+      width: 20px;
+      height: 20px;
+      margin-right: 8px;
+      vertical-align: top;
+    }
+    & > em {
+      margin-left: 16px;
+      color: @disabled-color;
+      font-style: normal;
+    }
+  }
+}
+
+@media screen and (max-width: @screen-xs) {
+  .listContent {
+    .extra {
+      & > em {
+        display: block;
+        margin-top: 8px;
+        margin-left: 0;
+      }
+    }
+  }
+}
diff --git a/src/pages/list/search/articles/components/ArticleListContent/index.tsx b/src/pages/list/search/articles/components/ArticleListContent/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..c5a2d4fa097f886ac63bddfbaf89e38a7b4d1fd2
--- /dev/null
+++ b/src/pages/list/search/articles/components/ArticleListContent/index.tsx
@@ -0,0 +1,29 @@
+import { Avatar } from 'antd';
+import React from 'react';
+import moment from 'moment';
+import styles from './index.less';
+
+interface ArticleListContentProps {
+  data: {
+    content: React.ReactNode;
+    updatedAt: number;
+    avatar: string;
+    owner: string;
+    href: string;
+  };
+}
+
+const ArticleListContent: React.SFC<ArticleListContentProps> = ({
+  data: { content, updatedAt, avatar, owner, href },
+}) => (
+  <div className={styles.listContent}>
+    <div className={styles.description}>{content}</div>
+    <div className={styles.extra}>
+      <Avatar src={avatar} size="small" />
+      <a href={href}>{owner}</a> 发布在 <a href={href}>{href}</a>
+      <em>{moment(updatedAt).format('YYYY-MM-DD HH:mm')}</em>
+    </div>
+  </div>
+);
+
+export default ArticleListContent;
diff --git a/src/pages/list/search/articles/components/StandardFormRow/index.less b/src/pages/list/search/articles/components/StandardFormRow/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..f9ef95689f29e90c1a65ff03aa8dc4857bca7e9e
--- /dev/null
+++ b/src/pages/list/search/articles/components/StandardFormRow/index.less
@@ -0,0 +1,72 @@
+@import '~antd/es/style/themes/default.less';
+
+.standardFormRow {
+  display: flex;
+  margin-bottom: 16px;
+  padding-bottom: 16px;
+  border-bottom: 1px dashed @border-color-split;
+  :global {
+    .ant-form-item {
+      margin-right: 24px;
+    }
+    .ant-form-item-label label {
+      margin-right: 0;
+      color: @text-color;
+    }
+    .ant-form-item-label,
+    .ant-form-item-control {
+      padding: 0;
+      line-height: 32px;
+    }
+  }
+  .label {
+    flex: 0 0 auto;
+    margin-right: 24px;
+    color: @heading-color;
+    font-size: @font-size-base;
+    text-align: right;
+    & > span {
+      display: inline-block;
+      height: 32px;
+      line-height: 32px;
+      &::after {
+        content: '：';
+      }
+    }
+  }
+  .content {
+    flex: 1 1 0;
+    :global {
+      .ant-form-item:last-child {
+        margin-right: 0;
+      }
+    }
+  }
+}
+
+.standardFormRowLast {
+  margin-bottom: 0;
+  padding-bottom: 0;
+  border: none;
+}
+
+.standardFormRowBlock {
+  :global {
+    .ant-form-item,
+    div.ant-form-item-control-wrapper {
+      display: block;
+    }
+  }
+}
+
+.standardFormRowGrid {
+  :global {
+    .ant-form-item,
+    div.ant-form-item-control-wrapper {
+      display: block;
+    }
+    .ant-form-item-label {
+      float: left;
+    }
+  }
+}
diff --git a/src/pages/list/search/articles/components/StandardFormRow/index.tsx b/src/pages/list/search/articles/components/StandardFormRow/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..01a8bb5dabd9f232d14b6186c74909de407dfcb0
--- /dev/null
+++ b/src/pages/list/search/articles/components/StandardFormRow/index.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import classNames from 'classnames';
+import styles from './index.less';
+
+interface StandardFormRowProps {
+  title?: string;
+  last?: boolean;
+  block?: boolean;
+  grid?: boolean;
+  style?: React.CSSProperties;
+}
+
+const StandardFormRow: React.SFC<StandardFormRowProps> = ({
+  title,
+  children,
+  last,
+  block,
+  grid,
+  ...rest
+}) => {
+  const cls = classNames(styles.standardFormRow, {
+    [styles.standardFormRowBlock]: block,
+    [styles.standardFormRowLast]: last,
+    [styles.standardFormRowGrid]: grid,
+  });
+
+  return (
+    <div className={cls} {...rest}>
+      {title && (
+        <div className={styles.label}>
+          <span>{title}</span>
+        </div>
+      )}
+      <div className={styles.content}>{children}</div>
+    </div>
+  );
+};
+
+export default StandardFormRow;
diff --git a/src/pages/list/search/articles/components/TagSelect/index.less b/src/pages/list/search/articles/components/TagSelect/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..f38fa5c9c69ad8115b028acf31df84ad3c2c654f
--- /dev/null
+++ b/src/pages/list/search/articles/components/TagSelect/index.less
@@ -0,0 +1,33 @@
+@import '~antd/es/style/themes/default.less';
+
+.tagSelect {
+  position: relative;
+  max-height: 32px;
+  margin-left: -8px;
+  overflow: hidden;
+  line-height: 32px;
+  transition: all 0.3s;
+  user-select: none;
+  :global {
+    .ant-tag {
+      margin-right: 24px;
+      padding: 0 8px;
+      font-size: @font-size-base;
+    }
+  }
+  &.expanded {
+    max-height: 200px;
+    transition: all 0.3s;
+  }
+  .trigger {
+    position: absolute;
+    top: 0;
+    right: 0;
+    i {
+      font-size: 12px;
+    }
+  }
+  &.hasExpandTag {
+    padding-right: 50px;
+  }
+}
diff --git a/src/pages/list/search/articles/components/TagSelect/index.tsx b/src/pages/list/search/articles/components/TagSelect/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..9536230a6eff0030182a782d8db8605cca31e23c
--- /dev/null
+++ b/src/pages/list/search/articles/components/TagSelect/index.tsx
@@ -0,0 +1,172 @@
+import { Icon, Tag } from 'antd';
+import React, { Component } from 'react';
+
+import classNames from 'classnames';
+import styles from './index.less';
+
+const { CheckableTag } = Tag;
+
+export interface TagSelectOptionProps {
+  value?: string | number;
+  style?: React.CSSProperties;
+  checked?: boolean;
+  onChange?: (value: string | number | undefined, state: boolean) => void;
+}
+
+export interface TagSelectProps {
+  onChange?: (value: (string | number)[]) => void;
+  expandable?: boolean;
+  value?: (string | number)[];
+  defaultValue?: (string | number)[];
+  style?: React.CSSProperties;
+  hideCheckAll?: boolean;
+  actionsText?: {
+    expandText?: React.ReactNode;
+    collapseText?: React.ReactNode;
+    selectAllText?: React.ReactNode;
+  };
+  className?: string;
+  Option?: TagSelectOptionProps;
+  children?: React.ReactElement<TagSelectOption> | React.ReactElement<TagSelectOption>[];
+}
+
+const TagSelectOption: React.SFC<TagSelectOptionProps> & {
+  isTagSelectOption: boolean;
+} = ({ children, checked, onChange, value }) => (
+  <CheckableTag
+    checked={!!checked}
+    key={value}
+    onChange={state => onChange && onChange(value, state)}
+  >
+    {children}
+  </CheckableTag>
+);
+
+TagSelectOption.isTagSelectOption = true;
+
+interface TagSelectState {
+  expand: boolean;
+  value: (string | number)[];
+}
+
+class TagSelect extends Component<TagSelectProps, TagSelectState> {
+  static defaultProps = {
+    hideCheckAll: false,
+    actionsText: {
+      expandText: '展开',
+      collapseText: '收起',
+      selectAllText: '全部',
+    },
+  };
+
+  static Option: TagSelectOption = TagSelectOption;
+
+  static getDerivedStateFromProps(nextProps: TagSelectProps) {
+    if ('value' in nextProps) {
+      return { value: nextProps.value || [] };
+    }
+    return null;
+  }
+
+  constructor(props: TagSelectProps) {
+    super(props);
+    this.state = {
+      expand: false,
+      value: props.value || props.defaultValue || [],
+    };
+  }
+
+  onChange = (value: (string | number)[]) => {
+    const { onChange } = this.props;
+    if (!('value' in this.props)) {
+      this.setState({ value });
+    }
+    if (onChange) {
+      onChange(value);
+    }
+  };
+
+  onSelectAll = (checked: boolean) => {
+    let checkedTags: (string | number)[] = [];
+    if (checked) {
+      checkedTags = this.getAllTags();
+    }
+    this.onChange(checkedTags);
+  };
+
+  getAllTags() {
+    const { children } = this.props;
+    const childrenArray = React.Children.toArray(children) as React.ReactElement<TagSelectOption>[];
+    const checkedTags = childrenArray
+      .filter(child => this.isTagSelectOption(child))
+      .map(child => child.props.value);
+    return checkedTags || [];
+  }
+
+  handleTagChange = (value: string | number, checked: boolean) => {
+    const { value: StateValue } = this.state;
+    const checkedTags: (string | number)[] = [...StateValue];
+
+    const index = checkedTags.indexOf(value);
+    if (checked && index === -1) {
+      checkedTags.push(value);
+    } else if (!checked && index > -1) {
+      checkedTags.splice(index, 1);
+    }
+    this.onChange(checkedTags);
+  };
+
+  handleExpand = () => {
+    const { expand } = this.state;
+    this.setState({
+      expand: !expand,
+    });
+  };
+
+  isTagSelectOption = (node: React.ReactElement<TagSelectOption, TagSelectOption>) =>
+    node &&
+    node.type &&
+    (node.type.isTagSelectOption || node.type.displayName === 'TagSelectOption');
+
+  render() {
+    const { value, expand } = this.state;
+    const { children, hideCheckAll, className, style, expandable, actionsText = {} } = this.props;
+    const checkedAll = this.getAllTags().length === value.length;
+    const { expandText = '展开', collapseText = '收起', selectAllText = '全部' } = actionsText;
+
+    const cls = classNames(styles.tagSelect, className, {
+      [styles.hasExpandTag]: expandable,
+      [styles.expanded]: expand,
+    });
+
+    return (
+      <div className={cls} style={style}>
+        {hideCheckAll ? null : (
+          <CheckableTag checked={checkedAll} key="tag-select-__all__" onChange={this.onSelectAll}>
+            {selectAllText}
+          </CheckableTag>
+        )}
+        {value &&
+          children &&
+          React.Children.map(children, (child: React.ReactElement<TagSelectOption>) => {
+            if (this.isTagSelectOption(child)) {
+              return React.cloneElement(child, {
+                key: `tag-select-${child.props.value}`,
+                value: child.props.value,
+                checked: value.indexOf(child.props.value) > -1,
+                onChange: this.handleTagChange,
+              });
+            }
+            return child;
+          })}
+        {expandable && (
+          <a className={styles.trigger} onClick={this.handleExpand}>
+            {expand ? collapseText : expandText} <Icon type={expand ? 'up' : 'down'} />
+          </a>
+        )}
+      </div>
+    );
+  }
+}
+
+export default TagSelect;
diff --git a/src/pages/list/search/articles/data.d.ts b/src/pages/list/search/articles/data.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6a4a88ce1a0c1b9d32dd8a5925828858d27cc0b4
--- /dev/null
+++ b/src/pages/list/search/articles/data.d.ts
@@ -0,0 +1,29 @@
+export interface Member {
+  avatar: string;
+  name: string;
+  id: string;
+}
+
+export interface ListItemDataType {
+  id: string;
+  owner: string;
+  title: string;
+  avatar: string;
+  cover: string;
+  status: 'normal' | 'exception' | 'active' | 'success';
+  percent: number;
+  logo: string;
+  href: string;
+  body?: any;
+  updatedAt: number;
+  createdAt: number;
+  subDescription: string;
+  description: string;
+  activeUser: number;
+  newUser: number;
+  star: number;
+  like: number;
+  message: number;
+  content: string;
+  members: Member[];
+}
diff --git a/src/pages/list/search/articles/index.tsx b/src/pages/list/search/articles/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..c36ff431d28fdd1f30fc811395530dee0d456f7a
--- /dev/null
+++ b/src/pages/list/search/articles/index.tsx
@@ -0,0 +1,261 @@
+import { Button, Card, Col, Form, Icon, List, Row, Select, Tag } from 'antd';
+import React, { Component } from 'react';
+
+import { Dispatch } from 'redux';
+import { FormComponentProps } from 'antd/es/form';
+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;
+
+const pageSize = 5;
+
+interface ArticlesProps extends FormComponentProps {
+  dispatch: Dispatch<any>;
+  listSearchArticles: StateType;
+  loading: boolean;
+}
+
+class Articles extends Component<ArticlesProps> {
+  componentDidMount() {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'listSearchArticles/fetch',
+      payload: {
+        count: 5,
+      },
+    });
+  }
+
+  setOwner = () => {
+    const { form } = this.props;
+    form.setFieldsValue({
+      owner: ['wzj'],
+    });
+  };
+
+  fetchMore = () => {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'listSearchArticles/appendFetch',
+      payload: {
+        count: pageSize,
+      },
+    });
+  };
+
+  render() {
+    const {
+      form,
+      listSearchArticles: { list },
+      loading,
+    } = this.props;
+    const { getFieldDecorator } = form;
+
+    const owners = [
+      {
+        id: 'wzj',
+        name: '我自己',
+      },
+      {
+        id: 'wjh',
+        name: '吴家豪',
+      },
+      {
+        id: 'zxx',
+        name: '周星星',
+      },
+      {
+        id: 'zly',
+        name: '赵丽颖',
+      },
+      {
+        id: 'ym',
+        name: '姚明',
+      },
+    ];
+
+    const IconText: React.SFC<{
+      type: string;
+      text: React.ReactNode;
+    }> = ({ type, text }) => (
+      <span>
+        <Icon type={type} style={{ marginRight: 8 }} />
+        {text}
+      </span>
+    );
+
+    const formItemLayout = {
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 24 },
+        md: { span: 12 },
+      },
+    };
+
+    const loadMore =
+      list.length > 0 ? (
+        <div style={{ textAlign: 'center', marginTop: 16 }}>
+          <Button onClick={this.fetchMore} style={{ paddingLeft: 48, paddingRight: 48 }}>
+            {loading ? (
+              <span>
+                <Icon type="loading" /> 加载中...
+              </span>
+            ) : (
+              '加载更多'
+            )}
+          </Button>
+        </div>
+      ) : null;
+
+    return (
+      <>
+        <Card bordered={false}>
+          <Form layout="inline">
+            <StandardFormRow title="所属类目" block style={{ paddingBottom: 11 }}>
+              <FormItem>
+                {getFieldDecorator('category')(
+                  <TagSelect expandable>
+                    <TagSelect.Option value="cat1">类目一</TagSelect.Option>
+                    <TagSelect.Option value="cat2">类目二</TagSelect.Option>
+                    <TagSelect.Option value="cat3">类目三</TagSelect.Option>
+                    <TagSelect.Option value="cat4">类目四</TagSelect.Option>
+                    <TagSelect.Option value="cat5">类目五</TagSelect.Option>
+                    <TagSelect.Option value="cat6">类目六</TagSelect.Option>
+                    <TagSelect.Option value="cat7">类目七</TagSelect.Option>
+                    <TagSelect.Option value="cat8">类目八</TagSelect.Option>
+                    <TagSelect.Option value="cat9">类目九</TagSelect.Option>
+                    <TagSelect.Option value="cat10">类目十</TagSelect.Option>
+                    <TagSelect.Option value="cat11">类目十一</TagSelect.Option>
+                    <TagSelect.Option value="cat12">类目十二</TagSelect.Option>
+                  </TagSelect>,
+                )}
+              </FormItem>
+            </StandardFormRow>
+            <StandardFormRow title="owner" grid>
+              <Row>
+                <Col>
+                  <FormItem {...formItemLayout}>
+                    {getFieldDecorator('owner', {
+                      initialValue: ['wjh', 'zxx'],
+                    })(
+                      <Select
+                        mode="multiple"
+                        style={{ maxWidth: 286, width: '100%' }}
+                        placeholder="选择 owner"
+                      >
+                        {owners.map(owner => (
+                          <Option key={owner.id} value={owner.id}>
+                            {owner.name}
+                          </Option>
+                        ))}
+                      </Select>,
+                    )}
+                    <a className={styles.selfTrigger} onClick={this.setOwner}>
+                      只看自己的
+                    </a>
+                  </FormItem>
+                </Col>
+              </Row>
+            </StandardFormRow>
+            <StandardFormRow title="其它选项" grid last>
+              <Row gutter={16}>
+                <Col xl={8} lg={10} md={12} sm={24} xs={24}>
+                  <FormItem {...formItemLayout} label="活跃用户">
+                    {getFieldDecorator('user', {})(
+                      <Select placeholder="不限" style={{ maxWidth: 200, width: '100%' }}>
+                        <Option value="lisa">李三</Option>
+                      </Select>,
+                    )}
+                  </FormItem>
+                </Col>
+                <Col xl={8} lg={10} md={12} sm={24} xs={24}>
+                  <FormItem {...formItemLayout} label="好评度">
+                    {getFieldDecorator('rate', {})(
+                      <Select placeholder="不限" style={{ maxWidth: 200, width: '100%' }}>
+                        <Option value="good">优秀</Option>
+                      </Select>,
+                    )}
+                  </FormItem>
+                </Col>
+              </Row>
+            </StandardFormRow>
+          </Form>
+        </Card>
+        <Card
+          style={{ marginTop: 24 }}
+          bordered={false}
+          bodyStyle={{ padding: '8px 32px 32px 32px' }}
+        >
+          <List<ListItemDataType>
+            size="large"
+            loading={list.length === 0 ? loading : false}
+            rowKey="id"
+            itemLayout="vertical"
+            loadMore={loadMore}
+            dataSource={list}
+            renderItem={item => (
+              <List.Item
+                key={item.id}
+                actions={[
+                  <IconText key="star" type="star-o" text={item.star} />,
+                  <IconText key="like" type="like-o" text={item.like} />,
+                  <IconText type="message" key="message" text={item.message} />,
+                ]}
+                extra={<div className={styles.listItemExtra} />}
+              >
+                <List.Item.Meta
+                  title={
+                    <a className={styles.listItemMetaTitle} href={item.href}>
+                      {item.title}
+                    </a>
+                  }
+                  description={
+                    <span>
+                      <Tag>Ant Design</Tag>
+                      <Tag>设计语言</Tag>
+                      <Tag>蚂蚁金服</Tag>
+                    </span>
+                  }
+                />
+                <ArticleListContent data={item} />
+              </List.Item>
+            )}
+          />
+        </Card>
+      </>
+    );
+  }
+}
+
+const WarpForm = Form.create<ArticlesProps>({
+  onValuesChange({ dispatch }: ArticlesProps) {
+    // 表单项变化时请求数据
+    // 模拟查询表单生效
+    dispatch({
+      type: 'listSearchArticles/fetch',
+      payload: {
+        count: 8,
+      },
+    });
+  },
+})(Articles);
+
+export default connect(
+  ({
+    listSearchArticles,
+    loading,
+  }: {
+    listSearchArticles: StateType;
+    loading: { models: { [key: string]: boolean } };
+  }) => ({
+    listSearchArticles,
+    loading: loading.models.listSearchArticles,
+  }),
+)(WarpForm);
diff --git a/src/pages/list/search/articles/model.ts b/src/pages/list/search/articles/model.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9a10b25d9de6999a4820437050fd27e59c60f009
--- /dev/null
+++ b/src/pages/list/search/articles/model.ts
@@ -0,0 +1,69 @@
+import { AnyAction, Reducer } from 'redux';
+
+import { EffectsCommandMap } from 'dva';
+import { ListItemDataType } from './data.d';
+import { queryFakeList } from './service';
+
+export interface StateType {
+  list: ListItemDataType[];
+}
+
+export type Effect = (
+  action: AnyAction,
+  effects: EffectsCommandMap & { select: <T>(func: (state: StateType) => T) => T },
+) => void;
+
+export interface ModelType {
+  namespace: string;
+  state: StateType;
+  effects: {
+    fetch: Effect;
+    appendFetch: Effect;
+  };
+  reducers: {
+    queryList: Reducer<StateType>;
+    appendList: Reducer<StateType>;
+  };
+}
+
+const Model: ModelType = {
+  namespace: 'listSearchArticles',
+
+  state: {
+    list: [],
+  },
+
+  effects: {
+    *fetch({ payload }, { call, put }) {
+      const response = yield call(queryFakeList, payload);
+      yield put({
+        type: 'queryList',
+        payload: Array.isArray(response) ? response : [],
+      });
+    },
+    *appendFetch({ payload }, { call, put }) {
+      const response = yield call(queryFakeList, payload);
+      yield put({
+        type: 'appendList',
+        payload: Array.isArray(response) ? response : [],
+      });
+    },
+  },
+
+  reducers: {
+    queryList(state, action) {
+      return {
+        ...state,
+        list: action.payload,
+      };
+    },
+    appendList(state, action) {
+      return {
+        ...state,
+        list: (state as StateType).list.concat(action.payload),
+      };
+    },
+  },
+};
+
+export default Model;
diff --git a/src/pages/list/search/articles/service.ts b/src/pages/list/search/articles/service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1fbbdf958276c0b1ad231785f735739f445ea752
--- /dev/null
+++ b/src/pages/list/search/articles/service.ts
@@ -0,0 +1,8 @@
+import request from 'umi-request';
+import { ListItemDataType } from './data.d';
+
+export async function queryFakeList(params: ListItemDataType) {
+  return request('/api/fake_list', {
+    params,
+  });
+}
diff --git a/src/pages/list/search/articles/style.less b/src/pages/list/search/articles/style.less
new file mode 100644
index 0000000000000000000000000000000000000000..fe07d85195e008a1c001bce1b35b037d1e78fca2
--- /dev/null
+++ b/src/pages/list/search/articles/style.less
@@ -0,0 +1,31 @@
+@import '~antd/es/style/themes/default.less';
+
+a.listItemMetaTitle {
+  color: @heading-color;
+}
+.listItemExtra {
+  width: 272px;
+  height: 1px;
+}
+.selfTrigger {
+  margin-left: 12px;
+}
+
+@media screen and (max-width: @screen-xs) {
+  .selfTrigger {
+    display: block;
+    margin-left: 0;
+  }
+}
+@media screen and (max-width: @screen-md) {
+  .selfTrigger {
+    display: block;
+    margin-left: 0;
+  }
+}
+@media screen and (max-width: @screen-lg) {
+  .listItemExtra {
+    width: 0;
+    height: 1px;
+  }
+}
diff --git a/src/pages/list/search/index.tsx b/src/pages/list/search/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..3837ff2b83e6f42688f5d6dd3deb41605780ffdc
--- /dev/null
+++ b/src/pages/list/search/index.tsx
@@ -0,0 +1,95 @@
+import React, { Component } from 'react';
+
+import { Input } from 'antd';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import { connect } from 'dva';
+import router from 'umi/router';
+
+interface SearchProps {
+  match: {
+    url: string;
+    path: string;
+  };
+  location: {
+    pathname: string;
+  };
+}
+
+@connect()
+class Search extends Component<SearchProps> {
+  handleTabChange = (key: string) => {
+    const { match } = this.props;
+    const url = match.url === '/' ? '' : match.url;
+    switch (key) {
+      case 'articles':
+        router.push(`${url}/articles`);
+        break;
+      case 'applications':
+        router.push(`${url}/applications`);
+        break;
+      case 'projects':
+        router.push(`${url}/projects`);
+        break;
+      default:
+        break;
+    }
+  };
+
+  handleFormSubmit = (value: string) => {
+    console.log(value);
+  };
+
+  getTabKey = () => {
+    const { match, location } = this.props;
+    const url = match.path === '/' ? '' : match.path;
+    const tabKey = location.pathname.replace(`${url}/`, '');
+    if (tabKey && tabKey !== '/') {
+      return tabKey;
+    }
+    return 'articles';
+  };
+
+  render() {
+    const tabList = [
+      {
+        key: 'articles',
+        tab: '文章',
+      },
+      {
+        key: 'projects',
+        tab: '项目',
+      },
+      {
+        key: 'applications',
+        tab: '应用',
+      },
+    ];
+
+    const mainSearch = (
+      <div style={{ textAlign: 'center' }}>
+        <Input.Search
+          placeholder="请输入"
+          enterButton="搜索"
+          size="large"
+          onSearch={this.handleFormSubmit}
+          style={{ maxWidth: 522, width: '100%' }}
+        />
+      </div>
+    );
+
+    const { children } = this.props;
+
+    return (
+      <PageHeaderWrapper
+        content={mainSearch}
+        tabList={tabList}
+        tabActiveKey={this.getTabKey()}
+        onTabChange={this.handleTabChange}
+      >
+        {children}
+      </PageHeaderWrapper>
+    );
+  }
+}
+
+export default Search;
diff --git a/src/pages/list/search/projects/_mock.ts b/src/pages/list/search/projects/_mock.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5a12c6e299f1930822807da46f9a73d33eef8ff6
--- /dev/null
+++ b/src/pages/list/search/projects/_mock.ts
@@ -0,0 +1,113 @@
+import { ListItemDataType } from './data.d';
+
+const titles = [
+  'Alipay',
+  'Angular',
+  'Ant Design',
+  'Ant Design Pro',
+  'Bootstrap',
+  'React',
+  'Vue',
+  'Webpack',
+];
+const avatars = [
+  'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png', // Alipay
+  'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png', // Angular
+  'https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png', // Ant Design
+  'https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png', // Ant Design Pro
+  'https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png', // Bootstrap
+  'https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png', // React
+  'https://gw.alipayobjects.com/zos/rmsportal/ComBAopevLwENQdKWiIn.png', // Vue
+  'https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlMTCEe.png', // Webpack
+];
+
+const covers = [
+  'https://gw.alipayobjects.com/zos/rmsportal/uMfMFlvUuceEyPpotzlq.png',
+  'https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png',
+  'https://gw.alipayobjects.com/zos/rmsportal/iXjVmWVHbCJAyqvDxdtx.png',
+  'https://gw.alipayobjects.com/zos/rmsportal/gLaIAoVWTtLbBWZNYEMg.png',
+];
+const desc = [
+  '那是一种内在的东西， 他们到达不了，也无法触及的',
+  '希望是一个好东西，也许是最好的，好东西是不会消亡的',
+  '生命就像一盒巧克力，结果往往出人意料',
+  '城镇中有那么多的酒馆，她却偏偏走进了我的酒馆',
+  '那时候我只会想自己想要什么，从不想自己拥有什么',
+];
+const user = [
+  '付小小',
+  '曲丽丽',
+  '林东东',
+  '周星星',
+  '吴加好',
+  '朱偏右',
+  '鱼酱',
+  '乐哥',
+  '谭小仪',
+  '仲尼',
+];
+
+function fakeList(count: number): ListItemDataType[] {
+  const list = [];
+  for (let i = 0; i < count; i += 1) {
+    list.push({
+      id: `fake-list-${i}`,
+      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)],
+      status: ['active', 'exception', 'normal'][i % 3] as
+        | 'normal'
+        | 'exception'
+        | 'active'
+        | 'success',
+      percent: Math.ceil(Math.random() * 50) + 50,
+      logo: avatars[i % 8],
+      href: 'https://ant.design',
+      updatedAt: new Date(new Date().getTime() - 1000 * 60 * 60 * 2 * i).getTime(),
+      createdAt: new Date(new Date().getTime() - 1000 * 60 * 60 * 2 * i).getTime(),
+      subDescription: desc[i % 5],
+      description:
+        '在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的组件会被抽离成一套标准规范。',
+      activeUser: Math.ceil(Math.random() * 100000) + 100000,
+      newUser: Math.ceil(Math.random() * 1000) + 1000,
+      star: Math.ceil(Math.random() * 100) + 100,
+      like: Math.ceil(Math.random() * 100) + 100,
+      message: Math.ceil(Math.random() * 10) + 10,
+      content:
+        '段落示意：蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。',
+      members: [
+        {
+          avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png',
+          name: '曲丽丽',
+          id: 'member1',
+        },
+        {
+          avatar: 'https://gw.alipayobjects.com/zos/rmsportal/tBOxZPlITHqwlGjsJWaF.png',
+          name: '王昭君',
+          id: 'member2',
+        },
+        {
+          avatar: 'https://gw.alipayobjects.com/zos/rmsportal/sBxjgqiuHMGRkIjqlQCd.png',
+          name: '董娜娜',
+          id: 'member3',
+        },
+      ],
+    });
+  }
+
+  return list;
+}
+
+function getFakeList(req: { query: any }, res: { json: (arg0: any[]) => void }) {
+  const params = req.query;
+
+  const count = params.count * 1 || 20;
+
+  const result = fakeList(count);
+  return res.json(result);
+}
+
+export default {
+  'GET  /api/fake_list': getFakeList,
+};
diff --git a/src/pages/list/search/projects/components/AvatarList/index.less b/src/pages/list/search/projects/components/AvatarList/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..8c342fd17d509e1128061e5cf3ebbbd162f843f3
--- /dev/null
+++ b/src/pages/list/search/projects/components/AvatarList/index.less
@@ -0,0 +1,50 @@
+@import '~antd/es/style/themes/default.less';
+
+.avatarList {
+  display: inline-block;
+  ul {
+    display: inline-block;
+    margin-left: 8px;
+    font-size: 0;
+  }
+}
+
+.avatarItem {
+  display: inline-block;
+  width: @avatar-size-base;
+  height: @avatar-size-base;
+  margin-left: -8px;
+  font-size: @font-size-base;
+  :global {
+    .ant-avatar {
+      border: 1px solid #fff;
+    }
+  }
+}
+
+.avatarItemLarge {
+  width: @avatar-size-lg;
+  height: @avatar-size-lg;
+}
+
+.avatarItemSmall {
+  width: @avatar-size-sm;
+  height: @avatar-size-sm;
+}
+
+.avatarItemMini {
+  width: 20px;
+  height: 20px;
+  :global {
+    .ant-avatar {
+      width: 20px;
+      height: 20px;
+      line-height: 20px;
+
+      .ant-avatar-string {
+        font-size: 12px;
+        line-height: 18px;
+      }
+    }
+  }
+}
diff --git a/src/pages/list/search/projects/components/AvatarList/index.tsx b/src/pages/list/search/projects/components/AvatarList/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..2bb09b3766ce87b0fb2754dc2df15cee3ad16d5f
--- /dev/null
+++ b/src/pages/list/search/projects/components/AvatarList/index.tsx
@@ -0,0 +1,84 @@
+import { Avatar, Tooltip } from 'antd';
+
+import React from 'react';
+import classNames from 'classnames';
+import styles from './index.less';
+
+export declare type SizeType = number | 'small' | 'default' | 'large';
+
+export interface AvatarItemProps {
+  tips: React.ReactNode;
+  src: string;
+  size?: SizeType;
+  style?: React.CSSProperties;
+  onClick?: () => void;
+}
+
+export interface AvatarListProps {
+  Item?: React.ReactElement<AvatarItemProps>;
+  size?: SizeType;
+  maxLength?: number;
+  excessItemsStyle?: React.CSSProperties;
+  style?: React.CSSProperties;
+  children: React.ReactElement<AvatarItemProps> | React.ReactElement<AvatarItemProps>[];
+}
+
+const avatarSizeToClassName = (size?: SizeType) =>
+  classNames(styles.avatarItem, {
+    [styles.avatarItemLarge]: size === 'large',
+    [styles.avatarItemSmall]: size === 'small',
+    [styles.avatarItemMini]: size === 'mini',
+  });
+
+const Item: React.SFC<AvatarItemProps> = ({ src, size, tips, onClick = () => {} }) => {
+  const cls = avatarSizeToClassName(size);
+
+  return (
+    <li className={cls} onClick={onClick}>
+      {tips ? (
+        <Tooltip title={tips}>
+          <Avatar src={src} size={size} style={{ cursor: 'pointer' }} />
+        </Tooltip>
+      ) : (
+        <Avatar src={src} size={size} />
+      )}
+    </li>
+  );
+};
+
+const AvatarList: React.SFC<AvatarListProps> & { Item: typeof Item } = ({
+  children,
+  size,
+  maxLength = 5,
+  excessItemsStyle,
+  ...other
+}) => {
+  const numOfChildren = React.Children.count(children);
+  const numToShow = maxLength >= numOfChildren ? numOfChildren : maxLength;
+  const childrenArray = React.Children.toArray(children) as React.ReactElement<AvatarItemProps>[];
+  const childrenWithProps = childrenArray.slice(0, numToShow).map(child =>
+    React.cloneElement(child, {
+      size,
+    }),
+  );
+
+  if (numToShow < numOfChildren) {
+    const cls = avatarSizeToClassName(size);
+
+    childrenWithProps.push(
+      <li key="exceed" className={cls}>
+        <Avatar size={size} style={excessItemsStyle}>{`+${numOfChildren - maxLength}`}</Avatar>
+      </li>,
+    );
+  }
+
+  return (
+    <div {...other} className={styles.avatarList}>
+      <ul> {childrenWithProps} </ul>
+    </div>
+  );
+};
+
+AvatarList.Item = Item;
+
+export default AvatarList;
diff --git a/src/pages/list/search/projects/components/StandardFormRow/index.less b/src/pages/list/search/projects/components/StandardFormRow/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..f9ef95689f29e90c1a65ff03aa8dc4857bca7e9e
--- /dev/null
+++ b/src/pages/list/search/projects/components/StandardFormRow/index.less
@@ -0,0 +1,72 @@
+@import '~antd/es/style/themes/default.less';
+
+.standardFormRow {
+  display: flex;
+  margin-bottom: 16px;
+  padding-bottom: 16px;
+  border-bottom: 1px dashed @border-color-split;
+  :global {
+    .ant-form-item {
+      margin-right: 24px;
+    }
+    .ant-form-item-label label {
+      margin-right: 0;
+      color: @text-color;
+    }
+    .ant-form-item-label,
+    .ant-form-item-control {
+      padding: 0;
+      line-height: 32px;
+    }
+  }
+  .label {
+    flex: 0 0 auto;
+    margin-right: 24px;
+    color: @heading-color;
+    font-size: @font-size-base;
+    text-align: right;
+    & > span {
+      display: inline-block;
+      height: 32px;
+      line-height: 32px;
+      &::after {
+        content: '：';
+      }
+    }
+  }
+  .content {
+    flex: 1 1 0;
+    :global {
+      .ant-form-item:last-child {
+        margin-right: 0;
+      }
+    }
+  }
+}
+
+.standardFormRowLast {
+  margin-bottom: 0;
+  padding-bottom: 0;
+  border: none;
+}
+
+.standardFormRowBlock {
+  :global {
+    .ant-form-item,
+    div.ant-form-item-control-wrapper {
+      display: block;
+    }
+  }
+}
+
+.standardFormRowGrid {
+  :global {
+    .ant-form-item,
+    div.ant-form-item-control-wrapper {
+      display: block;
+    }
+    .ant-form-item-label {
+      float: left;
+    }
+  }
+}
diff --git a/src/pages/list/search/projects/components/StandardFormRow/index.tsx b/src/pages/list/search/projects/components/StandardFormRow/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..01a8bb5dabd9f232d14b6186c74909de407dfcb0
--- /dev/null
+++ b/src/pages/list/search/projects/components/StandardFormRow/index.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import classNames from 'classnames';
+import styles from './index.less';
+
+interface StandardFormRowProps {
+  title?: string;
+  last?: boolean;
+  block?: boolean;
+  grid?: boolean;
+  style?: React.CSSProperties;
+}
+
+const StandardFormRow: React.SFC<StandardFormRowProps> = ({
+  title,
+  children,
+  last,
+  block,
+  grid,
+  ...rest
+}) => {
+  const cls = classNames(styles.standardFormRow, {
+    [styles.standardFormRowBlock]: block,
+    [styles.standardFormRowLast]: last,
+    [styles.standardFormRowGrid]: grid,
+  });
+
+  return (
+    <div className={cls} {...rest}>
+      {title && (
+        <div className={styles.label}>
+          <span>{title}</span>
+        </div>
+      )}
+      <div className={styles.content}>{children}</div>
+    </div>
+  );
+};
+
+export default StandardFormRow;
diff --git a/src/pages/list/search/projects/components/TagSelect/index.less b/src/pages/list/search/projects/components/TagSelect/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..f38fa5c9c69ad8115b028acf31df84ad3c2c654f
--- /dev/null
+++ b/src/pages/list/search/projects/components/TagSelect/index.less
@@ -0,0 +1,33 @@
+@import '~antd/es/style/themes/default.less';
+
+.tagSelect {
+  position: relative;
+  max-height: 32px;
+  margin-left: -8px;
+  overflow: hidden;
+  line-height: 32px;
+  transition: all 0.3s;
+  user-select: none;
+  :global {
+    .ant-tag {
+      margin-right: 24px;
+      padding: 0 8px;
+      font-size: @font-size-base;
+    }
+  }
+  &.expanded {
+    max-height: 200px;
+    transition: all 0.3s;
+  }
+  .trigger {
+    position: absolute;
+    top: 0;
+    right: 0;
+    i {
+      font-size: 12px;
+    }
+  }
+  &.hasExpandTag {
+    padding-right: 50px;
+  }
+}
diff --git a/src/pages/list/search/projects/components/TagSelect/index.tsx b/src/pages/list/search/projects/components/TagSelect/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..9536230a6eff0030182a782d8db8605cca31e23c
--- /dev/null
+++ b/src/pages/list/search/projects/components/TagSelect/index.tsx
@@ -0,0 +1,172 @@
+import { Icon, Tag } from 'antd';
+import React, { Component } from 'react';
+
+import classNames from 'classnames';
+import styles from './index.less';
+
+const { CheckableTag } = Tag;
+
+export interface TagSelectOptionProps {
+  value?: string | number;
+  style?: React.CSSProperties;
+  checked?: boolean;
+  onChange?: (value: string | number | undefined, state: boolean) => void;
+}
+
+export interface TagSelectProps {
+  onChange?: (value: (string | number)[]) => void;
+  expandable?: boolean;
+  value?: (string | number)[];
+  defaultValue?: (string | number)[];
+  style?: React.CSSProperties;
+  hideCheckAll?: boolean;
+  actionsText?: {
+    expandText?: React.ReactNode;
+    collapseText?: React.ReactNode;
+    selectAllText?: React.ReactNode;
+  };
+  className?: string;
+  Option?: TagSelectOptionProps;
+  children?: React.ReactElement<TagSelectOption> | React.ReactElement<TagSelectOption>[];
+}
+
+const TagSelectOption: React.SFC<TagSelectOptionProps> & {
+  isTagSelectOption: boolean;
+} = ({ children, checked, onChange, value }) => (
+  <CheckableTag
+    checked={!!checked}
+    key={value}
+    onChange={state => onChange && onChange(value, state)}
+  >
+    {children}
+  </CheckableTag>
+);
+
+TagSelectOption.isTagSelectOption = true;
+
+interface TagSelectState {
+  expand: boolean;
+  value: (string | number)[];
+}
+
+class TagSelect extends Component<TagSelectProps, TagSelectState> {
+  static defaultProps = {
+    hideCheckAll: false,
+    actionsText: {
+      expandText: '展开',
+      collapseText: '收起',
+      selectAllText: '全部',
+    },
+  };
+
+  static Option: TagSelectOption = TagSelectOption;
+
+  static getDerivedStateFromProps(nextProps: TagSelectProps) {
+    if ('value' in nextProps) {
+      return { value: nextProps.value || [] };
+    }
+    return null;
+  }
+
+  constructor(props: TagSelectProps) {
+    super(props);
+    this.state = {
+      expand: false,
+      value: props.value || props.defaultValue || [],
+    };
+  }
+
+  onChange = (value: (string | number)[]) => {
+    const { onChange } = this.props;
+    if (!('value' in this.props)) {
+      this.setState({ value });
+    }
+    if (onChange) {
+      onChange(value);
+    }
+  };
+
+  onSelectAll = (checked: boolean) => {
+    let checkedTags: (string | number)[] = [];
+    if (checked) {
+      checkedTags = this.getAllTags();
+    }
+    this.onChange(checkedTags);
+  };
+
+  getAllTags() {
+    const { children } = this.props;
+    const childrenArray = React.Children.toArray(children) as React.ReactElement<TagSelectOption>[];
+    const checkedTags = childrenArray
+      .filter(child => this.isTagSelectOption(child))
+      .map(child => child.props.value);
+    return checkedTags || [];
+  }
+
+  handleTagChange = (value: string | number, checked: boolean) => {
+    const { value: StateValue } = this.state;
+    const checkedTags: (string | number)[] = [...StateValue];
+
+    const index = checkedTags.indexOf(value);
+    if (checked && index === -1) {
+      checkedTags.push(value);
+    } else if (!checked && index > -1) {
+      checkedTags.splice(index, 1);
+    }
+    this.onChange(checkedTags);
+  };
+
+  handleExpand = () => {
+    const { expand } = this.state;
+    this.setState({
+      expand: !expand,
+    });
+  };
+
+  isTagSelectOption = (node: React.ReactElement<TagSelectOption, TagSelectOption>) =>
+    node &&
+    node.type &&
+    (node.type.isTagSelectOption || node.type.displayName === 'TagSelectOption');
+
+  render() {
+    const { value, expand } = this.state;
+    const { children, hideCheckAll, className, style, expandable, actionsText = {} } = this.props;
+    const checkedAll = this.getAllTags().length === value.length;
+    const { expandText = '展开', collapseText = '收起', selectAllText = '全部' } = actionsText;
+
+    const cls = classNames(styles.tagSelect, className, {
+      [styles.hasExpandTag]: expandable,
+      [styles.expanded]: expand,
+    });
+
+    return (
+      <div className={cls} style={style}>
+        {hideCheckAll ? null : (
+          <CheckableTag checked={checkedAll} key="tag-select-__all__" onChange={this.onSelectAll}>
+            {selectAllText}
+          </CheckableTag>
+        )}
+        {value &&
+          children &&
+          React.Children.map(children, (child: React.ReactElement<TagSelectOption>) => {
+            if (this.isTagSelectOption(child)) {
+              return React.cloneElement(child, {
+                key: `tag-select-${child.props.value}`,
+                value: child.props.value,
+                checked: value.indexOf(child.props.value) > -1,
+                onChange: this.handleTagChange,
+              });
+            }
+            return child;
+          })}
+        {expandable && (
+          <a className={styles.trigger} onClick={this.handleExpand}>
+            {expand ? collapseText : expandText} <Icon type={expand ? 'up' : 'down'} />
+          </a>
+        )}
+      </div>
+    );
+  }
+}
+
+export default TagSelect;
diff --git a/src/pages/list/search/projects/data.d.ts b/src/pages/list/search/projects/data.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6a4a88ce1a0c1b9d32dd8a5925828858d27cc0b4
--- /dev/null
+++ b/src/pages/list/search/projects/data.d.ts
@@ -0,0 +1,29 @@
+export interface Member {
+  avatar: string;
+  name: string;
+  id: string;
+}
+
+export interface ListItemDataType {
+  id: string;
+  owner: string;
+  title: string;
+  avatar: string;
+  cover: string;
+  status: 'normal' | 'exception' | 'active' | 'success';
+  percent: number;
+  logo: string;
+  href: string;
+  body?: any;
+  updatedAt: number;
+  createdAt: number;
+  subDescription: string;
+  description: string;
+  activeUser: number;
+  newUser: number;
+  star: number;
+  like: number;
+  message: number;
+  content: string;
+  members: Member[];
+}
diff --git a/src/pages/list/search/projects/index.tsx b/src/pages/list/search/projects/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..68fa205b5b558ea247f3f227105078bdebfb7650
--- /dev/null
+++ b/src/pages/list/search/projects/index.tsx
@@ -0,0 +1,171 @@
+import { Card, Col, Form, List, Row, Select, Typography } from 'antd';
+import React, { Component } from 'react';
+
+import { Dispatch } from 'redux';
+import { FormComponentProps } from 'antd/es/form';
+import { connect } from 'dva';
+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 styles from './style.less';
+
+const { Option } = Select;
+const FormItem = Form.Item;
+const { Paragraph } = Typography;
+
+interface ProjectsProps extends FormComponentProps {
+  dispatch: Dispatch<any>;
+  listSearchProjects: StateType;
+  loading: boolean;
+}
+
+class Projects extends Component<ProjectsProps> {
+  componentDidMount() {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'listSearchProjects/fetch',
+      payload: {
+        count: 8,
+      },
+    });
+  }
+
+  render() {
+    const {
+      listSearchProjects: { list = [] },
+      loading,
+      form,
+    } = this.props;
+    const { getFieldDecorator } = form;
+
+    const cardList = list ? (
+      <List<ListItemDataType>
+        rowKey="id"
+        loading={loading}
+        grid={{ gutter: 24, xl: 4, lg: 3, md: 3, sm: 2, xs: 1 }}
+        dataSource={list}
+        renderItem={item => (
+          <List.Item>
+            <Card
+              className={styles.card}
+              hoverable
+              cover={<img alt={item.title} src={item.cover} />}
+            >
+              <Card.Meta
+                title={<a>{item.title}</a>}
+                description={
+                  <Paragraph className={styles.item} ellipsis={{ rows: 2 }}>
+                    {item.subDescription}
+                  </Paragraph>
+                }
+              />
+              <div className={styles.cardItemContent}>
+                <span>{moment(item.updatedAt).fromNow()}</span>
+                <div className={styles.avatarList}>
+                  <AvatarList size="small">
+                    {item.members.map(member => (
+                      <AvatarList.Item
+                        key={`${item.id}-avatar`}
+                        src={member.avatar}
+                        tips={member.name}
+                      />
+                    ))}
+                  </AvatarList>
+                </div>
+              </div>
+            </Card>
+          </List.Item>
+        )}
+      />
+    ) : null;
+
+    const formItemLayout = {
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 16 },
+      },
+    };
+
+    return (
+      <div className={styles.coverCardList}>
+        <Card bordered={false}>
+          <Form layout="inline">
+            <StandardFormRow title="所属类目" block style={{ paddingBottom: 11 }}>
+              <FormItem>
+                {getFieldDecorator('category')(
+                  <TagSelect expandable>
+                    <TagSelect.Option value="cat1">类目一</TagSelect.Option>
+                    <TagSelect.Option value="cat2">类目二</TagSelect.Option>
+                    <TagSelect.Option value="cat3">类目三</TagSelect.Option>
+                    <TagSelect.Option value="cat4">类目四</TagSelect.Option>
+                    <TagSelect.Option value="cat5">类目五</TagSelect.Option>
+                    <TagSelect.Option value="cat6">类目六</TagSelect.Option>
+                    <TagSelect.Option value="cat7">类目七</TagSelect.Option>
+                    <TagSelect.Option value="cat8">类目八</TagSelect.Option>
+                    <TagSelect.Option value="cat9">类目九</TagSelect.Option>
+                    <TagSelect.Option value="cat10">类目十</TagSelect.Option>
+                    <TagSelect.Option value="cat11">类目十一</TagSelect.Option>
+                    <TagSelect.Option value="cat12">类目十二</TagSelect.Option>
+                  </TagSelect>,
+                )}
+              </FormItem>
+            </StandardFormRow>
+            <StandardFormRow title="其它选项" grid last>
+              <Row gutter={16}>
+                <Col lg={8} md={10} sm={10} xs={24}>
+                  <FormItem {...formItemLayout} label="作者">
+                    {getFieldDecorator('author', {})(
+                      <Select placeholder="不限" style={{ maxWidth: 200, width: '100%' }}>
+                        <Option value="lisa">王昭君</Option>
+                      </Select>,
+                    )}
+                  </FormItem>
+                </Col>
+                <Col lg={8} md={10} sm={10} xs={24}>
+                  <FormItem {...formItemLayout} label="好评度">
+                    {getFieldDecorator('rate', {})(
+                      <Select placeholder="不限" style={{ maxWidth: 200, width: '100%' }}>
+                        <Option value="good">优秀</Option>
+                        <Option value="normal">普通</Option>
+                      </Select>,
+                    )}
+                  </FormItem>
+                </Col>
+              </Row>
+            </StandardFormRow>
+          </Form>
+        </Card>
+        <div className={styles.cardList}>{cardList}</div>
+      </div>
+    );
+  }
+}
+
+const WarpForm = Form.create<ProjectsProps>({
+  onValuesChange({ dispatch }: ProjectsProps) {
+    // 表单项变化时请求数据
+    // 模拟查询表单生效
+    dispatch({
+      type: 'listSearchProjects/fetch',
+      payload: {
+        count: 8,
+      },
+    });
+  },
+})(Projects);
+
+export default connect(
+  ({
+    listSearchProjects,
+    loading,
+  }: {
+    listSearchProjects: StateType;
+    loading: { models: { [key: string]: boolean } };
+  }) => ({
+    listSearchProjects,
+    loading: loading.models.listSearchProjects,
+  }),
+)(WarpForm);
diff --git a/src/pages/list/search/projects/model.ts b/src/pages/list/search/projects/model.ts
new file mode 100644
index 0000000000000000000000000000000000000000..82fac8e2f9be33089ffd0720a9c7b3252f536c18
--- /dev/null
+++ b/src/pages/list/search/projects/model.ts
@@ -0,0 +1,54 @@
+import { AnyAction, Reducer } from 'redux';
+
+import { EffectsCommandMap } from 'dva';
+import { ListItemDataType } from './data.d';
+import { queryFakeList } from './service';
+
+export interface StateType {
+  list: ListItemDataType[];
+}
+
+export type Effect = (
+  action: AnyAction,
+  effects: EffectsCommandMap & { select: <T>(func: (state: StateType) => T) => T },
+) => void;
+
+export interface ModelType {
+  namespace: string;
+  state: StateType;
+  effects: {
+    fetch: Effect;
+  };
+  reducers: {
+    queryList: Reducer<StateType>;
+  };
+}
+
+const Model: ModelType = {
+  namespace: 'listSearchProjects',
+
+  state: {
+    list: [],
+  },
+
+  effects: {
+    *fetch({ payload }, { call, put }) {
+      const response = yield call(queryFakeList, payload);
+      yield put({
+        type: 'queryList',
+        payload: Array.isArray(response) ? response : [],
+      });
+    },
+  },
+
+  reducers: {
+    queryList(state, action) {
+      return {
+        ...state,
+        list: action.payload,
+      };
+    },
+  },
+};
+
+export default Model;
diff --git a/src/pages/list/search/projects/service.ts b/src/pages/list/search/projects/service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..fcd22bc04b4b79761ac54e00a4de98752b38869d
--- /dev/null
+++ b/src/pages/list/search/projects/service.ts
@@ -0,0 +1,7 @@
+import request from 'umi-request';
+
+export async function queryFakeList(params: { count: number }) {
+  return request('/api/fake_list', {
+    params,
+  });
+}
diff --git a/src/pages/list/search/projects/style.less b/src/pages/list/search/projects/style.less
new file mode 100644
index 0000000000000000000000000000000000000000..1fc1bff946d4d58cfd7046b4eef03bb9cbd5cd03
--- /dev/null
+++ b/src/pages/list/search/projects/style.less
@@ -0,0 +1,57 @@
+@import '~antd/es/style/themes/default.less';
+@import './utils/utils.less';
+
+.coverCardList {
+  margin-bottom: -24px;
+
+  .card {
+    :global {
+      .ant-card-meta-title {
+        margin-bottom: 4px;
+        & > a {
+          display: inline-block;
+          max-width: 100%;
+          color: @heading-color;
+        }
+      }
+      .ant-card-meta-description {
+        height: 44px;
+        overflow: hidden;
+        line-height: 22px;
+      }
+    }
+
+    &:hover {
+      :global {
+        .ant-card-meta-title > a {
+          color: @primary-color;
+        }
+      }
+    }
+  }
+
+  .cardItemContent {
+    display: flex;
+    height: 20px;
+    margin-top: 16px;
+    margin-bottom: -4px;
+    line-height: 20px;
+    & > span {
+      flex: 1;
+      color: @text-color-secondary;
+      font-size: 12px;
+    }
+    .avatarList {
+      flex: 0 1 auto;
+    }
+  }
+  .cardList {
+    margin-top: 24px;
+  }
+
+  :global {
+    .ant-list .ant-list-item-content-single {
+      max-width: 100%;
+    }
+  }
+}
diff --git a/src/pages/list/search/projects/utils/utils.less b/src/pages/list/search/projects/utils/utils.less
new file mode 100644
index 0000000000000000000000000000000000000000..de1aa64222b6f14328d3a9e3c262ac5a31cce5af
--- /dev/null
+++ b/src/pages/list/search/projects/utils/utils.less
@@ -0,0 +1,50 @@
+.textOverflow() {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  word-break: break-all;
+}
+
+.textOverflowMulti(@line: 3, @bg: #fff) {
+  position: relative;
+  max-height: @line * 1.5em;
+  margin-right: -1em;
+  padding-right: 1em;
+  overflow: hidden;
+  line-height: 1.5em;
+  text-align: justify;
+  &::before {
+    position: absolute;
+    right: 14px;
+    bottom: 0;
+    padding: 0 1px;
+    background: @bg;
+    content: '...';
+  }
+  &::after {
+    position: absolute;
+    right: 14px;
+    width: 1em;
+    height: 1em;
+    margin-top: 0.2em;
+    background: white;
+    content: '';
+  }
+}
+
+// mixins for clearfix
+// ------------------------
+.clearfix() {
+  zoom: 1;
+  &::before,
+  &::after {
+    display: table;
+    content: ' ';
+  }
+  &::after {
+    clear: both;
+    height: 0;
+    font-size: 0;
+    visibility: hidden;
+  }
+}
diff --git a/src/pages/list/search/utils/utils.less b/src/pages/list/search/utils/utils.less
new file mode 100644
index 0000000000000000000000000000000000000000..de1aa64222b6f14328d3a9e3c262ac5a31cce5af
--- /dev/null
+++ b/src/pages/list/search/utils/utils.less
@@ -0,0 +1,50 @@
+.textOverflow() {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  word-break: break-all;
+}
+
+.textOverflowMulti(@line: 3, @bg: #fff) {
+  position: relative;
+  max-height: @line * 1.5em;
+  margin-right: -1em;
+  padding-right: 1em;
+  overflow: hidden;
+  line-height: 1.5em;
+  text-align: justify;
+  &::before {
+    position: absolute;
+    right: 14px;
+    bottom: 0;
+    padding: 0 1px;
+    background: @bg;
+    content: '...';
+  }
+  &::after {
+    position: absolute;
+    right: 14px;
+    width: 1em;
+    height: 1em;
+    margin-top: 0.2em;
+    background: white;
+    content: '';
+  }
+}
+
+// mixins for clearfix
+// ------------------------
+.clearfix() {
+  zoom: 1;
+  &::before,
+  &::after {
+    display: table;
+    content: ' ';
+  }
+  &::after {
+    clear: both;
+    height: 0;
+    font-size: 0;
+    visibility: hidden;
+  }
+}
diff --git a/src/pages/list/table-list/_mock.ts b/src/pages/list/table-list/_mock.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c22e0ca05fd97f6bed226cd022b71e48e90919f0
--- /dev/null
+++ b/src/pages/list/table-list/_mock.ts
@@ -0,0 +1,162 @@
+import { parse } from 'url';
+import { TableListItem, TableListParams } from './data.d';
+
+// mock tableListDataSource
+let tableListDataSource: TableListItem[] = [];
+
+for (let i = 0; i < 8; i += 1) {
+  tableListDataSource.push({
+    key: i,
+    disabled: i % 6 === 0,
+    href: 'https://ant.design',
+    avatar: [
+      'https://gw.alipayobjects.com/zos/rmsportal/eeHMaZBwmTvLdIwMfBpg.png',
+      'https://gw.alipayobjects.com/zos/rmsportal/udxAbMEhpwthVVcjLXik.png',
+    ][i % 2],
+    name: `TradeCode ${i}`,
+    title: `一个任务名称 ${i}`,
+    owner: '曲丽丽',
+    desc: '这是一段描述',
+    callNo: Math.floor(Math.random() * 1000),
+    status: Math.floor(Math.random() * 10) % 4,
+    updatedAt: new Date(`2017-07-${Math.floor(i / 2) + 1}`),
+    createdAt: new Date(`2017-07-${Math.floor(i / 2) + 1}`),
+    progress: Math.ceil(Math.random() * 100),
+  });
+}
+
+function getRule(
+  req: { url: any },
+  res: {
+    json: (
+      arg0: {
+        list: TableListItem[];
+        pagination: { total: number; pageSize: number; current: number };
+      },
+    ) => void;
+  },
+  u: any,
+) {
+  let url = u;
+  if (!url || Object.prototype.toString.call(url) !== '[object String]') {
+    // eslint-disable-next-line prefer-destructuring
+    url = req.url;
+  }
+
+  const params = (parse(url, true).query as unknown) as TableListParams;
+
+  let dataSource = tableListDataSource;
+
+  if (params.sorter) {
+    const s = params.sorter.split('_');
+    dataSource = dataSource.sort((prev, next) => {
+      if (s[1] === 'descend') {
+        return next[s[0]] - prev[s[0]];
+      }
+      return prev[s[0]] - next[s[0]];
+    });
+  }
+
+  if (params.status) {
+    const status = params.status.split(',');
+    let filterDataSource: TableListItem[] = [];
+    status.forEach((s: string) => {
+      filterDataSource = filterDataSource.concat(
+        dataSource.filter(item => {
+          if (parseInt(`${item.status}`, 10) === parseInt(s.split('')[0], 10)) {
+            return true;
+          }
+          return false;
+        }),
+      );
+    });
+    dataSource = filterDataSource;
+  }
+
+  if (params.name) {
+    dataSource = dataSource.filter(data => data.name.indexOf(params.name) > -1);
+  }
+
+  let pageSize = 10;
+  if (params.pageSize) {
+    pageSize = parseInt(`${params.pageSize}`, 0);
+  }
+
+  const result = {
+    list: dataSource,
+    pagination: {
+      total: dataSource.length,
+      pageSize,
+      current: parseInt(`${params.currentPage}`, 10) || 1,
+    },
+  };
+
+  return res.json(result);
+}
+
+function postRule(
+  req: { url: any; body: any },
+  res: { json: (arg0: { list: TableListItem[]; pagination: { total: number } }) => void },
+  u: any,
+  b: { body: any },
+) {
+  let url = u;
+  if (!url || Object.prototype.toString.call(url) !== '[object String]') {
+    // eslint-disable-next-line prefer-destructuring
+    url = req.url;
+  }
+
+  const body = (b && b.body) || req.body;
+  const { method, name, desc, key } = body;
+
+  switch (method) {
+    /* eslint no-case-declarations:0 */
+    case 'delete':
+      tableListDataSource = tableListDataSource.filter(item => key.indexOf(item.key) === -1);
+      break;
+    case 'post':
+      const i = Math.ceil(Math.random() * 10000);
+      tableListDataSource.unshift({
+        key: i,
+        href: 'https://ant.design',
+        avatar: [
+          'https://gw.alipayobjects.com/zos/rmsportal/eeHMaZBwmTvLdIwMfBpg.png',
+          'https://gw.alipayobjects.com/zos/rmsportal/udxAbMEhpwthVVcjLXik.png',
+        ][i % 2],
+        name: `TradeCode ${i}`,
+        title: `一个任务名称 ${i}`,
+        owner: '曲丽丽',
+        desc,
+        callNo: Math.floor(Math.random() * 1000),
+        status: Math.floor(Math.random() * 10) % 2,
+        updatedAt: new Date(),
+        createdAt: new Date(),
+        progress: Math.ceil(Math.random() * 100),
+      });
+      break;
+    case 'update':
+      tableListDataSource = tableListDataSource.map(item => {
+        if (item.key === key) {
+          return { ...item, desc, name };
+        }
+        return item;
+      });
+      break;
+    default:
+      break;
+  }
+
+  const result = {
+    list: tableListDataSource,
+    pagination: {
+      total: tableListDataSource.length,
+    },
+  };
+
+  return res.json(result);
+}
+
+export default {
+  'GET /api/rule': getRule,
+  'POST /api/rule': postRule,
+};
diff --git a/src/pages/list/table-list/components/CreateForm.tsx b/src/pages/list/table-list/components/CreateForm.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..323dc31f0c9b176fbb408281a9f0fef3b2334e39
--- /dev/null
+++ b/src/pages/list/table-list/components/CreateForm.tsx
@@ -0,0 +1,43 @@
+import { Form, Input, Modal } from 'antd';
+
+import { FormComponentProps } from 'antd/es/form';
+import React from 'react';
+
+const FormItem = Form.Item;
+
+interface CreateFormProps extends FormComponentProps {
+  modalVisible: boolean;
+  handleAdd: (
+    fieldsValue: {
+      desc: string;
+    },
+  ) => void;
+  handleModalVisible: () => void;
+}
+const CreateForm: React.SFC<CreateFormProps> = props => {
+  const { modalVisible, form, handleAdd, handleModalVisible } = props;
+  const okHandle = () => {
+    form.validateFields((err, fieldsValue) => {
+      if (err) return;
+      form.resetFields();
+      handleAdd(fieldsValue);
+    });
+  };
+  return (
+    <Modal
+      destroyOnClose
+      title="新建规则"
+      visible={modalVisible}
+      onOk={okHandle}
+      onCancel={() => handleModalVisible()}
+    >
+      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="描述">
+        {form.getFieldDecorator('desc', {
+          rules: [{ required: true, message: '请输入至少五个字符的规则描述！', min: 5 }],
+        })(<Input placeholder="请输入" />)}
+      </FormItem>
+    </Modal>
+  );
+};
+
+export default CreateForm;
diff --git a/src/pages/list/table-list/components/StandardTable/index.less b/src/pages/list/table-list/components/StandardTable/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..29d7a05239a8baf5c80994c72fbccd4de2d923f3
--- /dev/null
+++ b/src/pages/list/table-list/components/StandardTable/index.less
@@ -0,0 +1,13 @@
+@import '~antd/es/style/themes/default.less';
+
+.standardTable {
+  :global {
+    .ant-table-pagination {
+      margin-top: 24px;
+    }
+  }
+
+  .tableAlert {
+    margin-bottom: 16px;
+  }
+}
diff --git a/src/pages/list/table-list/components/StandardTable/index.tsx b/src/pages/list/table-list/components/StandardTable/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..451b77607be9a96f8840eb9ce7c21a573c6fedd9
--- /dev/null
+++ b/src/pages/list/table-list/components/StandardTable/index.tsx
@@ -0,0 +1,162 @@
+import { Alert, Table } from 'antd';
+import { ColumnProps, TableRowSelection, TableProps } from 'antd/es/table';
+import React, { Component, Fragment } from 'react';
+
+import { TableListItem } from '../../data.d';
+import styles from './index.less';
+
+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: TableListItem[];
+    pagination: StandardTableProps<TableListItem>['pagination'];
+  };
+  selectedRows: TableListItem[];
+  onSelectRow: (rows: any) => void;
+}
+
+export interface StandardTableColumnProps extends ColumnProps<TableListItem> {
+  needTotal?: boolean;
+  total?: number;
+}
+
+function initTotalList(columns: StandardTableColumnProps[]) {
+  if (!columns) {
+    return [];
+  }
+  const totalList: StandardTableColumnProps[] = [];
+  columns.forEach(column => {
+    if (column.needTotal) {
+      totalList.push({ ...column, total: 0 });
+    }
+  });
+  return totalList;
+}
+
+interface StandardTableState {
+  selectedRowKeys: string[];
+  needTotalList: StandardTableColumnProps[];
+}
+
+class StandardTable extends Component<StandardTableProps<TableListItem>, StandardTableState> {
+  static getDerivedStateFromProps(nextProps: StandardTableProps<TableListItem>) {
+    // clean state
+    if (nextProps.selectedRows.length === 0) {
+      const needTotalList = initTotalList(nextProps.columns);
+      return {
+        selectedRowKeys: [],
+        needTotalList,
+      };
+    }
+    return null;
+  }
+
+  constructor(props: StandardTableProps<TableListItem>) {
+    super(props);
+    const { columns } = props;
+    const needTotalList = initTotalList(columns);
+
+    this.state = {
+      selectedRowKeys: [],
+      needTotalList,
+    };
+  }
+
+  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 || 0]), 0),
+    }));
+    const { onSelectRow } = this.props;
+    if (onSelectRow) {
+      onSelectRow(selectedRows);
+    }
+
+    this.setState({ selectedRowKeys: currySelectedRowKeys, needTotalList });
+  };
+
+  handleTableChange: TableProps<TableListItem>['onChange'] = (
+    pagination,
+    filters,
+    sorter,
+    ...rest
+  ) => {
+    const { onChange } = this.props;
+    if (onChange) {
+      onChange(pagination, filters, sorter, ...rest);
+    }
+  };
+
+  cleanSelectedKeys = () => {
+    if (this.handleRowSelectChange) {
+      this.handleRowSelectChange([], []);
+    }
+  };
+
+  render() {
+    const { selectedRowKeys, needTotalList } = this.state;
+    const { data, rowKey, ...rest } = this.props;
+    const { list = [], pagination = false } = data || {};
+
+    const paginationProps = {
+      showSizeChanger: true,
+      showQuickJumper: true,
+      ...pagination,
+    };
+
+    const rowSelection: TableRowSelection<TableListItem> = {
+      selectedRowKeys,
+      onChange: this.handleRowSelectChange,
+      getCheckboxProps: (record: TableListItem) => ({
+        disabled: record.disabled,
+      }),
+    };
+
+    return (
+      <div className={styles.standardTable}>
+        <div className={styles.tableAlert}>
+          <Alert
+            message={
+              <Fragment>
+                已选择 <a style={{ fontWeight: 600 }}>{selectedRowKeys.length}</a> 项&nbsp;&nbsp;
+                {needTotalList.map((item, index) => (
+                  <span style={{ marginLeft: 8 }} key={item.dataIndex}>
+                    {item.title}
+                    总计&nbsp;
+                    <span style={{ fontWeight: 600 }}>
+                      {item.render
+                        ? item.render(item.total, item as TableListItem, index)
+                        : item.total}
+                    </span>
+                  </span>
+                ))}
+                <a onClick={this.cleanSelectedKeys} style={{ marginLeft: 24 }}>
+                  清空
+                </a>
+              </Fragment>
+            }
+            type="info"
+            showIcon
+          />
+        </div>
+        <Table
+          rowKey={rowKey || 'key'}
+          rowSelection={rowSelection}
+          dataSource={list}
+          pagination={paginationProps}
+          onChange={this.handleTableChange}
+          {...rest}
+        />
+      </div>
+    );
+  }
+}
+
+export default StandardTable;
diff --git a/src/pages/list/table-list/components/UpdateForm.tsx b/src/pages/list/table-list/components/UpdateForm.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..2b69092dcb225038aaa273bb8661c65961f91d70
--- /dev/null
+++ b/src/pages/list/table-list/components/UpdateForm.tsx
@@ -0,0 +1,239 @@
+import { Button, DatePicker, Form, Input, Modal, Radio, Select, Steps } from 'antd';
+import React, { Component } from 'react';
+
+import { FormComponentProps } from 'antd/es/form';
+import { TableListItem } from '../data.d';
+
+export interface FormValsType extends Partial<TableListItem> {
+  target?: string;
+  template?: string;
+  type?: string;
+  time?: string;
+  frequency?: string;
+}
+
+export interface UpdateFormProps extends FormComponentProps {
+  handleUpdateModalVisible: (flag?: boolean, formVals?: FormValsType) => void;
+  handleUpdate: (values: FormValsType) => void;
+  updateModalVisible: boolean;
+  values: Partial<TableListItem>;
+}
+const FormItem = Form.Item;
+const { Step } = Steps;
+const { TextArea } = Input;
+const { Option } = Select;
+const RadioGroup = Radio.Group;
+
+export interface UpdateFormState {
+  formVals: FormValsType;
+  currentStep: number;
+}
+
+class UpdateForm extends Component<UpdateFormProps, UpdateFormState> {
+  static defaultProps = {
+    handleUpdate: () => {},
+    handleUpdateModalVisible: () => {},
+    values: {},
+  };
+
+  formLayout = {
+    labelCol: { span: 7 },
+    wrapperCol: { span: 13 },
+  };
+
+  constructor(props: UpdateFormProps) {
+    super(props);
+
+    this.state = {
+      formVals: {
+        name: props.values.name,
+        desc: props.values.desc,
+        key: props.values.key,
+        target: '0',
+        template: '0',
+        type: '1',
+        time: '',
+        frequency: 'month',
+      },
+      currentStep: 0,
+    };
+  }
+
+  handleNext = (currentStep: number) => {
+    const { form, handleUpdate } = this.props;
+    const { formVals: oldValue } = this.state;
+    form.validateFields((err, fieldsValue) => {
+      if (err) return;
+      const formVals = { ...oldValue, ...fieldsValue };
+      this.setState(
+        {
+          formVals,
+        },
+        () => {
+          if (currentStep < 2) {
+            this.forward();
+          } else {
+            handleUpdate(formVals);
+          }
+        },
+      );
+    });
+  };
+
+  backward = () => {
+    const { currentStep } = this.state;
+    this.setState({
+      currentStep: currentStep - 1,
+    });
+  };
+
+  forward = () => {
+    const { currentStep } = this.state;
+    this.setState({
+      currentStep: currentStep + 1,
+    });
+  };
+
+  renderContent = (currentStep: number, formVals: FormValsType) => {
+    const { form } = this.props;
+    if (currentStep === 1) {
+      return [
+        <FormItem key="target" {...this.formLayout} label="监控对象">
+          {form.getFieldDecorator('target', {
+            initialValue: formVals.target,
+          })(
+            <Select style={{ width: '100%' }}>
+              <Option value="0">表一</Option>
+              <Option value="1">表二</Option>
+            </Select>,
+          )}
+        </FormItem>,
+        <FormItem key="template" {...this.formLayout} label="规则模板">
+          {form.getFieldDecorator('template', {
+            initialValue: formVals.template,
+          })(
+            <Select style={{ width: '100%' }}>
+              <Option value="0">规则模板一</Option>
+              <Option value="1">规则模板二</Option>
+            </Select>,
+          )}
+        </FormItem>,
+        <FormItem key="type" {...this.formLayout} label="规则类型">
+          {form.getFieldDecorator('type', {
+            initialValue: formVals.type,
+          })(
+            <RadioGroup>
+              <Radio value="0">强</Radio>
+              <Radio value="1">弱</Radio>
+            </RadioGroup>,
+          )}
+        </FormItem>,
+      ];
+    }
+    if (currentStep === 2) {
+      return [
+        <FormItem key="time" {...this.formLayout} label="开始时间">
+          {form.getFieldDecorator('time', {
+            rules: [{ required: true, message: '请选择开始时间！' }],
+          })(
+            <DatePicker
+              style={{ width: '100%' }}
+              showTime
+              format="YYYY-MM-DD HH:mm:ss"
+              placeholder="选择开始时间"
+            />,
+          )}
+        </FormItem>,
+        <FormItem key="frequency" {...this.formLayout} label="调度周期">
+          {form.getFieldDecorator('frequency', {
+            initialValue: formVals.frequency,
+          })(
+            <Select style={{ width: '100%' }}>
+              <Option value="month">月</Option>
+              <Option value="week">周</Option>
+            </Select>,
+          )}
+        </FormItem>,
+      ];
+    }
+    return [
+      <FormItem key="name" {...this.formLayout} label="规则名称">
+        {form.getFieldDecorator('name', {
+          rules: [{ required: true, message: '请输入规则名称！' }],
+          initialValue: formVals.name,
+        })(<Input placeholder="请输入" />)}
+      </FormItem>,
+      <FormItem key="desc" {...this.formLayout} label="规则描述">
+        {form.getFieldDecorator('desc', {
+          rules: [{ required: true, message: '请输入至少五个字符的规则描述！', min: 5 }],
+          initialValue: formVals.desc,
+        })(<TextArea rows={4} placeholder="请输入至少五个字符" />)}
+      </FormItem>,
+    ];
+  };
+
+  renderFooter = (currentStep: number) => {
+    const { handleUpdateModalVisible, values } = this.props;
+    if (currentStep === 1) {
+      return [
+        <Button key="back" style={{ float: 'left' }} onClick={this.backward}>
+          上一步
+        </Button>,
+        <Button key="cancel" onClick={() => handleUpdateModalVisible(false, values)}>
+          取消
+        </Button>,
+        <Button key="forward" type="primary" onClick={() => this.handleNext(currentStep)}>
+          下一步
+        </Button>,
+      ];
+    }
+    if (currentStep === 2) {
+      return [
+        <Button key="back" style={{ float: 'left' }} onClick={this.backward}>
+          上一步
+        </Button>,
+        <Button key="cancel" onClick={() => handleUpdateModalVisible(false, values)}>
+          取消
+        </Button>,
+        <Button key="submit" type="primary" onClick={() => this.handleNext(currentStep)}>
+          完成
+        </Button>,
+      ];
+    }
+    return [
+      <Button key="cancel" onClick={() => handleUpdateModalVisible(false, values)}>
+        取消
+      </Button>,
+      <Button key="forward" type="primary" onClick={() => this.handleNext(currentStep)}>
+        下一步
+      </Button>,
+    ];
+  };
+
+  render() {
+    const { updateModalVisible, handleUpdateModalVisible, values } = this.props;
+    const { currentStep, formVals } = this.state;
+
+    return (
+      <Modal
+        width={640}
+        bodyStyle={{ padding: '32px 40px 48px' }}
+        destroyOnClose
+        title="规则配置"
+        visible={updateModalVisible}
+        footer={this.renderFooter(currentStep)}
+        onCancel={() => handleUpdateModalVisible(false, values)}
+        afterClose={() => handleUpdateModalVisible()}
+      >
+        <Steps style={{ marginBottom: 28 }} size="small" current={currentStep}>
+          <Step title="基本信息" />
+          <Step title="配置规则属性" />
+          <Step title="设定调度周期" />
+        </Steps>
+        {this.renderContent(currentStep, formVals)}
+      </Modal>
+    );
+  }
+}
+
+export default UpdateForm;
diff --git a/src/pages/list/table-list/data.d.ts b/src/pages/list/table-list/data.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a4ae013d1ec696c80a75a8a52a9d78cbb046c942
--- /dev/null
+++ b/src/pages/list/table-list/data.d.ts
@@ -0,0 +1,34 @@
+export interface TableListItem {
+  key: number;
+  disabled?: boolean;
+  href: string;
+  avatar: string;
+  name: string;
+  title: string;
+  owner: string;
+  desc: string;
+  callNo: number;
+  status: number;
+  updatedAt: Date;
+  createdAt: Date;
+  progress: number;
+}
+
+export interface TableListPagination {
+  total: number;
+  pageSize: number;
+  current: number;
+}
+
+export interface TableListDate {
+  list: TableListItem[];
+  pagination: Partial<TableListPagination>;
+}
+
+export interface TableListParams {
+  sorter: string;
+  status: string;
+  name: string;
+  pageSize: number;
+  currentPage: number;
+}
diff --git a/src/pages/list/table-list/index.tsx b/src/pages/list/table-list/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..48abccfc3cfcb806661ff9f8c53f914635c17052
--- /dev/null
+++ b/src/pages/list/table-list/index.tsx
@@ -0,0 +1,484 @@
+import {
+  Badge,
+  Button,
+  Card,
+  Col,
+  DatePicker,
+  Divider,
+  Dropdown,
+  Form,
+  Icon,
+  Input,
+  InputNumber,
+  Menu,
+  Row,
+  Select,
+  message,
+} 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 UpdateForm, { FormValsType } from './components/UpdateForm';
+import { TableListItem, TableListPagination, TableListParams } from './data.d';
+
+import styles from './style.less';
+
+const FormItem = Form.Item;
+const { Option } = Select;
+const getValue = (obj: { [x: string]: string[] }) =>
+  Object.keys(obj)
+    .map(key => obj[key])
+    .join(',');
+
+type IStatusMapType = 'default' | 'processing' | 'success' | 'error';
+const statusMap = ['default', 'processing', 'success', 'error'];
+const status = ['关闭', '运行中', '已上线', '异常'];
+
+interface TableListProps extends FormComponentProps {
+  dispatch: Dispatch<any>;
+  loading: boolean;
+  listTableList: StateType;
+}
+
+interface TableListState {
+  modalVisible: boolean;
+  updateModalVisible: boolean;
+  expandForm: boolean;
+  selectedRows: TableListItem[];
+  formValues: { [key: string]: string };
+  stepFormValues: Partial<TableListItem>;
+}
+
+/* eslint react/no-multi-comp:0 */
+@connect(
+  ({
+    listTableList,
+    loading,
+  }: {
+    listTableList: StateType;
+    loading: {
+      models: {
+        [key: string]: boolean;
+      };
+    };
+  }) => ({
+    listTableList,
+    loading: loading.models.rule,
+  }),
+)
+class TableList extends Component<TableListProps, TableListState> {
+  state: TableListState = {
+    modalVisible: false,
+    updateModalVisible: false,
+    expandForm: false,
+    selectedRows: [],
+    formValues: {},
+    stepFormValues: {},
+  };
+
+  columns: StandardTableColumnProps[] = [
+    {
+      title: '规则名称',
+      dataIndex: 'name',
+    },
+    {
+      title: '描述',
+      dataIndex: 'desc',
+    },
+    {
+      title: '服务调用次数',
+      dataIndex: 'callNo',
+      sorter: true,
+      align: 'right',
+      render: (val: string) => `${val} 万`,
+      // mark to display a total number
+      needTotal: true,
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      filters: [
+        {
+          text: status[0],
+          value: '0',
+        },
+        {
+          text: status[1],
+          value: '1',
+        },
+        {
+          text: status[2],
+          value: '2',
+        },
+        {
+          text: status[3],
+          value: '3',
+        },
+      ],
+      render(val: IStatusMapType) {
+        return <Badge status={statusMap[val]} text={status[val]} />;
+      },
+    },
+    {
+      title: '上次调度时间',
+      dataIndex: 'updatedAt',
+      sorter: true,
+      render: (val: string) => <span>{moment(val).format('YYYY-MM-DD HH:mm:ss')}</span>,
+    },
+    {
+      title: '操作',
+      render: (text, record) => (
+        <Fragment>
+          <a onClick={() => this.handleUpdateModalVisible(true, record)}>配置</a>
+          <Divider type="vertical" />
+          <a href="">订阅警报</a>
+        </Fragment>
+      ),
+    },
+  ];
+
+  componentDidMount() {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'listTableList/fetch',
+    });
+  }
+
+  handleStandardTableChange = (
+    pagination: Partial<TableListPagination>,
+    filtersArg: Record<keyof TableListItem, string[]>,
+    sorter: SorterResult<TableListItem>,
+  ) => {
+    const { dispatch } = this.props;
+    const { formValues } = this.state;
+
+    const filters = Object.keys(filtersArg).reduce((obj, key) => {
+      const newObj = { ...obj };
+      newObj[key] = getValue(filtersArg[key]);
+      return newObj;
+    }, {});
+
+    const params: Partial<TableListParams> = {
+      currentPage: pagination.current,
+      pageSize: pagination.pageSize,
+      ...formValues,
+      ...filters,
+    };
+    if (sorter.field) {
+      params.sorter = `${sorter.field}_${sorter.order}`;
+    }
+
+    dispatch({
+      type: 'listTableList/fetch',
+      payload: params,
+    });
+  };
+
+  handleFormReset = () => {
+    const { form, dispatch } = this.props;
+    form.resetFields();
+    this.setState({
+      formValues: {},
+    });
+    dispatch({
+      type: 'listTableList/fetch',
+      payload: {},
+    });
+  };
+
+  toggleForm = () => {
+    const { expandForm } = this.state;
+    this.setState({
+      expandForm: !expandForm,
+    });
+  };
+
+  handleMenuClick = (e: { key: string }) => {
+    const { dispatch } = this.props;
+    const { selectedRows } = this.state;
+
+    if (!selectedRows) return;
+    switch (e.key) {
+      case 'remove':
+        dispatch({
+          type: 'listTableList/remove',
+          payload: {
+            key: selectedRows.map(row => row.key),
+          },
+          callback: () => {
+            this.setState({
+              selectedRows: [],
+            });
+          },
+        });
+        break;
+      default:
+        break;
+    }
+  };
+
+  handleSelectRows = (rows: TableListItem[]) => {
+    this.setState({
+      selectedRows: rows,
+    });
+  };
+
+  handleSearch = (e: React.FormEvent) => {
+    e.preventDefault();
+
+    const { dispatch, form } = this.props;
+
+    form.validateFields((err, fieldsValue) => {
+      if (err) return;
+
+      const values = {
+        ...fieldsValue,
+        updatedAt: fieldsValue.updatedAt && fieldsValue.updatedAt.valueOf(),
+      };
+
+      this.setState({
+        formValues: values,
+      });
+
+      dispatch({
+        type: 'listTableList/fetch',
+        payload: values,
+      });
+    });
+  };
+
+  handleModalVisible = (flag?: boolean) => {
+    this.setState({
+      modalVisible: !!flag,
+    });
+  };
+
+  handleUpdateModalVisible = (flag?: boolean, record?: FormValsType) => {
+    this.setState({
+      updateModalVisible: !!flag,
+      stepFormValues: record || {},
+    });
+  };
+
+  handleAdd = (fields: { desc: any }) => {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'listTableList/add',
+      payload: {
+        desc: fields.desc,
+      },
+    });
+
+    message.success('添加成功');
+    this.handleModalVisible();
+  };
+
+  handleUpdate = (fields: FormValsType) => {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'listTableList/update',
+      payload: {
+        name: fields.name,
+        desc: fields.desc,
+        key: fields.key,
+      },
+    });
+
+    message.success('配置成功');
+    this.handleUpdateModalVisible();
+  };
+
+  renderSimpleForm() {
+    const { form } = this.props;
+    const { getFieldDecorator } = form;
+    return (
+      <Form onSubmit={this.handleSearch} layout="inline">
+        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
+          <Col md={8} sm={24}>
+            <FormItem label="规则名称">
+              {getFieldDecorator('name')(<Input placeholder="请输入" />)}
+            </FormItem>
+          </Col>
+          <Col md={8} sm={24}>
+            <FormItem label="使用状态">
+              {getFieldDecorator('status')(
+                <Select placeholder="请选择" style={{ width: '100%' }}>
+                  <Option value="0">关闭</Option>
+                  <Option value="1">运行中</Option>
+                </Select>,
+              )}
+            </FormItem>
+          </Col>
+          <Col md={8} sm={24}>
+            <span className={styles.submitButtons}>
+              <Button type="primary" htmlType="submit">
+                查询
+              </Button>
+              <Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>
+                重置
+              </Button>
+              <a style={{ marginLeft: 8 }} onClick={this.toggleForm}>
+                展开 <Icon type="down" />
+              </a>
+            </span>
+          </Col>
+        </Row>
+      </Form>
+    );
+  }
+
+  renderAdvancedForm() {
+    const {
+      form: { getFieldDecorator },
+    } = this.props;
+    return (
+      <Form onSubmit={this.handleSearch} layout="inline">
+        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
+          <Col md={8} sm={24}>
+            <FormItem label="规则名称">
+              {getFieldDecorator('name')(<Input placeholder="请输入" />)}
+            </FormItem>
+          </Col>
+          <Col md={8} sm={24}>
+            <FormItem label="使用状态">
+              {getFieldDecorator('status')(
+                <Select placeholder="请选择" style={{ width: '100%' }}>
+                  <Option value="0">关闭</Option>
+                  <Option value="1">运行中</Option>
+                </Select>,
+              )}
+            </FormItem>
+          </Col>
+          <Col md={8} sm={24}>
+            <FormItem label="调用次数">
+              {getFieldDecorator('number')(<InputNumber style={{ width: '100%' }} />)}
+            </FormItem>
+          </Col>
+        </Row>
+        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
+          <Col md={8} sm={24}>
+            <FormItem label="更新日期">
+              {getFieldDecorator('date')(
+                <DatePicker style={{ width: '100%' }} placeholder="请输入更新日期" />,
+              )}
+            </FormItem>
+          </Col>
+          <Col md={8} sm={24}>
+            <FormItem label="使用状态">
+              {getFieldDecorator('status3')(
+                <Select placeholder="请选择" style={{ width: '100%' }}>
+                  <Option value="0">关闭</Option>
+                  <Option value="1">运行中</Option>
+                </Select>,
+              )}
+            </FormItem>
+          </Col>
+          <Col md={8} sm={24}>
+            <FormItem label="使用状态">
+              {getFieldDecorator('status4')(
+                <Select placeholder="请选择" style={{ width: '100%' }}>
+                  <Option value="0">关闭</Option>
+                  <Option value="1">运行中</Option>
+                </Select>,
+              )}
+            </FormItem>
+          </Col>
+        </Row>
+        <div style={{ overflow: 'hidden' }}>
+          <div style={{ float: 'right', marginBottom: 24 }}>
+            <Button type="primary" htmlType="submit">
+              查询
+            </Button>
+            <Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>
+              重置
+            </Button>
+            <a style={{ marginLeft: 8 }} onClick={this.toggleForm}>
+              收起 <Icon type="up" />
+            </a>
+          </div>
+        </div>
+      </Form>
+    );
+  }
+
+  renderForm() {
+    const { expandForm } = this.state;
+    return expandForm ? this.renderAdvancedForm() : this.renderSimpleForm();
+  }
+
+  render() {
+    const {
+      listTableList: { data },
+      loading,
+      form,
+    } = this.props;
+
+    const { selectedRows, modalVisible, updateModalVisible, stepFormValues } = this.state;
+    const menu = (
+      <Menu onClick={this.handleMenuClick} selectedKeys={[]}>
+        <Menu.Item key="remove">删除</Menu.Item>
+        <Menu.Item key="approval">批量审批</Menu.Item>
+      </Menu>
+    );
+
+    const parentMethods = {
+      handleAdd: this.handleAdd,
+      handleModalVisible: this.handleModalVisible,
+    };
+    const updateMethods = {
+      handleUpdateModalVisible: this.handleUpdateModalVisible,
+      handleUpdate: this.handleUpdate,
+    };
+    return (
+      <PageHeaderWrapper>
+        <Card bordered={false}>
+          <div className={styles.tableList}>
+            <div className={styles.tableListForm}>{this.renderForm()}</div>
+            <div className={styles.tableListOperator}>
+              <Button icon="plus" type="primary" onClick={() => this.handleModalVisible(true)}>
+                新建
+              </Button>
+              {selectedRows.length > 0 && (
+                <span>
+                  <Button>批量操作</Button>
+                  <Dropdown overlay={menu}>
+                    <Button>
+                      更多操作 <Icon type="down" />
+                    </Button>
+                  </Dropdown>
+                </span>
+              )}
+            </div>
+            <StandardTable
+              selectedRows={selectedRows}
+              loading={loading}
+              data={data}
+              columns={this.columns}
+              onSelectRow={this.handleSelectRows}
+              onChange={this.handleStandardTableChange}
+            />
+          </div>
+        </Card>
+        <CreateForm {...parentMethods} modalVisible={modalVisible} form={form} />
+        {stepFormValues && Object.keys(stepFormValues).length ? (
+          <UpdateForm
+            {...updateMethods}
+            updateModalVisible={updateModalVisible}
+            values={stepFormValues}
+            form={form}
+          />
+        ) : null}
+      </PageHeaderWrapper>
+    );
+  }
+}
+
+export default Form.create<TableListProps>()(TableList);
diff --git a/src/pages/list/table-list/model.ts b/src/pages/list/table-list/model.ts
new file mode 100644
index 0000000000000000000000000000000000000000..04cafcb48cd547a86a128ae947908b0b30a4f902
--- /dev/null
+++ b/src/pages/list/table-list/model.ts
@@ -0,0 +1,84 @@
+import { AnyAction, Reducer } from 'redux';
+import { EffectsCommandMap } from 'dva';
+import { addRule, queryRule, removeRule, updateRule } from './service';
+
+import { TableListDate } from './data.d';
+
+export interface StateType {
+  data: TableListDate;
+}
+
+export type Effect = (
+  action: AnyAction,
+  effects: EffectsCommandMap & { select: <T>(func: (state: StateType) => T) => T },
+) => void;
+
+export interface ModelType {
+  namespace: string;
+  state: StateType;
+  effects: {
+    fetch: Effect;
+    add: Effect;
+    remove: Effect;
+    update: Effect;
+  };
+  reducers: {
+    save: Reducer<StateType>;
+  };
+}
+
+const Model: ModelType = {
+  namespace: 'listTableList',
+
+  state: {
+    data: {
+      list: [],
+      pagination: {},
+    },
+  },
+
+  effects: {
+    *fetch({ payload }, { call, put }) {
+      const response = yield call(queryRule, payload);
+      yield put({
+        type: 'save',
+        payload: response,
+      });
+    },
+    *add({ payload, callback }, { call, put }) {
+      const response = yield call(addRule, payload);
+      yield put({
+        type: 'save',
+        payload: response,
+      });
+      if (callback) callback();
+    },
+    *remove({ payload, callback }, { call, put }) {
+      const response = yield call(removeRule, payload);
+      yield put({
+        type: 'save',
+        payload: response,
+      });
+      if (callback) callback();
+    },
+    *update({ payload, callback }, { call, put }) {
+      const response = yield call(updateRule, payload);
+      yield put({
+        type: 'save',
+        payload: response,
+      });
+      if (callback) callback();
+    },
+  },
+
+  reducers: {
+    save(state, action) {
+      return {
+        ...state,
+        data: action.payload,
+      };
+    },
+  },
+};
+
+export default Model;
diff --git a/src/pages/list/table-list/service.ts b/src/pages/list/table-list/service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..24d6348e298dacdb8865b6718a5a111c3583ef6a
--- /dev/null
+++ b/src/pages/list/table-list/service.ts
@@ -0,0 +1,38 @@
+import request from 'umi-request';
+import { TableListParams } from './data.d';
+
+export async function queryRule(params: TableListParams) {
+  return request('/api/rule', {
+    params,
+  });
+}
+
+export async function removeRule(params: TableListParams) {
+  return request('/api/rule', {
+    method: 'POST',
+    data: {
+      ...params,
+      method: 'delete',
+    },
+  });
+}
+
+export async function addRule(params: TableListParams) {
+  return request('/api/rule', {
+    method: 'POST',
+    data: {
+      ...params,
+      method: 'post',
+    },
+  });
+}
+
+export async function updateRule(params: TableListParams) {
+  return request('/api/rule', {
+    method: 'POST',
+    data: {
+      ...params,
+      method: 'update',
+    },
+  });
+}
diff --git a/src/pages/list/table-list/style.less b/src/pages/list/table-list/style.less
new file mode 100644
index 0000000000000000000000000000000000000000..266eb6d60783f82f065e0aa5ff974d7757a79fc8
--- /dev/null
+++ b/src/pages/list/table-list/style.less
@@ -0,0 +1,49 @@
+@import '~antd/es/style/themes/default.less';
+@import './utils/utils.less';
+
+.tableList {
+  .tableListOperator {
+    margin-bottom: 16px;
+    button {
+      margin-right: 8px;
+    }
+  }
+}
+
+.tableListForm {
+  :global {
+    .ant-form-item {
+      display: flex;
+      margin-right: 0;
+      margin-bottom: 24px;
+      > .ant-form-item-label {
+        width: auto;
+        padding-right: 8px;
+        line-height: 32px;
+      }
+      .ant-form-item-control {
+        line-height: 32px;
+      }
+    }
+    .ant-form-item-control-wrapper {
+      flex: 1;
+    }
+  }
+  .submitButtons {
+    display: block;
+    margin-bottom: 24px;
+    white-space: nowrap;
+  }
+}
+
+@media screen and (max-width: @screen-lg) {
+  .tableListForm :global(.ant-form-item) {
+    margin-right: 24px;
+  }
+}
+
+@media screen and (max-width: @screen-md) {
+  .tableListForm :global(.ant-form-item) {
+    margin-right: 8px;
+  }
+}
diff --git a/src/pages/list/table-list/utils/utils.less b/src/pages/list/table-list/utils/utils.less
new file mode 100644
index 0000000000000000000000000000000000000000..de1aa64222b6f14328d3a9e3c262ac5a31cce5af
--- /dev/null
+++ b/src/pages/list/table-list/utils/utils.less
@@ -0,0 +1,50 @@
+.textOverflow() {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  word-break: break-all;
+}
+
+.textOverflowMulti(@line: 3, @bg: #fff) {
+  position: relative;
+  max-height: @line * 1.5em;
+  margin-right: -1em;
+  padding-right: 1em;
+  overflow: hidden;
+  line-height: 1.5em;
+  text-align: justify;
+  &::before {
+    position: absolute;
+    right: 14px;
+    bottom: 0;
+    padding: 0 1px;
+    background: @bg;
+    content: '...';
+  }
+  &::after {
+    position: absolute;
+    right: 14px;
+    width: 1em;
+    height: 1em;
+    margin-top: 0.2em;
+    background: white;
+    content: '';
+  }
+}
+
+// mixins for clearfix
+// ------------------------
+.clearfix() {
+  zoom: 1;
+  &::before,
+  &::after {
+    display: table;
+    content: ' ';
+  }
+  &::after {
+    clear: both;
+    height: 0;
+    font-size: 0;
+    visibility: hidden;
+  }
+}
diff --git a/src/pages/profile/advanced/_mock.ts b/src/pages/profile/advanced/_mock.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4d7d19952a929ca24b67c77421d4c9b1f77297af
--- /dev/null
+++ b/src/pages/profile/advanced/_mock.ts
@@ -0,0 +1,74 @@
+const advancedOperation1 = [
+  {
+    key: 'op1',
+    type: '订购关系生效',
+    name: '曲丽丽',
+    status: 'agree',
+    updatedAt: '2017-10-03  19:23:12',
+    memo: '-',
+  },
+  {
+    key: 'op2',
+    type: '财务复审',
+    name: '付小小',
+    status: 'reject',
+    updatedAt: '2017-10-03  19:23:12',
+    memo: '不通过原因',
+  },
+  {
+    key: 'op3',
+    type: '部门初审',
+    name: '周毛毛',
+    status: 'agree',
+    updatedAt: '2017-10-03  19:23:12',
+    memo: '-',
+  },
+  {
+    key: 'op4',
+    type: '提交订单',
+    name: '林东东',
+    status: 'agree',
+    updatedAt: '2017-10-03  19:23:12',
+    memo: '很棒',
+  },
+  {
+    key: 'op5',
+    type: '创建订单',
+    name: '汗牙牙',
+    status: 'agree',
+    updatedAt: '2017-10-03  19:23:12',
+    memo: '-',
+  },
+];
+
+const advancedOperation2 = [
+  {
+    key: 'op1',
+    type: '订购关系生效',
+    name: '曲丽丽',
+    status: 'agree',
+    updatedAt: '2017-10-03  19:23:12',
+    memo: '-',
+  },
+];
+
+const advancedOperation3 = [
+  {
+    key: 'op1',
+    type: '创建订单',
+    name: '汗牙牙',
+    status: 'agree',
+    updatedAt: '2017-10-03  19:23:12',
+    memo: '-',
+  },
+];
+
+const getProfileAdvancedData = {
+  advancedOperation1,
+  advancedOperation2,
+  advancedOperation3,
+};
+
+export default {
+  'GET  /api/profile/advanced': getProfileAdvancedData,
+};
diff --git a/src/pages/profile/advanced/data.d.ts b/src/pages/profile/advanced/data.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..64f7e78edfc35f6782b2e1fc1c82173d8b09960d
--- /dev/null
+++ b/src/pages/profile/advanced/data.d.ts
@@ -0,0 +1,32 @@
+export interface AdvancedOperation1 {
+  key: string;
+  type: string;
+  name: string;
+  status: string;
+  updatedAt: string;
+  memo: string;
+}
+
+export interface AdvancedOperation2 {
+  key: string;
+  type: string;
+  name: string;
+  status: string;
+  updatedAt: string;
+  memo: string;
+}
+
+export interface AdvancedOperation3 {
+  key: string;
+  type: string;
+  name: string;
+  status: string;
+  updatedAt: string;
+  memo: string;
+}
+
+export interface AdvancedProfileData {
+  advancedOperation1: AdvancedOperation1[];
+  advancedOperation2: AdvancedOperation2[];
+  advancedOperation3: AdvancedOperation3[];
+}
diff --git a/src/pages/profile/advanced/index.tsx b/src/pages/profile/advanced/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..7feb754a907998e9bd4fc4e09be3cf2e374d7638
--- /dev/null
+++ b/src/pages/profile/advanced/index.tsx
@@ -0,0 +1,386 @@
+import {
+  Badge,
+  Button,
+  Card,
+  Col,
+  Descriptions,
+  Divider,
+  Dropdown,
+  Icon,
+  Menu,
+  Popover,
+  Row,
+  Steps,
+  Table,
+  Tooltip,
+} 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';
+
+const { Step } = Steps;
+const ButtonGroup = Button.Group;
+
+const getWindowWidth = () => window.innerWidth || document.documentElement.clientWidth;
+
+const menu = (
+  <Menu>
+    <Menu.Item key="1">选项一</Menu.Item>
+    <Menu.Item key="2">选项二</Menu.Item>
+    <Menu.Item key="3">选项三</Menu.Item>
+  </Menu>
+);
+
+const action = (
+  <Fragment>
+    <ButtonGroup>
+      <Button>操作</Button>
+      <Button>操作</Button>
+      <Dropdown overlay={menu} placement="bottomRight">
+        <Button>
+          <Icon type="ellipsis" />
+        </Button>
+      </Dropdown>
+    </ButtonGroup>
+    <Button type="primary">主操作</Button>
+  </Fragment>
+);
+
+const extra = (
+  <Row
+    style={{
+      minWidth: 400,
+    }}
+  >
+    <Col xs={24} sm={12}>
+      <div className={styles.textSecondary}>状态</div>
+      <div className={styles.heading}>待审批</div>
+    </Col>
+    <Col xs={24} sm={12}>
+      <div className={styles.textSecondary}>订单金额</div>
+      <div className={styles.heading}>¥ 568.08</div>
+    </Col>
+  </Row>
+);
+
+const description = (
+  <Descriptions className={styles.headerList} size="small" column={2}>
+    <Descriptions.Item label="创建人">曲丽丽</Descriptions.Item>
+    <Descriptions.Item label="订购产品">XX 服务</Descriptions.Item>
+    <Descriptions.Item label="创建时间">2017-07-07</Descriptions.Item>
+    <Descriptions.Item label="关联单据">
+      <a href="">12421</a>
+    </Descriptions.Item>
+    <Descriptions.Item label="生效日期">2017-07-07 ~ 2017-08-08</Descriptions.Item>
+    <Descriptions.Item label="备注">请于两个工作日内确认</Descriptions.Item>
+  </Descriptions>
+);
+
+const desc1 = (
+  <div className={classNames(styles.textSecondary, styles.stepDescription)}>
+    <Fragment>
+      曲丽丽
+      <Icon type="dingding-o" style={{ marginLeft: 8 }} />
+    </Fragment>
+    <div>2016-12-12 12:32</div>
+  </div>
+);
+
+const desc2 = (
+  <div className={styles.stepDescription}>
+    <Fragment>
+      周毛毛
+      <Icon type="dingding-o" style={{ color: '#00A0E9', marginLeft: 8 }} />
+    </Fragment>
+    <div>
+      <a href="">催一下</a>
+    </div>
+  </div>
+);
+
+const popoverContent = (
+  <div style={{ width: 160 }}>
+    吴加号
+    <span className={styles.textSecondary} style={{ float: 'right' }}>
+      <Badge status="default" text={<span style={{ color: 'rgba(0, 0, 0, 0.45)' }}>未响应</span>} />
+    </span>
+    <div className={styles.textSecondary} style={{ marginTop: 4 }}>
+      耗时：2小时25分钟
+    </div>
+  </div>
+);
+
+const customDot = (
+  dot: React.ReactNode,
+  {
+    status,
+  }: {
+    status: string;
+  },
+) => {
+  if (status === 'process') {
+    return (
+      <Popover placement="topLeft" arrowPointAtCenter content={popoverContent}>
+        {dot}
+      </Popover>
+    );
+  }
+  return dot;
+};
+
+const operationTabList = [
+  {
+    key: 'tab1',
+    tab: '操作日志一',
+  },
+  {
+    key: 'tab2',
+    tab: '操作日志二',
+  },
+  {
+    key: 'tab3',
+    tab: '操作日志三',
+  },
+];
+
+const columns = [
+  {
+    title: '操作类型',
+    dataIndex: 'type',
+    key: 'type',
+  },
+  {
+    title: '操作人',
+    dataIndex: 'name',
+    key: 'name',
+  },
+  {
+    title: '执行结果',
+    dataIndex: 'status',
+    key: 'status',
+    render: (text: string) => {
+      if (text === 'agree') {
+        return <Badge status="success" text="成功" />;
+      }
+      return <Badge status="error" text="驳回" />;
+    },
+  },
+  {
+    title: '操作时间',
+    dataIndex: 'updatedAt',
+    key: 'updatedAt',
+  },
+  {
+    title: '备注',
+    dataIndex: 'memo',
+    key: 'memo',
+  },
+];
+
+@connect(
+  ({
+    profileAdvanced,
+    loading,
+  }: {
+    profileAdvanced: AdvancedProfileData;
+    loading: {
+      effects: { [key: string]: boolean };
+    };
+  }) => ({
+    profileAdvanced,
+    loading: loading.effects['profileAdvanced/fetchAdvanced'],
+  }),
+)
+class Advanced extends Component<
+  { loading: boolean; profileAdvanced: AdvancedProfileData; dispatch: Dispatch<any> },
+  {
+    operationKey: string;
+    stepDirection: 'horizontal' | 'vertical';
+  }
+> {
+  public state: {
+    operationKey: string;
+    stepDirection: 'horizontal' | 'vertical';
+  } = {
+    operationKey: 'tab1',
+    stepDirection: 'horizontal',
+  };
+
+  componentDidMount() {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'profileAdvanced/fetchAdvanced',
+    });
+
+    this.setStepDirection();
+    window.addEventListener('resize', this.setStepDirection, { passive: true });
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.setStepDirection);
+  }
+
+  onOperationTabChange = (key: string) => {
+    this.setState({ operationKey: key });
+  };
+
+  setStepDirection = () => {
+    const { stepDirection } = this.state;
+    const w = getWindowWidth();
+    if (stepDirection !== 'vertical' && w <= 576) {
+      this.setState({
+        stepDirection: 'vertical',
+      });
+    } else if (stepDirection !== 'horizontal' && w > 576) {
+      this.setState({
+        stepDirection: 'horizontal',
+      });
+    }
+  };
+
+  render() {
+    const { stepDirection, operationKey } = this.state;
+    const { profileAdvanced, loading } = this.props;
+    const { advancedOperation1, advancedOperation2, advancedOperation3 } = profileAdvanced;
+    const contentList = {
+      tab1: (
+        <Table
+          pagination={false}
+          loading={loading}
+          dataSource={advancedOperation1}
+          columns={columns}
+        />
+      ),
+      tab2: (
+        <Table
+          pagination={false}
+          loading={loading}
+          dataSource={advancedOperation2}
+          columns={columns}
+        />
+      ),
+      tab3: (
+        <Table
+          pagination={false}
+          loading={loading}
+          dataSource={advancedOperation3}
+          columns={columns}
+        />
+      ),
+    };
+    return (
+      <PageHeaderWrapper
+        title="单号：234231029431"
+        extra={action}
+        content={description}
+        extraContent={extra}
+        tabActiveKey="detail"
+        tabList={[
+          {
+            key: 'detail',
+            tab: '详情',
+          },
+          {
+            key: 'rule',
+            tab: '规则',
+          },
+        ]}
+      >
+        <div
+          style={{
+            margin: 24,
+            marginTop: 48,
+          }}
+          className={styles.main}
+        >
+          <GridContent>
+            <Card title="流程进度" style={{ marginBottom: 24 }}>
+              <Steps direction={stepDirection} progressDot={customDot} current={1}>
+                <Step title="创建项目" description={desc1} />
+                <Step title="部门初审" description={desc2} />
+                <Step title="财务复核" />
+                <Step title="完成" />
+              </Steps>
+            </Card>
+            <Card title="用户信息" style={{ marginBottom: 24 }} bordered={false}>
+              <Descriptions style={{ marginBottom: 24 }}>
+                <Descriptions.Item label="用户姓名">付小小</Descriptions.Item>
+                <Descriptions.Item label="会员卡号">32943898021309809423</Descriptions.Item>
+                <Descriptions.Item label="身份证">3321944288191034921</Descriptions.Item>
+                <Descriptions.Item label="联系方式">18112345678</Descriptions.Item>
+                <Descriptions.Item label="联系地址">
+                  曲丽丽 18100000000 浙江省杭州市西湖区黄姑山路工专路交叉路口
+                </Descriptions.Item>
+              </Descriptions>
+              <Descriptions style={{ marginBottom: 24 }} title="信息组">
+                <Descriptions.Item label="某某数据">725</Descriptions.Item>
+                <Descriptions.Item label="该数据更新时间">2017-08-08</Descriptions.Item>
+                <Descriptions.Item
+                  label={
+                    <span>
+                      某某数据
+                      <Tooltip title="数据说明">
+                        <Icon
+                          style={{ color: 'rgba(0, 0, 0, 0.43)', marginLeft: 4 }}
+                          type="info-circle-o"
+                        />
+                      </Tooltip>
+                    </span>
+                  }
+                >
+                  725
+                </Descriptions.Item>
+                <Descriptions.Item label="该数据更新时间">2017-08-08</Descriptions.Item>
+              </Descriptions>
+              <h4 style={{ marginBottom: 16 }}>信息组</h4>
+              <Card type="inner" title="多层级信息组">
+                <Descriptions style={{ marginBottom: 16 }} title="组名称">
+                  <Descriptions.Item label="负责人">林东东</Descriptions.Item>
+                  <Descriptions.Item label="角色码">1234567</Descriptions.Item>
+                  <Descriptions.Item label="所属部门">XX公司 - YY部</Descriptions.Item>
+                  <Descriptions.Item label="过期时间">2017-08-08</Descriptions.Item>
+                  <Descriptions.Item label="描述">
+                    这段描述很长很长很长很长很长很长很长很长很长很长很长很长很长很长...
+                  </Descriptions.Item>
+                </Descriptions>
+                <Divider style={{ margin: '16px 0' }} />
+                <Descriptions style={{ marginBottom: 16 }} title="组名称" column={1}>
+                  <Descriptions.Item label="学名">
+                    Citrullus lanatus (Thunb.) Matsum. et
+                    Nakai一年生蔓生藤本；茎、枝粗壮，具明显的棱。卷须较粗..
+                  </Descriptions.Item>
+                </Descriptions>
+                <Divider style={{ margin: '16px 0' }} />
+                <Descriptions title="组名称">
+                  <Descriptions.Item label="负责人">付小小</Descriptions.Item>
+                  <Descriptions.Item label="角色码">1234568</Descriptions.Item>
+                </Descriptions>
+              </Card>
+            </Card>
+            <Card title="用户近半年来电记录" style={{ marginBottom: 24 }} bordered={false}>
+              <div className={styles.noData}>
+                <Icon type="frown-o" />
+                暂无数据
+              </div>
+            </Card>
+            <Card
+              className={styles.tabsCard}
+              bordered={false}
+              tabList={operationTabList}
+              onTabChange={this.onOperationTabChange}
+            >
+              {contentList[operationKey]}
+            </Card>
+          </GridContent>
+        </div>
+      </PageHeaderWrapper>
+    );
+  }
+}
+
+export default Advanced;
diff --git a/src/pages/profile/advanced/model.ts b/src/pages/profile/advanced/model.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e40eb96a2dabed0558eedab8428b65fcd4d0187d
--- /dev/null
+++ b/src/pages/profile/advanced/model.ts
@@ -0,0 +1,52 @@
+import { AnyAction, Reducer } from 'redux';
+
+import { EffectsCommandMap } from 'dva';
+import { AdvancedProfileData } from './data.d';
+import { queryAdvancedProfile } from './service';
+
+export type Effect = (
+  action: AnyAction,
+  effects: EffectsCommandMap & { select: <T>(func: (state: AdvancedProfileData) => T) => T },
+) => void;
+
+export interface ModelType {
+  namespace: string;
+  state: AdvancedProfileData;
+  effects: {
+    fetchAdvanced: Effect;
+  };
+  reducers: {
+    show: Reducer<AdvancedProfileData>;
+  };
+}
+
+const Model: ModelType = {
+  namespace: 'profileAdvanced',
+
+  state: {
+    advancedOperation1: [],
+    advancedOperation2: [],
+    advancedOperation3: [],
+  },
+
+  effects: {
+    *fetchAdvanced(_, { call, put }) {
+      const response = yield call(queryAdvancedProfile);
+      yield put({
+        type: 'show',
+        payload: response,
+      });
+    },
+  },
+
+  reducers: {
+    show(state, { payload }) {
+      return {
+        ...state,
+        ...payload,
+      };
+    },
+  },
+};
+
+export default Model;
diff --git a/src/pages/profile/advanced/service.ts b/src/pages/profile/advanced/service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2f773f7f8234e74306012806b3945168e8b0d971
--- /dev/null
+++ b/src/pages/profile/advanced/service.ts
@@ -0,0 +1,5 @@
+import request from 'umi-request';
+
+export async function queryAdvancedProfile() {
+  return request('/api/profile/advanced');
+}
diff --git a/src/pages/profile/advanced/style.less b/src/pages/profile/advanced/style.less
new file mode 100644
index 0000000000000000000000000000000000000000..235ff3e2c4b0b3853d2b9f44ffbbe17eb4be40df
--- /dev/null
+++ b/src/pages/profile/advanced/style.less
@@ -0,0 +1,65 @@
+@import '~antd/es/style/themes/default.less';
+
+.main {
+  table {
+    table-layout: fixed;
+  }
+}
+
+.headerList {
+  margin-bottom: 4px;
+  :global {
+    .ant-descriptions-row > td {
+      padding-bottom: 8px;
+    }
+  }
+}
+
+.tabsCard {
+  :global {
+    .ant-card-head {
+      padding: 0 16px;
+    }
+  }
+}
+
+.noData {
+  color: @disabled-color;
+  font-size: 16px;
+  line-height: 64px;
+  text-align: center;
+  i {
+    position: relative;
+    top: 3px;
+    margin-right: 16px;
+    font-size: 24px;
+  }
+}
+
+.heading {
+  color: @heading-color;
+  font-size: 20px;
+}
+
+.stepDescription {
+  position: relative;
+  left: 38px;
+  padding-top: 8px;
+  font-size: 14px;
+  text-align: left;
+
+  > div {
+    margin-top: 8px;
+    margin-bottom: 4px;
+  }
+}
+
+.textSecondary {
+  color: @text-color-secondary;
+}
+
+@media screen and (max-width: @screen-sm) {
+  .stepDescription {
+    left: 8px;
+  }
+}
diff --git a/src/pages/profile/basic/_mock.ts b/src/pages/profile/basic/_mock.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b52499a17a5d27c40a7f36492b60223d68e5bf45
--- /dev/null
+++ b/src/pages/profile/basic/_mock.ts
@@ -0,0 +1,86 @@
+const basicGoods = [
+  {
+    id: '1234561',
+    name: '矿泉水 550ml',
+    barcode: '12421432143214321',
+    price: '2.00',
+    num: '1',
+    amount: '2.00',
+  },
+  {
+    id: '1234562',
+    name: '凉茶 300ml',
+    barcode: '12421432143214322',
+    price: '3.00',
+    num: '2',
+    amount: '6.00',
+  },
+  {
+    id: '1234563',
+    name: '好吃的薯片',
+    barcode: '12421432143214323',
+    price: '7.00',
+    num: '4',
+    amount: '28.00',
+  },
+  {
+    id: '1234564',
+    name: '特别好吃的蛋卷',
+    barcode: '12421432143214324',
+    price: '8.50',
+    num: '3',
+    amount: '25.50',
+  },
+];
+
+const basicProgress = [
+  {
+    key: '1',
+    time: '2017-10-01 14:10',
+    rate: '联系客户',
+    status: 'processing',
+    operator: '取货员 ID1234',
+    cost: '5mins',
+  },
+  {
+    key: '2',
+    time: '2017-10-01 14:05',
+    rate: '取货员出发',
+    status: 'success',
+    operator: '取货员 ID1234',
+    cost: '1h',
+  },
+  {
+    key: '3',
+    time: '2017-10-01 13:05',
+    rate: '取货员接单',
+    status: 'success',
+    operator: '取货员 ID1234',
+    cost: '5mins',
+  },
+  {
+    key: '4',
+    time: '2017-10-01 13:00',
+    rate: '申请审批通过',
+    status: 'success',
+    operator: '系统',
+    cost: '1h',
+  },
+  {
+    key: '5',
+    time: '2017-10-01 12:00',
+    rate: '发起退货申请',
+    status: 'success',
+    operator: '用户',
+    cost: '5mins',
+  },
+];
+
+const getProfileBasicData = {
+  basicGoods,
+  basicProgress,
+};
+
+export default {
+  'GET  /api/profile/basic': getProfileBasicData,
+};
diff --git a/src/pages/profile/basic/data.d.ts b/src/pages/profile/basic/data.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e8a601edb27a75db899f6c095931d478789e1f3d
--- /dev/null
+++ b/src/pages/profile/basic/data.d.ts
@@ -0,0 +1,22 @@
+export interface BasicGood {
+  id: string;
+  name?: string;
+  barcode?: string;
+  price?: string;
+  num?: string | number;
+  amount?: string | number;
+}
+
+export interface BasicProgress {
+  key: string;
+  time: string;
+  rate: string;
+  status: string;
+  operator: string;
+  cost: string;
+}
+
+export interface BasicProfileDataType {
+  basicGoods: BasicGood[];
+  basicProgress: BasicProgress[];
+}
diff --git a/src/pages/profile/basic/index.tsx b/src/pages/profile/basic/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..22a1e43519acdf39d579e207d7fa4d21e4ffe4bd
--- /dev/null
+++ b/src/pages/profile/basic/index.tsx
@@ -0,0 +1,211 @@
+import { Badge, Card, Descriptions, Divider, Table } from 'antd';
+import React, { Component } from 'react';
+
+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';
+
+const progressColumns = [
+  {
+    title: '时间',
+    dataIndex: 'time',
+    key: 'time',
+  },
+  {
+    title: '当前进度',
+    dataIndex: 'rate',
+    key: 'rate',
+  },
+  {
+    title: '状态',
+    dataIndex: 'status',
+    key: 'status',
+    render: (text: string) => {
+      if (text === 'success') {
+        return <Badge status="success" text="成功" />;
+      }
+      return <Badge status="processing" text="进行中" />;
+    },
+  },
+
+  {
+    title: '操作员ID',
+    dataIndex: 'operator',
+    key: 'operator',
+  },
+  {
+    title: '耗时',
+    dataIndex: 'cost',
+    key: 'cost',
+  },
+];
+
+interface BasicProps {
+  loading: boolean;
+  dispatch: Dispatch<any>;
+  profileBasic: BasicProfileDataType;
+}
+interface BasicState {
+  visible: boolean;
+}
+
+@connect(
+  ({
+    profileBasic,
+    loading,
+  }: {
+    profileBasic: BasicProfileDataType;
+    loading: {
+      effects: { [key: string]: boolean };
+    };
+  }) => ({
+    profileBasic,
+    loading: loading.effects['profileBasic/fetchBasic'],
+  }),
+)
+class Basic extends Component<
+  BasicProps,
+  BasicState
+> {
+  componentDidMount() {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'profileBasic/fetchBasic',
+    });
+  }
+
+  render() {
+    const { profileBasic, loading } = this.props;
+    const { basicGoods, basicProgress } = profileBasic;
+    let goodsData: typeof basicGoods = [];
+    if (basicGoods.length) {
+      let num = 0;
+      let amount = 0;
+      basicGoods.forEach(item => {
+        num += Number(item.num);
+        amount += Number(item.amount);
+      });
+      goodsData = basicGoods.concat({
+        id: '总计',
+        num,
+        amount,
+      });
+    }
+    const renderContent = (value: any, row: any, index: any) => {
+      const obj: {
+        children: any;
+        props: { colSpan?: number };
+      } = {
+        children: value,
+        props: {},
+      };
+      if (index === basicGoods.length) {
+        obj.props.colSpan = 0;
+      }
+      return obj;
+    };
+    const goodsColumns = [
+      {
+        title: '商品编号',
+        dataIndex: 'id',
+        key: 'id',
+        render: (text: React.ReactNode, row: any, index: number) => {
+          if (index < basicGoods.length) {
+            return <a href="">{text}</a>;
+          }
+          return {
+            children: <span style={{ fontWeight: 600 }}>总计</span>,
+            props: {
+              colSpan: 4,
+            },
+          };
+        },
+      },
+      {
+        title: '商品名称',
+        dataIndex: 'name',
+        key: 'name',
+        render: renderContent,
+      },
+      {
+        title: '商品条码',
+        dataIndex: 'barcode',
+        key: 'barcode',
+        render: renderContent,
+      },
+      {
+        title: '单价',
+        dataIndex: 'price',
+        key: 'price',
+        align: 'right' as 'left' | 'right' | 'center',
+        render: renderContent,
+      },
+      {
+        title: '数量（件）',
+        dataIndex: 'num',
+        key: 'num',
+        align: 'right' as 'left' | 'right' | 'center',
+        render: (text: React.ReactNode, row: any, index: number) => {
+          if (index < basicGoods.length) {
+            return text;
+          }
+          return <span style={{ fontWeight: 600 }}>{text}</span>;
+        },
+      },
+      {
+        title: '金额',
+        dataIndex: 'amount',
+        key: 'amount',
+        align: 'right' as 'left' | 'right' | 'center',
+        render: (text: React.ReactNode, row: any, index: number) => {
+          if (index < basicGoods.length) {
+            return text;
+          }
+          return <span style={{ fontWeight: 600 }}>{text}</span>;
+        },
+      },
+    ];
+    return (
+      <PageHeaderWrapper>
+        <Card bordered={false}>
+          <Descriptions title="退款申请" style={{ marginBottom: 32 }}>
+            <Descriptions.Item label="取货单号">1000000000</Descriptions.Item>
+            <Descriptions.Item label="状态">已取货</Descriptions.Item>
+            <Descriptions.Item label="销售单号">1234123421</Descriptions.Item>
+            <Descriptions.Item label="子订单">3214321432</Descriptions.Item>
+          </Descriptions>
+          <Divider style={{ marginBottom: 32 }} />
+          <Descriptions title="用户信息" style={{ marginBottom: 32 }}>
+            <Descriptions.Item label="用户姓名">付小小</Descriptions.Item>
+            <Descriptions.Item label="联系电话">18100000000</Descriptions.Item>
+            <Descriptions.Item label="常用快递">菜鸟仓储</Descriptions.Item>
+            <Descriptions.Item label="取货地址">浙江省杭州市西湖区万塘路18号</Descriptions.Item>
+            <Descriptions.Item label="备注">无</Descriptions.Item>
+          </Descriptions>
+          <Divider style={{ marginBottom: 32 }} />
+          <div className={styles.title}>退货商品</div>
+          <Table
+            style={{ marginBottom: 24 }}
+            pagination={false}
+            loading={loading}
+            dataSource={goodsData}
+            columns={goodsColumns}
+            rowKey="id"
+          />
+          <div className={styles.title}>退货进度</div>
+          <Table
+            style={{ marginBottom: 16 }}
+            pagination={false}
+            loading={loading}
+            dataSource={basicProgress}
+            columns={progressColumns}
+          />
+        </Card>
+      </PageHeaderWrapper>
+    );
+  }
+}
+
+export default Basic;
diff --git a/src/pages/profile/basic/model.ts b/src/pages/profile/basic/model.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ddd13a2db1bcc0ed5e528780436e1853e3ce7fcb
--- /dev/null
+++ b/src/pages/profile/basic/model.ts
@@ -0,0 +1,54 @@
+import { AnyAction, Reducer } from 'redux';
+
+import { EffectsCommandMap } from 'dva';
+import { BasicGood } from './data.d';
+import { queryBasicProfile } from './service';
+
+export interface StateType {
+  basicGoods: BasicGood[];
+}
+
+export type Effect = (
+  action: AnyAction,
+  effects: EffectsCommandMap & { select: <T>(func: (state: StateType) => T) => T },
+) => void;
+
+export interface ModelType {
+  namespace: string;
+  state: StateType;
+  effects: {
+    fetchBasic: Effect;
+  };
+  reducers: {
+    show: Reducer<StateType>;
+  };
+}
+
+const Model: ModelType = {
+  namespace: 'profileBasic',
+
+  state: {
+    basicGoods: [],
+  },
+
+  effects: {
+    *fetchBasic(_, { call, put }) {
+      const response = yield call(queryBasicProfile);
+      yield put({
+        type: 'show',
+        payload: response,
+      });
+    },
+  },
+
+  reducers: {
+    show(state, { payload }) {
+      return {
+        ...state,
+        ...payload,
+      };
+    },
+  },
+};
+
+export default Model;
diff --git a/src/pages/profile/basic/service.ts b/src/pages/profile/basic/service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..bc2a9fd4759e348679b038728ab8907ad48ef815
--- /dev/null
+++ b/src/pages/profile/basic/service.ts
@@ -0,0 +1,5 @@
+import request from 'umi-request';
+
+export async function queryBasicProfile() {
+  return request('/api/profile/basic');
+}
diff --git a/src/pages/profile/basic/style.less b/src/pages/profile/basic/style.less
new file mode 100644
index 0000000000000000000000000000000000000000..68f3c93f3b02ddc7e8ceb405e141883412993011
--- /dev/null
+++ b/src/pages/profile/basic/style.less
@@ -0,0 +1,8 @@
+@import '~antd/es/style/themes/default.less';
+
+.title {
+  margin-bottom: 16px;
+  color: @heading-color;
+  font-weight: 500;
+  font-size: 16px;
+}
diff --git a/src/pages/result/fail/Result/index.less b/src/pages/result/fail/Result/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..60fa5a05324c56e25fda971fef62f267b8c22cbb
--- /dev/null
+++ b/src/pages/result/fail/Result/index.less
@@ -0,0 +1,58 @@
+@import '~antd/es/style/themes/default.less';
+
+.result {
+  width: 72%;
+  margin: 0 auto;
+  text-align: center;
+  @media screen and (max-width: @screen-xs) {
+    width: 100%;
+  }
+
+  .icon {
+    margin-bottom: 24px;
+    font-size: 72px;
+    line-height: 72px;
+
+    & > .success {
+      color: @success-color;
+    }
+
+    & > .error {
+      color: @error-color;
+    }
+  }
+
+  .title {
+    margin-bottom: 16px;
+    color: @heading-color;
+    font-weight: 500;
+    font-size: 24px;
+    line-height: 32px;
+  }
+
+  .description {
+    margin-bottom: 24px;
+    color: @text-color-secondary;
+    font-size: 14px;
+    line-height: 22px;
+  }
+
+  .extra {
+    padding: 24px 40px;
+    text-align: left;
+    background: @background-color-light;
+    border-radius: @border-radius-sm;
+
+    @media screen and (max-width: @screen-xs) {
+      padding: 18px 20px;
+    }
+  }
+
+  .actions {
+    margin-top: 32px;
+
+    button:not(:last-child) {
+      margin-right: 8px;
+    }
+  }
+}
diff --git a/src/pages/result/fail/Result/index.tsx b/src/pages/result/fail/Result/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..8c8ea1e4bc38983144625451a2508c329a0e2098
--- /dev/null
+++ b/src/pages/result/fail/Result/index.tsx
@@ -0,0 +1,41 @@
+import { Icon } from 'antd';
+import React from 'react';
+import classNames from 'classnames';
+import styles from './index.less';
+
+export interface ResultProps {
+  actions?: React.ReactNode;
+  className?: string;
+  description?: React.ReactNode;
+  extra?: React.ReactNode;
+  style?: React.CSSProperties;
+  title?: React.ReactNode;
+  type: 'success' | 'error';
+}
+
+const Result: React.SFC<ResultProps> = ({
+  className,
+  type,
+  title,
+  description,
+  extra,
+  actions,
+  ...restProps
+}) => {
+  const iconMap = {
+    error: <Icon className={styles.error} type="close-circle" theme="filled" />,
+    success: <Icon className={styles.success} type="check-circle" theme="filled" />,
+  };
+  const clsString = classNames(styles.result, className);
+  return (
+    <div className={clsString} {...restProps}>
+      <div className={styles.icon}>{iconMap[type]}</div>
+      <div className={styles.title}>{title}</div>
+      {description && <div className={styles.description}>{description}</div>}
+      {extra && <div className={styles.extra}>{extra}</div>}
+      {actions && <div className={styles.actions}>{actions}</div>}
+    </div>
+  );
+};
+
+export default Result;
diff --git a/src/pages/result/fail/index.less b/src/pages/result/fail/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..85373f2e21714e3c14750064cb1810f63560f101
--- /dev/null
+++ b/src/pages/result/fail/index.less
@@ -0,0 +1,11 @@
+@import '~antd/es/style/themes/default.less';
+
+.error_icon {
+  color: @highlight-color;
+}
+.title {
+  margin-bottom: 16px;
+  color: @heading-color;
+  font-weight: 500;
+  font-size: 16px;
+}
diff --git a/src/pages/result/fail/index.tsx b/src/pages/result/fail/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..f8dbbf0ac18432e3d019169ed6c21423c3ff81e9
--- /dev/null
+++ b/src/pages/result/fail/index.tsx
@@ -0,0 +1,61 @@
+import { Button, Card, Icon } from 'antd';
+import { FormattedMessage, formatMessage } from 'umi-plugin-react/locale';
+import React, { Fragment } from 'react';
+
+import { GridContent } from '@ant-design/pro-layout';
+import Result from './Result';
+import styles from './index.less';
+
+const extra = (
+  <Fragment>
+    <div className={styles.title}>
+      <FormattedMessage
+        id="result-fail.error.hint-title"
+        defaultMessage="The content you submitted has the following error:"
+      />
+    </div>
+    <div style={{ marginBottom: 16 }}>
+      <Icon style={{ marginRight: 8 }} className={styles.error_icon} type="close-circle-o" />
+      <FormattedMessage
+        id="result-fail.error.hint-text1"
+        defaultMessage="Your account has been frozen"
+      />
+      <a style={{ marginLeft: 16 }}>
+        <FormattedMessage id="result-fail.error.hint-btn1" defaultMessage="Thaw immediately" />
+        <Icon type="right" />
+      </a>
+    </div>
+    <div>
+      <Icon style={{ marginRight: 8 }} className={styles.error_icon} type="close-circle-o" />
+      <FormattedMessage
+        id="result-fail.error.hint-text2"
+        defaultMessage="Your account is not yet eligible to apply"
+      />
+      <a style={{ marginLeft: 16 }}>
+        <FormattedMessage id="result-fail.error.hint-btn2" defaultMessage="Upgrade immediately" />
+        <Icon type="right" />
+      </a>
+    </div>
+  </Fragment>
+);
+
+const actions = (
+  <Button type="primary">
+    <FormattedMessage id="result-fail.error.btn-text" defaultMessage="Return to modify" />
+  </Button>
+);
+
+export default () => (
+  <GridContent>
+    <Card bordered={false}>
+      <Result
+        type="error"
+        title={formatMessage({ id: 'result-fail.error.title' })}
+        description={formatMessage({ id: 'result-fail.error.description' })}
+        extra={extra}
+        actions={actions}
+        style={{ marginTop: 48, marginBottom: 16 }}
+      />
+    </Card>
+  </GridContent>
+);
diff --git a/src/pages/result/fail/locales/en-US.ts b/src/pages/result/fail/locales/en-US.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5cb8847a67dea27cb7d4c5d84e0d109088771b4f
--- /dev/null
+++ b/src/pages/result/fail/locales/en-US.ts
@@ -0,0 +1,11 @@
+export default {
+  'result-fail.error.title': 'Submission Failed',
+  'result-fail.error.description':
+    'Please check and modify the following information before resubmitting.',
+  'result-fail.error.hint-title': 'The content you submitted has the following error:',
+  'result-fail.error.hint-text1': 'Your account has been frozen',
+  'result-fail.error.hint-btn1': 'Thaw immediately',
+  'result-fail.error.hint-text2': 'Your account is not yet eligible to apply',
+  'result-fail.error.hint-btn2': 'Upgrade immediately',
+  'result-fail.error.btn-text': 'Return to modify',
+};
diff --git a/src/pages/result/fail/locales/zh-CN.ts b/src/pages/result/fail/locales/zh-CN.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ed6ebd36228b36f97021b09e2217627a2443b2ea
--- /dev/null
+++ b/src/pages/result/fail/locales/zh-CN.ts
@@ -0,0 +1,10 @@
+export default {
+  'result-fail.error.title': '提交失败',
+  'result-fail.error.description': '请核对并修改以下信息后，再重新提交。',
+  'result-fail.error.hint-title': '您提交的内容有如下错误：',
+  'result-fail.error.hint-text1': '您的账户已被冻结',
+  'result-fail.error.hint-btn1': '立即解冻',
+  'result-fail.error.hint-text2': '您的账户还不具备申请资格',
+  'result-fail.error.hint-btn2': '立即升级',
+  'result-fail.error.btn-text': '返回修改',
+};
diff --git a/src/pages/result/fail/locales/zh-TW.ts b/src/pages/result/fail/locales/zh-TW.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7d3883846f0bda7babb39ce329e83fe35ec40a9e
--- /dev/null
+++ b/src/pages/result/fail/locales/zh-TW.ts
@@ -0,0 +1,10 @@
+export default {
+  'result-fail.error.title': '提交失敗',
+  'result-fail.error.description': '請核對並修改以下信息後，再重新提交。',
+  'result-fail.error.hint-title': '您提交的內容有如下錯誤：',
+  'result-fail.error.hint-text1': '您的賬戶已被凍結',
+  'result-fail.error.hint-btn1': '立即解凍',
+  'result-fail.error.hint-text2': '您的賬戶還不具備申請資格',
+  'result-fail.error.hint-btn2': '立即升級',
+  'result-fail.error.btn-text': '返回修改',
+};
diff --git a/src/pages/result/success/Result/index.less b/src/pages/result/success/Result/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..60fa5a05324c56e25fda971fef62f267b8c22cbb
--- /dev/null
+++ b/src/pages/result/success/Result/index.less
@@ -0,0 +1,58 @@
+@import '~antd/es/style/themes/default.less';
+
+.result {
+  width: 72%;
+  margin: 0 auto;
+  text-align: center;
+  @media screen and (max-width: @screen-xs) {
+    width: 100%;
+  }
+
+  .icon {
+    margin-bottom: 24px;
+    font-size: 72px;
+    line-height: 72px;
+
+    & > .success {
+      color: @success-color;
+    }
+
+    & > .error {
+      color: @error-color;
+    }
+  }
+
+  .title {
+    margin-bottom: 16px;
+    color: @heading-color;
+    font-weight: 500;
+    font-size: 24px;
+    line-height: 32px;
+  }
+
+  .description {
+    margin-bottom: 24px;
+    color: @text-color-secondary;
+    font-size: 14px;
+    line-height: 22px;
+  }
+
+  .extra {
+    padding: 24px 40px;
+    text-align: left;
+    background: @background-color-light;
+    border-radius: @border-radius-sm;
+
+    @media screen and (max-width: @screen-xs) {
+      padding: 18px 20px;
+    }
+  }
+
+  .actions {
+    margin-top: 32px;
+
+    button:not(:last-child) {
+      margin-right: 8px;
+    }
+  }
+}
diff --git a/src/pages/result/success/Result/index.tsx b/src/pages/result/success/Result/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..8c8ea1e4bc38983144625451a2508c329a0e2098
--- /dev/null
+++ b/src/pages/result/success/Result/index.tsx
@@ -0,0 +1,41 @@
+import { Icon } from 'antd';
+import React from 'react';
+import classNames from 'classnames';
+import styles from './index.less';
+
+export interface ResultProps {
+  actions?: React.ReactNode;
+  className?: string;
+  description?: React.ReactNode;
+  extra?: React.ReactNode;
+  style?: React.CSSProperties;
+  title?: React.ReactNode;
+  type: 'success' | 'error';
+}
+
+const Result: React.SFC<ResultProps> = ({
+  className,
+  type,
+  title,
+  description,
+  extra,
+  actions,
+  ...restProps
+}) => {
+  const iconMap = {
+    error: <Icon className={styles.error} type="close-circle" theme="filled" />,
+    success: <Icon className={styles.success} type="check-circle" theme="filled" />,
+  };
+  const clsString = classNames(styles.result, className);
+  return (
+    <div className={clsString} {...restProps}>
+      <div className={styles.icon}>{iconMap[type]}</div>
+      <div className={styles.title}>{title}</div>
+      {description && <div className={styles.description}>{description}</div>}
+      {extra && <div className={styles.extra}>{extra}</div>}
+      {actions && <div className={styles.actions}>{actions}</div>}
+    </div>
+  );
+};
+
+export default Result;
diff --git a/src/pages/result/success/index.less b/src/pages/result/success/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..80ae29d74477f64763f5086e1bf1393d674896e6
--- /dev/null
+++ b/src/pages/result/success/index.less
@@ -0,0 +1,16 @@
+@import '~antd/es/style/themes/default.less';
+
+.title {
+  position: relative;
+  left: 42px;
+  color: @text-color;
+  font-size: 12px;
+  text-align: left;
+}
+
+.head-title {
+  margin-bottom: 20px;
+  color: @heading-color;
+  font-weight: 500px;
+  font-size: 16px;
+}
diff --git a/src/pages/result/success/index.tsx b/src/pages/result/success/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..c77a857065fb70e3890d9ad08b1ad5890d38ce0d
--- /dev/null
+++ b/src/pages/result/success/index.tsx
@@ -0,0 +1,131 @@
+import { Button, Card, Col, Icon, Row, Steps } from 'antd';
+import { FormattedMessage, formatMessage } from 'umi-plugin-react/locale';
+import React, { Fragment } from 'react';
+
+import { GridContent } from '@ant-design/pro-layout';
+import Result from './Result';
+import styles from './index.less';
+
+const { Step } = Steps;
+
+const desc1 = (
+  <div className={styles.title}>
+    <div style={{ margin: '8px 0 4px' }}>
+      <FormattedMessage id="result-success.success.step1-operator" defaultMessage="Qu Lili" />
+      <Icon style={{ marginLeft: 8, color: '#00A0E9' }} type="dingding-o" />
+    </div>
+    <div>2016-12-12 12:32</div>
+  </div>
+);
+
+const desc2 = (
+  <div style={{ fontSize: 12, position: 'relative', left: 42, textAlign: 'left' }}>
+    <div style={{ margin: '8px 0 4px' }}>
+      <FormattedMessage id="result-success.success.step2-operator" defaultMessage="Zhou Maomao" />
+      <Icon type="dingding-o" style={{ color: '#00A0E9', marginLeft: 8 }} />
+    </div>
+    <div>
+      <a href="">
+        <FormattedMessage id="result-success.success.step2-extra" defaultMessage="Urge" />
+      </a>
+    </div>
+  </div>
+);
+
+const extra = (
+  <Fragment>
+    <div className={styles['head-title']}>
+      <FormattedMessage id="result-success.success.operate-title" defaultMessage="Project Name" />
+    </div>
+    <Row style={{ marginBottom: 16 }}>
+      <Col xs={24} sm={12} md={12} lg={12} xl={6}>
+        <span>
+          <FormattedMessage id="result-success.success.operate-id" defaultMessage="Project ID：" />
+        </span>
+        23421
+      </Col>
+      <Col xs={24} sm={12} md={12} lg={12} xl={6}>
+        <span>
+          <FormattedMessage id="result-success.success.principal" defaultMessage="Principal：" />
+        </span>
+        <FormattedMessage id="result-success.success.step1-operator" defaultMessage="Qu Lili" />
+      </Col>
+      <Col xs={24} sm={24} md={24} lg={24} xl={12}>
+        <span>
+          <FormattedMessage
+            id="result-success.success.operate-time"
+            defaultMessage="Effective time："
+          />
+        </span>
+        2016-12-12 ~ 2017-12-12
+      </Col>
+    </Row>
+    <Steps style={{ marginLeft: -42, width: 'calc(100% + 84px)' }} progressDot current={1}>
+      <Step
+        title={
+          <span style={{ fontSize: 14 }}>
+            <FormattedMessage id="result-success.success.step1-title" defaultMessage="Create project" />
+          </span>
+        }
+        description={desc1}
+      />
+      <Step
+        title={
+          <span style={{ fontSize: 14 }}>
+            <FormattedMessage
+              id="result-success.success.step2-title"
+              defaultMessage="Departmental preliminary review"
+            />
+          </span>
+        }
+        description={desc2}
+      />
+      <Step
+        title={
+          <span style={{ fontSize: 14 }}>
+            <FormattedMessage
+              id="result-success.success.step3-title"
+              defaultMessage="Financial review"
+            />
+          </span>
+        }
+      />
+      <Step
+        title={
+          <span style={{ fontSize: 14 }}>
+            <FormattedMessage id="result-success.success.step4-title" defaultMessage="Finish" />
+          </span>
+        }
+      />
+    </Steps>
+  </Fragment>
+);
+
+const actions = (
+  <Fragment>
+    <Button type="primary">
+      <FormattedMessage id="result-success.success.btn-return" defaultMessage="Back to list" />
+    </Button>
+    <Button>
+      <FormattedMessage id="result-success.success.btn-project" defaultMessage="View project" />
+    </Button>
+    <Button>
+      <FormattedMessage id="result-success.success.btn-print" defaultMessage="Print" />
+    </Button>
+  </Fragment>
+);
+
+export default () => (
+  <GridContent>
+    <Card bordered={false}>
+      <Result
+        type="success"
+        title={formatMessage({ id: 'result-success.success.title' })}
+        description={formatMessage({ id: 'result-success.success.description' })}
+        extra={extra}
+        actions={actions}
+        style={{ marginTop: 48, marginBottom: 16 }}
+      />
+    </Card>
+  </GridContent>
+);
diff --git a/src/pages/result/success/locales/en-US.ts b/src/pages/result/success/locales/en-US.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8f97e7c4cfbc3186ceb28455f8e0030272b6c5ff
--- /dev/null
+++ b/src/pages/result/success/locales/en-US.ts
@@ -0,0 +1,19 @@
+export default {
+  'result-success.success.title': 'Submission Success',
+  'result-success.success.description':
+    'The submission results page is used to feed back the results of a series of operational tasks. If it is a simple operation, use the Message global prompt feedback. This text area can show a simple supplementary explanation. If there is a similar requirement for displaying “documents”, the following gray area can present more complicated content.',
+  'result-success.success.operate-title': 'Project Name',
+  'result-success.success.operate-id': 'Project ID：',
+  'result-success.success.principal': 'Principal：',
+  'result-success.success.operate-time': 'Effective time：',
+  'result-success.success.step1-title': 'Create project',
+  'result-success.success.step1-operator': 'Qu Lili',
+  'result-success.success.step2-title': 'Departmental preliminary review',
+  'result-success.success.step2-operator': 'Zhou Maomao',
+  'result-success.success.step2-extra': 'Urge',
+  'result-success.success.step3-title': 'Financial review',
+  'result-success.success.step4-title': 'Finish',
+  'result-success.success.btn-return': 'Back to list',
+  'result-success.success.btn-project': 'View project',
+  'result-success.success.btn-print': 'Print',
+};
diff --git a/src/pages/result/success/locales/zh-CN.ts b/src/pages/result/success/locales/zh-CN.ts
new file mode 100644
index 0000000000000000000000000000000000000000..10f01cd30977f29145c0e4408caa1247afa449fb
--- /dev/null
+++ b/src/pages/result/success/locales/zh-CN.ts
@@ -0,0 +1,19 @@
+export default {
+  'result-success.success.title': '提交成功',
+  'result-success.success.description':
+    '提交结果页用于反馈一系列操作任务的处理结果， 如果仅是简单操作，使用 Message 全局提示反馈即可。 本文字区域可以展示简单的补充说明，如果有类似展示 “单据”的需求，下面这个灰色区域可以呈现比较复杂的内容。',
+  'result-success.success.operate-title': '项目名称',
+  'result-success.success.operate-id': '项目 ID：',
+  'result-success.success.principal': '负责人：',
+  'result-success.success.operate-time': '生效时间：',
+  'result-success.success.step1-title': '创建项目',
+  'result-success.success.step1-operator': '曲丽丽',
+  'result-success.success.step2-title': '部门初审',
+  'result-success.success.step2-operator': '周毛毛',
+  'result-success.success.step2-extra': '催一下',
+  'result-success.success.step3-title': '财务复核',
+  'result-success.success.step4-title': '完成',
+  'result-success.success.btn-return': '返回列表',
+  'result-success.success.btn-project': '查看项目',
+  'result-success.success.btn-print': '打印',
+};
diff --git a/src/pages/result/success/locales/zh-TW.ts b/src/pages/result/success/locales/zh-TW.ts
new file mode 100644
index 0000000000000000000000000000000000000000..fd4fbff80d1fc3c175ac61bcfa8dda4a5ae995f0
--- /dev/null
+++ b/src/pages/result/success/locales/zh-TW.ts
@@ -0,0 +1,19 @@
+export default {
+  'result-success.success.title': '提交成功',
+  'result-success.success.description':
+    '提交結果頁用於反饋壹系列操作任務的處理結果， 如果僅是簡單操作，使用 Message 全局提示反饋即可。 本文字區域可以展示簡單的補充說明，如果有類似展示 “單據”的需求，下面這個灰色區域可以呈現比較復雜的內容。',
+  'result-success.success.operate-title': '項目名稱',
+  'result-success.success.operate-id': '項目 ID：',
+  'result-success.success.principal': '負責人：',
+  'result-success.success.operate-time': '生效時間：',
+  'result-success.success.step1-title': '創建項目',
+  'result-success.success.step1-operator': '曲麗麗',
+  'result-success.success.step2-title': '部門初審',
+  'result-success.success.step2-operator': '周毛毛',
+  'result-success.success.step2-extra': '催壹下',
+  'result-success.success.step3-title': '財務復核',
+  'result-success.success.step4-title': '完成',
+  'result-success.success.btn-return': '返回列表',
+  'result-success.success.btn-project': '查看項目',
+  'result-success.success.btn-print': '打印',
+};
diff --git a/src/pages/user/login/_mock.ts b/src/pages/user/login/_mock.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8c7698f6dd5792ce00f833a586e106cc973d09ce
--- /dev/null
+++ b/src/pages/user/login/_mock.ts
@@ -0,0 +1,36 @@
+function getFakeCaptcha(req: any, res: { json: (arg0: string) => void }) {
+  return res.json('captcha-xxx');
+}
+
+export default {
+  'POST  /api/login/account': (
+    req: { body: { password: any; userName: any; type: any } },
+    res: {
+      send: (data: any) => void;
+    },
+  ) => {
+    const { password, userName, type } = req.body;
+    if (password === 'ant.design' && userName === 'admin') {
+      res.send({
+        status: 'ok',
+        type,
+        currentAuthority: 'admin',
+      });
+      return;
+    }
+    if (password === 'ant.design' && userName === 'user') {
+      res.send({
+        status: 'ok',
+        type,
+        currentAuthority: 'user',
+      });
+      return;
+    }
+    res.send({
+      status: 'error',
+      type,
+      currentAuthority: 'guest',
+    });
+  },
+  'GET  /api/login/captcha': getFakeCaptcha,
+};
diff --git a/src/pages/user/login/components/Login/LoginContext.tsx b/src/pages/user/login/components/Login/LoginContext.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..ae571e0db3dd5fbbd1e5b1248947b9c9ab4ad4df
--- /dev/null
+++ b/src/pages/user/login/components/Login/LoginContext.tsx
@@ -0,0 +1,13 @@
+import { createContext } from 'react';
+
+export interface LoginContextProps {
+  tabUtil?: {
+    addTab: (id: string) => void;
+    removeTab: (id: string) => void;
+  };
+  updateActive?: (activeItem: { [key: string]: string } | string) => void;
+}
+
+const LoginContext: React.Context<LoginContextProps> = createContext({});
+
+export default LoginContext;
diff --git a/src/pages/user/login/components/Login/LoginItem.tsx b/src/pages/user/login/components/Login/LoginItem.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..6daea72b5242d22e05f25b8b7638abd07e98dc13
--- /dev/null
+++ b/src/pages/user/login/components/Login/LoginItem.tsx
@@ -0,0 +1,196 @@
+import { Button, Col, Form, Input, Row } from 'antd';
+import React, { Component } from 'react';
+
+import { FormComponentProps } from 'antd/es/form';
+import omit from 'omit.js';
+import ItemMap from './map';
+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 interface LoginItemType {
+  UserName: React.FC<WrappedLoginItemProps>;
+  Password: React.FC<WrappedLoginItemProps>;
+  Mobile: React.FC<WrappedLoginItemProps>;
+  Captcha: React.FC<WrappedLoginItemProps>;
+}
+
+export interface LoginItemProps {
+  name?: string;
+  rules?: any[];
+  style?: React.CSSProperties;
+  onGetCaptcha?: (event?: MouseEvent) => void | Promise<any> | false;
+  placeholder?: string;
+  buttonText?: React.ReactNode;
+  onPressEnter?: (e: any) => void;
+  countDown?: number;
+  getCaptchaButtonText?: string;
+  getCaptchaSecondText?: string;
+  updateActive?: LoginContextProps['updateActive'];
+  type?: string;
+  defaultValue?: string;
+  form?: FormComponentProps['form'];
+  customProps?: { [key: string]: any };
+  onChange?: (e: any) => void;
+  tabUtil?: any;
+}
+
+interface LoginItemState {
+  count: number;
+}
+
+const FormItem = Form.Item;
+
+class WrapFormItem extends Component<LoginItemProps, LoginItemState> {
+  static defaultProps = {
+    getCaptchaButtonText: 'captcha',
+    getCaptchaSecondText: 'second',
+  };
+
+  interval: number | undefined = undefined;
+
+  constructor(props: LoginItemProps) {
+    super(props);
+    this.state = {
+      count: 0,
+    };
+  }
+
+  componentDidMount() {
+    const { updateActive, name = '' } = this.props;
+    if (updateActive) {
+      updateActive(name);
+    }
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.interval);
+  }
+
+  onGetCaptcha = () => {
+    const { onGetCaptcha } = this.props;
+    const result = onGetCaptcha ? onGetCaptcha() : null;
+    if (result === false) {
+      return;
+    }
+    if (result instanceof Promise) {
+      result.then(this.runGetCaptchaCountDown);
+    } else {
+      this.runGetCaptchaCountDown();
+    }
+  };
+
+  getFormItemOptions = ({ onChange, defaultValue, customProps = {}, rules }: LoginItemProps) => {
+    const options: {
+      rules?: any[];
+      onChange?: LoginItemProps['onChange'];
+      initialValue?: LoginItemProps['defaultValue'];
+    } = {
+      rules: rules || customProps.rules,
+    };
+    if (onChange) {
+      options.onChange = onChange;
+    }
+    if (defaultValue) {
+      options.initialValue = defaultValue;
+    }
+    return options;
+  };
+
+  runGetCaptchaCountDown = () => {
+    const { countDown } = this.props;
+    let count = countDown || 59;
+    this.setState({ count });
+    this.interval = window.setInterval(() => {
+      count -= 1;
+      this.setState({ count });
+      if (count === 0) {
+        clearInterval(this.interval);
+      }
+    }, 1000);
+  };
+
+  render() {
+    const { count } = this.state;
+
+    // 这么写是为了防止restProps中 带入 onChange, defaultValue, rules props tabUtil
+    const {
+      onChange,
+      customProps,
+      defaultValue,
+      rules,
+      name,
+      getCaptchaButtonText,
+      getCaptchaSecondText,
+      updateActive,
+      type,
+      form,
+      tabUtil,
+      ...restProps
+    } = this.props;
+    if (!name) {
+      return null;
+    }
+    if (!form) {
+      return null;
+    }
+    const { getFieldDecorator } = form;
+    // get getFieldDecorator props
+    const options = this.getFormItemOptions(this.props);
+    const otherProps = restProps || {};
+
+    if (type === 'Captcha') {
+      const inputProps = omit(otherProps, ['onGetCaptcha', 'countDown']);
+
+      return (
+        <FormItem>
+          <Row gutter={8}>
+            <Col span={16}>
+              {getFieldDecorator(name, options)(<Input {...customProps} {...inputProps} />)}
+            </Col>
+            <Col span={8}>
+              <Button
+                disabled={!!count}
+                className={styles.getCaptcha}
+                size="large"
+                onClick={this.onGetCaptcha}
+              >
+                {count ? `${count} ${getCaptchaSecondText}` : getCaptchaButtonText}
+              </Button>
+            </Col>
+          </Row>
+        </FormItem>
+      );
+    }
+    return (
+      <FormItem>
+        {getFieldDecorator(name, options)(<Input {...customProps} {...otherProps} />)}
+      </FormItem>
+    );
+  }
+}
+
+const LoginItem: Partial<LoginItemType> = {};
+
+Object.keys(ItemMap).forEach(key => {
+  const item = ItemMap[key];
+  LoginItem[key] = (props: LoginItemProps) => (
+    <LoginContext.Consumer>
+      {context => (
+        <WrapFormItem
+          customProps={item.props}
+          rules={item.rules}
+          {...props}
+          type={key}
+          {...context}
+          updateActive={context.updateActive}
+        />
+      )}
+    </LoginContext.Consumer>
+  );
+});
+
+export default LoginItem as LoginItemType;
diff --git a/src/pages/user/login/components/Login/LoginSubmit.tsx b/src/pages/user/login/components/Login/LoginSubmit.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..e4d75cb6e1a672562a1ace801af177eee2061c9c
--- /dev/null
+++ b/src/pages/user/login/components/Login/LoginSubmit.tsx
@@ -0,0 +1,23 @@
+import { Button, Form } from 'antd';
+
+import { ButtonProps } from 'antd/es/button';
+import React from 'react';
+import classNames from 'classnames';
+import styles from './index.less';
+
+const FormItem = Form.Item;
+
+interface LoginSubmitProps extends ButtonProps {
+  className?: string;
+}
+
+const LoginSubmit: React.SFC<LoginSubmitProps> = ({ className, ...rest }) => {
+  const clsString = classNames(styles.submit, className);
+  return (
+    <FormItem>
+      <Button size="large" className={clsString} type="primary" htmlType="submit" {...rest} />
+    </FormItem>
+  );
+};
+
+export default LoginSubmit;
diff --git a/src/pages/user/login/components/Login/LoginTab.tsx b/src/pages/user/login/components/Login/LoginTab.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..0344d30e01cf6786f6a92896816d14bd5c2b65e3
--- /dev/null
+++ b/src/pages/user/login/components/Login/LoginTab.tsx
@@ -0,0 +1,53 @@
+import React, { Component } from 'react';
+
+import { TabPaneProps } from 'antd/es/tabs';
+import { Tabs } from 'antd';
+import LoginContext, { LoginContextProps } from './LoginContext';
+
+const { TabPane } = Tabs;
+
+const generateId = (() => {
+  let i = 0;
+  return (prefix = '') => {
+    i += 1;
+    return `${prefix}${i}`;
+  };
+})();
+
+interface LoginTabProps extends TabPaneProps {
+  tabUtil: LoginContextProps['tabUtil'];
+}
+
+class LoginTab extends Component<LoginTabProps> {
+  uniqueId: string = '';
+
+  constructor(props: LoginTabProps) {
+    super(props);
+    this.uniqueId = generateId('login-tab-');
+  }
+
+  componentDidMount() {
+    const { tabUtil } = this.props;
+    if (tabUtil) {
+      tabUtil.addTab(this.uniqueId);
+    }
+  }
+
+  render() {
+    const { children } = this.props;
+    return <TabPane {...this.props}>{children}</TabPane>;
+  }
+}
+
+const WrapContext: React.SFC<TabPaneProps> & {
+  typeName: string;
+} = props => (
+  <LoginContext.Consumer>
+    {value => <LoginTab tabUtil={value.tabUtil} {...props} />}
+  </LoginContext.Consumer>
+);
+
+// 标志位 用来判断是不是自定义组件
+WrapContext.typeName = 'LoginTab';
+
+export default WrapContext;
diff --git a/src/pages/user/login/components/Login/index.less b/src/pages/user/login/components/Login/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..db65c4e76545a6a31f177ddc713a9775a2c16608
--- /dev/null
+++ b/src/pages/user/login/components/Login/index.less
@@ -0,0 +1,53 @@
+@import '~antd/es/style/themes/default.less';
+
+.login {
+  :global {
+    .ant-tabs .ant-tabs-bar {
+      margin-bottom: 24px;
+      text-align: center;
+      border-bottom: 0;
+    }
+
+    .ant-form-item {
+      margin: 0 2px 24px;
+    }
+  }
+
+  .getCaptcha {
+    display: block;
+    width: 100%;
+  }
+
+  .icon {
+    margin-left: 16px;
+    color: rgba(0, 0, 0, 0.2);
+    font-size: 24px;
+    vertical-align: middle;
+    cursor: pointer;
+    transition: color 0.3s;
+
+    &:hover {
+      color: @primary-color;
+    }
+  }
+
+  .other {
+    margin-top: 24px;
+    line-height: 22px;
+    text-align: left;
+
+    .register {
+      float: right;
+    }
+  }
+
+  .prefixIcon {
+    color: @disabled-color;
+    font-size: @font-size-base;
+  }
+
+  .submit {
+    width: 100%;
+    margin-top: 24px;
+  }
+}
diff --git a/src/pages/user/login/components/Login/index.tsx b/src/pages/user/login/components/Login/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..01a75cd3abc697f6b88c5afe6db18c41b3760acc
--- /dev/null
+++ b/src/pages/user/login/components/Login/index.tsx
@@ -0,0 +1,164 @@
+import { Form, Tabs } from 'antd';
+import React, { Component } from 'react';
+import { FormComponentProps } from 'antd/es/form';
+import classNames from 'classnames';
+import LoginContext, { LoginContextProps } from './LoginContext';
+import LoginItem, { LoginItemProps } from './LoginItem';
+
+import LoginSubmit from './LoginSubmit';
+import LoginTab from './LoginTab';
+import styles from './index.less';
+
+export interface LoginProps {
+  defaultActiveKey?: string;
+  onTabChange?: (key: string) => void;
+  style?: React.CSSProperties;
+  onSubmit?: (error: any, values: any) => void;
+  className?: string;
+  form: FormComponentProps['form'];
+  children: React.ReactElement<LoginTab>[];
+}
+
+interface LoginState {
+  tabs?: string[];
+  type?: string;
+  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: '',
+    onTabChange: () => {},
+    onSubmit: () => {},
+  };
+
+  constructor(props: LoginProps) {
+    super(props);
+    this.state = {
+      type: props.defaultActiveKey,
+      tabs: [],
+      active: {},
+    };
+  }
+
+  onSwitch = (type: string) => {
+    this.setState(
+      {
+        type,
+      },
+      () => {
+        const { onTabChange } = this.props;
+        if (onTabChange) {
+          onTabChange(type);
+        }
+      },
+    );
+  };
+
+  getContext: () => LoginContextProps = () => {
+    const { form } = this.props;
+    const { tabs = [] } = this.state;
+    return {
+      tabUtil: {
+        addTab: id => {
+          this.setState({
+            tabs: [...tabs, id],
+          });
+        },
+        removeTab: id => {
+          this.setState({
+            tabs: tabs.filter(currentId => currentId !== id),
+          });
+        },
+      },
+      form: { ...form },
+      updateActive: activeItem => {
+        const { type = '', active = {} } = this.state;
+        if (active[type]) {
+          active[type].push(activeItem);
+        } else {
+          active[type] = [activeItem];
+        }
+        this.setState({
+          active,
+        });
+      },
+    };
+  };
+
+  handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    const { active = {}, type = '' } = this.state;
+    const { form, onSubmit } = this.props;
+    const activeFields = active[type] || [];
+    if (form) {
+      form.validateFields(activeFields, { force: true }, (err, values) => {
+        if (onSubmit) {
+          onSubmit(err, values);
+        }
+      });
+    }
+  };
+
+  render() {
+    const { className, children } = this.props;
+    const { type, tabs = [] } = this.state;
+    const TabChildren: React.ReactComponentElement<LoginTab>[] = [];
+    const otherChildren: React.ReactElement<any>[] = [];
+    React.Children.forEach(
+      children,
+      (child: React.ReactComponentElement<LoginTab> | React.ReactElement<any>) => {
+        if (!child) {
+          return;
+        }
+        if (child.type.typeName === 'LoginTab') {
+          TabChildren.push(child);
+        } else {
+          otherChildren.push(child);
+        }
+      },
+    );
+    return (
+      <LoginContext.Provider value={this.getContext()}>
+        <div className={classNames(className, styles.login)}>
+          <Form onSubmit={this.handleSubmit}>
+            {tabs.length ? (
+              <React.Fragment>
+                <Tabs
+                  animated={false}
+                  className={styles.tabs}
+                  activeKey={type}
+                  onChange={this.onSwitch}
+                >
+                  {TabChildren}
+                </Tabs>
+                {otherChildren}
+              </React.Fragment>
+            ) : (
+              children
+            )}
+          </Form>
+        </div>
+      </LoginContext.Provider>
+    );
+  }
+}
+
+(Object.keys(LoginItem) as (keyof LoginItemType)[]).forEach(item => {
+  Login[item] = LoginItem[item];
+});
+
+export default Form.create<LoginProps>()(Login);
diff --git a/src/pages/user/login/components/Login/map.tsx b/src/pages/user/login/components/Login/map.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..babd226f86624acd35150032eaa3288d37ebeb17
--- /dev/null
+++ b/src/pages/user/login/components/Login/map.tsx
@@ -0,0 +1,65 @@
+import { Icon } from 'antd';
+import React from 'react';
+import styles from './index.less';
+
+export default {
+  UserName: {
+    props: {
+      size: 'large',
+      id: 'userName',
+      prefix: <Icon type="user" className={styles.prefixIcon} />,
+      placeholder: 'admin',
+    },
+    rules: [
+      {
+        required: true,
+        message: 'Please enter username!',
+      },
+    ],
+  },
+  Password: {
+    props: {
+      size: 'large',
+      prefix: <Icon type="lock" className={styles.prefixIcon} />,
+      type: 'password',
+      id: 'password',
+      placeholder: '888888',
+    },
+    rules: [
+      {
+        required: true,
+        message: 'Please enter password!',
+      },
+    ],
+  },
+  Mobile: {
+    props: {
+      size: 'large',
+      prefix: <Icon type="mobile" className={styles.prefixIcon} />,
+      placeholder: 'mobile number',
+    },
+    rules: [
+      {
+        required: true,
+        message: 'Please enter mobile number!',
+      },
+      {
+        pattern: /^1\d{10}$/,
+        message: 'Wrong mobile number format!',
+      },
+    ],
+  },
+  Captcha: {
+    props: {
+      size: 'large',
+      prefix: <Icon type="mail" className={styles.prefixIcon} />,
+      placeholder: 'captcha',
+    },
+    rules: [
+      {
+        required: true,
+        message: 'Please enter Captcha!',
+      },
+    ],
+  },
+};
diff --git a/src/pages/user/login/index.tsx b/src/pages/user/login/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..1be1f7321c58f456f8cc906c196ac37beecd6bd7
--- /dev/null
+++ b/src/pages/user/login/index.tsx
@@ -0,0 +1,214 @@
+import { Alert, Checkbox, Icon } from 'antd';
+import { FormattedMessage, formatMessage } from 'umi-plugin-react/locale';
+import React, { Component } from 'react';
+
+import { CheckboxChangeEvent } from 'antd/es/checkbox';
+import { Dispatch } from 'redux';
+import { FormComponentProps } from 'antd/es/form';
+import Link from 'umi/link';
+import { connect } from 'dva';
+import { StateType } from './model';
+import LoginComponents from './components/Login';
+import styles from './style.less';
+
+const { Tab, UserName, Password, Mobile, Captcha, Submit } = LoginComponents;
+
+interface LoginProps {
+  dispatch: Dispatch<any>;
+  userLogin: StateType;
+  submitting: boolean;
+}
+interface LoginState {
+  type: string;
+  autoLogin: boolean;
+}
+export interface FromDataType {
+  userName: string;
+  password: string;
+  mobile: string;
+  captcha: string;
+}
+
+@connect(
+  ({
+    userLogin,
+    loading,
+  }: {
+    userLogin: StateType;
+    loading: {
+      effects: {
+        [key: string]: string;
+      };
+    };
+  }) => ({
+    userLogin,
+    submitting: loading.effects['userLogin/login'],
+  }),
+)
+class Login extends Component<
+  LoginProps,
+  LoginState
+> {
+  loginForm: FormComponentProps['form'] | undefined | null = undefined;
+
+  state: LoginState = {
+    type: 'account',
+    autoLogin: true,
+  };
+
+  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: 'userLogin/login',
+        payload: {
+          ...values,
+          type,
+        },
+      });
+    }
+  };
+
+  onTabChange = (type: string) => {
+    this.setState({ type });
+  };
+
+  onGetCaptcha = () =>
+    new Promise((resolve, reject) => {
+      if (!this.loginForm) {
+        return;
+      }
+      this.loginForm.validateFields(['mobile'], {}, (err: any, values: FromDataType) => {
+        if (err) {
+          reject(err);
+        } else {
+          const { dispatch } = this.props;
+          ((dispatch({
+            type: 'userLogin/getCaptcha',
+            payload: values.mobile,
+          }) as unknown) as Promise<any>)
+            .then(resolve)
+            .catch(reject);
+        }
+      });
+    });
+
+  renderMessage = (content: string) => (
+    <Alert style={{ marginBottom: 24 }} message={content} type="error" showIcon />
+  );
+
+  render() {
+    const { userLogin, submitting } = this.props;
+    const { status, type: loginType } = userLogin;
+    const { type, autoLogin } = this.state;
+    return (
+      <div className={styles.main}>
+        <LoginComponents
+          defaultActiveKey={type}
+          onTabChange={this.onTabChange}
+          onSubmit={this.handleSubmit}
+          ref={(form: any) => {
+            this.loginForm = form;
+          }}
+        >
+          <Tab key="account" tab={formatMessage({ id: 'user-login.login.tab-login-credentials' })}>
+            {status === 'error' &&
+              loginType === 'account' &&
+              !submitting &&
+              this.renderMessage(
+                formatMessage({ id: 'user-login.login.message-invalid-credentials' }),
+              )}
+            <UserName
+              name="userName"
+              placeholder={`${formatMessage({ id: 'user-login.login.userName' })}: admin or user`}
+              rules={[
+                {
+                  required: true,
+                  message: formatMessage({ id: 'user-login.userName.required' }),
+                },
+              ]}
+            />
+            <Password
+              name="password"
+              placeholder={`${formatMessage({ id: 'user-login.login.password' })}: ant.design`}
+              rules={[
+                {
+                  required: true,
+                  message: formatMessage({ id: 'user-login.password.required' }),
+                },
+              ]}
+              onPressEnter={() =>
+                this.loginForm && this.loginForm.validateFields(this.handleSubmit)
+              }
+            />
+          </Tab>
+          <Tab key="mobile" tab={formatMessage({ id: 'user-login.login.tab-login-mobile' })}>
+            {status === 'error' &&
+              loginType === 'mobile' &&
+              !submitting &&
+              this.renderMessage(
+                formatMessage({ id: 'user-login.login.message-invalid-verification-code' }),
+              )}
+            <Mobile
+              name="mobile"
+              placeholder={formatMessage({ id: 'user-login.phone-number.placeholder' })}
+              rules={[
+                {
+                  required: true,
+                  message: formatMessage({ id: 'user-login.phone-number.required' }),
+                },
+                {
+                  pattern: /^1\d{10}$/,
+                  message: formatMessage({ id: 'user-login.phone-number.wrong-format' }),
+                },
+              ]}
+            />
+            <Captcha
+              name="captcha"
+              placeholder={formatMessage({ id: 'user-login.verification-code.placeholder' })}
+              countDown={120}
+              onGetCaptcha={this.onGetCaptcha}
+              getCaptchaButtonText={formatMessage({ id: 'user-login.form.get-captcha' })}
+              getCaptchaSecondText={formatMessage({ id: 'user-login.captcha.second' })}
+              rules={[
+                {
+                  required: true,
+                  message: formatMessage({ id: 'user-login.verification-code.required' }),
+                },
+              ]}
+            />
+          </Tab>
+          <div>
+            <Checkbox checked={autoLogin} onChange={this.changeAutoLogin}>
+              <FormattedMessage id="user-login.login.remember-me" />
+            </Checkbox>
+            <a style={{ float: 'right' }} href="">
+              <FormattedMessage id="user-login.login.forgot-password" />
+            </a>
+          </div>
+          <Submit loading={submitting}>
+            <FormattedMessage id="user-login.login.login" />
+          </Submit>
+          <div className={styles.other}>
+            <FormattedMessage id="user-login.login.sign-in-with" />
+            <Icon type="alipay-circle" className={styles.icon} theme="outlined" />
+            <Icon type="taobao-circle" className={styles.icon} theme="outlined" />
+            <Icon type="weibo-circle" className={styles.icon} theme="outlined" />
+            <Link className={styles.register} to="/user/register">
+              <FormattedMessage id="user-login.login.signup" />
+            </Link>
+          </div>
+        </LoginComponents>
+      </div>
+    );
+  }
+}
+
+export default Login;
diff --git a/src/pages/user/login/locales/en-US.ts b/src/pages/user/login/locales/en-US.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c3e7080d05c6addaedee6ab7fbaa5889e5fe38a3
--- /dev/null
+++ b/src/pages/user/login/locales/en-US.ts
@@ -0,0 +1,78 @@
+export default {
+  'user-login.login.userName': 'userName',
+  'user-login.login.password': 'password',
+  'user-login.login.message-invalid-credentials':
+    'Invalid username or password（admin/ant.design）',
+  'user-login.login.message-invalid-verification-code': 'Invalid verification code',
+  'user-login.login.tab-login-credentials': 'Credentials',
+  'user-login.login.tab-login-mobile': 'Mobile number',
+  'user-login.login.remember-me': 'Remember me',
+  'user-login.login.forgot-password': 'Forgot your password?',
+  'user-login.login.sign-in-with': 'Sign in with',
+  'user-login.login.signup': 'Sign up',
+  'user-login.login.login': 'Login',
+  'user-login.register.register': 'Register',
+  'user-login.register.get-verification-code': 'Get code',
+  'user-login.register.sign-in': 'Already have an account?',
+  'user-login.register-result.msg': 'Account：registered at {email}',
+  'user-login.register-result.activation-email':
+    'The activation email has been sent to your email address and is valid for 24 hours. Please log in to the email in time and click on the link in the email to activate the account.',
+  'user-login.register-result.back-home': 'Back to home',
+  'user-login.register-result.view-mailbox': 'View mailbox',
+  'user-login.email.required': 'Please enter your email!',
+  'user-login.email.wrong-format': 'The email address is in the wrong format!',
+  'user-login.userName.required': 'Please enter your userName!',
+  'user-login.password.required': 'Please enter your password!',
+  'user-login.password.twice': 'The passwords entered twice do not match!',
+  'user-login.strength.msg':
+    "Please enter at least 6 characters and don't use passwords that are easy to guess.",
+  'user-login.strength.strong': 'Strength: strong',
+  'user-login.strength.medium': 'Strength: medium',
+  'user-login.strength.short': 'Strength: too short',
+  'user-login.confirm-password.required': 'Please confirm your password!',
+  'user-login.phone-number.required': 'Please enter your phone number!',
+  'user-login.phone-number.wrong-format': 'Malformed phone number!',
+  'user-login.verification-code.required': 'Please enter the verification code!',
+  'user-login.title.required': 'Please enter a title',
+  'user-login.date.required': 'Please select the start and end date',
+  'user-login.goal.required': 'Please enter a description of the goal',
+  'user-login.standard.required': 'Please enter a metric',
+  'user-login.form.get-captcha': 'Get Captcha',
+  'user-login.captcha.second': 'sec',
+  'user-login.form.optional': ' (optional) ',
+  'user-login.form.submit': 'Submit',
+  'user-login.form.save': 'Save',
+  'user-login.email.placeholder': 'Email',
+  'user-login.password.placeholder': 'Password',
+  'user-login.confirm-password.placeholder': 'Confirm password',
+  'user-login.phone-number.placeholder': 'Phone number',
+  'user-login.verification-code.placeholder': 'Verification code',
+  'user-login.title.label': 'Title',
+  'user-login.title.placeholder': 'Give the target a name',
+  'user-login.date.label': 'Start and end date',
+  'user-login.placeholder.start': 'Start date',
+  'user-login.placeholder.end': 'End date',
+  'user-login.goal.label': 'Goal description',
+  'user-login.goal.placeholder': 'Please enter your work goals',
+  'user-login.standard.label': 'Metrics',
+  'user-login.standard.placeholder': 'Please enter a metric',
+  'user-login.client.label': 'Client',
+  'user-login.label.tooltip': 'Target service object',
+  'user-login.client.placeholder':
+    'Please describe your customer service, internal customers directly @ Name / job number',
+  'user-login.invites.label': 'Inviting critics',
+  'user-login.invites.placeholder':
+    'Please direct @ Name / job number, you can invite up to 5 people',
+  'user-login.weight.label': 'Weight',
+  'user-login.weight.placeholder': 'Please enter weight',
+  'user-login.public.label': 'Target disclosure',
+  'user-login.label.help': 'Customers and invitees are shared by default',
+  'user-login.radio.public': 'Public',
+  'user-login.radio.partially-public': 'Partially public',
+  'user-login.radio.private': 'Private',
+  'user-login.publicUsers.placeholder': 'Open to',
+  'user-login.option.A': 'Colleague A',
+  'user-login.option.B': 'Colleague B',
+  'user-login.option.C': 'Colleague C',
+  'user-login.navBar.lang': 'Languages',
+};
diff --git a/src/pages/user/login/locales/zh-CN.ts b/src/pages/user/login/locales/zh-CN.ts
new file mode 100644
index 0000000000000000000000000000000000000000..fe0e7f596706ad8ede54ef6c2c54c90539a021e2
--- /dev/null
+++ b/src/pages/user/login/locales/zh-CN.ts
@@ -0,0 +1,74 @@
+export default {
+  'user-login.login.userName': '用户名',
+  'user-login.login.password': '密码',
+  'user-login.login.message-invalid-credentials': '账户或密码错误（admin/ant.design）',
+  'user-login.login.message-invalid-verification-code': '验证码错误',
+  'user-login.login.tab-login-credentials': '账户密码登录',
+  'user-login.login.tab-login-mobile': '手机号登录',
+  'user-login.login.remember-me': '自动登录',
+  'user-login.login.forgot-password': '忘记密码',
+  'user-login.login.sign-in-with': '其他登录方式',
+  'user-login.login.signup': '注册账户',
+  'user-login.login.login': '登录',
+  'user-login.register.register': '注册',
+  'user-login.register.get-verification-code': '获取验证码',
+  'user-login.register.sign-in': '使用已有账户登录',
+  'user-login.register-result.msg': '你的账户：{email} 注册成功',
+  'user-login.register-result.activation-email':
+    '激活邮件已发送到你的邮箱中，邮件有效期为24小时。请及时登录邮箱，点击邮件中的链接激活帐户。',
+  'user-login.register-result.back-home': '返回首页',
+  'user-login.register-result.view-mailbox': '查看邮箱',
+  'user-login.email.required': '请输入邮箱地址！',
+  'user-login.email.wrong-format': '邮箱地址格式错误！',
+  'user-login.userName.required': '请输入用户名!',
+  'user-login.password.required': '请输入密码！',
+  'user-login.password.twice': '两次输入的密码不匹配!',
+  'user-login.strength.msg': '请至少输入 6 个字符。请不要使用容易被猜到的密码。',
+  'user-login.strength.strong': '强度：强',
+  'user-login.strength.medium': '强度：中',
+  'user-login.strength.short': '强度：太短',
+  'user-login.confirm-password.required': '请确认密码！',
+  'user-login.phone-number.required': '请输入手机号！',
+  'user-login.phone-number.wrong-format': '手机号格式错误！',
+  'user-login.verification-code.required': '请输入验证码！',
+  'user-login.title.required': '请输入标题',
+  'user-login.date.required': '请选择起止日期',
+  'user-login.goal.required': '请输入目标描述',
+  'user-login.standard.required': '请输入衡量标准',
+  'user-login.form.get-captcha': '获取验证码',
+  'user-login.captcha.second': '秒',
+  'user-login.form.optional': '（选填）',
+  'user-login.form.submit': '提交',
+  'user-login.form.save': '保存',
+  'user-login.email.placeholder': '邮箱',
+  'user-login.password.placeholder': '至少6位密码，区分大小写',
+  'user-login.confirm-password.placeholder': '确认密码',
+  'user-login.phone-number.placeholder': '手机号',
+  'user-login.verification-code.placeholder': '验证码',
+  'user-login.title.label': '标题',
+  'user-login.title.placeholder': '给目标起个名字',
+  'user-login.date.label': '起止日期',
+  'user-login.placeholder.start': '开始日期',
+  'user-login.placeholder.end': '结束日期',
+  'user-login.goal.label': '目标描述',
+  'user-login.goal.placeholder': '请输入你的阶段性工作目标',
+  'user-login.standard.label': '衡量标准',
+  'user-login.standard.placeholder': '请输入衡量标准',
+  'user-login.client.label': '客户',
+  'user-login.label.tooltip': '目标的服务对象',
+  'user-login.client.placeholder': '请描述你服务的客户，内部客户直接 @姓名／工号',
+  'user-login.invites.label': '邀评人',
+  'user-login.invites.placeholder': '请直接 @姓名／工号，最多可邀请 5 人',
+  'user-login.weight.label': '权重',
+  'user-login.weight.placeholder': '请输入',
+  'user-login.public.label': '目标公开',
+  'user-login.label.help': '客户、邀评人默认被分享',
+  'user-login.radio.public': '公开',
+  'user-login.radio.partially-public': '部分公开',
+  'user-login.radio.private': '不公开',
+  'user-login.publicUsers.placeholder': '公开给',
+  'user-login.option.A': '同事甲',
+  'user-login.option.B': '同事乙',
+  'user-login.option.C': '同事丙',
+  'user-login.navBar.lang': '语言',
+};
diff --git a/src/pages/user/login/locales/zh-TW.ts b/src/pages/user/login/locales/zh-TW.ts
new file mode 100644
index 0000000000000000000000000000000000000000..cf0b460d2d34a578a0a294c244da0716b771c7e6
--- /dev/null
+++ b/src/pages/user/login/locales/zh-TW.ts
@@ -0,0 +1,74 @@
+export default {
+  'user-login.login.userName': '賬戶',
+  'user-login.login.password': '密碼',
+  'user-login.login.message-invalid-credentials': '賬戶或密碼錯誤（admin/ant.design）',
+  'user-login.login.message-invalid-verification-code': '驗證碼錯誤',
+  'user-login.login.tab-login-credentials': '賬戶密碼登錄',
+  'user-login.login.tab-login-mobile': '手機號登錄',
+  'user-login.login.remember-me': '自動登錄',
+  'user-login.login.forgot-password': '忘記密碼',
+  'user-login.login.sign-in-with': '其他登錄方式',
+  'user-login.login.signup': '註冊賬戶',
+  'user-login.login.login': '登錄',
+  'user-login.register.register': '註冊',
+  'user-login.register.get-verification-code': '獲取驗證碼',
+  'user-login.register.sign-in': '使用已有賬戶登錄',
+  'user-login.register-result.msg': '妳的賬戶：{email} 註冊成功',
+  'user-login.register-result.activation-email':
+    '激活郵件已發送到妳的郵箱中，郵件有效期為24小時。請及時登錄郵箱，點擊郵件中的鏈接激活帳戶。',
+  'user-login.register-result.back-home': '返回首頁',
+  'user-login.register-result.view-mailbox': '查看郵箱',
+  'user-login.email.required': '請輸入郵箱地址！',
+  'user-login.email.wrong-format': '郵箱地址格式錯誤！',
+  'user-login.userName.required': '請輸入賬戶!',
+  'user-login.password.required': '請輸入密碼！',
+  'user-login.password.twice': '兩次輸入的密碼不匹配!',
+  'user-login.strength.msg': '請至少輸入 6 個字符。請不要使用容易被猜到的密碼。',
+  'user-login.strength.strong': '強度：強',
+  'user-login.strength.medium': '強度：中',
+  'user-login.strength.short': '強度：太短',
+  'user-login.confirm-password.required': '請確認密碼！',
+  'user-login.phone-number.required': '請輸入手機號！',
+  'user-login.phone-number.wrong-format': '手機號格式錯誤！',
+  'user-login.verification-code.required': '請輸入驗證碼！',
+  'user-login.title.required': '請輸入標題',
+  'user-login.date.required': '請選擇起止日期',
+  'user-login.goal.required': '請輸入目標描述',
+  'user-login.standard.required': '請輸入衡量標淮',
+  'user-login.form.get-captcha': '獲取驗證碼',
+  'user-login.captcha.second': '秒',
+  'user-login.form.optional': '（選填）',
+  'user-login.form.submit': '提交',
+  'user-login.form.save': '保存',
+  'user-login.email.placeholder': '郵箱',
+  'user-login.password.placeholder': '至少6位密碼，區分大小寫',
+  'user-login.confirm-password.placeholder': '確認密碼',
+  'user-login.phone-number.placeholder': '手機號',
+  'user-login.verification-code.placeholder': '驗證碼',
+  'user-login.title.label': '標題',
+  'user-login.title.placeholder': '給目標起個名字',
+  'user-login.date.label': '起止日期',
+  'user-login.placeholder.start': '開始日期',
+  'user-login.placeholder.end': '結束日期',
+  'user-login.goal.label': '目標描述',
+  'user-login.goal.placeholder': '請輸入妳的階段性工作目標',
+  'user-login.standard.label': '衡量標淮',
+  'user-login.standard.placeholder': '請輸入衡量標淮',
+  'user-login.client.label': '客戶',
+  'user-login.label.tooltip': '目標的服務對象',
+  'user-login.client.placeholder': '請描述妳服務的客戶，內部客戶直接 @姓名／工號',
+  'user-login.invites.label': '邀評人',
+  'user-login.invites.placeholder': '請直接 @姓名／工號，最多可邀請 5 人',
+  'user-login.weight.label': '權重',
+  'user-login.weight.placeholder': '請輸入',
+  'user-login.public.label': '目標公開',
+  'user-login.label.help': '客戶、邀評人默認被分享',
+  'user-login.radio.public': '公開',
+  'user-login.radio.partially-public': '部分公開',
+  'user-login.radio.private': '不公開',
+  'user-login.publicUsers.placeholder': '公開給',
+  'user-login.option.A': '同事甲',
+  'user-login.option.B': '同事乙',
+  'user-login.option.C': '同事丙',
+  'user-login.navBar.lang': '語言',
+};
diff --git a/src/pages/user/login/model.ts b/src/pages/user/login/model.ts
new file mode 100644
index 0000000000000000000000000000000000000000..cbad9b8179ad10efaefbe792161cee8a30b84b46
--- /dev/null
+++ b/src/pages/user/login/model.ts
@@ -0,0 +1,82 @@
+import { AnyAction, Reducer } from 'redux';
+import { EffectsCommandMap } from 'dva';
+import { routerRedux } from 'dva/router';
+import { fakeAccountLogin, getFakeCaptcha } from './service';
+import { getPageQuery, setAuthority } from './utils/utils';
+
+export interface StateType {
+  status?: 'ok' | 'error';
+  type?: string;
+  currentAuthority?: 'user' | 'guest' | 'admin';
+}
+
+export type Effect = (
+  action: AnyAction,
+  effects: EffectsCommandMap & { select: <T>(func: (state: StateType) => T) => T },
+) => void;
+
+export interface ModelType {
+  namespace: string;
+  state: StateType;
+  effects: {
+    login: Effect;
+    getCaptcha: Effect;
+  };
+  reducers: {
+    changeLoginStatus: Reducer<StateType>;
+  };
+}
+
+const Model: ModelType = {
+  namespace: 'userLogin',
+
+  state: {
+    status: undefined,
+  },
+
+  effects: {
+    *login({ payload }, { call, put }) {
+      const response = yield call(fakeAccountLogin, payload);
+      yield put({
+        type: 'changeLoginStatus',
+        payload: response,
+      });
+      // Login successfully
+      if (response.status === 'ok') {
+        const urlParams = new URL(window.location.href);
+        const params = getPageQuery();
+        let { redirect } = params as { redirect: string };
+        if (redirect) {
+          const redirectUrlParams = new URL(redirect);
+          if (redirectUrlParams.origin === urlParams.origin) {
+            redirect = redirect.substr(urlParams.origin.length);
+            if (redirect.match(/^\/.*#/)) {
+              redirect = redirect.substr(redirect.indexOf('#') + 1);
+            }
+          } else {
+            window.location.href = redirect;
+            return;
+          }
+        }
+        yield put(routerRedux.replace(redirect || '/'));
+      }
+    },
+
+    *getCaptcha({ payload }, { call }) {
+      yield call(getFakeCaptcha, payload);
+    },
+  },
+
+  reducers: {
+    changeLoginStatus(state, { payload }) {
+      setAuthority(payload.currentAuthority);
+      return {
+        ...state,
+        status: payload.status,
+        type: payload.type,
+      };
+    },
+  },
+};
+
+export default Model;
diff --git a/src/pages/user/login/service.ts b/src/pages/user/login/service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..fa7c230a55a22de2563c5f71dfe73cb3a9d74aeb
--- /dev/null
+++ b/src/pages/user/login/service.ts
@@ -0,0 +1,13 @@
+import request from 'umi-request';
+import { FromDataType } from './index';
+
+export async function fakeAccountLogin(params: FromDataType) {
+  return request('/api/login/account', {
+    method: 'POST',
+    data: params,
+  });
+}
+
+export async function getFakeCaptcha(mobile: string) {
+  return request(`/api/login/captcha?mobile=${mobile}`);
+}
diff --git a/src/pages/user/login/style.less b/src/pages/user/login/style.less
new file mode 100644
index 0000000000000000000000000000000000000000..d9bbbf33e71c72b8f10ff30b4502cf70dad09cf2
--- /dev/null
+++ b/src/pages/user/login/style.less
@@ -0,0 +1,39 @@
+@import '~antd/es/style/themes/default.less';
+
+.main {
+  width: 368px;
+  margin: 0 auto;
+  @media screen and (max-width: @screen-sm) {
+    width: 95%;
+  }
+
+  .icon {
+    margin-left: 16px;
+    color: rgba(0, 0, 0, 0.2);
+    font-size: 24px;
+    vertical-align: middle;
+    cursor: pointer;
+    transition: color 0.3s;
+
+    &:hover {
+      color: @primary-color;
+    }
+  }
+
+  .other {
+    margin-top: 24px;
+    line-height: 22px;
+    text-align: left;
+
+    .register {
+      float: right;
+    }
+  }
+
+  :global {
+    .antd-pro-login-submit {
+      width: 100%;
+      margin-top: 24px;
+    }
+  }
+}
diff --git a/src/pages/user/login/utils/utils.ts b/src/pages/user/login/utils/utils.ts
new file mode 100644
index 0000000000000000000000000000000000000000..bca43c8c2b99385b22b8bb6f12b981e880a6a3f5
--- /dev/null
+++ b/src/pages/user/login/utils/utils.ts
@@ -0,0 +1,10 @@
+import { parse } from 'qs';
+
+export function getPageQuery() {
+  return parse(window.location.href.split('?')[1]);
+}
+
+export function setAuthority(authority: string | string[]) {
+  const proAuthority = typeof authority === 'string' ? [authority] : authority;
+  return localStorage.setItem('antd-pro-authority', JSON.stringify(proAuthority));
+}
diff --git a/src/pages/user/register-result/Result/index.less b/src/pages/user/register-result/Result/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..60fa5a05324c56e25fda971fef62f267b8c22cbb
--- /dev/null
+++ b/src/pages/user/register-result/Result/index.less
@@ -0,0 +1,58 @@
+@import '~antd/es/style/themes/default.less';
+
+.result {
+  width: 72%;
+  margin: 0 auto;
+  text-align: center;
+  @media screen and (max-width: @screen-xs) {
+    width: 100%;
+  }
+
+  .icon {
+    margin-bottom: 24px;
+    font-size: 72px;
+    line-height: 72px;
+
+    & > .success {
+      color: @success-color;
+    }
+
+    & > .error {
+      color: @error-color;
+    }
+  }
+
+  .title {
+    margin-bottom: 16px;
+    color: @heading-color;
+    font-weight: 500;
+    font-size: 24px;
+    line-height: 32px;
+  }
+
+  .description {
+    margin-bottom: 24px;
+    color: @text-color-secondary;
+    font-size: 14px;
+    line-height: 22px;
+  }
+
+  .extra {
+    padding: 24px 40px;
+    text-align: left;
+    background: @background-color-light;
+    border-radius: @border-radius-sm;
+
+    @media screen and (max-width: @screen-xs) {
+      padding: 18px 20px;
+    }
+  }
+
+  .actions {
+    margin-top: 32px;
+
+    button:not(:last-child) {
+      margin-right: 8px;
+    }
+  }
+}
diff --git a/src/pages/user/register-result/Result/index.tsx b/src/pages/user/register-result/Result/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..8c8ea1e4bc38983144625451a2508c329a0e2098
--- /dev/null
+++ b/src/pages/user/register-result/Result/index.tsx
@@ -0,0 +1,41 @@
+import { Icon } from 'antd';
+import React from 'react';
+import classNames from 'classnames';
+import styles from './index.less';
+
+export interface ResultProps {
+  actions?: React.ReactNode;
+  className?: string;
+  description?: React.ReactNode;
+  extra?: React.ReactNode;
+  style?: React.CSSProperties;
+  title?: React.ReactNode;
+  type: 'success' | 'error';
+}
+
+const Result: React.SFC<ResultProps> = ({
+  className,
+  type,
+  title,
+  description,
+  extra,
+  actions,
+  ...restProps
+}) => {
+  const iconMap = {
+    error: <Icon className={styles.error} type="close-circle" theme="filled" />,
+    success: <Icon className={styles.success} type="check-circle" theme="filled" />,
+  };
+  const clsString = classNames(styles.result, className);
+  return (
+    <div className={clsString} {...restProps}>
+      <div className={styles.icon}>{iconMap[type]}</div>
+      <div className={styles.title}>{title}</div>
+      {description && <div className={styles.description}>{description}</div>}
+      {extra && <div className={styles.extra}>{extra}</div>}
+      {actions && <div className={styles.actions}>{actions}</div>}
+    </div>
+  );
+};
+
+export default Result;
diff --git a/src/pages/user/register-result/index.tsx b/src/pages/user/register-result/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..fc0d17418c5fdf6d7de79afd75edfb2d9178b070
--- /dev/null
+++ b/src/pages/user/register-result/index.tsx
@@ -0,0 +1,43 @@
+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';
+
+const actions = (
+  <div className={styles.actions}>
+    <a href="">
+      <Button size="large" type="primary">
+        <FormattedMessage id="user-register-result.register-result.view-mailbox" />
+      </Button>
+    </a>
+    <Link to="/">
+      <Button size="large">
+        <FormattedMessage id="user-register-result.register-result.back-home" />
+      </Button>
+    </Link>
+  </div>
+);
+
+const RegisterResult: React.SFC<RouteChildrenProps> = ({ location }) => (
+  <Result
+    className={styles.registerResult}
+    type="success"
+    title={
+      <div className={styles.title}>
+        <FormattedMessage
+          id="user-register-result.register-result.msg"
+          values={{ email: location.state ? location.state.account : 'AntDesign@example.com' }}
+        />
+      </div>
+    }
+    description={formatMessage({ id: 'user-register-result.register-result.activation-email' })}
+    actions={actions}
+    style={{ marginTop: 56 }}
+  />
+);
+
+export default RegisterResult;
diff --git a/src/pages/user/register-result/locales/en-US.ts b/src/pages/user/register-result/locales/en-US.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2da822ea6fc24baebc8c0ec589d9f3316c94b8d3
--- /dev/null
+++ b/src/pages/user/register-result/locales/en-US.ts
@@ -0,0 +1,23 @@
+export default {
+  'user-register-result.login.userName': 'userName',
+  'user-register-result.login.password': 'password',
+  'user-register-result.login.message-invalid-credentials':
+    'Invalid username or password（admin/ant.design）',
+  'user-register-result.login.message-invalid-verification-code': 'Invalid verification code',
+  'user-register-result.login.tab-login-credentials': 'Credentials',
+  'user-register-result.login.tab-login-mobile': 'Mobile number',
+  'user-register-result.login.remember-me': 'Remember me',
+  'user-register-result.login.forgot-password': 'Forgot your password?',
+  'user-register-result.login.sign-in-with': 'Sign in with',
+  'user-register-result.login.signup': 'Sign up',
+  'user-register-result.login.login': 'Login',
+  'user-register-result.register.register': 'Register',
+  'user-register-result.register.get-verification-code': 'Get code',
+  'user-register-result.register.sign-in': 'Already have an account?',
+  'user-register-result.register-result.msg': 'Account：registered at {email}',
+  'user-register-result.register-result.activation-email':
+    'The activation email has been sent to your email address and is valid for 24 hours. Please log in to the email in time and click on the link in the email to activate the account.',
+  'user-register-result.register-result.back-home': 'Back to home',
+  'user-register-result.register-result.view-mailbox': 'View mailbox',
+  'user-register-result.navBar.lang': 'Languages',
+};
diff --git a/src/pages/user/register-result/locales/zh-CN.ts b/src/pages/user/register-result/locales/zh-CN.ts
new file mode 100644
index 0000000000000000000000000000000000000000..17a75e513d1d9ee5748601ff1b135c96893ee0fe
--- /dev/null
+++ b/src/pages/user/register-result/locales/zh-CN.ts
@@ -0,0 +1,22 @@
+export default {
+  'user-register-result.login.userName': '用户名',
+  'user-register-result.login.password': '密码',
+  'user-register-result.login.message-invalid-credentials': '账户或密码错误（admin/ant.design）',
+  'user-register-result.login.message-invalid-verification-code': '验证码错误',
+  'user-register-result.login.tab-login-credentials': '账户密码登录',
+  'user-register-result.login.tab-login-mobile': '手机号登录',
+  'user-register-result.login.remember-me': '自动登录',
+  'user-register-result.login.forgot-password': '忘记密码',
+  'user-register-result.login.sign-in-with': '其他登录方式',
+  'user-register-result.login.signup': '注册账户',
+  'user-register-result.login.login': '登录',
+  'user-register-result.register.register': '注册',
+  'user-register-result.register.get-verification-code': '获取验证码',
+  'user-register-result.register.sign-in': '使用已有账户登录',
+  'user-register-result.register-result.msg': '你的账户：{email} 注册成功',
+  'user-register-result.register-result.activation-email':
+    '激活邮件已发送到你的邮箱中，邮件有效期为24小时。请及时登录邮箱，点击邮件中的链接激活帐户。',
+  'user-register-result.register-result.back-home': '返回首页',
+  'user-register-result.register-result.view-mailbox': '查看邮箱',
+  'user-register-result.navBar.lang': '语言',
+};
diff --git a/src/pages/user/register-result/locales/zh-TW.ts b/src/pages/user/register-result/locales/zh-TW.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f64d1611b94cd214d5599a61a886ecd20afc4f85
--- /dev/null
+++ b/src/pages/user/register-result/locales/zh-TW.ts
@@ -0,0 +1,22 @@
+export default {
+  'user-register-result.login.userName': '賬戶',
+  'user-register-result.login.password': '密碼',
+  'user-register-result.login.message-invalid-credentials': '賬戶或密碼錯誤（admin/ant.design）',
+  'user-register-result.login.message-invalid-verification-code': '驗證碼錯誤',
+  'user-register-result.login.tab-login-credentials': '賬戶密碼登錄',
+  'user-register-result.login.tab-login-mobile': '手機號登錄',
+  'user-register-result.login.remember-me': '自動登錄',
+  'user-register-result.login.forgot-password': '忘記密碼',
+  'user-register-result.login.sign-in-with': '其他登錄方式',
+  'user-register-result.login.signup': '註冊賬戶',
+  'user-register-result.login.login': '登錄',
+  'user-register-result.register.register': '註冊',
+  'user-register-result.register.get-verification-code': '獲取驗證碼',
+  'user-register-result.register.sign-in': '使用已有賬戶登錄',
+  'user-register-result.register-result.msg': '妳的賬戶：{email} 註冊成功',
+  'user-register-result.register-result.activation-email':
+    '激活郵件已發送到妳的郵箱中，郵件有效期為24小時。請及時登錄郵箱，點擊郵件中的鏈接激活帳戶。',
+  'user-register-result.register-result.back-home': '返回首頁',
+  'user-register-result.register-result.view-mailbox': '查看郵箱',
+  'user-register-result.navBar.lang': '語言',
+};
diff --git a/src/pages/user/register-result/style.less b/src/pages/user/register-result/style.less
new file mode 100644
index 0000000000000000000000000000000000000000..a969a5eee1c69f1345c7fbc190c54cf94919e592
--- /dev/null
+++ b/src/pages/user/register-result/style.less
@@ -0,0 +1,18 @@
+.registerResult {
+  :global {
+    .anticon {
+      font-size: 64px;
+    }
+  }
+  .title {
+    margin-top: 32px;
+    font-size: 20px;
+    line-height: 28px;
+  }
+  .actions {
+    margin-top: 40px;
+    a + a {
+      margin-left: 8px;
+    }
+  }
+}
diff --git a/src/pages/user/register/_mock.ts b/src/pages/user/register/_mock.ts
new file mode 100644
index 0000000000000000000000000000000000000000..dd86f440092eb9da6a7622cff99bf51a269bec84
--- /dev/null
+++ b/src/pages/user/register/_mock.ts
@@ -0,0 +1,8 @@
+export default {
+  'POST  /api/register': (
+    req: any,
+    res: { send: (arg0: { status: string; currentAuthority: string }) => void },
+  ) => {
+    res.send({ status: 'ok', currentAuthority: 'user' });
+  },
+};
diff --git a/src/pages/user/register/index.tsx b/src/pages/user/register/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..d011ef91bcf5bdbb4d38b9d999246c6486b224c8
--- /dev/null
+++ b/src/pages/user/register/index.tsx
@@ -0,0 +1,383 @@
+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 { Dispatch } from 'redux';
+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;
+const InputGroup = Input.Group;
+
+const passwordStatusMap = {
+  ok: (
+    <div className={styles.success}>
+      <FormattedMessage id="user-register.strength.strong" />
+    </div>
+  ),
+  pass: (
+    <div className={styles.warning}>
+      <FormattedMessage id="user-register.strength.medium" />
+    </div>
+  ),
+  poor: (
+    <div className={styles.error}>
+      <FormattedMessage id="user-register.strength.short" />
+    </div>
+  ),
+};
+
+const passwordProgressMap: {
+  ok: 'success';
+  pass: 'normal';
+  poor: 'exception';
+} = {
+  ok: 'success',
+  pass: 'normal',
+  poor: 'exception',
+};
+
+interface userRegisterProps extends FormComponentProps {
+  dispatch: Dispatch<any>;
+  userRegister: StateType;
+  submitting: boolean;
+}
+interface userRegisterState {
+  count: number;
+  confirmDirty: boolean;
+  visible: boolean;
+  help: string;
+  prefix: string;
+}
+
+export interface UserRegisterParams {
+  mail: string;
+  password: string;
+  confirm: string;
+  mobile: string;
+  captcha: string;
+  prefix: string;
+}
+
+@connect(
+  ({
+    userRegister,
+    loading,
+  }: {
+    userRegister: StateType;
+    loading: {
+      effects: {
+        [key: string]: string;
+      };
+    };
+  }) => ({
+    userRegister,
+    submitting: loading.effects['userRegister/submit'],
+  }),
+)
+class Register extends Component<
+  userRegisterProps,
+  userRegisterState
+> {
+  state: userRegisterState = {
+    count: 0,
+    confirmDirty: false,
+    visible: false,
+    help: '',
+    prefix: '86',
+  };
+
+  interval: number | undefined = undefined;
+
+  componentDidUpdate() {
+    const { userRegister, form } = this.props;
+    const account = form.getFieldValue('mail');
+    if (userRegister.status === 'ok') {
+      message.success('注册成功！');
+      router.push({
+        pathname: '/user/register-result',
+        state: {
+          account,
+        },
+      });
+    }
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.interval);
+  }
+
+  onGetCaptcha = () => {
+    let count = 59;
+    this.setState({ count });
+    this.interval = window.setInterval(() => {
+      count -= 1;
+      this.setState({ count });
+      if (count === 0) {
+        clearInterval(this.interval);
+      }
+    }, 1000);
+  };
+
+  getPasswordStatus = () => {
+    const { form } = this.props;
+    const value = form.getFieldValue('password');
+    if (value && value.length > 9) {
+      return 'ok';
+    }
+    if (value && value.length > 5) {
+      return 'pass';
+    }
+    return 'poor';
+  };
+
+  handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    const { form, dispatch } = this.props;
+    form.validateFields({ force: true }, (err, values) => {
+      if (!err) {
+        const { prefix } = this.state;
+        dispatch({
+          type: 'userRegister/submit',
+          payload: {
+            ...values,
+            prefix,
+          },
+        });
+      }
+    });
+  };
+
+  checkConfirm = (rule: any, value: string, callback: (messgae?: string) => void) => {
+    const { form } = this.props;
+    if (value && value !== form.getFieldValue('password')) {
+      callback(formatMessage({ id: 'user-register.password.twice' }));
+    } else {
+      callback();
+    }
+  };
+
+  checkPassword = (rule: any, value: string, callback: (messgae?: string) => void) => {
+    const { visible, confirmDirty } = this.state;
+    if (!value) {
+      this.setState({
+        help: formatMessage({ id: 'user-register.password.required' }),
+        visible: !!value,
+      });
+      callback('error');
+    } else {
+      this.setState({
+        help: '',
+      });
+      if (!visible) {
+        this.setState({
+          visible: !!value,
+        });
+      }
+      if (value.length < 6) {
+        callback('error');
+      } else {
+        const { form } = this.props;
+        if (value && confirmDirty) {
+          form.validateFields(['confirm'], { force: true });
+        }
+        callback();
+      }
+    }
+  };
+
+  changePrefix = (value: string) => {
+    this.setState({
+      prefix: value,
+    });
+  };
+
+  renderPasswordProgress = () => {
+    const { form } = this.props;
+    const value = form.getFieldValue('password');
+    const passwordStatus = this.getPasswordStatus();
+    return value && value.length ? (
+      <div className={styles[`progress-${passwordStatus}`]}>
+        <Progress
+          status={passwordProgressMap[passwordStatus]}
+          className={styles.progress}
+          strokeWidth={6}
+          percent={value.length * 10 > 100 ? 100 : value.length * 10}
+          showInfo={false}
+        />
+      </div>
+    ) : null;
+  };
+
+  render() {
+    const { form, submitting } = this.props;
+    const { getFieldDecorator } = form;
+    const { count, prefix, help, visible } = this.state;
+    return (
+      <div className={styles.main}>
+        <h3>
+          <FormattedMessage id="user-register.register.register" />
+        </h3>
+        <Form onSubmit={this.handleSubmit}>
+          <FormItem>
+            {getFieldDecorator('mail', {
+              rules: [
+                {
+                  required: true,
+                  message: formatMessage({ id: 'user-register.email.required' }),
+                },
+                {
+                  type: 'email',
+                  message: formatMessage({ id: 'user-register.email.wrong-format' }),
+                },
+              ],
+            })(
+              <Input
+                size="large"
+                placeholder={formatMessage({ id: 'user-register.email.placeholder' })}
+              />,
+            )}
+          </FormItem>
+          <FormItem help={help}>
+            <Popover
+              getPopupContainer={node => {
+                if (node && node.parentNode) {
+                  return node.parentNode as HTMLElement;
+                }
+                return node;
+              }}
+              content={
+                <div style={{ padding: '4px 0' }}>
+                  {passwordStatusMap[this.getPasswordStatus()]}
+                  {this.renderPasswordProgress()}
+                  <div style={{ marginTop: 10 }}>
+                    <FormattedMessage id="user-register.strength.msg" />
+                  </div>
+                </div>
+              }
+              overlayStyle={{ width: 240 }}
+              placement="right"
+              visible={visible}
+            >
+              {getFieldDecorator('password', {
+                rules: [
+                  {
+                    validator: this.checkPassword,
+                  },
+                ],
+              })(
+                <Input
+                  size="large"
+                  type="password"
+                  placeholder={formatMessage({ id: 'user-register.password.placeholder' })}
+                />,
+              )}
+            </Popover>
+          </FormItem>
+          <FormItem>
+            {getFieldDecorator('confirm', {
+              rules: [
+                {
+                  required: true,
+                  message: formatMessage({ id: 'user-register.confirm-password.required' }),
+                },
+                {
+                  validator: this.checkConfirm,
+                },
+              ],
+            })(
+              <Input
+                size="large"
+                type="password"
+                placeholder={formatMessage({ id: 'user-register.confirm-password.placeholder' })}
+              />,
+            )}
+          </FormItem>
+          <FormItem>
+            <InputGroup compact>
+              <Select
+                size="large"
+                value={prefix}
+                onChange={this.changePrefix}
+                style={{ width: '20%' }}
+              >
+                <Option value="86">+86</Option>
+                <Option value="87">+87</Option>
+              </Select>
+              {getFieldDecorator('mobile', {
+                rules: [
+                  {
+                    required: true,
+                    message: formatMessage({ id: 'user-register.phone-number.required' }),
+                  },
+                  {
+                    pattern: /^\d{11}$/,
+                    message: formatMessage({ id: 'user-register.phone-number.wrong-format' }),
+                  },
+                ],
+              })(
+                <Input
+                  size="large"
+                  style={{ width: '80%' }}
+                  placeholder={formatMessage({ id: 'user-register.phone-number.placeholder' })}
+                />,
+              )}
+            </InputGroup>
+          </FormItem>
+          <FormItem>
+            <Row gutter={8}>
+              <Col span={16}>
+                {getFieldDecorator('captcha', {
+                  rules: [
+                    {
+                      required: true,
+                      message: formatMessage({ id: 'user-register.verification-code.required' }),
+                    },
+                  ],
+                })(
+                  <Input
+                    size="large"
+                    placeholder={formatMessage({ id: 'user-register.verification-code.placeholder' })}
+                  />,
+                )}
+              </Col>
+              <Col span={8}>
+                <Button
+                  size="large"
+                  disabled={!!count}
+                  className={styles.getCaptcha}
+                  onClick={this.onGetCaptcha}
+                >
+                  {count
+                    ? `${count} s`
+                    : formatMessage({ id: 'user-register.register.get-verification-code' })}
+                </Button>
+              </Col>
+            </Row>
+          </FormItem>
+          <FormItem>
+            <Button
+              size="large"
+              loading={submitting}
+              className={styles.submit}
+              type="primary"
+              htmlType="submit"
+            >
+              <FormattedMessage id="user-register.register.register" />
+            </Button>
+            <Link className={styles.login} to="/user/login">
+              <FormattedMessage id="user-register.register.sign-in" />
+            </Link>
+          </FormItem>
+        </Form>
+      </div>
+    );
+  }
+}
+
+export default Form.create<userRegisterProps>()(Register);
diff --git a/src/pages/user/register/locales/en-US.ts b/src/pages/user/register/locales/en-US.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7609fc22fc6777b80a748c879aadbb7f68900e76
--- /dev/null
+++ b/src/pages/user/register/locales/en-US.ts
@@ -0,0 +1,78 @@
+export default {
+  'user-register.login.userName': 'userName',
+  'user-register.login.password': 'password',
+  'user-register.login.message-invalid-credentials':
+    'Invalid username or password（admin/ant.design）',
+  'user-register.login.message-invalid-verification-code': 'Invalid verification code',
+  'user-register.login.tab-login-credentials': 'Credentials',
+  'user-register.login.tab-login-mobile': 'Mobile number',
+  'user-register.login.remember-me': 'Remember me',
+  'user-register.login.forgot-password': 'Forgot your password?',
+  'user-register.login.sign-in-with': 'Sign in with',
+  'user-register.login.signup': 'Sign up',
+  'user-register.login.login': 'Login',
+  'user-register.register.register': 'Register',
+  'user-register.register.get-verification-code': 'Get code',
+  'user-register.register.sign-in': 'Already have an account?',
+  'user-register.register-result.msg': 'Account：registered at {email}',
+  'user-register.register-result.activation-email':
+    'The activation email has been sent to your email address and is valid for 24 hours. Please log in to the email in time and click on the link in the email to activate the account.',
+  'user-register.register-result.back-home': 'Back to home',
+  'user-register.register-result.view-mailbox': 'View mailbox',
+  'user-register.email.required': 'Please enter your email!',
+  'user-register.email.wrong-format': 'The email address is in the wrong format!',
+  'user-register.userName.required': 'Please enter your userName!',
+  'user-register.password.required': 'Please enter your password!',
+  'user-register.password.twice': 'The passwords entered twice do not match!',
+  'user-register.strength.msg':
+    "Please enter at least 6 characters and don't use passwords that are easy to guess.",
+  'user-register.strength.strong': 'Strength: strong',
+  'user-register.strength.medium': 'Strength: medium',
+  'user-register.strength.short': 'Strength: too short',
+  'user-register.confirm-password.required': 'Please confirm your password!',
+  'user-register.phone-number.required': 'Please enter your phone number!',
+  'user-register.phone-number.wrong-format': 'Malformed phone number!',
+  'user-register.verification-code.required': 'Please enter the verification code!',
+  'user-register.title.required': 'Please enter a title',
+  'user-register.date.required': 'Please select the start and end date',
+  'user-register.goal.required': 'Please enter a description of the goal',
+  'user-register.standard.required': 'Please enter a metric',
+  'user-register.form.get-captcha': 'Get Captcha',
+  'user-register.captcha.second': 'sec',
+  'user-register.form.optional': ' (optional) ',
+  'user-register.form.submit': 'Submit',
+  'user-register.form.save': 'Save',
+  'user-register.email.placeholder': 'Email',
+  'user-register.password.placeholder': 'Password',
+  'user-register.confirm-password.placeholder': 'Confirm password',
+  'user-register.phone-number.placeholder': 'Phone number',
+  'user-register.verification-code.placeholder': 'Verification code',
+  'user-register.title.label': 'Title',
+  'user-register.title.placeholder': 'Give the target a name',
+  'user-register.date.label': 'Start and end date',
+  'user-register.placeholder.start': 'Start date',
+  'user-register.placeholder.end': 'End date',
+  'user-register.goal.label': 'Goal description',
+  'user-register.goal.placeholder': 'Please enter your work goals',
+  'user-register.standard.label': 'Metrics',
+  'user-register.standard.placeholder': 'Please enter a metric',
+  'user-register.client.label': 'Client',
+  'user-register.label.tooltip': 'Target service object',
+  'user-register.client.placeholder':
+    'Please describe your customer service, internal customers directly @ Name / job number',
+  'user-register.invites.label': 'Inviting critics',
+  'user-register.invites.placeholder':
+    'Please direct @ Name / job number, you can invite up to 5 people',
+  'user-register.weight.label': 'Weight',
+  'user-register.weight.placeholder': 'Please enter weight',
+  'user-register.public.label': 'Target disclosure',
+  'user-register.label.help': 'Customers and invitees are shared by default',
+  'user-register.radio.public': 'Public',
+  'user-register.radio.partially-public': 'Partially public',
+  'user-register.radio.private': 'Private',
+  'user-register.publicUsers.placeholder': 'Open to',
+  'user-register.option.A': 'Colleague A',
+  'user-register.option.B': 'Colleague B',
+  'user-register.option.C': 'Colleague C',
+  'user-register.navBar.lang': 'Languages',
+};
diff --git a/src/pages/user/register/locales/zh-CN.ts b/src/pages/user/register/locales/zh-CN.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4ca4078ea3521c3b5f3a860732f29c6bf0bfc2cc
--- /dev/null
+++ b/src/pages/user/register/locales/zh-CN.ts
@@ -0,0 +1,74 @@
+export default {
+  'user-register.login.userName': '用户名',
+  'user-register.login.password': '密码',
+  'user-register.login.message-invalid-credentials': '账户或密码错误（admin/ant.design）',
+  'user-register.login.message-invalid-verification-code': '验证码错误',
+  'user-register.login.tab-login-credentials': '账户密码登录',
+  'user-register.login.tab-login-mobile': '手机号登录',
+  'user-register.login.remember-me': '自动登录',
+  'user-register.login.forgot-password': '忘记密码',
+  'user-register.login.sign-in-with': '其他登录方式',
+  'user-register.login.signup': '注册账户',
+  'user-register.login.login': '登录',
+  'user-register.register.register': '注册',
+  'user-register.register.get-verification-code': '获取验证码',
+  'user-register.register.sign-in': '使用已有账户登录',
+  'user-register.register-result.msg': '你的账户：{email} 注册成功',
+  'user-register.register-result.activation-email':
+    '激活邮件已发送到你的邮箱中，邮件有效期为24小时。请及时登录邮箱，点击邮件中的链接激活帐户。',
+  'user-register.register-result.back-home': '返回首页',
+  'user-register.register-result.view-mailbox': '查看邮箱',
+  'user-register.email.required': '请输入邮箱地址！',
+  'user-register.email.wrong-format': '邮箱地址格式错误！',
+  'user-register.userName.required': '请输入用户名!',
+  'user-register.password.required': '请输入密码！',
+  'user-register.password.twice': '两次输入的密码不匹配!',
+  'user-register.strength.msg': '请至少输入 6 个字符。请不要使用容易被猜到的密码。',
+  'user-register.strength.strong': '强度：强',
+  'user-register.strength.medium': '强度：中',
+  'user-register.strength.short': '强度：太短',
+  'user-register.confirm-password.required': '请确认密码！',
+  'user-register.phone-number.required': '请输入手机号！',
+  'user-register.phone-number.wrong-format': '手机号格式错误！',
+  'user-register.verification-code.required': '请输入验证码！',
+  'user-register.title.required': '请输入标题',
+  'user-register.date.required': '请选择起止日期',
+  'user-register.goal.required': '请输入目标描述',
+  'user-register.standard.required': '请输入衡量标准',
+  'user-register.form.get-captcha': '获取验证码',
+  'user-register.captcha.second': '秒',
+  'user-register.form.optional': '（选填）',
+  'user-register.form.submit': '提交',
+  'user-register.form.save': '保存',
+  'user-register.email.placeholder': '邮箱',
+  'user-register.password.placeholder': '至少6位密码，区分大小写',
+  'user-register.confirm-password.placeholder': '确认密码',
+  'user-register.phone-number.placeholder': '手机号',
+  'user-register.verification-code.placeholder': '验证码',
+  'user-register.title.label': '标题',
+  'user-register.title.placeholder': '给目标起个名字',
+  'user-register.date.label': '起止日期',
+  'user-register.placeholder.start': '开始日期',
+  'user-register.placeholder.end': '结束日期',
+  'user-register.goal.label': '目标描述',
+  'user-register.goal.placeholder': '请输入你的阶段性工作目标',
+  'user-register.standard.label': '衡量标准',
+  'user-register.standard.placeholder': '请输入衡量标准',
+  'user-register.client.label': '客户',
+  'user-register.label.tooltip': '目标的服务对象',
+  'user-register.client.placeholder': '请描述你服务的客户，内部客户直接 @姓名／工号',
+  'user-register.invites.label': '邀评人',
+  'user-register.invites.placeholder': '请直接 @姓名／工号，最多可邀请 5 人',
+  'user-register.weight.label': '权重',
+  'user-register.weight.placeholder': '请输入',
+  'user-register.public.label': '目标公开',
+  'user-register.label.help': '客户、邀评人默认被分享',
+  'user-register.radio.public': '公开',
+  'user-register.radio.partially-public': '部分公开',
+  'user-register.radio.private': '不公开',
+  'user-register.publicUsers.placeholder': '公开给',
+  'user-register.option.A': '同事甲',
+  'user-register.option.B': '同事乙',
+  'user-register.option.C': '同事丙',
+  'user-register.navBar.lang': '语言',
+};
diff --git a/src/pages/user/register/locales/zh-TW.ts b/src/pages/user/register/locales/zh-TW.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6c17f83b2fa319f1bab5f8b9e5415c5c71df4d9d
--- /dev/null
+++ b/src/pages/user/register/locales/zh-TW.ts
@@ -0,0 +1,74 @@
+export default {
+  'user-register.login.userName': '賬戶',
+  'user-register.login.password': '密碼',
+  'user-register.login.message-invalid-credentials': '賬戶或密碼錯誤（admin/ant.design）',
+  'user-register.login.message-invalid-verification-code': '驗證碼錯誤',
+  'user-register.login.tab-login-credentials': '賬戶密碼登錄',
+  'user-register.login.tab-login-mobile': '手機號登錄',
+  'user-register.login.remember-me': '自動登錄',
+  'user-register.login.forgot-password': '忘記密碼',
+  'user-register.login.sign-in-with': '其他登錄方式',
+  'user-register.login.signup': '註冊賬戶',
+  'user-register.login.login': '登錄',
+  'user-register.register.register': '註冊',
+  'user-register.register.get-verification-code': '獲取驗證碼',
+  'user-register.register.sign-in': '使用已有賬戶登錄',
+  'user-register.register-result.msg': '妳的賬戶：{email} 註冊成功',
+  'user-register.register-result.activation-email':
+    '激活郵件已發送到妳的郵箱中，郵件有效期為24小時。請及時登錄郵箱，點擊郵件中的鏈接激活帳戶。',
+  'user-register.register-result.back-home': '返回首頁',
+  'user-register.register-result.view-mailbox': '查看郵箱',
+  'user-register.email.required': '請輸入郵箱地址！',
+  'user-register.email.wrong-format': '郵箱地址格式錯誤！',
+  'user-register.userName.required': '請輸入賬戶!',
+  'user-register.password.required': '請輸入密碼！',
+  'user-register.password.twice': '兩次輸入的密碼不匹配!',
+  'user-register.strength.msg': '請至少輸入 6 個字符。請不要使用容易被猜到的密碼。',
+  'user-register.strength.strong': '強度：強',
+  'user-register.strength.medium': '強度：中',
+  'user-register.strength.short': '強度：太短',
+  'user-register.confirm-password.required': '請確認密碼！',
+  'user-register.phone-number.required': '請輸入手機號！',
+  'user-register.phone-number.wrong-format': '手機號格式錯誤！',
+  'user-register.verification-code.required': '請輸入驗證碼！',
+  'user-register.title.required': '請輸入標題',
+  'user-register.date.required': '請選擇起止日期',
+  'user-register.goal.required': '請輸入目標描述',
+  'user-register.standard.required': '請輸入衡量標淮',
+  'user-register.form.get-captcha': '獲取驗證碼',
+  'user-register.captcha.second': '秒',
+  'user-register.form.optional': '（選填）',
+  'user-register.form.submit': '提交',
+  'user-register.form.save': '保存',
+  'user-register.email.placeholder': '郵箱',
+  'user-register.password.placeholder': '至少6位密碼，區分大小寫',
+  'user-register.confirm-password.placeholder': '確認密碼',
+  'user-register.phone-number.placeholder': '手機號',
+  'user-register.verification-code.placeholder': '驗證碼',
+  'user-register.title.label': '標題',
+  'user-register.title.placeholder': '給目標起個名字',
+  'user-register.date.label': '起止日期',
+  'user-register.placeholder.start': '開始日期',
+  'user-register.placeholder.end': '結束日期',
+  'user-register.goal.label': '目標描述',
+  'user-register.goal.placeholder': '請輸入妳的階段性工作目標',
+  'user-register.standard.label': '衡量標淮',
+  'user-register.standard.placeholder': '請輸入衡量標淮',
+  'user-register.client.label': '客戶',
+  'user-register.label.tooltip': '目標的服務對象',
+  'user-register.client.placeholder': '請描述妳服務的客戶，內部客戶直接 @姓名／工號',
+  'user-register.invites.label': '邀評人',
+  'user-register.invites.placeholder': '請直接 @姓名／工號，最多可邀請 5 人',
+  'user-register.weight.label': '權重',
+  'user-register.weight.placeholder': '請輸入',
+  'user-register.public.label': '目標公開',
+  'user-register.label.help': '客戶、邀評人默認被分享',
+  'user-register.radio.public': '公開',
+  'user-register.radio.partially-public': '部分公開',
+  'user-register.radio.private': '不公開',
+  'user-register.publicUsers.placeholder': '公開給',
+  'user-register.option.A': '同事甲',
+  'user-register.option.B': '同事乙',
+  'user-register.option.C': '同事丙',
+  'user-register.navBar.lang': '語言',
+};
diff --git a/src/pages/user/register/model.ts b/src/pages/user/register/model.ts
new file mode 100644
index 0000000000000000000000000000000000000000..bedce185b28eaf6a623fbb7356b99a8ad90793ff
--- /dev/null
+++ b/src/pages/user/register/model.ts
@@ -0,0 +1,54 @@
+import { AnyAction, Reducer } from 'redux';
+
+import { EffectsCommandMap } from 'dva';
+import { fakeRegister } from './service';
+
+export interface StateType {
+  status?: 'ok' | 'error';
+  currentAuthority?: 'user' | 'guest' | 'admin';
+}
+
+export type Effect = (
+  action: AnyAction,
+  effects: EffectsCommandMap & { select: <T>(func: (state: StateType) => T) => T },
+) => void;
+
+export interface ModelType {
+  namespace: string;
+  state: StateType;
+  effects: {
+    submit: Effect;
+  };
+  reducers: {
+    registerHandle: Reducer<StateType>;
+  };
+}
+
+const Model: ModelType = {
+  namespace: 'userRegister',
+
+  state: {
+    status: undefined,
+  },
+
+  effects: {
+    *submit({ payload }, { call, put }) {
+      const response = yield call(fakeRegister, payload);
+      yield put({
+        type: 'registerHandle',
+        payload: response,
+      });
+    },
+  },
+
+  reducers: {
+    registerHandle(state, { payload }) {
+      return {
+        ...state,
+        status: payload.status,
+      };
+    },
+  },
+};
+
+export default Model;
diff --git a/src/pages/user/register/service.ts b/src/pages/user/register/service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2f8d0117dfc394d0e5d4da9beaf920c5fe1d6a0e
--- /dev/null
+++ b/src/pages/user/register/service.ts
@@ -0,0 +1,9 @@
+import request from 'umi-request';
+import { UserRegisterParams } from './index';
+
+export async function fakeRegister(params: UserRegisterParams) {
+  return request('/api/register', {
+    method: 'POST',
+    data: params,
+  });
+}
diff --git a/src/pages/user/register/style.less b/src/pages/user/register/style.less
new file mode 100644
index 0000000000000000000000000000000000000000..e3ee3b445d5cd666c8bbe032f95a235a99678790
--- /dev/null
+++ b/src/pages/user/register/style.less
@@ -0,0 +1,57 @@
+@import '~antd/es/style/themes/default.less';
+
+.main {
+  width: 368px;
+  margin: 0 auto;
+
+  :global {
+    .ant-form-item {
+      margin-bottom: 24px;
+    }
+  }
+
+  h3 {
+    margin-bottom: 20px;
+    font-size: 16px;
+  }
+
+  .getCaptcha {
+    display: block;
+    width: 100%;
+  }
+
+  .submit {
+    width: 50%;
+  }
+
+  .login {
+    float: right;
+    line-height: @btn-height-lg;
+  }
+}
+
+.success,
+.warning,
+.error {
+  transition: color 0.3s;
+}
+
+.success {
+  color: @success-color;
+}
+
+.warning {
+  color: @warning-color;
+}
+
+.error {
+  color: @error-color;
+}
+
+.progress-pass > .progress {
+  :global {
+    .ant-progress-bg {
+      background-color: @warning-color;
+    }
+  }
+}