Revert "use pro submodule (#36)" (#38)

This reverts commit 1b79788e.

-[submodule "ant-design-pro"]
-	path = ant-design-pro
-	url = https://github.com/ant-design/pro-blocks

--Subproject commit f0fff39a40abd7a5c8611075ebe3aca0e3d5c715

+/yarn.lock
+/package-lock.json
+/dist
+/node_modules
+
+.umi
+.umi-production

+export default {
+  plugins: [
+    ['umi-plugin-block-dev', { layout: 'ant-design-pro' }],
+    [
+      'umi-plugin-react',
+      {
+        dva: true,
+        locale: true,
+        antd: true,
+      },
+    ],
+  ],
+};

+# @umi-blocks/ant-design-pro/accountcenter
+
+AccountCenter
+
+## Usage
+
+```sh
+umi block add ant-design-pro/AccountCenter
+```
+
+## SNAPSHOT
+
+![SNAPSHOT](./snapshot.png)
+
+## LICENSE
+
+MIT

+{
+  "name": "@umi-block/account-center",
+  "version": "0.0.1",
+  "description": "AccountCenter",
+  "main": "src/index.js",
+  "scripts": {
+    "dev": "umi dev"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/umijs/umi-blocks/ant-design-pro/accountcenter"
+  },
+  "dependencies": {
+    "antd": "^3.10.9",
+    "dva": "^2.4.0",
+    "react": "^16.6.3",
+    "umi-request": "^1.0.0"
+  },
+  "devDependencies": {
+    "umi": "^2.3.0-beta.1",
+    "umi-plugin-react": "^1.3.0-beta.1",
+    "umi-plugin-block-dev": "^2.0.0"
+  },
+  "license": "ISC",
+  "blockConfig": {
+    "specVersion": "0.1"
+  }
+}
\ No newline at end of file

+@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;
+    }
+  }
+
+  a {
+    display: block;
+    margin-bottom: 24px;
+    color: @text-color;
+    transition: color 0.3s;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    word-break: break-all;
+    white-space: nowrap;
+
+    &:hover {
+      color: @primary-color;
+    }
+  }
+}
+
+.tabsCard {
+  :global {
+    .ant-card-head {
+      padding: 0 16px;
+    }
+  }
+}

+const titles = [
+  'Alipay',
+  'Angular',
+  'Ant Design',
+  'Ant Design Pro',
+  'Bootstrap',
+  'React',
+  'Vue',
+  'Webpack',
+];
+const avatars = [
+  'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png', // Alipay
+  'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png', // Angular
+  'https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png', // Ant Design
+  'https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png', // Ant Design Pro
+  'https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png', // Bootstrap
+  'https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png', // React
+  'https://gw.alipayobjects.com/zos/rmsportal/ComBAopevLwENQdKWiIn.png', // Vue
+  'https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlMTCEe.png', // Webpack
+];
+
+const getNotice = [
+  {
+    id: 'xxx1',
+    title: titles[0],
+    logo: avatars[0],
+    description: '那是一种内在的东西，他们到达不了，也无法触及的',
+    updatedAt: new Date(),
+    member: '科学搬砖组',
+    href: '',
+    memberLink: '',
+  },
+  {
+    id: 'xxx2',
+    title: titles[1],
+    logo: avatars[1],
+    description: '希望是一个好东西，也许是最好的，好东西是不会消亡的',
+    updatedAt: new Date('2017-07-24'),
+    member: '全组都是吴彦祖',
+    href: '',
+    memberLink: '',
+  },
+  {
+    id: 'xxx3',
+    title: titles[2],
+    logo: avatars[2],
+    description: '城镇中有那么多的酒馆，她却偏偏走进了我的酒馆',
+    updatedAt: new Date(),
+    member: '中二少女团',
+    href: '',
+    memberLink: '',
+  },
+  {
+    id: 'xxx4',
+    title: titles[3],
+    logo: avatars[3],
+    description: '那时候我只会想自己想要什么，从不想自己拥有什么',
+    updatedAt: new Date('2017-07-23'),
+    member: '程序员日常',
+    href: '',
+    memberLink: '',
+  },
+  {
+    id: 'xxx5',
+    title: titles[4],
+    logo: avatars[4],
+    description: '凛冬将至',
+    updatedAt: new Date('2017-07-23'),
+    member: '高逼格设计天团',
+    href: '',
+    memberLink: '',
+  },
+  {
+    id: 'xxx6',
+    title: titles[5],
+    logo: avatars[5],
+    description: '生命就像一盒巧克力，结果往往出人意料',
+    updatedAt: new Date('2017-07-23'),
+    member: '骗你来学计算机',
+    href: '',
+    memberLink: '',
+  },
+];
+
+export default {
+  // 支持值为 Object 和 Array
+  'GET /api/BLOCK_NAME/currentUser': {
+    name: 'Serati Ma',
+    avatar: 'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png',
+    userid: '00000001',
+    email: 'antdesign@alipay.com',
+    signature: '海纳百川，有容乃大',
+    title: '交互专家',
+    group: '蚂蚁金服－某某某事业群－某某平台部－某某技术部－UED',
+    notice: getNotice,
+    tags: [
+      {
+        key: '0',
+        label: '很有想法的',
+      },
+      {
+        key: '1',
+        label: '专注设计',
+      },
+      {
+        key: '2',
+        label: '辣~',
+      },
+      {
+        key: '3',
+        label: '大长腿',
+      },
+      {
+        key: '4',
+        label: '川妹子',
+      },
+      {
+        key: '5',
+        label: '海纳百川',
+      },
+    ],
+    notifyCount: 12,
+    unreadCount: 11,
+    country: 'China',
+    geographic: {
+      province: {
+        label: '浙江省',
+        key: '330000',
+      },
+      city: {
+        label: '杭州市',
+        key: '330100',
+      },
+    },
+    address: '西湖区工专路 77 号',
+    phone: '0752-268888888',
+  },
+};

+import React, { PureComponent } from 'react';
+import { connect } from 'dva';
+import Link from 'umi/link';
+import { Card, Row, Col, Icon, Avatar, Tag, Divider, Input } from 'antd';
+import styles from './Center.less';
+
+const operationTabList = [
+  {
+    key: 'articles',
+    tab: (
+      <span>
+        文章 <span style={{ fontSize: 14 }}>(8)</span>
+      </span>
+    ),
+  },
+  {
+    key: 'applications',
+    tab: (
+      <span>
+        应用 <span style={{ fontSize: 14 }}>(8)</span>
+      </span>
+    ),
+  },
+  {
+    key: 'projects',
+    tab: (
+      <span>
+        项目 <span style={{ fontSize: 14 }}>(8)</span>
+      </span>
+    ),
+  },
+];
+
+@connect(({ loading, BLOCK_NAME_CAMEL_CASE }) => ({
+  currentUser: BLOCK_NAME_CAMEL_CASE.currentUser,
+  currentUserLoading: loading.effects['BLOCK_NAME_CAMEL_CASE/fetchCurrent'],
+}))
+class PAGE_NAME_UPPER_CAMEL_CASE extends PureComponent {
+  static getDerivedStateFromProps(props, state) {
+    const { match, location } = props;
+    const { tabKey } = state;
+    const urlTabKey = location.pathname.replace(`${match.path}/`, '');
+    if (urlTabKey && urlTabKey !== '/' && tabKey !== urlTabKey) {
+      return {
+        tabKey: urlTabKey,
+      };
+    }
+    return null;
+  }
+
+  state = {
+    newTags: [],
+    inputVisible: false,
+    inputValue: '',
+    tabKey: 'articles',
+  };
+
+  componentDidMount() {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'BLOCK_NAME_CAMEL_CASE/fetchCurrent',
+    });
+  }
+
+  onTabChange = key => {
+    // If you need to sync state to url
+    // const { match } = this.props;
+    // router.push(`${match.url}/${key}`);
+    this.setState({
+      tabKey: key,
+    });
+  };
+
+  showInput = () => {
+    this.setState({ inputVisible: true }, () => this.input.focus());
+  };
+
+  saveInputRef = input => {
+    this.input = input;
+  };
+
+  handleInputChange = e => {
+    this.setState({ inputValue: e.target.value });
+  };
+
+  handleInputConfirm = () => {
+    const { state } = this;
+    const { inputValue } = state;
+    let { newTags } = state;
+    if (inputValue && newTags.filter(tag => tag.label === inputValue).length === 0) {
+      newTags = [...newTags, { key: `new-${newTags.length}`, label: inputValue }];
+    }
+    this.setState({
+      newTags,
+      inputVisible: false,
+      inputValue: '',
+    });
+  };
+
+  render() {
+    const { newTags, inputVisible, inputValue, tabKey } = this.state;
+    const { currentUser, currentUserLoading, children } = this.props;
+    const dataLoading = currentUserLoading || !(currentUser && Object.keys(currentUser).length);
+    return (
+      <Row gutter={24}>
+        <Col lg={7} md={24}>
+          <Card bordered={false} style={{ marginBottom: 24 }} loading={dataLoading}>
+            {!dataLoading ? (
+              <div>
+                <div className={styles.avatarHolder}>
+                  <img alt="" src={currentUser.avatar} />
+                  <div className={styles.name}>{currentUser.name}</div>
+                  <div>{currentUser.signature}</div>
+                </div>
+                <div className={styles.detail}>
+                  <p>
+                    <i className={styles.title} />
+                    {currentUser.title}
+                  </p>
+                  <p>
+                    <i className={styles.group} />
+                    {currentUser.group}
+                  </p>
+                  <p>
+                    <i className={styles.address} />
+                    {currentUser.geographic.province.label}
+                    {currentUser.geographic.city.label}
+                  </p>
+                </div>
+                <Divider dashed />
+                <div className={styles.tags}>
+                  <div className={styles.tagsTitle}>标签</div>
+                  {currentUser.tags.concat(newTags).map(item => (
+                    <Tag key={item.key}>{item.label}</Tag>
+                  ))}
+                  {inputVisible && (
+                    <Input
+                      ref={this.saveInputRef}
+                      type="text"
+                      size="small"
+                      style={{ width: 78 }}
+                      value={inputValue}
+                      onChange={this.handleInputChange}
+                      onBlur={this.handleInputConfirm}
+                      onPressEnter={this.handleInputConfirm}
+                    />
+                  )}
+                  {!inputVisible && (
+                    <Tag
+                      onClick={this.showInput}
+                      style={{ background: '#fff', borderStyle: 'dashed' }}
+                    >
+                      <Icon type="plus" />
+                    </Tag>
+                  )}
+                </div>
+                <Divider style={{ marginTop: 16 }} dashed />
+                <div className={styles.team}>
+                  <div className={styles.teamTitle}>团队</div>
+                  <Row gutter={36}>
+                    {currentUser.notice.map(item => (
+                      <Col key={item.id} lg={24} xl={12}>
+                        <Link to={item.href}>
+                          <Avatar size="small" src={item.logo} />
+                          {item.member}
+                        </Link>
+                      </Col>
+                    ))}
+                  </Row>
+                </div>
+              </div>
+            ) : null}
+          </Card>
+        </Col>
+        <Col lg={17} md={24}>
+          <Card
+            className={styles.tabsCard}
+            bordered={false}
+            tabList={operationTabList}
+            activeTabKey={tabKey}
+            onTabChange={this.onTabChange}
+          >
+            {children || tabKey}
+          </Card>
+        </Col>
+      </Row>
+    );
+  }
+}
+
+export default PAGE_NAME_UPPER_CAMEL_CASE;

+import { query as queryUsers, queryCurrent } from './service';
+
+export default {
+  namespace: 'BLOCK_NAME_CAMEL_CASE',
+
+  state: {
+    list: [],
+    currentUser: {},
+  },
+
+  effects: {
+    *fetch(_, { call, put }) {
+      const response = yield call(queryUsers);
+      yield put({
+        type: 'save',
+        payload: response,
+      });
+    },
+    *fetchCurrent(_, { call, put }) {
+      const response = yield call(queryCurrent);
+      yield put({
+        type: 'saveCurrentUser',
+        payload: response,
+      });
+    },
+  },
+
+  reducers: {
+    save(state, action) {
+      return {
+        ...state,
+        list: action.payload,
+      };
+    },
+    saveCurrentUser(state, action) {
+      return {
+        ...state,
+        currentUser: action.payload || {},
+      };
+    },
+    changeNotifyCount(state, action) {
+      return {
+        ...state,
+        currentUser: {
+          ...state.currentUser,
+          notifyCount: action.payload.totalCount,
+          unreadCount: action.payload.unreadCount,
+        },
+      };
+    },
+  },
+};

+import request from 'umi-request';
+
+export async function query() {
+  return request('/api/BLOCK_NAME/users');
+}
+
+export async function queryCurrent() {
+  return request('/api/BLOCK_NAME/currentUser');
+}

+/yarn.lock
+/package-lock.json
+/dist
+/node_modules
+
+.umi
+.umi-production

+export default {
+  plugins: [
+    [
+      'umi-plugin-block-dev',
+      {
+        layout: 'ant-design-pro',
+      },
+    ],
+    [
+      'umi-plugin-react',
+      {
+        dva: true,
+        locale: true,
+        antd: true,
+      },
+    ],
+  ],
+};

+# @umi-blocks/ant-design-pro/accountsettings
+
+AccountSettings
+
+## Usage
+
+```sh
+umi block add ant-design-pro/AccountSettings
+```
+
+## SNAPSHOT
+
+![SNAPSHOT](./snapshot.png)
+
+## LICENSE
+
+MIT

+{
+  "compilerOptions": {
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

+{
+  "name": "@umi-block/account-settings",
+  "version": "0.0.1",
+  "description": "AccountSettings",
+  "main": "src/index.js",
+  "scripts": {
+    "dev": "umi dev"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/umijs/umi-blocks/ant-design-pro/accountsettings"
+  },
+  "dependencies": {
+    "antd": "^3.10.9",
+    "dva": "^2.4.0",
+    "react": "^16.6.3",
+    "umi-request": "^1.0.0"
+  },
+  "devDependencies": {
+    "umi": "^2.3.0-beta.1",
+    "umi-plugin-block-dev": "^2.0.0",
+    "umi-plugin-react": "^1.3.0-beta.1"
+  },
+  "license": "ISC",
+  "blockConfig": {
+    "specVersion": "0.1"
+  }
+}
\ No newline at end of file

+import city from './geographic/city.json';
+import province from './geographic/province.json';
+
+function getProvince(req, res) {
+  return res.json(province);
+}
+
+function getCity(req, res) {
+  return res.json(city[req.params.province]);
+}
+// 代码中会兼容本地 service mock 以及部署站点的静态数据
+export default {
+  // 支持值为 Object 和 Array
+  'GET /api/BLOCK_NAME/currentUser': {
+    name: 'Serati Ma',
+    avatar: 'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png',
+    userid: '00000001',
+    email: 'antdesign@alipay.com',
+    signature: '海纳百川，有容乃大',
+    title: '交互专家',
+    group: '蚂蚁金服－某某某事业群－某某平台部－某某技术部－UED',
+    tags: [
+      {
+        key: '0',
+        label: '很有想法的',
+      },
+      {
+        key: '1',
+        label: '专注设计',
+      },
+      {
+        key: '2',
+        label: '辣~',
+      },
+      {
+        key: '3',
+        label: '大长腿',
+      },
+      {
+        key: '4',
+        label: '川妹子',
+      },
+      {
+        key: '5',
+        label: '海纳百川',
+      },
+    ],
+    notifyCount: 12,
+    unreadCount: 11,
+    country: 'China',
+    geographic: {
+      province: {
+        label: '浙江省',
+        key: '330000',
+      },
+      city: {
+        label: '杭州市',
+        key: '330100',
+      },
+    },
+    address: '西湖区工专路 77 号',
+    phone: '0752-268888888',
+  },
+  'GET /api/BLOCK_NAME/province': getProvince,
+  'GET /api/BLOCK_NAME/city/:province': getCity,
+};

+@import '~antd/lib/style/themes/default.less';
+
+.baseView {
+  display: flex;
+  padding-top: 12px;
+
+  .left {
+    max-width: 448px;
+    min-width: 224px;
+  }
+  .right {
+    flex: 1;
+    padding-left: 104px;
+    .avatar_title {
+      height: 22px;
+      font-size: @font-size-base;
+      color: @heading-color;
+      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;
+    }
+  }
+}
+
+@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;
+      .avatar_title {
+        display: none;
+      }
+    }
+  }
+}

+import React, { PureComponent } from 'react';
+import { Select, Spin } from 'antd';
+import { connect } from 'dva';
+import styles from './GeographicView.less';
+
+const { Option } = Select;
+
+const nullSlectItem = {
+  label: '',
+  key: '',
+};
+
+@connect(({ BLOCK_NAME_CAMEL_CASE, loading }) => {
+  const { province, city } = BLOCK_NAME_CAMEL_CASE;
+  return {
+    province,
+    city,
+    loading: loading.models.BLOCK_NAME_CAMEL_CASE,
+  };
+})
+class GeographicView extends PureComponent {
+  componentDidMount = () => {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'BLOCK_NAME_CAMEL_CASE/fetchProvince',
+    });
+  };
+
+  componentDidUpdate(props) {
+    const { dispatch, value } = this.props;
+
+    if (!props.value && !!value && !!value.province) {
+      dispatch({
+        type: 'BLOCK_NAME_CAMEL_CASE/fetchCity',
+        payload: value.province.key,
+      });
+    }
+  }
+
+  getProvinceOption() {
+    const { province } = this.props;
+    return this.getOption(province);
+  }
+
+  getCityOption = () => {
+    const { city } = this.props;
+    return this.getOption(city);
+  };
+
+  getOption = list => {
+    if (!list || list.length < 1) {
+      return (
+        <Option key={0} value={0}>
+          没有找到选项
+        </Option>
+      );
+    }
+    return list.map(item => (
+      <Option key={item.id} value={item.id}>
+        {item.name}
+      </Option>
+    ));
+  };
+
+  selectProvinceItem = item => {
+    const { dispatch, onChange } = this.props;
+    dispatch({
+      type: 'BLOCK_NAME_CAMEL_CASE/fetchCity',
+      payload: item.key,
+    });
+    onChange({
+      province: item,
+      city: nullSlectItem,
+    });
+  };
+
+  selectCityItem = item => {
+    const { value, onChange } = this.props;
+    onChange({
+      province: 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();
+    const { loading } = this.props;
+    return (
+      <Spin spinning={loading} wrapperClassName={styles.row}>
+        <Select
+          className={styles.item}
+          value={province}
+          labelInValue
+          showSearch
+          onSelect={this.selectProvinceItem}
+        >
+          {this.getProvinceOption()}
+        </Select>
+        <Select
+          className={styles.item}
+          value={city}
+          labelInValue
+          showSearch
+          onSelect={this.selectCityItem}
+        >
+          {this.getCityOption()}
+        </Select>
+      </Spin>
+    );
+  }
+}
+
+export default GeographicView;

+@import '~antd/lib/style/themes/default.less';
+
+.row {
+  .item {
+    max-width: 220px;
+    width: 50%;
+  }
+  .item:first-child {
+    margin-right: 8px;
+    width: ~'calc(50% - 8px)';
+  }
+}
+
+@media screen and (max-width: @screen-sm) {
+  .item:first-child {
+    margin: 0;
+    margin-bottom: 8px;
+  }
+}

+import React, { Fragment, PureComponent } from 'react';
+import { Input } from 'antd';
+import styles from './PhoneView.less';
+
+class PhoneView extends PureComponent {
+  render() {
+    const { value, onChange } = this.props;
+    let values = ['', ''];
+    if (value) {
+      values = value.split('-');
+    }
+    return (
+      <Fragment>
+        <Input
+          className={styles.area_code}
+          value={values[0]}
+          onChange={e => {
+            onChange(`${e.target.value}-${values[1]}`);
+          }}
+        />
+        <Input
+          className={styles.phone_number}
+          onChange={e => {
+            onChange(`${values[0]}-${e.target.value}`);
+          }}
+          value={values[1]}
+        />
+      </Fragment>
+    );
+  }
+}
+
+export default PhoneView;

+@import '~antd/lib/style/themes/default.less';
+
+.area_code {
+  max-width: 128px;
+  margin-right: 8px;
+  width: 30%;
+}
+.phone_number {
+  max-width: 312px;
+  width: ~'calc(70% - 8px)';
+}

+import React, { Component, Fragment } from 'react';
+import { formatMessage, FormattedMessage } from 'umi/locale';
+import { Form, Input, Upload, Select, Button } from 'antd';
+import { connect } from 'dva';
+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}>
+      <FormattedMessage id="BLOCK_NAME.basic.avatar" defaultMessage="Avatar" />
+    </div>
+    <div className={styles.avatar}>
+      <img src={avatar} alt="avatar" />
+    </div>
+    <Upload fileList={[]}>
+      <div className={styles.button_view}>
+        <Button icon="upload">
+          <FormattedMessage id="BLOCK_NAME.basic.change-avatar" defaultMessage="Change avatar" />
+        </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();
+};
+
+@connect(({ BLOCK_NAME_CAMEL_CASE }) => ({
+  currentUser: BLOCK_NAME_CAMEL_CASE.currentUser,
+}))
+@Form.create()
+class BaseView extends Component {
+  componentDidMount() {
+    this.setBaseInfo();
+  }
+
+  setBaseInfo = () => {
+    const { currentUser, form } = this.props;
+    Object.keys(form.getFieldsValue()).forEach(key => {
+      const obj = {};
+      obj[key] = currentUser[key] || null;
+      form.setFieldsValue(obj);
+    });
+  };
+
+  getAvatarURL() {
+    const { currentUser } = this.props;
+    if (currentUser.avatar) {
+      return currentUser.avatar;
+    }
+    const url = 'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png';
+    return url;
+  }
+
+  getViewDom = ref => {
+    this.view = ref;
+  };
+
+  render() {
+    const {
+      form: { getFieldDecorator },
+    } = this.props;
+    return (
+      <div className={styles.baseView} ref={this.getViewDom}>
+        <div className={styles.left}>
+          <Form layout="vertical" onSubmit={this.handleSubmit} hideRequiredMark>
+            <FormItem label={formatMessage({ id: 'BLOCK_NAME.basic.email' })}>
+              {getFieldDecorator('email', {
+                rules: [
+                  {
+                    required: true,
+                    message: formatMessage({ id: 'BLOCK_NAME.basic.email-message' }, {}),
+                  },
+                ],
+              })(<Input />)}
+            </FormItem>
+            <FormItem label={formatMessage({ id: 'BLOCK_NAME.basic.nickname' })}>
+              {getFieldDecorator('name', {
+                rules: [
+                  {
+                    required: true,
+                    message: formatMessage({ id: 'BLOCK_NAME.basic.nickname-message' }, {}),
+                  },
+                ],
+              })(<Input />)}
+            </FormItem>
+            <FormItem label={formatMessage({ id: 'BLOCK_NAME.basic.profile' })}>
+              {getFieldDecorator('profile', {
+                rules: [
+                  {
+                    required: true,
+                    message: formatMessage({ id: 'BLOCK_NAME.basic.profile-message' }, {}),
+                  },
+                ],
+              })(
+                <Input.TextArea
+                  placeholder={formatMessage({ id: 'BLOCK_NAME.basic.profile-placeholder' })}
+                  rows={4}
+                />
+              )}
+            </FormItem>
+            <FormItem label={formatMessage({ id: 'BLOCK_NAME.basic.country' })}>
+              {getFieldDecorator('country', {
+                rules: [
+                  {
+                    required: true,
+                    message: formatMessage({ id: 'BLOCK_NAME.basic.country-message' }, {}),
+                  },
+                ],
+              })(
+                <Select style={{ maxWidth: 220 }}>
+                  <Option value="China">中国</Option>
+                </Select>
+              )}
+            </FormItem>
+            <FormItem label={formatMessage({ id: 'BLOCK_NAME.basic.geographic' })}>
+              {getFieldDecorator('geographic', {
+                rules: [
+                  {
+                    required: true,
+                    message: formatMessage({ id: 'BLOCK_NAME.basic.geographic-message' }, {}),
+                  },
+                  {
+                    validator: validatorGeographic,
+                  },
+                ],
+              })(<GeographicView />)}
+            </FormItem>
+            <FormItem label={formatMessage({ id: 'BLOCK_NAME.basic.address' })}>
+              {getFieldDecorator('address', {
+                rules: [
+                  {
+                    required: true,
+                    message: formatMessage({ id: 'BLOCK_NAME.basic.address-message' }, {}),
+                  },
+                ],
+              })(<Input />)}
+            </FormItem>
+            <FormItem label={formatMessage({ id: 'BLOCK_NAME.basic.phone' })}>
+              {getFieldDecorator('phone', {
+                rules: [
+                  {
+                    required: true,
+                    message: formatMessage({ id: 'BLOCK_NAME.basic.phone-message' }, {}),
+                  },
+                  { validator: validatorPhone },
+                ],
+              })(<PhoneView />)}
+            </FormItem>
+            <Button type="primary">
+              <FormattedMessage
+                id="BLOCK_NAME.basic.update"
+                defaultMessage="Update Information"
+              />
+            </Button>
+          </Form>
+        </div>
+        <div className={styles.right}>
+          <AvatarView avatar={this.getAvatarURL()} />
+        </div>
+      </div>
+    );
+  }
+}
+
+export default BaseView;

+import React, { Component, Fragment } from 'react';
+import { formatMessage, FormattedMessage } from 'umi/locale';
+import { Icon, List } from 'antd';
+
+class BindingView extends Component {
+  getData = () => [
+    {
+      title: formatMessage({ id: 'BLOCK_NAME.binding.taobao' }, {}),
+      description: formatMessage({ id: 'BLOCK_NAME.binding.taobao-description' }, {}),
+      actions: [
+        <a>
+          <FormattedMessage id="BLOCK_NAME.binding.bind" defaultMessage="Bind" />
+        </a>,
+      ],
+      avatar: <Icon type="taobao" className="taobao" />,
+    },
+    {
+      title: formatMessage({ id: 'BLOCK_NAME.binding.alipay' }, {}),
+      description: formatMessage({ id: 'BLOCK_NAME.binding.alipay-description' }, {}),
+      actions: [
+        <a>
+          <FormattedMessage id="BLOCK_NAME.binding.bind" defaultMessage="Bind" />
+        </a>,
+      ],
+      avatar: <Icon type="alipay" className="alipay" />,
+    },
+    {
+      title: formatMessage({ id: 'BLOCK_NAME.binding.dingding' }, {}),
+      description: formatMessage({ id: 'BLOCK_NAME.binding.dingding-description' }, {}),
+      actions: [
+        <a>
+          <FormattedMessage id="BLOCK_NAME.binding.bind" defaultMessage="Bind" />
+        </a>,
+      ],
+      avatar: <Icon type="dingding" className="dingding" />,
+    },
+  ];
+
+  render() {
+    return (
+      <Fragment>
+        <List
+          itemLayout="horizontal"
+          dataSource={this.getData()}
+          renderItem={item => (
+            <List.Item actions={item.actions}>
+              <List.Item.Meta
+                avatar={item.avatar}
+                title={item.title}
+                description={item.description}
+              />
+            </List.Item>
+          )}
+        />
+      </Fragment>
+    );
+  }
+}
+
+export default BindingView;

+import React, { Component, Fragment } from 'react';
+import { formatMessage } from 'umi/locale';
+import { Switch, List } from 'antd';
+
+class NotificationView extends Component {
+  getData = () => {
+    const Action = (
+      <Switch
+        checkedChildren={formatMessage({ id: 'BLOCK_NAME.settings.open' })}
+        unCheckedChildren={formatMessage({ id: 'BLOCK_NAME.settings.close' })}
+        defaultChecked
+      />
+    );
+    return [
+      {
+        title: formatMessage({ id: 'BLOCK_NAME.notification.password' }, {}),
+        description: formatMessage({ id: 'BLOCK_NAME.notification.password-description' }, {}),
+        actions: [Action],
+      },
+      {
+        title: formatMessage({ id: 'BLOCK_NAME.notification.messages' }, {}),
+        description: formatMessage({ id: 'BLOCK_NAME.notification.messages-description' }, {}),
+        actions: [Action],
+      },
+      {
+        title: formatMessage({ id: 'BLOCK_NAME.notification.todo' }, {}),
+        description: formatMessage({ id: 'BLOCK_NAME.notification.todo-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>
+    );
+  }
+}
+
+export default NotificationView;

+import React, { Component, Fragment } from 'react';
+import { formatMessage, FormattedMessage } from 'umi/locale';
+import { List } from 'antd';
+// import { getTimeDistance } from '@/utils/utils';
+
+const passwordStrength = {
+  strong: (
+    <font className="strong">
+      <FormattedMessage id="BLOCK_NAME.security.strong" defaultMessage="Strong" />
+    </font>
+  ),
+  medium: (
+    <font className="medium">
+      <FormattedMessage id="BLOCK_NAME.security.medium" defaultMessage="Medium" />
+    </font>
+  ),
+  weak: (
+    <font className="weak">
+      <FormattedMessage id="BLOCK_NAME.security.weak" defaultMessage="Weak" />
+      Weak
+    </font>
+  ),
+};
+
+class SecurityView extends Component {
+  getData = () => [
+    {
+      title: formatMessage({ id: 'BLOCK_NAME.security.password' }, {}),
+      description: (
+        <Fragment>
+          {formatMessage({ id: 'BLOCK_NAME.security.password-description' })}：
+          {passwordStrength.strong}
+        </Fragment>
+      ),
+      actions: [
+        <a>
+          <FormattedMessage id="BLOCK_NAME.security.modify" defaultMessage="Modify" />
+        </a>,
+      ],
+    },
+    {
+      title: formatMessage({ id: 'BLOCK_NAME.security.phone' }, {}),
+      description: `${formatMessage(
+        { id: 'BLOCK_NAME.security.phone-description' },
+        {}
+      )}：138****8293`,
+      actions: [
+        <a>
+          <FormattedMessage id="BLOCK_NAME.security.modify" defaultMessage="Modify" />
+        </a>,
+      ],
+    },
+    {
+      title: formatMessage({ id: 'BLOCK_NAME.security.question' }, {}),
+      description: formatMessage({ id: 'BLOCK_NAME.security.question-description' }, {}),
+      actions: [
+        <a>
+          <FormattedMessage id="BLOCK_NAME.security.set" defaultMessage="Set" />
+        </a>,
+      ],
+    },
+    {
+      title: formatMessage({ id: 'BLOCK_NAME.security.email' }, {}),
+      description: `${formatMessage(
+        { id: 'BLOCK_NAME.security.email-description' },
+        {}
+      )}：ant***sign.com`,
+      actions: [
+        <a>
+          <FormattedMessage id="BLOCK_NAME.security.modify" defaultMessage="Modify" />
+        </a>,
+      ],
+    },
+    {
+      title: formatMessage({ id: 'BLOCK_NAME.security.mfa' }, {}),
+      description: formatMessage({ id: 'BLOCK_NAME.security.mfa-description' }, {}),
+      actions: [
+        <a>
+          <FormattedMessage id="BLOCK_NAME.security.bind" defaultMessage="Bind" />
+        </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>
+    );
+  }
+}
+
+export default SecurityView;

+{
+  "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"
+    }
+  ]
+}

+[
+  {
+    "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"
+  }
+]

+import React, { Component } from 'react';
+import { connect } from 'dva';
+import { FormattedMessage } from 'umi/locale';
+import { Menu } from 'antd';
+import styles from './style.less';
+import BaseView from './components/base';
+import SecurityView from './components/security';
+import BindingView from './components/binding';
+import NotificationView from './components/notification';
+
+const { Item } = Menu;
+
+@connect(({ BLOCK_NAME_CAMEL_CASE }) => ({
+  currentUser: BLOCK_NAME_CAMEL_CASE.currentUser,
+}))
+class PAGE_NAME_UPPER_CAMEL_CASE extends Component {
+  constructor(props) {
+    super(props);
+    const menuMap = {
+      base: <FormattedMessage id="BLOCK_NAME.menuMap.basic" defaultMessage="Basic Settings" />,
+      security: (
+        <FormattedMessage id="BLOCK_NAME.menuMap.security" defaultMessage="Security Settings" />
+      ),
+      binding: (
+        <FormattedMessage id="BLOCK_NAME.menuMap.binding" defaultMessage="Account Binding" />
+      ),
+      notification: (
+        <FormattedMessage
+          id="BLOCK_NAME.menuMap.notification"
+          defaultMessage="New Message Notification"
+        />
+      ),
+    };
+    this.state = {
+      mode: 'inline',
+      menuMap,
+      selectKey: 'base',
+    };
+  }
+
+  componentDidMount() {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'BLOCK_NAME_CAMEL_CASE/fetchCurrent',
+    });
+    window.addEventListener('resize', this.resize);
+    this.resize();
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.resize);
+  }
+
+  getmenu = () => {
+    const { menuMap } = this.state;
+    return Object.keys(menuMap).map(item => <Item key={item}>{menuMap[item]}</Item>);
+  };
+
+  getRightTitle = () => {
+    const { selectKey, menuMap } = this.state;
+    return menuMap[selectKey];
+  };
+
+  selectKey = ({ key }) => {
+    this.setState({
+      selectKey: key,
+    });
+  };
+
+  resize = () => {
+    if (!this.main) {
+      return;
+    }
+    requestAnimationFrame(() => {
+      if (!this.main) {
+        return;
+      }
+      let mode = 'inline';
+      const { offsetWidth } = this.main;
+      if (this.main.offsetWidth < 641 && offsetWidth > 400) {
+        mode = 'horizontal';
+      }
+      if (window.innerWidth < 768 && offsetWidth > 400) {
+        mode = 'horizontal';
+      }
+      this.setState({
+        mode,
+      });
+    });
+  };
+
+  renderChildren = () => {
+    const { selectKey } = this.state;
+    switch (selectKey) {
+      case 'base':
+        return <BaseView />;
+      case 'security':
+        return <SecurityView />;
+      case 'binding':
+        return <BindingView />;
+      case 'notification':
+        return <NotificationView />;
+      default:
+        break;
+    }
+
+    return null;
+  };
+
+  render() {
+    const { currentUser } = this.props;
+    if (!currentUser.userid) {
+      return '';
+    }
+    const { mode, selectKey } = this.state;
+    return (
+      <div
+        className={styles.main}
+        ref={ref => {
+          this.main = ref;
+        }}
+      >
+        <div className={styles.leftmenu}>
+          <Menu mode={mode} selectedKeys={[selectKey]} onClick={this.selectKey}>
+            {this.getmenu()}
+          </Menu>
+        </div>
+        <div className={styles.right}>
+          <div className={styles.title}>{this.getRightTitle()}</div>
+          {this.renderChildren()}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default PAGE_NAME_UPPER_CAMEL_CASE;

+export default {
+  'BLOCK_NAME.menuMap.basic': 'Basic Settings',
+  'BLOCK_NAME.menuMap.security': 'Security Settings',
+  'BLOCK_NAME.menuMap.binding': 'Account Binding',
+  'BLOCK_NAME.menuMap.notification': 'New Message Notification',
+  'BLOCK_NAME.basic.avatar': 'Avatar',
+  'BLOCK_NAME.basic.change-avatar': 'Change avatar',
+  'BLOCK_NAME.basic.email': 'Email',
+  'BLOCK_NAME.basic.email-message': 'Please input your email!',
+  'BLOCK_NAME.basic.nickname': 'Nickname',
+  'BLOCK_NAME.basic.nickname-message': 'Please input your Nickname!',
+  'BLOCK_NAME.basic.profile': 'Personal profile',
+  'BLOCK_NAME.basic.profile-message': 'Please input your personal profile!',
+  'BLOCK_NAME.basic.profile-placeholder': 'Brief introduction to yourself',
+  'BLOCK_NAME.basic.country': 'Country/Region',
+  'BLOCK_NAME.basic.country-message': 'Please input your country!',
+  'BLOCK_NAME.basic.geographic': 'Province or city',
+  'BLOCK_NAME.basic.geographic-message': 'Please input your geographic info!',
+  'BLOCK_NAME.basic.address': 'Street Address',
+  'BLOCK_NAME.basic.address-message': 'Please input your address!',
+  'BLOCK_NAME.basic.phone': 'Phone Number',
+  'BLOCK_NAME.basic.phone-message': 'Please input your phone!',
+  'BLOCK_NAME.basic.update': 'Update Information',
+  'BLOCK_NAME.security.strong': 'Strong',
+  'BLOCK_NAME.security.medium': 'Medium',
+  'BLOCK_NAME.security.weak': 'Weak',
+  'BLOCK_NAME.security.password': 'Account Password',
+  'BLOCK_NAME.security.password-description': 'Current password strength：',
+  'BLOCK_NAME.security.phone': 'Security Phone',
+  'BLOCK_NAME.security.phone-description': 'Bound phone：',
+  'BLOCK_NAME.security.question': 'Security Question',
+  'BLOCK_NAME.security.question-description':
+    'The security question is not set, and the security policy can effectively protect the account security',
+  'BLOCK_NAME.security.email': 'Backup Email',
+  'BLOCK_NAME.security.email-description': 'Bound Email：',
+  'BLOCK_NAME.security.mfa': 'MFA Device',
+  'BLOCK_NAME.security.mfa-description':
+    'Unbound MFA device, after binding, can be confirmed twice',
+  'BLOCK_NAME.security.modify': 'Modify',
+  'BLOCK_NAME.security.set': 'Set',
+  'BLOCK_NAME.security.bind': 'Bind',
+  'BLOCK_NAME.binding.taobao': 'Binding Taobao',
+  'BLOCK_NAME.binding.taobao-description': 'Currently unbound Taobao account',
+  'BLOCK_NAME.binding.alipay': 'Binding Alipay',
+  'BLOCK_NAME.binding.alipay-description': 'Currently unbound Alipay account',
+  'BLOCK_NAME.binding.dingding': 'Binding DingTalk',
+  'BLOCK_NAME.binding.dingding-description': 'Currently unbound DingTalk account',
+  'BLOCK_NAME.binding.bind': 'Bind',
+  'BLOCK_NAME.notification.password': 'Account Password',
+  'BLOCK_NAME.notification.password-description':
+    'Messages from other users will be notified in the form of a station letter',
+  'BLOCK_NAME.notification.messages': 'System Messages',
+  'BLOCK_NAME.notification.messages-description':
+    'System messages will be notified in the form of a station letter',
+  'BLOCK_NAME.notification.todo': 'To-do Notification',
+  'BLOCK_NAME.notification.todo-description':
+    'The to-do list will be notified in the form of a letter from the station',
+  'BLOCK_NAME.settings.open': 'Open',
+  'BLOCK_NAME.settings.close': 'Close',
+};

+export default {
+  'BLOCK_NAME.menuMap.basic': '基本设置',
+  'BLOCK_NAME.menuMap.security': '安全设置',
+  'BLOCK_NAME.menuMap.binding': '账号绑定',
+  'BLOCK_NAME.menuMap.notification': '新消息通知',
+  'BLOCK_NAME.basic.avatar': '头像',
+  'BLOCK_NAME.basic.change-avatar': '更换头像',
+  'BLOCK_NAME.basic.email': '邮箱',
+  'BLOCK_NAME.basic.email-message': '请输入您的邮箱!',
+  'BLOCK_NAME.basic.nickname': '昵称',
+  'BLOCK_NAME.basic.nickname-message': '请输入您的昵称!',
+  'BLOCK_NAME.basic.profile': '个人简介',
+  'BLOCK_NAME.basic.profile-message': '请输入个人简介!',
+  'BLOCK_NAME.basic.profile-placeholder': '个人简介',
+  'BLOCK_NAME.basic.country': '国家/地区',
+  'BLOCK_NAME.basic.country-message': '请输入您的国家或地区!',
+  'BLOCK_NAME.basic.geographic': '所在省市',
+  'BLOCK_NAME.basic.geographic-message': '请输入您的所在省市!',
+  'BLOCK_NAME.basic.address': '街道地址',
+  'BLOCK_NAME.basic.address-message': '请输入您的街道地址!',
+  'BLOCK_NAME.basic.phone': '联系电话',
+  'BLOCK_NAME.basic.phone-message': '请输入您的联系电话!',
+  'BLOCK_NAME.basic.update': '更新基本信息',
+  'BLOCK_NAME.security.strong': '强',
+  'BLOCK_NAME.security.medium': '中',
+  'BLOCK_NAME.security.weak': '弱',
+  'BLOCK_NAME.security.password': '账户密码',
+  'BLOCK_NAME.security.password-description': '当前密码强度：',
+  'BLOCK_NAME.security.phone': '密保手机',
+  'BLOCK_NAME.security.phone-description': '已绑定手机：',
+  'BLOCK_NAME.security.question': '密保问题',
+  'BLOCK_NAME.security.question-description': '未设置密保问题，密保问题可有效保护账户安全',
+  'BLOCK_NAME.security.email': '备用邮箱',
+  'BLOCK_NAME.security.email-description': '已绑定邮箱：',
+  'BLOCK_NAME.security.mfa': 'MFA 设备',
+  'BLOCK_NAME.security.mfa-description': '未绑定 MFA 设备，绑定后，可以进行二次确认',
+  'BLOCK_NAME.security.modify': '修改',
+  'BLOCK_NAME.security.set': '设置',
+  'BLOCK_NAME.security.bind': '绑定',
+  'BLOCK_NAME.binding.taobao': '绑定淘宝',
+  'BLOCK_NAME.binding.taobao-description': '当前未绑定淘宝账号',
+  'BLOCK_NAME.binding.alipay': '绑定支付宝',
+  'BLOCK_NAME.binding.alipay-description': '当前未绑定支付宝账号',
+  'BLOCK_NAME.binding.dingding': '绑定钉钉',
+  'BLOCK_NAME.binding.dingding-description': '当前未绑定钉钉账号',
+  'BLOCK_NAME.binding.bind': '绑定',
+  'BLOCK_NAME.notification.password': '账户密码',
+  'BLOCK_NAME.notification.password-description': '其他用户的消息将以站内信的形式通知',
+  'BLOCK_NAME.notification.messages': '系统消息',
+  'BLOCK_NAME.notification.messages-description': '系统消息将以站内信的形式通知',
+  'BLOCK_NAME.notification.todo': '待办任务',
+  'BLOCK_NAME.notification.todo-description': '待办任务将以站内信的形式通知',
+  'BLOCK_NAME.settings.open': '开',
+  'BLOCK_NAME.settings.close': '关',
+};

+export default {
+  'BLOCK_NAME.menuMap.basic': '基本設置',
+  'BLOCK_NAME.menuMap.security': '安全設置',
+  'BLOCK_NAME.menuMap.binding': '賬號綁定',
+  'BLOCK_NAME.menuMap.notification': '新消息通知',
+  'BLOCK_NAME.basic.avatar': '頭像',
+  'BLOCK_NAME.basic.change-avatar': '更換頭像',
+  'BLOCK_NAME.basic.email': '郵箱',
+  'BLOCK_NAME.basic.email-message': '請輸入您的郵箱!',
+  'BLOCK_NAME.basic.nickname': '昵稱',
+  'BLOCK_NAME.basic.nickname-message': '請輸入您的昵稱!',
+  'BLOCK_NAME.basic.profile': '個人簡介',
+  'BLOCK_NAME.basic.profile-message': '請輸入個人簡介!',
+  'BLOCK_NAME.basic.profile-placeholder': '個人簡介',
+  'BLOCK_NAME.basic.country': '國家/地區',
+  'BLOCK_NAME.basic.country-message': '請輸入您的國家或地區!',
+  'BLOCK_NAME.basic.geographic': '所在省市',
+  'BLOCK_NAME.basic.geographic-message': '請輸入您的所在省市!',
+  'BLOCK_NAME.basic.address': '街道地址',
+  'BLOCK_NAME.basic.address-message': '請輸入您的街道地址!',
+  'BLOCK_NAME.basic.phone': '聯系電話',
+  'BLOCK_NAME.basic.phone-message': '請輸入您的聯系電話!',
+  'BLOCK_NAME.basic.update': '更新基本信息',
+  'BLOCK_NAME.security.strong': '強',
+  'BLOCK_NAME.security.medium': '中',
+  'BLOCK_NAME.security.weak': '弱',
+  'BLOCK_NAME.security.password': '賬戶密碼',
+  'BLOCK_NAME.security.password-description': '當前密碼強度：',
+  'BLOCK_NAME.security.phone': '密保手機',
+  'BLOCK_NAME.security.phone-description': '已綁定手機：',
+  'BLOCK_NAME.security.question': '密保問題',
+  'BLOCK_NAME.security.question-description': '未設置密保問題，密保問題可有效保護賬戶安全',
+  'BLOCK_NAME.security.email': '備用郵箱',
+  'BLOCK_NAME.security.email-description': '已綁定郵箱：',
+  'BLOCK_NAME.security.mfa': 'MFA 設備',
+  'BLOCK_NAME.security.mfa-description': '未綁定 MFA 設備，綁定後，可以進行二次確認',
+  'BLOCK_NAME.security.modify': '修改',
+  'BLOCK_NAME.security.set': '設置',
+  'BLOCK_NAME.security.bind': '綁定',
+  'BLOCK_NAME.binding.taobao': '綁定淘寶',
+  'BLOCK_NAME.binding.taobao-description': '當前未綁定淘寶賬號',
+  'BLOCK_NAME.binding.alipay': '綁定支付寶',
+  'BLOCK_NAME.binding.alipay-description': '當前未綁定支付寶賬號',
+  'BLOCK_NAME.binding.dingding': '綁定釘釘',
+  'BLOCK_NAME.binding.dingding-description': '當前未綁定釘釘賬號',
+  'BLOCK_NAME.binding.bind': '綁定',
+  'BLOCK_NAME.notification.password': '賬戶密碼',
+  'BLOCK_NAME.notification.password-description': '其他用戶的消息將以站內信的形式通知',
+  'BLOCK_NAME.notification.messages': '系統消息',
+  'BLOCK_NAME.notification.messages-description': '系統消息將以站內信的形式通知',
+  'BLOCK_NAME.notification.todo': '待辦任務',
+  'BLOCK_NAME.notification.todo-description': '待辦任務將以站內信的形式通知',
+  'BLOCK_NAME.settings.open': '開',
+  'BLOCK_NAME.settings.close': '關',
+};

+import { query as queryUsers, queryCurrent, queryProvince, queryCity } from './service';
+
+export default {
+  namespace: 'BLOCK_NAME_CAMEL_CASE',
+
+  state: {
+    list: [],
+    currentUser: {},
+    province: [],
+    city: [],
+  },
+
+  effects: {
+    *fetch(_, { call, put }) {
+      const response = yield call(queryUsers);
+      yield put({
+        type: 'save',
+        payload: response,
+      });
+    },
+    *fetchCurrent(_, { call, put }) {
+      const response = yield call(queryCurrent);
+      yield put({
+        type: 'saveCurrentUser',
+        payload: response,
+      });
+    },
+    *fetchProvince(_, { call, put }) {
+      yield put({
+        type: 'changeLoading',
+        payload: true,
+      });
+      const response = yield call(queryProvince);
+      yield put({
+        type: 'setProvince',
+        payload: response,
+      });
+    },
+    *fetchCity({ payload }, { call, put }) {
+      const response = yield call(queryCity, payload);
+      yield put({
+        type: 'setCity',
+        payload: response,
+      });
+    },
+  },
+
+  reducers: {
+    save(state, action) {
+      return {
+        ...state,
+        list: action.payload,
+      };
+    },
+    saveCurrentUser(state, action) {
+      return {
+        ...state,
+        currentUser: action.payload || {},
+      };
+    },
+    changeNotifyCount(state, action) {
+      return {
+        ...state,
+        currentUser: {
+          ...state.currentUser,
+          notifyCount: action.payload.totalCount,
+          unreadCount: action.payload.unreadCount,
+        },
+      };
+    },
+    setProvince(state, action) {
+      return {
+        ...state,
+        province: action.payload,
+      };
+    },
+    setCity(state, action) {
+      return {
+        ...state,
+        city: action.payload,
+      };
+    },
+    changeLoading(state, action) {
+      return {
+        ...state,
+        isLoading: action.payload,
+      };
+    },
+  },
+};

+import request from 'umi-request';
+
+export async function queryCurrent() {
+  return request('/api/BLOCK_NAME/currentUser');
+}
+
+export async function queryProvince() {
+  return request('/api/BLOCK_NAME/province');
+}
+
+export async function queryCity(province) {
+  return request(`/api/BLOCK_NAME/city/${province}`);
+}
+
+export async function query() {
+  return request('/api/BLOCK_NAME/users');
+}

+@import '~antd/lib/style/themes/default.less';
+
+.main {
+  width: 100%;
+  height: 100%;
+  background-color: @body-background;
+  display: flex;
+  padding-top: 16px;
+  padding-bottom: 16px;
+  overflow: auto;
+  .leftmenu {
+    width: 224px;
+    border-right: @border-width-base @border-style-base @border-color-split;
+    :global {
+      .ant-menu-inline {
+        border: none;
+      }
+      .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
+        font-weight: bold;
+      }
+    }
+  }
+  .right {
+    flex: 1;
+    padding-left: 40px;
+    padding-right: 40px;
+    padding-top: 8px;
+    padding-bottom: 8px;
+    .title {
+      font-size: 20px;
+      color: @heading-color;
+      line-height: 28px;
+      font-weight: 500;
+      margin-bottom: 12px;
+    }
+  }
+  :global {
+    .ant-list-split .ant-list-item:last-child {
+      border-bottom: 1px solid #e8e8e8;
+    }
+    .ant-list-item {
+      padding-top: 14px;
+      padding-bottom: 14px;
+    }
+  }
+}
+:global {
+  .ant-list-item-meta {
+    // 账号绑定图标
+    .taobao {
+      color: #ff4000;
+      display: block;
+      font-size: 48px;
+      line-height: 48px;
+      border-radius: @border-radius-base;
+    }
+    .dingding {
+      background-color: #2eabff;
+      color: #fff;
+      font-size: 32px;
+      line-height: 32px;
+      padding: 6px;
+      margin: 2px;
+      border-radius: @border-radius-base;
+    }
+    .alipay {
+      color: #2eabff;
+      font-size: 48px;
+      line-height: 48px;
+      border-radius: @border-radius-base;
+    }
+  }
+
+  // 密码强度
+  font.strong {
+    color: @success-color;
+  }
+  font.medium {
+    color: @warning-color;
+  }
+  font.weak {
+    color: @error-color;
+  }
+}
+
+@media screen and (max-width: @screen-md) {
+  .main {
+    flex-direction: column;
+    .leftmenu {
+      width: 100%;
+      border: none;
+    }
+    .right {
+      padding: 40px;
+    }
+  }
+}

+/yarn.lock
+/package-lock.json
+/dist
+/node_modules
+
+.umi
+.umi-production

+export default {
+  plugins: [
+    ['umi-plugin-block-dev', {
+      layout: 'ant-design-pro',
+    }],
+    ['umi-plugin-react', {
+      dva: true,
+      locale: true,
+      antd: true,
+    }]
+  ],
+}

+# @umi-blocks/ant-design-pro/advancedform
+
+AdvancedForm
+
+## Usage
+
+```sh
+umi block add ant-design-pro/AdvancedForm
+```
+
+## SNAPSHOT
+
+![SNAPSHOT](./snapshot.png)
+
+## LICENSE
+
+MIT

+{
+  "name": "@umi-block/advanced-form",
+  "version": "0.0.1",
+  "description": "AdvancedForm",
+  "main": "src/index.js",
+  "scripts": {
+    "dev": "umi dev"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/umijs/umi-blocks/ant-design-pro/advancedform"
+  },
+  "dependencies": {
+    "ant-design-pro": "^2.1.1",
+    "antd": "^3.10.9",
+    "dva": "^2.4.0",
+    "lodash": "^4.17.10",
+    "react": "^16.6.3",
+    "umi-request": "^1.0.0"
+  },
+  "devDependencies": {
+    "umi": "^2.3.0-beta.1",
+    "umi-plugin-react": "^1.3.0-beta.1",
+    "umi-plugin-block-dev": "^2.0.0"
+  },
+  "license": "ISC",
+  "blockConfig": {
+    "specVersion": "0.1"
+  }
+}
\ No newline at end of file

+export default {
+  'POST /api/BLOCK_NAME/forms': (req, res) => {
+    res.send({ message: 'Ok' });
+  },
+};

+import React from 'react';
+import { FormattedMessage } from 'umi/locale';
+import Link from 'umi/link';
+import { PageHeader } from 'ant-design-pro';
+import styles from './index.less';
+
+const PageHeaderWrapper = ({ children, wrapperClassName, ...restProps }) => (
+  <div style={{ margin: '-24px -24px 0' }} className={wrapperClassName}>
+    <PageHeader
+      home={<FormattedMessage id="BLOCK_NAME.menu.home" defaultMessage="Home" />}
+      key="pageheader"
+      {...restProps}
+      linkElement={Link}
+      itemRender={item => {
+        if (item.locale) {
+          return <FormattedMessage id={item.locale} defaultMessage={item.title} />;
+        }
+        return item.title;
+      }}
+    />
+    {children ? <div className={styles.content}>{children}</div> : null}
+  </div>
+);
+
+export default PageHeaderWrapper;

+@import '~antd/lib/style/themes/default.less';
+
+.content {
+  margin: 24px 24px 0;
+}
+
+@media screen and (max-width: @screen-sm) {
+  .content {
+    margin: 24px 0 0;
+  }
+}

+import React, { PureComponent, Fragment } from 'react';
+import { Table, Button, Input, message, Popconfirm, Divider } from 'antd';
+import { isEqual } from 'lodash';
+import styles from '../style.less';
+
+class TableForm extends PureComponent {
+  index = 0;
+
+  cacheOriginData = {};
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      data: props.value,
+      loading: false,
+      /* eslint-disable-next-line react/no-unused-state */
+      value: props.value,
+    };
+  }
+
+  static getDerivedStateFromProps(nextProps, preState) {
+    if (isEqual(nextProps.value, preState.value)) {
+      return null;
+    }
+    return {
+      data: nextProps.value,
+      value: nextProps.value,
+    };
+  }
+
+  getRowByKey(key, newData) {
+    const { data } = this.state;
+    return (newData || data).filter(item => item.key === key)[0];
+  }
+
+  toggleEditable = (e, key) => {
+    e.preventDefault();
+    const { data } = this.state;
+    const newData = data.map(item => ({ ...item }));
+    const target = this.getRowByKey(key, newData);
+    if (target) {
+      // 进入编辑状态时保存原始数据
+      if (!target.editable) {
+        this.cacheOriginData[key] = { ...target };
+      }
+      target.editable = !target.editable;
+      this.setState({ data: newData });
+    }
+  };
+
+  newMember = () => {
+    const { data } = this.state;
+    const newData = data.map(item => ({ ...item }));
+    newData.push({
+      key: `NEW_TEMP_ID_${this.index}`,
+      workId: '',
+      name: '',
+      department: '',
+      editable: true,
+      isNew: true,
+    });
+    this.index += 1;
+    this.setState({ data: newData });
+  };
+
+  remove(key) {
+    const { data } = this.state;
+    const { onChange } = this.props;
+    const newData = data.filter(item => item.key !== key);
+    this.setState({ data: newData });
+    onChange(newData);
+  }
+
+  handleKeyPress(e, key) {
+    if (e.key === 'Enter') {
+      this.saveRow(e, key);
+    }
+  }
+
+  handleFieldChange(e, fieldName, key) {
+    const { data } = this.state;
+    const newData = data.map(item => ({ ...item }));
+    const target = this.getRowByKey(key, newData);
+    if (target) {
+      target[fieldName] = e.target.value;
+      this.setState({ data: newData });
+    }
+  }
+
+  saveRow(e, key) {
+    e.persist();
+    this.setState({
+      loading: true,
+    });
+    setTimeout(() => {
+      if (this.clickedCancel) {
+        this.clickedCancel = false;
+        return;
+      }
+      const target = this.getRowByKey(key) || {};
+      if (!target.workId || !target.name || !target.department) {
+        message.error('请填写完整成员信息。');
+        e.target.focus();
+        this.setState({
+          loading: false,
+        });
+        return;
+      }
+      delete target.isNew;
+      this.toggleEditable(e, key);
+      const { data } = this.state;
+      const { onChange } = this.props;
+      onChange(data);
+      this.setState({
+        loading: false,
+      });
+    }, 500);
+  }
+
+  cancel(e, key) {
+    this.clickedCancel = true;
+    e.preventDefault();
+    const { data } = this.state;
+    const newData = data.map(item => ({ ...item }));
+    const target = this.getRowByKey(key, newData);
+    if (this.cacheOriginData[key]) {
+      Object.assign(target, this.cacheOriginData[key]);
+      delete this.cacheOriginData[key];
+    }
+    target.editable = false;
+    this.setState({ data: newData });
+    this.clickedCancel = false;
+  }
+
+  render() {
+    const columns = [
+      {
+        title: '成员姓名',
+        dataIndex: 'name',
+        key: 'name',
+        width: '20%',
+        render: (text, record) => {
+          if (record.editable) {
+            return (
+              <Input
+                value={text}
+                autoFocus
+                onChange={e => this.handleFieldChange(e, 'name', record.key)}
+                onKeyPress={e => this.handleKeyPress(e, record.key)}
+                placeholder="成员姓名"
+              />
+            );
+          }
+          return text;
+        },
+      },
+      {
+        title: '工号',
+        dataIndex: 'workId',
+        key: 'workId',
+        width: '20%',
+        render: (text, record) => {
+          if (record.editable) {
+            return (
+              <Input
+                value={text}
+                onChange={e => this.handleFieldChange(e, 'workId', record.key)}
+                onKeyPress={e => this.handleKeyPress(e, record.key)}
+                placeholder="工号"
+              />
+            );
+          }
+          return text;
+        },
+      },
+      {
+        title: '所属部门',
+        dataIndex: 'department',
+        key: 'department',
+        width: '40%',
+        render: (text, record) => {
+          if (record.editable) {
+            return (
+              <Input
+                value={text}
+                onChange={e => this.handleFieldChange(e, 'department', record.key)}
+                onKeyPress={e => this.handleKeyPress(e, record.key)}
+                placeholder="所属部门"
+              />
+            );
+          }
+          return text;
+        },
+      },
+      {
+        title: '操作',
+        key: 'action',
+        render: (text, record) => {
+          const { loading } = this.state;
+          if (!!record.editable && loading) {
+            return null;
+          }
+          if (record.editable) {
+            if (record.isNew) {
+              return (
+                <span>
+                  <a onClick={e => this.saveRow(e, record.key)}>添加</a>
+                  <Divider type="vertical" />
+                  <Popconfirm title="是否要删除此行？" onConfirm={() => this.remove(record.key)}>
+                    <a>删除</a>
+                  </Popconfirm>
+                </span>
+              );
+            }
+            return (
+              <span>
+                <a onClick={e => this.saveRow(e, record.key)}>保存</a>
+                <Divider type="vertical" />
+                <a onClick={e => this.cancel(e, record.key)}>取消</a>
+              </span>
+            );
+          }
+          return (
+            <span>
+              <a onClick={e => this.toggleEditable(e, record.key)}>编辑</a>
+              <Divider type="vertical" />
+              <Popconfirm title="是否要删除此行？" onConfirm={() => this.remove(record.key)}>
+                <a>删除</a>
+              </Popconfirm>
+            </span>
+          );
+        },
+      },
+    ];
+
+    const { loading, data } = this.state;
+
+    return (
+      <Fragment>
+        <Table
+          loading={loading}
+          columns={columns}
+          dataSource={data}
+          pagination={false}
+          rowClassName={record => (record.editable ? styles.editable : '')}
+        />
+        <Button
+          style={{ width: '100%', marginTop: 16, marginBottom: 8 }}
+          type="dashed"
+          onClick={this.newMember}
+          icon="plus"
+        >
+          新增成员
+        </Button>
+      </Fragment>
+    );
+  }
+}
+
+export default TableForm;

+import React, { PureComponent } from 'react';
+import {
+  Card,
+  Button,
+  Form,
+  Icon,
+  Col,
+  Row,
+  DatePicker,
+  TimePicker,
+  Input,
+  Select,
+  Popover,
+} from 'antd';
+import { connect } from 'dva';
+import { FooterToolbar } from 'ant-design-pro';
+import PageHeaderWrapper from './components/PageHeaderWrapper';
+import TableForm from './components/TableForm';
+import styles from './style.less';
+
+const { Option } = Select;
+const { RangePicker } = DatePicker;
+
+const fieldLabels = {
+  name: '仓库名',
+  url: '仓库域名',
+  owner: '仓库管理员',
+  approver: '审批人',
+  dateRange: '生效日期',
+  type: '仓库类型',
+  name2: '任务名',
+  url2: '任务描述',
+  owner2: '执行人',
+  approver2: '责任人',
+  dateRange2: '生效日期',
+  type2: '任务类型',
+};
+
+const tableData = [
+  {
+    key: '1',
+    workId: '00001',
+    name: 'John Brown',
+    department: 'New York No. 1 Lake Park',
+  },
+  {
+    key: '2',
+    workId: '00002',
+    name: 'Jim Green',
+    department: 'London No. 1 Lake Park',
+  },
+  {
+    key: '3',
+    workId: '00003',
+    name: 'Joe Black',
+    department: 'Sidney No. 1 Lake Park',
+  },
+];
+
+@connect(({ loading }) => ({
+  submitting: loading.effects['BLOCK_NAME_CAMEL_CASE/submitAdvancedForm'],
+}))
+@Form.create()
+class PAGE_NAME_UPPER_CAMEL_CASE extends PureComponent {
+  state = {
+    width: '100%',
+  };
+
+  componentDidMount() {
+    window.addEventListener('resize', this.resizeFooterToolbar, { passive: true });
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.resizeFooterToolbar);
+  }
+
+  getErrorInfo = () => {
+    const {
+      form: { getFieldsError },
+    } = this.props;
+    const errors = getFieldsError();
+    const errorCount = Object.keys(errors).filter(key => errors[key]).length;
+    if (!errors || errorCount === 0) {
+      return null;
+    }
+    const scrollToField = fieldKey => {
+      const labelNode = document.querySelector(`label[for="${fieldKey}"]`);
+      if (labelNode) {
+        labelNode.scrollIntoView(true);
+      }
+    };
+    const errorList = Object.keys(errors).map(key => {
+      if (!errors[key]) {
+        return null;
+      }
+      return (
+        <li key={key} className={styles.errorListItem} onClick={() => scrollToField(key)}>
+          <Icon type="cross-circle-o" className={styles.errorIcon} />
+          <div className={styles.errorMessage}>{errors[key][0]}</div>
+          <div className={styles.errorField}>{fieldLabels[key]}</div>
+        </li>
+      );
+    });
+    return (
+      <span className={styles.errorIcon}>
+        <Popover
+          title="表单校验信息"
+          content={errorList}
+          overlayClassName={styles.errorPopover}
+          trigger="click"
+          getPopupContainer={trigger => trigger.parentNode}
+        >
+          <Icon type="exclamation-circle" />
+        </Popover>
+        {errorCount}
+      </span>
+    );
+  };
+
+  resizeFooterToolbar = () => {
+    requestAnimationFrame(() => {
+      const sider = document.querySelectorAll('.ant-layout-sider')[0];
+      if (sider) {
+        const width = `calc(100% - ${sider.style.width})`;
+        const { width: stateWidth } = this.state;
+        if (stateWidth !== width) {
+          this.setState({ width });
+        }
+      }
+    });
+  };
+
+  validate = () => {
+    const {
+      form: { validateFieldsAndScroll },
+      dispatch,
+    } = this.props;
+    validateFieldsAndScroll((error, values) => {
+      if (!error) {
+        // submit the values
+        dispatch({
+          type: 'BLOCK_NAME_CAMEL_CASE/submitAdvancedForm',
+          payload: values,
+        });
+      }
+    });
+  };
+
+  render() {
+    const {
+      form: { getFieldDecorator },
+      submitting,
+    } = this.props;
+    const { width } = this.state;
+
+    return (
+      <PageHeaderWrapper
+        title="高级表单"
+        content="高级表单常见于一次性输入和提交大批量数据的场景。"
+        wrapperClassName={styles.advancedForm}
+      >
+        <Card title="仓库管理" className={styles.card} bordered={false}>
+          <Form layout="vertical" hideRequiredMark>
+            <Row gutter={16}>
+              <Col lg={6} md={12} sm={24}>
+                <Form.Item label={fieldLabels.name}>
+                  {getFieldDecorator('name', {
+                    rules: [{ required: true, message: '请输入仓库名称' }],
+                  })(<Input placeholder="请输入仓库名称" />)}
+                </Form.Item>
+              </Col>
+              <Col xl={{ span: 6, offset: 2 }} lg={{ span: 8 }} md={{ span: 12 }} sm={24}>
+                <Form.Item label={fieldLabels.url}>
+                  {getFieldDecorator('url', {
+                    rules: [{ required: true, message: '请选择' }],
+                  })(
+                    <Input
+                      style={{ width: '100%' }}
+                      addonBefore="http://"
+                      addonAfter=".com"
+                      placeholder="请输入"
+                    />
+                  )}
+                </Form.Item>
+              </Col>
+              <Col xl={{ span: 8, offset: 2 }} lg={{ span: 10 }} md={{ span: 24 }} sm={24}>
+                <Form.Item label={fieldLabels.owner}>
+                  {getFieldDecorator('owner', {
+                    rules: [{ required: true, message: '请选择管理员' }],
+                  })(
+                    <Select placeholder="请选择管理员">
+                      <Option value="xiao">付晓晓</Option>
+                      <Option value="mao">周毛毛</Option>
+                    </Select>
+                  )}
+                </Form.Item>
+              </Col>
+            </Row>
+            <Row gutter={16}>
+              <Col lg={6} md={12} sm={24}>
+                <Form.Item label={fieldLabels.approver}>
+                  {getFieldDecorator('approver', {
+                    rules: [{ required: true, message: '请选择审批员' }],
+                  })(
+                    <Select placeholder="请选择审批员">
+                      <Option value="xiao">付晓晓</Option>
+                      <Option value="mao">周毛毛</Option>
+                    </Select>
+                  )}
+                </Form.Item>
+              </Col>
+              <Col xl={{ span: 6, offset: 2 }} lg={{ span: 8 }} md={{ span: 12 }} sm={24}>
+                <Form.Item label={fieldLabels.dateRange}>
+                  {getFieldDecorator('dateRange', {
+                    rules: [{ required: true, message: '请选择生效日期' }],
+                  })(
+                    <RangePicker placeholder={['开始日期', '结束日期']} style={{ width: '100%' }} />
+                  )}
+                </Form.Item>
+              </Col>
+              <Col xl={{ span: 8, offset: 2 }} lg={{ span: 10 }} md={{ span: 24 }} sm={24}>
+                <Form.Item label={fieldLabels.type}>
+                  {getFieldDecorator('type', {
+                    rules: [{ required: true, message: '请选择仓库类型' }],
+                  })(
+                    <Select placeholder="请选择仓库类型">
+                      <Option value="private">私密</Option>
+                      <Option value="public">公开</Option>
+                    </Select>
+                  )}
+                </Form.Item>
+              </Col>
+            </Row>
+          </Form>
+        </Card>
+        <Card title="任务管理" className={styles.card} bordered={false}>
+          <Form layout="vertical" hideRequiredMark>
+            <Row gutter={16}>
+              <Col lg={6} md={12} sm={24}>
+                <Form.Item label={fieldLabels.name2}>
+                  {getFieldDecorator('name2', {
+                    rules: [{ required: true, message: '请输入' }],
+                  })(<Input placeholder="请输入" />)}
+                </Form.Item>
+              </Col>
+              <Col xl={{ span: 6, offset: 2 }} lg={{ span: 8 }} md={{ span: 12 }} sm={24}>
+                <Form.Item label={fieldLabels.url2}>
+                  {getFieldDecorator('url2', {
+                    rules: [{ required: true, message: '请选择' }],
+                  })(<Input placeholder="请输入" />)}
+                </Form.Item>
+              </Col>
+              <Col xl={{ span: 8, offset: 2 }} lg={{ span: 10 }} md={{ span: 24 }} sm={24}>
+                <Form.Item label={fieldLabels.owner2}>
+                  {getFieldDecorator('owner2', {
+                    rules: [{ required: true, message: '请选择管理员' }],
+                  })(
+                    <Select placeholder="请选择管理员">
+                      <Option value="xiao">付晓晓</Option>
+                      <Option value="mao">周毛毛</Option>
+                    </Select>
+                  )}
+                </Form.Item>
+              </Col>
+            </Row>
+            <Row gutter={16}>
+              <Col lg={6} md={12} sm={24}>
+                <Form.Item label={fieldLabels.approver2}>
+                  {getFieldDecorator('approver2', {
+                    rules: [{ required: true, message: '请选择审批员' }],
+                  })(
+                    <Select placeholder="请选择审批员">
+                      <Option value="xiao">付晓晓</Option>
+                      <Option value="mao">周毛毛</Option>
+                    </Select>
+                  )}
+                </Form.Item>
+              </Col>
+              <Col xl={{ span: 6, offset: 2 }} lg={{ span: 8 }} md={{ span: 12 }} sm={24}>
+                <Form.Item label={fieldLabels.dateRange2}>
+                  {getFieldDecorator('dateRange2', {
+                    rules: [{ required: true, message: '请输入' }],
+                  })(
+                    <TimePicker
+                      placeholder="提醒时间"
+                      style={{ width: '100%' }}
+                      getPopupContainer={trigger => trigger.parentNode}
+                    />
+                  )}
+                </Form.Item>
+              </Col>
+              <Col xl={{ span: 8, offset: 2 }} lg={{ span: 10 }} md={{ span: 24 }} sm={24}>
+                <Form.Item label={fieldLabels.type2}>
+                  {getFieldDecorator('type2', {
+                    rules: [{ required: true, message: '请选择仓库类型' }],
+                  })(
+                    <Select placeholder="请选择仓库类型">
+                      <Option value="private">私密</Option>
+                      <Option value="public">公开</Option>
+                    </Select>
+                  )}
+                </Form.Item>
+              </Col>
+            </Row>
+          </Form>
+        </Card>
+        <Card title="成员管理" bordered={false}>
+          {getFieldDecorator('members', {
+            initialValue: tableData,
+          })(<TableForm />)}
+        </Card>
+        <FooterToolbar style={{ width }}>
+          {this.getErrorInfo()}
+          <Button type="primary" onClick={this.validate} loading={submitting}>
+            提交
+          </Button>
+        </FooterToolbar>
+      </PageHeaderWrapper>
+    );
+  }
+}
+
+export default PAGE_NAME_UPPER_CAMEL_CASE;

+export default {
+  'BLOCK_NAME.basic.title': 'Basic form',
+  'BLOCK_NAME.basic.description':
+    'Form pages are used to collect or verify information to users, and basic forms are common in scenarios where there are fewer data items.',
+
+  'BLOCK_NAME.email.required': 'Please enter your email!',
+  'BLOCK_NAME.email.wrong-format': 'The email address is in the wrong format!',
+  'BLOCK_NAME.userName.required': 'Please enter your userName!',
+  'BLOCK_NAME.password.required': 'Please enter your password!',
+  'BLOCK_NAME.password.twice': 'The passwords entered twice do not match!',
+  'BLOCK_NAME.strength.msg':
+    "Please enter at least 6 characters and don't use passwords that are easy to guess.",
+  'BLOCK_NAME.strength.strong': 'Strength: strong',
+  'BLOCK_NAME.strength.medium': 'Strength: medium',
+  'BLOCK_NAME.strength.short': 'Strength: too short',
+  'BLOCK_NAME.confirm-password.required': 'Please confirm your password!',
+  'BLOCK_NAME.phone-number.required': 'Please enter your phone number!',
+  'BLOCK_NAME.phone-number.wrong-format': 'Malformed phone number!',
+  'BLOCK_NAME.verification-code.required': 'Please enter the verification code!',
+  'BLOCK_NAME.title.required': 'Please enter a title',
+  'BLOCK_NAME.date.required': 'Please select the start and end date',
+  'BLOCK_NAME.goal.required': 'Please enter a description of the goal',
+  'BLOCK_NAME.standard.required': 'Please enter a metric',
+
+  'BLOCK_NAME.form.get-captcha': 'Get Captcha',
+  'BLOCK_NAME.captcha.second': 'sec',
+  'BLOCK_NAME.form.optional': ' (optional) ',
+  'BLOCK_NAME.form.submit': 'Submit',
+  'BLOCK_NAME.form.save': 'Save',
+  'BLOCK_NAME.email.placeholder': 'Email',
+  'BLOCK_NAME.password.placeholder': 'Password',
+  'BLOCK_NAME.confirm-password.placeholder': 'Confirm password',
+  'BLOCK_NAME.phone-number.placeholder': 'Phone number',
+  'BLOCK_NAME.verification-code.placeholder': 'Verification code',
+  'BLOCK_NAME.title.label': 'Title',
+  'BLOCK_NAME.title.placeholder': 'Give the target a name',
+  'BLOCK_NAME.date.label': 'Start and end date',
+  'BLOCK_NAME.placeholder.start': 'Start date',
+  'BLOCK_NAME.placeholder.end': 'End date',
+  'BLOCK_NAME.goal.label': 'Goal description',
+  'BLOCK_NAME.goal.placeholder': 'Please enter your work goals',
+  'BLOCK_NAME.standard.label': 'Metrics',
+  'BLOCK_NAME.standard.placeholder': 'Please enter a metric',
+  'BLOCK_NAME.client.label': 'Client',
+  'BLOCK_NAME.label.tooltip': 'Target service object',
+  'BLOCK_NAME.client.placeholder':
+    'Please describe your customer service, internal customers directly @ Name / job number',
+  'BLOCK_NAME.invites.label': 'Inviting critics',
+  'BLOCK_NAME.invites.placeholder': 'Please direct @ Name / job number, you can invite up to 5 people',
+  'BLOCK_NAME.weight.label': 'Weight',
+  'BLOCK_NAME.weight.placeholder': 'Please enter weight',
+  'BLOCK_NAME.public.label': 'Target disclosure',
+  'BLOCK_NAME.label.help': 'Customers and invitees are shared by default',
+  'BLOCK_NAME.radio.public': 'Public',
+  'BLOCK_NAME.radio.partially-public': 'Partially public',
+  'BLOCK_NAME.radio.private': 'Private',
+  'BLOCK_NAME.publicUsers.placeholder': 'Open to',
+  'BLOCK_NAME.option.A': 'Colleague A',
+  'BLOCK_NAME.option.B': 'Colleague B',
+  'BLOCK_NAME.option.C': 'Colleague C',
+};

+export default {
+  'BLOCK_NAME.basic.title': 'Basic form',
+  'BLOCK_NAME.basic.description':
+    'Form pages are used to collect or verify information to users, and basic forms are common in scenarios where there are fewer data items.',
+
+  'BLOCK_NAME.email.required': 'Por favor insira seu email!',
+  'BLOCK_NAME.email.wrong-format': 'O email está errado!',
+  'BLOCK_NAME.userName.required': 'Por favor insira nome de usuário!',
+  'BLOCK_NAME.password.required': 'Por favor insira sua senha!',
+  'BLOCK_NAME.password.twice': 'As senhas não estão iguais!',
+  'BLOCK_NAME.strength.msg':
+    'Por favor insira pelo menos 6 caracteres e não use senhas fáceis de adivinhar.',
+  'BLOCK_NAME.strength.strong': 'Força: forte',
+  'BLOCK_NAME.strength.medium': 'Força: média',
+  'BLOCK_NAME.strength.short': 'Força: curta',
+  'BLOCK_NAME.confirm-password.required': 'Por favor confirme sua senha!',
+  'BLOCK_NAME.phone-number.required': 'Por favor insira seu telefone!',
+  'BLOCK_NAME.phone-number.wrong-format': 'Formato de telefone errado!',
+  'BLOCK_NAME.verification-code.required': 'Por favor insira seu código de verificação!',
+
+  'BLOCK_NAME.form.get-captcha': 'Get Captcha',
+  'BLOCK_NAME.captcha.second': 'sec',
+  'BLOCK_NAME.email.placeholder': 'Email',
+  'BLOCK_NAME.password.placeholder': 'Senha',
+  'BLOCK_NAME.confirm-password.placeholder': 'Confirme a senha',
+  'BLOCK_NAME.phone-number.placeholder': 'Telefone',
+  'BLOCK_NAME.verification-code.placeholder': 'Código de verificação',
+  'BLOCK_NAME.form.optional': ' (optional) ',
+  'BLOCK_NAME.form.submit': 'Submit',
+  'BLOCK_NAME.form.save': 'Save',
+  'BLOCK_NAME.title.label': 'Title',
+  'BLOCK_NAME.title.placeholder': 'Give the target a name',
+  'BLOCK_NAME.date.label': 'Start and end date',
+  'BLOCK_NAME.placeholder.start': 'Start date',
+  'BLOCK_NAME.placeholder.end': 'End date',
+  'BLOCK_NAME.goal.label': 'Goal description',
+  'BLOCK_NAME.goal.placeholder': 'Please enter your work goals',
+  'BLOCK_NAME.standard.label': 'Metrics',
+  'BLOCK_NAME.standard.placeholder': 'Please enter a metric',
+  'BLOCK_NAME.client.label': 'Client',
+  'BLOCK_NAME.label.tooltip': 'Target service object',
+  'BLOCK_NAME.client.placeholder':
+    'Please describe your customer service, internal customers directly @ Name / job number',
+  'BLOCK_NAME.invites.label': 'Inviting critics',
+  'BLOCK_NAME.invites.placeholder': 'Please direct @ Name / job number, you can invite up to 5 people',
+  'BLOCK_NAME.weight.label': 'Weight',
+  'BLOCK_NAME.weight.placeholder': 'Please enter weight',
+  'BLOCK_NAME.public.label': 'Target disclosure',
+  'BLOCK_NAME.label.help': 'Customers and invitees are shared by default',
+  'BLOCK_NAME.radio.public': 'Public',
+  'BLOCK_NAME.radio.partially-public': 'Partially public',
+  'BLOCK_NAME.radio.private': 'Private',
+  'BLOCK_NAME.publicUsers.placeholder': 'Open to',
+  'BLOCK_NAME.option.A': 'Colleague A',
+  'BLOCK_NAME.option.B': 'Colleague B',
+  'BLOCK_NAME.option.C': 'Colleague C',
+};

+export default {
+  'BLOCK_NAME.basic.title': '基础表单',
+  'BLOCK_NAME.basic.description':
+    '表单页用于向用户收集或验证信息，基础表单常见于数据项较少的表单场景。',
+
+  'BLOCK_NAME.email.required': '请输入邮箱地址！',
+  'BLOCK_NAME.email.wrong-format': '邮箱地址格式错误！',
+  'BLOCK_NAME.userName.required': '请输入用户名!',
+  'BLOCK_NAME.password.required': '请输入密码！',
+  'BLOCK_NAME.password.twice': '两次输入的密码不匹配!',
+  'BLOCK_NAME.strength.msg': '请至少输入 6 个字符。请不要使用容易被猜到的密码。',
+  'BLOCK_NAME.strength.strong': '强度：强',
+  'BLOCK_NAME.strength.medium': '强度：中',
+  'BLOCK_NAME.strength.short': '强度：太短',
+  'BLOCK_NAME.confirm-password.required': '请确认密码！',
+  'BLOCK_NAME.phone-number.required': '请输入手机号！',
+  'BLOCK_NAME.phone-number.wrong-format': '手机号格式错误！',
+  'BLOCK_NAME.verification-code.required': '请输入验证码！',
+  'BLOCK_NAME.title.required': '请输入标题',
+  'BLOCK_NAME.date.required': '请选择起止日期',
+  'BLOCK_NAME.goal.required': '请输入目标描述',
+  'BLOCK_NAME.standard.required': '请输入衡量标准',
+
+  'BLOCK_NAME.form.get-captcha': '获取验证码',
+  'BLOCK_NAME.captcha.second': '秒',
+  'BLOCK_NAME.form.optional': '（选填）',
+  'BLOCK_NAME.form.submit': '提交',
+  'BLOCK_NAME.form.save': '保存',
+  'BLOCK_NAME.email.placeholder': '邮箱',
+  'BLOCK_NAME.password.placeholder': '至少6位密码，区分大小写',
+  'BLOCK_NAME.confirm-password.placeholder': '确认密码',
+  'BLOCK_NAME.phone-number.placeholder': '手机号',
+  'BLOCK_NAME.verification-code.placeholder': '验证码',
+  'BLOCK_NAME.title.label': '标题',
+  'BLOCK_NAME.title.placeholder': '给目标起个名字',
+  'BLOCK_NAME.date.label': '起止日期',
+  'BLOCK_NAME.placeholder.start': '开始日期',
+  'BLOCK_NAME.placeholder.end': '结束日期',
+  'BLOCK_NAME.goal.label': '目标描述',
+  'BLOCK_NAME.goal.placeholder': '请输入你的阶段性工作目标',
+  'BLOCK_NAME.standard.label': '衡量标准',
+  'BLOCK_NAME.standard.placeholder': '请输入衡量标准',
+  'BLOCK_NAME.client.label': '客户',
+  'BLOCK_NAME.label.tooltip': '目标的服务对象',
+  'BLOCK_NAME.client.placeholder': '请描述你服务的客户，内部客户直接 @姓名／工号',
+  'BLOCK_NAME.invites.label': '邀评人',
+  'BLOCK_NAME.invites.placeholder': '请直接 @姓名／工号，最多可邀请 5 人',
+  'BLOCK_NAME.weight.label': '权重',
+  'BLOCK_NAME.weight.placeholder': '请输入',
+  'BLOCK_NAME.public.label': '目标公开',
+  'BLOCK_NAME.label.help': '客户、邀评人默认被分享',
+  'BLOCK_NAME.radio.public': '公开',
+  'BLOCK_NAME.radio.partially-public': '部分公开',
+  'BLOCK_NAME.radio.private': '不公开',
+  'BLOCK_NAME.publicUsers.placeholder': '公开给',
+  'BLOCK_NAME.option.A': '同事甲',
+  'BLOCK_NAME.option.B': '同事乙',
+  'BLOCK_NAME.option.C': '同事丙',
+};

+export default {
+  'BLOCK_NAME.basic.title': '基礎表單',
+  'BLOCK_NAME.basic.description':
+    '表單頁用於向用戶收集或驗證信息，基礎表單常見於數據項較少的表單場景。',
+
+  'BLOCK_NAME.email.required': '請輸入郵箱地址！',
+  'BLOCK_NAME.email.wrong-format': '郵箱地址格式錯誤！',
+  'BLOCK_NAME.userName.required': '請輸入賬戶!',
+  'BLOCK_NAME.password.required': '請輸入密碼！',
+  'BLOCK_NAME.password.twice': '兩次輸入的密碼不匹配!',
+  'BLOCK_NAME.strength.msg': '請至少輸入 6 個字符。請不要使用容易被猜到的密碼。',
+  'BLOCK_NAME.strength.strong': '強度：強',
+  'BLOCK_NAME.strength.medium': '強度：中',
+  'BLOCK_NAME.strength.short': '強度：太短',
+  'BLOCK_NAME.confirm-password.required': '請確認密碼！',
+  'BLOCK_NAME.phone-number.required': '請輸入手機號！',
+  'BLOCK_NAME.phone-number.wrong-format': '手機號格式錯誤！',
+  'BLOCK_NAME.verification-code.required': '請輸入驗證碼！',
+  'BLOCK_NAME.title.required': '請輸入標題',
+  'BLOCK_NAME.date.required': '請選擇起止日期',
+  'BLOCK_NAME.goal.required': '請輸入目標描述',
+  'BLOCK_NAME.standard.required': '請輸入衡量標淮',
+
+  'BLOCK_NAME.form.get-captcha': '獲取驗證碼',
+  'BLOCK_NAME.captcha.second': '秒',
+  'BLOCK_NAME.form.optional': '（選填）',
+  'BLOCK_NAME.form.submit': '提交',
+  'BLOCK_NAME.form.save': '保存',
+  'BLOCK_NAME.email.placeholder': '郵箱',
+  'BLOCK_NAME.password.placeholder': '至少6位密碼，區分大小寫',
+  'BLOCK_NAME.confirm-password.placeholder': '確認密碼',
+  'BLOCK_NAME.phone-number.placeholder': '手機號',
+  'BLOCK_NAME.verification-code.placeholder': '驗證碼',
+  'BLOCK_NAME.title.label': '標題',
+  'BLOCK_NAME.title.placeholder': '給目標起個名字',
+  'BLOCK_NAME.date.label': '起止日期',
+  'BLOCK_NAME.placeholder.start': '開始日期',
+  'BLOCK_NAME.placeholder.end': '結束日期',
+  'BLOCK_NAME.goal.label': '目標描述',
+  'BLOCK_NAME.goal.placeholder': '請輸入妳的階段性工作目標',
+  'BLOCK_NAME.standard.label': '衡量標淮',
+  'BLOCK_NAME.standard.placeholder': '請輸入衡量標淮',
+  'BLOCK_NAME.client.label': '客戶',
+  'BLOCK_NAME.label.tooltip': '目標的服務對象',
+  'BLOCK_NAME.client.placeholder': '請描述妳服務的客戶，內部客戶直接 @姓名／工號',
+  'BLOCK_NAME.invites.label': '邀評人',
+  'BLOCK_NAME.invites.placeholder': '請直接 @姓名／工號，最多可邀請 5 人',
+  'BLOCK_NAME.weight.label': '權重',
+  'BLOCK_NAME.weight.placeholder': '請輸入',
+  'BLOCK_NAME.public.label': '目標公開',
+  'BLOCK_NAME.label.help': '客戶、邀評人默認被分享',
+  'BLOCK_NAME.radio.public': '公開',
+  'BLOCK_NAME.radio.partially-public': '部分公開',
+  'BLOCK_NAME.radio.private': '不公開',
+  'BLOCK_NAME.publicUsers.placeholder': '公開給',
+  'BLOCK_NAME.option.A': '同事甲',
+  'BLOCK_NAME.option.B': '同事乙',
+  'BLOCK_NAME.option.C': '同事丙',
+};

+import { message } from 'antd';
+import { fakeSubmitForm } from './service';
+
+export default {
+  namespace: 'BLOCK_NAME_CAMEL_CASE',
+
+  state: {},
+
+  effects: {
+    *submitAdvancedForm({ payload }, { call }) {
+      yield call(fakeSubmitForm, payload);
+      message.success('提交成功');
+    },
+  },
+};

+import request from 'umi-request';
+
+export async function fakeSubmitForm(params) {
+  return request('/api/BLOCK_NAME/forms', {
+    method: 'POST',
+    data: params,
+  });
+}

+@import '~antd/lib/style/themes/default.less';
+
+.card {
+  margin-bottom: 24px;
+}
+
+.heading {
+  font-size: 14px;
+  line-height: 22px;
+  margin: 0 0 16px 0;
+}
+
+.steps:global(.ant-steps) {
+  max-width: 750px;
+  margin: 16px auto;
+}
+
+.errorIcon {
+  cursor: pointer;
+  color: @error-color;
+  margin-right: 24px;
+  i {
+    margin-right: 4px;
+  }
+}
+
+.errorPopover {
+  :global {
+    .ant-popover-inner-content {
+      padding: 0;
+      max-height: 290px;
+      overflow: auto;
+      min-width: 256px;
+    }
+  }
+}
+
+.errorListItem {
+  list-style: none;
+  border-bottom: 1px solid @border-color-split;
+  padding: 8px 16px;
+  cursor: pointer;
+  transition: all 0.3s;
+  &:hover {
+    background: @primary-1;
+  }
+  &:last-child {
+    border: 0;
+  }
+  .errorIcon {
+    color: @error-color;
+    float: left;
+    margin-top: 4px;
+    margin-right: 12px;
+    padding-bottom: 22px;
+  }
+  .errorField {
+    font-size: 12px;
+    color: @text-color-secondary;
+    margin-top: 2px;
+  }
+}
+
+.editable {
+  td {
+    padding-top: 13px !important;
+    padding-bottom: 12.5px !important;
+  }
+}
+
+// custom footer for fixed footer toolbar
+.advancedForm + div {
+  padding-bottom: 64px;
+}
+
+.advancedForm {
+  :global {
+    .ant-form .ant-row:last-child .ant-form-item {
+      margin-bottom: 24px;
+    }
+    .ant-table td {
+      transition: none !important;
+    }
+  }
+}
+
+.optional {
+  color: @text-color-secondary;
+  font-style: normal;
+}

+/yarn.lock
+/package-lock.json
+/dist
+/node_modules
+
+.umi
+.umi-production