repos init

.babelrc

+{
+  "presets":["react-app"],
+  "plugins": [
+    ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }],
+    ["transform-decorators-legacy"]
+  ]
+}
\ No newline at end of file

.gitignore

+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+/.idea
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

README.md

-computingPlatform
\ No newline at end of file

config/env.js

+'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
+var 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/facebookincubator/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/facebookincubator/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,
+      }
+    );
+  // 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/jest/cssTransform.js

+'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

+'use strict';
+
+const path = require('path');
+
+// 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) {
+    return `module.exports = ${JSON.stringify(path.basename(filename))};`;
+  },
+};

config/paths.js

+'use strict';
+
+const path = require('path');
+const fs = require('fs');
+const url = require('url');
+
+// Make sure any symlinks in the project folder are resolved:
+// https://github.com/facebookincubator/create-react-app/issues/637
+const appDirectory = fs.realpathSync(process.cwd());
+const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
+
+const envPublicUrl = process.env.PUBLIC_URL;
+
+function ensureSlash(path, needsSlash) {
+  const hasSlash = path.endsWith('/');
+  if (hasSlash && !needsSlash) {
+    return path.substr(path, path.length - 1);
+  } else if (!hasSlash && needsSlash) {
+    return `${path}/`;
+  } else {
+    return path;
+  }
+}
+
+const getPublicUrl = appPackageJson =>
+  envPublicUrl || require(appPackageJson).homepage;
+
+// 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.
+function getServedPath(appPackageJson) {
+  const publicUrl = getPublicUrl(appPackageJson);
+  const servedUrl =
+    envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/');
+  return ensureSlash(servedUrl, true);
+}
+
+// config after eject: we're in ./config/
+module.exports = {
+  dotenv: resolveApp('.env'),
+  appBuild: resolveApp('build'),
+  appPublic: resolveApp('public'),
+  appHtml: resolveApp('public/index.html'),
+  appIndexJs: resolveApp('src/index.js'),
+  appPackageJson: resolveApp('package.json'),
+  appSrc: resolveApp('src'),
+  yarnLockFile: resolveApp('yarn.lock'),
+  testsSetup: resolveApp('src/setupTests.js'),
+  appNodeModules: resolveApp('node_modules'),
+  publicUrl: getPublicUrl(resolveApp('package.json')),
+  servedPath: getServedPath(resolveApp('package.json')),
+};

config/polyfills.js

+'use strict';
+
+if (typeof Promise === 'undefined') {
+  // Rejection tracking prevents a components issue where React gets into an
+  // inconsistent state due to an error, but it gets swallowed by a Promise,
+  // and the user has no idea what causes React's erratic future behavior.
+  require('promise/lib/rejection-tracking').enable();
+  window.Promise = require('promise/lib/es6-extensions.js');
+}
+
+// fetch() polyfill for making API calls.
+require('whatwg-fetch');
+
+// Object.assign() is commonly used with React.
+// It will use the native implementation if it's present and isn't buggy.
+Object.assign = require('object-assign');
+
+// In tests, polyfill requestAnimationFrame since jsdom doesn't provide it yet.
+// We don't polyfill it in the browser--this is user's responsibility.
+if (process.env.NODE_ENV === 'test') {
+  require('raf').polyfill(global);
+}

config/webpackDevServer.config.js

+'use strict';
+
+const errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware');
+const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMiddleware');
+const ignoredFiles = require('react-dev-utils/ignoredFiles');
+const config = require('./webpack.config.dev');
+const paths = require('./paths');
+
+const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
+const host = process.env.HOST || '0.0.0.0';
+
+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/facebookincubator/create-react-app/issues/2271
+    // https://github.com/facebookincubator/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="shortcut 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,
+    // By default files from `contentBase` will not trigger a page reload.
+    watchContentBase: true,
+    // Enable hot reloading server. It will provide /sockjs-node/ 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,
+    // It is important to tell WebpackDevServer to use the same "root" path
+    // as we specified in the config. In development, we always serve from /.
+    publicPath: config.output.publicPath,
+    // WebpackDevServer is noisy by default so we emit custom message instead
+    // by listening to the compiler events with `compiler.plugin` calls above.
+    quiet: true,
+    // Reportedly, this avoids CPU overload on some systems.
+    // https://github.com/facebookincubator/create-react-app/issues/293
+    // src/node_modules is not ignored to support absolute imports
+    // https://github.com/facebookincubator/create-react-app/issues/1065
+    watchOptions: {
+      ignored: ignoredFiles(paths.appSrc),
+    },
+    // Enable HTTPS if the HTTPS environment variable is set to 'true'
+    https: protocol === 'https',
+    host: host,
+    overlay: false,
+    historyApiFallback: {
+      // Paths with dots should still use the history fallback.
+      // See https://github.com/facebookincubator/create-react-app/issues/387.
+      disableDotRule: true,
+    },
+    public: allowedHost,
+    proxy,
+    before(app) {
+      // This lets us open files from the runtime error overlay.
+      app.use(errorOverlayMiddleware());
+      // 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/facebookincubator/create-react-app/issues/2272#issuecomment-302832432
+      app.use(noopServiceWorkerMiddleware());
+    },
+  };
+};

package.json

+{
+  "name": "syzh",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@antv/data-set": "^0.8.9",
+    "@babel/polyfill": "^7.2.5",
+    "animate.css": "^3.6.1",
+    "antd": "^3.6.2",
+    "autoprefixer": "7.1.6",
+    "axios": "^0.18.0",
+    "babel-core": "6.26.0",
+    "babel-eslint": "7.2.3",
+    "babel-jest": "20.0.3",
+    "babel-loader": "7.1.2",
+    "babel-preset-react-app": "^3.1.1",
+    "babel-runtime": "6.26.0",
+    "bizcharts": "^3.1.10",
+    "bodymovin": "^4.13.0",
+    "case-sensitive-paths-webpack-plugin": "2.1.1",
+    "chalk": "1.1.3",
+    "css-loader": "0.28.7",
+    "dotenv": "4.0.0",
+    "dotenv-expand": "4.2.0",
+    "draft-js": "^0.10.5",
+    "draftjs-to-html": "^0.8.4",
+    "draftjs-to-markdown": "^0.5.1",
+    "eslint": "4.10.0",
+    "eslint-config-react-app": "^2.1.0",
+    "eslint-loader": "1.9.0",
+    "eslint-plugin-flowtype": "2.39.1",
+    "eslint-plugin-import": "2.8.0",
+    "eslint-plugin-jsx-a11y": "5.1.1",
+    "eslint-plugin-react": "7.4.0",
+    "extract-text-webpack-plugin": "3.0.2",
+    "file-loader": "1.1.5",
+    "fs-extra": "3.0.1",
+    "gsap": "^2.0.1",
+    "html-to-draftjs": "^1.4.0",
+    "html-webpack-plugin": "2.29.0",
+    "jsme-react": "^0.0.9",
+    "mobx": "^5.0.3",
+    "mobx-react": "^5.2.3",
+    "molstar-react": "^0.5.0",
+    "nprogress": "^0.2.0",
+    "object-assign": "4.1.1",
+    "postcss-flexbugs-fixes": "3.2.0",
+    "postcss-loader": "2.0.8",
+    "promise": "8.0.1",
+    "raf": "3.4.0",
+    "react": "^18.1.0",
+    "react-dev-utils": "^5.0.1",
+    "react-dom": "^16.4.1",
+    "react-draft-wysiwyg": "^1.12.13",
+    "react-loadable": "^5.4.0",
+    "react-router-dom": "^4.3.1",
+    "react-scripts": "^3.4.4",
+    "resolve": "1.6.0",
+    "screenfull": "^3.3.2",
+    "shufflejs": "^5.1.2",
+    "style-loader": "0.19.0",
+    "sw-precache-webpack-plugin": "0.11.4",
+    "url-loader": "0.6.2",
+    "webpack": "3.8.1",
+    "webpack-dev-server": "2.9.4",
+    "webpack-manifest-plugin": "1.3.2",
+    "whatwg-fetch": "2.0.3"
+  },
+  "scripts": {
+    "start": "node scripts/start.js",
+    "build": "node scripts/build.js",
+    "test": "node scripts/test.js --env=jsdom"
+  },
+  "jest": {
+    "collectCoverageFrom": [
+      "src/**/*.{js,jsx,mjs}"
+    ],
+    "setupFiles": [
+      "<rootDir>/config/polyfills.js"
+    ],
+    "testMatch": [
+      "<rootDir>/src/**/__tests__/**/*.{js,jsx,mjs}",
+      "<rootDir>/src/**/?(*.)(spec|test).{js,jsx,mjs}"
+    ],
+    "testEnvironment": "node",
+    "testURL": "http://localhost",
+    "transform": {
+      "^.+\\.(js|jsx|mjs)$": "<rootDir>/node_modules/babel-jest",
+      "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
+      "^(?!.*\\.(js|jsx|mjs|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
+    },
+    "transformIgnorePatterns": [
+      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$"
+    ],
+    "moduleNameMapper": {
+      "^react-native$": "react-native-web"
+    },
+    "moduleFileExtensions": [
+      "web.js",
+      "js",
+      "json",
+      "web.jsx",
+      "jsx",
+      "node",
+      "mjs"
+    ]
+  },
+  "babel": {
+    "presets": [
+      "react-app"
+    ]
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "devDependencies": {
+    "babel-plugin-import": "^1.8.0",
+    "babel-plugin-transform-decorators-legacy": "^1.3.5",
+    "qs": "^6.10.3"
+  },
+  "homepage": "."
+}

public/index.html

+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="theme-color" content="#000000">
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <title>雅深智慧</title>
+  </head>
+  <body>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+    <div id="root"></div>
+  </body>
+</html>

public/manifest.json

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

scripts/build.js

+'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('chalk');
+const fs = require('fs-extra');
+const webpack = require('webpack');
+const config = require('../config/webpack.config.prod');
+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;
+
+// Warn and crash if required files are missing
+if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
+  process.exit(1);
+}
+
+// First, read the current file sizes in build directory.
+// This lets us display how much they changed later.
+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.publicUrl;
+      const publicPath = config.output.publicPath;
+      const buildFolder = path.relative(process.cwd(), paths.appBuild);
+      printHostingInstructions(
+        appPackage,
+        publicUrl,
+        publicPath,
+        buildFolder,
+        useYarn
+      );
+    },
+    err => {
+      console.log(chalk.red('Failed to compile.\n'));
+      printBuildError(err);
+      process.exit(1);
+    }
+  );
+
+// Create the production build and print the deployment instructions.
+function build(previousFileSizes) {
+  console.log('Creating an optimized production build...');
+
+  let compiler = webpack(config);
+  return new Promise((resolve, reject) => {
+    compiler.run((err, stats) => {
+      if (err) {
+        return reject(err);
+      }
+      const messages = formatWebpackMessages(stats.toJson({}, 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

+'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('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 config = require('../config/webpack.config.dev');
+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('http://bit.ly/2mwWSwH')}`);
+  console.log();
+}
+
+// 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.
+choosePort(HOST, DEFAULT_PORT)
+  .then(port => {
+    if (port == null) {
+      // We have not found a port.
+      return;
+    }
+    const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
+    const appName = require(paths.appPackageJson).name;
+    const urls = prepareUrls(protocol, HOST, port);
+    // Create a webpack compiler that is configured with custom messages.
+    const compiler = createCompiler(webpack, config, appName, urls, useYarn);
+    // Load proxy config
+    const proxySetting = require(paths.appPackageJson).proxy;
+    const proxyConfig = prepareProxy(proxySetting, paths.appPublic);
+    // Serve webpack assets generated by the compiler over a web sever.
+    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();
+      }
+      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();
+      });
+    });
+  })
+  .catch(err => {
+    if (err && err.message) {
+      console.log(err.message);
+    }
+    process.exit(1);
+  });

scripts/test.js

+'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');
+let argv = process.argv.slice(2);
+
+// Watch unless on CI or in coverage mode
+if (!process.env.CI && argv.indexOf('--coverage') < 0) {
+  argv.push('--watch');
+}
+
+
+jest.run(argv);

src/App.css

+body {
+    margin: 0;
+    padding: 0;
+    font-family: sans-serif;
+}
+/*HeaderBar*/
+.trigger{
+    font-size: 18px;
+    line-height: 64px;
+    cursor: pointer;
+}
+.trigger:hover{
+    color: #1890ff;
+}
+.header-ul{
+    display: flex;
+    width: 200px;
+}
+.header-ul li {
+    flex-grow: 1;
+    text-align: center;
+}
+.header-ul>li img{
+    width: 35px;
+    height: 35px;
+    border-radius: 100px;
+}
+.menu{
+    line-height: 2em;
+    padding: 0 10px;
+}
+.menu-group li{
+    padding: 0 24px;
+    line-height: 2em;
+}
+
+#page .card-item{
+    margin-bottom: 10px;
+    border-radius: 3px;
+    line-height: 2em;
+}
+#page .card-ul{
+    list-style: inside circle;
+}
+
+/*GalleryDemo*/
+.aspect {
+    position: relative;
+    width: 100%;
+    height: 0;
+    padding-bottom: 100%;
+    overflow: hidden;
+}
+.aspect--1x2{
+    padding-bottom: calc(112.5% + 8px);
+}
+.aspect--1x1 {
+    padding-bottom: 56.25%;
+    /*padding的百分比是按父级的width计算的*/
+}
+.aspect--2x1 {
+    padding-bottom: 28.125%;
+}
+.aspect__inner{
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+}
+.vertical-center-modal {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.vertical-center-modal .ant-modal {
+    top: 0;
+}
+
+/*美化webkit内核滚动条*/
+  ::-webkit-scrollbar {
+      width: 8px;
+      height: 8px;
+  }
+::-webkit-scrollbar-thumb {
+    background-color: #777;
+}
+
+/*更改antd的primary button样式*/
+.ant-btn-primary{
+    background: #36bafb;
+    border-color: #36bafb;
+}
\ No newline at end of file

src/App.js

+import React, {Component} from 'react';
+import PrivateRoute from './components/PrivateRoute'
+import {Route,Switch} from 'react-router-dom'
+import Login from './routes/Login/index'
+import Docking from './routes/Home/Docking/index'
+// import Login from './routes/Login2/index'
+import Index from './routes/Index/index'
+import './App.css'
+import './assets/font/iconfont.css'
+
+
+class App extends Component {
+  render() {
+    return (
+      <Switch>
+        <Route path='/login' component={Docking}/>
+        <PrivateRoute path='/' component={Index}/>
+      </Switch>
+    )
+  }
+}
+
+export default App;

src/App.test.js

+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<App />, div);
+  ReactDOM.unmountComponentAtNode(div);
+});

src/assets/font/demo.css

+*{margin: 0;padding: 0;list-style: none;}
+/*
+KISSY CSS Reset
+理念：1. reset 的目的不是清除浏览器的默认样式，这仅是部分工作。清除和重置是紧密不可分的。
+2. reset 的目的不是让默认样式在所有浏览器下一致，而是减少默认样式有可能带来的问题。
+3. reset 期望提供一套普适通用的基础样式。但没有银弹，推荐根据具体需求，裁剪和修改后再使用。
+特色：1. 适应中文；2. 基于最新主流浏览器。
+维护：玉伯<lifesinger@gmail.com>, 正淳<ragecarrier@gmail.com>
+ */
+
+/** 清除内外边距 **/
+body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
+dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
+pre, /* text formatting elements 文本格式元素 */
+form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */
+th, td /* table elements 表格元素 */ {
+  margin: 0;
+  padding: 0;
+}
+
+/** 设置默认字体 **/
+body,
+button, input, select, textarea /* for ie */ {
+  font: 12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif;
+}
+h1, h2, h3, h4, h5, h6 { font-size: 100%; }
+address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */
+code, kbd, pre, samp { font-family: courier new, courier, monospace; } /* 统一等宽字体 */
+small { font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 */
+
+/** 重置列表元素 **/
+ul, ol { list-style: none; }
+
+/** 重置文本格式元素 **/
+a { text-decoration: none; }
+a:hover { text-decoration: underline; }
+
+
+/** 重置表单元素 **/
+legend { color: #000; } /* for ie6 */
+fieldset, img { border: 0; } /* img 搭车：让链接里的 img 无边框 */
+button, input, select, textarea { font-size: 100%; } /* 使得表单元素在 ie 下能继承字体大小 */
+/* 注：optgroup 无法扶正 */
+
+/** 重置表格元素 **/
+table { border-collapse: collapse; border-spacing: 0; }
+
+/* 清除浮动 */
+.ks-clear:after, .clear:after {
+  content: '\20';
+  display: block;
+  height: 0;
+  clear: both;
+}
+.ks-clear, .clear {
+  *zoom: 1;
+}
+
+.main {
+  padding: 30px 100px;
+width: 960px;
+margin: 0 auto;
+}
+.main h1{font-size:36px; color:#333; text-align:left;margin-bottom:30px; border-bottom: 1px solid #eee;}
+
+.helps{margin-top:40px;}
+.helps pre{
+  padding:20px;
+  margin:10px 0;
+  border:solid 1px #e7e1cd;
+  background-color: #fffdef;
+  overflow: auto;
+}
+
+.icon_lists{
+  width: 100% !important;
+
+}
+
+.icon_lists li{
+  float:left;
+  width: 100px;
+  height:180px;
+  text-align: center;
+  list-style: none !important;
+}
+.icon_lists .icon{
+  font-size: 42px;
+  line-height: 100px;
+  margin: 10px 0;
+  color:#333;
+  -webkit-transition: font-size 0.25s ease-out 0s;
+  -moz-transition: font-size 0.25s ease-out 0s;
+  transition: font-size 0.25s ease-out 0s;
+
+}
+.icon_lists .icon:hover{
+  font-size: 100px;
+}
+
+
+
+.markdown {
+  color: #666;
+  font-size: 14px;
+  line-height: 1.8;
+}
+
+.highlight {
+  line-height: 1.5;
+}
+
+.markdown img {
+  vertical-align: middle;
+  max-width: 100%;
+}
+
+.markdown h1 {
+  color: #404040;
+  font-weight: 500;
+  line-height: 40px;
+  margin-bottom: 24px;
+}
+
+.markdown h2,
+.markdown h3,
+.markdown h4,
+.markdown h5,
+.markdown h6 {
+  color: #404040;
+  margin: 1.6em 0 0.6em 0;
+  font-weight: 500;
+  clear: both;
+}
+
+.markdown h1 {
+  font-size: 28px;
+}
+
+.markdown h2 {
+  font-size: 22px;
+}
+
+.markdown h3 {
+  font-size: 16px;
+}
+
+.markdown h4 {
+  font-size: 14px;
+}
+
+.markdown h5 {
+  font-size: 12px;
+}
+
+.markdown h6 {
+  font-size: 12px;
+}
+
+.markdown hr {
+  height: 1px;
+  border: 0;
+  background: #e9e9e9;
+  margin: 16px 0;
+  clear: both;
+}
+
+.markdown p,
+.markdown pre {
+  margin: 1em 0;
+}
+
+.markdown > p,
+.markdown > blockquote,
+.markdown > .highlight,
+.markdown > ol,
+.markdown > ul {
+  width: 80%;
+}
+
+.markdown ul > li {
+  list-style: circle;
+}
+
+.markdown > ul li,
+.markdown blockquote ul > li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown > ul li p,
+.markdown > ol li p {
+  margin: 0.6em 0;
+}
+
+.markdown ol > li {
+  list-style: decimal;
+}
+
+.markdown > ol li,
+.markdown blockquote ol > li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown code {
+  margin: 0 3px;
+  padding: 0 5px;
+  background: #eee;
+  border-radius: 3px;
+}
+
+.markdown pre {
+  border-radius: 6px;
+  background: #f7f7f7;
+  padding: 20px;
+}
+
+.markdown pre code {
+  border: none;
+  background: #f7f7f7;
+  margin: 0;
+}
+
+.markdown strong,
+.markdown b {
+  font-weight: 600;
+}
+
+.markdown > table {
+  border-collapse: collapse;
+  border-spacing: 0px;
+  empty-cells: show;
+  border: 1px solid #e9e9e9;
+  width: 95%;
+  margin-bottom: 24px;
+}
+
+.markdown > table th {
+  white-space: nowrap;
+  color: #333;
+  font-weight: 600;
+
+}
+
+.markdown > table th,
+.markdown > table td {
+  border: 1px solid #e9e9e9;
+  padding: 8px 16px;
+  text-align: left;
+}
+
+.markdown > table th {
+  background: #F7F7F7;
+}
+
+.markdown blockquote {
+  font-size: 90%;
+  color: #999;
+  border-left: 4px solid #e9e9e9;
+  padding-left: 0.8em;
+  margin: 1em 0;
+  font-style: italic;
+}
+
+.markdown blockquote p {
+  margin: 0;
+}
+
+.markdown .anchor {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  margin-left: 8px;
+}
+
+.markdown .waiting {
+  color: #ccc;
+}
+
+.markdown h1:hover .anchor,
+.markdown h2:hover .anchor,
+.markdown h3:hover .anchor,
+.markdown h4:hover .anchor,
+.markdown h5:hover .anchor,
+.markdown h6:hover .anchor {
+  opacity: 1;
+  display: inline-block;
+}
+
+.markdown > br,
+.markdown > p > br {
+  clear: both;
+}
+
+
+.hljs {
+  display: block;
+  background: white;
+  padding: 0.5em;
+  color: #333333;
+  overflow-x: auto;
+}
+
+.hljs-comment,
+.hljs-meta {
+  color: #969896;
+}
+
+.hljs-string,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-strong,
+.hljs-emphasis,
+.hljs-quote {
+  color: #df5000;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-type {
+  color: #a71d5d;
+}
+
+.hljs-literal,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-attribute {
+  color: #0086b3;
+}
+
+.hljs-section,
+.hljs-name {
+  color: #63a35c;
+}
+
+.hljs-tag {
+  color: #333333;
+}
+
+.hljs-title,
+.hljs-attr,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: #795da3;
+}
+
+.hljs-addition {
+  color: #55a532;
+  background-color: #eaffea;
+}
+
+.hljs-deletion {
+  color: #bd2c00;
+  background-color: #ffecec;
+}
+
+.hljs-link {
+  text-decoration: underline;
+}
+
+pre{
+  background: #fff;
+}
+
+
+
+
+

src/assets/font/demo_fontclass.html

+
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8"/>
+    <title>IconFont</title>
+    <link rel="stylesheet" href="demo.css">
+    <link rel="stylesheet" href="iconfont.css">
+</head>
+<body>
+    <div class="main markdown">
+        <h1>IconFont 图标</h1>
+        <ul class="icon_lists clear">
+            
+                <li>
+                <i class="icon iconfont icon-fenlei"></i>
+                    <div class="name">分类</div>
+                    <div class="fontclass">.icon-fenlei</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-fenlei1"></i>
+                    <div class="name">分类</div>
+                    <div class="fontclass">.icon-fenlei1</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-shouye"></i>
+                    <div class="name">首页</div>
+                    <div class="fontclass">.icon-shouye</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-suo"></i>
+                    <div class="name">锁</div>
+                    <div class="fontclass">.icon-suo</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-shouye1"></i>
+                    <div class="name">首页</div>
+                    <div class="fontclass">.icon-shouye1</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-user"></i>
+                    <div class="name">User</div>
+                    <div class="fontclass">.icon-user</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-emiyanzhengma"></i>
+                    <div class="name">emi验证码</div>
+                    <div class="fontclass">.icon-emiyanzhengma</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-user1"></i>
+                    <div class="name">user</div>
+                    <div class="fontclass">.icon-user1</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-User"></i>
+                    <div class="name">User</div>
+                    <div class="fontclass">.icon-User</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-lajitong1"></i>
+                    <div class="name">垃圾桶</div>
+                    <div class="fontclass">.icon-lajitong1</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-yanzhengmatianchong"></i>
+                    <div class="name">验证码填充</div>
+                    <div class="fontclass">.icon-yanzhengmatianchong</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-suo1"></i>
+                    <div class="name">锁</div>
+                    <div class="fontclass">.icon-suo1</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-securityCode-b"></i>
+                    <div class="name">验证码</div>
+                    <div class="fontclass">.icon-securityCode-b</div>
+                </li>
+            
+        </ul>
+
+        <h2 id="font-class-">font-class引用</h2>
+        <hr>
+
+        <p>font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。</p>
+        <p>与unicode使用方式相比，具有如下特点：</p>
+        <ul>
+        <li>兼容性良好，支持ie8+，及所有现代浏览器。</li>
+        <li>相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。</li>
+        <li>因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。</li>
+        <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
+        </ul>
+        <p>使用步骤如下：</p>
+        <h3 id="-fontclass-">第一步：引入项目下面生成的fontclass代码：</h3>
+
+
+        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;link rel="stylesheet" type="text/css" href="./iconfont.css"&gt;</span></code></pre>
+        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
+        <pre><code class="lang-css hljs">&lt;<span class="hljs-selector-tag">i</span> <span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">iconfont</span> <span class="hljs-selector-tag">icon-xxx</span>"&gt;&lt;/<span class="hljs-selector-tag">i</span>&gt;</code></pre>
+        <blockquote>
+        <p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
+        </blockquote>
+    </div>
+</body>
+</html>

src/assets/font/demo_symbol.html

+
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8"/>
+    <title>IconFont</title>
+    <link rel="stylesheet" href="demo.css">
+    <script src="iconfont.js"></script>
+
+    <style type="text/css">
+        .icon {
+          /* 通过设置 font-size 来改变图标大小 */
+          width: 1em; height: 1em;
+          /* 图标和文字相邻时，垂直对齐 */
+          vertical-align: -0.15em;
+          /* 通过设置 color 来改变 SVG 的颜色/fill */
+          fill: currentColor;
+          /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
+             normalize.css 中也包含这行 */
+          overflow: hidden;
+        }
+
+    </style>
+</head>
+<body>
+    <div class="main markdown">
+        <h1>IconFont 图标</h1>
+        <ul class="icon_lists clear">
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-fenlei"></use>
+                    </svg>
+                    <div class="name">分类</div>
+                    <div class="fontclass">#icon-fenlei</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-fenlei1"></use>
+                    </svg>
+                    <div class="name">分类</div>
+                    <div class="fontclass">#icon-fenlei1</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-shouye"></use>
+                    </svg>
+                    <div class="name">首页</div>
+                    <div class="fontclass">#icon-shouye</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-suo"></use>
+                    </svg>
+                    <div class="name">锁</div>
+                    <div class="fontclass">#icon-suo</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-shouye1"></use>
+                    </svg>
+                    <div class="name">首页</div>
+                    <div class="fontclass">#icon-shouye1</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-user"></use>
+                    </svg>
+                    <div class="name">User</div>
+                    <div class="fontclass">#icon-user</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-emiyanzhengma"></use>
+                    </svg>
+                    <div class="name">emi验证码</div>
+                    <div class="fontclass">#icon-emiyanzhengma</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-user1"></use>
+                    </svg>
+                    <div class="name">user</div>
+                    <div class="fontclass">#icon-user1</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-User"></use>
+                    </svg>
+                    <div class="name">User</div>
+                    <div class="fontclass">#icon-User</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-lajitong1"></use>
+                    </svg>
+                    <div class="name">垃圾桶</div>
+                    <div class="fontclass">#icon-lajitong1</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-yanzhengmatianchong"></use>
+                    </svg>
+                    <div class="name">验证码填充</div>
+                    <div class="fontclass">#icon-yanzhengmatianchong</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-suo1"></use>
+                    </svg>
+                    <div class="name">锁</div>
+                    <div class="fontclass">#icon-suo1</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-securityCode-b"></use>
+                    </svg>
+                    <div class="name">验证码</div>
+                    <div class="fontclass">#icon-securityCode-b</div>
+                </li>
+            
+        </ul>
+
+
+        <h2 id="symbol-">symbol引用</h2>
+        <hr>
+
+        <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
+        这种用法其实是做了一个svg的集合，与另外两种相比具有如下特点：</p>
+        <ul>
+          <li>支持多色图标了，不再受单色限制。</li>
+          <li>通过一些技巧，支持像字体那样，通过<code>font-size</code>,<code>color</code>来调整样式。</li>
+          <li>兼容性较差，支持 ie9+,及现代浏览器。</li>
+          <li>浏览器渲染svg的性能一般，还不如png。</li>
+        </ul>
+        <p>使用步骤如下：</p>
+        <h3 id="-symbol-">第一步：引入项目下面生成的symbol代码：</h3>
+        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;</span></code></pre>
+        <h3 id="-css-">第二步：加入通用css代码（引入一次就行）：</h3>
+        <pre><code class="lang-js hljs javascript">&lt;style type=<span class="hljs-string">"text/css"</span>&gt;
+.icon {
+   width: <span class="hljs-number">1</span>em; height: <span class="hljs-number">1</span>em;
+   vertical-align: <span class="hljs-number">-0.15</span>em;
+   fill: currentColor;
+   overflow: hidden;
+}
+&lt;<span class="hljs-regexp">/style&gt;</span></code></pre>
+        <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
+        <pre><code class="lang-js hljs javascript">&lt;svg <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"icon"</span> aria-hidden=<span class="hljs-string">"true"</span>&gt;<span class="xml"><span class="hljs-tag">
+  &lt;<span class="hljs-name">use</span> <span class="hljs-attr">xlink:href</span>=<span class="hljs-string">"#icon-xxx"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">use</span>&gt;</span>
+</span>&lt;<span class="hljs-regexp">/svg&gt;
+        </span></code></pre>
+    </div>
+</body>
+</html>

src/assets/font/demo_unicode.html

+
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8"/>
+    <title>IconFont</title>
+    <link rel="stylesheet" href="demo.css">
+
+    <style type="text/css">
+
+        @font-face {font-family: "iconfont";
+          src: url('iconfont.eot'); /* IE9*/
+          src: url('iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
+          url('iconfont.woff') format('woff'), /* chrome, firefox */
+          url('iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+          url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
+        }
+
+        .iconfont {
+          font-family:"iconfont" !important;
+          font-size:16px;
+          font-style:normal;
+          -webkit-font-smoothing: antialiased;
+          -webkit-text-stroke-width: 0.2px;
+          -moz-osx-font-smoothing: grayscale;
+        }
+
+    </style>
+</head>
+<body>
+    <div class="main markdown">
+        <h1>IconFont 图标</h1>
+        <ul class="icon_lists clear">
+            
+                <li>
+                <i class="icon iconfont">&#xe60a;</i>
+                    <div class="name">分类</div>
+                    <div class="code">&amp;#xe60a;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe611;</i>
+                    <div class="name">分类</div>
+                    <div class="code">&amp;#xe611;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe612;</i>
+                    <div class="name">首页</div>
+                    <div class="code">&amp;#xe612;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe625;</i>
+                    <div class="name">锁</div>
+                    <div class="code">&amp;#xe625;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe60b;</i>
+                    <div class="name">首页</div>
+                    <div class="code">&amp;#xe60b;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe743;</i>
+                    <div class="name">User</div>
+                    <div class="code">&amp;#xe743;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe61b;</i>
+                    <div class="name">emi验证码</div>
+                    <div class="code">&amp;#xe61b;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe600;</i>
+                    <div class="name">user</div>
+                    <div class="code">&amp;#xe600;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe67b;</i>
+                    <div class="name">User</div>
+                    <div class="code">&amp;#xe67b;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe610;</i>
+                    <div class="name">垃圾桶</div>
+                    <div class="code">&amp;#xe610;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe636;</i>
+                    <div class="name">验证码填充</div>
+                    <div class="code">&amp;#xe636;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe644;</i>
+                    <div class="name">锁</div>
+                    <div class="code">&amp;#xe644;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe60d;</i>
+                    <div class="name">验证码</div>
+                    <div class="code">&amp;#xe60d;</div>
+                </li>
+            
+        </ul>
+        <h2 id="unicode-">unicode引用</h2>
+        <hr>
+
+        <p>unicode是字体在网页端最原始的应用方式，特点是：</p>
+        <ul>
+        <li>兼容性最好，支持ie6+，及所有现代浏览器。</li>
+        <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
+        <li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li>
+        </ul>
+        <blockquote>
+        <p>注意：新版iconfont支持多色图标，这些多色图标在unicode模式下将不能使用，如果有需求建议使用symbol的引用方式</p>
+        </blockquote>
+        <p>unicode使用步骤如下：</p>
+        <h3 id="-font-face">第一步：拷贝项目下面生成的font-face</h3>
+        <pre><code class="lang-js hljs javascript">@font-face {
+  font-family: <span class="hljs-string">'iconfont'</span>;
+  src: url(<span class="hljs-string">'iconfont.eot'</span>);
+  src: url(<span class="hljs-string">'iconfont.eot?#iefix'</span>) format(<span class="hljs-string">'embedded-opentype'</span>),
+  url(<span class="hljs-string">'iconfont.woff'</span>) format(<span class="hljs-string">'woff'</span>),
+  url(<span class="hljs-string">'iconfont.ttf'</span>) format(<span class="hljs-string">'truetype'</span>),
+  url(<span class="hljs-string">'iconfont.svg#iconfont'</span>) format(<span class="hljs-string">'svg'</span>);
+}
+</code></pre>
+        <h3 id="-iconfont-">第二步：定义使用iconfont的样式</h3>
+        <pre><code class="lang-js hljs javascript">.iconfont{
+  font-family:<span class="hljs-string">"iconfont"</span> !important;
+  font-size:<span class="hljs-number">16</span>px;font-style:normal;
+  -webkit-font-smoothing: antialiased;
+  -webkit-text-stroke-width: <span class="hljs-number">0.2</span>px;
+  -moz-osx-font-smoothing: grayscale;
+}
+</code></pre>
+        <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
+        <pre><code class="lang-js hljs javascript">&lt;i <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"iconfont"</span>&gt;&amp;#x33;<span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span></span></code></pre>
+
+        <blockquote>
+        <p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
+        </blockquote>
+    </div>
+
+
+</body>
+</html>

src/assets/font/iconfont.css

+
+@font-face {font-family: "iconfont";
+  src: url('iconfont.eot?t=1530625048960'); /* IE9*/
+  src: url('iconfont.eot?t=1530625048960#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAvIAAsAAAAAEOgAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFZW7kk1Y21hcAAAAYAAAADFAAACdmPSBzlnbHlmAAACSAAABwMAAAkYg3QBN2hlYWQAAAlMAAAALwAAADYR4n4uaGhlYQAACXwAAAAeAAAAJAfeA5FobXR4AAAJnAAAABgAAAA8O+oAAGxvY2EAAAm0AAAAIAAAACAQ9BNAbWF4cAAACdQAAAAfAAAAIAEfAF1uYW1lAAAJ9AAAAUUAAAJtPlT+fXBvc3QAAAs8AAAAigAAALdWkMkSeJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2Bk/s84gYGVgYOpk+kMAwNDP4RmfM1gxMjBwMDEwMrMgBUEpLmmMDgwVDx3Zm7438AQw9zI0AAUZgTJAQAquQy4eJzFkk0OgkAMhd/Ij4pCkJWRxB07114ADmXCFTwQK4/zOIa+UhYadattPpLpG9qmUwAJgEicRAyEGwLMBkXDFI+QTfEYV533KBVZ4UJww5wVazY8s2M/tve7bpiSSSnflE8WlNH8ID8+uSlrLJCiwEYVY9VMsEWubpYS0y/5fmDhf6VfbTt9h/lUiMuMWiQcTVHv4WieejVHkwVzx/5l6cD0nWObwcqx7WDt6C3AxrEN4tmxjtg5sNy9Yxs0tg6WDwqVPFwAAAB4nHVWW2wcVxk+/zk7M3uZmb3NbS/e8ezM7nR3471fjC+b0NrR2olTFKctcZ2kbR4aIQVMhOS2FOEK1cSiNOGlD1UvtDhppAqklFYqkELVJqII9aFCEEElUNU+pK9QCWTsCf+sGyigzp49Z/5/Znb+7zvf+c4SjpCbH7ArzCBJchtpkBnyJUKAr0BepiNgue0qrYBqcaquyMy1XUuw81U2DXqeV7Rmt13UeYGPggw5aFnNrlulLnTafToJTW0EIJVJLyYK2QQ7D2HDzT3uzdMXQTXtbLQ/5s3t2as0R5PBVTGRSCUSTwR5jgtSGojKcFrXQlwozHubXDStXjFL1AQx5aYPHpVGM4n7z7a/OlLQQwBra5DMjMov7Y2n49geTWvJREqISUEjLdmOAqsfRYykOFL8kODB+x37FX2biCRFiqRGxskXEa3l47AtH1GLs2RQNN3qQ7voqru53etQ/BQy+78TOEGnoooS3bkaU5QYnbo1fjY3PB/VJsrlibLyXwO9RzEVbD8FJafAsPvnboYGlNJkuTzpjarlyVJpEmJK2X/k31h+yQgRSIwYxCIl0vSx9MFFCK6Pwi8bMPDRFD4/cYgecKCw85oDL6dtu53PM/CDgp/efvNzU/TFwATHTRyFfNuPvc3ARCAwYf5v6N/atgkb1vs2/SvJkgpBBAWLL/bi7W5TU+O81rO0rhvvo2j0uMa7DHg77xa7PejmgBeGEVShDzrqTKB/8g4OOhDVZJpqwqsti4KsyQD9ud96R4NBMSiwEFwKqhIOP8Yw6B0NMUkNwqUQE2IwvQClSDQa8a73TErN3q1oYRroZe91PhJSBRjwLKEI3hsRHgaCkmC897qghoiP4+ZVtsimhpyXkXG7U/XpFlQbu3huSG4vXgXIF310Cp+0OpjBC9Sr0NWlpVVacWoANaRyOHp/dur1Qb1+wtuC+fHxeaDKkaWHKH1o6QjUHW/JqQOOcNGpe4/79w3q8OiR8XlK58cJoVjP79kNViFp0iKEs7CYjl2Fdg/Zamk6aCqWZWMHeeQRpd2K7+q7E2/1cbEWmbhzoz0LotNIw1r0Nm1sFB5LQ8MRYdZ7M5Xwvh1WYtNlkxpmeTqmQMRbUyow234fGoMU3BmNgeldTuedBrzfnmVOwrscNhXwPjFLACVctKjnCBxK+tPv1+qx/fQmqaPTkELbxWKraBe9vj/6JPKa3kCmFF7AABueY0P6Gv6X7R8tH5mKJZPdUUrvm5t7AGgyLzuQjLWWx2IJACcL6488/F3IluDhPamRsTSfSaSjjWeDc/f5D/DfqitmKpHh1UZOdNTcmMBsSm0mjOVu1fcEe5WtEZWM+i6IPPZcQeMFFyXK6T0HNQpuz69Hx+LYhixdvgiGARdemQ49DbIogvx0yKv/4QtnuJ+taqGri4yB8GXBMLCj3vixGw8GAg/eOAbv7Lz1i7HF4OY+g/3m2aGmdthJ1BQQm+whJNkAhUdDKqKTcq2miaJvdvdCt9XMcUyRYSisC/SNwbS3MD1gkVjabuW4WEG9/Y7b1UKMy7XsdCzCnl95fgUbm9yZmZqdnUq3Jpo1SwkbkqZJRlixas2JFvzozhX4+nMrK4gfsI5n2Edshbg4O7j6ECe2blEYzo9QpHqR13enJDecHlQbfTInxVUbCjoTy4FA1qheczbNcKAsMr0AthqXcoe2ZPaOvPVMshUz7uLidaVrUe7sgRPlxbj3d41aXaUe5+4yYq1k5u5z5+4m/p60xtZxHiIkSkZwX+phcYViDWyBFzjVYkkrCW20BpXJUEFj6LB2F31E4ZEyhh6SRAHZ+aKLabbubUcDyb8lONnbZvtfmNn5xgyckxVRBykEYel7ui4p0vfDEhhSGEIS6CL9R4VFDxyIskpz++dM3/6YboZFkMI77+FlOUSrEh4774UlKUz3i35axt+itbC8q6E1dg1rzw39mHfcYl7gAyhuFcWtfSpnn1u3XRSYX2cNEXR7mumznQN2KeJtrQcTwXVvKyLKNO7WDnc2FhY2OodrbpzKf/w4FGVS+KkIVWJi+JHfhTJ6gH7A9h7j+eV9jMbF0LvnL5wZnEynTw7OXDj/bkiMf3KTiDT4nXBGBwh+5UORxbO39P4Wu5/tG3rZZ50sz/tO5m98vpPZtwyMlbvs7KlTG6yDMCCn08PD8TnvCr13dvZeCn85fWqD0o1Tp03NO6SZpgavaObpmWVKl2f+w81jOKd1fB++reh/kB/BX/BR4FWN6F0HJecK+J+iRot9QF52dwF2lZnG8eWlg0pdnTt+z3HDpIA39da+CZmSwOAF75qYlYI/ESFjS+cgK+dTINGLRp6PZp1pWb4j54QCtvHAsa/92rsuoEX94IdwzbseZkHhteG9T4E4fBap+RfycJ0IAHicY2BkYGAA4rbp0vXx/DZfGbhZGEDgeuJcCQT9v4GFgbkRyOVgYAKJAgAOEQlTAHicY2BkYGBu+N/AEMMCZDEwsDAwgGkkwA8ARy4CeQAAeJxjYWBgYH7JwMACpFkYoTSRGAA5wgEmAAAAAAB2ANwBNAGYAeACNgKGAsIDBgNKA6gD/gQ2BIx4nGNgZGBg4GcIZGBjAAEmIOYCQgaG/2A+AwASUgF9AHicZY9NTsMwEIVf+gekEqqoYIfkBWIBKP0Rq25YVGr3XXTfpk6bKokjx63UA3AejsAJOALcgDvwSCebNpbH37x5Y08A3OAHHo7fLfeRPVwyO3INF7gXrlN/EG6QX4SbaONVuEX9TdjHM6bCbXRheYPXuGL2hHdhDx18CNdwjU/hOvUv4Qb5W7iJO/wKt9Dx6sI+5l5XuI1HL/bHVi+cXqnlQcWhySKTOb+CmV7vkoWt0uqca1vEJlODoF9JU51pW91T7NdD5yIVWZOqCas6SYzKrdnq0AUb5/JRrxeJHoQm5Vhj/rbGAo5xBYUlDowxQhhkiMro6DtVZvSvsUPCXntWPc3ndFsU1P9zhQEC9M9cU7qy0nk6T4E9XxtSdXQrbsuelDSRXs1JErJCXta2VELqATZlV44RelzRiT8oZ0j/AAlabsgAAAB4nG2MUQ6CMBiDVxhMUMDEc/iwM3gGDzDxl83AlrAtcZ7eGR58sQ9t8zUpK9imlv3XgAIlOCrUENihQYs9DujQY8CR4VU/yM5kxBay9trFRKWPTmxV8uhp7WgxSdm3Jjstqvoiya/Zm1k9TXB2kqffHoyyo86Q5x/ZexrjakK6uDudb4x9ABJyKqQAAA==') format('woff'),
+  url('iconfont.ttf?t=1530625048960') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+  url('iconfont.svg?t=1530625048960#iconfont') format('svg'); /* iOS 4.1- */
+}
+
+.iconfont {
+  font-family:"iconfont" !important;
+  font-size:16px;
+  font-style:normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-fenlei:before { content: "\e60a"; }
+
+.icon-fenlei1:before { content: "\e611"; }
+
+.icon-shouye:before { content: "\e612"; }
+
+.icon-suo:before { content: "\e625"; }
+
+.icon-shouye1:before { content: "\e60b"; }
+
+.icon-user:before { content: "\e743"; }
+
+.icon-emiyanzhengma:before { content: "\e61b"; }
+
+.icon-user1:before { content: "\e600"; }
+
+.icon-User:before { content: "\e67b"; }
+
+.icon-lajitong1:before { content: "\e610"; }
+
+.icon-yanzhengmatianchong:before { content: "\e636"; }
+
+.icon-suo1:before { content: "\e644"; }
+
+.icon-securityCode-b:before { content: "\e60d"; }
+

src/components/ContentMain/index.js

+import React from 'react'
+import { withRouter, Switch, Redirect } from 'react-router-dom'
+import LoadableComponent from '../../utils/LoadableComponent'
+import PrivateRoute from '../PrivateRoute'
+
+const Home = LoadableComponent(()=>import('../../routes/Home/index'))  //参数一定要是函数，否则不会懒加载，只会代码拆分
+// 搜索结果
+const StructureSearch = LoadableComponent(()=>import('../../routes/Home/StructureSearch/index'))
+const SearchList = LoadableComponent(()=>import('../../routes/Home/SearchList/index'))
+const SearchDetails = LoadableComponent(()=>import('../../routes/Home/SearchDetails/index'))
+const TargetDetails = LoadableComponent(()=>import('../../routes/Home/TargetDetails/index'))
+const AutoimmuneDiseases = LoadableComponent(()=>import('../../routes/Home/AutoimmuneDiseases/index'))
+const AntigenDetails = LoadableComponent(()=>import('../../routes/Home/AntigenDetails/index'))
+const MolstarView = LoadableComponent(()=>import('../../routes/Home/MolstarView/index'))
+const SequenceDetails = LoadableComponent(()=>import('../../routes/Home/SequenceDetails/index'))
+const Docking = LoadableComponent(()=>import('../../routes/Home/Docking/index'))
+
+
+// 计算工具
+const ProteinTools = LoadableComponent(()=>import('../../routes/computationalTools/ProteinTools/index'))
+const MultipleSequenceAlignment = LoadableComponent(()=>import('../../routes/computationalTools/MultipleSequenceAlignment/index'))
+@withRouter
+class ContentMain extends React.Component {
+  render () {
+    return (
+      <div style={{padding: 16, position: 'relative'}}>
+        <Switch>
+          <PrivateRoute exact path='/home' component={Home}/>
+          <PrivateRoute exact path='/home/SearchList' component={SearchList}/>
+          <PrivateRoute exact path='/home/StructureSearch' component={StructureSearch}/>
+          <PrivateRoute exact path='/home/Docking' component={Docking}/>
+          <PrivateRoute exact path='/home/SearchDetails' component={SearchDetails}/>
+          <PrivateRoute exact path='/home/TargetDetails' component={TargetDetails}/>
+          <PrivateRoute exact path='/home/AutoimmuneDiseases' component={AutoimmuneDiseases}/>
+          <PrivateRoute exact path='/home/AntigenDetails' component={AntigenDetails}/>
+          <PrivateRoute exact path='/home/MolstarView' component={MolstarView}/>
+          <PrivateRoute exact path='/home/SequenceDetails' component={SequenceDetails}/>
+          <PrivateRoute exact path='/computationalTools/ProteinTools' component={ProteinTools}/>
+          <PrivateRoute exact path='/computationalTools/MultipleSequenceAlignment' component={MultipleSequenceAlignment}/>
+          <Redirect exact from='/' to='/home'/>
+        </Switch>
+      </div>
+    )
+  }
+}
+
+export default ContentMain
\ No newline at end of file

src/components/CustomBreadcrumb/index.js

+import React from 'react'
+import {Breadcrumb} from 'antd'
+import {Link} from 'react-router-dom'
+
+const CustomBreadcrumb = (props)=>(
+  <Breadcrumb style={{marginBottom:16}}>
+    <Breadcrumb.Item><Link to='/home'>首页</Link></Breadcrumb.Item>
+    {props.arr && props.arr.map(item=>{
+      if ((typeof item) === 'object'){
+        return <Breadcrumb.Item key={item.title}><Link to={item.to}>{item.title}</Link></Breadcrumb.Item>
+      } else {
+        return <Breadcrumb.Item key={item}>{item}</Breadcrumb.Item>
+      }
+    })}
+  </Breadcrumb>
+)
+export default CustomBreadcrumb
\ No newline at end of file

src/components/CustomMenu/index.js

+import React from 'react'
+import {Link,withRouter} from 'react-router-dom'
+import {Menu, Icon} from 'antd'
+
+//此组件的意义就是将数据抽离出来，通过传递数据去渲染
+@withRouter
+class CustomMenu extends React.Component {
+  state = {
+    openKeys: [],
+    selectedKeys: []
+  }
+
+  componentDidMount() {
+    // 防止页面刷新侧边栏又初始化了
+    const pathname = this.props.location.pathname
+    //获取当前所在的目录层级
+    const rank = pathname.split('/')
+    switch (rank.length) {
+      case 2 :  //一级目录
+        this.setState({
+          selectedKeys: [pathname]
+        })
+        break;
+      case 5 : //三级目录，要展开两个subMenu
+        this.setState({
+          selectedKeys: [pathname],
+          openKeys: [rank.slice(0, 3).join('/'), rank.slice(0, 4).join('/')]
+        })
+        break;
+      default :
+        this.setState({
+          selectedKeys: [pathname],
+          openKeys: [pathname.substr(0, pathname.lastIndexOf('/'))]
+        })
+    }
+  }
+
+  componentWillReceiveProps(nextProps) {
+    //当点击面包屑导航时，侧边栏要同步响应
+    const pathname = nextProps.location.pathname
+    if (this.props.location.pathname !== pathname) {
+      this.setState({
+        selectedKeys: [pathname],
+      })
+    }
+  }
+
+  onOpenChange = (openKeys) => {
+    //此函数的作用只展开当前父级菜单（父级菜单下可能还有子菜单）
+    if (openKeys.length === 0 || openKeys.length === 1) {
+      this.setState({
+        openKeys
+      })
+      return
+    }
+
+    //最新展开的菜单
+    const latestOpenKey = openKeys[openKeys.length - 1]
+    //判断最新展开的菜单是不是父级菜单，若是父级菜单就只展开一个，不是父级菜单就展开父级菜单和当前子菜单
+    //因为我的子菜单的key包含了父级菜单，所以不用像官网的例子单独定义父级菜单数组，然后比较当前菜单在不在父级菜单数组里面。
+    //只适用于3级菜单
+    if (latestOpenKey.includes(openKeys[0])) {
+      this.setState({
+        openKeys
+      })
+    } else {
+      this.setState({
+        openKeys: [latestOpenKey]
+      })
+    }
+  }
+
+  renderMenuItem = ({key, icon, title,}) => {
+    return (
+      <Menu.Item key={key}>
+        <Link to={key}>
+          {icon && <Icon type={icon}/>}
+          <span>{title}</span>
+        </Link>
+      </Menu.Item>
+    )
+  }
+  renderSubMenu = ({key, icon, title, subs}) => {
+    return (
+      <Menu.SubMenu key={key} title={<span>{icon && <Icon type={icon}/>}<span>{title}</span></span>}>
+        {
+          subs && subs.map(item => {
+            return item.subs && item.subs.length > 0 ? this.renderSubMenu(item) : this.renderMenuItem(item)
+          })
+        }
+      </Menu.SubMenu>
+    )
+  }
+
+  render() {
+    const {openKeys, selectedKeys} = this.state
+    return (
+      <Menu
+        onOpenChange={this.onOpenChange}
+        onClick={({key}) => this.setState({selectedKeys: [key]})}
+        openKeys={openKeys}
+        selectedKeys={selectedKeys}
+        theme={this.props.theme ? this.props.theme : 'dark'}
+        mode='inline'>
+        {
+          this.props.menus && this.props.menus.map(item => {
+            return item.subs && item.subs.length > 0 ? this.renderSubMenu(item) : this.renderMenuItem(item)
+          })
+        }
+      </Menu>
+    )
+  }
+}
+
+export default CustomMenu
\ No newline at end of file

src/components/HeaderBar/index.js

+import React from 'react'
+import { Icon, Badge, Dropdown, Menu, Modal } from 'antd'
+import screenfull from 'screenfull'
+import { inject, observer } from 'mobx-react'
+import { Link, withRouter } from 'react-router-dom'
+import { isAuthenticated } from '../../utils/Session'
+
+//withRouter一定要写在前面，不然路由变化不会反映到props中去
+@withRouter @inject('appStore') @observer
+class HeaderBar extends React.Component {
+  state = {
+    icon: 'arrows-alt',
+    count: 100,
+    visible: false,
+    avatar: require('./img/defaultUser.jpg')
+  }
+
+  componentDidMount () {
+    screenfull.onchange(() => {
+      this.setState({
+        icon: screenfull.isFullscreen ? 'shrink' : 'arrows-alt'
+      })
+    })
+  }
+
+  componentWillUnmount () {
+    screenfull.off('change')
+  }
+
+  toggle = () => {
+    this.props.onToggle()
+  }
+  screenfullToggle = () => {
+    if (screenfull.enabled) {
+      screenfull.toggle()
+    }
+  }
+  logout = () => {
+    this.props.appStore.toggleLogin(false)
+    this.props.history.push(this.props.location.pathname)
+  }
+
+  render () {
+    const {icon, count, visible, avatar} = this.state
+    const {appStore, collapsed, location} = this.props
+    const notLogin = (
+      <div>
+        <Link to={{pathname: '/login', state: {from: location}}} style={{color: 'rgba(0, 0, 0, 0.65)'}}>登录</Link>&nbsp;
+        <img src={require('../../assets/img/defaultUser.jpg')} alt=""/>
+      </div>
+    )
+    const menu = (
+      <Menu className='menu'>
+        <Menu.ItemGroup title='用户中心' className='menu-group'>
+          {/* <Menu.Item>你好 - {isAuthenticated()}</Menu.Item>
+          <Menu.Item>个人信息</Menu.Item> */}
+          <Menu.Item><span onClick={this.logout}>退出登录</span></Menu.Item>
+        </Menu.ItemGroup>
+        {/* <Menu.ItemGroup title='设置中心' className='menu-group'>
+          <Menu.Item>个人设置</Menu.Item>
+          <Menu.Item>系统设置</Menu.Item>
+        </Menu.ItemGroup> */}
+      </Menu>
+    )
+    const login = (
+      <Dropdown overlay={menu}>
+        <img  src={avatar} alt=""/>
+      </Dropdown>
+    )
+    return (
+      <div id='headerbar'>
+        <Icon
+          type={collapsed ? 'menu-unfold' : 'menu-fold'}
+          className='trigger'
+          onClick={this.toggle}/>
+        <div style={{lineHeight: '64px', float: 'right'}}>
+          <ul className='header-ul'>
+            <li><Icon type={icon} onClick={this.screenfullToggle}/></li>
+            {/* <li onClick={() => this.setState({count: 0})}>
+              <Badge count={appStore.isLogin ? count : 0} overflowCount={99} style={{marginRight: -17}}>
+                <Icon type="notification"/>
+              </Badge>
+            </li> */}
+            <li>
+              {appStore.isLogin ? login : notLogin}
+            </li>
+          </ul>
+        </div>
+        <Modal
+          footer={null} closable={false}
+          visible={visible}
+          wrapClassName="vertical-center-modal"
+          onCancel={() => this.setState({visible: false})}>
+          <img src={avatar} alt="" width='100%'/>
+        </Modal>
+      </div>
+    )
+  }
+}
+
+export default HeaderBar
\ No newline at end of file

src/components/Loading/index.js

+import React from 'react'
+import './style.css'
+
+class Loading extends React.Component{
+  render(){
+    return (
+      <div id='loading'>
+        <div className="dot"/>
+        <div className="dot"/>
+        <div className="dot"/>
+        <div className="dot"/>
+        <div className="dot"/>
+      </div>
+    )
+  }
+}
+export default Loading
\ No newline at end of file

src/components/Loading/style.css

+#loading .dot {
+    width: 24px;
+    height: 24px;
+    background: #3ac;
+    border-radius: 100%;
+    display: inline-block;
+    animation: slide 1s infinite;
+}
+
+#loading .dot:nth-child(1) {
+    animation-delay: 0.1s;
+    background: #32aacc;
+}
+
+#loading .dot:nth-child(2) {
+    animation-delay: 0.2s;
+    background: #64aacc;
+}
+
+#loading .dot:nth-child(3) {
+    animation-delay: 0.3s;
+    background: #96aacc;
+}
+
+#loading .dot:nth-child(4) {
+    animation-delay: 0.4s;
+    background: #c8aacc;
+}
+
+#loading .dot:nth-child(5) {
+    animation-delay: 0.5s;
+    background: #faaacc;
+}
+
+@-moz-keyframes slide {
+    0% {
+        transform: scale(1);
+    }
+    50% {
+        opacity: 0.3;
+        transform: scale(2);
+    }
+    100% {
+        transform: scale(1);
+    }
+}
+
+@-webkit-keyframes slide {
+    0% {
+        transform: scale(1);
+    }
+    50% {
+        opacity: 0.3;
+        transform: scale(2);
+    }
+    100% {
+        transform: scale(1);
+    }
+}
+
+@-o-keyframes slide {
+    0% {
+        transform: scale(1);
+    }
+    50% {
+        opacity: 0.3;
+        transform: scale(2);
+    }
+    100% {
+        transform: scale(1);
+    }
+}
+
+@keyframes slide {
+    0% {
+        transform: scale(1);
+    }
+    50% {
+        opacity: 0.3;
+        transform: scale(2);
+    }
+    100% {
+        transform: scale(1);
+    }
+}
\ No newline at end of file

src/components/Loading2/index.js

+import React from 'react'
+import bodymovin from 'bodymovin'
+
+class Loading2 extends React.Component{
+  componentDidMount(){
+    const animData = {
+      wrapper: document.querySelector('#animationWindow'),
+      animType: 'svg',
+      loop: true,
+      prerender: true,
+      autoplay: true,
+      animationData:require('./data.json')
+    };
+    this.anim = bodymovin.loadAnimation(animData);
+    this.anim.setSpeed(1.42);
+  }
+  componentWillUnmount(){
+    this.anim = null
+  }
+  render(){
+    return (
+      <div  style={{width:'100%',height:'100%'}}>
+        <div id="animationWindow" style={{width:'100%',height:'100%'}}/>
+      </div>
+    )
+  }
+}
+export default Loading2
\ No newline at end of file

src/components/LogoTitlte/index.css

+.logo-div{
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    position: fixed;
+    z-index: 100;
+    margin-top: 50px;
+    min-width: 1000px;
+    min-height: 100px;
+}
+.logo-div img{
+    height: 102px;
+}
\ No newline at end of file

src/components/LogoTitlte/index.js

+import React, { Component } from 'react'
+import './index.css'
+
+export default class LogoTitlte extends Component {
+  render() {
+    return (
+      <div className='logo-div'>
+          <img src={require('./img/logo.png')} alt=""/>
+      </div>
+    )
+  }
+}

src/components/PrivateRoute/index.js

+import React from 'react'
+import { Route, Redirect, } from 'react-router-dom'
+import { isAuthenticated } from '../../utils/Session'
+
+const PrivateRoute = ({component: Component, ...rest}) => (
+  <Route {...rest} render={(props) => (
+    // <Component {...props} />
+    !!isAuthenticated()
+      ? <Component {...props} />
+      : <Redirect to={{
+        pathname: '/login',
+        state: {from: props.location}
+      }}/>
+  )}/>
+)
+
+export default PrivateRoute
\ No newline at end of file

src/components/PromptBox/index.js

+import React from 'react'
+
+class Promptbox extends React.Component{
+  componentDidMount(){
+    this.addContent()
+  }
+  addContent = ()=>{
+    const ctx = this.canvas.getContext('2d')
+    const width =this.props.width
+    ctx.strokeStyle = '#fff'
+    ctx.shadowOffsetX = -2
+    ctx.shadowOffsetY = 2
+    ctx.shadowBlur = 2
+    ctx.shadowColor = 'rgba(0,0,0,.3)'
+    ctx.beginPath()
+    ctx.moveTo(0,20)
+    ctx.lineTo(8,16)
+    ctx.lineTo(8,1)
+    ctx.lineTo(width-1,1)
+    ctx.lineTo(width-1,39)
+    ctx.lineTo(8,39)
+    ctx.lineTo(8,23)
+    ctx.closePath()
+    ctx.stroke();
+    ctx.fillStyle = '#D3D7F7'
+    ctx.textBaseline = 'middle'
+    ctx.font = '14px sans-serif'
+    ctx.beginPath()
+    ctx.fillText(this.props.info, 20, 20);
+  }
+  render(){
+    return (
+      <div>
+        <canvas key={this.props.info} height='41' width={this.props.width} ref={el=>this.canvas=el}/>
+      </div>
+    )
+  }
+}
+export default Promptbox
\ No newline at end of file

src/components/SiderNav/index.js

+import React from 'react'
+import CustomMenu from "../CustomMenu/index";
+
+const menus = [
+  {
+    title: '大分子平台',
+    icon: 'home',
+    key: '/home'
+  },
+  {
+    title: '小分子平台',
+    icon: 'home',
+    key: '/home/Docking'
+  },
+  // {
+  //   title: '预测工具',
+  //   icon: 'appstore',
+  //   key: '/home/general',
+  //   subs: [
+  //     {key: '/home/general/button', title: '表位预测', icon: '',},
+     
+  //   ]
+  // },
+  // {
+  //   title: '计算工具',
+  //   icon: 'calculator',
+  //   key: '/home/navigation',
+  //   subs: [
+  //     {key: '/computationalTools/MultipleSequenceAlignment', title: '多序列比对', icon: ''},
+  //     {key: '/computationalTools/ProteinTools', title: '蛋白质性质计算', icon: ''},
+  //   ]
+  // },
+]
+
+
+class SiderNav extends React.Component {
+  render() {
+
+    return (
+      <div style={{height: '100vh',overflowY:'scroll'}}>
+        <div style={styles.logo}>
+          {/* 深雅智慧 */}
+        </div>
+        <CustomMenu menus={menus}/>
+      </div>
+    )
+  }
+}
+
+const styles = {
+  logo: {
+    height: '32px',
+    // background: 'rgba(255, 255, 255, .2)',
+    margin: '16px'
+  }
+}
+
+export default SiderNav
\ No newline at end of file

src/components/TypingCard/index.js

+import React from 'react'
+import {Card} from 'antd'
+import Typing from '../../utils/typing'
+
+class TypingCard extends React.Component {
+  static defaultProps = {
+    title: '何时使用',
+    source:'',
+    height:136
+  }
+  componentDidMount(){
+    const typing = new Typing({
+      source:this.source,
+      output:this.output,
+      delay:30
+    })
+    typing.start()
+  }
+  render() {
+    return (
+      <Card hoverable bordered={false} className='card-item' title={this.props.title} style={{minHeight:this.props.height}} id={this.props.id}>
+        <div style={{display:'none'}} ref={el => this.source = el} dangerouslySetInnerHTML={{__html:this.props.source}}/>
+        <div ref={el => this.output = el}/>
+      </Card>
+    )
+  }
+}
+
+export default TypingCard
\ No newline at end of file

src/index.css

+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+  display: block;
+}
+body {
+  line-height: 1;
+}
+ol, ul {
+  list-style: none;
+}
+blockquote, q {
+  quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+  content: '';
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
\ No newline at end of file

src/index.js

+import '@babel/polyfill'
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+import App from './App';
+import registerServiceWorker from './registerServiceWorker';
+import { HashRouter } from 'react-router-dom'
+import { Provider } from 'mobx-react'
+import { LocaleProvider } from 'antd'
+import zh_CN from 'antd/lib/locale-provider/zh_CN'
+import store from './store'
+
+//打包时，用的HashRouter并加上了basename，因为放在服务器的二级目录下
+ReactDOM.render(
+  <HashRouter>
+    <LocaleProvider locale={zh_CN}>
+      <Provider {...store}>
+        <App />
+      </Provider>
+    </LocaleProvider>
+  </HashRouter>,
+  document.getElementById('root'));
+registerServiceWorker();

src/logo.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
+    <g fill="#61DAFB">
+        <path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/>
+        <circle cx="420.9" cy="296.5" r="45.7"/>
+        <path d="M520.5 78.1z"/>
+    </g>
+</svg>

src/registerServiceWorker.js

+// In production, we register a service worker to serve assets from local cache.
+
+// 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 the "N+1" visit to a page, since previously
+// cached resources are updated in the background.
+
+// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
+// This link also includes instructions on opting out of this behavior.
+
+const isLocalhost = Boolean(
+  window.location.hostname === 'localhost' ||
+    // [::1] is the IPv6 localhost address.
+    window.location.hostname === '[::1]' ||
+    // 127.0.0.1/8 is considered localhost for IPv4.
+    window.location.hostname.match(
+      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
+    )
+);
+
+export default function register() {
+  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);
+    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/facebookincubator/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. Lets check if a service worker still exists or not.
+        checkValidServiceWorker(swUrl);
+
+        // 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://goo.gl/SC7cgQ'
+          );
+        });
+      } else {
+        // Is not local host. Just register service worker
+        registerValidSW(swUrl);
+      }
+    });
+  }
+}
+
+function registerValidSW(swUrl) {
+  navigator.serviceWorker
+    .register(swUrl)
+    .then(registration => {
+      registration.onupdatefound = () => {
+        const installingWorker = registration.installing;
+        installingWorker.onstatechange = () => {
+          if (installingWorker.state === 'installed') {
+            if (navigator.serviceWorker.controller) {
+              // At this point, the old content will have been purged and
+              // the fresh content will have been added to the cache.
+              // It's the perfect time to display a "New content is
+              // available; please refresh." message in your web app.
+              console.log('New content is available; please refresh.');
+            } 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.');
+            }
+          }
+        };
+      };
+    })
+    .catch(error => {
+      console.error('Error during service worker registration:', error);
+    });
+}
+
+function checkValidServiceWorker(swUrl) {
+  // Check if the service worker can be found. If it can't reload the page.
+  fetch(swUrl)
+    .then(response => {
+      // Ensure service worker exists, and that we really are getting a JS file.
+      if (
+        response.status === 404 ||
+        response.headers.get('content-type').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);
+      }
+    })
+    .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();
+    });
+  }
+}

src/routes/About/index.js

+import React from 'react'
+import CustomBreadcrumb from '../../components/CustomBreadcrumb/index'
+import TypingCard from '../../components/TypingCard'
+
+export default class About extends React.Component{
+  render(){
+    return (
+      <div>
+        <CustomBreadcrumb arr={['关于']}/>
+        <TypingCard source={'这个人很懒，什么也没留下...'} title='关于' />
+      </div>
+    )
+  }
+}
\ No newline at end of file

src/routes/Home/AntigenDetails/index.css

+.AntigenDetails-div .title-div{
+    font-size: 30px;
+    font-weight: 600;
+}
+
+.AntigenDetails-div .div-list .list-one{
+    display: flex;
+    align-items: center;
+    
+   
+}
+.AntigenDetails-div .div-list .left-div {
+    color: black;
+    font-weight: 500;
+    font-size: 18px;
+    margin-right: 10px;
+    
+}
+.AntigenDetails-div .div-list .right-div {
+    width: 80%;
+    word-wrap: break-word; 
+}
\ No newline at end of file

src/routes/Home/AntigenDetails/index.js

+import React, { Component } from 'react'
+import {Tabs,Table,message,Divider} from 'antd';
+import  request from '../../../utils/request'
+import './index.css'
+
+export default class AntigenDetails extends Component {
+    state={
+        id:515,
+        AntigenData:[]
+    }
+    componentDidMount(){
+        this.getAntigenList()
+      }
+    getAntigenList(){
+        const{id}=this.state
+        this.setState({loading:true})
+        request.get('/therapeutic/antigen/'+515)
+        .then(res => {
+          console.log(res)
+          if (res.data.code===0) {
+            console.log(res.data.data);
+            this.setState({AntigenData:res.data.data})
+            this.setState({loading:false}
+              )
+           
+          }else{
+            message.error(res.data.msg);
+          }
+        })
+        .catch(err => {
+          console.error(err); 
+        })
+    
+      }
+
+  render() {
+    const {AntigenData}=this.state
+    const columns = [
+      {
+        title: 'Type',
+        dataIndex: 'epitopeType',
+        key: 'epitopeType',
+        // render: text => <a>{text}</a>,
+      },
+      {
+        title: 'Description',
+        dataIndex: 'epitopeDescription',
+        key: 'epitopeDescription',
+      },
+      {
+        title: 'Starting Position',
+        dataIndex: 'startingPosition',
+        key: 'startingPosition',
+      },
+      {
+        title: 'Ending Position',
+        key: 'endingPosition',
+        dataIndex: 'endingPosition',
+        // render: tags => (
+        //   <span>
+        //     {tags.map(tag => {
+        //       let color = tag.length > 5 ? 'geekblue' : 'green';
+        //       if (tag === 'loser') {
+        //         color = 'volcano';
+        //       }
+        //       return (
+        //         <Tag color={color} key={tag}>
+        //           {tag.toUpperCase()}
+        //         </Tag>
+        //       );
+        //     })}
+        //   </span>
+        // ),
+      },
+    ];
+    const AntigenView=AntigenData.map((item,index)=>{
+        return(
+          <div className='div-list' key={index} >
+          <div className='list-one'>
+            <div className='left-div itle-div'>
+            Antigen name:
+            </div>
+            <div className='right-div'>
+            {item.antibodyName}
+            </div>
+          </div>
+          <div className='list-one'>
+            <div className='left-div itle-div'>
+            Uniport ID:
+            </div>
+            <div className='right-div'>
+            {item.uniprotId}
+            </div>
+          </div>
+          <div className='list-one'>
+            <div className='left-div itle-div'>
+            Source:
+            </div>
+            <div className='right-div'>
+            {item.sequence}
+            </div>
+          </div>
+          <div className='list-one'>
+            <div className='left-div itle-div'>
+            Antigen Sequence:
+            </div>
+            <div className='right-div'>
+            {item.sequence}
+            </div>
+          </div>
+          <div className='list-one'>
+            <div className='left-div itle-div'>
+            Structures:
+            </div>
+            <div className='right-div'>
+            {item.sequence}
+            </div>
+          </div>
+          <div className='list-one'>
+            <div className='left-div itle-div'>
+            Epitopes :
+            </div>
+            <div className='right-div'>
+            {/* <Table columns={columns} dataSource={data} /> */}
+            </div>
+          </div>
+          <div className='list-one'>
+            <div className='left-div itle-div'>
+            {/* Epitopes : */}
+            </div>
+            <div className='right-div'>
+            <Table style={{backgroundColor: '#fff'}} columns={columns} pagination={false} dataSource={item.epitopes} />
+            </div>
+          </div>
+          <Divider />
+        </div>
+        )
+   
+
+      })
+    return (
+      <div className='AntigenDetails-div'>{AntigenView}</div>
+    )
+  }
+}

src/routes/Home/AutoimmuneDiseases/index.css

+.AutoimmuneDiseases-div .title-div{
+    font-weight: 500;
+    font-size: 28px;
+}
+.AutoimmuneDiseases-div .bottom-div{
+    height: 80px;
+    display: flex;
+    align-items: center;
+}
\ No newline at end of file

src/routes/Home/AutoimmuneDiseases/index.js

+import React, { Component } from 'react'
+import {Tabs,Table,message,Divider,Pagination} from 'antd';
+import './index.css'
+import  request from '../../../utils/request'
+import qs from 'qs'
+
+export default class AutoimmuneDiseases extends Component {
+    state={
+        ClinicalIndicationData:[],
+        total_num:0,
+        
+        searchData:{
+            clinicalIndication:qs.parse(this.props.location.search.slice(1)).clinicalIndication,
+            pageNum:1,
+            pageSize:10
+        }
+    }
+    componentDidMount(){
+        this.getClinicalIndicationList()
+      }
+      getPdid(e){
+        let data={
+          dataid:e,
+          defaultActiveKey:'Antibody'
+          
+        }
+  
+        this.props.history.push({ pathname: '/home/SearchDetails', search: qs.stringify(data)})
+  
+      }
+      clinicalIndicationPdid(e){
+        let data={
+          dataid:e,
+          defaultActiveKey:'ClinicalIndication'
+          
+        }
+  
+        this.props.history.push({ pathname: '/home/SearchDetails', search: qs.stringify(data)})
+  
+      }
+      TargetPdid(e){
+        let data={
+          dataid:e,
+          defaultActiveKey:'Antigen'
+          
+        }
+  
+        this.props.history.push({ pathname: '/home/SearchDetails', search: qs.stringify(data)})
+  
+      }
+    getClinicalIndicationList(){
+        const{id}=this.state
+        this.setState({loading:true})
+        request.post('/therapeutic/clinical-indication/page-list',this.state.searchData)
+        .then(res => {
+          console.log(res)
+          if (res.data.code===0) {
+            console.log(res.data.data);
+            this.setState({total_num:Number(res.data.data.total)})
+            
+            this.setState({ClinicalIndicationData:res.data.data.records})
+            this.setState({loading:false}
+              )
+           
+          }else{
+            message.error(res.data.msg);
+          }
+        })
+        .catch(err => {
+          console.error(err); 
+        })
+    
+      }
+      onShowSizeChange=(current, pageSize)=>{
+        let searchData = this.state.searchData;
+        searchData.pageNum=current
+        searchData.pageSize=pageSize
+        this.setState({
+          searchData
+        })
+        
+        this.getClinicalIndicationList()
+      }
+      onChange=(current, pageSize)=>{
+       
+          let searchData = this.state.searchData;
+          searchData.pageNum=current
+          searchData.pageSize=pageSize
+          this.setState({
+            searchData
+          })
+          
+          this.getClinicalIndicationList()
+
+        }
+  render() {
+      const{ClinicalIndicationData,total_num}=this.state
+      const columns = [
+        {
+          title: 'clinicalIndication',
+          dataIndex: 'clinicalIndication',
+          key: 'clinicalIndication',
+          render: text => <a>{text}</a>,
+        },
+        {
+          title: 'Antibody',
+          dataIndex: 'antibodyName',
+          key: 'antibodyName',
+          render: (text, record )=> <a onClick={()=>this.getPdid(record.therapeuticId)} >{text}</a>,
+        },
+        {
+          title: 'Antigen',
+          dataIndex: 'target',
+          key: 'target',
+          render: (text, record )=><a onClick={()=>this.TargetPdid(record.therapeuticId)}>{text}</a>,
+        },
+        {
+          title: 'Status',
+          dataIndex: 'developmentStatus',
+          key: 'developmentStatus',
+        },
+        {
+          title: 'Company',
+          key: 'company',
+          dataIndex: 'company',
+       
+        },
+      ];
+    return (
+      <div className='AutoimmuneDiseases-div'>
+        {/* <div className='title-div'>
+        Clinical indication： Autoimmune diseases
+        </div> */}
+        <div className='center-div'>
+        <Table  rowKey='id' style={{backgroundColor: '#fff'}} columns={columns} pagination={false} dataSource={ClinicalIndicationData} />
+        </div>
+        <div className='bottom-div'>
+        <Pagination
+            showSizeChanger
+            onShowSizeChange={this.onShowSizeChange}
+            onChange={this.onChange}
+            total={total_num}
+          />
+        </div>
+      </div>
+    )
+  }
+}

src/routes/Home/Cutting/index.css

+
+ 
+#canvas {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: -1;
+  }
+   
+  .btns {
+    position: fixed;
+    z-index: 1000;
+    display: none;
+  }
\ No newline at end of file

src/routes/Home/Docking/index.css

+.Docking-div{
+    /* display: flex; */
+    padding-top: 100px;
+    background-color: #fff;
+    min-height: 100vh;
+    /* height: 100vh; */
+    display: flex;
+    justify-content: center;
+    
+}
+
+.Docking-div .left-div{
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-left: 1px solid #f0f0f0;
+    border-right: 1px solid #f0f0f0;
+    border-bottom: 1px solid #f0f0f0;
+    box-sizing: border-box;
+
+}
+.Docking-div .left-div Button{
+  
+    height: 50px;
+    border: 0px;
+    border-radius:0px;
+    width: 100%;
+    font-family: "Comic Sans MS"
+
+}
+.Docking-div .right-div{
+    padding: 20px;
+    /* display: flex; */
+    align-items: center;
+    justify-content: center;
+    padding-left: 100px;
+    padding-right: 100px;
+    box-sizing: border-box;
+    
+}
+.Docking-div .right-div .right-div-one{
+    display: flex;
+    align-items: center;
+    width: 100%;
+    /* justify-content: space-between; */
+}
+.Docking-div .right-div .right-div-one .title-div{
+    width: 20%;
+}
+.sequencesearch-div .top-div {
+   margin-bottom: 100px;
+ 
+}
+.sequencesearch-div .sequence-center{
+    display: flex;
+    align-items: center;
+}
+.sequencesearch-div .TextArea-div{
+    width: 50%;
+}
+.bottom-butn button{
+    height: 50px;
+    width: 200px;
+}   
+.bottom-butn{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 50px;
+   
+}
+.Jsme-div{
+    display: flex;
+    align-items: center;
+    justify-content: center
+   
+}
+.Docking-div .top-div{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 150px;
+
+}
+.Docking-div .Docking-center{
+    width: 1000px;
+    background-color: #f0f0f0;
+    padding-bottom: 100px;
+}
+.Docking-div .title-text{
+    font-size: 28px;
+    font-weight: 600;
+}
+.Docking-div .pharmacophore-div{
+   
+    align-items: center;
+    justify-content: center;
+
+}
+.Docking-div .pharmacophore-div     .pharmacophore-top{
+
+    display: flex;
+    align-items: center;
+    padding: 5px;
+   
+
+}
+
+.Docking-div .displaydiv{
+    display: none;
+}
+.Docking-div .taskmanager-div{
+    width: 100%;
+    background-color: #fff;
+    padding: 10px;
+}
+
+.generalsearch-div{
+
+    
+}
+ .ant-advanced-search-form {
+  
+  
+  }
+  
+  .ant-advanced-search-form .ant-form-item {
+    display: flex;
+  }
+  
+  .ant-advanced-search-form .ant-form-item-control-wrapper {
+    flex: 1;
+  }
+  .Docking-center .logo-topdiv{
+
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 150px;
+      background-color: #fff;
+  }
+  .Docking-center .logo-topdiv img{
+      height: 150px;
+  }
+  .Docking-center .pharmacophore-title{
+      width: 50%;
+  }
+  .Docking-center .pharmacophore-title2{
+    width: 25%;
+}
+  .Computational-div{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .Computational-div div{
+        width: 587px;
+        padding-left: 100px;
+        font-family: "Comic Sans MS"
+  }
+  .DockingCenter{
+      height: 30px;
+  }
+  .Speed-div{
+      height: 30px;
+  }
+  
+
+

src/routes/Home/MolstarView/index.css

+.Molstar-div{
+    height: 800px;
+    width: 800px;
+    
+}
\ No newline at end of file

src/routes/Home/MolstarView/index.js

+import React, { Component } from 'react'
+import Molstar from "molstar-react";
+import {Tabs,} from 'antd';
+import qs from 'qs'
+import './index.css'
+const { TabPane } = Tabs;
+
+export default class MolstarView extends Component {
+   
+    state={
+        PdbId:qs.parse(this.props.location.search.slice(1)).PdbId,
+        tabs:['Ligand','Water','Polymer','Ion','CDR']
+    
+    }
+  render() {
+      const{tabs,PdbId}=this.state
+      console.log();
+    return (
+      <div>  
+          
+          <Tabs defaultActiveKey="0" type="card" tabPosition='left'>
+                         
+      {
+       tabs.map((item,index)=>{
+         return(
+           <TabPane tab={item} key={index}>
+             <div className='Molstar-div2'>
+             <Molstar pdbId={PdbId} />
+             </div>
+         </TabPane>
+         )
+      
+       })
+          
+      }
+
+ </Tabs>
+      
+      </div>
+    )
+  }
+}

src/routes/Home/SearchDetails/index.css

+.Molstar-div{
+    height: 800px;
+    width: 800px;
+    
+}
+.Molstar-div2{
+    height: 500px;
+    width:100%;
+    
+}
+.search-details-div{
+    background-color: #fff;
+    padding: 5px;
+    box-sizing: border-box;
+}
+
+.search-details-div .title-div{
+    font-size: 30px;
+    font-weight: 600;
+    padding-left: 10px;
+    box-sizing: border-box;
+}
+.search-details-div .div-list{
+    display: flex;
+    flex-wrap: wrap;
+    padding: 10px;
+    box-sizing: border-box;
+    background-color: #fff;
+    margin-bottom: 20px;
+}
+
+.search-details-div .div-list .list-one{
+    display: flex;
+    align-items: center;
+    width: 25%;
+    
+   
+}
+.search-details-div .div-list .left-div {
+    color: black;
+    font-weight: 500;
+    font-size: 18px;
+    margin-right: 10px;
+    
+}
+.search-details-div .div-list .right-div {
+    /* width: 80%; */
+    word-wrap: break-word; 
+}
+
+.search-details-div 
+.ant-collapse > .ant-collapse-item > .ant-collapse-header{
+    font-weight: 500;
+    font-size: 18px;
+}
+.search-details-div .isShowDiv{
+    display: none;
+}
+.search-details-div .title-div-top{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+.search-details-div .Jsme-div{
+    border: 1px solid  black;
+}
+.search-details-div .link-div{
+    color: blue;
+    cursor: pointer;
+}
+ .table-div{
+    background-color: #fff;
+}
+.search-details-div .title-div{
+    color: black;
+    font-weight: 600;
+    font-size: 23px;
+    margin-right: 10px;
+    
+}
+.search-details-div .card-div{
+    background-color: #fff;
+}
+.search-details-div .card-div{
+    padding: 20px ;
+    box-sizing: border-box;
+}
+
+
+
+
+

src/routes/Home/SearchDetails/index.js

+import React, { Component } from "react";
+import { Tabs, Table,PageHeader, message, Card } from "antd";
+import request from "../../../utils/request";
+import "./index.css";
+import qs from "qs";
+const { TabPane } = Tabs;
+export default class SearchDetails extends Component {
+  state = {
+    id: qs.parse(this.props.location.search.slice(1)).pdbCode,
+    // id:515,
+    AntibodyData: {
+      
+    },
+    antibodyInfo:[],
+    AntigenData: [],
+    StructuresData: [],
+    ClinicalIndicationData: {},
+    defaultActiveKey: qs.parse(this.props.location.search.slice(1))
+      .defaultActiveKey,
+  };
+  componentDidMount() {
+    console.log(this.state);
+    this.getOne(this.state.defaultActiveKey);
+    this.getClinicalIndicationList;
+  }
+  getAntibodyList() {
+    const { id } = this.state;
+    console.log(id);
+    this.setState({ loading: true });
+    request
+      .get("/searchstruct/pdbdetail?pdbCode=" + id)
+      .then((res) => {
+        console.log(res);
+        if (res.data.code === 200) {
+          console.log(res.data.result.pdbCommonVO);
+          this.setState({ AntibodyData: res.data.result.pdbCommonVO });
+          this.setState({ antibodyInfo: res.data.result.antibodyInfo });
+          
+          this.setState({ loading: false });
+        } else {
+          message.error(res.data.msg);
+        }
+      })
+      .catch((err) => {
+        console.error(err);
+      });
+  }
+  getPdb = (e) => {
+    let data = {
+      PdbId: e,
+    };
+    this.props.history.push({
+      pathname: "/home/MolstarView",
+      search: qs.stringify(data),
+    });
+  };
+  getOne(e) {
+    this.getAntibodyList();
+  }
+  callback = (e) => {
+    if (e === "Antibody") {
+      this.getAntibodyList();
+      return;
+    }
+    if (e === "Antigen") {
+      this.getAntigenList();
+
+      return;
+    }
+    if (e === "Structures") {
+      this.getStructuresList();
+      return;
+    }
+    if (e === "ClinicalIndication") {
+      this.getClinicalIndicationList();
+      return;
+    }
+  };
+  getSequenceDetails = (e) => {
+    let data = {
+      Sequence: e,
+    };
+    this.props.history.push({
+      pathname: "/home/SequenceDetails",
+      search: qs.stringify(data),
+    });
+  };
+  render() {
+    const {
+      AntibodyData,
+      antibodyInfo,
+    } = this.state;
+    const columns = [
+      {
+        title: "CDR",
+        dataIndex: "chainName",
+        key: "chainName",
+        // render: text => <a>{text}</a>,
+        width: 200,
+      },
+      {
+        title: "sequence",
+        dataIndex: "sequence",
+        key: "sequence",
+        width: 200,
+        render: (text, record) => (
+          <div style={{ wordWrap: "break-word", wordBreak: "break-word" }}>
+            {text}
+          </div>
+        ),
+      },
+      {
+        title: "length",
+        dataIndex: "length",
+        key: "length",
+        width: 200,
+      },
+      {
+        title: "cluster",
+        key: "cluster",
+        dataIndex: "cluster",
+        width: 200,
+      },
+    ];
+    const AntibodyView = (
+      <div className="div-list">
+        <div className="list-one">
+          <div className="left-div itle-div">In complex:</div>
+          <div className="right-div">{AntibodyData.inComplex}</div>
+        </div>
+        <div className="list-one">
+          <div className="left-div itle-div">Resolution:</div>
+          <div className="right-div">{AntibodyData.resolution}</div>
+        </div>
+        <div className="list-one">
+          <div className="left-div itle-div">R-free:</div>
+          <div className="right-div">{AntibodyData.rfree}</div>
+        </div>
+        <div className="list-one">
+          <div className="left-div itle-div">Released date:</div>
+          <div className="right-div">{AntibodyData.releasedDate}</div>
+        </div>
+        <div className="list-one">
+          <div className="left-div itle-div">Organism:</div>
+          <div className="right-div">{AntibodyData.organism}</div>
+        </div>
+        <div className="list-one">
+          <div className="left-div itle-div">R-factor:</div>
+          <div className="right-div">{AntibodyData.rfactor}</div>
+        </div>
+        <div className="list-one">
+          <div className="left-div itle-div">PMID:</div>
+          <div className="right-div">{AntibodyData.pmid}</div>
+        </div>
+      </div>
+    );
+    const AntibodyView2 = antibodyInfo.map((item,index)=>{
+      return(
+
+        <Card
+        hoverable
+        style={{ marginBottom: '10px'}}
+      >
+            <div className="card-div" key={index}>
+        <div className="title-div">antibody1</div>
+       <div className="div-list">
+         <div className="list-one">
+           <div className="left-div itle-div">Chains:</div>
+           <div className="right-div">{item.antibodyCommonInfoVO.chains}</div>
+         </div>
+         <div className="list-one">
+           <div className="left-div itle-div">Heavy chains::</div>
+           <div className="right-div">{item.antibodyCommonInfoVO.heavyChains}</div>
+         </div>
+         <div className="list-one">
+           <div className="left-div itle-div">Light chains:</div>
+           <div className="right-div">{item.antibodyCommonInfoVO.lightChains}</div>
+         </div>
+         <div className="list-one">
+           <div className="left-div itle-div">in complex:</div>
+           <div className="right-div">{item.antibodyCommonInfoVO.inComplex}</div>
+         </div>
+         <div className="list-one">
+           <div className="left-div itle-div">Antigen chains:</div>
+           <div className="right-div">{item.antibodyCommonInfoVO.antigenChains}</div>
+         </div>
+         <div className="list-one">
+           <div className="left-div itle-div">Format:</div>
+           <div className="right-div">{item.antibodyCommonInfoVO.format}</div>
+         </div>
+       </div>
+       <div className="title-div">heavy chain</div>
+       <div className="div-list">
+         <div className="list-one">
+           <div className="left-div itle-div">V gene usage:</div>
+           <div className="right-div">{item.antibodyCommonInfoVO.heavyChainVgeneusage}</div>
+         </div>
+         <div className="list-one">
+           <div className="left-div itle-div">Species:</div>
+           <div className="right-div">{item.antibodyCommonInfoVO.heavyChainSpecies}</div>
+         </div>
+       </div>
+       <div className="title-div">light chain</div>
+       <div className="div-list">
+         <div className="list-one">
+           <div className="left-div itle-div">V gene usage:</div>
+           <div className="right-div">{item.antibodyCommonInfoVO.lightChainVgeneusage}</div>
+         </div>
+         <div className="list-one">
+           <div className="left-div itle-div">Species:</div>
+           <div className="right-div">{item.antibodyCommonInfoVO.lightChainSpecies}</div>
+         </div>
+       </div>
+       <Table  bordered  columns={columns} pagination={false} dataSource={item.cdrList} rowKey='chainName' />
+       <div className="title-div">affinity information</div>
+       <div className="title-div">calculated property</div>
+     </div>
+
+      </Card>
+    
+      )
+    })
+     
+  
+     
+    
+
+    return (
+      <div className="search-details-div">
+        <PageHeader
+            style={{
+              border: "1px solid rgb(235, 237, 240)",
+            }}
+            onBack={() => this.props.history.go(-1)}
+            title="返回"
+          />
+        <div className="title-div">pdb</div>
+        {AntibodyView}
+        <div className="title-div">antibody information</div>
+        {AntibodyView2}
+      </div>
+    );
+  }
+}

src/routes/Home/SearchList/index.css

+.search-div{
+    
+}
+ .search-div .list-div-one{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.search-div .list-div-left{
+    width:20%;
+    font-size: 28px;
+    font-weight: 500;
+    color: blue;
+}
+.search-div .list-div-right{
+    width: 80%;
+    word-wrap: break-word; word-break: normal;
+}
+ .Molstar-div{
+    height: 800px;
+    width: 800px;
+    
+}
+.search-div .btn-list{
+    height: 100%;
+    display: flex;
+    width: 20%;
+    flex-wrap: wrap;
+}
+.search-div .search-content{
+    color: #000000d9;
+    font-weight: 500;
+    font-size: 30px;
+}
+.search-div .CheckboxList{
+    display: flex;
+    justify-content: end;
+    align-items: center;
+    padding: 10px;
+}
+.search-div .CheckboxList button{
+    margin-left: 10px;
+}
+.search-div .list-div-one .list-div-right span{
+    font-weight: 500;
+    color: black;
+
+}
+.search-div .ant-card-extra{
+ margin-left: initial !important;
+ font-weight: 500;
+
+}
+.search-div .list-div-one .btn-list span{
+    font-weight: 500;
+    color: black;
+
+}
+.search-div .list-div-one .btn-list .right-div {
+   width: 100%;
+
+}
+.search-div .isShowDiv{
+    display: none;
+}
+.search-div .pdb-idv{
+    padding-left: 20px;
+    
+}
+.search-div .pdb-idv div{
+    margin-bottom: 2px;
+}
+.search-div .pdb-center{
+   display: flex;
+}
+.search-div .cdrs-div{
+    display: flex;
+    flex-flow: column;
+ }
+ .search-div .list-div-one .list-div-right .cdrs-div span{
+    font-weight: 400;
+    color: black;
+
+}
+.search-div .allEpitopeList .list-div-right{
+    width: 80%;
+    word-wrap: break-word; word-break: normal;
+}
+
+.search-div .allEpitopeList  .list-div-left{
+    width: 20%;
+    font-size: 28px;
+    font-weight: 500;
+    color: blue;
+}
+ 
+

src/routes/Home/SearchList/index.js

+import React, { Component } from "react";
+import { Jsme } from "jsme-react";
+import {
+  Card,
+  PageHeader,
+  Pagination,
+  Tabs,
+  Spin,
+  message,
+  Modal,
+  Tag,
+} from "antd";
+import Molstar from "molstar-react";
+import request from "../../../utils/request";
+import qs from "qs";
+import "./index.css";
+const { TabPane } = Tabs;
+
+export default class SearchList extends Component {
+  state = {
+    smilesList: [{}, {}, {}],
+    CDRList: [],
+    EpitopeList: [],
+    visible: false,
+    pdbId: "6f6s",
+    total_num: 0,
+    searchData: qs.parse(this.props.location.search.slice(1)),
+    name: "Summary",
+  };
+  getPdid(e) {
+    let data = {
+      dataid: e,
+      defaultActiveKey: "Antibody",
+    };
+
+    this.props.history.push({
+      pathname: "/home/SearchDetails",
+      search: qs.stringify(data),
+    });
+  }
+  clinicalIndicationPdid(e) {
+    let data = {
+      dataid: e,
+      defaultActiveKey: "ClinicalIndication",
+    };
+
+    this.props.history.push({
+      pathname: "/home/SearchDetails",
+      search: qs.stringify(data),
+    });
+  }
+  TargetPdid(e) {
+    let data = {
+      pdbCode: e,
+    };
+
+    this.props.history.push({
+      pathname: "/home/SearchDetails",
+      search: qs.stringify(data),
+    });
+  }
+  onShowSizeChange = (current, pageSize) => {
+    let searchData = this.state.searchData;
+
+    if (searchData.searchType == 1) {
+      searchData.generalSearchDTO.pageNumber = current;
+      searchData.generalSearchDTO.pageSize = pageSize;
+      this.setState({
+        searchData,
+      });
+      this.getSummaryList();
+      return;
+    }
+    if (searchData.searchType == 2) {
+      searchData.cdrSearchDTO.pageNumber = current;
+      searchData.cdrSearchDTO.pageSize = pageSize;
+      this.setState({
+        searchData,
+      });
+      this.getSummaryList();
+      return;
+    }
+    if (searchData.searchType == 3) {
+      searchData.sequenceSearchDTO.pageNumber = current;
+      searchData.sequenceSearchDTO.pageSize = pageSize;
+      this.setState({
+        searchData,
+      });
+      this.getSummaryList();
+      return;
+    }
+  };
+  onChange = (current, pageSize) => {
+    let searchData = this.state.searchData;
+
+    if (searchData.searchType == 1) {
+      searchData.generalSearchDTO.pageNumber = current;
+      searchData.generalSearchDTO.pageSize = pageSize;
+      this.setState({
+        searchData,
+      });
+      this.getSummaryList();
+      return;
+    }
+    if (searchData.searchType == 2) {
+      searchData.cdrSearchDTO.pageNumber = current;
+      searchData.cdrSearchDTO.pageSize = pageSize;
+      this.setState({
+        searchData,
+      });
+      this.getSummaryList();
+      return;
+    }
+    if (searchData.searchType == 3) {
+      searchData.sequenceSearchDTO.pageNumber = current;
+      searchData.sequenceSearchDTO.pageSize = pageSize;
+      this.setState({
+        searchData,
+      });
+      this.getSummaryList();
+      return;
+    }
+  };
+  // getPdb(e){
+  //   console.log(e);
+  //   this.setState({visible: true})
+  //   this.setState({pdbId: e})
+
+  // }
+  getPdb = (e) => {
+    let data = {
+      PdbId: e,
+    };
+    this.props.history.push({
+      pathname: "/home/MolstarView",
+      search: qs.stringify(data),
+    });
+  };
+  componentDidMount() {
+    console.log(qs.parse(this.props.location.search.slice(1)));
+    this.getSummaryList();
+    // if (this.state.smilesData.name==='Drugs') {
+    //   this.getList()
+    // }
+    // if (this.state.smilesData.name==='Target') {
+    //   this.getTargetList()
+    // }
+  }
+
+  getSummaryList() {
+    this.setState({ loading: true });
+    request
+      .post("/searchstruct/pdbpage", this.state.searchData)
+      .then((res) => {
+        console.log(res);
+        if (res.data.code == 200) {
+          this.setState({ smilesList: res.data.result.rows });
+          this.setState({ total_num: Number(res.data.result.totalCount) });
+
+          this.setState({ loading: false });
+        } else {
+          message.error(res.data.message);
+          this.props.history.go(-1);
+        }
+      })
+      .catch((err) => {
+        console.error(err);
+      });
+  }
+  callback = (e) => {
+    console.log(e);
+    this.setState({ name: e });
+    if (e === "Summary") {
+      this.getSummaryList();
+      return;
+    }
+    if (e === "CDR") {
+      this.getCDRList();
+      return;
+    }
+    if (e === "Epitope") {
+      this.getEpitopeList();
+      return;
+    }
+  };
+  getOne(e) {
+    console.log(e);
+    const { dataid, datatype } = e;
+    let data = {
+      dataid,
+      datatype,
+    };
+
+    if (this.state.smilesData.name === "Drugs") {
+      this.props.history.push({
+        pathname: "/home/SearchDetails",
+        search: qs.stringify(data),
+      });
+    }
+    if (this.state.smilesData.name === "Target") {
+      this.props.history.push({
+        pathname: "/home/TargetDetails",
+        search: qs.stringify(data),
+      });
+    }
+  }
+
+  render() {
+    const {
+      smilesList,
+      loading,
+      EpitopeList,
+      CDRList,
+      visible,
+      pdbId,
+      total_num,
+      smilesData,
+    } = this.state;
+
+    const SummaryList = smilesList.map((item, index) => {
+      console.log(item);
+      return (
+        <Card
+          loading={loading}
+          hoverable
+          extra={<a onClick={() => this.getOne(item)}>{item.name}</a>}
+          style={{ width: "100%", marginBottom: "20px" }}
+          key={index}
+        >
+          <div
+            className="list-div-one"
+            onClick={() => this.TargetPdid(item.pdbCode)}
+          >
+            <div
+              className="list-div-left"
+              onClick={() => this.getPdid(item.id)}
+            >
+              {item.antibodyName}
+            </div>
+            <div className="list-div-right">
+              <div>
+                <span style={{ color: "blue" }}>{item.pdbCode}</span>
+              </div>
+              <div>
+                <span>{item.compound}</span>
+                {/* {item.compound} */}
+              </div>
+              <div>
+                <span> Organism：</span>
+                {item.organism}
+              </div>
+              <div>
+                <span> Resolution:：</span>
+                {item.resolution}
+              </div>
+              <div>
+                <span>Method:</span>
+                {item.method}
+              </div>
+              <div>
+                <span> Released date ：</span>
+                {item.releasedDate}
+              </div>
+            </div>
+            {/* <div className='btn-list'>
+            </div> */}
+
+            <div />
+          </div>
+        </Card>
+      );
+    });
+    return (
+      <div className="search-div">
+        <Modal
+          footer={null}
+          closable={false}
+          width={850}
+          visible={visible}
+          wrapClassName="vertical-center-modal"
+          onCancel={() => this.setState({ visible: false })}
+        >
+          <div className="Molstar-div">
+            <Molstar pdbId={this.state.pdbId} />
+          </div>
+        </Modal>
+        <Spin tip="Loading..." size="large" spinning={this.state.loading}>
+          <PageHeader
+            style={{
+              border: "1px solid rgb(235, 237, 240)",
+            }}
+            onBack={() => this.props.history.go(-1)}
+            title="返回"
+          />
+          {SummaryList}
+          <Pagination
+            showSizeChanger
+            onShowSizeChange={this.onShowSizeChange}
+            onChange={this.onChange}
+            total={total_num}
+          />
+        </Spin>
+      </div>
+    );
+  }
+}

src/routes/Home/SequenceDetails/index.css

+.SequenceDetails-div {
+    word-wrap: break-word; 
+}
+.SequenceDetails-div .title-div{
+    font-weight: 800;
+    font-size: 18px;
+}
+

src/routes/Home/SequenceDetails/index.js

+import React, { Component } from 'react'
+import qs from 'qs'
+import './index.css'
+export default class SequenceDetails extends Component {
+    state={
+        SequenceDetails:qs.parse(this.props.location.search.slice(1)).Sequence
+    }
+  render() {
+      const{SequenceDetails}=this.state
+    return (
+      <div className='SequenceDetails-div'>
+          <span className='title-div'> 
+          SequenceDetails:
+          </span>
+         
+          {SequenceDetails}
+      </div>
+    )
+  }
+}

src/routes/Home/StructureSearch/index.css

+.StructureSearch-div{
+    display: flex;
+    padding-top: 100px;
+}
+
+.StructureSearch-div .left-div{
+    width: 30%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+}
+.StructureSearch-div .left-div Button{
+    margin-bottom: 100px;
+    height: 50px;
+    width: 200px;
+}
+.StructureSearch-div .right-div{
+    width: 70%;
+    padding: 20px;
+}
+.StructureSearch-div .right-div .right-div-one{
+    display: flex;
+    align-items: center;
+    width: 100%;
+    /* justify-content: space-between; */
+}
+.StructureSearch-div .right-div .right-div-one .title-div{
+    width: 20%;
+}
+.sequencesearch-div .top-div {
+   margin-bottom: 100px;
+}
+.sequencesearch-div .sequence-center{
+    display: flex;
+    align-items: center;
+}
+.sequencesearch-div .TextArea-div{
+    width: 50%;
+}
+.bottom-butn button{
+    height: 50px;
+    width: 200px;
+}   
+.bottom-butn{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 50px;
+   
+}
+.sequencesearch-div  .login-form .form-one{
+    display: flex  ;
+    align-items: center  ;
+    
+  }
\ No newline at end of file

src/routes/Home/TargetDetails/index.css

+.Molstar-div{
+    height: 800px;
+    width: 800px;
+    
+}
+.Molstar-div2{
+    height: 500px;
+    width:100%;
+    
+}
+.search-details-div .title-div{
+    font-size: 30px;
+    font-weight: 600;
+}
+
+.search-details-div .div-list .list-one{
+    display: flex;
+align-items: center;
+}
+.search-details-div .div-list .list-one 
+div:first-child{
+    color: black;
+    font-weight: 500;
+    font-size: 18px;
+    margin-right: 10px;
+}
+.search-details-div 
+.ant-collapse > .ant-collapse-item > .ant-collapse-header{
+    font-weight: 500;
+    font-size: 18px;
+}
+.search-details-div .isShowDiv{
+    display: none;
+}
+.search-details-div .title-div-top{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+.search-details-div .Jsme-div{
+    border: 1px solid  black;
+}
+
+.search-details-div .Radio-div{
+    display: flex;
+    justify-content: flex-end;
+    height: 50px;
+    align-items: center;
+}
+
+.search-details-div .Sequence-div{
+    overflow:scroll;
+    display: flex;
+    
+}
+.search-details-div .zimu-div{
+    display: flex;
+}
+.search-details-div .Sequenceone-div{
+    margin-right: 5px;
+}
+
+
+.search-details-div .zimu-div div{
+    padding: 5px;
+}
+.res-color-A {
+    background-color: #e6e600;
+    color: #000;
+  }
+  
+  .res-color-C {
+    background-color: #b2b548;
+    color: #000;
+  }
+  
+  .res-color-D {
+    background-color: #e60a0a;
+    color: #fdff7b;
+  }
+  
+  .res-color-E {
+    background-color: #e60a0a;
+    color: #fdff7b;
+  }
+  
+  .res-color-F {
+    background-color: #18ff0b;
+    color: #000;
+  }
+  
+  .res-color-G {
+    background-color: #ff00f2;
+    color: #000;
+  }
+  
+  .res-color-H {
+    background-color: #0093dd;
+    color: #000;
+  }
+  
+  .res-color-I {
+    background-color: #e6e600;
+    color: #000;
+  }
+  
+  .res-color-K {
+    background-color: #145aff;
+    color: #fdff7b;
+  }
+  
+  .res-color-L {
+    background-color: #e6e600;
+    color: #000;
+  }
+  
+  .res-color-M {
+    background-color: #e6e600;
+    color: #000;
+  }
+  
+  .res-color-N {
+    background-color: #a70cc6;
+    color: #fdff7b;
+  }
+  
+  .res-color-P {
+    background-color: #c09;
+    color: #fdff7b;
+  }
+  
+  .res-color-Q {
+    background-color: #a70cc6;
+    color: #fdff7b;
+  }
+  
+  .res-color-R {
+    background-color: #145aff;
+    color: #fdff7b;
+  }
+  
+  .res-color-S {
+    background-color: #a70cc6;
+    color: #fdff7b;
+  }
+  
+  .res-color-T {
+    background-color: #a70cc6;
+    color: #fdff7b;
+  }
+  
+  .res-color-V {
+    background-color: #e6e600;
+    color: #000;
+  }
+  
+  .res-color-W {
+    background-color: #0bcf00;
+    color: #000;
+  }
+  
+  .res-color-Y {
+    background-color: #18ff0b;
+    color: #000;
+  }
+
+
+

src/routes/Home/index.js

+import React from "react";
+import {
+  Form,
+  Input,
+  Button,
+  Select,
+  Tabs,
+  message,
+  Radio,
+  Checkbox,
+  Row,
+  Col,
+  Card
+} from "antd";
+import LogoTitlte from "../../components/LogoTitlte/index";
+import { Jsme } from "jsme-react";
+import qs from "qs";
+import request from "../../utils/request";
+import "./style.css";
+const { TabPane } = Tabs;
+const { Option } = Select;
+const { Meta } = Card;
+class Home extends React.Component {
+  state = {
+    select_db: "Ligands",
+    data: "",
+    page: 1,
+    page_size: 10,
+    data_type: "smile",
+    target_class: "",
+    // target_families:'',
+    searchData: {
+      antibodyName: "",
+      species: "",
+      antibodyType: "",
+      antigenName: "",
+      clinicalIndication: "",
+      companies: "",
+      status: "",
+      pageNum: 1,
+      pageSize: 10,
+    },
+    disabled: true,
+    loading: false,
+    SelectList: [],
+    AntibodyTypeList: [],
+    StatusList: [],
+    draw: false,
+    classList: [],
+    classData: "All Class",
+    allClassList: {},
+    childClassList: [],
+    list: [
+      {
+        name: "general search",
+        state: true,
+        searchType: 1,
+      },
+      {
+        name: "cdr search",
+        state: false,
+        searchType: 2,
+      },
+    ],
+  };
+  componentDidMount() {
+    // this.getList()
+    // this.getSelectList()
+    // this.getClassList();
+  }
+  getantibodyName = (e) => {
+    const { value } = e.target;
+    let searchData = this.state.searchData;
+    searchData.antibodyName = value;
+    this.setState(() => ({ searchData: searchData }));
+  };
+  getAntigenName = (e) => {
+    const { value } = e.target;
+    let searchData = this.state.searchData;
+    searchData.antigenName = value;
+    this.setState(() => ({ searchData: searchData }));
+  };
+  getClinicalIndication = (e) => {
+    const { value } = e.target;
+    let searchData = this.state.searchData;
+    searchData.clinicalIndication = value;
+    this.setState(() => ({ searchData: searchData }));
+  };
+  getCompanies = (e) => {
+    const { value } = e.target;
+    let searchData = this.state.searchData;
+    searchData.companies = value;
+    this.setState(() => ({ searchData: searchData }));
+  };
+  getSpecies = (e) => {
+    let searchData = this.state.searchData;
+    searchData.species = e;
+    this.setState(() => ({ searchData: searchData }));
+  };
+  getAntibodyType = (e) => {
+    let searchData = this.state.searchData;
+    searchData.antibodyType = e;
+    this.setState(() => ({ searchData: searchData }));
+  };
+  getStatus = (e) => {
+    let searchData = this.state.searchData;
+    searchData.status = e;
+    this.setState(() => ({ searchData: searchData }));
+  };
+  getValue = (e) => {
+    const { value } = e.target;
+    let searchData = this.state.searchData;
+    searchData.antibodyName = value;
+    this.setState(() => ({ searchData: searchData }));
+  };
+  getClassList() {
+    console.log(qs.parse(this.props.location.search.slice(1)));
+    this.setState({ loading: true });
+    request
+      .get("/common/codes")
+      .then((res) => {
+        console.log(res);
+        if (res.data.code === 0) {
+          console.log(res.data.data);
+          this.setState({ SelectList: res.data.data.species });
+          this.setState({ AntibodyTypeList: res.data.data.antibodyType });
+          this.setState({ StatusList: res.data.data.status });
+          this.setState({ loading: false });
+        } else {
+          message.error(res.data.msg);
+        }
+      })
+      .catch((err) => {
+        console.error(err);
+      });
+  }
+  getindication = (e) => {
+    const { value } = e.target;
+    let searchData = this.state.searchData;
+    searchData.indication = value;
+    this.setState(() => ({ searchData: searchData }));
+  };
+  getTargetData = (e) => {
+    const { value } = e.target;
+    let searchData = this.state.searchData;
+    searchData.target_data = value;
+    this.setState(() => ({ searchData: searchData }));
+  };
+
+  onChangeRadio = (e) => {
+    console.log(e.target.value);
+    let value = e.target.value;
+    let searchData = this.state.searchData;
+    searchData.pdb_status = value;
+    this.setState({
+      searchData: searchData,
+    });
+  };
+  SearchIndication = () => {
+    let data = {
+      clinicalIndication: this.state.searchData.clinicalIndication,
+    };
+    this.props.history.push({
+      pathname: "/home/AutoimmuneDiseases",
+      search: qs.stringify(data),
+    });
+  };
+
+  getList = () => {
+    let data = this.state.searchData;
+    this.props.history.push({
+      pathname: "/home/StructureSearch",
+      search: qs.stringify(data),
+    });
+  };
+  getDraw = () => {
+    this.setState(() => ({ draw: !this.state.draw }));
+  };
+  compoundChange = (e) => {
+    console.log(e);
+    let searchData = this.state.searchData;
+    searchData.drugs_type = e;
+    this.setState(() => ({ searchData: searchData }));
+    console.log(this.state.searchData);
+  };
+  callback = (e) => {
+    console.log(e);
+    let searchData = this.state.searchData;
+    searchData.name = e;
+    this.setState(() => ({ searchData: searchData }));
+    console.log(this.state.searchData);
+  };
+  getJsme = () => {
+    console.log(1);
+  };
+  getListOne = (e) => {
+    console.log(1111);
+    let newList = this.state.list;
+    console.log(e);
+    newList.forEach((item, index) => {
+      item.state = false;
+      if (e === index) {
+        item.state = true;
+      }
+    });
+    this.setState({
+      list: newList,
+    });
+  };
+
+  render() {
+    const { list } = this.state;
+
+    const formItemLayout = {
+      labelCol: { span: 8 },
+      wrapperCol: { span: 12 },
+    };
+    const formTailLayout = {
+      labelCol: { span: 8 },
+      wrapperCol: { span: 12, offset: 8 },
+    };
+    const formTailLayout2 = {
+      labelCol: { span: 8 },
+      wrapperCol: { span: 13, offset: 8 },
+    };
+    return (
+      <div className="home">
+        <LogoTitlte />
+        <div className="home-div">
+          <div className="top-div">
+            {/* <Tabs onChange={this.callback} type="card">
+              <TabPane tab="search" key="1">
+              <Button type="primary" onClick={this.getList} >结构搜索</Button>
+              </TabPane>
+              <TabPane tab="tools" key="2">
+              <Button type="primary">docking retrosynthesis</Button>
+              </TabPane>
+            </Tabs> */}
+
+            <div className="home-top-div">
+              <div className="left-div">
+                {list.map((item, index) => {
+                  // return (
+                  //   <Button
+                  //     type={item.state ? "primary" : ""}
+                  //     size="large"
+                  //     shape="round"
+                  //     onClick={() => this.getListOne(index)}
+                  //     key={index}
+                  //   >
+                  //     {item.name}
+                  //   </Button>
+                  // );
+                })}
+              </div>
+              <div className="right-div">
+                {list[0].state && (
+                  <Button type="primary" onClick={this.getList}>
+                    结构搜索
+                  </Button>
+                )}
+                {list[1].state && (
+                  <Button type="primary">docking retrosynthesis</Button>
+                )}
+              </div>
+             
+            </div>
+          </div>
+        </div>
+        <div className="cardLIst">
+                <Card
+                  hoverable
+                  style={{ width: 240 }}
+                  cover={
+                    <img
+                      alt="example"
+                      src="http://52.83.169.190:3003/images/soluImg2.png"
+                    />
+                  }
+                >
+                  <Meta
+                    title="模块"
+                    description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean"
+                  />
+                </Card>
+                <Card
+                  hoverable
+                  style={{ width: 240 }}
+                  cover={
+                    <img
+                      alt="example"
+                      src="http://52.83.169.190:3003/images/soluImg2.png"
+                    />
+                  }
+                >
+                  <Meta
+                    title="模块"
+                    description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean"
+                  />
+                </Card>
+                <Card
+                  hoverable
+                  style={{ width: 240 }}
+                  cover={
+                    <img
+                      alt="example"
+                      src="http://52.83.169.190:3003/images/soluImg2.png"
+                    />
+                  }
+                >
+                  <Meta
+                    title="模块"
+                    description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean"
+                  />
+                </Card>
+                
+              </div>
+      </div>
+    );
+  }
+}
+
+export default Home;

src/routes/Home/style.css

+.home .top-div{
+    /* display: flex; */
+    justify-content: center;
+    align-items: center;
+    padding: 10px 0px;
+}
+.home .bottom-div{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.home .Radio-div{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 10px 0px;
+}
+.home .isShowDiv{
+    display: none;
+}
+.home .top-div label{
+    font-weight: 600;
+    font-size: 20px;
+}
+.home .Radio-div label{
+    font-size: 18px;
+    font-weight: 500;
+   
+}
+
+.home .Tips-div{
+    line-height: 28px;
+    width: 500px;
+    
+}
+.home .logo-div{
+    position: inherit;
+}
+.home .home-top-div{
+    display: flex;
+    padding-top: 100px;
+}
+
+.home .home-top-div .left-div{
+    width: 45%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+}
+.home .home-top-div .left-div Button,.home-top-div .right-div Button{
+    margin-bottom: 100px;
+    height: 50px;
+    width: 200px;
+}
+.home.home-top-div .right-div{
+    width: 50%;
+    padding: 20px;
+
+}
+.home .home-top-div .right-div .right-div-one{
+    display: flex;
+    align-items: center;
+    width: 100%;
+    /* justify-content: space-between; */
+}
+.home .home-top-div .right-div {
+    display: flex;
+    align-items: center;
+}
+
+.home .cardLIst{
+   display: flex;
+   justify-content: space-evenly;
+}
\ No newline at end of file

src/routes/Index/index.js

+import React from 'react'
+import {Layout} from 'antd'
+import SiderNav from '../../components/SiderNav'
+import ContentMain from '../../components/ContentMain'
+import HeaderBar from '../../components/HeaderBar'
+
+const {Sider, Header, Content, Footer} = Layout
+
+
+class Index extends React.Component{
+  state = {
+    collapsed: false
+  }
+
+  toggle = () => {
+    // console.log(this)  状态提升后，到底是谁调用的它
+    this.setState({
+      collapsed: !this.state.collapsed
+    })
+  }
+  render() {
+    // 设置Sider的minHeight可以使左右自适应对齐
+    return (
+      <div id='page'>
+        <Layout>
+          <Sider collapsible
+                 trigger={null}
+                 collapsed={this.state.collapsed}
+                 >
+            <SiderNav/>
+          </Sider>
+          <Layout>
+            <Header style={{background: '#fff', padding: '0 16px'}}>
+              <HeaderBar collapsed={this.state.collapsed} onToggle={this.toggle}/>
+            </Header>
+            <Content>
+              <ContentMain/>
+            </Content>
+            {/* <Footer></Footer> */}
+          </Layout>
+        </Layout>
+      </div>
+    );
+  }
+}
+export default Index
\ No newline at end of file

src/routes/Login/LoginForm.js

+import React from 'react'
+import { calculateWidth } from '../../utils/utils'
+import { withRouter } from 'react-router-dom'
+import { inject, observer } from 'mobx-react/index'
+import { Form, Input,message } from 'antd'
+import PromptBox from '../../components/PromptBox'
+import request  from '../../utils/request'
+import qs from 'qs'
+
+
+@withRouter @inject('appStore') @observer @Form.create()
+class LoginForm extends React.Component {
+  state = {
+    focusItem: -1,   //保存当前聚焦的input
+    code: ''         //验证码
+  }
+
+  componentDidMount () {
+    // this.createCode()
+  }
+
+  /**
+   * 生成验证码
+   */
+  // createCode = () => {
+  //   const ctx = this.canvas.getContext('2d')
+  //   const chars = [1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'j', 'k', 'l', 'm', 'n', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
+  //   let code = ''
+  //   ctx.clearRect(0, 0, 80, 39)
+  //   for (let i = 0; i < 4; i++) {
+  //     const char = chars[randomNum(0, 57)]
+  //     code += char
+  //     ctx.font = randomNum(20, 25) + 'px SimHei'  //设置字体随机大小
+  //     ctx.fillStyle = '#D3D7F7'
+  //     ctx.textBaseline = 'middle'
+  //     ctx.shadowOffsetX = randomNum(-3, 3)
+  //     ctx.shadowOffsetY = randomNum(-3, 3)
+  //     ctx.shadowBlur = randomNum(-3, 3)
+  //     ctx.shadowColor = 'rgba(0, 0, 0, 0.3)'
+  //     let x = 80 / 5 * (i + 1)
+  //     let y = 39 / 2
+  //     let deg = randomNum(-25, 25)
+  //     /**设置旋转角度和坐标原点**/
+  //     ctx.translate(x, y)
+  //     ctx.rotate(deg * Math.PI / 180)
+  //     ctx.fillText(char, 0, 0)
+  //     /**恢复旋转角度和坐标原点**/
+  //     ctx.rotate(-deg * Math.PI / 180)
+  //     ctx.translate(-x, -y)
+  //   }
+  //   this.setState({
+  //     code
+  //   })
+  // }
+  loginSubmit = (e) => {
+    e.preventDefault()
+    this.setState({
+      focusItem: -1
+    })
+    this.props.form.validateFields((err, values) => {
+      // this.props.appStore.toggleLogin(true, {username: values.username})
+      // const {from} = this.props.location.state || {from: {pathname: '/'}}
+      // this.props.history.push(from)
+      
+      if (!err) {
+        // 表单登录时，若验证码长度小于4则不会验证，所以我们这里要手动验证一次，线上的未修复
+        // if (this.state.code.toUpperCase() !== values.verification.toUpperCase()) {
+        //   this.props.form.setFields({
+        //     verification: {
+        //       value: values.verification,
+        //       errors: [new Error('验证码错误')]
+        //     }
+        //   })
+        //   return
+        // }
+        // console.log();
+
+        // const users = this.props.appStore.users
+        // // 检测用户名是否存在
+        // const result = users.find(item => item.username === values.username)
+        // if (!result) {
+        //   this.props.form.setFields({
+        //     username: {
+        //       value: values.username,
+        //       errors: [new Error('用户名不存在')]
+        //     }
+        //   })
+        //   return
+        // } else {
+        //   //检测密码是否错误
+        //   if (result.passwd !== values.passwd) {
+        //     this.props.form.setFields({
+        //       passwd: {
+        //         value: values.passwd,
+        //         errors: [new Error('密码错误')]
+        //       }
+        //     })
+        //     return
+        //   }
+        // }
+        // this.props.appStore.toggleLogin(true, {username: values.username})
+        // const {from} = this.props.location.state || {from: {pathname: '/'}}
+        // this.props.history.push(from)
+        request.post('/pub/login', values)
+        .then(res => {
+          console.log(res)
+          if (res.data.code===200) {
+          window.localStorage.setItem('token', res.data.result.token) 
+          this.props.appStore.toggleLogin(true, {userAccount: values.userAccount})
+          const {from} = this.props.location.state || {from: {pathname: '/'}}
+          this.props.history.push(from)
+          }
+          else{
+            message.error(res.data.message);
+          }
+        })
+        .catch(err => {
+          console.error(err); 
+        })
+
+ 
+      }
+    })
+  }
+  register = () => {
+    this.props.switchShowBox('register')
+    setTimeout(() => this.props.form.resetFields(), 500)
+  }
+
+  render () {
+    const {getFieldDecorator, getFieldError} = this.props.form
+    const {focusItem,} = this.state
+    return (
+      <div className={this.props.className}>
+        <h3 className='title'>管理员登录</h3>
+        <Form onSubmit={this.loginSubmit}>
+          <Form.Item help={getFieldError('userAccount') &&
+          <PromptBox info={getFieldError('userAccount')} width={calculateWidth(getFieldError('userAccount'))}/>}>
+            {getFieldDecorator('userAccount', {
+              rules: [{required: true, message: '请输入用户名'}]
+            })(
+              <Input
+                onFocus={() => this.setState({focusItem: 0})}
+                onBlur={() => this.setState({focusItem: -1})}
+                maxLength={16}
+                placeholder='用户名'
+                addonBefore={<span className='iconfont icon-User' style={focusItem === 0 ? styles.focus : {}}/>}/>
+            )}
+          </Form.Item>
+          <Form.Item help={getFieldError('userPwd') &&
+          <PromptBox info={getFieldError('userPwd')} width={calculateWidth(getFieldError('userPwd'))}/>}>
+            {getFieldDecorator('userPwd', {
+              rules: [{required: true, message: '请输入密码'}]
+            })(
+              <Input
+                onFocus={() => this.setState({focusItem: 1})}
+                onBlur={() => this.setState({focusItem: -1})}
+                type='userPwd'
+                maxLength={16}
+                placeholder='密码'
+                addonBefore={<span className='iconfont icon-suo1' style={focusItem === 1 ? styles.focus : {}}/>}/>
+            )}
+          </Form.Item>
+          {/* <Form.Item help={getFieldError('verification') &&
+          <PromptBox info={getFieldError('verification')} width={calculateWidth(getFieldError('verification'))}/>}>
+            {getFieldDecorator('verification', {
+              validateFirst: true,
+              rules: [
+                {required: true, message: '请输入验证码'},
+                {
+                  validator: (rule, value, callback) => {
+                    if (value.length >= 4 && code.toUpperCase() !== value.toUpperCase()) {
+                      callback('验证码错误')
+                    }
+                    callback()
+                  }
+                }
+              ]
+            })(
+              <Row>
+                <Col span={15}>
+                  <Input
+                    onFocus={() => this.setState({focusItem: 2})}
+                    onBlur={() => this.setState({focusItem: -1})}
+                    maxLength={4}
+                    placeholder='验证码'
+                    addonBefore={<span className='iconfont icon-securityCode-b'
+                                       style={focusItem === 2 ? styles.focus : {}}/>}/>
+                </Col>
+                <Col span={9}>
+                  <canvas onClick={this.createCode} width="80" height='39' ref={el => this.canvas = el}/>
+                </Col>
+              </Row>
+            )}
+          </Form.Item> */}
+          <div className='bottom'>
+            <input className='loginBtn' type="submit" value='登录'/>
+            {/* <span className='registerBtn' onClick={this.register}>注册</span> */}
+          </div>
+        </Form>
+        <div className='footer'>
+          <div>欢迎登陆雅深智慧平台</div>
+        </div>
+      </div>
+    )
+  }
+}
+
+const styles = {
+  focus: {
+    width: '20px',
+    opacity: 1
+  },
+}
+
+export default LoginForm
\ No newline at end of file

src/routes/Login/RegisterForm.js

+import React from 'react'
+import { Form, Input, message } from 'antd'
+import { inject, observer } from 'mobx-react/index'
+import { calculateWidth } from '../../utils/utils'
+import PromptBox from '../../components/PromptBox'
+
+
+@inject('appStore') @observer @Form.create()
+class RegisterForm extends React.Component {
+  state = {
+    focusItem: -1
+  }
+  registerSubmit = (e) => {
+    e.preventDefault()
+    this.setState({
+      focusItem: -1
+    })
+    this.props.form.validateFields((err, values) => {
+      if (!err) {
+        const users = this.props.appStore.users
+        // 检测用户名是否存在
+        const result = users.find(item => item.username === values.registerUsername)
+        if (result) {
+          this.props.form.setFields({
+            registerUsername: {
+              value: values.registerUsername,
+              errors: [new Error('用户名已存在')]
+            }
+          })
+          return
+        }
+
+        const obj = [...this.props.appStore.users, {
+          username: values.registerUsername,
+          password: values.registerPassword
+        }]
+        localStorage.setItem('users', JSON.stringify(obj))
+        this.props.appStore.initUsers()
+        message.success('注册成功')
+      }
+    })
+  }
+  gobackLogin = () => {
+    this.props.switchShowBox('login')
+    setTimeout(() => this.props.form.resetFields(), 500)
+  }
+
+  render () {
+    const {getFieldDecorator, getFieldError, getFieldValue} = this.props.form
+    const {focusItem} = this.state
+    return (
+      <div className={this.props.className}>
+        <h3 className='title'>管理员注册</h3>
+        <Form onSubmit={this.registerSubmit}>
+          <Form.Item help={getFieldError('registerUsername') && <PromptBox info={getFieldError('registerUsername')}
+                                                                           width={calculateWidth(getFieldError('registerUsername'))}/>}>
+            {getFieldDecorator('registerUsername', {
+              validateFirst: true,
+              rules: [
+                {required: true, message: '用户名不能为空'},
+                {pattern: '^[^ ]+$', message: '不能输入空格'},
+              ]
+            })(
+              <Input
+                onFocus={() => this.setState({focusItem: 0})}
+                onBlur={() => this.setState({focusItem: -1})}
+                maxLength={16}
+                placeholder='用户名'
+                addonBefore={<span className='iconfont icon-User' style={focusItem === 0 ? styles.focus : {}}/>}/>
+            )}
+          </Form.Item>
+          <Form.Item help={getFieldError('registerPassword') && <PromptBox info={getFieldError('registerPassword')}
+                                                                           width={calculateWidth(getFieldError('registerPassword'))}/>}>
+            {getFieldDecorator('registerPassword', {
+              validateFirst: true,
+              rules: [
+                {required: true, message: '密码不能为空'},
+                {pattern: '^[^ ]+$', message: '密码不能有空格'}
+              ]
+            })(
+              <Input
+                onFocus={() => this.setState({focusItem: 1})}
+                onBlur={() => this.setState({focusItem: -1})}
+                type='password'
+                maxLength={16}
+                placeholder='密码'
+                addonBefore={<span className='iconfont icon-suo1' style={focusItem === 1 ? styles.focus : {}}/>}/>
+            )}
+          </Form.Item>
+          <Form.Item help={getFieldError('confirmPassword') && <PromptBox info={getFieldError('confirmPassword')}
+                                                                          width={calculateWidth(getFieldError('confirmPassword'))}/>}>
+            {getFieldDecorator('confirmPassword', {
+              validateFirst: true,
+              rules: [
+                {required: true, message: '请确认密码'},
+                {
+                  validator: (rule, value, callback) => {
+                    if (value && value !== getFieldValue('registerPassword')) {
+                      callback('两次输入不一致！')
+                    }
+                    callback()
+                  }
+                },
+              ]
+            })(
+              <Input
+                onFocus={() => this.setState({focusItem: 2})}
+                onBlur={() => this.setState({focusItem: -1})}
+                type='password'
+                maxLength={16}
+                placeholder='确认密码'
+                addonBefore={<span className='iconfont icon-suo1' style={focusItem === 2 ? styles.focus : {}}/>}/>
+            )}
+          </Form.Item>
+          <div className='bottom'>
+            <input className='loginBtn' type="submit" value='注册'/>
+            <span className='registerBtn' onClick={this.gobackLogin}>返回登录</span>
+          </div>
+        </Form>
+        <div className='footer'>
+          <div>欢迎登陆后台管理系统</div>
+        </div>
+      </div>
+    )
+  }
+}
+
+const styles = {
+  focus: {
+    width: '20px',
+    opacity: 1
+  },
+}
+
+export default RegisterForm
\ No newline at end of file