chore: 项目初始化

.eslintignore

@@ -0,0 +1,7 @@
+/node_modules
+/public
+/dist
+/config
+/src/serviceWorker.ts
+/src/setupTests.ts
+/scripts

.eslintrc

@@ -0,0 +1,33 @@
+{
+  "env": {
+    "browser": true,
+    "es6": true
+  },
+  "extends": ["eslint:recommended", "plugin:react/recommended", "plugin:@typescript-eslint/eslint-recommended", "prettier/@typescript-eslint"],
+  "globals": {
+    "Atomics": "readonly",
+    "SharedArrayBuffer": "readonly"
+  },
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": 2018,
+    "sourceType": "module"
+  },
+  "plugins": ["react", "@typescript-eslint"],
+  "rules": {
+    "semi": ["error", "never"],
+    "no-multiple-empty-lines": [1, { "max": 2 }], //空行最多不能超过2行
+    "comma-dangle": [2, "never"],
+    "react/prop-types": 0,
+    "array-bracket-spacing": ["error", "always"],
+    "object-curly-spacing": ["error", "always"]
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  }
+}

.gitignore

@@ -0,0 +1,4 @@
+node_modules
+dll
+build
+dist

.prettierrc

@@ -0,0 +1,15 @@
+{
+  "prettier.eslintIntegration": true,
+  "printWidth": 180,
+  "tabWidth": 2,
+  "eslintIntegration": true,
+  "stylelintIntegration": true,
+  "singleQuote": true,
+  "semi": false,
+  "trailingComma": "none",
+  "bracketSpacing": true,
+  "quoteProps": "consistent",
+  "htmlWhitespaceSensitivity": "ignore",
+  "arrowParens": "avoid",
+  "jsxBracketSameLine": true
+}

.stylelintrc.json

@@ -0,0 +1,20 @@
+{
+  "extends": ["stylelint-config-standard", "stylelint-config-recess-order"],
+  "plugins": ["stylelint-scss", "stylelint-order"],
+  "rules": {
+    "indentation": 2,
+    "block-no-empty": null,
+    "color-no-invalid-hex": true,
+    "declaration-colon-space-after": "always",
+    "max-empty-lines": 2,
+    "rule-empty-line-before": null,
+    "unit-no-unknown": null,
+    "unit-whitelist": ["px", "em", "rem", "s", "rpx", "%", "vw", "vh", "deg"],
+    "selector-max-compound-selectors": 5,
+    "color-hex-length": "long",
+    "at-rule-no-unknown": null,
+    "scss/at-rule-no-unknown": true,
+    "selector-pseudo-class-no-unknown": [true, { "ignorePseudoClasses": ["global"] }]
+  },
+  "ignoreFiles": ["**/*.js", "**/*.ts", "src/assets/css/**"]
+}

.vscode/.settings.json

@@ -0,0 +1,10 @@
+{
+  "path-intellisense.mappings": {
+    "@": "${workspaceRoot}"
+  },
+
+  "editor.formatOnSave": false,
+  "css.validate": false,
+  "scss.validate": false,
+  "typescript.validate.enable": false
+}

config/env.js

@@ -0,0 +1,101 @@
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+const paths = require('./paths');
+
+// Make sure that including paths.js after env.js will read .env variables.
+delete require.cache[require.resolve('./paths')];
+
+const NODE_ENV = process.env.NODE_ENV;
+if (!NODE_ENV) {
+  throw new Error(
+    'The NODE_ENV environment variable is required but was not specified.'
+  );
+}
+
+// https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
+const dotenvFiles = [
+  `${paths.dotenv}.${NODE_ENV}.local`,
+  `${paths.dotenv}.${NODE_ENV}`,
+  // Don't include `.env.local` for `test` environment
+  // since normally you expect tests to produce the same
+  // results for everyone
+  NODE_ENV !== 'test' && `${paths.dotenv}.local`,
+  paths.dotenv,
+].filter(Boolean);
+
+// Load environment variables from .env* files. Suppress warnings using silent
+// if this file is missing. dotenv will never modify any environment variables
+// that have already been set.  Variable expansion is supported in .env files.
+// https://github.com/motdotla/dotenv
+// https://github.com/motdotla/dotenv-expand
+dotenvFiles.forEach(dotenvFile => {
+  if (fs.existsSync(dotenvFile)) {
+    require('dotenv-expand')(
+      require('dotenv').config({
+        path: dotenvFile,
+      })
+    );
+  }
+});
+
+// We support resolving modules according to `NODE_PATH`.
+// This lets you use absolute paths in imports inside large monorepos:
+// https://github.com/facebook/create-react-app/issues/253.
+// It works similar to `NODE_PATH` in Node itself:
+// https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
+// Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
+// Otherwise, we risk importing Node.js core modules into an app instead of webpack shims.
+// https://github.com/facebook/create-react-app/issues/1023#issuecomment-265344421
+// We also resolve them to make sure all tools using them work consistently.
+const appDirectory = fs.realpathSync(process.cwd());
+process.env.NODE_PATH = (process.env.NODE_PATH || '')
+  .split(path.delimiter)
+  .filter(folder => folder && !path.isAbsolute(folder))
+  .map(folder => path.resolve(appDirectory, folder))
+  .join(path.delimiter);
+
+// Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
+// injected into the application via DefinePlugin in webpack configuration.
+const REACT_APP = /^REACT_APP_/i;
+
+function getClientEnvironment(publicUrl) {
+  const raw = Object.keys(process.env)
+    .filter(key => REACT_APP.test(key))
+    .reduce(
+      (env, key) => {
+        env[key] = process.env[key];
+        return env;
+      },
+      {
+        // Useful for determining whether we’re running in production mode.
+        // Most importantly, it switches React into the correct mode.
+        NODE_ENV: process.env.NODE_ENV || 'development',
+        // Useful for resolving the correct path to static assets in `public`.
+        // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
+        // This should only be used as an escape hatch. Normally you would put
+        // images into the `src` and `import` them in code to get their paths.
+        PUBLIC_URL: publicUrl,
+        // We support configuring the sockjs pathname during development.
+        // These settings let a developer run multiple simultaneous projects.
+        // They are used as the connection `hostname`, `pathname` and `port`
+        // in webpackHotDevClient. They are used as the `sockHost`, `sockPath`
+        // and `sockPort` options in webpack-dev-server.
+        WDS_SOCKET_HOST: process.env.WDS_SOCKET_HOST,
+        WDS_SOCKET_PATH: process.env.WDS_SOCKET_PATH,
+        WDS_SOCKET_PORT: process.env.WDS_SOCKET_PORT,
+      }
+    );
+  // Stringify all values so we can feed into webpack DefinePlugin
+  const stringified = {
+    'process.env': Object.keys(raw).reduce((env, key) => {
+      env[key] = JSON.stringify(raw[key]);
+      return env;
+    }, {}),
+  };
+
+  return { raw, stringified };
+}
+
+module.exports = getClientEnvironment;

config/getHttpsConfig.js

@@ -0,0 +1,66 @@
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+const crypto = require('crypto');
+const chalk = require('react-dev-utils/chalk');
+const paths = require('./paths');
+
+// Ensure the certificate and key provided are valid and if not
+// throw an easy to debug error
+function validateKeyAndCerts({ cert, key, keyFile, crtFile }) {
+  let encrypted;
+  try {
+    // publicEncrypt will throw an error with an invalid cert
+    encrypted = crypto.publicEncrypt(cert, Buffer.from('test'));
+  } catch (err) {
+    throw new Error(
+      `The certificate "${chalk.yellow(crtFile)}" is invalid.\n${err.message}`
+    );
+  }
+
+  try {
+    // privateDecrypt will throw an error with an invalid key
+    crypto.privateDecrypt(key, encrypted);
+  } catch (err) {
+    throw new Error(
+      `The certificate key "${chalk.yellow(keyFile)}" is invalid.\n${
+        err.message
+      }`
+    );
+  }
+}
+
+// Read file and throw an error if it doesn't exist
+function readEnvFile(file, type) {
+  if (!fs.existsSync(file)) {
+    throw new Error(
+      `You specified ${chalk.cyan(
+        type
+      )} in your env, but the file "${chalk.yellow(file)}" can't be found.`
+    );
+  }
+  return fs.readFileSync(file);
+}
+
+// Get the https config
+// Return cert files if provided in env, otherwise just true or false
+function getHttpsConfig() {
+  const { SSL_CRT_FILE, SSL_KEY_FILE, HTTPS } = process.env;
+  const isHttps = HTTPS === 'true';
+
+  if (isHttps && SSL_CRT_FILE && SSL_KEY_FILE) {
+    const crtFile = path.resolve(paths.appPath, SSL_CRT_FILE);
+    const keyFile = path.resolve(paths.appPath, SSL_KEY_FILE);
+    const config = {
+      cert: readEnvFile(crtFile, 'SSL_CRT_FILE'),
+      key: readEnvFile(keyFile, 'SSL_KEY_FILE'),
+    };
+
+    validateKeyAndCerts({ ...config, keyFile, crtFile });
+    return config;
+  }
+  return isHttps;
+}
+
+module.exports = getHttpsConfig;

config/jest/cssTransform.js

@@ -0,0 +1,14 @@
+'use strict';
+
+// This is a custom Jest transformer turning style imports into empty objects.
+// http://facebook.github.io/jest/docs/en/webpack.html
+
+module.exports = {
+  process() {
+    return 'module.exports = {};';
+  },
+  getCacheKey() {
+    // The output is always the same.
+    return 'cssTransform';
+  },
+};

config/jest/fileTransform.js

@@ -0,0 +1,40 @@
+'use strict';
+
+const path = require('path');
+const camelcase = require('camelcase');
+
+// This is a custom Jest transformer turning file imports into filenames.
+// http://facebook.github.io/jest/docs/en/webpack.html
+
+module.exports = {
+  process(src, filename) {
+    const assetFilename = JSON.stringify(path.basename(filename));
+
+    if (filename.match(/\.svg$/)) {
+      // Based on how SVGR generates a component name:
+      // https://github.com/smooth-code/svgr/blob/01b194cf967347d43d4cbe6b434404731b87cf27/packages/core/src/state.js#L6
+      const pascalCaseFilename = camelcase(path.parse(filename).name, {
+        pascalCase: true,
+      });
+      const componentName = `Svg${pascalCaseFilename}`;
+      return `const React = require('react');
+      module.exports = {
+        __esModule: true,
+        default: ${assetFilename},
+        ReactComponent: React.forwardRef(function ${componentName}(props, ref) {
+          return {
+            $$typeof: Symbol.for('react.element'),
+            type: 'svg',
+            ref: ref,
+            key: null,
+            props: Object.assign({}, props, {
+              children: ${assetFilename}
+            })
+          };
+        }),
+      };`;
+    }
+
+    return `module.exports = ${assetFilename};`;
+  },
+};

config/modules.js

@@ -0,0 +1,141 @@
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+const paths = require('./paths');
+const chalk = require('react-dev-utils/chalk');
+const resolve = require('resolve');
+
+/**
+ * Get additional module paths based on the baseUrl of a compilerOptions object.
+ *
+ * @param {Object} options
+ */
+function getAdditionalModulePaths(options = {}) {
+  const baseUrl = options.baseUrl;
+
+  // We need to explicitly check for null and undefined (and not a falsy value) because
+  // TypeScript treats an empty string as `.`.
+  if (baseUrl == null) {
+    // If there's no baseUrl set we respect NODE_PATH
+    // Note that NODE_PATH is deprecated and will be removed
+    // in the next major release of create-react-app.
+
+    const nodePath = process.env.NODE_PATH || '';
+    return nodePath.split(path.delimiter).filter(Boolean);
+  }
+
+  const baseUrlResolved = path.resolve(paths.appPath, baseUrl);
+
+  // We don't need to do anything if `baseUrl` is set to `node_modules`. This is
+  // the default behavior.
+  if (path.relative(paths.appNodeModules, baseUrlResolved) === '') {
+    return null;
+  }
+
+  // Allow the user set the `baseUrl` to `appSrc`.
+  if (path.relative(paths.appSrc, baseUrlResolved) === '') {
+    return [paths.appSrc];
+  }
+
+  // If the path is equal to the root directory we ignore it here.
+  // We don't want to allow importing from the root directly as source files are
+  // not transpiled outside of `src`. We do allow importing them with the
+  // absolute path (e.g. `src/Components/Button.js`) but we set that up with
+  // an alias.
+  if (path.relative(paths.appPath, baseUrlResolved) === '') {
+    return null;
+  }
+
+  // Otherwise, throw an error.
+  throw new Error(
+    chalk.red.bold(
+      "Your project's `baseUrl` can only be set to `src` or `node_modules`." +
+        ' Create React App does not support other values at this time.'
+    )
+  );
+}
+
+/**
+ * Get webpack aliases based on the baseUrl of a compilerOptions object.
+ *
+ * @param {*} options
+ */
+function getWebpackAliases(options = {}) {
+  const baseUrl = options.baseUrl;
+
+  if (!baseUrl) {
+    return {};
+  }
+
+  const baseUrlResolved = path.resolve(paths.appPath, baseUrl);
+
+  if (path.relative(paths.appPath, baseUrlResolved) === '') {
+    return {
+      src: paths.appSrc,
+    };
+  }
+}
+
+/**
+ * Get jest aliases based on the baseUrl of a compilerOptions object.
+ *
+ * @param {*} options
+ */
+function getJestAliases(options = {}) {
+  const baseUrl = options.baseUrl;
+
+  if (!baseUrl) {
+    return {};
+  }
+
+  const baseUrlResolved = path.resolve(paths.appPath, baseUrl);
+
+  if (path.relative(paths.appPath, baseUrlResolved) === '') {
+    return {
+      '^src/(.*)$': '<rootDir>/src/$1',
+    };
+  }
+}
+
+function getModules() {
+  // Check if TypeScript is setup
+  const hasTsConfig = fs.existsSync(paths.appTsConfig);
+  const hasJsConfig = fs.existsSync(paths.appJsConfig);
+
+  if (hasTsConfig && hasJsConfig) {
+    throw new Error(
+      'You have both a tsconfig.json and a jsconfig.json. If you are using TypeScript please remove your jsconfig.json file.'
+    );
+  }
+
+  let config;
+
+  // If there's a tsconfig.json we assume it's a
+  // TypeScript project and set up the config
+  // based on tsconfig.json
+  if (hasTsConfig) {
+    const ts = require(resolve.sync('typescript', {
+      basedir: paths.appNodeModules,
+    }));
+    config = ts.readConfigFile(paths.appTsConfig, ts.sys.readFile).config;
+    // Otherwise we'll check if there is jsconfig.json
+    // for non TS projects.
+  } else if (hasJsConfig) {
+    config = require(paths.appJsConfig);
+  }
+
+  config = config || {};
+  const options = config.compilerOptions || {};
+
+  const additionalModulePaths = getAdditionalModulePaths(options);
+
+  return {
+    additionalModulePaths: additionalModulePaths,
+    webpackAliases: getWebpackAliases(options),
+    jestAliases: getJestAliases(options),
+    hasTsConfig,
+  };
+}
+
+module.exports = getModules();

config/paths.js

@@ -0,0 +1,72 @@
+'use strict';
+
+const path = require('path');
+const fs = require('fs');
+const getPublicUrlOrPath = require('react-dev-utils/getPublicUrlOrPath');
+
+// Make sure any symlinks in the project folder are resolved:
+// https://github.com/facebook/create-react-app/issues/637
+const appDirectory = fs.realpathSync(process.cwd());
+const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
+
+// We use `PUBLIC_URL` environment variable or "homepage" field to infer
+// "public path" at which the app is served.
+// webpack needs to know it to put the right <script> hrefs into HTML even in
+// single-page apps that may serve index.html for nested URLs like /todos/42.
+// We can't use a relative path in HTML because we don't want to load something
+// like /todos/42/static/js/bundle.7289d.js. We have to know the root.
+const publicUrlOrPath = getPublicUrlOrPath(
+  process.env.NODE_ENV === 'development',
+  require(resolveApp('package.json')).homepage,
+  process.env.PUBLIC_URL
+);
+
+const moduleFileExtensions = [
+  'web.mjs',
+  'mjs',
+  'web.js',
+  'js',
+  'web.ts',
+  'ts',
+  'web.tsx',
+  'tsx',
+  'json',
+  'web.jsx',
+  'jsx',
+];
+
+// Resolve file paths in the same order as webpack
+const resolveModule = (resolveFn, filePath) => {
+  const extension = moduleFileExtensions.find(extension =>
+    fs.existsSync(resolveFn(`${filePath}.${extension}`))
+  );
+
+  if (extension) {
+    return resolveFn(`${filePath}.${extension}`);
+  }
+
+  return resolveFn(`${filePath}.js`);
+};
+
+// config after eject: we're in ./config/
+module.exports = {
+  dotenv: resolveApp('.env'),
+  appPath: resolveApp('.'),
+  appBuild: resolveApp('build'),
+  appPublic: resolveApp('public'),
+  appHtml: resolveApp('public/index.html'),
+  appIndexJs: resolveModule(resolveApp, 'src/index'),
+  appPackageJson: resolveApp('package.json'),
+  appSrc: resolveApp('src'),
+  appTsConfig: resolveApp('tsconfig.json'),
+  appJsConfig: resolveApp('jsconfig.json'),
+  yarnLockFile: resolveApp('yarn.lock'),
+  testsSetup: resolveModule(resolveApp, 'src/setupTests'),
+  proxySetup: resolveApp('src/setupProxy.js'),
+  appNodeModules: resolveApp('node_modules'),
+  publicUrlOrPath,
+};
+
+
+
+module.exports.moduleFileExtensions = moduleFileExtensions;

config/pnpTs.js

@@ -0,0 +1,35 @@
+'use strict';
+
+const { resolveModuleName } = require('ts-pnp');
+
+exports.resolveModuleName = (
+  typescript,
+  moduleName,
+  containingFile,
+  compilerOptions,
+  resolutionHost
+) => {
+  return resolveModuleName(
+    moduleName,
+    containingFile,
+    compilerOptions,
+    resolutionHost,
+    typescript.resolveModuleName
+  );
+};
+
+exports.resolveTypeReferenceDirective = (
+  typescript,
+  moduleName,
+  containingFile,
+  compilerOptions,
+  resolutionHost
+) => {
+  return resolveModuleName(
+    moduleName,
+    containingFile,
+    compilerOptions,
+    resolutionHost,
+    typescript.resolveTypeReferenceDirective
+  );
+};

config/webpack.config.js

@@ -0,0 +1,695 @@
+
+
+const fs = require('fs');
+const path = require('path');
+const webpack = require('webpack');
+const resolve = require('resolve');
+const PnpWebpackPlugin = require('pnp-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
+const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');
+const TerserPlugin = require('terser-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+const safePostCssParser = require('postcss-safe-parser');
+const ManifestPlugin = require('webpack-manifest-plugin');
+const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
+const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
+const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
+const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
+const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
+const paths = require('./paths');
+const modules = require('./modules');
+const getClientEnvironment = require('./env');
+const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
+const ForkTsCheckerWebpackPlugin = require('react-dev-utils/ForkTsCheckerWebpackPlugin');
+const typescriptFormatter = require('react-dev-utils/typescriptFormatter');
+const CompressionPlugin = require('compression-webpack-plugin');
+
+const postcssNormalize = require('postcss-normalize');
+
+const appPackageJson = require(paths.appPackageJson);
+
+// Source maps are resource heavy and can cause out of memory issue for large source files.
+// const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
+const shouldUseSourceMap = false;
+// Some apps do not need the benefits of saving a web request, so not inlining the chunk
+// makes for a smoother build process.
+const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false';
+
+const isExtendingEslintConfig = process.env.EXTEND_ESLINT === 'true';
+
+const imageInlineSizeLimit = parseInt(
+  process.env.IMAGE_INLINE_SIZE_LIMIT || '10000'
+);
+
+// Check if TypeScript is setup
+const useTypeScript = fs.existsSync(paths.appTsConfig);
+
+// style files regexes
+const cssRegex = /\.css$/;
+const cssModuleRegex = /\.module\.css$/;
+const sassRegex = /\.(scss|sass)$/;
+const sassModuleRegex = /\.module\.(scss|sass)$/;
+
+// This is the production and development configuration.
+// It is focused on developer experience, fast rebuilds, and a minimal bundle.
+module.exports = function(webpackEnv) {
+  const isEnvDevelopment = webpackEnv === 'development';
+  const isEnvProduction = webpackEnv === 'production';
+
+  // Variable used for enabling profiling in Production
+  // passed into alias object. Uses a flag if passed into the build command
+  const isEnvProductionProfile =
+    isEnvProduction && process.argv.includes('--profile');
+
+  // We will provide `paths.publicUrlOrPath` to our app
+  // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
+  // Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
+  // Get environment variables to inject into our app.
+  const env = getClientEnvironment(paths.publicUrlOrPath.slice(0, -1));
+
+  // common function to get style loaders
+  const getStyleLoaders = (cssOptions, preProcessor) => {
+    const loaders = [
+      isEnvDevelopment && require.resolve('style-loader'),
+      isEnvProduction && {
+        loader: MiniCssExtractPlugin.loader,
+        // css is located in `static/css`, use '../../' to locate index.html folder
+        // in production `paths.publicUrlOrPath` can be a relative path
+        options: paths.publicUrlOrPath.startsWith('.')
+          ? { publicPath: '../../' }
+          : {},
+      },
+      {
+        loader: require.resolve('css-loader'),
+        options: cssOptions,
+      },
+      {
+        // Options for PostCSS as we reference these options twice
+        // Adds vendor prefixing based on your specified browser support in
+        // package.json
+        loader: require.resolve('postcss-loader'),
+        options: {
+          // Necessary for external CSS imports to work
+          // https://github.com/facebook/create-react-app/issues/2677
+          ident: 'postcss',
+          plugins: () => [
+            require('postcss-flexbugs-fixes'),
+            require('postcss-preset-env')({
+              autoprefixer: {
+                flexbox: 'no-2009',
+              },
+              stage: 3,
+            }),
+            // Adds PostCSS Normalize as the reset css with default options,
+            // so that it honors browserslist config in package.json
+            // which in turn let's users customize the target behavior as per their needs.
+            postcssNormalize(),
+          ],
+          sourceMap: isEnvProduction && shouldUseSourceMap,
+        },
+      },
+    ].filter(Boolean);
+    if (preProcessor) {
+      loaders.push(
+        {
+          loader: require.resolve('resolve-url-loader'),
+          options: {
+            sourceMap: isEnvProduction && shouldUseSourceMap,
+          },
+        },
+        {
+          loader: require.resolve(preProcessor),
+          options: {
+            sourceMap: true,
+          },
+        }
+      );
+    }
+    return loaders;
+  };
+
+  return {
+    mode: isEnvProduction ? 'production' : isEnvDevelopment && 'development',
+    // Stop compilation early in production
+    bail: isEnvProduction,
+    devtool: isEnvProduction
+      ? shouldUseSourceMap
+        ? 'source-map'
+        : false
+      : isEnvDevelopment && 'cheap-module-source-map',
+    // These are the "entry points" to our application.
+    // This means they will be the "root" imports that are included in JS bundle.
+    entry: [
+      // Include an alternative client for WebpackDevServer. A client's job is to
+      // connect to WebpackDevServer by a socket and get notified about changes.
+      // When you save a file, the client will either apply hot updates (in case
+      // of CSS changes), or refresh the page (in case of JS changes). When you
+      // make a syntax error, this client will display a syntax error overlay.
+      // Note: instead of the default WebpackDevServer client, we use a custom one
+      // to bring better experience for Create React App users. You can replace
+      // the line below with these two lines if you prefer the stock client:
+      // require.resolve('webpack-dev-server/client') + '?/',
+      // require.resolve('webpack/hot/dev-server'),
+      isEnvDevelopment &&
+        require.resolve('react-dev-utils/webpackHotDevClient'),
+      // Finally, this is your app's code:
+      paths.appIndexJs,
+      // We include the app code last so that if there is a runtime error during
+      // initialization, it doesn't blow up the WebpackDevServer client, and
+      // changing JS code would still trigger a refresh.
+    ].filter(Boolean),
+    output: {
+      // The build folder.
+      path: isEnvProduction ? paths.appBuild : undefined,
+      // Add /* filename */ comments to generated require()s in the output.
+      pathinfo: isEnvDevelopment,
+      // There will be one main bundle, and one file per asynchronous chunk.
+      // In development, it does not produce real files.
+      filename: isEnvProduction
+        ? 'static/js/[name].[contenthash:8].js'
+        : isEnvDevelopment && 'static/js/bundle.js',
+      // TODO: remove this when upgrading to webpack 5
+      futureEmitAssets: true,
+      // There are also additional JS chunk files if you use code splitting.
+      chunkFilename: isEnvProduction
+        ? 'static/js/[name].[contenthash:8].chunk.js'
+        : isEnvDevelopment && 'static/js/[name].chunk.js',
+      // webpack uses `publicPath` to determine where the app is being served from.
+      // It requires a trailing slash, or the file assets will get an incorrect path.
+      // We inferred the "public path" (such as / or /my-project) from homepage.
+      publicPath: paths.publicUrlOrPath,
+      // Point sourcemap entries to original disk location (format as URL on Windows)
+      devtoolModuleFilenameTemplate: isEnvProduction
+        ? info =>
+            path
+              .relative(paths.appSrc, info.absoluteResourcePath)
+              .replace(/\\/g, '/')
+        : isEnvDevelopment &&
+          (info => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
+      // Prevents conflicts when multiple webpack runtimes (from different apps)
+      // are used on the same page.
+      jsonpFunction: `webpackJsonp${appPackageJson.name}`,
+      // this defaults to 'window', but by setting it to 'this' then
+      // module chunks which are built will work in web workers as well.
+      globalObject: 'this',
+    },
+    optimization: {
+      minimize: isEnvProduction,
+      minimizer: [
+        // This is only used in production mode
+        new TerserPlugin({
+          terserOptions: {
+            parse: {
+              // We want terser to parse ecma 8 code. However, we don't want it
+              // to apply any minification steps that turns valid ecma 5 code
+              // into invalid ecma 5 code. This is why the 'compress' and 'output'
+              // sections only apply transformations that are ecma 5 safe
+              // https://github.com/facebook/create-react-app/pull/4234
+              ecma: 8,
+            },
+            compress: {
+              ecma: 5,
+              warnings: false,
+              // Disabled because of an issue with Uglify breaking seemingly valid code:
+              // https://github.com/facebook/create-react-app/issues/2376
+              // Pending further investigation:
+              // https://github.com/mishoo/UglifyJS2/issues/2011
+              comparisons: false,
+              // Disabled because of an issue with Terser breaking valid code:
+              // https://github.com/facebook/create-react-app/issues/5250
+              // Pending further investigation:
+              // https://github.com/terser-js/terser/issues/120
+              inline: 2,
+            },
+            mangle: {
+              safari10: true,
+            },
+            // Added for profiling in devtools
+            keep_classnames: isEnvProductionProfile,
+            keep_fnames: isEnvProductionProfile,
+            output: {
+              ecma: 5,
+              comments: false,
+              // Turned on because emoji and regex is not minified properly using default
+              // https://github.com/facebook/create-react-app/issues/2488
+              ascii_only: true,
+            },
+          },
+          sourceMap: shouldUseSourceMap,
+          parallel: true,            //此处为新增配置
+          extractComments: false,
+        }),
+        // This is only used in production mode
+        new OptimizeCSSAssetsPlugin({
+          cssProcessorOptions: {
+            parser: safePostCssParser,
+            map: shouldUseSourceMap
+              ? {
+                  // `inline: false` forces the sourcemap to be output into a
+                  // separate file
+                  inline: false,
+                  // `annotation: true` appends the sourceMappingURL to the end of
+                  // the css file, helping the browser find the sourcemap
+                  annotation: true,
+                }
+              : false,
+          },
+          cssProcessorPluginOptions: {
+            preset: ['default', { minifyFontValues: { removeQuotes: false } }],
+          },
+        }),
+      ],
+      // Automatically split vendor and commons
+      // https://twitter.com/wSokra/status/969633336732905474
+      // https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
+      splitChunks: {
+        chunks: 'all',
+        name: false,
+      },
+      // Keep the runtime chunk separated to enable long term caching
+      // https://twitter.com/wSokra/status/969679223278505985
+      // https://github.com/facebook/create-react-app/issues/5358
+      runtimeChunk: {
+        name: entrypoint => `runtime-${entrypoint.name}`,
+      },
+    },
+    resolve: {
+      // This allows you to set a fallback for where webpack should look for modules.
+      // We placed these paths second because we want `node_modules` to "win"
+      // if there are any conflicts. This matches Node resolution mechanism.
+      // https://github.com/facebook/create-react-app/issues/253
+      modules: ['node_modules', paths.appNodeModules].concat(
+        modules.additionalModulePaths || []
+      ),
+      // These are the reasonable defaults supported by the Node ecosystem.
+      // We also include JSX as a common component filename extension to support
+      // some tools, although we do not recommend using it, see:
+      // https://github.com/facebook/create-react-app/issues/290
+      // `web` extension prefixes have been added for better support
+      // for React Native Web.
+      extensions: paths.moduleFileExtensions
+        .map(ext => `.${ext}`)
+        .filter(ext => useTypeScript || !ext.includes('ts')),
+      alias: {
+        // Support React Native Web
+        // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
+        'react-native': 'react-native-web',
+        // Allows for better profiling with ReactDevTools
+        ...(isEnvProductionProfile && {
+          'react-dom$': 'react-dom/profiling',
+          'scheduler/tracing': 'scheduler/tracing-profiling',
+        }),
+        ...(modules.webpackAliases || {}),
+        '@': paths.appSrc
+        // 'store': path.appStore
+      },
+      plugins: [
+        // Adds support for installing with Plug'n'Play, leading to faster installs and adding
+        // guards against forgotten dependencies and such.
+        PnpWebpackPlugin,
+        // Prevents users from importing files from outside of src/ (or node_modules/).
+        // This often causes confusion because we only process files within src/ with babel.
+        // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
+        // please link the files into your node_modules/ and let module-resolution kick in.
+        // Make sure your source files are compiled, as they will not be processed in any way.
+        new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
+      ],
+    },
+    resolveLoader: {
+      plugins: [
+        // Also related to Plug'n'Play, but this time it tells webpack to load its loaders
+        // from the current package.
+        PnpWebpackPlugin.moduleLoader(module),
+      ],
+    },
+    module: {
+      strictExportPresence: true,
+      rules: [
+        // Disable require.ensure as it's not a standard language feature.
+        { parser: { requireEnsure: false } },
+
+        // First, run the linter.
+        // It's important to do this before Babel processes the JS.
+        // {
+        //   test: /\.(js|mjs|jsx|ts|tsx)$/,
+        //   enforce: 'pre',
+        //   use: [
+        //     {
+        //       options: {
+        //         cache: false,
+        //         formatter: require.resolve('react-dev-utils/eslintFormatter'),
+        //         eslintPath: require.resolve('eslint'),
+        //         resolvePluginsRelativeTo: __dirname,
+        //       },
+        //       loader: require.resolve('eslint-loader'),
+        //     },
+        //   ],
+        //   include: paths.appSrc,
+        // },
+        {
+          // "oneOf" will traverse all following loaders until one will
+          // match the requirements. When no loader matches it will fall
+          // back to the "file" loader at the end of the loader list.
+          oneOf: [
+            {
+              test: /\.svg$/,
+              loader: "svg-sprite-loader",
+              include: path.resolve(__dirname, "../src/assets/icons"), //只处理指定svg的文件(所有使用的svg文件放到该文件夹下)
+              options: {
+                symbolId: "icon-[name]" //symbolId和use使用的名称对应      <use xlinkHref={"#icon-" + iconClass} />
+              }
+            },
+            // "url" loader works like "file" loader except that it embeds assets
+            // smaller than specified limit in bytes as data URLs to avoid requests.
+            // A missing `test` is equivalent to a match.
+            {
+              test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
+              loader: require.resolve('url-loader'),
+              options: {
+                limit: imageInlineSizeLimit,
+                name: 'static/media/[name].[hash:8].[ext]',
+              },
+            },
+            // Process application JS with Babel.
+            // The preset includes JSX, Flow, TypeScript, and some ESnext features.
+            {
+              test: /\.(js|mjs|jsx|ts|tsx)$/,
+              include: paths.appSrc,
+              loader: require.resolve('babel-loader'),
+              options: {
+                customize: require.resolve(
+                  'babel-preset-react-app/webpack-overrides'
+                ),
+
+                plugins: [
+                  [
+                    require.resolve('babel-plugin-named-asset-import'),
+                    {
+                      loaderMap: {
+                        svg: {
+                          ReactComponent:
+                            '@svgr/webpack?-svgo,+titleProp,+ref![path]',
+                        },
+                      },
+                    },
+                  ],
+                  [
+                    require.resolve('@babel/plugin-proposal-decorators'),
+                    {
+                        legacy: true
+                    }
+                  ]
+                ],
+                // This is a feature of `babel-loader` for webpack (not Babel itself).
+                // It enables caching results in ./node_modules/.cache/babel-loader/
+                // directory for faster rebuilds.
+                cacheDirectory: true,
+                // See #6846 for context on why cacheCompression is disabled
+                cacheCompression: false,
+                compact: isEnvProduction,
+              },
+            },
+            // Process any JS outside of the app with Babel.
+            // Unlike the application JS, we only compile the standard ES features.
+            {
+              test: /\.(js|mjs)$/,
+              exclude: /@babel(?:\/|\\{1,2})runtime/,
+              loader: require.resolve('babel-loader'),
+              options: {
+                babelrc: false,
+                configFile: false,
+                compact: false,
+                presets: [
+                  [
+                    require.resolve('babel-preset-react-app/dependencies'),
+                    { helpers: true },
+                  ],
+                ],
+                cacheDirectory: true,
+                // See #6846 for context on why cacheCompression is disabled
+                cacheCompression: false,
+
+                // Babel sourcemaps are needed for debugging into node_modules
+                // code.  Without the options below, debuggers like VSCode
+                // show incorrect code and set breakpoints on the wrong lines.
+                sourceMaps: shouldUseSourceMap,
+                inputSourceMap: shouldUseSourceMap,
+              },
+            },
+            // "postcss" loader applies autoprefixer to our CSS.
+            // "css" loader resolves paths in CSS and adds assets as dependencies.
+            // "style" loader turns CSS into JS modules that inject <style> tags.
+            // In production, we use MiniCSSExtractPlugin to extract that CSS
+            // to a file, but in development "style" loader enables hot editing
+            // of CSS.
+            // By default we support CSS Modules with the extension .module.css
+            {
+              test: cssRegex,
+              exclude: cssModuleRegex,
+              use: getStyleLoaders({
+                importLoaders: 1,
+                sourceMap: isEnvProduction && shouldUseSourceMap,
+              }),
+              // Don't consider CSS imports dead code even if the
+              // containing package claims to have no side effects.
+              // Remove this when webpack adds a warning or an error for this.
+              // See https://github.com/webpack/webpack/issues/6571
+              sideEffects: true,
+            },
+            // Adds support for CSS Modules (https://github.com/css-modules/css-modules)
+            // using the extension .module.css
+            {
+              test: cssModuleRegex,
+              use: getStyleLoaders({
+                importLoaders: 1,
+                sourceMap: isEnvProduction && shouldUseSourceMap,
+                modules: {
+                  getLocalIdent: getCSSModuleLocalIdent,
+                },
+              }),
+            },
+            // Opt-in support for SASS (using .scss or .sass extensions).
+            // By default we support SASS Modules with the
+            // extensions .module.scss or .module.sass
+            {
+              test: sassRegex,
+              exclude: sassModuleRegex,
+              use: getStyleLoaders(
+                {
+                  importLoaders: 3,
+                  sourceMap: isEnvProduction && shouldUseSourceMap,
+                },
+                'sass-loader'
+              ),
+              // Don't consider CSS imports dead code even if the
+              // containing package claims to have no side effects.
+              // Remove this when webpack adds a warning or an error for this.
+              // See https://github.com/webpack/webpack/issues/6571
+              sideEffects: true,
+            },
+            // Adds support for CSS Modules, but using SASS
+            // using the extension .module.scss or .module.sass
+            {
+              test: sassModuleRegex,
+              use: getStyleLoaders(
+                {
+                  importLoaders: 3,
+                  sourceMap: isEnvProduction && shouldUseSourceMap,
+                  modules: {
+                    getLocalIdent: getCSSModuleLocalIdent,
+                  },
+                },
+                'sass-loader'
+              ),
+            },
+            // "file" loader makes sure those assets get served by WebpackDevServer.
+            // When you `import` an asset, you get its (virtual) filename.
+            // In production, they would get copied to the `build` folder.
+            // This loader doesn't use a "test" so it will catch all modules
+            // that fall through the other loaders.
+            {
+              loader: require.resolve('file-loader'),
+              // Exclude `js` files to keep "css" loader working as it injects
+              // its runtime that would otherwise be processed through "file" loader.
+              // Also exclude `html` and `json` extensions so they get processed
+              // by webpacks internal loaders.
+              exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
+              options: {
+                name: 'static/media/[name].[hash:8].[ext]',
+              },
+            },
+            // ** STOP ** Are you adding a new loader?
+            // Make sure to add the new loader(s) before the "file" loader.
+          ],
+        },
+      ],
+    },
+    plugins: [
+      // Generates an `index.html` file with the <script> injected.
+      new HtmlWebpackPlugin(
+        Object.assign(
+          {},
+          {
+            inject: true,
+            template: paths.appHtml,
+          },
+          isEnvProduction
+            ? {
+                minify: {
+                  removeComments: true,
+                  collapseWhitespace: true,
+                  removeRedundantAttributes: true,
+                  useShortDoctype: true,
+                  removeEmptyAttributes: true,
+                  removeStyleLinkTypeAttributes: true,
+                  keepClosingSlash: true,
+                  minifyJS: true,
+                  minifyCSS: true,
+                  minifyURLs: true,
+                },
+              }
+            : undefined
+        )
+      ),
+      // Inlines the webpack runtime script. This script is too small to warrant
+      // a network request.
+      // https://github.com/facebook/create-react-app/issues/5358
+      isEnvProduction &&
+        shouldInlineRuntimeChunk &&
+        new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime-.+[.]js/]),
+      // Makes some environment variables available in index.html.
+      // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
+      // <link rel="icon" href="%PUBLIC_URL%/favicon.ico">
+      // It will be an empty string unless you specify "homepage"
+      // in `package.json`, in which case it will be the pathname of that URL.
+      new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
+      // This gives some necessary context to module not found errors, such as
+      // the requesting resource.
+      new ModuleNotFoundPlugin(paths.appPath),
+      // Makes some environment variables available to the JS code, for example:
+      // if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
+      // It is absolutely essential that NODE_ENV is set to production
+      // during a production build.
+      // Otherwise React will be compiled in the very slow development mode.
+      new webpack.DefinePlugin(env.stringified),
+      // This is necessary to emit hot updates (currently CSS only):
+      isEnvDevelopment && new webpack.HotModuleReplacementPlugin(),
+      // Watcher doesn't work well if you mistype casing in a path so we use
+      // a plugin that prints an error when you attempt to do this.
+      // See https://github.com/facebook/create-react-app/issues/240
+      isEnvDevelopment && new CaseSensitivePathsPlugin(),
+      // If you require a missing module and then `npm install` it, you still have
+      // to restart the development server for webpack to discover it. This plugin
+      // makes the discovery automatic so you don't have to restart.
+      // See https://github.com/facebook/create-react-app/issues/186
+      isEnvDevelopment &&
+        new WatchMissingNodeModulesPlugin(paths.appNodeModules),
+      isEnvProduction &&
+        new MiniCssExtractPlugin({
+          // Options similar to the same options in webpackOptions.output
+          // both options are optional
+          filename: 'static/css/[name].[contenthash:8].css',
+          chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',
+        }),
+      // Generate an asset manifest file with the following content:
+      // - "files" key: Mapping of all asset filenames to their corresponding
+      //   output file so that tools can pick it up without having to parse
+      //   `index.html`
+      // - "entrypoints" key: Array of files which are included in `index.html`,
+      //   can be used to reconstruct the HTML if necessary
+      new ManifestPlugin({
+        fileName: 'asset-manifest.json',
+        publicPath: paths.publicUrlOrPath,
+        generate: (seed, files, entrypoints) => {
+          const manifestFiles = files.reduce((manifest, file) => {
+            manifest[file.name] = file.path;
+            return manifest;
+          }, seed);
+          const entrypointFiles = entrypoints.main.filter(
+            fileName => !fileName.endsWith('.map')
+          );
+
+          return {
+            files: manifestFiles,
+            entrypoints: entrypointFiles,
+          };
+        },
+      }),
+      // Moment.js is an extremely popular library that bundles large locale files
+      // by default due to how webpack interprets its code. This is a practical
+      // solution that requires the user to opt into importing specific locales.
+      // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
+      // You can remove this if you don't use Moment.js:
+      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
+      // Generate a service worker script that will precache, and keep up to date,
+      // the HTML & assets that are part of the webpack build.
+      isEnvProduction &&
+        new WorkboxWebpackPlugin.GenerateSW({
+          clientsClaim: true,
+          exclude: [/\.map$/, /asset-manifest\.json$/],
+          importWorkboxFrom: 'cdn',
+          navigateFallback: paths.publicUrlOrPath + 'index.html',
+          navigateFallbackBlacklist: [
+            // Exclude URLs starting with /_, as they're likely an API call
+            new RegExp('^/_'),
+            // Exclude any URLs whose last part seems to be a file extension
+            // as they're likely a resource and not a SPA route.
+            // URLs containing a "?" character won't be blacklisted as they're likely
+            // a route with query params (e.g. auth callbacks).
+            new RegExp('/[^/?]+\\.[^/]+$'),
+          ],
+        }),
+      isEnvProduction && new CompressionPlugin({
+        filename: '[path][base].gz[query]',
+        algorithm: 'gzip',
+        test: /\.(css|js)$/,
+        threshold: 10240,
+        minRatio: 0.8
+      }),
+      // TypeScript type checking
+      useTypeScript &&
+        new ForkTsCheckerWebpackPlugin({
+          typescript: resolve.sync('typescript', {
+            basedir: paths.appNodeModules,
+          }),
+          async: isEnvDevelopment,
+          useTypescriptIncrementalApi: true,
+          checkSyntacticErrors: true,
+          resolveModuleNameModule: process.versions.pnp
+            ? `${__dirname}/pnpTs.js`
+            : undefined,
+          resolveTypeReferenceDirectiveModule: process.versions.pnp
+            ? `${__dirname}/pnpTs.js`
+            : undefined,
+          tsconfig: paths.appTsConfig,
+          reportFiles: [
+            '**',
+            '!**/__tests__/**',
+            '!**/?(*.)(spec|test).*',
+            '!**/src/setupProxy.*',
+            '!**/src/setupTests.*',
+          ],
+          silent: true,
+          // The formatter is invoked directly in WebpackDevServerUtils during development
+          formatter: isEnvProduction ? typescriptFormatter : undefined,
+        }),
+    ].filter(Boolean),
+    // Some libraries import Node modules but don't use them in the browser.
+    // Tell webpack to provide empty mocks for them so importing them works.
+    node: {
+      module: 'empty',
+      dgram: 'empty',
+      dns: 'mock',
+      fs: 'empty',
+      http2: 'empty',
+      net: 'empty',
+      tls: 'empty',
+      child_process: 'empty',
+    },
+    // Turn off performance processing because we utilize
+    // our own hints via the FileSizeReporter
+    performance: false,
+  };
+};

config/webpackDevServer.config.js

@@ -0,0 +1,130 @@
+'use strict';
+
+const fs = require('fs');
+const errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware');
+const evalSourceMapMiddleware = require('react-dev-utils/evalSourceMapMiddleware');
+const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMiddleware');
+const ignoredFiles = require('react-dev-utils/ignoredFiles');
+const redirectServedPath = require('react-dev-utils/redirectServedPathMiddleware');
+const paths = require('./paths');
+const getHttpsConfig = require('./getHttpsConfig');
+
+const host = process.env.HOST || '0.0.0.0';
+const sockHost = process.env.WDS_SOCKET_HOST;
+const sockPath = process.env.WDS_SOCKET_PATH; // default: '/sockjs-node'
+const sockPort = process.env.WDS_SOCKET_PORT;
+
+module.exports = function(proxy, allowedHost) {
+  return {
+    // WebpackDevServer 2.4.3 introduced a security fix that prevents remote
+    // websites from potentially accessing local content through DNS rebinding:
+    // https://github.com/webpack/webpack-dev-server/issues/887
+    // https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a
+    // However, it made several existing use cases such as development in cloud
+    // environment or subdomains in development significantly more complicated:
+    // https://github.com/facebook/create-react-app/issues/2271
+    // https://github.com/facebook/create-react-app/issues/2233
+    // While we're investigating better solutions, for now we will take a
+    // compromise. Since our WDS configuration only serves files in the `public`
+    // folder we won't consider accessing them a vulnerability. However, if you
+    // use the `proxy` feature, it gets more dangerous because it can expose
+    // remote code execution vulnerabilities in backends like Django and Rails.
+    // So we will disable the host check normally, but enable it if you have
+    // specified the `proxy` setting. Finally, we let you override it if you
+    // really know what you're doing with a special environment variable.
+    disableHostCheck:
+      !proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true',
+    // Enable gzip compression of generated files.
+    compress: true,
+    // Silence WebpackDevServer's own logs since they're generally not useful.
+    // It will still show compile warnings and errors with this setting.
+    clientLogLevel: 'none',
+    // By default WebpackDevServer serves physical files from current directory
+    // in addition to all the virtual build products that it serves from memory.
+    // This is confusing because those files won’t automatically be available in
+    // production build folder unless we copy them. However, copying the whole
+    // project directory is dangerous because we may expose sensitive files.
+    // Instead, we establish a convention that only files in `public` directory
+    // get served. Our build script will copy `public` into the `build` folder.
+    // In `index.html`, you can get URL of `public` folder with %PUBLIC_URL%:
+    // <link rel="icon" href="%PUBLIC_URL%/favicon.ico">
+    // In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
+    // Note that we only recommend to use `public` folder as an escape hatch
+    // for files like `favicon.ico`, `manifest.json`, and libraries that are
+    // for some reason broken when imported through webpack. If you just want to
+    // use an image, put it in `src` and `import` it from JavaScript instead.
+    contentBase: paths.appPublic,
+    contentBasePublicPath: paths.publicUrlOrPath,
+    // By default files from `contentBase` will not trigger a page reload.
+    watchContentBase: true,
+    // Enable hot reloading server. It will provide WDS_SOCKET_PATH endpoint
+    // for the WebpackDevServer client so it can learn when the files were
+    // updated. The WebpackDevServer client is included as an entry point
+    // in the webpack development configuration. Note that only changes
+    // to CSS are currently hot reloaded. JS changes will refresh the browser.
+    hot: true,
+    // Use 'ws' instead of 'sockjs-node' on server since we're using native
+    // websockets in `webpackHotDevClient`.
+    transportMode: 'ws',
+    // Prevent a WS client from getting injected as we're already including
+    // `webpackHotDevClient`.
+    injectClient: false,
+    // Enable custom sockjs pathname for websocket connection to hot reloading server.
+    // Enable custom sockjs hostname, pathname and port for websocket connection
+    // to hot reloading server.
+    sockHost,
+    sockPath,
+    sockPort,
+    // It is important to tell WebpackDevServer to use the same "publicPath" path as
+    // we specified in the webpack config. When homepage is '.', default to serving
+    // from the root.
+    // remove last slash so user can land on `/test` instead of `/test/`
+    publicPath: paths.publicUrlOrPath.slice(0, -1),
+    // WebpackDevServer is noisy by default so we emit custom message instead
+    // by listening to the compiler events with `compiler.hooks[...].tap` calls above.
+    quiet: true,
+    // Reportedly, this avoids CPU overload on some systems.
+    // https://github.com/facebook/create-react-app/issues/293
+    // src/node_modules is not ignored to support absolute imports
+    // https://github.com/facebook/create-react-app/issues/1065
+    watchOptions: {
+      ignored: ignoredFiles(paths.appSrc),
+    },
+    https: getHttpsConfig(),
+    host,
+    overlay: false,
+    historyApiFallback: {
+      // Paths with dots should still use the history fallback.
+      // See https://github.com/facebook/create-react-app/issues/387.
+      disableDotRule: true,
+      index: paths.publicUrlOrPath,
+    },
+    public: allowedHost,
+    // `proxy` is run between `before` and `after` `webpack-dev-server` hooks
+    proxy,
+    before(app, server) {
+      // Keep `evalSourceMapMiddleware` and `errorOverlayMiddleware`
+      // middlewares before `redirectServedPath` otherwise will not have any effect
+      // This lets us fetch source contents from webpack for the error overlay
+      app.use(evalSourceMapMiddleware(server));
+      // This lets us open files from the runtime error overlay.
+      app.use(errorOverlayMiddleware());
+
+      if (fs.existsSync(paths.proxySetup)) {
+        // This registers user provided middleware for proxy reasons
+        require(paths.proxySetup)(app);
+      }
+    },
+    after(app) {
+      // Redirect to `PUBLIC_URL` or `homepage` from `package.json` if url not match
+      app.use(redirectServedPath(paths.publicUrlOrPath));
+
+      // This service worker file is effectively a 'no-op' that will reset any
+      // previous service worker registered for the same host:port combination.
+      // We do this in development to avoid hitting the production cache if
+      // it used the same host and port.
+      // https://github.com/facebook/create-react-app/issues/2272#issuecomment-302832432
+      app.use(noopServiceWorkerMiddleware(paths.publicUrlOrPath));
+    },
+  };
+};

package.json

@@ -0,0 +1,179 @@
+{
+  "name": "management",
+  "version": "0.1.0",
+  "private": true,
+  "homepage": ".",
+  "proxy": "http://cm.com",
+  "scripts": {
+    "dev": "node scripts/start.js",
+    "build": "node scripts/build.js",
+    "test": "node scripts/test.js"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "jest": {
+    "roots": [
+      "<rootDir>/src"
+    ],
+    "collectCoverageFrom": [
+      "src/**/*.{js,jsx,ts,tsx}",
+      "!src/**/*.d.ts"
+    ],
+    "setupFiles": [
+      "react-app-polyfill/jsdom"
+    ],
+    "setupFilesAfterEnv": [
+      "<rootDir>/src/setupTests.ts"
+    ],
+    "testMatch": [
+      "<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
+      "<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"
+    ],
+    "testEnvironment": "jest-environment-jsdom-fourteen",
+    "transform": {
+      "^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
+      "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
+      "^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
+    },
+    "transformIgnorePatterns": [
+      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$",
+      "^.+\\.module\\.(css|sass|scss)$"
+    ],
+    "modulePaths": [],
+    "moduleNameMapper": {
+      "^react-native$": "react-native-web",
+      "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
+    },
+    "moduleFileExtensions": [
+      "web.js",
+      "js",
+      "web.ts",
+      "ts",
+      "web.tsx",
+      "tsx",
+      "json",
+      "web.jsx",
+      "jsx",
+      "node"
+    ],
+    "watchPlugins": [
+      "jest-watch-typeahead/filename",
+      "jest-watch-typeahead/testname"
+    ]
+  },
+  "babel": {
+    "presets": [
+      "react-app"
+    ],
+    "plugins": [
+      [
+        "import",
+        {
+          "libraryName": "antd",
+          "style": "css"
+        }
+      ]
+    ]
+  },
+  "devDependencies": {
+    "@babel/core": "7.9.0",
+    "@babel/plugin-proposal-decorators": "^7.10.5",
+    "@svgr/webpack": "4.3.3",
+    "@testing-library/jest-dom": "^4.2.4",
+    "@testing-library/react": "^9.3.2",
+    "@testing-library/user-event": "^7.1.2",
+    "@types/jest": "^24.0.0",
+    "@types/node": "^12.0.0",
+    "@types/nprogress": "^0.2.0",
+    "@types/react": "^16.9.0",
+    "@types/react-dom": "^16.9.0",
+    "@types/react-redux": "^7.1.9",
+    "@types/react-router-dom": "^5.1.5",
+    "@types/redux": "^3.6.0",
+    "@typescript-eslint/eslint-plugin": "^4.1.1",
+    "@typescript-eslint/parser": "^4.1.1",
+    "babel-jest": "^24.9.0",
+    "babel-loader": "8.1.0",
+    "babel-plugin-import": "^1.13.0",
+    "babel-plugin-named-asset-import": "^0.3.6",
+    "babel-preset-react-app": "^9.1.2",
+    "camelcase": "^5.3.1",
+    "case-sensitive-paths-webpack-plugin": "2.3.0",
+    "compression-webpack-plugin": "^6.0.2",
+    "css-loader": "3.4.2",
+    "dotenv": "8.2.0",
+    "dotenv-expand": "5.1.0",
+    "eslint": "^6.6.0",
+    "eslint-config-prettier": "^6.12.0",
+    "eslint-config-react-app": "^5.2.1",
+    "eslint-loader": "3.0.3",
+    "eslint-plugin-flowtype": "4.6.0",
+    "eslint-plugin-import": "2.20.1",
+    "eslint-plugin-jsx-a11y": "6.2.3",
+    "eslint-plugin-react": "^7.20.6",
+    "eslint-plugin-react-hooks": "^1.6.1",
+    "file-loader": "4.3.0",
+    "fs-extra": "^8.1.0",
+    "html-webpack-plugin": "4.0.0-beta.11",
+    "identity-obj-proxy": "3.0.0",
+    "jest": "24.9.0",
+    "jest-environment-jsdom-fourteen": "1.0.1",
+    "jest-resolve": "24.9.0",
+    "jest-watch-typeahead": "0.4.2",
+    "mini-css-extract-plugin": "0.9.0",
+    "node-sass": "^4.14.1",
+    "optimize-css-assets-webpack-plugin": "5.0.3",
+    "pnp-webpack-plugin": "1.6.4",
+    "postcss-flexbugs-fixes": "4.1.0",
+    "postcss-loader": "3.0.0",
+    "postcss-normalize": "8.0.1",
+    "postcss-preset-env": "6.7.0",
+    "postcss-safe-parser": "4.0.1",
+    "prettier": "^2.1.2",
+    "react-app-polyfill": "^1.0.6",
+    "react-dev-utils": "^10.2.1",
+    "redux-saga": "^1.1.3",
+    "resolve": "1.15.0",
+    "resolve-url-loader": "3.1.1",
+    "sass-loader": "8.0.2",
+    "semver": "6.3.0",
+    "style-loader": "0.23.1",
+    "stylelint": "^13.7.1",
+    "stylelint-config-prettier": "^8.0.2",
+    "stylelint-config-recess-order": "^2.1.0",
+    "stylelint-config-standard": "^20.0.0",
+    "stylelint-order": "^4.1.0",
+    "stylelint-scss": "^3.18.0",
+    "svg-sprite-loader": "^5.0.0",
+    "terser-webpack-plugin": "2.3.8",
+    "ts-pnp": "1.1.6",
+    "typescript": "~3.7.2",
+    "url-loader": "2.3.0",
+    "webpack": "4.42.0",
+    "webpack-dev-server": "3.11.0",
+    "webpack-manifest-plugin": "2.2.0",
+    "workbox-webpack-plugin": "4.3.1"
+  },
+  "dependencies": {
+    "@ant-design/icons": "^4.2.2",
+    "@types/redux-thunk": "^2.1.0",
+    "antd": "^4.6.4",
+    "axios": "^0.20.0",
+    "nprogress": "^0.2.0",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-redux": "^7.2.1",
+    "react-router-dom": "^5.2.0",
+    "redux": "^4.0.5"
+  }
+}

public/index.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

public/manifest.json

@@ -0,0 +1,15 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

scripts/build.js

@@ -0,0 +1,211 @@
+'use strict';
+
+// Do this as the first thing so that any code reading it knows the right env.
+process.env.BABEL_ENV = 'production';
+process.env.NODE_ENV = 'production';
+
+// Makes the script crash on unhandled rejections instead of silently
+// ignoring them. In the future, promise rejections that are not handled will
+// terminate the Node.js process with a non-zero exit code.
+process.on('unhandledRejection', err => {
+  throw err;
+});
+
+// Ensure environment variables are read.
+require('../config/env');
+
+
+const path = require('path');
+const chalk = require('react-dev-utils/chalk');
+const fs = require('fs-extra');
+const webpack = require('webpack');
+const configFactory = require('../config/webpack.config');
+const paths = require('../config/paths');
+const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
+const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
+const printHostingInstructions = require('react-dev-utils/printHostingInstructions');
+const FileSizeReporter = require('react-dev-utils/FileSizeReporter');
+const printBuildError = require('react-dev-utils/printBuildError');
+
+const measureFileSizesBeforeBuild =
+  FileSizeReporter.measureFileSizesBeforeBuild;
+const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild;
+const useYarn = fs.existsSync(paths.yarnLockFile);
+
+// These sizes are pretty large. We'll warn for bundles exceeding them.
+const WARN_AFTER_BUNDLE_GZIP_SIZE = 512 * 1024;
+const WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024;
+
+const isInteractive = process.stdout.isTTY;
+
+// Warn and crash if required files are missing
+if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
+  process.exit(1);
+}
+
+// Generate configuration
+const config = configFactory('production');
+
+// We require that you explicitly set browsers and do not fall back to
+// browserslist defaults.
+const { checkBrowsers } = require('react-dev-utils/browsersHelper');
+checkBrowsers(paths.appPath, isInteractive)
+  .then(() => {
+    // First, read the current file sizes in build directory.
+    // This lets us display how much they changed later.
+    return measureFileSizesBeforeBuild(paths.appBuild);
+  })
+  .then(previousFileSizes => {
+    // Remove all content but keep the directory so that
+    // if you're in it, you don't end up in Trash
+    fs.emptyDirSync(paths.appBuild);
+    // Merge with the public folder
+    copyPublicFolder();
+    // Start the webpack build
+    return build(previousFileSizes);
+  })
+  .then(
+    ({ stats, previousFileSizes, warnings }) => {
+      if (warnings.length) {
+        console.log(chalk.yellow('Compiled with warnings.\n'));
+        console.log(warnings.join('\n\n'));
+        console.log(
+          '\nSearch for the ' +
+            chalk.underline(chalk.yellow('keywords')) +
+            ' to learn more about each warning.'
+        );
+        console.log(
+          'To ignore, add ' +
+            chalk.cyan('// eslint-disable-next-line') +
+            ' to the line before.\n'
+        );
+      } else {
+        console.log(chalk.green('Compiled successfully.\n'));
+      }
+
+      console.log('File sizes after gzip:\n');
+      printFileSizesAfterBuild(
+        stats,
+        previousFileSizes,
+        paths.appBuild,
+        WARN_AFTER_BUNDLE_GZIP_SIZE,
+        WARN_AFTER_CHUNK_GZIP_SIZE
+      );
+      console.log();
+
+      const appPackage = require(paths.appPackageJson);
+      const publicUrl = paths.publicUrlOrPath;
+      const publicPath = config.output.publicPath;
+      const buildFolder = path.relative(process.cwd(), paths.appBuild);
+      printHostingInstructions(
+        appPackage,
+        publicUrl,
+        publicPath,
+        buildFolder,
+        useYarn
+      );
+    },
+    err => {
+      const tscCompileOnError = process.env.TSC_COMPILE_ON_ERROR === 'true';
+      if (tscCompileOnError) {
+        console.log(
+          chalk.yellow(
+            'Compiled with the following type errors (you may want to check these before deploying your app):\n'
+          )
+        );
+        printBuildError(err);
+      } else {
+        console.log(chalk.red('Failed to compile.\n'));
+        printBuildError(err);
+        process.exit(1);
+      }
+    }
+  )
+  .catch(err => {
+    if (err && err.message) {
+      console.log(err.message);
+    }
+    process.exit(1);
+  });
+
+// Create the production build and print the deployment instructions.
+function build(previousFileSizes) {
+  // We used to support resolving modules according to `NODE_PATH`.
+  // This now has been deprecated in favor of jsconfig/tsconfig.json
+  // This lets you use absolute paths in imports inside large monorepos:
+  if (process.env.NODE_PATH) {
+    console.log(
+      chalk.yellow(
+        'Setting NODE_PATH to resolve modules absolutely has been deprecated in favor of setting baseUrl in jsconfig.json (or tsconfig.json if you are using TypeScript) and will be removed in a future major release of create-react-app.'
+      )
+    );
+    console.log();
+  }
+
+  console.log('Creating an optimized production build...');
+
+  const compiler = webpack(config);
+  return new Promise((resolve, reject) => {
+    compiler.run((err, stats) => {
+      let messages;
+      if (err) {
+        if (!err.message) {
+          return reject(err);
+        }
+
+        let errMessage = err.message;
+
+        // Add additional information for postcss errors
+        if (Object.prototype.hasOwnProperty.call(err, 'postcssNode')) {
+          errMessage +=
+            '\nCompileError: Begins at CSS selector ' +
+            err['postcssNode'].selector;
+        }
+
+        messages = formatWebpackMessages({
+          errors: [errMessage],
+          warnings: [],
+        });
+      } else {
+        messages = formatWebpackMessages(
+          stats.toJson({ all: false, warnings: true, errors: true })
+        );
+      }
+      if (messages.errors.length) {
+        // Only keep the first error. Others are often indicative
+        // of the same problem, but confuse the reader with noise.
+        if (messages.errors.length > 1) {
+          messages.errors.length = 1;
+        }
+        return reject(new Error(messages.errors.join('\n\n')));
+      }
+      if (
+        process.env.CI &&
+        (typeof process.env.CI !== 'string' ||
+          process.env.CI.toLowerCase() !== 'false') &&
+        messages.warnings.length
+      ) {
+        console.log(
+          chalk.yellow(
+            '\nTreating warnings as errors because process.env.CI = true.\n' +
+              'Most CI servers set it automatically.\n'
+          )
+        );
+        return reject(new Error(messages.warnings.join('\n\n')));
+      }
+
+      return resolve({
+        stats,
+        previousFileSizes,
+        warnings: messages.warnings,
+      });
+    });
+  });
+}
+
+function copyPublicFolder() {
+  fs.copySync(paths.appPublic, paths.appBuild, {
+    dereference: true,
+    filter: file => file !== paths.appHtml,
+  });
+}

scripts/start.js

@@ -0,0 +1,166 @@
+'use strict';
+
+// Do this as the first thing so that any code reading it knows the right env.
+process.env.BABEL_ENV = 'development';
+process.env.NODE_ENV = 'development';
+
+// Makes the script crash on unhandled rejections instead of silently
+// ignoring them. In the future, promise rejections that are not handled will
+// terminate the Node.js process with a non-zero exit code.
+process.on('unhandledRejection', err => {
+  throw err;
+});
+
+// Ensure environment variables are read.
+require('../config/env');
+
+
+const fs = require('fs');
+const chalk = require('react-dev-utils/chalk');
+const webpack = require('webpack');
+const WebpackDevServer = require('webpack-dev-server');
+const clearConsole = require('react-dev-utils/clearConsole');
+const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
+const {
+  choosePort,
+  createCompiler,
+  prepareProxy,
+  prepareUrls,
+} = require('react-dev-utils/WebpackDevServerUtils');
+const openBrowser = require('react-dev-utils/openBrowser');
+const paths = require('../config/paths');
+const configFactory = require('../config/webpack.config');
+const createDevServerConfig = require('../config/webpackDevServer.config');
+
+const useYarn = fs.existsSync(paths.yarnLockFile);
+const isInteractive = process.stdout.isTTY;
+
+// Warn and crash if required files are missing
+if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
+  process.exit(1);
+}
+
+// Tools like Cloud9 rely on this.
+const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
+const HOST = process.env.HOST || '0.0.0.0';
+
+if (process.env.HOST) {
+  console.log(
+    chalk.cyan(
+      `Attempting to bind to HOST environment variable: ${chalk.yellow(
+        chalk.bold(process.env.HOST)
+      )}`
+    )
+  );
+  console.log(
+    `If this was unintentional, check that you haven't mistakenly set it in your shell.`
+  );
+  console.log(
+    `Learn more here: ${chalk.yellow('https://bit.ly/CRA-advanced-config')}`
+  );
+  console.log();
+}
+
+// We require that you explicitly set browsers and do not fall back to
+// browserslist defaults.
+const { checkBrowsers } = require('react-dev-utils/browsersHelper');
+checkBrowsers(paths.appPath, isInteractive)
+  .then(() => {
+    // We attempt to use the default port but if it is busy, we offer the user to
+    // run on a different port. `choosePort()` Promise resolves to the next free port.
+    return choosePort(HOST, DEFAULT_PORT);
+  })
+  .then(port => {
+    if (port == null) {
+      // We have not found a port.
+      return;
+    }
+
+    const config = configFactory('development');
+    const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
+    const appName = require(paths.appPackageJson).name;
+    const useTypeScript = fs.existsSync(paths.appTsConfig);
+    const tscCompileOnError = process.env.TSC_COMPILE_ON_ERROR === 'true';
+    const urls = prepareUrls(
+      protocol,
+      HOST,
+      port,
+      paths.publicUrlOrPath.slice(0, -1)
+    );
+    const devSocket = {
+      warnings: warnings =>
+        devServer.sockWrite(devServer.sockets, 'warnings', warnings),
+      errors: errors =>
+        devServer.sockWrite(devServer.sockets, 'errors', errors),
+    };
+    // Create a webpack compiler that is configured with custom messages.
+    const compiler = createCompiler({
+      appName,
+      config,
+      devSocket,
+      urls,
+      useYarn,
+      useTypeScript,
+      tscCompileOnError,
+      webpack,
+    });
+    // Load proxy config
+    const proxySetting = require(paths.appPackageJson).proxy;
+    const proxyConfig = prepareProxy(
+      proxySetting,
+      paths.appPublic,
+      paths.publicUrlOrPath
+    );
+    // Serve webpack assets generated by the compiler over a web server.
+    const serverConfig = createDevServerConfig(
+      proxyConfig,
+      urls.lanUrlForConfig
+    );
+    const devServer = new WebpackDevServer(compiler, serverConfig);
+    // Launch WebpackDevServer.
+    devServer.listen(port, HOST, err => {
+      if (err) {
+        return console.log(err);
+      }
+      if (isInteractive) {
+        clearConsole();
+      }
+
+      // We used to support resolving modules according to `NODE_PATH`.
+      // This now has been deprecated in favor of jsconfig/tsconfig.json
+      // This lets you use absolute paths in imports inside large monorepos:
+      if (process.env.NODE_PATH) {
+        console.log(
+          chalk.yellow(
+            'Setting NODE_PATH to resolve modules absolutely has been deprecated in favor of setting baseUrl in jsconfig.json (or tsconfig.json if you are using TypeScript) and will be removed in a future major release of create-react-app.'
+          )
+        );
+        console.log();
+      }
+
+      console.log(chalk.cyan('Starting the development server...\n'));
+      openBrowser(urls.localUrlForBrowser);
+    });
+
+    ['SIGINT', 'SIGTERM'].forEach(function(sig) {
+      process.on(sig, function() {
+        devServer.close();
+        process.exit();
+      });
+    });
+
+    if (isInteractive || process.env.CI !== 'true') {
+      // Gracefully exit when stdin ends
+      process.stdin.on('end', function() {
+        devServer.close();
+        process.exit();
+      });
+      process.stdin.resume();
+    }
+  })
+  .catch(err => {
+    if (err && err.message) {
+      console.log(err.message);
+    }
+    process.exit(1);
+  });

scripts/test.js

@@ -0,0 +1,53 @@
+'use strict';
+
+// Do this as the first thing so that any code reading it knows the right env.
+process.env.BABEL_ENV = 'test';
+process.env.NODE_ENV = 'test';
+process.env.PUBLIC_URL = '';
+
+// Makes the script crash on unhandled rejections instead of silently
+// ignoring them. In the future, promise rejections that are not handled will
+// terminate the Node.js process with a non-zero exit code.
+process.on('unhandledRejection', err => {
+  throw err;
+});
+
+// Ensure environment variables are read.
+require('../config/env');
+
+
+const jest = require('jest');
+const execSync = require('child_process').execSync;
+let argv = process.argv.slice(2);
+
+function isInGitRepository() {
+  try {
+    execSync('git rev-parse --is-inside-work-tree', { stdio: 'ignore' });
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+
+function isInMercurialRepository() {
+  try {
+    execSync('hg --cwd . root', { stdio: 'ignore' });
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+
+// Watch unless on CI or explicitly running all tests
+if (
+  !process.env.CI &&
+  argv.indexOf('--watchAll') === -1 &&
+  argv.indexOf('--watchAll=false') === -1
+) {
+  // https://github.com/facebook/create-react-app/issues/5210
+  const hasSourceControl = isInGitRepository() || isInMercurialRepository();
+  argv.push(hasSourceControl ? '--watch' : '--watchAll');
+}
+
+
+jest.run(argv);

src/App.tsx

@@ -0,0 +1,20 @@
+import Guards from '@/router/Guard'
+import history from '@/utils/history'
+import 'nprogress/nprogress.css'
+import React from 'react'
+import { Router, Switch } from 'react-router-dom'
+import './index.scss'
+import { routesConfig } from './router/routes'
+const App = () =>{
+  return (
+    <div className="App">
+      <Router history={ history }>
+        <Switch>
+          <Guards routeConfig={routesConfig}></Guards>
+        </Switch>
+      </Router >
+    </div>
+  )
+}
+
+export default App

src/assets/css/common.scss

@@ -0,0 +1,224 @@
+.pi-flex {
+  display: flex;
+}
+
+.pi-flex-wrap {
+  @extend .pi-flex;
+
+  flex-wrap: wrap;
+}
+
+.pi-flex-row {
+  @extend .pi-flex;
+
+  flex-direction: row;
+}
+
+.pi-flex-column {
+  @extend .pi-flex;
+
+  flex-direction: column;
+}
+
+.pi-flex-sub {
+  flex: 1;
+}
+
+.pi-flex-twice {
+  flex: 2;
+}
+
+.pi-flex-treble {
+  flex: 3;
+}
+
+.pi-align-start {
+  @extend .pi-flex;
+
+  align-items: flex-start;
+}
+
+.pi-align-end {
+  @extend .pi-flex;
+
+  align-items: flex-end;
+}
+
+.pi-align-center {
+  @extend .pi-flex;
+
+  align-items: center;
+}
+
+.pi-align-stretch {
+  @extend .pi-flex;
+
+  align-items: stretch;
+}
+
+.pi-align-baseline {
+  @extend .pi-flex;
+
+  align-items: baseline;
+}
+
+.pi-self-start {
+  @extend .pi-flex;
+
+  align-self: flex-start;
+}
+
+.pi-self-center {
+  @extend .pi-flex;
+
+  align-self: flex-center;
+}
+
+.pi-self-end {
+  @extend .pi-flex;
+
+  align-self: flex-end;
+}
+
+.pi-self-stretch {
+  @extend .pi-flex;
+
+  align-self: stretch;
+}
+
+.pi-justify-start {
+  @extend .pi-flex;
+
+  justify-content: flex-start;
+}
+
+.pi-justify-end {
+  @extend .pi-flex;
+
+  justify-content: flex-end;
+}
+
+.pi-justify-center {
+  @extend .pi-flex;
+
+  justify-content: center;
+}
+
+.pi-justify-between {
+  @extend .pi-flex;
+
+  justify-content: space-between;
+}
+
+.pi-justify-around {
+  @extend .pi-flex;
+
+  justify-content: space-around;
+}
+
+.pi-flex-row-center {
+  @extend .pi-flex-row;
+  @extend .pi-justify-center;
+  @extend .pi-align-center;
+}
+
+.pi-flex-column-center {
+  @extend .pi-flex-column;
+  @extend .pi-justify-center;
+  @extend .pi-align-center;
+}
+
+.pi-width-100P {
+  width: 100%;
+}
+
+.pi-height-100P {
+  height: 100%;
+}
+
+/* 预设常用样式 */
+@for $i from 1 through 100 {
+  /* font-size */
+  .pi-fz-#{$i} {
+    font-size: 1px * $i;
+  }
+
+  /* padding */
+  .pi-pd-#{$i} {
+    padding: 1px * $i;
+  }
+  .pi-pd-top-#{$i} {
+    padding-top: 1px * $i;
+  }
+  .pi-pd-right-#{$i} {
+    padding-right: 1px * $i;
+  }
+  .pi-pd-bottom-#{$i} {
+    padding-bottom: 1px * $i;
+  }
+  .pi-pd-left-#{$i} {
+    padding-left: 1px * $i;
+  }
+  .pi-pd-tb-#{$i} {
+    padding-top: 1px * $i;
+    padding-bottom: 1px * $i;
+  }
+  .pi-pd-lr-#{$i} {
+    padding-right: 1px * $i;
+    padding-left: 1px * $i;
+  }
+
+  /* margin */
+  .pi-mg-#{$i} {
+    margin: 1px * $i;
+  }
+  .pi-mg-top-#{$i} {
+    margin-top: 1px * $i;
+  }
+  .pi-mg-right-#{$i} {
+    margin-right: 1px * $i;
+  }
+  .pi-mg-bottom-#{$i} {
+    margin-bottom: 1px * $i;
+  }
+  .pi-mg-left-#{$i} {
+    margin-left: 1px * $i;
+  }
+  .pi-mg-tb-#{$i} {
+    margin-top: 1px * $i;
+    margin-bottom: 1px * $i;
+  }
+  .pi-mg-lr-#{$i} {
+    margin-right: 1px * $i;
+    margin-left: 1px * $i;
+  }
+  // width & height
+  .pi-width-#{$i} {
+    width: 1px * $i;
+  }
+  .pi-height-#{$i} {
+    height: 1px * $i;
+  }
+
+  // radius
+  .pi-radius-#{$i} {
+    border-radius: 1px * $i;
+  }
+
+  // line-height
+  .pi-lh-#{$i} {
+    line-height: 1px * $i;
+  }
+}
+
+.pi-text-center {
+  text-align: center;
+}
+
+.pi-text-left {
+  text-align: left;
+}
+
+.pi-text-right {
+  text-align: right;
+}

src/assets/icons/svg/chalkboard.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M96 64h448v352h64V40c0-22.06-17.94-40-40-40H72C49.94 0 32 17.94 32 40v376h64V64zm528 384H480v-64H288v64H16c-8.84 0-16 7.16-16 16v32c0 8.84 7.16 16 16 16h608c8.84 0 16-7.16 16-16v-32c0-8.84-7.16-16-16-16z"/></svg>

src/assets/icons/svg/folder.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M464 128H272l-64-64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V176c0-26.51-21.49-48-48-48z"/></svg>

src/components/AsyncModuleLoader/index.tsx

@@ -0,0 +1,28 @@
+import React from 'react'
+
+export interface AyncModuleLoaderState {
+    asyncComponent: any
+}
+export default function AyncModuleLoader(importComponent: any) {
+    return class AsyncComponent extends React.Component<unknown, AyncModuleLoaderState> {
+        constructor(props: unknown) {
+            super(props)
+            this.state = {
+                asyncComponent: null
+            }
+        }
+        async componentDidMount() {
+            if (this.state.asyncComponent) {
+                return
+            }
+            const { default: component } = await importComponent()
+            this.setState({
+                asyncComponent: component
+            })
+        }
+        render() {
+            const {asyncComponent:Component} = this.state
+            return Component ? <Component {...this.props} /> : null
+        }
+    }
+}

src/components/Header/index.tsx

@@ -0,0 +1,25 @@
+import React, { PropsWithChildren } from 'react'
+interface iHeaderProps {
+  title: string;
+}
+
+
+const Header: React.FC<PropsWithChildren<iHeaderProps>> = props => {
+
+  const renderChild = (child: any) => { // 控制内容的分发
+    if (child?.props?.left) {
+        return <div key="left">{child}</div>
+    } else if (child?.props?.right) {
+        return <div key="right">{child}</div>
+    } else if (child?.props?.center) {
+        return <div key="center">{child}</div>
+    }
+  }
+  return (
+    <div className="pi-height-34 pi-lh-30 pi-mg-right-20 pi-justify-between pi-align-center">
+      {Array.isArray(props.children) ?
+        props.children?.map((child) => renderChild(child)) : props.children && renderChild(props.children)}
+    </div>
+  )
+}
+export default Header

src/components/Menu/MenuItem.tsx

@@ -0,0 +1,26 @@
+import SvgIcon from '@/components/SvgIcon/index'
+import { iMenuItem } from '@/types/router'
+import { Tooltip } from 'antd'
+import React from 'react'
+import { Link, RouteComponentProps, withRouter } from 'react-router-dom'
+interface iMeunProps extends RouteComponentProps{
+  item: iMenuItem
+}
+
+const Meun:React.FC<iMeunProps> = props => {
+  const { item: { path, icon, title, isTop }, location } = props
+
+  const fontSize = '27', fill = '#7786ab'
+  const isActive = location.pathname.indexOf(path) !== -1
+
+  return (
+    <Tooltip placement="right" title={title}>
+      <Link to={path} className={ isActive ? 'active' : ''}>
+        <SvgIcon iconClass={icon} fontSize={fontSize} fill={fill}></SvgIcon>
+        { isActive && isTop ? <span className="pi-fz-12">{title}</span> : ''}
+      </Link>
+    </Tooltip>
+  )
+}
+
+export default withRouter(Meun)

src/components/Menu/api.ts

@@ -0,0 +1,6 @@
+import request from "@/utils/common/request"
+
+export async function apiLogout() {
+  const { data } = await request.post('/api/login/out')
+  return data
+}

src/components/Menu/index.module.scss

@@ -0,0 +1,7 @@
+.bottomBtn {
+  height: 20px;
+  padding: 0px 8px;
+  font-size: 12px;
+  border-radius: 3px;
+  margin-bottom: 3px;
+}

src/components/Menu/index.scss

@@ -0,0 +1,49 @@
+.main-nav {
+  z-index: 99;
+  height: 100%;
+  width: 55px;
+  background-color: #33425b;
+  .logo {
+    width: 55px;
+    height: 55px;
+  }
+  .nav-content {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    height: calc(100% - 55px);
+    .nav-top {
+      padding: 0;
+      margin: 0;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+    }
+    a {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      padding: 12px 0;
+      text-align: center;
+      &::first-child {
+        margin-top: 0;
+      }
+      &:hover {
+        background-color: #192948;
+        & > span > svg {
+          fill: #f2f2f2;
+        }
+        &.active {
+          color: #f2f2f2;
+        }
+      }
+      &.active {
+        background-color: #192948;
+        color: #7786ab;
+      }
+    }
+  }
+}

src/components/Menu/index.tsx

@@ -0,0 +1,94 @@
+import logo from '@/assets/img/logo.png'
+import { RootState } from '@/store/reducers'
+import { iMenuItem } from '@/types/router'
+import consts from '@/utils/consts'
+import { Button, Dropdown, Menu, message } from "antd"
+import React from 'react'
+import { connect } from 'react-redux'
+import { Link, RouteComponentProps, withRouter } from "react-router-dom"
+import { apiLogout } from './api'
+import styles from './index.module.scss'
+import './index.scss'
+import MenuItem from './MenuItem'
+interface iMenuProps extends RouteComponentProps{
+  list: iMenuItem[],
+  history: any
+}
+const NavSider:React.FC<iMenuProps> = (props)=> {
+  console.log(props)
+
+  const { list: MeunList, history } = props
+  const handleLogout = async () => {
+    const { code = -1, msg = '登出错误' } = await apiLogout()
+      if (code !== consts.RET_CODE.SUCCESS) {
+        return message.error(msg)
+      }
+      // dispatch(delUserInfo)
+      history.push('/login')
+  }
+  return (
+    <div className="main-nav">
+      <div className="logo"><img src={logo}></img></div>
+      <div className="nav-content">
+        <div className="nav-top">
+          {
+            MeunList.map((item: iMenuItem, idx: number) =>
+              item.isTop && <MenuItem key={idx} item={item}></MenuItem>
+            )
+          }
+        </div>
+        <div className="nav-footer">
+          {
+            MeunList.map((item: iMenuItem, idx: number) =>
+              !item.isTop && <MenuItem key={idx} item={item}></MenuItem>
+            )
+          }
+          <div className="pi-text-center">
+            <Dropdown overlay={() => {
+                return (
+                  <Menu>
+                    <Menu.Item key="0">
+                      <Link to="/acount/safe">账号资料</Link>
+                    </Menu.Item>
+                    <Menu.Item key="1">
+                      <Link to="/acount/safe">账号安全</Link>
+                    </Menu.Item>
+                    <Menu.Divider />
+                    <Menu.Item key="2">
+                      <Link to="/acount/safe">帮助中心</Link>
+                    </Menu.Item>
+                    <Menu.Item key="3">
+                      <span onClick={handleLogout}>退出登录</span>
+                    </Menu.Item>
+                  </Menu>
+                )
+            }} trigger={[ 'click' ]} placement="topRight">
+              <Button size="small" className={styles.bottomBtn} onClick={handleLogout}>张三</Button>
+            </Dropdown>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+const mapStateToProps = (state: RootState) => {
+  const { userInfo } = state
+  return {
+    userInfo
+  }
+}
+
+// const mapDispatchToProps = (dispatch: Dispatch<AnyAction>) => {
+//   return {
+//     logoutBtnClick: async (history) => {
+//       const { code = -1, msg = '登出错误' } = await apiLogout()
+//       if (code !== consts.RET_CODE.SUCCESS) {
+//         return message.error(msg)
+//       }
+//       dispatch(delUserInfo)
+//       history.push('/login')
+//     }
+//   }
+// }
+const connector = connect(mapStateToProps)
+export default withRouter(connector(NavSider))

src/components/SvgIcon/index.scss

@@ -0,0 +1,6 @@
+.svg-class {
+  display: inline-block;
+  overflow: hidden;
+  width: 1em;
+  height: 1em;
+}

src/components/SvgIcon/index.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import './index.scss'
+type svgProps = {
+  iconClass: string,
+  fontSize: string,
+  fill: string
+} & typeof defaultProps
+
+const defaultProps = {
+  fill: 'currentColor',
+  fontSize: '14'
+}
+const SvgIcon = (props: svgProps) => {
+  const { iconClass, fontSize, fill } = props
+  const svg = require(`@/assets/icons/svg/${iconClass}.svg`)
+  const styleObj = {
+    fontSize: fontSize + 'px',
+    minWidth: fontSize + 'px'
+  }
+  return (
+    <span aria-hidden="true">
+      <svg className='svg-class' style={styleObj} fill={fill}>
+        <use xlinkHref={"#icon-" + iconClass}  />
+      </svg>
+    </span>
+  )
+}
+SvgIcon.defaultProps = defaultProps
+export default SvgIcon

src/index.scss

@@ -0,0 +1,25 @@
+body {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  font-size: 12px;
+  #root {
+    font-family: 'Helvetica Neue', 'Hiragino Sans GB', stheiti, 'Microsoft Yahei', '微软雅黑', tahoma, sans-serif;
+    font-size: 12px;
+    height: 100%;
+    width: 100%;
+    .App {
+      height: 100%;
+      width: 100%;
+      display: flex;
+      flex-direction: row;
+      flex-wrap: nowrap;
+    }
+  }
+}
+#nprogress .bar {
+  background: #1890ff !important;
+  height: 2px !important;
+}
+@import './assets/css/common.scss';

src/index.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import { Provider } from 'react-redux'
+// import { Provider} from 'react-redux'
+// import { createStore, applyMiddleware } from 'redux'
+import App from './App'
+import * as serviceWorker from './serviceWorker'
+import store from "./store"
+ReactDOM.render(
+  <Provider store={store}>
+    <App />
+  </Provider>,
+  document.getElementById('root')
+)
+
+// If you want your app to work offline and load faster, you can change
+// unregister() to register() below. Note this comes with some pitfalls.
+// Learn more about service workers: https://bit.ly/CRA-PWA
+serviceWorker.register()

src/layout/NavSide/index.tsx

@@ -0,0 +1,21 @@
+import Menu from "@/components/Menu"
+import Guards, { combinationPath } from "@/router/Guard"
+import { iMenuItem, RouteModol } from "@/types/router"
+import React from 'react'
+import { Switch } from 'react-router-dom'
+export default function NavSide(props: any) {
+  const { routeConfig, match } = props
+
+  const menuList: iMenuItem[] = routeConfig.filter((item: RouteModol) => item.menuConfig).map((item: RouteModol) => {
+    return { path: combinationPath(match.path, item.path), ...item.menuConfig }
+  })
+
+  return (
+    <div className="pi-flex-row">
+      <Menu list={menuList}></Menu>
+      <Switch>
+        <Guards routeConfig={routeConfig} match={match}></Guards>
+      </Switch>
+    </div>
+  )
+}

src/pages/404/index.scss

@@ -0,0 +1,46 @@
+.loss-container {
+  width: 100%;
+  position: relative;
+  margin: 0 auto;
+  top: 0;
+  left: 0;
+  .content {
+    position: absolute;
+    top: 10%;
+    left: 10%;
+    right: 10%;
+    background: #dcdcdc url('../../assets/img/404.png') bottom center no-repeat;
+    padding: 1em 0;
+    h4 {
+      text-align: center;
+      &:nth-of-type(1) {
+        font-size: 24px;
+        margin-bottom: 16px;
+      }
+      &:nth-of-type(2) {
+        font-size: 200px;
+        margin-bottom: 0.5rem;
+        font-weight: 500;
+        line-height: 1.2;
+      }
+    }
+  }
+  footer {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 1030;
+    a {
+      color: #007bff;
+      text-decoration: none;
+    }
+    .mb-1 {
+      text-align: center;
+      margin-bottom: 0.25rem;
+      .mb-2 {
+        margin-left: 0.5rem;
+      }
+    }
+  }
+}

src/pages/404/index.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import './index.scss'
+export default function Loss() {
+  return (
+    <div className="loss-container">
+      <div className="content">
+        <h4>Opps！页面不存在。</h4>
+        <h4>404</h4>
+      </div>
+      <footer>
+        <p className="mb-1">Copyright © 2019 <a href="https://smartcost.com.cn">珠海纵横创新软件有限公司</a>.All Rights Reserved.<a className="mb-2" href="http://www.miitbeian.gov.cn">粤ICP备14032472号</a></p>
+      </footer>
+    </div>
+  )
+}

src/pages/Account/Information/index.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+export default function index() {
+  return (
+    <div>
+      账号资料
+    </div>
+  )
+}

src/pages/Account/Manual/index.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+export default function index() {
+  return (
+    <div>
+      用户手册
+    </div>
+  )
+}

src/pages/Account/Safe/index.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+export default function index() {
+  return (
+    <div>
+      账号安全
+    </div>
+  )
+}

src/pages/Account/index.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+export default function index() {
+  return (
+    <div>
+      账号页面
+    </div>
+  )
+}

src/pages/Contract/index.tsx

@@ -0,0 +1,13 @@
+import React, { Component } from 'react'
+export default class index extends Component {
+
+
+  render() {
+    return (
+      <div className="pi-flex-row">
+        {/* <Meun/> */}
+        <h1>合同管理</h1>
+      </div>
+    )
+  }
+}

src/pages/Dashboard/index.tsx

@@ -0,0 +1,11 @@
+import React, { Component } from 'react'
+export default class index extends Component {
+  render() {
+    return (
+      <div className="pi-flex-row">
+        {/* <Meun></Meun> */}
+        <h1>首页</h1>
+      </div>
+    )
+  }
+}

src/pages/Login/api.ts

@@ -0,0 +1,30 @@
+import { iFromValues } from '@/types/login'
+import request from "@/utils/common/request"
+
+/**
+ * 请求登录
+ * @param datas
+ * @return {Promise<>}
+ */
+const apiLogin = async (data: iFromValues) => {
+  const res = await request.post('/api/login', data)
+
+
+  return res.data
+}
+
+/**
+ * 获取项目信息
+ * @param {string} code - 项目编号
+ * @return {Promise<>}
+ */
+const apiProject = async (code: string) => {
+  const { data = {} } = await request.get(`/api/login/project/name`, { code })
+  return data
+}
+
+export {
+  apiLogin,
+  apiProject
+}
+

src/pages/Login/index.module.scss

@@ -0,0 +1,45 @@
+.loginForm {
+  max-width: 400px;
+  padding: 30px;
+  margin-left: 140px;
+  background: #fff;
+  border: 1px solid #ddd;
+  border-radius: 0.25rem;
+  h4 {
+    margin-bottom: 1rem;
+    font-size: 1.5rem;
+    text-align: center;
+  }
+  .loginFormbutton {
+    width: 100%;
+  }
+  :global(.ant-input) {
+    height: calc(1.5em + 0.75rem + 2px);
+    padding: 0.375rem 0.75rem;
+    border-radius: 0.25rem;
+  }
+  :global(.ant-input-password) {
+    padding: 0.375rem 0.75rem;
+    border-radius: 0.25rem;
+  }
+  :global(.ant-input-password .ant-input) {
+    height: 100%;
+  }
+  :global(.ant-btn) {
+    width: 100%;
+    line-height: 1.5;
+    border-radius: 0.25rem;
+  }
+  .textRight {
+    margin-right: 1rem;
+    font-size: 12px;
+    text-align: right;
+    span {
+      color: #007bff;
+      cursor: pointer;
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+}

src/pages/Login/index.scss

@@ -0,0 +1,153 @@
+.login-container {
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(#192948, #33425b);
+  .login-content {
+    position: relative;
+    display: inline-block;
+    width: 100%;
+    height: 100%;
+    background: url('../../assets/img/undraw_contract_uy56.svg') no-repeat;
+    background-position: 25% 95%;
+    background-size: 35% auto;
+    .form-sign {
+      position: absolute;
+      top: 10%;
+      right: 10%;
+      left: 10%;
+      padding: 0 15px;
+      .project-title {
+        margin-bottom: 1.5rem;
+        font-size: 1.25rem;
+        line-height: 1.2;
+        color: #6c757d;
+        text-align: center;
+      }
+    }
+    footer {
+      position: fixed;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      z-index: 1030;
+      color: #ffffff;
+      a {
+        color: #ffffff;
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+      .mb-1 {
+        margin-bottom: 0.25rem;
+        text-align: center;
+        .mb-2 {
+          margin-left: 0.5rem;
+        }
+      }
+    }
+  }
+}
+
+/* ----------------------------------------------
+ * Generated by Animista on 2020-10-13 17:34:57
+ * Licensed under FreeBSD License.
+ * See http://animista.net/license for more info.
+ * w: http://animista.net, t: @cssanimista
+ * ---------------------------------------------- */
+
+/**
+ * ----------------------------------------
+ * animation scale-in-ver-bottom
+ * ----------------------------------------
+ */
+
+.scale-in-ver-bottom {
+  -webkit-animation: scale-in-ver-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+  animation: scale-in-ver-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+}
+
+@-webkit-keyframes scale-in-ver-bottom {
+  0% {
+    opacity: 1;
+    -webkit-transform: scaleY(0);
+    transform: scaleY(0);
+    -webkit-transform-origin: 0% 100%;
+    transform-origin: 0% 100%;
+  }
+  100% {
+    opacity: 1;
+    -webkit-transform: scaleY(1);
+    transform: scaleY(1);
+    -webkit-transform-origin: 0% 100%;
+    transform-origin: 0% 100%;
+  }
+}
+
+@keyframes scale-in-ver-bottom {
+  0% {
+    opacity: 1;
+    -webkit-transform: scaleY(0);
+    transform: scaleY(0);
+    -webkit-transform-origin: 0% 100%;
+    transform-origin: 0% 100%;
+  }
+  100% {
+    opacity: 1;
+    -webkit-transform: scaleY(1);
+    transform: scaleY(1);
+    -webkit-transform-origin: 0% 100%;
+    transform-origin: 0% 100%;
+  }
+}
+
+/* ----------------------------------------------
+ * Generated by Animista on 2020-10-13 17:36:0
+ * Licensed under FreeBSD License.
+ * See http://animista.net/license for more info.
+ * w: http://animista.net, t: @cssanimista
+ * ---------------------------------------------- */
+
+/**
+ * ----------------------------------------
+ * animation scale-out-ver-bottom
+ * ----------------------------------------
+ */
+
+.scale-out-ver-bottom {
+  -webkit-animation: scale-out-ver-bottom 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
+  animation: scale-out-ver-bottom 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
+}
+
+@-webkit-keyframes scale-out-ver-bottom {
+  0% {
+    opacity: 1;
+    -webkit-transform: scaleY(1);
+    transform: scaleY(1);
+    -webkit-transform-origin: 0% 100%;
+    transform-origin: 0% 100%;
+  }
+  100% {
+    opacity: 1;
+    -webkit-transform: scaleY(0);
+    transform: scaleY(0);
+    -webkit-transform-origin: 0% 100%;
+    transform-origin: 0% 100%;
+  }
+}
+
+@keyframes scale-out-ver-bottom {
+  0% {
+    opacity: 1;
+    -webkit-transform: scaleY(1);
+    transform: scaleY(1);
+    -webkit-transform-origin: 0% 100%;
+    transform-origin: 0% 100%;
+  }
+  100% {
+    opacity: 1;
+    -webkit-transform: scaleY(0);
+    transform: scaleY(0);
+    -webkit-transform-origin: 0% 100%;
+    transform-origin: 0% 100%;
+  }
+}

src/pages/Login/index.tsx

@@ -0,0 +1,144 @@
+import logo from '@/assets/img/loginlogo.png'
+import { iFromValues, iLoginProps, iRetrieveFormProps } from '@/types/login'
+import consts from '@/utils/consts'
+import { Button, Form, Input, Modal } from 'antd'
+import React, { useEffect, useState } from 'react'
+import { RouteComponentProps, withRouter } from 'react-router-dom'
+import { apiLogin, apiProject } from "./api"
+import styles from './index.module.scss'
+import './index.scss'
+
+// 正常登录Form表单
+interface iProjectInfo {
+  id?: number
+  code?: number
+  name?: string
+}
+const NormalLoginForm:React.FC<iLoginProps> = ({ history }) => {
+  let timer: any = null
+  const [ projectInfo, setProjectInfo ] = useState('')
+  const [ visible, setVisible ] = useState(false)
+  const [ projectAnimation, setProjectAnimation ] = useState(false) // 控制project-title的动画显示
+  const onFinish = async (values: iFromValues) => {
+    const { code = -1, data }  = await apiLogin(values)
+    if (code === consts.RET_CODE.SUCCESS) {
+      // store.dispatch({ type: SAVE_USER_INFO, payload: data })
+      // store.dispatch({ type: SAVE_PERMISSION, payload: { isLogin: true, permission: data.Role } })
+      history.push('/')
+    }
+  }
+
+  const handleProjectCode = (e: any) => {
+    if (timer) clearTimeout(timer)
+    const projectCode = e.target?.value
+    !projectCode && (setProjectInfo(''))
+    timer = setTimeout(() => {
+      projectCode && apiProject(projectCode).then(({ code = -1, data }) => {
+        if (code === consts.RET_CODE.SUCCESS) {
+          if (data.length) {
+            const project: iProjectInfo = data[0]
+            project.name && setProjectInfo(project.name)
+          } else {
+            setProjectInfo('')
+          }
+        }
+      })
+    }, 300)
+  }
+  const handleForgetPsw = () => {
+    setVisible(!visible)
+  }
+
+useEffect(() => {
+  if (projectInfo) {
+    setProjectAnimation(false)
+  } else {
+    setProjectAnimation(true)
+  }
+}, [ projectInfo ])
+  return (
+    <Form
+      name="normal_login"
+      className={styles.loginForm}
+      initialValues={{ remember: true }}
+      onFinish={onFinish}
+    >
+      <h4>纵横工程建设项目管理系统</h4>
+      <h5 className={[ 'project-title', projectAnimation ? 'scale-out-ver-bottom' : 'scale-in-ver-bottom' ].join(' ')} >{projectInfo}</h5>
+      <Form.Item
+        name="code"
+        rules={[ { required: true, message: 'Please input your Project!' } ]}
+      >
+        <Input placeholder="项目编号" onChange={handleProjectCode}/>
+      </Form.Item>
+      <Form.Item
+        name="account"
+        rules={[ { required: true, message: 'Please input your Account!' } ]}
+      >
+        <Input placeholder="登录账号" />
+      </Form.Item>
+      <Form.Item
+        name="password"
+        rules={[ { required: true, message: 'Please input your Password!' } ]}
+      >
+        <Input.Password type="password" placeholder="密码"
+        />
+      </Form.Item>
+
+      <Form.Item>
+        <Button type="primary" htmlType="submit">登录</Button>
+      </Form.Item>
+      <div className={styles.textRight}>
+        <span onClick={handleForgetPsw}>忘记密码?</span>
+      </div>
+      <RetrieveForm visible={visible} setVisible={setVisible}></RetrieveForm>
+    </Form>
+  )
+}
+
+// 找回密码Form表单
+const RetrieveForm:React.FC<iRetrieveFormProps>= ({ visible, setVisible }) => {
+  const handleOk = () => {
+    console.log('ok')
+
+  }
+  const handleCancel = () => {
+    console.log('cancel')
+    setVisible(!visible)
+  }
+  return (
+    <Modal
+          title="找回密码"
+          visible={visible}
+          onOk={handleOk}
+          onCancel={handleCancel}
+          cancelText="取消"
+          closable={false}
+          okText="重置密码"
+        >
+        </Modal>
+  )
+}
+
+const Login = (props: RouteComponentProps) => {
+  const { history } = props
+  return (
+    <div className="login-container">
+      <div className="login-content">
+        <div className="form-sign pi-flex pi-flex-row">
+          <div className="pi-flex-sub">
+            <img src={logo} />
+          </div>
+          <div className="pi-flex-sub">
+            <NormalLoginForm history={history}></NormalLoginForm>
+          </div>
+        </div>
+        <footer>
+          <p className="mb-1">Copyright © 2019 <a href="https://smartcost.com.cn">珠海纵横创新软件有限公司</a>.All Rights Reserved.<a className="mb-2" href="http://www.miitbeian.gov.cn">粤ICP备14032472号</a></p>
+        </footer>
+      </div>
+    </div>
+  )
+}
+
+export default withRouter(Login)

src/pages/Management/Info/index.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+export default function Info() {
+  return (
+    <div>
+      <h1>项目信息</h1>
+    </div>
+  )
+}

src/pages/Management/Setting/index.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+
+export default function Setting() {
+  return (
+    <div>
+
+      <h1>项目设置</h1>
+    </div>
+  )
+}

src/pages/Management/Tender/index.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+export default function Tender() {
+  return (
+    <div>
+      <h1>标段管理</h1>
+    </div>
+  )
+}

src/pages/Management/components/leftSide/index.scss

@@ -0,0 +1,21 @@
+.panel-sidebar {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  width: 120px;
+  background: #fbfcfd;
+  border-right: 1px solid #dddddd;
+  .sidebar-title {
+    border-bottom: 1px solid #dddddd;
+  }
+  .nav-link {
+    height: 30px;
+    padding-left: 17px;
+    line-height: 30px;
+    color: #333333;
+    &.active {
+      font-weight: 600;
+      background: #e4e7ea;
+    }
+  }
+}

src/pages/Management/components/leftSide/index.tsx

@@ -0,0 +1,22 @@
+import { iNavSide } from '@/types/router'
+import React from 'react'
+import { Link } from 'react-router-dom'
+import "./index.scss"
+const leftSide:React.FC<iNavSide> = ({ childRoutes }) => {
+  const pathname = location.pathname
+  return (
+    <div className="panel-sidebar">
+      <div className="pi-pd-10 pi-mg-bottom-10 sidebar-title">项目设置</div>
+      <div className="pi-flex-column pi-justify-start">
+        { childRoutes.map((item, idx) =>
+          item.menuConfig && <Link key={idx} to={item.path} className={pathname.indexOf(item.path) !== -1 ? 'nav-link active' : 'nav-link'}>{item.menuConfig.title}</Link>
+        )}
+				{/* <Link>项目信息</Link>
+				<Link>账号设置</Link>
+				<Link>标段管理</Link> */}
+      </div>
+    </div>
+  )
+}
+
+export default leftSide

src/pages/Management/index.tsx

@@ -0,0 +1,19 @@
+import Guards from '@/router/Guard'
+import { NavigationGuardsProps } from '@/types/router'
+import React from 'react'
+import { Switch } from 'react-router-dom'
+import LeftSide from './components/leftSide'
+const Management:React.FC<NavigationGuardsProps> = props => {
+  const { routeConfig, match, location } = props
+  console.log(props)
+
+  return (
+    <>
+      <LeftSide childRoutes={routeConfig}></LeftSide>
+      <Switch>
+          <Guards routeConfig={routeConfig} match={match} location={location}></Guards>
+      </Switch>
+    </>
+  )
+}
+export default Management

src/pages/Quality/index.tsx

@@ -0,0 +1,11 @@
+import React, { Component } from 'react'
+export default class index extends Component {
+  render() {
+    return (
+      <div className="pi-flex-row">
+        {/* <Meun></Meun> */}
+        <h1>质量巡检</h1>
+      </div>
+    )
+  }
+}

src/pages/Safe/index.tsx

@@ -0,0 +1,12 @@
+import React, { Component } from 'react'
+export default class index extends Component {
+
+  render() {
+    return (
+      <div className="pi-flex-row">
+        {/* <Meun></Meun> */}
+        <h1>安全巡检</h1>
+      </div>
+    )
+  }
+}

src/react-app-env.d.ts

@@ -0,0 +1,66 @@
+/// <reference types="node" />
+/// <reference types="react" />
+/// <reference types="react-dom" />
+
+declare namespace NodeJS {
+  interface ProcessEnv {
+    readonly NODE_ENV: 'development' | 'production' | 'test';
+    readonly PUBLIC_URL: string;
+  }
+}
+
+declare module '*.bmp' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.gif' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.jpg' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.jpeg' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.png' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.webp' {
+    const src: string;
+    export default src;
+}
+
+declare module '*.svg' {
+  import * as React from 'react';
+
+  export const ReactComponent: React.FunctionComponent<React.SVGProps<
+    SVGSVGElement
+  > & { title?: string }>;
+
+  const src: string;
+  export default src;
+}
+
+declare module '*.module.css' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.module.scss' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.module.sass' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}

src/router/Guard.tsx

@@ -0,0 +1,165 @@
+import { checkPermission } from '@/store/modules/permission'
+import { RootState } from '@/store/reducers'
+import { NavigationGuardsProps, RouteModol } from '@/types/router'
+import NProgress from 'nprogress'
+import React, { Dispatch, useEffect } from 'react'
+import { connect } from 'react-redux'
+import { Redirect, Route } from "react-router-dom"
+import { AnyAction } from 'redux'
+const NavigationGuards:React.FC<NavigationGuardsProps> = props => {
+  const { location, routeConfig, match, permission, check } = props
+  // check()
+  // console.log(props)
+
+  const parentPath: string | null = match?.path || null // 父路由的路径
+  const targetPath: string | null  = location?.pathname || null// 目标路由的位置
+  const targetRoute: RouteModol | null = targetPath && findTargetRoute(parentPath, targetPath, routeConfig) || null
+
+  const isLogin = permission.isLogin // 是否已登录
+
+  NProgress.start()
+  useEffect(() => {
+    NProgress.done()
+  })
+
+  // 利用重定向使 / 访问/dashboard路由
+  if (targetRoute && targetRoute.redirect) {
+    const redirectPath = combinationRedirect(parentPath, targetRoute.redirect)
+
+    return <Redirect to={redirectPath}/>
+  }
+
+  // 未找到目标路由组件，返回404
+  if (!targetRoute) {
+    return <Redirect to='/404'/>
+  }
+
+  // 处理是否已登录
+  if (isLogin) {
+    return <LoginHandler targetRoute={targetRoute}></LoginHandler>
+  } else {
+    return <NotLoginHandler targetRoute={targetRoute}></NotLoginHandler>
+  }
+}
+
+
+/**
+ * 判断一个路径是否是另一个路径的子路径
+ * @param pathConfig - 配置文件中的路径
+ * @param pathTarget - 用户请求的路径
+ */
+function switchRoute (pathConfig: string, pathTarget: string):boolean {
+  if (pathConfig === pathTarget) return true
+  const reg = new RegExp(`(^${pathConfig})(?=/)`)
+
+  return reg.test(pathTarget)
+}
+
+
+/**
+ * 将子组件路径还原成带前缀的路径
+ * @param parentPath - 父组件路径
+ * @param pathOfTargetConfig - 用户希望访问的组件的在路由配置信息中填写的路径
+ * @returns {string} 拼接后的path
+ */
+const combinationPath = (parentPath: string|undefined, pathOfTargetConfig: string): string => {
+  // if (parentPath && pathOfTargetConfig === '/') return parentPath
+  // if (parentPath && parentPath === pathOfTargetConfig) return parentPath
+  let combinedPath = !pathOfTargetConfig.startsWith('/') ? `/${pathOfTargetConfig}` : pathOfTargetConfig
+  combinedPath = parentPath ? `${parentPath}${combinedPath}` : combinedPath
+  return combinedPath
+}
+
+/**
+ * 将重定向路径还原成带前缀的路径
+ * @param parentPath - 父路由路径
+ * @param redirectPath - 用户希望访问的组件的在路由配置信息中填写的重定向路径
+ * @returns {string} 拼接后的重定向路径
+ */
+const combinationRedirect = (parentPath: string|null, redirectPath: string): string => {
+  if (parentPath === '/' || !parentPath) {
+    return redirectPath.startsWith('/') ? redirectPath :  `/${redirectPath}`
+  } else {
+    return redirectPath.startsWith('/') ? `${parentPath}${redirectPath}` :  `${parentPath}/${redirectPath}`
+  }
+}
+/**
+ * 在路由配置信息中查找用户希望访问的组件
+ * @param parentPath 父组件路径
+ * @param targetPath 用户当前访问的路径
+ * @param routeConfig 路由配置信息
+ * @returns {RouteModol|null} 路由配置信息
+ */
+function findTargetRoute (parentPath: any, targetPath: string, routeConfig: RouteModol[]): RouteModol | null  {
+  // 处理目标路径是父路由的子路由根路径， 比如 /console/management => /console/management/
+  // 使其直接找到路由配置中的重定向配置项
+  if (parentPath && parentPath === targetPath) {
+    return routeConfig.find(item => item.path === '/') || null
+  }
+  for (let i = 0; i < routeConfig.length; i++) {
+    const item = routeConfig[i]
+    const path = combinationPath(parentPath, item.path)
+    if (targetPath && switchRoute(path, targetPath)) {
+      return { ...item, path }
+    }
+  }
+  return null
+}
+
+/**
+ * 已经登录->路由处理
+ */
+function LoginHandler(props: any) {
+  const { targetRoute } = props
+  const { path } = targetRoute
+
+  if (path === '/login') {
+    return <Redirect to="/"></Redirect>
+  } else {
+    return <Route path={targetRoute.path} render={
+      props => (
+        <targetRoute.component {...props} routeConfig={targetRoute.childRoutes}/>
+      )
+    }></Route>
+  }
+}
+
+/**
+ * 未登录->路由处理
+ */
+function NotLoginHandler(props: any) {
+  const { targetRoute } = props
+  const { auth, path } = targetRoute
+  if (auth) {
+    return <Redirect to="/login"></Redirect>
+  } else {
+    return <Route path={path} render={
+      props => (
+        <targetRoute.component {...props} routeConfig={targetRoute.childRoutes}/>
+      )
+    }></Route>
+  }
+}
+
+const mapStateToProps = (state: RootState) => {
+  const { permission } = state
+  return {
+    permission
+  }
+}
+
+const mapDispatchToProps = (dispatch: Dispatch<AnyAction>) => {
+  return {
+      check: () => {
+          dispatch(checkPermission())
+      }
+
+  }
+}
+const connector = connect(mapStateToProps, mapDispatchToProps)
+export default connector(NavigationGuards)
+
+export {
+  combinationPath
+}
+

src/router/routes.ts

@@ -0,0 +1,143 @@
+/**路由配置信息 */
+
+// 重定向的写法只能是
+// {
+//   path: '/',
+//   redirect: '/console'
+// }
+
+import AsyncModuleLoader from "@/components/AsyncModuleLoader/index"
+import { RouteModol } from '@/types/router'
+export const routesConfig: RouteModol[] = [
+  {
+    path: '/',
+    redirect: '/console'
+  },
+  {
+    path: '/login',
+    component: AsyncModuleLoader(() => import('@/pages/Login')),
+    auth: false
+  },
+  {
+    path: '/console',
+    component: AsyncModuleLoader(() => import('@/layout/NavSide')),
+    auth: true,
+    childRoutes: [
+      {
+        path: '/',
+        redirect: '/dashboard'
+      },
+      {
+        path: 'dashboard',
+        component: AsyncModuleLoader(() => import('@/pages/Dashboard')),
+        auth: true, // 需要登录才可以访问
+        menuConfig: {
+          icon: 'chalkboard',
+          title: '待办事项',
+          isTop: true,
+          sort: 1
+        }
+      },
+      {
+        path: 'contract',
+        component: AsyncModuleLoader(() => import('@/pages/Contract')),
+        auth: true,
+        menuConfig: {
+          icon: 'cogs',
+          title: '合同管理',
+          isTop: true,
+          sort: 2
+        }
+      },
+      {
+        path: 'safe',
+        component: AsyncModuleLoader(() => import('@/pages/Safe')),
+        auth: true,
+        menuConfig: {
+          icon: 'user-cog',
+          title: '安全巡检',
+          isTop: true,
+          sort: 3
+        }
+      },
+      {
+        path: 'quality',
+        component: AsyncModuleLoader(() => import('@/pages/Quality')),
+        auth: true,
+        menuConfig: {
+          icon: 'toolbox',
+          title: '质量巡检',
+          isTop: true,
+          sort: 4
+        }
+      },
+      {
+        path: 'management',
+        component: AsyncModuleLoader(() => import('@/pages/Management')),
+        auth: true,
+        menuConfig: {
+          icon: 'cogs',
+          title: '项目设置',
+          isTop: false
+        },
+        childRoutes: [
+          {
+            path: '/',
+            redirect: '/info'
+          },
+          {
+            path: 'info',
+            component: AsyncModuleLoader(() => import('@/pages/Management/Info')),
+            auth: true,
+            menuConfig: {
+              title: '项目信息'
+            }
+          },
+          {
+            path: 'setting',
+            component: AsyncModuleLoader(() => import('@/pages/Management/Setting')),
+            auth: true,
+            menuConfig: {
+              title: '账号设置'
+            }
+          },
+          {
+            path: 'tender-data',
+            component: AsyncModuleLoader(() => import('@/pages/Management/Tender')),
+            auth: true,
+            menuConfig: {
+              title: '标段管理'
+            }
+          }
+        ]
+      },
+
+      {
+        path: 'account',
+        component: AsyncModuleLoader(() => import('@/pages/Account')),
+        childRoutes: [
+          {
+            path: 'info',
+            component:AsyncModuleLoader(() => import('@/pages/Account/Information')),
+            auth: true
+          },
+          {
+            path: 'safe',
+            component:AsyncModuleLoader(() => import('@/pages/Account/Safe')),
+            auth: true
+          },
+          {
+            path: 'manual',
+            component:AsyncModuleLoader(() => import('@/pages/Account/Manual')),
+            auth: true
+          }
+        ]
+      }
+    ]
+  },
+  {
+    path: '/404',
+    component: AsyncModuleLoader(() => import('@/pages/404')),
+    auth: false
+  }
+]

src/serviceWorker.ts

@@ -0,0 +1,151 @@
+// eslint-disable-next-line
+
+// This optional code is used to register a service worker.
+// register() is not called by default.
+
+// This lets the app load faster on subsequent visits in production, and gives
+// it offline capabilities. However, it also means that developers (and users)
+// will only see deployed updates on subsequent visits to a page, after all the
+// existing tabs open on the page have been closed, since previously cached
+// resources are updated in the background.
+
+// To learn more about the benefits of this model and instructions on how to
+// opt-in, read https://bit.ly/CRA-PWA
+
+const isLocalhost = Boolean(
+  window.location.hostname === 'localhost' ||
+    // [::1] is the IPv6 localhost address.
+    window.location.hostname === '[::1]' ||
+    // 127.0.0.0/8 are considered localhost for IPv4.
+    window.location.hostname.match(
+      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
+    )
+);
+
+type Config = {
+  onSuccess?: (registration: ServiceWorkerRegistration) => void;
+  onUpdate?: (registration: ServiceWorkerRegistration) => void;
+};
+
+export function register(config?: Config) {
+  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
+    // The URL constructor is available in all browsers that support SW.
+    const publicUrl = new URL(
+      process.env.PUBLIC_URL,
+      window.location.href
+    );
+    if (publicUrl.origin !== window.location.origin) {
+      // Our service worker won't work if PUBLIC_URL is on a different origin
+      // from what our page is served on. This might happen if a CDN is used to
+      // serve assets; see https://github.com/facebook/create-react-app/issues/2374
+      return;
+    }
+
+    window.addEventListener('load', () => {
+      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
+
+      if (isLocalhost) {
+        // This is running on localhost. Let's check if a service worker still exists or not.
+        checkValidServiceWorker(swUrl, config);
+
+        // Add some additional logging to localhost, pointing developers to the
+        // service worker/PWA documentation.
+        navigator.serviceWorker.ready.then(() => {
+          console.log(
+            'This web app is being served cache-first by a service ' +
+              'worker. To learn more, visit https://bit.ly/CRA-PWA'
+          );
+        });
+      } else {
+        // Is not localhost. Just register service worker
+        registerValidSW(swUrl, config);
+      }
+    });
+  }
+}
+
+function registerValidSW(swUrl: string, config?: Config) {
+  navigator.serviceWorker
+    .register(swUrl)
+    .then(registration => {
+      registration.onupdatefound = () => {
+        const installingWorker = registration.installing;
+        if (installingWorker == null) {
+          return;
+        }
+        installingWorker.onstatechange = () => {
+          if (installingWorker.state === 'installed') {
+            if (navigator.serviceWorker.controller) {
+              // At this point, the updated precached content has been fetched,
+              // but the previous service worker will still serve the older
+              // content until all client tabs are closed.
+              console.log(
+                'New content is available and will be used when all ' +
+                  'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
+              );
+
+              // Execute callback
+              if (config && config.onUpdate) {
+                config.onUpdate(registration);
+              }
+            } else {
+              // At this point, everything has been precached.
+              // It's the perfect time to display a
+              // "Content is cached for offline use." message.
+              console.log('Content is cached for offline use.');
+
+              // Execute callback
+              if (config && config.onSuccess) {
+                config.onSuccess(registration);
+              }
+            }
+          }
+        };
+      };
+    })
+    .catch(error => {
+      console.error('Error during service worker registration:', error);
+    });
+}
+
+function checkValidServiceWorker(swUrl: string, config?: Config) {
+  // Check if the service worker can be found. If it can't reload the page.
+  fetch(swUrl, {
+    headers: { 'Service-Worker': 'script' }
+  })
+    .then(response => {
+      // Ensure service worker exists, and that we really are getting a JS file.
+      const contentType = response.headers.get('content-type');
+      if (
+        response.status === 404 ||
+        (contentType != null && contentType.indexOf('javascript') === -1)
+      ) {
+        // No service worker found. Probably a different app. Reload the page.
+        navigator.serviceWorker.ready.then(registration => {
+          registration.unregister().then(() => {
+            window.location.reload();
+          });
+        });
+      } else {
+        // Service worker found. Proceed as normal.
+        registerValidSW(swUrl, config);
+      }
+    })
+    .catch(() => {
+      console.log(
+        'No internet connection found. App is running in offline mode.'
+      );
+    });
+}
+
+export function unregister() {
+  if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.ready
+      .then(registration => {
+        registration.unregister();
+      })
+      .catch(error => {
+        console.error(error.message);
+      });
+  }
+}

src/setupTests.ts

@@ -0,0 +1,6 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+// eslint-disable-next-line
+import '@testing-library/jest-dom/extend-expect';

src/store/index.ts

@@ -0,0 +1,9 @@
+import { applyMiddleware, createStore } from 'redux'
+import thunk from 'redux-thunk'
+import rootReducer from './reducers'
+const store = createStore(
+  rootReducer,
+  applyMiddleware(thunk)
+)
+
+export default store

src/store/modules/permission/index.ts

@@ -0,0 +1,52 @@
+import { getUserInfo } from './../../../utils/common/user'
+import { CHECK_PERMISSION, DEL_PERMISSION, iPermissionState, PermissionAction, SAVE_PERMISSION } from './types'
+
+const initState: iPermissionState = {
+  isLogin: false,
+  permission: ''
+}
+
+// reducer
+export function updatePermissionReducer(state = initState, action: PermissionAction): iPermissionState {
+  switch (action.type) {
+    case SAVE_PERMISSION:
+      return { ...state, ...action.payload }
+      break
+    case DEL_PERMISSION:
+      return initState
+      break
+    case CHECK_PERMISSION:
+      return { ...state, ...action.payload }
+      break
+    default:
+      return state
+      break
+  }
+}
+
+// action
+export function savePermission(payload: iPermissionState): PermissionAction{
+  return {
+    type: SAVE_PERMISSION,
+    payload
+  }
+}
+
+export function checkPermission(): PermissionAction {
+  const userInfo = getUserInfo()
+  console.log(userInfo)
+
+  return {
+    type: CHECK_PERMISSION,
+    payload: {
+      isLogin: userInfo?.Id ? true : false,
+      permission: []
+    }
+  }
+}
+
+export function delPermission(): PermissionAction {
+  return {
+    type: DEL_PERMISSION
+  }
+}

src/store/modules/permission/types.ts

@@ -0,0 +1,28 @@
+// state
+export type iPermissionState = {
+  isLogin: boolean
+  permission: string | []
+}
+
+
+// action
+export const SAVE_PERMISSION = 'save_permission'
+export const DEL_PERMISSION = 'del_permission'
+export const CHECK_PERMISSION = 'check_permission'
+
+interface SavePermissionAction {
+  type: typeof SAVE_PERMISSION
+  payload: iPermissionState
+}
+
+interface DelPermissionAction {
+  type: typeof DEL_PERMISSION
+}
+
+
+interface CheckPermissionAction {
+  type: typeof CHECK_PERMISSION
+  payload: iPermissionState
+}
+
+export type PermissionAction = SavePermissionAction | DelPermissionAction | CheckPermissionAction

src/store/modules/user/index.ts

@@ -0,0 +1,41 @@
+import { delUserInfo, saveUserInfo } from './../../../utils/common/user'
+import { DEL_USER_INFO, iUserInfo, SAVE_USER_INFO, UserInfoActionTypes } from './types'
+const initState = {
+  Id: '',
+  ProjectId: '',
+  Account: '',
+  Name: '',
+  Company: '',
+  Role: '',
+  Mobile: '',
+  Telephone: '',
+  Csrf: ''
+}
+// reducer
+export function userInfoReducer(state = initState, action: UserInfoActionTypes): iUserInfo {
+  switch (action.type) {
+    case SAVE_USER_INFO:
+      saveUserInfo(action.payload)
+      return { ...state, ...action.payload }
+      break
+    case DEL_USER_INFO:
+      delUserInfo
+      return { ...state, ...initState }
+    default:
+      return state
+  }
+}
+
+// action
+export function updateUserInfo(userInfo: iUserInfo): UserInfoActionTypes{
+  return {
+    type: SAVE_USER_INFO,
+    payload: userInfo
+  }
+}
+
+export function deleteUserInfo() {
+  return {
+    type: DEL_USER_INFO
+  }
+}

src/store/modules/user/types.ts

@@ -0,0 +1,28 @@
+// state
+export interface iUserInfo {
+  Id: string
+  ProjectId: string
+  Account: string
+  Name: string
+  Company: string
+  Role: string
+  Mobile?: string
+  Telephone?: string
+  Csrf?: string
+}
+
+// action
+export const SAVE_USER_INFO = 'SAVE_USER_INFO'
+export const DEL_USER_INFO = 'DEL_USER_INFO'
+
+
+interface SaveUserInfoAction {
+  type: typeof SAVE_USER_INFO
+  payload: iUserInfo
+}
+
+interface DelUserInfoAction {
+  type: typeof DEL_USER_INFO
+}
+
+export type UserInfoActionTypes = SaveUserInfoAction | DelUserInfoAction

src/store/reducers.ts

@@ -0,0 +1,10 @@
+import { combineReducers } from "redux"
+import { updatePermissionReducer } from './modules/permission'
+import { userInfoReducer } from './modules/user'
+const rootReducer = combineReducers({
+  userInfo: userInfoReducer,
+  permission: updatePermissionReducer
+})
+
+export default rootReducer
+export type RootState = ReturnType<typeof rootReducer>

src/types/login.ts

@@ -0,0 +1,20 @@
+interface iLoginProps {
+  history: any
+}
+
+interface iRetrieveFormProps {
+  visible: boolean;
+  setVisible: Function;
+}
+
+interface iFromValues {
+  code: string;
+  account: string;
+  passowrd: string;
+}
+export {
+  iLoginProps,
+  iRetrieveFormProps,
+  iFromValues
+};
+

src/types/request.d.ts

@@ -0,0 +1,33 @@
+export interface AxiosRequest {
+  baseURL?: string;
+  url: string;
+  data?: any;
+  params?: any;
+  method?: Method;
+  headers?: any;
+  timeout?: number;
+  responseType?: ResponseType;
+}
+
+export interface AxiosResponse {
+  data: any;
+  headers: any;
+  request?: any;
+  status: number;
+  statusText: string;
+  config: AxiosRequest;
+}
+
+export interface PendingType {
+  url?: string;
+  method?: Method;
+  params: any;
+  data: any;
+  cancel: Function;
+}
+
+export interface ResponseData {
+  code: number;
+  msg: string;
+  data?: any;
+}

src/types/router.ts

@@ -0,0 +1,43 @@
+import { RouteProps } from 'react-router'
+import { iPermissionState } from './../store/modules/permission/types'
+interface RouteModol {
+  path: string;
+  component?: Object;
+  auth?: boolean; // 登录鉴权
+  childRoutes?: RouteModol[];
+  redirect?: string;
+  menuConfig?: iMenu;
+}
+
+interface iNavSide extends RouteProps {
+  childRoutes: RouteModol[]
+}
+interface iMenu {
+  icon?: string;
+  title: string;
+  isTop?: boolean;
+  sort?: number;
+}
+
+interface iMenuItem {
+  path: string,
+  icon: string,
+  title: string,
+  isTop: boolean,
+  sort?: number;
+}
+interface NavigationGuardsProps extends RouteProps {
+  routeConfig: RouteModol[];
+  match?: any;
+  location?: any
+  permission: iPermissionState
+  check: () => void
+}
+export {
+  RouteModol,
+  NavigationGuardsProps,
+  iNavSide,
+  iMenu,
+  iMenuItem
+}
+

src/utils/common/request.ts

@@ -0,0 +1,113 @@
+/**
+ * 网络请求配置
+ */
+import { PendingType, ResponseData } from '@/types/request'
+import CONSTS from '@/utils/consts'
+import history from '@/utils/history'
+import { storage } from '@/utils/util'
+import { message } from 'antd'
+import axios, { AxiosRequestConfig, AxiosResponse } from 'axios'
+const pending: Array<PendingType> = []
+const removePending = (config: AxiosRequestConfig) => {
+  for (const key in pending) {
+    const item: number = +key
+    const list: PendingType = pending[key]
+    // 当前请求在数组中存在时执行函数体
+    if (list.url === config.url && list.method === config.method && JSON.stringify(list.params) === JSON.stringify(config.params) && JSON.stringify(list.data) === JSON.stringify(config.data)) {
+        // 执行取消操作
+        list.cancel('操作太频繁，请稍后再试')
+        // 从数组中移除记录
+        pending.splice(item, 1)
+    }
+}
+}
+const service = axios.create({
+  baseURL: process.env.NODE_ENV === 'development' ? CONSTS.BASE_URL.DEV : CONSTS.BASE_URL.PROD,
+  timeout: 5000,
+  withCredentials: true
+})
+
+/**
+ * request 拦截器
+ */
+service.interceptors.request.use(
+  request => {
+    removePending(request)
+    request.cancelToken = new axios.CancelToken(func => {
+      pending.push({ url: request.url, method: request.method, params: request.params, data: request.data, cancel: func })
+    })
+    if (request?.method !== 'get') {
+      request.headers['X-CSRF-Token'] = storage.get('csrf_token')
+    }
+    return request
+  },
+  err => {
+    console.log(err)
+
+    return Promise.reject(err)
+  }
+)
+
+/**
+ * response 拦截器
+ */
+service.interceptors.response.use(
+  (response: AxiosResponse) => {
+    removePending(response.config)
+    const data: ResponseData = response.data
+    // 对Code不等于Success进行message提示
+    if (data.code !== CONSTS.RET_CODE.SUCCESS) {
+      message.error(data.msg)
+      switch (data.code) {
+        case 1:
+          history.push('/login')
+          break
+        default:
+          break
+      }
+    }
+    if (response.config.method?.toLocaleUpperCase() === 'GET') {
+      const token = response?.headers['x-csrf-token']
+      storage.set('csrf_token', token)
+    }
+    return response
+  },
+  error => {
+    const response = error.response
+    const config = error.config
+    const { COUNT: RETRY_COUNT, DELAY: RETRY_DELAY } = CONSTS.RETRY
+    if (config && RETRY_COUNT) {
+      // 设置一个静态属性追踪重试次数
+      config.__retryCount = config.__retryCount || 0
+
+      // 重试次数已用完
+      if (config.__retryCount >= RETRY_COUNT) {
+        return Promise.reject(response)
+      }
+      config.__retryCount++
+
+      // 利用promise处理请求间隔
+      const backoff = new Promise(resolve => {
+        setTimeout(() => {
+          resolve()
+        }, RETRY_DELAY | 1)
+      })
+      // 重新发起请求
+      return backoff.then(() => service(config))
+    }
+    return Promise.reject(response)
+  }
+)
+
+
+export default {
+  get(url: string, params?: any) {
+    return service.get(url, { params })
+  },
+  post(url: string, data?: any) {
+    return service.post(url, data )
+  },
+  del(url: string, data?: any) {
+    return service.delete(url, data)
+  }
+}

src/utils/common/user.ts

@@ -0,0 +1,34 @@
+import { storage } from '@/utils/util'
+import { iUserInfo } from './../../store/modules/user/types'
+const USER_INFO = 'user_info' // 用户个人信息
+
+/**
+ * 保存用户信息到本地存储中
+ * @param {Object} userInfo - 用户信息
+ */
+export const saveUserInfo = (userInfo: iUserInfo): void => {
+  storage.set(USER_INFO, userInfo)
+}
+
+/**
+ * 获取用户信息
+ * @returns {iUserInfo} 用户信息
+ */
+export const getUserInfo = (): iUserInfo => {
+  return storage.get(USER_INFO)
+}
+
+/**
+ * 删除用户信息
+ */
+export const delUserInfo = (): void => {
+  storage.del(USER_INFO)
+}
+
+/**
+ * 用户注销
+ */
+export const logout = async () => {
+  delUserInfo()
+
+}

src/utils/consts.ts

@@ -0,0 +1,15 @@
+export default {
+  // 基础设置
+  VERSION: '1.0.0',
+  BASE_URL: {
+    DEV: '',
+    PROD: ''
+  },
+  TOKEN_API: '', // 获取token
+  TOKEN_INVALID_CODE: [2, 3], // 接口返回码如果是2/3 则表明token过期或无效 需要自动刷新token
+  TOKEN_WHITE_LIST: ['/api/login'], // 不需要设置token的白名单
+  RET_CODE: { SUCCESS: 0, FAIL: 1, TOKEN_UNDEFINED: 19, TOKEN_EXPIRED: 2 }, // 接口返回状态码
+  RETRY: {COUNT: 3, DELAY: 1000} // 请求重试次数/间隙
+
+}
+

src/utils/history.ts

@@ -0,0 +1,3 @@
+const createHistory = require('history').createBrowserHistory
+
+export default createHistory()

src/utils/util.ts

@@ -0,0 +1,42 @@
+function getCookie(name: string) {
+  const prefix = name + "="
+  const start = document.cookie.indexOf(prefix)
+
+  if (start === -1) {
+      return null
+  }
+
+  let end = document.cookie.indexOf(";", start + prefix.length)
+  if (end === -1) {
+      end = document.cookie.length
+  }
+
+  const value = document.cookie.substring(start + prefix.length, end)
+  return unescape(value)
+}
+
+// 本地存储封装
+const storage = {
+  get(key: string) {
+    const val:string|null = localStorage.getItem(key)
+    if (val) {
+      return JSON.parse(val)
+    }
+    return null
+  },
+  set(key: string, value: any) {
+    if (value) {
+      value = JSON.stringify(value)
+    }
+    localStorage.setItem(key, value)
+  },
+  del(key: string) {
+    localStorage.removeItem(key)
+  }
+}
+
+export {
+  getCookie,
+  storage
+}
+

tsconfig.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": false,
+    "noEmit": true,
+    "jsx": "react",
+    "baseUrl": "./src",
+    "paths": {
+      "@/*": ["./*"],
+      "components/*": ["./src/components/*"],
+      "store/*": ["./src/store/*"],
+      "pages/*": ["./src/pages/*"],
+      "router/*": ["./src/router/*"],
+      "utils/*": ["./src/utils/*"]
+    }
+  },
+  "include": ["src"]
+}