Merge branch 'master' of https://github.com/ant-design/ant-design-pro

.eslintignore

 /lambda/
 /scripts
-/config
\ No newline at end of file
+/config

.eslintrc.js

@@ -10,8 +10,8 @@ module.exports = {
     jasmine: true,
   },
   globals: {
-    ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION: true, // preview.pro.ant.design only do not use in your production ; preview.pro.ant.design 专用环境变量，请不要在你的项目中使用它。
     page: true,
+    ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION: true,
   },
   rules: {
     'react/jsx-filename-extension': [1, { extensions: ['.js'] }],
@@ -35,6 +35,8 @@ module.exports = {
     'linebreak-style': 0,
   },
   settings: {
+    // support import modules from TypeScript files in JavaScript files
+    'import/resolver': { node: { extensions: ['.js', '.ts', '.tsx'] } },
     polyfills: ['fetch', 'promises', 'url', 'object-assign'],
   },
 };

.gitignore

@@ -26,7 +26,6 @@ package-lock.json
 .history
 *.log
 functions/*
-lambda/mock/index.js
 .temp/**
 
 # umi

.prettierrc

 {
   "singleQuote": true,
-  "trailingComma": "es5",
+  "trailingComma": "all",
   "printWidth": 100,
   "proseWrap": "never",
   "overrides": [
     {
       "files": ".prettierrc",
-      "options": { "parser": "json" }
+      "options": {
+        "parser": "json"
+      }
     }
   ]
-}
+}
\ No newline at end of file

.stylelintrc.json

@@ -5,9 +5,12 @@
     "stylelint-config-rational-order",
     "stylelint-config-prettier"
   ],
-  "plugins": ["stylelint-order", "stylelint-declaration-block-no-ignored-properties"],
+  "plugins": [
+    "stylelint-order",
+    "stylelint-declaration-block-no-ignored-properties"
+  ],
   "rules": {
     "no-descending-specificity": null,
     "plugin/declaration-block-no-ignored-properties": true
   }
-}
+}
\ No newline at end of file

README.fr-FR.md

@@ -77,7 +77,7 @@ Nous avons besoin de votre aide: https://github.com/ant-design/ant-design-pro/is
 ### Utiliser bash
 
 ```bash
-$ git clone https://github.com/ant-design/ant-design-pro.git --depth=1
+$ git clone https://github.com/ant-design/ant-design-pro.git --depth=1 -b v2
 $ cd ant-design-pro
 $ npm install
 $ npm start         # visiter http://localhost:8000
@@ -111,7 +111,7 @@ Ouvrez le projet avec Gitpod (environnement de développement gratuit pour GitHu
 
 [![Ouvrir dans Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/ant-design/ant-design-pro)
 
-Plus d'instructions dans la  [documentation](http://pro.ant.design/docs/getting-started).
+Plus d'instructions dans la [documentation](http://pro.ant.design/docs/getting-started).
 
 ## Support des navigateurs
 

README.md

@@ -17,9 +17,9 @@ An out-of-box UI solution for enterprise applications as a React boilerplate.
 - FAQ: http://pro.ant.design/docs/faq
 - Mirror Site in China: http://ant-design-pro.gitee.io
 
-## 2.0 Released Now! 🎉🎉🎉
+## 4.0 Released Now! 🎉🎉🎉
 
-[Announcing Ant Design Pro 2.0.0](https://medium.com/ant-design/beautiful-and-powerful-ant-design-pro-2-0-release-51358da5af95)
+[Announcing Ant Design Pro 4.0.0](https://medium.com/ant-design/ant-design-pro-v4-is-here-6f23098ae9d9)
 
 ## Translation Recruitment :loudspeaker:
 
@@ -27,6 +27,8 @@ We need your help: https://github.com/ant-design/ant-design-pro/issues/120
 
 ## Features
 
+- :bulb: **TypeScript**: A language for application-scale JavaScript
+- :scroll: **Blocks**: Build page with block template
 - :gem: **Neat Design**: Follow [Ant Design specification](http://ant.design/)
 - :triangular_ruler: **Common Templates**: Typical templates for enterprise applications
 - :rocket: **State of The Art Development**: Newest development stack of React/umi/dva/antd
@@ -77,7 +79,7 @@ We need your help: https://github.com/ant-design/ant-design-pro/issues/120
 ### Use bash
 
 ```bash
-$ git clone https://github.com/ant-design/ant-design-pro.git --depth=1
+$ git clone https://github.com/ant-design/ant-design-pro.git --depth=1 -b v2
 $ cd ant-design-pro
 $ npm install
 $ npm start         # visit http://localhost:8000

README.ru-RU.md

@@ -71,7 +71,7 @@ UI-решение "из коробки" для корпоративных при
 ## Использование
 
 ```bash
-$ git clone https://github.com/ant-design/ant-design-pro.git --depth=1
+$ git clone https://github.com/ant-design/ant-design-pro.git --depth=1 -b v2
 $ cd ant-design-pro
 $ npm install
 $ npm start         # visit http://localhost:8000

README.tr-TR.md

@@ -77,7 +77,7 @@ React ile kurumsal uygulamalar için taslak olarak geliştirilmiş kullanıma ha
 ### bash ile kullanım
 
 ```bash
-$ git clone https://github.com/ant-design/ant-design-pro.git --depth=1
+$ git clone https://github.com/ant-design/ant-design-pro.git --depth=1 -b v2
 $ cd ant-design-pro
 $ npm install
 $ npm start         # visit http://localhost:8000

README.zh-CN.md

@@ -17,8 +17,14 @@
 - 常见问题：http://pro.ant.design/docs/faq-cn
 - 国内镜像：http://ant-design-pro.gitee.io
 
+## 现在我们发布了 4.0! 🎉🎉🎉
+
+[Announcing Ant Design Pro 4.0.0](https://zhuanlan.zhihu.com/p/67498559)
+
 ## 特性
 
+- :bulb: **TypeScript**: 应用程序级 JavaScript 的语言
+- :scroll: **区块**: 通过区块模板快速构建页面
 - :gem: **优雅美观**：基于 Ant Design 体系精心设计
 - :triangular_ruler: **常见设计模式**：提炼自中后台应用的典型页面和场景
 - :rocket: **最新技术栈**：使用 React/umi/dva/antd 等前端前沿技术开发
@@ -69,7 +75,7 @@
 ### 使用命令行
 
 ```bash
-$ git clone https://github.com/ant-design/ant-design-pro.git --depth=1
+$ git clone https://github.com/ant-design/ant-design-pro.git --depth=1 -b v2
 $ cd ant-design-pro
 $ npm install
 $ npm start         # 访问 http://localhost:8000

config/config.js → config/config.ts

 // https://umijs.org/config/
 import os from 'os';
-import pageRoutes from './router.config';
-import webpackPlugin from './plugin.config';
-import defaultSettings from '../src/defaultSettings';
 import slash from 'slash2';
-
+import { IPlugin, IConfig } from 'umi-types';
+import defaultSettings from './defaultSettings';
+import webpackPlugin from './plugin.config';
 const { pwa, primaryColor } = defaultSettings;
-// preview.pro.ant.design only do not use in your production ; preview.pro.ant.design 专用环境变量，请不要在你的项目中使用它。
-const { ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION, TEST } = process.env;
 
-const plugins = [
+// preview.pro.ant.design only do not use in your production ;
+// preview.pro.ant.design 专用环境变量，请不要在你的项目中使用它。
+
+const { ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION, TEST, NODE_ENV } = process.env;
+const plugins: IPlugin[] = [
   [
     'umi-plugin-react',
     {
@@ -18,9 +19,12 @@ const plugins = [
         hmr: true,
       },
       locale: {
-        enable: true, // default false
-        default: 'zh-CN', // default zh-CN
-        baseNavigator: true, // default true, when it is true, will use `navigator.language` overwrite default
+        // default false
+        enable: true,
+        // default zh-CN
+        default: 'zh-CN',
+        // default true, when it is true, will use `navigator.language` overwrite default
+        baseNavigator: true,
       },
       dynamicImport: {
         loadingComponent: './components/PageLoading/index',
@@ -46,10 +50,18 @@ const plugins = [
         : {}),
     },
   ],
-];
-
-// 针对 preview.pro.ant.design 的 GA 统计代码
+  [
+    'umi-plugin-pro-block',
+    {
+      moveMock: false,
+      moveService: false,
+      modifyRequest: true,
+      autoAddMenu: true,
+    },
+  ],
+]; // 针对 preview.pro.ant.design 的 GA 统计代码
 // preview.pro.ant.design only do not use in your production ; preview.pro.ant.design 专用环境变量，请不要在你的项目中使用它。
+
 if (ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION === 'site') {
   plugins.push([
     'umi-plugin-ga',
@@ -59,6 +71,18 @@ if (ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION === 'site') {
   ]);
 }
 
+const uglifyJSOptions =
+  NODE_ENV === 'production'
+    ? {
+        uglifyOptions: {
+          // remove console.* except console.error
+          compress: {
+            drop_console: true,
+            pure_funcs: ['console.error'],
+          },
+        },
+      }
+    : {};
 export default {
   // add for transfer to umi
   plugins,
@@ -66,13 +90,31 @@ export default {
     ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION:
       ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION || '', // preview.pro.ant.design only do not use in your production ; preview.pro.ant.design 专用环境变量，请不要在你的项目中使用它。
   },
+  block: {
+    defaultGitUrl: 'https://github.com/ant-design/pro-blocks',
+  },
   treeShaking: true,
   targets: {
     ie: 11,
   },
   devtool: ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION ? 'source-map' : false,
   // 路由配置
-  routes: pageRoutes,
+  routes: [
+    {
+      path: '/',
+      component: '../layouts/BasicLayout',
+      Routes: ['src/pages/Authorized'],
+      authority: ['admin', 'user'],
+      routes: [
+        {
+          path: '/',
+          name: 'welcome',
+          icon: 'smile',
+          component: './Welcome',
+        },
+      ],
+    },
+  ],
   // Theme for antd
   // https://ant.design/docs/react/customize-theme-cn
   theme: {
@@ -92,7 +134,13 @@ export default {
   disableRedirectHoist: true,
   cssLoaderOptions: {
     modules: true,
-    getLocalIdent: (context, localIdentName, localName) => {
+    getLocalIdent: (
+      context: {
+        resourcePath: string;
+      },
+      localIdentName: string,
+      localName: string,
+    ) => {
       if (
         context.resourcePath.includes('node_modules') ||
         context.resourcePath.includes('ant.design.pro.less') ||
@@ -100,21 +148,24 @@ export default {
       ) {
         return localName;
       }
+
       const match = context.resourcePath.match(/src(.*)/);
+
       if (match && match[1]) {
         const antdProPath = match[1].replace('.less', '');
         const arr = slash(antdProPath)
           .split('/')
-          .map(a => a.replace(/([A-Z])/g, '-$1'))
-          .map(a => a.toLowerCase());
+          .map((a: string) => a.replace(/([A-Z])/g, '-$1'))
+          .map((a: string) => a.toLowerCase());
         return `antd-pro${arr.join('-')}-${localName}`.replace(/--/g, '-');
       }
+
       return localName;
     },
   },
   manifest: {
     basePath: '/',
   },
-
+  uglifyJSOptions,
   chainWebpack: webpackPlugin,
-};
+} as IConfig;

config/defaultSettings.ts

+import { MenuTheme } from 'antd/es/menu';
+
+export type ContentWidth = 'Fluid' | 'Fixed';
+
+export interface DefaultSettings {
+  /**
+   * theme for nav menu
+   */
+  navTheme: MenuTheme;
+  /**
+   * primary color of ant design
+   */
+  primaryColor: string;
+  /**
+   * nav menu position: `sidemenu` or `topmenu`
+   */
+  layout: 'sidemenu' | 'topmenu';
+  /**
+   * layout of content: `Fluid` or `Fixed`, only works when layout is topmenu
+   */
+  contentWidth: ContentWidth;
+  /**
+   * sticky header
+   */
+  fixedHeader: boolean;
+  /**
+   * auto hide header
+   */
+  autoHideHeader: boolean;
+  /**
+   * sticky siderbar
+   */
+  fixSiderbar: boolean;
+  menu: { locale: boolean };
+  title: string;
+  pwa: boolean;
+  // Your custom iconfont Symbol script Url
+  // eg：//at.alicdn.com/t/font_1039637_btcrd5co4w.js
+  // 注意：如果需要图标多色，Iconfont 图标项目里要进行批量去色处理
+  // Usage: https://github.com/ant-design/ant-design-pro/pull/3517
+  iconfontUrl: string;
+  colorWeak: boolean;
+}
+
+export default {
+  navTheme: 'dark',
+  primaryColor: '#1890FF',
+  layout: 'sidemenu',
+  contentWidth: 'Fluid',
+  fixedHeader: false,
+  autoHideHeader: false,
+  fixSiderbar: false,
+  colorWeak: false,
+  menu: {
+    locale: true,
+  },
+  title: 'Ant Design Pro',
+  pwa: false,
+  iconfontUrl: '',
+} as DefaultSettings;

config/plugin.config.js → config/plugin.config.ts

@@ -6,7 +6,7 @@ import ThemeColorReplacer from 'webpack-theme-color-replacer';
 import path from 'path';
 import generate from '@ant-design/colors/lib/generate';
 
-function getModulePackageName(module) {
+function getModulePackageName(module: { context: string }) {
   if (!module.context) return null;
 
   const nodeModulesPath = path.join(__dirname, '../node_modules/');
@@ -16,16 +16,16 @@ function getModulePackageName(module) {
 
   const moduleRelativePath = module.context.substring(nodeModulesPath.length);
   const [moduleDirName] = moduleRelativePath.split(path.sep);
-  let packageName = moduleDirName;
+  let packageName: string | null = moduleDirName;
   // handle tree shaking
-  if (packageName.match('^_')) {
+  if (packageName && packageName.match('^_')) {
     // eslint-disable-next-line prefer-destructuring
-    packageName = packageName.match(/^_(@?[^@]+)/)[1];
+    packageName = packageName.match(/^_(@?[^@]+)/)![1];
   }
   return packageName;
 }
 
-export default config => {
+export default (config: any) => {
   // preview.pro.ant.design only do not use in your production ; preview.pro.ant.design 专用环境变量，请不要在你的项目中使用它。
   if (
     process.env.ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION === 'site' ||
@@ -82,18 +82,19 @@ export default config => {
       minSize: 0,
       cacheGroups: {
         vendors: {
-          test: module => {
+          test: (module: { context: string }) => {
             const packageName = getModulePackageName(module);
             if (packageName) {
               return ['bizcharts', '@antv_data-set'].indexOf(packageName) >= 0;
             }
             return false;
           },
-          name(module) {
+          name(module: { context: string }) {
             const packageName = getModulePackageName(module);
-
-            if (['bizcharts', '@antv_data-set'].indexOf(packageName) >= 0) {
-              return 'viz'; // visualization package
+            if (packageName) {
+              if (['bizcharts', '@antv_data-set'].indexOf(packageName) >= 0) {
+                return 'viz'; // visualization package
+              }
             }
             return 'misc';
           },

config/router.config.js

-export default [
-  // user
-  {
-    path: '/user',
-    component: '../layouts/UserLayout',
-    routes: [
-      { path: '/user', redirect: '/user/login' },
-      { path: '/user/login', name: 'login', component: './User/Login' },
-      { path: '/user/register', name: 'register', component: './User/Register' },
-      {
-        path: '/user/register-result',
-        name: 'register.result',
-        component: './User/RegisterResult',
-      },
-      {
-        component: '404',
-      },
-    ],
-  },
-  // app
-  {
-    path: '/',
-    component: '../layouts/BasicLayout',
-    Routes: ['src/pages/Authorized'],
-    routes: [
-      // dashboard
-      { path: '/', redirect: '/dashboard/analysis', authority: ['admin', 'user'] },
-      {
-        path: '/dashboard',
-        name: 'dashboard',
-        icon: 'dashboard',
-        routes: [
-          {
-            path: '/dashboard/analysis',
-            name: 'analysis',
-            component: './Dashboard/Analysis',
-          },
-          {
-            path: '/dashboard/monitor',
-            name: 'monitor',
-            component: './Dashboard/Monitor',
-          },
-          {
-            path: '/dashboard/workplace',
-            name: 'workplace',
-            component: './Dashboard/Workplace',
-          },
-        ],
-      },
-      // forms
-      {
-        path: '/form',
-        icon: 'form',
-        name: 'form',
-        routes: [
-          {
-            path: '/form/basic-form',
-            name: 'basicform',
-            component: './Forms/BasicForm',
-          },
-          {
-            path: '/form/step-form',
-            name: 'stepform',
-            component: './Forms/StepForm',
-            hideChildrenInMenu: true,
-            routes: [
-              {
-                path: '/form/step-form',
-                redirect: '/form/step-form/info',
-              },
-              {
-                path: '/form/step-form/info',
-                name: 'info',
-                component: './Forms/StepForm/Step1',
-              },
-              {
-                path: '/form/step-form/confirm',
-                name: 'confirm',
-                component: './Forms/StepForm/Step2',
-              },
-              {
-                path: '/form/step-form/result',
-                name: 'result',
-                component: './Forms/StepForm/Step3',
-              },
-            ],
-          },
-          {
-            path: '/form/advanced-form',
-            name: 'advancedform',
-            authority: ['admin'],
-            component: './Forms/AdvancedForm',
-          },
-        ],
-      },
-      // list
-      {
-        path: '/list',
-        icon: 'table',
-        name: 'list',
-        routes: [
-          {
-            path: '/list/table-list',
-            name: 'searchtable',
-            component: './List/TableList',
-          },
-          {
-            path: '/list/basic-list',
-            name: 'basiclist',
-            component: './List/BasicList',
-          },
-          {
-            path: '/list/card-list',
-            name: 'cardlist',
-            component: './List/CardList',
-          },
-          {
-            path: '/list/search',
-            name: 'searchlist',
-            component: './List/List',
-            routes: [
-              {
-                path: '/list/search',
-                redirect: '/list/search/articles',
-              },
-              {
-                path: '/list/search/articles',
-                name: 'articles',
-                component: './List/Articles',
-              },
-              {
-                path: '/list/search/projects',
-                name: 'projects',
-                component: './List/Projects',
-              },
-              {
-                path: '/list/search/applications',
-                name: 'applications',
-                component: './List/Applications',
-              },
-            ],
-          },
-        ],
-      },
-      {
-        path: '/profile',
-        name: 'profile',
-        icon: 'profile',
-        routes: [
-          // profile
-          {
-            path: '/profile/basic',
-            name: 'basic',
-            component: './Profile/BasicProfile',
-          },
-          {
-            path: '/profile/basic/:id',
-            hideInMenu: true,
-            component: './Profile/BasicProfile',
-          },
-          {
-            path: '/profile/advanced',
-            name: 'advanced',
-            authority: ['admin'],
-            component: './Profile/AdvancedProfile',
-          },
-        ],
-      },
-      {
-        name: 'result',
-        icon: 'check-circle-o',
-        path: '/result',
-        routes: [
-          // result
-          {
-            path: '/result/success',
-            name: 'success',
-            component: './Result/Success',
-          },
-          { path: '/result/fail', name: 'fail', component: './Result/Error' },
-        ],
-      },
-      {
-        name: 'exception',
-        icon: 'warning',
-        path: '/exception',
-        routes: [
-          // exception
-          {
-            path: '/exception/403',
-            name: 'not-permission',
-            component: './Exception/403',
-          },
-          {
-            path: '/exception/404',
-            name: 'not-find',
-            component: './Exception/404',
-          },
-          {
-            path: '/exception/500',
-            name: 'server-error',
-            component: './Exception/500',
-          },
-          {
-            path: '/exception/trigger',
-            name: 'trigger',
-            hideInMenu: true,
-            component: './Exception/TriggerException',
-          },
-        ],
-      },
-      {
-        name: 'account',
-        icon: 'user',
-        path: '/account',
-        routes: [
-          {
-            path: '/account/center',
-            name: 'center',
-            component: './Account/Center/Center',
-            routes: [
-              {
-                path: '/account/center',
-                redirect: '/account/center/articles',
-              },
-              {
-                path: '/account/center/articles',
-                component: './Account/Center/Articles',
-              },
-              {
-                path: '/account/center/applications',
-                component: './Account/Center/Applications',
-              },
-              {
-                path: '/account/center/projects',
-                component: './Account/Center/Projects',
-              },
-            ],
-          },
-          {
-            path: '/account/settings',
-            name: 'settings',
-            component: './Account/Settings/Info',
-            routes: [
-              {
-                path: '/account/settings',
-                redirect: '/account/settings/base',
-              },
-              {
-                path: '/account/settings/base',
-                component: './Account/Settings/BaseView',
-              },
-              {
-                path: '/account/settings/security',
-                component: './Account/Settings/SecurityView',
-              },
-              {
-                path: '/account/settings/binding',
-                component: './Account/Settings/BindingView',
-              },
-              {
-                path: '/account/settings/notification',
-                component: './Account/Settings/NotificationView',
-              },
-            ],
-          },
-        ],
-      },
-      //  editor
-      {
-        name: 'editor',
-        icon: 'highlight',
-        path: '/editor',
-        routes: [
-          {
-            path: '/editor/flow',
-            name: 'flow',
-            component: './Editor/GGEditor/Flow',
-          },
-          {
-            path: '/editor/mind',
-            name: 'mind',
-            component: './Editor/GGEditor/Mind',
-          },
-          {
-            path: '/editor/koni',
-            name: 'koni',
-            component: './Editor/GGEditor/Koni',
-          },
-        ],
-      },
-      {
-        component: '404',
-      },
-    ],
-  },
-];

create-umi/README.md

+# Ant Design Pro
+
+This project is initialized with [Ant Design Pro](https://pro.ant.design). Follow is the quick guide for how to use.
+
+## Environment Prepare
+
+Install `node_modules`:
+```bash
+npm install
+```
+
+or
+
+```bash
+yarn
+```
+
+## Provided Scripts
+
+Ant Design Pro provides some useful script to help you quick start and build with web project, code style check and test.
+
+Scripts provided in `package.json`. It's safe to modify or add additional script:
+
+### Start project
+
+```bash
+npm start
+```
+
+### Build project
+
+```bash
+npm run build
+```
+
+### Check code style
+
+```bash
+npm run lint
+```
+
+You can also use script to auto fix some lint error:
+
+```bash
+npm run lint:fix
+```
+
+### Test code
+
+```bash
+npm test
+```
+
+## More
+
+You can view full document on our [official website](https://pro.ant.design). And welcome any feedback in our [github](https://github.com/ant-design/ant-design-pro).
\ No newline at end of file

create-umi/package.json

+{
+  "name": "ant-design-pro",
+  "version": "4.0.0",
+  "private": true,
+  "description": "An out-of-box UI solution for enterprise applications",
+  "scripts": {
+    "analyze": "cross-env ANALYZE=1 umi build",
+    "build": "umi build",
+    "lint": "npm run lint:js && npm run lint:ts && npm run lint:style && npm run lint:prettier",
+    "lint-staged": "lint-staged",
+    "lint-staged:js": "eslint --ext .js",
+    "lint-staged:ts": "tslint",
+    "lint:fix": "eslint --fix --ext .js src tests && npm run lint:style && npm run tslint:fix",
+    "lint:js": "eslint --ext .js src tests",
+    "lint:prettier": "check-prettier lint",
+    "lint:style": "stylelint --fix \"src/**/*.less\" --syntax less",
+    "lint:ts": "tslint -p . -c tslint.yml",
+    "prettier": " check-prettier write",
+    "start": "umi dev",
+    "start:no-mock": "cross-env MOCK=none umi dev",
+    "test": "umi test",
+    "test:all": "node ./tests/run-tests.js",
+    "test:component": "umi test ./src/components",
+    "tslint:fix": "tslint --fix \"src/**/*.ts*\"",
+    "fetch:blocks": "node ./scripts/fetch-blocks.js"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "npm run lint-staged"
+    }
+  },
+  "lint-staged": {
+    "**/*.less": "stylelint --syntax less",
+    "**/*.{js,jsx}": "npm run lint-staged:js",
+    "**/*.{js,ts,tsx,md,json,jsx,less}": [ "npm run prettier", "git add" ],
+    "**/*.{ts,tsx}": "npm run lint-staged:ts"
+  },
+  "browserslist": [ "> 1%", "last 2 versions", "not ie <= 10" ],
+  "dependencies": {
+    "@ant-design/pro-layout": "^4.4.2",
+    "@antv/data-set": "^0.10.2",
+    "antd": "^3.19.1",
+    "bizcharts": "^3.5.3-beta.0",
+    "bizcharts-plugin-slider": "^2.1.1-beta.1",
+    "classnames": "^2.2.6",
+    "dva": "^2.4.1",
+    "lodash": "^4.17.11",
+    "lodash-decorators": "^6.0.1",
+    "memoize-one": "^5.0.4",
+    "moment": "^2.24.0",
+    "numeral": "^2.0.6",
+    "omit.js": "^1.0.2",
+    "path-to-regexp": "^3.0.0",
+    "qs": "^6.7.0",
+    "rc-animate": "^2.8.3",
+    "react": "^16.8.6",
+    "react-container-query": "^0.11.0",
+    "react-copy-to-clipboard": "^5.0.1",
+    "react-document-title": "^2.0.3",
+    "react-dom": "^16.8.6",
+    "react-fittext": "^1.0.0",
+    "react-media": "^1.9.2",
+    "react-media-hook2": "^1.0.5"
+  },
+  "devDependencies": {
+    "@types/classnames": "^2.2.7",
+    "@types/history": "^4.7.2",
+    "@types/lodash": "^4.14.133",
+    "@types/react": "^16.8.19",
+    "@types/react-document-title": "^2.0.3",
+    "@types/react-dom": "^16.8.4",
+    "antd-pro-merge-less": "^1.0.0",
+    "antd-theme-webpack-plugin": "^1.2.0",
+    "babel-eslint": "^10.0.1",
+    "chalk": "^2.4.2",
+    "check-prettier": "^1.0.3",
+    "cross-env": "^5.2.0",
+    "cross-port-killer": "^1.1.1",
+    "enzyme": "^3.9.0",
+    "eslint": "^5.16.0",
+    "eslint-config-airbnb": "^17.1.0",
+    "eslint-config-prettier": "^4.3.0",
+    "eslint-plugin-babel": "^5.3.0",
+    "eslint-plugin-compat": "^3.1.1",
+    "eslint-plugin-import": "^2.17.3",
+    "eslint-plugin-jsx-a11y": "^6.2.1",
+    "eslint-plugin-markdown": "^1.0.0",
+    "eslint-plugin-react": "^7.13.0",
+    "express": "^4.17.1",
+    "gh-pages": "^2.0.1",
+    "husky": "^2.3.0",
+    "jest-puppeteer": "^4.2.0",
+    "jsdom-global": "^3.0.2",
+    "less": "^3.9.0",
+    "lint-staged": "^8.1.7",
+    "merge-umi-mock-data": "^2.0.6",
+    "mockjs": "^1.0.1-beta3",
+    "prettier": "^1.17.1",
+    "serverless-http": "^2.0.2",
+    "slash2": "^2.0.0",
+    "stylelint": "^10.0.1",
+    "stylelint-config-css-modules": "^1.4.0",
+    "stylelint-config-prettier": "^5.2.0",
+    "stylelint-config-rational-order": "^0.1.2",
+    "stylelint-config-standard": "^18.3.0",
+    "stylelint-declaration-block-no-ignored-properties": "^2.1.0",
+    "stylelint-order": "^3.0.0",
+    "tslint": "^5.17.0",
+    "tslint-config-prettier": "^1.18.0",
+    "tslint-eslint-rules": "^5.4.0",
+    "tslint-react": "^4.0.0",
+    "umi": "^2.7.0-beta.2",
+    "umi-plugin-ga": "^1.1.3",
+    "umi-plugin-pro-block": "^1.3.2",
+    "umi-plugin-react": "^1.8.0-beta.1",
+    "umi-request": "^1.0.7"
+  },
+  "optionalDependencies": {
+    "puppeteer": "^1.17.0"
+  },
+  "engines": {
+    "node": ">=10.0.0"
+  },
+  "checkFiles": [
+    "src/**/*.js*",
+    "src/**/*.ts*",
+    "src/**/*.less",
+    "config/**/*.js*",
+    "scripts/**/*.js"
+  ]
+}

jest-puppeteer.config.js

@@ -6,7 +6,7 @@ module.exports = {
       '--disable-dev-shm-usage',
       '--no-first-run',
       '--no-zygote',
-      '--no-sandbox'
+      '--no-sandbox',
     ],
   },
 };

mock/api.js

-import mockjs from 'mockjs';
-
-const titles = [
-  'Alipay',
-  'Angular',
-  'Ant Design',
-  'Ant Design Pro',
-  'Bootstrap',
-  'React',
-  'Vue',
-  'Webpack',
-];
-const avatars = [
-  'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png', // Alipay
-  'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png', // Angular
-  'https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png', // Ant Design
-  'https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png', // Ant Design Pro
-  'https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png', // Bootstrap
-  'https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png', // React
-  'https://gw.alipayobjects.com/zos/rmsportal/ComBAopevLwENQdKWiIn.png', // Vue
-  'https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlMTCEe.png', // Webpack
-];
-
-const avatars2 = [
-  'https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png',
-  'https://gw.alipayobjects.com/zos/rmsportal/cnrhVkzwxjPwAaCfPbdc.png',
-  'https://gw.alipayobjects.com/zos/rmsportal/gaOngJwsRYRaVAuXXcmB.png',
-  'https://gw.alipayobjects.com/zos/rmsportal/ubnKSIfAJTxIgXOKlciN.png',
-  'https://gw.alipayobjects.com/zos/rmsportal/WhxKECPNujWoWEFNdnJE.png',
-  'https://gw.alipayobjects.com/zos/rmsportal/jZUIxmJycoymBprLOUbT.png',
-  'https://gw.alipayobjects.com/zos/rmsportal/psOgztMplJMGpVEqfcgF.png',
-  'https://gw.alipayobjects.com/zos/rmsportal/ZpBqSxLxVEXfcUNoPKrz.png',
-  'https://gw.alipayobjects.com/zos/rmsportal/laiEnJdGHVOhJrUShBaJ.png',
-  'https://gw.alipayobjects.com/zos/rmsportal/UrQsqscbKEpNuJcvBZBu.png',
-];
-
-const covers = [
-  'https://gw.alipayobjects.com/zos/rmsportal/uMfMFlvUuceEyPpotzlq.png',
-  'https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png',
-  'https://gw.alipayobjects.com/zos/rmsportal/iXjVmWVHbCJAyqvDxdtx.png',
-  'https://gw.alipayobjects.com/zos/rmsportal/gLaIAoVWTtLbBWZNYEMg.png',
-];
-const desc = [
-  '那是一种内在的东西， 他们到达不了，也无法触及的',
-  '希望是一个好东西，也许是最好的，好东西是不会消亡的',
-  '生命就像一盒巧克力，结果往往出人意料',
-  '城镇中有那么多的酒馆，她却偏偏走进了我的酒馆',
-  '那时候我只会想自己想要什么，从不想自己拥有什么',
-];
-
-const user = [
-  '付小小',
-  '曲丽丽',
-  '林东东',
-  '周星星',
-  '吴加好',
-  '朱偏右',
-  '鱼酱',
-  '乐哥',
-  '谭小仪',
-  '仲尼',
-];
-
-function fakeList(count) {
-  const list = [];
-  for (let i = 0; i < count; i += 1) {
-    list.push({
-      id: `fake-list-${i}`,
-      owner: user[i % 10],
-      title: titles[i % 8],
-      avatar: avatars[i % 8],
-      cover: parseInt(i / 4, 10) % 2 === 0 ? covers[i % 4] : covers[3 - (i % 4)],
-      status: ['active', 'exception', 'normal'][i % 3],
-      percent: Math.ceil(Math.random() * 50) + 50,
-      logo: avatars[i % 8],
-      href: 'https://ant.design',
-      updatedAt: new Date(new Date().getTime() - 1000 * 60 * 60 * 2 * i),
-      createdAt: new Date(new Date().getTime() - 1000 * 60 * 60 * 2 * i),
-      subDescription: desc[i % 5],
-      description:
-        '在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的组件会被抽离成一套标准规范。',
-      activeUser: Math.ceil(Math.random() * 100000) + 100000,
-      newUser: Math.ceil(Math.random() * 1000) + 1000,
-      star: Math.ceil(Math.random() * 100) + 100,
-      like: Math.ceil(Math.random() * 100) + 100,
-      message: Math.ceil(Math.random() * 10) + 10,
-      content:
-        '段落示意：蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。',
-      members: [
-        {
-          avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png',
-          name: '曲丽丽',
-          id: 'member1',
-        },
-        {
-          avatar: 'https://gw.alipayobjects.com/zos/rmsportal/tBOxZPlITHqwlGjsJWaF.png',
-          name: '王昭君',
-          id: 'member2',
-        },
-        {
-          avatar: 'https://gw.alipayobjects.com/zos/rmsportal/sBxjgqiuHMGRkIjqlQCd.png',
-          name: '董娜娜',
-          id: 'member3',
-        },
-      ],
-    });
-  }
-
-  return list;
-}
-
-let sourceData;
-
-function getFakeList(req, res) {
-  const params = req.query;
-
-  const count = params.count * 1 || 20;
-
-  const result = fakeList(count);
-  sourceData = result;
-  return res.json(result);
-}
-
-function postFakeList(req, res) {
-  const { /* url = '', */ body } = req;
-  // const params = getUrlParams(url);
-  const { method, id } = body;
-  // const count = (params.count * 1) || 20;
-  let result = sourceData;
-
-  switch (method) {
-    case 'delete':
-      result = result.filter(item => item.id !== id);
-      break;
-    case 'update':
-      result.forEach((item, i) => {
-        if (item.id === id) {
-          result[i] = Object.assign(item, body);
-        }
-      });
-      break;
-    case 'post':
-      result.unshift({
-        body,
-        id: `fake-list-${result.length}`,
-        createdAt: new Date().getTime(),
-      });
-      break;
-    default:
-      break;
-  }
-
-  return res.json(result);
-}
-
-const getNotice = [
-  {
-    id: 'xxx1',
-    title: titles[0],
-    logo: avatars[0],
-    description: '那是一种内在的东西，他们到达不了，也无法触及的',
-    updatedAt: new Date(),
-    member: '科学搬砖组',
-    href: '',
-    memberLink: '',
-  },
-  {
-    id: 'xxx2',
-    title: titles[1],
-    logo: avatars[1],
-    description: '希望是一个好东西，也许是最好的，好东西是不会消亡的',
-    updatedAt: new Date('2017-07-24'),
-    member: '全组都是吴彦祖',
-    href: '',
-    memberLink: '',
-  },
-  {
-    id: 'xxx3',
-    title: titles[2],
-    logo: avatars[2],
-    description: '城镇中有那么多的酒馆，她却偏偏走进了我的酒馆',
-    updatedAt: new Date(),
-    member: '中二少女团',
-    href: '',
-    memberLink: '',
-  },
-  {
-    id: 'xxx4',
-    title: titles[3],
-    logo: avatars[3],
-    description: '那时候我只会想自己想要什么，从不想自己拥有什么',
-    updatedAt: new Date('2017-07-23'),
-    member: '程序员日常',
-    href: '',
-    memberLink: '',
-  },
-  {
-    id: 'xxx5',
-    title: titles[4],
-    logo: avatars[4],
-    description: '凛冬将至',
-    updatedAt: new Date('2017-07-23'),
-    member: '高逼格设计天团',
-    href: '',
-    memberLink: '',
-  },
-  {
-    id: 'xxx6',
-    title: titles[5],
-    logo: avatars[5],
-    description: '生命就像一盒巧克力，结果往往出人意料',
-    updatedAt: new Date('2017-07-23'),
-    member: '骗你来学计算机',
-    href: '',
-    memberLink: '',
-  },
-];
-
-const getActivities = [
-  {
-    id: 'trend-1',
-    updatedAt: new Date(),
-    user: {
-      name: '曲丽丽',
-      avatar: avatars2[0],
-    },
-    group: {
-      name: '高逼格设计天团',
-      link: 'http://github.com/',
-    },
-    project: {
-      name: '六月迭代',
-      link: 'http://github.com/',
-    },
-    template: '在 @{group} 新建项目 @{project}',
-  },
-  {
-    id: 'trend-2',
-    updatedAt: new Date(),
-    user: {
-      name: '付小小',
-      avatar: avatars2[1],
-    },
-    group: {
-      name: '高逼格设计天团',
-      link: 'http://github.com/',
-    },
-    project: {
-      name: '六月迭代',
-      link: 'http://github.com/',
-    },
-    template: '在 @{group} 新建项目 @{project}',
-  },
-  {
-    id: 'trend-3',
-    updatedAt: new Date(),
-    user: {
-      name: '林东东',
-      avatar: avatars2[2],
-    },
-    group: {
-      name: '中二少女团',
-      link: 'http://github.com/',
-    },
-    project: {
-      name: '六月迭代',
-      link: 'http://github.com/',
-    },
-    template: '在 @{group} 新建项目 @{project}',
-  },
-  {
-    id: 'trend-4',
-    updatedAt: new Date(),
-    user: {
-      name: '周星星',
-      avatar: avatars2[4],
-    },
-    project: {
-      name: '5 月日常迭代',
-      link: 'http://github.com/',
-    },
-    template: '将 @{project} 更新至已发布状态',
-  },
-  {
-    id: 'trend-5',
-    updatedAt: new Date(),
-    user: {
-      name: '朱偏右',
-      avatar: avatars2[3],
-    },
-    project: {
-      name: '工程效能',
-      link: 'http://github.com/',
-    },
-    comment: {
-      name: '留言',
-      link: 'http://github.com/',
-    },
-    template: '在 @{project} 发布了 @{comment}',
-  },
-  {
-    id: 'trend-6',
-    updatedAt: new Date(),
-    user: {
-      name: '乐哥',
-      avatar: avatars2[5],
-    },
-    group: {
-      name: '程序员日常',
-      link: 'http://github.com/',
-    },
-    project: {
-      name: '品牌迭代',
-      link: 'http://github.com/',
-    },
-    template: '在 @{group} 新建项目 @{project}',
-  },
-];
-
-function getFakeCaptcha(req, res) {
-  return res.json('captcha-xxx');
-}
-
-export default {
-  'GET /api/project/notice': getNotice,
-  'GET /api/activities': getActivities,
-  'POST /api/forms': (req, res) => {
-    res.send({ message: 'Ok' });
-  },
-  'GET /api/tags': mockjs.mock({
-    'list|100': [{ name: '@city', 'value|1-100': 150, 'type|0-2': 1 }],
-  }),
-  'GET /api/fake_list': getFakeList,
-  'POST /api/fake_list': postFakeList,
-  'GET /api/captcha': getFakeCaptcha,
-};

mock/chart.js

-import moment from 'moment';
-
-// mock data
-const visitData = [];
-const beginDay = new Date().getTime();
-
-const fakeY = [7, 5, 4, 2, 4, 7, 5, 6, 5, 9, 6, 3, 1, 5, 3, 6, 5];
-for (let i = 0; i < fakeY.length; i += 1) {
-  visitData.push({
-    x: moment(new Date(beginDay + 1000 * 60 * 60 * 24 * i)).format('YYYY-MM-DD'),
-    y: fakeY[i],
-  });
-}
-
-const visitData2 = [];
-const fakeY2 = [1, 6, 4, 8, 3, 7, 2];
-for (let i = 0; i < fakeY2.length; i += 1) {
-  visitData2.push({
-    x: moment(new Date(beginDay + 1000 * 60 * 60 * 24 * i)).format('YYYY-MM-DD'),
-    y: fakeY2[i],
-  });
-}
-
-const salesData = [];
-for (let i = 0; i < 12; i += 1) {
-  salesData.push({
-    x: `${i + 1}月`,
-    y: Math.floor(Math.random() * 1000) + 200,
-  });
-}
-const searchData = [];
-for (let i = 0; i < 50; i += 1) {
-  searchData.push({
-    index: i + 1,
-    keyword: `搜索关键词-${i}`,
-    count: Math.floor(Math.random() * 1000),
-    range: Math.floor(Math.random() * 100),
-    status: Math.floor((Math.random() * 10) % 2),
-  });
-}
-const salesTypeData = [
-  {
-    x: '家用电器',
-    y: 4544,
-  },
-  {
-    x: '食用酒水',
-    y: 3321,
-  },
-  {
-    x: '个护健康',
-    y: 3113,
-  },
-  {
-    x: '服饰箱包',
-    y: 2341,
-  },
-  {
-    x: '母婴产品',
-    y: 1231,
-  },
-  {
-    x: '其他',
-    y: 1231,
-  },
-];
-
-const salesTypeDataOnline = [
-  {
-    x: '家用电器',
-    y: 244,
-  },
-  {
-    x: '食用酒水',
-    y: 321,
-  },
-  {
-    x: '个护健康',
-    y: 311,
-  },
-  {
-    x: '服饰箱包',
-    y: 41,
-  },
-  {
-    x: '母婴产品',
-    y: 121,
-  },
-  {
-    x: '其他',
-    y: 111,
-  },
-];
-
-const salesTypeDataOffline = [
-  {
-    x: '家用电器',
-    y: 99,
-  },
-  {
-    x: '食用酒水',
-    y: 188,
-  },
-  {
-    x: '个护健康',
-    y: 344,
-  },
-  {
-    x: '服饰箱包',
-    y: 255,
-  },
-  {
-    x: '其他',
-    y: 65,
-  },
-];
-
-const offlineData = [];
-for (let i = 0; i < 10; i += 1) {
-  offlineData.push({
-    name: `Stores ${i}`,
-    cvr: Math.ceil(Math.random() * 9) / 10,
-  });
-}
-const offlineChartData = [];
-for (let i = 0; i < 20; i += 1) {
-  offlineChartData.push({
-    x: new Date().getTime() + 1000 * 60 * 30 * i,
-    y1: Math.floor(Math.random() * 100) + 10,
-    y2: Math.floor(Math.random() * 100) + 10,
-  });
-}
-
-const radarOriginData = [
-  {
-    name: '个人',
-    ref: 10,
-    koubei: 8,
-    output: 4,
-    contribute: 5,
-    hot: 7,
-  },
-  {
-    name: '团队',
-    ref: 3,
-    koubei: 9,
-    output: 6,
-    contribute: 3,
-    hot: 1,
-  },
-  {
-    name: '部门',
-    ref: 4,
-    koubei: 1,
-    output: 6,
-    contribute: 5,
-    hot: 7,
-  },
-];
-
-const radarData = [];
-const radarTitleMap = {
-  ref: '引用',
-  koubei: '口碑',
-  output: '产量',
-  contribute: '贡献',
-  hot: '热度',
-};
-radarOriginData.forEach(item => {
-  Object.keys(item).forEach(key => {
-    if (key !== 'name') {
-      radarData.push({
-        name: item.name,
-        label: radarTitleMap[key],
-        value: item[key],
-      });
-    }
-  });
-});
-
-const getFakeChartData = {
-  visitData,
-  visitData2,
-  salesData,
-  searchData,
-  offlineData,
-  offlineChartData,
-  salesTypeData,
-  salesTypeDataOnline,
-  salesTypeDataOffline,
-  radarData,
-};
-
-export default {
-  'GET /api/fake_chart_data': getFakeChartData,
-};

mock/geographic.js

-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]);
-}
-
-export default {
-  'GET /api/geographic/province': getProvince,
-  'GET /api/geographic/city/:province': getCity,
-};

mock/geographic/province.json

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

mock/profile.js

-import mockjs from 'mockjs';
-
-const basicGoods = [
-  {
-    id: '1234561',
-    name: '矿泉水 550ml',
-    barcode: '12421432143214321',
-    price: '2.00',
-    num: '1',
-    amount: '2.00',
-  },
-  {
-    id: '1234562',
-    name: '凉茶 300ml',
-    barcode: '12421432143214322',
-    price: '3.00',
-    num: '2',
-    amount: '6.00',
-  },
-  {
-    id: '1234563',
-    name: '好吃的薯片',
-    barcode: '12421432143214323',
-    price: '7.00',
-    num: '4',
-    amount: '28.00',
-  },
-  {
-    id: '1234564',
-    name: '特别好吃的蛋卷',
-    barcode: '12421432143214324',
-    price: '8.50',
-    num: '3',
-    amount: '25.50',
-  },
-];
-
-const basicProgress = [
-  {
-    key: '1',
-    time: '2017-10-01 14:10',
-    rate: '联系客户',
-    status: 'processing',
-    operator: '取货员 ID1234',
-    cost: '5mins',
-  },
-  {
-    key: '2',
-    time: '2017-10-01 14:05',
-    rate: '取货员出发',
-    status: 'success',
-    operator: '取货员 ID1234',
-    cost: '1h',
-  },
-  {
-    key: '3',
-    time: '2017-10-01 13:05',
-    rate: '取货员接单',
-    status: 'success',
-    operator: '取货员 ID1234',
-    cost: '5mins',
-  },
-  {
-    key: '4',
-    time: '2017-10-01 13:00',
-    rate: '申请审批通过',
-    status: 'success',
-    operator: '系统',
-    cost: '1h',
-  },
-  {
-    key: '5',
-    time: '2017-10-01 12:00',
-    rate: '发起退货申请',
-    status: 'success',
-    operator: '用户',
-    cost: '5mins',
-  },
-];
-
-const advancedOperation1 = [
-  {
-    key: 'op1',
-    type: '订购关系生效',
-    name: '曲丽丽',
-    status: 'agree',
-    updatedAt: '2017-10-03  19:23:12',
-    memo: '-',
-  },
-  {
-    key: 'op2',
-    type: '财务复审',
-    name: '付小小',
-    status: 'reject',
-    updatedAt: '2017-10-03  19:23:12',
-    memo: '不通过原因',
-  },
-  {
-    key: 'op3',
-    type: '部门初审',
-    name: '周毛毛',
-    status: 'agree',
-    updatedAt: '2017-10-03  19:23:12',
-    memo: '-',
-  },
-  {
-    key: 'op4',
-    type: '提交订单',
-    name: '林东东',
-    status: 'agree',
-    updatedAt: '2017-10-03  19:23:12',
-    memo: '很棒',
-  },
-  {
-    key: 'op5',
-    type: '创建订单',
-    name: '汗牙牙',
-    status: 'agree',
-    updatedAt: '2017-10-03  19:23:12',
-    memo: '-',
-  },
-];
-
-const advancedOperation2 = [
-  {
-    key: 'op1',
-    type: '订购关系生效',
-    name: '曲丽丽',
-    status: 'agree',
-    updatedAt: '2017-10-03  19:23:12',
-    memo: '-',
-  },
-];
-
-const advancedOperation3 = [
-  {
-    key: 'op1',
-    type: '创建订单',
-    name: '汗牙牙',
-    status: 'agree',
-    updatedAt: '2017-10-03  19:23:12',
-    memo: '-',
-  },
-];
-const getProfileAdvancedData = {
-  advancedOperation1,
-  advancedOperation2,
-  advancedOperation3,
-};
-
-const { Random } = mockjs;
-
-export default {
-  'GET /api/profile/advanced': getProfileAdvancedData,
-  'GET /api/profile/basic': (req, res) => {
-    const { id } = req.query;
-    const application = {
-      id,
-      status: '已取货',
-      orderNo: Random.id(),
-      childOrderNo: Random.id(),
-    };
-    const userInfo = {
-      name: Random.cname(),
-      tel: '18100000000',
-      delivery: '菜鸟物流',
-      addr: '浙江省杭州市西湖区万塘路18号',
-      remark: '备注',
-    };
-    res.json({
-      userInfo,
-      application,
-      basicGoods,
-      basicProgress,
-    });
-  },
-};

mock/route.ts

+export default {
+  '/api/auth_routes': {
+    '/form/advanced-form': { authority: ['admin', 'user'] },
+  },
+};

mock/rule.js

-import { parse } from 'url';
-
-// mock tableListDataSource
-let tableListDataSource = [];
-for (let i = 0; i < 46; i += 1) {
-  tableListDataSource.push({
-    key: i,
-    disabled: i % 6 === 0,
-    href: 'https://ant.design',
-    avatar: [
-      'https://gw.alipayobjects.com/zos/rmsportal/eeHMaZBwmTvLdIwMfBpg.png',
-      'https://gw.alipayobjects.com/zos/rmsportal/udxAbMEhpwthVVcjLXik.png',
-    ][i % 2],
-    name: `TradeCode ${i}`,
-    title: `一个任务名称 ${i}`,
-    owner: '曲丽丽',
-    desc: '这是一段描述',
-    callNo: Math.floor(Math.random() * 1000),
-    status: Math.floor(Math.random() * 10) % 4,
-    updatedAt: new Date(`2017-07-${Math.floor(i / 2) + 1}`),
-    createdAt: new Date(`2017-07-${Math.floor(i / 2) + 1}`),
-    progress: Math.ceil(Math.random() * 100),
-  });
-}
-
-function getRule(req, res, u) {
-  let url = u;
-  if (!url || Object.prototype.toString.call(url) !== '[object String]') {
-    url = req.url; // eslint-disable-line
-  }
-
-  const params = parse(url, true).query;
-
-  let dataSource = tableListDataSource;
-
-  if (params.sorter) {
-    const s = params.sorter.split('_');
-    dataSource = dataSource.sort((prev, next) => {
-      if (s[1] === 'descend') {
-        return next[s[0]] - prev[s[0]];
-      }
-      return prev[s[0]] - next[s[0]];
-    });
-  }
-
-  if (params.status) {
-    const status = params.status.split(',');
-    let filterDataSource = [];
-    status.forEach(s => {
-      filterDataSource = filterDataSource.concat(
-        dataSource.filter(data => parseInt(data.status, 10) === parseInt(s[0], 10))
-      );
-    });
-    dataSource = filterDataSource;
-  }
-
-  if (params.name) {
-    dataSource = dataSource.filter(data => data.name.indexOf(params.name) > -1);
-  }
-
-  let pageSize = 10;
-  if (params.pageSize) {
-    pageSize = params.pageSize * 1;
-  }
-
-  const result = {
-    list: dataSource,
-    pagination: {
-      total: dataSource.length,
-      pageSize,
-      current: parseInt(params.currentPage, 10) || 1,
-    },
-  };
-
-  return res.json(result);
-}
-
-function postRule(req, res, u, b) {
-  let url = u;
-  if (!url || Object.prototype.toString.call(url) !== '[object String]') {
-    url = req.url; // eslint-disable-line
-  }
-
-  const body = (b && b.body) || req.body;
-  const { method, name, desc, key } = body;
-
-  switch (method) {
-    /* eslint no-case-declarations:0 */
-    case 'delete':
-      tableListDataSource = tableListDataSource.filter(item => key.indexOf(item.key) === -1);
-      break;
-    case 'post':
-      const i = Math.ceil(Math.random() * 10000);
-      tableListDataSource.unshift({
-        key: i,
-        href: 'https://ant.design',
-        avatar: [
-          'https://gw.alipayobjects.com/zos/rmsportal/eeHMaZBwmTvLdIwMfBpg.png',
-          'https://gw.alipayobjects.com/zos/rmsportal/udxAbMEhpwthVVcjLXik.png',
-        ][i % 2],
-        name: `TradeCode ${i}`,
-        title: `一个任务名称 ${i}`,
-        owner: '曲丽丽',
-        desc,
-        callNo: Math.floor(Math.random() * 1000),
-        status: Math.floor(Math.random() * 10) % 2,
-        updatedAt: new Date(),
-        createdAt: new Date(),
-        progress: Math.ceil(Math.random() * 100),
-      });
-      break;
-    case 'update':
-      tableListDataSource = tableListDataSource.map(item => {
-        if (item.key === key) {
-          Object.assign(item, { desc, name });
-          return item;
-        }
-        return item;
-      });
-      break;
-    default:
-      break;
-  }
-
-  return getRule(req, res, u);
-}
-
-export default {
-  'GET /api/rule': getRule,
-  'POST /api/rule': postRule,
-};

package.json

 {
   "name": "ant-design-pro",
-  "version": "2.3.1",
+  "version": "4.0.0",
   "private": true,
   "description": "An out-of-box UI solution for enterprise applications",
   "scripts": {
@@ -13,24 +13,26 @@
     "docker:dev": "docker-compose -f ./docker/docker-compose.dev.yml up",
     "docker:push": "npm run docker-hub:build && npm run docker:tag && docker push antdesign/ant-design-pro",
     "docker:tag": "docker tag ant-design-pro antdesign/ant-design-pro",
-    "functions:build": "npm run generateMock && netlify-lambda build ./lambda",
-    "functions:run": "npm run generateMock && cross-env NODE_ENV=dev netlify-lambda serve ./lambda",
-    "generateMock": "node ./scripts/generateMock",
-    "lint": "eslint --ext .js src mock tests && npm run lint:style && npm run lint:prettier",
+    "fetch:blocks": "node ./scripts/fetch-blocks.js",
+    "functions:build": "netlify-lambda build ./lambda",
+    "functions:run": "cross-env NODE_ENV=dev netlify-lambda serve ./lambda",
+    "lint": "npm run lint:js && npm run lint:ts && npm run lint:style && npm run lint:prettier",
     "lint-staged": "lint-staged",
     "lint-staged:js": "eslint --ext .js",
-    "lint:fix": "eslint --fix --ext .js src mock tests && stylelint --fix 'src/**/*.less' --syntax less",
+    "lint-staged:ts": "tslint",
+    "lint:fix": "eslint --fix --ext .js src tests && npm run lint:style && npm run tslint:fix",
+    "lint:js": "eslint --ext .js src tests",
     "lint:prettier": "check-prettier lint",
-    "lint:style": "stylelint 'src/**/*.less' --syntax less",
-    "prettier": "node ./scripts/prettier.js",
-    "site": "umi build && npm run functions:build",
+    "lint:style": "stylelint --fix \"src/**/*.less\" --syntax less",
+    "lint:ts": "tslint -p . -c tslint.yml",
+    "prettier": " check-prettier write",
+    "site": "npm run fetch:blocks && npm run functions:build && umi build",
     "start": "umi dev",
     "start:no-mock": "cross-env MOCK=none umi dev",
     "test": "umi test",
     "test:all": "node ./tests/run-tests.js",
     "test:component": "umi test ./src/components",
-    "tslint": "npm run tslint:fix",
-    "tslint:fix": "tslint --fix 'src/**/*.ts*'"
+    "tslint:fix": "tslint --fix \"src/**/*.ts*\""
   },
   "husky": {
     "hooks": {
@@ -40,10 +42,11 @@
   "lint-staged": {
     "**/*.less": "stylelint --syntax less",
     "**/*.{js,jsx}": "npm run lint-staged:js",
-    "**/*.{js,ts,tsx,json,jsx,less}": [
-      "node ./scripts/lint-prettier.js",
+    "**/*.{js,ts,tsx,md,json,jsx,less}": [
+      "npm run prettier",
       "git add"
-    ]
+    ],
+    "**/*.{ts,tsx}": "npm run lint-staged:ts"
   },
   "browserslist": [
     "> 1%",
@@ -51,86 +54,88 @@
     "not ie <= 10"
   ],
   "dependencies": {
-    "@antv/data-set": "^0.10.1",
-    "antd": "^3.16.1",
-    "bizcharts": "^3.5.3-beta.0",
-    "bizcharts-plugin-slider": "^2.1.1-beta.1",
+    "@ant-design/pro-layout": "^4.4.2",
+    "@antv/data-set": "^0.10.2",
+    "antd": "^3.19.1",
     "classnames": "^2.2.6",
     "dva": "^2.4.1",
-    "enquire-js": "^0.2.1",
-    "express": "^4.16.4",
-    "gg-editor": "^2.0.2",
     "lodash": "^4.17.11",
     "lodash-decorators": "^6.0.1",
-    "memoize-one": "^5.0.0",
+    "memoize-one": "^5.0.4",
     "moment": "^2.24.0",
-    "netlify-lambda": "^1.4.3",
-    "numeral": "^2.0.6",
-    "nzh": "^1.0.4",
-    "omit.js": "^1.0.0",
+    "omit.js": "^1.0.2",
     "path-to-regexp": "^3.0.0",
-    "prop-types": "^15.6.2",
-    "qs": "^6.6.0",
-    "rc-animate": "^2.6.0",
-    "react": "^16.7.0",
+    "prop-types": "^15.7.2",
+    "qs": "^6.7.0",
+    "rc-animate": "^2.8.3",
+    "react": "^16.8.6",
     "react-container-query": "^0.11.0",
     "react-copy-to-clipboard": "^5.0.1",
     "react-document-title": "^2.0.3",
-    "react-dom": "^16.7.0",
-    "react-fittext": "^1.0.0",
+    "react-dom": "^16.8.6",
     "react-media": "^1.9.2",
-    "resize-observer-polyfill": "^1.5.1",
-    "umi": "^2.4.4",
-    "umi-plugin-react": "^1.7.2",
-    "umi-request": "^1.0.5"
+    "react-media-hook2": "^1.0.5",
+    "umi": "^2.7.0-beta.2",
+    "umi-plugin-ga": "^1.1.3",
+    "umi-plugin-locale": "^2.8.0-beta.1",
+    "umi-plugin-pro-block": "^1.3.2",
+    "umi-plugin-react": "^1.8.0-beta.1",
+    "umi-request": "^1.0.7"
   },
   "devDependencies": {
+    "@types/classnames": "^2.2.7",
     "@types/history": "^4.7.2",
-    "@types/react": "^16.8.1",
-    "@types/react-dom": "^16.0.11",
+    "@types/jest": "^24.0.13",
+    "@types/lodash": "^4.14.133",
+    "@types/qs": "^6.5.3",
+    "@types/react": "^16.8.19",
+    "@types/react-document-title": "^2.0.3",
+    "@types/react-dom": "^16.8.4",
     "antd-pro-merge-less": "^1.0.0",
     "@ant-design/colors": "^3.1.0",
     "babel-eslint": "^10.0.1",
     "chalk": "^2.4.2",
-    "check-prettier": "^1.0.1",
+    "check-prettier": "^1.0.3",
     "cross-env": "^5.2.0",
-    "cross-port-killer": "^1.0.1",
+    "cross-port-killer": "^1.1.1",
     "enzyme": "^3.9.0",
-    "eslint": "^5.13.0",
+    "eslint": "^5.16.0",
     "eslint-config-airbnb": "^17.1.0",
-    "eslint-config-prettier": "^4.1.0",
+    "eslint-config-prettier": "^4.3.0",
     "eslint-plugin-babel": "^5.3.0",
-    "eslint-plugin-compat": "^2.6.3",
-    "eslint-plugin-import": "^2.16.0",
+    "eslint-plugin-compat": "^3.1.1",
+    "eslint-plugin-import": "^2.17.3",
     "eslint-plugin-jsx-a11y": "^6.2.1",
     "eslint-plugin-markdown": "^1.0.0",
-    "eslint-plugin-react": "^7.12.4",
+    "eslint-plugin-react": "^7.13.0",
+    "express": "^4.17.1",
     "gh-pages": "^2.0.1",
-    "husky": "^2.2.0",
-    "jest-puppeteer": "^4.1.0",
+    "husky": "^2.3.0",
+    "jest-puppeteer": "^4.2.0",
     "jsdom-global": "^3.0.2",
     "less": "^3.9.0",
-    "lint-staged": "^8.1.1",
-    "merge-umi-mock-data": "^1.0.4",
+    "lint-staged": "^8.1.7",
     "mockjs": "^1.0.1-beta3",
-    "prettier": "^1.17.0",
-    "serverless-http": "^2.0.1",
+    "netlify-lambda": "^1.4.13",
+    "node-fetch": "^2.6.0",
+    "prettier": "^1.17.1",
+    "serverless-http": "^2.0.2",
     "slash2": "^2.0.0",
-    "stylelint": "^9.10.1",
-    "stylelint-config-css-modules": "^1.3.0",
-    "stylelint-config-prettier": "^5.0.0",
-    "stylelint-config-rational-order": "^0.1.0",
-    "stylelint-config-standard": "^18.2.0",
+    "stylelint": "^10.0.1",
+    "stylelint-config-css-modules": "^1.4.0",
+    "stylelint-config-prettier": "^5.2.0",
+    "stylelint-config-rational-order": "^0.1.2",
+    "stylelint-config-standard": "^18.3.0",
     "stylelint-declaration-block-no-ignored-properties": "^2.1.0",
-    "stylelint-order": "^2.0.0",
-    "tslint": "^5.12.1",
-    "tslint-config-prettier": "^1.17.0",
-    "tslint-react": "^3.6.0",
-    "umi-plugin-ga": "^1.1.3",
+    "stylelint-order": "^3.0.0",
+    "tslint": "^5.17.0",
+    "tslint-config-prettier": "^1.18.0",
+    "tslint-eslint-rules": "^5.4.0",
+    "tslint-react": "^4.0.0",
     "webpack-theme-color-replacer": "^1.1.5"
   },
   "optionalDependencies": {
-    "puppeteer": "^1.12.1"
+    "puppeteer": "^1.17.0"
   },
   "engines": {
     "node": ">=10.0.0"
@@ -141,5 +146,44 @@
     "src/**/*.less",
     "config/**/*.js*",
     "scripts/**/*.js"
-  ]
+  ],
+  "create-umi": {
+    "ignoreScript": [
+      "docker*",
+      "functions*",
+      "site",
+      "generateMock"
+    ],
+    "ignoreDependencies": [
+      "netlify*",
+      "serverless",
+      "express"
+    ],
+    "copy": [
+      [
+        "create-umi/README.md",
+        "README.md"
+      ],
+      [
+        "create-umi/package.json",
+        "package.json"
+      ]
+    ],
+    "ignore": [
+      ".dockerignore",
+      ".git",
+      ".gitpod.yml",
+      "CODE_OF_CONDUCT.md",
+      "Dockerfile",
+      "Dockerfile.*",
+      "lambda",
+      "LICENSE",
+      "netlify.toml",
+      "README.*.md",
+      "scripts",
+      "azure-pipelines.yml",
+      "docker",
+      "create-umi"
+    ]
+  }
 }

scripts/fetch-blocks.js

+const path = require('path');
+const fs = require('fs');
+const fetch = require('node-fetch');
+const exec = require('child_process').exec;
+const getNewRouteCode = require('./repalceRouter');
+const router = require('./router.config');
+const chalk = require('chalk');
+const insertCode = require('./insertCode');
+
+const fetchGithubFiles = async () => {
+  const ignoreFile = ['_scripts'];
+  const data = await fetch(`https://api.github.com/repos/ant-design/pro-blocks/git/trees/master`);
+  if (data.status !== 200) {
+    return;
+  }
+  const { tree } = await data.json();
+  const files = tree.filter(file => file.type === 'tree' && !ignoreFile.includes(file.path));
+  return Promise.resolve(files);
+};
+
+const relativePath = path.join(__dirname, '../config/config.ts');
+
+const findAllInstallRouter = router => {
+  let routers = [];
+  router.forEach(item => {
+    if (item.component && item.path) {
+      if (item.path !== '/user' || item.path !== '/') {
+        routers.push({
+          ...item,
+          routes: !!item.routes,
+        });
+      }
+    }
+    if (item.routes) {
+      routers = routers.concat(findAllInstallRouter(item.routes));
+    }
+  });
+  return routers;
+};
+
+const filterParentRouter = (router, layout) => {
+  return [...router]
+    .map(item => {
+      if (item.routes && (!router.component || layout)) {
+        return { ...item, routes: filterParentRouter(item.routes, false) };
+      }
+      if (item.redirect) {
+        return item;
+      }
+      return null;
+    })
+    .filter(item => item);
+};
+const firstUpperCase = pathString => {
+  return pathString
+    .replace('.', '')
+    .split(/\/|\-/)
+    .map(s => s.toLowerCase().replace(/( |^)[a-z]/g, L => L.toUpperCase()))
+    .filter(s => s)
+    .join('');
+};
+
+const execCmd = shell => {
+  return new Promise((resolve, reject) => {
+    exec(shell, { encoding: 'utf8' }, (error, statusbar) => {
+      if (error) {
+        console.log(error);
+        return reject(error);
+      }
+      console.log(statusbar);
+      resolve();
+    });
+  });
+};
+
+// replace router config
+const parentRouter = filterParentRouter(router, true);
+const { routesPath, code } = getNewRouteCode(relativePath, parentRouter);
+// write ParentRouter
+fs.writeFileSync(routesPath, code);
+
+const installBlock = async () => {
+  let gitFiles = await fetchGithubFiles();
+  const installRouters = findAllInstallRouter(router);
+  const installBlockIteration = async i => {
+    const item = installRouters[i];
+
+    if (!item || !item.path) {
+      return Promise.resolve();
+    }
+    const gitPath = firstUpperCase(item.path);
+    // 如果这个区块在 git 上存在
+    if (gitFiles.find(file => file.path === gitPath)) {
+      console.log('install ' + chalk.green(item.name) + ' to: ' + chalk.yellow(item.path));
+      gitFiles = gitFiles.filter(file => file.path !== gitPath);
+      const skipModifyRouter = item.routes ? '--skip-modify-routes' : '';
+      const cmd = `umi block add https://github.com/ant-design/pro-blocks/tree/master/${gitPath}  --path=${
+        item.path
+      } ${skipModifyRouter}`;
+      try {
+        await execCmd(cmd);
+        console.log(`install ${chalk.hex('#1890ff')(item.name)} success`);
+      } catch (error) {
+        console.error(error);
+      }
+    }
+    return installBlockIteration(i + 1);
+  };
+  // 安装路由中设置的区块
+  await installBlockIteration(0);
+
+  const installGitFile = async i => {
+    const item = gitFiles[i];
+    if (!item || !item.path) {
+      return Promise.resolve();
+    }
+    console.log('install ' + chalk.green(item.path));
+    const cmd = `umi block add https://github.com/ant-design/pro-blocks/tree/master/${item.path}`;
+    await execCmd(cmd);
+    return installBlockIteration(1);
+  };
+
+  // 安装 router 中没有的剩余区块.
+  installGitFile(0);
+};
+installBlock().then(() => {
+  // 插入 pro 需要的演示代码
+  insertCode();
+});

scripts/generateMock.js

-const generateMock = require('merge-umi-mock-data');
-const path = require('path');
-generateMock(path.join(__dirname, '../mock'), path.join(__dirname, '../lambda/mock/index.js'));

scripts/getPrettierFiles.js

-const glob = require('glob');
-
-const getPrettierFiles = () => {
-  let files = [];
-  const jsFiles = glob.sync('src/**/*.js*', { ignore: ['**/node_modules/**', 'build/**'] });
-  const tsFiles = glob.sync('src/**/*.ts*', { ignore: ['**/node_modules/**', 'build/**'] });
-  const configFiles = glob.sync('config/**/*.js*', { ignore: ['**/node_modules/**', 'build/**'] });
-  const scriptFiles = glob.sync('scripts/**/*.js');
-  const lessFiles = glob.sync('src/**/*.less*', { ignore: ['**/node_modules/**', 'build/**'] });
-  const mdFiles = glob.sync('src/**/*.md*', { ignore: ['**/node_modules/**', 'build/**'] });
-  files = files.concat(jsFiles);
-  files = files.concat(tsFiles);
-  files = files.concat(configFiles);
-  files = files.concat(scriptFiles);
-  files = files.concat(lessFiles);
-  files = files.concat(mdFiles);
-  if (!files.length) {
-    return;
-  }
-  return files;
-};
-
-module.exports = getPrettierFiles;

scripts/insertCode.js

+const parser = require('@babel/parser');
+const traverse = require('@babel/traverse');
+const generate = require('@babel/generator');
+const t = require('@babel/types');
+const fs = require('fs');
+const path = require('path');
+const prettier = require('prettier');
+const chalk = require('chalk');
+
+const parseCode = code => {
+  return parser.parse(code, {
+    sourceType: 'module',
+    plugins: ['typescript', 'jsx'],
+  }).program.body[0];
+};
+
+/**
+ * 生成代码
+ * @param {*} ast
+ */
+function generateCode(ast) {
+  const newCode = generate.default(ast, {}).code;
+  return prettier.format(newCode, {
+    // format same as ant-design-pro
+    singleQuote: true,
+    trailingComma: 'es5',
+    printWidth: 100,
+    parser: 'typescript',
+  });
+}
+
+const SettingCodeString = `
+  <SettingDrawer
+    settings={settings}
+    onSettingChange={config =>
+    dispatch({
+        type: 'settings/changeSetting',
+        payload: config,
+    })
+    }
+  />
+`;
+
+const mapAst = (configPath, callBack) => {
+  const ast = parser.parse(fs.readFileSync(configPath, 'utf-8'), {
+    sourceType: 'module',
+    plugins: ['typescript', 'jsx'],
+  });
+  // 查询当前配置文件是否导出 routes 属性
+  traverse.default(ast, {
+    Program({ node }) {
+      const { body } = node;
+      callBack(body);
+    },
+  });
+  return generateCode(ast);
+};
+
+const insertBasicLayout = configPath => {
+  return mapAst(configPath, body => {
+    const index = body.findIndex(item => {
+      return item.type !== 'ImportDeclaration';
+    });
+
+    body.forEach(item => {
+      // 从包中导出 SettingDrawer
+      if (item.type === 'ImportDeclaration') {
+        if (item.source.value === '@ant-design/pro-layout') {
+          item.specifiers.push(parseCode(`SettingDrawer`).expression);
+        }
+      }
+      if (item.type === 'VariableDeclaration') {
+        const {
+          id,
+          init: { body },
+        } = item.declarations[0];
+        // 给 BasicLayout 中插入 button 和 设置抽屉
+        if (id.name === `BasicLayout`) {
+          body.body.forEach(node => {
+            if (node.type === 'ReturnStatement') {
+              const JSXFragment = parseCode(`<></>`).expression;
+              JSXFragment.children.push({ ...node.argument });
+              JSXFragment.children.push(parseCode(SettingCodeString).expression);
+              node.argument = JSXFragment;
+            }
+          });
+        }
+      }
+    });
+  });
+};
+
+const insertBlankLayout = configPath => {
+  return mapAst(configPath, body => {
+    const index = body.findIndex(item => {
+      return item.type !== 'ImportDeclaration';
+    });
+    // 从组件中导入 CopyBlock
+    body.splice(
+      index,
+      0,
+      parseCode(`import CopyBlock from '@/components/CopyBlock';
+    `),
+    );
+    body.forEach(item => {
+      if (item.type === 'VariableDeclaration') {
+        const { id, init } = item.declarations[0];
+        // 给 BasicLayout 中插入 button 和 设置抽屉
+        if (id.name === `Layout`) {
+          const JSXFragment = parseCode(`<></>`).expression;
+          JSXFragment.children.push({ ...init.body });
+          JSXFragment.children.push(parseCode(` <CopyBlock id={Date.now()}/>`).expression);
+          init.body = JSXFragment;
+        }
+      }
+    });
+  });
+};
+
+const insertRightContent = configPath => {
+  return mapAst(configPath, body => {
+    const index = body.findIndex(item => {
+      return item.type !== 'ImportDeclaration';
+    });
+    // 从组件中导入 CopyBlock
+    body.splice(index, 0, parseCode(`import NoticeIconView from './NoticeIconView';`));
+
+    body.forEach(item => {
+      if (item.type === 'ClassDeclaration') {
+        const classBody = item.body.body[0].body;
+        classBody.body.forEach(node => {
+          if (node.type === 'ReturnStatement') {
+            const index = node.argument.children.findIndex(item => {
+              if (item.type === 'JSXElement') {
+                if (item.openingElement.name.name === 'Avatar') {
+                  return true;
+                }
+              }
+            });
+            node.argument.children.splice(index, 1, parseCode(`<Avatar menu />`).expression);
+            node.argument.children.splice(index, 0, parseCode(`<NoticeIconView />`).expression);
+          }
+        });
+      }
+    });
+  });
+};
+
+module.exports = () => {
+  const basicLayoutPath = path.join(__dirname, '../src/layouts/BasicLayout.tsx');
+  fs.writeFileSync(basicLayoutPath, insertBasicLayout(basicLayoutPath));
+  console.log(`insert ${chalk.hex('#1890ff')('BasicLayout')} success`);
+
+  const rightContentPath = path.join(__dirname, '../src/components/GlobalHeader/RightContent.tsx');
+  fs.writeFileSync(rightContentPath, insertRightContent(rightContentPath));
+  console.log(`insert ${chalk.hex('#1890ff')('RightContent')} success`);
+
+  const blankLayoutPath = path.join(__dirname, '../src/layouts/BlankLayout.tsx');
+  fs.writeFileSync(blankLayoutPath, insertBlankLayout(blankLayoutPath));
+  console.log(`insert ${chalk.hex('#1890ff')('blankLayoutPath')} success`);
+};

scripts/lint-prettier.js

-/**
- * copy to https://github.com/facebook/react/blob/master/scripts/prettier/index.js
- * prettier api doc https://prettier.io/docs/en/api.html
- *----------*****--------------
- *  lint file is prettier
- *----------*****--------------
- */
-
-const prettier = require('prettier');
-const fs = require('fs');
-const chalk = require('chalk');
-const prettierConfigPath = require.resolve('../.prettierrc');
-
-const files = process.argv.slice(2);
-
-let didError = false;
-
-files.forEach(file => {
-  Promise.all([
-    prettier.resolveConfig(file, {
-      config: prettierConfigPath,
-    }),
-    prettier.getFileInfo(file),
-  ])
-    .then(resolves => {
-      const [options, fileInfo] = resolves;
-      if (fileInfo.ignored) {
-        return;
-      }
-      const input = fs.readFileSync(file, 'utf8');
-      const withParserOptions = {
-        ...options,
-        parser: fileInfo.inferredParser,
-      };
-      const output = prettier.format(input, withParserOptions);
-      if (output !== input) {
-        fs.writeFileSync(file, output, 'utf8');
-        console.log(chalk.green(`${file} is prettier`));
-      }
-    })
-    .catch(e => {
-      didError = true;
-    })
-    .finally(() => {
-      if (didError) {
-        process.exit(1);
-      }
-      console.log(chalk.hex('#1890FF')('prettier success!'));
-    });
-});

scripts/prettier.js

-/**
- * copy to https://github.com/facebook/react/blob/master/scripts/prettier/index.js
- * prettier api doc https://prettier.io/docs/en/api.html
- *----------*****--------------
- *  prettier all js and all ts.
- *----------*****--------------
- */
-
-const prettier = require('prettier');
-const fs = require('fs');
-const getPrettierFiles = require('./getPrettierFiles');
-const prettierConfigPath = require.resolve('../.prettierrc');
-const chalk = require('chalk');
-
-let didError = false;
-
-const files = getPrettierFiles();
-
-files.forEach(file => {
-  const options = prettier.resolveConfig.sync(file, {
-    config: prettierConfigPath,
-  });
-  const fileInfo = prettier.getFileInfo.sync(file);
-  if (fileInfo.ignored) {
-    return;
-  }
-  try {
-    const input = fs.readFileSync(file, 'utf8');
-    const withParserOptions = {
-      ...options,
-      parser: fileInfo.inferredParser,
-    };
-    const output = prettier.format(input, withParserOptions);
-    if (output !== input) {
-      fs.writeFileSync(file, output, 'utf8');
-      console.log(chalk.green(`${file} is prettier`));
-    }
-  } catch (e) {
-    didError = true;
-  }
-});
-
-if (didError) {
-  process.exit(1);
-}
-console.log(chalk.hex('#1890FF')('prettier success!'));

scripts/repalceRouter.js

+const parser = require('@babel/parser');
+const traverse = require('@babel/traverse');
+const generate = require('@babel/generator');
+const t = require('@babel/types');
+const fs = require('fs');
+const prettier = require('prettier');
+
+const getNewRouteCode = (configPath, newRoute) => {
+  const ast = parser.parse(fs.readFileSync(configPath, 'utf-8'), {
+    sourceType: 'module',
+    plugins: ['typescript'],
+  });
+  let routesNode = null;
+  const importModules = [];
+  // 查询当前配置文件是否导出 routes 属性
+  traverse.default(ast, {
+    Program({ node }) {
+      // find import
+      const { body } = node;
+      body.forEach(item => {
+        if (t.isImportDeclaration(item)) {
+          const { specifiers } = item;
+          const defaultEpecifier = specifiers.find(s => {
+            return t.isImportDefaultSpecifier(s) && t.isIdentifier(s.local);
+          });
+          if (defaultEpecifier && t.isStringLiteral(item.source)) {
+            importModules.push({
+              identifierName: defaultEpecifier.local.name,
+              modulePath: item.source.value,
+            });
+          }
+        }
+      });
+    },
+    ObjectExpression({ node, parent }) {
+      // find routes on object, like { routes: [] }
+      if (t.isArrayExpression(parent)) {
+        // children routes
+        return;
+      }
+      const { properties } = node;
+      properties.forEach(p => {
+        const { key, value } = p;
+        if (t.isObjectProperty(p) && t.isIdentifier(key) && key.name === 'routes') {
+          if (value) {
+            // find json file program expression
+            (p.value = parser.parse(JSON.stringify(newRoute)).program.body[0].expression),
+              (routesNode = value);
+          }
+        }
+      });
+    },
+  });
+  if (routesNode) {
+    const code = generateCode(ast);
+    return { code, routesPath: configPath };
+  } else {
+    throw new Error('route array config not found.');
+  }
+};
+
+/**
+ * 生成代码
+ * @param {*} ast
+ */
+function generateCode(ast) {
+  const newCode = generate.default(ast, {}).code;
+  return prettier.format(newCode, {
+    // format same as ant-design-pro
+    singleQuote: true,
+    trailingComma: 'es5',
+    printWidth: 100,
+    parser: 'typescript',
+  });
+}
+
+module.exports = getNewRouteCode;

scripts/router.config.js

+module.exports = [
+  {
+    path: '/',
+    component: '../layouts/BlankLayout',
+    routes: [
+      // user
+      {
+        path: '/user',
+        component: '../layouts/UserLayout',
+        routes: [
+          { path: '/user/login', name: 'login', component: './User/Login' },
+          { path: '/user/register', name: 'register', component: './User/Register' },
+          {
+            path: '/user/register-result',
+            name: 'register.result',
+            component: './User/RegisterResult',
+          },
+          { path: '/user', redirect: '/user/login' },
+          {
+            component: '404',
+          },
+        ],
+      },
+      // app
+      {
+        path: '/',
+        component: '../layouts/BasicLayout',
+        Routes: ['src/pages/Authorized'],
+        authority: ['admin', 'user'],
+        routes: [
+          // dashboard
+          {
+            path: '/dashboard',
+            name: 'dashboard',
+            icon: 'dashboard',
+            routes: [
+              {
+                path: '/dashboard/analysis',
+                name: 'analysis',
+                component: './Dashboard/Analysis',
+              },
+              {
+                path: '/dashboard/monitor',
+                name: 'monitor',
+                component: './Dashboard/Monitor',
+              },
+              {
+                path: '/dashboard/workplace',
+                name: 'workplace',
+                component: './Dashboard/Workplace',
+              },
+            ],
+          },
+          // forms
+          {
+            path: '/form',
+            icon: 'form',
+            name: 'form',
+            routes: [
+              {
+                path: '/form/basic-form',
+                name: 'basicform',
+                component: './Form/BasicForm',
+              },
+              {
+                path: '/form/step-form',
+                name: 'stepform',
+                component: './Form/StepForm',
+              },
+              {
+                path: '/form/advanced-form',
+                name: 'advancedform',
+                authority: ['admin'],
+                component: './Form/AdvancedForm',
+              },
+            ],
+          },
+          // list
+          {
+            path: '/list',
+            icon: 'table',
+            name: 'list',
+            routes: [
+              {
+                path: '/list/table-list',
+                name: 'searchtable',
+                component: './list/Tablelist',
+              },
+              {
+                path: '/list/basic-list',
+                name: 'basiclist',
+                component: './list/Basiclist',
+              },
+              {
+                path: '/list/card-list',
+                name: 'cardlist',
+                component: './list/Cardlist',
+              },
+              {
+                path: '/list/search',
+                name: 'search-list',
+                component: './list/search',
+                routes: [
+                  {
+                    path: '/list/search/articles',
+                    name: 'articles',
+                    component: './list/Articles',
+                  },
+                  {
+                    path: '/list/search/projects',
+                    name: 'projects',
+                    component: './list/Projects',
+                  },
+                  {
+                    path: '/list/search/applications',
+                    name: 'applications',
+                    component: './list/Applications',
+                  },
+                  {
+                    path: '/list/search',
+                    redirect: '/list/search/articles',
+                  },
+                ],
+              },
+            ],
+          },
+          {
+            path: '/profile',
+            name: 'profile',
+            icon: 'profile',
+            routes: [
+              // profile
+              {
+                path: '/profile/basic',
+                name: 'basic',
+                component: './Profile/BasicProfile',
+              },
+              {
+                path: '/profile/basic/:id',
+                hideInMenu: true,
+                component: './Profile/BasicProfile',
+              },
+              {
+                path: '/profile/advanced',
+                name: 'advanced',
+                authority: ['admin'],
+                component: './Profile/AdvancedProfile',
+              },
+            ],
+          },
+          {
+            name: 'result',
+            icon: 'check-circle-o',
+            path: '/result',
+            routes: [
+              // result
+              {
+                path: '/result/success',
+                name: 'success',
+                component: './Result/Success',
+              },
+              { path: '/result/fail', name: 'fail', component: './Result/Error' },
+            ],
+          },
+          {
+            name: 'exception',
+            icon: 'warning',
+            path: '/exception',
+            routes: [
+              // exception
+              {
+                path: '/exception/403',
+                name: 'not-permission',
+                component: './Exception/403',
+              },
+              {
+                path: '/exception/404',
+                name: 'not-find',
+                component: './Exception/404',
+              },
+              {
+                path: '/exception/500',
+                name: 'server-error',
+                component: './Exception/500',
+              },
+            ],
+          },
+          {
+            name: 'account',
+            icon: 'user',
+            path: '/account',
+            routes: [
+              {
+                path: '/account/center',
+                name: 'center',
+                component: './Account/Center/Center',
+              },
+              {
+                path: '/account/settings',
+                name: 'settings',
+                component: './Account/Settings/Info',
+              },
+            ],
+          },
+          //  editor
+          {
+            name: 'editor',
+            icon: 'highlight',
+            path: '/editor',
+            routes: [
+              {
+                path: '/editor/flow',
+                name: 'flow',
+                component: './Editor/GGEditor/Flow',
+              },
+              {
+                path: '/editor/mind',
+                name: 'mind',
+                component: './Editor/GGEditor/Mind',
+              },
+              {
+                path: '/editor/koni',
+                name: 'koni',
+                component: './Editor/GGEditor/Koni',
+              },
+            ],
+          },
+          { path: '/', redirect: '/dashboard/analysis', authority: ['admin', 'user'] },
+          {
+            component: '404',
+          },
+        ],
+      },
+    ],
+  },
+];

src/app.js

-export const dva = {
-  config: {
-    onError(err) {
-      err.preventDefault();
-    },
-  },
-};
-
-export function render(oldRender) {
-  oldRender();
-}

src/components/ActiveChart/index.js

-import React, { Component } from 'react';
-import { MiniArea } from '../Charts';
-import NumberInfo from '../NumberInfo';
-import styles from './index.less';
-
-function fixedZero(val) {
-  return val * 1 < 10 ? `0${val}` : val;
-}
-
-function getActiveData() {
-  const activeData = [];
-  for (let i = 0; i < 24; i += 1) {
-    activeData.push({
-      x: `${fixedZero(i)}:00`,
-      y: Math.floor(Math.random() * 200) + i * 50,
-    });
-  }
-  return activeData;
-}
-
-export default class ActiveChart extends Component {
-  state = {
-    activeData: getActiveData(),
-  };
-
-  componentDidMount() {
-    this.loopData();
-  }
-
-  componentWillUnmount() {
-    clearTimeout(this.timer);
-    cancelAnimationFrame(this.requestRef);
-  }
-
-  loopData = () => {
-    this.timer = setTimeout(() => {
-      this.setState(
-        {
-          activeData: getActiveData(),
-        },
-        () => {
-          this.loopData();
-        }
-      );
-    }, 500);
-  };
-
-  render() {
-    const { activeData = [] } = this.state;
-
-    return (
-      <div className={styles.activeChart}>
-        <NumberInfo subTitle="目标评估" total="有望达到预期" />
-        <div style={{ marginTop: 32 }}>
-          <MiniArea
-            animate={false}
-            line
-            borderWidth={2}
-            height={84}
-            scale={{
-              y: {
-                tickCount: 3,
-              },
-            }}
-            yAxis={{
-              tickLine: false,
-              label: false,
-              title: false,
-              line: false,
-            }}
-            data={activeData}
-          />
-        </div>
-        {activeData && (
-          <div>
-            <div className={styles.activeChartGrid}>
-              <p>{[...activeData].sort()[activeData.length - 1].y + 200} 亿元</p>
-              <p>{[...activeData].sort()[Math.floor(activeData.length / 2)].y} 亿元</p>
-            </div>
-            <div className={styles.dashedLine}>
-              <div className={styles.line} />
-            </div>
-            <div className={styles.dashedLine}>
-              <div className={styles.line} />
-            </div>
-          </div>
-        )}
-        {activeData && (
-          <div className={styles.activeChartLegend}>
-            <span>00:00</span>
-            <span>{activeData[Math.floor(activeData.length / 2)].x}</span>
-            <span>{activeData[activeData.length - 1].x}</span>
-          </div>
-        )}
-      </div>
-    );
-  }
-}

src/components/ActiveChart/index.less

-.activeChart {
-  position: relative;
-}
-.activeChartGrid {
-  p {
-    position: absolute;
-    top: 80px;
-  }
-  p:last-child {
-    top: 115px;
-  }
-}
-.activeChartLegend {
-  position: relative;
-  height: 20px;
-  margin-top: 8px;
-  font-size: 0;
-  line-height: 20px;
-  span {
-    display: inline-block;
-    width: 33.33%;
-    font-size: 12px;
-    text-align: center;
-  }
-  span:first-child {
-    text-align: left;
-  }
-  span:last-child {
-    text-align: right;
-  }
-}
-.dashedLine {
-  position: relative;
-  top: -70px;
-  left: -3px;
-  height: 1px;
-
-  .line {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-image: linear-gradient(to right, transparent 50%, #e9e9e9 50%);
-    background-size: 6px;
-  }
-}
-
-.dashedLine:last-child {
-  top: -36px;
-}

src/components/ArticleListContent/index.d.ts

-import React from 'react';
-
-export interface ApplicationsProps {
-  data: {
-    content?: string;
-    updatedAt?: any;
-    avatar?: string;
-    owner?: string;
-    href?: string;
-  };
-}
-
-export default class ArticleListContent extends React.Component<ApplicationsProps, any> {}

src/components/ArticleListContent/index.js

-import React from 'react';
-import moment from 'moment';
-import { Avatar } from 'antd';
-import styles from './index.less';
-
-const ArticleListContent = ({ data: { content, updatedAt, avatar, owner, href } }) => (
-  <div className={styles.listContent}>
-    <div className={styles.description}>{content}</div>
-    <div className={styles.extra}>
-      <Avatar src={avatar} size="small" />
-      <a href={href}>{owner}</a> 发布在 <a href={href}>{href}</a>
-      <em>{moment(updatedAt).format('YYYY-MM-DD HH:mm')}</em>
-    </div>
-  </div>
-);
-
-export default ArticleListContent;

src/components/ArticleListContent/index.less

-@import '~antd/lib/style/themes/default.less';
-
-.listContent {
-  .description {
-    max-width: 720px;
-    line-height: 22px;
-  }
-  .extra {
-    margin-top: 16px;
-    color: @text-color-secondary;
-    line-height: 22px;
-    & > :global(.ant-avatar) {
-      position: relative;
-      top: 1px;
-      width: 20px;
-      height: 20px;
-      margin-right: 8px;
-      vertical-align: top;
-    }
-    & > em {
-      margin-left: 16px;
-      color: @disabled-color;
-      font-style: normal;
-    }
-  }
-}
-
-@media screen and (max-width: @screen-xs) {
-  .listContent {
-    .extra {
-      & > em {
-        display: block;
-        margin-top: 8px;
-        margin-left: 0;
-      }
-    }
-  }
-}

src/components/Authorized/Authorized.js

-import CheckPermissions from './CheckPermissions';
-
-const Authorized = ({ children, authority, noMatch = null }) => {
-  const childrenRender = typeof children === 'undefined' ? null : children;
-  return CheckPermissions(authority, childrenRender, noMatch);
-};
-
-export default Authorized;

src/components/Authorized/Authorized.tsx

+import CheckPermissions from './CheckPermissions';
+import { IAuthorityType } from './CheckPermissions';
+import Secured from './Secured';
+import check from './CheckPermissions';
+import AuthorizedRoute from './AuthorizedRoute';
+import React from 'react';
+
+interface IAuthorizedProps {
+  authority: IAuthorityType;
+  noMatch?: React.ReactNode;
+}
+
+type IAuthorizedType = React.FunctionComponent<IAuthorizedProps> & {
+  Secured: typeof Secured;
+  check: typeof check;
+  AuthorizedRoute: typeof AuthorizedRoute;
+};
+
+const Authorized: React.FunctionComponent<IAuthorizedProps> = ({
+  children,
+  authority,
+  noMatch = null,
+}) => {
+  const childrenRender: React.ReactNode = typeof children === 'undefined' ? null : children;
+  const dom = CheckPermissions(authority, childrenRender, noMatch);
+  return <>{dom}</>;
+};
+
+export default Authorized as IAuthorizedType;

src/components/Authorized/AuthorizedRoute.d.ts

-import React from 'react';
-import { RouteProps } from 'react-router';
-
-type authorityFN = (currentAuthority?: string) => boolean;
-
-type authority = string | string[] | authorityFN | Promise<any>;
-
-export interface IAuthorizedRouteProps extends RouteProps {
-  authority: authority;
-}
-export { authority };
-
-export default class AuthorizedRoute extends React.Component<IAuthorizedRouteProps, any> {}

src/components/Authorized/AuthorizedRoute.js → src/components/Authorized/AuthorizedRoute.tsx

 import React from 'react';
 import { Route, Redirect } from 'umi';
 import Authorized from './Authorized';
+import { IAuthorityType } from './CheckPermissions';
 
-// TODO: umi只会返回render和rest
-const AuthorizedRoute = ({ component: Component, render, authority, redirectPath, ...rest }) => (
+interface IAuthorizedRoutePops {
+  currentAuthority: string;
+  component: React.ComponentClass<any, any>;
+  render: (props: any) => React.ReactNode;
+  redirectPath: string;
+  authority: IAuthorityType;
+}
+
+const AuthorizedRoute: React.SFC<IAuthorizedRoutePops> = ({
+  component: Component,
+  render,
+  authority,
+  redirectPath,
+  ...rest
+}) => (
   <Authorized
     authority={authority}
     noMatch={<Route {...rest} render={() => <Redirect to={{ pathname: redirectPath }} />} />}
   >
-    <Route {...rest} render={props => (Component ? <Component {...props} /> : render(props))} />
+    <Route
+      {...rest}
+      render={(props: any) => (Component ? <Component {...props} /> : render(props))}
+    />
   </Authorized>
 );
 

src/components/Authorized/demo/AuthorizedArray.md

----
-order: 1
-title:
-  zh-CN: 使用数组作为参数
-  en-US: Use Array as a parameter
----
-
-Use Array as a parameter
-
-```jsx
-import RenderAuthorized from 'ant-design-pro/lib/Authorized';
-import { Alert } from 'antd';
-
-const Authorized = RenderAuthorized('user');
-const noMatch = <Alert message="No permission." type="error" showIcon />;
-
-ReactDOM.render(
-  <Authorized authority={['user', 'admin']} noMatch={noMatch}>
-    <Alert message="Use Array as a parameter passed!" type="success" showIcon />
-  </Authorized>,
-  mountNode
-);
-```

src/components/Authorized/index.js → src/components/Authorized/index.tsx

@@ -8,4 +8,6 @@ Authorized.Secured = Secured;
 Authorized.AuthorizedRoute = AuthorizedRoute;
 Authorized.check = check;
 
-export default renderAuthorize(Authorized);
+const RenderAuthorize = renderAuthorize(Authorized);
+
+export default RenderAuthorize;

src/components/AvatarList/index.d.ts

-import React from 'react';
-import AvatarItem, { AvatarItemProps, SizeType } from './AvatarItem';
-
-export interface AvatarListProps {
-  Item?: React.ReactElement<AvatarItemProps>;
-  size?: SizeType;
-  maxLength?: number;
-  excessItemsStyle?: React.CSSProperties;
-  style?: React.CSSProperties;
-  children: React.ReactElement<AvatarItemProps> | Array<React.ReactElement<AvatarItemProps>>;
-}
-export default class AvatarList extends React.Component<AvatarListProps, any> {
-  public static Item: typeof AvatarItem;
-}