From 5ba91f2019048751dd0cfda76e4353a761367b36 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Fri, 2 Feb 2018 17:41:41 +0800
Subject: [PATCH 01/25] move pro doc link to header

---
 src/common/menu.js                     |  5 -----
 src/components/GlobalHeader/index.js   | 11 ++++++++++-
 src/components/GlobalHeader/index.less |  1 +
 3 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/common/menu.js b/src/common/menu.js
index 75f47dcf..21b58d7a 100644
--- a/src/common/menu.js
+++ b/src/common/menu.js
@@ -113,11 +113,6 @@ const menuData = [{
     name: '注册结果',
     path: 'register-result',
   }],
-}, {
-  name: '使用文档',
-  icon: 'book',
-  path: 'http://pro.ant.design/docs/getting-started',
-  target: '_blank',
 }];
 
 function formatter(data, parentPath = '', parentAuthority) {
diff --git a/src/components/GlobalHeader/index.js b/src/components/GlobalHeader/index.js
index f43be9d2..608e4223 100644
--- a/src/components/GlobalHeader/index.js
+++ b/src/components/GlobalHeader/index.js
@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import { Menu, Icon, Spin, Tag, Dropdown, Avatar, Divider } from 'antd';
+import { Menu, Icon, Spin, Tag, Dropdown, Avatar, Divider, Tooltip } from 'antd';
 import moment from 'moment';
 import groupBy from 'lodash/groupBy';
 import Debounce from 'lodash-decorators/debounce';
@@ -94,6 +94,15 @@ export default class GlobalHeader extends PureComponent {
               console.log('enter', value); // eslint-disable-line
             }}
           />
+          <Tooltip title="使用文档">
+            <Link
+              target="_blank"
+              to="http://pro.ant.design/docs/getting-started"
+              className={styles.action}
+            >
+              <Icon type="question-circle-o" />
+            </Link>
+          </Tooltip>
           <NoticeIcon
             className={styles.action}
             count={currentUser.notifyCount}
diff --git a/src/components/GlobalHeader/index.less b/src/components/GlobalHeader/index.less
index 6f885152..a9e9d92f 100644
--- a/src/components/GlobalHeader/index.less
+++ b/src/components/GlobalHeader/index.less
@@ -61,6 +61,7 @@ i.trigger {
     > i {
       font-size: 16px;
       vertical-align: middle;
+      color: @text-color;
     }
     &:hover,
     &:global(.ant-popover-open) {

From 9c4e9c1b39ceacd9e0efdb666d4b6d1663b0daf6 Mon Sep 17 00:00:00 2001
From: Reed Sun <superreedsun@gmail.com>
Date: Fri, 2 Feb 2018 06:50:08 -0600
Subject: [PATCH 02/25] Add period in the end for the tip which don't has
 period before. (#877)

* remove comma

* add period in the end for the tip which don't has before
---
 src/utils/request.js | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/utils/request.js b/src/utils/request.js
index ccabf192..4113cc21 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -4,21 +4,21 @@ import { routerRedux } from 'dva/router';
 import store from '../index';
 
 const codeMessage = {
-  200: '服务器成功返回请求的数据',
+  200: '服务器成功返回请求的数据。',
   201: '新建或修改数据成功。',
-  202: '一个请求已经进入后台排队（异步任务）',
+  202: '一个请求已经进入后台排队（异步任务）。',
   204: '删除数据成功。',
-  400: '发出的请求有错误，服务器没有进行新建或修改数据,的操作。',
+  400: '发出的请求有错误，服务器没有进行新建或修改数据的操作。',
   401: '用户没有权限（令牌、用户名、密码错误）。',
   403: '用户得到授权，但是访问是被禁止的。',
-  404: '发出的请求针对的是不存在的记录，服务器没有进行操作',
+  404: '发出的请求针对的是不存在的记录，服务器没有进行操作。',
   406: '请求的格式不可得。',
   410: '请求的资源被永久删除，且不会再得到的。',
   422: '当创建一个对象时，发生一个验证错误。',
-  500: '服务器发生错误，请检查服务器',
-  502: '网关错误',
-  503: '服务不可用，服务器暂时过载或维护',
-  504: '网关超时',
+  500: '服务器发生错误，请检查服务器。',
+  502: '网关错误。',
+  503: '服务不可用，服务器暂时过载或维护。',
+  504: '网关超时。',
 };
 function checkStatus(response) {
   if (response.status >= 200 && response.status < 300) {

From 999436853318ec43471d5edda3f24fce760d330c Mon Sep 17 00:00:00 2001
From: Guangshuo Chen <chengs@users.noreply.github.com>
Date: Mon, 5 Feb 2018 07:52:50 +0100
Subject: [PATCH 03/25] let request.js be able to deal with FormData (#884)

* let request.js be able to deal with FormData

* Update request.js

* Update request.js

* Update request.js

* Update request.js
---
 src/utils/request.js | 21 +++++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/utils/request.js b/src/utils/request.js
index 4113cc21..9b58189a 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -48,12 +48,21 @@ export default function request(url, options) {
   };
   const newOptions = { ...defaultOptions, ...options };
   if (newOptions.method === 'POST' || newOptions.method === 'PUT') {
-    newOptions.headers = {
-      Accept: 'application/json',
-      'Content-Type': 'application/json; charset=utf-8',
-      ...newOptions.headers,
-    };
-    newOptions.body = JSON.stringify(newOptions.body);
+    if (!(newOptions.body instanceof FormData)) {
+      newOptions.headers = {
+        Accept: 'application/json',
+        'Content-Type': 'application/json; charset=utf-8',
+        ...newOptions.headers,
+      };
+      newOptions.body = JSON.stringify(newOptions.body);
+    } else {
+      // newOptions.body is FormData
+      newOptions.headers = {
+        Accept: 'application/json',
+        'Content-Type': 'multipart/form-data',
+        ...newOptions.headers,
+      };
+    }
   }
 
   return fetch(url, newOptions)

From f388d9254002a09c6d656e31314d9419431ae813 Mon Sep 17 00:00:00 2001
From: PKAQ <pkaq@msn.com>
Date: Tue, 6 Feb 2018 10:01:24 +0800
Subject: [PATCH 04/25] =?UTF-8?q?=E4=BF=AE=E5=BE=A9=E7=82=B9=E4=BD=BF?=
 =?UTF-8?q?=E7=94=A8=E6=96=87=E6=A1=A3=E6=B2=A1=E6=9C=89=E8=BF=9B=E8=A1=8C?=
 =?UTF-8?q?=E6=AD=A3=E7=A1=AE=E7=9A=84=E8=B7=B3=E8=BD=AC=20(#893)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/GlobalHeader/index.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/GlobalHeader/index.js b/src/components/GlobalHeader/index.js
index 608e4223..61871a7d 100644
--- a/src/components/GlobalHeader/index.js
+++ b/src/components/GlobalHeader/index.js
@@ -95,13 +95,14 @@ export default class GlobalHeader extends PureComponent {
             }}
           />
           <Tooltip title="使用文档">
-            <Link
+            <a
               target="_blank"
-              to="http://pro.ant.design/docs/getting-started"
+              href="http://pro.ant.design/docs/getting-started"
+              rel="noopener noreferrer"
               className={styles.action}
             >
               <Icon type="question-circle-o" />
-            </Link>
+            </a >
           </Tooltip>
           <NoticeIcon
             className={styles.action}

From 5c21b99091a9b572b0c1e0a28b699f64ccf0fa1c Mon Sep 17 00:00:00 2001
From: jim <wasd2144@hotmail.com>
Date: Wed, 7 Feb 2018 11:32:44 +0800
Subject: [PATCH 05/25] Unit testing to increase breadcrumbs

---
 src/components/PageHeader/index.js      | 18 ++++---
 src/components/PageHeader/index.test.js | 71 +++++++++++++++++++++++++
 2 files changed, 83 insertions(+), 6 deletions(-)
 create mode 100644 src/components/PageHeader/index.test.js

diff --git a/src/components/PageHeader/index.js b/src/components/PageHeader/index.js
index 7eb6de18..df514874 100644
--- a/src/components/PageHeader/index.js
+++ b/src/components/PageHeader/index.js
@@ -7,8 +7,7 @@ import styles from './index.less';
 
 
 const { TabPane } = Tabs;
-
-function getBreadcrumb(breadcrumbNameMap, url) {
+export function getBreadcrumb(breadcrumbNameMap, url) {
   let breadcrumb = breadcrumbNameMap[url];
   if (!breadcrumb) {
     Object.keys(breadcrumbNameMap).forEach((item) => {
@@ -20,6 +19,14 @@ function getBreadcrumb(breadcrumbNameMap, url) {
   return breadcrumb || {};
 }
 
+// /userinfo/2144/id => ['/userinfo','/useinfo/2144,'/userindo/2144/id']
+export function urlToList(url) {
+  const urllist = url.split('/').filter(i => i);
+  return urllist.map((urlItem, index) => {
+    return `/${urllist.slice(0, index + 1).join('/')}`;
+  });
+}
+
 export default class PageHeader extends PureComponent {
   static contextTypes = {
     routes: PropTypes.array,
@@ -62,11 +69,10 @@ export default class PageHeader extends PureComponent {
   }
   conversionFromLocation = (routerLocation, breadcrumbNameMap) => {
     const { breadcrumbSeparator, linkElement = 'a' } = this.props;
-    // Convert the path to an array
-    const pathSnippets = routerLocation.pathname.split('/').filter(i => i);
+    // Convert the url to an array
+    const pathSnippets = urlToList(routerLocation.pathname);
     // Loop data mosaic routing
-    const extraBreadcrumbItems = pathSnippets.map((_, index) => {
-      const url = `/${pathSnippets.slice(0, index + 1).join('/')}`;
+    const extraBreadcrumbItems = pathSnippets.map((url, index) => {
       const currentBreadcrumb = getBreadcrumb(breadcrumbNameMap, url);
       const isLinkable = (index !== pathSnippets.length - 1) && currentBreadcrumb.component;
       return currentBreadcrumb.name && !currentBreadcrumb.hideInBreadcrumb ? (
diff --git a/src/components/PageHeader/index.test.js b/src/components/PageHeader/index.test.js
new file mode 100644
index 00000000..385a3d31
--- /dev/null
+++ b/src/components/PageHeader/index.test.js
@@ -0,0 +1,71 @@
+import { getBreadcrumb, urlToList } from './index';
+
+describe('test urlToList', () => {
+  it('A path', () => {
+    expect(urlToList('/userinfo')).toEqual(['/userinfo']);
+  });
+  it('Secondary path', () => {
+    expect(urlToList('/userinfo/2144')).toEqual([
+      '/userinfo',
+      '/userinfo/2144',
+    ]);
+  });
+  it('Three paths', () => {
+    expect(urlToList('/userinfo/2144/addr')).toEqual([
+      '/userinfo',
+      '/userinfo/2144',
+      '/userinfo/2144/addr',
+    ]);
+  });
+});
+
+const routerData = {
+  '/dashboard/analysis': {
+    name: '分析页',
+  },
+  '/userinfo': {
+    name: '用户列表',
+  },
+  '/userinfo/:id': {
+    name: '用户信息',
+  },
+  '/userinfo/:id/addr': {
+    name: '收货订单',
+  },
+};
+describe('test getBreadcrumb', () => {
+  it('Simple url', () => {
+    expect(getBreadcrumb(routerData, '/dashboard/analysis').name).toEqual(
+      '分析页'
+    );
+  });
+  it('Parameters url', () => {
+    expect(getBreadcrumb(routerData, '/userinfo/2144').name).toEqual(
+      '用户信息'
+    );
+  });
+  it('The middle parameter url', () => {
+    expect(getBreadcrumb(routerData, '/userinfo/2144/addr').name).toEqual(
+      '收货订单'
+    );
+  });
+  it('Loop through the parameters', () => {
+    const urlNameList = urlToList('/userinfo/2144/addr').map((url) => {
+      return getBreadcrumb(routerData, url).name;
+    });
+    expect(urlNameList).toEqual(['用户列表', '用户信息', '收货订单']);
+  });
+
+  it('a path', () => {
+    const urlNameList = urlToList('/userinfo').map((url) => {
+      return getBreadcrumb(routerData, url).name;
+    });
+    expect(urlNameList).toEqual(['用户列表']);
+  });
+  it('Secondary path', () => {
+    const urlNameList = urlToList('/userinfo/2144').map((url) => {
+      return getBreadcrumb(routerData, url).name;
+    });
+    expect(urlNameList).toEqual(['用户列表', '用户信息']);
+  });
+});

From b3af8f8570b4aaaa55c93c9023b356a81f4d45c5 Mon Sep 17 00:00:00 2001
From: jim <wasd2144@hotmail.com>
Date: Wed, 7 Feb 2018 14:45:05 +0800
Subject: [PATCH 06/25] fix #821  Menu selection problem

---
 .gitignore                            | 1 +
 src/components/SiderMenu/SiderMenu.js | 4 ++--
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/.gitignore b/.gitignore
index aa3fce58..409be881 100755
--- a/.gitignore
+++ b/.gitignore
@@ -20,3 +20,4 @@ yarn.lock
 package-lock.json
 *bak
 jsconfig.json
+.prettierrc
diff --git a/src/components/SiderMenu/SiderMenu.js b/src/components/SiderMenu/SiderMenu.js
index 5ddf6ed9..4811894d 100644
--- a/src/components/SiderMenu/SiderMenu.js
+++ b/src/components/SiderMenu/SiderMenu.js
@@ -87,12 +87,12 @@ export default class SiderMenu extends PureComponent {
   }
   /**
    * Get selected child nodes
-   * /user/chen => /user/:id
+   * /user/chen => ['user','/user/:id']
    */
   getSelectedMenuKeys = (path) => {
     const flatMenuKeys = this.getFlatMenuKeys(this.menus);
     return flatMenuKeys.filter((item) => {
-      return pathToRegexp(`/${item}`).test(path);
+      return pathToRegexp(`/${item}(.*)`).test(path);
     });
   }
   /**

From 6db2e48464d8f8edb06b8319422f7fb39da97d56 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=AF=B8=E5=B2=B3?= <dengfuping_develop@163.com>
Date: Wed, 7 Feb 2018 15:15:33 +0800
Subject: [PATCH 07/25] Translate FooterToolbar (#903)

* translate FooterToolbar

* remove the unnessary demo code
---
 src/components/FooterToolbar/demo/basic.md    | 48 +++++++++++--------
 src/components/FooterToolbar/index.en-US.md   | 18 +++++++
 .../{index.md => index.zh-CN.md}              |  4 +-
 3 files changed, 47 insertions(+), 23 deletions(-)
 create mode 100644 src/components/FooterToolbar/index.en-US.md
 rename src/components/FooterToolbar/{index.md => index.zh-CN.md} (88%)

diff --git a/src/components/FooterToolbar/demo/basic.md b/src/components/FooterToolbar/demo/basic.md
index 6ce15e7c..1f678634 100644
--- a/src/components/FooterToolbar/demo/basic.md
+++ b/src/components/FooterToolbar/demo/basic.md
@@ -1,36 +1,44 @@
 ---
 order: 0
-title: 演示
+title:
+  - zh-CN: 演示
+  - en-US: demo
 iframe: 400
 ---
 
+## zh-CN
+
 浮动固定页脚。
 
+## en-US
+
+Fixed to the footer.
+
 ````jsx
 import FooterToolbar from 'ant-design-pro/lib/FooterToolbar';
 import { Button } from 'antd';
 
 ReactDOM.render(
   <div style={{ background: '#f7f7f7', padding: 24 }}>
-    <p>页面内容 页面内容 页面内容 页面内容</p>
-    <p>页面内容 页面内容 页面内容 页面内容</p>
-    <p>页面内容 页面内容 页面内容 页面内容</p>
-    <p>页面内容 页面内容 页面内容 页面内容</p>
-    <p>页面内容 页面内容 页面内容 页面内容</p>
-    <p>页面内容 页面内容 页面内容 页面内容</p>
-    <p>页面内容 页面内容 页面内容 页面内容</p>
-    <p>页面内容 页面内容 页面内容 页面内容</p>
-    <p>页面内容 页面内容 页面内容 页面内容</p>
-    <p>页面内容 页面内容 页面内容 页面内容</p>
-    <p>页面内容 页面内容 页面内容 页面内容</p>
-    <p>页面内容 页面内容 页面内容 页面内容</p>
-    <p>页面内容 页面内容 页面内容 页面内容</p>
-    <p>页面内容 页面内容 页面内容 页面内容</p>
-    <p>页面内容 页面内容 页面内容 页面内容</p>
-    <FooterToolbar extra="提示信息">
-      <Button>取消</Button>
-      <Button type="primary">提交</Button>
+    <p>Content Content Content Content</p>
+    <p>Content Content Content Content</p>
+    <p>Content Content Content Content</p>
+    <p>Content Content Content Content</p>
+    <p>Content Content Content Content</p>
+    <p>Content Content Content Content</p>
+    <p>Content Content Content Content</p>
+    <p>Content Content Content Content</p>
+    <p>Content Content Content Content</p>
+    <p>Content Content Content Content</p>
+    <p>Content Content Content Content</p>
+    <p>Content Content Content Content</p>
+    <p>Content Content Content Content</p>
+    <p>Content Content Content Content</p>
+    <p>Content Content Content Content</p>
+    <FooterToolbar extra="extra information">
+      <Button>Cancel</Button>
+      <Button type="primary">Submit</Button>
     </FooterToolbar>
   </div>
 , mountNode);
-````
+````
\ No newline at end of file
diff --git a/src/components/FooterToolbar/index.en-US.md b/src/components/FooterToolbar/index.en-US.md
new file mode 100644
index 00000000..69fd80bd
--- /dev/null
+++ b/src/components/FooterToolbar/index.en-US.md
@@ -0,0 +1,18 @@
+---
+title: FooterToolbar
+cols: 1
+order: 6
+---
+
+A toolbar fixed at the bottom.
+
+## Usage
+
+It is fixed at the bottom of the content area and does not move along with the scroll bar, which is usually used for data collection and submission for long pages.
+
+## API
+
+Property | Description | Type | Default
+---------|-------------|------|--------
+children | toolbar content, align to the right | ReactNode | -
+extra | extra information, align to the left | ReactNode | -
\ No newline at end of file
diff --git a/src/components/FooterToolbar/index.md b/src/components/FooterToolbar/index.zh-CN.md
similarity index 88%
rename from src/components/FooterToolbar/index.md
rename to src/components/FooterToolbar/index.zh-CN.md
index b0bea3d9..421ac08e 100644
--- a/src/components/FooterToolbar/index.md
+++ b/src/components/FooterToolbar/index.zh-CN.md
@@ -1,7 +1,5 @@
 ---
-title:
-  en-US: FooterToolbar
-  zh-CN: FooterToolbar
+title: FooterToolbar
 subtitle: 底部工具栏
 cols: 1
 order: 6

From 3c18317cdecb91462a406d7e73a72649e4cde84c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=B8=85?= <wasd2144@hotmail.com>
Date: Wed, 7 Feb 2018 15:16:09 +0800
Subject: [PATCH 08/25] div to fragment (#883)

* div to fragment

* Remove extra divs

* fix indent
---
 src/components/Charts/Radar/index.js  | 139 ++++++++++++++------------
 src/components/StandardTable/index.js |   6 +-
 src/layouts/BasicLayout.js            |   6 +-
 src/layouts/UserLayout.js             |   4 +-
 src/routes/Dashboard/Analysis.js      |   6 +-
 src/routes/Dashboard/Monitor.js       |   6 +-
 src/routes/Forms/StepForm/Step1.js    |   6 +-
 src/routes/Forms/StepForm/Step3.js    |   6 +-
 src/routes/Forms/StepForm/index.js    |   6 +-
 src/routes/Forms/TableForm.js         |   6 +-
 src/routes/List/Articles.js           |   6 +-
 src/routes/Profile/AdvancedProfile.js |  14 +--
 src/routes/Result/Error.js            |   6 +-
 src/routes/Result/Success.js          |  10 +-
 14 files changed, 117 insertions(+), 110 deletions(-)

diff --git a/src/components/Charts/Radar/index.js b/src/components/Charts/Radar/index.js
index 03aaa700..b7f7caf3 100644
--- a/src/components/Charts/Radar/index.js
+++ b/src/components/Charts/Radar/index.js
@@ -60,7 +60,9 @@ export default class Radar extends Component {
     const { legendData } = this.state;
     legendData[i] = newItem;
 
-    const filteredLegendData = legendData.filter(l => l.checked).map(l => l.name);
+    const filteredLegendData = legendData
+      .filter(l => l.checked)
+      .map(l => l.name);
 
     if (this.chart) {
       this.chart.filter('name', val => filteredLegendData.indexOf(val) > -1);
@@ -109,71 +111,76 @@ export default class Radar extends Component {
 
     return (
       <div className={styles.radar} style={{ height }}>
-        <div>
-          {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={null}
-              tickLine={null}
-              grid={{
-                lineStyle: {
-                  lineDash: null,
-                },
-                hideFirstLine: false,
-              }}
-            />
-            <Axis
-              name="value"
-              grid={{
-                type: 'polygon',
-                lineStyle: {
-                  lineDash: null,
-                },
-              }}
-            />
-            <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>
+        {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={null}
+            tickLine={null}
+            grid={{
+              lineStyle: {
+                lineDash: null,
+              },
+              hideFirstLine: false,
+            }}
+          />
+          <Axis
+            name="value"
+            grid={{
+              type: 'polygon',
+              lineStyle: {
+                lineDash: null,
+              },
+            }}
+          />
+          <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>
     );
   }
diff --git a/src/components/StandardTable/index.js b/src/components/StandardTable/index.js
index 907e8280..a2c35eaf 100644
--- a/src/components/StandardTable/index.js
+++ b/src/components/StandardTable/index.js
@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import React, { PureComponent, Fragment } from 'react';
 import { Table, Alert } from 'antd';
 import styles from './index.less';
 
@@ -84,7 +84,7 @@ class StandardTable extends PureComponent {
         <div className={styles.tableAlert}>
           <Alert
             message={(
-              <div>
+              <Fragment>
                 已选择 <a style={{ fontWeight: 600 }}>{selectedRowKeys.length}</a> 项&nbsp;&nbsp;
                 {
                   needTotalList.map(item => (
@@ -97,7 +97,7 @@ class StandardTable extends PureComponent {
                   )
                 }
                 <a onClick={this.cleanSelectedKeys} style={{ marginLeft: 24 }}>清空</a>
-              </div>
+              </Fragment>
             )}
             type="info"
             showIcon
diff --git a/src/layouts/BasicLayout.js b/src/layouts/BasicLayout.js
index f8c956a9..062198c1 100644
--- a/src/layouts/BasicLayout.js
+++ b/src/layouts/BasicLayout.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { Layout, Icon, message } from 'antd';
 import DocumentTitle from 'react-document-title';
@@ -222,9 +222,9 @@ class BasicLayout extends React.PureComponent {
                 blankTarget: true,
               }]}
               copyright={
-                <div>
+                <Fragment>
                   Copyright <Icon type="copyright" /> 2018 蚂蚁金服体验技术部出品
-                </div>
+                </Fragment>
               }
             />
           </Footer>
diff --git a/src/layouts/UserLayout.js b/src/layouts/UserLayout.js
index 946fc953..e736b2a0 100644
--- a/src/layouts/UserLayout.js
+++ b/src/layouts/UserLayout.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import { Link, Redirect, Switch, Route } from 'dva/router';
 import DocumentTitle from 'react-document-title';
 import { Icon } from 'antd';
@@ -21,7 +21,7 @@ const links = [{
   href: '',
 }];
 
-const copyright = <div>Copyright <Icon type="copyright" /> 2018 蚂蚁金服体验技术部出品</div>;
+const copyright = <Fragment>Copyright <Icon type="copyright" /> 2018 蚂蚁金服体验技术部出品</Fragment>;
 
 class UserLayout extends React.PureComponent {
   getPageTitle() {
diff --git a/src/routes/Dashboard/Analysis.js b/src/routes/Dashboard/Analysis.js
index 2f98da8d..f6df4406 100644
--- a/src/routes/Dashboard/Analysis.js
+++ b/src/routes/Dashboard/Analysis.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import { connect } from 'dva';
 import {
   Row,
@@ -241,7 +241,7 @@ export default class Analysis extends Component {
     };
 
     return (
-      <div>
+      <Fragment>
         <Row gutter={24}>
           <Col {...topColResponsiveProps}>
             <ChartCard
@@ -482,7 +482,7 @@ export default class Analysis extends Component {
             ))}
           </Tabs>
         </Card>
-      </div>
+      </Fragment>
     );
   }
 }
diff --git a/src/routes/Dashboard/Monitor.js b/src/routes/Dashboard/Monitor.js
index 4526f121..897dc9ce 100644
--- a/src/routes/Dashboard/Monitor.js
+++ b/src/routes/Dashboard/Monitor.js
@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import React, { PureComponent, Fragment } from 'react';
 import { connect } from 'dva';
 import { Row, Col, Card, Tooltip } from 'antd';
 import numeral from 'numeral';
@@ -35,7 +35,7 @@ export default class Monitor extends PureComponent {
     const { tags } = monitor;
 
     return (
-      <div>
+      <Fragment>
         <Row gutter={24}>
           <Col xl={18} lg={24} md={24} sm={24} xs={24} style={{ marginBottom: 24 }}>
             <Card title="活动实时交易情况" bordered={false}>
@@ -164,7 +164,7 @@ export default class Monitor extends PureComponent {
             </Card>
           </Col>
         </Row>
-      </div>
+      </Fragment>
     );
   }
 }
diff --git a/src/routes/Forms/StepForm/Step1.js b/src/routes/Forms/StepForm/Step1.js
index 2a962fbc..01cf0df2 100644
--- a/src/routes/Forms/StepForm/Step1.js
+++ b/src/routes/Forms/StepForm/Step1.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import { connect } from 'dva';
 import { Form, Input, Button, Select, Divider } from 'antd';
 import { routerRedux } from 'dva/router';
@@ -32,7 +32,7 @@ class Step1 extends React.PureComponent {
       });
     };
     return (
-      <div>
+      <Fragment>
         <Form layout="horizontal" className={styles.stepForm} hideRequiredMark>
           <Form.Item
             {...formItemLayout}
@@ -112,7 +112,7 @@ class Step1 extends React.PureComponent {
           <h4>转账到银行卡</h4>
           <p>如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。</p>
         </div>
-      </div>
+      </Fragment>
     );
   }
 }
diff --git a/src/routes/Forms/StepForm/Step3.js b/src/routes/Forms/StepForm/Step3.js
index 78295ae4..8df6388d 100644
--- a/src/routes/Forms/StepForm/Step3.js
+++ b/src/routes/Forms/StepForm/Step3.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import { connect } from 'dva';
 import { Button, Row, Col } from 'antd';
 import { routerRedux } from 'dva/router';
@@ -32,14 +32,14 @@ class Step3 extends React.PureComponent {
       </div>
     );
     const actions = (
-      <div>
+      <Fragment>
         <Button type="primary" onClick={onFinish}>
           再转一笔
         </Button>
         <Button>
           查看账单
         </Button>
-      </div>
+      </Fragment>
     );
     return (
       <Result
diff --git a/src/routes/Forms/StepForm/index.js b/src/routes/Forms/StepForm/index.js
index de9779b9..eddcad04 100644
--- a/src/routes/Forms/StepForm/index.js
+++ b/src/routes/Forms/StepForm/index.js
@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import React, { PureComponent, Fragment } from 'react';
 import { Route, Redirect, Switch } from 'dva/router';
 import { Card, Steps } from 'antd';
 import PageHeaderLayout from '../../../layouts/PageHeaderLayout';
@@ -25,7 +25,7 @@ export default class StepForm extends PureComponent {
     return (
       <PageHeaderLayout title="分步表单" content="将一个冗长或用户不熟悉的表单任务分成多个步骤，指导用户完成。">
         <Card bordered={false}>
-          <div>
+          <Fragment>
             <Steps current={this.getCurrentStep()} className={styles.steps}>
               <Step title="填写转账信息" />
               <Step title="确认转账信息" />
@@ -45,7 +45,7 @@ export default class StepForm extends PureComponent {
               <Redirect exact from="/form/step-form" to="/form/step-form/info" />
               <Route render={NotFound} />
             </Switch>
-          </div>
+          </Fragment>
         </Card>
       </PageHeaderLayout>
     );
diff --git a/src/routes/Forms/TableForm.js b/src/routes/Forms/TableForm.js
index a8b18c6f..be01d82f 100644
--- a/src/routes/Forms/TableForm.js
+++ b/src/routes/Forms/TableForm.js
@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import React, { PureComponent, Fragment } from 'react';
 import { Table, Button, Input, message, Popconfirm, Divider } from 'antd';
 import styles from './style.less';
 
@@ -203,7 +203,7 @@ export default class TableForm extends PureComponent {
     }];
 
     return (
-      <div>
+      <Fragment>
         <Table
           loading={this.state.loading}
           columns={columns}
@@ -221,7 +221,7 @@ export default class TableForm extends PureComponent {
         >
           新增成员
         </Button>
-      </div>
+      </Fragment>
     );
   }
 }
diff --git a/src/routes/List/Articles.js b/src/routes/List/Articles.js
index f7aac69a..436a7fa5 100644
--- a/src/routes/List/Articles.js
+++ b/src/routes/List/Articles.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import moment from 'moment';
 import { connect } from 'dva';
 import { Form, Card, Select, List, Tag, Icon, Avatar, Row, Col, Button } from 'antd';
@@ -99,7 +99,7 @@ export default class SearchList extends Component {
     ) : null;
 
     return (
-      <div>
+      <Fragment>
         <Card bordered={false}>
           <Form layout="inline">
             <StandardFormRow title="所属类目" block style={{ paddingBottom: 11 }}>
@@ -230,7 +230,7 @@ export default class SearchList extends Component {
             )}
           />
         </Card>
-      </div>
+      </Fragment>
     );
   }
 }
diff --git a/src/routes/Profile/AdvancedProfile.js b/src/routes/Profile/AdvancedProfile.js
index 4f955079..3c0bb252 100644
--- a/src/routes/Profile/AdvancedProfile.js
+++ b/src/routes/Profile/AdvancedProfile.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import Debounce from 'lodash-decorators/debounce';
 import Bind from 'lodash-decorators/bind';
 import { connect } from 'dva';
@@ -23,7 +23,7 @@ const menu = (
 );
 
 const action = (
-  <div>
+  <Fragment>
     <ButtonGroup>
       <Button>操作</Button>
       <Button>操作</Button>
@@ -32,7 +32,7 @@ const action = (
       </Dropdown>
     </ButtonGroup>
     <Button type="primary">主操作</Button>
-  </div>
+  </Fragment>
 );
 
 const extra = (
@@ -69,20 +69,20 @@ const tabList = [{
 
 const desc1 = (
   <div className={classNames(styles.textSecondary, styles.stepDescription)}>
-    <div>
+    <Fragment>
       曲丽丽
       <Icon type="dingding-o" style={{ marginLeft: 8 }} />
-    </div>
+    </Fragment>
     <div>2016-12-12 12:32</div>
   </div>
 );
 
 const desc2 = (
   <div className={styles.stepDescription}>
-    <div>
+    <Fragment>
       周毛毛
       <Icon type="dingding-o" style={{ color: '#00A0E9', marginLeft: 8 }} />
-    </div>
+    </Fragment>
     <div><a href="">催一下</a></div>
   </div>
 );
diff --git a/src/routes/Result/Error.js b/src/routes/Result/Error.js
index dee00f84..7ff64393 100644
--- a/src/routes/Result/Error.js
+++ b/src/routes/Result/Error.js
@@ -1,10 +1,10 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import { Button, Icon, Card } from 'antd';
 import Result from '../../components/Result';
 import PageHeaderLayout from '../../layouts/PageHeaderLayout';
 
 const extra = (
-  <div>
+  <Fragment>
     <div style={{ fontSize: 16, color: 'rgba(0, 0, 0, 0.85)', fontWeight: '500', marginBottom: 16 }}>
       您提交的内容有如下错误：
     </div>
@@ -16,7 +16,7 @@ const extra = (
       <Icon style={{ color: '#f5222d', marginRight: 8 }} type="close-circle-o" />您的账户还不具备申请资格
       <a style={{ marginLeft: 16 }}>立即升级 <Icon type="right" /></a>
     </div>
-  </div>
+  </Fragment>
 );
 
 const actions = <Button type="primary">返回修改</Button>;
diff --git a/src/routes/Result/Success.js b/src/routes/Result/Success.js
index 13dbbe85..f7aabd7f 100644
--- a/src/routes/Result/Success.js
+++ b/src/routes/Result/Success.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import { Button, Row, Col, Icon, Steps, Card } from 'antd';
 import Result from '../../components/Result';
 import PageHeaderLayout from '../../layouts/PageHeaderLayout';
@@ -24,7 +24,7 @@ const desc2 = (
 );
 
 const extra = (
-  <div>
+  <Fragment>
     <div style={{ fontSize: 16, color: 'rgba(0, 0, 0, 0.85)', fontWeight: '500', marginBottom: 20 }}>
       项目名称
     </div>
@@ -48,15 +48,15 @@ const extra = (
       <Step title={<span style={{ fontSize: 14 }}>财务复核</span>} />
       <Step title={<span style={{ fontSize: 14 }}>完成</span>} />
     </Steps>
-  </div>
+  </Fragment>
 );
 
 const actions = (
-  <div>
+  <Fragment>
     <Button type="primary">返回列表</Button>
     <Button>查看项目</Button>
     <Button>打 印</Button>
-  </div>
+  </Fragment>
 );
 
 export default () => (

From 38f1302ab5716336401c32d352f4c918e38b3514 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E9=9B=86=E9=B9=84?= <wjhu111@21cn.com>
Date: Sun, 11 Feb 2018 16:45:41 +0800
Subject: [PATCH 09/25] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20Change=20'getUrlPara?=
 =?UTF-8?q?ms()'=20as=20standard=20library=20to=20'url.parse()'=20(#926)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🔥 Clean up unused code
---
 .roadhogrc.mock.js |  1 -
 mock/api.js        |  4 ++--
 mock/rule.js       |  4 ++--
 mock/utils.js      | 45 ---------------------------------------------
 4 files changed, 4 insertions(+), 50 deletions(-)
 delete mode 100644 mock/utils.js

diff --git a/.roadhogrc.mock.js b/.roadhogrc.mock.js
index 076ee0c6..284f3161 100644
--- a/.roadhogrc.mock.js
+++ b/.roadhogrc.mock.js
@@ -2,7 +2,6 @@ import mockjs from 'mockjs';
 import { getRule, postRule } from './mock/rule';
 import { getActivities, getNotice, getFakeList } from './mock/api';
 import { getFakeChartData } from './mock/chart';
-import { imgMap } from './mock/utils';
 import { getProfileBasicData } from './mock/profile';
 import { getProfileAdvancedData } from './mock/profile';
 import { getNotices } from './mock/notices';
diff --git a/mock/api.js b/mock/api.js
index 35b64946..969c1518 100644
--- a/mock/api.js
+++ b/mock/api.js
@@ -1,4 +1,4 @@
-import { getUrlParams } from './utils';
+import { parse } from 'url';
 
 const titles = [
   'Alipay',
@@ -110,7 +110,7 @@ export function getFakeList(req, res, u) {
     url = req.url; // eslint-disable-line
   }
 
-  const params = getUrlParams(url);
+  const params = parse(url, true).query;
 
   const count = (params.count * 1) || 20;
 
diff --git a/mock/rule.js b/mock/rule.js
index 2090ce8e..78fb95d1 100644
--- a/mock/rule.js
+++ b/mock/rule.js
@@ -1,4 +1,4 @@
-import { getUrlParams } from './utils';
+import { parse } from 'url';
 
 // mock tableListDataSource
 let tableListDataSource = [];
@@ -26,7 +26,7 @@ export function getRule(req, res, u) {
     url = req.url; // eslint-disable-line
   }
 
-  const params = getUrlParams(url);
+  const params = parse(url, true).query;
 
   let dataSource = [...tableListDataSource];
 
diff --git a/mock/utils.js b/mock/utils.js
deleted file mode 100644
index 8438a265..00000000
--- a/mock/utils.js
+++ /dev/null
@@ -1,45 +0,0 @@
-export const imgMap = {
-  user: 'https://gw.alipayobjects.com/zos/rmsportal/UjusLxePxWGkttaqqmUI.png',
-  a: 'https://gw.alipayobjects.com/zos/rmsportal/ZrkcSjizAKNWwJTwcadT.png',
-  b: 'https://gw.alipayobjects.com/zos/rmsportal/KYlwHMeomKQbhJDRUVvt.png',
-  c: 'https://gw.alipayobjects.com/zos/rmsportal/gabvleTstEvzkbQRfjxu.png',
-  d: 'https://gw.alipayobjects.com/zos/rmsportal/jvpNzacxUYLlNsHTtrAD.png',
-};
-
-// refers: https://www.sitepoint.com/get-url-parameters-with-javascript/
-export function getUrlParams(url) {
-  const d = decodeURIComponent;
-  let queryString = url ? url.split('?')[1] : window.location.search.slice(1);
-  const obj = {};
-  if (queryString) {
-    queryString = queryString.split('#')[0]; // eslint-disable-line
-    const arr = queryString.split('&');
-    for (let i = 0; i < arr.length; i += 1) {
-      const a = arr[i].split('=');
-      let paramNum;
-      const paramName = a[0].replace(/\[\d*\]/, (v) => {
-        paramNum = v.slice(1, -1);
-        return '';
-      });
-      const paramValue = typeof (a[1]) === 'undefined' ? true : a[1];
-      if (obj[paramName]) {
-        if (typeof obj[paramName] === 'string') {
-          obj[paramName] = d([obj[paramName]]);
-        }
-        if (typeof paramNum === 'undefined') {
-          obj[paramName].push(d(paramValue));
-        } else {
-          obj[paramName][paramNum] = d(paramValue);
-        }
-      } else {
-        obj[paramName] = d(paramValue);
-      }
-    }
-  }
-  return obj;
-}
-
-export default {
-  getUrlParams,
-  imgMap,
-};

From fd9773f5c3ac1a6b561b8982a6c030e6ca7af327 Mon Sep 17 00:00:00 2001
From: jim <wasd2144@hotmail.com>
Date: Tue, 13 Feb 2018 01:14:38 +0800
Subject: [PATCH 10/25] fix #933  add className prop

---
 src/components/Ellipsis/index.d.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/Ellipsis/index.d.ts b/src/components/Ellipsis/index.d.ts
index 8421b951..4b57452f 100644
--- a/src/components/Ellipsis/index.d.ts
+++ b/src/components/Ellipsis/index.d.ts
@@ -4,6 +4,7 @@ export interface EllipsisProps {
   length?: number;
   lines?: number;
   style?: React.CSSProperties;
+  className?:string;
 }
 
 export default class Ellipsis extends React.Component<

From bd391d7e6c14ff922ed1c3f773a944864d290a59 Mon Sep 17 00:00:00 2001
From: jim <wasd2144@hotmail.com>
Date: Thu, 15 Feb 2018 00:01:22 +0800
Subject: [PATCH 11/25] Format the code

---
 src/components/Ellipsis/index.d.ts | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/src/components/Ellipsis/index.d.ts b/src/components/Ellipsis/index.d.ts
index 4b57452f..4f84c7ae 100644
--- a/src/components/Ellipsis/index.d.ts
+++ b/src/components/Ellipsis/index.d.ts
@@ -1,13 +1,10 @@
-import * as React from "react";
+import * as React from 'react';
 export interface EllipsisProps {
   tooltip?: boolean;
   length?: number;
   lines?: number;
   style?: React.CSSProperties;
-  className?:string;
+  className?: string;
 }
 
-export default class Ellipsis extends React.Component<
-  EllipsisProps,
-  any
-> {}
+export default class Ellipsis extends React.Component<EllipsisProps, any> {}

From 44ca66763a2651a1234d846799a5361456277e60 Mon Sep 17 00:00:00 2001
From: ddcat1115 <ddcat1115@gmail.com>
Date: Fri, 2 Feb 2018 10:37:00 +0800
Subject: [PATCH 12/25] New page - step modal (#855)

* temp save

* add new page & make some improve
---
 mock/rule.js                 |  24 ++-
 src/models/rule.js           |  10 +-
 src/routes/List/TableList.js | 372 ++++++++++++++++++++++++++++-------
 src/services/api.js          |  10 +
 4 files changed, 332 insertions(+), 84 deletions(-)

diff --git a/mock/rule.js b/mock/rule.js
index 78fb95d1..8a733298 100644
--- a/mock/rule.js
+++ b/mock/rule.js
@@ -8,10 +8,10 @@ for (let i = 0; i < 46; i += 1) {
     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],
-    no: `TradeCode ${i}`,
+    name: `TradeCode ${i}`,
     title: `一个任务名称 ${i}`,
     owner: '曲丽丽',
-    description: '这是一段描述',
+    desc: '这是一段描述',
     callNo: Math.floor(Math.random() * 1000),
     status: Math.floor(Math.random() * 10) % 4,
     updatedAt: new Date(`2017-07-${Math.floor(i / 2) + 1}`),
@@ -51,8 +51,8 @@ export function getRule(req, res, u) {
     dataSource = filterDataSource;
   }
 
-  if (params.no) {
-    dataSource = dataSource.filter(data => data.no.indexOf(params.no) > -1);
+  if (params.name) {
+    dataSource = dataSource.filter(data => data.name.indexOf(params.name) > -1);
   }
 
   let pageSize = 10;
@@ -83,12 +83,12 @@ export function postRule(req, res, u, b) {
   }
 
   const body = (b && b.body) || req.body;
-  const { method, no, description } = body;
+  const { method, name, desc, key } = body;
 
   switch (method) {
     /* eslint no-case-declarations:0 */
     case 'delete':
-      tableListDataSource = tableListDataSource.filter(item => no.indexOf(item.no) === -1);
+      tableListDataSource = tableListDataSource.filter(item => key.indexOf(item.key) === -1);
       break;
     case 'post':
       const i = Math.ceil(Math.random() * 10000);
@@ -96,10 +96,10 @@ export function postRule(req, res, u, b) {
         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],
-        no: `TradeCode ${i}`,
+        name: `TradeCode ${i}`,
         title: `一个任务名称 ${i}`,
         owner: '曲丽丽',
-        description,
+        desc,
         callNo: Math.floor(Math.random() * 1000),
         status: Math.floor(Math.random() * 10) % 2,
         updatedAt: new Date(),
@@ -107,6 +107,14 @@ export function postRule(req, res, u, b) {
         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;
   }
diff --git a/src/models/rule.js b/src/models/rule.js
index 9ae968f8..8303dd21 100644
--- a/src/models/rule.js
+++ b/src/models/rule.js
@@ -1,4 +1,4 @@
-import { queryRule, removeRule, addRule } from '../services/api';
+import { queryRule, removeRule, addRule, updateRule } from '../services/api';
 
 export default {
   namespace: 'rule',
@@ -34,6 +34,14 @@ export default {
       });
       if (callback) callback();
     },
+    *update({ payload, callback }, { call, put }) {
+      const response = yield call(updateRule, payload);
+      yield put({
+        type: 'save',
+        payload: response,
+      });
+      if (callback) callback();
+    },
   },
 
   reducers: {
diff --git a/src/routes/List/TableList.js b/src/routes/List/TableList.js
index a74860c7..507442cc 100644
--- a/src/routes/List/TableList.js
+++ b/src/routes/List/TableList.js
@@ -1,77 +1,21 @@
 import React, { PureComponent, Fragment } from 'react';
 import { connect } from 'dva';
 import moment from 'moment';
-import { Row, Col, Card, Form, Input, Select, Icon, Button, Dropdown, Menu, InputNumber, DatePicker, Modal, message, Badge, Divider } from 'antd';
+import { Row, Col, Card, Form, Input, Select, Icon, Button, Dropdown, Menu,
+  InputNumber, DatePicker, Modal, message, Badge, Divider, Steps, Radio } from 'antd';
 import StandardTable from '../../components/StandardTable';
 import PageHeaderLayout from '../../layouts/PageHeaderLayout';
 
 import styles from './TableList.less';
 
 const FormItem = Form.Item;
+const { Step } = Steps;
+const { TextArea } = Input;
 const { Option } = Select;
+const RadioGroup = Radio.Group;
 const getValue = obj => Object.keys(obj).map(key => obj[key]).join(',');
 const statusMap = ['default', 'processing', 'success', 'error'];
 const status = ['关闭', '运行中', '已上线', '异常'];
-const columns = [
-  {
-    title: '规则编号',
-    dataIndex: 'no',
-  },
-  {
-    title: '描述',
-    dataIndex: 'description',
-  },
-  {
-    title: '服务调用次数',
-    dataIndex: 'callNo',
-    sorter: true,
-    align: 'right',
-    render: val => `${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) {
-      return <Badge status={statusMap[val]} text={status[val]} />;
-    },
-  },
-  {
-    title: '更新时间',
-    dataIndex: 'updatedAt',
-    sorter: true,
-    render: val => <span>{moment(val).format('YYYY-MM-DD HH:mm:ss')}</span>,
-  },
-  {
-    title: '操作',
-    render: () => (
-      <Fragment>
-        <a href="">配置</a>
-        <Divider type="vertical" />
-        <a href="">订阅警报</a>
-      </Fragment>
-    ),
-  },
-];
 
 const CreateForm = Form.create()((props) => {
   const { modalVisible, form, handleAdd, handleModalVisible } = props;
@@ -83,6 +27,7 @@ const CreateForm = Form.create()((props) => {
   };
   return (
     <Modal
+      destroyOnClose
       title="新建规则"
       visible={modalVisible}
       onOk={okHandle}
@@ -94,7 +39,7 @@ const CreateForm = Form.create()((props) => {
         label="描述"
       >
         {form.getFieldDecorator('desc', {
-          rules: [{ required: true, message: 'Please input some description...' }],
+          rules: [{ required: true, message: '请输入至少五个字符的规则描述！', min: 5 }],
         })(
           <Input placeholder="请输入" />
         )}
@@ -103,6 +48,190 @@ const CreateForm = Form.create()((props) => {
   );
 });
 
+@Form.create()
+class UpdateForm extends PureComponent {
+  constructor(props) {
+    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,
+    };
+
+    this.formLayout = {
+      labelCol: { span: 7 },
+      wrapperCol: { span: 13 },
+    };
+  }
+  handleNext = (currentStep) => {
+    const { form, handleUpdate } = this.props;
+    form.validateFields((err, fieldsValue) => {
+      if (err) return;
+      const formVals = { ...this.state.formVals, ...fieldsValue };
+      this.setState({
+        formVals,
+      }, () => {
+        if (currentStep < 2) {
+          this.forward();
+        } else {
+          handleUpdate(this.state.formVals);
+        }
+      });
+    });
+  }
+  backward = () => {
+    this.setState({
+      currentStep: this.state.currentStep - 1,
+    });
+  }
+  forward = () => {
+    this.setState({
+      currentStep: this.state.currentStep + 1,
+    });
+  }
+  renderContent = (currentStep, formVals) => {
+    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) => {
+    const { handleUpdateModalVisible } = this.props;
+    if (currentStep === 1) {
+      return [
+        <Button key="back" style={{ float: 'left' }} onClick={this.backward}>上一步</Button>,
+        <Button key="cancel" onClick={() => handleUpdateModalVisible()}>取消</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()}>取消</Button>,
+        <Button key="submit" type="primary" onClick={() => this.handleNext(currentStep)}>
+          完成
+        </Button>,
+      ];
+    }
+    return [
+      <Button key="cancel" onClick={() => handleUpdateModalVisible()}>取消</Button>,
+      <Button key="forward" type="primary" onClick={() => this.handleNext(currentStep)}>
+        下一步
+      </Button>,
+    ];
+  }
+  render() {
+    const { updateModalVisible, handleUpdateModalVisible } = 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()}
+      >
+        <Steps style={{ marginBottom: 32 }} size="small" current={currentStep}>
+          <Step title="基本信息" />
+          <Step title="配置规则属性" />
+          <Step title="设定调度周期" />
+        </Steps>
+        { this.renderContent(currentStep, formVals) }
+      </Modal>
+    );
+  }
+}
+
+/* eslint react/no-multi-comp:0 */
 @connect(({ rule, loading }) => ({
   rule,
   loading: loading.models.rule,
@@ -111,9 +240,11 @@ const CreateForm = Form.create()((props) => {
 export default class TableList extends PureComponent {
   state = {
     modalVisible: false,
+    updateModalVisible: false,
     expandForm: false,
     selectedRows: [],
     formValues: {},
+    stepFormValues: {},
   };
 
   componentDidMount() {
@@ -123,6 +254,67 @@ export default class TableList extends PureComponent {
     });
   }
 
+  columns = [
+    {
+      title: '规则名称',
+      dataIndex: 'name',
+    },
+    {
+      title: '描述',
+      dataIndex: 'desc',
+    },
+    {
+      title: '服务调用次数',
+      dataIndex: 'callNo',
+      sorter: true,
+      align: 'right',
+      render: val => `${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) {
+        return <Badge status={statusMap[val]} text={status[val]} />;
+      },
+    },
+    {
+      title: '上次调度时间',
+      dataIndex: 'updatedAt',
+      sorter: true,
+      render: val => <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>
+      ),
+    },
+  ];
+
   handleStandardTableChange = (pagination, filtersArg, sorter) => {
     const { dispatch } = this.props;
     const { formValues } = this.state;
@@ -172,13 +364,12 @@ export default class TableList extends PureComponent {
     const { selectedRows } = this.state;
 
     if (!selectedRows) return;
-
     switch (e.key) {
       case 'remove':
         dispatch({
           type: 'rule/remove',
           payload: {
-            no: selectedRows.map(row => row.no).join(','),
+            key: selectedRows.map(row => row.key),
           },
           callback: () => {
             this.setState({
@@ -228,18 +419,37 @@ export default class TableList extends PureComponent {
     });
   }
 
+  handleUpdateModalVisible = (flag, record) => {
+    this.setState({
+      updateModalVisible: !!flag,
+      stepFormValues: record || {},
+    });
+  }
+
   handleAdd = (fields) => {
     this.props.dispatch({
       type: 'rule/add',
       payload: {
-        description: fields.desc,
+        desc: fields.desc,
       },
     });
 
     message.success('添加成功');
-    this.setState({
-      modalVisible: false,
+    this.handleModalVisible();
+  }
+
+  handleUpdate = (fields) => {
+    this.props.dispatch({
+      type: 'rule/update',
+      payload: {
+        name: fields.name,
+        desc: fields.desc,
+        key: fields.key,
+      },
     });
+
+    message.success('配置成功');
+    this.handleUpdateModalVisible();
   }
 
   renderSimpleForm() {
@@ -248,8 +458,8 @@ export default class TableList extends PureComponent {
       <Form onSubmit={this.handleSearch} layout="inline">
         <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
           <Col md={8} sm={24}>
-            <FormItem label="规则编号">
-              {getFieldDecorator('no')(
+            <FormItem label="规则名称">
+              {getFieldDecorator('name')(
                 <Input placeholder="请输入" />
               )}
             </FormItem>
@@ -284,8 +494,8 @@ export default class TableList extends PureComponent {
       <Form onSubmit={this.handleSearch} layout="inline">
         <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
           <Col md={8} sm={24}>
-            <FormItem label="规则编号">
-              {getFieldDecorator('no')(
+            <FormItem label="规则名称">
+              {getFieldDecorator('name')(
                 <Input placeholder="请输入" />
               )}
             </FormItem>
@@ -356,8 +566,7 @@ export default class TableList extends PureComponent {
 
   render() {
     const { rule: { data }, loading } = this.props;
-    const { selectedRows, modalVisible } = this.state;
-
+    const { selectedRows, modalVisible, updateModalVisible, stepFormValues } = this.state;
     const menu = (
       <Menu onClick={this.handleMenuClick} selectedKeys={[]}>
         <Menu.Item key="remove">删除</Menu.Item>
@@ -369,7 +578,10 @@ export default class TableList extends PureComponent {
       handleAdd: this.handleAdd,
       handleModalVisible: this.handleModalVisible,
     };
-
+    const updateMethods = {
+      handleUpdateModalVisible: this.handleUpdateModalVisible,
+      handleUpdate: this.handleUpdate,
+    };
     return (
       <PageHeaderLayout title="查询表格">
         <Card bordered={false}>
@@ -398,7 +610,7 @@ export default class TableList extends PureComponent {
               selectedRows={selectedRows}
               loading={loading}
               data={data}
-              columns={columns}
+              columns={this.columns}
               onSelectRow={this.handleSelectRows}
               onChange={this.handleStandardTableChange}
             />
@@ -408,6 +620,16 @@ export default class TableList extends PureComponent {
           {...parentMethods}
           modalVisible={modalVisible}
         />
+        {
+          stepFormValues && Object.keys(stepFormValues).length ?
+            (
+              <UpdateForm
+                {...updateMethods}
+                updateModalVisible={updateModalVisible}
+                values={stepFormValues}
+              />
+            ) : null
+        }
       </PageHeaderLayout>
     );
   }
diff --git a/src/services/api.js b/src/services/api.js
index 2f3e21a5..c6eb4fef 100644
--- a/src/services/api.js
+++ b/src/services/api.js
@@ -33,6 +33,16 @@ export async function addRule(params) {
   });
 }
 
+export async function updateRule(params) {
+  return request('/api/rule', {
+    method: 'POST',
+    body: {
+      ...params,
+      method: 'update',
+    },
+  });
+}
+
 export async function fakeSubmitForm(params) {
   return request('/api/forms', {
     method: 'POST',

From 26860e35b25c9797b98318339ab2d855e705f967 Mon Sep 17 00:00:00 2001
From: valleykid <valleykiddy@gmail.com>
Date: Wed, 7 Feb 2018 23:31:49 +0800
Subject: [PATCH 13/25] New page info modal (#876)

* New page - info modal

* Replace `Array.some` to `for`

* Fix py-lint

* Keep original DatePicker

* Remove modal's vertical style

* Remove fake_dataBase
---
 .roadhogrc.mock.js           |   3 +-
 mock/api.js                  |  41 ++++++++
 src/models/list.js           |  22 ++---
 src/routes/List/BasicList.js | 175 +++++++++++++++++++++++++++++++----
 src/services/api.js          |  33 +++++++
 5 files changed, 245 insertions(+), 29 deletions(-)

diff --git a/.roadhogrc.mock.js b/.roadhogrc.mock.js
index 284f3161..b95f6db1 100644
--- a/.roadhogrc.mock.js
+++ b/.roadhogrc.mock.js
@@ -1,6 +1,6 @@
 import mockjs from 'mockjs';
 import { getRule, postRule } from './mock/rule';
-import { getActivities, getNotice, getFakeList } from './mock/api';
+import { getActivities, getNotice, getFakeList, postFakeList } from './mock/api';
 import { getFakeChartData } from './mock/chart';
 import { getProfileBasicData } from './mock/profile';
 import { getProfileAdvancedData } from './mock/profile';
@@ -64,6 +64,7 @@ const proxy = {
     'list|100': [{ name: '@city', 'value|1-100': 150, 'type|0-2': 1 }]
   }),
   'GET /api/fake_list': getFakeList,
+  'POST /api/fake_list': postFakeList,
   'GET /api/fake_chart_data': getFakeChartData,
   'GET /api/profile/basic': getProfileBasicData,
   'GET /api/profile/advanced': getProfileAdvancedData,
diff --git a/mock/api.js b/mock/api.js
index 969c1518..72c7ade9 100644
--- a/mock/api.js
+++ b/mock/api.js
@@ -104,6 +104,8 @@ export function fakeList(count) {
   return list;
 }
 
+let sourceData;
+
 export function getFakeList(req, res, u) {
   let url = u;
   if (!url || Object.prototype.toString.call(url) !== '[object String]') {
@@ -115,6 +117,44 @@ export function getFakeList(req, res, u) {
   const count = (params.count * 1) || 20;
 
   const result = fakeList(count);
+  sourceData = result;
+
+  if (res && res.json) {
+    res.json(result);
+  } else {
+    return result;
+  }
+}
+
+export function postFakeList(req, res) {
+  const { /* url = '', */ body } = req;
+  // const params = getUrlParams(url);
+  const { method, id, ...restParams } = 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] = Object.assign(item, restParams);
+        }
+      });
+      break;
+    case 'post':
+      result.unshift({
+        ...restParams,
+        id: `fake-list-${result.length}`,
+        createdAt: new Date().getTime(),
+      });
+      break;
+    default:
+      break;
+  }
 
   if (res && res.json) {
     res.json(result);
@@ -292,4 +332,5 @@ export default {
   getNotice,
   getActivities,
   getFakeList,
+  postFakeList,
 };
diff --git a/src/models/list.js b/src/models/list.js
index 147eeca6..8acf49f3 100644
--- a/src/models/list.js
+++ b/src/models/list.js
@@ -1,4 +1,4 @@
-import { queryFakeList } from '../services/api';
+import { queryFakeList, removeFakeList, addFakeList, updateFakeList } from '../services/api';
 
 export default {
   namespace: 'list',
@@ -15,11 +15,17 @@ export default {
         payload: Array.isArray(response) ? response : [],
       });
     },
-    *appendFetch({ payload }, { call, put }) {
-      const response = yield call(queryFakeList, payload);
+    *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: 'appendList',
-        payload: Array.isArray(response) ? response : [],
+        type: 'queryList',
+        payload: response,
       });
     },
   },
@@ -31,11 +37,5 @@ export default {
         list: action.payload,
       };
     },
-    appendList(state, action) {
-      return {
-        ...state,
-        list: state.list.concat(action.payload),
-      };
-    },
   },
 };
diff --git a/src/routes/List/BasicList.js b/src/routes/List/BasicList.js
index 0478cdfb..15cfb967 100644
--- a/src/routes/List/BasicList.js
+++ b/src/routes/List/BasicList.js
@@ -1,21 +1,28 @@
 import React, { PureComponent } from 'react';
 import moment from 'moment';
 import { connect } from 'dva';
-import { List, Card, Row, Col, Radio, Input, Progress, Button, Icon, Dropdown, Menu, Avatar } from 'antd';
+import { List, Card, Row, Col, Radio, Input, Progress, Button, Icon, Dropdown, Menu, Avatar,
+  Modal, Form, DatePicker, Select } from 'antd';
 
 import PageHeaderLayout from '../../layouts/PageHeaderLayout';
+import Result from '../../components/Result';
 
 import styles from './BasicList.less';
 
+const FormItem = Form.Item;
 const RadioButton = Radio.Button;
 const RadioGroup = Radio.Group;
-const { Search } = Input;
+const SelectOption = Select.Option;
+const { Search, TextArea } = Input;
 
 @connect(({ list, loading }) => ({
   list,
   loading: loading.models.list,
 }))
+@Form.create()
 export default class BasicList extends PureComponent {
+  state = { visible: false, done: false };
+
   componentDidMount() {
     this.props.dispatch({
       type: 'list/fetch',
@@ -24,9 +31,78 @@ export default class BasicList extends PureComponent {
       },
     });
   }
+  formLayout = {
+    labelCol: { span: 7 },
+    wrapperCol: { span: 13 },
+  };
+  showModal = () => {
+    this.setState({
+      visible: true,
+      current: undefined,
+    });
+  }
+  showEditModal = (item) => {
+    this.setState({
+      visible: true,
+      current: item,
+    });
+  }
+  handleDone = () => {
+    this.setState({
+      done: false,
+      visible: false,
+    });
+  }
+  handleCancel = () => {
+    this.setState({
+      visible: false,
+    });
+  }
+  handleSubmit = (e) => {
+    e.preventDefault();
+    const { dispatch, form } = this.props;
+    const id = this.state.current ? this.state.current.id : '';
+
+    form.validateFields((err, fieldsValue) => {
+      if (err) return;
+      this.setState({
+        done: true,
+      });
+      dispatch({
+        type: 'list/submit',
+        payload: { id, ...fieldsValue },
+      });
+    });
+  }
+  deleteItem = (id) => {
+    this.props.dispatch({
+      type: 'list/submit',
+      payload: { id },
+    });
+  }
 
   render() {
     const { list: { list }, loading } = this.props;
+    const { getFieldDecorator } = this.props.form;
+    const { visible, done, current = {} } = this.state;
+
+    const editAndDelete = (key, currentItem) => {
+      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 = ({ title, value, bordered }) => (
       <div className={styles.headerInfo}>
@@ -74,25 +150,77 @@ export default class BasicList extends PureComponent {
       </div>
     );
 
-    const menu = (
-      <Menu>
-        <Menu.Item>
-          <a>编辑</a>
-        </Menu.Item>
-        <Menu.Item>
-          <a>删除</a>
-        </Menu.Item>
-      </Menu>
-    );
-
-    const MoreBtn = () => (
-      <Dropdown overlay={menu}>
+    const MoreBtn = props => (
+      <Dropdown overlay={
+        <Menu onClick={({ key }) => editAndDelete(key, props.current)}>
+          <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>}
+            style={{ width: '100%', marginBottom: '24px' }}
+          />
+        );
+      }
+      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 (
       <PageHeaderLayout>
         <div className={styles.standardList}>
@@ -118,7 +246,7 @@ export default class BasicList extends PureComponent {
             bodyStyle={{ padding: '0 32px 40px 32px' }}
             extra={extraContent}
           >
-            <Button type="dashed" style={{ width: '100%', marginBottom: 8 }} icon="plus">
+            <Button type="dashed" style={{ width: '100%', marginBottom: 8 }} icon="plus" onClick={this.showModal}>
               添加
             </Button>
             <List
@@ -129,7 +257,10 @@ export default class BasicList extends PureComponent {
               dataSource={list}
               renderItem={item => (
                 <List.Item
-                  actions={[<a>编辑</a>, <MoreBtn />]}
+                  actions={[
+                    <a onClick={(e) => { e.preventDefault(); this.showEditModal(item); }}>编辑</a>,
+                    <MoreBtn current={item} />,
+                  ]}
                 >
                   <List.Item.Meta
                     avatar={<Avatar src={item.logo} shape="square" size="large" />}
@@ -142,6 +273,16 @@ export default class BasicList extends PureComponent {
             />
           </Card>
         </div>
+        <Modal
+          title={`任务${this.state.current ? '编辑' : '添加'}`}
+          width={640}
+          bodyStyle={{ padding: '32px 0 8px' }}
+          destroyOnClose
+          visible={visible}
+          {...modalFooter}
+        >
+          {getModalContent()}
+        </Modal>
       </PageHeaderLayout>
     );
   }
diff --git a/src/services/api.js b/src/services/api.js
index c6eb4fef..b2a42623 100644
--- a/src/services/api.js
+++ b/src/services/api.js
@@ -70,6 +70,39 @@ export async function queryFakeList(params) {
   return request(`/api/fake_list?${stringify(params)}`);
 }
 
+export async function removeFakeList(params) {
+  const { count = 5, ...restParams } = params;
+  return request(`/api/fake_list?count=${count}`, {
+    method: 'POST',
+    body: {
+      ...restParams,
+      method: 'delete',
+    },
+  });
+}
+
+export async function addFakeList(params) {
+  const { count = 5, ...restParams } = params;
+  return request(`/api/fake_list?count=${count}`, {
+    method: 'POST',
+    body: {
+      ...restParams,
+      method: 'post',
+    },
+  });
+}
+
+export async function updateFakeList(params) {
+  const { count = 5, ...restParams } = params;
+  return request(`/api/fake_list?count=${count}`, {
+    method: 'POST',
+    body: {
+      ...restParams,
+      method: 'update',
+    },
+  });
+}
+
 export async function fakeAccountLogin(params) {
   return request('/api/login/account', {
     method: 'POST',

From 415b8aee2829a1b174655d618b1a0188f9a0cc9e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=B8=85?= <wasd2144@hotmail.com>
Date: Thu, 8 Feb 2018 23:05:44 +0800
Subject: [PATCH 14/25] features  add userinfo page (#880)

* features add userinfo page

* Delete unnecessary objects

* Modify the title style

* Meun using antd

* userinfo/base/:page -> userinfo/:page

* itemview -> list

* userinfo add upload

* meun -> menu

* use getRoutes & rename files
---
 .roadhogrc.mock.js                    |  117 +-
 mock/geographic/city.json             | 1784 +++++++++++++++++++++++++
 mock/geographic/geographic.js         |   19 +
 mock/geographic/province.json         |  138 ++
 src/common/router.js                  |   15 +
 src/components/GlobalHeader/index.js  |    2 +-
 src/layouts/BasicLayout.js            |    4 +
 src/models/geographic.js              |   65 +
 src/routes/Forms/StepForm/index.js    |    3 +-
 src/routes/Userinfo/AccountView.js    |   46 +
 src/routes/Userinfo/BaseView.js       |  147 ++
 src/routes/Userinfo/BaseView.less     |   33 +
 src/routes/Userinfo/GeographicView.js |  103 ++
 src/routes/Userinfo/Info.js           |   78 ++
 src/routes/Userinfo/Info.less         |   73 +
 src/routes/Userinfo/MessageView.js    |   49 +
 src/routes/Userinfo/PhoneView.js      |   32 +
 src/routes/Userinfo/SafeView.js       |   60 +
 src/services/geographic.js            |    9 +
 19 files changed, 2727 insertions(+), 50 deletions(-)
 create mode 100644 mock/geographic/city.json
 create mode 100644 mock/geographic/geographic.js
 create mode 100644 mock/geographic/province.json
 create mode 100644 src/models/geographic.js
 create mode 100644 src/routes/Userinfo/AccountView.js
 create mode 100644 src/routes/Userinfo/BaseView.js
 create mode 100644 src/routes/Userinfo/BaseView.less
 create mode 100644 src/routes/Userinfo/GeographicView.js
 create mode 100644 src/routes/Userinfo/Info.js
 create mode 100644 src/routes/Userinfo/Info.less
 create mode 100644 src/routes/Userinfo/MessageView.js
 create mode 100644 src/routes/Userinfo/PhoneView.js
 create mode 100644 src/routes/Userinfo/SafeView.js
 create mode 100644 src/services/geographic.js

diff --git a/.roadhogrc.mock.js b/.roadhogrc.mock.js
index b95f6db1..4d082661 100644
--- a/.roadhogrc.mock.js
+++ b/.roadhogrc.mock.js
@@ -6,6 +6,7 @@ import { getProfileBasicData } from './mock/profile';
 import { getProfileAdvancedData } from './mock/profile';
 import { getNotices } from './mock/notices';
 import { format, delay } from 'roadhog-api-doc';
+import { getProvince, getCity, getArea } from './mock/geographic/geographic';
 
 // 是否禁用代理
 const noProxy = process.env.NO_PROXY === 'true';
@@ -14,7 +15,7 @@ const noProxy = process.env.NO_PROXY === 'true';
 const proxy = {
   // 支持值为 Object 和 Array
   'GET /api/currentUser': {
-    $desc: "获取当前用户接口",
+    $desc: '获取当前用户接口',
     $params: {
       pageSize: {
         desc: '分页',
@@ -23,28 +24,48 @@ const proxy = {
     },
     $body: {
       name: 'Serati Ma',
-      avatar: 'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png',
+      avatar:
+        'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png',
       userid: '00000001',
+      email: 'antdesign@alipay.com',
+      profile: '简单的介绍下自己',
       notifyCount: 12,
+      country: 'China',
+      geographic: {
+        province: {
+          label: '浙江省',
+          key: '330000',
+        },
+        city: {
+          label: '杭州市',
+          key: '330100',
+        },
+      },
+      address: '西湖区工专路 77 号',
+      phone: '0752-268888888',
     },
   },
   // GET POST 可省略
-  'GET /api/users': [{
-    key: '1',
-    name: 'John Brown',
-    age: 32,
-    address: 'New York No. 1 Lake Park',
-  }, {
-    key: '2',
-    name: 'Jim Green',
-    age: 42,
-    address: 'London No. 1 Lake Park',
-  }, {
-    key: '3',
-    name: 'Joe Black',
-    age: 32,
-    address: 'Sidney No. 1 Lake Park',
-  }],
+  'GET /api/users': [
+    {
+      key: '1',
+      name: 'John Brown',
+      age: 32,
+      address: 'New York No. 1 Lake Park',
+    },
+    {
+      key: '2',
+      name: 'Jim Green',
+      age: 42,
+      address: 'London No. 1 Lake Park',
+    },
+    {
+      key: '3',
+      name: 'Joe Black',
+      age: 32,
+      address: 'Sidney No. 1 Lake Park',
+    },
+  ],
   'GET /api/project/notice': getNotice,
   'GET /api/activities': getActivities,
   'GET /api/rule': getRule,
@@ -61,7 +82,7 @@ const proxy = {
     res.send({ message: 'Ok' });
   },
   'GET /api/tags': mockjs.mock({
-    'list|100': [{ name: '@city', 'value|1-100': 150, 'type|0-2': 1 }]
+    'list|100': [{ name: '@city', 'value|1-100': 150, 'type|0-2': 1 }],
   }),
   'GET /api/fake_list': getFakeList,
   'POST /api/fake_list': postFakeList,
@@ -70,26 +91,26 @@ const proxy = {
   'GET /api/profile/advanced': getProfileAdvancedData,
   'POST /api/login/account': (req, res) => {
     const { password, userName, type } = req.body;
-    if(password === '888888' && userName === 'admin'){
+    if (password === '888888' && userName === 'admin') {
       res.send({
         status: 'ok',
         type,
-        currentAuthority: 'admin'
+        currentAuthority: 'admin',
       });
-      return ;
+      return;
     }
-    if(password === '123456' && userName === 'user'){
+    if (password === '123456' && userName === 'user') {
       res.send({
         status: 'ok',
         type,
-        currentAuthority: 'user'
+        currentAuthority: 'user',
       });
-      return ;
+      return;
     }
     res.send({
       status: 'error',
       type,
-      currentAuthority: 'guest'
+      currentAuthority: 'guest',
     });
   },
   'POST /api/register': (req, res) => {
@@ -98,40 +119,42 @@ const proxy = {
   'GET /api/notices': getNotices,
   'GET /api/500': (req, res) => {
     res.status(500).send({
-      "timestamp": 1513932555104,
-      "status": 500,
-      "error": "error",
-      "message": "error",
-      "path": "/base/category/list"
+      timestamp: 1513932555104,
+      status: 500,
+      error: 'error',
+      message: 'error',
+      path: '/base/category/list',
     });
   },
   'GET /api/404': (req, res) => {
     res.status(404).send({
-      "timestamp": 1513932643431,
-      "status": 404,
-      "error": "Not Found",
-      "message": "No message available",
-      "path": "/base/category/list/2121212"
+      timestamp: 1513932643431,
+      status: 404,
+      error: 'Not Found',
+      message: 'No message available',
+      path: '/base/category/list/2121212',
     });
   },
   'GET /api/403': (req, res) => {
     res.status(403).send({
-      "timestamp": 1513932555104,
-      "status": 403,
-      "error": "Unauthorized",
-      "message": "Unauthorized",
-      "path": "/base/category/list"
+      timestamp: 1513932555104,
+      status: 403,
+      error: 'Unauthorized',
+      message: 'Unauthorized',
+      path: '/base/category/list',
     });
   },
   'GET /api/401': (req, res) => {
     res.status(401).send({
-      "timestamp": 1513932555104,
-      "status": 401,
-      "error": "Unauthorized",
-      "message": "Unauthorized",
-      "path": "/base/category/list"
+      timestamp: 1513932555104,
+      status: 401,
+      error: 'Unauthorized',
+      message: 'Unauthorized',
+      path: '/base/category/list',
     });
   },
+  'GET /api/geographic/province': getProvince,
+  'GET /api/geographic/city/:province': getCity,
 };
 
-export default noProxy ? {} : delay(proxy, 1000);
+export default (noProxy ? {} : delay(proxy, 1000));
diff --git a/mock/geographic/city.json b/mock/geographic/city.json
new file mode 100644
index 00000000..953cb364
--- /dev/null
+++ b/mock/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"
+        }
+    ]
+}
\ No newline at end of file
diff --git a/mock/geographic/geographic.js b/mock/geographic/geographic.js
new file mode 100644
index 00000000..4c5b1b40
--- /dev/null
+++ b/mock/geographic/geographic.js
@@ -0,0 +1,19 @@
+const fs = require('fs');
+
+function getJson(infoType) {
+  const json = fs.readFileSync(`${__dirname}/${infoType}.json`, 'utf8');
+  return JSON.parse(json);
+}
+
+export function getProvince(req, res) {
+  res.json(getJson('province'));
+}
+
+export function getCity(req, res) {
+  res.json(getJson('city')[req.params.province]);
+}
+
+export default {
+  getProvince,
+  getCity,
+};
diff --git a/mock/geographic/province.json b/mock/geographic/province.json
new file mode 100644
index 00000000..910c83f0
--- /dev/null
+++ b/mock/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/common/router.js b/src/common/router.js
index 5df24776..e0514c45 100644
--- a/src/common/router.js
+++ b/src/common/router.js
@@ -160,6 +160,21 @@ export const getRouterData = (app) => {
     '/user/register-result': {
       component: dynamicWrapper(app, [], () => import('../routes/User/RegisterResult')),
     },
+    '/userinfo': {
+      component: dynamicWrapper(app, ['geographic'], () => import('../routes/Userinfo/Info')),
+    },
+    '/userinfo/base': {
+      component: dynamicWrapper(app, ['geographic'], () => import('../routes/Userinfo/BaseView')),
+    },
+    '/userinfo/safe': {
+      component: dynamicWrapper(app, ['geographic'], () => import('../routes/Userinfo/SafeView')),
+    },
+    '/userinfo/account': {
+      component: dynamicWrapper(app, ['geographic'], () => import('../routes/Userinfo/AccountView')),
+    },
+    '/userinfo/message': {
+      component: dynamicWrapper(app, ['geographic'], () => import('../routes/Userinfo/MessageView')),
+    },
     // '/user/:id': {
     //   component: dynamicWrapper(app, [], () => import('../routes/User/SomeComponent')),
     // },
diff --git a/src/components/GlobalHeader/index.js b/src/components/GlobalHeader/index.js
index 61871a7d..04413c0f 100644
--- a/src/components/GlobalHeader/index.js
+++ b/src/components/GlobalHeader/index.js
@@ -58,7 +58,7 @@ export default class GlobalHeader extends PureComponent {
     const menu = (
       <Menu className={styles.menu} selectedKeys={[]} onClick={onMenuClick}>
         <Menu.Item disabled><Icon type="user" />个人中心</Menu.Item>
-        <Menu.Item disabled><Icon type="setting" />设置</Menu.Item>
+        <Menu.Item key="userinfo"><Icon type="setting" />设置</Menu.Item>
         <Menu.Item key="triggerError"><Icon type="close-circle" />触发报错</Menu.Item>
         <Menu.Divider />
         <Menu.Item key="logout"><Icon type="logout" />退出登录</Menu.Item>
diff --git a/src/layouts/BasicLayout.js b/src/layouts/BasicLayout.js
index 062198c1..8fa3ae34 100644
--- a/src/layouts/BasicLayout.js
+++ b/src/layouts/BasicLayout.js
@@ -131,6 +131,10 @@ class BasicLayout extends React.PureComponent {
       this.props.dispatch(routerRedux.push('/exception/trigger'));
       return;
     }
+    if (key === 'userinfo') {
+      this.props.dispatch(routerRedux.push('/userinfo/base'));
+      return;
+    }
     if (key === 'logout') {
       this.props.dispatch({
         type: 'login/logout',
diff --git a/src/models/geographic.js b/src/models/geographic.js
new file mode 100644
index 00000000..adcd7331
--- /dev/null
+++ b/src/models/geographic.js
@@ -0,0 +1,65 @@
+import { queryProvince, queryCity } from '../services/geographic';
+
+export default {
+  namespace: 'geographic',
+
+  state: {
+    province: [],
+    city: [],
+    isLoading: false,
+  },
+
+  effects: {
+    *fetchProvince(_, { call, put }) {
+      yield put({
+        type: 'changeLoading',
+        payload: true,
+      });
+      const response = yield call(queryProvince);
+      yield put({
+        type: 'setProvince',
+        payload: response,
+      });
+      yield put({
+        type: 'changeLoading',
+        payload: false,
+      });
+    },
+    *fetchCity({ payload }, { call, put }) {
+      yield put({
+        type: 'changeLoading',
+        payload: true,
+      });
+      const response = yield call(queryCity, payload);
+      yield put({
+        type: 'setCity',
+        payload: response,
+      });
+      yield put({
+        type: 'changeLoading',
+        payload: false,
+      });
+    },
+  },
+
+  reducers: {
+    setProvince(state, action) {
+      return {
+        ...state,
+        province: action.payload,
+      };
+    },
+    setCity(state, action) {
+      return {
+        ...state,
+        city: action.payload,
+      };
+    },
+    changeLoading(state, action) {
+      return {
+        ...state,
+        isLoading: action.payload,
+      };
+    },
+  },
+};
diff --git a/src/routes/Forms/StepForm/index.js b/src/routes/Forms/StepForm/index.js
index eddcad04..291f0315 100644
--- a/src/routes/Forms/StepForm/index.js
+++ b/src/routes/Forms/StepForm/index.js
@@ -2,7 +2,6 @@ import React, { PureComponent, Fragment } from 'react';
 import { Route, Redirect, Switch } from 'dva/router';
 import { Card, Steps } from 'antd';
 import PageHeaderLayout from '../../../layouts/PageHeaderLayout';
-import NotFound from '../../Exception/404';
 import { getRoutes } from '../../../utils/utils';
 import styles from '../style.less';
 
@@ -43,7 +42,7 @@ export default class StepForm extends PureComponent {
                 ))
               }
               <Redirect exact from="/form/step-form" to="/form/step-form/info" />
-              <Route render={NotFound} />
+              <Redirect to="/exception/404" />
             </Switch>
           </Fragment>
         </Card>
diff --git a/src/routes/Userinfo/AccountView.js b/src/routes/Userinfo/AccountView.js
new file mode 100644
index 00000000..ff533d32
--- /dev/null
+++ b/src/routes/Userinfo/AccountView.js
@@ -0,0 +1,46 @@
+import React, { Component, Fragment } from 'react';
+import { Icon, List } from 'antd';
+
+export default class AccountView extends Component {
+  getData = () => {
+    return [
+      {
+        title: '绑定淘宝',
+        description: '当前未绑定淘宝账号',
+        actions: [<a>绑定</a>],
+        avatar: <Icon type="taobao" className="taobao" />,
+      },
+      {
+        title: '绑定支付宝',
+        description: '当前未绑定支付宝账号',
+        actions: [<a>绑定</a>],
+        avatar: <Icon type="alipay" className="alipay" />,
+      },
+      {
+        title: '绑定钉钉',
+        description: '当前未绑定钉钉账号',
+        actions: [<a>绑定</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>
+    );
+  }
+}
diff --git a/src/routes/Userinfo/BaseView.js b/src/routes/Userinfo/BaseView.js
new file mode 100644
index 00000000..960e18c6
--- /dev/null
+++ b/src/routes/Userinfo/BaseView.js
@@ -0,0 +1,147 @@
+import React, { Component, Fragment } from 'react';
+import { Form, Input, Upload, Select, Button } from 'antd';
+import styles from './BaseView.less';
+import GeographicView from './GeographicView';
+import PhoneView from './PhoneView';
+
+const FormItem = Form.Item;
+const { Option } = Select;
+
+// 头像组件 方便以后独立，增加裁剪之类的功能
+const AvatarView = ({ avatar }) => (
+  <Fragment>
+    <div className={styles.avatar_title}>头像</div>
+    <div className={styles.avatar}>
+      <img src={avatar} alt="avatar" />
+    </div>
+    <Upload fileList={[]}>
+      <div className={styles.button_view}>
+        <Button icon="upload">更换头像</Button>
+      </div>
+    </Upload>
+  </Fragment>
+);
+
+const validatorGeographic = (rule, value, callback) => {
+  const { province, city } = value;
+  if (!province.key) {
+    callback('Please input your province!');
+  }
+  if (!city.key) {
+    callback('Please input your city!');
+  }
+  callback();
+};
+
+const validatorPhone = (rule, value, callback) => {
+  const values = value.split('-');
+  if (!values[0]) {
+    callback('Please input your area code!');
+  }
+  if (!values[1]) {
+    callback('Please input your phone number!');
+  }
+  callback();
+};
+
+@Form.create()
+export default class BaseView extends Component {
+  componentDidMount() {
+    this.setBaseInfo();
+  }
+  setBaseInfo = () => {
+    const { currentUser } = this.props;
+    Object.keys(this.props.form.getFieldsValue()).forEach((key) => {
+      const obj = {};
+      obj[key] = currentUser[key] || null;
+      this.props.form.setFieldsValue(obj);
+    });
+  };
+  getAvatarURL() {
+    if (this.props.currentUser.avatar) {
+      return this.props.currentUser.avatar;
+    }
+    const url =
+      'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png';
+    return url;
+  }
+  render() {
+    const { getFieldDecorator } = this.props.form;
+    return (
+      <div className={styles.baseView}>
+        <div className={styles.left}>
+          <Form layout="vertical" onSubmit={this.handleSubmit} hideRequiredMark>
+            <FormItem label="邮箱">
+              {getFieldDecorator('email', {
+                rules: [
+                  { required: true, message: 'Please input your email!' },
+                ],
+              })(<Input />)}
+            </FormItem>
+            <FormItem label="昵称">
+              {getFieldDecorator('name', {
+                rules: [
+                  { required: true, message: 'Please input your nick name!' },
+                ],
+              })(<Input />)}
+            </FormItem>
+            <FormItem label="个人简介">
+              {getFieldDecorator('profile', {
+                rules: [
+                  { required: true, message: 'Please input personal profile!' },
+                ],
+              })(<Input.TextArea rows={4} />)}
+            </FormItem>
+            <FormItem label="国家/地区">
+              {getFieldDecorator('country', {
+                rules: [
+                  { required: true, message: 'Please input your country!' },
+                ],
+              })(
+                <Select style={{ width: 220 }}>
+                  <Option value="China">中国</Option>
+                  <Option value="USA">美国</Option>
+                  <Option value="France">法国</Option>
+                  <Option value="Russian">俄罗斯</Option>
+                  <Option value="UK">英国</Option>
+                </Select>,
+              )}
+            </FormItem>
+            <FormItem label="所在省市">
+              {getFieldDecorator('geographic', {
+                rules: [
+                  {
+                    required: true,
+                    message: 'Please input your geographic info!',
+                  },
+                  {
+                    validator: validatorGeographic,
+                  },
+                ],
+              })(<GeographicView />)}
+            </FormItem>
+            <FormItem label="街道地址">
+              {getFieldDecorator('address', {
+                rules: [
+                  { required: true, message: 'Please input your address!' },
+                ],
+              })(<Input />)}
+            </FormItem>
+            <FormItem label="联系电话">
+              {getFieldDecorator('phone', {
+                rules: [
+                  { required: true, message: 'Please input your phone!' },
+                  { validator: validatorPhone },
+                ],
+              })(<PhoneView />)}
+            </FormItem>
+            <Button type="primary">更新信息</Button>
+          </Form>
+        </div>
+        <div className={styles.right}>
+          <AvatarView avatar={this.getAvatarURL()} />
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/src/routes/Userinfo/BaseView.less b/src/routes/Userinfo/BaseView.less
new file mode 100644
index 00000000..78a5bba5
--- /dev/null
+++ b/src/routes/Userinfo/BaseView.less
@@ -0,0 +1,33 @@
+@import '~antd/lib/style/themes/default.less';
+
+.baseView {
+  display: flex;
+  .left {
+    width: 448px;
+  }
+  .right {
+    flex: 1;
+    padding-left: 104px;
+    .avatar_title {
+      height: 22px;
+      width: 28px;
+      font-size: 14px;
+      color: rgba(0, 0, 0, 0.85);
+      line-height: 22px;
+      margin-bottom: 8px;
+    }
+    .avatar {
+      width: 144px;
+      height: 144px;
+      margin-bottom: 12px;
+      overflow: hidden;
+      img {
+        width: 100%;
+      }
+    }
+    .button_view {
+      width: 144px;
+      text-align: center;
+    }
+  }
+}
diff --git a/src/routes/Userinfo/GeographicView.js b/src/routes/Userinfo/GeographicView.js
new file mode 100644
index 00000000..15be9314
--- /dev/null
+++ b/src/routes/Userinfo/GeographicView.js
@@ -0,0 +1,103 @@
+import React, { PureComponent } from 'react';
+import { Select, Spin } from 'antd';
+import { connect } from 'dva';
+
+const { Option } = Select;
+
+const nullSlectItem = {
+  label: '',
+  key: '',
+};
+
+@connect(({ geographic }) => {
+  const { province, isLoading, city } = geographic;
+  return {
+    province,
+    city,
+    isLoading,
+  };
+})
+export default class ProvinceSelect extends PureComponent {
+  componentDidMount = () => {
+    this.props.dispatch({
+      type: 'geographic/fetchProvince',
+    });
+  };
+  getProvinceOption() {
+    return this.getOption(this.props.province);
+  }
+  getCityOption = () => {
+    return this.getOption(this.props.city);
+  };
+  getOption = (list) => {
+    if (!list || list.length < 1) {
+      return (
+        <Option key={0} value={0}>
+          没有找到选项
+        </Option>
+      );
+    }
+    return list.map((item) => {
+      return (
+        <Option key={item.id} value={item.id}>
+          {item.name}
+        </Option>
+      );
+    });
+  };
+  selectProvinceItem = (item) => {
+    this.props.dispatch({
+      type: 'geographic/fetchCity',
+      payload: item.key,
+    });
+    this.props.onChange({
+      province: item,
+      city: nullSlectItem,
+    });
+  };
+  selectCityItem = (item) => {
+    this.props.onChange({
+      province: this.props.value.province,
+      city: item,
+    });
+  };
+  conversionObject() {
+    const { value } = this.props;
+    if (!value) {
+      return {
+        province: nullSlectItem,
+        city: nullSlectItem,
+      };
+    }
+    const { province, city } = value;
+    return {
+      province: province || nullSlectItem,
+      city: city || nullSlectItem,
+    };
+  }
+  render() {
+    const { province, city } = this.conversionObject();
+    return (
+      <Spin spinning={this.props.isLoading}>
+        <Select
+          value={province}
+          labelInValue
+          showSearch
+          onSelect={this.selectProvinceItem}
+          style={{ width: 220, marginRight: 8 }}
+        >
+          {this.getProvinceOption()}
+        </Select>
+        <Select
+          value={city}
+          labelInValue
+          showSearch
+          onSelect={this.selectCityItem}
+          style={{ width: 220 }}
+        >
+          {this.getCityOption()}
+        </Select>
+      </Spin>
+    );
+  }
+}
diff --git a/src/routes/Userinfo/Info.js b/src/routes/Userinfo/Info.js
new file mode 100644
index 00000000..a978ecd5
--- /dev/null
+++ b/src/routes/Userinfo/Info.js
@@ -0,0 +1,78 @@
+import React, { PureComponent } from 'react';
+import { connect } from 'dva';
+import { Route, routerRedux, Switch, Redirect } from 'dva/router';
+import { Menu } from 'antd';
+import styles from './Info.less';
+import { getRoutes } from '../../utils/utils';
+
+const { Item } = Menu;
+
+const menuMap = {
+  base: '基本设置',
+  safe: '安全设置',
+  account: '账号绑定',
+  message: '新消息通知',
+};
+
+@connect(({ user }) => ({
+  currentUser: user.currentUser,
+}))
+export default class Info extends PureComponent {
+  constructor(props) {
+    super(props);
+    const { match, location } = props;
+    let key = location.pathname.replace(`${match.path}/`, '');
+    key = menuMap[key] ? key : 'base';
+    this.state = {
+      selectKey: key,
+    };
+  }
+  getmenu = () => {
+    return Object.keys(menuMap).map(item => <Item key={item}>{menuMap[item]}</Item>);
+  };
+  getRightTitle = () => {
+    return menuMap[this.state.selectKey];
+  };
+  selectKey = ({ key }) => {
+    this.props.dispatch(routerRedux.push(`/userinfo/${key}`));
+    this.setState({
+      selectKey: key,
+    });
+  };
+  render() {
+    const { match, routerData, currentUser } = this.props;
+    if (!currentUser.userid) {
+      return '';
+    }
+    return (
+      <div className={styles.main}>
+        <div className={styles.leftmenu}>
+          <Menu
+            mode="inline"
+            selectedKeys={[this.state.selectKey]}
+            onClick={this.selectKey}
+          >
+            {this.getmenu()}
+          </Menu>
+        </div>
+        <div className={styles.right}>
+          <div className={styles.title}>{this.getRightTitle()}</div>
+          <Switch>
+            {
+              getRoutes(match.path, routerData).map(item => (
+                <Route
+                  key={item.key}
+                  path={item.path}
+                  render={props => <item.component {...props} currentUser={currentUser} />}
+                  exact={item.exact}
+                />
+              ))
+            }
+            <Redirect exact from="/userinfo" to="/userinfo/base" />
+            <Redirect to="/exception/404" />
+          </Switch>
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/src/routes/Userinfo/Info.less b/src/routes/Userinfo/Info.less
new file mode 100644
index 00000000..6804a44f
--- /dev/null
+++ b/src/routes/Userinfo/Info.less
@@ -0,0 +1,73 @@
+@import '~antd/lib/style/themes/default.less';
+
+.main {
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+  display: flex;
+  padding-top: 15px;
+  padding-bottom: 15px;
+  .leftmenu {
+    width: 224px;
+    border-right: 1px solid #e8e8e8;
+    :global {
+      .ant-menu-inline {
+        border: none;
+      }
+    }
+  }
+  .right {
+    flex: 1;
+    padding-left: 40px;
+    padding-right: 40px;
+    padding-top: 9px;
+    padding-bottom: 9px;
+    .title {
+      font-size: 20px;
+      color: rgba(0, 0, 0, 0.85);
+      line-height: 28px;
+      width: 100px;
+      height: 28px;
+      font-weight: bold;
+      margin-bottom: 24px;
+    }
+  }
+}
+:global {
+  .ant-list-item-meta {
+    // 账号绑定图标
+    .taobao {
+      color: #ff4000;
+      display: block;
+      font-size: 48px;
+      line-height: 48px;
+      border-radius: 4px;
+    }
+    .dingding {
+      background-color: #2eabff;
+      color: #fff;
+      font-size: 32px;
+      line-height: 32px;
+      padding: 6px;
+      margin: 2px;
+      border-radius: 4px;
+    }
+    .alipay {
+      color: #2eabff;
+      font-size: 48px;
+      line-height: 48px;
+      border-radius: 4px;
+    }
+  }
+
+  // 密码强度
+  font.strong {
+    color: #52c41a;
+  }
+  font.medium {
+    color: yellow;
+  }
+  font.weak {
+    color: red;
+  }
+}
diff --git a/src/routes/Userinfo/MessageView.js b/src/routes/Userinfo/MessageView.js
new file mode 100644
index 00000000..54f23295
--- /dev/null
+++ b/src/routes/Userinfo/MessageView.js
@@ -0,0 +1,49 @@
+import React, { Component, Fragment } from 'react';
+import { Switch, List } from 'antd';
+
+const Action = <Switch defaultChecked />;
+
+export default class MessageView extends Component {
+  getData = () => {
+    return [
+      {
+        title: '账户密码',
+        description: '其他用户的消息将以站内信的形式通知',
+        actions: [Action],
+      },
+      {
+        title: '消息通知',
+        description: '已绑定手机：138****8293',
+        actions: [Action],
+      },
+      {
+        title: '系统消息',
+        description: '系统消息将以站内信的形式通知',
+        actions: [Action],
+      },
+      {
+        title: '待办通知',
+        description: '待办事项将以站内信的形式通知',
+        actions: [Action],
+      },
+    ];
+  };
+  render() {
+    return (
+      <Fragment>
+        <List
+          itemLayout="horizontal"
+          dataSource={this.getData()}
+          renderItem={item => (
+            <List.Item actions={item.actions}>
+              <List.Item.Meta
+                title={item.title}
+                description={item.description}
+              />
+            </List.Item>
+          )}
+        />
+      </Fragment>
+    );
+  }
+}
diff --git a/src/routes/Userinfo/PhoneView.js b/src/routes/Userinfo/PhoneView.js
new file mode 100644
index 00000000..5e5a920a
--- /dev/null
+++ b/src/routes/Userinfo/PhoneView.js
@@ -0,0 +1,32 @@
+import React, { Fragment, PureComponent } from 'react';
+import { Input } from 'antd';
+
+class PhoneView extends PureComponent {
+  render() {
+    const { value, onChange } = this.props;
+    let values = ['', ''];
+    if (value) {
+      values = value.split('-');
+    }
+    return (
+      <Fragment>
+        <Input
+          value={values[0]}
+          onChange={(e) => {
+            onChange(`${e.target.value}-${values[1]}`);
+          }}
+          style={{ width: 128, marginRight: 8 }}
+        />
+        <Input
+          onChange={(e) => {
+            onChange(`${values[0]}-${e.target.value}`);
+          }}
+          value={values[1]}
+          style={{ width: 312 }}
+        />
+      </Fragment>
+    );
+  }
+}
+
+export default PhoneView;
diff --git a/src/routes/Userinfo/SafeView.js b/src/routes/Userinfo/SafeView.js
new file mode 100644
index 00000000..332e033a
--- /dev/null
+++ b/src/routes/Userinfo/SafeView.js
@@ -0,0 +1,60 @@
+import React, { Component, Fragment } from 'react';
+import { List } from 'antd';
+
+const passwordStrength = {
+  strong: <font className="strong">强</font>,
+  medium: <font className="medium">中文</font>,
+  weak: <font className="weak">弱</font>,
+};
+
+export default class SafeView extends Component {
+  getData = () => {
+    return [
+      {
+        title: '账户密码',
+        description: (
+          <Fragment> 当前密码强度：{passwordStrength.strong}</Fragment>
+        ),
+        actions: [<a>修改</a>],
+      },
+      {
+        title: '密保手机',
+        description: '已绑定手机：138****8293',
+        actions: [<a>修改</a>],
+      },
+      {
+        title: '密保问题',
+        description: '未设置密保问题，密保问题可有效保护账户安全',
+        actions: [<a>设置</a>],
+      },
+      {
+        title: '备用邮箱',
+        description: '已绑定邮箱：ant***sign.com',
+        actions: [<a>修改</a>],
+      },
+      {
+        title: 'MFA 设备',
+        description: '未绑定 MFA 设备，绑定后，可以进行二次确认',
+        actions: [<a>绑定</a>],
+      },
+    ];
+  };
+  render() {
+    return (
+      <Fragment>
+        <List
+          itemLayout="horizontal"
+          dataSource={this.getData()}
+          renderItem={item => (
+            <List.Item actions={item.actions}>
+              <List.Item.Meta
+                title={item.title}
+                description={item.description}
+              />
+            </List.Item>
+          )}
+        />
+      </Fragment>
+    );
+  }
+}
diff --git a/src/services/geographic.js b/src/services/geographic.js
new file mode 100644
index 00000000..570a36e0
--- /dev/null
+++ b/src/services/geographic.js
@@ -0,0 +1,9 @@
+import request from '../utils/request';
+
+export async function queryProvince() {
+  return request('/api/geographic/province');
+}
+
+export async function queryCity(province) {
+  return request(`/api/geographic/city/${province}`);
+}

From 2183e98a5a886fc04c4ab54dd731b6e589714113 Mon Sep 17 00:00:00 2001
From: jim <wasd2144@hotmail.com>
Date: Fri, 9 Feb 2018 14:39:34 +0800
Subject: [PATCH 15/25] modify review style

---
 package.json                      |  2 +-
 src/routes/Userinfo/BaseView.less |  1 -
 src/routes/Userinfo/Info.less     | 10 ++++------
 3 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index 51bf8abe..09e944ec 100755
--- a/package.json
+++ b/package.json
@@ -22,7 +22,7 @@
   "dependencies": {
     "@antv/data-set": "^0.8.0",
     "@babel/polyfill": "^7.0.0-beta.36",
-    "antd": "^3.1.0",
+    "antd": "^3.2.0",
     "babel-runtime": "^6.9.2",
     "bizcharts": "^3.1.3-beta.1",
     "bizcharts-plugin-slider": "^2.0.1",
diff --git a/src/routes/Userinfo/BaseView.less b/src/routes/Userinfo/BaseView.less
index 78a5bba5..e8e3ab1d 100644
--- a/src/routes/Userinfo/BaseView.less
+++ b/src/routes/Userinfo/BaseView.less
@@ -10,7 +10,6 @@
     padding-left: 104px;
     .avatar_title {
       height: 22px;
-      width: 28px;
       font-size: 14px;
       color: rgba(0, 0, 0, 0.85);
       line-height: 22px;
diff --git a/src/routes/Userinfo/Info.less b/src/routes/Userinfo/Info.less
index 6804a44f..b419400e 100644
--- a/src/routes/Userinfo/Info.less
+++ b/src/routes/Userinfo/Info.less
@@ -5,8 +5,8 @@
   height: 100%;
   background-color: #fff;
   display: flex;
-  padding-top: 15px;
-  padding-bottom: 15px;
+  padding-top: 16px;
+  padding-bottom: 16px;
   .leftmenu {
     width: 224px;
     border-right: 1px solid #e8e8e8;
@@ -20,14 +20,12 @@
     flex: 1;
     padding-left: 40px;
     padding-right: 40px;
-    padding-top: 9px;
-    padding-bottom: 9px;
+    padding-top: 8px;
+    padding-bottom: 8px;
     .title {
       font-size: 20px;
       color: rgba(0, 0, 0, 0.85);
       line-height: 28px;
-      width: 100px;
-      height: 28px;
       font-weight: bold;
       margin-bottom: 24px;
     }

From 8b83a6f527f05c22273574d005733675088a5a46 Mon Sep 17 00:00:00 2001
From: jim <wasd2144@hotmail.com>
Date: Fri, 9 Feb 2018 17:16:07 +0800
Subject: [PATCH 16/25] responsive support for user information interface

---
 src/routes/Userinfo/BaseView.js         | 33 +++++++++++++++++++++++--
 src/routes/Userinfo/BaseView.less       | 12 ++++++++-
 src/routes/Userinfo/GeographicView.js   |  9 ++++---
 src/routes/Userinfo/GeographicView.less | 17 +++++++++++++
 src/routes/Userinfo/Info.js             |  2 +-
 src/routes/Userinfo/Info.less           | 14 +++++++++++
 src/routes/Userinfo/PhoneView.js        |  5 ++--
 src/routes/Userinfo/PhoneView.less      | 20 +++++++++++++++
 8 files changed, 102 insertions(+), 10 deletions(-)
 create mode 100644 src/routes/Userinfo/GeographicView.less
 create mode 100644 src/routes/Userinfo/PhoneView.less

diff --git a/src/routes/Userinfo/BaseView.js b/src/routes/Userinfo/BaseView.js
index 960e18c6..b73275c8 100644
--- a/src/routes/Userinfo/BaseView.js
+++ b/src/routes/Userinfo/BaseView.js
@@ -1,5 +1,7 @@
 import React, { Component, Fragment } from 'react';
 import { Form, Input, Upload, Select, Button } from 'antd';
+import Debounce from 'lodash-decorators/debounce';
+import Bind from 'lodash-decorators/bind';
 import styles from './BaseView.less';
 import GeographicView from './GeographicView';
 import PhoneView from './PhoneView';
@@ -46,8 +48,16 @@ const validatorPhone = (rule, value, callback) => {
 
 @Form.create()
 export default class BaseView extends Component {
+  state = {
+    md: false,
+  };
   componentDidMount() {
     this.setBaseInfo();
+    this.resize();
+    window.addEventListener('resize', this.resize);
+  }
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.resize);
   }
   setBaseInfo = () => {
     const { currentUser } = this.props;
@@ -65,10 +75,29 @@ export default class BaseView extends Component {
       'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png';
     return url;
   }
+  getViewDom = (ref) => {
+    this.view = ref;
+  };
+  @Bind()
+  @Debounce(200)
+  resize() {
+    if (this.view.offsetWidth > 696) {
+      this.setState({
+        md: false,
+      });
+      return;
+    }
+    this.setState({
+      md: true,
+    });
+  }
   render() {
     const { getFieldDecorator } = this.props.form;
     return (
-      <div className={styles.baseView}>
+      <div
+        className={`${styles.baseView} ${this.state.md ? styles.md : ''}`}
+        ref={this.getViewDom}
+      >
         <div className={styles.left}>
           <Form layout="vertical" onSubmit={this.handleSubmit} hideRequiredMark>
             <FormItem label="邮箱">
@@ -98,7 +127,7 @@ export default class BaseView extends Component {
                   { required: true, message: 'Please input your country!' },
                 ],
               })(
-                <Select style={{ width: 220 }}>
+                <Select style={{ maxWidth: 220 }}>
                   <Option value="China">中国</Option>
                   <Option value="USA">美国</Option>
                   <Option value="France">法国</Option>
diff --git a/src/routes/Userinfo/BaseView.less b/src/routes/Userinfo/BaseView.less
index e8e3ab1d..c0bc53a2 100644
--- a/src/routes/Userinfo/BaseView.less
+++ b/src/routes/Userinfo/BaseView.less
@@ -2,8 +2,18 @@
 
 .baseView {
   display: flex;
+  &.md {
+    flex-direction: column-reverse;
+    .right {
+      padding: 20px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+  }
   .left {
-    width: 448px;
+    max-width: 448px;
+    min-width: 224px;
   }
   .right {
     flex: 1;
diff --git a/src/routes/Userinfo/GeographicView.js b/src/routes/Userinfo/GeographicView.js
index 15be9314..345e6bb2 100644
--- a/src/routes/Userinfo/GeographicView.js
+++ b/src/routes/Userinfo/GeographicView.js
@@ -1,6 +1,7 @@
 import React, { PureComponent } from 'react';
 import { Select, Spin } from 'antd';
 import { connect } from 'dva';
+import styles from './GeographicView.less';
 
 const { Option } = Select;
 
@@ -17,7 +18,7 @@ const nullSlectItem = {
     isLoading,
   };
 })
-export default class ProvinceSelect extends PureComponent {
+export default class GeographicView extends PureComponent {
   componentDidMount = () => {
     this.props.dispatch({
       type: 'geographic/fetchProvince',
@@ -78,22 +79,22 @@ export default class ProvinceSelect extends PureComponent {
   render() {
     const { province, city } = this.conversionObject();
     return (
-      <Spin spinning={this.props.isLoading}>
+      <Spin spinning={this.props.isLoading} wrapperClassName={styles.row}>
         <Select
+          className={styles.item}
           value={province}
           labelInValue
           showSearch
           onSelect={this.selectProvinceItem}
-          style={{ width: 220, marginRight: 8 }}
         >
           {this.getProvinceOption()}
         </Select>
         <Select
+          className={styles.item}
           value={city}
           labelInValue
           showSearch
           onSelect={this.selectCityItem}
-          style={{ width: 220 }}
         >
           {this.getCityOption()}
         </Select>
diff --git a/src/routes/Userinfo/GeographicView.less b/src/routes/Userinfo/GeographicView.less
new file mode 100644
index 00000000..046d9345
--- /dev/null
+++ b/src/routes/Userinfo/GeographicView.less
@@ -0,0 +1,17 @@
+@import '~antd/lib/style/themes/default.less';
+
+.row {
+  .item {
+    width: 220px;
+  }
+  .item:first-child {
+    margin-right: 8px;
+  }
+}
+
+@media screen and (max-width: @screen-sm) {
+  .item:first-child {
+    margin: 0;
+    margin-bottom: 8px;
+  }
+}
diff --git a/src/routes/Userinfo/Info.js b/src/routes/Userinfo/Info.js
index a978ecd5..68683b9e 100644
--- a/src/routes/Userinfo/Info.js
+++ b/src/routes/Userinfo/Info.js
@@ -48,7 +48,7 @@ export default class Info extends PureComponent {
       <div className={styles.main}>
         <div className={styles.leftmenu}>
           <Menu
-            mode="inline"
+            mode={window.innerWidth < 769 ? 'horizontal' : 'inline'}
             selectedKeys={[this.state.selectKey]}
             onClick={this.selectKey}
           >
diff --git a/src/routes/Userinfo/Info.less b/src/routes/Userinfo/Info.less
index b419400e..d0f245e1 100644
--- a/src/routes/Userinfo/Info.less
+++ b/src/routes/Userinfo/Info.less
@@ -7,6 +7,7 @@
   display: flex;
   padding-top: 16px;
   padding-bottom: 16px;
+  overflow: auto;
   .leftmenu {
     width: 224px;
     border-right: 1px solid #e8e8e8;
@@ -69,3 +70,16 @@
     color: red;
   }
 }
+
+@media screen and (max-width: @screen-md) {
+  .main {
+    flex-direction: column;
+    .leftmenu {
+      width: 100%;
+      border: none;
+    }
+    .right {
+      padding: 40px;
+    }
+  }
+}
diff --git a/src/routes/Userinfo/PhoneView.js b/src/routes/Userinfo/PhoneView.js
index 5e5a920a..75430f30 100644
--- a/src/routes/Userinfo/PhoneView.js
+++ b/src/routes/Userinfo/PhoneView.js
@@ -1,5 +1,6 @@
 import React, { Fragment, PureComponent } from 'react';
 import { Input } from 'antd';
+import styles from './PhoneView.less';
 
 class PhoneView extends PureComponent {
   render() {
@@ -11,18 +12,18 @@ class PhoneView extends PureComponent {
     return (
       <Fragment>
         <Input
+          className={styles.area_code}
           value={values[0]}
           onChange={(e) => {
             onChange(`${e.target.value}-${values[1]}`);
           }}
-          style={{ width: 128, marginRight: 8 }}
         />
         <Input
+          className={styles.phone_number}
           onChange={(e) => {
             onChange(`${values[0]}-${e.target.value}`);
           }}
           value={values[1]}
-          style={{ width: 312 }}
         />
       </Fragment>
     );
diff --git a/src/routes/Userinfo/PhoneView.less b/src/routes/Userinfo/PhoneView.less
new file mode 100644
index 00000000..bc1e3a43
--- /dev/null
+++ b/src/routes/Userinfo/PhoneView.less
@@ -0,0 +1,20 @@
+@import '~antd/lib/style/themes/default.less';
+
+.area_code {
+  width: 128px;
+  margin-right: 8px;
+}
+.phone_number {
+  width: 312px;
+}
+
+@media screen and (max-width: @screen-sm) {
+  .area_code {
+    width: 100%;
+    margin: 0;
+    margin-bottom: 8px;
+  }
+  .phone_number {
+    width: 100%;
+  }
+}

From 9445abd7709a0d69a390ec46aa7887a9246ecafe Mon Sep 17 00:00:00 2001
From: jim <wasd2144@hotmail.com>
Date: Fri, 9 Feb 2018 18:28:57 +0800
Subject: [PATCH 17/25] Enhanced meun response

---
 src/routes/Userinfo/Info.js | 53 +++++++++++++++++++++++++++----------
 1 file changed, 39 insertions(+), 14 deletions(-)

diff --git a/src/routes/Userinfo/Info.js b/src/routes/Userinfo/Info.js
index 68683b9e..17a7852f 100644
--- a/src/routes/Userinfo/Info.js
+++ b/src/routes/Userinfo/Info.js
@@ -1,7 +1,9 @@
-import React, { PureComponent } from 'react';
+import React, { Component } from 'react';
 import { connect } from 'dva';
 import { Route, routerRedux, Switch, Redirect } from 'dva/router';
 import { Menu } from 'antd';
+import Debounce from 'lodash-decorators/debounce';
+import Bind from 'lodash-decorators/bind';
 import styles from './Info.less';
 import { getRoutes } from '../../utils/utils';
 
@@ -17,7 +19,7 @@ const menuMap = {
 @connect(({ user }) => ({
   currentUser: user.currentUser,
 }))
-export default class Info extends PureComponent {
+export default class Info extends Component {
   constructor(props) {
     super(props);
     const { match, location } = props;
@@ -25,10 +27,20 @@ export default class Info extends PureComponent {
     key = menuMap[key] ? key : 'base';
     this.state = {
       selectKey: key,
+      meunMode: 'inline',
     };
   }
+  componentDidMount() {
+    this.resize();
+    window.addEventListener('resize', this.resize);
+  }
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.resize);
+  }
   getmenu = () => {
-    return Object.keys(menuMap).map(item => <Item key={item}>{menuMap[item]}</Item>);
+    return Object.keys(menuMap).map(item => (
+      <Item key={item}>{menuMap[item]}</Item>
+    ));
   };
   getRightTitle = () => {
     return menuMap[this.state.selectKey];
@@ -39,6 +51,19 @@ export default class Info extends PureComponent {
       selectKey: key,
     });
   };
+  @Bind()
+  @Debounce(200)
+  resize() {
+    if (window.innerWidth > 768 || window.innerWidth < 454) {
+      this.setState({
+        meunMode: 'inline',
+      });
+      return;
+    }
+    this.setState({
+      meunMode: 'horizontal',
+    });
+  }
   render() {
     const { match, routerData, currentUser } = this.props;
     if (!currentUser.userid) {
@@ -48,7 +73,7 @@ export default class Info extends PureComponent {
       <div className={styles.main}>
         <div className={styles.leftmenu}>
           <Menu
-            mode={window.innerWidth < 769 ? 'horizontal' : 'inline'}
+            mode={this.state.meunMode}
             selectedKeys={[this.state.selectKey]}
             onClick={this.selectKey}
           >
@@ -58,16 +83,16 @@ export default class Info extends PureComponent {
         <div className={styles.right}>
           <div className={styles.title}>{this.getRightTitle()}</div>
           <Switch>
-            {
-              getRoutes(match.path, routerData).map(item => (
-                <Route
-                  key={item.key}
-                  path={item.path}
-                  render={props => <item.component {...props} currentUser={currentUser} />}
-                  exact={item.exact}
-                />
-              ))
-            }
+            {getRoutes(match.path, routerData).map(item => (
+              <Route
+                key={item.key}
+                path={item.path}
+                render={props => (
+                  <item.component {...props} currentUser={currentUser} />
+                )}
+                exact={item.exact}
+              />
+            ))}
             <Redirect exact from="/userinfo" to="/userinfo/base" />
             <Redirect to="/exception/404" />
           </Switch>

From 80a585cf43d69c5f87c5893948b06f97b53f1d43 Mon Sep 17 00:00:00 2001
From: jim <wasd2144@hotmail.com>
Date: Mon, 12 Feb 2018 10:53:29 +0800
Subject: [PATCH 18/25] optimize avatar style

---
 src/routes/Userinfo/BaseView.less       | 1 +
 src/routes/Userinfo/GeographicView.less | 4 +++-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/routes/Userinfo/BaseView.less b/src/routes/Userinfo/BaseView.less
index c0bc53a2..4040393b 100644
--- a/src/routes/Userinfo/BaseView.less
+++ b/src/routes/Userinfo/BaseView.less
@@ -9,6 +9,7 @@
       display: flex;
       flex-direction: column;
       align-items: center;
+      max-width: 448px;
     }
   }
   .left {
diff --git a/src/routes/Userinfo/GeographicView.less b/src/routes/Userinfo/GeographicView.less
index 046d9345..cfdf8135 100644
--- a/src/routes/Userinfo/GeographicView.less
+++ b/src/routes/Userinfo/GeographicView.less
@@ -2,10 +2,12 @@
 
 .row {
   .item {
-    width: 220px;
+    max-width: 220px;
+    width: 50%;
   }
   .item:first-child {
     margin-right: 8px;
+    width: calc(50% - 8px);
   }
 }
 

From 972719ae828e36f3444d0cfb407c79816aaeeb47 Mon Sep 17 00:00:00 2001
From: jim <wasd2144@hotmail.com>
Date: Mon, 12 Feb 2018 11:12:56 +0800
Subject: [PATCH 19/25] optimize phoneview style

---
 src/routes/Userinfo/PhoneView.less | 17 ++++-------------
 1 file changed, 4 insertions(+), 13 deletions(-)

diff --git a/src/routes/Userinfo/PhoneView.less b/src/routes/Userinfo/PhoneView.less
index bc1e3a43..6fdf84df 100644
--- a/src/routes/Userinfo/PhoneView.less
+++ b/src/routes/Userinfo/PhoneView.less
@@ -1,20 +1,11 @@
 @import '~antd/lib/style/themes/default.less';
 
 .area_code {
-  width: 128px;
+  max-width: 128px;
   margin-right: 8px;
+  width: 30%;
 }
 .phone_number {
-  width: 312px;
-}
-
-@media screen and (max-width: @screen-sm) {
-  .area_code {
-    width: 100%;
-    margin: 0;
-    margin-bottom: 8px;
-  }
-  .phone_number {
-    width: 100%;
-  }
+  max-width: 312px;
+  width: ~'calc( 70% - 8px)';
 }

From 52b64ba381a4594f612f7f3b7d6e164547107809 Mon Sep 17 00:00:00 2001
From: jim <wasd2144@hotmail.com>
Date: Mon, 12 Feb 2018 11:16:06 +0800
Subject: [PATCH 20/25] optimize GeographicView style

---
 src/routes/Userinfo/GeographicView.less | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/Userinfo/GeographicView.less b/src/routes/Userinfo/GeographicView.less
index cfdf8135..22e35a29 100644
--- a/src/routes/Userinfo/GeographicView.less
+++ b/src/routes/Userinfo/GeographicView.less
@@ -7,7 +7,7 @@
   }
   .item:first-child {
     margin-right: 8px;
-    width: calc(50% - 8px);
+    width: ~'calc(50% - 8px)';
   }
 }
 

From 7c1d6a9962693c0143f85540f581bc184004ff9f Mon Sep 17 00:00:00 2001
From: jim <wasd2144@hotmail.com>
Date: Mon, 12 Feb 2018 14:19:04 +0800
Subject: [PATCH 21/25] fix city unload error

---
 src/routes/Userinfo/GeographicView.js | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/routes/Userinfo/GeographicView.js b/src/routes/Userinfo/GeographicView.js
index 345e6bb2..625cb6ff 100644
--- a/src/routes/Userinfo/GeographicView.js
+++ b/src/routes/Userinfo/GeographicView.js
@@ -24,6 +24,14 @@ export default class GeographicView extends PureComponent {
       type: 'geographic/fetchProvince',
     });
   };
+  componentDidUpdate(props) {
+    if (!props.value && !!this.props.value && !!this.props.value.province) {
+      this.props.dispatch({
+        type: 'geographic/fetchCity',
+        payload: this.props.value.province.key,
+      });
+    }
+  }
   getProvinceOption() {
     return this.getOption(this.props.province);
   }

From 95e9968bdd854f09e6ba9f50ac37b2fc25e034d4 Mon Sep 17 00:00:00 2001
From: jim <wasd2144@hotmail.com>
Date: Mon, 12 Feb 2018 14:33:39 +0800
Subject: [PATCH 22/25] fix style warning

---
 src/routes/Userinfo/BaseView.less  | 1 +
 src/routes/Userinfo/Info.less      | 2 +-
 src/routes/Userinfo/MessageView.js | 7 +------
 3 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/src/routes/Userinfo/BaseView.less b/src/routes/Userinfo/BaseView.less
index 4040393b..81566c6d 100644
--- a/src/routes/Userinfo/BaseView.less
+++ b/src/routes/Userinfo/BaseView.less
@@ -2,6 +2,7 @@
 
 .baseView {
   display: flex;
+  margin-top: 12px;
   &.md {
     flex-direction: column-reverse;
     .right {
diff --git a/src/routes/Userinfo/Info.less b/src/routes/Userinfo/Info.less
index d0f245e1..60b967aa 100644
--- a/src/routes/Userinfo/Info.less
+++ b/src/routes/Userinfo/Info.less
@@ -28,7 +28,7 @@
       color: rgba(0, 0, 0, 0.85);
       line-height: 28px;
       font-weight: bold;
-      margin-bottom: 24px;
+      margin-bottom: 12px;
     }
   }
 }
diff --git a/src/routes/Userinfo/MessageView.js b/src/routes/Userinfo/MessageView.js
index 54f23295..d2f3f986 100644
--- a/src/routes/Userinfo/MessageView.js
+++ b/src/routes/Userinfo/MessageView.js
@@ -1,7 +1,7 @@
 import React, { Component, Fragment } from 'react';
 import { Switch, List } from 'antd';
 
-const Action = <Switch defaultChecked />;
+const Action = <Switch checkedChildren="开" unCheckedChildren="关" defaultChecked />;
 
 export default class MessageView extends Component {
   getData = () => {
@@ -11,11 +11,6 @@ export default class MessageView extends Component {
         description: '其他用户的消息将以站内信的形式通知',
         actions: [Action],
       },
-      {
-        title: '消息通知',
-        description: '已绑定手机：138****8293',
-        actions: [Action],
-      },
       {
         title: '系统消息',
         description: '系统消息将以站内信的形式通知',

From 97547e87a334ac839ae0525ac5d064e497df43d7 Mon Sep 17 00:00:00 2001
From: ddcat1115 <ddcat1115@gmail.com>
Date: Tue, 13 Feb 2018 17:54:32 +0800
Subject: [PATCH 23/25] use less variables & remove some responsive setting

---
 src/routes/Userinfo/BaseView.js    | 25 +------------------------
 src/routes/Userinfo/BaseView.less  | 29 +++++++++++++++++------------
 src/routes/Userinfo/Info.js        | 25 +------------------------
 src/routes/Userinfo/Info.less      | 20 ++++++++++----------
 src/routes/Userinfo/PhoneView.less |  2 +-
 5 files changed, 30 insertions(+), 71 deletions(-)

diff --git a/src/routes/Userinfo/BaseView.js b/src/routes/Userinfo/BaseView.js
index b73275c8..1fecd6df 100644
--- a/src/routes/Userinfo/BaseView.js
+++ b/src/routes/Userinfo/BaseView.js
@@ -1,7 +1,5 @@
 import React, { Component, Fragment } from 'react';
 import { Form, Input, Upload, Select, Button } from 'antd';
-import Debounce from 'lodash-decorators/debounce';
-import Bind from 'lodash-decorators/bind';
 import styles from './BaseView.less';
 import GeographicView from './GeographicView';
 import PhoneView from './PhoneView';
@@ -48,16 +46,8 @@ const validatorPhone = (rule, value, callback) => {
 
 @Form.create()
 export default class BaseView extends Component {
-  state = {
-    md: false,
-  };
   componentDidMount() {
     this.setBaseInfo();
-    this.resize();
-    window.addEventListener('resize', this.resize);
-  }
-  componentWillUnmount() {
-    window.removeEventListener('resize', this.resize);
   }
   setBaseInfo = () => {
     const { currentUser } = this.props;
@@ -78,24 +68,11 @@ export default class BaseView extends Component {
   getViewDom = (ref) => {
     this.view = ref;
   };
-  @Bind()
-  @Debounce(200)
-  resize() {
-    if (this.view.offsetWidth > 696) {
-      this.setState({
-        md: false,
-      });
-      return;
-    }
-    this.setState({
-      md: true,
-    });
-  }
   render() {
     const { getFieldDecorator } = this.props.form;
     return (
       <div
-        className={`${styles.baseView} ${this.state.md ? styles.md : ''}`}
+        className={styles.baseView}
         ref={this.getViewDom}
       >
         <div className={styles.left}>
diff --git a/src/routes/Userinfo/BaseView.less b/src/routes/Userinfo/BaseView.less
index 81566c6d..f82aba56 100644
--- a/src/routes/Userinfo/BaseView.less
+++ b/src/routes/Userinfo/BaseView.less
@@ -3,16 +3,7 @@
 .baseView {
   display: flex;
   margin-top: 12px;
-  &.md {
-    flex-direction: column-reverse;
-    .right {
-      padding: 20px;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      max-width: 448px;
-    }
-  }
+
   .left {
     max-width: 448px;
     min-width: 224px;
@@ -22,8 +13,8 @@
     padding-left: 104px;
     .avatar_title {
       height: 22px;
-      font-size: 14px;
-      color: rgba(0, 0, 0, 0.85);
+      font-size: @font-size-base;
+      color: @heading-color;
       line-height: 22px;
       margin-bottom: 8px;
     }
@@ -42,3 +33,17 @@
     }
   }
 }
+
+@media screen and (max-width: @screen-xl) {
+  .baseView {
+    flex-direction: column-reverse;
+
+    .right {
+      padding: 20px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      max-width: 448px;
+    }
+  }
+}
diff --git a/src/routes/Userinfo/Info.js b/src/routes/Userinfo/Info.js
index 17a7852f..135b337d 100644
--- a/src/routes/Userinfo/Info.js
+++ b/src/routes/Userinfo/Info.js
@@ -2,8 +2,6 @@ import React, { Component } from 'react';
 import { connect } from 'dva';
 import { Route, routerRedux, Switch, Redirect } from 'dva/router';
 import { Menu } from 'antd';
-import Debounce from 'lodash-decorators/debounce';
-import Bind from 'lodash-decorators/bind';
 import styles from './Info.less';
 import { getRoutes } from '../../utils/utils';
 
@@ -27,16 +25,8 @@ export default class Info extends Component {
     key = menuMap[key] ? key : 'base';
     this.state = {
       selectKey: key,
-      meunMode: 'inline',
     };
   }
-  componentDidMount() {
-    this.resize();
-    window.addEventListener('resize', this.resize);
-  }
-  componentWillUnmount() {
-    window.removeEventListener('resize', this.resize);
-  }
   getmenu = () => {
     return Object.keys(menuMap).map(item => (
       <Item key={item}>{menuMap[item]}</Item>
@@ -51,19 +41,6 @@ export default class Info extends Component {
       selectKey: key,
     });
   };
-  @Bind()
-  @Debounce(200)
-  resize() {
-    if (window.innerWidth > 768 || window.innerWidth < 454) {
-      this.setState({
-        meunMode: 'inline',
-      });
-      return;
-    }
-    this.setState({
-      meunMode: 'horizontal',
-    });
-  }
   render() {
     const { match, routerData, currentUser } = this.props;
     if (!currentUser.userid) {
@@ -73,7 +50,7 @@ export default class Info extends Component {
       <div className={styles.main}>
         <div className={styles.leftmenu}>
           <Menu
-            mode={this.state.meunMode}
+            mode="inline"
             selectedKeys={[this.state.selectKey]}
             onClick={this.selectKey}
           >
diff --git a/src/routes/Userinfo/Info.less b/src/routes/Userinfo/Info.less
index 60b967aa..8d24f53a 100644
--- a/src/routes/Userinfo/Info.less
+++ b/src/routes/Userinfo/Info.less
@@ -3,14 +3,14 @@
 .main {
   width: 100%;
   height: 100%;
-  background-color: #fff;
+  background-color: @body-background;
   display: flex;
   padding-top: 16px;
   padding-bottom: 16px;
   overflow: auto;
   .leftmenu {
     width: 224px;
-    border-right: 1px solid #e8e8e8;
+    border-right: @border-width-base @border-style-base @border-color-split;
     :global {
       .ant-menu-inline {
         border: none;
@@ -25,9 +25,9 @@
     padding-bottom: 8px;
     .title {
       font-size: 20px;
-      color: rgba(0, 0, 0, 0.85);
+      color: @heading-color;
       line-height: 28px;
-      font-weight: bold;
+      font-weight: 500;
       margin-bottom: 12px;
     }
   }
@@ -40,7 +40,7 @@
       display: block;
       font-size: 48px;
       line-height: 48px;
-      border-radius: 4px;
+      border-radius: @border-radius-base;
     }
     .dingding {
       background-color: #2eabff;
@@ -49,25 +49,25 @@
       line-height: 32px;
       padding: 6px;
       margin: 2px;
-      border-radius: 4px;
+      border-radius: @border-radius-base;
     }
     .alipay {
       color: #2eabff;
       font-size: 48px;
       line-height: 48px;
-      border-radius: 4px;
+      border-radius: @border-radius-base;
     }
   }
 
   // 密码强度
   font.strong {
-    color: #52c41a;
+    color: @success-color;
   }
   font.medium {
-    color: yellow;
+    color: @warning-color;
   }
   font.weak {
-    color: red;
+    color: @error-color;
   }
 }
 
diff --git a/src/routes/Userinfo/PhoneView.less b/src/routes/Userinfo/PhoneView.less
index 6fdf84df..5c85970d 100644
--- a/src/routes/Userinfo/PhoneView.less
+++ b/src/routes/Userinfo/PhoneView.less
@@ -7,5 +7,5 @@
 }
 .phone_number {
   max-width: 312px;
-  width: ~'calc( 70% - 8px)';
+  width: ~'calc(70% - 8px)';
 }

From aeda0d913e1f86650f873b898b5295284ee5a158 Mon Sep 17 00:00:00 2001
From: ddcat1115 <ddcat1115@gmail.com>
Date: Tue, 13 Feb 2018 17:53:26 +0800
Subject: [PATCH 24/25] User center (#940)

* temp save

* temp save

* user-center
---
 .roadhogrc.mock.js                   |  22 ++
 mock/api.js                          |   3 +
 src/common/router.js                 |   3 +
 src/components/GlobalHeader/index.js |   2 +-
 src/layouts/BasicLayout.js           |   4 +
 src/routes/List/Applications.js      |  13 +-
 src/routes/List/Applications.less    |   9 -
 src/routes/UserCenter.js             | 293 +++++++++++++++++++++++++++
 src/routes/UserCenter.less           |  98 +++++++++
 src/utils/utils.js                   |  28 +++
 10 files changed, 453 insertions(+), 22 deletions(-)
 create mode 100644 src/routes/UserCenter.js
 create mode 100644 src/routes/UserCenter.less

diff --git a/.roadhogrc.mock.js b/.roadhogrc.mock.js
index 4d082661..20096fce 100644
--- a/.roadhogrc.mock.js
+++ b/.roadhogrc.mock.js
@@ -29,6 +29,28 @@ const proxy = {
       userid: '00000001',
       email: 'antdesign@alipay.com',
       profile: '简单的介绍下自己',
+      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,
       country: 'China',
       geographic: {
diff --git a/mock/api.js b/mock/api.js
index 72c7ade9..e639bc6e 100644
--- a/mock/api.js
+++ b/mock/api.js
@@ -88,14 +88,17 @@ export function fakeList(count) {
         {
           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',
         },
       ],
     });
diff --git a/src/common/router.js b/src/common/router.js
index e0514c45..aca4ead7 100644
--- a/src/common/router.js
+++ b/src/common/router.js
@@ -148,6 +148,9 @@ export const getRouterData = (app) => {
     '/exception/trigger': {
       component: dynamicWrapper(app, ['error'], () => import('../routes/Exception/triggerException')),
     },
+    '/user-center': {
+      component: dynamicWrapper(app, ['list', 'user', 'project'], () => import('../routes/UserCenter')),
+    },
     '/user': {
       component: dynamicWrapper(app, [], () => import('../layouts/UserLayout')),
     },
diff --git a/src/components/GlobalHeader/index.js b/src/components/GlobalHeader/index.js
index 04413c0f..a1a5614b 100644
--- a/src/components/GlobalHeader/index.js
+++ b/src/components/GlobalHeader/index.js
@@ -57,7 +57,7 @@ export default class GlobalHeader extends PureComponent {
     } = this.props;
     const menu = (
       <Menu className={styles.menu} selectedKeys={[]} onClick={onMenuClick}>
-        <Menu.Item disabled><Icon type="user" />个人中心</Menu.Item>
+        <Menu.Item key="userCenter"><Icon type="user" />个人中心</Menu.Item>
         <Menu.Item key="userinfo"><Icon type="setting" />设置</Menu.Item>
         <Menu.Item key="triggerError"><Icon type="close-circle" />触发报错</Menu.Item>
         <Menu.Divider />
diff --git a/src/layouts/BasicLayout.js b/src/layouts/BasicLayout.js
index 8fa3ae34..324af33a 100644
--- a/src/layouts/BasicLayout.js
+++ b/src/layouts/BasicLayout.js
@@ -127,6 +127,10 @@ class BasicLayout extends React.PureComponent {
     });
   }
   handleMenuClick = ({ key }) => {
+    if (key === 'userCenter') {
+      this.props.dispatch(routerRedux.push('/user-center'));
+      return;
+    }
     if (key === 'triggerError') {
       this.props.dispatch(routerRedux.push('/exception/trigger'));
       return;
diff --git a/src/routes/List/Applications.js b/src/routes/List/Applications.js
index 83d1369f..f65f13bd 100644
--- a/src/routes/List/Applications.js
+++ b/src/routes/List/Applications.js
@@ -5,24 +5,13 @@ import { Row, Col, Form, Card, Select, Icon, Avatar, List, Tooltip, Dropdown, Me
 
 import StandardFormRow from '../../components/StandardFormRow';
 import TagSelect from '../../components/TagSelect';
+import { formatWan } from '../../utils/utils';
 
 import styles from './Applications.less';
 
 const { Option } = Select;
 const FormItem = Form.Item;
 
-const formatWan = (val) => {
-  const v = val * 1;
-  if (!v || isNaN(v)) return '';
-
-  let result = val;
-  if (val > 10000) {
-    result = Math.floor(val / 10000);
-    result = <span>{result}<em className={styles.wan}>万</em></span>;
-  }
-  return result;
-};
-
 /* eslint react/no-array-index-key: 0 */
 @Form.create()
 @connect(({ list, loading }) => ({
diff --git a/src/routes/List/Applications.less b/src/routes/List/Applications.less
index 7c7747ea..ae1ace86 100644
--- a/src/routes/List/Applications.less
+++ b/src/routes/List/Applications.less
@@ -38,12 +38,3 @@
     }
   }
 }
-
-.wan {
-  position: relative;
-  top: -2px;
-  font-size: @font-size-base;
-  font-style: normal;
-  line-height: 20px;
-  margin-left: 2px;
-}
diff --git a/src/routes/UserCenter.js b/src/routes/UserCenter.js
new file mode 100644
index 00000000..c4f3ef8c
--- /dev/null
+++ b/src/routes/UserCenter.js
@@ -0,0 +1,293 @@
+import React, { PureComponent } from 'react';
+import { connect } from 'dva';
+import moment from 'moment';
+import numeral from 'numeral';
+import { List, Card, Row, Col, Icon, Dropdown,
+  Menu, Avatar, Tag, Divider, Tooltip, Spin } from 'antd';
+import AvatarList from '../components/AvatarList';
+import { formatWan } from '../utils/utils';
+import styles from './UserCenter.less';
+import stylesArticles from './List/Articles.less';
+import stylesApplications from './List/Applications.less';
+import stylesProjects from './List/Projects.less';
+
+@connect(({ list, loading, user, project }) => ({
+  list,
+  listLoading: loading.effects['list/fetch'],
+  currentUser: user.currentUser,
+  currentUserLoading: loading.effects['user/fetchCurrent'],
+  project,
+  projectLoading: loading.effects['project/fetchNotice'],
+}))
+export default class UserCenter extends PureComponent {
+  state = {
+    key: 'article',
+  }
+
+  componentDidMount() {
+    const { dispatch } = this.props;
+    this.props.dispatch({
+      type: 'user/fetchCurrent',
+    });
+    dispatch({
+      type: 'list/fetch',
+      payload: {
+        count: 8,
+      },
+    });
+    dispatch({
+      type: 'project/fetchNotice',
+    });
+  }
+
+  onTabChange = (key) => {
+    this.setState({ key });
+  }
+
+  renderArticles = (list, loading) => {
+    const IconText = ({ type, text }) => (
+      <span>
+        <Icon type={type} style={{ marginRight: 8 }} />
+        {text}
+      </span>
+    );
+    const ListContent = ({ data: { content, updatedAt, avatar, owner, href } }) => (
+      <div className={stylesArticles.listContent}>
+        <div className={stylesArticles.description}>{content}</div>
+        <div className={stylesArticles.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>
+    );
+    return (
+      <List
+        size="large"
+        className={styles.articleList}
+        loading={loading}
+        rowKey="id"
+        itemLayout="vertical"
+        dataSource={list}
+        renderItem={item => (
+          <List.Item
+            key={item.id}
+            actions={[
+              <IconText type="star-o" text={item.star} />,
+              <IconText type="like-o" text={item.like} />,
+              <IconText type="message" text={item.message} />,
+            ]}
+          >
+            <List.Item.Meta
+              title={(
+                <a className={stylesArticles.listItemMetaTitle} href={item.href}>{item.title}</a>
+              )}
+              description={
+                <span>
+                  <Tag>Ant Design</Tag>
+                  <Tag>设计语言</Tag>
+                  <Tag>蚂蚁金服</Tag>
+                </span>
+              }
+            />
+            <ListContent data={item} />
+          </List.Item>
+        )}
+      />
+    );
+  }
+
+  renderApplications = (list, loading) => {
+    const itemMenu = (
+      <Menu>
+        <Menu.Item>
+          <a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">1st menu item</a>
+        </Menu.Item>
+        <Menu.Item>
+          <a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">2nd menu item</a>
+        </Menu.Item>
+        <Menu.Item>
+          <a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/">3d menu item</a>
+        </Menu.Item>
+      </Menu>
+    );
+    const CardInfo = ({ 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 }}
+        loading={loading}
+        dataSource={list}
+        renderItem={item => (
+          <List.Item key={item.id}>
+            <Card
+              hoverable
+              bodyStyle={{ paddingBottom: 20 }}
+              actions={[
+                <Tooltip title="下载"><Icon type="download" /></Tooltip>,
+                <Tooltip title="编辑"><Icon type="edit" /></Tooltip>,
+                <Tooltip title="分享"><Icon type="share-alt" /></Tooltip>,
+                <Dropdown overlay={itemMenu}><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>
+        )}
+      />
+    );
+  }
+
+  renderProjects = (list, loading) => {
+    return (
+      <List
+        className={stylesProjects.coverCardList}
+        rowKey="id"
+        loading={loading}
+        grid={{ gutter: 24, xxl: 3, xl: 2, lg: 2, md: 2, sm: 2, xs: 1 }}
+        dataSource={list}
+        renderItem={item => (
+          <List.Item>
+            <Card
+              className={stylesProjects.card}
+              hoverable
+              cover={<img alt={item.title} src={item.cover} height={154} />}
+            >
+              <Card.Meta
+                title={<a href="#">{item.title}</a>}
+                description={item.subDescription}
+              />
+              <div className={stylesProjects.cardItemContent}>
+                <span>{moment(item.updatedAt).fromNow()}</span>
+                <div className={stylesProjects.avatarList}>
+                  <AvatarList size="mini">
+                    {
+                      item.members.map(member => (
+                        <AvatarList.Item
+                          key={`${item.id}-avatar-${member.id}`}
+                          src={member.avatar}
+                          tips={member.name}
+                        />
+                      ))
+                    }
+                  </AvatarList>
+                </div>
+              </div>
+            </Card>
+          </List.Item>
+        )}
+      />
+    );
+  }
+
+  render() {
+    const { list: { list }, listLoading, currentUser, currentUserLoading,
+      project: { notice }, projectLoading } = this.props;
+    const operationTabList = [{
+      key: 'article',
+      tab: '文章（8）',
+    }, {
+      key: 'application',
+      tab: '应用（8）',
+    }, {
+      key: 'project',
+      tab: '项目（8）',
+    }];
+    const contentMap = {
+      article: this.renderArticles(list, listLoading),
+      application: this.renderApplications(list, listLoading),
+      project: this.renderProjects(list, listLoading),
+    };
+
+    return (
+      <div className={styles.userCenter}>
+        <Row gutter={24}>
+          <Col lg={7} md={24}>
+            <Card
+              bordered={false}
+              style={{ marginBottom: 24 }}
+              loading={currentUserLoading}
+            >
+              {
+                currentUser && Object.keys(currentUser).length ?
+                  (
+                    <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.map(item => <Tag key={item.key}>{item.label}</Tag>)
+                        }
+                        <Tag style={{ background: '#fff', borderStyle: 'dashed' }}>
+                          <Icon type="plus" />
+                        </Tag>
+                      </div>
+                      <Divider dashed />
+                      <div className={styles.team}>
+                        <div className={styles.teamTitle}>团队</div>
+                        <Spin spinning={projectLoading}>
+                          <Row gutter={36}>
+                            {
+                              notice.map(item => (
+                                <Col key={item.id} className={styles.item} lg={24} xl={12}>
+                                  <Avatar size="small" src={item.logo} />
+                                  {item.member}
+                                </Col>
+                              ))
+                            }
+                          </Row>
+                        </Spin>
+                      </div>
+                    </div>
+                  ) : 'loading...'
+              }
+            </Card>
+          </Col>
+          <Col lg={17} md={24}>
+            <Card
+              className={styles.tabsCard}
+              bordered={false}
+              tabList={operationTabList}
+              onTabChange={this.onTabChange}
+            >
+              {contentMap[this.state.key]}
+            </Card>
+          </Col>
+        </Row>
+      </div>
+    );
+  }
+}
diff --git a/src/routes/UserCenter.less b/src/routes/UserCenter.less
new file mode 100644
index 00000000..4fe92ba4
--- /dev/null
+++ b/src/routes/UserCenter.less
@@ -0,0 +1,98 @@
+@import '~antd/lib/style/themes/default.less';
+
+.avatarHolder {
+  text-align: center;
+  margin-bottom: 24px;
+
+  & > img {
+    width: 104px;
+    height: 104px;
+    margin-bottom: 20px;
+  }
+
+  .name {
+    font-size: 20px;
+    line-height: 28px;
+    font-weight: 500;
+    color: @heading-color;
+    margin-bottom: 4px;
+  }
+}
+
+.detail {
+  p {
+    margin-bottom: 8px;
+    padding-left: 26px;
+    position: relative;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  i {
+    position: absolute;
+    height: 14px;
+    width: 14px;
+    left: 0;
+    top: 4px;
+    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 {
+  font-weight: 500;
+  color: @heading-color;
+  margin-bottom: 12px;
+}
+
+.tags {
+  :global {
+    .ant-tag {
+      margin-bottom: 8px;
+    }
+  }
+}
+
+.team {
+  :global {
+    .ant-avatar {
+      margin-right: 12px;
+    }
+  }
+
+  .item {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    margin-bottom: 24px;
+  }
+}
+
+.tabsCard {
+  :global {
+    .ant-card-head {
+      padding: 0 16px;
+    }
+  }
+}
+
+.articleList {
+  :global {
+    .ant-list-item:first-child {
+      padding-top: 0;
+    }
+  }
+}
diff --git a/src/utils/utils.js b/src/utils/utils.js
index 93fb54f4..bbdf5235 100644
--- a/src/utils/utils.js
+++ b/src/utils/utils.js
@@ -1,4 +1,5 @@
 import moment from 'moment';
+import React from 'react';
 
 export function fixedZero(val) {
   return val * 1 < 10 ? `0${val}` : val;
@@ -157,3 +158,30 @@ const reg = /(((^https?:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-
 export function isUrl(path) {
   return reg.test(path);
 }
+
+export function formatWan(val) {
+  const v = val * 1;
+  if (!v || isNaN(v)) return '';
+
+  let result = val;
+  if (val > 10000) {
+    result = Math.floor(val / 10000);
+    result = (
+      <span>
+        {result}
+        <em styles={{
+            position: 'relative',
+            top: -2,
+            fontSize: 14,
+            fontStyle: 'normal',
+            lineHeight: 20,
+            marginLeft: 2,
+          }}
+        >
+          万
+        </em>
+      </span>
+    );
+  }
+  return result;
+}

From c230fa8442127e947e62a5c713c1afcd24f2e8c5 Mon Sep 17 00:00:00 2001
From: ddcat1115 <ddcat1115@gmail.com>
Date: Wed, 14 Feb 2018 16:24:28 +0800
Subject: [PATCH 25/25] workplace use user model

---
 src/common/router.js                |  2 +-
 src/routes/Dashboard/Workplace.js   | 76 +++++++++++------------------
 src/routes/Dashboard/Workplace.less |  3 --
 3 files changed, 30 insertions(+), 51 deletions(-)

diff --git a/src/common/router.js b/src/common/router.js
index aca4ead7..1664ee72 100644
--- a/src/common/router.js
+++ b/src/common/router.js
@@ -80,7 +80,7 @@ export const getRouterData = (app) => {
       component: dynamicWrapper(app, ['monitor'], () => import('../routes/Dashboard/Monitor')),
     },
     '/dashboard/workplace': {
-      component: dynamicWrapper(app, ['project', 'activities', 'chart'], () => import('../routes/Dashboard/Workplace')),
+      component: dynamicWrapper(app, ['user', 'project', 'activities', 'chart'], () => import('../routes/Dashboard/Workplace')),
       // hideInBreadcrumb: true,
       // name: '工作台',
       // authority: 'admin',
diff --git a/src/routes/Dashboard/Workplace.js b/src/routes/Dashboard/Workplace.js
index 9159cbf3..f5681826 100644
--- a/src/routes/Dashboard/Workplace.js
+++ b/src/routes/Dashboard/Workplace.js
@@ -2,7 +2,7 @@ import React, { PureComponent } from 'react';
 import moment from 'moment';
 import { connect } from 'dva';
 import { Link } from 'dva/router';
-import { Row, Col, Card, List, Avatar } from 'antd';
+import { Row, Col, Card, List, Avatar, Spin } from 'antd';
 
 import PageHeaderLayout from '../../layouts/PageHeaderLayout';
 import EditableLinkGroup from '../../components/EditableLinkGroup';
@@ -37,49 +37,21 @@ const links = [
   },
 ];
 
-const members = [
-  {
-    id: 'members-1',
-    title: '科学搬砖组',
-    logo: 'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png',
-    link: '',
-  },
-  {
-    id: 'members-2',
-    title: '程序员日常',
-    logo: 'https://gw.alipayobjects.com/zos/rmsportal/cnrhVkzwxjPwAaCfPbdc.png',
-    link: '',
-  },
-  {
-    id: 'members-3',
-    title: '设计天团',
-    logo: 'https://gw.alipayobjects.com/zos/rmsportal/gaOngJwsRYRaVAuXXcmB.png',
-    link: '',
-  },
-  {
-    id: 'members-4',
-    title: '中二少女团',
-    logo: 'https://gw.alipayobjects.com/zos/rmsportal/ubnKSIfAJTxIgXOKlciN.png',
-    link: '',
-  },
-  {
-    id: 'members-5',
-    title: '骗你学计算机',
-    logo: 'https://gw.alipayobjects.com/zos/rmsportal/WhxKECPNujWoWEFNdnJE.png',
-    link: '',
-  },
-];
-
-@connect(({ project, activities, chart, loading }) => ({
+@connect(({ user, project, activities, chart, loading }) => ({
+  currentUser: user.currentUser,
   project,
   activities,
   chart,
+  currentUserLoading: loading.effects['user/fetchCurrent'],
   projectLoading: loading.effects['project/fetchNotice'],
   activitiesLoading: loading.effects['activities/fetchList'],
 }))
 export default class Workplace extends PureComponent {
   componentDidMount() {
     const { dispatch } = this.props;
+    dispatch({
+      type: 'user/fetchCurrent',
+    });
     dispatch({
       type: 'project/fetchNotice',
     });
@@ -133,6 +105,8 @@ export default class Workplace extends PureComponent {
 
   render() {
     const {
+      currentUser,
+      currentUserLoading,
       project: { notice },
       projectLoading,
       activitiesLoading,
@@ -140,15 +114,22 @@ export default class Workplace extends PureComponent {
     } = this.props;
 
     const pageHeaderContent = (
-      <div className={styles.pageHeaderContent}>
-        <div className={styles.avatar}>
-          <Avatar size="large" src="https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png" />
-        </div>
-        <div className={styles.content}>
-          <div className={styles.contentTitle}>早安，曲丽丽，祝你开心每一天！</div>
-          <div>交互专家 | 蚂蚁金服－某某某事业群－某某平台部－某某技术部－UED</div>
-        </div>
-      </div>
+      <Spin spinning={currentUserLoading}>
+        {
+          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
+        }
+      </Spin>
     );
 
     const extraContent = (
@@ -251,15 +232,16 @@ export default class Workplace extends PureComponent {
               bodyStyle={{ paddingTop: 12, paddingBottom: 12 }}
               bordered={false}
               title="团队"
+              loading={projectLoading}
             >
               <div className={styles.members}>
                 <Row gutter={48}>
                   {
-                    members.map(item => (
+                    notice.map(item => (
                       <Col span={12} key={`members-item-${item.id}`}>
-                        <Link to={item.link}>
+                        <Link to={item.href}>
                           <Avatar src={item.logo} size="small" />
-                          <span className={styles.member}>{item.title}</span>
+                          <span className={styles.member}>{item.member}</span>
                         </Link>
                       </Col>
                     ))
diff --git a/src/routes/Dashboard/Workplace.less b/src/routes/Dashboard/Workplace.less
index 4c875292..732146a3 100644
--- a/src/routes/Dashboard/Workplace.less
+++ b/src/routes/Dashboard/Workplace.less
@@ -86,18 +86,15 @@
   a {
     display: block;
     margin: 12px 0;
-    line-height: 24px;
     height: 24px;
     .textOverflow();
     .member {
       font-size: @font-size-base;
       color: @text-color;
       line-height: 24px;
-      max-width: 100px;
       vertical-align: top;
       margin-left: 12px;
       transition: all .3s;
-      display: inline-block;
       .textOverflow();
     }
     &:hover {