refact: ant design pro advance form

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

@@ -11,16 +11,17 @@
     "url": "https://github.com/umijs/umi-blocks/advancedform"
     "url": "https://github.com/umijs/umi-blocks/advancedform"
   },
   },
   "dependencies": {
   "dependencies": {
-    "react": "^16.6.3",
-    "dva": "^2.4.0",
     "ant-design-pro": "^2.1.1",
     "ant-design-pro": "^2.1.1",
     "antd": "^3.10.9",
     "antd": "^3.10.9",
-    "lodash": "^4.17.10",
-    "qs": "^6.6.0",
+    "dva": "^2.4.0",
     "hash.js": "^1.1.5",
     "hash.js": "^1.1.5",
+    "lodash": "^4.17.10",
+    "mockjs": "*",
     "moment": "^2.22.2",
     "moment": "^2.22.2",
     "nzh": "^1.0.3",
     "nzh": "^1.0.3",
-    "mockjs": "*"
+    "qs": "^6.6.0",
+    "react": "^16.6.3",
+    "umi-request": "^1.0.0"
   },
   },
   "devDependencies": {
   "devDependencies": {
     "umi": "^2.3.0-beta.1",
     "umi": "^2.3.0-beta.1",

+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="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 React, { PureComponent, Fragment } from 'react';
 import { Table, Button, Input, message, Popconfirm, Divider } from 'antd';
 import { Table, Button, Input, message, Popconfirm, Divider } from 'antd';
 import isEqual from 'lodash/isEqual';
 import isEqual from 'lodash/isEqual';
-import styles from './style.less';
+import styles from '../style.less';
 
 
 class TableForm extends PureComponent {
 class TableForm extends PureComponent {
   index = 0;
   index = 0;

-module.exports = {
-  navTheme: 'dark', // theme for nav menu
-  primaryColor: '#1890FF', // primary color of ant design
-  layout: 'sidemenu', // nav menu position: sidemenu or topmenu
-  contentWidth: 'Fluid', // layout of content: Fluid or Fixed, only works when layout is topmenu
-  fixedHeader: false, // sticky header
-  autoHideHeader: false, // auto hide header
-  fixSiderbar: false, // sticky siderbar
-};

@@ -13,9 +13,9 @@ import {
   Popover,
   Popover,
 } from 'antd';
 } from 'antd';
 import { connect } from 'dva';
 import { connect } from 'dva';
-import FooterToolbar from 'ant-design-pro/lib/FooterToolbar';
-import PageHeaderWrapper from '@/components/PageHeaderWrapper';
-import TableForm from './TableForm';
+import { FooterToolbar } from 'ant-design-pro';
+import PageHeaderWrapper from './components/PageHeaderWrapper';
+import TableForm from './components/TableForm';
 import styles from './style.less';
 import styles from './style.less';
 
 
 const { Option } = Select;
 const { Option } = Select;

 export default {
 export default {
+  'app.forms.basic.title': 'Basic form',
+  'app.forms.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.',
+
+  'validation.email.required': 'Please enter your email!',
+  'validation.email.wrong-format': 'The email address is in the wrong format!',
+  'validation.userName.required': 'Please enter your userName!',
+  'validation.password.required': 'Please enter your password!',
+  'validation.password.twice': 'The passwords entered twice do not match!',
+  'validation.password.strength.msg':
+    "Please enter at least 6 characters and don't use passwords that are easy to guess.",
+  'validation.password.strength.strong': 'Strength: strong',
+  'validation.password.strength.medium': 'Strength: medium',
+  'validation.password.strength.short': 'Strength: too short',
+  'validation.confirm-password.required': 'Please confirm your password!',
+  'validation.phone-number.required': 'Please enter your phone number!',
+  'validation.phone-number.wrong-format': 'Malformed phone number!',
+  'validation.verification-code.required': 'Please enter the verification code!',
+  'validation.title.required': 'Please enter a title',
+  'validation.date.required': 'Please select the start and end date',
+  'validation.goal.required': 'Please enter a description of the goal',
+  'validation.standard.required': 'Please enter a metric',
+
   'form.get-captcha': 'Get Captcha',
   'form.get-captcha': 'Get Captcha',
   'form.captcha.second': 'sec',
   'form.captcha.second': 'sec',
   'form.optional': ' (optional) ',
   'form.optional': ' (optional) ',

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

 export default {
 export default {
+  'app.forms.basic.title': '基础表单',
+  'app.forms.basic.description':
+    '表单页用于向用户收集或验证信息，基础表单常见于数据项较少的表单场景。',
+
+  'validation.email.required': '请输入邮箱地址！',
+  'validation.email.wrong-format': '邮箱地址格式错误！',
+  'validation.userName.required': '请输入用户名!',
+  'validation.password.required': '请输入密码！',
+  'validation.password.twice': '两次输入的密码不匹配!',
+  'validation.password.strength.msg': '请至少输入 6 个字符。请不要使用容易被猜到的密码。',
+  'validation.password.strength.strong': '强度：强',
+  'validation.password.strength.medium': '强度：中',
+  'validation.password.strength.short': '强度：太短',
+  'validation.confirm-password.required': '请确认密码！',
+  'validation.phone-number.required': '请输入手机号！',
+  'validation.phone-number.wrong-format': '手机号格式错误！',
+  'validation.verification-code.required': '请输入验证码！',
+  'validation.title.required': '请输入标题',
+  'validation.date.required': '请选择起止日期',
+  'validation.goal.required': '请输入目标描述',
+  'validation.standard.required': '请输入衡量标准',
+  
   'form.get-captcha': '获取验证码',
   'form.get-captcha': '获取验证码',
   'form.captcha.second': '秒',
   'form.captcha.second': '秒',
   'form.optional': '（选填）',
   'form.optional': '（选填）',

 export default {
 export default {
+  'app.forms.basic.title': '基礎表單',
+  'app.forms.basic.description':
+    '表單頁用於向用戶收集或驗證信息，基礎表單常見於數據項較少的表單場景。',
+    
+  'validation.email.required': '請輸入郵箱地址！',
+  'validation.email.wrong-format': '郵箱地址格式錯誤！',
+  'validation.userName.required': '請輸入賬戶!',
+  'validation.password.required': '請輸入密碼！',
+  'validation.password.twice': '兩次輸入的密碼不匹配!',
+  'validation.password.strength.msg': '請至少輸入 6 個字符。請不要使用容易被猜到的密碼。',
+  'validation.password.strength.strong': '強度：強',
+  'validation.password.strength.medium': '強度：中',
+  'validation.password.strength.short': '強度：太短',
+  'validation.confirm-password.required': '請確認密碼！',
+  'validation.phone-number.required': '請輸入手機號！',
+  'validation.phone-number.wrong-format': '手機號格式錯誤！',
+  'validation.verification-code.required': '請輸入驗證碼！',
+  'validation.title.required': '請輸入標題',
+  'validation.date.required': '請選擇起止日期',
+  'validation.goal.required': '請輸入目標描述',
+  'validation.standard.required': '請輸入衡量標淮',
+
   'form.get-captcha': '獲取驗證碼',
   'form.get-captcha': '獲取驗證碼',
   'form.captcha.second': '秒',
   'form.captcha.second': '秒',
   'form.optional': '（選填）',
   'form.optional': '（選填）',

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

-import { routerRedux } from 'dva/router';
-import { message } from 'antd';
-import { fakeSubmitForm } from '@/services/api';
-
-export default {
-  namespace: 'form',
-
-  state: {
-    step: {
-      payAccount: 'ant-design@alipay.com',
-      receiverAccount: 'test@example.com',
-      receiverName: 'Alex',
-      amount: '500',
-    },
-  },
-
-  effects: {
-    *submitRegularForm({ payload }, { call }) {
-      yield call(fakeSubmitForm, payload);
-      message.success('提交成功');
-    },
-    *submitStepForm({ payload }, { call, put }) {
-      yield call(fakeSubmitForm, payload);
-      yield put({
-        type: 'saveStepFormData',
-        payload,
-      });
-      yield put(routerRedux.push('/form/step-form/result'));
-    },
-    *submitAdvancedForm({ payload }, { call }) {
-      yield call(fakeSubmitForm, payload);
-      message.success('提交成功');
-    },
-  },
-
-  reducers: {
-    saveStepFormData(state, { payload }) {
-      return {
-        ...state,
-        step: {
-          ...state.step,
-          ...payload,
-        },
-      };
-    },
-  },
-};

-import { message } from 'antd';
-import defaultSettings from '../defaultSettings';
-
-let lessNodesAppended;
-const updateTheme = primaryColor => {
-  // Don't compile less in production!
-  if (APP_TYPE !== 'site') {
-    return;
-  }
-  // Determine if the component is remounted
-  if (!primaryColor) {
-    return;
-  }
-  const hideMessage = message.loading('正在编译主题！', 0);
-  function buildIt() {
-    if (!window.less) {
-      return;
-    }
-    setTimeout(() => {
-      window.less
-        .modifyVars({
-          '@primary-color': primaryColor,
-        })
-        .then(() => {
-          hideMessage();
-        })
-        .catch(() => {
-          message.error('Failed to update theme');
-          hideMessage();
-        });
-    }, 200);
-  }
-  if (!lessNodesAppended) {
-    // insert less.js and color.less
-    const lessStyleNode = document.createElement('link');
-    const lessConfigNode = document.createElement('script');
-    const lessScriptNode = document.createElement('script');
-    lessStyleNode.setAttribute('rel', 'stylesheet/less');
-    lessStyleNode.setAttribute('href', '/color.less');
-    lessConfigNode.innerHTML = `
-      window.less = {
-        async: true,
-        env: 'production',
-        javascriptEnabled: true
-      };
-    `;
-    lessScriptNode.src = 'https://gw.alipayobjects.com/os/lib/less.js/3.8.1/less.min.js';
-    lessScriptNode.async = true;
-    lessScriptNode.onload = () => {
-      buildIt();
-      lessScriptNode.onload = null;
-    };
-    document.body.appendChild(lessStyleNode);
-    document.body.appendChild(lessConfigNode);
-    document.body.appendChild(lessScriptNode);
-    lessNodesAppended = true;
-  } else {
-    buildIt();
-  }
-};
-
-const updateColorWeak = colorWeak => {
-  document.body.className = colorWeak ? 'colorWeak' : '';
-};
-
-export default {
-  namespace: 'setting',
-  state: defaultSettings,
-  reducers: {
-    getSetting(state) {
-      const setting = {};
-      const urlParams = new URL(window.location.href);
-      Object.keys(state).forEach(key => {
-        if (urlParams.searchParams.has(key)) {
-          const value = urlParams.searchParams.get(key);
-          setting[key] = value === '1' ? true : value;
-        }
-      });
-      const { primaryColor, colorWeak } = setting;
-      if (state.primaryColor !== primaryColor) {
-        updateTheme(primaryColor);
-      }
-      updateColorWeak(colorWeak);
-      return {
-        ...state,
-        ...setting,
-      };
-    },
-    changeSetting(state, { payload }) {
-      const urlParams = new URL(window.location.href);
-      Object.keys(defaultSettings).forEach(key => {
-        if (urlParams.searchParams.has(key)) {
-          urlParams.searchParams.delete(key);
-        }
-      });
-      Object.keys(payload).forEach(key => {
-        if (key === 'collapse') {
-          return;
-        }
-        let value = payload[key];
-        if (value === true) {
-          value = 1;
-        }
-        if (defaultSettings[key] !== value) {
-          urlParams.searchParams.set(key, value);
-        }
-      });
-      const { primaryColor, colorWeak, contentWidth } = payload;
-      if (state.primaryColor !== primaryColor) {
-        updateTheme(primaryColor);
-      }
-      if (state.contentWidth !== contentWidth && window.dispatchEvent) {
-        window.dispatchEvent(new Event('resize'));
-      }
-      updateColorWeak(colorWeak);
-      window.history.replaceState(null, 'setting', urlParams.href);
-      return {
-        ...state,
-        ...payload,
-      };
-    },
-  },
-};

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

@@ -6,12 +6,6 @@ export default {
   namespace: 'form',
   namespace: 'form',
 
 
   state: {
   state: {
-    step: {
-      payAccount: 'ant-design@alipay.com',
-      receiverAccount: 'test@example.com',
-      receiverName: 'Alex',
-      amount: '500',
-    },
   },
   },
 
 
   effects: {
   effects: {
@@ -19,29 +13,5 @@ export default {
       yield call(fakeSubmitForm, payload);
       yield call(fakeSubmitForm, payload);
       message.success('提交成功');
       message.success('提交成功');
     },
     },
-    *submitStepForm({ payload }, { call, put }) {
-      yield call(fakeSubmitForm, payload);
-      yield put({
-        type: 'saveStepFormData',
-        payload,
-      });
-      yield put(routerRedux.push('/form/step-form/result'));
-    },
-    *submitAdvancedForm({ payload }, { call }) {
-      yield call(fakeSubmitForm, payload);
-      message.success('提交成功');
-    },
-  },
-
-  reducers: {
-    saveStepFormData(state, { payload }) {
-      return {
-        ...state,
-        step: {
-          ...state.step,
-          ...payload,
-        },
-      };
-    },
   },
   },
 };
 };

@@ -15,10 +15,6 @@ export default {
   },
   },
 
 
   effects: {
   effects: {
-    *submitRegularForm({ payload }, { call }) {
-      yield call(fakeSubmitForm, payload);
-      message.success('提交成功');
-    },
     *submitStepForm({ payload }, { call, put }) {
     *submitStepForm({ payload }, { call, put }) {
       yield call(fakeSubmitForm, payload);
       yield call(fakeSubmitForm, payload);
       yield put({
       yield put({
@@ -27,10 +23,6 @@ export default {
       });
       });
       yield put(routerRedux.push('result'));
       yield put(routerRedux.push('result'));
     },
     },
-    *submitAdvancedForm({ payload }, { call }) {
-      yield call(fakeSubmitForm, payload);
-      message.success('提交成功');
-    },
   },
   },
 
 
   reducers: {
   reducers: {