Support antd-design-pro,Added language switching on login page.

.umirc.js

@@ -30,9 +30,9 @@ export default {
             const newRoutes = []
             for (const item of routes[0].routes) {
               newRoutes.push(item)
-              if(item.path){
+              if (item.path) {
                 newRoutes.push(
-                  Object.assign({}, item, { path: '/:lang(en|zh)' + item.path } )
+                  Object.assign({}, item, { path: '/:lang(en|zh)' + item.path })
                 )
               }
             }
@@ -80,4 +80,16 @@ export default {
       .loader(require.resolve('svg-sprite-loader'))
   },
   extraBabelPresets: ['@lingui/babel-preset-react'],
+  extraBabelPlugins: [
+    [
+      'import',
+      {
+        libraryName: 'ant-design-pro',
+        libraryDirectory: 'lib',
+        style: true,
+        camel2DashComponentName: false,
+      },
+      'ant-design-pro',
+    ],
+  ],
 }

package.json

@@ -5,6 +5,7 @@
   "description": "An admin dashboard application demo built upon Ant Design and UmiJS",
   "dependencies": {
     "@lingui/react": "^2.7.0",
+    "ant-design-pro": "^2.0.0",
     "antd": "^3.9.2",
     "axios": "^0.18.0",
     "babel-eslint": "^9.0.0",
@@ -20,11 +21,9 @@
     "eslint-plugin-flowtype": "^2.50.0",
     "highcharts-exporting": "^0.1.7",
     "highcharts-more": "^0.1.7",
-    "jsonp": "^0.2.1",
     "lodash.clonedeep": "^4.5.0",
     "lodash.isempty": "^4.4.0",
     "lodash.isequal": "^4.5.0",
-    "module": "^1.2.5",
     "nprogress": "^0.2.0",
     "path-to-regexp": "^2.4.0",
     "prop-types": "^15.6.2",
@@ -41,6 +40,7 @@
     "@lingui/babel-preset-react": "^2.7.0",
     "@lingui/cli": "^2.7.0",
     "babel-plugin-dev-expression": "^0.2.1",
+    "babel-plugin-import": "^1.8.0",
     "babel-plugin-macros": "^2.4.0",
     "babel-plugin-module-resolver": "^3.1.1",
     "cross-env": "^5.2.0",
@@ -53,6 +53,7 @@
     "less-vars-to-js": "^1.3.0",
     "lint-staged": "^7.2.2",
     "mockjs": "^1.0.1-beta3",
+    "module": "^1.2.5",
     "prettier": "^1.14.2",
     "stylelint": "^9.5.0",
     "stylelint-config-prettier": "^4.0.0",
@@ -96,7 +97,7 @@
     "start": "umi dev",
     "test": "cross-env BABELRC=none umi test",
     "prettier": "prettier --write 'src/**/*'",
-    "precommit": "npm run extract && lint-staged && npm run test",
+    "precommit": "lint-staged && npm run test",
     "add-locale": "lingui add-locale",
     "extract": "lingui extract"
   }

src/pages/login/index.js

@@ -1,7 +1,9 @@
-import React, { PureComponent } from 'react'
+import React, { PureComponent, Fragment } from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'dva'
 import { Button, Row, Form, Input } from 'antd'
+import router from 'umi/router'
+import { GlobalFooter } from 'ant-design-pro'
 import { Trans, withI18n } from '@lingui/react'
 import config from 'utils/config'
 
@@ -27,63 +29,79 @@ class Login extends PureComponent {
     const { loading, form, i18n } = this.props
     const { getFieldDecorator } = form
 
+    const footerLinks = [
+      {
+        key: 'English',
+        title: <span onClick={() => router.push('/en/login')}>English</span>,
+      },
+      {
+        key: 'Chinese',
+        title: <span onClick={() => router.push('/zh/login')}>中文</span>,
+      },
+    ]
+
     return (
-      <div className={styles.form}>
-        <div className={styles.logo}>
-          <img alt="logo" src={config.logoPath} />
-          <span>{config.siteName}</span>
+      <Fragment>
+        <div className={styles.form}>
+          <div className={styles.logo}>
+            <img alt="logo" src={config.logoPath} />
+            <span>{config.siteName}</span>
+          </div>
+          <form>
+            <FormItem hasFeedback>
+              {getFieldDecorator('username', {
+                rules: [
+                  {
+                    required: true,
+                  },
+                ],
+              })(
+                <Input
+                  onPressEnter={this.handleOk}
+                  placeholder={i18n.t`Username`}
+                />
+              )}
+            </FormItem>
+            <FormItem hasFeedback>
+              {getFieldDecorator('password', {
+                rules: [
+                  {
+                    required: true,
+                  },
+                ],
+              })(
+                <Input
+                  type="password"
+                  onPressEnter={this.handleOk}
+                  placeholder={i18n.t`Password`}
+                />
+              )}
+            </FormItem>
+            <Row>
+              <Button
+                type="primary"
+                onClick={this.handleOk}
+                loading={loading.effects.login}
+              >
+                <Trans>Sign in</Trans>
+              </Button>
+              <p>
+                <span>
+                  <Trans>Username</Trans>
+                  ：guest
+                </span>
+                <span>
+                  <Trans>Password</Trans>
+                  ：guest
+                </span>
+              </p>
+            </Row>
+          </form>
         </div>
-        <form>
-          <FormItem hasFeedback>
-            {getFieldDecorator('username', {
-              rules: [
-                {
-                  required: true,
-                },
-              ],
-            })(
-              <Input
-                onPressEnter={this.handleOk}
-                placeholder={i18n.t`Username`}
-              />
-            )}
-          </FormItem>
-          <FormItem hasFeedback>
-            {getFieldDecorator('password', {
-              rules: [
-                {
-                  required: true,
-                },
-              ],
-            })(
-              <Input
-                type="password"
-                onPressEnter={this.handleOk}
-                placeholder={i18n.t`Password`}
-              />
-            )}
-          </FormItem>
-          <Row>
-            <Button
-              type="primary"
-              onClick={this.handleOk}
-              loading={loading.effects.login}
-            >
-              <Trans>Sign in</Trans>
-            </Button>
-            <p>
-              <span>
-                <Trans>Username</Trans>
-                ：guest
-              </span>
-              <span>
-                <Trans>Password</Trans>
-                ：guest
-              </span>
-            </p>
-          </Row>
-        </form>
-      </div>
+        <div className={styles.footer}>
+          <GlobalFooter links={footerLinks} copyright={config.copyright} />
+        </div>
+      </Fragment>
     )
   }
 }

src/pages/login/index.less

@@ -2,7 +2,7 @@
 
 .form {
   position: absolute;
-  top: 50%;
+  top: 45%;
   left: 50%;
   margin: -160px 0 0 -160px;
   width: 320px;
@@ -51,3 +51,9 @@
 .ant-spin-nested-loading {
   height: 100%;
 }
+
+.footer {
+  position: absolute;
+  width: 100%;
+  bottom: 0;
+}

src/utils/config.js

@@ -2,6 +2,7 @@ module.exports = {
   siteName: 'AntD Admin',
   prefix: 'antdAdmin',
   footerText: 'Ant Design Admin  © 2018 zuiidea',
+  copyright: 'Ant Design Admin  © 2018 zuiidea',
   logoPath: '/logo.svg',
   apiPrefix: '/api/v1',
   openPages: ['/login'],