commit 20c1fa08dc78024a19242ca67431aae61cb4eebd
Author: Zichao Lin <earthjasonlin@163.com>
Date:   Sun Feb 25 08:27:01 2024 +0800

    init

diff --git a/.eslintrc.yaml b/.eslintrc.yaml
new file mode 100644
index 0000000..640b4d3
--- /dev/null
+++ b/.eslintrc.yaml
@@ -0,0 +1,43 @@
+extends: 
+  - eslint:recommended
+  - plugin:react/recommended
+  - plugin:@typescript-eslint/recommended
+parser: '@typescript-eslint/parser'
+plugins:
+  - react
+  - react-hooks
+  - '@typescript-eslint'
+parserOptions:
+  sourceType: module
+  ecmaVersion: 2020
+  ecmaFeatures:
+      jsx: true
+env:
+  es6: true
+  browser: true
+  node: true
+  jest: true
+
+settings:
+  react:
+    version: detect
+ignorePatterns:
+  - node_modules
+rules:
+  react/prop-types: 0
+  react-hooks/rules-of-hooks: "error"
+  # TODO: 修改添加deps后出现的死循环
+  react-hooks/exhaustive-deps: 0
+  '@typescript-eslint/explicit-function-return-type': 0
+  '@typescript-eslint/no-explicit-any': 0
+  '@typescript-eslint/camelcase': 0
+  '@typescript-eslint/no-non-null-assertion': 0
+  '@typescript-eslint/no-unused-vars': 0
+
+overrides:
+  - files: ['*.js', '*.jsx']
+    rules:
+      '@typescript-eslint/camelcase': 0
+  - files: ['config/*.js', 'scripts/*.js']
+    rules:
+      '@typescript-eslint/no-var-requires': 0
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..911e1ee
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,25 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+dist/
\ No newline at end of file
diff --git a/.huskyrc b/.huskyrc
new file mode 100644
index 0000000..ecd1535
--- /dev/null
+++ b/.huskyrc
@@ -0,0 +1 @@
+export PATH="/usr/local/bin:$PATH"
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..5fcd8a7
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,3 @@
+{
+  "tabWidth": 4
+}
diff --git a/.travis.yml b/.travis.yml
new file mode 100644
index 0000000..1519c10
--- /dev/null
+++ b/.travis.yml
@@ -0,0 +1,8 @@
+language: node_js
+node_js:
+  - 12.16.3
+before_script:
+  - yarn install
+script:
+  - CI=false yarn run build
+  - yarn run test
\ No newline at end of file
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..89b278a
--- /dev/null
+++ b/README.md
@@ -0,0 +1,68 @@
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `yarn start`
+
+Runs the app in the development mode.<br />
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+The page will reload if you make edits.<br />
+You will also see any lint errors in the console.
+
+### `yarn test`
+
+Launches the test runner in the interactive watch mode.<br />
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+
+### `yarn build`
+
+Builds the app for production to the `build` folder.<br />
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.<br />
+Your app is ready to be deployed!
+
+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+
+### `yarn eject`
+
+**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
+
+If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+
+Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
+
+You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
+
+## Learn More
+
+You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+
+To learn React, check out the [React documentation](https://reactjs.org/).
+
+### Code Splitting
+
+This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
+
+### Analyzing the Bundle Size
+
+This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
+
+### Making a Progressive Web App
+
+This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
+
+### Advanced Configuration
+
+This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
+
+### Deployment
+
+This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
+
+### `yarn build` fails to minify
+
+This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify
diff --git a/config/env.js b/config/env.js
new file mode 100644
index 0000000..211711b
--- /dev/null
+++ b/config/env.js
@@ -0,0 +1,93 @@
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+const paths = require('./paths');
+
+// Make sure that including paths.js after env.js will read .env variables.
+delete require.cache[require.resolve('./paths')];
+
+const NODE_ENV = process.env.NODE_ENV;
+if (!NODE_ENV) {
+  throw new Error(
+    'The NODE_ENV environment variable is required but was not specified.'
+  );
+}
+
+// https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
+const dotenvFiles = [
+  `${paths.dotenv}.${NODE_ENV}.local`,
+  `${paths.dotenv}.${NODE_ENV}`,
+  // Don't include `.env.local` for `test` environment
+  // since normally you expect tests to produce the same
+  // results for everyone
+  NODE_ENV !== 'test' && `${paths.dotenv}.local`,
+  paths.dotenv,
+].filter(Boolean);
+
+// Load environment variables from .env* files. Suppress warnings using silent
+// if this file is missing. dotenv will never modify any environment variables
+// that have already been set.  Variable expansion is supported in .env files.
+// https://github.com/motdotla/dotenv
+// https://github.com/motdotla/dotenv-expand
+dotenvFiles.forEach(dotenvFile => {
+  if (fs.existsSync(dotenvFile)) {
+    require('dotenv-expand')(
+      require('dotenv').config({
+        path: dotenvFile,
+      })
+    );
+  }
+});
+
+// We support resolving modules according to `NODE_PATH`.
+// This lets you use absolute paths in imports inside large monorepos:
+// https://github.com/facebook/create-react-app/issues/253.
+// It works similar to `NODE_PATH` in Node itself:
+// https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
+// Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
+// Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims.
+// https://github.com/facebook/create-react-app/issues/1023#issuecomment-265344421
+// We also resolve them to make sure all tools using them work consistently.
+const appDirectory = fs.realpathSync(process.cwd());
+process.env.NODE_PATH = (process.env.NODE_PATH || '')
+  .split(path.delimiter)
+  .filter(folder => folder && !path.isAbsolute(folder))
+  .map(folder => path.resolve(appDirectory, folder))
+  .join(path.delimiter);
+
+// Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
+// injected into the application via DefinePlugin in Webpack configuration.
+const REACT_APP = /^REACT_APP_/i;
+
+function getClientEnvironment(publicUrl) {
+  const raw = Object.keys(process.env)
+    .filter(key => REACT_APP.test(key))
+    .reduce(
+      (env, key) => {
+        env[key] = process.env[key];
+        return env;
+      },
+      {
+        // Useful for determining whether we’re running in production mode.
+        // Most importantly, it switches React into the correct mode.
+        NODE_ENV: process.env.NODE_ENV || 'development',
+        // Useful for resolving the correct path to static assets in `public`.
+        // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
+        // This should only be used as an escape hatch. Normally you would put
+        // images into the `src` and `import` them in code to get their paths.
+        PUBLIC_URL: publicUrl,
+      }
+    );
+  // 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;
diff --git a/config/jest/cssTransform.js b/config/jest/cssTransform.js
new file mode 100644
index 0000000..8f65114
--- /dev/null
+++ b/config/jest/cssTransform.js
@@ -0,0 +1,14 @@
+'use strict';
+
+// This is a custom Jest transformer turning style imports into empty objects.
+// http://facebook.github.io/jest/docs/en/webpack.html
+
+module.exports = {
+  process() {
+    return 'module.exports = {};';
+  },
+  getCacheKey() {
+    // The output is always the same.
+    return 'cssTransform';
+  },
+};
diff --git a/config/jest/fileTransform.js b/config/jest/fileTransform.js
new file mode 100644
index 0000000..aab6761
--- /dev/null
+++ b/config/jest/fileTransform.js
@@ -0,0 +1,40 @@
+'use strict';
+
+const path = require('path');
+const camelcase = require('camelcase');
+
+// This is a custom Jest transformer turning file imports into filenames.
+// http://facebook.github.io/jest/docs/en/webpack.html
+
+module.exports = {
+  process(src, filename) {
+    const assetFilename = JSON.stringify(path.basename(filename));
+
+    if (filename.match(/\.svg$/)) {
+      // Based on how SVGR generates a component name:
+      // https://github.com/smooth-code/svgr/blob/01b194cf967347d43d4cbe6b434404731b87cf27/packages/core/src/state.js#L6
+      const pascalCaseFilename = camelcase(path.parse(filename).name, {
+        pascalCase: true,
+      });
+      const componentName = `Svg${pascalCaseFilename}`;
+      return `const React = require('react');
+      module.exports = {
+        __esModule: true,
+        default: ${assetFilename},
+        ReactComponent: React.forwardRef(function ${componentName}(props, ref) {
+          return {
+            $$typeof: Symbol.for('react.element'),
+            type: 'svg',
+            ref: ref,
+            key: null,
+            props: Object.assign({}, props, {
+              children: ${assetFilename}
+            })
+          };
+        }),
+      };`;
+    }
+
+    return `module.exports = ${assetFilename};`;
+  },
+};
diff --git a/config/modules.js b/config/modules.js
new file mode 100644
index 0000000..c84210a
--- /dev/null
+++ b/config/modules.js
@@ -0,0 +1,141 @@
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+const paths = require('./paths');
+const chalk = require('react-dev-utils/chalk');
+const resolve = require('resolve');
+
+/**
+ * Get additional module paths based on the baseUrl of a compilerOptions object.
+ *
+ * @param {Object} options
+ */
+function getAdditionalModulePaths(options = {}) {
+  const baseUrl = options.baseUrl;
+
+  // We need to explicitly check for null and undefined (and not a falsy value) because
+  // TypeScript treats an empty string as `.`.
+  if (baseUrl == null) {
+    // If there's no baseUrl set we respect NODE_PATH
+    // Note that NODE_PATH is deprecated and will be removed
+    // in the next major release of create-react-app.
+
+    const nodePath = process.env.NODE_PATH || '';
+    return nodePath.split(path.delimiter).filter(Boolean);
+  }
+
+  const baseUrlResolved = path.resolve(paths.appPath, baseUrl);
+
+  // We don't need to do anything if `baseUrl` is set to `node_modules`. This is
+  // the default behavior.
+  if (path.relative(paths.appNodeModules, baseUrlResolved) === '') {
+    return null;
+  }
+
+  // Allow the user set the `baseUrl` to `appSrc`.
+  if (path.relative(paths.appSrc, baseUrlResolved) === '') {
+    return [paths.appSrc];
+  }
+
+  // If the path is equal to the root directory we ignore it here.
+  // We don't want to allow importing from the root directly as source files are
+  // not transpiled outside of `src`. We do allow importing them with the
+  // absolute path (e.g. `src/Components/Button.js`) but we set that up with
+  // an alias.
+  if (path.relative(paths.appPath, baseUrlResolved) === '') {
+    return null;
+  }
+
+  // Otherwise, throw an error.
+  throw new Error(
+    chalk.red.bold(
+      "Your project's `baseUrl` can only be set to `src` or `node_modules`." +
+        ' Create React App does not support other values at this time.'
+    )
+  );
+}
+
+/**
+ * Get webpack aliases based on the baseUrl of a compilerOptions object.
+ *
+ * @param {*} options
+ */
+function getWebpackAliases(options = {}) {
+  const baseUrl = options.baseUrl;
+
+  if (!baseUrl) {
+    return {};
+  }
+
+  const baseUrlResolved = path.resolve(paths.appPath, baseUrl);
+
+  if (path.relative(paths.appPath, baseUrlResolved) === '') {
+    return {
+      src: paths.appSrc,
+    };
+  }
+}
+
+/**
+ * Get jest aliases based on the baseUrl of a compilerOptions object.
+ *
+ * @param {*} options
+ */
+function getJestAliases(options = {}) {
+  const baseUrl = options.baseUrl;
+
+  if (!baseUrl) {
+    return {};
+  }
+
+  const baseUrlResolved = path.resolve(paths.appPath, baseUrl);
+
+  if (path.relative(paths.appPath, baseUrlResolved) === '') {
+    return {
+      'src/(.*)$': '<rootDir>/src/$1',
+    };
+  }
+}
+
+function getModules() {
+  // Check if TypeScript is setup
+  const hasTsConfig = fs.existsSync(paths.appTsConfig);
+  const hasJsConfig = fs.existsSync(paths.appJsConfig);
+
+  if (hasTsConfig && hasJsConfig) {
+    throw new Error(
+      'You have both a tsconfig.json and a jsconfig.json. If you are using TypeScript please remove your jsconfig.json file.'
+    );
+  }
+
+  let config;
+
+  // If there's a tsconfig.json we assume it's a
+  // TypeScript project and set up the config
+  // based on tsconfig.json
+  if (hasTsConfig) {
+    const ts = require(resolve.sync('typescript', {
+      basedir: paths.appNodeModules,
+    }));
+    config = ts.readConfigFile(paths.appTsConfig, ts.sys.readFile).config;
+    // Otherwise we'll check if there is jsconfig.json
+    // for non TS projects.
+  } else if (hasJsConfig) {
+    config = require(paths.appJsConfig);
+  }
+
+  config = config || {};
+  const options = config.compilerOptions || {};
+
+  const additionalModulePaths = getAdditionalModulePaths(options);
+
+  return {
+    additionalModulePaths: additionalModulePaths,
+    webpackAliases: getWebpackAliases(options),
+    jestAliases: getJestAliases(options),
+    hasTsConfig,
+  };
+}
+
+module.exports = getModules();
diff --git a/config/paths.js b/config/paths.js
new file mode 100644
index 0000000..61b9240
--- /dev/null
+++ b/config/paths.js
@@ -0,0 +1,89 @@
+"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/facebook/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(inputPath, needsSlash) {
+    const hasSlash = inputPath.endsWith("/");
+    if (hasSlash && !needsSlash) {
+        return inputPath.substr(0, inputPath.length - 1);
+    } else if (!hasSlash && needsSlash) {
+        return `${inputPath}/`;
+    } else {
+        return inputPath;
+    }
+}
+
+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);
+}
+
+const moduleFileExtensions = [
+    "web.mjs",
+    "mjs",
+    "web.js",
+    "js",
+    "web.ts",
+    "ts",
+    "web.tsx",
+    "tsx",
+    "json",
+    "web.jsx",
+    "jsx",
+];
+
+// Resolve file paths in the same order as webpack
+const resolveModule = (resolveFn, filePath) => {
+    const extension = moduleFileExtensions.find((extension) =>
+        fs.existsSync(resolveFn(`${filePath}.${extension}`))
+    );
+
+    if (extension) {
+        return resolveFn(`${filePath}.${extension}`);
+    }
+
+    return resolveFn(`${filePath}.js`);
+};
+
+// config after eject: we're in ./config/
+module.exports = {
+    dotenv: resolveApp(".env"),
+    appPath: resolveApp("."),
+    appBuild: resolveApp("build"),
+    appPublic: resolveApp("public"),
+    appHtml: resolveApp("public/index.html"),
+    appIndexJs: resolveModule(resolveApp, "src/index"),
+    appPackageJson: resolveApp("package.json"),
+    appSrc: resolveApp("src"),
+    appTsConfig: resolveApp("tsconfig.json"),
+    appJsConfig: resolveApp("jsconfig.json"),
+    yarnLockFile: resolveApp("yarn.lock"),
+    testsSetup: resolveModule(resolveApp, "src/setupTests"),
+    proxySetup: resolveApp("src/setupProxy.js"),
+    appNodeModules: resolveApp("node_modules"),
+    publicUrl: getPublicUrl(resolveApp("package.json")),
+    servedPath: getServedPath(resolveApp("package.json")),
+    i18nPath: resolveApp("public/locales"),
+};
+
+module.exports.moduleFileExtensions = moduleFileExtensions;
diff --git a/config/pnpTs.js b/config/pnpTs.js
new file mode 100644
index 0000000..d1b0539
--- /dev/null
+++ b/config/pnpTs.js
@@ -0,0 +1,35 @@
+'use strict';
+
+const { resolveModuleName } = require('ts-pnp');
+
+exports.resolveModuleName = (
+  typescript,
+  moduleName,
+  containingFile,
+  compilerOptions,
+  resolutionHost
+) => {
+  return resolveModuleName(
+    moduleName,
+    containingFile,
+    compilerOptions,
+    resolutionHost,
+    typescript.resolveModuleName
+  );
+};
+
+exports.resolveTypeReferenceDirective = (
+  typescript,
+  moduleName,
+  containingFile,
+  compilerOptions,
+  resolutionHost
+) => {
+  return resolveModuleName(
+    moduleName,
+    containingFile,
+    compilerOptions,
+    resolutionHost,
+    typescript.resolveTypeReferenceDirective
+  );
+};
diff --git a/config/webpack.config.js b/config/webpack.config.js
new file mode 100644
index 0000000..144b0e6
--- /dev/null
+++ b/config/webpack.config.js
@@ -0,0 +1,780 @@
+'use strict';
+
+const fs = require("fs");
+const isWsl = require("is-wsl");
+const path = require("path");
+const webpack = require("webpack");
+const resolve = require("resolve");
+const PnpWebpackPlugin = require("pnp-webpack-plugin");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const CaseSensitivePathsPlugin = require("case-sensitive-paths-webpack-plugin");
+const InlineChunkHtmlPlugin = require("react-dev-utils/InlineChunkHtmlPlugin");
+const TerserPlugin = require("terser-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
+const safePostCssParser = require("postcss-safe-parser");
+const ManifestPlugin = require("webpack-manifest-plugin");
+const InterpolateHtmlPlugin = require("react-dev-utils/InterpolateHtmlPlugin");
+const WorkboxWebpackPlugin = require("workbox-webpack-plugin");
+const WatchMissingNodeModulesPlugin = require("react-dev-utils/WatchMissingNodeModulesPlugin");
+const ModuleScopePlugin = require("react-dev-utils/ModuleScopePlugin");
+const getCSSModuleLocalIdent = require("react-dev-utils/getCSSModuleLocalIdent");
+const paths = require("./paths");
+const modules = require("./modules");
+const getClientEnvironment = require("./env");
+const ModuleNotFoundPlugin = require("react-dev-utils/ModuleNotFoundPlugin");
+const ForkTsCheckerWebpackPlugin = require("react-dev-utils/ForkTsCheckerWebpackPlugin");
+const typescriptFormatter = require("react-dev-utils/typescriptFormatter");
+const eslint = require("eslint");
+const CopyPlugin = require("copy-webpack-plugin");
+const MonacoWebpackPlugin = require("monaco-editor-webpack-plugin");
+
+const postcssNormalize = require("postcss-normalize");
+
+const appPackageJson = require(paths.appPackageJson);
+//const FileListPlugin = require("@abslant/cd-js-injector/src");
+
+// Source maps are resource heavy and can cause out of memory issue for large source files.
+const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
+// Some apps do not need the benefits of saving a web request, so not inlining the chunk
+// makes for a smoother build process.
+const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false';
+
+const imageInlineSizeLimit = parseInt(
+  process.env.IMAGE_INLINE_SIZE_LIMIT || '10000'
+);
+
+// Check if TypeScript is setup
+const useTypeScript = fs.existsSync(paths.appTsConfig);
+
+// style files regexes
+const cssRegex = /\.css$/;
+const cssModuleRegex = /\.module\.css$/;
+const sassRegex = /\.(scss|sass)$/;
+const sassModuleRegex = /\.module\.(scss|sass)$/;
+//const mainJSRegex = /main\.(.+)\.chunk\.js$/;
+//const mainJSRegex = /main\.chunk\.js$/;
+
+// This is the production and development configuration.
+// It is focused on developer experience, fast rebuilds, and a minimal bundle.
+module.exports = function (webpackEnv) {
+  const isEnvDevelopment = webpackEnv === 'development';
+  const isEnvProduction = webpackEnv === 'production';
+
+    // Variable used for enabling profiling in Production
+    // passed into alias object. Uses a flag if passed into the build command
+    const isEnvProductionProfile =
+      isEnvProduction && process.argv.includes('--profile');
+
+    // Webpack uses `publicPath` to determine where the app is being served from.
+    // It requires a trailing slash, or the file assets will get an incorrect path.
+    // In development, we always serve from the root. This makes config easier.
+    const publicPath = isEnvProduction
+      ? paths.servedPath
+      : isEnvDevelopment && '/';
+    // Some apps do not use client-side routing with pushState.
+    // For these, "homepage" can be set to "." to enable relative asset paths.
+    const shouldUseRelativeAssetPaths = publicPath === './';
+
+    // `publicUrl` is just like `publicPath`, but we will provide it to our app
+    // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
+    // Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
+    const publicUrl = isEnvProduction
+        ? publicPath.slice(0, -1)
+        : isEnvDevelopment && '';
+    // Get environment variables to inject into our app.
+    const env = getClientEnvironment(publicUrl);
+
+    // common function to get style loaders
+    const getStyleLoaders = (cssOptions, preProcessor) => {
+        const loaders = [
+            isEnvDevelopment && require.resolve("style-loader"),
+            isEnvProduction && {
+                loader: MiniCssExtractPlugin.loader,
+                options: shouldUseRelativeAssetPaths
+                    ? { publicPath: "../../" }
+                    : {},
+            },
+            {
+                loader: require.resolve("css-loader"),
+                options: cssOptions,
+            },
+            {
+                // Options for PostCSS as we reference these options twice
+                // Adds vendor prefixing based on your specified browser support in
+                // package.json
+                loader: require.resolve("postcss-loader"),
+                options: {
+                    // Necessary for external CSS imports to work
+                    // https://github.com/facebook/create-react-app/issues/2677
+                    ident: "postcss",
+                    plugins: () => [
+                        require("postcss-flexbugs-fixes"),
+                        require("postcss-preset-env")({
+                            autoprefixer: {
+                                flexbox: "no-2009",
+                            },
+                            stage: 3,
+                        }),
+                        // Adds PostCSS Normalize as the reset css with default options,
+                        // so that it honors browserslist config in package.json
+                        // which in turn let's users customize the target behavior as per their needs.
+                        postcssNormalize(),
+                    ],
+                    sourceMap: isEnvProduction && shouldUseSourceMap,
+                },
+            },
+        ].filter(Boolean);
+        if (preProcessor) {
+            loaders.push(
+                {
+                    loader: require.resolve("resolve-url-loader"),
+                    options: {
+                        sourceMap: isEnvProduction && shouldUseSourceMap,
+                    },
+                },
+                {
+                    loader: require.resolve(preProcessor),
+                    options: {
+                        sourceMap: true,
+                    },
+                }
+            );
+        }
+        return loaders;
+    };
+
+    return {
+        mode: isEnvProduction
+            ? "production"
+            : isEnvDevelopment && "development",
+        // Stop compilation early in production
+        bail: isEnvProduction,
+        devtool: isEnvProduction
+            ? shouldUseSourceMap
+                ? "source-map"
+                : false
+            : isEnvDevelopment && "cheap-module-source-map",
+        // These are the "entry points" to our application.
+        // This means they will be the "root" imports that are included in JS bundle.
+        entry: [
+            // Include an alternative client for WebpackDevServer. A client's job is to
+            // connect to WebpackDevServer by a socket and get notified about changes.
+            // When you save a file, the client will either apply hot updates (in case
+            // of CSS changes), or refresh the page (in case of JS changes). When you
+            // make a syntax error, this client will display a syntax error overlay.
+            // Note: instead of the default WebpackDevServer client, we use a custom one
+            // to bring better experience for Create React App users. You can replace
+            // the line below with these two lines if you prefer the stock client:
+            // require.resolve('webpack-dev-server/client') + '?/',
+            // require.resolve('webpack/hot/dev-server'),
+            isEnvDevelopment &&
+                require.resolve("react-dev-utils/webpackHotDevClient"),
+            // Finally, this is your app's code:
+            paths.appIndexJs,
+            // We include the app code last so that if there is a runtime error during
+            // initialization, it doesn't blow up the WebpackDevServer client, and
+            // changing JS code would still trigger a refresh.
+        ].filter(Boolean),
+        output: {
+            // The build folder.
+            path: isEnvProduction ? paths.appBuild : undefined,
+            // Add /* filename */ comments to generated require()s in the output.
+            pathinfo: isEnvDevelopment,
+            // There will be one main bundle, and one file per asynchronous chunk.
+            // In development, it does not produce real files.
+            filename: isEnvProduction
+                ? "static/js/[name].[contenthash:8].js"
+                : isEnvDevelopment && "static/js/bundle.js",
+            // TODO: remove this when upgrading to webpack 5
+            futureEmitAssets: true,
+            // There are also additional JS chunk files if you use code splitting.
+            chunkFilename: isEnvProduction
+                ? "static/js/[name].[contenthash:8].chunk.js"
+                : isEnvDevelopment && "static/js/[name].chunk.js",
+            // We inferred the "public path" (such as / or /my-project) from homepage.
+            // We use "/" in development.
+            publicPath: publicPath,
+            // Point sourcemap entries to original disk location (format as URL on Windows)
+            devtoolModuleFilenameTemplate: isEnvProduction
+                ? (info) =>
+                      path
+                          .relative(paths.appSrc, info.absoluteResourcePath)
+                          .replace(/\\/g, "/")
+                : isEnvDevelopment &&
+                  ((info) =>
+                      path
+                          .resolve(info.absoluteResourcePath)
+                          .replace(/\\/g, "/")),
+            // Prevents conflicts when multiple Webpack runtimes (from different apps)
+            // are used on the same page.
+            jsonpFunction: `webpackJsonp${appPackageJson.name}`,
+            // this defaults to 'window', but by setting it to 'this' then
+            // module chunks which are built will work in web workers as well.
+            globalObject: "this",
+        },
+        optimization: {
+            minimize: isEnvProduction,
+            minimizer: [
+                // This is only used in production mode
+                new TerserPlugin({
+                    terserOptions: {
+                        parse: {
+                            // We want terser to parse ecma 8 code. However, we don't want it
+                            // to apply any minification steps that turns valid ecma 5 code
+                            // into invalid ecma 5 code. This is why the 'compress' and 'output'
+                            // sections only apply transformations that are ecma 5 safe
+                            // https://github.com/facebook/create-react-app/pull/4234
+                            ecma: 8,
+                        },
+                        compress: {
+                            ecma: 5,
+                            warnings: false,
+                            // Disabled because of an issue with Uglify breaking seemingly valid code:
+                            // https://github.com/facebook/create-react-app/issues/2376
+                            // Pending further investigation:
+                            // https://github.com/mishoo/UglifyJS2/issues/2011
+                            comparisons: false,
+                            // Disabled because of an issue with Terser breaking valid code:
+                            // https://github.com/facebook/create-react-app/issues/5250
+                            // Pending further investigation:
+                            // https://github.com/terser-js/terser/issues/120
+                            inline: 2,
+                        },
+                        mangle: {
+                            safari10: true,
+                        },
+                        // Added for profiling in devtools
+                        keep_classnames: isEnvProductionProfile,
+                        keep_fnames: isEnvProductionProfile,
+                        output: {
+                            ecma: 5,
+                            comments: false,
+                            // Turned on because emoji and regex is not minified properly using default
+                            // https://github.com/facebook/create-react-app/issues/2488
+                            ascii_only: true,
+                        },
+                    },
+                    // Use multi-process parallel running to improve the build speed
+                    // Default number of concurrent runs: os.cpus().length - 1
+                    // Disabled on WSL (Windows Subsystem for Linux) due to an issue with Terser
+                    // https://github.com/webpack-contrib/terser-webpack-plugin/issues/21
+                    parallel: !isWsl,
+                    // Enable file caching
+                    cache: true,
+                    sourceMap: shouldUseSourceMap,
+                }),
+                // This is only used in production mode
+                new OptimizeCSSAssetsPlugin({
+                    cssProcessorOptions: {
+                        parser: safePostCssParser,
+                        map: shouldUseSourceMap
+                            ? {
+                                  // `inline: false` forces the sourcemap to be output into a
+                                  // separate file
+                                  inline: false,
+                                  // `annotation: true` appends the sourceMappingURL to the end of
+                                  // the css file, helping the browser find the sourcemap
+                                  annotation: true,
+                              }
+                            : false,
+                    },
+                }),
+            ],
+            // Automatically split vendor and commons
+            // https://twitter.com/wSokra/status/969633336732905474
+            // https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
+            splitChunks: {
+                chunks: "all",
+                name: false,
+                cacheGroups: {
+                    monacoCommon: {
+                        test: /[\\/]node_modules[\\/]monaco\-editor/,
+                        name: "monaco-editor-common",
+                        chunks: "async",
+                    },
+                    pdfCommon: {
+                        test: /[\\/]node_modules[\\/](react\-pdf|pdfjs\-dist)/,
+                        name: "react-pdf",
+                        chunks: "async",
+                    },
+                },
+            },
+            // Keep the runtime chunk separated to enable long term caching
+            // https://twitter.com/wSokra/status/969679223278505985
+            // https://github.com/facebook/create-react-app/issues/5358
+            runtimeChunk: {
+                name: (entrypoint) => `runtime-${entrypoint.name}`,
+            },
+        },
+        resolve: {
+            // This allows you to set a fallback for where Webpack should look for modules.
+            // We placed these paths second because we want `node_modules` to "win"
+            // if there are any conflicts. This matches Node resolution mechanism.
+            // https://github.com/facebook/create-react-app/issues/253
+            modules: ["node_modules", paths.appNodeModules].concat(
+                modules.additionalModulePaths || []
+            ),
+            // These are the reasonable defaults supported by the Node ecosystem.
+            // We also include JSX as a common component filename extension to support
+            // some tools, although we do not recommend using it, see:
+            // https://github.com/facebook/create-react-app/issues/290
+            // `web` extension prefixes have been added for better support
+            // for React Native Web.
+            extensions: paths.moduleFileExtensions
+                .map((ext) => `.${ext}`)
+                .filter((ext) => useTypeScript || !ext.includes("ts")),
+            alias: {
+                // Support React Native Web
+                // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
+                "react-native": "react-native-web",
+                // Allows for better profiling with ReactDevTools
+                ...(isEnvProductionProfile && {
+                    "react-dom$": "react-dom/profiling",
+                    "scheduler/tracing": "scheduler/tracing-profiling",
+                }),
+                ...(modules.webpackAliases || {}),
+            },
+            plugins: [
+                // Adds support for installing with Plug'n'Play, leading to faster installs and adding
+                // guards against forgotten dependencies and such.
+                PnpWebpackPlugin,
+                // Prevents users from importing files from outside of src/ (or node_modules/).
+                // This often causes confusion because we only process files within src/ with babel.
+                // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
+                // please link the files into your node_modules/ and let module-resolution kick in.
+                // Make sure your source files are compiled, as they will not be processed in any way.
+                new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
+            ],
+        },
+        resolveLoader: {
+            plugins: [
+                // Also related to Plug'n'Play, but this time it tells Webpack to load its loaders
+                // from the current package.
+                PnpWebpackPlugin.moduleLoader(module),
+            ],
+        },
+        module: {
+            strictExportPresence: true,
+            rules: [
+                // Disable require.ensure as it's not a standard language feature.
+                { parser: { requireEnsure: false } },
+
+                // First, run the linter.
+                // It's important to do this before Babel processes the JS.
+                {
+                    test: /\.(js|mjs|jsx|ts|tsx)$/,
+                    enforce: "pre",
+                    use: [
+                        {
+                            options: {
+                                cache: true,
+                                formatter: require.resolve(
+                                    "react-dev-utils/eslintFormatter"
+                                ),
+                                eslintPath: require.resolve("eslint"),
+                                resolvePluginsRelativeTo: __dirname,
+                            },
+                            loader: require.resolve("eslint-loader"),
+                        },
+                    ],
+                    include: paths.appSrc,
+                },
+                {
+                    // "oneOf" will traverse all following loaders until one will
+                    // match the requirements. When no loader matches it will fall
+                    // back to the "file" loader at the end of the loader list.
+                    oneOf: [
+                        // "url" loader works like "file" loader except that it embeds assets
+                        // smaller than specified limit in bytes as data URLs to avoid requests.
+                        // A missing `test` is equivalent to a match.
+                        {
+                            test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
+                            loader: require.resolve("url-loader"),
+                            options: {
+                                limit: imageInlineSizeLimit,
+                                name: "static/media/[name].[hash:8].[ext]",
+                            },
+                        },
+                        // Process application JS with Babel.
+                        // The preset includes JSX, Flow, TypeScript, and some ESnext features.
+                        {
+                            test: /\.(js|mjs|jsx|ts|tsx)$/,
+                            include: paths.appSrc,
+                            loader: require.resolve("babel-loader"),
+                            options: {
+                                customize: require.resolve(
+                                    "babel-preset-react-app/webpack-overrides"
+                                ),
+
+                                plugins: [
+                                    [
+                                        require.resolve(
+                                            "babel-plugin-named-asset-import"
+                                        ),
+                                        {
+                                            loaderMap: {
+                                                svg: {
+                                                    ReactComponent:
+                                                        "@svgr/webpack?-svgo,+titleProp,+ref![path]",
+                                                },
+                                            },
+                                        },
+                                    ],
+                                ],
+                                // This is a feature of `babel-loader` for webpack (not Babel itself).
+                                // It enables caching results in ./node_modules/.cache/babel-loader/
+                                // directory for faster rebuilds.
+                                cacheDirectory: true,
+                                // See #6846 for context on why cacheCompression is disabled
+                                cacheCompression: false,
+                                compact: isEnvProduction,
+                            },
+                        },
+                        // Process any JS outside of the app with Babel.
+                        // Unlike the application JS, we only compile the standard ES features.
+                        {
+                            test: /\.(js|mjs)$/,
+                            exclude: /@babel(?:\/|\\{1,2})runtime/,
+                            loader: require.resolve("babel-loader"),
+                            options: {
+                                babelrc: false,
+                                configFile: false,
+                                compact: false,
+                                presets: [
+                                    [
+                                        require.resolve(
+                                            "babel-preset-react-app/dependencies"
+                                        ),
+                                        { helpers: true },
+                                    ],
+                                ],
+                                cacheDirectory: true,
+                                // See #6846 for context on why cacheCompression is disabled
+                                cacheCompression: false,
+
+                                // If an error happens in a package, it's possible to be
+                                // because it was compiled. Thus, we don't want the browser
+                                // debugger to show the original code. Instead, the code
+                                // being evaluated would be much more helpful.
+                                sourceMaps: false,
+                            },
+                        },
+                        // "postcss" loader applies autoprefixer to our CSS.
+                        // "css" loader resolves paths in CSS and adds assets as dependencies.
+                        // "style" loader turns CSS into JS modules that inject <style> tags.
+                        // In production, we use MiniCSSExtractPlugin to extract that CSS
+                        // to a file, but in development "style" loader enables hot editing
+                        // of CSS.
+                        // By default we support CSS Modules with the extension .module.css
+                        {
+                            test: cssRegex,
+                            exclude: cssModuleRegex,
+                            use: getStyleLoaders({
+                                importLoaders: 1,
+                                sourceMap:
+                                    isEnvProduction && shouldUseSourceMap,
+                            }),
+                            // Don't consider CSS imports dead code even if the
+                            // containing package claims to have no side effects.
+                            // Remove this when webpack adds a warning or an error for this.
+                            // See https://github.com/webpack/webpack/issues/6571
+                            sideEffects: true,
+                        },
+                        // Adds support for CSS Modules (https://github.com/css-modules/css-modules)
+                        // using the extension .module.css
+                        {
+                            test: cssModuleRegex,
+                            use: getStyleLoaders({
+                                importLoaders: 1,
+                                sourceMap:
+                                    isEnvProduction && shouldUseSourceMap,
+                                modules: true,
+                                getLocalIdent: getCSSModuleLocalIdent,
+                            }),
+                        },
+                        // Opt-in support for SASS (using .scss or .sass extensions).
+                        // By default we support SASS Modules with the
+                        // extensions .module.scss or .module.sass
+                        {
+                            test: sassRegex,
+                            exclude: sassModuleRegex,
+                            use: getStyleLoaders(
+                                {
+                                    importLoaders: 2,
+                                    sourceMap:
+                                        isEnvProduction && shouldUseSourceMap,
+                                },
+                                "sass-loader"
+                            ),
+                            // Don't consider CSS imports dead code even if the
+                            // containing package claims to have no side effects.
+                            // Remove this when webpack adds a warning or an error for this.
+                            // See https://github.com/webpack/webpack/issues/6571
+                            sideEffects: true,
+                        },
+                        // Adds support for CSS Modules, but using SASS
+                        // using the extension .module.scss or .module.sass
+                        {
+                            test: sassModuleRegex,
+                            use: getStyleLoaders(
+                                {
+                                    importLoaders: 2,
+                                    sourceMap:
+                                        isEnvProduction && shouldUseSourceMap,
+                                    modules: true,
+                                    getLocalIdent: getCSSModuleLocalIdent,
+                                },
+                                "sass-loader"
+                            ),
+                        },
+                        // "file" loader makes sure those assets get served by WebpackDevServer.
+                        // When you `import` an asset, you get its (virtual) filename.
+                        // In production, they would get copied to the `build` folder.
+                        // This loader doesn't use a "test" so it will catch all modules
+                        // that fall through the other loaders.
+                        {
+                            loader: require.resolve("file-loader"),
+                            // Exclude `js` files to keep "css" loader working as it injects
+                            // its runtime that would otherwise be processed through "file" loader.
+                            // Also exclude `html` and `json` extensions so they get processed
+                            // by webpacks internal loaders.
+                            exclude: [
+                                /\.(js|mjs|jsx|ts|tsx)$/,
+                                /\.html$/,
+                                /\.json$/,
+                            ],
+                            options: {
+                                name: "static/media/[name].[hash:8].[ext]",
+                            },
+                        },
+                        // ** STOP ** Are you adding a new loader?
+                        // Make sure to add the new loader(s) before the "file" loader.
+                    ],
+                },
+            ],
+        },
+        plugins: [
+            // Monaco 代码编辑器
+            new MonacoWebpackPlugin({
+                // available options are documented at https://github.com/Microsoft/monaco-editor-webpack-plugin#options
+                languages: [
+                    "json",
+                    "php",
+                    "bat",
+                    "cpp",
+                    "python",
+                    "csharp",
+                    "css",
+                    "dockerfile",
+                    "go",
+                    "html",
+                    "ini",
+                    "java",
+                    "javascript",
+                    "less",
+                    "lua",
+                    "shell",
+                    "sql",
+                    "xml",
+                    "yaml",
+                ],
+            }),
+
+            // 写入版本文件
+            new CopyPlugin([
+                {
+                    from: "package.json",
+                    to: "version.json",
+                    transform(content, path) {
+                        let contentJson = JSON.parse(content);
+                        return JSON.stringify({
+                            version: contentJson.version,
+                            name: contentJson.name,
+                        });
+                    },
+                },
+            ]),
+
+            // Generates an `index.html` file with the <script> injected.
+            new HtmlWebpackPlugin(
+                Object.assign(
+                    {},
+                    {
+                        inject: true,
+                        template: paths.appHtml,
+                    },
+                    isEnvProduction
+                        ? {
+                              minify: {
+                                  removeComments: true,
+                                  collapseWhitespace: true,
+                                  removeRedundantAttributes: true,
+                                  useShortDoctype: true,
+                                  removeEmptyAttributes: true,
+                                  removeStyleLinkTypeAttributes: true,
+                                  keepClosingSlash: true,
+                                  minifyJS: true,
+                                  minifyCSS: true,
+                                  minifyURLs: true,
+                              },
+                          }
+                        : undefined
+                )
+            ),
+            //new FileListPlugin(),
+            // Inlines the webpack runtime script. This script is too small to warrant
+            // a network request.
+            // https://github.com/facebook/create-react-app/issues/5358
+            isEnvProduction &&
+                shouldInlineRuntimeChunk &&
+                new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [
+                    /runtime-.+[.]js/,
+                ]),
+            // Makes some environment variables available in index.html.
+            // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
+            // <link rel="icon" href="%PUBLIC_URL%/favicon.ico">
+            // In production, it will be an empty string unless you specify "homepage"
+            // in `package.json`, in which case it will be the pathname of that URL.
+            // In development, this will be an empty string.
+            new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
+            // This gives some necessary context to module not found errors, such as
+            // the requesting resource.
+            new ModuleNotFoundPlugin(paths.appPath),
+            // Makes some environment variables available to the JS code, for example:
+            // if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
+            // It is absolutely essential that NODE_ENV is set to production
+            // during a production build.
+            // Otherwise React will be compiled in the very slow development mode.
+            new webpack.DefinePlugin(env.stringified),
+            // This is necessary to emit hot updates (currently CSS only):
+            isEnvDevelopment && new webpack.HotModuleReplacementPlugin(),
+            // Watcher doesn't work well if you mistype casing in a path so we use
+            // a plugin that prints an error when you attempt to do this.
+            // See https://github.com/facebook/create-react-app/issues/240
+            isEnvDevelopment && new CaseSensitivePathsPlugin(),
+            // If you require a missing module and then `npm install` it, you still have
+            // to restart the development server for Webpack to discover it. This plugin
+            // makes the discovery automatic so you don't have to restart.
+            // See https://github.com/facebook/create-react-app/issues/186
+            isEnvDevelopment &&
+                new WatchMissingNodeModulesPlugin(paths.appNodeModules),
+            isEnvProduction &&
+                new MiniCssExtractPlugin({
+                    // Options similar to the same options in webpackOptions.output
+                    // both options are optional
+                    filename: "static/css/[name].[contenthash:8].css",
+                    chunkFilename:
+                        "static/css/[name].[contenthash:8].chunk.css",
+                }),
+            // Generate an asset manifest file with the following content:
+            // - "files" key: Mapping of all asset filenames to their corresponding
+            //   output file so that tools can pick it up without having to parse
+            //   `index.html`
+            // - "entrypoints" key: Array of files which are included in `index.html`,
+            //   can be used to reconstruct the HTML if necessary
+            new ManifestPlugin({
+                fileName: "asset-manifest.json",
+                publicPath: publicPath,
+                generate: (seed, files, entrypoints) => {
+                    const manifestFiles = files.reduce((manifest, file) => {
+                        manifest[file.name] = file.path;
+                        return manifest;
+                    }, seed);
+                    const entrypointFiles = entrypoints.main.filter(
+                        (fileName) => !fileName.endsWith(".map")
+                    );
+
+                    return {
+                        files: manifestFiles,
+                        entrypoints: entrypointFiles,
+                    };
+                },
+            }),
+            // Moment.js is an extremely popular library that bundles large locale files
+            // by default due to how Webpack interprets its code. This is a practical
+            // solution that requires the user to opt into importing specific locales.
+            // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
+            // You can remove this if you don't use Moment.js:
+            new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
+
+            new webpack.DefinePlugin({
+                ASSETS_VERSION: JSON.stringify(
+                    require("../package.json").version
+                ),
+            }),
+            // Generate a service worker script that will precache, and keep up to date,
+            // the HTML & assets that are part of the Webpack build.
+            isEnvProduction &&
+                new WorkboxWebpackPlugin.GenerateSW({
+                    clientsClaim: true,
+                    exclude: [
+                        /\.map$/,
+                        /asset-manifest\.json$/,
+                        /\.ttf$/,
+                        /version\.json$/,
+                        /\.worker\.js$/,
+                    ],
+                    importWorkboxFrom: "cdn",
+                    excludeChunks: ["monaco-editor-common", "pdf", "react-pdf"],
+                    navigateFallback: publicUrl + "/index.html",
+                    navigateFallbackBlacklist: [
+                        // Exclude URLs starting with /_, as they're likely an API call
+                        new RegExp("^/_"),
+                        // Exclude any URLs whose last part seems to be a file extension
+                        // as they're likely a resource and not a SPA route.
+                        // URLs containing a "?" character won't be blacklisted as they're likely
+                        // a route with query params (e.g. auth callbacks).
+                        new RegExp("/[^/?]+\\.[^/]+$"),
+                        new RegExp(/^\/api/),
+                        new RegExp(/^\/f\//),
+                        new RegExp(/^\/custom/),
+                    ],
+                }),
+            // TypeScript type checking
+            useTypeScript &&
+                new ForkTsCheckerWebpackPlugin({
+                    typescript: resolve.sync("typescript", {
+                        basedir: paths.appNodeModules,
+                    }),
+                    async: isEnvDevelopment,
+                    useTypescriptIncrementalApi: true,
+                    checkSyntacticErrors: true,
+                    resolveModuleNameModule: process.versions.pnp
+                        ? `${__dirname}/pnpTs.js`
+                        : undefined,
+                    resolveTypeReferenceDirectiveModule: process.versions.pnp
+                        ? `${__dirname}/pnpTs.js`
+                        : undefined,
+                    tsconfig: paths.appTsConfig,
+                    reportFiles: [
+                        "**",
+                        "!**/__tests__/**",
+                        "!**/?(*.)(spec|test).*",
+                        "!**/src/setupProxy.*",
+                        "!**/src/setupTests.*",
+                    ],
+                    silent: true,
+                    // The formatter is invoked directly in WebpackDevServerUtils during development
+                    formatter: isEnvProduction
+                        ? typescriptFormatter
+                        : undefined,
+                }),
+        ].filter(Boolean),
+        // Some libraries import Node modules but don't use them in the browser.
+        // Tell Webpack to provide empty mocks for them so importing them works.
+        node: {
+            module: "empty",
+            dgram: "empty",
+            dns: "mock",
+            fs: "empty",
+            http2: "empty",
+            net: "empty",
+            tls: "empty",
+            child_process: "empty",
+        },
+        // Turn off performance processing because we utilize
+        // our own hints via the FileSizeReporter
+        performance: false,
+    };
+};
diff --git a/config/webpackDevServer.config.js b/config/webpackDevServer.config.js
new file mode 100644
index 0000000..003a418
--- /dev/null
+++ b/config/webpackDevServer.config.js
@@ -0,0 +1,104 @@
+"use strict";
+
+const errorOverlayMiddleware = require("react-dev-utils/errorOverlayMiddleware");
+const evalSourceMapMiddleware = require("react-dev-utils/evalSourceMapMiddleware");
+const noopServiceWorkerMiddleware = require("react-dev-utils/noopServiceWorkerMiddleware");
+const ignoredFiles = require("react-dev-utils/ignoredFiles");
+const paths = require("./paths");
+const fs = require("fs");
+
+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/facebook/create-react-app/issues/2271
+        // https://github.com/facebook/create-react-app/issues/2233
+        // While we're investigating better solutions, for now we will take a
+        // compromise. Since our WDS configuration only serves files in the `public`
+        // folder we won't consider accessing them a vulnerability. However, if you
+        // use the `proxy` feature, it gets more dangerous because it can expose
+        // remote code execution vulnerabilities in backends like Django and Rails.
+        // So we will disable the host check normally, but enable it if you have
+        // specified the `proxy` setting. Finally, we let you override it if you
+        // really know what you're doing with a special environment variable.
+        disableHostCheck:
+            !proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === "true",
+        // Enable gzip compression of generated files.
+        compress: true,
+        // Silence WebpackDevServer's own logs since they're generally not useful.
+        // It will still show compile warnings and errors with this setting.
+        clientLogLevel: "none",
+        // By default WebpackDevServer serves physical files from current directory
+        // in addition to all the virtual build products that it serves from memory.
+        // This is confusing because those files won’t automatically be available in
+        // production build folder unless we copy them. However, copying the whole
+        // project directory is dangerous because we may expose sensitive files.
+        // Instead, we establish a convention that only files in `public` directory
+        // get served. Our build script will copy `public` into the `build` folder.
+        // In `index.html`, you can get URL of `public` folder with %PUBLIC_URL%:
+        // <link rel="icon" href="%PUBLIC_URL%/favicon.ico">
+        // In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
+        // Note that we only recommend to use `public` folder as an escape hatch
+        // for files like `favicon.ico`, `manifest.json`, and libraries that are
+        // for some reason broken when imported through Webpack. If you just want to
+        // use an image, put it in `src` and `import` it from JavaScript instead.
+        contentBase: paths.appPublic,
+        // 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: "/",
+        // WebpackDevServer is noisy by default so we emit custom message instead
+        // by listening to the compiler events with `compiler.hooks[...].tap` calls above.
+        quiet: true,
+        // Reportedly, this avoids CPU overload on some systems.
+        // https://github.com/facebook/create-react-app/issues/293
+        // src/node_modules is not ignored to support absolute imports
+        // https://github.com/facebook/create-react-app/issues/1065
+        watchOptions: {
+            ignored: ignoredFiles(paths.appSrc),
+        },
+        // Enable HTTPS if the HTTPS environment variable is set to 'true'
+        https: protocol === "https",
+        host,
+        overlay: false,
+        historyApiFallback: {
+            // Paths with dots should still use the history fallback.
+            // See https://github.com/facebook/create-react-app/issues/387.
+            disableDotRule: true,
+        },
+        public: allowedHost,
+        proxy,
+        before(app, server) {
+            if (fs.existsSync(paths.proxySetup)) {
+                // This registers user provided middleware for proxy reasons
+                require(paths.proxySetup)(app);
+            }
+
+            // This lets us fetch source contents from webpack for the error overlay
+            app.use(evalSourceMapMiddleware(server));
+            // This lets us open files from the runtime error overlay.
+            app.use(errorOverlayMiddleware());
+
+            // This service worker file is effectively a 'no-op' that will reset any
+            // previous service worker registered for the same host:port combination.
+            // We do this in development to avoid hitting the production cache if
+            // it used the same host and port.
+            // https://github.com/facebook/create-react-app/issues/2272#issuecomment-302832432
+            app.use(noopServiceWorkerMiddleware("/"));
+        },
+    };
+};
diff --git a/crowdin.yml b/crowdin.yml
new file mode 100644
index 0000000..9b61b93
--- /dev/null
+++ b/crowdin.yml
@@ -0,0 +1,3 @@
+files:
+  - source: /public/locales/zh-CN/*.json
+    translation: /public/locales/%locale%/%original_file_name%
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..e49994d
--- /dev/null
+++ b/package.json
@@ -0,0 +1,204 @@
+{
+  "name": "cloudreve-frontend-plus",
+  "version": "3.8.3+1.1",
+  "private": true,
+  "dependencies": {
+    "@babel/core": "7.6.0",
+    "@material-ui/core": "~4.11.0",
+    "@material-ui/icons": "^4.5.1",
+    "@material-ui/lab": "4.0.0-alpha.57",
+    "@svgr/webpack": "4.3.2",
+    "@types/invariant": "^2.2.32",
+    "@types/jest": "^25.2.2",
+    "@types/node": "^14.0.1",
+    "@types/react": "^16.9.35",
+    "@types/react-dom": "^16.9.8",
+    "@types/streamsaver": "^2.0.1",
+    "@types/wicg-file-system-access": "^2020.9.5",
+    "@typescript-eslint/eslint-plugin": "^2.33.0",
+    "@typescript-eslint/parser": "^2.33.0",
+    "ahooks": "^3.5.2",
+    "artplayer": "^4.3.4",
+    "axios": "^0.21.1",
+    "babel-eslint": "10.0.3",
+    "babel-jest": "^24.9.0",
+    "babel-loader": "8.0.6",
+    "babel-plugin-named-asset-import": "^0.3.4",
+    "babel-preset-react-app": "^9.0.2",
+    "camelcase": "^5.2.0",
+    "case-sensitive-paths-webpack-plugin": "2.2.0",
+    "classnames": "^2.2.6",
+    "clsx": "latest",
+    "connected-react-router": "^6.9.1",
+    "css-loader": "2.1.1",
+    "dayjs": "^1.10.4",
+    "dotenv": "6.2.0",
+    "dotenv-expand": "5.1.0",
+    "eslint": "^6.8.0",
+    "eslint-config-react-app": "^5.0.2",
+    "eslint-loader": "3.0.2",
+    "eslint-plugin-flowtype": "3.13.0",
+    "eslint-plugin-import": "2.18.2",
+    "eslint-plugin-jsx-a11y": "6.2.3",
+    "eslint-plugin-react": "^7.19.0",
+    "file-loader": "3.0.1",
+    "for-editor": "^0.3.5",
+    "fs-extra": "7.0.1",
+    "html-webpack-plugin": "4.0.0-beta.5",
+    "http-proxy-middleware": "^0.20.0",
+    "husky": "^4.2.5",
+    "i18next": "^21.6.16",
+    "i18next-browser-languagedetector": "^6.1.4",
+    "i18next-chained-backend": "^4.2.0",
+    "i18next-http-backend": "^1.4.0",
+    "i18next-localstorage-backend": "^4.1.0",
+    "identity-obj-proxy": "3.0.0",
+    "invariant": "^2.2.4",
+    "is-wsl": "^1.1.0",
+    "jest": "24.9.0",
+    "jest-environment-jsdom-fourteen": "0.1.0",
+    "jest-resolve": "24.9.0",
+    "jest-watch-typeahead": "0.4.0",
+    "material-ui-toggle-icon": "^1.1.1",
+    "mdi-material-ui": "^6.9.0",
+    "mini-css-extract-plugin": "0.8.0",
+    "monaco-editor-webpack-plugin": "^3.0.0",
+    "optimize-css-assets-webpack-plugin": "5.0.3",
+    "pnp-webpack-plugin": "1.5.0",
+    "postcss-flexbugs-fixes": "4.1.0",
+    "postcss-loader": "3.0.0",
+    "postcss-normalize": "7.0.1",
+    "postcss-preset-env": "6.7.0",
+    "postcss-safe-parser": "4.0.1",
+    "qrcode.react": "^3.1.0",
+    "react": "^16.12.0",
+    "react-addons-update": "^15.6.2",
+    "react-app-polyfill": "^1.0.4",
+    "react-async-script": "^1.1.1",
+    "react-color": "^2.18.0",
+    "react-content-loader": "^5.0.2",
+    "react-dev-utils": "^9.1.0",
+    "react-dnd": "^9.5.1",
+    "react-dnd-html5-backend": "^9.5.1",
+    "react-dom": "^16.12.0",
+    "react-highlight-words": "^0.18.0",
+    "react-hotkeys": "^2.0.0",
+    "react-i18next": "^11.16.7",
+    "react-lazy-load-image-component": "^1.3.2",
+    "react-load-script": "^0.0.6",
+    "react-monaco-editor": "^0.36.0",
+    "react-pdf": "^4.1.0",
+    "react-photo-view": "^0.4.0",
+    "react-reader": "^0.21.1",
+    "react-redux": "^7.1.3",
+    "react-router": "^5.1.2",
+    "react-router-dom": "^5.1.2",
+    "react-virtuoso": "^2.8.6",
+    "recharts": "^2.0.6",
+    "redux": "^4.0.4",
+    "redux-mock-store": "^1.5.4",
+    "redux-thunk": "^2.3.0",
+    "resolve": "1.12.0",
+    "resolve-url-loader": "3.1.0",
+    "sass-loader": "7.2.0",
+    "semver": "6.3.0",
+    "streamsaver": "^2.0.6",
+    "style-loader": "1.0.0",
+    "styled-components": "^5.3.6",
+    "terser-webpack-plugin": "1.4.1",
+    "timeago-react": "^3.0.0",
+    "ts-pnp": "1.1.4",
+    "typescript": "^3.9.2",
+    "url-loader": "2.1.0",
+    "webpack": "4.41.0",
+    "webpack-dev-server": "3.11.3",
+    "webpack-manifest-plugin": "2.1.1",
+    "workbox-webpack-plugin": "4.3.1",
+    "yarn": "^1.22.4"
+  },
+  "scripts": {
+    "start": "node scripts/start.js",
+    "build": "node scripts/build.js",
+    "test": "node scripts/test.js",
+    "eslint": "eslint src --fix",
+    "postinstall": "node node_modules/husky/lib/installer/bin install"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "jest": {
+    "roots": [
+      "<rootDir>/src"
+    ],
+    "collectCoverageFrom": [
+      "src/**/*.{js,jsx,ts,tsx}",
+      "!src/**/*.d.ts"
+    ],
+    "setupFiles": [
+      "react-app-polyfill/jsdom"
+    ],
+    "setupFilesAfterEnv": [],
+    "testMatch": [
+      "<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
+      "<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"
+    ],
+    "testEnvironment": "jest-environment-jsdom-fourteen",
+    "transform": {
+      "^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
+      "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
+      "^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
+    },
+    "transformIgnorePatterns": [
+      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$",
+      "^.+\\.module\\.(css|sass|scss)$"
+    ],
+    "modulePaths": [],
+    "moduleNameMapper": {
+      "^react-native$": "react-native-web",
+      "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
+    },
+    "moduleFileExtensions": [
+      "web.js",
+      "js",
+      "web.ts",
+      "ts",
+      "web.tsx",
+      "tsx",
+      "json",
+      "web.jsx",
+      "jsx",
+      "node"
+    ],
+    "watchPlugins": [
+      "jest-watch-typeahead/filename",
+      "jest-watch-typeahead/testname"
+    ]
+  },
+  "babel": {
+    "presets": [
+      "react-app"
+    ]
+  },
+  "devDependencies": {
+    "copy-webpack-plugin": "^5.1.1",
+    "eslint-plugin-react-hooks": "^4.0.0",
+    "prettier": "2.7.1"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "yarn run eslint"
+    }
+  },
+  "resolutions": {
+    "@types/react": "^16.9.35"
+  }
+}
diff --git a/pakstatics.sh b/pakstatics.sh
new file mode 100644
index 0000000..b4cf9ca
--- /dev/null
+++ b/pakstatics.sh
@@ -0,0 +1,6 @@
+#!/usr/bin/bash
+
+cd ../
+# zip -r - assets/build >assets_full.zip
+find assets/build/ -name "*.map" -type f -delete
+zip -r - assets/build >assets.zip
diff --git a/public/index.html b/public/index.html
new file mode 100644
index 0000000..4e9c591
--- /dev/null
+++ b/public/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8" />
+        <link rel="shortcut icon" href="{pwa_small_icon}" sizes="64x64"/>
+        <meta
+            name="viewport"
+            content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,shrink-to-fit=no"
+        />
+        <meta name="theme-color" content="" />
+        <link rel="manifest" href="/manifest.json" />
+        <meta name="description" content="{siteDes}">
+        <meta name="keywords" content="{siteKeywords}">
+        <title>{siteName}</title>
+        <script>
+            window.subTitle = "{siteName}";
+        </script>
+    </head>
+    <body>
+        <noscript>You need to enable JavaScript to run this app.</noscript>
+        <div id="root"></div>
+        {siteScript}
+    </body>
+</html>
diff --git a/public/locales/en-US/application.json b/public/locales/en-US/application.json
new file mode 100644
index 0000000..3efbd70
--- /dev/null
+++ b/public/locales/en-US/application.json
@@ -0,0 +1,591 @@
+{
+  "login": {
+    "email": "Email",
+    "password": "Password",
+    "captcha": "CAPTCHA",
+    "captchaError": "Cannot load CAPTCHA: {{message}}",
+    "signIn": "Sign in",
+    "signUp": "Sign up",
+    "signUpAccount": "Sign up",
+    "useFIDO2": "Use Hardware Authenticator",
+    "usePassword": "Use Password",
+    "forgetPassword": "Forgot password?",
+    "2FA": "2FA Verification",
+    "input2FACode": "Please enter the six-digit 2FA verification code",
+    "passwordNotMatch": "Those passwords didn’t match.",
+    "findMyPassword": "Find my password",
+    "passwordReset": "Password has been reset.",
+    "newPassword": "New password",
+    "repeatNewPassword": "Repeat the new password",
+    "repeatPassword": "Repeat the password",
+    "resetPassword": "Reset my password",
+    "backToSingIn": "Back to sign in",
+    "sendMeAnEmail": "Send me an email",
+    "resetEmailSent": "An email has been sent, please pay attention to check.",
+    "browserNotSupport": "Not supported by current browser or environment.",
+    "success": "Sign in successful",
+    "signUpSuccess": "Sign up successful",
+    "activateSuccess": "Sign up completed",
+    "accountActivated": "Your account has been successfully activated.",
+    "title": "Sign in to {{title}}",
+    "sinUpTitle": "Sign up to {{title}}",
+    "activateTitle": "Activate your account",
+    "activateDescription": "An activation email has been sent to your email address, please visit the link in the email to complete your sign-up.",
+    "continue": "Next",
+    "logout": "Sign out",
+    "loggedOut": "You are signed out now.",
+    "clickToRefresh": "Click to refresh"
+  },
+  "navbar": {
+    "myFiles": "My Files",
+    "myShare": "Shared",
+    "remoteDownload": "Remote Download",
+    "connect": "Connect & Mount",
+    "taskQueue": "Task Queue",
+    "setting": "Settings",
+    "videos": "Videos",
+    "photos": "Photos",
+    "music": "Music",
+    "documents": "Documents",
+    "addATag": "Add a tag...",
+    "addTagDialog": {
+      "selectFolder": "Select a Folder",
+      "fileSelector": "File Selector",
+      "folderLink": "Folder Shortcut",
+      "tagName": "Tag name",
+      "matchPattern": "Match pattern(s) of file name",
+      "matchPatternDescription": "You can use <0>*</0> as a wildcard. For example, <1>*.png</1> means match png format images. Multi-line rules will operate in an \"or\" relationship with each other.",
+      "icon": "Icon:",
+      "color": "Color:",
+      "folderPath": "Path to the folder"
+    },
+    "storage": "Storage",
+    "storageDetail": "{{used}} of {{total}} used",
+    "notLoginIn": "Not sign in",
+    "visitor": "Anonymous",
+    "objectsSelected": "{{num}} objects selected",
+    "searchPlaceholder": "Search...",
+    "searchInFiles": "Search <0>{{name}}</0> in my files",
+    "searchInFolders": "Search <0>{{name}}</0> under current folder",
+    "searchInShares": "Search <0>{{name}}</0> in other users’ shares",
+    "backToHomepage": "Back to homepage",
+    "toDarkMode": "Switch to dark theme",
+    "toLightMode": "Switch to light theme",
+    "myProfile": "My profile",
+    "dashboard": "Dashboard",
+    "exceedQuota": "Your used capacity has exceeded the quota, please delete the extra files."
+  },
+  "fileManager": {
+    "open": "Open",
+    "openParentFolder": "Open parent folder",
+    "download": "Download",
+    "batchDownload": "Download in batch",
+    "share": "Share",
+    "rename": "Rename",
+    "move": "Move",
+    "delete": "Remove",
+    "moreActions": "More actions...",
+    "refresh": "Refresh",
+    "compress": "Compress",
+    "newFolder": "New folder",
+    "newFile": "New file",
+    "showFullPath": "Show full path",
+    "listView": "List view",
+    "gridViewSmall": "Grid view (no preview)",
+    "gridViewLarge": "Grid view",
+    "paginationSize": "Pagination",
+    "paginationOption": "{{option}} / page",
+    "noPagination": "No pagination",
+    "sortMethod": "Sort by",
+    "sortMethods": {
+      "A-Z": "A-Z",
+      "Z-A": "Z-A",
+      "oldestUploaded": "Oldest uploaded",
+      "newestUploaded": "Newest uploaded",
+      "oldestModified": "Oldest modified",
+      "newestModified": "Newest modified",
+      "smallest": "Smallest",
+      "largest": "Largest"
+    },
+    "shareCreateBy": "Created by {{nick}}",
+    "name": "Name",
+    "size": "Size",
+    "lastModified": "Last modified",
+    "currentFolder": "Current Folder",
+    "backToParentFolder": "Back to the parent",
+    "folders": "Folders",
+    "files": "Files",
+    "listError": ":( Failed to lis files",
+    "dropFileHere": "Drag and drop the file here",
+    "orClickUploadButton": "Or click the \"Upload File\" button at the bottom right to add a file",
+    "nothingFound": "Nothing was found",
+    "uploadFiles": "Upload files",
+    "uploadFolder": "Upload folder",
+    "newRemoteDownloads": "New remote download",
+    "enter": "Enter",
+    "getSourceLink": "Get source link",
+    "getSourceLinkInBatch": "Get source links",
+    "createRemoteDownloadForTorrent": "New remote download",
+    "decompress": "Decompress",
+    "createShareLink": "Share",
+    "viewDetails": "View details",
+    "copy": "Copy",
+    "bytes": " ({{bytes}} Bytes)",
+    "storagePolicy": "Storage policy",
+    "inheritedFromParent": "Inherited from parent",
+    "childFolders": "Child folders",
+    "childFiles": "Child files",
+    "childCount": "{{num}}",
+    "parentFolder": "Parent folder",
+    "rootFolder": "Root folder",
+    "modifiedAt": "Modified at",
+    "createdAt": "Created at",
+    "statisticAt": "Statistic at <1></1>",
+    "musicPlayer": "Music player",
+    "closeAndStop": "Close and stop",
+    "playInBackground": "Play in background",
+    "copyTo": "Copy to",
+    "copyToDst": "Copy to <0>{{dst}}</0>",
+    "errorReadFileContent": "Failed to read file content: {{msg}}",
+    "wordWrap": "Word wrap",
+    "pdfLoadingError": "Failed to load PDF: {{msg}}",
+    "subtitleSwitchTo": "Subtitle switched to: {{subtitle}}",
+    "noSubtitleAvailable": "No available subtitle files in the video folder (supported: ASS/SRT/VTT)",
+    "subtitle": "Subtitles",
+    "playlist": "Playlist",
+    "openInExternalPlayer": "Open in external player",
+    "searchResult": "Search Results",
+    "preparingBathDownload": "Preparing batch download...",
+    "preparingDownload": "Preparing to download...",
+    "browserBatchDownload": "Browser-side archiving",
+    "browserBatchDownloadDescription": "Downloaded and packaged by the browser in real time, not all environments are supported.",
+    "serverBatchDownload": "Server-side transit archiving",
+    "serverBatchDownloadDescription": "Archive by the server and sent to the client for download on-the-fly.",
+    "selectArchiveMethod": "Select archive method",
+    "batchDownloadStarted": "Batch download has started, please do not close this tab",
+    "batchDownloadError": "Failed to archive: {{msg}}",
+    "userDenied": "User denied.",
+    "directoryDownloadReplace": "Overwrite",
+    "directoryDownloadReplaceDescription": "{{num}} objects including {{duplicates}} will be overwritten.",
+    "directoryDownloadSkip": "Skip",
+    "directoryDownloadSkipDescription": "{{num}} objects including {{duplicates}} will be skipped.",
+    "selectDirectoryDuplicationMethod": "How to handle duplicate files?",
+    "directoryDownloadStarted": "Download started, please do not close this tab.",
+    "directoryDownloadFinished": "Download finished, no failed objects.",
+    "directoryDownloadFinishedWithError": "Download finished, {{failed}} object failed.",
+    "directoryDownloadPermissionError": "Permission denied, please allow read and write local files."
+  },
+  "modals": {
+    "processing": "Processing...",
+    "duplicatedObjectName": "Duplicated object name.",
+    "duplicatedFolderName": "Duplicated folder name.",
+    "taskCreated": "Task created.",
+    "taskCreateFailed": "{{failed}} task(s) failed to be created: {{details}}.",
+    "linkCopied": "Link copied.",
+    "getSourceLinkTitle": "Get source link",
+    "sourceLink": "Source link",
+    "folderName": "Folder name",
+    "create": "Create",
+    "fileName": "File name",
+    "renameDescription": "Enter the new name for <0>{{name}}</0> :",
+    "newName": "New name",
+    "moveToTitle": "Move to",
+    "moveToDescription": "Move to <0>{{name}}</0>",
+    "saveToTitle": "Save to",
+    "saveToTitleDescription": "Save to <0>{{name}}</0>",
+    "deleteTitle": "Delete objects",
+    "deleteOneDescription": "Are you sure to delete <0>{{name}}</0> ?",
+    "deleteMultipleDescription": "Are you sure to remove those {{num}} objects?",
+    "newRemoteDownloadTitle": "New remote download task",
+    "remoteDownloadURL": "Download target URL",
+    "remoteDownloadURLDescription": "Paste the download URL, one URL per line, support HTTP(s) / FTP / Magnet link",
+    "remoteDownloadDst": "Download to",
+    "remoteDownloadNode": "Download node",
+    "remoteDownloadNodeAuto": "Auto dispatch",
+    "createTask": "Creat task",
+    "downloadTo": "Download to <0>{{name}}</0>",
+    "decompressTo": "Decompress to",
+    "decompressToDst": "Decompress to <0>{{name}}</0>",
+    "defaultEncoding": "Default",
+    "chineseMajorEncoding": "",
+    "selectEncoding": "Select the encoding for non-UTF8 characters",
+    "noEncodingSelected": "No encoding method selected",
+    "listingFiles": "Listing files...",
+    "listingFileError": "Failed to list files: {{message}}",
+    "generatingSourceLinks": "Generating source links...",
+    "noFileCanGenerateSourceLink": "There is no file that can be used to generate source link",
+    "sourceBatchSizeExceeded": "The current user group can generate source links for a maximum of {{limit}} files at the same time.",
+    "zipFileName": "ZIP file name",
+    "shareLinkShareContent": "I shared with you: {{name}} Link: {{link}}",
+    "shareLinkPasswordInfo": "Password: {{password}}",
+    "createShareLink": "Create share link",
+    "usePasswordProtection": "Use password protection",
+    "sharePassword": "Share password",
+    "randomlyGenerate": "Random",
+    "expireAutomatically": "Automatic expiration",
+    "downloadLimitOptions": "{{num}} downloads",
+    "or": "Or after",
+    "5minutes": "5 minutes",
+    "1hour": "1 hour",
+    "1day": "1 day",
+    "7days": "7 days",
+    "30days": "30 days",
+    "custom": "Custom",
+    "seconds": "seconds",
+    "downloads": "downloads",
+    "downloadSuffix": "",
+    "allowPreview": "Enable preview",
+    "allowPreviewDescription": "Whether to allow preview of file content from the share link",
+    "shareLink": "Share link",
+    "sendLink": "Send the link",
+    "directoryDownloadReplaceNotifiction": "Overwrite {{name}}",
+    "directoryDownloadSkipNotifiction": "Skipped {{name}}",
+    "directoryDownloadTitle": "Download",
+    "directoryDownloadStarted": "Start downloading {{name}}",
+    "directoryDownloadFinished": "Download finished",
+    "directoryDownloadError": "Error: {{msg}}",
+    "directoryDownloadErrorNotification": "Error occurs while download {{name}}: {{msg}}",
+    "directoryDownloadAutoscroll": "Auto scroll",
+    "directoryDownloadCancelled": "Download cancelled",
+    "advanceOptions": "Advanced options",
+    "forceDelete": "Force delete ",
+    "forceDeleteDes": "Force delete file records, regardless of whether the physical file was successfully deleted.",
+    "unlinkOnly": "Unlink only",
+    "unlinkOnlyDes": "Delete file records only, physical files will not be deleted."
+  },
+  "uploader": {
+    "fileNotMatchError": "The selected file does not match the original file.",
+    "unknownError": "Unknown error occurs: {{msg}}",
+    "taskListEmpty": "No upload task.",
+    "hideTaskList": "Hide the list",
+    "uploadTasks": "Upload tasks",
+    "moreActions": "More actions",
+    "addNewFiles": "Add new files",
+    "toggleTaskList": "Expand/Collapse the list",
+    "pendingInQueue": "Pending in queue...",
+    "preparing": "Preparing...",
+    "processing": "Processing...",
+    "progressDescription": "{{uploaded}} uploaded, {{total}} total - {{percentage}}%",
+    "progressDescriptionFull": "{{uploaded}} uploaded, {{total}} total - {{percentage}}% ({{speed}})",
+    "progressDescriptionPlaceHolder": " - uploaded",
+    "uploadedTo": "Uploaded to ",
+    "rootFolder": "Root folder",
+    "unknownStatus": "Unknown",
+    "resumed": "Resumed",
+    "resumable": "Resumable",
+    "retry": "Retry",
+    "deleteTask": "Delete task",
+    "cancelAndDelete": "Cancel and delete",
+    "selectAndResume": "Select the same file and resume uploading",
+    "fileName": "Name: ",
+    "fileSize": "Size: ",
+    "sessionExpiredIn": "Expires <0></0>",
+    "chunkDescription": "({{total}} chunks, {{size}} each)",
+    "noChunks": "(No chunks)",
+    "destination": "Destination: ",
+    "uploadSession": "Upload session: ",
+    "errorDetails": "Error details: ",
+    "uploadSessionCleaned": "All upload sessions cleared.",
+    "hideCompletedTooltip": "Hide completed, failed and cancelled tasks.",
+    "hideCompleted": "Hide completed tasks",
+    "addTimeAscTooltip": "Tasks added first are ranked first.",
+    "addTimeAsc":"Oldest to newest",
+    "addTimeDescTooltip": "Latest added first are ranked first.",
+    "addTimeDesc": "Newest to oldest",
+    "showInstantSpeedTooltip": "Task upload speeds are shown as instantaneous speed.",
+    "showInstantSpeed": "Instantaneous speed",
+    "showAvgSpeedTooltip": "Task upload speeds are shown as average speeds.",
+    "showAvgSpeed": "Average speed",
+    "cleanAllSessionTooltip": "Clear all outstanding upload sessions on the server side.",
+    "cleanAllSession": "Clear all upload sessions",
+    "cleanCompletedTooltip": "Clear completed, failed, and cancelled tasks",
+    "cleanCompleted": "Clear completed tasks",
+    "retryFailedTasks": "Retry all failed tasks",
+    "retryFailedTasksTooltip": "Retry all failed tasks in current queue",
+    "setConcurrentTooltip": "Set the max number of tasks that can be uploaded simultaneously.",
+    "setConcurrent": "Set concurrent task limit",
+    "sizeExceedLimitError": "File size exceeds storage policy limits. (Maximum: {{max}})",
+    "suffixNotAllowedError": "The storage policy does not support uploading files with this extension. (Supported:{{supported}})",
+    "createUploadSessionError": "Unable to create upload session",
+    "deleteUploadSessionError": "Unable to delete upload session",
+    "requestError": "Request failed: {{msg}} ({{url}}).",
+    "chunkUploadError": "Failed to upload chunk [{{index}}].",
+    "conflictError": "The upload task for files with the same name is already being processed.",
+    "chunkUploadErrorWithMsg": "Chunk upload failed: {{msg}}",
+    "chunkUploadErrorWithRetryAfter": "(Please retry after {{retryAfter}}s)",
+    "emptyFileError": "Uploading empty files to OneDrive is not supported, please create empty files via the Create File button.",
+    "finishUploadError": "Unable to complete file upload.",
+    "finishUploadErrorWithMsg": "Unable to complete file upload: {{msg}}",
+    "ossFinishUploadError": "Unable to complete file upload: {{msg}} ({{code}})",
+    "cosUploadFailed": "Upload failed: {{msg}} ({{code}})",
+    "upyunUploadFailed": "Upload failed: {{msg}}",
+    "parseResponseError": "Unable to parse response: {{msg}} ({{content}})",
+    "concurrentTaskNumber": "Concurrent task limit",
+    "dropFileHere": "Drop file to upload"
+  },
+  "share": {
+    "expireInXDays": "Expire in $t(share.days, {\"count\": {{num}} })",
+    "days":"{{count}} day",
+    "days_other":"{{count}} days",
+    "expireInXHours":"Expire in $t(share.hours, {\"count\": {{num}} })",
+    "hours":"an hour",
+    "hours_other":"{{count}} hours",
+    "createdBy": "Created by <0>{{nick}}</0>",
+    "sharedBy": "<0>{{nick}}</0> shared $t(share.files, {\"count\": {{num}} }) to you.",
+    "files":"1 file",
+    "files_other":"{{count}} files",
+    "statistics": "$t(share.views, {\"count\": {{views}} }) • $t(share.downloads, {\"count\": {{downloads}} }) • {{time}}",
+    "views":"{{count}} view",
+    "views_other":"{{count}} views",
+    "downloads":"{{count}} download",
+    "downloads_other":"{{count}} downloads",
+    "privateShareTitle": "Private share from {{nick}}",
+    "enterPassword": "Enter share password",
+    "continue": "Continue",
+    "shareCanceled": "Share is canceled.",
+    "listLoadingError": "Failed to load.",
+    "sharedFiles": "Shared files",
+    "createdAtDesc": "Date (Descending)",
+    "createdAtAsc": "Date (Ascending)",
+    "downloadsDesc": "Number of downloads (Descending)",
+    "downloadsAsc":"Number of downloads (Ascending)",
+    "viewsDesc":"Number of views (Descending)",
+    "viewsAsc":"Number of views (Ascending)",
+    "noRecords": "No shared files.",
+    "sourceNotFound": "[Source not exist]",
+    "expired": "Expired",
+    "changeToPublic": "Make it public",
+    "changeToPrivate": "Make it private",
+    "viewPassword": "View password",
+    "disablePreview": "Disable preview",
+    "enablePreview": "Enable preview",
+    "cancelShare": "Cancel share",
+    "sharePassword": "Share password",
+    "readmeError": "Cannot load README: {{msg}}",
+    "enterKeywords": "Please enter search keywords.",
+    "searchResult": "Search results",
+    "sharedAt": "Shared at <0></0>",
+    "pleaseLogin": "Please sign in first.",
+    "cannotShare": "This file cannot be previewed.",
+    "preview": "Preview",
+    "incorrectPassword": "Password incorrect.",
+    "shareNotExist": "Invalid or expired share link."
+  },
+  "download": {
+    "failedToLoad": "Failed to load.",
+    "active": "Active",
+    "finished": "Finished",
+    "activeEmpty": "No ongoing download task.",
+    "finishedEmpty": "No finished download task.",
+    "loadMore": "Load more",
+    "taskFileDeleted": "File deleted.",
+    "unknownTaskName": "[Unknown]",
+    "taskCanceled": "Download task cancelled, status will be updated later",
+    "operationSubmitted": "Operation submitted, status will be updated later",
+    "deleteThisFile": "Delete this file",
+    "openDstFolder": "Open target folder",
+    "selectDownloadingFile": "Select files to download",
+    "cancelTask": "Cancel",
+    "updatedAt": "Updated at: ",
+    "uploaded": "Uploaded: ",
+    "uploadSpeed": "Upload speed: ",
+    "InfoHash": "InfoHash: ",
+    "seederCount": "Seeders:",
+    "seeding": "Seeding: ",
+    "downloadNode": "Node: ",
+    "isSeeding": "Yes",
+    "notSeeding": "No",
+    "chunkSize": "Chunk size:",
+    "chunkNumbers": "Chunks:",
+    "taskDeleted": "Task deleted.",
+    "transferFailed": "Failed to transfer files.",
+    "downloadFailed": "Download failed: {{msg}}",
+    "canceledStatus": "Canceled",
+    "finishedStatus": "Finished",
+    "pending": "Finished, transfer pending in queue",
+    "transferring": "Finished, transferring",
+    "deleteRecord": "Delete record",
+    "createdAt": "Created at: "
+  },
+  "setting": {
+    "avatarUpdated": "The avatar has been updated and will take effect after refreshing.",
+    "nickChanged": "Nickname changed and will take effect after refreshing.",
+    "settingSaved": "Setting saved.",
+    "themeColorChanged": "Theme color changed.",
+    "profile": "Profile",
+    "avatar": "Avatar",
+    "uid": "UID",
+    "nickname": "Nickname",
+    "group": "Group",
+    "regTime": "Sign up date",
+    "privacyAndSecurity": "Privacy and security",
+    "profilePage": "Public profile",
+    "accountPassword": "Password",
+    "2fa": "2FA authentication",
+    "enabled": "Enabled",
+    "disabled": "Disabled",
+    "appearance": "Appearance",
+    "themeColor": "Theme color",
+    "darkMode": "Dark mode",
+    "syncWithSystem": "Sync with system",
+    "fileList": "File list",
+    "timeZone": "Timezone",
+    "webdavServer": "Server",
+    "userName": "Username",
+    "manageAccount": "Manage accounts",
+    "uploadImage": "Upload from file",
+    "useGravatar": "Use Gravatar ",
+    "changeNick": "Change nickname",
+    "originalPassword": "Original password",
+    "enable2FA": "Enable 2FA authentication",
+    "disable2FA": "Disable 2FA authentication",
+    "2faDescription": "Please use any 2FA mobile app or password management software that supports 2FA to scan the QR code on the left to add this site. After scanning, please fill in the 6-digit verification code given by the 2FA app to enable 2FA.",
+    "inputCurrent2FACode": "Enter current 2FA verification code.",
+    "timeZoneCode": "IANA timezone code",
+    "authenticatorRemoved": "Authenticator removed.",
+    "authenticatorAdded": "Authenticator added.",
+    "browserNotSupported": "Not supported by current browser or environment.",
+    "removedAuthenticator": "Remove authenticator",
+    "removedAuthenticatorConfirm": "Are you sure to remove this authenticator?",
+    "addNewAuthenticator": "Add a authenticator",
+    "hardwareAuthenticator": "Hardware authenticator",
+    "copied": "Copied to clipboard.",
+    "pleaseManuallyCopy": "Current browser does not support, please copy manually.",
+    "webdavAccounts": "WebDAV Accounts",
+    "webdavHint": "WebDAV server: {{url}}; Username: {{name}} ; The password is the password of the created account below.",
+    "annotation": "Annotation",
+    "rootFolder": "Relative root folder",
+    "createdAt": "Created at",
+    "action": "Action",
+    "readonlyOn": "Turn on readonly",
+    "readonlyOff": "Turn off readonly",
+    "useProxyOn": "Turn on reverse proxy",
+    "useProxyOff": "Turn off reverse proxy",
+    "delete": "Delete",
+    "listEmpty": "No records.",
+    "createNewAccount": "Create new account",
+    "taskType": "Task type",
+    "taskStatus": "Status",
+    "lastProgress": "Last progress",
+    "errorDetails": "Error details",
+    "queueing": "Queueing",
+    "processing": "Processing",
+    "failed": "Failed",
+    "canceled": "Canceled",
+    "finished": "Finished",
+    "fileTransfer": "File transfer",
+    "fileRecycle": "File recycle",
+    "importFiles": "Import external files",
+    "transferProgress": "{{num}} files done",
+    "waiting": "Pending",
+    "compressing": "Compressing",
+    "decompressing": "Decompressing",
+    "downloading": "Downloading",
+    "transferring": "Transferring",
+    "indexing": "Indexing",
+    "listing": "Inserting",
+    "allShares": "Shared",
+    "trendingShares": "Trending",
+    "totalShares": "Created shares",
+    "fileName": "File name",
+    "shareDate": "Shared at",
+    "downloadNumber": "Downloads",
+    "viewNumber": "Views",
+    "language": "Language",
+    "iOSApp": "iOS App",
+    "connectByiOS": "Connect to <0>{{title}}</0> through iOS devices.",
+    "downloadOurApp": "Download our iOS APP:",
+    "fillInEndpoint": "Scan below QR Code with our App (DO NOT use other app to scan):",
+    "loginApp": "You can start using the iOS App now. If you encounter problems with the QR Code, you can also try to manually enter your username and password to log in.",
+    "aboutCloudreve": "About Cloudreve",
+    "githubRepo": "GitHub Repository",
+    "homepage": "Homepage"
+  },
+  "vas": {
+    "loginWithQQ": "Sign in with QQ",
+    "quota": "Quota",
+    "exceedQuota": "Your used capacity has exceeded the quota, please delete the extra files or buy more storage as soon as possible.",
+    "extendStorage": "Buy storage",
+    "folderPolicySwitched": "Folder storage policy is switched.",
+    "switchFolderPolicy": "Switching folder storage policies",
+    "setPolicyForFolder": "Set the storage policy for the current folder: ",
+    "manageMount": "Manage mounts",
+    "saveToMyFiles": "Save to my files",
+    "report": "Report abuse",
+    "migrateStoragePolicy": "Migrate storage policy",
+    "fileSaved": "File(s) saved.",
+    "sharePurchaseTitle": "Sure you want to pay {{score}} credits for this share?",
+    "sharePurchaseDescription": "After purchase, you are free to preview and download all the contents of this share without repeated deduction for a certain period of time. If you have already purchased, please ignore this message.",
+    "payToDownload": "Paid credits to download",
+    "creditToBePaid": "Credits to be paid per person per download",
+    "creditGainPredict": "Expected {{num}} points to you per download",
+    "creditPrice": " (Cost {{num}} credits)",
+    "creditFree": " (Credits free)",
+    "cancelSubscription": "The cancellation is successful and the change will take effect in a few minutes.",
+    "qqUnlinked": "Unlinked from QQ account.",
+    "groupExpire": " Expires <0></0>",
+    "manuallyCancelSubscription": "Unsubscribe current user group",
+    "qqAccount": "QQ account",
+    "connect": "Connect",
+    "unlink": "Unlink",
+    "credits": "Credits",
+    "cancelSubscriptionTitle": "Unsubscribe",
+    "cancelSubscriptionWarning": "You will return to the initial user group and the credits paid is not refundable, are you sure you want to continue?",
+    "mountPolicy": "Mount storage policy",
+    "mountDescription": "After mounting a storage policy to a folder, new files uploaded to this folder or sub-folders will be stored using the mounted storage policy. Copying and moving to this folder will not apply the mounted storage policy; when multiple parent folders are specified, the storage policy of the closest parent folder will be selected.",
+    "mountNewFolder": "Mount new folder",
+    "nsfw": "NSFW",
+    "malware": "Malware",
+    "copyright": "Copyright",
+    "inappropriateStatements": "Inappropriate statements",
+    "other": "Other",
+    "groupBaseQuota": "Group base quota",
+    "validPackQuota": "Storage packs",
+    "used": "Used",
+    "total": "Total",
+    "validStoragePack": "Valid storage packs",
+    "buyStoragePack": "Buy storage packs",
+    "useGiftCode": "Redeem with gift code",
+    "packName": "Pack name",
+    "activationDate": "Activation date",
+    "validDuration": "Duration",
+    "expiredAt": "Expire at",
+    "days": "$t(share.days, {\"count\": {{num}} })",
+    "pleaseInputGiftCode": "Please enter gift code.",
+    "pleaseSelectAStoragePack": "Please select a storage pack.",
+    "selectPaymentMethod": "Payment: ",
+    "noAvailableMethod": "No available payment method",
+    "alipay": "Alipay",
+    "wechatPay": "Wechat Pay",
+    "payByCredits": "Credits",
+    "purchaseDuration": "Duration unit: ",
+    "creditsNum": "Credits qyt:",
+    "store": "Store",
+    "storagePacks": "Storage packs",
+    "membership": "Memberships",
+    "buyCredits": "Credits",
+    "subtotal": "Subtotal: ",
+    "creditsTotalNum": "{{num}} credits",
+    "checkoutNow": "Buy now",
+    "recommended": "Recommended",
+    "enterGiftCode": "Enter gift code",
+    "qrcodeAlipay": "Please use Alipay to scan the QR code below to complete the payment, this page will be automatically refreshed after the payment is completed.",
+    "qrcodeWechat": "Please use Wechat to scan the QR code below to complete the payment, this page will be automatically refreshed after the payment is completed.",
+    "qrcodeCustom": "Please scan the QR code below to complete the payment, this page will be automatically refreshed after the payment is completed.",
+    "paymentCompleted": "Payment completed",
+    "productDelivered": "Your purchase are processed.",
+    "confirmRedeem": "Redeem",
+    "productName": "Product: ",
+    "qyt": "Qyt: ",
+    "duration": "Duration: ",
+    "subscribe": "Subscribe",
+    "selected": "Selected: ",
+    "paymentQrcode": "Payment QRCode",
+    "validDurationDays": "Duration: $t(share.days, {\"count\": {{num}} })",
+    "reportSuccessful": "Report submitted.",
+    "additionalDescription": "Additional description",
+    "announcement": "Announcement",
+    "dontShowAgain": "Don't show again",
+    "openPaymentLink": "Open payment link"
+  }
+}
diff --git a/public/locales/en-US/common.json b/public/locales/en-US/common.json
new file mode 100644
index 0000000..26f9dbc
--- /dev/null
+++ b/public/locales/en-US/common.json
@@ -0,0 +1,90 @@
+{
+  "pageNotFound": "Page not found",
+  "unknownError": "Unknown error",
+  "errLoadingSiteConfig": "Unable to load site configuration: ",
+  "newVersionRefresh": "A new version of the current page is available and ready to be refreshed.",
+  "errorDetails": "Error details",
+  "renderError": "There is an error in the page rendering, please try refreshing this page.",
+  "ok": "OK",
+  "cancel": "Cancel",
+  "select": "Select",
+  "copyToClipboard": "Copy",
+  "close": "Close",
+  "intlDateTime": "{{val, datetime}}",
+  "timeAgoLocaleCode": "en_US",
+  "forEditorLocaleCode": "en",
+  "artPlayerLocaleCode": "en",
+  "errors": {
+    "401": "Please login.",
+    "403": "You are not allowed to perform this action.",
+    "404": "Resource not found.",
+    "409": "Conflict. ({{message}})",
+    "40001": "Invalid input parameters ({{message}}).",
+    "40002": "Upload failed.",
+    "40003": "Failed to create folder.",
+    "40004": "Object with the same name already exist.",
+    "40005": "Signature expired.",
+    "40006": "Not supported policy type.",
+    "40007": "Current group have no permission to perform such action.",
+    "40011": "Upload session not exist or expired.",
+    "40012": "Invalid chunk index. ({{message}})",
+    "40013": "Invalid content length. ({{message}})",
+    "40014": "Exceed batch size limit of getting source link.",
+    "40015": "Exceed aria2 batch size limit.",
+    "40016": "Path not found.",
+    "40017": "This account has been blocked.",
+    "40018": "This account is not activated.",
+    "40019": "This feature is not enabled.",
+    "40020": "Wrong password or email address.",
+    "40021": "User not found.",
+    "40022": "Verification code not correct.",
+    "40023": "Login session not exist.",
+    "40024": "Cannot initialize WebAuthn.",
+    "40025": "Authentication failed.",
+    "40026": "CAPTCHA code is not correct.",
+    "40027": "Verification failed, please refresh the page and retry.",
+    "40028": "Email delivery failed.",
+    "40029": "This link is invalid.",
+    "40030": "This link is expired.",
+    "40032": "This email is already in use.",
+    "40033": "This account is not activated, activation email has been resent.",
+    "40034": "This user cannot be activated.",
+    "40035": "Storage policy not found.",
+    "40039": "Group not found.",
+    "40044": "File not found.",
+    "40045": "Failed to list objects under given folder.",
+    "40047": "Failed to initialize filesystem.",
+    "40048": "Failed to create task",
+    "40049": "File size exceed limit.",
+    "40050": "File type not allowed.",
+    "40051": "Insufficient storage quota.",
+    "40052": "Invalid object name, please remove special characters.",
+    "40053": "Cannot perform such action on root folder",
+    "40054": "File with the same name is already being uploaded under this folder, please cleanup upload sessions.",
+    "40055": "File metadata mismatch.",
+    "40056": "Unsupported compressed file type.",
+    "40057": "Available storage policy has changed, please refresh the file list and add this task again.",
+    "40058": "This share does not exist or already expired.",
+    "40069": "Incorrect password.",
+    "40070": "This share doesn't support preview.",
+    "40071": "Invalid signature.",
+    "50001": "Database operation failed. ({{message}})",
+    "50002": "Failed to sign the URL or request. ({{message}})",
+    "50004": "I/O operation failed. ({{message}})",
+    "50005": "Internal error.",
+    "50010": "Desired node is unavailable.",
+    "50011": "Failed to query file metadata."
+  },
+  "vasErrors": {
+    "40031": "This email provider is forbidden, please change to another one.",
+    "40059": "You cannot save your own share.",
+    "40062": "Insufficient credits.",
+    "40063": "Your current membership has not yet expired, please go to settings page to manually unsubscribe the membership. first.",
+    "40064": "You are already in this membership.",
+    "40065": "Invalid gift code.",
+    "40066": "You already have a QQ account linked, please unlink it first.",
+    "40067": "This QQ account is already linked to other account.",
+    "40068": "This QQ account is not linked to any account.",
+    "40072": "You are administrator, you cannot purchase other group."
+  }
+}
\ No newline at end of file
diff --git a/public/locales/en-US/dashboard.json b/public/locales/en-US/dashboard.json
new file mode 100644
index 0000000..0c15107
--- /dev/null
+++ b/public/locales/en-US/dashboard.json
@@ -0,0 +1,986 @@
+{
+  "errors":{
+    "40036": "Default storage policy cannot be deleted.",
+    "40037": "{{message}} file(s) are using this policy, please delete those files first.",
+    "40038": "{{message}} group(s) are using this policy, please unlink those groups first.",
+    "40040": "Cannot perform such action on system group.",
+    "40041": "{{message}} users are still in this group, please delete or unlink those users first.",
+    "40042": "Cannot change the group of system user group.",
+    "40043": "Cannot perform such action on default user.",
+    "40046": "Cannot perform such action on master node.",
+    "40060": "Slave node cannot send callback request to master, please check master node setting: Basic - Site Information - Site URL, please make sure slave node can access this url. ({{message}})",
+    "40061": "Mismatched Cloudreve version. ({{message}})",
+    "50008": "Failed to update setting. ({{message}})",
+    "50009": "Failed to add CORS policy."
+  },
+  "nav": {
+    "summary": "Summary",
+    "settings": "Settings",
+    "basicSetting": "Basic",
+    "publicAccess": "Public Access",
+    "email": "Email",
+    "transportation": "Transmission",
+    "appearance": "Appearance",
+    "image": "Images",
+    "captcha": "Captcha",
+    "storagePolicy": "Storage Policy",
+    "nodes": "Nodes",
+    "groups": "Groups",
+    "users": "Users",
+    "files": "Files",
+    "shares": "Shares",
+    "tasks": "Tasks",
+    "remoteDownload": "Remote Download",
+    "generalTasks": "General",
+    "title": "Dashboard",
+    "dashboard": "Cloudreve Dashboard"
+  },
+  "summary": {
+    "newsletterError": "Failed to load newsletter.",
+    "confirmSiteURLTitle": "Confirm site URL",
+    "siteURLNotSet": "You have not set the site URL yet, do you want to set it to the current {{current}} ?",
+    "siteURLNotMatch": "The site URL you set does not match the current one, do you want to set it to the {{current}} ?",
+    "siteURLDescription": "This setting is very important, make sure it matches the actual URL of your site. You can change this setting in Settings - Basic.",
+    "ignore": "Ignore",
+    "changeIt": "Change it",
+    "trend": "Trend",
+    "summary": "Summary",
+    "totalUsers": "Users",
+    "totalFiles": "Files",
+    "publicShares": "Public shares",
+    "privateShares": "Private shares",
+    "homepage": "Homepage",
+    "documents": "Documents",
+    "github": "Github repository",
+    "forum": "Forum",
+    "forumLink": "https://github.com/cloudreve/Cloudreve/discussions",
+    "telegramGroup": "Telegram group",
+    "telegramGroupLink": "https://t.me/cloudreve_global",
+    "buyPro": "Donate to developers",
+    "publishedAt": "published at <0></0>",
+    "newsTag": "announcements"
+  },
+  "settings": {
+    "saved": "Settings saved.",
+    "save": "Save",
+    "basicInformation": "Basic Information",
+    "mainTitle": "Main title",
+    "mainTitleDes": "Main title of the website.",
+    "subTitle": "Subtitle",
+    "subTitleDes": "Subtitle of the website.",
+    "siteKeywords": "Site keywords",
+    "siteKeywordsDes": "Keywords of the website, separated by commas.",
+    "siteDescription": "Site description",
+    "siteDescriptionDes": "Description of the website, which may be displayed in the shared page summary.",
+    "siteURL": "Site URL",
+    "siteURLDes": "Very important, please make sure it is consistent with the actual situation. When using cloud storage policy and payment platform, please fill in the address that can be accessed by WAN.",
+    "customFooterHTML": "Custom footer HTML",
+    "customFooterHTMLDes": "Custom HTML code inserted at the bottom of the page.",
+    "announcement": "Announcement",
+    "announcementDes": "Announcements displayed to logged-in users. Blank value will not be displayed. After this content is changed, all users will see the announcement again.",
+    "supportHTML": "Enter HTML or plain text.",
+    "pwa": "Progressive Web Application (PWA)",
+    "smallIcon": "Small icon",
+    "smallIconDes": "URL of the small icon with the ico as extension",
+    "mediumIcon": "Medium icon",
+    "mediumIconDes": "URL of the medium icon, prefer size at 192x192, png format.",
+    "largeIcon": "Large icon",
+    "largeIconDes": "URL of the medium icon, prefer size at 512x512, png format. This icon will also be shown while switching account in iOS app.",
+    "displayMode": "Display mode",
+    "displayModeDes": "The display mode of a PWA application after it's installed.",
+    "themeColor": "Theme color",
+    "themeColorDes": "CSS color value that affect the color of the status bar on the PWA launch screen, the status bar in the content page, and the address bar.",
+    "backgroundColor": "Background color",
+    "backgroundColorDes": "CSS color value.",
+    "hint": "Hint",
+    "webauthnNoHttps": "Web Authn requires your website to be HTTPS enabled, and please confirm that in Settings - Basic - Site URL also uses HTTPS.",
+    "accountManagement": "Accounts",
+    "allowNewRegistrations": "Accept new signups",
+    "allowNewRegistrationsDes": "After disabled, no new users can be registered, unless manually added by admins.",
+    "emailActivation": "Email activation",
+    "emailActivationDes": "After enabled, new users need to click the activation link in the email to complete signups. Please make sure the email delivery settings are correct, otherwise the activation email will not be delivered.",
+    "captchaForSignup": "Captcha for signups",
+    "captchaForSignupDes": "Whether to enable the captcha for signups.",
+    "captchaForLogin": "Captcha for logins",
+    "captchaForLoginDes": "Whether to enable the captcha for logins.",
+    "captchaForReset": "Captcha for resetting password",
+    "captchaForResetDes": "Whether to enable the captcha for resetting password.",
+    "webauthnDes": "Whether to allow users to log in using a hardware authenticator, the website must enable HTTPS for this to work.",
+    "webauthn": "Hardware authenticator",
+    "defaultGroup": "Default group",
+    "defaultGroupDes": "The initial user group after user registration.",
+    "testMailSent": "Test email is sent.",
+    "testSMTPSettings": "Test SMTP settings",
+    "testSMTPTooltip": "Before sending a test email, please save the changed SMTP settings; the email delivery results will not be fed back immediately, if you do not receive a test email for a long time, please check the error log output by Cloudreve in the terminal.",
+    "recipient": "Recipient",
+    "send": "Send",
+    "smtp": "SMTP",
+    "senderName": "Sender name",
+    "senderNameDes": "The sender's name displayed in the email.",
+    "senderAddress": "Sender address",
+    "senderAddressDes": "Email address of the sender.",
+    "smtpServer": "SMTP server",
+    "smtpServerDes": "SMTP server address, without port number.",
+    "smtpPort": "SMTP Port",
+    "smtpPortDes": "Port of SMTP server.",
+    "smtpUsername": "SMTP Username",
+    "smtpUsernameDes": "SMTP username, generally the same as the sender address.",
+    "smtpPassword": "SMTP Password",
+    "smtpPasswordDes": "Password of the sender mailbox.",
+    "replyToAddress": "Reply to address",
+    "replyToAddressDes": "The mailbox used to receive reply emails when users reply to emails sent by the system.",
+    "enforceSSL": "Enforce SSL connection",
+    "enforceSSLDes": "Whether to enforce an SSL encrypted connection. If you cannot send emails, you can turn this off and Cloudreve will try to use STARTTLS and decide whether to use encrypted connections.",
+    "smtpTTL": "SMTP connection TTL (seconds)",
+    "smtpTTLDes": "SMTP connections established during the TTL period will be reused by new mail delivery requests.",
+    "emailTemplates": "Email Templates",
+    "activateNewUser": "Activate new user",
+    "activateNewUserDes": "Template for activation email after new user registration.",
+    "resetPassword": "Reset password",
+    "resetPasswordDes": "Template reset password.",
+    "sendTestEmail": "Send test email",
+    "transportation": "Transmission",
+    "workerNum": "Number of worker",
+    "workerNumDes": "The maximum number of tasks to be executed in parallel by the master node task queue, restarting Cloudreve is needed to take effect.",
+    "transitParallelNum": "Number of transfer in parallel",
+    "transitParallelNumDes": "Maximum number of parallel co-processes for transfer tasks.",
+    "tempFolder": "Temp folder",
+    "tempFolderDes": "Used to store temporary files generated by tasks such as decompression, compression, etc.",
+    "textEditMaxSize": "Max size of editable document files",
+    "textEditMaxSizeDes": "The maximum size of a document file that can be edited online, files beyond this size cannot be edited online. This setting applies to plain text, code and Office documents (WOPI).",
+    "failedChunkRetry": "Max chunk error retries",
+    "failedChunkRetryDes": "Maximum number of retries after a failed chunk, only for server-side uploads or transferring.",
+    "cacheChunks": "Cache chunk for retries",
+    "cacheChunksDes": "If enabled, streaming chunk uploads will cache chunk data in a temporary directory for retrying after failed uploads.\n If disabled, streaming chunk uploads do not take up additional hard disk space, but the entire upload will fail immediately after a single chunk failure.",
+    "resetConnection": "Reset connection after failed upload",
+    "resetConnectionDes": "If enabled, the server will force to reset the connection if upload verification fails.",
+    "expirationDuration": "Expire Durations (seconds)",
+    "batchDownload": "Batch download",
+    "downloadSession": "Download session",
+    "previewURL": "Preview URL",
+    "docPreviewURL": "Doc preview URL",
+    "uploadSession": "Upload session",
+    "uploadSessionDes": "For supported storage policy, user can resume uploads within upload session expiration. Max value various from third-party storage providers.",
+    "downloadSessionForShared": "Download session in shares",
+    "downloadSessionForSharedDes": "Repeated downloads of shared files within this set period of time will not be counted in the total number of downloads.",
+    "onedriveMonitorInterval": "OneDrive upload monitor interval",
+    "onedriveMonitorIntervalDes": "At set intervals, Cloudreve will request OneDrive to check client uploads to ensure they're under control.",
+    "onedriveCallbackTolerance": "OneDrive callback timeout",
+    "onedriveCallbackToleranceDes": "Maximum time to wait for the callback after the OneDrive client has finished uploading, if it exceeds it, the upload will be considered failed.",
+    "onedriveDownloadURLCache": "OneDrive download cache",
+    "onedriveDownloadURLCacheDes": "Cloudreve can cache the result after getting the file download URL to reduce the frequency of hot API requests.",
+    "slaveAPIExpiration": "Slave API timeout (seconds)",
+    "slaveAPIExpirationDes": "Timeout time for master to wait for slave API request responses.",
+    "heartbeatInterval": "Node heartbeat interval (seconds)",
+    "heartbeatIntervalDes": "The interval at which the master node sends heartbeats to slave nodes.",
+    "heartbeatFailThreshold": "Heartbeat failure retry threshold",
+    "heartbeatFailThresholdDes": "The maximum number of retries the master can make after sending a heartbeat to a slave that fails. After all failed retries, the node will enter recovery mode.",
+    "heartbeatRecoverModeInterval": "Recover mode heartbeat interval (seconds)",
+    "heartbeatRecoverModeIntervalDes": "Interval between master attempts to reconnect to a node after the node has been marked as recovery mode.",
+    "slaveTransitExpiration": "Slave transfer timeout (seconds)",
+    "slaveTransitExpirationDes": "Maximum time that can be consumed by a slave to execute a file transfer task.",
+    "nodesCommunication": "Node Communication",
+    "cannotDeleteDefaultTheme": "Cannot delete default theme.",
+    "keepAtLeastOneTheme": "Please reserve at least one theme.",
+    "duplicatedThemePrimaryColor": "Duplicated primart color.",
+    "themes": "Themes",
+    "colors": "Colors",
+    "themeConfig": "Configs",
+    "actions": "Actions",
+    "wrongFormat": "Incorrect format.",
+    "createNewTheme": "Create new theme",
+    "themeConfigDoc": "https://v4.mui.com/customization/default-theme/",
+    "themeConfigDes": "Full available configurations can be referred at <0>Default Theme - Material-UI</0>.",
+    "defaultTheme": "Default theme",
+    "defaultThemeDes": "The default them to use when the user does not specify a preferred one.",
+    "appearance": "Appearance",
+    "personalFileListView": "Default view for personal file list",
+    "personalFileListViewDes": "The default display view to use when the user does not specify a preferred one.",
+    "sharedFileListView": "Default view for shared file list",
+    "sharedFileListViewDes": "The default display view to use when the user does not specify a preferred one.",
+    "primaryColor": "Primary color",
+    "primaryColorText": "Text on primary color",
+    "secondaryColor": "Secondary color",
+    "secondaryColorText": "Text on secondary color",
+    "avatar": "Avatar",
+    "gravatarServer": "Gravatar server",
+    "gravatarServerDes": "URL of Gravatar mirror server.",
+    "avatarFilePath": "Avatar file path",
+    "avatarFilePathDes": "Path to save user's avatar files.",
+    "avatarSize": "Max avatar file size",
+    "avatarSizeDes": "Maximum size of avatar files that users can upload.",
+    "smallAvatarSize": "Small avatar width",
+    "mediumAvatarSize": "Medium avatar width",
+    "largeAvatarSize": "Large avatar width",
+    "filePreview": "File Preview",
+    "officePreviewService": "Office preview service",
+    "officePreviewServiceDes": "You can use following magic variables：",
+    "officePreviewServiceSrcDes": "File URL",
+    "officePreviewServiceSrcB64Des": " Base64 encoded file URL",
+    "officePreviewServiceName": "File name",
+    "thumbnails": "Thumbnails",
+    "localOnlyInfo": "The following settings only apply to local storage policies.",
+    "thumbnailDoc": "For more information about thumbnail, see the <0>document</0>.",
+    "thumbnailDocLink":"https://docs.cloudreve.org/v/en/use/thumbnails",
+    "thumbnailBasic": "Basic",
+    "generators": "Generators",
+    "thumbMaxSize": "Maximum original file size",
+    "thumbMaxSizeDes": "The maximum original file size for which thumbnails can be generated, thumbnails will not be generated if files exceed this size.",
+    "generatorProxyWarning": "By default, non-local storage policies will only use the \"Native in storage policy\" generator. You can extend the thumbnail capability of third-party storage policies by enabling the \"Generator proxy\" feature.",
+    "policyBuiltin": "Native in storage policy",
+    "policyBuiltinDes": "Use the native API from storage provider to process thumbnails. For local and S3 policy, this generator is not available and will automatically fallback to other generators. For other storage policies, please refer to the Cloudreve documentation for supported image formats.",
+    "cloudreveBuiltin":"Cloudreve built-in",
+    "cloudreveBuiltinDes": "Only images in PNG, JPEG, GIF formats are supported using Cloudreve's built-in image processing capabilities.",
+    "libreOffice": "LibreOffice",
+    "libreOfficeDes": "Use LibreOffice to generate thumbnails for Office documents. This generator depends on any other image thumbnail generator (Cloudreve built-in or VIPS).",
+    "vips": "VIPS",
+    "vipsDes": "Use libvips to process thumbnail images, support more image formats, and consume less resources.",
+    "thumbDependencyWarning": "LibreOffice generators depend on Cloudreve built-in or VIPS generators, please enable either one.",
+    "ffmpeg": "FFmpeg",
+    "ffmpegDes": "Use FFmpeg to generate video thumbnails.",
+    "executable": "Executable",
+    "executableDes": "The address or command of the third-party generator executable.",
+    "executableTest": "Test",
+    "executableTestSuccess": "Generator works, version: {{version}}",
+    "generatorExts": "Available extensions",
+    "generatorExtsDes": "List of available file extensions for this generator, please use comma , to separate multiple ones.",
+    "ffmpegSeek": "Thumbnail capture location",
+    "ffmpegSeekDes": "Define the thumbnail interception time, it is recommended to choose a smaller value to speed up the generation process. If the actual length of the video is exceeded, the thumbnail generation will fail.",
+    "generatorProxy": "Generator proxy",
+    "enableThumbProxy": "Use generator proxy",
+    "proxyPolicyList": "Enabled storage policy",
+    "proxyPolicyListDes": "Multi-selectable. If enabled, files whose storage policy does not support native generation, its thumbnails will be proxy generated by the Cloudreve.",
+    "thumbWidth": "Width",
+    "thumbHeight": "Height",
+    "thumbSuffix": "File suffix",
+    "thumbConcurrent": "Concurrent count",
+    "thumbConcurrentDes": "-1 means auto.",
+    "thumbFormat": "Image format",
+    "thumbFormatDes": "Available: png/jpg",
+    "thumbQuality": "Quality",
+    "thumbQualityDes": "Compression quality percentage, valid only for jpg encoding.",
+    "thumbGC": "Run GC after thumb generated",
+    "captcha": "Captcha",
+    "captchaType": "Captcha type",
+    "plainCaptcha": "Plain",
+    "reCaptchaV2": "reCAPTCHA V2",
+    "tencentCloudCaptcha": "Tencent Cloud Captcha",
+    "captchaProvider": "Provider of the captcha service.",
+    "plainCaptchaTitle": "Plain Captcha",
+    "captchaWidth": "Width",
+    "captchaHeight": "Height",
+    "captchaLength": "Length",
+    "captchaMode": "Mode",
+    "captchaModeNumber": "Numbers",
+    "captchaModeLetter": "Letters",
+    "captchaModeMath": "Math",
+    "captchaModeNumberLetter": "Numbers + Letters",
+    "captchaElement": "Elements inside of the captcha image.",
+    "complexOfNoiseText": "Complex of noise text",
+    "complexOfNoiseDot": "Complex of noise dots",
+    "showHollowLine": "Show hollow lines",
+    "showNoiseDot": "Show noise dots",
+    "showNoiseText": "Show noise text",
+    "showSlimeLine": "Show slime lines",
+    "showSineLine": "Show sine lines",
+    "siteKey": "Site KEY",
+    "siteKeyDes": "You can find it at <0>App Management Page</0>.",
+    "siteSecret": "Secret",
+    "siteSecretDes": "You can find it at <0>App Management Page</0>.",
+    "secretID": "SecretId",
+    "secretIDDes": "You can find it at <0>Access Management Page</0>.",
+    "secretKey": "SecretKey",
+    "secretKeyDes": "You can find it at <0>Access Management Page</0>.",
+    "tCaptchaAppID": "APPID",
+    "tCaptchaAppIDDes": "You can find it at <0>Captcha Management Page</0>.",
+    "tCaptchaSecretKey": "App Secret Key",
+    "tCaptchaSecretKeyDes": "You can find it at <0>Captcha Management Page</0>.",
+    "staticResourceCache": "Public static resources cache",
+    "staticResourceCacheDes": "Max age of cache for public accessible static resources (e.g. local policy source link, download link).",
+    "wopiClient": "WOPI Client",
+    "wopiClientDes": "Extend Cloudreve's document online preview and editing capabilities by interfacing with online document processing systems that support the WOPI protocol. For more information, please refer to <0>Official Documentation</0>.",
+    "wopiDocLink": "https://docs.cloudreve.org/v/en/use/wopi",
+    "enableWopi": "Enable WOPI",
+    "wopiEndpoint": "WOPI Discovery Endpoint",
+    "wopiEndpointDes": "Endpoint URL of WOPI Discovery API.",
+    "wopiSessionTtl": "Edit session TTL (seconds)",
+    "wopiSessionTtlDes": "The user opens an online editing document session with an expiration date, beyond which the session cannot continue to save new changes."
+  },
+  "policy": {
+    "sharp": "#",
+    "name": "Name",
+    "type": "Type",
+    "childFiles": "Chile files",
+    "totalSize": "Total size",
+    "actions": "Actions",
+    "authSuccess": "Authorization granted.",
+    "policyDeleted": "Policy deleted.",
+    "newStoragePolicy": "New storage policy",
+    "all": "All",
+    "local": "Local",
+    "remote": "Remote Node",
+    "qiniu": "Qiniu",
+    "upyun": "Upyun",
+    "oss": "Alibaba Cloud OSS",
+    "cos": "Tencent Cloud COS",
+    "onedrive": "OneDrive",
+    "s3": "AWS S3",
+    "refresh": "Refresh",
+    "delete": "Delete",
+    "edit": "Edit",
+    "editInProMode": "Edit in pro mode",
+    "editInWizardMode": "Edit in wizard mode",
+    "selectAStorageProvider": "Select a storage provider",
+    "comparesStoragePolicies": "Compare storage policies",
+    "comparesStoragePoliciesLink": "https://docs.cloudreve.org/v/en/use/policy/compare",
+    "storagePathStep": "Storage path",
+    "sourceLinkStep": "Source links",
+    "uploadSettingStep": "Uploading",
+    "finishStep": "Finish",
+    "policyAdded": "Storage policy added.",
+    "policySaved": "Storage policy saved.",
+    "editLocalStoragePolicy": "Edit local storage policy",
+    "addLocalStoragePolicy": "Add local storage policy",
+    "optional": "Optional",
+    "pathMagicVarDes": "Enter the physical path to the folder you want to store files. Either absolute or relative (relative to Cloudreve executable) path is supported. You can use magic variables in the path, which will be automatically replaced with the corresponding values when the file is uploaded; see <0>List of path magic variables</0> for available magic variables.",
+    "pathOfFolderToStoreFiles": "Path of the folder",
+    "filePathMagicVarDes": "Do you want to rename the physical files that are uploaded? The renaming here will not affect the final file name presented to the user. Magic variables can also be used for file names, see <0>List of Magic Variables for file names</0> for available magic variables.",
+    "autoRenameStoredFile": "Enable auto-renaming",
+    "keepOriginalFileName": "Use original file name",
+    "renameRule": "Rename rule",
+    "next": "Next",
+    "enableGettingPermanentSourceLink": "Allow user to get permanent file source link?",
+    "enableGettingPermanentSourceLinkDes": "When enabled, users can obtain a direct link to the contents of the file, for use in the Image Bed application or for your own use. You may also need to enable this feature in the user group settings to make it available for users.",
+    "allowed": "Enable",
+    "forbidden": "Disable",
+    "useCDN": "Do you want to use CDN for download and source links?",
+    "useCDNDes": "When enabled, the domain part of the URL which user uses to access files will be replaced with the CDN domain.",
+    "use": "Enable",
+    "notUse": "Disable",
+    "cdnDomain": "Select a protocol and enter the CDN domain:",
+    "cdnPrefix": "CDN domain",
+    "back": "Back",
+    "limitFileSize": "Do you want to limit the max size of one single file that can be uploaded?",
+    "limit": "Yes",
+    "notLimit": "No",
+    "enterSizeLimit": "Enter the max file size:",
+    "maxSizeOfSingleFile": "Max single file size",
+    "limitFileExt": "Do you want to limit file extensions？",
+    "enterFileExt": "Enter the file extensions allowed to be uploaded, separated by semi-colon commas:",
+    "extList": "File extension list",
+    "chunkSizeLabel": "Specify the chunk size for resumable uploads. A value of 0 means no resumable uploads are used.",
+    "chunkSizeDes": "After enabling resumable upload, the files uploaded by users will be sliced into chunks and uploaded to the storage side one by one. After the upload is interrupted, users can choose to continue uploading from the last uploaded chunk.",
+    "chunkSize": "Chunk size",
+    "nameThePolicy": "Last step, name the storage policy:",
+    "policyName": "Storage policy name",
+    "finish": "Finish",
+    "furtherActions": "To use this storage policy, go to the user group setting page and bind this storage policy for the appropriate user group.",
+    "backToList": "Back to storage policy list",
+    "magicVar": {
+      "fileNameMagicVar": "File name magic variables",
+      "pathMagicVar": "Path magic variables",
+      "variable": "Variable",
+      "description": "Description",
+      "example": "Example",
+      "16digitsRandomString": "16 digits random string",
+      "8digitsRandomString": "8 digits random string",
+      "secondTimestamp": "Timestamp",
+      "nanoTimestamp": "Nano timestamp",
+      "uid": "User ID",
+      "originalFileName": "Original file name",
+      "originFileNameNoext": "Original file name without ext",
+      "extension": "File extension name",
+      "uuidV4": "UUID V4",
+      "date": "Date",
+      "dateAndTime": "Date and time",
+      "year": "Year",
+      "month": "Month",
+      "day": "Day",
+      "hour": "Hour",
+      "minute": "Minute",
+      "second": "Second",
+      "userUploadPath": "Upload path"
+    },
+    "storageNode": "Storage node",
+    "communicationOK": "Communication successful.",
+    "editRemoteStoragePolicy": "Edit remote storage policy",
+    "addRemoteStoragePolicy": "Add remote storage policy",
+    "remoteDescription": "The remote storage policy allows you to use a server that is also running Cloudreve as the slave storage node, and users' upload and download traffic are directly transmitted over HTTP.",
+    "remoteCopyBinaryDescription": "Copy the Cloudreve executable with the same version as master to the server you want to use as a slave storage node.",
+    "remoteSecretDescription": "The following is the randomly generated slave secret, usually no need to change. If you have customization requirement, you can fill in your own secret into the following field.",
+    "remoteSecret": "Slave node secret",
+    "modifyRemoteConfig": "Modify the Cloudreve config file on slave node.",
+    "addRemoteConfigDes": " Create a new <0>conf.ini</0> file in the same directory as the slave Cloudreve, fill in the slave configuration, and start/restart the slave Cloudreve. The following is an example configuration for your slave Cloudreve, where the secret section is pre-filled in for you as generated in the previous step.",
+    "remoteConfigDifference": "The configuration file format on the slave side is roughly the same as the master side, with the following differences:",
+    "remoteConfigDifference1": "The <1>mode</1> field under the <0>System</0> section must be changed to <2>slave</2>.",
+    "remoteConfigDifference2": "You must specify the <1>Secret</1> field under the <0>Slave</0> section, whose value is the secret filled in or generated in step 2.",
+    "remoteConfigDifference3": "The cross-origin configuration, i.e. the contents of the <0>CORS</0> field, must be enabled, as described in the example above or in the official documentation. If the configuration is not correct, users will not be able to upload files to the slave node via the web browser.",
+    "inputRemoteAddress": "Enter slave node address.",
+    "inputRemoteAddressDes": "If HTTPS is enabled on the master, the slave also needs to enable it and fill in the address with HTTPS protocol below.",
+    "remoteAddress": "Slave node address",
+    "testCommunicationDes": "After completing the above steps, you can test if the communication is working by clicking the test button below.",
+    "testCommunication": "Test slave communication",
+    "pathMagicVarDesRemote": "Enter the physical path to the folder you want to store files. Either absolute or relative (relative to slave Cloudreve executable) path is supported. You can use magic variables in the path, which will be automatically replaced with the corresponding values when the file is uploaded; see <0>List of path magic variables</0> for available magic variables.",
+    "storageBucket": "Storage bucket",
+    "editQiniuStoragePolicy": "Edit Qiniu storage policy",
+    "addQiniuStoragePolicy": "Add Qiniu storage policy",
+    "wanSiteURLDes": "Before using this policy, please make sure that the address you entered in Basic Settings - Site Information - Site URL matches the actual address and <0>can be accessed properly by WAN</0>.",
+    "createQiniuBucket": "Go to <0>Qiniu dashboard</0> to create a storage bucket.。",
+    "enterQiniuBucket": "Enter the \"bucket name\" you just created:",
+    "qiniuBucketName": "Bucket name",
+    "bucketTypeDes": "Select the type of bucket you just created. We recommend selecting \"Private bucket\" for higher security.",
+    "privateBucket": "Private bucket",
+    "publicBucket": "Public bucket",
+    "bucketCDNDes": "Fill in the CDN-accelerated domain name you have bound for the storage bucket.",
+    "bucketCDNDomain": "CDN domain",
+    "qiniuCredentialDes": "Go to Personal Center - Credential Management in the Qiniu dashboard and fill in the obtained AK, SK.",
+    "ak": "AK",
+    "sk": "SK",
+    "cannotEnableForPrivateBucket": "If this feature is enabled for private bucket, you need to enable \"Use redirected source link\" for user groups.",
+    "limitMimeType": "Do you want to limit MimeTypes of file that can be uploaded?",
+    "mimeTypeDes": "Enter the MimeType of the allowed files, and separate multiple MimeTypes with a comma. Qiniu will detect the file content to determine the MimeType, and allow the upload if the MimeType is presented in your list.",
+    "mimeTypeList": "MimeTypes list",
+    "chunkSizeLabelQiniu": "Specify the chunk size for resumable uploads. Allowed range is 1 MB - 1 GB.",
+    "createPlaceholderDes": "Do you want to create a placeholder file and deduct user capacity when users start uploading? If enabled, Cloudreve will prevent users from maliciously initiating multiple upload requests but not completing the upload.",
+    "createPlaceholder": "Create placeholder files",
+    "notCreatePlaceholder": "Don't create",
+    "corsSettingStep": "CORS policy",
+    "corsPolicyAdded": "CORS policy is added successfully.",
+    "editOSSStoragePolicy": "Edit Alibaba Cloud OSS storage policy",
+    "addOSSStoragePolicy": "Add Alibaba Cloud OSS storage policy",
+    "createOSSBucketDes": "Go to <0>OSS Dashboard</0> to create a Bucket。Attention: You can only use bucket with SKU of <1>Standard storage</1> or <2>Low frequency storage</2>, <3>Archive storage</3> is not supported.",
+    "ossBucketNameDes": "Enter the your specified <0>Bucket name</0>:",
+    "bucketName": "Bucket name",
+    "publicReadBucket": "Public read",
+    "ossEndpointDes": "Go to Bucket summary page, enter the <2>Endpoint</2> under <1>External access</1> section, in <0>Access domain</0> page.",
+    "endpoint": "EndPoint",
+    "endpointDomainOnly": "Wrong format, just enter the hostname of the domain.",
+    "ossLANEndpointDes": "If your Cloudreve is deployed in Alibaba Cloud compute related services which are under the same availability zone as the OSS bucket, you can additionally specify a intranet endpoint, Cloudreve will try to use this endpoint on server side to reduce traffic cost. Do you want to use the OSS intranet endpoint?",
+    "intranetEndPoint": "Intranet endpoint",
+    "ossCDNDes": "Do you want to use Alibaba Cloud CDN to speed up file access?",
+    "createOSSCDNDes": "Go to <0>Alibaba Cloud CDN Dashboard</0> to create a CDN domain, the source of the CDN should be your OSS bucket. Enter the CDN domain and select if you want to use HTTPS:",
+    "ossAKDes": "Obtain your AccessKey in <0>Security Information Management</0> page, fill in the AccessKey below:",
+    "shouldNotContainSpace": "This cannot contain spaces.",
+    "nameThePolicyFirst": "Name the storage policy:",
+    "chunkSizeLabelOSS": "Specify the chunk size for resumable uploads. Allowed range is 100 KB - 5 GB.",
+    "ossCORSDes": "This storage policy requires a CORS policy to enable uploading from browser. Cloudreve can set it up automatically for you, or you can set it up manually by following the steps in the documentation. If you have already set the CORS policy for this Bucket, this step can be skipped.",
+    "letCloudreveHelpMe": "Let Cloudreve set it for me",
+    "skip": "Skip",
+    "editUpyunStoragePolicy": "Edit Upyun storage policy",
+    "addUpyunStoragePolicy": "Add Upyun storage policy",
+    "createUpyunBucketDes": "Go to <0>Upyun Dashboard</0> to create a storage service.",
+    "storageServiceNameDes": "Enter the name of your storage service:",
+    "storageServiceName": "Service name",
+    "operatorNameDes": "Create an operators for this service, authorize the operators with read, write, and delete permissions, fill in the operator information below.",
+    "operatorName": "Operator name",
+    "operatorPassword": "Operator password",
+    "upyunCDNDes": "Fill in the domain bound for the storage service, and choose whether to use HTTPS.",
+    "upyunOptionalDes": "You can skip this step and keep it as default, but we strongly suggest you follow below instructions.",
+    "upyunTokenDes": "Go to the Feature Configuration panel of the created storage service, go to the Access Configuration tab, enable Token Anti-Hotlinking and set a secret.",
+    "tokenEnabled": "Enable Token Anti-Hotlinking",
+    "tokenDisabled": "Not use Token Anti-Hotlinking",
+    "upyunTokenSecretDes": "Enter the secret of the Token Anti-Hotlinking.",
+    "upyunTokenSecret": "Token Anti-Hotlinking secret",
+    "cannotEnableForTokenProtectedBucket": "This feature is not supported if you enable Token Anti-Hotlinking.",
+    "callbackFunctionStep": "Serverless callback",
+    "callbackFunctionAdded": "Callback function is added.",
+    "editCOSStoragePolicy": "Edit COS storage policy",
+    "addCOSStoragePolicy": "Add COS storage policy",
+    "createCOSBucketDes": "Go to <0>COS Dashboard</0> to create a storage bucket.",
+    "cosBucketNameDes": "Go to basic setting page of created bucket, enter <0>Bucket name</0> below:",
+    "cosBucketFormatError": "Bucket name format is not correct, an example: ccc-1252109809",
+    "cosBucketTypeDes": "Below you can select the type of access control for the bucket you created. We recommend selecting <0>Private Read/Write</0> for higher security, private bucket do not have the \"Get Source Link\" feature.",
+    "cosPrivateRW": "Private Read/Write",
+    "cosPublicRW": "Public Read and Private Write",
+    "cosAccessDomainDes": "Go to the base configuration of the created Bucket and fill in the <1>Access Domain</1> given under the <0>Basic Information</0> section.",
+    "accessDomain": "Access domain",
+    "cosCDNDes": "Do you want to use Tencent Cloud CDN to speed up file access?",
+    "cosCDNDomainDes": "Go to <0>Tencent Cloud CDN Management Console</0> to create a CDN acceleration domain and set the source site to the COS bucket you just created. Fill in the CDN domain name below and select whether to use HTTPS.",
+    "cosCredentialDes": "Get a pair of access keys from the Tencent Cloud <0>Access Keys</0> page and fill them in below. Please make sure the pair of keys has access permission to COS and SCF services.",
+    "secretId": "SecretId",
+    "secretKey": "SecretKey",
+    "cosCallbackDes": "COS Storage Bucket Client-side direct transfer requires the use of Tencent Cloud's <0>Cloud Functions</0> product to ensure controlled upload callbacks. This step can be skipped if you intend to use this storage policy on your own, or assign it to a trusted user group. If it is for public use, please make sure to create callback cloud functions.",
+    "cosCallbackCreate": "Cloudreve can try to automatically create the callback cloud function for you, please select the region of the COS bucket and continue. It may take a few seconds to create, so please be patient. Please make sure your Tencent Cloud account has cloud function service enabled before creating.",
+    "cosBucketRegion": "Bucket region",
+    "ap-beijing": "ap-beijing",
+    "ap-chengdu": "ap-chengdu",
+    "ap-guangzhou": "ap-guangzhou",
+    "ap-guangzhou-open": "ap-guangzhou-open",
+    "ap-hongkong": "ap-hongkong",
+    "ap-mumbai": "ap-mumbai",
+    "ap-shanghai": "ap-shanghai",
+    "na-siliconvalley": "na-siliconvalley",
+    "na-toronto": "na-toronto",
+    "applicationRegistration": "Application registration",
+    "grantAccess": "Grant access",
+    "warning": "Warning",
+    "odHttpsWarning": "You must enable HTTPS to use OneDrive/SharePoint storage policies; after enabled, make sure to change Settings - Basic - Site Information - Site URL.",
+    "editOdStoragePolicy": "Edit OneDrive/SharePoint storage policy",
+    "addOdStoragePolicy": "Add OneDrive/SharePoint storage policy",
+    "creatAadAppDes": "Go to <0>Azure Active Directory Dashboard (Worldwide cloud)</0> or <1>Azure Active Directory Dashboard (21V Chinese cloud)</1>, after logging in, go to the <2>Azure Active Directory</2> admin panel, you can optionally use an account different from the one used to store files to login.",
+    "createAadAppDes2": "Go to the <0>App Registrations</0> menu on the left and click the <1>New registration</1> button.",
+    "createAadAppDes3": "Fill out the application registration form. Makse sure <0>Supported account types</0> is selected as <1>\tAccounts in any organizational directory (Any Azure AD directory - Multitenant) and personal Microsoft accounts (e.g. Skype, Xbox)</1>; <2>Redirect URI (optional)</2> is selected as <3>Web</3> and fill in <4>{{url}}</4>; For other fields, just leave it as default.",
+    "aadAppIDDes": "Once created, go to the <0>Overview</0> page in Application Management, copy the <1>Application (Client) ID</1> and fill in the following fields:",
+    "aadAppID": "Application (Client) ID",
+    "addAppSecretDes": "Go to the <0>Certificates & secrets</0> menu on the left side, click the <1>New client secret</1> button, and select <3>Never</3> for the <2>Expires</2>. After you are done creating the client secret, fill in the value of the client secret below:",
+    "aadAppSecret": "Client secret",
+    "aadAccountCloudDes": "Select your Microsoft 365 account type:",
+    "multiTenant": "Worldwide public cloud",
+    "gallatin": "21V Chinese cloud",
+    "sharePointDes": "Do you want to store files in SharePoint?",
+    "saveToSharePoint": "Store files to SharePoint",
+    "saveToOneDrive": "Store files to default OneDrive",
+    "spSiteURL": "SharePoint Site URL",
+    "odReverseProxyURLDes": "Do you want to use custom reverse proxy server for file downloading？",
+    "odReverseProxyURL": "URL of reverse proxy server",
+    "chunkSizeLabelOd": "Specify the chunk size for resumable uploads. OneDrive requires it must be an integer multiple of 320 KiB (327,680 bytes).",
+    "limitOdTPSDes": "Do you want to add a limit to the frequency of server-side OneDrive API requests?",
+    "tps": "TPS limit",
+    "tpsDes": "Limit this storage policy the maximum number of API requests sent to OneDrive per second. Requests that exceed this frequency will be rate-limited. When multiple Cloudreve nodes transferring files, they each use their own token bucket, so please scale this number down as appropriate in this condition.",
+    "tpsBurst": "TPS burst",
+    "tpsBurstDes": "When requested is idle, Cloudreve can reserve a specified number of slots for future bursts of traffic.",
+    "odOauthDes": "However, you will need to click the button below and authorize with Microsoft account login to complete the initialization before you can use it. You can re-authorize later on the Storage Policy List page.",
+    "gotoAuthPage": "Go to authorization page",
+    "s3SelfHostWarning": "AWS S3 storage policies are currently only safe for your own use, or for trusted user groups.",
+    "editS3StoragePolicy": "Edit AWS S3 storage policy",
+    "addS3StoragePolicy": "Add AWS S3 storage policy",
+    "s3BucketDes": "Go to AWS S3 dashboard to create a bucket, enter the <0>Bucket name</0> you just created:",
+    "publicAccessDisabled": "Public read disabled",
+    "publicAccessEnabled": "Public read enabled",
+    "s3EndpointDes": "(Optional) Specify the EndPoint (geographical node) of the storage bucket in full URL format, e.g. <0>https://bucket.region.example.com</0>. Leaving it blank will use the system-generated default endpoint.",
+    "selectRegionDes": "Select the region where the storage bucket is located or enter the region code manually.",
+    "enterAccessCredentials": "Obtain a pair of access credential and fill in below:",
+    "accessKey": "AccessKey",
+    "chunkSizeLabelS3": "Specify the chunk size for resumable uploads. Allowed range is 5 MB - 5 GB.",
+    "editPolicy": "Edit storage policy",
+    "setting":"Setting name",
+    "value": "Value",
+    "description": "Description",
+    "id": "ID",
+    "policyID": "ID of storage policy.",
+    "policyType": "Type of storage policy.",
+    "server": "Server",
+    "policyEndpoint": "Storage node endpoint.",
+    "bucketID": "Identifier of storage bucket.",
+    "yes": "Yes",
+    "no": "No",
+    "privateBucketDes": "Whether the storage bucket is private.",
+    "resourceRootURL": "File resource root URL",
+    "resourceRootURLDes": "Prefix of URL generated for previewing and downloading.",
+    "akDes": "AccessKey / RefreshToken",
+    "maxSizeBytes": "Max single file size (Bytes)",
+    "maxSizeBytesDes": "Max file size can be uploaded, 0 means no limit.",
+    "autoRename": "Auto rename",
+    "autoRenameDes": "Whether to automatically rename files.",
+    "storagePath": "Storage path",
+    "storagePathDes": "Physical path of uploaded files.",
+    "fileName": "File name",
+    "fileNameDes": "Physical name of uploaded files.",
+    "allowGetSourceLink": "Allow getting source link",
+    "allowGetSourceLinkDes": "Whether to allow getting source links. Note that some storage policy types are not supported, and even if they are turned on here, the obtained source links will be invalid.",
+    "upyunToken": "Upyun anti-hotlinking token",
+    "upyunOnly": "Available only for Upyun policy.",
+    "allowedFileExtension": "Allowed file extensions",
+    "emptyIsNoLimit": "Blank means not limit.",
+    "allowedMimetype": "Allowed MimeType",
+    "qiniuOnly": "Available only for Qiniu policy.",
+    "odRedirectURL": "OneDrive redirect URL",
+    "noModificationNeeded": "Generally no modification is needed.",
+    "odReverseProxy": "OneDrive reverse proxy server",
+    "odOnly": "Available only for OneDrive policy.",
+    "odDriverID": "OneDrive/SharePoint driver ID",
+    "odDriverIDDes": "Available only for OneDrive policy, blank means use default OneDrive driver.",
+    "s3Region": "Amazon S3 Region",
+    "s3Only": "Available only for AWS S3 policy.",
+    "lanEndpoint": "Intranet EndPoint.",
+    "ossOnly": "Available only for OSS policy.",
+    "chunkSizeBytes": "Chunk size (Bytes)",
+    "chunkSizeBytesDes": "Size of chunk for resumable uploads. Only supported in partial storage policy.",
+    "placeHolderWithSize": "Use placeholder before uploading",
+    "placeHolderWithSizeDes": "Whether to create a placeholder file before uploading .Only supported in partial storage policy.",
+    "saveChanges": "Save changes",
+    "s3EndpointPathStyle": "Select the format of the S3 Endpoint address, or if you don't know what to select, just leave to the default. Some third-party S3-compatible storage policies may require this option to work. When turned on, we will force to use of path-like format addresses, such as <0>http://s3.amazonaws.com/BUCKET/KEY</0>.",
+    "usePathEndpoint": "Force path style",
+    "useHostnameEndpoint": "Use host name if possible",
+    "thumbExt": "Extensions that supports thumbnails",
+    "thumbExtDes": "Leave blank to indicate that the storage policy predefined set is used. Not valid for local, S3 storage policies."
+  },
+  "node": {
+    "#": "#",
+    "name": "Name",
+    "status": "Status",
+    "features": "Enabled features",
+    "action": "Actions",
+    "remoteDownload": "Remote download",
+    "nodeDisabled": "Node is disabled.",
+    "nodeEnabled": "Node is enabled.",
+    "nodeDeleted": "Node is deleted.",
+    "disabled": "Disabled",
+    "online": "Online",
+    "offline": "Offline",
+    "addNewNode": "New node",
+    "refresh": "Refresh",
+    "enableNode": "Enable node",
+    "disableNode": "Disable node",
+    "edit": "Edit",
+    "delete": "Delete",
+    "slaveNodeDes": "You can add a server that is also running Cloudreve as a slave node. A slave node can share the load of certain asynchronous tasks (such as remote downloads) for the master. Please refer to the following wizard to deploy and configure a slave node. <0> If you have already deployed a remote node storage policy on the target server, you can skip some steps on this page and just fill in the slave secret and server address here, keep them as the same in the remote storage policy. </0> In subsequent releases, the configuration related to the remote storage policy will be merged into here.",
+    "overwriteDes": "; The following settings are optional and correspond to the relevant parameters of the master node, <0></0>; which can be applied to the slave node via the configuration file, please adjust them according to <0></0>; the actual situation. Changing the following settings requires a restart of the slave node to take effect.",
+    "workerNumDes": "Maximum number of tasks to be executed in parallel in the task queue.",
+    "parallelTransferDes": "Maximum number of parallel goroutine when transferring files in the task queue",
+    "chunkRetriesDes": "Maximum number of retries after a failed upload of a chunk.",
+    "multipleMasterDes": "A slave Cloudreve instance can interface to multiple Cloudreve master nodes; simply add this slave node to all master nodes and keep the secret consistent.",
+    "ariaSuccess": "Successfully connected, Aria2 version: {{version}}",
+    "slave": "slave",
+    "master": "master",
+    "aria2Des": "Cloudreve's remote download functionality is powered by <0>Aria2</0>. To use it, start Aria2 as the same user running Cloudreve on the target node server, and enable the RPC service in the Aria2 config file, <1>Aria2 needs to share the same file system as the {{mode}} Cloudreve process. </1> For more information and guidelines, refer the <2>Offline Downloads</2> section of the documentation.",
+    "slaveTakeOverRemoteDownload": "Do you need this node to take over remote download tasks?",
+    "masterTakeOverRemoteDownload": "Do you need the master to take over the remote download task?",
+    "routeTaskSlave": "After enabled, users' remote download requests can be scheduled to this node for processing.",
+    "routeTaskMaster": "After enabled, users' remote download requests can be scheduled to master node for processing.",
+    "enable": "Enable",
+    "disable": "Disable",
+    "slaveNodeTarget": "on slave node which shares the same file system with slave Cloudreve",
+    "masterNodeTarget": "which shares the same file system with Cloudreve",
+    "aria2ConfigDes": "Boot Aria2 {{target}} which shares the same file system with Cloudreve. When you start Aria2, you need to enable the RPC service in its config file and set the RPC Secret for future use. The following is a config example for reference.",
+    "enableRPCComment": "Enable RPC service",
+    "rpcPortComment": "RPC port to listen on",
+    "rpcSecretComment": "RPC secret, you can change it on your own.",
+    "rpcConfigDes": "It is recommended to start Aria2 before the node Cloudreve in the routine startup process, so that node Cloudreve can subscribe to event notifications to Aria2 and download status changes are handled in a more timely manner. Of course, if this process is not available, node Cloudreve will also track the task status via polling.",
+    "rpcServerDes": "Fill in the address of the RPC service that {{mode}} Cloudreve uses to communicate with Aria2. This can be filled in as <0>http://127.0.0.1:6800/</0>, where the port number <1>6800</1> is consistent with <2>rpc-listen-port</2> in the config file above.",
+    "rpcServer": "RPC Server",
+    "rpcServerHelpDes": "RPC server address contain full port number, e.g. http://127.0.0.1:6800/, Leave blank to indicate that the Aria2 service is not enabled.",
+    "rpcTokenDes": "RPC secret, consistent with <0>rpc-secret</0> in the Aria2 configuration file; leave blank if not set.",
+    "aria2PathDes": "Fill in the <0>absolute path</0> on the node that Aria2 uses as a temporary download directory. The Cloudreve process on the node needs read, write, and execute permissions on this directory.",
+    "aria2SettingDes": "Fill in some additional Aria2 parameter information below, as your need.",
+    "refreshInterval": "Status refresh interval (seconds)",
+    "refreshIntervalDes": "The interval at which Cloudreve requests a refresh of the task state from Aria2.",
+    "rpcTimeout": "RPC timeouts (seconds)",
+    "rpcTimeoutDes": "Maximum wait time when calling RPC services.",
+    "globalOptions": "Global job options",
+    "globalOptionsDes": "Additional settings carried when creating a download job, written in JSON encoded format, you can also write these settings in the Aria2 config file, see the Aria2 official documentation for available settings.",
+    "testAria2Des": "Once you have completed these steps, you can click the Test button below to test that if {{mode}} Cloudreve is communicating properly to Aria2.",
+    "testAria2DesSlaveAddition": "Please make sure you have performed and passed the \"Slave Communication Test\" on the previous page before performing the test.",
+    "testAria2": "Testing Aria2 Communication",
+    "aria2DocURL": "https://docs.cloudreve.org/v/en/use/aria2",
+    "nameNode": "Enter the name of this node:",
+    "loadBalancerRankDes": "Specify a load balancing weight for this node, the value is an integer. Some load balancing policies will weight the nodes based on this value.",
+    "loadBalancerRank": "Load balancing weight",
+    "nodeSaved": "Node saved successfully.",
+    "nodeSavedFutureAction": "If you add a new node, you will also need to manually enable the node in the node list for it to work properly.",
+    "backToNodeList": "Back to node list",
+    "communication": "Communication",
+    "otherSettings": "Other settings",
+    "finish": "Finish",
+    "nodeAdded": "Node added successfully.",
+    "nodeSavedNow": "Node saved successfully.",
+    "editNode": "Edit node",
+    "addNode": "Add node"
+  },
+  "group": {
+    "#": "#",
+    "name": "Name",
+    "type": "Storage policy",
+    "count": "Child users",
+    "size": "Storage quota",
+    "action": "Actions",
+    "deleted": "Group deleted.",
+    "new": "New group",
+    "aria2FormatError": "Aria2 options format error.",
+    "atLeastOnePolicy": "At least one storage policy is required.",
+    "added": "Group added successfully.",
+    "saved": "Group saved successfully.",
+    "editGroup": "Edit {{group}}",
+    "nameOfGroup": "Name",
+    "nameOfGroupDes": "Name of the group.",
+    "storagePolicy": "Storage policy",
+    "storageDes": "Select the storage policy that this group use.",
+    "availablePolicies": "Available storage policies",
+    "availablePoliciesDes": "Select the storage policies that this group can use.",
+    "initialStorageQuota": "Initial storage quota",
+    "initialStorageQuotaDes": "Max storage can used by single user under this group.",
+    "downloadSpeedLimit": "Max download speed",
+    "downloadSpeedLimitDes": "Fill in 0 to indicate no limit. When the restriction is turned on, the maximum download speed will be limited when users under this user group download all files under the storage policy that supports the speed limit.",
+    "bathSourceLinkLimit": "Max size of batch source links",
+    "bathSourceLinkLimitDes": "For the files under the supported storage policy, the maximum number of files allowed for users to obtain source links in a single batch, fill in 0 means no batch generation of source links is allowed.",
+    "allowCreateShareLink": "Share files",
+    "allowCreateShareLinkDes": "If disabled, users cannot create sharing links.",
+    "allowDownloadShare": "Download shared files",
+    "allowDownloadShareDes": "If disabled, user cannot download shared files.",
+    "allowWabDAV": "WebDAV",
+    "allowWabDAVDes": "If disabled, users cannot connect to the storage via the WebDAV protocol",
+    "allowWabDAVProxy": "WebDAV Proxy",
+    "allowWabDAVProxyDes": "If enabled, users can configure the WebDAV to proxy traffic when downloading files",
+    "disableMultipleDownload": "Disable multiple download requests",
+    "disableMultipleDownloadDes": "Valid only for local storage policies. When disabled, users cannot use the multi-threaded download tool.",
+    "allowRemoteDownload": "Remote download",
+    "allowRemoteDownloadDes": "Whether to allow users to create remote download tasks",
+    "aria2Options": "Aria2 job options",
+    "aria2OptionsDes": "The additional parameters that this user group carries when creating remote download tasks. Options are written in JSON encoded format, you can also write these settings in the Aria2 configuration file, see the official documentation for available parameters.",
+    "aria2BatchSize": "Max size of batch Aria2 tasks",
+    "aria2BatchSizeDes": "The number of simultaneous remote download tasks allowed for the user, fill in 0 or leave blank to indicate no limit.",
+    "serverSideBatchDownload": "Serverside batch download",
+    "serverSideBatchDownloadDes": "Whether to allow users to select multiple files to use the server-side relay batch download, after disabled, users can still use the pure browser based batch download feature.",
+    "compressTask": "Compression/Decompression tasks",
+    "compressTaskDes": "Whether allow the user to create the compression/decompression task",
+    "compressSize": "Maximum file size to be compressed",
+    "compressSizeDes": "The maximum total file size of compression jobs that can be created by the user, fill in 0 to indicate no limit.",
+    "decompressSize": "Maximum file size to be decompressed",
+    "decompressSizeDes": "The maximum total file size of decompression jobs that can be created by the user, fill in 0 to indicate no limit.",
+    "migratePolicy": "Migrate storage policy",
+    "migratePolicyDes": "Whether the user creates a storage policy migration task.",
+    "allowSelectNode": "Allow select node",
+    "allowSelectNodeDes": "When enabled, user can select preferred slave node before creating remote download task. When disabled, the node will be load-balanced by system.",
+    "redirectedSource": "Use redirected source link",
+    "redirectedSourceDes": "When enabled, the source link to the file obtained by the user will be redirected by Cloudreve with a shorter link. When disabled, the source link to the file obtained by the user becomes the original URL to the file. Some policies produce non-redirected source links that do not remain persistent, see <0>Comparing Storage Policies</0>.",
+    "availableNodes": "Available nodes",
+    "availableNodesDes": "Select the slave nodes that this group can use to create remote download tasks. Empty list means all nodes are available. Users can only select or be assigned nodes within this list by load balancer.",
+    "advanceDelete": "Allow advanced file deletion options",
+    "advanceDeleteDes": "Once enabled, users can choose whether to force deletion and whether to unlink only physical links when deleting files. These options are similar to the administration dashboard when deleting files."
+  },
+  "user": {
+    "deleted": "User deleted.",
+    "new": "New user",
+    "filter": "Filter",
+    "selectedObjects": "{{num}} objects selected.",
+    "nick": "Nickname",
+    "email": "Email",
+    "group": "Group",
+    "status": "Status",
+    "usedStorage": "Used storage",
+    "active": "Active",
+    "notActivated": "Inactive",
+    "banned": "Blocked",
+    "bannedBySys": "Banned by system",
+    "toggleBan": "Block/Unblock",
+    "filterCondition": "Filter conditions",
+    "all": "All",
+    "userStatus": "User status",
+    "searchNickUserName": "Search nickname / username",
+    "apply": "Apply",
+    "added": "User added.",
+    "saved": "User saved.",
+    "editUser": "Edit {{nick}}",
+    "password": "Password",
+    "passwordDes": "Leave blank means no modification.",
+    "groupDes": "Group that the user belongs to.",
+    "2FASecret": "2FA Secret",
+    "2FASecretDes": "Secret of the 2FA authenticator, leave blank to disable 2FA."
+  },
+  "file": {
+    "name": "File name",
+    "deleteAsync": "Delete task will be executed in background.",
+    "import": "Import external files",
+    "forceDelete": "Force delete",
+    "size": "Size",
+    "uploader": "Uploader",
+    "createdAt": "Created at",
+    "uploading": "Uploading",
+    "unknownUploader": "Unknown",
+    "uploaderID": "Uploader ID",
+    "searchFileName": "Search file name",
+    "storagePolicy": "Storage policy",
+    "selectTargetUser": "Select target user",
+    "importTaskCreated": "Import task created, you can view its status in the Tasks - General.",
+    "manuallyPathOnly": "The selected storage policy only supports manually inputting path.",
+    "selectFolder": "Select folder",
+    "importExternalFolder": "Import external folders",
+    "importExternalFolderDes": "You can import existing files and directory structures from your storage policy into Cloudreve. The import operation will not take up additional physical storage, but will still deduct the user's used storage quota as normal. The import will be halted when there is not enough quota.",
+    "storagePolicyDes": "Select the storage policy where the files to be imported are currently stored.",
+    "targetUser": "Target user",
+    "targetUserDes": "Select which user's file system you want to import the files to, you can search users by nickname or email.",
+    "srcFolderPath": "Source folder path",
+    "select": "Select",
+    "selectSrcDes": "The path of the directory to be imported on the storage side.",
+    "dstFolderPath": "Destination folder path",
+    "dstFolderPathDes": "Path in the user's file system to hold all imported files.",
+    "recursivelyImport": "Recursively import",
+    "recursivelyImportDes": "Whether to import all subdirectories under the directory recursively.",
+    "createImportTask": "Create import task",
+    "unlink": "Unlink (Keep physical file)"
+  },
+  "share": {
+    "deleted": "Share deleted.",
+    "objectName": "Object name",
+    "views": "Views",
+    "downloads": "Downloads",
+    "price": "Price",
+    "autoExpire": "Auto expire",
+    "owner": "Owner",
+    "createdAt": "Created at",
+    "public": "Public",
+    "private": "Private",
+    "afterNDownloads":"After {{num}} download(s).",
+    "none": "None",
+    "srcType": "Source object type",
+    "folder": "Folder",
+    "file": "File"
+  },
+  "task": {
+    "taskDeleted": "Task deleted.",
+    "howToConfigAria2": "How to configure remote download?",
+    "srcURL": "Source URL",
+    "node": "Distributed node",
+    "createdBy": "Created by",
+    "ready": "Ready",
+    "downloading": "Downloading",
+    "paused": "Paused",
+    "seeding": "Seeding",
+    "error": "Error",
+    "finished": "Finished",
+    "canceled": "Canceled/Stopped",
+    "unknown": "Unknown",
+    "aria2Des": "Cloudreve's remote download support a master-slave decentralized mode. You can configure multiple Cloudreve slave nodes that can be used to handle remote download tasks, spreading the pressure on the master node. Of course, you can also configure to handle remote downloads only on the master node, which is the easiest way.",
+    "masterAria2Des": "If you only need to enable remote downloads on the master node, <0>click here</0> to edit the master node.",
+    "slaveAria2Des": "If you want to distribute remote download tasks on slave nodes, <0>click here</0> to add and configure a new node.",
+    "editGroupDes": "When you add multiple nodes that can be used for remote downloads, the master node will send remote download requests to these nodes in turn for processing. You may also need to <0>go here</0> to enable remote download permissions for the corresponding groups.",
+    "lastProgress": "Last progress",
+    "errorMsg": "Error message"
+  },
+  "vas": {
+    "vas": "VAS",
+    "reports": "Reports",
+    "orders": "Orders",
+    "initialFiles": "Initial files",
+    "filterEmailProvider": "Filter email provider",
+    "filterEmailProviderWhitelist": "Whitelist",
+    "initialFilesDes": "Specify the files that the user initially owns after signups. Enter a file ID to search existing files.",
+    "filterEmailProviderDisabled": "Disabled",
+    "filterEmailProviderDes": "Filter signup email domains.",
+    "appLinkDes": "Will be displayed in mobile client, leave empty to hide menu item, This setting will take effect only if VOL license is valid.",
+    "filterEmailProviderBlacklist": "Blacklist",
+    "filterEmailProviderRuleDes": "Separate multiple fields with a semi-colon comma.",
+    "filterEmailProviderRule": "Email domain filter rules",
+    "qqConnectHint": "When creating the application, please fill in the callback URL: {{url}}",
+    "enableQQConnectDes": "Whether to allow binding QQ, use QQ to login website.",
+    "loginWithoutBindingDes": "After enabled, if a user logs in using QQ but does not have a registered user that is bound to it, the system will create a user for them and log them in. Users created in this way will only be able to log in using QQ in the future.",
+    "qqConnect": "QQ Connect",
+    "enableQQConnect": "Enable QQ Connect",
+    "appidDes": "The APP ID obtained from the application management page.",
+    "appForum": "User forum URL",
+    "loginWithoutBinding": "Login without registration",
+    "appKeyDes": "The APP KEY obtained from the application management page.",
+    "appid": "APP ID",
+    "overuseReminderDes": "Reminder email template sent to users after their capacity exceeds the limit due to expired VAS.",
+    "storagePack": "Storage packs",
+    "giftCodes": "Gift codes",
+    "appKey": "APP KEY",
+    "overuseReminder": "Overuse reminder",
+    "enable": "Enable",
+    "appFeedback": "Feedback URL",
+    "vasSetting": "VAS settings",
+    "appIDDes": "APPID of payment application.",
+    "purchasableGroups": "Memberships",
+    "rsaPrivateDes": "The RSA2 (SHA256) private key for the payment application, typically generated by you. For details, refer to <0>Generating RSA Keys</0>.",
+    "alipayPublicKeyDes": "Provided by Alipay, available in Application Management - Application Information - API Signing Method.",
+    "applicationID": "Application ID",
+    "alipay": "Alipay",
+    "appID": "App- ID",
+    "merchantID": "Merchant number",
+    "customPaymentEndpointDes":"URL to be requested when creating a payment order.",
+    "rsaPrivate": "RSA application private key",
+    "apiV3Secret": "API v3 secret",
+    "alipayPublicKey": "Alipay public key",
+    "mcCertificateSerial": "Merchant certificate serial number",
+    "mcAPISecret": "Merchant API Secrey",
+    "payjs": "PAYJS",
+    "wechatPay": "WeChat Pay",
+    "applicationIDDes": "Public number or mobile application appid applied by merchants.",
+    "mcNumber": "Merchant number",
+    "customPaymentEndpoint":"Payment API URL",
+    "merchantIDDes": "The merchant number generated and issued by WeChat Pay.",
+    "communicationSecret": "Communication key",
+    "apiV3SecretDes": "The merchant needs to set the secret in [Merchant Platform] - [API Security] before the request WeChat Pay. The length of the key is 32 bytes.",
+    "banBufferPeriod": "Suspend buffer period (seconds)",
+    "allowSellShares": "Allow pricing for shares",
+    "creditPriceRatio": "Credit arrival rate (%)",
+    "mcCertificateSerialDes": "Navigate to [API Security] - [API Certificate] - [View Certificate] to view the merchant API certificate serial number.",
+    "mcAPISecretDes": "Content of the secret file apiclient_key.pem.",
+    "creditPrice": "Credit price (penny)",
+    "customPaymentSecretDes": "Secret key for signing payment requests.",
+    "payjsWarning": "This service is provided by <0>PAYJS</0>, a third-party platform, and any disputes arising from it are not the responsibility of Cloudreve developers.",
+    "add": "Add",
+    "mcNumberDes": "Available in the PAYJS admin panel home page.",
+    "price": "Price",
+    "size": "Size",
+    "orCredits": " Or {{num}} credits",
+    "otherSettings": "Other Settings",
+    "banBufferPeriodDes": "The maximum length of time that a user can maintain the capacity overage status, beyond which the user will be suspend by the system.",
+    "yes": "Yes",
+    "customPaymentNameDes": "Name of the payment method used to display to the user.",
+    "allowSellSharesDes": "Once enabled users can set a credit price for sharing and credit will be deducted for downloading.",
+    "productName": "Product name",
+    "creditPriceRatioDes": "The rate of credits actually arriving to the sharer for the purchase of a share with a set price for download.",
+    "code": "Code",
+    "invalidProduct": "Invalid product",
+    "notUsed": "Not used",
+    "creditPriceDes": "Price when recharging credits",
+    "allowReportShare": "Allow report sharing",
+    "allowReportShareDes": "When enabled, any user can report sharing and there is a risk of the database filling up.",
+    "name": "Name",
+    "addStoragePack": "Add storage pack",
+    "customPaymentName": "Payment method name",
+    "duration": "Duration",
+    "productNameDes": "Product display name",
+    "actions": "Actions",
+    "durationDay": "Duration (day)",
+    "priceYuan": "Price (Yuan)",
+    "priceCredits": "Price (Credits)",
+    "highlight": "Highlight",
+    "no": "No",
+    "editMembership": "Edit membership",
+    "customPaymentDocumentLink":"https://docs.cloudreve.org/v/en/use/pro/pay",
+    "qyt": "Qyt.",
+    "group": "Group",
+    "status": "Status",
+    "durationGroupDes": "The validity of the purchase time of the user group unit upgraded after the purchase.",
+    "productDescription": "Product description (Once per line)",
+    "highlightDes": "After enabled, it will be highlighted on the product selection page.",
+    "used": "Used",
+    "generatingResult": "Result",
+    "numberOfCodes": "Number of codes",
+    "customPaymentDes":"Bridge to other third party payment platforms by implementing Cloudreve compatible payment interfaces, please refer to <0>Official Documentation</0> for details.",
+    "editStoragePack": "Edit storage pack",
+    "linkedProduct": "Linked product",
+    "packSizeDes": "Size of storage pack",
+    "productQytDes": "For credit products, this is the number of points and other products are multiples of durations.",
+    "freeDownloadDes": "After enabled, user can download paid shares for free.",
+    "markSuccessful": "Marked successfully.",
+    "durationDayDes": "Valid duration of each storage pack.",
+    "packPriceDes": "Price of storage pack.",
+    "reportedContent": "Reported content",
+    "customPayment": "Custom payment provider",
+    "priceCreditsDes": "The price when using credits to buy, fill in 0 means you can't use credits to buy.",
+    "description": "Description",
+    "addMembership": "Add membership",
+    "invalid": "[Invalid]",
+    "orderDeleted": "Order deleted.",
+    "product": "Product",
+    "groupDes": "User groups upgraded after purchase.",
+    "groupPriceDes": "Membership price",
+    "paidBy": "Paid with",
+    "showAppPromotion": "Show app promotion page",
+    "showAppPromotionDes": "After enabled, user can see the guidance page for mobile application in \"Connect & Mount\" page.",
+    "productDescriptionDes": "Description of the product displayed on the purchase page.",
+    "unpaid": "Unpaid",
+    "generateGiftCode": "Generate gift codes",
+    "shareLink": "Shared link",
+    "iosVol": "iOS client volume license (VOL)",
+    "syncLicense": "Sync License",
+    "numberOfCodesDes": "Number of gift codes to generate.",
+    "productQyt": "Product qyt.",
+    "freeDownload": "Download shared files for free",
+    "credits": "Credits",
+    "markAsResolved": "Mark as resolved",
+    "reason": "Reason",
+    "reportTime": "Reported at",
+    "deleteShare": "Delete share link",
+    "orderName": "Name",
+    "orderNumber": "Order No.",
+    "orderOwner": "Created by",
+    "paid": "Paid",
+    "volPurchase": "The client VOL license needs to be purchased separately from the <0>License Management Dashboard</0>. The VOL license allows your users to connect to your site using the <1>Cloudreve iOS</1> for free, without the need for users to pay for a subscription for the iOS app itself. After purchasing a license, please click \"Sync License\" below.",
+    "mobileApp": "Mobile application",
+    "volSynced": "VOL synced."
+  }
+}
diff --git a/public/locales/zh-CN/application.json b/public/locales/zh-CN/application.json
new file mode 100644
index 0000000..37448eb
--- /dev/null
+++ b/public/locales/zh-CN/application.json
@@ -0,0 +1,591 @@
+{
+  "login": {
+    "email": "电子邮箱",
+    "password": "密码",
+    "captcha": "验证码",
+    "captchaError": "验证码加载失败: {{message}}",
+    "signIn": "登录",
+    "signUp": "注册",
+    "signUpAccount": "注册账号",
+    "useFIDO2": "使用外部验证器登录",
+    "usePassword": "使用密码登录",
+    "forgetPassword": "忘记密码",
+    "2FA": "二步验证",
+    "input2FACode": "请输入 6 位二步验证代码",
+    "passwordNotMatch": "两次密码输入不一致",
+    "findMyPassword": "找回密码",
+    "passwordReset": "密码已重设",
+    "newPassword": "新密码",
+    "repeatNewPassword": "重复新密码",
+    "repeatPassword": "重复密码",
+    "resetPassword": "重设密码",
+    "backToSingIn": "返回登录",
+    "sendMeAnEmail": "发送密码重置邮件",
+    "resetEmailSent": "密码重置邮件已发送，请注意查收",
+    "browserNotSupport": "当前浏览器或环境不支持",
+    "success": "登录成功",
+    "signUpSuccess": "注册成功",
+    "activateSuccess": "激活成功",
+    "accountActivated": "您的账号已被成功激活。",
+    "title": "登录 {{title}}",
+    "sinUpTitle": "注册 {{title}}",
+    "activateTitle": "邮件激活",
+    "activateDescription": "一封激活邮件已经发送至您的邮箱，请访问邮件中的链接以继续完成注册。",
+    "continue": "下一步",
+    "logout": "退出登录",
+    "loggedOut": "您已退出登录",
+    "clickToRefresh": "点击刷新验证码"
+  },
+  "navbar": {
+    "myFiles": "我的文件",
+    "myShare": "我的分享",
+    "remoteDownload": "离线下载",
+    "connect": "连接与挂载",
+    "taskQueue": "任务队列",
+    "setting": "个人设置",
+    "videos": "视频",
+    "photos": "图片",
+    "music": "音乐",
+    "documents": "文档",
+    "addATag": "添加标签...",
+    "addTagDialog": {
+      "selectFolder": "选择目录",
+      "fileSelector": "文件分类",
+      "folderLink": "目录快捷方式",
+      "tagName": "标签名",
+      "matchPattern": "文件名匹配规则",
+      "matchPatternDescription": "你可以使用 <0>*</0> 作为通配符。比如 <1>*.png</1> 表示匹配 png 格式图像。多行规则间会以 “或” 的关系进行运算。",
+      "icon": "图标：",
+      "color": "颜色：",
+      "folderPath": "目录路径"
+    },
+    "storage": "存储空间",
+    "storageDetail": "已使用 {{used}}, 共 {{total}}",
+    "notLoginIn": "未登录",
+    "visitor": "游客",
+    "objectsSelected": "{{num}} 个对象",
+    "searchPlaceholder": "搜索...",
+    "searchInFiles": "在我的文件中搜索 <0>{{name}}</0>",
+    "searchInFolders": "在当前目录中搜索 <0>{{name}}</0>",
+    "searchInShares": "在全站分享中搜索 <0>{{name}}</0>",
+    "backToHomepage": "返回主页",
+    "toDarkMode": "切换到深色模式",
+    "toLightMode": "切换到浅色模式",
+    "myProfile": "个人主页",
+    "dashboard": "管理面板",
+    "exceedQuota": "您的已用容量已超过容量配额，请尽快删除多余文件"
+  },
+  "fileManager": {
+    "open": "打开",
+    "openParentFolder": "打开所在目录",
+    "download": "下载",
+    "batchDownload": "打包下载",
+    "share": "分享",
+    "rename": "重命名",
+    "move": "移动",
+    "delete": "删除",
+    "moreActions": "更多操作",
+    "refresh": "刷新",
+    "compress": "压缩",
+    "newFolder": "创建文件夹",
+    "newFile": "创建文件",
+    "showFullPath": "显示路径",
+    "listView": "列表",
+    "gridViewSmall": "小图标",
+    "gridViewLarge": "大图标",
+    "paginationSize": "分页大小",
+    "paginationOption": "{{option}} / 页",
+    "noPagination": "不分页",
+    "sortMethod": "排序方式",
+    "sortMethods": {
+      "A-Z": "A-Z",
+      "Z-A": "Z-A",
+      "oldestUploaded": "最早上传",
+      "newestUploaded": "最新上传",
+      "oldestModified": "最早修改",
+      "newestModified": "最新修改",
+      "smallest": "最小",
+      "largest": "最大"
+    },
+    "shareCreateBy": "由 {{nick}} 创建",
+    "name": "名称",
+    "size": "大小",
+    "lastModified": "修改日期",
+    "currentFolder": "当前目录",
+    "backToParentFolder": "上级目录",
+    "folders": "文件夹",
+    "files": "文件",
+    "listError": ":( 请求时出现错误",
+    "dropFileHere": "拖拽文件至此",
+    "orClickUploadButton": "或点击右下方“上传文件”按钮添加文件",
+    "nothingFound": "什么都没有找到",
+    "uploadFiles": "上传文件",
+    "uploadFolder": "上传目录",
+    "newRemoteDownloads": "离线下载",
+    "enter": "进入",
+    "getSourceLink": "获取外链",
+    "getSourceLinkInBatch": "批量获取外链",
+    "createRemoteDownloadForTorrent": "创建离线下载任务",
+    "decompress": "解压缩",
+    "createShareLink": "创建分享链接",
+    "viewDetails": "详细信息",
+    "copy": "复制",
+    "bytes": " ({{bytes}} 字节)",
+    "storagePolicy": "存储策略",
+    "inheritedFromParent": "跟随父目录",
+    "childFolders": "包含目录",
+    "childFiles": "包含文件",
+    "childCount": "{{num}} 个",
+    "parentFolder": "所在目录",
+    "rootFolder": "根目录",
+    "modifiedAt": "修改于",
+    "createdAt": "创建于",
+    "statisticAt": "统计于 <1></1>",
+    "musicPlayer": "音频播放",
+    "closeAndStop": "退出播放",
+    "playInBackground": "后台播放",
+    "copyTo": "复制到",
+    "copyToDst": "复制到 <0>{{dst}}</0>",
+    "errorReadFileContent": "无法读取文件内容：{{msg}}",
+    "wordWrap": "自动换行",
+    "pdfLoadingError": "PDF 加载失败：{{msg}}",
+    "subtitleSwitchTo": "字幕切换到：{{subtitle}}",
+    "noSubtitleAvailable": "视频目录下没有可用字幕文件 (支持：ASS/SRT/VTT)",
+    "subtitle": "选择字幕",
+    "playlist": "播放列表",
+    "openInExternalPlayer": "用外部播放器打开",
+    "searchResult": "搜索结果",
+    "preparingBathDownload": "正在准备打包下载...",
+    "preparingDownload": "获取下载地址...",
+    "browserBatchDownload": "浏览器端打包",
+    "browserBatchDownloadDescription": "由浏览器实时下载并打包，并非所有环境都支持。",
+    "serverBatchDownload": "服务端中转打包",
+    "serverBatchDownloadDescription": "由服务端中转打包并实时发送到客户端下载。",
+    "selectArchiveMethod": "选择打包下载方式",
+    "batchDownloadStarted": "打包下载已开始，请不要关闭此标签页",
+    "batchDownloadError": "打包遇到错误：{{msg}}",
+    "userDenied": "用户拒绝",
+    "directoryDownloadReplace": "替换对象",
+    "directoryDownloadReplaceDescription": "将会替换 {{duplicates}} 等共 {{num}} 个对象。",
+    "directoryDownloadSkip": "跳过对象",
+    "directoryDownloadSkipDescription": "将会跳过 {{duplicates}} 等共 {{num}} 个对象。",
+    "selectDirectoryDuplicationMethod": "重复对象处理方式",
+    "directoryDownloadStarted": "下载已开始，请不要关闭此标签页",
+    "directoryDownloadFinished": "下载完成，无失败对象",
+    "directoryDownloadFinishedWithError": "下载完成, 失败 {{failed}} 个对象",
+    "directoryDownloadPermissionError": "无权限操作，请允许读写本地文件"
+  },
+  "modals": {
+    "processing": "处理中...",
+    "duplicatedObjectName": "新名称与已有文件重复",
+    "duplicatedFolderName": "文件夹名称重复",
+    "taskCreated": "任务已创建",
+    "taskCreateFailed": "{{failed}} 个任务创建失败：{{details}}",
+    "linkCopied": "链接已复制",
+    "getSourceLinkTitle": "获取文件外链",
+    "sourceLink": "文件外链",
+    "folderName": "文件夹名称",
+    "create": "创建",
+    "fileName": "文件名称",
+    "renameDescription": "输入 <0>{{name}}</0> 的新名称：",
+    "newName": "新名称",
+    "moveToTitle": "移动至",
+    "moveToDescription": "移动至 <0>{{name}}</0>",
+    "saveToTitle": "保存至",
+    "saveToTitleDescription": "保存至 <0>{{name}}</0>",
+    "deleteTitle": "删除对象",
+    "deleteOneDescription": "确定要删除 <0>{{name}}</0> 吗？",
+    "deleteMultipleDescription": "确定要删除这 {{num}} 个对象吗？",
+    "newRemoteDownloadTitle": "新建离线下载任务",
+    "remoteDownloadURL": "下载链接",
+    "remoteDownloadURLDescription": "输入文件下载地址，一行一个，支持 HTTP(s) / FTP / 磁力链",
+    "remoteDownloadDst": "下载至",
+    "remoteDownloadNode": "下载节点",
+    "remoteDownloadNodeAuto": "自动分配",
+    "createTask": "创建任务",
+    "downloadTo": "下载至 <0>{{name}}</0>",
+    "decompressTo": "解压缩至",
+    "decompressToDst": "解压缩至 <0>{{name}}</0>",
+    "defaultEncoding": "缺省",
+    "chineseMajorEncoding": "简体中文常见编码",
+    "selectEncoding": "选择 ZIP 文件特殊字符编码",
+    "noEncodingSelected": "未选择编码方式",
+    "listingFiles": "列取文件中...",
+    "listingFileError": "列取文件时出错：{{message}}",
+    "generatingSourceLinks": "生成外链中...",
+    "noFileCanGenerateSourceLink": "没有可以生成外链的文件",
+    "sourceBatchSizeExceeded": "当前用户组最大可同时为 {{limit}} 个文件生成外链",
+    "zipFileName": "ZIP 文件名",
+    "shareLinkShareContent": "我向你分享了：{{name}} 链接：{{link}}",
+    "shareLinkPasswordInfo": " 密码： {{password}}",
+    "createShareLink": "创建分享链接",
+    "usePasswordProtection": "使用密码保护",
+    "sharePassword": "分享密码",
+    "randomlyGenerate": "随机生成",
+    "expireAutomatically": "自动过期",
+    "downloadLimitOptions": "{{num}} 次下载",
+    "or": "或者",
+    "5minutes": "5 分钟",
+    "1hour": "1 小时",
+    "1day": "1 天",
+    "7days": "7 天",
+    "30days": "30 天",
+    "custom": "自定义",
+    "seconds": "秒",
+    "downloads": "次下载",
+    "downloadSuffix": "后过期",
+    "allowPreview": "允许预览",
+    "allowPreviewDescription": "是否允许在分享页面预览文件内容",
+    "shareLink": "分享链接",
+    "sendLink": "发送链接",
+    "directoryDownloadReplaceNotifiction": "已覆盖 {{name}}",
+    "directoryDownloadSkipNotifiction": "已跳过 {{name}}",
+    "directoryDownloadTitle": "下载",
+    "directoryDownloadStarted": "开始下载 {{name}}",
+    "directoryDownloadFinished": "下载完成",
+    "directoryDownloadError": "遇到错误：{{msg}}",
+    "directoryDownloadErrorNotification": "下载 {{name}} 遇到错误：{{msg}}",
+    "directoryDownloadAutoscroll": "自动滚动",
+    "directoryDownloadCancelled": "已取消下载",
+    "advanceOptions": "高级选项",
+    "forceDelete": "强制删除文件",
+    "forceDeleteDes": "强制删除文件记录，无论物理文件是否被成功删除",
+    "unlinkOnly": "仅解除链接",
+    "unlinkOnlyDes": "仅删除文件记录，物理文件不会被删除"
+  },
+  "uploader": {
+    "fileNotMatchError": "所选择文件与原始文件不符",
+    "unknownError": "出现未知错误：{{msg}}",
+    "taskListEmpty": "没有上传任务",
+    "hideTaskList": "隐藏列表",
+    "uploadTasks": "上传队列",
+    "moreActions": "更多操作",
+    "addNewFiles": "添加新文件",
+    "toggleTaskList": "展开/折叠队列",
+    "pendingInQueue": "排队中...",
+    "preparing": "准备中...",
+    "processing": "处理中...",
+    "progressDescription": "已上传 {{uploaded}} , 共 {{total}} - {{percentage}}%",
+    "progressDescriptionFull": "{{speed}} 已上传 {{uploaded}} , 共 {{total}} - {{percentage}}%",
+    "progressDescriptionPlaceHolder": "已上传 - ",
+    "uploadedTo": "已上传至 ",
+    "rootFolder": "根目录",
+    "unknownStatus": "未知",
+    "resumed": "断点续传",
+    "resumable": "可恢复进度",
+    "retry": "重试",
+    "deleteTask": "删除任务记录",
+    "cancelAndDelete": "取消并删除",
+    "selectAndResume": "选取同样文件并恢复上传",
+    "fileName": "文件名：",
+    "fileSize": "文件大小：",
+    "sessionExpiredIn": "<0></0> 过期",
+    "chunkDescription": "({{total}} 个分片, 每个分片 {{size}})",
+    "noChunks": "(无分片)",
+    "destination": "存储路径：",
+    "uploadSession": "上传会话：",
+    "errorDetails": "错误信息：",
+    "uploadSessionCleaned": "上传会话已清除",
+    "hideCompletedTooltip": "列表中不显示已完成、失败、被取消的任务",
+    "hideCompleted": "隐藏已完成任务",
+    "addTimeAscTooltip": "最先添加的任务排在最前",
+    "addTimeAsc": "最先添加靠前",
+    "addTimeDescTooltip": "最后添加的任务排在最前",
+    "addTimeDesc": "最后添加靠前",
+    "showInstantSpeedTooltip": "单个任务上传速度展示为瞬时速度",
+    "showInstantSpeed": "瞬时速度",
+    "showAvgSpeedTooltip": "单个任务上传速度展示为平均速度",
+    "showAvgSpeed": "平均速度",
+    "cleanAllSessionTooltip": "清空服务端所有未完成的上传会话",
+    "cleanAllSession": "清空所有上传会话",
+    "cleanCompletedTooltip": "清除列表中已完成、失败、被取消的任务",
+    "cleanCompleted": "清除已完成任务",
+    "retryFailedTasks": "重试所有失败任务",
+    "retryFailedTasksTooltip": "重试队列中所有已失败的任务",
+    "setConcurrentTooltip": "设定同时进行的任务数量",
+    "setConcurrent": "设置并行数量",
+    "sizeExceedLimitError": "文件大小超出存储策略限制（最大：{{max}}）",
+    "suffixNotAllowedError": "存储策略不支持上传此扩展名的文件（当前支持：{{supported}}）",
+    "createUploadSessionError": "无法创建上传会话",
+    "deleteUploadSessionError": "无法删除上传会话",
+    "requestError": "请求失败: {{msg}} ({{url}})",
+    "chunkUploadError": "分片 [{{index}}] 上传失败",
+    "conflictError": "同名文件的上传任务已经在处理中",
+    "chunkUploadErrorWithMsg": "分片上传失败: {{msg}}",
+    "chunkUploadErrorWithRetryAfter": "（请在 {{retryAfter}} 秒后重试）",
+    "emptyFileError": "暂不支持上传空文件至 OneDrive，请通过创建文件按钮创建空文件",
+    "finishUploadError": "无法完成文件上传",
+    "finishUploadErrorWithMsg": "无法完成文件上传: {{msg}}",
+    "ossFinishUploadError": "无法完成文件上传: {{msg}} ({{code}})",
+    "cosUploadFailed": "上传失败: {{msg}} ({{code}})",
+    "upyunUploadFailed": "上传失败: {{msg}}",
+    "parseResponseError": "无法解析响应: {{msg}} ({{content}})",
+    "concurrentTaskNumber": "同时上传的任务数量",
+    "dropFileHere": "松开鼠标开始上传"
+  },
+  "share": {
+    "expireInXDays": "{{num}} 天后到期",
+    "days":"{{count}} day",
+    "days_other":"{{count}} days",
+    "expireInXHours": "{{num}} 小时后到期",
+    "hours":"an hour",
+    "hours_other":"{{count}} hours",
+    "createdBy": "此分享由 <0>{{nick}}</0> 创建",
+    "sharedBy": "<0>{{nick}}</0> 向您分享了 {{num}} 个文件",
+    "files":"1 file",
+    "files_other":"{{count}} files",
+    "statistics": "{{views}} 次浏览 • {{downloads}} 次下载 • {{time}}",
+    "views":"{{count}} view",
+    "views_other":"{{count}} views",
+    "downloads":"{{count}} download",
+    "downloads_other":"{{count}} downloads",
+    "privateShareTitle": "{{nick}} 的加密分享",
+    "enterPassword": "输入分享密码",
+    "continue": "继续",
+    "shareCanceled": "分享已取消",
+    "listLoadingError": "加载失败",
+    "sharedFiles": "我的分享",
+    "createdAtDesc": "创建日期由晚到早",
+    "createdAtAsc": "创建日期由早到晚",
+    "downloadsDesc": "下载次数由大到小",
+    "downloadsAsc": "下载次数由小到大",
+    "viewsDesc": "浏览次数由大到小",
+    "viewsAsc": "浏览次数由小到大",
+    "noRecords": "没有分享记录.",
+    "sourceNotFound": "[原始对象不存在]",
+    "expired": "已失效",
+    "changeToPublic": "变更为公开分享",
+    "changeToPrivate": "变更为私密分享",
+    "viewPassword": "查看密码",
+    "disablePreview": "禁止预览",
+    "enablePreview": "允许预览",
+    "cancelShare": "取消分享",
+    "sharePassword": "分享密码",
+    "readmeError": "无法读取 README 内容：{{msg}}",
+    "enterKeywords": "请输入搜索关键词",
+    "searchResult": "搜索结果",
+    "sharedAt": "分享于 <0></0>",
+    "pleaseLogin": "请先登录",
+    "cannotShare": "此文件无法预览",
+    "preview": "预览",
+    "incorrectPassword": "密码不正确",
+    "shareNotExist": "分享不存在或已过期"
+  },
+  "download": {
+    "failedToLoad": "加载失败",
+    "active": "进行中",
+    "finished": "已完成",
+    "activeEmpty": "没有下载中的任务",
+    "finishedEmpty": "没有已完成的任务",
+    "loadMore": "加载更多",
+    "taskFileDeleted": "文件已删除",
+    "unknownTaskName": "[未知]",
+    "taskCanceled": "任务已取消，状态会在稍后更新",
+    "operationSubmitted": "操作成功，状态会在稍后更新",
+    "deleteThisFile": "删除此文件",
+    "openDstFolder": "打开存放目录",
+    "selectDownloadingFile": "选择要下载的文件",
+    "cancelTask": "取消任务",
+    "updatedAt": "更新于：",
+    "uploaded": "上传大小：",
+    "uploadSpeed": "上传速度：",
+    "InfoHash": "InfoHash：",
+    "seederCount": "做种者：",
+    "seeding": "做种中：",
+    "downloadNode": "节点：",
+    "isSeeding": "是",
+    "notSeeding": "否",
+    "chunkSize": "分片大小：",
+    "chunkNumbers": "分片数量：",
+    "taskDeleted": "删除成功",
+    "transferFailed": "文件转存失败",
+    "downloadFailed": "下载出错：{{msg}}",
+    "canceledStatus": "已取消",
+    "finishedStatus": "已完成",
+    "pending": "已完成，转存排队中",
+    "transferring": "已完成，转存中",
+    "deleteRecord": "删除记录",
+    "createdAt": "创建日期："
+  },
+  "setting": {
+    "avatarUpdated": "头像已更新，刷新后生效",
+    "nickChanged": "昵称已更改，刷新后生效",
+    "settingSaved": "设置已保存",
+    "themeColorChanged": "主题配色已更换",
+    "profile": "个人资料",
+    "avatar": "头像",
+    "uid": "UID",
+    "nickname": "昵称",
+    "group": "用户组",
+    "regTime": "注册时间",
+    "privacyAndSecurity": "安全隐私",
+    "profilePage": "个人主页",
+    "accountPassword": "登录密码",
+    "2fa": "二步验证",
+    "enabled": "已开启",
+    "disabled": "未开启",
+    "appearance": "个性化",
+    "themeColor": "主题配色",
+    "darkMode": "黑暗模式",
+    "syncWithSystem": "跟随系统",
+    "fileList": "文件列表",
+    "timeZone": "时区",
+    "webdavServer": "连接地址",
+    "userName": "用户名",
+    "manageAccount": "账号管理",
+    "uploadImage": "从文件上传",
+    "useGravatar": "使用 Gravatar 头像 ",
+    "changeNick": "修改昵称",
+    "originalPassword": "原密码",
+    "enable2FA": "启用二步验证",
+    "disable2FA": "关闭二步验证",
+    "2faDescription": "请使用任意二步验证APP或者支持二步验证的密码管理软件扫描左侧二维码添加本站。扫描完成后请填写二步验证APP给出的6位验证码以开启二步验证。",
+    "inputCurrent2FACode": "请验证当前二步验证代码。",
+    "timeZoneCode": "IANA 时区名称标识",
+    "authenticatorRemoved": "凭证已删除",
+    "authenticatorAdded": "验证器已添加",
+    "browserNotSupported": "当前浏览器或环境不支持",
+    "removedAuthenticator": "删除凭证",
+    "removedAuthenticatorConfirm": "确定要吊销这个凭证吗？",
+    "addNewAuthenticator": "添加新验证器",
+    "hardwareAuthenticator": "外部认证器",
+    "copied": "已复制到剪切板",
+    "pleaseManuallyCopy": "当前浏览器不支持，请手动复制",
+    "webdavAccounts": "WebDAV 账号管理",
+    "webdavHint": "WebDAV的地址为：{{url}}；登录用户名统一为：{{name}} ；密码为所创建账号的密码。",
+    "annotation": "备注名",
+    "rootFolder": "相对根目录",
+    "createdAt": "创建日期",
+    "action": "操作",
+    "readonlyOn": "开启只读",
+    "readonlyOff": "关闭只读",
+    "useProxyOn": "开启反代",
+    "useProxyOff": "关闭反代",
+    "delete": "删除",
+    "listEmpty": "没有记录",
+    "createNewAccount": "创建新账号",
+    "taskType": "任务类型",
+    "taskStatus": "状态",
+    "lastProgress": "最后进度",
+    "errorDetails": "错误信息",
+    "queueing": "排队中",
+    "processing": "处理中",
+    "failed": "失败",
+    "canceled": "取消",
+    "finished": "已完成",
+    "fileTransfer": "文件中转",
+    "fileRecycle": "文件回收",
+    "importFiles": "导入外部目录",
+    "transferProgress": "已完成 {{num}} 个文件",
+    "waiting": "等待中",
+    "compressing": "压缩中",
+    "decompressing": "解压缩中",
+    "downloading": "下载中",
+    "transferring": "转存中",
+    "indexing": "索引中",
+    "listing": "插入中",
+    "allShares": "全部分享",
+    "trendingShares": "热门分享",
+    "totalShares": "分享总数",
+    "fileName": "文件名",
+    "shareDate": "分享日期",
+    "downloadNumber": "下载次数",
+    "viewNumber": "浏览次数",
+    "language": "语言",
+    "iOSApp": "iOS 客户端",
+    "connectByiOS": "通过 iOS 设备连接到 <0>{{title}}</0>",
+    "downloadOurApp": "下载并安装我们的 iOS 应用：",
+    "fillInEndpoint": "使用我们的 iOS 应用扫描下方二维码（其他扫码应用无效）：",
+    "loginApp": "完成绑定，你可以开始使用 iOS 客户端了。如果扫码绑定遇到问题，你也可以尝试手动输入用户名和密码登录。",
+    "aboutCloudreve": "关于 Cloudreve",
+    "githubRepo": "GitHub 仓库",
+    "homepage": "主页"
+  },
+  "vas": {
+    "loginWithQQ": "使用 QQ 登录",
+    "quota": "容量配额",
+    "exceedQuota": "您的已用容量已超过容量配额，请尽快删除多余文件或购买容量",
+    "extendStorage": "扩容",
+    "folderPolicySwitched": "目录存储策略已切换",
+    "switchFolderPolicy": "切换目录存储策略",
+    "setPolicyForFolder": "为当前目录设置存储策略: ",
+    "manageMount": "管理绑定",
+    "saveToMyFiles": "保存到我的文件",
+    "report": "举报",
+    "migrateStoragePolicy": "转移存储策略",
+    "fileSaved": "文件已保存",
+    "sharePurchaseTitle": "确定要支付 {{score}} 积分 购买此分享？",
+    "sharePurchaseDescription": "购买后，您可以自由预览、下载此分享的所有内容，一定期限内不会重复扣费。如果您已购买，请忽略此提示。",
+    "payToDownload": "付积分下载",
+    "creditToBePaid": "每人次下载需支付的积分",
+    "creditGainPredict": "预计每人次下载可到账 {{num}} 积分",
+    "creditPrice": " ({{num}} 积分)",
+    "creditFree": " (免积分)",
+    "cancelSubscription": "解约成功，更改会在数分钟后生效",
+    "qqUnlinked": "已解除与QQ账户的关联",
+    "groupExpire": " <0></0> 过期",
+    "manuallyCancelSubscription": "手动解约当前用户组",
+    "qqAccount": "QQ账号",
+    "connect": "绑定",
+    "unlink": "解除绑定",
+    "credits": "积分",
+    "cancelSubscriptionTitle": "解约用户组",
+    "cancelSubscriptionWarning": "将要退回到初始用户组，且所支付金额无法退还，确定要继续吗？",
+    "mountPolicy": "存储策略绑定",
+    "mountDescription": "为目录绑定存储策略后，上传至此目录或此目录下的子目录的新文件将会使用绑定的存储策略存储。复制、移动到此目录不会应用绑定的存储策略；多个父目录指定存储策略时将会选择最接近的父目录的存储策略。",
+    "mountNewFolder": "绑定新目录",
+    "nsfw": "色情信息",
+    "malware": "包含病毒",
+    "copyright": "侵权",
+    "inappropriateStatements": "不恰当的言论",
+    "other": "其他",
+    "groupBaseQuota": "用户组基础容量",
+    "validPackQuota": "有效容量包附加容量",
+    "used": "已使用容量",
+    "total": "总容量",
+    "validStoragePack": "可用容量包",
+    "buyStoragePack": "购买容量包",
+    "useGiftCode": "使用激活码兑换",
+    "packName": "容量包名称",
+    "activationDate": "激活日期",
+    "validDuration": "有效期",
+    "expiredAt": "过期日期",
+    "days": "{{num}} 天",
+    "pleaseInputGiftCode": "请输入激活码",
+    "pleaseSelectAStoragePack": "请先选择一个容量包",
+    "selectPaymentMethod": "选择支付方式：",
+    "noAvailableMethod": "无可用支付方式",
+    "alipay": "支付宝扫码",
+    "wechatPay": "微信扫码",
+    "payByCredits": "积分支付",
+    "purchaseDuration": "购买时长倍数：",
+    "creditsNum": "充值积分数量：",
+    "store": "商店",
+    "storagePacks": "容量包",
+    "membership": "会员",
+    "buyCredits": "积分充值",
+    "subtotal": "当前费用：",
+    "creditsTotalNum": "{{num}} 积分",
+    "checkoutNow": "立即购买",
+    "recommended": "推荐",
+    "enterGiftCode": "输入激活码",
+    "qrcodeAlipay": "请使用 支付宝 扫描下方二维码完成付款，付款完成后本页面会自动刷新。",
+    "qrcodeWechat": "请使用 微信 扫描下方二维码完成付款，付款完成后本页面会自动刷新。",
+    "qrcodeCustom": "请扫描下方二维码完成付款，付款完成后本页面会自动刷新。",
+    "paymentCompleted": "支付完成",
+    "productDelivered": "您所购买的商品已到账。",
+    "confirmRedeem": "确认兑换",
+    "productName": "商品名称：",
+    "qyt": "数量：",
+    "duration": "时长：",
+    "subscribe": "购买用户组",
+    "selected": "已选：",
+    "paymentQrcode": "付款二维码",
+    "validDurationDays": "有效期：{{num}} 天",
+    "reportSuccessful": "举报成功",
+    "additionalDescription": "补充描述",
+    "announcement": "公告",
+    "dontShowAgain": "不再显示",
+    "openPaymentLink": "直接打开支付链接"
+  }
+}
diff --git a/public/locales/zh-CN/common.json b/public/locales/zh-CN/common.json
new file mode 100644
index 0000000..354733f
--- /dev/null
+++ b/public/locales/zh-CN/common.json
@@ -0,0 +1,90 @@
+{
+  "pageNotFound": "页面不存在",
+  "unknownError": "未知错误",
+  "errLoadingSiteConfig": "无法加载站点配置：",
+  "newVersionRefresh": "当前页面有新版本可用，准备刷新。",
+  "errorDetails": "错误详情",
+  "renderError": "页面渲染出现错误，请尝试刷新此页面。",
+  "ok": "确定",
+  "cancel": "取消",
+  "select": "选择",
+  "copyToClipboard": "复制",
+  "close": "关闭",
+  "intlDateTime": "{{val, datetime}}",
+  "timeAgoLocaleCode": "zh_CN",
+  "forEditorLocaleCode": "zh-CN",
+  "artPlayerLocaleCode": "zh-cn",
+  "errors": {
+    "401": "请先登录",
+    "403": "此操作被禁止",
+    "404": "资源不存在",
+    "409": "发生冲突 ({{message}})",
+    "40001": "输入参数有误 ({{message}})",
+    "40002": "上传失败",
+    "40003": "目录创建失败",
+    "40004": "同名对象已存在",
+    "40005": "签名过期",
+    "40006": "不支持的存储策略类型",
+    "40007": "当前用户组无法进行此操作",
+    "40011": "上传会话不存在或已过期",
+    "40012": "分片序号无效 ({{message}})",
+    "40013": "正文长度无效 ({{message}})",
+    "40014": "超出批量获取外链限制",
+    "40015": "超出最大离线下载任务数量限制",
+    "40016": "路径不存在",
+    "40017": "该账号已被封禁",
+    "40018": "该账号未激活",
+    "40019": "此功能未启用",
+    "40020": "用户邮箱或密码错误",
+    "40021": "用户不存在",
+    "40022": "验证代码不正确",
+    "40023": "登录会话不存在",
+    "40024": "无法初始化 WebAuthn",
+    "40025": "验证失败",
+    "40026": "验证码错误",
+    "40027": "验证失败，请刷新网页重试",
+    "40028": "邮件发送失败",
+    "40029": "无效的链接",
+    "40030": "此链接已过期",
+    "40032": "此邮箱已被使用",
+    "40033": "用户未激活，已重新发送激活邮件",
+    "40034": "该用户无法被激活",
+    "40035": "存储策略不存在",
+    "40039": "用户组不存在",
+    "40044": "文件不存在",
+    "40045": "无法列取目录下的对象",
+    "40047": "无法初始化文件系统",
+    "40048": "创建任务出错",
+    "40049": "文件大小超出限制",
+    "40050": "文件类型不允许",
+    "40051": "容量空间不足",
+    "40052": "对象名非法，请移除特殊字符",
+    "40053": "不支持对根目录执行此操作",
+    "40054": "话当前目录下已经有同名文件正在上传中，请尝试清空上传会话",
+    "40055": "文件信息不一致",
+    "40056": "不支持该格式的压缩文件",
+    "40057": "可用存储策略发生变化，请刷新文件列表并重新添加此任务",
+    "40058": "分享不存在或已过期",
+    "40069": "密码不正确",
+    "40070": "此分享无法预览",
+    "40071": "签名无效",
+    "50001": "数据库操作失败 ({{message}})",
+    "50002": "URL 或请求签名失败 ({{message}})",
+    "50004": "I/O 操作失败 ({{message}})",
+    "50005": "內部错误 ({{message}})",
+    "50010": "目标节点不可用",
+    "50011": "文件元信息查询失败"
+  },
+  "vasErrors": {
+    "40031": "此 Email 服务提供商不可用，请更换其他 Email 地址",
+    "40059": "不能转存自己的分享",
+    "40062": "积分不足",
+    "40063": "当前用户组仍未过期，请前往个人设置手动解约后继续",
+    "40064": "您当前已处于此用户组中",
+    "40065": "兑换码无效",
+    "40066": "您已绑定了QQ账号，请先解除绑定",
+    "40067": "此QQ账号已被绑定其他账号",
+    "40068": "此QQ号未绑定任何账号",
+    "40072": "管理员无法升级至其他用户组"
+  }
+}
\ No newline at end of file
diff --git a/public/locales/zh-CN/dashboard.json b/public/locales/zh-CN/dashboard.json
new file mode 100644
index 0000000..63ea172
--- /dev/null
+++ b/public/locales/zh-CN/dashboard.json
@@ -0,0 +1,986 @@
+{
+  "errors":{
+    "40036": "默认存储策略无法删除",
+    "40037": "有 {{message}} 个文件仍在使用此存储策略，请先删除这些文件",
+    "40038": "有 {{message}} 个用户组绑定了此存储策略，请先解除绑定",
+    "40040": "无法对系统用户组执行此操作",
+    "40041": "有 {{message}} 位用户仍属于此用户组，请先删除这些用户或者更改用户组",
+    "40042": "无法更改初始用户的用户组",
+    "40043": "无法对初始用户执行此操作",
+    "40046": "无法对主机节点执行此操作",
+    "40060": "从机无法向主机发送回调请求，请检查主机端 参数设置 - 站点信息 - 站点URL设置，并确保从机可以连接到此地址 ({{message}})",
+    "40061": "Cloudreve 版本不一致 ({{message}})",
+    "50008": "设置项更新失败 ({{message}})",
+    "50009": "跨域策略添加失败"
+  },
+  "nav": {
+    "summary": "面板首页",
+    "settings": "参数设置",
+    "basicSetting": "站点信息",
+    "publicAccess": "注册与登录",
+    "email": "邮件",
+    "transportation": "传输与通信",
+    "appearance": "外观",
+    "image": "图像与预览",
+    "captcha": "验证码",
+    "storagePolicy": "存储策略",
+    "nodes": "离线下载节点",
+    "groups": "用户组",
+    "users": "用户",
+    "files": "文件",
+    "shares": "分享",
+    "tasks": "持久任务",
+    "remoteDownload": "离线下载",
+    "generalTasks": "常规任务",
+    "title": "仪表盘",
+    "dashboard": "Cloudreve 仪表盘"
+  },
+  "summary": {
+    "newsletterError": "Cloudreve 公告加载失败",
+    "confirmSiteURLTitle": "确定站点URL设置",
+    "siteURLNotSet": "您尚未设定站点URL，是否要将其设定为当前的 {{current}} ?",
+    "siteURLNotMatch": "您设置的站点URL与当前实际不一致，是否要将其设定为当前的 {{current}} ?",
+    "siteURLDescription": "此设置非常重要，请确保其与您站点的实际地址一致。你可以在 参数设置 - 站点信息 中更改此设置。",
+    "ignore": "忽略",
+    "changeIt": "更改",
+    "trend": "趋势",
+    "summary": "总计",
+    "totalUsers": "注册用户",
+    "totalFiles": "文件总数",
+    "publicShares": "公开分享总数",
+    "privateShares": "私密分享总数",
+    "homepage": "官方网站",
+    "documents": "使用文档",
+    "github": "Github 仓库",
+    "forum": "讨论社区",
+    "forumLink": "https://forum.cloudreve.org",
+    "telegramGroup": "Telegram 群组",
+    "telegramGroupLink": "https://t.me/cloudreve_official",
+    "buyPro": "捐助开发者",
+    "publishedAt": "发表于 <0></0>",
+    "newsTag": "notice"
+  },
+  "settings": {
+    "saved": "设置已更改",
+    "save": "保存",
+    "basicInformation": "基本信息",
+    "mainTitle": "主标题",
+    "mainTitleDes": "站点的主标题",
+    "subTitle": "副标题",
+    "subTitleDes": "站点的副标题",
+    "siteKeywords": "关键词",
+    "siteKeywordsDes": "站点关键词，以英文逗号分隔",
+    "siteDescription": "站点描述",
+    "siteDescriptionDes": "站点描述信息，可能会在分享页面摘要内展示",
+    "siteURL": "站点 URL",
+    "siteURLDes": "非常重要，请确保与实际情况一致。使用云存储策略、支付平台时，请填入可以被外网访问的地址",
+    "customFooterHTML": "页脚代码",
+    "customFooterHTMLDes": "在页面底部插入的自定义 HTML 代码",
+    "announcement": "站点公告",
+    "announcementDes": "展示给已登陆用户的公告，留空不展示。当此项内容更改时，所有用户会重新看到公告",
+    "supportHTML": "支持 HTML 代码",
+    "pwa": "渐进式应用 (PWA)",
+    "smallIcon": "小图标",
+    "smallIconDes": "扩展名为 ico 的小图标地址",
+    "mediumIcon": "中图标",
+    "mediumIconDes": "192x192 的中等图标地址，png 格式",
+    "largeIcon": "大图标",
+    "largeIconDes": "512x512 的大图标地址，png 格式。此图标还会被用于在 iOS 客户端切换站点时展示",
+    "displayMode": "展示模式",
+    "displayModeDes": "PWA 应用添加后的展示模式",
+    "themeColor": "主题色",
+    "themeColorDes": "CSS 色值，影响 PWA 启动画面上状态栏、内容页中状态栏、地址栏的颜色",
+    "backgroundColor": "背景色",
+    "backgroundColorDes": "CSS 色值",
+    "hint": "提示",
+    "webauthnNoHttps": "Web Authn 需要您的站点启用 HTTPS，并确认 参数设置 - 站点信息 - 站点URL 也使用了 HTTPS 后才能开启。",
+    "accountManagement": "注册与登录",
+    "allowNewRegistrations": "允许新用户注册",
+    "allowNewRegistrationsDes": "关闭后，无法再通过前台注册新的用户",
+    "emailActivation": "邮件激活",
+    "emailActivationDes": "开启后，新用户注册需要点击邮件中的激活链接才能完成。请确认邮件发送设置是否正确，否则激活邮件无法送达。",
+    "captchaForSignup": "注册验证码",
+    "captchaForSignupDes": "是否启用注册表单验证码",
+    "captchaForLogin": "登录验证码",
+    "captchaForLoginDes": "是否启用登录表单验证码",
+    "captchaForReset": "找回密码验证码",
+    "captchaForResetDes": "是否启用找回密码表单验证码",
+    "webauthnDes": "是否允许用户使用绑定的外部验证器登录，站点必须启用 HTTPS 才能使用。",
+    "webauthn": "外部验证器登录",
+    "defaultGroup": "默认用户组",
+    "defaultGroupDes": "用户注册后的初始用户组",
+    "testMailSent": "测试邮件已发送",
+    "testSMTPSettings": "发件测试",
+    "testSMTPTooltip": "发送测试邮件前，请先保存已更改的邮件设置；邮件发送结果不会立即反馈，如果您长时间未收到测试邮件，请检查 Cloudreve 在终端输出的错误日志。",
+    "recipient": "收件人地址",
+    "send": "发送",
+    "smtp": "发信",
+    "senderName": "发件人名",
+    "senderNameDes": "邮件中展示的发件人姓名",
+    "senderAddress": "发件人邮箱",
+    "senderAddressDes": "发件邮箱的地址",
+    "smtpServer": "SMTP 服务器",
+    "smtpServerDes": "发件服务器地址，不含端口号",
+    "smtpPort": "SMTP 端口",
+    "smtpPortDes": "发件服务器地址端口号",
+    "smtpUsername": "SMTP 用户名",
+    "smtpUsernameDes": "发信邮箱用户名，一般与邮箱地址相同",
+    "smtpPassword": "SMTP 密码",
+    "smtpPasswordDes": "发信邮箱密码",
+    "replyToAddress": "回信邮箱",
+    "replyToAddressDes": "用户回复系统发送的邮件时，用于接收回信的邮箱",
+    "enforceSSL": "强制使用 SSL 连接",
+    "enforceSSLDes": "是否强制使用 SSL 加密连接。如果无法发送邮件，可关闭此项，  Cloudreve 会尝试使用 STARTTLS 并决定是否使用加密连接",
+    "smtpTTL": "SMTP 连接有效期 (秒)",
+    "smtpTTLDes": "有效期内建立的 SMTP 连接会被新邮件发送请求复用",
+    "emailTemplates": "邮件模板",
+    "activateNewUser": "新用户激活",
+    "activateNewUserDes": "新用户注册后激活邮件的模板",
+    "resetPassword": "重置密码",
+    "resetPasswordDes": "密码重置邮件模板",
+    "sendTestEmail": "发送测试邮件",
+    "transportation": "传输",
+    "workerNum": "Worker 数量",
+    "workerNumDes": "主机节点任务队列最多并行执行的任务数，保存后需要重启 Cloudreve 生效",
+    "transitParallelNum": "中转并行传输",
+    "transitParallelNumDes": "任务队列中转任务传输时，最大并行协程数",
+    "tempFolder": "临时目录",
+    "tempFolderDes": "用于存放解压缩、压缩等任务产生的临时文件的目录路径",
+    "textEditMaxSize": "文档在线编辑最大尺寸",
+    "textEditMaxSizeDes": "文档文件可在线编辑的最大大小，超出此大小的文件无法在线编辑。此项设置适用于纯文本文件、代码文件、Office 文档 （WOPI）",
+    "failedChunkRetry": "分片错误重试",
+    "failedChunkRetryDes": "分片上传失败后重试的最大次数，只适用于服务端上传或中转",
+    "cacheChunks": "缓存流式分片文件以用于重试",
+    "cacheChunksDes": "开启后，流式中转分片上传时会将分片数据缓存在系统临时目录，以便用于分片上传失败后的重试；\n 关闭后，流式中转分片上传不会额外占用硬盘空间，但分片上传失败后整个上传会立即失败。",
+    "resetConnection": "上传校验失败时强制重置连接",
+    "resetConnectionDes": "开启后，如果本次策略、头像等数据上传校验失败，服务器会强制重置连接",
+    "expirationDuration": "有效期 (秒)",
+    "batchDownload": "打包下载",
+    "downloadSession": "下载会话",
+    "previewURL": "预览链接",
+    "docPreviewURL": "Office 文档预览链接",
+    "uploadSession": "上传会话",
+    "uploadSessionDes": "在上传会话有效期内，对于支持的存储策略，用户可以断点续传未完成的任务。最大可设定的值受限于不同存储策略服务商的规则。",
+    "downloadSessionForShared": "分享下载会话",
+    "downloadSessionForSharedDes": "设定时间内重复下载分享文件，不会被记入总下载次数",
+    "onedriveMonitorInterval": "OneDrive 客户端上传监控间隔",
+    "onedriveMonitorIntervalDes": "每间隔所设定时间，Cloudreve 会向 OneDrive 请求检查客户端上传情况已确保客户端上传可控",
+    "onedriveCallbackTolerance": "OneDrive 回调等待",
+    "onedriveCallbackToleranceDes": "OneDrive 客户端上传完成后，等待回调的最大时间，如果超出会被认为上传失败",
+    "onedriveDownloadURLCache": "OneDrive 下载请求缓存",
+    "onedriveDownloadURLCacheDes": "OneDrive 获取文件下载 URL 后可将结果缓存，减轻热门文件下载API请求频率",
+    "slaveAPIExpiration": "从机API请求超时（秒）",
+    "slaveAPIExpirationDes": "主机等待从机API请求响应的超时时间",
+    "heartbeatInterval": "节点心跳间隔（秒）",
+    "heartbeatIntervalDes": "主机节点向从机节点发送心跳的间隔",
+    "heartbeatFailThreshold": "心跳失败重试阈值",
+    "heartbeatFailThresholdDes": "主机向从机发送心跳失败后，主机可最大重试的次数。重试失败后，节点会进入恢复模式",
+    "heartbeatRecoverModeInterval": "恢复模式心跳间隔（秒）",
+    "heartbeatRecoverModeIntervalDes": "节点因异常被主机标记为恢复模式后，主机尝试重新连接节点的间隔",
+    "slaveTransitExpiration": "从机中转超时（秒）",
+    "slaveTransitExpirationDes": "从机执行文件中转任务可消耗的最长时间",
+    "nodesCommunication": "节点通信",
+    "cannotDeleteDefaultTheme": "不能删除默认配色",
+    "keepAtLeastOneTheme": "请至少保留一个配色方案",
+    "duplicatedThemePrimaryColor": "主色调不能与已有配色重复",
+    "themes": "主题配色",
+    "colors": "关键色",
+    "themeConfig": "色彩配置",
+    "actions": "操作",
+    "wrongFormat": "格式不正确",
+    "createNewTheme": "新建配色方案",
+    "themeConfigDoc": "https://v4.mui.com/zh/customization/default-theme/",
+    "themeConfigDes": "完整的配置项可在 <0>默认主题 - Material-UI</0> 查阅。",
+    "defaultTheme": "默认配色",
+    "defaultThemeDes": "用户未指定偏好配色时，站点默认使用的配色方案",
+    "appearance": "界面",
+    "personalFileListView": "个人文件列表默认样式",
+    "personalFileListViewDes": "用户未指定偏好样式时，个人文件页面列表默认样式",
+    "sharedFileListView": "目录分享页列表默认样式",
+    "sharedFileListViewDes": "用户未指定偏好样式时，目录分享页面的默认样式",
+    "primaryColor": "主色调",
+    "primaryColorText": "主色调文字",
+    "secondaryColor": "辅色调",
+    "secondaryColorText": "辅色调文字",
+    "avatar": "头像",
+    "gravatarServer": "Gravatar 服务器",
+    "gravatarServerDes": "Gravatar 服务器地址，可选择使用国内镜像",
+    "avatarFilePath": "头像存储路径",
+    "avatarFilePathDes": "用户上传自定义头像的存储路径",
+    "avatarSize": "头像文件大小限制",
+    "avatarSizeDes": "用户可上传头像文件的最大大小",
+    "smallAvatarSize": "小头像尺寸",
+    "mediumAvatarSize": "中头像尺寸",
+    "largeAvatarSize": "大头像尺寸",
+    "filePreview": "文件预览",
+    "officePreviewService": "Office 文档预览服务",
+    "officePreviewServiceDes": "可使用以下替换变量：",
+    "officePreviewServiceSrcDes": "文件 URL",
+    "officePreviewServiceSrcB64Des": " Base64 编码后的文件 URL",
+    "officePreviewServiceName": "文件名",
+    "thumbnails": "缩略图",
+    "localOnlyInfo": "以下设置只针对本机存储策略有效。",
+    "thumbnailDoc": "有关配置缩略图的更多信息，请参阅 <0>官方文档</0>。",
+    "thumbnailDocLink":"https://docs.cloudreve.org/use/thumbnails",
+    "thumbnailBasic": "基本设置",
+    "generators": "生成器",
+    "thumbMaxSize": "最大原始文件尺寸",
+    "thumbMaxSizeDes": "可生成缩略图的最大原始文件的大小，超出此大小的文件不会生成缩略图",
+    "generatorProxyWarning": "默认情况下，非本机存储策略只会使用“存储策略原生”生成器。你可以通过开启“生成器代理”功能扩展第三方存储策略的缩略图能力。",
+    "policyBuiltin": "存储策略原生",
+    "policyBuiltinDes": "使用存储提供方原生的图像处理接口。对于本机和 S3 策略，这一生成器不可用，将会自动顺沿其他生成器。对于其他存储策略，支持的原始图像格式和大小限制请参考 Cloudreve 文档。",
+    "cloudreveBuiltin":"Cloudreve 内置",
+    "cloudreveBuiltinDes": "使用 Cloudreve 内置的图像处理能力，仅支持 PNG、JPEG、GIF 格式的图片。",
+    "libreOffice": "LibreOffice",
+    "libreOfficeDes": "使用 LibreOffice 生成 Office 文档的缩略图。这一生成器依赖于任一其他图像生成器（Cloudreve 内置 或 VIPS）。",
+    "vips": "VIPS",
+    "vipsDes": "使用 libvips 处理缩略图图像，支持更多图像格式，资源消耗更低。",
+    "thumbDependencyWarning": "LibreOffice 生成器依赖于 Cloudreve 内置 或 VIPS 生成器，请开启其中任一生成器。",
+    "ffmpeg": "FFmpeg",
+    "ffmpegDes": "使用 FFmpeg 生成视频缩略图。",
+    "executable": "可执行文件",
+    "executableDes": "第三方生成器可执行文件的地址或命令",
+    "executableTest": "测试",
+    "executableTestSuccess": "生成器正常，版本：{{version}}",
+    "generatorExts": "可用扩展名",
+    "generatorExtsDes": "此生成器可用的文件扩展名列表，多个请使用半角逗号 , 隔开",
+    "ffmpegSeek": "缩略图截取位置",
+    "ffmpegSeekDes": "定义缩略图截取的时间，推荐选择较小值以加速生成过程。如果超出视频实际长度，会导致缩略图截取失败",
+    "generatorProxy": "生成器代理",
+    "enableThumbProxy": "使用生成器代理",
+    "proxyPolicyList": "启动代理的存储策略",
+    "proxyPolicyListDes": "可多选。选中后，存储策略不支持原生生成缩略图的类型会由 Cloudreve 代理生成",
+    "thumbWidth": "缩略图宽度",
+    "thumbHeight": "缩略图高度",
+    "thumbSuffix": "缩略图文件后缀",
+    "thumbConcurrent": "缩略图生成并行数量",
+    "thumbConcurrentDes": "-1 表示自动决定",
+    "thumbFormat": "缩略图格式",
+    "thumbFormatDes": "可选：png/jpg",
+    "thumbQuality": "图像质量",
+    "thumbQualityDes": "压缩质量百分比，只针对 jpg 编码有效",
+    "thumbGC": "生成完成后立即回收内存",
+    "captcha": "验证码",
+    "captchaType": "验证码类型",
+    "plainCaptcha": "普通",
+    "reCaptchaV2": "reCAPTCHA V2",
+    "tencentCloudCaptcha": "腾讯云验证码",
+    "captchaProvider": "验证码类型",
+    "plainCaptchaTitle": "普通验证码",
+    "captchaWidth": "宽度",
+    "captchaHeight": "高度",
+    "captchaLength": "长度",
+    "captchaMode": "模式",
+    "captchaModeNumber": "数字",
+    "captchaModeLetter": "字母",
+    "captchaModeMath": "算数",
+    "captchaModeNumberLetter": "数字+字母",
+    "captchaElement": "验证码的形式",
+    "complexOfNoiseText": "加强干扰文字",
+    "complexOfNoiseDot": "加强干扰点",
+    "showHollowLine": "使用空心线",
+    "showNoiseDot": "使用噪点",
+    "showNoiseText": "使用干扰文字",
+    "showSlimeLine": "使用波浪线",
+    "showSineLine": "使用正弦线",
+    "siteKey": "Site KEY",
+    "siteKeyDes": "<0>应用管理页面</0> 获取到的的 网站密钥",
+    "siteSecret": "Secret",
+    "siteSecretDes": "<0>应用管理页面</0> 获取到的的 秘钥",
+    "secretID": "SecretId",
+    "secretIDDes": "<0>访问密钥页面</0> 获取到的的 SecretId",
+    "secretKey": "SecretKey",
+    "secretKeyDes": "<0>访问密钥页面</0> 获取到的的 SecretKey",
+    "tCaptchaAppID": "APPID",
+    "tCaptchaAppIDDes": "<0>图形验证页面</0> 获取到的的 APPID",
+    "tCaptchaSecretKey": "App Secret Key",
+    "tCaptchaSecretKeyDes": "<0>图形验证页面</0> 获取到的的 App Secret Key",
+    "staticResourceCache": "静态公共资源缓存",
+    "staticResourceCacheDes": "公共可访问的静态资源（如：本机策略直链、文件下载链接）的缓存有效期",
+    "wopiClient": "WOPI 客户端",
+    "wopiClientDes": "通过对接支持 WOPI 协议的在线文档处理系统，扩展 Cloudreve 的文档在线预览和编辑能力。详情请参考 <0>官方文档</0>。",
+    "wopiDocLink": "https://docs.cloudreve.org/use/wopi",
+    "enableWopi": "使用 WOPI",
+    "wopiEndpoint": "WOPI Discovery Endpoint",
+    "wopiEndpointDes": "WOPI 客户端发现 API 的端点地址",
+    "wopiSessionTtl": "编辑会话有效期（秒）",
+    "wopiSessionTtlDes": "用户打开在线编辑文档会话的有效期，超出此期限的会话无法继续保存新更改"
+  },
+  "policy": {
+    "sharp": "#",
+    "name": "名称",
+    "type": "类型",
+    "childFiles": "下属文件数",
+    "totalSize": "数据量",
+    "actions": "操作",
+    "authSuccess": "授权成功",
+    "policyDeleted": "存储策略已删除",
+    "newStoragePolicy": "添加存储策略",
+    "all": "全部",
+    "local": "本机存储",
+    "remote": "从机存储",
+    "qiniu": "七牛",
+    "upyun": "又拍云",
+    "oss": "阿里云 OSS",
+    "cos": "腾讯云 COS",
+    "onedrive": "OneDrive",
+    "s3": "AWS S3",
+    "refresh": "刷新",
+    "delete": "删除",
+    "edit": "编辑",
+    "editInProMode": "专家模式编辑",
+    "editInWizardMode": "向导模式编辑",
+    "selectAStorageProvider": "选择存储方式",
+    "comparesStoragePolicies": "存储策略对比",
+    "comparesStoragePoliciesLink": "https://docs.cloudreve.org/use/policy/compare",
+    "storagePathStep": "上传路径",
+    "sourceLinkStep": "直链设置",
+    "uploadSettingStep": "上传设置",
+    "finishStep": "完成",
+    "policyAdded": "存储策略已添加",
+    "policySaved": "存储策略已保存",
+    "editLocalStoragePolicy": "修改本机存储策略",
+    "addLocalStoragePolicy": "添加本机存储策略",
+    "optional": "可选",
+    "pathMagicVarDes": "请在下方输入文件的存储目录路径，可以为绝对路径或相对路径（相对于 Cloudreve）。路径中可以使用魔法变量，文件在上传时会自动替换这些变量为相应值； 可用魔法变量可参考 <0>路径魔法变量列表</0>。",
+    "pathOfFolderToStoreFiles": "存储目录",
+    "filePathMagicVarDes": "是否需要对存储的物理文件进行重命名？此处的重命名不会影响最终呈现给用户的 文件名。文件名也可使用魔法变量， 可用魔法变量可参考 <0>文件名魔法变量列表</0>。",
+    "autoRenameStoredFile": "开启重命名",
+    "keepOriginalFileName": "不开启",
+    "renameRule": "命名规则",
+    "next": "下一步",
+    "enableGettingPermanentSourceLink": "是否允许获取文件永久直链？",
+    "enableGettingPermanentSourceLinkDes": "开启后，用户可以请求获得能直接访问到文件内容的直链，适用于图床应用或自用。您可能还需要在用户组设置中开启此功能，用户才可以获取直链。",
+    "allowed": "允许",
+    "forbidden": "禁止",
+    "useCDN": "是否要对下载/直链使用 CDN？",
+    "useCDNDes": "开启后，用户访问文件时的 URL 中的域名部分会被替换为 CDN 域名。",
+    "use": "使用",
+    "notUse": "不使用",
+    "cdnDomain": "选择协议并填写 CDN 域名",
+    "cdnPrefix": "CDN 前缀",
+    "back": "上一步",
+    "limitFileSize": "是否限制上传的单文件大小？",
+    "limit": "限制",
+    "notLimit": "不限制",
+    "enterSizeLimit": "输入限制：",
+    "maxSizeOfSingleFile": "单文件大小限制",
+    "limitFileExt": "是否限制上传文件扩展名？",
+    "enterFileExt": "输入允许上传的文件扩展名，多个请以半角逗号 , 隔开",
+    "extList": "扩展名列表",
+    "chunkSizeLabel": "请指定分片上传时的分片大小，填写为 0 表示不使用分片上传。",
+    "chunkSizeDes": "启用分片上传后，用户上传的文件将会被切分成分片逐个上传到存储端，当上传中断后，用户可以选择从上次上传的分片后继续开始上传。",
+    "chunkSize": "分片上传大小",
+    "nameThePolicy": "最后一步，为此存储策略命名：",
+    "policyName": "存储策略名",
+    "finish": "完成",
+    "furtherActions": "要使用此存储策略，请到用户组管理页面，为相应用户组绑定此存储策略。",
+    "backToList": "返回存储策略列表",
+    "magicVar": {
+      "fileNameMagicVar": "文件名魔法变量",
+      "pathMagicVar": "路径魔法变量",
+      "variable": "魔法变量",
+      "description": "描述",
+      "example": "示例",
+      "16digitsRandomString": "16 位随机字符",
+      "8digitsRandomString": "8 位随机字符",
+      "secondTimestamp": "秒级时间戳",
+      "nanoTimestamp": "纳秒级时间戳",
+      "uid": "用户 ID",
+      "originalFileName": "原始文件名",
+      "originFileNameNoext": "无扩展名的原始文件名",
+      "extension": "文件扩展名",
+      "uuidV4": "UUID V4",
+      "date": "日期",
+      "dateAndTime": "日期时间",
+      "year": "年份",
+      "month": "月份",
+      "day": "日",
+      "hour": "小时",
+      "minute": "分钟",
+      "second": "秒",
+      "userUploadPath": "用户上传路径"
+    },
+    "storageNode": "存储端配置",
+    "communicationOK": "通信正常",
+    "editRemoteStoragePolicy": "修改从机存储策略",
+    "addRemoteStoragePolicy": "添加从机存储策略",
+    "remoteDescription": "从机存储策略允许你使用同样运行了 Cloudreve 的服务器作为存储端， 用户上传下载流量通过 HTTP 直传。",
+    "remoteCopyBinaryDescription": "将和主站相同版本的 Cloudreve 程序拷贝至要作为从机的服务器上。",
+    "remoteSecretDescription": "下方为系统为您随机生成的从机端密钥，一般无需改动，如果有自定义需求，可将您的密钥填入下方：",
+    "remoteSecret": "从机密钥",
+    "modifyRemoteConfig": "修改从机配置文件。",
+    "addRemoteConfigDes": " 在从机端 Cloudreve 的同级目录下新建 <0>conf.ini</0> 文件，填入从机配置，启动/重启从机端 Cloudreve。以下为一个可供参考的配置例子，其中密钥部分已帮您填写为上一步所生成的。",
+    "remoteConfigDifference": "从机端配置文件格式大致与主站端相同，区别在于：",
+    "remoteConfigDifference1": "<0>System</0> 分区下的 <1>mode</1> 字段必须更改为 <2>slave</2>。",
+    "remoteConfigDifference2": "必须指定 <0>Slave</0> 分区下的 <1>Secret</1> 字段，其值为第二步里填写或生成的密钥。",
+    "remoteConfigDifference3": "必须启动跨域配置，即 <0>CORS</0> 字段的内容，具体可参考上文范例或官方文档。如果配置不正确，用户将无法通过 Web 端向从机上传文件。",
+    "inputRemoteAddress": "填写从机地址。",
+    "inputRemoteAddressDes": "如果主站启用了 HTTPS，从机也需要启用，并在下方填入 HTTPS 协议的地址。",
+    "remoteAddress": "从机地址",
+    "testCommunicationDes": "完成以上步骤后，你可以点击下方的测试按钮测试通信是否正常。",
+    "testCommunication": "测试从机通信",
+    "pathMagicVarDesRemote": "请在下方输入文件的存储目录路径，可以为绝对路径或相对路径（相对于 从机的 Cloudreve）。路径中可以使用魔法变量，文件在上传时会自动替换这些变量为相应值； 可用魔法变量可参考 <0>路径魔法变量列表</0>。",
+    "storageBucket": "存储空间",
+    "editQiniuStoragePolicy": "修改七牛存储策略",
+    "addQiniuStoragePolicy": "添加七牛存储策略",
+    "wanSiteURLDes": "在使用此存储策略前，请确保您在 参数设置 - 站点信息 - 站点URL 中填写的 地址与实际相符，并且 <0>能够被外网正常访问</0>。",
+    "createQiniuBucket": "前往 <0>七牛控制面板</0> 创建对象存储资源。",
+    "enterQiniuBucket": "在下方填写您在七牛创建存储空间时指定的“存储空间名称”：",
+    "qiniuBucketName": "存储空间名称",
+    "bucketTypeDes": "在下方选择您创建的空间类型，推荐选择“私有空间”以获得更高的安全性。",
+    "privateBucket": "私有",
+    "publicBucket": "公有",
+    "bucketCDNDes": "填写您为存储空间绑定的 CDN 加速域名。",
+    "bucketCDNDomain": "CDN 加速域名",
+    "qiniuCredentialDes": "在七牛控制面板进入 个人中心 - 密钥管理，在下方填写获得到的 AK、SK。",
+    "ak": "AK",
+    "sk": "SK",
+    "cannotEnableForPrivateBucket": "私有空间开启外链功能后，还需要在用户组里设置开启“使用重定向的外链”，否则无法正常生成外链",
+    "limitMimeType": "是否限制上传文件 MimeType？",
+    "mimeTypeDes": "输入允许上传的 MimeType，多个请以半角逗号 , 隔开。七牛服务器会侦测文件内容以判断 MimeType，再用判断值跟指定值进行匹配，匹配成功则允许上传。",
+    "mimeTypeList": "MimeType 列表",
+    "chunkSizeLabelQiniu": "请指定分片上传时的分片大小，范围 1 MB - 1 GB。",
+    "createPlaceholderDes": "是否要再用户开始上传时就创建占位符文件并扣除用户容量？开启后，可以防止用户恶意发起多个上传请求但不完成上传。",
+    "createPlaceholder": "创建占位符文件",
+    "notCreatePlaceholder": "不创建",
+    "corsSettingStep": "跨域策略",
+    "corsPolicyAdded": "跨域策略已添加",
+    "editOSSStoragePolicy": "修改阿里云 OSS 存储策略",
+    "addOSSStoragePolicy": "添加阿里云 OSS 存储策略",
+    "createOSSBucketDes": "前往 <0>OSS 管理控制台</0> 创建 Bucket。注意：创建空间类型只能选择 <1>标准存储</1> 或 <2>低频访问</2>，暂不支持 <3>归档存储</3>。",
+    "ossBucketNameDes": "在下方填写您创建 Bucket 时指定的 <0>Bucket 名称</0>：",
+    "bucketName": "Bucket 名称",
+    "publicReadBucket": "公共读",
+    "ossEndpointDes": "转到所创建 Bucket 的概览页面，填写 <0>访问域名</0> 栏目下 <1>外网访问</1> 一行中间的 <2>EndPoint（地域节点）</2>。",
+    "endpoint": "EndPoint",
+    "endpointDomainOnly": "格式不合法，只需输入域名部分即可",
+    "ossLANEndpointDes": "如果您的 Cloudreve 部署在阿里云计算服务中，并且与 OSS 处在同一可用区下，您可以额外指定使用内网 EndPoint 以节省流量开支。是否要在服务端发送请求时使用 OSS 内网 EndPoint？",
+    "intranetEndPoint": "内网 EndPoint",
+    "ossCDNDes": "是否要使用配套的 阿里云CDN 加速 OSS 访问？",
+    "createOSSCDNDes": "前往 <0>阿里云 CDN 管理控制台</0> 创建 CDN 加速域名，并设定源站为刚创建的 OSS Bucket。在下方填写 CDN 加速域名，并选择是否使用 HTTPS：",
+    "ossAKDes": "在阿里云 <0>安全信息管理</0> 页面获取 用户 AccessKey，并填写在下方。",
+    "shouldNotContainSpace": "不能含有空格",
+    "nameThePolicyFirst": "为此存储策略命名：",
+    "chunkSizeLabelOSS": "请指定分片上传时的分片大小，范围 100 KB ~ 5 GB。",
+    "ossCORSDes": "此存储策略需要正确配置跨域策略后才能使用 Web 端上传文件，Cloudreve 可以帮您自动设置，您也可以参考文档步骤手动设置。如果您已设置过此 Bucket 的跨域策略，此步骤可以跳过。",
+    "letCloudreveHelpMe": "让 Cloudreve 帮我设置",
+    "skip": "跳过",
+    "editUpyunStoragePolicy": "修改又拍云存储策略",
+    "addUpyunStoragePolicy": "添加又拍云存储策略",
+    "createUpyunBucketDes": "前往 <0>又拍云面板</0> 创建云存储服务。",
+    "storageServiceNameDes": "在下方填写所创建的服务名称：",
+    "storageServiceName": "服务名称",
+    "operatorNameDes": "为此服务创建或授权有读取、写入、删除权限的操作员，然后将操作员信息填写在下方：",
+    "operatorName": "操作员名",
+    "operatorPassword": "操作员密码",
+    "upyunCDNDes": "填写为云存储服务绑定的域名，并根据实际情况选择是否使用 HTTPS：",
+    "upyunOptionalDes": "此步骤可保持默认并跳过，但是强烈建议您跟随此步骤操作。",
+    "upyunTokenDes": "前往所创建云存储服务的 功能配置 面板，转到 访问配置 选项卡，开启 Token 防盗链并设定密码。",
+    "tokenEnabled": "已开启 Token 防盗链",
+    "tokenDisabled": "未开启 Token 防盗链",
+    "upyunTokenSecretDes": "填写您所设置的 Token 防盗链 密钥",
+    "upyunTokenSecret": "Token 防盗链 密钥",
+    "cannotEnableForTokenProtectedBucket": "开启 Token 防盗链后无法使用直链功能",
+    "callbackFunctionStep": "云函数回调",
+    "callbackFunctionAdded": "回调云函数已添加",
+    "editCOSStoragePolicy": "修改腾讯云 COS 存储策略",
+    "addCOSStoragePolicy": "添加腾讯云 COS 存储策略",
+    "createCOSBucketDes": "前往 <0>COS 管理控制台</0> 创建存储桶。",
+    "cosBucketNameDes": "转到所创建存储桶的基础配置页面，将 <0>空间名称</0> 填写在下方：",
+    "cosBucketFormatError": "空间名格式不正确, 举例：ccc-1252109809",
+    "cosBucketTypeDes": "在下方选择您创建的空间的访问权限类型，推荐选择 <0>私有读写</0> 以获得更高的安全性，私有空间无法开启“获取直链”功能。",
+    "cosPrivateRW": "私有读写",
+    "cosPublicRW": "公共读私有写",
+    "cosAccessDomainDes": "转到所创建 Bucket 的基础配置，填写 <0>基本信息</0> 栏目下 给出的 <1>访问域名</1>。",
+    "accessDomain": "访问域名",
+    "cosCDNDes": "是否要使用配套的 腾讯云CDN 加速 COS 访问？",
+    "cosCDNDomainDes": "前往 <0>腾讯云 CDN 管理控制台</0> 创建 CDN 加速域名，并设定源站为刚创建的 COS 存储桶。在下方填写 CDN 加速域名，并选择是否使用 HTTPS：",
+    "cosCredentialDes": "在腾讯云 <0>访问密钥</0> 页面获取一对访问密钥，并填写在下方。请确保这对密钥拥有 COS 和 SCF 服务的访问权限。",
+    "secretId": "SecretId",
+    "secretKey": "SecretKey",
+    "cosCallbackDes": "COS 存储桶 客户端直传需要借助腾讯云的 <0>云函数</0> 产品以确保上传回调可控。如果您打算将此存储策略自用，或者分配给可信赖用户组，此步骤可以跳过。如果是作为公有使用，请务必创建回调云函数。",
+    "cosCallbackCreate": "Cloudreve 可以尝试帮你自动创建回调云函数，请选择 COS 存储桶 所在地域后继续。创建可能会花费数秒钟，请耐心等待。创建前请确保您的腾讯云账号已开启云函数服务。",
+    "cosBucketRegion": "存储桶所在地区",
+    "ap-beijing": "华北地区(北京)",
+    "ap-chengdu": "西南地区(成都)",
+    "ap-guangzhou": "华南地区(广州)",
+    "ap-guangzhou-open": "华南地区(广州Open)",
+    "ap-hongkong": "港澳台地区(中国香港)",
+    "ap-mumbai": "亚太南部(孟买)",
+    "ap-shanghai": "华东地区(上海)",
+    "na-siliconvalley": "美国西部(硅谷)",
+    "na-toronto": "北美地区(多伦多)",
+    "applicationRegistration": "应用授权",
+    "grantAccess": "账号授权",
+    "warning": "警告",
+    "odHttpsWarning": "您必须启用 HTTPS 才能使用 OneDrive/SharePoint 存储策略；启用后同步更改 参数设置 - 站点信息 - 站点URL。",
+    "editOdStoragePolicy": "修改 OneDrive/SharePoint 存储策略",
+    "addOdStoragePolicy": "添加 OneDrive/SharePoint 存储策略",
+    "creatAadAppDes": "前往 <0>Azure Active Directory 控制台 (国际版账号)</0> 或者 <1>Azure Active Directory 控制台 (世纪互联账号)</1> 并登录，登录后进入<2>Azure Active Directory</2> 管理面板，这里登录使用的账号和最终存储使用的 OneDrive 所属账号可以不同。",
+    "createAadAppDes2": "进入左侧 <0>应用注册</0> 菜单，并点击 <1>新注册</1> 按钮。",
+    "createAadAppDes3": "填写应用注册表单。其中，名称可任取；<0>受支持的帐户类型</0> 选择为 <1>任何组织目录(任何 Azure AD 目录 - 多租户)中的帐户和个人 Microsoft 帐户(例如，Skype、Xbox)</1>；<2>重定向 URI (可选)</2> 请选择 <3>Web</3>，并填写 <4>{{url}}</4>； 其他保持默认即可",
+    "aadAppIDDes": "创建完成后进入应用管理的 <0>概览</0> 页面，复制 <1>应用程序(客户端) ID</1> 并填写在下方：",
+    "aadAppID": "应用程序(客户端) ID",
+    "addAppSecretDes": "进入应用管理页面左侧的 <0>证书和密码</0> 菜单，点击 <1>新建客户端密码</1> 按钮，<2>截止期限</2> 选择为 <3>从不</3>。创建完成后将客户端密码的值填写在下方：",
+    "aadAppSecret": "客户端密码",
+    "aadAccountCloudDes": "选择您的 Microsoft 365 账号类型：",
+    "multiTenant": "国际版",
+    "gallatin": "世纪互联版",
+    "sharePointDes": "是否将文件存放在 SharePoint 中？",
+    "saveToSharePoint": "存到指定 SharePoint 中",
+    "saveToOneDrive": "存到账号默认 OneDrive 驱动器中",
+    "spSiteURL": "SharePoint 站点地址",
+    "odReverseProxyURLDes": "是否要在文件下载时替换为使用自建的反代服务器？",
+    "odReverseProxyURL": "反代服务器地址",
+    "chunkSizeLabelOd": "请指定分片上传时的分片大小，OneDrive 要求必须为 320 KiB (327,680 bytes) 的整数倍。",
+    "limitOdTPSDes": "是否限制服务端 OneDrive API 请求频率？",
+    "tps": "TPS 限制",
+    "tpsDes": "限制此存储策略每秒向 OneDrive 发送 API 请求最大数量。超出此频率的请求会被限速。多个 Cloudreve 节点转存文件时，它们会各自使用自己的限流桶，请根据情况按比例调低此数值。Web 端上传请求并不受此限制。",
+    "tpsBurst": "TPS 突发请求",
+    "tpsBurstDes": "请求空闲时，Cloudreve 可将指定数量的名额预留给未来的突发流量使用。",
+    "odOauthDes": "但是你需要点击下方按钮，并使用 OneDrive 登录授权以完成初始化后才能使用。日后你可以在存储策略列表页面重新进行授权。",
+    "gotoAuthPage": "转到授权页面",
+    "s3SelfHostWarning": "S3 类型存储策略目前仅可用于自己使用，或者是给受信任的用户组使用。",
+    "editS3StoragePolicy": "修改 AWS S3 存储策略",
+    "addS3StoragePolicy": "添加 AWS S3 存储策略",
+    "s3BucketDes": "前往 AWS S3 控制台创建存储桶，在下方填写您创建存储桶时指定的 <0>Bucket 名称</0>：",
+    "publicAccessDisabled": "阻止全部公共访问权限",
+    "publicAccessEnabled": "允许公共读取",
+    "s3EndpointDes": "(可选) 指定存储桶的 EndPoint（地域节点），填写为完整的 URL 格式，比如 <0>https://bucket.region.example.com</0>。留空则将使用系统生成的默认接入点。",
+    "selectRegionDes": "选择存储桶所在的区域，或者手动输入区域代码",
+    "enterAccessCredentials": "获取访问密钥，并填写在下方。",
+    "accessKey": "AccessKey",
+    "chunkSizeLabelS3": "请指定分片上传时的分片大小，范围 5 MB ~ 5 GB。",
+    "editPolicy": "编辑存储策略",
+    "setting":"设置项",
+    "value": "值",
+    "description": "描述",
+    "id": "ID",
+    "policyID": "存储策略编号",
+    "policyType": "存储策略类型",
+    "server": "Server",
+    "policyEndpoint": "存储端 Endpoint",
+    "bucketID": "存储桶标识",
+    "yes": "是",
+    "no": "否",
+    "privateBucketDes": "是否为私有空间",
+    "resourceRootURL": "文件资源根 URL",
+    "resourceRootURLDes": "预览/获取文件外链时生成 URL 的前缀",
+    "akDes": "AccessKey / 刷新 Token",
+    "maxSizeBytes": "最大单文件尺寸 (Bytes)",
+    "maxSizeBytesDes": "最大可上传的文件尺寸，填写为 0 表示不限制",
+    "autoRename": "自动重命名",
+    "autoRenameDes": "是否根据规则对上传物理文件重命名",
+    "storagePath": "存储路径",
+    "storagePathDes": "文件物理存储路径",
+    "fileName": "存储文件名",
+    "fileNameDes": "文件物理存储文件名",
+    "allowGetSourceLink": "允许获取外链",
+    "allowGetSourceLinkDes": "是否允许获取外链。注意，某些存储策略类型不支持，即使在此开启，获取的外链也无法使用",
+    "upyunToken": "又拍云防盗链 Token",
+    "upyunOnly": "仅对又拍云存储策略有效",
+    "allowedFileExtension": "允许文件扩展名",
+    "emptyIsNoLimit": "留空表示不限制",
+    "allowedMimetype": "允许的 MimeType",
+    "qiniuOnly": "仅对七牛存储策略有效",
+    "odRedirectURL": "OneDrive 重定向地址",
+    "noModificationNeeded": "一般添加后无需修改",
+    "odReverseProxy": "OneDrive 反代服务器地址",
+    "odOnly": "仅对 OneDrive 存储策略有效",
+    "odDriverID": "OneDrive/SharePoint 驱动器资源标识",
+    "odDriverIDDes": "仅对 OneDrive 存储策略有效，留空则使用用户的默认 OneDrive 驱动器",
+    "s3Region": "Amazon S3 Region",
+    "s3Only": "仅对 Amazon S3 存储策略有效",
+    "lanEndpoint": "内网 EndPoint",
+    "ossOnly": "仅对 OSS 存储策略有效",
+    "chunkSizeBytes": "上传分片大小 (Bytes)",
+    "chunkSizeBytesDes": "分片上传时单个分片的大小，仅部分存储策略支持",
+    "placeHolderWithSize": "上传前预支用户存储",
+    "placeHolderWithSizeDes": "是否在上传会话创建时就对用户存储进行预支，仅部分存储策略支持",
+    "saveChanges": "保存更改",
+    "s3EndpointPathStyle": "选择 S3 Endpoint 地址的格式，如果您不知道该选什么，保持默认即可。某些第三方 S3 兼容存储策略可能需要更改此选项。开启后，将会强制使用路径格式地址，比如 <0>http://s3.amazonaws.com/BUCKET/KEY</0>。",
+    "usePathEndpoint": "强制路径格式",
+    "useHostnameEndpoint": "主机名优先",
+    "thumbExt": "可生成缩略图的文件扩展名",
+    "thumbExtDes": "留空表示使用存储策略预定义集合。对本机、S3存储策略无效"
+  },
+  "node": {
+    "#": "#",
+    "name": "名称",
+    "status": "当前状态",
+    "features": "已启用功能",
+    "action": "操作",
+    "remoteDownload": "离线下载",
+    "nodeDisabled": "节点已暂停使用",
+    "nodeEnabled": "节点已启用",
+    "nodeDeleted": "节点已删除",
+    "disabled": "未启用",
+    "online": "在线",
+    "offline": "离线",
+    "addNewNode": "接入新节点",
+    "refresh": "刷新",
+    "enableNode": "启用节点",
+    "disableNode": "暂停使用节点",
+    "edit": "编辑",
+    "delete": "删除",
+    "slaveNodeDes": "您可以添加同样运行了 Cloudreve 的服务器作为从机端，正常运行工作的从机端可以为主机分担某些异步任务（如离线下载）。请参考下面向导部署并配置连接 Cloudreve 从机节点。<0>如果你已经在目标服务器上部署了从机存储策略，您可以跳过本页面的某些步骤，只将从机密钥、服务器地址在这里填写并保持与从机存储策略中一致即可。</0> 在后续版本中，从机存储策略的相关配置会合并到这里。",
+  "overwriteDes": "; 以下为可选的设置，对应主机节点的相关参数，可以通过配置文件应用到从机节点，请根据<0></0>; 实际情况调整。更改下面设置需要重启从机节点后生效。",
+    "workerNumDes": "任务队列最多并行执行的任务数",
+    "parallelTransferDes": "任务队列中转任务传输时，最大并行协程数",
+    "chunkRetriesDes": "中转分片上传失败后重试的最大次数",
+    "multipleMasterDes": "一个从机 Cloudreve 实例可以对接多个 Cloudreve 主节点，只需在所有主节点中添加此从机节点并保持密钥一致即可。",
+    "ariaSuccess": "连接成功，Aria2 版本为：{{version}}",
+    "slave": "从机",
+    "master": "主机",
+    "aria2Des": "Cloudreve 的离线下载功能由 <0>Aria2</0> 驱动。如需使用，请在目标节点服务器上以和运行 Cloudreve 相同的用户身份启动 Aria2， 并在 Aria2 的配置文件中开启 RPC 服务，<1>Aria2 需要和{{mode}} Cloudreve 进程共用相同的文件系统。</1> 更多信息及指引请参考文档的 <2>离线下载</2> 章节。",
+    "slaveTakeOverRemoteDownload": "是否需要此节点接管离线下载任务？",
+    "masterTakeOverRemoteDownload": "是否需要主机接管离线下载任务？",
+    "routeTaskSlave": "开启后，用户的离线下载请求可以被分流到此节点处理。",
+    "routeTaskMaster": "开启后，用户的离线下载请求可以被分流到主机处理。",
+    "enable": "启用",
+    "disable": "关闭",
+    "slaveNodeTarget": "在目标节点服务器上与节点",
+    "masterNodeTarget": "在与",
+    "aria2ConfigDes": "{{target}} Cloudreve 进程相同的文件系统环境下启动 Aria2 进程。在启动 Aria2 时，需要在其配置文件中启用 RPC 服务，并设定 RPC Secret，以便后续使用。以下为一个供参考的配置：",
+    "enableRPCComment": "启用 RPC 服务",
+    "rpcPortComment": "RPC 监听端口",
+    "rpcSecretComment": "RPC 授权令牌，可自行设定",
+    "rpcConfigDes": "推荐在日常启动流程中，先启动 Aria2，再启动节点 Cloudreve，这样节点 Cloudreve 可以向 Aria2 订阅事件通知，下载状态变更处理更及时。当然，如果没有这一流程，节点 Cloudreve 也会通过轮询追踪任务状态。",
+    "rpcServerDes": "在下方填写{{mode}} Cloudreve 与 Aria2 通信的 RPC 服务地址。一般可填写为 <0>http://127.0.0.1:6800/</0>，其中端口号 <1>6800</1> 与上文配置文件中 <2>rpc-listen-port</2>保持一致。",
+    "rpcServer": "RPC 服务器地址",
+    "rpcServerHelpDes": "包含端口的完整 RPC 服务器地址，例如：http://127.0.0.1:6800/，留空表示不启用 Aria2 服务",
+    "rpcTokenDes": "RPC 授权令牌，与 Aria2 配置文件中 <0>rpc-secret</0> 保持一致，未设置请留空。",
+    "aria2PathDes": "在下方填写 Aria2 用作临时下载目录的 节点上的 <0>绝对路径</0>，节点上的 Cloudreve 进程需要此目录的读、写、执行权限。",
+    "aria2SettingDes": "在下方按需要填写一些 Aria2 额外参数信息。",
+    "refreshInterval": "状态刷新间隔 (秒)",
+    "refreshIntervalDes": "Cloudreve 向 Aria2 请求刷新任务状态的间隔。",
+    "rpcTimeout": "RPC 调用超时 (秒)",
+    "rpcTimeoutDes": "调用 RPC 服务时最长等待时间",
+    "globalOptions": "全局任务参数",
+    "globalOptionsDes": "创建下载任务时携带的额外设置参数，以 JSON 编码后的格式书写，您可也可以将这些设置写在 Aria2 配置文件里，可用参数请查阅官方文档",
+    "testAria2Des": "完成以上步骤后，你可以点击下方的测试按钮测试{{mode}} Cloudreve 向 Aria2 通信是否正常。",
+    "testAria2DesSlaveAddition": "在进行测试前请先确保您已进行并通过上一页面中的“从机通信测试”。",
+    "testAria2": "测试 Aria2 通信",
+    "aria2DocURL": "https://docs.cloudreve.org/use/aria2",
+    "nameNode": "为此节点命名：",
+    "loadBalancerRankDes": "为此节点指定负载均衡权重，数值为整数。某些负载均衡策略会根据此数值加权选择节点",
+    "loadBalancerRank": "负载均衡权重",
+    "nodeSaved": "节点已保存！",
+    "nodeSavedFutureAction": "如果您添加了新节点，还需要在节点列表手动启动节点才能正常使用。",
+    "backToNodeList": "返回节点列表",
+    "communication": "通信配置",
+    "otherSettings": "杂项信息",
+    "finish": "完成",
+    "nodeAdded": "节点已添加",
+    "nodeSavedNow": "节点已保存",
+    "editNode": "编辑节点",
+    "addNode": "添加节点"
+  },
+  "group": {
+    "#": "#",
+    "name": "名称",
+    "type": "存储策略",
+    "count": "下属用户数",
+    "size": "最大容量",
+    "action": "操作",
+    "deleted": "用户组已删除",
+    "new": "新建用户组",
+    "aria2FormatError": "Aria2 设置项格式错误",
+    "atLeastOnePolicy": "至少要为用户组选择一个存储策略",
+    "added": "用户组已添加",
+    "saved": "用户组已保存",
+    "editGroup": "编辑 {{group}}",
+    "nameOfGroup": "用户组名",
+    "nameOfGroupDes": "用户组的名称",
+    "storagePolicy": "存储策略",
+    "storageDes": "指定用户组的存储策略。",
+    "availablePolicies": "可用存储策略",
+    "availablePoliciesDes": "指定用户组可用的存储策略，可多选，用户可在选定范围内自由切换存储策略。",
+    "initialStorageQuota": "初始容量",
+    "initialStorageQuotaDes": "用户组下的用户初始可用最大容量",
+    "downloadSpeedLimit": "下载限速",
+    "downloadSpeedLimitDes": "填写为 0 表示不限制。开启限制后，此用户组下的用户下载所有支持限速的存储策略下的文件时，下载最大速度会被限制。",
+    "bathSourceLinkLimit": "批量生成外链数量限制",
+    "bathSourceLinkLimitDes": "对于支持的存储策略下的文件，允许用户单次批量获取外链的最大文件数量，填写为 0 表示不允许批量生成外链。",
+    "allowCreateShareLink": "允许创建分享",
+    "allowCreateShareLinkDes": "关闭后，用户无法创建分享链接",
+    "allowDownloadShare": "允许下载分享",
+    "allowDownloadShareDes": "关闭后，用户无法下载别人创建的文件分享",
+    "allowWabDAV": "WebDAV",
+    "allowWabDAVDes": "关闭后，用户无法通过 WebDAV 协议连接至网盘",
+    "allowWabDAVProxy": "WebDAV 代理",
+    "allowWabDAVProxyDes": "启用后, 用户可以配置 WebDAV 代理下载文件的流量",
+    "disableMultipleDownload": "禁止多次下载请求",
+    "disableMultipleDownloadDes": "只针对本机存储策略有效。开启后，用户无法使用多线程下载工具。",
+    "allowRemoteDownload": "离线下载",
+    "allowRemoteDownloadDes": "是否允许用户创建离线下载任务",
+    "aria2Options": "Aria2 任务参数",
+    "aria2OptionsDes": "此用户组创建离线下载任务时额外携带的参数，以 JSON 编码后的格式书写，您可也可以将这些设置写在 Aria2 配置文件里，可用参数请查阅官方文档",
+    "aria2BatchSize": "Aria2 批量下载最大数量",
+    "aria2BatchSizeDes": "允许用户同时进行的离线下载任务数量，填写为 0 或留空表示不限制。",
+    "serverSideBatchDownload": "服务端打包下载",
+    "serverSideBatchDownloadDes": "是否允许用户多选文件使用服务端中转打包下载，关闭后，用户仍然可以使用纯  Web 端打包下载功能。",
+    "compressTask": "压缩/解压缩 任务",
+    "compressTaskDes": "是否用户创建 压缩/解压缩 任务",
+    "compressSize": "待压缩文件最大大小",
+    "compressSizeDes": "用户可创建的压缩任务的文件最大总大小，填写为 0 表示不限制",
+    "decompressSize": "待解压文件最大大小",
+    "decompressSizeDes": "用户可创建的解压缩任务的文件最大总大小，填写为 0 表示不限制",
+    "migratePolicy": "存储策略转移",
+    "migratePolicyDes": "是否用户创建存储策略转移任务",
+    "allowSelectNode": "允许选择下载节点",
+    "allowSelectNodeDes": "开启后，用户可以在创建任务前选择处理下载的从机节点；关闭后，系统会自动分配节点。",
+    "redirectedSource": "使用重定向的外链",
+    "redirectedSourceDes": "开启后，用户获取的文件外链将由 Cloudreve 中转，链接较短。关闭后，用户获取的文件外链会变成文件的原始链接。部分存储策略获取的非中转外链无法保持永久有效，请参阅 <0>比较存储策略</0>。",
+    "availableNodes": "可用下载节点",
+    "availableNodesDes": "指定用户组可用的下载节点，留空表示全部节点都可用。用户只能在此列表内选择或被负载均衡分配下载节点。",
+    "advanceDelete": "允许使用高级文件删除选项",
+    "advanceDeleteDes": "开启后，用户在前台删除文件时可以选择是否强制删除、是否仅解除物理链接。这些选项与后台管理面板删除文件时类似，请只开放给可信用户组。"
+  },
+  "user": {
+    "deleted": "用户已删除",
+    "new": "新建用户",
+    "filter": "过滤",
+    "selectedObjects": "已选择 {{num}} 个对象",
+    "nick": "昵称",
+    "email": "Email",
+    "group": "用户组",
+    "status": "状态",
+    "usedStorage": "已用空间",
+    "active": "正常",
+    "notActivated": "未激活",
+    "banned": "被封禁",
+    "bannedBySys": "超额封禁",
+    "toggleBan": "封禁/解封",
+    "filterCondition": "过滤条件",
+    "all": "全部",
+    "userStatus": "用户状态",
+    "searchNickUserName": "搜索 昵称 / 用户名",
+    "apply": "应用",
+    "added": "用户已添加",
+    "saved": "用户已保存",
+    "editUser": "编辑 {{nick}}",
+    "password": "密码",
+    "passwordDes": "留空表示不修改",
+    "groupDes": "用户所属用户组",
+    "2FASecret": "二步验证密钥",
+    "2FASecretDes": "用户二步验证器的密钥，清空表示未启用。"
+  },
+  "file": {
+    "name": "文件名",
+    "deleteAsync": "删除任务将在后台执行",
+    "import": "从外部导入",
+    "forceDelete": "强制删除",
+    "size": "大小",
+    "uploader": "上传者",
+    "createdAt": "创建于",
+    "uploading": "上传中",
+    "unknownUploader": "未知",
+    "uploaderID": "上传者 ID",
+    "searchFileName": "搜索文件名",
+    "storagePolicy": "存储策略",
+    "selectTargetUser": "请先选择目标用户",
+    "importTaskCreated": "导入任务已创建，您可以在“持久任务”中查看执行情况",
+    "manuallyPathOnly": "选择的存储策略只支持手动输入路径",
+    "selectFolder": "选择目录",
+    "importExternalFolder": "导入外部目录",
+    "importExternalFolderDes": "您可以将存储策略中已有文件、目录结构导入到 Cloudreve 中，导入操作不会额外占用物理存储空间，但仍会正常扣除用户已用容量空间，空间不足时将停止导入。",
+    "storagePolicyDes": "选择要导入文件目前存储所在的存储策略",
+    "targetUser": "目标用户",
+    "targetUserDes": "选择要将文件导入到哪个用户的文件系统中，可通过昵称、邮箱搜索用户",
+    "srcFolderPath": "原始目录路径",
+    "select": "选择",
+    "selectSrcDes": "要导入的目录在存储端的路径",
+    "dstFolderPath": "目的目录路径",
+    "dstFolderPathDes": "要将目录导入到用户文件系统中的路径",
+    "recursivelyImport": "递归导入子目录",
+    "recursivelyImportDes": "是否将目录下的所有子目录递归导入",
+    "createImportTask": "创建导入任务",
+    "unlink": "解除关联（保留物理文件）"
+  },
+  "share": {
+    "deleted": "分享已删除",
+    "objectName": "对象名",
+    "views": "浏览",
+    "downloads": "下载",
+    "price": "积分",
+    "autoExpire": "自动过期",
+    "owner": "分享者",
+    "createdAt": "分享于",
+    "public": "公开",
+    "private": "私密",
+    "afterNDownloads":"{{num}} 次下载后",
+    "none": "无",
+    "srcType": "源文件类型",
+    "folder": "目录",
+    "file": "文件"
+  },
+  "task": {
+    "taskDeleted": "任务已删除",
+    "howToConfigAria2": "如何配置离线下载？",
+    "srcURL": "源地址",
+    "node": "处理节点",
+    "createdBy": "创建者",
+    "ready": "就绪",
+    "downloading": "下载中",
+    "paused": "暂停中",
+    "seeding": "做种中",
+    "error": "出错",
+    "finished": "完成",
+    "canceled": "取消/停止",
+    "unknown": "未知",
+    "aria2Des": "Cloudreve 的离线下载支持主从分散模式。您可以配置多个 Cloudreve 从机节点，这些节点可以用来处理离线下载任务，分散主节点的压力。当然，您也可以配置只在主节点上处理离线下载任务，这是最简单的一种方式。",
+    "masterAria2Des": "如果您只需要为主机启用离线下载功能，请 <0>点击这里</0> 编辑主节点；",
+    "slaveAria2Des": "如果您想要在从机节点上分散处理离线下载任务，请 <0>点击这里</0> 添加并配置新节点。",
+    "editGroupDes": "当你添加多个可用于离线下载的节点后，主节点会将离线下载请求轮流发送到这些节点处理。节点离线下载配置完成后，您可能还需要 <0>到这里</0> 编辑用户组，为对应用户组开启离线下载权限。",
+    "lastProgress": "最后进度",
+    "errorMsg": "错误信息"
+  },
+  "vas": {
+    "vas": "增值服务",
+    "reports": "举报",
+    "orders": "订单",
+    "initialFiles": "初始文件",
+    "filterEmailProvider": "邮箱过滤",
+    "filterEmailProviderWhitelist": "白名单",
+    "initialFilesDes": "指定用户注册后初始拥有的文件。输入文件 ID 搜索并添加现有文件。",
+    "filterEmailProviderDisabled": "不启用",
+    "filterEmailProviderDes": "过滤注册邮箱域",
+    "appLinkDes": "用于在 App 设置页面展示，留空即不展示链接按钮，仅当 VOL 授权有效时此项设置才会生效。",
+    "filterEmailProviderBlacklist": "黑名单",
+    "filterEmailProviderRuleDes": "多个域请使用半角逗号隔开",
+    "filterEmailProviderRule": "邮箱域过滤规则",
+    "qqConnectHint": "创建应用时，回调地址请填写：{{url}}",
+    "enableQQConnectDes": "是否允许绑定QQ、使用QQ登录本站",
+    "loginWithoutBindingDes": "开启后，如果用户使用了QQ登录，但是没有已绑定的注册用户，系统会为其创建用户并登录。这种方式创建的用户日后只能使用QQ登录。",
+    "qqConnect": "QQ互联",
+    "enableQQConnect": "开启QQ互联",
+    "appidDes": "应用管理页面获取到的的 APP ID",
+    "appForum": "用户论坛 URL",
+    "loginWithoutBinding": "未绑定时可直接登录",
+    "appKeyDes": "应用管理页面获取到的的 APP KEY",
+    "appid": "APP ID",
+    "overuseReminderDes": "用户因增值服务过期，容量超出限制后发送的提醒邮件模板",
+    "storagePack": "容量包",
+    "giftCodes": "兑换码",
+    "appKey": "APP KEY",
+    "overuseReminder": "超额提醒",
+    "enable": "开启",
+    "appFeedback": "反馈页面 URL",
+    "vasSetting": "支付/杂项设置",
+    "appIDDes": "当面付应用的 APPID",
+    "purchasableGroups": "可购用户组",
+    "rsaPrivateDes": "当面付应用的 RSA2 (SHA256)  私钥，一般是由您自己生成。详情参考 <0>生成 RSA 密钥</0>。",
+    "alipayPublicKeyDes": "由支付宝提供，可在 应用管理 - 应用信息 - 接口加签方式 中获取。",
+    "applicationID": "应用 ID",
+    "alipay": "支付宝当面付",
+    "appID": "App- ID",
+    "merchantID": "直连商户号",
+    "customPaymentEndpointDes":"创建支付订单时请求的接口 URL",
+    "rsaPrivate": "RSA 应用私钥",
+    "apiV3Secret": "API v3 密钥",
+    "alipayPublicKey": "支付宝公钥",
+    "mcCertificateSerial": "商户证书序列号",
+    "mcAPISecret": "商户API 私钥",
+    "payjs": "PAYJS 微信支付",
+    "wechatPay": "微信官方扫码支付",
+    "applicationIDDes": "直连商户申请的公众号或移动应用appid",
+    "mcNumber": "商户号",
+    "customPaymentEndpoint":"支付接口地址",
+    "merchantIDDes": "直连商户的商户号，由微信支付生成并下发。",
+    "communicationSecret": "通信密钥",
+    "apiV3SecretDes": "商户需先在【商户平台】-【API安全】的页面设置该密钥，请求才能通过微信支付的签名校验。密钥的长度为 32 个字节。",
+    "banBufferPeriod": "封禁缓冲期 (秒)",
+    "allowSellShares": "允许为分享定价",
+    "creditPriceRatio": "积分到账比率 (%)",
+    "mcCertificateSerialDes": "登录商户平台【API安全】-【API证书】-【查看证书】，可查看商户 API 证书序列号。",
+    "mcAPISecretDes": "私钥文件 apiclient_key.pem 的内容。",
+    "creditPrice": "积分价格 (分)",
+    "customPaymentSecretDes": "Cloudreve 用于签名付款请求的密钥",
+    "payjsWarning": "此服务由第三方平台 <0>PAYJS</0> 提供， 产生的任何纠纷与 Cloudreve 开发者无关。",
+    "add": "添加",
+    "mcNumberDes": "可在 PAYJS 管理面板首页看到",
+    "price": "单价",
+    "size": "大小",
+    "orCredits": " 或 {{num}} 积分",
+    "otherSettings": "杂项设置",
+    "banBufferPeriodDes": "用户保持容量超额状态的最长时长，超出时长该用户会被系统冻结。",
+    "yes": "是",
+    "customPaymentNameDes": "用于展示给用户的付款方式名称",
+    "allowSellSharesDes": "开启后，用户可为分享设定积分价格，下载需要扣除积分。",
+    "productName": "商品名",
+    "creditPriceRatioDes": "购买下载设定价格的分享，分享者实际到账的积分比率。",
+    "code": "兑换码",
+    "invalidProduct": "已失效商品",
+    "notUsed": "未使用",
+    "creditPriceDes": "充值积分时的价格",
+    "allowReportShare": "允许举报分享",
+    "allowReportShareDes": "开启后，任意用户可对分享进行举报，有被刷数据库的风险",
+    "name": "名称",
+    "addStoragePack": "添加容量包",
+    "customPaymentName": "付款方式名称",
+    "duration": "时长",
+    "productNameDes": "商品展示名称",
+    "actions": "操作",
+    "durationDay": "有效期 (天)",
+    "priceYuan": "单价 (元)",
+    "priceCredits": "单价 (积分)",
+    "highlight": "突出展示",
+    "no": "否",
+    "editMembership": "编辑可购用户组",
+    "customPaymentDocumentLink":"https://docs.cloudreve.org/use/pro/pay",
+    "qyt": "数量",
+    "group": "用户组",
+    "status": "状态",
+    "durationGroupDes": "购买后升级的用户组单位购买时间的有效期",
+    "productDescription": "商品描述 (一行一个)",
+    "highlightDes": "开启后，在商品选择页面会被突出展示",
+    "used": "已使用",
+    "generatingResult": "生成结果",
+    "numberOfCodes": "生成数量",
+    "customPaymentDes":"通过实现 Cloudreve 兼容付款接口来对接其他第三方支付平台，详情请参考 <0>官方文档</0>。",
+    "editStoragePack": "编辑容量包",
+    "linkedProduct": "对应商品",
+    "packSizeDes": "容量包的大小",
+    "productQytDes": "对于积分类商品，此处为积分数量，其他商品为时长倍数",
+    "freeDownloadDes": "开启后，用户可以免费下载需付积分的分享",
+    "markSuccessful": "标记成功",
+    "durationDayDes": "每个容量包的有效期",
+    "packPriceDes": "容量包的单价",
+    "reportedContent": "举报对象",
+    "customPayment": "自定义付款渠道",
+    "priceCreditsDes": "使用积分购买时的价格，填写为 0 表示不能使用积分购买",
+    "description": "补充描述",
+    "addMembership": "添加可购用户组",
+    "invalid": "[已失效]",
+    "orderDeleted": "订单记录已删除",
+    "product": "商品",
+    "groupDes": "购买后升级的用户组",
+    "groupPriceDes": "用户组的单价",
+    "paidBy": "支付方式",
+    "showAppPromotion": "展示客户端引导页面",
+    "showAppPromotionDes": "开启后，用户可以在 “连接与挂载” 页面中看到移动客户端的使用引导",
+    "productDescriptionDes": "购买页面展示的商品描述",
+    "unpaid": "未支付",
+    "generateGiftCode": "生成兑换码",
+    "shareLink": "分享链接",
+    "iosVol": "iOS 客户端批量授权 (VOL)",
+    "syncLicense": "同步授权",
+    "numberOfCodesDes": "激活码批量生成数量",
+    "productQyt": "商品数量",
+    "freeDownload": "免积分下载分享",
+    "credits": "积分",
+    "markAsResolved": "标记为已处理",
+    "reason": "原因",
+    "reportTime": "举报时间",
+    "deleteShare": "删除分享",
+    "orderName": "订单名",
+    "orderNumber": "订单号",
+    "orderOwner": "创建者",
+    "paid": "已支付",
+    "volPurchase": "客户端 VOL 授权需要单独在 <0>授权管理面板</0> 购买。VOL 授权允许您的用户免费使用 <1>Cloudreve iOS 客户端</1> 连接到您的站点，无需用户再付费订阅 iOS 客户端。购买授权后请点击下方同步授权。",
+    "mobileApp": "移动客户端",
+    "volSynced": "VOL 授权已同步"
+  }
+}
diff --git a/public/locales/zh-TW/application.json b/public/locales/zh-TW/application.json
new file mode 100644
index 0000000..6d6c465
--- /dev/null
+++ b/public/locales/zh-TW/application.json
@@ -0,0 +1,589 @@
+{
+  "login": {
+    "email": "電子信箱",
+    "password": "密碼",
+    "captcha": "驗證碼",
+    "captchaError": "驗證碼載入失敗: {{message}}",
+    "signIn": "登入",
+    "signUp": "註冊",
+    "signUpAccount": "註冊帳號",
+    "useFIDO2": "使用外部驗證器登入",
+    "usePassword": "使用密碼登入",
+    "forgetPassword": "忘記密碼",
+    "2FA": "兩步驟驗證",
+    "input2FACode": "請輸入 6 位兩步驟驗證碼",
+    "passwordNotMatch": "兩次密碼輸入不一致",
+    "findMyPassword": "重設密碼",
+    "passwordReset": "密碼已重設",
+    "newPassword": "新密碼",
+    "repeatNewPassword": "再次輸入新密碼",
+    "repeatPassword": "重複密碼",
+    "resetPassword": "重設密碼",
+    "backToSingIn": "返回登入",
+    "sendMeAnEmail": "發送密碼重設郵件",
+    "resetEmailSent": "密碼重設郵件已傳送，請注意查收",
+    "browserNotSupport": "當前瀏覽器或或環境不支援",
+    "success": "登入成功",
+    "signUpSuccess": "註冊完成",
+    "activateSuccess": "啟動成功",
+    "accountActivated": "您的帳號已成功被啟動。",
+    "title": "登入 {{title}}",
+    "sinUpTitle": "註冊 {{title}}",
+    "activateTitle": "信箱驗證",
+    "activateDescription": "一封啟動郵件已發送至您的信箱，請點擊郵件中的連結以完成註冊。",
+    "continue": "下一步",
+    "logout": "登出",
+    "loggedOut": "您已登出",
+    "clickToRefresh": "點擊重新整理驗證碼"
+  },
+  "navbar": {
+    "myFiles": "我的文件",
+    "myShare": "我的分享",
+    "remoteDownload": "離線下載",
+    "connect": "連接",
+    "taskQueue": "任務列",
+    "setting": "個人設定",
+    "videos": "影片",
+    "photos": "圖片",
+    "music": "音樂",
+    "documents": "文件",
+    "addATag": "新增標籤...",
+    "addTagDialog": {
+      "selectFolder": "選擇資料夾",
+      "fileSelector": "文件分類",
+      "folderLink": "目錄捷徑",
+      "tagName": "標籤名",
+      "matchPattern": "檔案名應對規則",
+      "matchPatternDescription": "你可以使用 <0>*</0> 作為通用。比如 <1>*.png</1> 表示對應 png 格式圖像。多行規則間會以「或」的關係運算。",
+      "icon": "圖示：",
+      "color": "顏色：",
+      "folderPath": "資料夾路徑"
+    },
+    "storage": "儲存空間",
+    "storageDetail": "已使用 {{used}}, 共 {{total}}",
+    "notLoginIn": "未登入",
+    "visitor": "遊客",
+    "objectsSelected": "{{num}} 個對象",
+    "searchPlaceholder": "搜尋...",
+    "searchInFiles": "在我的文件中搜尋 <0>{{name}}</0>",
+    "searchInFolders": "在當前目錄中搜尋 <0>{{name}}</0>",
+    "searchInShares": "在全站分享中搜尋 <0>{{name}}</0>",
+    "backToHomepage": "返回首頁",
+    "toDarkMode": "切換到深色模式",
+    "toLightMode": "切換到淺色模式",
+    "myProfile": "個人首頁",
+    "dashboard": "管理面板",
+    "exceedQuota": "您的已用容量已超過容量配額，請盡快刪除多餘文件"
+  },
+  "fileManager": {
+    "open": "打開",
+    "openParentFolder": "打開所在目錄",
+    "download": "下載",
+    "batchDownload": "打包下載",
+    "share": "分享",
+    "rename": "重新命名",
+    "move": "移動",
+    "delete": "刪除",
+    "moreActions": "更多操作",
+    "refresh": "重新整理",
+    "compress": "壓縮",
+    "newFolder": "建立資料夾",
+    "newFile": "建立文件",
+    "showFullPath": "顯示路徑",
+    "listView": "列表",
+    "gridViewSmall": "小圖示",
+    "gridViewLarge": "大圖示",
+    "paginationSize": "分頁大小",
+    "paginationOption": "{{option}} / 頁",
+    "noPagination": "不分頁",
+    "sortMethod": "排序方式",
+    "sortMethods": {
+      "A-Z": "A-Z",
+      "Z-A": "Z-A",
+      "oldestUploaded": "最早上傳",
+      "newestUploaded": "最新上傳",
+      "oldestModified": "最早修改",
+      "newestModified": "最新修改",
+      "smallest": "最小",
+      "largest": "最大"
+    },
+    "shareCreateBy": "由 {{nick}} 建立",
+    "name": "名稱",
+    "size": "大小",
+    "lastModified": "修改日期",
+    "currentFolder": "當前目錄",
+    "backToParentFolder": "上級目錄",
+    "folders": "資料夾",
+    "files": "文件",
+    "listError": ":( 請求時出現錯誤",
+    "dropFileHere": "拖拽文件至此",
+    "orClickUploadButton": "或點擊右下方「上傳文件」按鈕新增文件",
+    "nothingFound": "什麼都沒有找到",
+    "uploadFiles": "上傳文件",
+    "uploadFolder": "上傳目錄",
+    "newRemoteDownloads": "離線下載",
+    "enter": "進入",
+    "getSourceLink": "獲取外鏈",
+    "getSourceLinkInBatch": "批次獲取外鏈",
+    "createRemoteDownloadForTorrent": "建立離線下載任務",
+    "decompress": "解壓縮",
+    "createShareLink": "建立分享連結",
+    "viewDetails": "詳細訊息",
+    "copy": "複製",
+    "bytes": " ({{bytes}} 位元組)",
+    "storagePolicy": "儲存策略",
+    "inheritedFromParent": "跟隨父目錄",
+    "childFolders": "包含目錄",
+    "childFiles": "包含文件",
+    "childCount": "{{num}} 個",
+    "parentFolder": "所在目錄",
+    "rootFolder": "根目錄",
+    "modifiedAt": "修改於",
+    "createdAt": "建立於",
+    "statisticAt": "統計於 <1></1>",
+    "musicPlayer": "音訊播放",
+    "closeAndStop": "退出播放",
+    "playInBackground": "後台播放",
+    "copyTo": "複製到",
+    "copyToDst": "複製到 <0>{{dst}}</0>",
+    "errorReadFileContent": "無法讀取文件內容：{{msg}}",
+    "wordWrap": "自動換行",
+    "pdfLoadingError": "PDF 載入失敗：{{msg}}",
+    "subtitleSwitchTo": "字幕切換到：{{subtitle}}",
+    "noSubtitleAvailable": "影片目錄下沒有可用字幕文件 (支援：ASS/SRT/VTT)",
+    "subtitle": "選擇字幕",
+    "playlist": "播放列表",
+    "openInExternalPlayer": "用外部播放器打開",
+    "searchResult": "搜尋結果",
+    "preparingBathDownload": "正在準備打包下載...",
+    "preparingDownload": "獲取下載網址...",
+    "browserBatchDownload": "瀏覽器端打包",
+    "browserBatchDownloadDescription": "由瀏覽器即時下載並打包，並非所有環境都支援。",
+    "serverBatchDownload": "服務端中轉打包",
+    "serverBatchDownloadDescription": "由服務端中轉打包並即時發送到用戶端下載。",
+    "selectArchiveMethod": "選擇打包下載方式",
+    "batchDownloadStarted": "打包下載已開始，請不要關閉此分頁",
+    "batchDownloadError": "打包遇到錯誤：{{msg}}",
+    "userDenied": "用戶拒絕",
+    "directoryDownloadReplace": "替換對象",
+    "directoryDownloadReplaceDescription": "將會替換 {{duplicates}} 等共 {{num}} 個對象。",
+    "directoryDownloadSkip": "跳過對象",
+    "directoryDownloadSkipDescription": "將會跳過 {{duplicates}} 等共 {{num}} 個對象。",
+    "selectDirectoryDuplicationMethod": "重複對象處理方式",
+    "directoryDownloadStarted": "下載已開始，請不要關閉此分頁",
+    "directoryDownloadFinished": "下載完成，無失敗對象",
+    "directoryDownloadFinishedWithError": "下載完成, 失敗 {{failed}} 個對象",
+    "directoryDownloadPermissionError": "無權限操作，請允許讀寫本地文件"
+  },
+  "modals": {
+    "processing": "處理中...",
+    "duplicatedObjectName": "新名稱與已有文件重複",
+    "duplicatedFolderName": "資料夾名稱重複",
+    "taskCreated": "任務已建立",
+    "taskCreateFailed": "{{failed}} 個任務建立失敗：{{details}}",
+    "linkCopied": "連結已複製",
+    "getSourceLinkTitle": "獲取文件外鏈",
+    "sourceLink": "文件外鏈",
+    "folderName": "資料夾名稱",
+    "create": "建立",
+    "fileName": "檔案名稱",
+    "renameDescription": "輸入 <0>{{name}}</0> 的新名稱：",
+    "newName": "新名稱",
+    "moveToTitle": "移動至",
+    "moveToDescription": "移動至 <0>{{name}}</0>",
+    "saveToTitle": "儲存至",
+    "saveToTitleDescription": "儲存至 <0>{{name}}</0>",
+    "deleteTitle": "刪除對象",
+    "deleteOneDescription": "確定要刪除 <0>{{name}}</0> 嗎？",
+    "deleteMultipleDescription": "確定要刪除這 {{num}} 個對象嗎？",
+    "newRemoteDownloadTitle": "新增離線下載任務",
+    "remoteDownloadURL": "下載連結",
+    "remoteDownloadURLDescription": "輸入文件下載網址，一行一個，支援 HTTP(s) / FTP / 磁力鏈",
+    "remoteDownloadDst": "下載至",
+    "createTask": "建立任務",
+    "downloadTo": "下載至 <0>{{name}}</0>",
+    "decompressTo": "解壓縮至",
+    "decompressToDst": "解壓縮至 <0>{{name}}</0>",
+    "defaultEncoding": "預設",
+    "chineseMajorEncoding": "簡體中文常見編碼",
+    "selectEncoding": "選擇 ZIP 文件特殊字元編碼",
+    "noEncodingSelected": "未選擇編碼方式",
+    "listingFiles": "列取文件中...",
+    "listingFileError": "列取文件時出錯：{{message}}",
+    "generatingSourceLinks": "生成外鏈中...",
+    "noFileCanGenerateSourceLink": "沒有可以生成外鏈的文件",
+    "sourceBatchSizeExceeded": "當前用戶組最大可同時為 {{limit}} 個文件生成外鏈",
+    "zipFileName": "ZIP 檔案名",
+    "shareLinkShareContent": "我向你分享了：{{name}} 連結：{{link}}",
+    "shareLinkPasswordInfo": " 密碼： {{password}}",
+    "createShareLink": "建立分享連結",
+    "usePasswordProtection": "使用密碼保護",
+    "sharePassword": "分享密碼",
+    "randomlyGenerate": "隨機生成",
+    "expireAutomatically": "自動過期",
+    "downloadLimitOptions": "{{num}} 次下載",
+    "or": "或者",
+    "5minutes": "5 分鐘",
+    "1hour": "1 小時",
+    "1day": "1 天",
+    "7days": "7 天",
+    "30days": "30 天",
+    "custom": "自訂",
+    "seconds": "秒",
+    "downloads": "次下載",
+    "downloadSuffix": "後過期",
+    "allowPreview": "允許預覽",
+    "allowPreviewDescription": "是否允許在分享頁面預覽文件內容",
+    "shareLink": "分享連結",
+    "sendLink": "發送連結",
+    "directoryDownloadReplaceNotifiction": "已覆蓋 {{name}}",
+    "directoryDownloadSkipNotifiction": "已跳過 {{name}}",
+    "directoryDownloadTitle": "下載",
+    "directoryDownloadStarted": "開始下載 {{name}}",
+    "directoryDownloadFinished": "下載完成",
+    "directoryDownloadError": "遇到錯誤：{{msg}}",
+    "directoryDownloadErrorNotification": "下載 {{name}} 遇到錯誤：{{msg}}",
+    "directoryDownloadAutoscroll": "自動滾動",
+    "directoryDownloadCancelled": "已取消下載",
+    "advanceOptions": "高級選項",
+    "forceDelete": "強制刪除文件",
+    "forceDeleteDes": "強制刪除文件記錄，無論物理文件是否被成功刪除",
+    "unlinkOnly": "僅解除連結",
+    "unlinkOnlyDes": "僅刪除文件記錄，物理文件不會被刪除"
+  },
+  "uploader": {
+    "fileNotMatchError": "所選擇文件與原始文件不符",
+    "unknownError": "出現未知錯誤：{{msg}}",
+    "taskListEmpty": "沒有上傳任務",
+    "hideTaskList": "隱藏列表",
+    "uploadTasks": "上傳隊列",
+    "moreActions": "更多操作",
+    "addNewFiles": "新增新文件",
+    "toggleTaskList": "展開/摺疊隊列",
+    "pendingInQueue": "排隊中...",
+    "preparing": "準備中...",
+    "processing": "處理中...",
+    "progressDescription": "已上傳 {{uploaded}} , 共 {{total}} - {{percentage}}%",
+    "progressDescriptionFull": "{{speed}} 已上傳 {{uploaded}} , 共 {{total}} - {{percentage}}%",
+    "progressDescriptionPlaceHolder": "已上傳 - ",
+    "uploadedTo": "已上傳至 ",
+    "rootFolder": "根目錄",
+    "unknownStatus": "未知",
+    "resumed": "斷點續傳",
+    "resumable": "可恢復進度",
+    "retry": "重試",
+    "deleteTask": "刪除任務記錄",
+    "cancelAndDelete": "取消並刪除",
+    "selectAndResume": "選取同樣文件並恢復上傳",
+    "fileName": "檔案名：",
+    "fileSize": "檔案大小：",
+    "sessionExpiredIn": "<0></0> 過期",
+    "chunkDescription": "({{total}} 個分片, 每個分片 {{size}})",
+    "noChunks": "(無分片)",
+    "destination": "儲存路徑：",
+    "uploadSession": "上傳會話：",
+    "errorDetails": "錯誤訊息：",
+    "uploadSessionCleaned": "上傳會話已清除",
+    "hideCompletedTooltip": "列表中不顯示已完成、失敗、被取消的任務",
+    "hideCompleted": "隱藏已完成任務",
+    "addTimeAscTooltip": "最先新增的任務排在最前",
+    "addTimeAsc": "最先新增靠前",
+    "addTimeDescTooltip": "最後新增的任務排在最前",
+    "addTimeDesc": "最後新增靠前",
+    "showInstantSpeedTooltip": "單個任務上傳速度展示為瞬時速度",
+    "showInstantSpeed": "瞬時速度",
+    "showAvgSpeedTooltip": "單個任務上傳速度展示為平均速度",
+    "showAvgSpeed": "平均速度",
+    "cleanAllSessionTooltip": "清空服務端所有未完成的上傳會話",
+    "cleanAllSession": "清空所有上傳會話",
+    "cleanCompletedTooltip": "清除列表中已完成、失敗、被取消的任務",
+    "cleanCompleted": "清除已完成任務",
+    "retryFailedTasks": "重試所有失敗任務",
+    "retryFailedTasksTooltip": "重試隊列中所有已失敗的任務",
+    "setConcurrentTooltip": "設定同時進行的任務數量",
+    "setConcurrent": "設定並行數量",
+    "sizeExceedLimitError": "檔案大小超出儲存策略限制（最大：{{max}}）",
+    "suffixNotAllowedError": "儲存策略不支援上傳此副檔名的文件（目前支援：{{supported}}）",
+    "createUploadSessionError": "無法建立上傳會話",
+    "deleteUploadSessionError": "無法刪除上傳會話",
+    "requestError": "請求失敗: {{msg}} ({{url}})",
+    "chunkUploadError": "分片 [{{index}}] 上傳失敗",
+    "conflictError": "同名文件的上傳任務已經在處理中",
+    "chunkUploadErrorWithMsg": "分片上傳失敗: {{msg}}",
+    "chunkUploadErrorWithRetryAfter": "（請在 {{retryAfter}} 秒後重試）",
+    "emptyFileError": "暫不支援上傳空文件至 OneDrive，請透過建立文件按鈕建立空文件",
+    "finishUploadError": "無法完成文件上傳",
+    "finishUploadErrorWithMsg": "無法完成文件上傳: {{msg}}",
+    "ossFinishUploadError": "無法完成文件上傳: {{msg}} ({{code}})",
+    "cosUploadFailed": "上傳失敗: {{msg}} ({{code}})",
+    "upyunUploadFailed": "上傳失敗: {{msg}}",
+    "parseResponseError": "無法解析響應: {{msg}} ({{content}})",
+    "concurrentTaskNumber": "同時上傳的任務數量",
+    "dropFileHere": "鬆開滑鼠開始上傳"
+  },
+  "share": {
+    "expireInXDays": "{{num}} 天後到期",
+    "days":"{{count}} day",
+    "days_other":"{{count}} days",
+    "expireInXHours": "{{num}} 小時後到期",
+    "hours":"an hour",
+    "hours_other":"{{count}} hours",
+    "createdBy": "此分享由 <0>{{nick}}</0> 建立",
+    "sharedBy": "<0>{{nick}}</0> 向您分享了 {{num}} 個文件",
+    "files":"1 file",
+    "files_other":"{{count}} files",
+    "statistics": "{{views}} 次瀏覽 • {{downloads}} 次下載 • {{time}}",
+    "views":"{{count}} view",
+    "views_other":"{{count}} views",
+    "downloads":"{{count}} download",
+    "downloads_other":"{{count}} downloads",
+    "privateShareTitle": "{{nick}} 的加密分享",
+    "enterPassword": "輸入分享密碼",
+    "continue": "繼續",
+    "shareCanceled": "分享已取消",
+    "listLoadingError": "載入失敗",
+    "sharedFiles": "我的分享",
+    "createdAtDesc": "建立日期由晚到早",
+    "createdAtAsc": "建立日期由早到晚",
+    "downloadsDesc": "下載次數由大到小",
+    "downloadsAsc": "下載次數由小到大",
+    "viewsDesc": "瀏覽次數由大到小",
+    "viewsAsc": "瀏覽次數由小到大",
+    "noRecords": "沒有分享記錄.",
+    "sourceNotFound": "[原始對象不存在]",
+    "expired": "已失效",
+    "changeToPublic": "變更為公開分享",
+    "changeToPrivate": "變更為私密分享",
+    "viewPassword": "查看密碼",
+    "disablePreview": "禁止預覽",
+    "enablePreview": "允許預覽",
+    "cancelShare": "取消分享",
+    "sharePassword": "分享密碼",
+    "readmeError": "無法讀取 README 內容：{{msg}}",
+    "enterKeywords": "請輸入搜尋關鍵字",
+    "searchResult": "搜尋結果",
+    "sharedAt": "分享於 <0></0>",
+    "pleaseLogin": "請先登入",
+    "cannotShare": "此文件無法預覽",
+    "preview": "預覽",
+    "incorrectPassword": "密碼不正確",
+    "shareNotExist": "分享不存在或已過期"
+  },
+  "download": {
+    "failedToLoad": "載入失敗",
+    "active": "進行中",
+    "finished": "已完成",
+    "activeEmpty": "沒有下載中的任務",
+    "finishedEmpty": "沒有已完成的任務",
+    "loadMore": "載入更多",
+    "taskFileDeleted": "文件已刪除",
+    "unknownTaskName": "[未知]",
+    "taskCanceled": "任務已取消，狀態會在稍後更新",
+    "operationSubmitted": "操作成功，狀態會在稍後更新",
+    "deleteThisFile": "刪除此文件",
+    "openDstFolder": "打開存放目錄",
+    "selectDownloadingFile": "選擇要下載的文件",
+    "cancelTask": "取消任務",
+    "updatedAt": "更新於：",
+    "uploaded": "上傳大小：",
+    "uploadSpeed": "上傳速度：",
+    "InfoHash": "InfoHash：",
+    "seederCount": "做種者：",
+    "seeding": "做種中：",
+    "downloadNode": "節點：",
+    "isSeeding": "是",
+    "notSeeding": "否",
+    "chunkSize": "分片大小：",
+    "chunkNumbers": "分片數量：",
+    "taskDeleted": "刪除成功",
+    "transferFailed": "文件轉存失敗",
+    "downloadFailed": "下載出錯：{{msg}}",
+    "canceledStatus": "已取消",
+    "finishedStatus": "已完成",
+    "pending": "已完成，轉存排隊中",
+    "transferring": "已完成，轉存中",
+    "deleteRecord": "刪除記錄",
+    "createdAt": "建立日期："
+  },
+  "setting": {
+    "avatarUpdated": "頭像已更新，重新整理後生效",
+    "nickChanged": "暱稱已更改，重新整理後生效",
+    "settingSaved": "設定已儲存",
+    "themeColorChanged": "主題配色已更換",
+    "profile": "個人資料",
+    "avatar": "頭像",
+    "uid": "UID",
+    "nickname": "暱稱",
+    "group": "用戶組",
+    "regTime": "註冊時間",
+    "privacyAndSecurity": "安全隱私",
+    "profilePage": "個人首頁",
+    "accountPassword": "登入密碼",
+    "2fa": "二步驗證",
+    "enabled": "已開啟",
+    "disabled": "未開啟",
+    "appearance": "個性化",
+    "themeColor": "主題配色",
+    "darkMode": "黑暗模式",
+    "syncWithSystem": "跟隨系統",
+    "fileList": "文件列表",
+    "timeZone": "時區",
+    "webdavServer": "連接地址",
+    "userName": "使用者名稱",
+    "manageAccount": "帳號管理",
+    "uploadImage": "從文件上傳",
+    "useGravatar": "使用 Gravatar 頭像 ",
+    "changeNick": "修改暱稱",
+    "originalPassword": "原密碼",
+    "enable2FA": "啟用二步驗證",
+    "disable2FA": "關閉二步驗證",
+    "2faDescription": "請使用任意二步驗證APP或者支援二步驗證的密碼管理軟體掃描左側二維碼新增本站。掃描完成後請填寫二步驗證APP給出的6位驗證碼以開啟二步驗證。",
+    "inputCurrent2FACode": "請驗證當前二步驗證代碼。",
+    "timeZoneCode": "IANA 時區名稱標識",
+    "authenticatorRemoved": "憑證已刪除",
+    "authenticatorAdded": "驗證器已新增",
+    "browserNotSupported": "當前瀏覽器或環境不支援",
+    "removedAuthenticator": "刪除憑證",
+    "removedAuthenticatorConfirm": "確定要吊銷這個憑證嗎？",
+    "addNewAuthenticator": "新增新驗證器",
+    "hardwareAuthenticator": "外部認證器",
+    "copied": "已複製到剪切板",
+    "pleaseManuallyCopy": "當前瀏覽器不支援，請手動複製",
+    "webdavAccounts": "WebDAV 帳號管理",
+    "webdavHint": "WebDAV的地址為：{{url}}；登入使用者名稱統一為：{{name}} ；密碼為所建立帳號的密碼。",
+    "annotation": "備註名",
+    "rootFolder": "相對根目錄",
+    "createdAt": "建立日期",
+    "action": "操作",
+    "readonlyOn": "開啓只讀",
+    "readonlyOff": "關閉只讀",
+    "useProxyOn": "開啓反代",
+    "useProxyOff": "關閉反代",
+    "delete": "刪除",
+    "listEmpty": "沒有記錄",
+    "createNewAccount": "建立新帳號",
+    "taskType": "任務類型",
+    "taskStatus": "狀態",
+    "lastProgress": "最後進度",
+    "errorDetails": "錯誤訊息",
+    "queueing": "排隊中",
+    "processing": "處理中",
+    "failed": "失敗",
+    "canceled": "取消",
+    "finished": "已完成",
+    "fileTransfer": "文件中轉",
+    "fileRecycle": "文件回收",
+    "importFiles": "匯入外部目錄",
+    "transferProgress": "已完成 {{num}} 個文件",
+    "waiting": "等待中",
+    "compressing": "壓縮中",
+    "decompressing": "解壓縮中",
+    "downloading": "下載中",
+    "transferring": "轉存中",
+    "indexing": "索引中",
+    "listing": "插入中",
+    "allShares": "全部分享",
+    "trendingShares": "熱門分享",
+    "totalShares": "分享總數",
+    "fileName": "檔案名",
+    "shareDate": "分享日期",
+    "downloadNumber": "下載次數",
+    "viewNumber": "瀏覽次數",
+    "language": "語言",
+    "iOSApp": "iOS 用戶端",
+    "connectByiOS": "透過 iOS 設備連接到 <0>{{title}}</0>",
+    "downloadOurApp": "下載並安裝我們的 iOS 應用：",
+    "fillInEndpoint": "使用我們的 iOS 應用掃描下方二維碼（其他掃碼應用無效）：",
+    "loginApp": "完成綁定，你可以開始使用 iOS 客戶端了。如果掃碼綁定遇到問題，你也可以嘗試手動輸入用戶名和密碼登入。",
+    "aboutCloudreve": "關於 Cloudreve",
+    "githubRepo": "GitHub 倉庫",
+    "homepage": "主頁"
+  },
+  "vas": {
+    "loginWithQQ": "使用 QQ 登錄",
+    "quota": "容量配額",
+    "exceedQuota": "您的已用容量已超過容量配額，請儘快刪除多餘文件或購買容量",
+    "extendStorage": "擴容",
+    "folderPolicySwitched": "目錄存儲策略已切換",
+    "switchFolderPolicy": "切換目錄存儲策略",
+    "setPolicyForFolder": "爲當前目錄設置存儲策略: ",
+    "manageMount": "管理綁定",
+    "saveToMyFiles": "保存到我的文件",
+    "report": "舉報",
+    "migrateStoragePolicy": "轉移存儲策略",
+    "fileSaved": "文件已保存",
+    "sharePurchaseTitle": "確定要支付 {{score}} 積分 購買此分享？",
+    "sharePurchaseDescription": "購買後，您可以自由預覽、下載此分享的所有內容，一定期限內不會重複扣費。如果您已購買，請忽略此提示。",
+    "payToDownload": "付積分下載",
+    "creditToBePaid": "每人次下載需支付的積分",
+    "creditGainPredict": "預計每人次下載可到賬 {{num}} 積分",
+    "creditPrice": " ({{num}} 積分)",
+    "creditFree": " (免積分)",
+    "cancelSubscription": "解約成功，更改會在數分鐘後生效",
+    "qqUnlinked": "已解除與QQ賬戶的關聯",
+    "groupExpire": " <0></0> 過期",
+    "manuallyCancelSubscription": "手動解約當前用戶組",
+    "qqAccount": "QQ賬號",
+    "connect": "綁定",
+    "unlink": "解除綁定",
+    "credits": "積分",
+    "cancelSubscriptionTitle": "解約用戶組",
+    "cancelSubscriptionWarning": "將要退回到初始用戶組，且所支付金額無法退還，確定要繼續嗎？",
+    "mountPolicy": "存儲策略綁定",
+    "mountDescription": "爲目錄綁定存儲策略後，上傳至此目錄或此目錄下的子目錄的新文件將會使用綁定的存儲策略存儲。複製、移動到此目錄不會應用綁定的存儲策略；多個父目錄指定存儲策略時將會選擇最接近的父目錄的存儲策略。",
+    "mountNewFolder": "綁定新目錄",
+    "nsfw": "色情信息",
+    "malware": "包含病毒",
+    "copyright": "侵權",
+    "inappropriateStatements": "不恰當的言論",
+    "other": "其他",
+    "groupBaseQuota": "用戶組基礎容量",
+    "validPackQuota": "有效容量包附加容量",
+    "used": "已使用容量",
+    "total": "總容量",
+    "validStoragePack": "可用容量包",
+    "buyStoragePack": "購買容量包",
+    "useGiftCode": "使用激活碼兌換",
+    "packName": "容量包名稱",
+    "activationDate": "激活日期",
+    "validDuration": "有效期",
+    "expiredAt": "過期日期",
+    "days": "{{num}} 天",
+    "pleaseInputGiftCode": "請輸入激活碼",
+    "pleaseSelectAStoragePack": "請先選擇一個容量包",
+    "selectPaymentMethod": "選擇支付方式：",
+    "noAvailableMethod": "無可用支付方式",
+    "alipay": "支付寶掃碼",
+    "wechatPay": "微信掃碼",
+    "payByCredits": "積分支付",
+    "purchaseDuration": "購買時長倍數：",
+    "creditsNum": "充值積分數量：",
+    "store": "商店",
+    "storagePacks": "容量包",
+    "membership": "會員",
+    "buyCredits": "積分充值",
+    "subtotal": "當前費用：",
+    "creditsTotalNum": "{{num}} 積分",
+    "checkoutNow": "立即購買",
+    "recommended": "推薦",
+    "enterGiftCode": "輸入激活碼",
+    "qrcodeAlipay": "請使用 支付寶 掃描下方二維碼完成付款，付款完成後本頁面會自動刷新。",
+    "qrcodeWechat": "請使用 微信 掃描下方二維碼完成付款，付款完成後本頁面會自動刷新。",
+    "qrcodeCustom": "請掃描下方二維碼完成付款，付款完成後本頁面會自動刷新。",
+    "paymentCompleted": "支付完成",
+    "productDelivered": "您所購買的商品已到賬。",
+    "confirmRedeem": "確認兌換",
+    "productName": "商品名稱：",
+    "qyt": "數量：",
+    "duration": "時長：",
+    "subscribe": "購買用戶組",
+    "selected": "已選：",
+    "paymentQrcode": "付款二維碼",
+    "validDurationDays": "有效期：{{num}} 天",
+    "reportSuccessful": "舉報成功",
+    "additionalDescription": "補充描述",
+    "announcement": "公告",
+    "dontShowAgain": "不再顯示",
+    "openPaymentLink": "直接打開支付鏈接"
+  }
+}
diff --git a/public/locales/zh-TW/common.json b/public/locales/zh-TW/common.json
new file mode 100644
index 0000000..841b6ec
--- /dev/null
+++ b/public/locales/zh-TW/common.json
@@ -0,0 +1,90 @@
+{
+  "pageNotFound": "頁面不存在",
+  "unknownError": "未知錯誤",
+  "errLoadingSiteConfig": "無法載入站點配置：",
+  "newVersionRefresh": "當前頁面有新版本可用，準備重新整理。",
+  "errorDetails": "錯誤詳情",
+  "renderError": "頁面渲染出現錯誤，請嘗試重新整理此頁面。",
+  "ok": "確定",
+  "cancel": "取消",
+  "select": "選擇",
+  "copyToClipboard": "複製",
+  "close": "關閉",
+  "intlDateTime": "{{val, datetime}}",
+  "timeAgoLocaleCode": "zh_TW",
+  "forEditorLocaleCode": "zh-TW",
+  "artPlayerLocaleCode": "zh-tw",
+  "errors": {
+    "401": "請先登入",
+    "403": "此操作被禁止",
+    "404": "資源不存在",
+    "409": "發生衝突 ({{message}})",
+    "40001": "輸入參數有誤 ({{message}})",
+    "40002": "上傳失敗",
+    "40003": "目錄建立失敗",
+    "40004": "同名對象已存在",
+    "40005": "簽名過期",
+    "40006": "不支援的儲存策略類型",
+    "40007": "當前用戶組無法進行此操作",
+    "40011": "上傳會話不存在或已過期",
+    "40012": "分片序號無效 ({{message}})",
+    "40013": "正文長度無效 ({{message}})",
+    "40014": "超出批次獲取外鏈限制",
+    "40015": "超出最大離線下載任務數量限制",
+    "40016": "路徑不存在",
+    "40017": "該帳號已被封禁",
+    "40018": "該帳號未啟用",
+    "40019": "此功能未啟用",
+    "40020": "用戶信箱或密碼錯誤",
+    "40021": "用戶不存在",
+    "40022": "驗證代碼不正確",
+    "40023": "登入會話不存在",
+    "40024": "無法初始化 WebAuthn",
+    "40025": "驗證失敗",
+    "40026": "驗證碼錯誤",
+    "40027": "驗證失敗，請重新整理網頁重試",
+    "40028": "郵件發送失敗",
+    "40029": "無效的連結",
+    "40030": "此連結已過期",
+    "40032": "此信箱已被使用",
+    "40033": "用戶未啟用，已重新傳送啟用郵件",
+    "40034": "該用戶無法被啟用",
+    "40035": "儲存策略不存在",
+    "40039": "用戶組不存在",
+    "40044": "文件不存在",
+    "40045": "無法列取目錄下的對象",
+    "40047": "無法初始化文件系統",
+    "40048": "建立任務出錯",
+    "40049": "檔案大小超出限制",
+    "40050": "文件類型不允許",
+    "40051": "容量空間不足",
+    "40052": "對象名非法，請移除特殊字元",
+    "40053": "不支援對根目錄執行此操作",
+    "40054": "話當前目錄下已經有同名文件正在上傳中，請嘗試清空上傳會話",
+    "40055": "文件訊息不一致",
+    "40056": "不支援該格式的壓縮文件",
+    "40057": "可用儲存策略發生變化，請重新整理文件列表並重新新增此任務",
+    "40058": "分享不存在或已過期",
+    "40069": "密碼不正確",
+    "40070": "此分享無法預覽",
+    "40071": "簽名無效",
+    "50001": "資料庫操作失敗 ({{message}})",
+    "50002": "URL 或請求簽名失敗 ({{message}})",
+    "50004": "I/O 操作失敗 ({{message}})",
+    "50005": "內部錯誤 ({{message}})",
+    "50010": "目標節點不可用",
+    "50011": "文件元訊息查詢失敗"
+  },
+  "vasErrors": {
+    "40031": "此 Email 服務提供商不可用，請更換其他 Email 地址",
+    "40059": "不能轉存自己的分享",
+    "40062": "積分不足",
+    "40063": "當前用戶組仍未過期，請前往個人設置手動解約後繼續",
+    "40064": "您當前已處於此用戶組中",
+    "40065": "兌換碼無效",
+    "40066": "您已綁定了QQ賬號，請先解除綁定",
+    "40067": "此QQ賬號已被綁定其他賬號",
+    "40068": "此QQ號未綁定任何賬號",
+    "40072": "管理員無法升級至其他用戶組"
+  }
+}
diff --git a/public/locales/zh-TW/dashboard.json b/public/locales/zh-TW/dashboard.json
new file mode 100644
index 0000000..8605d28
--- /dev/null
+++ b/public/locales/zh-TW/dashboard.json
@@ -0,0 +1,977 @@
+{
+  "errors":{
+    "40036": "預設儲存策略無法刪除",
+    "40037": "有 {{message}} 個文件仍在使用此儲存策略，請先刪除這些文件",
+    "40038": "有 {{message}} 個用戶組綁定了此儲存策略，請先解除綁定",
+    "40040": "無法對系統用戶組執行此操作",
+    "40041": "有 {{message}} 位用戶仍屬於此用戶組，請先刪除這些用戶或者更改用戶組",
+    "40042": "無法更改初始用戶的用戶組",
+    "40043": "無法對初始用戶執行此操作",
+    "40046": "無法對主機節點執行此操作",
+    "40060": "從機無法向主機發送回調請求，請檢查主機端 參數設定 - 站點訊息 - 站點URL設定，並確保從機可以連接到此地址 ({{message}})",
+    "40061": "Cloudreve 版本不一致 ({{message}})",
+    "50008": "設置項更新失敗 ({{message}})",
+    "50009": "跨域策略新增失敗"
+  },
+  "nav": {
+    "summary": "面板首頁",
+    "settings": "參數設定",
+    "basicSetting": "站點訊息",
+    "publicAccess": "註冊與登入",
+    "email": "郵件",
+    "transportation": "傳輸與通信",
+    "appearance": "外觀",
+    "image": "圖像與預覽",
+    "captcha": "驗證碼",
+    "storagePolicy": "儲存策略",
+    "nodes": "離線下載節點",
+    "groups": "用戶組",
+    "users": "用戶",
+    "files": "文件",
+    "shares": "分享",
+    "tasks": "持久任務",
+    "remoteDownload": "離線下載",
+    "generalTasks": "一般任務",
+    "title": "控制台",
+    "dashboard": "Cloudreve 控制台"
+  },
+  "summary": {
+    "newsletterError": "Cloudreve 公告載入失敗",
+    "confirmSiteURLTitle": "確定站點URL設定",
+    "siteURLNotSet": "您尚未設定站點URL，是否要將其設定為當前的 {{current}} ?",
+    "siteURLNotMatch": "您設定的站點URL與當前實際不一致，是否要將其設定為當前的 {{current}} ?",
+    "siteURLDescription": "此設定非常重要，請確保其與您站點的實際地址一致。你可以在 參數設定 - 站點訊息 中更改此設定。",
+    "ignore": "忽略",
+    "changeIt": "更改",
+    "trend": "趨勢",
+    "summary": "總計",
+    "totalUsers": "註冊用戶",
+    "totalFiles": "文件總數",
+    "publicShares": "公開分享總數",
+    "privateShares": "私密分享總數",
+    "homepage": "官方網站",
+    "documents": "用戶指南",
+    "github": "Github 倉庫",
+    "forum": "討論社群",
+    "forumLink": "https://forum.cloudreve.org",
+    "telegramGroup": "Telegram 群組",
+    "telegramGroupLink": "https://t.me/cloudreve_official",
+    "buyPro": "購買捐助版",
+    "publishedAt": "發表於 <0></0>",
+    "newsTag": "notice"
+  },
+  "settings": {
+    "saved": "設定已更改",
+    "save": "儲存",
+    "basicInformation": "基本訊息",
+    "mainTitle": "主標題",
+    "mainTitleDes": "站點的主標題",
+    "subTitle": "副標題",
+    "subTitleDes": "站點的副標題",
+    "siteKeywords": "關鍵字",
+    "siteKeywordsDes": "網站關鍵字，以英文逗號分隔",
+    "siteDescription": "站點描述",
+    "siteDescriptionDes": "站點描述訊息，可能會在分享頁面摘要內展示",
+    "siteURL": "站點 URL",
+    "siteURLDes": "非常重要，請確保與實際情況一致。使用雲端儲存策略、支付平台時，請填入可以被外網訪問的地址",
+    "customFooterHTML": "頁尾程式碼",
+    "customFooterHTMLDes": "在頁面底部插入的自訂 HTML 程式碼",
+    "announcement": "站點公告",
+    "announcementDes": "展示給已登入使用者的公告，留空不展示。當此項目內容變更時，所有使用者會重新看到公告",
+    "pwa": "漸進式應用 (PWA)",
+    "smallIcon": "小圖示",
+    "smallIconDes": "副檔名為 ico 的小圖示地址",
+    "mediumIcon": "中圖示",
+    "mediumIconDes": "192x192 的中等圖示地址，png 格式",
+    "largeIcon": "大圖示",
+    "largeIconDes": "512x512 的大圖示地址，png 格式。此圖示還會被用於在 iOS 用戶端切換站點時展示",
+    "displayMode": "展示模式",
+    "displayModeDes": "PWA 應用新增後的展示模式",
+    "themeColor": "主題色",
+    "themeColorDes": "CSS 色值，影響 PWA 啟動畫面上狀態欄、內容頁中狀態欄、地址欄的顏色",
+    "backgroundColor": "背景色",
+    "backgroundColorDes": "CSS 色值",
+    "hint": "提示",
+    "webauthnNoHttps": "Web Authn 需要您的站點啟用 HTTPS，並確認 參數設定 - 站點訊息 - 站點URL 也使用了 HTTPS 後才能開啟。",
+    "accountManagement": "註冊與登入",
+    "allowNewRegistrations": "允許新用戶註冊",
+    "allowNewRegistrationsDes": "關閉後，無法再透過前台註冊新的用戶",
+    "emailActivation": "郵件啟用",
+    "emailActivationDes": "開啟後，新用戶註冊需要點擊郵件中的啟用連結才能完成。請確認郵件發送設定是否正確，否則啟用郵件無法送達。",
+    "captchaForSignup": "註冊驗證碼",
+    "captchaForSignupDes": "是否啟用註冊表單驗證碼",
+    "captchaForLogin": "登入驗證碼",
+    "captchaForLoginDes": "是否啟用登入表單驗證碼",
+    "captchaForReset": "找回密碼驗證碼",
+    "captchaForResetDes": "是否啟用找回密碼表單驗證碼",
+    "webauthnDes": "是否允許用戶使用綁定的外部驗證器登入，站點必須啟用 HTTPS 才能使用。",
+    "webauthn": "外部驗證器登入",
+    "defaultGroup": "預設用戶組",
+    "defaultGroupDes": "用戶註冊後的初始用戶組",
+    "testMailSent": "測試郵件已發送",
+    "testSMTPSettings": "發件測試",
+    "testSMTPTooltip": "發送測試郵件前，請先儲存已更改的郵件設定；郵件發送結果不會立即回饋，如果您長時間未收到測試郵件，請檢查 Cloudreve 在終端輸出的錯誤日誌。",
+    "recipient": "收件人地址",
+    "send": "發送",
+    "smtp": "發信",
+    "senderName": "發件人名",
+    "senderNameDes": "郵件中展示的發件人姓名",
+    "senderAddress": "發件人信箱",
+    "senderAddressDes": "發件信箱的地址",
+    "smtpServer": "SMTP 伺服器",
+    "smtpServerDes": "發件伺服器地址，不含埠號",
+    "smtpPort": "SMTP 埠",
+    "smtpPortDes": "發件伺服器地址埠號",
+    "smtpUsername": "SMTP 使用者名稱",
+    "smtpUsernameDes": "發信信箱使用者名稱，一般與信箱地址相同",
+    "smtpPassword": "SMTP 密碼",
+    "smtpPasswordDes": "發信信箱密碼",
+    "replyToAddress": "回信信箱",
+    "replyToAddressDes": "用戶回復系統發送的郵件時，用於接收回信的信箱",
+    "enforceSSL": "強制使用 SSL 連接",
+    "enforceSSLDes": "是否強制使用 SSL 加密連接。如果無法發送郵件，可關閉此項，  Cloudreve 會嘗試使用 STARTTLS 並決定是否使用加密連接",
+    "smtpTTL": "SMTP 連接有效期 (秒)",
+    "smtpTTLDes": "有效期內建立的 SMTP 連接會被新郵件發送請求復用",
+    "emailTemplates": "郵件模板",
+    "activateNewUser": "新用戶啟用",
+    "activateNewUserDes": "新用戶註冊後啟用郵件的模板",
+    "resetPassword": "重設密碼",
+    "resetPasswordDes": "密碼重設郵件模板",
+    "sendTestEmail": "發送測試郵件",
+    "transportation": "傳輸",
+    "workerNum": "Worker 數量",
+    "workerNumDes": "主機節點任務隊列最多並行執行的任務數，儲存後需要重啟 Cloudreve 生效",
+    "transitParallelNum": "中轉並行傳輸",
+    "transitParallelNumDes": "任務隊列中轉任務傳輸時，最大並行協程數",
+    "tempFolder": "臨時目錄",
+    "tempFolderDes": "用於存放解壓縮、壓縮等任務產生的臨時文件的目錄路徑",
+    "textEditMaxSize": "文件線上編輯最大尺寸",
+    "textEditMaxSizeDes": "文件文件可線上編輯的最大大小，超出此大小的文件無法線上編輯。此項設定適用於純文本文件、程式碼文件、Office 文件 （WOPI）",
+    "failedChunkRetry": "分片錯誤重試",
+    "failedChunkRetryDes": "分片上傳失敗後重試的最大次數，只適用於服務端上傳或中轉",
+    "cacheChunks": "快取流式分片文件以用於重試",
+    "cacheChunksDes": "開啟後，流式中轉分片上傳時會將分片數據快取在系統臨時目錄，以便用於分片上傳失敗後的重試；\n 關閉後，流式中轉分片上傳不會額外占用硬碟空間，但分片上傳失敗後整個上傳會立即失敗。",
+    "resetConnection": "上傳校驗失敗時強制重設連接",
+    "resetConnectionDes": "開啟後，如果本次策略、頭像等數據上傳校驗失敗，伺服器會強制重設連接",
+    "expirationDuration": "有效期 (秒)",
+    "batchDownload": "打包下載",
+    "downloadSession": "下載會話",
+    "previewURL": "預覽連結",
+    "docPreviewURL": "Office 文件預覽連結",
+    "uploadSession": "上傳會話",
+    "uploadSessionDes": "在上傳會話有效期內，對於支援的儲存策略，用戶可以斷點續傳未完成的任務。最大可設定的值受限於不同儲存策略服務商的規則。",
+    "downloadSessionForShared": "分享下載會話",
+    "downloadSessionForSharedDes": "設定時間內重複下載分享文件，不會被記入總下載次數",
+    "onedriveMonitorInterval": "OneDrive 用戶端上傳監控間隔",
+    "onedriveMonitorIntervalDes": "每間隔所設定時間，Cloudreve 會向 OneDrive 請求檢查用戶端上傳情況已確保用戶端上傳可控",
+    "onedriveCallbackTolerance": "OneDrive 回調等待",
+    "onedriveCallbackToleranceDes": "OneDrive 用戶端上傳完成後，等待回調的最大時間，如果超出會被認為上傳失敗",
+    "onedriveDownloadURLCache": "OneDrive 下載請求快取",
+    "onedriveDownloadURLCacheDes": "OneDrive 獲取文件下載 URL 後可將結果快取，減輕熱門文件下載API請求頻率",
+    "slaveAPIExpiration": "從機API請求超時（秒）",
+    "slaveAPIExpirationDes": "主機等待從機API請求響應的超時時間",
+    "heartbeatInterval": "節點心跳間隔（秒）",
+    "heartbeatIntervalDes": "主機節點向從機節點發送心跳的間隔",
+    "heartbeatFailThreshold": "心跳失敗重試閾值",
+    "heartbeatFailThresholdDes": "主機向從機發送心跳失敗後，主機可最大重試的次數。重試失敗後，節點會進入恢復模式",
+    "heartbeatRecoverModeInterval": "恢復模式心跳間隔（秒）",
+    "heartbeatRecoverModeIntervalDes": "節點因異常被主機標記為恢復模式後，主機嘗試重新連接節點的間隔",
+    "slaveTransitExpiration": "從機中轉超時（秒）",
+    "slaveTransitExpirationDes": "從機執行文件中轉任務可消耗的最長時間",
+    "nodesCommunication": "節點通信",
+    "cannotDeleteDefaultTheme": "不能刪除預設配色",
+    "keepAtLeastOneTheme": "請至少保留一個配色方案",
+    "duplicatedThemePrimaryColor": "主色調不能與已有配色重複",
+    "themes": "主題配色",
+    "colors": "關鍵色",
+    "themeConfig": "色彩配置",
+    "actions": "操作",
+    "wrongFormat": "格式不正確",
+    "createNewTheme": "新增配色方案",
+    "themeConfigDoc": "https://v4.mui.com/zh/customization/default-theme/",
+    "themeConfigDes": "完整的配置項可在 <0>預設主題 - Material-UI</0> 查閱。",
+    "defaultTheme": "預設配色",
+    "defaultThemeDes": "用戶未指定偏好配色時，站點預設使用的配色方案",
+    "appearance": "界面",
+    "personalFileListView": "個人文件列表預設樣式",
+    "personalFileListViewDes": "用戶未指定偏好樣式時，個人文件頁面列表預設樣式",
+    "sharedFileListView": "目錄分享頁列表預設樣式",
+    "sharedFileListViewDes": "用戶未指定偏好樣式時，目錄分享頁面的預設樣式",
+    "primaryColor": "主色調",
+    "primaryColorText": "主色調文字",
+    "secondaryColor": "輔色調",
+    "secondaryColorText": "輔色調文字",
+    "avatar": "頭像",
+    "gravatarServer": "Gravatar 伺服器",
+    "gravatarServerDes": "Gravatar 伺服器地址，可選擇使用國內鏡像",
+    "avatarFilePath": "頭像儲存路徑",
+    "avatarFilePathDes": "用戶上傳自訂頭像的儲存路徑",
+    "avatarSize": "頭像檔案大小限制",
+    "avatarSizeDes": "用戶可上傳頭像文件的最大大小",
+    "smallAvatarSize": "小頭像尺寸",
+    "mediumAvatarSize": "中頭像尺寸",
+    "largeAvatarSize": "大頭像尺寸",
+    "filePreview": "文件預覽",
+    "officePreviewService": "Office 文件預覽服務",
+    "officePreviewServiceDes": "可使用以下替換變數：",
+    "officePreviewServiceSrcDes": "文件 URL",
+    "officePreviewServiceSrcB64Des": " Base64 編碼後的文件 URL",
+    "officePreviewServiceName": "檔案名",
+    "thumbnails": "縮圖",
+    "localOnlyInfo": "以下設置只針對本機儲存策略有效。",
+    "thumbnailDoc": "有關配置縮圖的更多信息，請參閱 <0>官方文件</0>。",
+    "thumbnailDocLink":"https://docs.cloudreve.org/use/thumbnails",
+    "thumbnailBasic": "基本設定",
+    "generators": "生成器",
+    "thumbMaxSize": "最大原始文件尺寸",
+    "thumbMaxSizeDes": "可生成縮圖的最大原始文件的大小，超出此大小的文件不會生成縮圖",
+    "generatorProxyWarning": "預設情況下，非本機儲存策略只會使用「儲存策略原生」生成器。你可以透過開啓「生成器代理」功能擴展第三方儲存策略的縮圖能力。",
+    "policyBuiltin": "儲存策略原生",
+    "policyBuiltinDes": "使用儲存提供方原生的圖像處理接口。對於本機和 S3 策略，這一生成器不可用，將會自動順沿其他生成器。對於其他儲存策略，支援的原始圖像格式和大小限制請參考 Cloudreve 文件。",
+    "cloudreveBuiltin":"Cloudreve 內建",
+    "cloudreveBuiltinDes": "使用 Cloudreve 內建的圖像處理能力，僅支援 PNG、JPEG、GIF 格式的圖片。",
+    "libreOffice": "LibreOffice",
+    "libreOfficeDes": "使用 LibreOffice 生成 Office 文件的縮圖。這一生成器依賴於任一其他圖像生成器（Cloudreve 內建 或 VIPS）。",
+    "vips": "VIPS",
+    "vipsDes": "使用 libvips 處理縮圖圖像，支援更多圖像格式，資源消耗更低。",
+    "thumbDependencyWarning": "LibreOffice 生成器依賴於 Cloudreve 內建 或 VIPS 生成器，請開啓其中任一生成器。",
+    "ffmpeg": "FFmpeg",
+    "ffmpegDes": "使用 FFmpeg 生成影片縮圖。",
+    "executable": "可執行文件",
+    "executableDes": "第三方生成器可執行文件的地址或命令",
+    "executableTest": "測試",
+    "executableTestSuccess": "生成器正常，版本：{{version}}",
+    "generatorExts": "可用副檔名",
+    "generatorExtsDes": "此生成器可用的文件副檔名列表，多個請使用半形逗號 , 隔開",
+    "ffmpegSeek": "縮圖截取位置",
+    "ffmpegSeekDes": "定義縮圖截取的時間，推薦選擇較小值以加速生成過程。如果超出影片實際長度，會導致縮圖截取失敗",
+    "generatorProxy": "生成器代理",
+    "enableThumbProxy": "使用生成器代理",
+    "proxyPolicyList": "啓動代理的儲存策略",
+    "proxyPolicyListDes": "可多選。選中後，儲存策略不支援原生生成縮圖的類型會由 Cloudreve 代理生成",
+    "thumbWidth": "縮圖寬度",
+    "thumbHeight": "縮圖高度",
+    "thumbSuffix": "縮圖文件後綴",
+    "thumbConcurrent": "縮圖生成並行數量",
+    "thumbConcurrentDes": "-1 表示自動決定",
+    "thumbFormat": "縮圖格式",
+    "thumbFormatDes": "可選：png/jpg",
+    "thumbQuality": "圖像質量",
+    "thumbQualityDes": "壓縮質量百分比，只針對 jpg 編碼有效",
+    "thumbGC": "生成完成後立即回收記憶體",
+    "captcha": "驗證碼",
+    "captchaType": "驗證碼類型",
+    "plainCaptcha": "普通",
+    "reCaptchaV2": "reCAPTCHA V2",
+    "tencentCloudCaptcha": "騰訊雲驗證碼",
+    "captchaProvider": "驗證碼類型",
+    "plainCaptchaTitle": "普通驗證碼",
+    "captchaWidth": "寬度",
+    "captchaHeight": "高度",
+    "captchaLength": "長度",
+    "captchaMode": "模式",
+    "captchaModeNumber": "數字",
+    "captchaModeLetter": "字母",
+    "captchaModeMath": "算數",
+    "captchaModeNumberLetter": "數字+字母",
+    "captchaElement": "驗證碼的形式",
+    "complexOfNoiseText": "加強干擾文字",
+    "complexOfNoiseDot": "加強干擾點",
+    "showHollowLine": "使用空心線",
+    "showNoiseDot": "使用噪點",
+    "showNoiseText": "使用干擾文字",
+    "showSlimeLine": "使用波浪線",
+    "showSineLine": "使用正弦線",
+    "siteKey": "Site KEY",
+    "siteKeyDes": "<0>應用管理頁面</0> 獲取到的的 網站金鑰",
+    "siteSecret": "Secret",
+    "siteSecretDes": "<0>應用管理頁面</0> 獲取到的的 秘鑰",
+    "secretID": "SecretId",
+    "secretIDDes": "<0>訪問金鑰頁面</0> 獲取到的的 SecretId",
+    "secretKey": "SecretKey",
+    "secretKeyDes": "<0>訪問金鑰頁面</0> 獲取到的的 SecretKey",
+    "tCaptchaAppID": "APPID",
+    "tCaptchaAppIDDes": "<0>圖形驗證頁面</0> 獲取到的的 APPID",
+    "tCaptchaSecretKey": "App Secret Key",
+    "tCaptchaSecretKeyDes": "<0>圖形驗證頁面</0> 獲取到的的 App Secret Key",
+    "staticResourceCache": "靜態公共資源快取",
+    "staticResourceCacheDes": "公共可訪問的靜態資源（如：本機策略直鏈、文件下載連接）的快取有效期",
+    "wopiClient": "WOPI 客戶端",
+    "wopiClientDes": "透過對接支援 WOPI 協議的線上文件處理系統，擴展 Cloudreve 的文件線上預覽和編輯能力。詳情請參考 <0>官方文件</0>。",
+    "wopiDocLink": "https://docs.cloudreve.org/use/wopi",
+    "enableWopi": "使用 WOPI",
+    "wopiEndpoint": "WOPI Discovery Endpoint",
+    "wopiEndpointDes": "WOPI 客戶端發現 API 的端點地址",
+    "wopiSessionTtl": "編輯會話有效期（秒）",
+    "wopiSessionTtlDes": "用戶打開線上編輯文件會話的有效期，超出此期限的會話無法繼續儲存新更改"
+  },
+  "policy": {
+    "sharp": "#",
+    "name": "名稱",
+    "type": "類型",
+    "childFiles": "下屬文件數",
+    "totalSize": "數據量",
+    "actions": "操作",
+    "authSuccess": "授權成功",
+    "policyDeleted": "儲存策略已刪除",
+    "newStoragePolicy": "新增儲存策略",
+    "all": "全部",
+    "local": "本機儲存",
+    "remote": "從機儲存",
+    "qiniu": "七牛",
+    "upyun": "又拍雲",
+    "oss": "阿里雲 OSS",
+    "cos": "騰訊雲 COS",
+    "onedrive": "OneDrive",
+    "s3": "AWS S3",
+    "refresh": "重新整理",
+    "delete": "刪除",
+    "edit": "編輯",
+    "editInProMode": "專家模式編輯",
+    "editInWizardMode": "嚮導模式編輯",
+    "selectAStorageProvider": "選擇儲存方式",
+    "comparesStoragePolicies": "儲存策略對比",
+    "comparesStoragePoliciesLink": "https://docs.cloudreve.org/use/policy/compare",
+    "storagePathStep": "上傳路徑",
+    "sourceLinkStep": "直鏈設定",
+    "uploadSettingStep": "上傳設定",
+    "finishStep": "完成",
+    "policyAdded": "儲存策略已新增",
+    "policySaved": "儲存策略已儲存",
+    "editLocalStoragePolicy": "修改本機儲存策略",
+    "addLocalStoragePolicy": "新增本機儲存策略",
+    "optional": "可選",
+    "pathMagicVarDes": "請在下方輸入文件的儲存目錄路徑，可以為絕對路徑或相對路徑（相對於 Cloudreve）。路徑中可以使用魔法變數，文件在上傳時會自動替換這些變數為相應值； 可用魔法變數可參考 <0>路徑魔法變數列表</0>。",
+    "pathOfFolderToStoreFiles": "儲存目錄",
+    "filePathMagicVarDes": "是否需要對儲存的物理文件進行重新命名？此處的重新命名不會影響最終呈現給用戶的 檔案名。檔案名也可使用魔法變數， 可用魔法變數可參考 <0>檔案名魔法變數列表</0>。",
+    "autoRenameStoredFile": "開啟重新命名",
+    "keepOriginalFileName": "不開啟",
+    "renameRule": "命名規則",
+    "next": "下一步",
+    "enableGettingPermanentSourceLink": "是否允許獲取文件永久直鏈？",
+    "enableGettingPermanentSourceLinkDes": "開啟後，用戶可以請求獲得能直接訪問到文件內容的直鏈，適用於圖床應用或自用。您可能還需要在用戶組設定中開啟此功能，用戶才可以獲取直鏈。",
+    "allowed": "允許",
+    "forbidden": "禁止",
+    "useCDN": "是否要對下載/直鏈使用 CDN？",
+    "useCDNDes": "開啟後，用戶訪問文件時的 URL 中的域名部分會被替換為 CDN 域名。",
+    "use": "使用",
+    "notUse": "不使用",
+    "cdnDomain": "選擇協議並填寫 CDN 域名",
+    "cdnPrefix": "CDN 前綴",
+    "back": "上一步",
+    "limitFileSize": "是否限制上傳的單檔案大小？",
+    "limit": "限制",
+    "notLimit": "不限制",
+    "enterSizeLimit": "輸入限制：",
+    "maxSizeOfSingleFile": "單檔案大小限制",
+    "limitFileExt": "是否限制上傳文件副檔名？",
+    "enterFileExt": "輸入允許上傳的文件副檔名，多個請以半形逗號 , 隔開",
+    "extList": "副檔名列表",
+    "chunkSizeLabel": "請指定分片上傳時的分片大小，填寫為 0 表示不使用分片上傳。",
+    "chunkSizeDes": "啟用分片上傳後，用戶上傳的文件將會被切分成分片逐個上傳到儲存端，當上傳中斷後，用戶可以選擇從上次上傳的分片後繼續開始上傳。",
+    "chunkSize": "分片上傳大小",
+    "nameThePolicy": "最後一步，為此儲存策略命名：",
+    "policyName": "儲存策略名",
+    "finish": "完成",
+    "furtherActions": "要使用此儲存策略，請到用戶組管理頁面，為相應用戶組綁定此儲存策略。",
+    "backToList": "返回儲存策略列表",
+    "magicVar": {
+      "fileNameMagicVar": "檔案名魔法變數",
+      "pathMagicVar": "路徑魔法變數",
+      "variable": "魔法變數",
+      "description": "描述",
+      "example": "範例",
+      "16digitsRandomString": "16 位隨機字元",
+      "8digitsRandomString": "8 位隨機字元",
+      "secondTimestamp": "秒級時間戳",
+      "nanoTimestamp": "奈秒級時間戳",
+      "uid": "用戶 ID",
+      "originalFileName": "原始檔案名",
+      "originFileNameNoext": "原始檔案名無副檔名",
+      "extension": "文件副檔名",
+      "uuidV4": "UUID V4",
+      "date": "日期",
+      "dateAndTime": "日期時間",
+      "year": "年份",
+      "month": "月份",
+      "day": "日",
+      "hour": "小時",
+      "minute": "分鐘",
+      "second": "秒",
+      "userUploadPath": "用戶上傳路徑"
+    },
+    "storageNode": "儲存端配置",
+    "communicationOK": "通信正常",
+    "editRemoteStoragePolicy": "修改從機儲存策略",
+    "addRemoteStoragePolicy": "新增從機儲存策略",
+    "remoteDescription": "從機儲存策略允許你使用同樣執行了 Cloudreve 的伺服器作為儲存端， 用戶上傳下載流量透過 HTTP 直傳。",
+    "remoteCopyBinaryDescription": "將和主站相同版本的 Cloudreve 程序複製至要作為從機的伺服器上。",
+    "remoteSecretDescription": "下方為系統為您隨機生成的從機端金鑰，一般無需改動，如果有自訂需求，可將您的金鑰填入下方：",
+    "remoteSecret": "從機密鑰",
+    "modifyRemoteConfig": "修改從機配置文件。",
+    "addRemoteConfigDes": " 在從機端 Cloudreve 的同級目錄下新增 <0>conf.ini</0> 文件，填入從機配置，啟動/重啟從機端 Cloudreve。以下為一個可供參考的配置例子，其中金鑰部分已幫您填寫為上一步所生成的。",
+    "remoteConfigDifference": "從機端配置檔案格式大致與主站端相同，區別在於：",
+    "remoteConfigDifference1": "<0>System</0> 分區下的 <1>mode</1> 欄位必須更改為 <2>slave</2>。",
+    "remoteConfigDifference2": "必須指定 <0>Slave</0> 分區下的 <1>Secret</1> 欄位，其值為第二步裡填寫或生成的金鑰。",
+    "remoteConfigDifference3": "必須啟動跨域配置，即 <0>CORS</0> 欄位的內容，具體可參考上文範例或官方文件。如果配置不正確，用戶將無法透過 Web 端向從機上傳文件。",
+    "inputRemoteAddress": "填寫從機地址。",
+    "inputRemoteAddressDes": "如果主站啟用了 HTTPS，從機也需要啟用，並在下方填入 HTTPS 協議的地址。",
+    "remoteAddress": "從機地址",
+    "testCommunicationDes": "完成以上步驟後，你可以點擊下方的測試按鈕測試通信是否正常。",
+    "testCommunication": "測試從機通信",
+    "pathMagicVarDesRemote": "請在下方輸入文件的儲存目錄路徑，可以為絕對路徑或相對路徑（相對於 從機的 Cloudreve）。路徑中可以使用魔法變數，文件在上傳時會自動替換這些變數為相應值； 可用魔法變數可參考 <0>路徑魔法變數列表</0>。",
+    "storageBucket": "儲存空間",
+    "editQiniuStoragePolicy": "修改七牛儲存策略",
+    "addQiniuStoragePolicy": "新增七牛儲存策略",
+    "wanSiteURLDes": "在使用此儲存策略前，請確保您在 參數設定 - 站點訊息 - 站點URL 中填寫的 地址與實際相符，並且 <0>能夠被外網正常訪問</0>。",
+    "createQiniuBucket": "前往 <0>七牛控制面板</0> 建立對象儲存資源。",
+    "enterQiniuBucket": "在下方填寫您在七牛建立儲存空間時指定的「儲存空間名稱」：",
+    "qiniuBucketName": "儲存空間名稱",
+    "bucketTypeDes": "在下方選擇您建立的空間類型，推薦選擇「私有空間」以獲得更高的安全性。",
+    "privateBucket": "私有",
+    "publicBucket": "公有",
+    "bucketCDNDes": "填寫您為儲存空間綁定的 CDN 加速域名。",
+    "bucketCDNDomain": "CDN 加速域名",
+    "qiniuCredentialDes": "在七牛控制面板進入 個人中心 - 金鑰管理，在下方填寫獲得到的 AK、SK。",
+    "ak": "AK",
+    "sk": "SK",
+    "cannotEnableForPrivateBucket": "私有空間開啟外鏈功能後，還需要在用戶組裡設定開啟「使用重定向的外鏈」，否則無法正常生成外鏈",
+    "limitMimeType": "是否限制上傳文件 MimeType？",
+    "mimeTypeDes": "輸入允許上傳的 MimeType，多個請以半形逗號 , 隔開。七牛伺服器會偵測文件內容以判斷 MimeType，再用判斷值跟指定值進行匹配，匹配成功則允許上傳。",
+    "mimeTypeList": "MimeType 列表",
+    "chunkSizeLabelQiniu": "請指定分片上傳時的分片大小，範圍 1 MB - 1 GB。",
+    "createPlaceholderDes": "是否要再用戶開始上傳時就建立占位符文件並扣除用戶容量？開啟後，可以防止用戶惡意發起多個上傳請求但不完成上傳。",
+    "createPlaceholder": "建立占位符文件",
+    "notCreatePlaceholder": "不建立",
+    "corsSettingStep": "跨域策略",
+    "corsPolicyAdded": "跨域策略已新增",
+    "editOSSStoragePolicy": "修改阿里雲 OSS 儲存策略",
+    "addOSSStoragePolicy": "新增阿里雲 OSS 儲存策略",
+    "createOSSBucketDes": "前往 <0>OSS 管理控制台</0> 建立 Bucket。注意：建立空間類型只能選擇 <1>標準儲存</1> 或 <2>低頻訪問</2>，暫不支援 <3>歸檔儲存</3>。",
+    "ossBucketNameDes": "在下方填寫您建立 Bucket 時指定的 <0>Bucket 名稱</0>：",
+    "bucketName": "Bucket 名稱",
+    "publicReadBucket": "公共讀",
+    "ossEndpointDes": "轉到所建立 Bucket 的概覽頁面，填寫 <0>訪問域名</0> 欄目下 <1>外網訪問</1> 一行中間的 <2>EndPoint（地域節點）</2>。",
+    "endpoint": "EndPoint",
+    "endpointDomainOnly": "格式不合法，只需輸入域名部分即可",
+    "ossLANEndpointDes": "如果您的 Cloudreve 部署在阿里雲端計算服務中，並且與 OSS 處在同一可用區下，您可以額外指定使用內網 EndPoint 以節省流量開支。是否要在服務端發送請求時使用 OSS 內網 EndPoint？",
+    "intranetEndPoint": "內網 EndPoint",
+    "ossCDNDes": "是否要使用配套的 阿里雲CDN 加速 OSS 訪問？",
+    "createOSSCDNDes": "前往 <0>阿里雲 CDN 管理控制台</0> 建立 CDN 加速域名，並設定源站為剛建立的 OSS Bucket。在下方填寫 CDN 加速域名，並選擇是否使用 HTTPS：",
+    "ossAKDes": "在阿里雲 <0>安全訊息管理</0> 頁面獲取 用戶 AccessKey，並填寫在下方。",
+    "shouldNotContainSpace": "不能含有空格",
+    "nameThePolicyFirst": "為此儲存策略命名：",
+    "chunkSizeLabelOSS": "請指定分片上傳時的分片大小，範圍 100 KB ~ 5 GB。",
+    "ossCORSDes": "此儲存策略需要正確配置跨域策略後才能使用 Web 端上傳文件，Cloudreve 可以幫您自動設定，您也可以參考文件步驟手動設定。如果您已設定過此 Bucket 的跨域策略，此步驟可以跳過。",
+    "letCloudreveHelpMe": "讓 Cloudreve 幫我設定",
+    "skip": "跳過",
+    "editUpyunStoragePolicy": "修改又拍雲端儲存策略",
+    "addUpyunStoragePolicy": "新增又拍雲端儲存策略",
+    "createUpyunBucketDes": "前往 <0>又拍雲面板</0> 建立雲端儲存服務。",
+    "storageServiceNameDes": "在下方填寫所建立的服務名稱：",
+    "storageServiceName": "服務名稱",
+    "operatorNameDes": "為此服務建立或授權有讀取、寫入、刪除權限的操作員，然後將操作員訊息填寫在下方：",
+    "operatorName": "操作員名",
+    "operatorPassword": "操作員密碼",
+    "upyunCDNDes": "填寫為雲端儲存服務綁定的域名，並根據實際情況選擇是否使用 HTTPS：",
+    "upyunOptionalDes": "此步驟可保持預設並跳過，但是強烈建議您跟隨此步驟操作。",
+    "upyunTokenDes": "前往所建立雲端儲存服務的 功能配置 面板，轉到 訪問配置 選項卡，開啟 Token 防盜鏈並設定密碼。",
+    "tokenEnabled": "已開啟 Token 防盜鏈",
+    "tokenDisabled": "未開啟 Token 防盜鏈",
+    "upyunTokenSecretDes": "填寫您所設定的 Token 防盜鏈 金鑰",
+    "upyunTokenSecret": "Token 防盜鏈 金鑰",
+    "cannotEnableForTokenProtectedBucket": "開啟 Token 防盜鏈後無法使用直鏈功能",
+    "callbackFunctionStep": "雲函數回調",
+    "callbackFunctionAdded": "回調雲函數已新增",
+    "editCOSStoragePolicy": "修改騰訊雲 COS 儲存策略",
+    "addCOSStoragePolicy": "新增騰訊雲 COS 儲存策略",
+    "createCOSBucketDes": "前往 <0>COS 管理控制台</0> 建立儲存桶。",
+    "cosBucketNameDes": "轉到所建立儲存桶的基礎配置頁面，將 <0>空間名稱</0> 填寫在下方：",
+    "cosBucketFormatError": "空間名格式不正確, 舉例：ccc-1252109809",
+    "cosBucketTypeDes": "在下方選擇您建立的空間的訪問權限類型，推薦選擇 <0>私有讀寫</0> 以獲得更高的安全性，私有空間無法開啟「獲取直鏈」功能。",
+    "cosPrivateRW": "私有讀寫",
+    "cosPublicRW": "公共讀私有寫",
+    "cosAccessDomainDes": "轉到所建立 Bucket 的基礎配置，填寫 <0>基本訊息</0> 欄目下 給出的 <1>訪問域名</1>。",
+    "accessDomain": "訪問域名",
+    "cosCDNDes": "是否要使用配套的 騰訊雲CDN 加速 COS 訪問？",
+    "cosCDNDomainDes": "前往 <0>騰訊雲 CDN 管理控制台</0> 建立 CDN 加速域名，並設定源站為剛建立的 COS 儲存桶。在下方填寫 CDN 加速域名，並選擇是否使用 HTTPS：",
+    "cosCredentialDes": "在騰訊雲 <0>訪問金鑰</0> 頁面獲取一對訪問金鑰，並填寫在下方。請確保這對金鑰擁有 COS 和 SCF 服務的訪問權限。",
+    "secretId": "SecretId",
+    "secretKey": "SecretKey",
+    "cosCallbackDes": "COS 儲存桶 用戶端直傳需要借助騰訊雲的 <0>雲函數</0> 產品以確保上傳回調可控。如果您打算將此儲存策略自用，或者分配給可信賴用戶組，此步驟可以跳過。如果是作為公有使用，請務必建立回調雲函數。",
+    "cosCallbackCreate": "Cloudreve 可以嘗試幫你自動建立回調雲函數，請選擇 COS 儲存桶 所在地域後繼續。建立可能會花費數秒鐘，請耐心等待。建立前請確保您的騰訊雲帳號已開啟雲函數服務。",
+    "cosBucketRegion": "儲存桶所在地區",
+    "ap-beijing": "華北地區(北京)",
+    "ap-chengdu": "西南地區(成都)",
+    "ap-guangzhou": "華南地區(廣州)",
+    "ap-guangzhou-open": "華南地區(廣州Open)",
+    "ap-hongkong": "港澳台地區(中國香港)",
+    "ap-mumbai": "亞太南部(孟買)",
+    "ap-shanghai": "華東地區(上海)",
+    "na-siliconvalley": "美國西部(矽谷)",
+    "na-toronto": "北美地區(多倫多)",
+    "applicationRegistration": "應用授權",
+    "grantAccess": "帳號授權",
+    "warning": "警告",
+    "odHttpsWarning": "您必須啟用 HTTPS 才能使用 OneDrive/SharePoint 儲存策略；啟用後同步更改 參數設定 - 站點訊息 - 站點URL。",
+    "editOdStoragePolicy": "修改 OneDrive/SharePoint 儲存策略",
+    "addOdStoragePolicy": "新增 OneDrive/SharePoint 儲存策略",
+    "creatAadAppDes": "前往 <0>Azure Active Directory 控制台 (國際版帳號)</0> 或者 <1>Azure Active Directory 控制台 (世紀互聯帳號)</1> 並登入，登入後進入<2>Azure Active Directory</2> 管理面板，這裡登入使用的帳號和最終儲存使用的 OneDrive 所屬帳號可以不同。",
+    "createAadAppDes2": "進入左側 <0>應用註冊</0> 選單，並點擊 <1>新註冊</1> 按鈕。",
+    "createAadAppDes3": "填寫應用註冊表單。其中，名稱可任取；<0>受支援的帳戶類型</0> 選擇為 <1>任何組織目錄(任何 Azure AD 目錄 - 多租戶)中的帳戶和個人 Microsoft 帳戶(例如，Skype、Xbox)</1>；<2>重定向 URI (可選)</2> 請選擇 <3>Web</3>，並填寫 <4>{{url}}</4>； 其他保持預設即可",
+    "aadAppIDDes": "建立完成後進入應用管理的 <0>概覽</0> 頁面，複製 <1>應用程式(用戶端) ID</1> 並填寫在下方：",
+    "aadAppID": "應用程式(用戶端) ID",
+    "addAppSecretDes": "進入應用管理頁面左側的 <0>證書和密碼</0> 選單，點擊 <1>新增用戶端密碼</1> 按鈕，<2>截止期限</2> 選擇為 <3>從不</3>。建立完成後將用戶端密碼的值填寫在下方：",
+    "aadAppSecret": "用戶端密碼",
+    "aadAccountCloudDes": "選擇您的 Microsoft 365 帳號類型：",
+    "multiTenant": "國際版",
+    "gallatin": "世紀互聯版",
+    "sharePointDes": "是否將文件存放在 SharePoint 中？",
+    "saveToSharePoint": "存到指定 SharePoint 中",
+    "saveToOneDrive": "存到帳號預設 OneDrive 驅動器中",
+    "spSiteURL": "SharePoint 站點地址",
+    "odReverseProxyURLDes": "是否要在文件下載時替換為使用自建的反代伺服器？",
+    "odReverseProxyURL": "反代伺服器地址",
+    "chunkSizeLabelOd": "請指定分片上傳時的分片大小，OneDrive 要求必須為 320 KiB (327,680 bytes) 的整數倍。",
+    "limitOdTPSDes": "是否限制服務端 OneDrive API 請求頻率？",
+    "tps": "TPS 限制",
+    "tpsDes": "限制此儲存策略每秒向 OneDrive 發送 API 請求最大數量。超出此頻率的請求會被限速。多個 Cloudreve 節點轉存文件時，它們會各自使用自己的限流桶，請根據情況按比例調低此數值。Web 端上傳請求並不受此限制。",
+    "tpsBurst": "TPS 突發請求",
+    "tpsBurstDes": "請求空閒時，Cloudreve 可將指定數量的名額預留給未來的突發流量使用。",
+    "odOauthDes": "但是你需要點擊下方按鈕，並使用 OneDrive 登入授權以完成初始化後才能使用。日後你可以在儲存策略列表頁面重新進行授權。",
+    "gotoAuthPage": "轉到授權頁面",
+    "s3SelfHostWarning": "S3 類型儲存策略目前僅可用於自己使用，或者是給受信任的用戶組使用。",
+    "editS3StoragePolicy": "修改 AWS S3 儲存策略",
+    "addS3StoragePolicy": "新增 AWS S3 儲存策略",
+    "s3BucketDes": "前往 AWS S3 控制台建立儲存桶，在下方填寫您建立儲存桶時指定的 <0>Bucket 名稱</0>：",
+    "publicAccessDisabled": "阻止全部公共訪問權限",
+    "publicAccessEnabled": "允許公共讀取",
+    "s3EndpointDes": "(可選) 指定儲存桶的 EndPoint（地域節點），填寫為完整的 URL 格式，比如 <0>https://bucket.region.example.com</0>。留空則將使用系統生成的預設接入點。",
+    "selectRegionDes": "選擇儲存桶所在的區域，或者手動輸入區域代碼",
+    "enterAccessCredentials": "獲取訪問金鑰，並填寫在下方。",
+    "accessKey": "AccessKey",
+    "chunkSizeLabelS3": "請指定分片上傳時的分片大小，範圍 5 MB ~ 5 GB。",
+    "editPolicy": "編輯儲存策略",
+    "setting":"設置項",
+    "value": "值",
+    "description": "描述",
+    "id": "ID",
+    "policyID": "儲存策略編號",
+    "policyType": "儲存策略類型",
+    "server": "Server",
+    "policyEndpoint": "儲存端 Endpoint",
+    "bucketID": "儲存桶標識",
+    "yes": "是",
+    "no": "否",
+    "privateBucketDes": "是否為私有空間",
+    "resourceRootURL": "文件資源根 URL",
+    "resourceRootURLDes": "預覽/獲取文件外鏈時生成 URL 的前綴",
+    "akDes": "AccessKey / 更新 Token",
+    "maxSizeBytes": "最大單文件尺寸 (Bytes)",
+    "maxSizeBytesDes": "最大可上傳的文件尺寸，填寫為 0 表示不限制",
+    "autoRename": "自動重新命名",
+    "autoRenameDes": "是否根據規則對上傳物理文件重新命名",
+    "storagePath": "儲存路徑",
+    "storagePathDes": "文件物理儲存路徑",
+    "fileName": "儲存檔案名",
+    "fileNameDes": "文件物理儲存檔案名",
+    "allowGetSourceLink": "允許獲取外鏈",
+    "allowGetSourceLinkDes": "是否允許獲取外鏈。注意，某些儲存策略類型不支援，即使在此開啟，獲取的外鏈也無法使用",
+    "upyunToken": "又拍雲防盜鏈 Token",
+    "upyunOnly": "僅對又拍雲端儲存策略有效",
+    "allowedFileExtension": "允許文件副檔名",
+    "emptyIsNoLimit": "留空表示不限制",
+    "allowedMimetype": "允許的 MimeType",
+    "qiniuOnly": "僅對七牛儲存策略有效",
+    "odRedirectURL": "OneDrive 重定向地址",
+    "noModificationNeeded": "一般新增後無需修改",
+    "odReverseProxy": "OneDrive 反代伺服器地址",
+    "odOnly": "僅對 OneDrive 儲存策略有效",
+    "odDriverID": "OneDrive/SharePoint 驅動器資源標識",
+    "odDriverIDDes": "僅對 OneDrive 儲存策略有效，留空則使用用戶的預設 OneDrive 驅動器",
+    "s3Region": "Amazon S3 Region",
+    "s3Only": "僅對 Amazon S3 儲存策略有效",
+    "lanEndpoint": "內網 EndPoint",
+    "ossOnly": "僅對 OSS 儲存策略有效",
+    "chunkSizeBytes": "上傳分片大小 (Bytes)",
+    "chunkSizeBytesDes": "分片上傳時單個分片的大小，僅部分儲存策略支援",
+    "placeHolderWithSize": "上傳前預支用戶儲存",
+    "placeHolderWithSizeDes": "是否在上傳會話建立時就對用戶儲存進行預支，僅部分儲存策略支援",
+    "saveChanges": "儲存更改",
+    "s3EndpointPathStyle": "選擇 S3 Endpoint 地址的格式，如果您不知道該選什麼，保持預設即可。某些第三方 S3 相容儲存策略可能需要更改此選項。開啟後，將會強制使用路徑格式地址，比如 <0>http://s3.amazonaws.com/BUCKET/KEY</0>。",
+    "usePathEndpoint": "強制路徑格式",
+    "useHostnameEndpoint": "主機名優先",
+    "thumbExt": "可生成縮圖的文件副檔名",
+    "thumbExtDes": "留空表示使用儲存策略預定義集合。對本機、S3儲存策略無效"
+  },
+  "node": {
+    "#": "#",
+    "name": "名稱",
+    "status": "當前狀態",
+    "features": "已啟用功能",
+    "action": "操作",
+    "remoteDownload": "離線下載",
+    "nodeDisabled": "節點已暫停使用",
+    "nodeEnabled": "節點已啟用",
+    "nodeDeleted": "節點已刪除",
+    "disabled": "未啟用",
+    "online": "線上",
+    "offline": "離線",
+    "addNewNode": "接入新節點",
+    "refresh": "重新整理",
+    "enableNode": "啟用節點",
+    "disableNode": "暫停使用節點",
+    "edit": "編輯",
+    "delete": "刪除",
+    "slaveNodeDes": "您可以新增同樣執行了 Cloudreve 的伺服器作為從機端，正常執行工作的從機端可以為主機分擔某些非同步任務（如離線下載）。請參考下面嚮導部署並配置連接 Cloudreve 從機節點。<0>如果你已經在目標伺服器上部署了從機儲存策略，您可以跳過本頁面的某些步驟，只將從機密鑰、伺服器地址在這裡填寫並保持與從機儲存策略中一致即可。</0> 在後續版本中，從機儲存策略的相關配置會合併到這裡。",
+    "overwriteDes": "; 以下為可選的設定，對應主機節點的相關參數，可以透過配置文件應用到從機節點，請根據<0></0>; 實際情況調整。更改下面設定需要重啟從機節點後生效。",
+    "workerNumDes": "任務隊列最多並行執行的任務數",
+    "parallelTransferDes": "任務隊列中轉任務傳輸時，最大並行協程數",
+    "chunkRetriesDes": "中轉分片上傳失敗後重試的最大次數",
+    "multipleMasterDes": "一個從機 Cloudreve 實例可以對接多個 Cloudreve 主節點，只需在所有主節點中新增此從機節點並保持金鑰一致即可。",
+    "ariaSuccess": "連接成功，Aria2 版本為：{{version}}",
+    "slave": "從機",
+    "master": "主機",
+    "aria2Des": "Cloudreve 的離線下載功能由 <0>Aria2</0> 驅動。如需使用，請在目標節點伺服器上以和執行 Cloudreve 相同的用戶身份啟動 Aria2， 並在 Aria2 的配置文件中開啟 RPC 服務，<1>Aria2 需要和{{mode}} Cloudreve 進程共用相同的文件系統。</1> 更多訊息及指引請參考文件的 <2>離線下載</2> 章節。",
+    "slaveTakeOverRemoteDownload": "是否需要此節點接管離線下載任務？",
+    "masterTakeOverRemoteDownload": "是否需要主機接管離線下載任務？",
+    "routeTaskSlave": "開啟後，用戶的離線下載請求可以被分流到此節點處理。",
+    "routeTaskMaster": "開啟後，用戶的離線下載請求可以被分流到主機處理。",
+    "enable": "啟用",
+    "disable": "關閉",
+    "slaveNodeTarget": "在目標節點伺服器上與節點",
+    "masterNodeTarget": "在與",
+    "aria2ConfigDes": "{{target}} Cloudreve 進程相同的文件系統環境下啟動 Aria2 進程。在啟動 Aria2 時，需要在其配置文件中啟用 RPC 服務，並設定 RPC Secret，以便後續使用。以下為一個供參考的配置：",
+    "enableRPCComment": "啟用 RPC 服務",
+    "rpcPortComment": "RPC 監聽埠",
+    "rpcSecretComment": "RPC 授權令牌，可自行設定",
+    "rpcConfigDes": "推薦在日常啟動流程中，先啟動 Aria2，再啟動節點 Cloudreve，這樣節點 Cloudreve 可以向 Aria2 訂閱事件通知，下載狀態變更處理更及時。當然，如果沒有這一流程，節點 Cloudreve 也會透過輪詢追蹤任務狀態。",
+    "rpcServerDes": "在下方填寫{{mode}} Cloudreve 與 Aria2 通信的 RPC 服務地址。一般可填寫為 <0>http://127.0.0.1:6800/</0>，其中埠號 <1>6800</1> 與上文配置文件中 <2>rpc-listen-port</2>保持一致。",
+    "rpcServer": "RPC 伺服器地址",
+    "rpcServerHelpDes": "包含埠的完整 RPC 伺服器地址，例如：http://127.0.0.1:6800/，留空表示不啟用 Aria2 服務",
+    "rpcTokenDes": "RPC 授權令牌，與 Aria2 配置文件中 <0>rpc-secret</0> 保持一致，未設定請留空。",
+    "aria2PathDes": "在下方填寫 Aria2 用作臨時下載目錄的 節點上的 <0>絕對路徑</0>，節點上的 Cloudreve 進程需要此目錄的讀、寫、執行權限。",
+    "aria2SettingDes": "在下方按需要填寫一些 Aria2 額外參數訊息。",
+    "refreshInterval": "狀態更新間隔 (秒)",
+    "refreshIntervalDes": "Cloudreve 向 Aria2 請求更新任務狀態的間隔。",
+    "rpcTimeout": "RPC 調用超時 (秒)",
+    "rpcTimeoutDes": "調用 RPC 服務時最長等待時間",
+    "globalOptions": "全局任務參數",
+    "globalOptionsDes": "建立下載任務時攜帶的額外設定參數，以 JSON 編碼後的格式書寫，您可也可以將這些設定寫在 Aria2 配置文件裡，可用參數請查閱官方文件",
+    "testAria2Des": "完成以上步驟後，你可以點擊下方的測試按鈕測試{{mode}} Cloudreve 向 Aria2 通信是否正常。",
+    "testAria2DesSlaveAddition": "在進行測試前請先確保您已進行並透過上一頁面中的「從機通信測試」。",
+    "testAria2": "測試 Aria2 通信",
+    "aria2DocURL": "https://docs.cloudreve.org/use/aria2",
+    "nameNode": "為此節點命名：",
+    "loadBalancerRankDes": "為此節點指定負載均衡權重，數值為整數。某些負載均衡策略會根據此數值加權選擇節點",
+    "loadBalancerRank": "負載均衡權重",
+    "nodeSaved": "節點已儲存！",
+    "nodeSavedFutureAction": "如果您新增了新節點，還需要在節點列表手動啟動節點才能正常使用。",
+    "backToNodeList": "返回節點列表",
+    "communication": "通信配置",
+    "otherSettings": "雜項訊息",
+    "finish": "完成",
+    "nodeAdded": "節點已新增",
+    "nodeSavedNow": "節點已儲存",
+    "editNode": "編輯節點",
+    "addNode": "新增節點"
+  },
+  "group": {
+    "#": "#",
+    "name": "名稱",
+    "type": "儲存策略",
+    "count": "下屬用戶數",
+    "size": "最大容量",
+    "action": "操作",
+    "deleted": "用戶組已刪除",
+    "new": "新增用戶組",
+    "aria2FormatError": "Aria2 設置項格式錯誤",
+    "atLeastOnePolicy": "至少要為用戶組選擇一個儲存策略",
+    "added": "用戶組已新增",
+    "saved": "用戶組已儲存",
+    "editGroup": "編輯 {{group}}",
+    "nameOfGroup": "用戶組名",
+    "nameOfGroupDes": "用戶組的名稱",
+    "storagePolicy": "儲存策略",
+    "storageDes": "指定用戶組的儲存策略。",
+    "initialStorageQuota": "初始容量",
+    "initialStorageQuotaDes": "用戶組下的用戶初始可用最大容量",
+    "downloadSpeedLimit": "下載限速",
+    "downloadSpeedLimitDes": "填寫為 0 表示不限制。開啟限制後，此用戶組下的用戶下載所有支援限速的儲存策略下的文件時，下載最大速度會被限制。",
+    "bathSourceLinkLimit": "批次生成外鏈數量限制",
+    "bathSourceLinkLimitDes": "對於支援的儲存策略下的文件，允許用戶單次批次獲取外鏈的最大文件數量，填寫為 0 表示不允許批次生成外鏈。",
+    "allowCreateShareLink": "允許建立分享",
+    "allowCreateShareLinkDes": "關閉後，用戶無法建立分享連結",
+    "allowDownloadShare": "允許下載分享",
+    "allowDownloadShareDes": "關閉後，用戶無法下載別人建立的文件分享",
+    "allowWabDAV": "WebDAV",
+    "allowWabDAVDes": "關閉後，用戶無法透過 WebDAV 協議連接至網路硬碟",
+    "allowWabDAVProxy": "WebDAV 代理",
+    "allowWabDAVProxyDes": "啓用後, 用戶可以配置 WebDAV 代理下載文件的流量",
+    "disableMultipleDownload": "禁止多次下載請求",
+    "disableMultipleDownloadDes": "只針對本機儲存策略有效。開啟後，用戶無法使用多執行緒下載工具。",
+    "allowRemoteDownload": "離線下載",
+    "allowRemoteDownloadDes": "是否允許用戶建立離線下載任務",
+    "aria2Options": "Aria2 任務參數",
+    "aria2OptionsDes": "此用戶組建立離線下載任務時額外攜帶的參數，以 JSON 編碼後的格式書寫，您可也可以將這些設定寫在 Aria2 配置文件裡，可用參數請查閱官方文件",
+    "aria2BatchSize": "Aria2 批次下載最大數量",
+    "aria2BatchSizeDes": "允許用戶同時進行的離線下載任務數量，填寫為 0 或留空表示不限制。",
+    "serverSideBatchDownload": "服務端打包下載",
+    "serverSideBatchDownloadDes": "是否允許用戶多選文件使用服務端中轉打包下載，關閉後，用戶仍然可以使用純  Web 端打包下載功能。",
+    "compressTask": "壓縮/解壓縮 任務",
+    "compressTaskDes": "是否用戶建立 壓縮/解壓縮 任務",
+    "compressSize": "待壓縮文件最大大小",
+    "compressSizeDes": "用戶可建立的壓縮任務的文件最大總大小，填寫為 0 表示不限制",
+    "decompressSize": "待解壓文件最大大小",
+    "decompressSizeDes": "用戶可建立的解壓縮任務的文件最大總大小，填寫為 0 表示不限制",
+    "redirectedSource": "使用重定向的外鏈",
+    "redirectedSourceDes": "開啟後，用戶獲取的文件外鏈將由 Cloudreve 中轉，連結較短。關閉後，用戶獲取的文件外鏈會變成文件的原始連結。部分儲存策略獲取的非中轉外鏈無法保持永久有效，請參閱 <0>比較儲存策略</0>。",
+    "advanceDelete": "允許使用高級文件刪除選項",
+    "advanceDeleteDes": "開啓後，用戶在前臺刪除文件時可以選擇是否強制刪除、是否僅解除物理連結。這些選項與後臺管理面板刪除文件時類似，請只開放給可信用戶組。"
+  },
+  "user": {
+    "deleted": "用戶已刪除",
+    "new": "新增用戶",
+    "filter": "過濾",
+    "selectedObjects": "已選擇 {{num}} 個對象",
+    "nick": "暱稱",
+    "email": "Email",
+    "group": "用戶組",
+    "status": "狀態",
+    "usedStorage": "已用空間",
+    "active": "正常",
+    "notActivated": "未啟用",
+    "banned": "被封禁",
+    "bannedBySys": "超額封禁",
+    "toggleBan": "封禁/解封",
+    "filterCondition": "過濾條件",
+    "all": "全部",
+    "userStatus": "用戶狀態",
+    "searchNickUserName": "搜尋 暱稱 / 使用者名稱",
+    "apply": "應用",
+    "added": "用戶已新增",
+    "saved": "用戶已儲存",
+    "editUser": "編輯 {{nick}}",
+    "password": "密碼",
+    "passwordDes": "留空表示不修改",
+    "groupDes": "用戶所屬用戶組",
+    "2FASecret": "二步驗證金鑰",
+    "2FASecretDes": "用戶二步驗證器的金鑰，清空表示未啟用。"
+  },
+  "file": {
+    "name": "檔案名",
+    "deleteAsync": "刪除任務將在後台執行",
+    "import": "從外部匯入",
+    "forceDelete": "強制刪除",
+    "size": "大小",
+    "uploader": "上傳者",
+    "createdAt": "建立於",
+    "uploading": "上傳中",
+    "unknownUploader": "未知",
+    "uploaderID": "上傳者 ID",
+    "searchFileName": "搜尋檔案名",
+    "storagePolicy": "儲存策略",
+    "selectTargetUser": "請先選擇目標用戶",
+    "importTaskCreated": "匯入任務已建立，您可以在「持久任務」中查看執行情況",
+    "manuallyPathOnly": "選擇的儲存策略只支援手動輸入路徑",
+    "selectFolder": "選擇目錄",
+    "importExternalFolder": "匯入外部目錄",
+    "importExternalFolderDes": "您可以將儲存策略中已有文件、目錄結構匯入到 Cloudreve 中，匯入操作不會額外占用物理儲存空間，但仍會正常扣除用戶已用容量空間，空間不足時將停止匯入。",
+    "storagePolicyDes": "選擇要匯入文件目前儲存所在的儲存策略",
+    "targetUser": "目標用戶",
+    "targetUserDes": "選擇要將文件匯入到哪個用戶的文件系統中，可透過暱稱、信箱搜尋用戶",
+    "srcFolderPath": "原始目錄路徑",
+    "select": "選擇",
+    "selectSrcDes": "要匯入的目錄在儲存端的路徑",
+    "dstFolderPath": "目的目錄路徑",
+    "dstFolderPathDes": "要將目錄匯入到用戶文件系統中的路徑",
+    "recursivelyImport": "遞迴匯入子目錄",
+    "recursivelyImportDes": "是否將目錄下的所有子目錄遞迴匯入",
+    "createImportTask": "建立匯入任務",
+    "unlink": "解除關聯（保留物理文件）"
+  },
+  "share": {
+    "deleted": "分享已刪除",
+    "objectName": "對象名",
+    "views": "瀏覽",
+    "downloads": "下載",
+    "price": "積分",
+    "autoExpire": "自動過期",
+    "owner": "分享者",
+    "createdAt": "分享於",
+    "public": "公開",
+    "private": "私密",
+    "afterNDownloads":"{{num}} 次下載後",
+    "none": "無",
+    "srcType": "源文件類型",
+    "folder": "目錄",
+    "file": "文件"
+  },
+  "task": {
+    "taskDeleted": "任務已刪除",
+    "howToConfigAria2": "如何配置離線下載？",
+    "srcURL": "源地址",
+    "node": "處理節點",
+    "createdBy": "建立者",
+    "ready": "就緒",
+    "downloading": "下載中",
+    "paused": "暫停中",
+    "seeding": "做種中",
+    "error": "出錯",
+    "finished": "完成",
+    "canceled": "取消/停止",
+    "unknown": "未知",
+    "aria2Des": "Cloudreve 的離線下載支援主從分散模式。您可以配置多個 Cloudreve 從機節點，這些節點可以用來處理離線下載任務，分散主節點的壓力。當然，您也可以配置只在主節點上處理離線下載任務，這是最簡單的一種方式。",
+    "masterAria2Des": "如果您只需要為主機啟用離線下載功能，請 <0>點擊這裡</0> 編輯主節點；",
+    "slaveAria2Des": "如果您想要在從機節點上分散處理離線下載任務，請 <0>點擊這裡</0> 新增並配置新節點。",
+    "editGroupDes": "當你新增多個可用於離線下載的節點後，主節點會將離線下載請求輪流發送到這些節點處理。節點離線下載配置完成後，您可能還需要 <0>到這裡</0> 編輯用戶組，為對應用戶組開啟離線下載權限。",
+    "lastProgress": "最後進度",
+    "errorMsg": "錯誤訊息"
+  },
+  "vas": {
+    "vas": "增值服務",
+    "reports": "舉報",
+    "orders": "訂單",
+    "initialFiles": "初始文件",
+    "initialFilesDes": "指定用戶註冊後初始擁有的文件。輸入文件 ID 搜索並添加現有文件。",
+    "filterEmailProvider": "郵箱過濾",
+    "filterEmailProviderDisabled": "不啓用",
+    "filterEmailProviderWhitelist": "白名單",
+    "filterEmailProviderBlacklist": "黑名單",
+    "filterEmailProviderDes": "過濾註冊郵箱域",
+    "filterEmailProviderRule": "郵箱域過濾規則",
+    "filterEmailProviderRuleDes": "多個域請使用半角逗號隔開",
+    "qqConnect": "QQ互聯",
+    "qqConnectHint": "創建應用時，回調地址請填寫：{{url}}",
+    "enableQQConnect": "開啓QQ互聯",
+    "enableQQConnectDes": "是否允許綁定QQ、使用QQ登錄本站",
+    "loginWithoutBinding": "未綁定時可直接登錄",
+    "loginWithoutBindingDes": "開啓後，如果用戶使用了QQ登錄，但是沒有已綁定的註冊用戶，系統會爲其創建用戶並登錄。這種方式創建的用戶日後只能使用QQ登錄。",
+    "appid": "APP ID",
+    "appidDes": "應用管理頁面獲取到的的 APP ID",
+    "appKey": "APP KEY",
+    "appKeyDes": "應用管理頁面獲取到的的 APP KEY",
+    "overuseReminder": "超額提醒",
+    "overuseReminderDes": "用戶因增值服務過期，容量超出限制後發送的提醒郵件模板",
+    "vasSetting": "支付/雜項設置",
+    "storagePack": "容量包",
+    "purchasableGroups": "可購用戶組",
+    "giftCodes": "兌換碼",
+    "alipay": "支付寶當面付",
+    "enable": "開啓",
+    "appID": "App- ID",
+    "appIDDes": "當面付應用的 APPID",
+    "rsaPrivate": "RSA 應用私鑰",
+    "rsaPrivateDes": "當面付應用的 RSA2 (SHA256)  私鑰，一般是由您自己生成。詳情參考 <0>生成 RSA 密鑰</0>。",
+    "alipayPublicKey": "支付寶公鑰",
+    "alipayPublicKeyDes": "由支付寶提供，可在 應用管理 - 應用信息 - 接口加簽方式 中獲取。",
+    "wechatPay": "微信官方掃碼支付",
+    "applicationID": "應用 ID",
+    "applicationIDDes": "直連商戶申請的公衆號或移動應用appid",
+    "merchantID": "直連商戶號",
+    "merchantIDDes": "直連商戶的商戶號，由微信支付生成並下發。",
+    "apiV3Secret": "API v3 密鑰",
+    "apiV3SecretDes": "商戶需先在【商戶平臺】-【API安全】的頁面設置該密鑰，請求才能通過微信支付的簽名校驗。密鑰的長度爲 32 個字節。",
+    "mcCertificateSerial": "商戶證書序列號",
+    "mcCertificateSerialDes": "登錄商戶平臺【API安全】-【API證書】-【查看證書】，可查看商戶 API 證書序列號。",
+    "mcAPISecret": "商戶API 私鑰",
+    "mcAPISecretDes": "私鑰文件 apiclient_key.pem 的內容。",
+    "payjs": "PAYJS 微信支付",
+    "payjsWarning": "此服務由第三方平臺 <0>PAYJS</0> 提供， 產生的任何糾紛與 Cloudreve 開發者無關。",
+    "mcNumber": "商戶號",
+    "mcNumberDes": "可在 PAYJS 管理面板首頁看到",
+    "communicationSecret": "通信密鑰",
+    "otherSettings": "雜項設置",
+    "banBufferPeriod": "封禁緩衝期 (秒)",
+    "banBufferPeriodDes": "用戶保持容量超額狀態的最長時長，超出時長該用戶會被系統凍結。",
+    "allowSellShares": "允許爲分享定價",
+    "allowSellSharesDes": "開啓後，用戶可爲分享設定積分價格，下載需要扣除積分。",
+    "creditPriceRatio": "積分到賬比率 (%)",
+    "creditPriceRatioDes": "購買下載設定價格的分享，分享者實際到賬的積分比率。",
+    "creditPrice": "積分價格 (分)",
+    "creditPriceDes": "充值積分時的價格",
+    "allowReportShare": "允許舉報分享",
+    "allowReportShareDes": "開啟後，任意用戶可對分享進行檢舉，有資料庫被填滿的風險",
+    "add": "添加",
+    "name": "名稱",
+    "price": "單價",
+    "duration": "時長",
+    "size": "大小",
+    "actions": "操作",
+    "orCredits": " 或 {{num}} 積分",
+    "highlight": "突出展示",
+    "yes": "是",
+    "no": "否",
+    "productName": "商品名",
+    "qyt": "數量",
+    "code": "兌換碼",
+    "status": "狀態",
+    "invalidProduct": "已失效商品",
+    "used": "已使用",
+    "notUsed": "未使用",
+    "generatingResult": "生成結果",
+    "addStoragePack": "添加容量包",
+    "editStoragePack": "編輯容量包",
+    "productNameDes": "商品展示名稱",
+    "packSizeDes": "容量包的大小",
+    "durationDay": "有效期 (天)",
+    "durationDayDes": "每個容量包的有效期",
+    "priceYuan": "單價 (元)",
+    "packPriceDes": "容量包的單價",
+    "priceCredits": "單價 (積分)",
+    "priceCreditsDes": "使用積分購買時的價格，填寫爲 0 表示不能使用積分購買",
+    "editMembership": "編輯可購用戶組",
+    "addMembership": "添加可購用戶組",
+    "group": "用戶組",
+    "groupDes": "購買後升級的用戶組",
+    "durationGroupDes": "購買後升級的用戶組單位購買時間的有效期",
+    "groupPriceDes": "用戶組的單價",
+    "productDescription": "商品描述 (一行一個)",
+    "productDescriptionDes": "購買頁面展示的商品描述",
+    "highlightDes": "開啓後，在商品選擇頁面會被突出展示",
+    "generateGiftCode": "生成兌換碼",
+    "numberOfCodes": "生成數量",
+    "numberOfCodesDes": "激活碼批量生成數量",
+    "linkedProduct": "對應商品",
+    "productQyt": "商品數量",
+    "productQytDes": "對於積分類商品，此處爲積分數量，其他商品爲時長倍數",
+    "freeDownload": "免積分下載分享",
+    "freeDownloadDes": "開啓後，用戶可以免費下載需付積分的分享",
+    "credits": "積分",
+    "markSuccessful": "標記成功",
+    "markAsResolved": "標記爲已處理",
+    "reportedContent": "舉報對象",
+    "reason": "原因",
+    "description": "補充描述",
+    "reportTime": "舉報時間",
+    "invalid": "[已失效]",
+    "deleteShare": "刪除分享",
+    "orderDeleted": "訂單記錄已刪除",
+    "orderName": "訂單名",
+    "product": "商品",
+    "orderNumber": "訂單號",
+    "paidBy": "支付方式",
+    "orderOwner": "創建者",
+    "unpaid": "未支付",
+    "paid": "已支付",
+    "shareLink": "分享鏈接",
+    "volPurchase": "客戶端 VOL 授權需要單獨在 <0>授權管理面板</0> 購買。VOL 授權允許您的用戶免費使用 <1>Cloudreve iOS 客戶端</1> 連接到您的站點，無需用戶再付費訂閱 iOS 客戶端。購買授權後請點擊下方同步授權。",
+    "iosVol": "iOS 客戶端批量授權 (VOL)",
+    "mobileApp": "移動客戶端",
+    "syncLicense": "同步授權",
+    "volSynced": "VOL 授權已同步",
+    "showAppPromotion": "展示客戶端引導頁面",
+    "showAppPromotionDes": "開啓後，用戶可以在 “連接與掛載” 頁面中看到移動客戶端的使用引導",
+    "customPayment": "自定義付款渠道",
+    "customPaymentDes":"通過實現 Cloudreve 兼容付款接口來對接其他第三方支付平臺，詳情請參考 <0>官方文檔</0>。",
+    "customPaymentDocumentLink":"https://docs.cloudreve.org/use/pro/pay",
+    "customPaymentName": "付款方式名稱",
+    "customPaymentNameDes": "用於展示給用戶的付款方式名稱",
+    "customPaymentSecretDes": "Cloudreve 用於簽名付款請求的密鑰",
+    "customPaymentEndpoint":"支付接口地址",
+    "customPaymentEndpointDes":"創建支付訂單時請求的接口 URL",
+    "appFeedback": "反饋頁面 URL",
+    "appForum": "用戶論壇 URL",
+    "appLinkDes": "用於在 App 設置頁面展示，留空即不展示鏈接按鈕，僅當 VOL 授權有效時此項設置纔會生效。"
+  }
+}
diff --git a/public/static/img/appstore.svg b/public/static/img/appstore.svg
new file mode 100644
index 0000000..072b425
--- /dev/null
+++ b/public/static/img/appstore.svg
@@ -0,0 +1,46 @@
+<svg id="livetype" xmlns="http://www.w3.org/2000/svg" width="119.66407" height="40" viewBox="0 0 119.66407 40">
+  <title>Download_on_the_App_Store_Badge_US-UK_RGB_blk_4SVG_092917</title>
+  <g>
+    <g>
+      <g>
+        <path d="M110.13477,0H9.53468c-.3667,0-.729,0-1.09473.002-.30615.002-.60986.00781-.91895.0127A13.21476,13.21476,0,0,0,5.5171.19141a6.66509,6.66509,0,0,0-1.90088.627A6.43779,6.43779,0,0,0,1.99757,1.99707,6.25844,6.25844,0,0,0,.81935,3.61816a6.60119,6.60119,0,0,0-.625,1.90332,12.993,12.993,0,0,0-.1792,2.002C.00587,7.83008.00489,8.1377,0,8.44434V31.5586c.00489.3105.00587.6113.01515.9219a12.99232,12.99232,0,0,0,.1792,2.0019,6.58756,6.58756,0,0,0,.625,1.9043A6.20778,6.20778,0,0,0,1.99757,38.001a6.27445,6.27445,0,0,0,1.61865,1.1787,6.70082,6.70082,0,0,0,1.90088.6308,13.45514,13.45514,0,0,0,2.0039.1768c.30909.0068.6128.0107.91895.0107C8.80567,40,9.168,40,9.53468,40H110.13477c.3594,0,.7246,0,1.084-.002.3047,0,.6172-.0039.9219-.0107a13.279,13.279,0,0,0,2-.1768,6.80432,6.80432,0,0,0,1.9082-.6308,6.27742,6.27742,0,0,0,1.6172-1.1787,6.39482,6.39482,0,0,0,1.1816-1.6143,6.60413,6.60413,0,0,0,.6191-1.9043,13.50643,13.50643,0,0,0,.1856-2.0019c.0039-.3106.0039-.6114.0039-.9219.0078-.3633.0078-.7246.0078-1.0938V9.53613c0-.36621,0-.72949-.0078-1.09179,0-.30664,0-.61426-.0039-.9209a13.5071,13.5071,0,0,0-.1856-2.002,6.6177,6.6177,0,0,0-.6191-1.90332,6.46619,6.46619,0,0,0-2.7988-2.7998,6.76754,6.76754,0,0,0-1.9082-.627,13.04394,13.04394,0,0,0-2-.17676c-.3047-.00488-.6172-.01074-.9219-.01269-.3594-.002-.7246-.002-1.084-.002Z" style="fill: #a6a6a6"/>
+        <path d="M8.44483,39.125c-.30468,0-.602-.0039-.90429-.0107a12.68714,12.68714,0,0,1-1.86914-.1631,5.88381,5.88381,0,0,1-1.65674-.5479,5.40573,5.40573,0,0,1-1.397-1.0166,5.32082,5.32082,0,0,1-1.02051-1.3965,5.72186,5.72186,0,0,1-.543-1.6572,12.41351,12.41351,0,0,1-.1665-1.875c-.00634-.2109-.01464-.9131-.01464-.9131V8.44434S.88185,7.75293.8877,7.5498a12.37039,12.37039,0,0,1,.16553-1.87207,5.7555,5.7555,0,0,1,.54346-1.6621A5.37349,5.37349,0,0,1,2.61183,2.61768,5.56543,5.56543,0,0,1,4.01417,1.59521a5.82309,5.82309,0,0,1,1.65332-.54394A12.58589,12.58589,0,0,1,7.543.88721L8.44532.875H111.21387l.9131.0127a12.38493,12.38493,0,0,1,1.8584.16259,5.93833,5.93833,0,0,1,1.6709.54785,5.59374,5.59374,0,0,1,2.415,2.41993,5.76267,5.76267,0,0,1,.5352,1.64892,12.995,12.995,0,0,1,.1738,1.88721c.0029.2832.0029.5874.0029.89014.0079.375.0079.73193.0079,1.09179V30.4648c0,.3633,0,.7178-.0079,1.0752,0,.3252,0,.6231-.0039.9297a12.73126,12.73126,0,0,1-.1709,1.8535,5.739,5.739,0,0,1-.54,1.67,5.48029,5.48029,0,0,1-1.0156,1.3857,5.4129,5.4129,0,0,1-1.3994,1.0225,5.86168,5.86168,0,0,1-1.668.5498,12.54218,12.54218,0,0,1-1.8692.1631c-.2929.0068-.5996.0107-.8974.0107l-1.084.002Z"/>
+      </g>
+      <g id="_Group_" data-name="&lt;Group&gt;">
+        <g id="_Group_2" data-name="&lt;Group&gt;">
+          <g id="_Group_3" data-name="&lt;Group&gt;">
+            <path id="_Path_" data-name="&lt;Path&gt;" d="M24.76888,20.30068a4.94881,4.94881,0,0,1,2.35656-4.15206,5.06566,5.06566,0,0,0-3.99116-2.15768c-1.67924-.17626-3.30719,1.00483-4.1629,1.00483-.87227,0-2.18977-.98733-3.6085-.95814a5.31529,5.31529,0,0,0-4.47292,2.72787c-1.934,3.34842-.49141,8.26947,1.3612,10.97608.9269,1.32535,2.01018,2.8058,3.42763,2.7533,1.38706-.05753,1.9051-.88448,3.5794-.88448,1.65876,0,2.14479.88448,3.591.8511,1.48838-.02416,2.42613-1.33124,3.32051-2.66914a10.962,10.962,0,0,0,1.51842-3.09251A4.78205,4.78205,0,0,1,24.76888,20.30068Z" style="fill: #fff"/>
+            <path id="_Path_2" data-name="&lt;Path&gt;" d="M22.03725,12.21089a4.87248,4.87248,0,0,0,1.11452-3.49062,4.95746,4.95746,0,0,0-3.20758,1.65961,4.63634,4.63634,0,0,0-1.14371,3.36139A4.09905,4.09905,0,0,0,22.03725,12.21089Z" style="fill: #fff"/>
+          </g>
+        </g>
+        <g>
+          <path d="M42.30227,27.13965h-4.7334l-1.13672,3.35645H34.42727l4.4834-12.418h2.083l4.4834,12.418H43.438ZM38.0591,25.59082h3.752l-1.84961-5.44727h-.05176Z" style="fill: #fff"/>
+          <path d="M55.15969,25.96973c0,2.81348-1.50586,4.62109-3.77832,4.62109a3.0693,3.0693,0,0,1-2.84863-1.584h-.043v4.48438h-1.8584V21.44238H48.4302v1.50586h.03418a3.21162,3.21162,0,0,1,2.88281-1.60059C53.645,21.34766,55.15969,23.16406,55.15969,25.96973Zm-1.91016,0c0-1.833-.94727-3.03809-2.39258-3.03809-1.41992,0-2.375,1.23047-2.375,3.03809,0,1.82422.95508,3.0459,2.375,3.0459C52.30227,29.01563,53.24953,27.81934,53.24953,25.96973Z" style="fill: #fff"/>
+          <path d="M65.12453,25.96973c0,2.81348-1.50586,4.62109-3.77832,4.62109a3.0693,3.0693,0,0,1-2.84863-1.584h-.043v4.48438h-1.8584V21.44238H58.395v1.50586h.03418A3.21162,3.21162,0,0,1,61.312,21.34766C63.60988,21.34766,65.12453,23.16406,65.12453,25.96973Zm-1.91016,0c0-1.833-.94727-3.03809-2.39258-3.03809-1.41992,0-2.375,1.23047-2.375,3.03809,0,1.82422.95508,3.0459,2.375,3.0459C62.26711,29.01563,63.21438,27.81934,63.21438,25.96973Z" style="fill: #fff"/>
+          <path d="M71.71047,27.03613c.1377,1.23145,1.334,2.04,2.96875,2.04,1.56641,0,2.69336-.80859,2.69336-1.91895,0-.96387-.67969-1.541-2.28906-1.93652l-1.60937-.3877c-2.28027-.55078-3.33887-1.61719-3.33887-3.34766,0-2.14258,1.86719-3.61426,4.51855-3.61426,2.624,0,4.42285,1.47168,4.4834,3.61426h-1.876c-.1123-1.23926-1.13672-1.9873-2.63379-1.9873s-2.52148.75684-2.52148,1.8584c0,.87793.6543,1.39453,2.25488,1.79l1.36816.33594c2.54785.60254,3.60645,1.626,3.60645,3.44238,0,2.32324-1.85059,3.77832-4.79395,3.77832-2.75391,0-4.61328-1.4209-4.7334-3.667Z" style="fill: #fff"/>
+          <path d="M83.34621,19.2998v2.14258h1.72168v1.47168H83.34621v4.99121c0,.77539.34473,1.13672,1.10156,1.13672a5.80752,5.80752,0,0,0,.61133-.043v1.46289a5.10351,5.10351,0,0,1-1.03223.08594c-1.833,0-2.54785-.68848-2.54785-2.44434V22.91406H80.16262V21.44238H81.479V19.2998Z" style="fill: #fff"/>
+          <path d="M86.065,25.96973c0-2.84863,1.67773-4.63867,4.29395-4.63867,2.625,0,4.29492,1.79,4.29492,4.63867,0,2.85645-1.66113,4.63867-4.29492,4.63867C87.72609,30.6084,86.065,28.82617,86.065,25.96973Zm6.69531,0c0-1.9541-.89551-3.10742-2.40137-3.10742s-2.40039,1.16211-2.40039,3.10742c0,1.96191.89453,3.10645,2.40039,3.10645S92.76027,27.93164,92.76027,25.96973Z" style="fill: #fff"/>
+          <path d="M96.18606,21.44238h1.77246v1.541h.043a2.1594,2.1594,0,0,1,2.17773-1.63574,2.86616,2.86616,0,0,1,.63672.06934v1.73828a2.59794,2.59794,0,0,0-.835-.1123,1.87264,1.87264,0,0,0-1.93652,2.083v5.37012h-1.8584Z" style="fill: #fff"/>
+          <path d="M109.3843,27.83691c-.25,1.64355-1.85059,2.77148-3.89844,2.77148-2.63379,0-4.26855-1.76465-4.26855-4.5957,0-2.83984,1.64355-4.68164,4.19043-4.68164,2.50488,0,4.08008,1.7207,4.08008,4.46582v.63672h-6.39453v.1123a2.358,2.358,0,0,0,2.43555,2.56445,2.04834,2.04834,0,0,0,2.09082-1.27344Zm-6.28223-2.70215h4.52637a2.1773,2.1773,0,0,0-2.2207-2.29785A2.292,2.292,0,0,0,103.10207,25.13477Z" style="fill: #fff"/>
+        </g>
+      </g>
+    </g>
+    <g id="_Group_4" data-name="&lt;Group&gt;">
+      <g>
+        <path d="M37.82619,8.731a2.63964,2.63964,0,0,1,2.80762,2.96484c0,1.90625-1.03027,3.002-2.80762,3.002H35.67092V8.731Zm-1.22852,5.123h1.125a1.87588,1.87588,0,0,0,1.96777-2.146,1.881,1.881,0,0,0-1.96777-2.13379h-1.125Z" style="fill: #fff"/>
+        <path d="M41.68068,12.44434a2.13323,2.13323,0,1,1,4.24707,0,2.13358,2.13358,0,1,1-4.24707,0Zm3.333,0c0-.97607-.43848-1.54687-1.208-1.54687-.77246,0-1.207.5708-1.207,1.54688,0,.98389.43457,1.55029,1.207,1.55029C44.57522,13.99463,45.01369,13.42432,45.01369,12.44434Z" style="fill: #fff"/>
+        <path d="M51.57326,14.69775h-.92187l-.93066-3.31641h-.07031l-.92676,3.31641h-.91309l-1.24121-4.50293h.90137l.80664,3.436h.06641l.92578-3.436h.85254l.92578,3.436h.07031l.80273-3.436h.88867Z" style="fill: #fff"/>
+        <path d="M53.85354,10.19482H54.709v.71533h.06641a1.348,1.348,0,0,1,1.34375-.80225,1.46456,1.46456,0,0,1,1.55859,1.6748v2.915h-.88867V12.00586c0-.72363-.31445-1.0835-.97168-1.0835a1.03294,1.03294,0,0,0-1.0752,1.14111v2.63428h-.88867Z" style="fill: #fff"/>
+        <path d="M59.09377,8.437h.88867v6.26074h-.88867Z" style="fill: #fff"/>
+        <path d="M61.21779,12.44434a2.13346,2.13346,0,1,1,4.24756,0,2.1338,2.1338,0,1,1-4.24756,0Zm3.333,0c0-.97607-.43848-1.54687-1.208-1.54687-.77246,0-1.207.5708-1.207,1.54688,0,.98389.43457,1.55029,1.207,1.55029C64.11232,13.99463,64.5508,13.42432,64.5508,12.44434Z" style="fill: #fff"/>
+        <path d="M66.4009,13.42432c0-.81055.60352-1.27783,1.6748-1.34424l1.21973-.07031v-.38867c0-.47559-.31445-.74414-.92187-.74414-.49609,0-.83984.18213-.93848.50049h-.86035c.09082-.77344.81836-1.26953,1.83984-1.26953,1.12891,0,1.76563.562,1.76563,1.51318v3.07666h-.85547v-.63281h-.07031a1.515,1.515,0,0,1-1.35254.707A1.36026,1.36026,0,0,1,66.4009,13.42432Zm2.89453-.38477v-.37646l-1.09961.07031c-.62012.0415-.90137.25244-.90137.64941,0,.40527.35156.64111.835.64111A1.0615,1.0615,0,0,0,69.29543,13.03955Z" style="fill: #fff"/>
+        <path d="M71.34816,12.44434c0-1.42285.73145-2.32422,1.86914-2.32422a1.484,1.484,0,0,1,1.38086.79h.06641V8.437h.88867v6.26074h-.85156v-.71143h-.07031a1.56284,1.56284,0,0,1-1.41406.78564C72.0718,14.772,71.34816,13.87061,71.34816,12.44434Zm.918,0c0,.95508.4502,1.52979,1.20313,1.52979.749,0,1.21191-.583,1.21191-1.52588,0-.93848-.46777-1.52979-1.21191-1.52979C72.72121,10.91846,72.26613,11.49707,72.26613,12.44434Z" style="fill: #fff"/>
+        <path d="M79.23,12.44434a2.13323,2.13323,0,1,1,4.24707,0,2.13358,2.13358,0,1,1-4.24707,0Zm3.333,0c0-.97607-.43848-1.54687-1.208-1.54687-.77246,0-1.207.5708-1.207,1.54688,0,.98389.43457,1.55029,1.207,1.55029C82.12453,13.99463,82.563,13.42432,82.563,12.44434Z" style="fill: #fff"/>
+        <path d="M84.66945,10.19482h.85547v.71533h.06641a1.348,1.348,0,0,1,1.34375-.80225,1.46456,1.46456,0,0,1,1.55859,1.6748v2.915H87.605V12.00586c0-.72363-.31445-1.0835-.97168-1.0835a1.03294,1.03294,0,0,0-1.0752,1.14111v2.63428h-.88867Z" style="fill: #fff"/>
+        <path d="M93.51516,9.07373v1.1416h.97559v.74854h-.97559V13.2793c0,.47168.19434.67822.63672.67822a2.96657,2.96657,0,0,0,.33887-.02051v.74023a2.9155,2.9155,0,0,1-.4834.04541c-.98828,0-1.38184-.34766-1.38184-1.21582v-2.543h-.71484v-.74854h.71484V9.07373Z" style="fill: #fff"/>
+        <path d="M95.70461,8.437h.88086v2.48145h.07031a1.3856,1.3856,0,0,1,1.373-.80664,1.48339,1.48339,0,0,1,1.55078,1.67871v2.90723H98.69v-2.688c0-.71924-.335-1.0835-.96289-1.0835a1.05194,1.05194,0,0,0-1.13379,1.1416v2.62988h-.88867Z" style="fill: #fff"/>
+        <path d="M104.76125,13.48193a1.828,1.828,0,0,1-1.95117,1.30273A2.04531,2.04531,0,0,1,100.73,12.46045a2.07685,2.07685,0,0,1,2.07617-2.35254c1.25293,0,2.00879.856,2.00879,2.27V12.688h-3.17969v.0498a1.1902,1.1902,0,0,0,1.19922,1.29,1.07934,1.07934,0,0,0,1.07129-.5459Zm-3.126-1.45117h2.27441a1.08647,1.08647,0,0,0-1.1084-1.1665A1.15162,1.15162,0,0,0,101.63527,12.03076Z" style="fill: #fff"/>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/public/static/img/cloudreve.svg b/public/static/img/cloudreve.svg
new file mode 100644
index 0000000..0a2c6c1
--- /dev/null
+++ b/public/static/img/cloudreve.svg
@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 1835 1835" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(1,0,0,1,-273.621,-509.404)">
+        <g>
+            <g transform="matrix(1,0,0,1,-199.902,-92.5177)">
+                <circle cx="1390.62" cy="1519.02" r="713.784" style="fill:white;"/>
+                <path d="M1392.1,601.923L1393.57,601.926L1395.04,601.932L1396.53,601.94L1398,601.951L1399.47,601.964L1400.94,601.979L1402.42,601.996L1403.89,602.016L1405.37,602.038L1406.84,602.063L1408.31,602.09L1409.78,602.119L1411.25,602.15L1412.72,602.184L1414.19,602.22L1415.66,602.259L1417.13,602.299L1418.6,602.343L1420.07,602.388L1421.53,602.436L1422.99,602.486L1424.46,602.538L1425.93,602.593L1427.4,602.65L1428.86,602.709L1430.32,602.77L1431.79,602.834L1433.25,602.9L1434.71,602.969L1436.18,603.04L1437.63,603.112L1439.09,603.188L1440.56,603.265L1442.02,603.346L1443.48,603.428L1444.93,603.512L1446.4,603.599L1447.85,603.688L1449.31,603.779L1450.77,603.873L1452.22,603.969L1453.68,604.067L1455.13,604.167L1456.59,604.27L1458.04,604.375L1459.5,604.483L1460.95,604.592L1462.41,604.704L1463.85,604.818L1465.31,604.934L1466.76,605.053L1468.21,605.174L1469.66,605.297L1471.11,605.423L1472.55,605.55L1474,605.68L1475.45,605.813L1476.9,605.947L1478.34,606.083L1479.79,606.222L1481.24,606.364L1482.68,606.507L1484.12,606.652L1485.57,606.801L1487.01,606.951L1488.45,607.103L1489.9,607.258L1491.34,607.415L1492.78,607.574L1494.21,607.735L1495.66,607.899L1497.1,608.065L1498.53,608.233L1499.97,608.403L1501.4,608.575L1502.84,608.75L1504.28,608.927L1505.72,609.107L1507.14,609.288L1508.58,609.471L1510.02,609.658L1511.44,609.845L1512.87,610.035L1514.31,610.228L1515.74,610.423L1517.17,610.619L1518.6,610.819L1520.03,611.02L1521.45,611.223L1522.88,611.429L1524.31,611.637L1525.73,611.847L1527.16,612.059L1528.58,612.274L1530.01,612.491L1531.43,612.71L1532.85,612.931L1534.27,613.153L1535.69,613.379L1537.12,613.607L1538.54,613.837L1539.95,614.068L1541.37,614.302L1542.79,614.538L1544.21,614.777L1545.63,615.019L1547.04,615.261L1548.45,615.505L1549.87,615.752L1551.28,616.002L1552.69,616.253L1554.11,616.508L1555.51,616.763L1556.93,617.021L1558.34,617.282L1559.74,617.543L1561.15,617.808L1562.56,618.075L1563.97,618.344L1565.38,618.614L1566.78,618.887L1568.18,619.161L1569.59,619.439L1571,619.72L1572.4,620.001L1573.8,620.284L1575.2,620.571L1576.6,620.859L1577.99,621.148L1579.4,621.441L1580.79,621.735L1582.19,622.031L1583.59,622.331L1584.99,622.631L1586.38,622.934L1587.77,623.238L1589.17,623.546L1590.56,623.855L1591.95,624.166L1593.35,624.481L1594.73,624.796L1596.12,625.113L1597.51,625.433L1598.9,625.755L1600.29,626.079L1601.67,626.405L1603.06,626.734L1604.45,627.064L1605.83,627.396L1607.21,627.73L1608.59,628.067L1609.98,628.406L1611.36,628.747L1612.74,629.089L1614.12,629.434L1615.49,629.781L1616.87,630.129L1618.25,630.483L1619.63,630.836L1621,631.19L1622.37,631.547L1623.75,631.907L1625.12,632.268L1626.49,632.631L1627.86,632.998L1629.24,633.366L1630.6,633.735L1631.97,634.107L1633.34,634.48L1634.7,634.857L1636.08,635.236L1637.44,635.615L1638.8,635.996L1640.17,636.382L1641.53,636.768L1642.89,637.155L1644.25,637.547L1645.61,637.938L1646.97,638.331L1648.33,638.73L1649.69,639.128L1651.04,639.528L1652.4,639.931L1653.75,640.335L1655.11,640.742L1656.46,641.151L1657.81,641.561L1659.16,641.973L1660.52,642.389L1661.87,642.806L1663.21,643.224L1664.56,643.644L1665.91,644.067L1667.25,644.491L1668.6,644.919L1669.94,645.348L1671.29,645.778L1672.63,646.211L1673.97,646.646L1675.31,647.084L1676.65,647.522L1677.99,647.962L1679.33,648.404L1680.66,648.85L1682,649.297L1683.34,649.746L1684.67,650.197L1686,650.647L1687.34,651.104L1688.67,651.56L1690,652.018L1691.33,652.48L1692.66,652.943L1693.99,653.408L1695.31,653.874L1696.64,654.342L1697.96,654.813L1699.29,655.285L1700.61,655.76L1701.93,656.235L1703.25,656.714L1704.57,657.195L1705.89,657.676L1707.21,658.161L1708.53,658.647L1709.85,659.137L1711.16,659.627L1712.47,660.117L1713.79,660.611L1715.1,661.107L1716.41,661.606L1717.72,662.106L1719.03,662.607L1720.34,663.111L1721.64,663.615L1722.95,664.124L1724.26,664.634L1725.57,665.145L1726.87,665.657L1728.17,666.173L1729.48,666.693L1730.77,667.21L1732.07,667.73L1733.37,668.254L1734.67,668.78L1735.97,669.306L1737.26,669.832L1738.56,670.364L1739.86,670.9L1741.14,671.432L1742.43,671.966L1743.73,672.507L1745.02,673.047L1746.31,673.589L1747.6,674.134L1748.88,674.68L1750.16,675.225L1751.45,675.775L1752.74,676.328L1754.02,676.879L1755.3,677.434L1756.58,677.994L1757.86,678.553L1759.14,679.114L1760.41,679.675L1761.69,680.24L1762.97,680.808L1764.25,681.377L1765.52,681.946L1766.79,682.516L1768.06,683.092L1769.33,683.669L1770.6,684.247L1771.87,684.827L1773.13,685.405L1774.4,685.989L1775.67,686.575L1776.93,687.163L1778.2,687.752L1779.45,688.342L1780.71,688.933L1781.98,689.529L1783.24,690.126L1784.5,690.725L1785.75,691.324L1787,691.925L1788.26,692.528L1789.51,693.134L1790.77,693.743L1792.02,694.351L1793.27,694.961L1794.51,695.573L1795.76,696.19L1797.01,696.808L1798.25,697.423L1799.5,698.043L1800.75,698.666L1801.99,699.29L1803.23,699.915L1804.47,700.542L1805.71,701.173L1806.95,701.804L1808.18,702.436L1809.42,703.071L1810.65,703.707L1811.89,704.348L1813.12,704.985L1814.35,705.625L1815.58,706.271L1816.81,706.914L1818.04,707.561L1819.27,708.213L1820.5,708.864L1821.72,709.517L1822.94,710.17L1824.16,710.824L1825.39,711.485L1826.61,712.145L1827.83,712.805L1829.04,713.466L1830.26,714.134L1831.48,714.802L1832.69,715.469L1833.9,716.138L1835.12,716.811L1836.33,717.489L1837.54,718.16L1838.74,718.836L1839.95,719.517L1841.16,720.196L1842.37,720.88L1843.57,721.566L1844.78,722.251L1845.98,722.938L1847.18,723.63L1848.38,724.323L1849.57,725.013L1850.77,725.707L1851.97,726.405L1853.17,727.106L1854.36,727.805L1855.55,728.506L1856.74,729.21L1857.93,729.912L1859.13,730.624L1860.31,731.332L1861.49,732.037L1862.69,732.755L1863.88,733.471L1865.05,734.184L1866.23,734.896L1867.41,735.618L1868.6,736.342L1869.77,737.061L1870.95,737.789L1872.13,738.515L1873.3,739.24L1874.48,739.97L1875.65,740.702L1876.82,741.436L1877.99,742.171L1879.16,742.905L1880.32,743.64L1881.5,744.384L1882.66,745.126L1883.82,745.864L1884.98,746.61L1886.15,747.36L1887.32,748.11L1888.47,748.858L1889.63,749.607L1890.79,750.362L1891.94,751.116L1893.09,751.871L1894.25,752.63L1895.4,753.388L1896.55,754.152L1897.7,754.917L1898.85,755.68L1900,756.446L1901.14,757.213L1902.29,757.985L1903.43,758.756L1904.58,759.531L1905.72,760.306L1906.85,761.078L1907.99,761.858L1909.13,762.638L1910.26,763.419L1911.4,764.205L1912.54,764.99L1913.66,765.772L1914.79,766.56L1915.93,767.353L1917.06,768.144L1918.18,768.938L1919.31,769.735L1920.43,770.525L1921.55,771.323L1922.68,772.127L1923.8,772.925L1924.92,773.728L1926.04,774.537L1927.16,775.343L1928.27,776.145L1929.38,776.954L1930.5,777.767L1931.61,778.58L1932.72,779.395L1933.83,780.209L1934.94,781.031L1936.05,781.848L1937.15,782.666L1938.26,783.489L1939.36,784.311L1940.46,785.139L1941.56,785.964L1942.66,786.794L1943.76,787.626L1944.86,788.458L1945.95,789.292L1947.05,790.125L1948.13,790.957L1949.23,791.798L1950.32,792.643L1951.41,793.48L1952.49,794.323L1953.59,795.173L1954.67,796.018L1955.75,796.861L1956.83,797.71L1957.91,798.561L1958.99,799.417L1960.07,800.269L1961.15,801.125L1962.22,801.982L1963.3,802.839L1964.37,803.704L1965.44,804.567L1966.51,805.429L1967.58,806.291L1968.65,807.158L1969.72,808.029L1970.78,808.897L1971.84,809.763L1972.91,810.641L1973.97,811.516L1975.02,812.388L1976.09,813.271L1977.14,814.15L1978.19,815.025L1979.25,815.913L1980.31,816.8L1981.35,817.678L1982.4,818.563L1983.45,819.453L1984.5,820.341L1985.55,821.238L1986.6,822.131L1987.64,823.024L1988.68,823.922L1989.72,824.813L1990.76,825.714L1991.8,826.621L1992.84,827.521L1993.87,828.419L1994.9,829.322L1995.93,830.232L1996.97,831.143L1998,832.055L1999.02,832.962L2000.05,833.872L2001.08,834.789L2002.1,835.708L2003.13,836.628L2004.14,837.539L2005.16,838.457L2006.19,839.387L2007.21,840.311L2008.21,841.225L2009.22,842.152L2010.25,843.088L2011.26,844.018L2012.27,844.946L2013.28,845.879L2014.28,846.81L2015.28,847.74L2016.3,848.685L2017.3,849.624L2018.3,850.561L2019.3,851.502L2020.29,852.44L2021.3,853.39L2022.29,854.333L2023.28,855.28L2024.28,856.229L2025.27,857.177L2026.26,858.134L2027.25,859.087L2028.24,860.039L2029.22,860.993L2030.21,861.95L2031.19,862.907L2032.17,863.87L2033.15,864.829L2034.13,865.793L2035.11,866.761L2036.09,867.727L2037.06,868.695L2038.03,869.661L2039.01,870.635L2039.98,871.604L2040.94,872.575L2041.91,873.553L2042.88,874.529L2043.84,875.501L2044.81,876.484L2045.77,877.465L2046.73,878.447L2047.69,879.431L2048.64,880.413L2049.6,881.402L2050.56,882.39L2051.51,883.38L2052.46,884.368L2053.41,885.36L2054.36,886.354L2055.3,887.343L2056.24,888.339L2057.2,889.343L2058.14,890.343L2059.08,891.34L2060.02,892.342L2060.96,893.349L2061.89,894.348L2062.82,895.355L2063.76,896.369L2064.69,897.372L2065.62,898.379L2066.55,899.397L2067.48,900.411L2068.41,901.423L2069.33,902.439L2070.25,903.453L2071.17,904.469L2072.09,905.49L2073.02,906.518L2073.94,907.544L2074.85,908.563L2075.76,909.588L2076.68,910.615L2077.58,911.638L2078.49,912.671L2079.41,913.706L2080.31,914.736L2081.22,915.77L2082.12,916.806L2083.02,917.839L2083.92,918.881L2084.82,919.921L2085.72,920.959L2086.61,921.998L2087.51,923.045L2088.4,924.09L2089.29,925.133L2090.18,926.181L2091.07,927.231L2091.96,928.284L2092.85,929.336L2093.73,930.386L2094.61,931.441L2095.49,932.497L2096.37,933.548L2097.25,934.613L2098.13,935.676L2099,936.731L2099.87,937.791L2100.74,938.855L2101.61,939.927L2102.48,940.994L2103.34,942.055L2104.21,943.124L2105.07,944.195L2105.94,945.271L2106.8,946.341L2107.66,947.416L2108.51,948.491L2109.37,949.566L2110.22,950.644L2111.07,951.721L2111.93,952.806L2112.78,953.888L2113.63,954.979L2114.47,956.058L2115.31,957.141L2116.16,958.235L2117,959.321L2117.84,960.408L2118.67,961.494L2119.51,962.59L2120.35,963.691L2121.18,964.783L2122.01,965.881L2122.85,966.983L2123.67,968.079L2124.5,969.173L2125.32,970.278L2126.15,971.385L2126.97,972.483L2127.79,973.593L2128.61,974.7L2129.42,975.802L2130.24,976.915L2131.06,978.027L2131.87,979.135L2132.68,980.249L2133.49,981.372L2134.3,982.488L2135.1,983.598L2135.91,984.72L2136.71,985.838L2137.51,986.959L2138.31,988.082L2139.11,989.205L2139.91,990.33L2140.7,991.446L2141.49,992.581L2142.29,993.718L2143.07,994.84L2143.86,995.971L2144.65,997.101L2145.44,998.239L2146.22,999.374L2147,1000.51L2147.78,1001.65L2148.56,1002.78L2149.33,1003.92L2150.11,1005.07L2150.88,1006.2L2151.65,1007.34L2152.42,1008.49L2153.2,1009.65L2153.96,1010.8L2154.72,1011.94L2155.49,1013.09L2156.24,1014.23L2157.01,1015.39L2157.77,1016.55L2158.52,1017.69L2159.28,1018.86L2160.03,1020.01L2160.78,1021.16L2161.53,1022.33L2162.28,1023.49L2163.03,1024.65L2163.77,1025.81L2164.51,1026.97L2165.26,1028.15L2166,1029.32L2166.73,1030.47L2167.47,1031.65L2168.2,1032.82L2168.93,1033.98L2169.67,1035.16L2170.4,1036.34L2171.12,1037.51L2171.85,1038.68L2172.58,1039.87L2173.3,1041.04L2174.02,1042.22L2174.74,1043.41L2175.46,1044.59L2176.17,1045.77L2176.88,1046.95L2177.6,1048.14L2178.31,1049.33L2179.02,1050.52L2179.72,1051.7L2180.43,1052.9L2181.13,1054.08L2181.83,1055.28L2182.54,1056.48L2183.23,1057.66L2183.93,1058.87L2184.62,1060.06L2185.31,1061.25L2186.01,1062.46L2186.7,1063.67L2187.39,1064.86L2188.07,1066.06L2188.76,1067.27L2189.44,1068.48L2190.12,1069.68L2190.8,1070.88L2191.48,1072.11L2192.15,1073.31L2192.82,1074.52L2193.5,1075.74L2194.17,1076.95L2194.84,1078.16L2195.5,1079.38L2196.17,1080.6L2196.83,1081.81L2197.49,1083.03L2198.15,1084.25L2198.81,1085.47L2199.47,1086.7L2200.12,1087.92L2200.77,1089.14L2201.43,1090.37L2202.08,1091.6L2202.72,1092.83L2203.37,1094.06L2204.01,1095.29L2204.65,1096.51L2205.3,1097.75L2205.93,1098.98L2206.57,1100.22L2207.21,1101.46L2207.83,1102.69L2208.46,1103.92L2209.1,1105.17L2209.72,1106.41L2210.35,1107.65L2210.97,1108.9L2211.6,1110.14L2212.22,1111.38L2212.83,1112.62L2213.45,1113.87L2214.06,1115.13L2214.67,1116.37L2215.29,1117.62L2215.9,1118.88L2216.5,1120.13L2217.11,1121.38L2217.71,1122.63L2218.31,1123.88L2218.91,1125.14L2219.51,1126.41L2220.11,1127.67L2220.7,1128.92L2221.29,1130.18L2221.89,1131.44L2222.47,1132.71L2223.07,1133.98L2223.65,1135.23L2224.23,1136.5L2224.81,1137.77L2225.39,1139.04L2225.97,1140.31L2226.54,1141.57L2227.12,1142.85L2227.69,1144.12L2228.26,1145.39L2228.83,1146.67L2229.4,1147.95L2229.96,1149.22L2230.52,1150.5L2231.09,1151.78L2231.64,1153.06L2232.2,1154.34L2232.76,1155.62L2233.31,1156.91L2233.86,1158.19L2234.41,1159.46L2234.96,1160.76L2235.51,1162.05L2236.05,1163.33L2236.59,1164.61L2237.13,1165.91L2237.67,1167.2L2238.21,1168.5L2238.74,1169.79L2239.27,1171.08L2239.81,1172.38L2240.33,1173.67L2240.86,1174.96L2241.38,1176.27L2241.91,1177.57L2242.43,1178.87L2242.95,1180.16L2243.47,1181.47L2243.98,1182.77L2244.49,1184.07L2245.01,1185.38L2245.52,1186.69L2246.02,1187.99L2246.52,1189.29L2247.03,1190.6L2247.54,1191.92L2248.03,1193.23L2248.53,1194.53L2249.03,1195.85L2249.52,1197.17L2250.01,1198.48L2250.5,1199.79L2250.99,1201.11L2251.48,1202.43L2251.96,1203.75L2252.44,1205.07L2252.92,1206.39L2253.4,1207.7L2253.88,1209.03L2254.35,1210.35L2254.83,1211.68L2255.3,1213L2255.76,1214.33L2256.23,1215.66L2256.69,1216.98L2257.16,1218.3L2257.62,1219.64L2258.08,1220.97L2258.53,1222.3L2258.99,1223.64L2259.44,1224.97L2259.89,1226.3L2260.34,1227.64L2260.79,1228.97L2261.23,1230.31L2261.68,1231.65L2262.12,1232.99L2262.55,1234.32L2262.99,1235.67L2263.43,1237.02L2263.86,1238.35L2264.29,1239.69L2264.72,1241.04L2265.15,1242.39L2265.57,1243.73L2265.99,1245.08L2266.41,1246.43L2266.83,1247.77L2267.25,1249.12L2267.66,1250.48L2268.08,1251.83L2268.49,1253.18L2268.9,1254.53L2269.3,1255.89L2269.7,1257.23L2270.11,1258.59L2270.51,1259.96L2270.91,1261.32L2271.3,1262.67L2271.7,1264.02L2272.09,1265.38L2272.48,1266.75L2272.87,1268.11L2273.26,1269.47L2273.64,1270.83L2274.02,1272.2L2274.41,1273.57L2274.78,1274.93L2275.16,1276.29L2275.53,1277.67L2275.91,1279.05L2276.27,1280.4L2276.64,1281.77L2277.01,1283.15L2277.37,1284.52L2277.73,1285.89L2278.09,1287.27L2278.45,1288.64L2278.8,1290.01L2279.16,1291.39L2279.51,1292.76L2279.86,1294.15L2280.21,1295.53L2280.55,1296.91L2280.89,1298.28L2281.23,1299.65L2281.57,1301.04L2281.91,1302.43L2282.24,1303.81L2282.57,1305.19L2282.91,1306.58L2283.23,1307.96L2283.56,1309.35L2283.88,1310.74L2284.21,1312.13L2284.52,1313.51L2284.84,1314.9L2285.16,1316.3L2285.47,1317.68L2285.78,1319.08L2286.09,1320.48L2286.4,1321.86L2286.7,1323.26L2287.01,1324.65L2287.31,1326.05L2287.61,1327.45L2287.9,1328.84L2288.2,1330.24L2288.49,1331.64L2288.78,1333.04L2289.07,1334.44L2289.36,1335.85L2289.64,1337.25L2289.92,1338.64L2290.2,1340.04L2290.48,1341.45L2290.75,1342.86L2291.03,1344.27L2291.3,1345.67L2291.56,1347.07L2291.83,1348.48L2292.1,1349.89L2292.36,1351.3L2292.62,1352.71L2292.88,1354.12L2293.13,1355.54L2293.39,1356.95L2293.64,1358.36L2293.89,1359.77L2294.13,1361.18L2294.38,1362.6L2294.62,1364.02L2294.86,1365.43L2295.1,1366.84L2295.34,1368.27L2295.57,1369.68L2295.8,1371.11L2296.03,1372.53L2296.26,1373.94L2296.48,1375.36L2296.71,1376.78L2296.93,1378.21L2297.15,1379.63L2297.36,1381.06L2297.58,1382.48L2297.79,1383.9L2298,1385.34L2298.21,1386.76L2298.41,1388.18L2298.62,1389.61L2298.82,1391.05L2299.02,1392.48L2299.22,1393.89L2299.41,1395.34L2299.6,1396.76L2299.79,1398.18L2299.98,1399.63L2300.17,1401.06L2300.35,1402.49L2300.53,1403.93L2300.71,1405.36L2300.89,1406.8L2301.06,1408.23L2301.23,1409.66L2301.41,1411.11L2301.57,1412.54L2301.74,1413.98L2301.9,1415.42L2302.06,1416.86L2302.22,1418.31L2302.38,1419.74L2302.53,1421.18L2302.69,1422.63L2302.84,1424.08L2302.99,1425.51L2303.13,1426.95L2303.27,1428.4L2303.42,1429.85L2303.55,1431.3L2303.69,1432.74L2303.83,1434.19L2303.96,1435.64L2304.09,1437.08L2304.21,1438.52L2304.34,1439.97L2304.47,1441.44L2304.59,1442.89L2304.7,1444.33L2304.82,1445.78L2304.93,1447.24L2305.05,1448.68L2305.16,1450.13L2305.26,1451.6L2305.37,1453.05L2305.47,1454.5L2305.57,1455.95L2305.67,1457.42L2305.76,1458.88L2305.86,1460.32L2305.95,1461.78L2306.04,1463.25L2306.13,1464.7L2306.21,1466.16L2306.29,1467.63L2306.37,1469.09L2306.45,1470.53L2306.53,1472L2306.6,1473.47L2306.67,1474.92L2306.74,1476.39L2306.8,1477.86L2306.87,1479.31L2306.93,1480.78L2306.99,1482.25L2307.05,1483.7L2307.1,1485.17L2307.15,1486.64L2307.2,1488.11L2307.25,1489.58L2307.3,1491.05L2307.34,1492.51L2307.38,1493.98L2307.42,1495.45L2307.45,1496.92L2307.49,1498.4L2307.52,1499.86L2307.55,1501.32L2307.58,1502.81L2307.6,1504.28L2307.62,1505.75L2307.64,1507.22L2307.66,1508.69L2307.67,1510.16L2307.69,1511.65L2307.7,1513.11L2307.71,1514.59L2307.71,1516.07L2307.72,1517.54L2307.72,1519.02L2307.72,1520.5L2307.71,1521.97L2307.71,1523.45L2307.7,1524.92L2307.69,1526.39L2307.67,1527.88L2307.66,1529.35L2307.64,1530.82L2307.62,1532.29L2307.6,1533.75L2307.58,1535.23L2307.55,1536.71L2307.52,1538.18L2307.49,1539.64L2307.45,1541.11L2307.42,1542.59L2307.38,1544.06L2307.34,1545.52L2307.3,1546.99L2307.25,1548.46L2307.2,1549.93L2307.15,1551.39L2307.1,1552.86L2307.05,1554.33L2306.99,1555.78L2306.93,1557.26L2306.87,1558.73L2306.8,1560.17L2306.74,1561.65L2306.67,1563.12L2306.6,1564.56L2306.53,1566.03L2306.45,1567.5L2306.37,1568.95L2306.29,1570.41L2306.21,1571.88L2306.13,1573.33L2306.04,1574.79L2305.95,1576.26L2305.86,1577.72L2305.76,1579.16L2305.67,1580.62L2305.57,1582.08L2305.47,1583.54L2305.37,1584.98L2305.26,1586.44L2305.16,1587.9L2305.05,1589.36L2304.93,1590.8L2304.82,1592.25L2304.7,1593.7L2304.59,1595.15L2304.47,1596.6L2304.34,1598.06L2304.21,1599.52L2304.09,1600.95L2303.96,1602.4L2303.83,1603.85L2303.69,1605.3L2303.55,1606.74L2303.42,1608.19L2303.27,1609.64L2303.13,1611.09L2302.99,1612.52L2302.84,1613.96L2302.69,1615.41L2302.53,1616.86L2302.38,1618.29L2302.22,1619.73L2302.06,1621.18L2301.9,1622.61L2301.74,1624.06L2301.57,1625.49L2301.41,1626.93L2301.23,1628.37L2301.06,1629.81L2300.89,1631.24L2300.71,1632.67L2300.53,1634.1L2300.35,1635.55L2300.17,1636.98L2299.98,1638.41L2299.79,1639.85L2299.6,1641.27L2299.41,1642.7L2299.22,1644.14L2299.02,1645.56L2298.82,1646.99L2298.62,1648.43L2298.41,1649.86L2298.21,1651.27L2298,1652.7L2297.79,1654.14L2297.58,1655.55L2297.36,1656.98L2297.15,1658.4L2296.93,1659.82L2296.71,1661.26L2296.48,1662.68L2296.26,1664.09L2296.03,1665.51L2295.8,1666.93L2295.57,1668.35L2295.34,1669.77L2295.1,1671.19L2294.86,1672.61L2294.62,1674.01L2294.38,1675.43L2294.13,1676.86L2293.89,1678.26L2293.64,1679.68L2293.39,1681.09L2293.13,1682.5L2292.88,1683.91L2292.62,1685.33L2292.36,1686.74L2292.1,1688.14L2291.83,1689.56L2291.56,1690.96L2291.3,1692.37L2291.03,1693.77L2290.75,1695.17L2290.48,1696.58L2290.2,1698L2289.92,1699.4L2289.64,1700.79L2289.36,1702.19L2289.07,1703.6L2288.78,1705L2288.49,1706.4L2288.2,1707.8L2287.9,1709.19L2287.61,1710.59L2287.31,1711.99L2287.01,1713.38L2286.7,1714.78L2286.4,1716.17L2286.09,1717.56L2285.78,1718.95L2285.47,1720.36L2285.16,1721.74L2284.84,1723.13L2284.52,1724.52L2284.21,1725.91L2283.88,1727.29L2283.56,1728.68L2283.23,1730.08L2282.91,1731.45L2282.57,1732.84L2282.24,1734.23L2281.91,1735.61L2281.57,1737L2281.23,1738.38L2280.89,1739.76L2280.55,1741.13L2280.21,1742.51L2279.86,1743.89L2279.51,1745.27L2279.16,1746.65L2278.8,1748.03L2278.45,1749.4L2278.09,1750.77L2277.73,1752.15L2277.37,1753.52L2277.01,1754.89L2276.64,1756.27L2276.27,1757.64L2275.91,1758.99L2275.53,1760.37L2275.16,1761.75L2274.78,1763.11L2274.41,1764.46L2274.02,1765.83L2273.64,1767.2L2273.26,1768.56L2272.87,1769.93L2272.48,1771.29L2272.09,1772.65L2271.7,1774.01L2271.3,1775.37L2270.91,1776.72L2270.51,1778.08L2270.11,1779.45L2269.7,1780.8L2269.3,1782.15L2268.9,1783.51L2268.49,1784.86L2268.08,1786.2L2267.66,1787.56L2267.25,1788.91L2266.83,1790.26L2266.41,1791.61L2265.99,1792.96L2265.57,1794.31L2265.15,1795.65L2264.72,1797L2264.29,1798.35L2263.86,1799.68L2263.43,1801.02L2262.99,1802.37L2262.55,1803.72L2262.12,1805.05L2261.68,1806.38L2261.23,1807.73L2260.79,1809.06L2260.34,1810.39L2259.89,1811.74L2259.44,1813.07L2258.99,1814.4L2258.53,1815.73L2258.08,1817.06L2257.62,1818.39L2257.16,1819.73L2256.69,1821.06L2256.23,1822.37L2255.76,1823.71L2255.3,1825.04L2254.83,1826.36L2254.35,1827.68L2253.88,1829L2253.4,1830.34L2252.92,1831.65L2252.44,1832.97L2251.96,1834.29L2251.48,1835.61L2250.99,1836.92L2250.5,1838.25L2250.01,1839.56L2249.52,1840.86L2249.03,1842.18L2248.53,1843.51L2248.03,1844.81L2247.54,1846.11L2247.03,1847.43L2246.53,1848.74L2246.02,1850.05L2245.52,1851.35L2245.01,1852.65L2244.49,1853.97L2243.98,1855.26L2243.47,1856.57L2242.95,1857.88L2242.43,1859.17L2241.91,1860.47L2241.38,1861.77L2240.86,1863.08L2240.33,1864.37L2239.81,1865.66L2239.27,1866.96L2238.74,1868.25L2238.21,1869.54L2237.67,1870.83L2237.13,1872.13L2236.59,1873.42L2236.05,1874.7L2235.51,1875.99L2234.96,1877.28L2234.41,1878.57L2233.86,1879.85L2233.31,1881.13L2232.76,1882.42L2232.2,1883.7L2231.64,1884.98L2231.09,1886.26L2230.52,1887.54L2229.96,1888.81L2229.4,1890.09L2228.83,1891.37L2228.26,1892.64L2227.69,1893.91L2227.12,1895.19L2226.54,1896.46L2225.97,1897.73L2225.39,1899L2224.81,1900.27L2224.23,1901.53L2223.65,1902.8L2223.07,1904.06L2222.48,1905.33L2221.89,1906.59L2221.29,1907.86L2220.7,1909.11L2220.11,1910.36L2219.51,1911.63L2218.91,1912.89L2218.31,1914.15L2217.71,1915.4L2217.11,1916.66L2216.5,1917.91L2215.9,1919.16L2215.29,1920.41L2214.67,1921.67L2214.06,1922.91L2213.45,1924.16L2212.83,1925.41L2212.22,1926.65L2211.59,1927.9L2210.97,1929.14L2210.35,1930.38L2209.72,1931.63L2209.1,1932.87L2208.46,1934.11L2207.83,1935.35L2207.21,1936.57L2206.57,1937.82L2205.93,1939.05L2205.3,1940.28L2204.65,1941.53L2204.01,1942.75L2203.37,1943.98L2202.72,1945.21L2202.08,1946.43L2201.43,1947.66L2200.77,1948.89L2200.12,1950.12L2199.47,1951.34L2198.81,1952.56L2198.15,1953.79L2197.49,1955.01L2196.83,1956.22L2196.17,1957.44L2195.5,1958.66L2194.84,1959.87L2194.17,1961.09L2193.5,1962.3L2192.82,1963.52L2192.15,1964.73L2191.48,1965.93L2190.8,1967.15L2190.12,1968.35L2189.44,1969.55L2188.76,1970.77L2188.07,1971.98L2187.39,1973.17L2186.7,1974.37L2186.01,1975.58L2185.31,1976.78L2184.62,1977.98L2183.93,1979.17L2183.23,1980.37L2182.54,1981.56L2181.83,1982.76L2181.13,1983.96L2180.43,1985.14L2179.72,1986.33L2179.02,1987.52L2178.31,1988.71L2177.6,1989.9L2176.88,1991.09L2176.18,1992.26L2175.46,1993.44L2174.74,1994.63L2174.02,1995.82L2173.3,1997L2172.58,1998.17L2171.85,1999.35L2171.12,2000.53L2170.4,2001.7L2169.67,2002.87L2168.93,2004.05L2168.2,2005.22L2167.47,2006.38L2166.73,2007.57L2165.99,2008.73L2165.26,2009.89L2164.51,2011.07L2163.77,2012.23L2163.03,2013.38L2162.28,2014.54L2161.53,2015.71L2160.78,2016.88L2160.03,2018.02L2159.28,2019.18L2158.52,2020.34L2157.77,2021.49L2157.01,2022.65L2156.24,2023.81L2155.49,2024.95L2154.72,2026.1L2153.96,2027.24L2153.2,2028.39L2152.42,2029.54L2151.65,2030.69L2150.88,2031.83L2150.11,2032.97L2149.33,2034.11L2148.55,2035.26L2147.78,2036.38L2147,2037.53L2146.22,2038.66L2145.44,2039.8L2144.65,2040.94L2143.86,2042.07L2143.07,2043.2L2142.29,2044.32L2141.49,2045.45L2140.7,2046.59L2139.91,2047.71L2139.11,2048.83L2138.32,2049.95L2137.51,2051.08L2136.71,2052.2L2135.91,2053.32L2135.1,2054.44L2134.3,2055.55L2133.5,2056.66L2132.68,2057.78L2131.87,2058.9L2131.06,2060.01L2130.24,2061.12L2129.43,2062.23L2128.61,2063.34L2127.79,2064.45L2126.97,2065.55L2126.15,2066.65L2125.32,2067.76L2124.5,2068.86L2123.67,2069.96L2122.85,2071.05L2122.01,2072.16L2121.18,2073.26L2120.35,2074.35L2119.51,2075.44L2118.68,2076.54L2117.84,2077.63L2117,2078.72L2116.16,2079.8L2115.31,2080.89L2114.47,2081.98L2113.63,2083.06L2112.78,2084.14L2111.93,2085.23L2111.07,2086.32L2110.22,2087.39L2109.37,2088.47L2108.51,2089.55L2107.66,2090.62L2106.8,2091.69L2105.94,2092.77L2105.07,2093.85L2104.21,2094.91L2103.34,2095.98L2102.48,2097.04L2101.61,2098.11L2100.74,2099.18L2099.87,2100.24L2098.99,2101.31L2098.13,2102.36L2097.25,2103.42L2096.37,2104.49L2095.49,2105.54L2094.61,2106.6L2093.72,2107.66L2092.84,2108.7L2091.96,2109.75L2091.07,2110.8L2090.18,2111.86L2089.29,2112.9L2088.41,2113.94L2087.51,2114.99L2086.61,2116.04L2085.72,2117.08L2084.83,2118.11L2083.92,2119.16L2083.02,2120.2L2082.12,2121.23L2081.22,2122.27L2080.32,2123.29L2079.41,2124.33L2078.49,2125.37L2077.58,2126.4L2076.67,2127.42L2075.77,2128.45L2074.85,2129.47L2073.94,2130.49L2073.01,2131.52L2072.09,2132.55L2071.18,2133.56L2070.26,2134.58L2069.33,2135.6L2068.41,2136.61L2067.49,2137.62L2066.55,2138.64L2065.62,2139.66L2064.69,2140.66L2063.76,2141.67L2062.82,2142.68L2061.89,2143.68L2060.96,2144.69L2060.01,2145.7L2059.07,2146.7L2058.14,2147.69L2057.2,2148.69L2056.24,2149.7L2055.3,2150.69L2054.36,2151.68L2053.41,2152.68L2052.46,2153.67L2051.51,2154.66L2050.55,2155.65L2049.6,2156.64L2048.64,2157.62L2047.69,2158.6L2046.73,2159.59L2045.77,2160.57L2044.81,2161.55L2043.85,2162.53L2042.88,2163.51L2041.91,2164.48L2040.94,2165.46L2039.97,2166.44L2039.01,2167.4L2038.03,2168.38L2037.07,2169.34L2036.09,2170.31L2035.11,2171.28L2034.13,2172.24L2033.16,2173.2L2032.18,2174.16L2031.19,2175.13L2030.2,2176.09L2029.22,2177.05L2028.24,2178L2027.25,2178.95L2026.26,2179.91L2025.27,2180.86L2024.28,2181.81L2023.28,2182.76L2022.3,2183.7L2021.3,2184.64L2020.29,2185.6L2019.3,2186.54L2018.3,2187.47L2017.3,2188.41L2016.3,2189.35L2015.28,2190.29L2014.28,2191.23L2013.27,2192.16L2012.27,2193.09L2011.26,2194.02L2010.24,2194.95L2009.22,2195.88L2008.22,2196.8L2007.21,2197.72L2006.18,2198.65L2005.16,2199.58L2004.15,2200.49L2003.13,2201.41L2002.1,2202.33L2001.07,2203.25L2000.05,2204.16L1999.03,2205.07L1998,2205.98L1996.97,2206.89L1995.93,2207.8L1994.9,2208.71L1993.86,2209.62L1992.83,2210.52L1991.8,2211.41L1990.76,2212.32L1989.71,2213.23L1988.68,2214.11L1987.64,2215.01L1986.59,2215.91L1985.55,2216.8L1984.51,2217.69L1983.46,2218.58L1982.4,2219.47L1981.35,2220.36L1980.3,2221.24L1979.26,2222.12L1978.2,2223.01L1977.14,2223.89L1976.09,2224.76L1975.02,2225.65L1973.96,2226.52L1972.91,2227.39L1971.84,2228.27L1970.78,2229.14L1969.71,2230.01L1968.64,2230.88L1967.58,2231.74L1966.51,2232.61L1965.45,2233.47L1964.37,2234.33L1963.29,2235.2L1962.23,2236.05L1961.15,2236.91L1960.06,2237.77L1959,2238.62L1957.92,2239.47L1956.83,2240.33L1955.75,2241.18L1954.66,2242.02L1953.58,2242.87L1952.5,2243.71L1951.4,2244.56L1950.32,2245.39L1949.23,2246.24L1948.14,2247.07L1947.05,2247.91L1945.95,2248.75L1944.86,2249.58L1943.76,2250.41L1942.66,2251.24L1941.56,2252.07L1940.46,2252.9L1939.36,2253.72L1938.26,2254.54L1937.15,2255.37L1936.05,2256.19L1934.95,2257L1933.83,2257.83L1932.72,2258.65L1931.61,2259.46L1930.51,2260.26L1929.39,2261.08L1928.26,2261.89L1927.15,2262.7L1926.04,2263.5L1924.92,2264.31L1923.8,2265.11L1922.68,2265.91L1921.55,2266.71L1920.44,2267.51L1919.31,2268.3L1918.18,2269.1L1917.06,2269.89L1915.92,2270.69L1914.8,2271.47L1913.67,2272.26L1912.54,2273.04L1911.4,2273.83L1910.26,2274.62L1909.13,2275.4L1907.98,2276.18L1906.86,2276.95L1905.72,2277.73L1904.57,2278.51L1903.43,2279.28L1902.3,2280.05L1901.14,2280.82L1899.99,2281.59L1898.84,2282.36L1897.7,2283.12L1896.55,2283.88L1895.4,2284.64L1894.25,2285.41L1893.09,2286.16L1891.94,2286.92L1890.79,2287.67L1889.63,2288.43L1888.47,2289.18L1887.31,2289.93L1886.14,2290.68L1884.98,2291.43L1883.83,2292.17L1882.67,2292.91L1881.49,2293.66L1880.32,2294.4L1879.17,2295.13L1877.99,2295.87L1876.82,2296.6L1875.65,2297.33L1874.48,2298.07L1873.3,2298.8L1872.13,2299.52L1870.95,2300.25L1869.77,2300.97L1868.6,2301.69L1867.42,2302.41L1866.23,2303.14L1865.05,2303.85L1863.87,2304.57L1862.68,2305.28L1861.5,2305.99L1860.31,2306.71L1859.12,2307.41L1857.93,2308.12L1856.74,2308.83L1855.56,2309.53L1854.37,2310.23L1853.16,2310.93L1851.97,2311.63L1850.77,2312.33L1849.58,2313.02L1848.39,2313.71L1847.18,2314.41L1845.97,2315.1L1844.78,2315.78L1843.58,2316.47L1842.36,2317.16L1841.16,2317.84L1839.95,2318.52L1838.74,2319.2L1837.55,2319.87L1836.33,2320.55L1835.12,2321.22L1833.91,2321.89L1832.69,2322.57L1831.48,2323.23L1830.25,2323.91L1829.04,2324.57L1827.83,2325.23L1826.6,2325.89L1825.37,2326.56L1824.16,2327.21L1822.94,2327.87L1821.73,2328.51L1820.5,2329.17L1819.26,2329.83L1818.06,2330.47L1816.82,2331.12L1815.58,2331.77L1814.36,2332.41L1813.12,2333.05L1811.88,2333.7L1810.65,2334.33L1809.43,2334.96L1808.18,2335.6L1806.94,2336.24L1805.7,2336.87L1804.47,2337.49L1803.24,2338.12L1801.99,2338.75L1800.74,2339.37L1799.51,2339.99L1798.25,2340.61L1797.01,2341.23L1795.77,2341.84L1794.51,2342.46L1793.26,2343.08L1792.01,2343.69L1790.77,2344.29L1789.51,2344.9L1788.25,2345.51L1787.01,2346.11L1785.76,2346.71L1784.5,2347.31L1783.23,2347.91L1781.97,2348.51L1780.72,2349.1L1779.46,2349.69L1778.18,2350.29L1776.93,2350.87L1775.68,2351.45L1774.39,2352.05L1773.13,2352.63L1771.88,2353.21L1770.61,2353.79L1769.34,2354.37L1768.07,2354.94L1766.79,2355.52L1765.5,2356.1L1764.23,2356.67L1762.97,2357.23L1761.69,2357.8L1760.41,2358.36L1759.14,2358.92L1757.86,2359.48L1756.58,2360.04L1755.3,2360.6L1754.02,2361.15L1752.74,2361.71L1751.45,2362.26L1750.17,2362.81L1748.89,2363.35L1747.59,2363.91L1746.3,2364.45L1745.01,2364.99L1743.73,2365.53L1742.44,2366.07L1741.15,2366.6L1739.86,2367.13L1738.55,2367.67L1737.26,2368.2L1735.97,2368.73L1734.68,2369.25L1733.38,2369.78L1732.07,2370.31L1730.77,2370.83L1729.48,2371.34L1728.16,2371.87L1726.87,2372.38L1725.57,2372.89L1724.27,2373.4L1722.95,2373.91L1721.65,2374.42L1720.35,2374.92L1719.03,2375.43L1717.72,2375.93L1716.4,2376.43L1715.1,2376.93L1713.79,2377.42L1712.47,2377.92L1711.16,2378.41L1709.86,2378.89L1708.53,2379.39L1707.2,2379.88L1705.89,2380.36L1704.58,2380.84L1703.25,2381.32L1701.92,2381.8L1700.6,2382.28L1699.3,2382.75L1697.96,2383.22L1696.63,2383.7L1695.31,2384.16L1694,2384.63L1692.66,2385.09L1691.32,2385.56L1690.01,2386.01L1688.67,2386.48L1687.33,2386.93L1686.01,2387.39L1684.67,2387.84L1683.33,2388.29L1682.01,2388.74L1680.66,2389.19L1679.32,2389.63L1677.99,2390.07L1676.65,2390.51L1675.31,2390.95L1673.98,2391.39L1672.63,2391.82L1671.29,2392.26L1669.94,2392.69L1668.59,2393.12L1667.26,2393.54L1665.91,2393.97L1664.56,2394.39L1663.21,2394.81L1661.86,2395.23L1660.51,2395.65L1659.17,2396.06L1657.82,2396.47L1656.44,2396.89L1655.11,2397.29L1653.77,2397.7L1652.39,2398.11L1651.04,2398.51L1649.7,2398.9L1648.32,2399.31L1646.96,2399.71L1645.62,2400.09L1644.26,2400.49L1642.88,2400.88L1641.52,2401.27L1640.16,2401.66L1638.79,2402.04L1637.45,2402.42L1636.09,2402.8L1634.7,2403.18L1633.34,2403.56L1631.97,2403.93L1630.6,2404.3L1629.24,2404.67L1627.87,2405.04L1626.5,2405.4L1625.11,2405.77L1623.74,2406.13L1622.37,2406.49L1621,2406.85L1619.63,2407.2L1618.24,2407.56L1616.86,2407.91L1615.51,2408.25L1614.12,2408.6L1612.72,2408.95L1611.37,2409.29L1609.97,2409.63L1608.6,2409.97L1607.22,2410.3L1605.82,2410.64L1604.45,2410.97L1603.07,2411.3L1601.67,2411.63L1600.27,2411.96L1598.91,2412.28L1597.53,2412.6L1596.13,2412.92L1594.72,2413.24L1593.34,2413.56L1591.96,2413.87L1590.56,2414.18L1589.17,2414.49L1587.79,2414.8L1586.38,2415.1L1584.98,2415.41L1583.59,2415.7L1582.2,2416L1580.79,2416.3L1579.39,2416.6L1578,2416.89L1576.59,2417.18L1575.18,2417.47L1573.81,2417.75L1572.4,2418.03L1570.99,2418.32L1569.6,2418.6L1568.19,2418.87L1566.77,2419.15L1565.38,2419.42L1563.97,2419.69L1562.55,2419.96L1561.16,2420.23L1559.74,2420.49L1558.33,2420.76L1556.93,2421.01L1555.51,2421.27L1554.1,2421.53L1552.7,2421.78L1551.28,2422.03L1549.87,2422.28L1548.44,2422.53L1547.05,2422.77L1545.63,2423.02L1544.21,2423.26L1542.79,2423.5L1541.36,2423.74L1539.96,2423.97L1538.54,2424.2L1537.12,2424.43L1535.69,2424.66L1534.27,2424.88L1532.85,2425.11L1531.42,2425.33L1530,2425.55L1528.59,2425.76L1527.17,2425.97L1525.72,2426.19L1524.31,2426.4L1522.89,2426.61L1521.44,2426.82L1520.03,2427.01L1518.6,2427.22L1517.17,2427.42L1515.74,2427.61L1514.29,2427.81L1512.88,2428L1511.45,2428.19L1510,2428.38L1508.57,2428.57L1507.16,2428.75L1505.73,2428.93L1504.27,2429.11L1502.84,2429.29L1501.41,2429.46L1499.95,2429.64L1498.52,2429.8L1497.11,2429.97L1495.67,2430.14L1494.21,2430.3L1492.76,2430.46L1491.34,2430.62L1489.91,2430.78L1488.45,2430.93L1487.01,2431.09L1485.57,2431.24L1484.11,2431.38L1482.68,2431.53L1481.24,2431.67L1479.8,2431.81L1478.36,2431.95L1476.88,2432.09L1475.44,2432.22L1474.02,2432.35L1472.56,2432.49L1471.1,2432.61L1469.65,2432.74L1468.21,2432.86L1466.77,2432.98L1465.31,2433.1L1463.84,2433.22L1462.4,2433.33L1460.96,2433.44L1459.49,2433.55L1458.05,2433.66L1456.61,2433.76L1455.12,2433.87L1453.67,2433.97L1452.23,2434.07L1450.76,2434.16L1449.32,2434.26L1447.85,2434.35L1446.38,2434.44L1444.93,2434.52L1443.49,2434.61L1442.02,2434.69L1440.55,2434.77L1439.1,2434.85L1437.63,2434.92L1436.17,2435L1434.72,2435.07L1433.25,2435.14L1431.78,2435.2L1430.33,2435.26L1428.86,2435.33L1427.39,2435.39L1425.94,2435.44L1424.46,2435.5L1422.99,2435.55L1421.52,2435.6L1420.05,2435.65L1418.6,2435.69L1417.15,2435.74L1415.65,2435.78L1414.18,2435.82L1412.73,2435.85L1411.25,2435.89L1409.78,2435.92L1408.31,2435.95L1406.83,2435.97L1405.36,2436L1403.9,2436.02L1402.43,2436.04L1400.93,2436.06L1399.48,2436.07L1398,2436.09L1396.5,2436.1L1395.05,2436.1L1393.57,2436.11L1392.1,2436.11L1390.62,2436.11L1389.14,2436.11L1387.67,2436.11L1386.19,2436.1L1384.74,2436.1L1383.24,2436.09L1381.76,2436.07L1380.31,2436.06L1378.81,2436.04L1377.34,2436.02L1375.88,2436L1374.41,2435.97L1372.93,2435.95L1371.46,2435.92L1369.99,2435.89L1368.51,2435.85L1367.06,2435.82L1365.59,2435.78L1364.09,2435.74L1362.64,2435.69L1361.19,2435.65L1359.72,2435.6L1358.25,2435.55L1356.78,2435.5L1355.3,2435.44L1353.85,2435.39L1352.38,2435.33L1350.91,2435.26L1349.46,2435.2L1347.99,2435.14L1346.52,2435.07L1345.07,2435L1343.6,2434.92L1342.14,2434.85L1340.69,2434.77L1339.22,2434.69L1337.75,2434.61L1336.3,2434.52L1334.86,2434.44L1333.39,2434.35L1331.92,2434.26L1330.48,2434.16L1329.01,2434.07L1327.57,2433.97L1326.12,2433.87L1324.63,2433.76L1323.19,2433.66L1321.75,2433.55L1320.28,2433.44L1318.84,2433.33L1317.4,2433.22L1315.93,2433.1L1314.47,2432.98L1313.03,2432.86L1311.59,2432.74L1310.14,2432.61L1308.68,2432.49L1307.22,2432.35L1305.8,2432.22L1304.36,2432.09L1302.88,2431.95L1301.44,2431.81L1300,2431.67L1298.56,2431.53L1297.13,2431.38L1295.67,2431.24L1294.23,2431.09L1292.79,2430.93L1291.33,2430.78L1289.9,2430.62L1288.48,2430.46L1287.03,2430.3L1285.57,2430.14L1284.13,2429.97L1282.72,2429.8L1281.29,2429.64L1279.83,2429.46L1278.4,2429.29L1276.97,2429.11L1275.51,2428.93L1274.08,2428.75L1272.67,2428.57L1271.24,2428.38L1269.79,2428.19L1268.36,2428L1266.95,2427.81L1265.5,2427.61L1264.07,2427.42L1262.64,2427.22L1261.21,2427.01L1259.8,2426.82L1258.35,2426.61L1256.93,2426.4L1255.52,2426.19L1254.07,2425.97L1252.65,2425.76L1251.24,2425.55L1249.82,2425.33L1248.39,2425.11L1246.97,2424.88L1245.55,2424.66L1244.12,2424.43L1242.7,2424.2L1241.28,2423.97L1239.88,2423.74L1238.45,2423.5L1237.03,2423.26L1235.61,2423.02L1234.19,2422.77L1232.79,2422.53L1231.38,2422.28L1229.96,2422.03L1228.54,2421.78L1227.14,2421.53L1225.73,2421.27L1224.31,2421.01L1222.91,2420.76L1221.5,2420.49L1220.08,2420.23L1218.69,2419.96L1217.27,2419.69L1215.86,2419.42L1214.47,2419.15L1213.05,2418.87L1211.64,2418.6L1210.25,2418.32L1208.84,2418.03L1207.43,2417.75L1206.06,2417.47L1204.65,2417.18L1203.24,2416.89L1201.85,2416.6L1200.44,2416.3L1199.04,2416L1197.65,2415.7L1196.26,2415.41L1194.86,2415.1L1193.45,2414.8L1192.07,2414.49L1190.68,2414.18L1189.28,2413.87L1187.9,2413.56L1186.52,2413.24L1185.11,2412.92L1183.71,2412.6L1182.33,2412.28L1180.98,2411.96L1179.57,2411.63L1178.17,2411.3L1176.8,2410.97L1175.42,2410.64L1174.02,2410.3L1172.64,2409.97L1171.27,2409.63L1169.87,2409.29L1168.52,2408.95L1167.12,2408.6L1165.73,2408.25L1164.38,2407.91L1163,2407.56L1161.61,2407.2L1160.24,2406.85L1158.87,2406.49L1157.5,2406.13L1156.13,2405.77L1154.74,2405.4L1153.37,2405.04L1152,2404.67L1150.64,2404.3L1149.27,2403.93L1147.9,2403.56L1146.54,2403.18L1145.15,2402.8L1143.79,2402.42L1142.45,2402.04L1141.08,2401.66L1139.72,2401.27L1138.36,2400.88L1136.98,2400.49L1135.62,2400.09L1134.28,2399.7L1132.92,2399.31L1131.54,2398.9L1130.2,2398.51L1128.85,2398.11L1127.47,2397.7L1126.13,2397.29L1124.8,2396.89L1123.42,2396.47L1122.07,2396.06L1120.74,2395.65L1119.38,2395.23L1118.03,2394.81L1116.68,2394.39L1115.33,2393.97L1113.98,2393.54L1112.65,2393.12L1111.3,2392.69L1109.95,2392.26L1108.61,2391.82L1107.26,2391.39L1105.93,2390.95L1104.59,2390.51L1103.24,2390.07L1101.92,2389.63L1100.58,2389.19L1099.24,2388.74L1097.91,2388.29L1096.57,2387.84L1095.23,2387.39L1093.91,2386.93L1092.57,2386.47L1091.23,2386.01L1089.92,2385.56L1088.58,2385.09L1087.24,2384.62L1085.93,2384.16L1084.61,2383.7L1083.28,2383.22L1081.95,2382.75L1080.63,2382.28L1079.32,2381.8L1077.99,2381.32L1076.66,2380.84L1075.35,2380.36L1074.04,2379.88L1072.71,2379.39L1071.39,2378.9L1070.08,2378.41L1068.77,2377.92L1067.45,2377.42L1066.14,2376.93L1064.84,2376.43L1063.52,2375.93L1062.21,2375.43L1060.89,2374.92L1059.59,2374.42L1058.29,2373.91L1056.97,2373.4L1055.67,2372.89L1054.38,2372.38L1053.08,2371.87L1051.76,2371.34L1050.47,2370.83L1049.17,2370.31L1047.86,2369.78L1046.57,2369.26L1045.27,2368.73L1043.98,2368.2L1042.69,2367.68L1041.38,2367.14L1040.09,2366.6L1038.8,2366.07L1037.52,2365.53L1036.23,2364.99L1034.94,2364.45L1033.66,2363.91L1032.35,2363.35L1031.07,2362.81L1029.78,2362.26L1028.5,2361.71L1027.22,2361.15L1025.94,2360.6L1024.66,2360.04L1023.38,2359.48L1022.1,2358.92L1020.82,2358.36L1019.55,2357.8L1018.27,2357.23L1017.01,2356.67L1015.74,2356.1L1014.45,2355.52L1013.17,2354.94L1011.9,2354.37L1010.63,2353.79L1009.37,2353.21L1008.11,2352.63L1006.84,2352.05L1005.56,2351.45L1004.31,2350.87L1003.07,2350.29L1001.78,2349.69L1000.51,2349.1L999.272,2348.51L998.008,2347.91L996.746,2347.31L995.487,2346.71L994.227,2346.11L992.984,2345.51L991.728,2344.9L990.473,2344.29L989.232,2343.69L987.977,2343.08L986.723,2342.46L985.469,2341.84L984.235,2341.23L982.984,2340.61L981.733,2339.99L980.5,2339.37L979.249,2338.74L978.001,2338.12L976.773,2337.49L975.546,2336.87L974.302,2336.24L973.053,2335.6L971.809,2334.96L970.588,2334.33L969.363,2333.7L968.121,2333.05L966.881,2332.41L965.659,2331.77L964.423,2331.12L963.183,2330.46L961.982,2329.83L960.749,2329.17L959.514,2328.52L958.297,2327.87L957.082,2327.21L955.871,2326.56L954.638,2325.89L953.406,2325.23L952.196,2324.57L950.987,2323.91L949.76,2323.23L948.551,2322.57L947.324,2321.89L946.119,2321.22L944.915,2320.55L943.692,2319.87L942.505,2319.2L941.284,2318.52L940.072,2317.83L938.882,2317.16L937.664,2316.47L936.465,2315.78L935.269,2315.1L934.061,2314.41L932.856,2313.71L931.661,2313.02L930.467,2312.33L929.274,2311.63L928.08,2310.93L926.872,2310.23L925.683,2309.53L924.502,2308.83L923.304,2308.12L922.118,2307.41L920.932,2306.71L919.735,2305.99L918.56,2305.28L917.378,2304.57L916.186,2303.85L915.004,2303.13L913.823,2302.41L912.645,2301.7L911.466,2300.97L910.288,2300.25L909.112,2299.52L907.936,2298.79L906.761,2298.06L905.586,2297.33L904.422,2296.6L903.253,2295.87L902.075,2295.13L900.912,2294.39L899.752,2293.66L898.577,2292.91L897.409,2292.16L896.251,2291.42L895.096,2290.68L893.934,2289.93L892.771,2289.18L891.608,2288.43L890.45,2287.67L889.301,2286.92L888.147,2286.16L886.99,2285.4L885.836,2284.64L884.689,2283.88L883.543,2283.12L882.398,2282.36L881.246,2281.59L880.095,2280.82L878.946,2280.05L877.806,2279.28L876.672,2278.51L875.526,2277.73L874.382,2276.95L873.251,2276.18L872.109,2275.4L870.976,2274.62L869.844,2273.84L868.703,2273.05L867.57,2272.26L866.442,2271.47L865.32,2270.69L864.183,2269.89L863.056,2269.1L861.932,2268.31L860.8,2267.5L859.684,2266.71L858.564,2265.91L857.439,2265.11L856.319,2264.31L855.2,2263.5L854.09,2262.7L852.974,2261.89L851.851,2261.08L850.737,2260.26L849.629,2259.46L848.525,2258.65L847.411,2257.83L846.295,2257L845.195,2256.19L844.085,2255.37L842.98,2254.54L841.88,2253.72L840.782,2252.9L839.681,2252.07L838.577,2251.24L837.483,2250.41L836.385,2249.58L835.293,2248.75L834.192,2247.91L833.096,2247.07L832.01,2246.24L830.923,2245.4L829.837,2244.56L828.746,2243.71L827.66,2242.87L826.578,2242.02L825.49,2241.17L824.408,2240.32L823.323,2239.47L822.246,2238.62L821.175,2237.77L820.093,2236.91L819.011,2236.05L817.943,2235.2L816.873,2234.34L815.797,2233.47L814.726,2232.61L813.657,2231.74L812.596,2230.88L811.529,2230.01L810.46,2229.14L809.393,2228.26L808.33,2227.39L807.278,2226.53L806.215,2225.65L805.15,2224.76L804.099,2223.89L803.043,2223.01L801.988,2222.13L800.938,2221.24L799.886,2220.36L798.835,2219.47L797.783,2218.58L796.732,2217.69L795.692,2216.8L794.653,2215.91L793.599,2215.01L792.561,2214.12L791.526,2213.22L790.476,2212.32L789.441,2211.42L788.408,2210.52L787.375,2209.62L786.338,2208.71L785.302,2207.8L784.276,2206.9L783.246,2205.99L782.215,2205.07L781.184,2204.16L780.168,2203.25L779.146,2202.34L778.117,2201.41L777.091,2200.49L776.071,2199.57L775.062,2198.66L774.041,2197.73L773.018,2196.8L772.013,2195.88L770.999,2194.95L769.981,2194.02L768.973,2193.09L767.971,2192.16L766.963,2191.23L765.95,2190.29L764.945,2189.35L763.944,2188.41L762.942,2187.47L761.945,2186.54L760.945,2185.59L759.941,2184.64L758.948,2183.7L757.958,2182.76L756.959,2181.8L755.967,2180.85L754.985,2179.91L753.992,2178.95L753.001,2178L752.021,2177.05L751.033,2176.09L750.049,2175.13L749.067,2174.17L748.08,2173.2L747.106,2172.24L746.134,2171.28L745.152,2170.31L744.174,2169.34L743.206,2168.38L742.237,2167.41L741.269,2166.44L740.297,2165.46L739.326,2164.48L738.362,2163.51L737.392,2162.53L736.431,2161.55L735.472,2160.57L734.509,2159.59L733.552,2158.61L732.595,2157.62L731.641,2156.64L730.689,2155.65L729.736,2154.66L728.779,2153.66L727.831,2152.68L726.882,2151.68L725.935,2150.69L724.992,2149.69L724.042,2148.69L723.104,2147.7L722.166,2146.7L721.226,2145.7L720.284,2144.69L719.342,2143.68L718.415,2142.68L717.481,2141.67L716.545,2140.66L715.62,2139.66L714.69,2138.64L713.754,2137.62L712.833,2136.61L711.913,2135.6L710.984,2134.58L710.062,2133.56L709.141,2132.54L708.227,2131.52L707.31,2130.5L706.391,2129.47L705.474,2128.45L704.564,2127.42L703.657,2126.4L702.745,2125.37L701.834,2124.33L700.924,2123.29L700.021,2122.26L699.123,2121.23L698.223,2120.2L697.316,2119.16L696.415,2118.11L695.524,2117.08L694.63,2116.04L693.733,2114.99L692.835,2113.94L691.943,2112.9L691.055,2111.85L690.167,2110.8L689.28,2109.75L688.399,2108.71L687.518,2107.66L686.63,2106.6L685.749,2105.54L684.87,2104.48L683.99,2103.42L683.118,2102.37L682.243,2101.3L681.365,2100.24L680.499,2099.18L679.631,2098.12L678.763,2097.05L677.893,2095.98L677.028,2094.91L676.169,2093.84L675.306,2092.77L674.441,2091.69L673.584,2090.62L672.727,2089.55L671.871,2088.47L671.019,2087.39L670.166,2086.31L669.315,2085.23L668.46,2084.14L667.617,2083.06L666.775,2081.99L665.925,2080.89L665.082,2079.8L664.245,2078.72L663.4,2077.62L662.559,2076.53L661.727,2075.44L660.894,2074.35L660.062,2073.26L659.228,2072.16L658.393,2071.05L657.566,2069.96L656.741,2068.86L655.917,2067.76L655.091,2066.65L654.264,2065.54L653.45,2064.45L652.633,2063.34L651.811,2062.23L650.997,2061.12L650.182,2060.01L649.369,2058.9L648.556,2057.78L647.747,2056.66L646.945,2055.56L646.139,2054.44L645.33,2053.32L644.527,2052.2L643.729,2051.08L642.925,2049.95L642.127,2048.83L641.337,2047.71L640.54,2046.58L639.746,2045.45L638.955,2044.33L638.162,2043.19L637.374,2042.06L636.592,2040.93L635.807,2039.8L635.021,2038.66L634.24,2037.53L633.46,2036.39L632.68,2035.25L631.908,2034.11L631.133,2032.97L630.358,2031.83L629.587,2030.69L628.815,2029.54L628.048,2028.39L627.282,2027.25L626.519,2026.1L625.754,2024.95L624.994,2023.8L624.232,2022.65L623.472,2021.49L622.72,2020.34L621.961,2019.18L621.206,2018.02L620.46,2016.87L619.712,2015.71L618.962,2014.55L618.211,2013.38L617.466,2012.22L616.728,2011.06L615.986,2009.89L615.245,2008.73L614.507,2007.56L613.769,2006.39L613.038,2005.22L612.304,2004.05L611.572,2002.87L610.842,2001.7L610.117,2000.53L609.391,1999.35L608.663,1998.17L607.944,1997L607.223,1995.82L606.501,1994.63L605.783,1993.45L605.07,1992.27L604.357,1991.09L603.642,1989.89L602.934,1988.71L602.223,1987.52L601.514,1986.33L600.812,1985.14L600.108,1983.95L599.407,1982.76L598.708,1981.57L598.007,1980.37L597.309,1979.17L596.615,1977.97L595.925,1976.78L595.232,1975.58L594.54,1974.37L593.853,1973.17L593.168,1971.97L592.485,1970.77L591.798,1969.56L591.116,1968.35L590.441,1967.15L589.765,1965.94L589.088,1964.73L588.413,1963.52L587.74,1962.3L587.071,1961.09L586.404,1959.88L585.734,1958.66L585.068,1957.44L584.409,1956.23L583.747,1955.01L583.084,1953.78L582.426,1952.56L581.772,1951.34L581.119,1950.12L580.466,1948.89L579.815,1947.67L579.163,1946.43L578.516,1945.21L577.873,1943.98L577.232,1942.76L576.587,1941.52L575.945,1940.28L575.309,1939.05L574.673,1937.82L574.038,1936.58L573.406,1935.35L572.775,1934.11L572.144,1932.87L571.517,1931.63L570.892,1930.38L570.268,1929.14L569.647,1927.9L569.025,1926.65L568.41,1925.41L567.792,1924.16L567.173,1922.91L566.563,1921.66L565.953,1920.41L565.345,1919.16L564.736,1917.91L564.129,1916.65L563.527,1915.4L562.926,1914.15L562.327,1912.89L561.728,1911.63L561.131,1910.37L560.535,1909.11L559.946,1907.86L559.354,1906.59L558.763,1905.33L558.177,1904.06L557.591,1902.8L557.007,1901.53L556.429,1900.27L555.849,1899L555.271,1897.73L554.694,1896.46L554.118,1895.18L553.548,1893.91L552.979,1892.64L552.41,1891.37L551.842,1890.09L551.277,1888.81L550.716,1887.54L550.155,1886.26L549.596,1884.98L549.039,1883.7L548.481,1882.41L547.928,1881.13L547.379,1879.85L546.827,1878.56L546.28,1877.28L545.736,1876L545.191,1874.7L544.649,1873.42L544.109,1872.13L543.568,1870.83L543.034,1869.54L542.502,1868.26L541.966,1866.95L541.434,1865.66L540.908,1864.37L540.382,1863.07L539.856,1861.77L539.334,1860.47L538.812,1859.17L538.293,1857.87L537.775,1856.57L537.259,1855.26L536.748,1853.97L536.236,1852.66L535.726,1851.35L535.219,1850.05L534.711,1848.73L534.207,1847.42L533.708,1846.12L533.208,1844.81L532.709,1843.5L532.215,1842.19L531.719,1840.87L531.228,1839.56L530.739,1838.25L530.249,1836.92L529.763,1835.61L529.278,1834.29L528.797,1832.97L528.318,1831.65L527.837,1830.33L527.36,1829L526.889,1827.69L526.415,1826.36L525.942,1825.03L525.476,1823.71L525.01,1822.38L524.545,1821.06L524.082,1819.73L523.62,1818.39L523.162,1817.06L522.706,1815.73L522.251,1814.4L521.798,1813.07L521.347,1811.73L520.899,1810.4L520.452,1809.06L520.006,1807.72L519.564,1806.39L519.124,1805.05L518.686,1803.71L518.249,1802.37L517.813,1801.03L517.379,1799.68L516.95,1798.34L516.521,1797L516.094,1795.65L515.67,1794.31L515.247,1792.96L514.825,1791.61L514.406,1790.26L513.991,1788.91L513.576,1787.56L513.163,1786.21L512.752,1784.86L512.344,1783.51L511.938,1782.15L511.533,1780.8L511.13,1779.44L510.73,1778.08L510.33,1776.72L509.934,1775.37L509.541,1774.01L509.148,1772.65L508.758,1771.29L508.37,1769.93L507.983,1768.56L507.599,1767.2L507.217,1765.84L506.836,1764.47L506.459,1763.1L506.083,1761.74L505.709,1760.37L505.337,1759L504.967,1757.63L504.6,1756.26L504.234,1754.89L503.87,1753.52L503.509,1752.15L503.15,1750.77L502.792,1749.4L502.436,1748.02L502.083,1746.65L501.732,1745.27L501.384,1743.9L501.036,1742.52L500.69,1741.13L500.348,1739.75L500.008,1738.37L499.669,1736.99L499.332,1735.61L498.998,1734.23L498.666,1732.84L498.335,1731.46L498.007,1730.07L497.681,1728.68L497.357,1727.3L497.035,1725.91L496.715,1724.52L496.398,1723.13L496.082,1721.74L495.768,1720.35L495.457,1718.96L495.148,1717.57L494.841,1716.17L494.536,1714.78L494.233,1713.38L493.933,1711.99L493.633,1710.59L493.337,1709.19L493.043,1707.8L492.75,1706.4L492.461,1705L492.172,1703.6L491.886,1702.19L491.603,1700.8L491.321,1699.39L491.041,1697.99L490.764,1696.58L490.489,1695.18L490.216,1693.77L489.945,1692.37L489.676,1690.96L489.41,1689.55L489.145,1688.14L488.883,1686.73L488.623,1685.33L488.365,1683.91L488.11,1682.51L487.855,1681.09L487.604,1679.68L487.355,1678.27L487.108,1676.85L486.863,1675.44L486.619,1674.02L486.379,1672.61L486.141,1671.19L485.904,1669.77L485.67,1668.35L485.438,1666.93L485.209,1665.51L484.981,1664.09L484.755,1662.67L484.532,1661.25L484.311,1659.83L484.092,1658.4L483.876,1656.98L483.661,1655.56L483.449,1654.13L483.239,1652.7L483.031,1651.28L482.825,1649.85L482.622,1648.42L482.421,1647L482.222,1645.57L482.024,1644.13L481.83,1642.7L481.638,1641.28L481.447,1639.84L481.259,1638.41L481.073,1636.98L480.89,1635.55L480.708,1634.11L480.529,1632.68L480.353,1631.24L480.177,1629.8L480.005,1628.37L479.835,1626.93L479.667,1625.49L479.501,1624.06L479.337,1622.62L479.176,1621.17L479.017,1619.73L478.86,1618.29L478.705,1616.85L478.553,1615.41L478.403,1613.97L478.255,1612.52L478.109,1611.08L477.966,1609.63L477.824,1608.19L477.686,1606.75L477.549,1605.3L477.414,1603.85L477.282,1602.4L477.152,1600.95L477.025,1599.51L476.899,1598.06L476.776,1596.61L476.655,1595.16L476.536,1593.7L476.42,1592.25L476.306,1590.8L476.194,1589.35L476.084,1587.89L475.977,1586.44L475.872,1584.99L475.77,1583.54L475.669,1582.08L475.571,1580.62L475.475,1579.16L475.381,1577.71L475.29,1576.25L475.201,1574.79L475.114,1573.33L475.03,1571.87L474.947,1570.41L474.868,1568.95L474.79,1567.49L474.715,1566.03L474.642,1564.57L474.571,1563.11L474.502,1561.65L474.436,1560.18L474.372,1558.72L474.311,1557.26L474.252,1555.79L474.195,1554.32L474.14,1552.86L474.088,1551.39L474.038,1549.93L473.99,1548.46L473.945,1546.99L473.901,1545.52L473.861,1544.06L473.822,1542.59L473.786,1541.12L473.752,1539.64L473.721,1538.17L473.692,1536.7L473.665,1535.23L473.64,1533.76L473.618,1532.29L473.598,1530.82L473.581,1529.34L473.566,1527.87L473.553,1526.4L473.542,1524.92L473.534,1523.44L473.528,1521.97L473.525,1520.5L473.524,1519.02L473.525,1517.54L473.528,1516.07L473.534,1514.59L473.542,1513.12L473.553,1511.64L473.566,1510.17L473.581,1508.69L473.598,1507.22L473.618,1505.75L473.64,1504.27L473.665,1502.8L473.692,1501.33L473.721,1499.86L473.752,1498.39L473.786,1496.92L473.822,1495.45L473.861,1493.98L473.901,1492.51L473.945,1491.04L473.99,1489.58L474.038,1488.11L474.088,1486.64L474.14,1485.18L474.195,1483.71L474.252,1482.25L474.311,1480.78L474.372,1479.32L474.436,1477.85L474.502,1476.39L474.571,1474.93L474.642,1473.46L474.715,1472L474.79,1470.54L474.868,1469.08L474.947,1467.62L475.03,1466.16L475.114,1464.7L475.201,1463.24L475.29,1461.79L475.381,1460.33L475.475,1458.87L475.571,1457.41L475.669,1455.96L475.77,1454.5L475.872,1453.05L475.977,1451.6L476.084,1450.14L476.194,1448.68L476.306,1447.23L476.42,1445.78L476.536,1444.33L476.655,1442.88L476.776,1441.43L476.899,1439.98L477.025,1438.53L477.152,1437.08L477.282,1435.63L477.414,1434.19L477.549,1432.74L477.686,1431.29L477.824,1429.85L477.966,1428.4L478.109,1426.96L478.255,1425.51L478.403,1424.07L478.553,1422.63L478.705,1421.18L478.86,1419.75L479.017,1418.3L479.176,1416.86L479.337,1415.42L479.501,1413.98L479.667,1412.54L479.835,1411.11L480.005,1409.67L480.177,1408.23L480.353,1406.79L480.529,1405.36L480.708,1403.93L480.89,1402.49L481.073,1401.06L481.259,1399.63L481.447,1398.19L481.638,1396.76L481.83,1395.33L482.024,1393.9L482.222,1392.47L482.421,1391.04L482.622,1389.61L482.825,1388.18L483.031,1386.76L483.239,1385.33L483.449,1383.9L483.661,1382.48L483.876,1381.06L484.092,1379.63L484.311,1378.21L484.532,1376.79L484.755,1375.37L484.981,1373.94L485.209,1372.52L485.438,1371.1L485.67,1369.68L485.904,1368.27L486.141,1366.85L486.379,1365.43L486.62,1364.02L486.863,1362.6L487.108,1361.18L487.355,1359.77L487.604,1358.36L487.855,1356.95L488.11,1355.53L488.365,1354.12L488.623,1352.71L488.883,1351.3L489.145,1349.89L489.41,1348.48L489.676,1347.08L489.945,1345.67L490.216,1344.26L490.489,1342.86L490.764,1341.45L491.041,1340.05L491.321,1338.64L491.603,1337.24L491.886,1335.84L492.172,1334.44L492.461,1333.04L492.751,1331.64L493.043,1330.24L493.336,1328.85L493.633,1327.45L493.933,1326.05L494.233,1324.65L494.536,1323.26L494.841,1321.87L495.148,1320.47L495.457,1319.08L495.768,1317.69L496.082,1316.29L496.398,1314.9L496.715,1313.52L497.035,1312.12L497.357,1310.74L497.681,1309.35L498.007,1307.96L498.335,1306.58L498.666,1305.19L498.998,1303.81L499.332,1302.43L499.669,1301.04L500.008,1299.66L500.348,1298.28L500.69,1296.9L501.036,1295.52L501.384,1294.14L501.732,1292.77L502.083,1291.39L502.436,1290.01L502.792,1288.64L503.15,1287.26L503.509,1285.89L503.87,1284.52L504.234,1283.14L504.6,1281.77L504.967,1280.4L505.337,1279.04L505.709,1277.66L506.083,1276.3L506.459,1274.93L506.836,1273.57L507.217,1272.2L507.599,1270.84L507.984,1269.47L508.37,1268.11L508.757,1266.75L509.148,1265.39L509.541,1264.02L509.934,1262.67L510.33,1261.31L510.73,1259.95L511.13,1258.59L511.533,1257.24L511.938,1255.88L512.344,1254.53L512.752,1253.18L513.163,1251.83L513.576,1250.47L513.991,1249.12L514.406,1247.78L514.825,1246.43L515.247,1245.08L515.67,1243.73L516.094,1242.38L516.521,1241.04L516.95,1239.69L517.379,1238.36L517.813,1237.01L518.249,1235.66L518.686,1234.33L519.124,1232.99L519.564,1231.65L520.006,1230.31L520.452,1228.97L520.899,1227.64L521.347,1226.31L521.798,1224.97L522.251,1223.63L522.706,1222.3L523.162,1220.97L523.62,1219.64L524.082,1218.31L524.545,1216.98L525.01,1215.65L525.476,1214.33L525.942,1213.01L526.415,1211.68L526.889,1210.35L527.36,1209.03L527.837,1207.71L528.318,1206.38L528.797,1205.06L529.278,1203.75L529.763,1202.43L530.249,1201.11L530.739,1199.79L531.228,1198.48L531.719,1197.17L532.215,1195.85L532.709,1194.54L533.208,1193.23L533.708,1191.91L534.207,1190.61L534.713,1189.3L535.219,1187.99L535.724,1186.69L536.236,1185.38L536.748,1184.07L537.259,1182.77L537.775,1181.47L538.293,1180.16L538.812,1178.87L539.334,1177.56L539.856,1176.27L540.382,1174.96L540.908,1173.67L541.434,1172.38L541.966,1171.08L542.502,1169.78L543.034,1168.49L543.568,1167.21L544.109,1165.91L544.649,1164.62L545.191,1163.33L545.736,1162.04L546.28,1160.76L546.827,1159.47L547.379,1158.18L547.928,1156.9L548.481,1155.62L549.039,1154.34L549.596,1153.06L550.155,1151.78L550.716,1150.5L551.277,1149.22L551.842,1147.95L552.41,1146.67L552.979,1145.39L553.548,1144.12L554.118,1142.85L554.694,1141.58L555.271,1140.31L555.849,1139.04L556.429,1137.77L557.007,1136.51L557.591,1135.24L558.177,1133.97L558.765,1132.71L559.354,1131.44L559.944,1130.18L560.535,1128.92L561.131,1127.66L561.728,1126.4L562.327,1125.14L562.926,1123.89L563.527,1122.63L564.129,1121.38L564.736,1120.13L565.345,1118.87L565.953,1117.62L566.563,1116.37L567.173,1115.13L567.792,1113.87L568.412,1112.62L569.025,1111.38L569.645,1110.14L570.268,1108.89L570.892,1107.65L571.517,1106.41L572.144,1105.17L572.775,1103.93L573.406,1102.69L574.038,1101.45L574.673,1100.22L575.309,1098.98L575.945,1097.75L576.587,1096.52L577.232,1095.28L577.873,1094.06L578.516,1092.83L579.163,1091.6L579.815,1090.37L580.466,1089.14L581.119,1087.92L581.772,1086.7L582.426,1085.48L583.084,1084.26L583.747,1083.03L584.409,1081.81L585.068,1080.6L585.734,1079.38L586.404,1078.16L587.071,1076.95L587.74,1075.74L588.413,1074.52L589.088,1073.31L589.765,1072.1L590.441,1070.89L591.116,1069.69L591.798,1068.48L592.485,1067.27L593.168,1066.06L593.853,1064.86L594.54,1063.66L595.232,1062.46L595.925,1061.26L596.615,1060.06L597.309,1058.87L598.007,1057.67L598.708,1056.47L599.407,1055.28L600.108,1054.09L600.812,1052.89L601.514,1051.71L602.223,1050.52L602.934,1049.32L603.642,1048.14L604.357,1046.95L605.073,1045.76L605.783,1044.59L606.498,1043.41L607.223,1042.22L607.944,1041.04L608.663,1039.87L609.391,1038.68L610.117,1037.51L610.842,1036.34L611.572,1035.16L612.304,1033.99L613.038,1032.82L613.773,1031.64L614.507,1030.48L615.242,1029.32L615.986,1028.14L616.728,1026.97L617.466,1025.82L618.211,1024.65L618.962,1023.49L619.712,1022.32L620.46,1021.17L621.206,1020.02L621.961,1018.86L622.72,1017.69L623.472,1016.55L624.232,1015.39L624.994,1014.24L625.754,1013.09L626.519,1011.93L627.282,1010.79L628.048,1009.64L628.815,1008.5L629.587,1007.35L630.358,1006.21L631.133,1005.06L631.908,1003.92L632.679,1002.79L633.462,1001.64L634.242,1000.51L635.021,999.374L635.807,998.235L636.59,997.105L637.374,995.975L638.162,994.844L638.955,993.71L639.746,992.581L640.54,991.454L641.335,990.327L642.129,989.205L642.927,988.082L643.727,986.959L644.529,985.838L645.33,984.72L646.137,983.598L646.943,982.481L647.749,981.368L648.558,980.253L649.367,979.142L650.182,978.027L650.997,976.915L651.813,975.806L652.631,974.697L653.448,973.593L654.268,972.487L655.091,971.382L655.915,970.278L656.741,969.176L657.566,968.079L658.395,966.979L659.228,965.877L660.058,964.783L660.892,963.687L661.729,962.59L662.564,961.501L663.4,960.412L664.243,959.318L665.082,958.232L665.925,957.145L666.773,956.054L667.615,954.975L668.462,953.892L669.317,952.802L670.166,951.724L671.016,950.647L671.873,949.566L672.727,948.491L673.584,947.416L674.446,946.338L675.304,945.267L676.164,944.198L677.028,943.128L677.893,942.058L678.763,940.987L679.631,939.92L680.499,938.858L681.37,937.794L682.241,936.734L683.116,935.673L683.995,934.61L684.87,933.555L685.749,932.497L686.63,931.441L687.513,930.386L688.397,929.333L689.282,928.281L690.172,927.227L691.055,926.185L691.943,925.14L692.837,924.09L693.731,923.045L694.626,922.001L695.522,920.959L696.42,919.918L697.316,918.881L698.22,917.839L699.123,916.802L700.021,915.773L700.929,914.736L701.836,913.703L702.745,912.671L703.655,911.641L704.561,910.619L705.477,909.588L706.394,908.559L707.307,907.538L708.222,906.518L709.141,905.496L710.067,904.469L710.987,903.453L711.908,902.439L712.833,901.423L713.756,900.411L714.687,899.394L715.617,898.382L716.545,897.375L717.481,896.362L718.415,895.355L719.347,894.351L720.284,893.346L721.223,892.342L722.163,891.34L723.104,890.34L724.047,889.34L724.992,888.342L725.935,887.349L726.882,886.354L727.831,885.36L728.779,884.371L729.733,883.377L730.687,882.387L731.638,881.402L732.595,880.416L733.555,879.428L734.511,878.447L735.469,877.468L736.434,876.484L737.397,875.504L738.362,874.526L739.326,873.553L740.294,872.578L741.263,871.604L742.234,870.632L743.206,869.661L744.177,868.695L745.155,867.724L746.131,866.758L747.106,865.796L748.086,864.832L749.069,863.867L750.049,862.909L751.03,861.953L752.018,860.993L753.001,860.039L753.989,859.085L754.982,858.128L755.97,857.179L756.959,856.232L757.958,855.278L758.954,854.33L759.944,853.39L760.942,852.445L761.942,851.502L762.945,850.558L763.944,849.621L764.945,848.685L765.953,847.745L766.96,846.81L767.964,845.879L768.973,844.946L769.984,844.015L770.996,843.085L772.013,842.154L773.025,841.231L774.041,840.306L775.055,839.385L776.074,838.462L777.098,837.539L778.113,836.626L779.14,835.705L780.164,834.789L781.19,833.875L782.218,832.962L783.243,832.053L784.276,831.14L785.305,830.234L786.338,829.327L787.372,828.422L788.404,827.521L789.441,826.618L790.483,825.714L791.522,824.815L792.561,823.92L793.603,823.024L794.646,822.129L795.692,821.235L796.739,820.343L797.786,819.453L798.835,818.565L799.883,817.68L800.932,816.798L801.991,815.908L803.046,815.025L804.096,814.15L805.153,813.271L806.212,812.393L807.275,811.514L808.333,810.641L809.396,809.768L810.463,808.894L811.522,808.029L812.592,807.158L813.66,806.291L814.726,805.429L815.8,804.562L816.869,803.702L817.94,802.844L819.018,801.982L820.093,801.125L821.168,800.271L822.249,799.414L823.33,798.561L824.408,797.713L825.49,796.863L826.571,796.018L827.656,795.171L828.749,794.321L829.834,793.48L830.92,792.641L832.014,791.798L833.103,790.962L834.192,790.128L835.289,789.29L836.389,788.453L837.479,787.626L838.577,786.796L839.681,785.964L840.778,785.139L841.88,784.313L842.984,783.489L844.089,782.666L845.195,781.846L846.299,781.029L847.408,780.211L848.517,779.395L849.629,778.58L850.744,777.765L851.855,776.956L852.97,776.147L854.083,775.341L855.2,774.535L856.319,773.73L857.439,772.927L858.564,772.123L859.684,771.325L860.807,770.527L861.929,769.733L863.056,768.938L864.183,768.144L865.312,767.353L866.446,766.56L867.574,765.774L868.707,764.988L869.84,764.203L870.976,763.419L872.109,762.64L873.243,761.862L874.389,761.078L875.526,760.304L876.664,759.531L877.81,758.756L878.954,757.984L880.099,757.213L881.242,756.447L882.39,755.68L883.539,754.915L884.689,754.152L885.84,753.39L886.99,752.632L888.147,751.871L889.305,751.112L890.454,750.362L891.608,749.61L892.771,748.856L893.93,748.106L895.088,747.36L896.251,746.613L897.418,745.866L898.582,745.123L899.744,744.384L900.912,743.643L902.083,742.903L903.249,742.169L904.418,741.436L905.59,740.702L906.761,739.972L907.936,739.242L909.112,738.514L910.288,737.788L911.466,737.063L912.645,736.34L913.827,735.618L915.008,734.899L916.186,734.184L917.37,733.468L918.556,732.753L919.743,732.04L920.928,731.331L922.113,730.624L923.308,729.913L924.498,729.208L925.687,728.506L926.881,727.804L928.071,727.106L929.27,726.405L930.467,725.708L931.665,725.013L932.861,724.322L934.061,723.63L935.265,722.938L936.465,722.251L937.669,721.565L938.873,720.88L940.077,720.199L941.284,719.518L942.496,718.836L943.7,718.161L944.91,717.486L946.123,716.811L947.333,716.14L948.551,715.468L949.765,714.8L950.978,714.134L952.196,713.469L953.415,712.805L954.634,712.144L955.853,711.485L957.078,710.825L958.297,710.171L959.523,709.515L960.749,708.862L961.969,708.214L963.201,707.563L964.432,706.914L965.655,706.272L966.89,705.626L968.121,704.984L969.349,704.346L970.588,703.706L971.818,703.072L973.053,702.437L974.297,701.801L975.532,701.172L976.773,700.542L978.011,699.916L979.249,699.292L980.495,698.666L981.742,698.043L982.984,697.424L984.231,696.805L985.478,696.189L986.723,695.576L987.972,694.963L989.223,694.351L990.477,693.741L991.728,693.134L992.979,692.53L994.236,691.925L995.492,691.323L996.746,690.724L998.004,690.126L999.262,689.53L1000.52,688.934L1001.78,688.342L1003.05,687.751L1004.31,687.162L1005.57,686.576L1006.84,685.99L1008.11,685.405L1009.37,684.826L1010.64,684.246L1011.91,683.669L1013.18,683.092L1014.45,682.517L1015.72,681.947L1017,681.376L1018.27,680.807L1019.55,680.24L1020.82,679.676L1022.1,679.113L1023.38,678.552L1024.66,677.994L1025.94,677.434L1027.22,676.879L1028.5,676.329L1029.79,675.776L1031.08,675.225L1032.36,674.678L1033.65,674.132L1034.93,673.591L1036.22,673.047L1037.52,672.505L1038.81,671.967L1040.09,671.433L1041.38,670.899L1042.69,670.363L1043.98,669.833L1045.27,669.306L1046.57,668.778L1047.87,668.254L1049.17,667.731L1050.47,667.21L1051.76,666.693L1053.07,666.174L1054.38,665.657L1055.67,665.146L1056.98,664.634L1058.29,664.124L1059.6,663.615L1060.9,663.11L1062.21,662.607L1063.52,662.106L1064.83,661.606L1066.14,661.107L1067.45,660.612L1068.77,660.117L1070.08,659.627L1071.4,659.136L1072.71,658.647L1074.03,658.161L1075.35,657.677L1076.67,657.195L1077.99,656.714L1079.31,656.235L1080.63,655.761L1081.96,655.284L1083.28,654.812L1084.6,654.342L1085.93,653.874L1087.25,653.408L1088.59,652.942L1089.91,652.48L1091.25,652.018L1092.57,651.561L1093.9,651.105L1095.24,650.647L1096.57,650.195L1097.9,649.746L1099.24,649.297L1100.58,648.849L1101.91,648.404L1103.25,647.963L1104.59,647.522L1105.93,647.083L1107.27,646.647L1108.61,646.211L1109.95,645.778L1111.3,645.348L1112.64,644.919L1113.99,644.491L1115.34,644.067L1116.68,643.645L1118.03,643.225L1119.37,642.806L1120.73,642.388L1122.08,641.973L1123.43,641.561L1124.78,641.151L1126.13,640.742L1127.49,640.335L1128.84,639.931L1130.2,639.528L1131.56,639.127L1132.91,638.73L1134.27,638.332L1135.63,637.938L1136.99,637.546L1138.35,637.156L1139.71,636.768L1141.07,636.382L1142.44,635.996L1143.81,635.614L1145.16,635.236L1146.53,634.857L1147.9,634.48L1149.27,634.107L1150.64,633.735L1152,633.366L1153.38,632.998L1154.75,632.632L1156.12,632.268L1157.49,631.906L1158.87,631.546L1160.24,631.19L1161.61,630.836L1162.99,630.482L1164.37,630.129L1165.75,629.78L1167.12,629.434L1168.5,629.09L1169.88,628.747L1171.26,628.406L1172.65,628.066L1174.03,627.73L1175.41,627.396L1176.8,627.064L1178.18,626.734L1179.57,626.405L1180.95,626.079L1182.34,625.755L1183.73,625.433L1185.12,625.113L1186.51,624.796L1187.89,624.481L1189.29,624.166L1190.68,623.855L1192.07,623.546L1193.47,623.238L1194.86,622.934L1196.25,622.631L1197.65,622.331L1199.05,622.031L1200.44,621.735L1201.84,621.441L1203.25,621.147L1204.64,620.859L1206.04,620.571L1207.44,620.284L1208.85,620L1210.24,619.72L1211.65,619.439L1213.06,619.161L1214.46,618.887L1215.86,618.614L1217.27,618.344L1218.68,618.075L1220.09,617.808L1221.5,617.543L1222.9,617.282L1224.31,617.021L1225.73,616.763L1227.13,616.508L1228.55,616.253L1229.96,616.002L1231.38,615.752L1232.79,615.505L1234.2,615.261L1235.61,615.018L1237.03,614.777L1238.45,614.538L1239.87,614.302L1241.29,614.068L1242.7,613.837L1244.12,613.607L1245.55,613.379L1246.97,613.153L1248.39,612.931L1249.81,612.71L1251.23,612.491L1252.66,612.274L1254.08,612.059L1255.51,611.847L1256.93,611.637L1258.36,611.429L1259.79,611.223L1261.21,611.02L1262.64,610.819L1264.07,610.619L1265.5,610.423L1266.93,610.228L1268.37,610.035L1269.8,609.845L1271.22,609.658L1272.66,609.471L1274.1,609.287L1275.52,609.107L1276.96,608.927L1278.4,608.75L1279.84,608.575L1281.27,608.403L1282.71,608.233L1284.15,608.065L1285.58,607.899L1287.03,607.735L1288.46,607.574L1289.9,607.415L1291.34,607.258L1292.79,607.103L1294.23,606.951L1295.67,606.801L1297.12,606.652L1298.56,606.507L1300,606.364L1301.45,606.222L1302.9,606.083L1304.34,605.947L1305.79,605.813L1307.24,605.68L1308.69,605.55L1310.13,605.423L1311.58,605.297L1313.03,605.174L1314.48,605.053L1315.93,604.934L1317.39,604.818L1318.83,604.704L1320.29,604.592L1321.74,604.483L1323.2,604.375L1324.65,604.27L1326.11,604.167L1327.56,604.067L1329.02,603.969L1330.47,603.873L1331.93,603.779L1333.39,603.688L1334.84,603.599L1336.3,603.512L1337.76,603.428L1339.22,603.346L1340.68,603.265L1342.15,603.188L1343.61,603.112L1345.06,603.04L1346.53,602.969L1347.99,602.9L1349.45,602.834L1350.92,602.77L1352.38,602.709L1353.84,602.65L1355.31,602.593L1356.78,602.538L1358.25,602.486L1359.71,602.436L1361.17,602.388L1362.64,602.343L1364.12,602.299L1365.58,602.259L1367.05,602.22L1368.52,602.184L1369.99,602.15L1371.46,602.119L1372.93,602.09L1374.4,602.063L1375.87,602.038L1377.35,602.016L1378.82,601.996L1380.3,601.979L1381.77,601.964L1383.24,601.951L1384.71,601.94L1386.2,601.932L1387.67,601.926L1389.14,601.923L1390.62,601.922L1392.1,601.923ZM1389.47,805.235L1388.31,805.238L1387.16,805.243L1386.01,805.249L1384.86,805.257L1383.7,805.267L1382.55,805.279L1381.4,805.293L1380.25,805.308L1379.1,805.326L1377.95,805.345L1376.8,805.366L1375.65,805.388L1374.5,805.413L1373.36,805.439L1372.21,805.468L1371.06,805.498L1369.91,805.529L1368.77,805.563L1367.62,805.599L1366.48,805.636L1365.33,805.675L1364.19,805.716L1363.05,805.758L1361.9,805.803L1360.76,805.849L1359.62,805.897L1358.48,805.947L1357.33,805.998L1356.19,806.052L1355.05,806.107L1353.91,806.164L1352.77,806.223L1351.63,806.283L1350.49,806.345L1349.36,806.41L1348.22,806.475L1347.08,806.543L1345.94,806.613L1344.81,806.684L1343.67,806.757L1342.54,806.832L1341.4,806.908L1340.27,806.986L1339.13,807.066L1338,807.148L1336.87,807.232L1335.74,807.317L1334.6,807.404L1333.47,807.493L1332.34,807.584L1331.21,807.676L1330.08,807.771L1328.95,807.867L1327.82,807.964L1326.69,808.064L1325.57,808.165L1324.44,808.268L1323.31,808.373L1322.18,808.479L1321.06,808.587L1319.93,808.697L1318.81,808.809L1317.68,808.922L1316.56,809.038L1315.44,809.155L1314.31,809.273L1313.19,809.394L1312.07,809.516L1310.95,809.64L1309.83,809.765L1308.71,809.893L1307.59,810.022L1306.47,810.152L1305.35,810.285L1304.23,810.419L1303.11,810.555L1302,810.693L1300.88,810.832L1299.76,810.974L1298.65,811.116L1297.53,811.261L1296.42,811.407L1295.3,811.555L1294.19,811.705L1293.08,811.857L1291.96,812.01L1290.85,812.165L1289.74,812.321L1288.63,812.479L1287.52,812.639L1286.41,812.801L1285.3,812.965L1284.19,813.13L1283.09,813.297L1281.98,813.465L1280.87,813.635L1279.77,813.807L1278.66,813.981L1277.56,814.156L1276.45,814.333L1275.35,814.512L1274.24,814.692L1273.14,814.874L1272.04,815.058L1270.94,815.243L1269.83,815.43L1268.73,815.619L1267.63,815.81L1266.53,816.002L1265.43,816.196L1264.34,816.391L1263.24,816.588L1262.14,816.787L1261.05,816.988L1259.95,817.19L1258.85,817.394L1257.76,817.6L1256.66,817.807L1255.57,818.016L1254.48,818.226L1253.39,818.438L1252.29,818.652L1251.2,818.868L1250.11,819.085L1249.02,819.304L1247.93,819.525L1246.84,819.747L1245.76,819.971L1244.67,820.196L1243.58,820.423L1242.49,820.652L1241.41,820.882L1240.32,821.114L1239.24,821.348L1238.15,821.584L1237.07,821.821L1235.99,822.059L1234.9,822.3L1233.82,822.541L1232.74,822.785L1231.66,823.03L1230.58,823.277L1229.5,823.526L1228.42,823.776L1227.35,824.027L1226.27,824.281L1225.19,824.536L1224.12,824.792L1223.04,825.051L1221.97,825.311L1220.89,825.572L1219.82,825.835L1218.75,826.1L1217.67,826.366L1216.6,826.634L1215.53,826.904L1214.46,827.175L1213.39,827.448L1212.32,827.722L1211.25,827.998L1210.19,828.276L1209.12,828.555L1208.05,828.836L1206.99,829.119L1205.92,829.403L1204.86,829.689L1203.79,829.976L1202.73,830.265L1201.67,830.555L1200.61,830.847L1199.55,831.141L1198.48,831.436L1197.42,831.733L1196.37,832.031L1195.31,832.332L1194.25,832.633L1193.19,832.936L1192.13,833.241L1191.08,833.548L1190.02,833.856L1188.97,834.165L1187.91,834.476L1186.86,834.789L1185.81,835.103L1184.76,835.419L1183.71,835.736L1182.66,836.055L1181.61,836.376L1180.56,836.698L1179.51,837.022L1178.46,837.347L1177.41,837.674L1176.37,838.003L1175.32,838.332L1174.28,838.664L1173.23,838.997L1172.19,839.332L1171.15,839.668L1170.1,840.006L1169.06,840.345L1168.02,840.686L1166.98,841.029L1165.94,841.373L1164.9,841.718L1163.87,842.065L1162.83,842.414L1161.79,842.764L1160.76,843.116L1159.72,843.469L1158.68,843.824L1157.65,844.18L1156.62,844.538L1155.59,844.897L1154.56,845.258L1153.52,845.621L1152.49,845.985L1151.46,846.351L1150.44,846.718L1149.41,847.086L1148.38,847.456L1147.35,847.828L1146.33,848.201L1145.3,848.576L1144.28,848.952L1143.26,849.33L1142.23,849.709L1141.21,850.09L1140.19,850.473L1139.17,850.856L1138.15,851.242L1137.13,851.629L1136.11,852.017L1135.09,852.407L1134.08,852.798L1133.06,853.191L1132.04,853.586L1131.03,853.982L1130.02,854.379L1129,854.778L1127.99,855.178L1126.98,855.58L1125.97,855.984L1124.96,856.389L1123.95,856.795L1122.94,857.203L1121.93,857.612L1120.92,858.023L1119.92,858.436L1118.91,858.85L1117.91,859.265L1116.9,859.682L1115.9,860.1L1114.9,860.52L1113.89,860.941L1112.89,861.364L1111.89,861.788L1110.89,862.214L1109.9,862.641L1108.9,863.07L1107.9,863.5L1106.9,863.932L1105.91,864.365L1104.91,864.799L1103.92,865.235L1102.93,865.673L1101.93,866.112L1100.94,866.552L1099.95,866.994L1098.96,867.438L1097.97,867.882L1096.99,868.329L1096,868.776L1095.01,869.226L1094.03,869.676L1093.04,870.128L1092.06,870.582L1091.07,871.037L1090.09,871.493L1089.11,871.951L1088.13,872.41L1087.14,872.871L1086.17,873.333L1085.19,873.797L1084.21,874.262L1083.23,874.729L1082.26,875.197L1081.28,875.666L1080.31,876.137L1079.33,876.609L1078.36,877.083L1077.39,877.558L1076.41,878.035L1075.44,878.513L1074.47,878.992L1073.51,879.473L1072.54,879.955L1071.57,880.439L1070.6,880.924L1069.64,881.411L1068.67,881.899L1067.71,882.388L1066.75,882.879L1065.79,883.371L1064.82,883.865L1063.86,884.36L1062.9,884.856L1061.94,885.354L1060.99,885.853L1060.03,886.354L1059.07,886.856L1058.12,887.359L1057.16,887.864L1056.21,888.37L1055.26,888.878L1054.31,889.387L1053.35,889.898L1052.4,890.409L1051.45,890.923L1050.51,891.437L1049.56,891.953L1048.61,892.471L1047.66,892.99L1046.72,893.51L1045.78,894.031L1044.83,894.554L1043.89,895.079L1042.95,895.604L1042.01,896.131L1041.07,896.66L1040.13,897.19L1039.19,897.721L1038.25,898.254L1037.32,898.788L1036.38,899.323L1035.45,899.86L1034.51,900.398L1033.58,900.937L1032.65,901.478L1031.72,902.02L1030.79,902.564L1029.86,903.109L1028.93,903.655L1028,904.203L1027.08,904.752L1026.15,905.302L1025.22,905.854L1024.3,906.407L1023.38,906.961L1022.46,907.517L1021.53,908.074L1020.61,908.633L1019.7,909.192L1018.78,909.754L1017.86,910.316L1016.94,910.88L1016.03,911.445L1015.11,912.012L1014.2,912.579L1013.28,913.149L1012.37,913.719L1011.46,914.291L1010.55,914.864L1009.64,915.439L1008.73,916.015L1007.83,916.592L1006.92,917.17L1006.01,917.75L1005.11,918.331L1004.21,918.914L1003.3,919.498L1002.4,920.083L1001.5,920.669L1000.6,921.257L999.702,921.846L998.804,922.437L997.906,923.028L997.01,923.621L996.115,924.216L995.221,924.811L994.327,925.408L993.435,926.006L992.543,926.606L991.653,927.207L990.763,927.809L989.874,928.413L988.987,929.017L988.1,929.623L987.214,930.231L986.329,930.84L985.446,931.449L984.563,932.061L983.681,932.673L982.8,933.287L981.92,933.902L981.041,934.519L980.163,935.136L979.286,935.755L978.41,936.376L977.534,936.997L976.66,937.62L975.787,938.244L974.915,938.87L974.043,939.496L973.173,940.124L972.304,940.753L971.436,941.384L970.568,942.016L969.702,942.649L968.837,943.283L967.972,943.919L967.109,944.555L966.246,945.194L965.385,945.833L964.525,946.474L963.665,947.115L962.807,947.759L961.949,948.403L961.093,949.049L960.237,949.696L959.383,950.344L958.53,950.993L957.677,951.644L956.826,952.296L955.975,952.949L955.126,953.603L954.278,954.259L953.43,954.916L952.584,955.574L951.738,956.233L950.894,956.894L950.051,957.556L949.209,958.219L948.367,958.883L947.527,959.549L946.688,960.216L945.849,960.884L945.012,961.553L944.176,962.224L943.341,962.895L942.507,963.568L941.674,964.242L940.842,964.918L940.011,965.594L939.181,966.272L938.352,966.951L937.524,967.632L936.697,968.313L935.871,968.996L935.046,969.68L934.222,970.365L933.4,971.051L932.578,971.739L931.757,972.427L930.938,973.117L930.119,973.809L929.302,974.501L928.485,975.195L927.67,975.889L926.856,976.585L926.042,977.282L925.23,977.981L924.419,978.68L923.609,979.381L922.8,980.083L921.992,980.786L921.185,981.491L920.379,982.196L919.574,982.903L918.771,983.611L917.968,984.32L917.166,985.03L916.366,985.742L915.567,986.454L914.768,987.168L913.971,987.883L913.175,988.599L912.38,989.317L911.586,990.035L910.793,990.755L910.001,991.476L909.21,992.198L908.42,992.921L907.632,993.645L906.844,994.371L906.058,995.097L905.272,995.825L904.488,996.554L903.705,997.285L902.923,998.016L902.142,998.748L901.362,999.482L900.583,1000.22L899.806,1000.95L899.029,1001.69L898.254,1002.43L897.479,1003.17L896.706,1003.91L895.934,1004.65L895.163,1005.39L894.393,1006.14L893.624,1006.88L892.857,1007.63L892.09,1008.38L891.325,1009.12L890.56,1009.87L889.797,1010.63L889.035,1011.38L888.274,1012.13L887.514,1012.88L886.755,1013.64L885.998,1014.4L885.241,1015.15L884.486,1015.91L883.732,1016.67L882.979,1017.43L882.227,1018.2L881.476,1018.96L880.726,1019.72L879.977,1020.49L879.23,1021.25L878.484,1022.02L877.739,1022.79L876.995,1023.56L876.252,1024.33L875.51,1025.1L874.77,1025.88L874.03,1026.65L873.292,1027.43L872.555,1028.2L871.819,1028.98L871.084,1029.76L870.35,1030.54L869.618,1031.32L868.887,1032.1L868.156,1032.89L867.427,1033.67L866.699,1034.46L865.973,1035.24L865.247,1036.03L864.523,1036.82L863.8,1037.61L863.078,1038.4L862.357,1039.19L861.637,1039.98L860.919,1040.78L860.201,1041.57L859.485,1042.37L858.77,1043.17L858.056,1043.96L857.344,1044.76L856.632,1045.57L855.922,1046.37L855.213,1047.17L854.505,1047.97L853.798,1048.78L853.093,1049.58L852.388,1050.39L851.685,1051.2L850.983,1052.01L850.282,1052.82L849.583,1053.63L848.884,1054.44L848.187,1055.25L847.491,1056.07L846.797,1056.88L846.103,1057.7L845.411,1058.52L844.719,1059.34L844.029,1060.15L843.341,1060.98L842.653,1061.8L841.967,1062.62L841.282,1063.44L840.598,1064.27L839.915,1065.1L839.234,1065.92L838.553,1066.75L837.874,1067.58L837.196,1068.41L836.52,1069.24L835.844,1070.07L835.17,1070.9L834.497,1071.74L833.826,1072.57L833.155,1073.41L832.486,1074.25L831.818,1075.09L831.151,1075.92L830.485,1076.77L829.821,1077.61L829.158,1078.45L828.496,1079.29L827.835,1080.14L827.176,1080.98L826.518,1081.83L825.861,1082.68L825.205,1083.52L824.551,1084.37L823.898,1085.22L823.246,1086.08L822.595,1086.93L821.946,1087.78L821.298,1088.64L820.651,1089.49L820.005,1090.35L819.361,1091.2L818.717,1092.06L818.076,1092.92L817.435,1093.78L816.796,1094.64L816.157,1095.51L815.521,1096.37L814.885,1097.24L814.251,1098.1L813.618,1098.97L812.986,1099.83L812.355,1100.7L811.726,1101.57L811.098,1102.44L810.472,1103.31L809.846,1104.18L809.222,1105.06L808.599,1105.93L807.978,1106.81L807.357,1107.68L806.738,1108.56L806.121,1109.44L805.504,1110.32L804.889,1111.2L804.275,1112.08L803.663,1112.96L803.051,1113.84L802.441,1114.73L801.833,1115.61L801.225,1116.5L800.619,1117.38L800.015,1118.27L799.411,1119.16L798.809,1120.05L798.208,1120.94L797.608,1121.83L797.01,1122.73L796.413,1123.62L795.818,1124.51L795.223,1125.41L794.63,1126.3L794.038,1127.2L793.448,1128.1L792.859,1129L792.271,1129.9L791.685,1130.8L791.1,1131.7L790.516,1132.6L789.933,1133.51L789.352,1134.41L788.772,1135.32L788.194,1136.23L787.617,1137.13L787.041,1138.04L786.466,1138.95L785.893,1139.86L785.321,1140.77L784.751,1141.68L784.181,1142.6L783.614,1143.51L783.047,1144.42L782.482,1145.34L781.918,1146.26L781.356,1147.17L780.794,1148.09L780.235,1149.01L779.676,1149.93L779.119,1150.85L778.563,1151.78L778.009,1152.7L777.456,1153.62L776.904,1154.55L776.354,1155.47L775.805,1156.4L775.257,1157.33L774.711,1158.26L774.166,1159.18L773.622,1160.12L773.08,1161.05L772.539,1161.98L772,1162.91L771.462,1163.84L770.925,1164.78L770.39,1165.71L769.856,1166.65L769.323,1167.59L768.792,1168.53L768.262,1169.46L767.733,1170.4L767.206,1171.35L766.681,1172.29L766.156,1173.23L765.633,1174.17L765.112,1175.12L764.592,1176.06L764.073,1177.01L763.555,1177.96L763.039,1178.9L762.525,1179.85L762.011,1180.8L761.5,1181.75L760.989,1182.7L760.48,1183.65L759.972,1184.61L759.466,1185.56L758.961,1186.52L758.458,1187.47L757.956,1188.43L757.455,1189.38L756.956,1190.34L756.458,1191.3L755.962,1192.26L755.466,1193.22L754.973,1194.18L754.481,1195.14L753.99,1196.11L753.501,1197.07L753.013,1198.04L752.526,1199L752.041,1199.97L751.557,1200.94L751.075,1201.9L750.594,1202.87L750.115,1203.84L749.637,1204.81L749.16,1205.79L748.685,1206.76L748.211,1207.73L747.739,1208.7L747.268,1209.68L746.799,1210.65L746.331,1211.63L745.864,1212.61L745.399,1213.59L744.935,1214.56L744.473,1215.54L744.012,1216.52L743.553,1217.51L743.095,1218.49L742.639,1219.47L742.184,1220.45L741.73,1221.44L741.278,1222.42L740.828,1223.41L740.378,1224.4L739.931,1225.38L739.484,1226.37L739.04,1227.36L738.596,1228.35L738.154,1229.34L737.714,1230.33L737.275,1231.33L736.837,1232.32L736.401,1233.31L735.967,1234.31L735.534,1235.3L735.102,1236.3L734.672,1237.3L734.243,1238.29L733.816,1239.29L733.39,1240.29L732.966,1241.29L732.543,1242.29L732.122,1243.3L731.702,1244.3L731.284,1245.3L730.867,1246.31L730.452,1247.31L730.038,1248.32L729.625,1249.32L729.214,1250.33L728.805,1251.34L728.397,1252.35L727.991,1253.36L727.586,1254.37L727.182,1255.38L726.78,1256.39L726.38,1257.4L725.981,1258.41L725.584,1259.43L725.188,1260.44L724.793,1261.46L724.4,1262.47L724.009,1263.49L723.619,1264.51L723.231,1265.53L722.844,1266.55L722.458,1267.57L722.075,1268.59L721.692,1269.61L721.311,1270.63L720.932,1271.65L720.554,1272.68L720.178,1273.7L719.803,1274.73L719.43,1275.75L719.058,1276.78L718.688,1277.81L718.32,1278.83L717.953,1279.86L717.587,1280.89L717.223,1281.92L716.86,1282.95L716.499,1283.98L716.14,1285.02L715.782,1286.05L715.426,1287.08L715.071,1288.12L714.718,1289.15L714.366,1290.19L714.016,1291.23L713.667,1292.26L713.32,1293.3L712.974,1294.34L712.63,1295.38L712.288,1296.42L711.947,1297.46L711.608,1298.5L711.27,1299.54L710.934,1300.59L710.599,1301.63L710.266,1302.67L709.934,1303.72L709.604,1304.77L709.276,1305.81L708.949,1306.86L708.624,1307.91L708.3,1308.95L707.978,1310L707.657,1311.05L707.338,1312.1L707.021,1313.15L706.705,1314.21L706.391,1315.26L706.078,1316.31L705.767,1317.37L705.457,1318.42L705.15,1319.48L704.843,1320.53L704.538,1321.59L704.235,1322.65L703.933,1323.7L703.633,1324.76L703.335,1325.82L703.038,1326.88L702.743,1327.94L702.449,1329L702.157,1330.07L701.867,1331.13L701.578,1332.19L701.29,1333.26L701.005,1334.32L700.721,1335.38L700.438,1336.45L700.157,1337.52L699.878,1338.58L699.6,1339.65L699.324,1340.72L699.05,1341.79L698.777,1342.86L698.506,1343.93L698.236,1345L697.968,1346.07L697.702,1347.14L697.437,1348.22L697.174,1349.29L696.913,1350.37L696.653,1351.44L696.394,1352.52L696.138,1353.59L695.883,1354.67L695.629,1355.75L695.378,1356.82L695.128,1357.9L694.879,1358.98L694.632,1360.06L694.387,1361.14L694.143,1362.22L693.902,1363.3L693.661,1364.39L693.423,1365.47L693.186,1366.55L692.95,1367.64L692.716,1368.72L692.484,1369.81L692.254,1370.89L692.025,1371.98L691.798,1373.07L691.573,1374.15L691.349,1375.24L691.126,1376.33L690.906,1377.42L690.687,1378.51L690.47,1379.6L690.254,1380.69L690.04,1381.78L689.828,1382.88L689.618,1383.97L689.409,1385.06L689.202,1386.16L688.996,1387.25L688.792,1388.35L688.59,1389.44L688.389,1390.54L688.19,1391.64L687.993,1392.74L687.798,1393.83L687.604,1394.93L687.412,1396.03L687.221,1397.13L687.032,1398.23L686.845,1399.33L686.66,1400.43L686.476,1401.54L686.294,1402.64L686.114,1403.74L685.935,1404.85L685.758,1405.95L685.583,1407.06L685.409,1408.16L685.237,1409.27L685.067,1410.38L684.898,1411.48L684.732,1412.59L684.567,1413.7L684.403,1414.81L684.241,1415.92L684.081,1417.03L683.923,1418.14L683.767,1419.25L683.612,1420.36L683.458,1421.48L683.307,1422.59L683.157,1423.7L683.009,1424.82L682.863,1425.93L682.718,1427.05L682.575,1428.16L682.434,1429.28L682.295,1430.39L682.157,1431.51L682.021,1432.63L681.887,1433.75L681.754,1434.87L681.624,1435.98L681.495,1437.1L681.367,1438.23L681.242,1439.35L681.118,1440.47L680.996,1441.59L680.875,1442.71L680.756,1443.83L680.64,1444.96L680.524,1446.08L680.411,1447.21L680.299,1448.33L680.189,1449.46L680.081,1450.58L679.975,1451.71L679.87,1452.84L679.767,1453.96L679.666,1455.09L679.566,1456.22L679.469,1457.35L679.373,1458.48L679.278,1459.61L679.186,1460.74L679.095,1461.87L679.006,1463L678.919,1464.13L678.834,1465.27L678.75,1466.4L678.668,1467.53L678.588,1468.67L678.51,1469.8L678.434,1470.93L678.359,1472.07L678.286,1473.21L678.215,1474.34L678.145,1475.48L678.077,1476.62L678.012,1477.75L677.947,1478.89L677.885,1480.03L677.825,1481.17L677.766,1482.31L677.709,1483.45L677.654,1484.59L677.6,1485.73L677.549,1486.87L677.499,1488.02L677.451,1489.16L677.405,1490.3L677.36,1491.44L677.318,1492.59L677.277,1493.73L677.238,1494.88L677.2,1496.02L677.165,1497.17L677.131,1498.31L677.1,1499.46L677.07,1500.61L677.041,1501.75L677.015,1502.9L676.99,1504.05L676.968,1505.2L676.947,1506.35L676.928,1507.5L676.91,1508.65L676.895,1509.8L676.881,1510.95L676.869,1512.1L676.859,1513.25L676.851,1514.4L676.845,1515.56L676.84,1516.71L676.837,1517.86L676.836,1519.02L676.837,1520.17L676.84,1521.33L676.845,1522.48L676.851,1523.63L676.859,1524.78L676.869,1525.93L676.881,1527.09L676.895,1528.24L676.91,1529.39L676.928,1530.54L676.947,1531.69L676.968,1532.84L676.99,1533.99L677.015,1535.13L677.041,1536.28L677.07,1537.43L677.1,1538.58L677.131,1539.72L677.165,1540.87L677.2,1542.01L677.238,1543.16L677.277,1544.3L677.318,1545.45L677.36,1546.59L677.405,1547.74L677.451,1548.88L677.499,1550.02L677.549,1551.16L677.6,1552.3L677.654,1553.44L677.709,1554.59L677.766,1555.73L677.825,1556.87L677.885,1558.01L677.947,1559.14L678.012,1560.28L678.077,1561.42L678.145,1562.56L678.215,1563.69L678.286,1564.83L678.359,1565.97L678.434,1567.1L678.51,1568.24L678.588,1569.37L678.668,1570.5L678.75,1571.64L678.834,1572.77L678.919,1573.9L679.006,1575.04L679.095,1576.17L679.186,1577.3L679.278,1578.43L679.373,1579.56L679.469,1580.69L679.566,1581.82L679.666,1582.94L679.767,1584.07L679.87,1585.2L679.975,1586.33L680.081,1587.45L680.189,1588.58L680.299,1589.7L680.411,1590.83L680.524,1591.95L680.64,1593.08L680.756,1594.2L680.875,1595.33L680.996,1596.45L681.118,1597.57L681.242,1598.69L681.367,1599.81L681.495,1600.93L681.624,1602.05L681.754,1603.17L681.887,1604.29L682.021,1605.41L682.157,1606.53L682.295,1607.64L682.434,1608.76L682.575,1609.88L682.718,1610.99L682.863,1612.11L683.009,1613.22L683.157,1614.33L683.307,1615.45L683.458,1616.56L683.612,1617.67L683.767,1618.79L683.923,1619.9L684.081,1621.01L684.241,1622.12L684.403,1623.23L684.567,1624.34L684.732,1625.44L684.898,1626.55L685.067,1627.66L685.237,1628.77L685.409,1629.87L685.583,1630.98L685.758,1632.08L685.935,1633.19L686.114,1634.29L686.294,1635.39L686.476,1636.5L686.66,1637.6L686.845,1638.7L687.032,1639.8L687.221,1640.9L687.412,1642L687.604,1643.1L687.798,1644.2L687.993,1645.3L688.19,1646.4L688.389,1647.5L688.59,1648.59L688.792,1649.69L688.996,1650.78L689.202,1651.88L689.409,1652.97L689.618,1654.07L689.828,1655.16L690.04,1656.25L690.254,1657.34L690.47,1658.43L690.687,1659.53L690.906,1660.62L691.126,1661.71L691.349,1662.8L691.573,1663.88L691.798,1664.97L692.025,1666.06L692.254,1667.14L692.484,1668.23L692.716,1669.32L692.95,1670.4L693.186,1671.48L693.423,1672.57L693.661,1673.65L693.902,1674.73L694.143,1675.81L694.387,1676.89L694.632,1677.98L694.879,1679.06L695.128,1680.13L695.378,1681.21L695.629,1682.29L695.883,1683.37L696.138,1684.44L696.394,1685.52L696.653,1686.6L696.913,1687.67L697.174,1688.75L697.437,1689.82L697.702,1690.89L697.968,1691.96L698.236,1693.04L698.506,1694.11L698.777,1695.18L699.05,1696.25L699.324,1697.32L699.6,1698.38L699.878,1699.45L700.157,1700.52L700.438,1701.59L700.721,1702.65L701.005,1703.72L701.29,1704.78L701.578,1705.85L701.867,1706.91L702.157,1707.97L702.449,1709.03L702.743,1710.09L703.038,1711.15L703.335,1712.21L703.633,1713.27L703.933,1714.33L704.235,1715.39L704.538,1716.45L704.843,1717.5L705.15,1718.56L705.457,1719.62L705.767,1720.67L706.078,1721.72L706.391,1722.78L706.705,1723.83L707.021,1724.88L707.338,1725.93L707.657,1726.98L707.978,1728.03L708.3,1729.08L708.624,1730.13L708.949,1731.18L709.276,1732.22L709.604,1733.27L709.934,1734.32L710.266,1735.36L710.599,1736.41L710.934,1737.45L711.27,1738.49L711.608,1739.54L711.947,1740.58L712.288,1741.62L712.63,1742.66L712.974,1743.7L713.32,1744.74L713.667,1745.77L714.016,1746.81L714.366,1747.85L714.718,1748.88L715.071,1749.92L715.426,1750.95L715.782,1751.99L716.14,1753.02L716.499,1754.05L716.86,1755.08L717.223,1756.11L717.587,1757.14L717.953,1758.17L718.32,1759.2L718.688,1760.23L719.058,1761.26L719.43,1762.28L719.803,1763.31L720.178,1764.34L720.554,1765.36L720.932,1766.38L721.311,1767.41L721.692,1768.43L722.075,1769.45L722.458,1770.47L722.844,1771.49L723.231,1772.51L723.619,1773.53L724.009,1774.55L724.4,1775.56L724.793,1776.58L725.188,1777.59L725.584,1778.61L725.981,1779.62L726.38,1780.64L726.78,1781.65L727.182,1782.66L727.586,1783.67L727.991,1784.68L728.397,1785.69L728.805,1786.7L729.214,1787.71L729.625,1788.71L730.038,1789.72L730.452,1790.73L730.867,1791.73L731.284,1792.74L731.702,1793.74L732.122,1794.74L732.543,1795.74L732.966,1796.74L733.39,1797.74L733.816,1798.74L734.243,1799.74L734.672,1800.74L735.102,1801.74L735.534,1802.73L735.967,1803.73L736.401,1804.72L736.837,1805.72L737.275,1806.71L737.714,1807.7L738.154,1808.69L738.596,1809.68L739.04,1810.67L739.484,1811.66L739.931,1812.65L740.378,1813.64L740.828,1814.63L741.278,1815.61L741.73,1816.6L742.184,1817.58L742.639,1818.57L743.095,1819.55L743.553,1820.53L744.012,1821.51L744.473,1822.49L744.935,1823.47L745.399,1824.45L745.864,1825.43L746.331,1826.41L746.799,1827.38L747.268,1828.36L747.739,1829.33L748.211,1830.31L748.685,1831.28L749.16,1832.25L749.637,1833.22L750.115,1834.19L750.594,1835.16L751.075,1836.13L751.557,1837.1L752.041,1838.07L752.526,1839.03L753.013,1840L753.501,1840.96L753.99,1841.93L754.481,1842.89L754.973,1843.85L755.466,1844.81L755.962,1845.78L756.458,1846.73L756.956,1847.69L757.455,1848.65L757.956,1849.61L758.458,1850.57L758.961,1851.52L759.466,1852.48L759.972,1853.43L760.48,1854.38L760.989,1855.33L761.5,1856.28L762.011,1857.24L762.525,1858.18L763.039,1859.13L763.555,1860.08L764.073,1861.03L764.592,1861.97L765.112,1862.92L765.633,1863.86L766.156,1864.81L766.681,1865.75L767.206,1866.69L767.733,1867.63L768.262,1868.57L768.792,1869.51L769.323,1870.45L769.856,1871.38L770.39,1872.32L770.925,1873.26L771.462,1874.19L772,1875.13L772.539,1876.06L773.08,1876.99L773.622,1877.92L774.166,1878.85L774.711,1879.78L775.257,1880.71L775.805,1881.64L776.354,1882.56L776.904,1883.49L777.456,1884.41L778.009,1885.34L778.563,1886.26L779.119,1887.18L779.676,1888.1L780.235,1889.02L780.794,1889.94L781.356,1890.86L781.918,1891.78L782.482,1892.7L783.047,1893.61L783.614,1894.53L784.181,1895.44L784.751,1896.35L785.321,1897.27L785.893,1898.18L786.466,1899.09L787.041,1900L787.617,1900.9L788.194,1901.81L788.772,1902.72L789.352,1903.62L789.933,1904.53L790.516,1905.43L791.1,1906.33L791.685,1907.24L792.271,1908.14L792.859,1909.04L793.448,1909.94L794.038,1910.83L794.63,1911.73L795.223,1912.63L795.818,1913.52L796.413,1914.42L797.01,1915.31L797.608,1916.2L798.208,1917.1L798.809,1917.99L799.411,1918.88L800.015,1919.76L800.619,1920.65L801.225,1921.54L801.833,1922.42L802.441,1923.31L803.051,1924.19L803.663,1925.08L804.275,1925.96L804.889,1926.84L805.504,1927.72L806.121,1928.6L806.738,1929.48L807.357,1930.35L807.978,1931.23L808.599,1932.1L809.222,1932.98L809.846,1933.85L810.472,1934.72L811.098,1935.59L811.726,1936.47L812.355,1937.33L812.986,1938.2L813.618,1939.07L814.251,1939.94L814.885,1940.8L815.521,1941.67L816.157,1942.53L816.796,1943.39L817.435,1944.25L818.076,1945.11L818.717,1945.97L819.361,1946.83L820.005,1947.69L820.651,1948.55L821.298,1949.4L821.946,1950.26L822.595,1951.11L823.246,1951.96L823.898,1952.81L824.551,1953.66L825.205,1954.51L825.861,1955.36L826.518,1956.21L827.176,1957.05L827.835,1957.9L828.496,1958.74L829.158,1959.59L829.821,1960.43L830.485,1961.27L831.151,1962.11L831.818,1962.95L832.486,1963.79L833.155,1964.63L833.826,1965.46L834.497,1966.3L835.17,1967.13L835.844,1967.96L836.52,1968.8L837.196,1969.63L837.874,1970.46L838.553,1971.29L839.234,1972.11L839.915,1972.94L840.598,1973.77L841.282,1974.59L841.967,1975.41L842.653,1976.24L843.341,1977.06L844.029,1977.88L844.719,1978.7L845.411,1979.52L846.103,1980.34L846.797,1981.15L847.491,1981.97L848.187,1982.78L848.884,1983.6L849.583,1984.41L850.282,1985.22L850.983,1986.03L851.685,1986.84L852.388,1987.65L853.093,1988.45L853.798,1989.26L854.505,1990.06L855.213,1990.87L855.922,1991.67L856.632,1992.47L857.344,1993.27L858.056,1994.07L858.77,1994.87L859.485,1995.67L860.201,1996.46L860.919,1997.26L861.637,1998.05L862.357,1998.85L863.078,1999.64L863.8,2000.43L864.523,2001.22L865.247,2002.01L865.973,2002.79L866.699,2003.58L867.427,2004.37L868.156,2005.15L868.887,2005.93L869.618,2006.72L870.35,2007.5L871.084,2008.28L871.819,2009.06L872.555,2009.83L873.292,2010.61L874.03,2011.38L874.77,2012.16L875.51,2012.93L876.252,2013.7L876.995,2014.48L877.739,2015.25L878.484,2016.01L879.23,2016.78L879.977,2017.55L880.726,2018.31L881.476,2019.08L882.227,2019.84L882.979,2020.6L883.732,2021.36L884.486,2022.12L885.241,2022.88L885.998,2023.64L886.755,2024.4L887.514,2025.15L888.274,2025.91L889.035,2026.66L889.797,2027.41L890.56,2028.16L891.325,2028.91L892.09,2029.66L892.857,2030.41L893.624,2031.15L894.393,2031.9L895.163,2032.64L895.934,2033.39L896.706,2034.13L897.479,2034.87L898.254,2035.61L899.029,2036.35L899.806,2037.08L900.583,2037.82L901.362,2038.55L902.142,2039.29L902.923,2040.02L903.705,2040.75L904.488,2041.48L905.272,2042.21L906.058,2042.94L906.844,2043.66L907.632,2044.39L908.42,2045.12L909.21,2045.84L910.001,2046.56L910.793,2047.28L911.586,2048L912.38,2048.72L913.175,2049.44L913.971,2050.15L914.768,2050.87L915.567,2051.58L916.366,2052.29L917.166,2053.01L917.968,2053.72L918.771,2054.43L919.574,2055.13L920.379,2055.84L921.185,2056.55L921.992,2057.25L922.8,2057.95L923.609,2058.66L924.419,2059.36L925.23,2060.05L926.042,2060.75L926.856,2061.45L927.67,2062.15L928.485,2062.84L929.302,2063.53L930.119,2064.23L930.938,2064.92L931.757,2065.61L932.578,2066.3L933.4,2066.99L934.222,2067.67L935.046,2068.36L935.871,2069.04L936.697,2069.72L937.524,2070.4L938.352,2071.09L939.181,2071.76L940.011,2072.44L940.842,2073.12L941.674,2073.79L942.507,2074.47L943.341,2075.14L944.176,2075.81L945.012,2076.48L945.849,2077.15L946.688,2077.82L947.527,2078.49L948.367,2079.15L949.209,2079.82L950.051,2080.48L950.894,2081.14L951.738,2081.8L952.584,2082.46L953.43,2083.12L954.278,2083.78L955.126,2084.43L955.975,2085.09L956.826,2085.74L957.677,2086.39L958.53,2087.04L959.383,2087.69L960.237,2088.34L961.093,2088.99L961.949,2089.63L962.807,2090.28L963.665,2090.92L964.525,2091.56L965.385,2092.2L966.246,2092.84L967.109,2093.48L967.972,2094.12L968.837,2094.75L969.702,2095.39L970.568,2096.02L971.436,2096.65L972.304,2097.28L973.173,2097.91L974.043,2098.54L974.915,2099.17L975.787,2099.79L976.66,2100.42L977.534,2101.04L978.41,2101.66L979.286,2102.28L980.163,2102.9L981.041,2103.52L981.92,2104.13L982.8,2104.75L983.681,2105.36L984.563,2105.97L985.446,2106.59L986.329,2107.2L987.214,2107.8L988.1,2108.41L988.987,2109.02L989.874,2109.62L990.763,2110.23L991.653,2110.83L992.543,2111.43L993.435,2112.03L994.327,2112.63L995.221,2113.22L996.115,2113.82L997.01,2114.41L997.906,2115.01L998.804,2115.6L999.702,2116.19L1000.6,2116.78L1001.5,2117.37L1002.4,2117.95L1003.3,2118.54L1004.21,2119.12L1005.11,2119.7L1006.01,2120.29L1006.92,2120.87L1007.83,2121.44L1008.73,2122.02L1009.64,2122.6L1010.55,2123.17L1011.46,2123.74L1012.37,2124.32L1013.28,2124.89L1014.2,2125.46L1015.11,2126.02L1016.03,2126.59L1016.94,2127.16L1017.86,2127.72L1018.78,2128.28L1019.7,2128.84L1020.61,2129.4L1021.53,2129.96L1022.46,2130.52L1023.38,2131.07L1024.3,2131.63L1025.22,2132.18L1026.15,2132.73L1027.08,2133.28L1028,2133.83L1028.93,2134.38L1029.86,2134.93L1030.79,2135.47L1031.72,2136.02L1032.65,2136.56L1033.58,2137.1L1034.51,2137.64L1035.45,2138.18L1036.38,2138.71L1037.32,2139.25L1038.25,2139.78L1039.19,2140.32L1040.13,2140.85L1041.07,2141.38L1042.01,2141.9L1042.95,2142.43L1043.89,2142.96L1044.83,2143.48L1045.78,2144.01L1046.72,2144.53L1047.66,2145.05L1048.61,2145.57L1049.56,2146.08L1050.51,2146.6L1051.45,2147.11L1052.4,2147.63L1053.35,2148.14L1054.31,2148.65L1055.26,2149.16L1056.21,2149.67L1057.16,2150.17L1058.12,2150.68L1059.07,2151.18L1060.03,2151.68L1060.99,2152.18L1061.94,2152.68L1062.9,2153.18L1063.86,2153.68L1064.82,2154.17L1065.79,2154.66L1066.75,2155.16L1067.71,2155.65L1068.67,2156.14L1069.64,2156.63L1070.6,2157.11L1071.57,2157.6L1072.54,2158.08L1073.51,2158.56L1074.47,2159.04L1075.44,2159.52L1076.41,2160L1077.39,2160.48L1078.36,2160.95L1079.33,2161.43L1080.31,2161.9L1081.28,2162.37L1082.26,2162.84L1083.23,2163.31L1084.21,2163.77L1085.19,2164.24L1086.17,2164.7L1087.14,2165.16L1088.13,2165.63L1089.11,2166.09L1090.09,2166.54L1091.07,2167L1092.06,2167.45L1093.04,2167.91L1094.03,2168.36L1095.01,2168.81L1096,2169.26L1096.99,2169.71L1097.97,2170.15L1098.96,2170.6L1099.95,2171.04L1100.94,2171.48L1101.93,2171.92L1102.93,2172.36L1103.92,2172.8L1104.91,2173.24L1105.91,2173.67L1106.9,2174.1L1107.9,2174.54L1108.9,2174.97L1109.9,2175.39L1110.89,2175.82L1111.89,2176.25L1112.89,2176.67L1113.89,2177.1L1114.9,2177.52L1115.9,2177.94L1116.9,2178.35L1117.91,2178.77L1118.91,2179.19L1119.92,2179.6L1120.92,2180.01L1121.93,2180.42L1122.94,2180.83L1123.95,2181.24L1124.96,2181.65L1125.97,2182.05L1126.98,2182.46L1127.99,2182.86L1129,2183.26L1130.02,2183.66L1131.03,2184.05L1132.04,2184.45L1133.06,2184.85L1134.08,2185.24L1135.09,2185.63L1136.11,2186.02L1137.13,2186.41L1138.15,2186.79L1139.17,2187.18L1140.19,2187.56L1141.21,2187.95L1142.23,2188.33L1143.26,2188.71L1144.28,2189.08L1145.3,2189.46L1146.33,2189.84L1147.35,2190.21L1148.38,2190.58L1149.41,2190.95L1150.44,2191.32L1151.46,2191.68L1152.49,2192.05L1153.52,2192.41L1154.56,2192.78L1155.59,2193.14L1156.62,2193.5L1157.65,2193.86L1158.68,2194.21L1159.72,2194.57L1160.76,2194.92L1161.79,2195.27L1162.83,2195.62L1163.87,2195.97L1164.9,2196.32L1165.94,2196.66L1166.98,2197.01L1168.02,2197.35L1169.06,2197.69L1170.1,2198.03L1171.15,2198.37L1172.19,2198.7L1173.23,2199.04L1174.28,2199.37L1175.32,2199.7L1176.37,2200.03L1177.41,2200.36L1178.46,2200.69L1179.51,2201.01L1180.56,2201.34L1181.61,2201.66L1182.66,2201.98L1183.71,2202.3L1184.76,2202.62L1185.81,2202.93L1186.86,2203.25L1187.91,2203.56L1188.97,2203.87L1190.02,2204.18L1191.08,2204.49L1192.13,2204.8L1193.19,2205.1L1194.25,2205.4L1195.31,2205.7L1196.37,2206L1197.42,2206.3L1198.48,2206.6L1199.55,2206.89L1200.61,2207.19L1201.67,2207.48L1202.73,2207.77L1203.79,2208.06L1204.86,2208.35L1205.92,2208.63L1206.99,2208.92L1208.05,2209.2L1209.12,2209.48L1210.19,2209.76L1211.25,2210.04L1212.32,2210.31L1213.39,2210.59L1214.46,2210.86L1215.53,2211.13L1216.6,2211.4L1217.67,2211.67L1218.75,2211.94L1219.82,2212.2L1220.89,2212.46L1221.97,2212.72L1223.04,2212.99L1224.12,2213.24L1225.19,2213.5L1226.27,2213.76L1227.35,2214.01L1228.42,2214.26L1229.5,2214.51L1230.58,2214.76L1231.66,2215.01L1232.74,2215.25L1233.82,2215.49L1234.9,2215.74L1235.99,2215.98L1237.07,2216.22L1238.15,2216.45L1239.24,2216.69L1240.32,2216.92L1241.41,2217.15L1242.49,2217.38L1243.58,2217.61L1244.67,2217.84L1245.76,2218.07L1246.84,2218.29L1247.93,2218.51L1249.02,2218.73L1250.11,2218.95L1251.2,2219.17L1252.29,2219.38L1253.39,2219.6L1254.48,2219.81L1255.57,2220.02L1256.66,2220.23L1257.76,2220.44L1258.85,2220.64L1259.95,2220.85L1261.05,2221.05L1262.14,2221.25L1263.24,2221.45L1264.34,2221.64L1265.43,2221.84L1266.53,2222.03L1267.63,2222.23L1268.73,2222.42L1269.83,2222.61L1270.94,2222.79L1272.04,2222.98L1273.14,2223.16L1274.24,2223.34L1275.35,2223.52L1276.45,2223.7L1277.56,2223.88L1278.66,2224.05L1279.77,2224.23L1280.87,2224.4L1281.98,2224.57L1283.09,2224.74L1284.19,2224.91L1285.3,2225.07L1286.41,2225.24L1287.52,2225.4L1288.63,2225.56L1289.74,2225.72L1290.85,2225.87L1291.96,2226.03L1293.08,2226.18L1294.19,2226.33L1295.3,2226.48L1296.42,2226.63L1297.53,2226.78L1298.65,2226.92L1299.76,2227.06L1300.88,2227.2L1302,2227.34L1303.11,2227.48L1304.23,2227.62L1305.35,2227.75L1306.47,2227.88L1307.59,2228.01L1308.71,2228.14L1309.83,2228.27L1310.95,2228.4L1312.07,2228.52L1313.19,2228.64L1314.31,2228.76L1315.44,2228.88L1316.56,2229L1317.68,2229.11L1318.81,2229.23L1319.93,2229.34L1321.06,2229.45L1322.18,2229.56L1323.31,2229.66L1324.44,2229.77L1325.57,2229.87L1326.69,2229.97L1327.82,2230.07L1328.95,2230.17L1330.08,2230.26L1331.21,2230.36L1332.34,2230.45L1333.47,2230.54L1334.6,2230.63L1335.74,2230.72L1336.87,2230.8L1338,2230.89L1339.13,2230.97L1340.27,2231.05L1341.4,2231.13L1342.54,2231.2L1343.67,2231.28L1344.81,2231.35L1345.94,2231.42L1347.08,2231.49L1348.22,2231.56L1349.36,2231.63L1350.49,2231.69L1351.63,2231.75L1352.77,2231.81L1353.91,2231.87L1355.05,2231.93L1356.19,2231.98L1357.33,2232.04L1358.48,2232.09L1359.62,2232.14L1360.76,2232.19L1361.9,2232.23L1363.05,2232.28L1364.19,2232.32L1365.33,2232.36L1366.48,2232.4L1367.62,2232.44L1368.77,2232.47L1369.91,2232.51L1371.06,2232.54L1372.21,2232.57L1373.36,2232.6L1374.5,2232.62L1375.65,2232.65L1376.8,2232.67L1377.95,2232.69L1379.1,2232.71L1380.25,2232.73L1381.4,2232.74L1382.55,2232.76L1383.7,2232.77L1384.86,2232.78L1386.01,2232.79L1387.16,2232.79L1388.31,2232.8L1389.47,2232.8L1390.62,2232.8L1391.77,2232.8L1392.93,2232.8L1394.08,2232.79L1395.23,2232.79L1396.38,2232.78L1397.54,2232.77L1398.69,2232.76L1399.84,2232.74L1400.99,2232.73L1402.14,2232.71L1403.29,2232.69L1404.44,2232.67L1405.59,2232.65L1406.74,2232.62L1407.88,2232.6L1409.03,2232.57L1410.18,2232.54L1411.33,2232.51L1412.47,2232.47L1413.62,2232.44L1414.76,2232.4L1415.91,2232.36L1417.05,2232.32L1418.19,2232.28L1419.34,2232.23L1420.48,2232.19L1421.62,2232.14L1422.77,2232.09L1423.91,2232.04L1425.05,2231.98L1426.19,2231.93L1427.33,2231.87L1428.47,2231.81L1429.61,2231.75L1430.75,2231.69L1431.88,2231.63L1433.02,2231.56L1434.16,2231.49L1435.3,2231.42L1436.43,2231.35L1437.57,2231.28L1438.7,2231.2L1439.84,2231.13L1440.97,2231.05L1442.11,2230.97L1443.24,2230.89L1444.37,2230.8L1445.51,2230.72L1446.64,2230.63L1447.77,2230.54L1448.9,2230.45L1450.03,2230.36L1451.16,2230.26L1452.29,2230.17L1453.42,2230.07L1454.55,2229.97L1455.67,2229.87L1456.8,2229.77L1457.93,2229.66L1459.06,2229.56L1460.18,2229.45L1461.31,2229.34L1462.43,2229.23L1463.56,2229.11L1464.68,2229L1465.8,2228.88L1466.93,2228.76L1468.05,2228.64L1469.17,2228.52L1470.29,2228.4L1471.41,2228.27L1472.53,2228.14L1473.65,2228.01L1474.77,2227.88L1475.89,2227.75L1477.01,2227.62L1478.13,2227.48L1479.25,2227.34L1480.36,2227.2L1481.48,2227.06L1482.59,2226.92L1483.71,2226.78L1484.82,2226.63L1485.94,2226.48L1487.05,2226.33L1488.16,2226.18L1489.28,2226.03L1490.39,2225.87L1491.5,2225.72L1492.61,2225.56L1493.72,2225.4L1494.83,2225.24L1495.94,2225.07L1497.05,2224.91L1498.15,2224.74L1499.26,2224.57L1500.37,2224.4L1501.47,2224.23L1502.58,2224.05L1503.68,2223.88L1504.79,2223.7L1505.89,2223.52L1507,2223.34L1508.1,2223.16L1509.2,2222.98L1510.3,2222.79L1511.4,2222.61L1512.51,2222.42L1513.61,2222.23L1514.71,2222.03L1515.8,2221.84L1516.9,2221.64L1518,2221.45L1519.1,2221.25L1520.19,2221.05L1521.29,2220.85L1522.39,2220.64L1523.48,2220.44L1524.58,2220.23L1525.67,2220.02L1526.76,2219.81L1527.85,2219.6L1528.95,2219.38L1530.04,2219.17L1531.13,2218.95L1532.22,2218.73L1533.31,2218.51L1534.4,2218.29L1535.49,2218.07L1536.57,2217.84L1537.66,2217.61L1538.75,2217.38L1539.83,2217.15L1540.92,2216.92L1542,2216.69L1543.09,2216.45L1544.17,2216.22L1545.25,2215.98L1546.34,2215.74L1547.42,2215.49L1548.5,2215.25L1549.58,2215.01L1550.66,2214.76L1551.74,2214.51L1552.82,2214.26L1553.89,2214.01L1554.97,2213.76L1556.05,2213.5L1557.12,2213.24L1558.2,2212.99L1559.27,2212.72L1560.35,2212.46L1561.42,2212.2L1562.49,2211.94L1563.57,2211.67L1564.64,2211.4L1565.71,2211.13L1566.78,2210.86L1567.85,2210.59L1568.92,2210.31L1569.99,2210.04L1571.05,2209.76L1572.12,2209.48L1573.19,2209.2L1574.25,2208.92L1575.32,2208.63L1576.38,2208.35L1577.45,2208.06L1578.51,2207.77L1579.57,2207.48L1580.63,2207.19L1581.69,2206.89L1582.76,2206.6L1583.82,2206.3L1584.88,2206L1585.93,2205.7L1586.99,2205.4L1588.05,2205.1L1589.11,2204.8L1590.16,2204.49L1591.22,2204.18L1592.27,2203.87L1593.33,2203.56L1594.38,2203.25L1595.43,2202.93L1596.48,2202.62L1597.53,2202.3L1598.58,2201.98L1599.63,2201.66L1600.68,2201.34L1601.73,2201.01L1602.78,2200.69L1603.83,2200.36L1604.87,2200.03L1605.92,2199.7L1606.96,2199.37L1608.01,2199.04L1609.05,2198.7L1610.09,2198.37L1611.14,2198.03L1612.18,2197.69L1613.22,2197.35L1614.26,2197.01L1615.3,2196.66L1616.34,2196.32L1617.38,2195.97L1618.41,2195.62L1619.45,2195.27L1620.49,2194.92L1621.52,2194.57L1622.56,2194.21L1623.59,2193.86L1624.62,2193.5L1625.65,2193.14L1626.68,2192.78L1627.72,2192.41L1628.75,2192.05L1629.78,2191.68L1630.8,2191.32L1631.83,2190.95L1632.86,2190.58L1633.89,2190.21L1634.91,2189.84L1635.94,2189.46L1636.96,2189.08L1637.99,2188.71L1639.01,2188.33L1640.03,2187.95L1641.05,2187.56L1642.07,2187.18L1643.09,2186.79L1644.11,2186.41L1645.13,2186.02L1646.15,2185.63L1647.16,2185.24L1648.18,2184.85L1649.2,2184.45L1650.21,2184.05L1651.22,2183.66L1652.24,2183.26L1653.25,2182.86L1654.26,2182.46L1655.27,2182.05L1656.28,2181.65L1657.29,2181.24L1658.3,2180.83L1659.31,2180.42L1660.32,2180.01L1661.32,2179.6L1662.33,2179.19L1663.33,2178.77L1664.34,2178.35L1665.34,2177.94L1666.34,2177.52L1667.34,2177.1L1668.35,2176.67L1669.35,2176.25L1670.35,2175.82L1671.34,2175.39L1672.34,2174.97L1673.34,2174.54L1674.34,2174.1L1675.33,2173.67L1676.33,2173.24L1677.32,2172.8L1678.31,2172.36L1679.31,2171.92L1680.3,2171.48L1681.29,2171.04L1682.28,2170.6L1683.27,2170.15L1684.26,2169.71L1685.24,2169.26L1686.23,2168.81L1687.22,2168.36L1688.2,2167.91L1689.18,2167.45L1690.17,2167L1691.15,2166.54L1692.13,2166.09L1693.11,2165.63L1694.1,2165.16L1695.07,2164.7L1696.05,2164.24L1697.03,2163.77L1698.01,2163.31L1698.98,2162.84L1699.96,2162.37L1700.93,2161.9L1701.91,2161.43L1702.88,2160.95L1703.85,2160.48L1704.83,2160L1705.8,2159.52L1706.77,2159.04L1707.73,2158.56L1708.7,2158.08L1709.67,2157.6L1710.63,2157.11L1711.6,2156.63L1712.57,2156.14L1713.53,2155.65L1714.49,2155.16L1715.45,2154.66L1716.42,2154.17L1717.38,2153.68L1718.34,2153.18L1719.3,2152.68L1720.25,2152.18L1721.21,2151.68L1722.17,2151.18L1723.12,2150.68L1724.08,2150.17L1725.03,2149.67L1725.98,2149.16L1726.93,2148.65L1727.89,2148.14L1728.84,2147.63L1729.79,2147.11L1730.74,2146.6L1731.68,2146.08L1732.63,2145.57L1733.58,2145.05L1734.52,2144.53L1735.47,2144.01L1736.41,2143.48L1737.35,2142.96L1738.29,2142.43L1739.23,2141.9L1740.17,2141.38L1741.11,2140.85L1742.05,2140.32L1742.99,2139.78L1743.92,2139.25L1744.86,2138.71L1745.79,2138.18L1746.73,2137.64L1747.66,2137.1L1748.59,2136.56L1749.52,2136.02L1750.45,2135.47L1751.38,2134.93L1752.31,2134.38L1753.24,2133.83L1754.16,2133.28L1755.09,2132.73L1756.02,2132.18L1756.94,2131.63L1757.86,2131.07L1758.78,2130.52L1759.7,2129.96L1760.63,2129.4L1761.55,2128.84L1762.46,2128.28L1763.38,2127.72L1764.3,2127.16L1765.21,2126.59L1766.13,2126.02L1767.04,2125.46L1767.95,2124.89L1768.87,2124.32L1769.78,2123.74L1770.69,2123.17L1771.6,2122.6L1772.51,2122.02L1773.41,2121.44L1774.32,2120.87L1775.23,2120.29L1776.13,2119.7L1777.03,2119.12L1777.94,2118.54L1778.84,2117.95L1779.74,2117.37L1780.64,2116.78L1781.54,2116.19L1782.44,2115.6L1783.33,2115.01L1784.23,2114.41L1785.13,2113.82L1786.02,2113.22L1786.91,2112.63L1787.81,2112.03L1788.7,2111.43L1789.59,2110.83L1790.48,2110.23L1791.37,2109.62L1792.25,2109.02L1793.14,2108.41L1794.03,2107.8L1794.91,2107.2L1795.79,2106.59L1796.68,2105.97L1797.56,2105.36L1798.44,2104.75L1799.32,2104.13L1800.2,2103.52L1801.08,2102.9L1801.95,2102.28L1802.83,2101.66L1803.71,2101.04L1804.58,2100.42L1805.45,2099.79L1806.33,2099.17L1807.2,2098.54L1808.07,2097.91L1808.94,2097.28L1809.8,2096.65L1810.67,2096.02L1811.54,2095.39L1812.4,2094.75L1813.27,2094.12L1814.13,2093.48L1814.99,2092.84L1815.86,2092.2L1816.72,2091.56L1817.58,2090.92L1818.43,2090.28L1819.29,2089.63L1820.15,2088.99L1821,2088.34L1821.86,2087.69L1822.71,2087.04L1823.56,2086.39L1824.41,2085.74L1825.27,2085.09L1826.11,2084.43L1826.96,2083.78L1827.81,2083.12L1828.66,2082.46L1829.5,2081.8L1830.35,2081.14L1831.19,2080.48L1832.03,2079.82L1832.87,2079.15L1833.71,2078.49L1834.55,2077.82L1835.39,2077.15L1836.23,2076.48L1837.06,2075.81L1837.9,2075.14L1838.73,2074.47L1839.57,2073.79L1840.4,2073.12L1841.23,2072.44L1842.06,2071.76L1842.89,2071.09L1843.72,2070.4L1844.54,2069.72L1845.37,2069.04L1846.19,2068.36L1847.02,2067.67L1847.84,2066.99L1848.66,2066.3L1849.48,2065.61L1850.3,2064.92L1851.12,2064.23L1851.94,2063.53L1852.76,2062.84L1853.57,2062.15L1854.38,2061.45L1855.2,2060.75L1856.01,2060.05L1856.82,2059.36L1857.63,2058.66L1858.44,2057.95L1859.25,2057.25L1860.06,2056.55L1860.86,2055.84L1861.66,2055.13L1862.47,2054.43L1863.27,2053.72L1864.07,2053.01L1864.87,2052.29L1865.67,2051.58L1866.47,2050.87L1867.27,2050.15L1868.07,2049.44L1868.86,2048.72L1869.65,2048L1870.45,2047.28L1871.24,2046.56L1872.03,2045.84L1872.82,2045.12L1873.61,2044.39L1874.4,2043.66L1875.18,2042.94L1875.97,2042.21L1876.75,2041.48L1877.54,2040.75L1878.32,2040.02L1879.1,2039.29L1879.88,2038.55L1880.66,2037.82L1881.43,2037.08L1882.21,2036.35L1882.99,2035.61L1883.76,2034.87L1884.53,2034.13L1885.31,2033.39L1886.08,2032.64L1886.85,2031.9L1887.62,2031.15L1888.38,2030.41L1889.15,2029.66L1889.91,2028.91L1890.68,2028.16L1891.44,2027.41L1892.2,2026.66L1892.97,2025.91L1893.73,2025.15L1894.49,2024.4L1895.24,2023.64L1896,2022.88L1896.75,2022.12L1897.51,2021.36L1898.26,2020.6L1899.01,2019.84L1899.76,2019.08L1900.51,2018.31L1901.26,2017.55L1902.01,2016.78L1902.76,2016.01L1903.5,2015.25L1904.25,2014.48L1904.99,2013.7L1905.73,2012.93L1906.47,2012.16L1907.21,2011.38L1907.95,2010.61L1908.68,2009.83L1909.42,2009.06L1910.16,2008.28L1910.89,2007.5L1911.62,2006.72L1912.35,2005.93L1913.08,2005.15L1913.81,2004.37L1914.54,2003.58L1915.27,2002.79L1915.99,2002.01L1916.72,2001.22L1917.44,2000.43L1918.16,1999.64L1918.88,1998.85L1919.6,1998.05L1920.32,1997.26L1921.04,1996.46L1921.76,1995.67L1922.47,1994.87L1923.18,1994.07L1923.9,1993.27L1924.61,1992.47L1925.32,1991.67L1926.03,1990.87L1926.74,1990.06L1927.44,1989.26L1928.15,1988.45L1928.85,1987.65L1929.56,1986.84L1930.26,1986.03L1930.96,1985.22L1931.66,1984.41L1932.36,1983.6L1933.05,1982.78L1933.75,1981.97L1934.44,1981.15L1935.14,1980.34L1935.83,1979.52L1936.52,1978.7L1937.21,1977.88L1937.9,1977.06L1938.59,1976.24L1939.27,1975.41L1939.96,1974.59L1940.64,1973.77L1941.33,1972.94L1942.01,1972.11L1942.69,1971.29L1943.37,1970.46L1944.04,1969.63L1944.72,1968.8L1945.4,1967.96L1946.07,1967.13L1946.74,1966.3L1947.41,1965.46L1948.09,1964.63L1948.75,1963.79L1949.42,1962.95L1950.09,1962.11L1950.76,1961.27L1951.42,1960.43L1952.08,1959.59L1952.74,1958.74L1953.4,1957.9L1954.06,1957.05L1954.72,1956.21L1955.38,1955.36L1956.04,1954.51L1956.69,1953.66L1957.34,1952.81L1957.99,1951.96L1958.64,1951.11L1959.29,1950.26L1959.94,1949.4L1960.59,1948.55L1961.24,1947.69L1961.88,1946.83L1962.52,1945.97L1963.16,1945.11L1963.81,1944.25L1964.44,1943.39L1965.08,1942.53L1965.72,1941.67L1966.36,1940.8L1966.99,1939.94L1967.62,1939.07L1968.25,1938.2L1968.88,1937.33L1969.51,1936.47L1970.14,1935.59L1970.77,1934.72L1971.39,1933.85L1972.02,1932.98L1972.64,1932.1L1973.26,1931.23L1973.88,1930.35L1974.5,1929.48L1975.12,1928.6L1975.74,1927.72L1976.35,1926.84L1976.97,1925.96L1977.58,1925.08L1978.19,1924.19L1978.8,1923.31L1979.41,1922.42L1980.01,1921.54L1980.62,1920.65L1981.23,1919.76L1981.83,1918.88L1982.43,1917.99L1983.03,1917.1L1983.63,1916.2L1984.23,1915.31L1984.83,1914.42L1985.42,1913.52L1986.02,1912.63L1986.61,1911.73L1987.2,1910.83L1987.79,1909.94L1988.38,1909.04L1988.97,1908.14L1989.56,1907.24L1990.14,1906.33L1990.72,1905.43L1991.31,1904.53L1991.89,1903.62L1992.47,1902.72L1993.05,1901.81L1993.62,1900.9L1994.2,1900L1994.77,1899.09L1995.35,1898.18L1995.92,1897.27L1996.49,1896.35L1997.06,1895.44L1997.63,1894.53L1998.19,1893.61L1998.76,1892.7L1999.32,1891.78L1999.88,1890.86L2000.45,1889.94L2001.01,1889.02L2001.56,1888.1L2002.12,1887.18L2002.68,1886.26L2003.23,1885.34L2003.78,1884.41L2004.34,1883.49L2004.89,1882.56L2005.43,1881.64L2005.98,1880.71L2006.53,1879.78L2007.07,1878.85L2007.62,1877.92L2008.16,1876.99L2008.7,1876.06L2009.24,1875.13L2009.78,1874.19L2010.32,1873.26L2010.85,1872.32L2011.38,1871.38L2011.92,1870.45L2012.45,1869.51L2012.98,1868.57L2013.51,1867.63L2014.03,1866.69L2014.56,1865.75L2015.08,1864.81L2015.61,1863.86L2016.13,1862.92L2016.65,1861.97L2017.17,1861.03L2017.68,1860.08L2018.2,1859.13L2018.72,1858.18L2019.23,1857.24L2019.74,1856.28L2020.25,1855.33L2020.76,1854.38L2021.27,1853.43L2021.77,1852.48L2022.28,1851.52L2022.78,1850.57L2023.28,1849.61L2023.79,1848.65L2024.28,1847.69L2024.78,1846.73L2025.28,1845.78L2025.77,1844.81L2026.27,1843.85L2026.76,1842.89L2027.25,1841.93L2027.74,1840.96L2028.23,1840L2028.71,1839.03L2029.2,1838.07L2029.68,1837.1L2030.16,1836.13L2030.65,1835.16L2031.13,1834.19L2031.6,1833.22L2032.08,1832.25L2032.56,1831.28L2033.03,1830.31L2033.5,1829.33L2033.97,1828.36L2034.44,1827.38L2034.91,1826.41L2035.38,1825.43L2035.84,1824.45L2036.3,1823.47L2036.77,1822.49L2037.23,1821.51L2037.69,1820.53L2038.14,1819.55L2038.6,1818.57L2039.06,1817.58L2039.51,1816.6L2039.96,1815.61L2040.41,1814.63L2040.86,1813.64L2041.31,1812.65L2041.76,1811.66L2042.2,1810.67L2042.64,1809.68L2043.09,1808.69L2043.53,1807.7L2043.97,1806.71L2044.4,1805.72L2044.84,1804.72L2045.27,1803.73L2045.71,1802.73L2046.14,1801.74L2046.57,1800.74L2047,1799.74L2047.42,1798.74L2047.85,1797.74L2048.27,1796.74L2048.7,1795.74L2049.12,1794.74L2049.54,1793.74L2049.96,1792.74L2050.37,1791.73L2050.79,1790.73L2051.2,1789.72L2051.62,1788.71L2052.03,1787.71L2052.43,1786.7L2052.84,1785.69L2053.25,1784.68L2053.65,1783.67L2054.06,1782.66L2054.46,1781.65L2054.86,1780.64L2055.26,1779.62L2055.66,1778.61L2056.05,1777.59L2056.45,1776.58L2056.84,1775.56L2057.23,1774.55L2057.62,1773.53L2058.01,1772.51L2058.4,1771.49L2058.78,1770.47L2059.16,1769.45L2059.55,1768.43L2059.93,1767.41L2060.31,1766.38L2060.69,1765.36L2061.06,1764.34L2061.44,1763.31L2061.81,1762.28L2062.18,1761.26L2062.55,1760.23L2062.92,1759.2L2063.29,1758.17L2063.65,1757.14L2064.02,1756.11L2064.38,1755.08L2064.74,1754.05L2065.1,1753.02L2065.46,1751.99L2065.81,1750.95L2066.17,1749.92L2066.52,1748.88L2066.87,1747.85L2067.22,1746.81L2067.57,1745.77L2067.92,1744.74L2068.26,1743.7L2068.61,1742.66L2068.95,1741.62L2069.29,1740.58L2069.63,1739.54L2069.97,1738.49L2070.31,1737.45L2070.64,1736.41L2070.97,1735.36L2071.3,1734.32L2071.64,1733.27L2071.96,1732.22L2072.29,1731.18L2072.62,1730.13L2072.94,1729.08L2073.26,1728.03L2073.58,1726.98L2073.9,1725.93L2074.22,1724.88L2074.53,1723.83L2074.85,1722.78L2075.16,1721.72L2075.47,1720.67L2075.78,1719.62L2076.09,1718.56L2076.4,1717.5L2076.7,1716.45L2077.01,1715.39L2077.31,1714.33L2077.61,1713.27L2077.91,1712.21L2078.2,1711.15L2078.5,1710.09L2078.79,1709.03L2079.08,1707.97L2079.37,1706.91L2079.66,1705.85L2079.95,1704.78L2080.24,1703.72L2080.52,1702.65L2080.8,1701.59L2081.08,1700.52L2081.36,1699.45L2081.64,1698.38L2081.91,1697.32L2082.19,1696.25L2082.46,1695.18L2082.73,1694.11L2083,1693.04L2083.27,1691.96L2083.54,1690.89L2083.8,1689.82L2084.07,1688.75L2084.33,1687.67L2084.59,1686.6L2084.85,1685.52L2085.1,1684.44L2085.36,1683.37L2085.61,1682.29L2085.86,1681.21L2086.11,1680.13L2086.36,1679.06L2086.61,1677.98L2086.85,1676.89L2087.1,1675.81L2087.34,1674.73L2087.58,1673.65L2087.82,1672.57L2088.05,1671.48L2088.29,1670.4L2088.52,1669.32L2088.76,1668.23L2088.99,1667.14L2089.22,1666.06L2089.44,1664.97L2089.67,1663.88L2089.89,1662.8L2090.11,1661.71L2090.33,1660.62L2090.55,1659.53L2090.77,1658.43L2090.99,1657.34L2091.2,1656.25L2091.41,1655.16L2091.62,1654.07L2091.83,1652.97L2092.04,1651.88L2092.24,1650.78L2092.45,1649.69L2092.65,1648.59L2092.85,1647.5L2093.05,1646.4L2093.25,1645.3L2093.44,1644.2L2093.64,1643.1L2093.83,1642L2094.02,1640.9L2094.21,1639.8L2094.39,1638.7L2094.58,1637.6L2094.76,1636.5L2094.95,1635.39L2095.13,1634.29L2095.3,1633.19L2095.48,1632.08L2095.66,1630.98L2095.83,1629.87L2096,1628.77L2096.17,1627.66L2096.34,1626.55L2096.51,1625.44L2096.67,1624.34L2096.84,1623.23L2097,1622.12L2097.16,1621.01L2097.32,1619.9L2097.47,1618.79L2097.63,1617.67L2097.78,1616.56L2097.93,1615.45L2098.08,1614.33L2098.23,1613.22L2098.38,1612.11L2098.52,1610.99L2098.66,1609.88L2098.81,1608.76L2098.95,1607.64L2099.08,1606.53L2099.22,1605.41L2099.35,1604.29L2099.49,1603.17L2099.62,1602.05L2099.74,1600.93L2099.87,1599.81L2100,1598.69L2100.12,1597.57L2100.24,1596.45L2100.37,1595.33L2100.48,1594.2L2100.6,1593.08L2100.72,1591.95L2100.83,1590.83L2100.94,1589.7L2101.05,1588.58L2101.16,1587.45L2101.26,1586.33L2101.37,1585.2L2101.47,1584.07L2101.57,1582.94L2101.67,1581.82L2101.77,1580.69L2101.87,1579.56L2101.96,1578.43L2102.05,1577.3L2102.14,1576.17L2102.23,1575.04L2102.32,1573.9L2102.41,1572.77L2102.49,1571.64L2102.57,1570.5L2102.65,1569.37L2102.73,1568.24L2102.81,1567.1L2102.88,1565.97L2102.95,1564.83L2103.03,1563.69L2103.1,1562.56L2103.16,1561.42L2103.23,1560.28L2103.29,1559.14L2103.36,1558.01L2103.41,1556.87L2103.47,1555.73L2103.53,1554.59L2103.59,1553.44L2103.64,1552.3L2103.69,1551.16L2103.74,1550.02L2103.79,1548.88L2103.84,1547.74L2103.88,1546.59L2103.92,1545.45L2103.96,1544.3L2104,1543.16L2104.04,1542.01L2104.07,1540.87L2104.11,1539.72L2104.14,1538.58L2104.17,1537.43L2104.2,1536.28L2104.22,1535.13L2104.25,1533.99L2104.27,1532.84L2104.29,1531.69L2104.31,1530.54L2104.33,1529.39L2104.35,1528.24L2104.36,1527.09L2104.37,1525.93L2104.38,1524.78L2104.39,1523.63L2104.39,1522.48L2104.4,1521.33L2104.4,1520.17L2104.4,1519.02L2104.4,1517.86L2104.4,1516.71L2104.39,1515.56L2104.39,1514.4L2104.38,1513.25L2104.37,1512.1L2104.36,1510.95L2104.35,1509.8L2104.33,1508.65L2104.31,1507.5L2104.29,1506.35L2104.27,1505.2L2104.25,1504.05L2104.22,1502.9L2104.2,1501.75L2104.17,1500.61L2104.14,1499.46L2104.11,1498.31L2104.07,1497.17L2104.04,1496.02L2104,1494.88L2103.96,1493.73L2103.92,1492.59L2103.88,1491.44L2103.84,1490.3L2103.79,1489.16L2103.74,1488.02L2103.69,1486.87L2103.64,1485.73L2103.59,1484.59L2103.53,1483.45L2103.47,1482.31L2103.41,1481.17L2103.36,1480.03L2103.29,1478.89L2103.23,1477.75L2103.16,1476.62L2103.1,1475.48L2103.03,1474.34L2102.95,1473.21L2102.88,1472.07L2102.81,1470.93L2102.73,1469.8L2102.65,1468.67L2102.57,1467.53L2102.49,1466.4L2102.41,1465.27L2102.32,1464.13L2102.23,1463L2102.14,1461.87L2102.05,1460.74L2101.96,1459.61L2101.87,1458.48L2101.77,1457.35L2101.67,1456.22L2101.57,1455.09L2101.47,1453.96L2101.37,1452.84L2101.26,1451.71L2101.16,1450.58L2101.05,1449.46L2100.94,1448.33L2100.83,1447.21L2100.72,1446.08L2100.6,1444.96L2100.48,1443.83L2100.37,1442.71L2100.24,1441.59L2100.12,1440.47L2100,1439.35L2099.87,1438.23L2099.74,1437.1L2099.62,1435.98L2099.49,1434.87L2099.35,1433.75L2099.22,1432.63L2099.08,1431.51L2098.95,1430.39L2098.81,1429.28L2098.66,1428.16L2098.52,1427.05L2098.38,1425.93L2098.23,1424.82L2098.08,1423.7L2097.93,1422.59L2097.78,1421.48L2097.63,1420.36L2097.47,1419.25L2097.32,1418.14L2097.16,1417.03L2097,1415.92L2096.84,1414.81L2096.67,1413.7L2096.51,1412.59L2096.34,1411.48L2096.17,1410.38L2096,1409.27L2095.83,1408.16L2095.66,1407.06L2095.48,1405.95L2095.3,1404.85L2095.13,1403.74L2094.95,1402.64L2094.76,1401.54L2094.58,1400.43L2094.39,1399.33L2094.21,1398.23L2094.02,1397.13L2093.83,1396.03L2093.64,1394.93L2093.44,1393.83L2093.25,1392.74L2093.05,1391.64L2092.85,1390.54L2092.65,1389.44L2092.45,1388.35L2092.24,1387.25L2092.04,1386.16L2091.83,1385.06L2091.62,1383.97L2091.41,1382.88L2091.2,1381.78L2090.99,1380.69L2090.77,1379.6L2090.55,1378.51L2090.33,1377.42L2090.11,1376.33L2089.89,1375.24L2089.67,1374.15L2089.44,1373.07L2089.22,1371.98L2088.99,1370.89L2088.76,1369.81L2088.52,1368.72L2088.29,1367.64L2088.05,1366.55L2087.82,1365.47L2087.58,1364.39L2087.34,1363.3L2087.1,1362.22L2086.85,1361.14L2086.61,1360.06L2086.36,1358.98L2086.11,1357.9L2085.86,1356.82L2085.61,1355.75L2085.36,1354.67L2085.1,1353.59L2084.85,1352.52L2084.59,1351.44L2084.33,1350.37L2084.07,1349.29L2083.8,1348.22L2083.54,1347.14L2083.27,1346.07L2083,1345L2082.73,1343.93L2082.46,1342.86L2082.19,1341.79L2081.91,1340.72L2081.64,1339.65L2081.36,1338.58L2081.08,1337.52L2080.8,1336.45L2080.52,1335.38L2080.24,1334.32L2079.95,1333.26L2079.66,1332.19L2079.37,1331.13L2079.08,1330.07L2078.79,1329L2078.5,1327.94L2078.2,1326.88L2077.91,1325.82L2077.61,1324.76L2077.31,1323.7L2077.01,1322.65L2076.7,1321.59L2076.4,1320.53L2076.09,1319.48L2075.78,1318.42L2075.47,1317.37L2075.16,1316.31L2074.85,1315.26L2074.53,1314.21L2074.22,1313.15L2073.9,1312.1L2073.58,1311.05L2073.26,1310L2072.94,1308.95L2072.62,1307.91L2072.29,1306.86L2071.96,1305.81L2071.64,1304.77L2071.3,1303.72L2070.97,1302.67L2070.64,1301.63L2070.31,1300.59L2069.97,1299.54L2069.63,1298.5L2069.29,1297.46L2068.95,1296.42L2068.61,1295.38L2068.26,1294.34L2067.92,1293.3L2067.57,1292.26L2067.22,1291.23L2066.87,1290.19L2066.52,1289.15L2066.17,1288.12L2065.81,1287.08L2065.46,1286.05L2065.1,1285.02L2064.74,1283.98L2064.38,1282.95L2064.02,1281.92L2063.65,1280.89L2063.29,1279.86L2062.92,1278.83L2062.55,1277.81L2062.18,1276.78L2061.81,1275.75L2061.44,1274.73L2061.06,1273.7L2060.69,1272.68L2060.31,1271.65L2059.93,1270.63L2059.55,1269.61L2059.16,1268.59L2058.78,1267.57L2058.4,1266.55L2058.01,1265.53L2057.62,1264.51L2057.23,1263.49L2056.84,1262.47L2056.45,1261.46L2056.05,1260.44L2055.66,1259.43L2055.26,1258.41L2054.86,1257.4L2054.46,1256.39L2054.06,1255.38L2053.65,1254.37L2053.25,1253.36L2052.84,1252.35L2052.43,1251.34L2052.03,1250.33L2051.62,1249.32L2051.2,1248.32L2050.79,1247.31L2050.37,1246.31L2049.96,1245.3L2049.54,1244.3L2049.12,1243.3L2048.7,1242.29L2048.27,1241.29L2047.85,1240.29L2047.42,1239.29L2047,1238.29L2046.57,1237.3L2046.14,1236.3L2045.71,1235.3L2045.27,1234.31L2044.84,1233.31L2044.4,1232.32L2043.97,1231.33L2043.53,1230.33L2043.09,1229.34L2042.64,1228.35L2042.2,1227.36L2041.76,1226.37L2041.31,1225.38L2040.86,1224.4L2040.41,1223.41L2039.96,1222.42L2039.51,1221.44L2039.06,1220.45L2038.6,1219.47L2038.14,1218.49L2037.69,1217.51L2037.23,1216.52L2036.77,1215.54L2036.3,1214.56L2035.84,1213.59L2035.38,1212.61L2034.91,1211.63L2034.44,1210.65L2033.97,1209.68L2033.5,1208.7L2033.03,1207.73L2032.56,1206.76L2032.08,1205.79L2031.6,1204.81L2031.13,1203.84L2030.65,1202.87L2030.16,1201.9L2029.68,1200.94L2029.2,1199.97L2028.71,1199L2028.23,1198.04L2027.74,1197.07L2027.25,1196.11L2026.76,1195.14L2026.27,1194.18L2025.77,1193.22L2025.28,1192.26L2024.78,1191.3L2024.28,1190.34L2023.79,1189.38L2023.28,1188.43L2022.78,1187.47L2022.28,1186.52L2021.77,1185.56L2021.27,1184.61L2020.76,1183.65L2020.25,1182.7L2019.74,1181.75L2019.23,1180.8L2018.72,1179.85L2018.2,1178.9L2017.68,1177.96L2017.17,1177.01L2016.65,1176.06L2016.13,1175.12L2015.61,1174.17L2015.08,1173.23L2014.56,1172.29L2014.03,1171.35L2013.51,1170.4L2012.98,1169.46L2012.45,1168.53L2011.92,1167.59L2011.38,1166.65L2010.85,1165.71L2010.32,1164.78L2009.78,1163.84L2009.24,1162.91L2008.7,1161.98L2008.16,1161.05L2007.62,1160.12L2007.07,1159.18L2006.53,1158.26L2005.98,1157.33L2005.43,1156.4L2004.89,1155.47L2004.34,1154.55L2003.78,1153.62L2003.23,1152.7L2002.68,1151.78L2002.12,1150.85L2001.56,1149.93L2001.01,1149.01L2000.45,1148.09L1999.88,1147.17L1999.32,1146.26L1998.76,1145.34L1998.19,1144.42L1997.63,1143.51L1997.06,1142.6L1996.49,1141.68L1995.92,1140.77L1995.35,1139.86L1994.77,1138.95L1994.2,1138.04L1993.62,1137.13L1993.05,1136.23L1992.47,1135.32L1991.89,1134.41L1991.31,1133.51L1990.72,1132.6L1990.14,1131.7L1989.56,1130.8L1988.97,1129.9L1988.38,1129L1987.79,1128.1L1987.2,1127.2L1986.61,1126.3L1986.02,1125.41L1985.42,1124.51L1984.83,1123.62L1984.23,1122.73L1983.63,1121.83L1983.03,1120.94L1982.43,1120.05L1981.83,1119.16L1981.23,1118.27L1980.62,1117.38L1980.01,1116.5L1979.41,1115.61L1978.8,1114.73L1978.19,1113.84L1977.58,1112.96L1976.97,1112.08L1976.35,1111.2L1975.74,1110.32L1975.12,1109.44L1974.5,1108.56L1973.88,1107.68L1973.26,1106.81L1972.64,1105.93L1972.02,1105.06L1971.39,1104.18L1970.77,1103.31L1970.14,1102.44L1969.51,1101.57L1968.88,1100.7L1968.25,1099.83L1967.62,1098.97L1966.99,1098.1L1966.36,1097.24L1965.72,1096.37L1965.08,1095.51L1964.44,1094.64L1963.81,1093.78L1963.16,1092.92L1962.52,1092.06L1961.88,1091.2L1961.24,1090.35L1960.59,1089.49L1959.94,1088.64L1959.29,1087.78L1958.64,1086.93L1957.99,1086.08L1957.34,1085.22L1956.69,1084.37L1956.04,1083.52L1955.38,1082.68L1954.72,1081.83L1954.06,1080.98L1953.4,1080.14L1952.74,1079.29L1952.08,1078.45L1951.42,1077.61L1950.76,1076.77L1950.09,1075.92L1949.42,1075.09L1948.75,1074.25L1948.09,1073.41L1947.41,1072.57L1946.74,1071.74L1946.07,1070.9L1945.4,1070.07L1944.72,1069.24L1944.04,1068.41L1943.37,1067.58L1942.69,1066.75L1942.01,1065.92L1941.33,1065.1L1940.64,1064.27L1939.96,1063.44L1939.27,1062.62L1938.59,1061.8L1937.9,1060.98L1937.21,1060.15L1936.52,1059.34L1935.83,1058.52L1935.14,1057.7L1934.44,1056.88L1933.75,1056.07L1933.05,1055.25L1932.36,1054.44L1931.66,1053.63L1930.96,1052.82L1930.26,1052.01L1929.56,1051.2L1928.85,1050.39L1928.15,1049.58L1927.44,1048.78L1926.74,1047.97L1926.03,1047.17L1925.32,1046.37L1924.61,1045.57L1923.9,1044.76L1923.18,1043.96L1922.47,1043.17L1921.76,1042.37L1921.04,1041.57L1920.32,1040.78L1919.6,1039.98L1918.88,1039.19L1918.16,1038.4L1917.44,1037.61L1916.72,1036.82L1915.99,1036.03L1915.27,1035.24L1914.54,1034.46L1913.81,1033.67L1913.08,1032.89L1912.35,1032.1L1911.62,1031.32L1910.89,1030.54L1910.16,1029.76L1909.42,1028.98L1908.68,1028.2L1907.95,1027.43L1907.21,1026.65L1906.47,1025.88L1905.73,1025.1L1904.99,1024.33L1904.25,1023.56L1903.5,1022.79L1902.76,1022.02L1902.01,1021.25L1901.26,1020.49L1900.51,1019.72L1899.76,1018.96L1899.01,1018.2L1898.26,1017.43L1897.51,1016.67L1896.75,1015.91L1896,1015.15L1895.24,1014.4L1894.49,1013.64L1893.73,1012.88L1892.97,1012.13L1892.2,1011.38L1891.44,1010.63L1890.68,1009.87L1889.91,1009.12L1889.15,1008.38L1888.38,1007.63L1887.62,1006.88L1886.85,1006.14L1886.08,1005.39L1885.31,1004.65L1884.53,1003.91L1883.76,1003.17L1882.99,1002.43L1882.21,1001.69L1881.43,1000.95L1880.66,1000.22L1879.88,999.482L1879.1,998.748L1878.32,998.016L1877.54,997.285L1876.75,996.554L1875.97,995.825L1875.18,995.097L1874.4,994.371L1873.61,993.645L1872.82,992.921L1872.03,992.198L1871.24,991.476L1870.45,990.755L1869.65,990.035L1868.86,989.317L1868.07,988.599L1867.27,987.883L1866.47,987.168L1865.67,986.454L1864.87,985.742L1864.07,985.03L1863.27,984.32L1862.47,983.611L1861.66,982.903L1860.86,982.196L1860.06,981.491L1859.25,980.786L1858.44,980.083L1857.63,979.381L1856.82,978.68L1856.01,977.981L1855.2,977.282L1854.38,976.585L1853.57,975.889L1852.76,975.195L1851.94,974.501L1851.12,973.809L1850.3,973.117L1849.48,972.427L1848.66,971.739L1847.84,971.051L1847.02,970.365L1846.19,969.68L1845.37,968.996L1844.54,968.313L1843.72,967.632L1842.89,966.951L1842.06,966.272L1841.23,965.594L1840.4,964.918L1839.57,964.242L1838.73,963.568L1837.9,962.895L1837.06,962.224L1836.23,961.553L1835.39,960.884L1834.55,960.216L1833.71,959.549L1832.87,958.883L1832.03,958.219L1831.19,957.556L1830.35,956.894L1829.5,956.233L1828.66,955.574L1827.81,954.916L1826.96,954.259L1826.11,953.603L1825.27,952.949L1824.41,952.296L1823.56,951.644L1822.71,950.993L1821.86,950.344L1821,949.696L1820.15,949.049L1819.29,948.403L1818.43,947.759L1817.58,947.115L1816.72,946.474L1815.86,945.833L1814.99,945.194L1814.13,944.555L1813.27,943.919L1812.4,943.283L1811.54,942.649L1810.67,942.016L1809.8,941.384L1808.94,940.753L1808.07,940.124L1807.2,939.496L1806.33,938.87L1805.45,938.244L1804.58,937.62L1803.71,936.997L1802.83,936.376L1801.95,935.755L1801.08,935.136L1800.2,934.519L1799.32,933.902L1798.44,933.287L1797.56,932.673L1796.68,932.061L1795.79,931.449L1794.91,930.84L1794.03,930.231L1793.14,929.623L1792.25,929.017L1791.37,928.413L1790.48,927.809L1789.59,927.207L1788.7,926.606L1787.81,926.006L1786.91,925.408L1786.02,924.811L1785.13,924.216L1784.23,923.621L1783.33,923.028L1782.44,922.437L1781.54,921.846L1780.64,921.257L1779.74,920.669L1778.84,920.083L1777.94,919.498L1777.03,918.914L1776.13,918.331L1775.23,917.75L1774.32,917.17L1773.41,916.592L1772.51,916.015L1771.6,915.439L1770.69,914.864L1769.78,914.291L1768.87,913.719L1767.95,913.149L1767.04,912.579L1766.13,912.012L1765.21,911.445L1764.3,910.88L1763.38,910.316L1762.46,909.754L1761.55,909.192L1760.63,908.633L1759.7,908.074L1758.78,907.517L1757.86,906.961L1756.94,906.407L1756.02,905.854L1755.09,905.302L1754.16,904.752L1753.24,904.203L1752.31,903.655L1751.38,903.109L1750.45,902.564L1749.52,902.02L1748.59,901.478L1747.66,900.937L1746.73,900.398L1745.79,899.86L1744.86,899.323L1743.92,898.788L1742.99,898.254L1742.05,897.721L1741.11,897.19L1740.17,896.66L1739.23,896.131L1738.29,895.604L1737.35,895.079L1736.41,894.554L1735.47,894.031L1734.52,893.51L1733.58,892.99L1732.63,892.471L1731.68,891.953L1730.74,891.437L1729.79,890.923L1728.84,890.409L1727.89,889.898L1726.93,889.387L1725.98,888.878L1725.03,888.37L1724.08,887.864L1723.12,887.359L1722.17,886.856L1721.21,886.354L1720.25,885.853L1719.3,885.354L1718.34,884.856L1717.38,884.36L1716.42,883.865L1715.45,883.371L1714.49,882.879L1713.53,882.388L1712.57,881.899L1711.6,881.411L1710.63,880.924L1709.67,880.439L1708.7,879.955L1707.73,879.473L1706.77,878.992L1705.8,878.513L1704.83,878.035L1703.85,877.558L1702.88,877.083L1701.91,876.609L1700.93,876.137L1699.96,875.666L1698.98,875.197L1698.01,874.729L1697.03,874.262L1696.05,873.797L1695.07,873.333L1694.1,872.871L1693.11,872.41L1692.13,871.951L1691.15,871.493L1690.17,871.037L1689.18,870.582L1688.2,870.128L1687.22,869.676L1686.23,869.226L1685.24,868.776L1684.26,868.329L1683.27,867.882L1682.28,867.438L1681.29,866.994L1680.3,866.552L1679.31,866.112L1678.31,865.673L1677.32,865.235L1676.33,864.799L1675.33,864.365L1674.34,863.932L1673.34,863.5L1672.34,863.07L1671.34,862.641L1670.35,862.214L1669.35,861.788L1668.35,861.364L1667.34,860.941L1666.34,860.52L1665.34,860.1L1664.34,859.682L1663.33,859.265L1662.33,858.85L1661.32,858.436L1660.32,858.023L1659.31,857.612L1658.3,857.203L1657.29,856.795L1656.28,856.389L1655.27,855.984L1654.26,855.58L1653.25,855.178L1652.24,854.778L1651.22,854.379L1650.21,853.982L1649.2,853.586L1648.18,853.191L1647.16,852.798L1646.15,852.407L1645.13,852.017L1644.11,851.629L1643.09,851.242L1642.07,850.856L1641.05,850.473L1640.03,850.09L1639.01,849.709L1637.99,849.33L1636.96,848.952L1635.94,848.576L1634.91,848.201L1633.89,847.828L1632.86,847.456L1631.83,847.086L1630.8,846.718L1629.78,846.351L1628.75,845.985L1627.72,845.621L1626.68,845.258L1625.65,844.897L1624.62,844.538L1623.59,844.18L1622.56,843.824L1621.52,843.469L1620.49,843.116L1619.45,842.764L1618.41,842.414L1617.38,842.065L1616.34,841.718L1615.3,841.373L1614.26,841.029L1613.22,840.686L1612.18,840.345L1611.14,840.006L1610.09,839.668L1609.05,839.332L1608.01,838.997L1606.96,838.664L1605.92,838.332L1604.87,838.003L1603.83,837.674L1602.78,837.347L1601.73,837.022L1600.68,836.698L1599.63,836.376L1598.58,836.055L1597.53,835.736L1596.48,835.419L1595.43,835.103L1594.38,834.789L1593.33,834.476L1592.27,834.165L1591.22,833.856L1590.16,833.548L1589.11,833.241L1588.05,832.936L1586.99,832.633L1585.93,832.332L1584.88,832.031L1583.82,831.733L1582.76,831.436L1581.69,831.141L1580.63,830.847L1579.57,830.555L1578.51,830.265L1577.45,829.976L1576.38,829.689L1575.32,829.403L1574.25,829.119L1573.19,828.836L1572.12,828.555L1571.05,828.276L1569.99,827.998L1568.92,827.722L1567.85,827.448L1566.78,827.175L1565.71,826.904L1564.64,826.634L1563.57,826.366L1562.49,826.1L1561.42,825.835L1560.35,825.572L1559.27,825.311L1558.2,825.051L1557.12,824.792L1556.05,824.536L1554.97,824.281L1553.89,824.027L1552.82,823.776L1551.74,823.526L1550.66,823.277L1549.58,823.03L1548.5,822.785L1547.42,822.541L1546.34,822.3L1545.25,822.059L1544.17,821.821L1543.09,821.584L1542,821.348L1540.92,821.114L1539.83,820.882L1538.75,820.652L1537.66,820.423L1536.57,820.196L1535.49,819.971L1534.4,819.747L1533.31,819.525L1532.22,819.304L1531.13,819.085L1530.04,818.868L1528.95,818.652L1527.85,818.438L1526.76,818.226L1525.67,818.016L1524.58,817.807L1523.48,817.6L1522.39,817.394L1521.29,817.19L1520.19,816.988L1519.1,816.787L1518,816.588L1516.9,816.391L1515.8,816.196L1514.71,816.002L1513.61,815.81L1512.51,815.619L1511.4,815.43L1510.3,815.243L1509.2,815.058L1508.1,814.874L1507,814.692L1505.89,814.512L1504.79,814.333L1503.68,814.156L1502.58,813.981L1501.47,813.807L1500.37,813.635L1499.26,813.465L1498.15,813.297L1497.05,813.13L1495.94,812.965L1494.83,812.801L1493.72,812.639L1492.61,812.479L1491.5,812.321L1490.39,812.165L1489.28,812.01L1488.16,811.857L1487.05,811.705L1485.94,811.555L1484.82,811.407L1483.71,811.261L1482.59,811.116L1481.48,810.974L1480.36,810.832L1479.25,810.693L1478.13,810.555L1477.01,810.419L1475.89,810.285L1474.77,810.152L1473.65,810.022L1472.53,809.893L1471.41,809.765L1470.29,809.64L1469.17,809.516L1468.05,809.394L1466.93,809.273L1465.8,809.155L1464.68,809.038L1463.56,808.922L1462.43,808.809L1461.31,808.697L1460.18,808.587L1459.06,808.479L1457.93,808.373L1456.8,808.268L1455.67,808.165L1454.55,808.064L1453.42,807.964L1452.29,807.867L1451.16,807.771L1450.03,807.676L1448.9,807.584L1447.77,807.493L1446.64,807.404L1445.51,807.317L1444.37,807.232L1443.24,807.148L1442.11,807.066L1440.97,806.986L1439.84,806.908L1438.7,806.832L1437.57,806.757L1436.43,806.684L1435.3,806.613L1434.16,806.543L1433.02,806.475L1431.88,806.41L1430.75,806.345L1429.61,806.283L1428.47,806.223L1427.33,806.164L1426.19,806.107L1425.05,806.052L1423.91,805.998L1422.77,805.947L1421.62,805.897L1420.48,805.849L1419.34,805.803L1418.19,805.758L1417.05,805.716L1415.91,805.675L1414.76,805.636L1413.62,805.599L1412.47,805.563L1411.33,805.529L1410.18,805.498L1409.03,805.468L1407.88,805.439L1406.74,805.413L1405.59,805.388L1404.44,805.366L1403.29,805.345L1402.14,805.326L1400.99,805.308L1399.84,805.293L1398.69,805.279L1397.54,805.267L1396.38,805.257L1395.23,805.249L1394.08,805.243L1392.93,805.238L1391.77,805.235L1390.62,805.234L1389.47,805.235Z" style="fill:rgb(203,233,247);"/>
+            </g>
+            <g transform="matrix(1,0,0,1,-96.4592,-44.5196)">
+                <path d="M1656.79,1781.33C1628.54,1729.4 1573.5,1694.13 1510.29,1694.13C1503.36,1694.13 1496.52,1694.56 1489.85,1695.43C1427.43,1603.07 1321.76,1542.31 1202,1542.31C1047.9,1542.31 917.117,1642.93 871.851,1781.98C847.534,1775.4 821.964,1771.9 795.583,1771.9C745.551,1771.9 698.436,1784.49 657.241,1806.67C603.726,1706.63 573.393,1592.34 573.393,1471.02C573.393,1077.07 893.229,757.236 1287.18,757.236C1681.13,757.236 2000.96,1077.07 2000.96,1471.02C2000.96,1594.84 1969.36,1711.34 1913.77,1812.88C1865.31,1784.48 1808.9,1768.2 1748.72,1768.2C1716.8,1768.2 1685.93,1772.78 1656.79,1781.33Z" style="fill:none;"/>
+                <clipPath id="_clip1">
+                    <path d="M1656.79,1781.33C1628.54,1729.4 1573.5,1694.13 1510.29,1694.13C1503.36,1694.13 1496.52,1694.56 1489.85,1695.43C1427.43,1603.07 1321.76,1542.31 1202,1542.31C1047.9,1542.31 917.117,1642.93 871.851,1781.98C847.534,1775.4 821.964,1771.9 795.583,1771.9C745.551,1771.9 698.436,1784.49 657.241,1806.67C603.726,1706.63 573.393,1592.34 573.393,1471.02C573.393,1077.07 893.229,757.236 1287.18,757.236C1681.13,757.236 2000.96,1077.07 2000.96,1471.02C2000.96,1594.84 1969.36,1711.34 1913.77,1812.88C1865.31,1784.48 1808.9,1768.2 1748.72,1768.2C1716.8,1768.2 1685.93,1772.78 1656.79,1781.33Z"/>
+                </clipPath>
+                <g clip-path="url(#_clip1)">
+                    <g transform="matrix(1,0,0,1,133.559,77.9092)">
+                        <path d="M1356.29,1617.52C1293.88,1525.16 1188.2,1464.4 1068.44,1464.4C914.344,1464.4 783.558,1565.02 738.292,1704.07C713.975,1697.49 688.405,1693.99 662.024,1693.99C611.992,1693.99 564.877,1706.58 523.682,1728.77C470.168,1628.72 439.834,1514.43 439.834,1393.11C439.834,999.163 759.67,679.327 1153.62,679.327C1547.57,679.327 1867.4,999.163 1867.4,1393.11C1867.4,1749.53 1605.6,2045.29 1263.99,2098.38C1317.96,2061.5 1361.02,2009.79 1387.23,1949.15C1474.32,1943.76 1543.38,1871.31 1543.38,1782.87C1543.38,1690.9 1468.71,1616.23 1376.73,1616.23C1369.8,1616.23 1362.96,1616.65 1356.29,1617.52Z" style="fill:rgb(0,81,205);"/>
+                    </g>
+                    <g transform="matrix(0.641586,0,0,0.641586,1015.68,420.007)">
+                        <circle cx="1142.55" cy="2611.49" r="510.146" style="fill:rgb(235,235,235);"/>
+                    </g>
+                    <g transform="matrix(1,-1.73472e-17,1.73472e-17,1,248.372,-462.596)">
+                        <circle cx="1390.62" cy="1519.02" r="713.784" style="fill:rgb(5,111,238);"/>
+                    </g>
+                    <g transform="matrix(0.746128,-1.29433e-17,1.29433e-17,0.746128,684.12,-153.571)">
+                        <circle cx="1390.62" cy="1519.02" r="713.784" style="fill:rgb(2,192,250);"/>
+                    </g>
+                    <g transform="matrix(0.388398,-6.73762e-18,6.73762e-18,0.388398,1181.69,413.603)">
+                        <circle cx="1390.62" cy="1519.02" r="713.784" style="fill:rgb(0,221,255);"/>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/public/static/img/cos.png b/public/static/img/cos.png
new file mode 100644
index 0000000..f511b89
Binary files /dev/null and b/public/static/img/cos.png differ
diff --git a/public/static/img/favicon.ico b/public/static/img/favicon.ico
new file mode 100644
index 0000000..82bcc51
Binary files /dev/null and b/public/static/img/favicon.ico differ
diff --git a/public/static/img/local.png b/public/static/img/local.png
new file mode 100644
index 0000000..13ab953
Binary files /dev/null and b/public/static/img/local.png differ
diff --git a/public/static/img/logo192.png b/public/static/img/logo192.png
new file mode 100644
index 0000000..28020b0
Binary files /dev/null and b/public/static/img/logo192.png differ
diff --git a/public/static/img/logo512.png b/public/static/img/logo512.png
new file mode 100644
index 0000000..1f14fa3
Binary files /dev/null and b/public/static/img/logo512.png differ
diff --git a/public/static/img/onedrive.png b/public/static/img/onedrive.png
new file mode 100644
index 0000000..c76920c
Binary files /dev/null and b/public/static/img/onedrive.png differ
diff --git a/public/static/img/oss.png b/public/static/img/oss.png
new file mode 100644
index 0000000..46dca72
Binary files /dev/null and b/public/static/img/oss.png differ
diff --git a/public/static/img/qiniu.png b/public/static/img/qiniu.png
new file mode 100644
index 0000000..5c7574b
Binary files /dev/null and b/public/static/img/qiniu.png differ
diff --git a/public/static/img/remote.png b/public/static/img/remote.png
new file mode 100644
index 0000000..4d648fe
Binary files /dev/null and b/public/static/img/remote.png differ
diff --git a/public/static/img/s3.png b/public/static/img/s3.png
new file mode 100644
index 0000000..544bc6f
Binary files /dev/null and b/public/static/img/s3.png differ
diff --git a/public/static/img/upyun.png b/public/static/img/upyun.png
new file mode 100644
index 0000000..67ff1dd
Binary files /dev/null and b/public/static/img/upyun.png differ
diff --git a/scripts/build.js b/scripts/build.js
new file mode 100644
index 0000000..58c5447
--- /dev/null
+++ b/scripts/build.js
@@ -0,0 +1,199 @@
+'use strict';
+
+// Do this as the first thing so that any code reading it knows the right env.
+process.env.BABEL_ENV = 'production';
+process.env.NODE_ENV = 'production';
+
+// Makes the script crash on unhandled rejections instead of silently
+// ignoring them. In the future, promise rejections that are not handled will
+// terminate the Node.js process with a non-zero exit code.
+process.on('unhandledRejection', err => {
+  throw err;
+});
+
+// Ensure environment variables are read.
+require('../config/env');
+
+
+const path = require('path');
+const chalk = require('react-dev-utils/chalk');
+const fs = require('fs-extra');
+const webpack = require('webpack');
+const configFactory = require('../config/webpack.config');
+const paths = require('../config/paths');
+const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
+const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
+const printHostingInstructions = require('react-dev-utils/printHostingInstructions');
+const FileSizeReporter = require('react-dev-utils/FileSizeReporter');
+const printBuildError = require('react-dev-utils/printBuildError');
+
+const measureFileSizesBeforeBuild =
+  FileSizeReporter.measureFileSizesBeforeBuild;
+const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild;
+const useYarn = fs.existsSync(paths.yarnLockFile);
+
+// These sizes are pretty large. We'll warn for bundles exceeding them.
+const WARN_AFTER_BUNDLE_GZIP_SIZE = 512 * 1024;
+const WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024;
+
+const isInteractive = process.stdout.isTTY;
+
+// Warn and crash if required files are missing
+if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
+  process.exit(1);
+}
+
+// Generate configuration
+const config = configFactory('production');
+
+// We require that you explicitly set browsers and do not fall back to
+// browserslist defaults.
+const { checkBrowsers } = require('react-dev-utils/browsersHelper');
+checkBrowsers(paths.appPath, isInteractive)
+  .then(() => {
+    // First, read the current file sizes in build directory.
+    // This lets us display how much they changed later.
+    return measureFileSizesBeforeBuild(paths.appBuild);
+  })
+  .then(previousFileSizes => {
+    // Remove all content but keep the directory so that
+    // if you're in it, you don't end up in Trash
+    fs.emptyDirSync(paths.appBuild);
+    // Merge with the public folder
+    copyPublicFolder();
+    // Start the webpack build
+    return build(previousFileSizes);
+  })
+  .then(
+    ({ stats, previousFileSizes, warnings }) => {
+      if (warnings.length) {
+        console.log(chalk.yellow('Compiled with warnings.\n'));
+        console.log(warnings.join('\n\n'));
+        console.log(
+          '\nSearch for the ' +
+            chalk.underline(chalk.yellow('keywords')) +
+            ' to learn more about each warning.'
+        );
+        console.log(
+          'To ignore, add ' +
+            chalk.cyan('// eslint-disable-next-line') +
+            ' to the line before.\n'
+        );
+      } else {
+        console.log(chalk.green('Compiled successfully.\n'));
+      }
+
+      console.log('File sizes after gzip:\n');
+      printFileSizesAfterBuild(
+        stats,
+        previousFileSizes,
+        paths.appBuild,
+        WARN_AFTER_BUNDLE_GZIP_SIZE,
+        WARN_AFTER_CHUNK_GZIP_SIZE
+      );
+      console.log();
+
+      const appPackage = require(paths.appPackageJson);
+      const publicUrl = paths.publicUrl;
+      const publicPath = config.output.publicPath;
+      const buildFolder = path.relative(process.cwd(), paths.appBuild);
+      printHostingInstructions(
+        appPackage,
+        publicUrl,
+        publicPath,
+        buildFolder,
+        useYarn
+      );
+    },
+    err => {
+      const tscCompileOnError = process.env.TSC_COMPILE_ON_ERROR === 'true';
+      if (tscCompileOnError) {
+        console.log(chalk.yellow(
+          'Compiled with the following type errors (you may want to check these before deploying your app):\n'
+        ));
+        printBuildError(err);
+      } else {
+        console.log(chalk.red('Failed to compile.\n'));
+        printBuildError(err);
+        process.exit(1);
+      }
+    }
+  )
+  .catch(err => {
+    if (err && err.message) {
+      console.log(err.message);
+    }
+    process.exit(1);
+  });
+
+// Create the production build and print the deployment instructions.
+function build(previousFileSizes) {
+  // We used to support resolving modules according to `NODE_PATH`.
+  // This now has been deprecated in favor of jsconfig/tsconfig.json
+  // This lets you use absolute paths in imports inside large monorepos:
+  if (process.env.NODE_PATH) {
+    console.log(
+      chalk.yellow(
+        'Setting NODE_PATH to resolve modules absolutely has been deprecated in favor of setting baseUrl in jsconfig.json (or tsconfig.json if you are using TypeScript) and will be removed in a future major release of create-react-app.'
+      )
+    );
+    console.log();
+  }
+
+  console.log('Creating an optimized production build...');
+
+  const compiler = webpack(config);
+  return new Promise((resolve, reject) => {
+    compiler.run((err, stats) => {
+      let messages;
+      if (err) {
+        if (!err.message) {
+          return reject(err);
+        }
+        messages = formatWebpackMessages({
+          errors: [err.message],
+          warnings: [],
+        });
+      } else {
+        messages = formatWebpackMessages(
+          stats.toJson({ all: false, warnings: true, errors: true })
+        );
+      }
+      if (messages.errors.length) {
+        // Only keep the first error. Others are often indicative
+        // of the same problem, but confuse the reader with noise.
+        if (messages.errors.length > 1) {
+          messages.errors.length = 1;
+        }
+        return reject(new Error(messages.errors.join('\n\n')));
+      }
+      if (
+        process.env.CI &&
+        (typeof process.env.CI !== 'string' ||
+          process.env.CI.toLowerCase() !== 'false') &&
+        messages.warnings.length
+      ) {
+        console.log(
+          chalk.yellow(
+            '\nTreating warnings as errors because process.env.CI = true.\n' +
+              'Most CI servers set it automatically.\n'
+          )
+        );
+        return reject(new Error(messages.warnings.join('\n\n')));
+      }
+
+      return resolve({
+        stats,
+        previousFileSizes,
+        warnings: messages.warnings,
+      });
+    });
+  });
+}
+
+function copyPublicFolder() {
+  fs.copySync(paths.appPublic, paths.appBuild, {
+    dereference: true,
+    filter: file => file !== paths.appHtml,
+  });
+}
diff --git a/scripts/start.js b/scripts/start.js
new file mode 100644
index 0000000..dd89084
--- /dev/null
+++ b/scripts/start.js
@@ -0,0 +1,147 @@
+'use strict';
+
+// Do this as the first thing so that any code reading it knows the right env.
+process.env.BABEL_ENV = 'development';
+process.env.NODE_ENV = 'development';
+
+// Makes the script crash on unhandled rejections instead of silently
+// ignoring them. In the future, promise rejections that are not handled will
+// terminate the Node.js process with a non-zero exit code.
+process.on('unhandledRejection', err => {
+  throw err;
+});
+
+// Ensure environment variables are read.
+require('../config/env');
+
+
+const fs = require('fs');
+const chalk = require('react-dev-utils/chalk');
+const webpack = require('webpack');
+const WebpackDevServer = require('webpack-dev-server');
+const clearConsole = require('react-dev-utils/clearConsole');
+const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
+const {
+  choosePort,
+  createCompiler,
+  prepareProxy,
+  prepareUrls,
+} = require('react-dev-utils/WebpackDevServerUtils');
+const openBrowser = require('react-dev-utils/openBrowser');
+const paths = require('../config/paths');
+const configFactory = require('../config/webpack.config');
+const createDevServerConfig = require('../config/webpackDevServer.config');
+
+const useYarn = fs.existsSync(paths.yarnLockFile);
+const isInteractive = process.stdout.isTTY;
+
+// Warn and crash if required files are missing
+if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
+  process.exit(1);
+}
+
+// Tools like Cloud9 rely on this.
+const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
+const HOST = process.env.HOST || '0.0.0.0';
+
+if (process.env.HOST) {
+  console.log(
+    chalk.cyan(
+      `Attempting to bind to HOST environment variable: ${chalk.yellow(
+        chalk.bold(process.env.HOST)
+      )}`
+    )
+  );
+  console.log(
+    `If this was unintentional, check that you haven't mistakenly set it in your shell.`
+  );
+  console.log(
+    `Learn more here: ${chalk.yellow('https://bit.ly/CRA-advanced-config')}`
+  );
+  console.log();
+}
+
+// We require that you explicitly set browsers and do not fall back to
+// browserslist defaults.
+const { checkBrowsers } = require('react-dev-utils/browsersHelper');
+checkBrowsers(paths.appPath, isInteractive)
+  .then(() => {
+    // We attempt to use the default port but if it is busy, we offer the user to
+    // run on a different port. `choosePort()` Promise resolves to the next free port.
+    return choosePort(HOST, DEFAULT_PORT);
+  })
+  .then(port => {
+    if (port == null) {
+      // We have not found a port.
+      return;
+    }
+    const config = configFactory('development');
+    const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
+    const appName = require(paths.appPackageJson).name;
+    const useTypeScript = fs.existsSync(paths.appTsConfig);
+    const tscCompileOnError = process.env.TSC_COMPILE_ON_ERROR === 'true';
+    const urls = prepareUrls(protocol, HOST, port);
+    const devSocket = {
+      warnings: warnings =>
+        devServer.sockWrite(devServer.sockets, 'warnings', warnings),
+      errors: errors =>
+        devServer.sockWrite(devServer.sockets, 'errors', errors),
+    };
+    // Create a webpack compiler that is configured with custom messages.
+    const compiler = createCompiler({
+      appName,
+      config,
+      devSocket,
+      urls,
+      useYarn,
+      useTypeScript,
+      tscCompileOnError,
+      webpack,
+    });
+    // Load proxy config
+    const proxySetting = require(paths.appPackageJson).proxy;
+    const proxyConfig = prepareProxy(proxySetting, paths.appPublic);
+    // Serve webpack assets generated by the compiler over a web server.
+    const serverConfig = createDevServerConfig(
+      proxyConfig,
+      urls.lanUrlForConfig
+    );
+    const devServer = new WebpackDevServer(compiler, serverConfig);
+    // Launch WebpackDevServer.
+    devServer.listen(port, HOST, err => {
+      if (err) {
+        return console.log(err);
+      }
+      if (isInteractive) {
+        clearConsole();
+      }
+
+      // We used to support resolving modules according to `NODE_PATH`.
+      // This now has been deprecated in favor of jsconfig/tsconfig.json
+      // This lets you use absolute paths in imports inside large monorepos:
+      if (process.env.NODE_PATH) {
+        console.log(
+          chalk.yellow(
+            'Setting NODE_PATH to resolve modules absolutely has been deprecated in favor of setting baseUrl in jsconfig.json (or tsconfig.json if you are using TypeScript) and will be removed in a future major release of create-react-app.'
+          )
+        );
+        console.log();
+      }
+
+      console.log(chalk.cyan('Starting the development server...\n'));
+      openBrowser(urls.localUrlForBrowser);
+    });
+
+    ['SIGINT', 'SIGTERM'].forEach(function(sig) {
+      process.on(sig, function() {
+        devServer.close();
+        process.exit();
+      });
+    });
+  })
+  .catch(err => {
+    if (err && err.message) {
+      console.log(err.message);
+    }
+    process.exit(1);
+  });
diff --git a/scripts/test.js b/scripts/test.js
new file mode 100644
index 0000000..b57cb38
--- /dev/null
+++ b/scripts/test.js
@@ -0,0 +1,53 @@
+'use strict';
+
+// Do this as the first thing so that any code reading it knows the right env.
+process.env.BABEL_ENV = 'test';
+process.env.NODE_ENV = 'test';
+process.env.PUBLIC_URL = '';
+
+// Makes the script crash on unhandled rejections instead of silently
+// ignoring them. In the future, promise rejections that are not handled will
+// terminate the Node.js process with a non-zero exit code.
+process.on('unhandledRejection', err => {
+  throw err;
+});
+
+// Ensure environment variables are read.
+require('../config/env');
+
+
+const jest = require('jest');
+const execSync = require('child_process').execSync;
+let argv = process.argv.slice(2);
+
+function isInGitRepository() {
+  try {
+    execSync('git rev-parse --is-inside-work-tree', { stdio: 'ignore' });
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+
+function isInMercurialRepository() {
+  try {
+    execSync('hg --cwd . root', { stdio: 'ignore' });
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+
+// Watch unless on CI or explicitly running all tests
+if (
+  !process.env.CI &&
+  argv.indexOf('--watchAll') === -1 &&
+  argv.indexOf('--watchAll=false') === -1
+) {
+  // https://github.com/facebook/create-react-app/issues/5210
+  const hasSourceControl = isInGitRepository() || isInMercurialRepository();
+  argv.push(hasSourceControl ? '--watch' : '--watchAll');
+}
+
+
+jest.run(argv);
diff --git a/src/Admin.js b/src/Admin.js
new file mode 100644
index 0000000..8f656fa
--- /dev/null
+++ b/src/Admin.js
@@ -0,0 +1,233 @@
+import React, { useEffect, useState } from "react";
+import { CssBaseline, makeStyles } from "@material-ui/core";
+import AlertBar from "./component/Common/Snackbar";
+import Dashboard from "./component/Admin/Dashboard";
+import { useHistory } from "react-router";
+import Auth from "./middleware/Auth";
+import { Route, Switch } from "react-router-dom";
+import { ThemeProvider } from "@material-ui/styles";
+import createTheme from "@material-ui/core/styles/createMuiTheme";
+import { zhCN } from "@material-ui/core/locale";
+import Index from "./component/Admin/Index";
+import SiteInformation from "./component/Admin/Setting/SiteInformation";
+import Access from "./component/Admin/Setting/Access";
+import Mail from "./component/Admin/Setting/Mail";
+import UploadDownload from "./component/Admin/Setting/UploadDownload";
+import VAS from "./component/Admin/Setting/VAS";
+import Theme from "./component/Admin/Setting/Theme";
+import ImageSetting from "./component/Admin/Setting/Image";
+import Policy from "./component/Admin/Policy/Policy";
+import AddPolicy from "./component/Admin/Policy/AddPolicy";
+import EditPolicyPreload from "./component/Admin/Policy/EditPolicy";
+import Group from "./component/Admin/Group/Group";
+import GroupForm from "./component/Admin/Group/GroupForm";
+import EditGroupPreload from "./component/Admin/Group/EditGroup";
+import User from "./component/Admin/User/User";
+import UserForm from "./component/Admin/User/UserForm";
+import EditUserPreload from "./component/Admin/User/EditUser";
+import File from "./component/Admin/File/File";
+import Share from "./component/Admin/Share/Share";
+import Order from "./component/Admin/Order/Order";
+import Download from "./component/Admin/Task/Download";
+import Task from "./component/Admin/Task/Task";
+import Import from "./component/Admin/File/Import";
+import ReportList from "./component/Admin/Report/ReportList";
+import Captcha from "./component/Admin/Setting/Captcha";
+import Node from "./component/Admin/Node/Node";
+import AddNode from "./component/Admin/Node/AddNode";
+import EditNode from "./component/Admin/Node/EditNode";
+
+const useStyles = makeStyles((theme) => ({
+    root: {
+        display: "flex",
+    },
+    content: {
+        flexGrow: 1,
+        padding: 0,
+        minWidth: 0,
+    },
+    toolbar: theme.mixins.toolbar,
+}));
+
+const theme = createTheme(
+    {
+        palette: {
+            background: {},
+        },
+        shape:{
+            borderRadius:12,
+        },
+        overrides: {
+            MuiButton: {
+                root: {
+                    textTransform: "none",
+                },
+            },
+            MuiTab: {
+                root: {
+                    textTransform: "none",
+                },
+            },
+        },
+    },
+    zhCN
+);
+
+export default function Admin() {
+    const classes = useStyles();
+    const history = useHistory();
+    const [show, setShow] = useState(false);
+
+    useEffect(() => {
+        const user = Auth.GetUser();
+        if (user && user.group) {
+            if (user.group.id !== 1) {
+                history.push("/home");
+                return;
+            }
+            setShow(true);
+            return;
+        }
+        history.push("/login");
+        // eslint-disable-next-line
+    }, []);
+
+    return (
+        <React.Fragment>
+            <ThemeProvider theme={theme}>
+                <div className={classes.root}>
+                    <CssBaseline />
+                    <AlertBar />
+                    {show && (
+                        <Dashboard
+                            content={(path) => (
+                                <Switch>
+                                    <Route path={`${path}/home`} exact>
+                                        <Index />
+                                    </Route>
+
+                                    <Route path={`${path}/basic`}>
+                                        <SiteInformation />
+                                    </Route>
+
+                                    <Route path={`${path}/access`}>
+                                        <Access />
+                                    </Route>
+
+                                    <Route path={`${path}/mail`}>
+                                        <Mail />
+                                    </Route>
+
+                                    <Route path={`${path}/upload`}>
+                                        <UploadDownload />
+                                    </Route>
+
+                                    <Route path={`${path}/vas`}>
+                                        <VAS />
+                                    </Route>
+
+                                    <Route path={`${path}/theme`}>
+                                        <Theme />
+                                    </Route>
+
+                                    <Route path={`${path}/image`}>
+                                        <ImageSetting />
+                                    </Route>
+
+                                    <Route path={`${path}/captcha`}>
+                                        <Captcha />
+                                    </Route>
+
+                                    <Route path={`${path}/policy`} exact>
+                                        <Policy />
+                                    </Route>
+
+                                    <Route
+                                        path={`${path}/policy/add/:type`}
+                                        exact
+                                    >
+                                        <AddPolicy />
+                                    </Route>
+
+                                    <Route
+                                        path={`${path}/policy/edit/:mode/:id`}
+                                        exact
+                                    >
+                                        <EditPolicyPreload />
+                                    </Route>
+
+                                    <Route path={`${path}/group`} exact>
+                                        <Group />
+                                    </Route>
+
+                                    <Route path={`${path}/group/add`} exact>
+                                        <GroupForm />
+                                    </Route>
+
+                                    <Route
+                                        path={`${path}/group/edit/:id`}
+                                        exact
+                                    >
+                                        <EditGroupPreload />
+                                    </Route>
+
+                                    <Route path={`${path}/user`} exact>
+                                        <User />
+                                    </Route>
+
+                                    <Route path={`${path}/user/add`} exact>
+                                        <UserForm />
+                                    </Route>
+
+                                    <Route path={`${path}/user/edit/:id`} exact>
+                                        <EditUserPreload />
+                                    </Route>
+
+                                    <Route path={`${path}/file`} exact>
+                                        <File />
+                                    </Route>
+
+                                    <Route path={`${path}/file/import`} exact>
+                                        <Import />
+                                    </Route>
+
+                                    <Route path={`${path}/share`} exact>
+                                        <Share />
+                                    </Route>
+
+                                    <Route path={`${path}/order`} exact>
+                                        <Order />
+                                    </Route>
+
+                                    <Route path={`${path}/download`} exact>
+                                        <Download />
+                                    </Route>
+
+                                    <Route path={`${path}/task`} exact>
+                                        <Task />
+                                    </Route>
+
+                                    <Route path={`${path}/report`} exact>
+                                        <ReportList />
+                                    </Route>
+
+                                    <Route path={`${path}/node`} exact>
+                                        <Node />
+                                    </Route>
+
+                                    <Route path={`${path}/node/add`} exact>
+                                        <AddNode />
+                                    </Route>
+
+                                    <Route path={`${path}/node/edit/:id`} exact>
+                                        <EditNode />
+                                    </Route>
+                                </Switch>
+                            )}
+                        />
+                    )}
+                </div>
+            </ThemeProvider>
+        </React.Fragment>
+    );
+}
diff --git a/src/App.js b/src/App.js
new file mode 100644
index 0000000..7385499
--- /dev/null
+++ b/src/App.js
@@ -0,0 +1,280 @@
+import React, { Suspense } from "react";
+import AuthRoute from "./middleware/AuthRoute";
+import NoAuthRoute from "./middleware/NoAuthRoute";
+import Navbar from "./component/Navbar/Navbar.js";
+import useMediaQuery from "@material-ui/core/useMediaQuery";
+import AlertBar from "./component/Common/Snackbar";
+import { createMuiTheme, lighten } from "@material-ui/core/styles";
+import { useSelector } from "react-redux";
+import { Redirect, Route, Switch, useRouteMatch } from "react-router-dom";
+import Auth from "./middleware/Auth";
+import { CssBaseline, makeStyles, ThemeProvider } from "@material-ui/core";
+import PageLoading from "./component/Placeholder/PageLoading.js";
+import { changeThemeColor } from "./utils";
+import NotFound from "./component/Share/NotFound";
+// Lazy loads
+import LoginForm from "./component/Login/LoginForm";
+import FileManager from "./component/FileManager/FileManager.js";
+import VideoPreview from "./component/Viewer/Video.js";
+import SearchResult from "./component/Share/SearchResult";
+import MyShare from "./component/Share/MyShare";
+import Download from "./component/Download/Download";
+import SharePreload from "./component/Share/SharePreload";
+import DocViewer from "./component/Viewer/Doc";
+import TextViewer from "./component/Viewer/Text";
+import Quota from "./component/VAS/Quota";
+import BuyQuota from "./component/VAS/BuyQuota";
+import WebDAV from "./component/Setting/WebDAV";
+import Tasks from "./component/Setting/Tasks";
+import Profile from "./component/Setting/Profile";
+import UserSetting from "./component/Setting/UserSetting";
+import QQCallback from "./component/Login/QQ";
+import Register from "./component/Login/Register";
+import Activation from "./component/Login/Activication";
+import ResetForm from "./component/Login/ResetForm";
+import Reset from "./component/Login/Reset";
+import CodeViewer from "./component/Viewer/Code";
+import SiteNotice from "./component/Modals/SiteNotice";
+import MusicPlayer from "./component/FileManager/MusicPlayer";
+import EpubViewer from "./component/Viewer/Epub";
+import { useTranslation } from "react-i18next";
+
+const PDFViewer = React.lazy(() =>
+    import(/* webpackChunkName: "pdf" */ "./component/Viewer/PDF")
+);
+
+export default function App() {
+    const themeConfig = useSelector((state) => state.siteConfig.theme);
+    const isLogin = useSelector((state) => state.viewUpdate.isLogin);
+    const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
+    const { t } = useTranslation();
+
+    const theme = React.useMemo(() => {
+        themeConfig.palette.type = prefersDarkMode ? "dark" : "light";
+        const prefer = Auth.GetPreference("theme_mode");
+        if (prefer) {
+            themeConfig.palette.type = prefer;
+        }
+        const theme = createMuiTheme({
+            ...themeConfig,
+            palette: {
+                ...themeConfig.palette,
+                primary: {
+                    ...themeConfig.palette.primary,
+                    main:
+                        themeConfig.palette.type === "dark"
+                            ? lighten(themeConfig.palette.primary.main, 0.3)
+                            : themeConfig.palette.primary.main,
+                },
+            },
+            shape: {
+                ...themeConfig.shape,
+                borderRadius: 12,
+            },
+            overrides: {
+                MuiButton: {
+                    root: {
+                        textTransform: "none",
+                    },
+                },
+                MuiTab: {
+                    root: {
+                        textTransform: "none",
+                    },
+                },
+            },
+        });
+        changeThemeColor(
+            themeConfig.palette.type === "dark"
+                ? theme.palette.background.default
+                : theme.palette.primary.main
+        );
+        return theme;
+    }, [prefersDarkMode, themeConfig]);
+
+    const useStyles = makeStyles((theme) => ({
+        root: {
+            display: "flex",
+        },
+        content: {
+            flexGrow: 1,
+            padding: theme.spacing(0),
+            minWidth: 0,
+        },
+        toolbar: theme.mixins.toolbar,
+    }));
+
+    const classes = useStyles();
+
+    const { path } = useRouteMatch();
+    return (
+        <React.Fragment>
+            <ThemeProvider theme={theme}>
+                <div className={classes.root} id="container">
+                    <CssBaseline />
+                    <AlertBar />
+                    <Navbar />
+                    <main className={classes.content}>
+                        <div className={classes.toolbar} />
+                        <Switch>
+                            <AuthRoute exact path={path} isLogin={isLogin}>
+                                <Redirect
+                                    to={{
+                                        pathname: "/home",
+                                    }}
+                                />
+                            </AuthRoute>
+
+                            <AuthRoute path={`${path}home`} isLogin={isLogin}>
+                                <>
+                                    <SiteNotice />
+                                    <FileManager />
+                                </>
+                            </AuthRoute>
+
+                            <AuthRoute path={`${path}video`} isLogin={isLogin}>
+                                <VideoPreview />
+                            </AuthRoute>
+
+                            <AuthRoute path={`${path}text`} isLogin={isLogin}>
+                                <TextViewer />
+                            </AuthRoute>
+
+                            <AuthRoute path={`${path}doc`} isLogin={isLogin}>
+                                <DocViewer />
+                            </AuthRoute>
+
+                            <AuthRoute path={`${path}pdf`} isLogin={isLogin}>
+                                <Suspense fallback={<PageLoading />}>
+                                    <PDFViewer />
+                                </Suspense>
+                            </AuthRoute>
+
+                            <AuthRoute path={`${path}code`} isLogin={isLogin}>
+                                <CodeViewer />
+                            </AuthRoute>
+
+                            <AuthRoute path={`${path}epub`} isLogin={isLogin}>
+                                <EpubViewer />
+                            </AuthRoute>
+
+                            <AuthRoute path={`${path}aria2`} isLogin={isLogin}>
+                                <Download />
+                            </AuthRoute>
+
+                            <AuthRoute path={`${path}shares`} isLogin={isLogin}>
+                                <MyShare />
+                            </AuthRoute>
+
+                            <Route path={`${path}search`} isLogin={isLogin}>
+                                <SearchResult />
+                            </Route>
+
+                            <AuthRoute path={`${path}quota`} isLogin={isLogin}>
+                                <Quota />
+                            </AuthRoute>
+
+                            <AuthRoute path={`${path}buy`} isLogin={isLogin}>
+                                <BuyQuota />
+                            </AuthRoute>
+
+                            <AuthRoute
+                                path={`${path}setting`}
+                                isLogin={isLogin}
+                            >
+                                <UserSetting />
+                            </AuthRoute>
+
+                            <AuthRoute
+                                path={`${path}profile/:id`}
+                                isLogin={isLogin}
+                            >
+                                <Profile />
+                            </AuthRoute>
+
+                            <AuthRoute
+                                path={`${path}connect`}
+                                isLogin={isLogin}
+                            >
+                                <WebDAV />
+                            </AuthRoute>
+
+                            <AuthRoute path={`${path}tasks`} isLogin={isLogin}>
+                                <Tasks />
+                            </AuthRoute>
+
+                            <NoAuthRoute
+                                exact
+                                path={`${path}login`}
+                                isLogin={isLogin}
+                            >
+                                <LoginForm />
+                            </NoAuthRoute>
+
+                            <NoAuthRoute
+                                exact
+                                path={`${path}signup`}
+                                isLogin={isLogin}
+                            >
+                                <Register />
+                            </NoAuthRoute>
+
+                            <Route path={`${path}activate`} exact>
+                                <Activation />
+                            </Route>
+
+                            <Route path={`${path}reset`} exact>
+                                <ResetForm />
+                            </Route>
+
+                            <Route path={`${path}forget`} exact>
+                                <Reset />
+                            </Route>
+
+                            <Route path={`${path}login/qq`}>
+                                <QQCallback />
+                            </Route>
+
+                            <Route exact path={`${path}s/:id`}>
+                                <SharePreload />
+                            </Route>
+
+                            <Route path={`${path}s/:id/video(/)*`}>
+                                <VideoPreview />
+                            </Route>
+
+                            <Route path={`${path}s/:id/doc(/)*`}>
+                                <DocViewer />
+                            </Route>
+
+                            <Route path={`${path}s/:id/text(/)*`}>
+                                <TextViewer />
+                            </Route>
+
+                            <Route path={`${path}s/:id/pdf(/)*`}>
+                                <Suspense fallback={<PageLoading />}>
+                                    <PDFViewer />
+                                </Suspense>
+                            </Route>
+
+                            <Route path={`${path}s/:id/code(/)*`}>
+                                <CodeViewer />
+                            </Route>
+
+                            <Route path={`${path}s/:id/epub(/)*`}>
+                                <EpubViewer />
+                            </Route>
+
+                            <Route path="*">
+                                <NotFound
+                                    msg={t("pageNotFound", { ns: "common" })}
+                                />
+                            </Route>
+                        </Switch>
+                    </main>
+                    <MusicPlayer />
+                </div>
+            </ThemeProvider>
+        </React.Fragment>
+    );
+}
diff --git a/src/App.test.js b/src/App.test.js
new file mode 100644
index 0000000..e08573e
--- /dev/null
+++ b/src/App.test.js
@@ -0,0 +1,9 @@
+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);
+});
diff --git a/src/component/Admin/Common/DomainInput.js b/src/component/Admin/Common/DomainInput.js
new file mode 100644
index 0000000..dc8e2ff
--- /dev/null
+++ b/src/component/Admin/Common/DomainInput.js
@@ -0,0 +1,77 @@
+import React, { useEffect, useState } from "react";
+import FormControl from "@material-ui/core/FormControl";
+import InputLabel from "@material-ui/core/InputLabel";
+import Input from "@material-ui/core/Input";
+import InputAdornment from "@material-ui/core/InputAdornment";
+import Select from "@material-ui/core/Select";
+import MenuItem from "@material-ui/core/MenuItem";
+import FormHelperText from "@material-ui/core/FormHelperText";
+
+export default function DomainInput({ onChange, value, required, label }) {
+    const [domain, setDomain] = useState("");
+    const [protocol, setProtocol] = useState("https://");
+    const [error, setError] = useState();
+
+    useState(() => {
+        value = value ? value : "";
+        if (value.startsWith("https://")) {
+            setDomain(value.replace("https://", ""));
+            setProtocol("https://");
+        } else {
+            if (value !== "") {
+                setDomain(value.replace("http://", ""));
+                setProtocol("http://");
+            }
+        }
+    }, [value]);
+
+    useEffect(() => {
+        if (protocol === "http://" && window.location.protocol === "https:") {
+            setError(
+                "您当前站点启用了 HTTPS ，此处选择 HTTP 可能会导致无法连接。"
+            );
+        } else {
+            setError("");
+        }
+    }, [protocol]);
+
+    return (
+        <FormControl>
+            <InputLabel htmlFor="component-helper">{label}</InputLabel>
+            <Input
+                error={error !== ""}
+                value={domain}
+                onChange={(e) => {
+                    setDomain(e.target.value);
+                    onChange({
+                        target: {
+                            value: protocol + e.target.value,
+                        },
+                    });
+                }}
+                required={required}
+                startAdornment={
+                    <InputAdornment position="start">
+                        <Select
+                            value={protocol}
+                            onChange={(e) => {
+                                setProtocol(e.target.value);
+                                onChange({
+                                    target: {
+                                        value: e.target.value + domain,
+                                    },
+                                });
+                            }}
+                        >
+                            <MenuItem value={"http://"}>http://</MenuItem>
+                            <MenuItem value={"https://"}>https://</MenuItem>
+                        </Select>
+                    </InputAdornment>
+                }
+            />
+            {error !== "" && (
+                <FormHelperText error={error !== ""}>{error}</FormHelperText>
+            )}
+        </FormControl>
+    );
+}
diff --git a/src/component/Admin/Common/FileSelector.js b/src/component/Admin/Common/FileSelector.js
new file mode 100644
index 0000000..67d399a
--- /dev/null
+++ b/src/component/Admin/Common/FileSelector.js
@@ -0,0 +1,94 @@
+import React, { useCallback } from "react";
+import Autocomplete from "@material-ui/lab/Autocomplete";
+import TextField from "@material-ui/core/TextField";
+import API from "../../../middleware/Api";
+import { useDispatch } from "react-redux";
+import Typography from "@material-ui/core/Typography";
+import { toggleSnackbar } from "../../../redux/explorer";
+
+export default function FileSelector({ onChange, value, label }) {
+    const [selectValue, setSelectValue] = React.useState(
+        value.map((v) => {
+            return {
+                ID: v,
+                Name: "文件ID " + v,
+            };
+        })
+    );
+    const [loading, setLoading] = React.useState(false);
+    const [inputValue, setInputValue] = React.useState("");
+    const [options, setOptions] = React.useState([]);
+    const dispatch = useDispatch();
+    const ToggleSnackbar = useCallback(
+        (vertical, horizontal, msg, color) =>
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color)),
+        [dispatch]
+    );
+
+    React.useEffect(() => {
+        let active = true;
+        if (
+            inputValue === "" ||
+            selectValue.findIndex((v) => v.ID.toString() === inputValue) >= 0
+        ) {
+            setOptions([]);
+            return;
+        }
+
+        setLoading(true);
+        API.post("/admin/file/list", {
+            page: 1,
+            page_size: 10,
+            order_by: "id desc",
+            conditions: {
+                id: inputValue,
+            },
+            searches: {},
+        })
+            .then((response) => {
+                if (active) {
+                    let newOptions = [];
+                    newOptions = [...newOptions, ...response.data.items];
+                    setOptions(newOptions);
+                }
+                setLoading(false);
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+                setLoading(false);
+            });
+        return () => {
+            active = false;
+        };
+    }, [selectValue, inputValue]);
+
+    return (
+        <Autocomplete
+            multiple
+            style={{ width: 300 }}
+            options={options}
+            getOptionLabel={(option) =>
+                typeof option === "string" ? option : option.Name
+            }
+            filterOptions={(x) => x}
+            loading={loading}
+            autoComplete
+            includeInputInList
+            filterSelectedOptions
+            value={selectValue}
+            onInputChange={(event, newInputValue) => {
+                setInputValue(newInputValue);
+            }}
+            onChange={(event, newValue) => {
+                setSelectValue(newValue);
+                onChange(JSON.stringify(newValue.map((v) => v.ID)));
+            }}
+            renderInput={(params) => (
+                <TextField {...params} label={label} type={"number"} />
+            )}
+            renderOption={(option) => (
+                <Typography noWrap>{option.Name}</Typography>
+            )}
+        />
+    );
+}
diff --git a/src/component/Admin/Common/PolicySelector.js b/src/component/Admin/Common/PolicySelector.js
new file mode 100644
index 0000000..d6eb7d8
--- /dev/null
+++ b/src/component/Admin/Common/PolicySelector.js
@@ -0,0 +1,95 @@
+import React, { useCallback, useEffect, useState } from "react";
+import { useDispatch } from "react-redux";
+import { toggleSnackbar } from "../../../redux/explorer";
+import InputLabel from "@material-ui/core/InputLabel";
+import Select from "@material-ui/core/Select";
+import Input from "@material-ui/core/Input";
+import Chip from "@material-ui/core/Chip";
+import MenuItem from "@material-ui/core/MenuItem";
+import { getSelectItemStyles } from "../../../utils";
+import FormHelperText from "@material-ui/core/FormHelperText";
+import { FormControl } from "@material-ui/core";
+import API from "../../../middleware/Api";
+import { useTheme } from "@material-ui/core/styles";
+
+export default function PolicySelector({
+    onChange,
+    value,
+    label,
+    helperText,
+    filter,
+}) {
+    const [policies, setPolicies] = useState({});
+    const theme = useTheme();
+    const dispatch = useDispatch();
+    const ToggleSnackbar = useCallback(
+        (vertical, horizontal, msg, color) =>
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color)),
+        [dispatch]
+    );
+
+    useEffect(() => {
+        API.post("/admin/policy/list", {
+            page: 1,
+            page_size: 10000,
+            order_by: "id asc",
+            conditions: {},
+        })
+            .then((response) => {
+                const res = {};
+                let data = response.data.items;
+                if (filter) {
+                    data = data.filter(filter);
+                }
+
+                data.forEach((v) => {
+                    res[v.ID] = v.Name;
+                });
+                setPolicies(res);
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            });
+    }, []);
+
+    return (
+        <FormControl fullWidth>
+            <InputLabel htmlFor="component-helper">{label}</InputLabel>
+            <Select
+                labelId="demo-mutiple-chip-label"
+                id="demo-mutiple-chip"
+                multiple
+                value={value}
+                onChange={onChange}
+                input={<Input id="select-multiple-chip" />}
+                renderValue={(selected) => (
+                    <div>
+                        {selected.map((value) => (
+                            <Chip
+                                style={{
+                                    margin: 2,
+                                }}
+                                key={value}
+                                size={"small"}
+                                label={policies[value]}
+                            />
+                        ))}
+                    </div>
+                )}
+            >
+                {Object.keys(policies).map((pid) => (
+                    <MenuItem
+                        key={pid}
+                        value={pid}
+                        style={getSelectItemStyles(pid, value, theme)}
+                    >
+                        {policies[pid]}
+                    </MenuItem>
+                ))}
+            </Select>
+            <FormHelperText id="component-helper-text">
+                {helperText}
+            </FormHelperText>
+        </FormControl>
+    );
+}
diff --git a/src/component/Admin/Common/SizeInput.js b/src/component/Admin/Common/SizeInput.js
new file mode 100644
index 0000000..95946e8
--- /dev/null
+++ b/src/component/Admin/Common/SizeInput.js
@@ -0,0 +1,101 @@
+import React, { useCallback, useEffect, useState } from "react";
+import FormControl from "@material-ui/core/FormControl";
+import InputLabel from "@material-ui/core/InputLabel";
+import Input from "@material-ui/core/Input";
+import InputAdornment from "@material-ui/core/InputAdornment";
+import Select from "@material-ui/core/Select";
+import MenuItem from "@material-ui/core/MenuItem";
+import { useDispatch } from "react-redux";
+import { toggleSnackbar } from "../../../redux/explorer";
+import FormHelperText from "@material-ui/core/FormHelperText";
+
+const unitTransform = (v) => {
+    if (!v || v.toString() === "0") {
+        return [0, 1024 * 1024];
+    }
+    for (let i = 4; i >= 0; i--) {
+        const base = Math.pow(1024, i);
+        if (v % base === 0) {
+            return [v / base, base];
+        }
+    }
+};
+
+export default function SizeInput({
+    onChange,
+    min,
+    value,
+    required,
+    label,
+    max,
+    suffix,
+}) {
+    const dispatch = useDispatch();
+    const ToggleSnackbar = useCallback(
+        (vertical, horizontal, msg, color) =>
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color)),
+        [dispatch]
+    );
+
+    const [unit, setUnit] = useState(1);
+    const [val, setVal] = useState(value);
+    const [err, setError] = useState("");
+
+    useEffect(() => {
+        onChange({
+            target: {
+                value: (val * unit).toString(),
+            },
+        });
+        if (val * unit > max || val * unit < min) {
+            setError("不符合尺寸限制");
+        } else {
+            setError("");
+        }
+    }, [val, unit, max, min]);
+
+    useEffect(() => {
+        const res = unitTransform(value);
+        setUnit(res[1]);
+        setVal(res[0]);
+    }, []);
+
+    return (
+        <FormControl error={err !== ""}>
+            <InputLabel htmlFor="component-helper">{label}</InputLabel>
+            <Input
+                style={{ width: 200 }}
+                value={val}
+                type={"number"}
+                inputProps={{ step: 1 }}
+                onChange={(e) => setVal(e.target.value)}
+                required={required}
+                endAdornment={
+                    <InputAdornment position="end">
+                        <Select
+                            labelId="demo-simple-select-label"
+                            id="demo-simple-select"
+                            value={unit}
+                            onChange={(e) => setUnit(e.target.value)}
+                        >
+                            <MenuItem value={1}>B{suffix && suffix}</MenuItem>
+                            <MenuItem value={1024}>
+                                KB{suffix && suffix}
+                            </MenuItem>
+                            <MenuItem value={1024 * 1024}>
+                                MB{suffix && suffix}
+                            </MenuItem>
+                            <MenuItem value={1024 * 1024 * 1024}>
+                                GB{suffix && suffix}
+                            </MenuItem>
+                            <MenuItem value={1024 * 1024 * 1024 * 1024}>
+                                TB{suffix && suffix}
+                            </MenuItem>
+                        </Select>
+                    </InputAdornment>
+                }
+            />
+            {err !== "" && <FormHelperText>{err}</FormHelperText>}
+        </FormControl>
+    );
+}
diff --git a/src/component/Admin/Dashboard.js b/src/component/Admin/Dashboard.js
new file mode 100644
index 0000000..43cbfbc
--- /dev/null
+++ b/src/component/Admin/Dashboard.js
@@ -0,0 +1,477 @@
+import React, { useCallback, useEffect, useState } from "react";
+import clsx from "clsx";
+import { lighten, makeStyles, useTheme } from "@material-ui/core/styles";
+import Drawer from "@material-ui/core/Drawer";
+import AppBar from "@material-ui/core/AppBar";
+import Toolbar from "@material-ui/core/Toolbar";
+import List from "@material-ui/core/List";
+import Typography from "@material-ui/core/Typography";
+import Divider from "@material-ui/core/Divider";
+import IconButton from "@material-ui/core/IconButton";
+import MenuIcon from "@material-ui/icons/Menu";
+import ChevronLeftIcon from "@material-ui/icons/ChevronLeft";
+import ChevronRightIcon from "@material-ui/icons/ChevronRight";
+import ListItem from "@material-ui/core/ListItem";
+import ListItemIcon from "@material-ui/core/ListItemIcon";
+import ListItemText from "@material-ui/core/ListItemText";
+import UserAvatar from "../Navbar/UserAvatar";
+import {
+    Assignment,
+    AttachMoney,
+    Category,
+    CloudDownload,
+    Contactless,
+    Contacts,
+    Group,
+    Home,
+    Image,
+    InsertDriveFile,
+    Language,
+    ListAlt,
+    Mail,
+    Palette,
+    Person,
+    Report,
+    Settings,
+    SettingsEthernet,
+    Share,
+    ShoppingCart,
+    Storage,
+} from "@material-ui/icons";
+import { withStyles } from "@material-ui/core";
+import MuiExpansionPanel from "@material-ui/core/ExpansionPanel";
+import MuiExpansionPanelSummary from "@material-ui/core/ExpansionPanelSummary";
+import MuiExpansionPanelDetails from "@material-ui/core/ExpansionPanelDetails";
+import { useHistory, useLocation } from "react-router";
+import { useRouteMatch } from "react-router-dom";
+import { useDispatch } from "react-redux";
+import { changeSubTitle } from "../../redux/viewUpdate/action";
+import pathHelper from "../../utils/page";
+import { useTranslation } from "react-i18next";
+
+const ExpansionPanel = withStyles({
+    root: {
+        maxWidth: "100%",
+        boxShadow: "none",
+        "&:not(:last-child)": {
+            borderBottom: 0,
+        },
+        "&:before": {
+            display: "none",
+        },
+        "&$expanded": { margin: 0 },
+    },
+    expanded: {},
+})(MuiExpansionPanel);
+
+const ExpansionPanelSummary = withStyles({
+    root: {
+        minHeight: 0,
+        padding: 0,
+
+        "&$expanded": {
+            minHeight: 0,
+        },
+    },
+    content: {
+        maxWidth: "100%",
+        margin: 0,
+        display: "block",
+        "&$expanded": {
+            margin: "0",
+        },
+    },
+    expanded: {},
+})(MuiExpansionPanelSummary);
+
+const ExpansionPanelDetails = withStyles((theme) => ({
+    root: {
+        display: "block",
+        padding: theme.spacing(0),
+    },
+}))(MuiExpansionPanelDetails);
+
+const drawerWidth = 240;
+
+const useStyles = makeStyles((theme) => ({
+    root: {
+        display: "flex",
+        width: "100%",
+    },
+    appBar: {
+        zIndex: theme.zIndex.drawer + 1,
+        transition: theme.transitions.create(["width", "margin"], {
+            easing: theme.transitions.easing.sharp,
+            duration: theme.transitions.duration.leavingScreen,
+        }),
+    },
+    appBarShift: {
+        marginLeft: drawerWidth,
+        width: `calc(100% - ${drawerWidth}px)`,
+        transition: theme.transitions.create(["width", "margin"], {
+            easing: theme.transitions.easing.sharp,
+            duration: theme.transitions.duration.enteringScreen,
+        }),
+    },
+    menuButton: {
+        marginRight: 36,
+    },
+    hide: {
+        display: "none",
+    },
+    drawer: {
+        width: drawerWidth,
+        flexShrink: 0,
+        whiteSpace: "nowrap",
+    },
+    drawerOpen: {
+        width: drawerWidth,
+        transition: theme.transitions.create("width", {
+            easing: theme.transitions.easing.sharp,
+            duration: theme.transitions.duration.enteringScreen,
+        }),
+    },
+    drawerClose: {
+        transition: theme.transitions.create("width", {
+            easing: theme.transitions.easing.sharp,
+            duration: theme.transitions.duration.leavingScreen,
+        }),
+        overflowX: "hidden",
+        width: theme.spacing(7) + 1,
+        [theme.breakpoints.up("sm")]: {
+            width: theme.spacing(9) + 1,
+        },
+    },
+    title: {
+        flexGrow: 1,
+    },
+    toolbar: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "flex-end",
+        padding: theme.spacing(0, 1),
+        ...theme.mixins.toolbar,
+    },
+    content: {
+        flexGrow: 1,
+        padding: theme.spacing(3),
+    },
+    sub: {
+        paddingLeft: 36,
+        color: theme.palette.text.secondary,
+    },
+    subMenu: {
+        backgroundColor: theme.palette.background.default,
+        paddingTop: 0,
+        paddingBottom: 0,
+    },
+    active: {
+        backgroundColor: lighten(theme.palette.primary.main, 0.8),
+        color: theme.palette.primary.main,
+        "&:hover": {
+            backgroundColor: lighten(theme.palette.primary.main, 0.7),
+        },
+    },
+    activeText: {
+        fontWeight: 500,
+    },
+    activeIcon: {
+        color: theme.palette.primary.main,
+    },
+}));
+
+const items = [
+    {
+        title: "nav.summary",
+        icon: <Home />,
+        path: "home",
+    },
+    {
+        title: "nav.settings",
+        icon: <Settings />,
+        sub: [
+            {
+                title: "nav.basicSetting",
+                path: "basic",
+                icon: <Language />,
+            },
+            {
+                title: "nav.publicAccess",
+                path: "access",
+                icon: <Contacts />,
+            },
+            {
+                title: "nav.email",
+                path: "mail",
+                icon: <Mail />,
+            },
+            {
+                title: "nav.transportation",
+                path: "upload",
+                icon: <SettingsEthernet />,
+            },
+            {
+                title: "vas.vas",
+                path: "vas",
+                icon: <AttachMoney />,
+            },
+            {
+                title: "nav.appearance",
+                path: "theme",
+                icon: <Palette />,
+            },
+            {
+                title: "nav.image",
+                path: "image",
+                icon: <Image />,
+            },
+            {
+                title: "nav.captcha",
+                path: "captcha",
+                icon: <Category />,
+            },
+        ],
+    },
+    {
+        title: "nav.storagePolicy",
+        icon: <Storage />,
+        path: "policy",
+    },
+    {
+        title: "nav.nodes",
+        icon: <Contactless />,
+        path: "node",
+    },
+    {
+        title: "nav.groups",
+        icon: <Group />,
+        path: "group",
+    },
+    {
+        title: "nav.users",
+        icon: <Person />,
+        path: "user",
+    },
+    {
+        title: "nav.files",
+        icon: <InsertDriveFile />,
+        path: "file",
+    },
+    {
+        title: "nav.shares",
+        icon: <Share />,
+        path: "share",
+    },
+    {
+        title: "vas.reports",
+        icon: <Report />,
+        path: "report",
+    },
+    {
+        title: "vas.orders",
+        icon: <ShoppingCart />,
+        path: "order",
+    },
+    {
+        title: "nav.tasks",
+        icon: <Assignment />,
+        sub: [
+            {
+                title: "nav.remoteDownload",
+                path: "download",
+                icon: <CloudDownload />,
+            },
+            {
+                title: "nav.generalTasks",
+                path: "task",
+                icon: <ListAlt />,
+            },
+        ],
+    },
+];
+
+export default function Dashboard({ content }) {
+    const { t } = useTranslation("dashboard");
+    const classes = useStyles();
+    const theme = useTheme();
+    const [open, setOpen] = useState(!pathHelper.isMobile());
+    const [menuOpen, setMenuOpen] = useState(null);
+    const history = useHistory();
+    const location = useLocation();
+
+    const handleDrawerOpen = () => {
+        setOpen(true);
+    };
+
+    const handleDrawerClose = () => {
+        setOpen(false);
+    };
+
+    const dispatch = useDispatch();
+    const SetSubTitle = useCallback(
+        (title) => dispatch(changeSubTitle(title)),
+        [dispatch]
+    );
+
+    useEffect(() => {
+        SetSubTitle(t("nav.title"));
+    }, []);
+
+    useEffect(() => {
+        return () => {
+            SetSubTitle();
+        };
+    }, []);
+
+    const { path } = useRouteMatch();
+
+    return (
+        <div className={classes.root}>
+            <AppBar
+                position="fixed"
+                className={clsx(classes.appBar, {
+                    [classes.appBarShift]: open,
+                })}
+            >
+                <Toolbar>
+                    <IconButton
+                        color="inherit"
+                        aria-label="open drawer"
+                        onClick={handleDrawerOpen}
+                        edge="start"
+                        className={clsx(classes.menuButton, {
+                            [classes.hide]: open,
+                        })}
+                    >
+                        <MenuIcon />
+                    </IconButton>
+                    <Typography variant="h6" className={classes.title} noWrap>
+                        {t("nav.dashboard")}
+                    </Typography>
+                    <UserAvatar />
+                </Toolbar>
+            </AppBar>
+            <Drawer
+                variant="permanent"
+                className={clsx(classes.drawer, {
+                    [classes.drawerOpen]: open,
+                    [classes.drawerClose]: !open,
+                })}
+                classes={{
+                    paper: clsx({
+                        [classes.drawerOpen]: open,
+                        [classes.drawerClose]: !open,
+                    }),
+                }}
+            >
+                <div className={classes.toolbar}>
+                    <IconButton onClick={handleDrawerClose}>
+                        {theme.direction === "rtl" ? (
+                            <ChevronRightIcon />
+                        ) : (
+                            <ChevronLeftIcon />
+                        )}
+                    </IconButton>
+                </div>
+                <Divider />
+                <List className={classes.noPadding}>
+                    {items.map((item) => {
+                        if (item.path !== undefined) {
+                            return (
+                                <ListItem
+                                    onClick={() =>
+                                        history.push("/admin/" + item.path)
+                                    }
+                                    button
+                                    className={clsx({
+                                        [classes.active]: location.pathname.startsWith(
+                                            "/admin/" + item.path
+                                        ),
+                                    })}
+                                    key={item.title}
+                                >
+                                    <ListItemIcon
+                                        className={clsx({
+                                            [classes.activeIcon]: location.pathname.startsWith(
+                                                "/admin/" + item.path
+                                            ),
+                                        })}
+                                    >
+                                        {item.icon}
+                                    </ListItemIcon>
+                                    <ListItemText
+                                        className={clsx({
+                                            [classes.activeText]: location.pathname.startsWith(
+                                                "/admin/" + item.path
+                                            ),
+                                        })}
+                                        primary={t(item.title)}
+                                    />
+                                </ListItem>
+                            );
+                        }
+                        return (
+                            // eslint-disable-next-line react/jsx-key
+                            <ExpansionPanel
+                                key={item.title}
+                                square
+                                expanded={menuOpen === item.title}
+                                onChange={(event, isExpanded) => {
+                                    setMenuOpen(isExpanded ? item.title : null);
+                                }}
+                            >
+                                <ExpansionPanelSummary
+                                    aria-controls="panel1d-content"
+                                    id="panel1d-header"
+                                >
+                                    <ListItem button key={item.title}>
+                                        <ListItemIcon>{item.icon}</ListItemIcon>
+                                        <ListItemText primary={t(item.title)} />
+                                    </ListItem>
+                                </ExpansionPanelSummary>
+                                <ExpansionPanelDetails>
+                                    <List className={classes.subMenu}>
+                                        {item.sub.map((sub) => (
+                                            <ListItem
+                                                onClick={() =>
+                                                    history.push(
+                                                        "/admin/" + sub.path
+                                                    )
+                                                }
+                                                className={clsx({
+                                                    [classes.sub]: open,
+                                                    [classes.active]: location.pathname.startsWith(
+                                                        "/admin/" + sub.path
+                                                    ),
+                                                })}
+                                                button
+                                                key={sub.title}
+                                            >
+                                                <ListItemIcon
+                                                    className={clsx({
+                                                        [classes.activeIcon]: location.pathname.startsWith(
+                                                            "/admin/" + sub.path
+                                                        ),
+                                                    })}
+                                                >
+                                                    {sub.icon}
+                                                </ListItemIcon>
+                                                <ListItemText
+                                                    primary={t(sub.title)}
+                                                />
+                                            </ListItem>
+                                        ))}
+                                    </List>
+                                </ExpansionPanelDetails>
+                            </ExpansionPanel>
+                        );
+                    })}
+                </List>
+            </Drawer>
+            <main className={classes.content}>
+                <div className={classes.toolbar} />
+                {content(path)}
+            </main>
+        </div>
+    );
+}
diff --git a/src/component/Admin/Dialogs/AddGroupk.js b/src/component/Admin/Dialogs/AddGroupk.js
new file mode 100644
index 0000000..e2019c9
--- /dev/null
+++ b/src/component/Admin/Dialogs/AddGroupk.js
@@ -0,0 +1,268 @@
+import React, { useEffect, useState } from "react";
+import DialogTitle from "@material-ui/core/DialogTitle";
+import DialogContent from "@material-ui/core/DialogContent";
+import DialogContentText from "@material-ui/core/DialogContentText";
+import DialogActions from "@material-ui/core/DialogActions";
+import Button from "@material-ui/core/Button";
+import Dialog from "@material-ui/core/Dialog";
+import InputLabel from "@material-ui/core/InputLabel";
+import Input from "@material-ui/core/Input";
+import FormHelperText from "@material-ui/core/FormHelperText";
+import FormControl from "@material-ui/core/FormControl";
+import { makeStyles } from "@material-ui/core/styles";
+import API from "../../../middleware/Api";
+import Select from "@material-ui/core/Select";
+import MenuItem from "@material-ui/core/MenuItem";
+import Switch from "@material-ui/core/Switch";
+import FormControlLabel from "@material-ui/core/FormControlLabel";
+import { useTranslation } from "react-i18next";
+
+const useStyles = makeStyles(() => ({
+    formContainer: {
+        margin: "8px 0 8px 0",
+    },
+}));
+
+const defaultGroup = {
+    name: "",
+    group_id: 2,
+    time: "",
+    price: "",
+    score: "",
+    des: "",
+    highlight: false,
+};
+
+const groupEditToForm = (target) => {
+    return {
+        ...target,
+        time: (target.time / 86400).toString(),
+        price: (target.price / 100).toString(),
+        score: target.score.toString(),
+        des: target.des.join("\n"),
+    };
+};
+
+export default function AddGroup({ open, onClose, onSubmit, groupEdit }) {
+    const { t } = useTranslation("dashboard", { keyPrefix: "vas" });
+    const { t: tCommon } = useTranslation("common");
+    const classes = useStyles();
+    const [groups, setGroups] = useState([]);
+    const [group, setGroup] = useState(defaultGroup);
+
+    useEffect(() => {
+        if (groupEdit) {
+            setGroup(groupEditToForm(groupEdit));
+        } else {
+            setGroup(defaultGroup);
+        }
+    }, [groupEdit]);
+
+    useEffect(() => {
+        if (open && groups.length === 0) {
+            API.get("/admin/groups")
+                .then((response) => {
+                    setGroups(response.data);
+                })
+                // eslint-disable-next-line @typescript-eslint/no-empty-function
+                .catch(() => {});
+        }
+        // eslint-disable-next-line
+    }, [open]);
+
+    const handleChange = (name) => (event) => {
+        setGroup({
+            ...group,
+            [name]: event.target.value,
+        });
+    };
+
+    const handleCheckChange = (name) => (event) => {
+        setGroup({
+            ...group,
+            [name]: event.target.checked,
+        });
+    };
+
+    const submit = (e) => {
+        e.preventDefault();
+        const groupCopy = { ...group };
+        groupCopy.time = parseInt(groupCopy.time) * 86400;
+        groupCopy.price = parseInt(groupCopy.price) * 100;
+        groupCopy.score = parseInt(groupCopy.score);
+        groupCopy.id = groupEdit ? groupEdit.id : new Date().valueOf();
+        groupCopy.des = groupCopy.des.split("\n");
+        onSubmit(groupCopy, groupEdit !== null);
+    };
+
+    return (
+        <Dialog
+            open={open}
+            onClose={onClose}
+            aria-labelledby="alert-dialog-title"
+            aria-describedby="alert-dialog-description"
+            maxWidth={"xs"}
+            scroll={"paper"}
+        >
+            <form onSubmit={submit}>
+                <DialogTitle id="alert-dialog-title">
+                    {groupEdit ? t("editMembership") : t("addMembership")}
+                </DialogTitle>
+                <DialogContent>
+                    <DialogContentText id="alert-dialog-description">
+                        <div className={classes.formContainer}>
+                            <FormControl fullWidth>
+                                <InputLabel htmlFor="component-helper">
+                                    {t("name")}
+                                </InputLabel>
+                                <Input
+                                    value={group.name}
+                                    onChange={handleChange("name")}
+                                    required
+                                />
+                                <FormHelperText id="component-helper-text">
+                                    {t("productNameDes")}
+                                </FormHelperText>
+                            </FormControl>
+                        </div>
+
+                        <div className={classes.formContainer}>
+                            <FormControl fullWidth>
+                                <InputLabel htmlFor="component-helper">
+                                    {t("group")}
+                                </InputLabel>
+                                <Select
+                                    value={group.group_id}
+                                    onChange={handleChange("group_id")}
+                                    required
+                                >
+                                    {groups.map((v) => {
+                                        if (v.ID !== 3) {
+                                            return (
+                                                <MenuItem value={v.ID}>
+                                                    {v.Name}
+                                                </MenuItem>
+                                            );
+                                        }
+                                        return null;
+                                    })}
+                                </Select>
+                                <FormHelperText id="component-helper-text">
+                                    {t("groupDes")}
+                                </FormHelperText>
+                            </FormControl>
+                        </div>
+
+                        <div className={classes.formContainer}>
+                            <FormControl fullWidth>
+                                <InputLabel htmlFor="component-helper">
+                                    {t("durationDay")}
+                                </InputLabel>
+                                <Input
+                                    type={"number"}
+                                    inputProps={{
+                                        min: 1,
+                                        step: 1,
+                                    }}
+                                    value={group.time}
+                                    onChange={handleChange("time")}
+                                    required
+                                />
+                                <FormHelperText id="component-helper-text">
+                                    {t("durationGroupDes")}
+                                </FormHelperText>
+                            </FormControl>
+                        </div>
+
+                        <div className={classes.formContainer}>
+                            <FormControl fullWidth>
+                                <InputLabel htmlFor="component-helper">
+                                    {t("priceYuan")}
+                                </InputLabel>
+                                <Input
+                                    type={"number"}
+                                    inputProps={{
+                                        min: 0.01,
+                                        step: 0.01,
+                                    }}
+                                    value={group.price}
+                                    onChange={handleChange("price")}
+                                    required
+                                />
+                                <FormHelperText id="component-helper-text">
+                                    {t("groupPriceDes")}
+                                </FormHelperText>
+                            </FormControl>
+                        </div>
+
+                        <div className={classes.formContainer}>
+                            <FormControl fullWidth>
+                                <InputLabel htmlFor="component-helper">
+                                    {t("priceCredits")}
+                                </InputLabel>
+                                <Input
+                                    type={"number"}
+                                    inputProps={{
+                                        min: 0,
+                                        step: 1,
+                                    }}
+                                    value={group.score}
+                                    onChange={handleChange("score")}
+                                    required
+                                />
+                                <FormHelperText id="component-helper-text">
+                                    {t("priceCreditsDes")}
+                                </FormHelperText>
+                            </FormControl>
+                        </div>
+
+                        <div className={classes.formContainer}>
+                            <FormControl fullWidth>
+                                <InputLabel htmlFor="component-helper">
+                                    {t("productDescription")}
+                                </InputLabel>
+                                <Input
+                                    value={group.des}
+                                    onChange={handleChange("des")}
+                                    multiline
+                                    rowsMax={10}
+                                    required
+                                />
+                                <FormHelperText id="component-helper-text">
+                                    {t("productDescriptionDes")}
+                                </FormHelperText>
+                            </FormControl>
+                        </div>
+
+                        <div className={classes.formContainer}>
+                            <FormControl fullWidth>
+                                <FormControlLabel
+                                    control={
+                                        <Switch
+                                            checked={group.highlight}
+                                            onChange={handleCheckChange(
+                                                "highlight"
+                                            )}
+                                        />
+                                    }
+                                    label={t("highlight")}
+                                />
+                                <FormHelperText id="component-helper-text">
+                                    {t("highlightDes")}
+                                </FormHelperText>
+                            </FormControl>
+                        </div>
+                    </DialogContentText>
+                </DialogContent>
+                <DialogActions>
+                    <Button onClick={onClose} color="default">
+                        {tCommon("cancel")}
+                    </Button>
+                    <Button type={"submit"} color="primary">
+                        {tCommon("ok")}
+                    </Button>
+                </DialogActions>
+            </form>
+        </Dialog>
+    );
+}
diff --git a/src/component/Admin/Dialogs/AddPack.js b/src/component/Admin/Dialogs/AddPack.js
new file mode 100644
index 0000000..1da8306
--- /dev/null
+++ b/src/component/Admin/Dialogs/AddPack.js
@@ -0,0 +1,193 @@
+import React, { useEffect, useState } from "react";
+import DialogTitle from "@material-ui/core/DialogTitle";
+import DialogContent from "@material-ui/core/DialogContent";
+import DialogContentText from "@material-ui/core/DialogContentText";
+import DialogActions from "@material-ui/core/DialogActions";
+import Button from "@material-ui/core/Button";
+import Dialog from "@material-ui/core/Dialog";
+import InputLabel from "@material-ui/core/InputLabel";
+import Input from "@material-ui/core/Input";
+import FormHelperText from "@material-ui/core/FormHelperText";
+import FormControl from "@material-ui/core/FormControl";
+import SizeInput from "../Common/SizeInput";
+import { makeStyles } from "@material-ui/core/styles";
+import { useTranslation } from "react-i18next";
+
+const useStyles = makeStyles(() => ({
+    formContainer: {
+        margin: "8px 0 8px 0",
+    },
+}));
+
+const packEditToForm = (target) => {
+    return {
+        ...target,
+        size: target.size.toString(),
+        time: (target.time / 86400).toString(),
+        price: (target.price / 100).toString(),
+        score: target.score.toString(),
+    };
+};
+
+const defaultPack = {
+    name: "",
+    size: "1073741824",
+    time: "",
+    price: "",
+    score: "",
+};
+
+export default function AddPack({ open, onClose, onSubmit, packEdit }) {
+    const { t } = useTranslation("dashboard", { keyPrefix: "vas" });
+    const { t: tCommon } = useTranslation("common");
+    const classes = useStyles();
+    const [pack, setPack] = useState(defaultPack);
+
+    useEffect(() => {
+        if (packEdit) {
+            setPack(packEditToForm(packEdit));
+        } else {
+            setPack(defaultPack);
+        }
+    }, [packEdit]);
+
+    const handleChange = (name) => (event) => {
+        setPack({
+            ...pack,
+            [name]: event.target.value,
+        });
+    };
+
+    const submit = (e) => {
+        e.preventDefault();
+        const packCopy = { ...pack };
+        packCopy.size = parseInt(packCopy.size);
+        packCopy.time = parseInt(packCopy.time) * 86400;
+        packCopy.price = parseInt(packCopy.price) * 100;
+        packCopy.score = parseInt(packCopy.score);
+        packCopy.id = packEdit ? packEdit.id : new Date().valueOf();
+        onSubmit(packCopy, packEdit !== null);
+    };
+
+    return (
+        <Dialog
+            open={open}
+            onClose={onClose}
+            aria-labelledby="alert-dialog-title"
+            aria-describedby="alert-dialog-description"
+            maxWidth={"xs"}
+        >
+            <form onSubmit={submit}>
+                <DialogTitle id="alert-dialog-title">
+                    {packEdit ? t("editStoragePack") : t("addStoragePack")}
+                </DialogTitle>
+                <DialogContent>
+                    <DialogContentText id="alert-dialog-description">
+                        <div className={classes.formContainer}>
+                            <FormControl fullWidth>
+                                <InputLabel htmlFor="component-helper">
+                                    {t("name")}
+                                </InputLabel>
+                                <Input
+                                    value={pack.name}
+                                    onChange={handleChange("name")}
+                                    required
+                                />
+                                <FormHelperText id="component-helper-text">
+                                    {t("productNameDes")}
+                                </FormHelperText>
+                            </FormControl>
+                        </div>
+
+                        <div className={classes.formContainer}>
+                            <FormControl fullWidth>
+                                <SizeInput
+                                    value={pack.size}
+                                    onChange={handleChange("size")}
+                                    min={1}
+                                    label={t("size")}
+                                    max={9223372036854775807}
+                                    required
+                                />
+                                <FormHelperText id="component-helper-text">
+                                    {t("packSizeDes")}
+                                </FormHelperText>
+                            </FormControl>
+                        </div>
+
+                        <div className={classes.formContainer}>
+                            <FormControl fullWidth>
+                                <InputLabel htmlFor="component-helper">
+                                    {t("durationDay")}
+                                </InputLabel>
+                                <Input
+                                    type={"number"}
+                                    inputProps={{
+                                        min: 1,
+                                        step: 1,
+                                    }}
+                                    value={pack.time}
+                                    onChange={handleChange("time")}
+                                    required
+                                />
+                                <FormHelperText id="component-helper-text">
+                                    {t("durationDayDes")}
+                                </FormHelperText>
+                            </FormControl>
+                        </div>
+
+                        <div className={classes.formContainer}>
+                            <FormControl fullWidth>
+                                <InputLabel htmlFor="component-helper">
+                                    {t("priceYuan")}
+                                </InputLabel>
+                                <Input
+                                    type={"number"}
+                                    inputProps={{
+                                        min: 0.01,
+                                        step: 0.01,
+                                    }}
+                                    value={pack.price}
+                                    onChange={handleChange("price")}
+                                    required
+                                />
+                                <FormHelperText id="component-helper-text">
+                                    {t("packPriceDes")}
+                                </FormHelperText>
+                            </FormControl>
+                        </div>
+
+                        <div className={classes.formContainer}>
+                            <FormControl fullWidth>
+                                <InputLabel htmlFor="component-helper">
+                                    {t("priceCredits")}
+                                </InputLabel>
+                                <Input
+                                    type={"number"}
+                                    inputProps={{
+                                        min: 0,
+                                        step: 1,
+                                    }}
+                                    value={pack.score}
+                                    onChange={handleChange("score")}
+                                    required
+                                />
+                                <FormHelperText id="component-helper-text">
+                                    {t("priceCreditsDes")}
+                                </FormHelperText>
+                            </FormControl>
+                        </div>
+                    </DialogContentText>
+                </DialogContent>
+                <DialogActions>
+                    <Button onClick={onClose} color="default">
+                        {tCommon("cancel")}
+                    </Button>
+                    <Button type={"submit"} color="primary">
+                        {tCommon("ok")}
+                    </Button>
+                </DialogActions>
+            </form>
+        </Dialog>
+    );
+}
diff --git a/src/component/Admin/Dialogs/AddPolicy.js b/src/component/Admin/Dialogs/AddPolicy.js
new file mode 100644
index 0000000..c8a128e
--- /dev/null
+++ b/src/component/Admin/Dialogs/AddPolicy.js
@@ -0,0 +1,145 @@
+import React from "react";
+import DialogTitle from "@material-ui/core/DialogTitle";
+import DialogContent from "@material-ui/core/DialogContent";
+import Typography from "@material-ui/core/Typography";
+import DialogActions from "@material-ui/core/DialogActions";
+import Button from "@material-ui/core/Button";
+import Dialog from "@material-ui/core/Dialog";
+import Grid from "@material-ui/core/Grid";
+import Card from "@material-ui/core/Card";
+import CardActionArea from "@material-ui/core/CardActionArea";
+import { makeStyles } from "@material-ui/core/styles";
+import CardMedia from "@material-ui/core/CardMedia";
+import CardContent from "@material-ui/core/CardContent";
+import { useHistory } from "react-router";
+import { useTranslation } from "react-i18next";
+
+const useStyles = makeStyles((theme) => ({
+    cardContainer: {
+        display: "flex",
+    },
+    cover: {
+        width: 100,
+        height: 60,
+    },
+    card: {},
+    content: {
+        flex: "1 0 auto",
+    },
+    bg: {
+        backgroundColor: theme.palette.background.default,
+        padding: "24px 24px",
+    },
+    dialogFooter: {
+        justifyContent: "space-between",
+    },
+}));
+
+const policies = [
+    {
+        name: "local",
+        img: "local.png",
+        path: "/admin/policy/add/local",
+    },
+    {
+        name: "remote",
+        img: "remote.png",
+        path: "/admin/policy/add/remote",
+    },
+    {
+        name: "qiniu",
+        img: "qiniu.png",
+        path: "/admin/policy/add/qiniu",
+    },
+    {
+        name: "oss",
+        img: "oss.png",
+        path: "/admin/policy/add/oss",
+    },
+    {
+        name: "upyun",
+        img: "upyun.png",
+        path: "/admin/policy/add/upyun",
+    },
+    {
+        name: "cos",
+        img: "cos.png",
+        path: "/admin/policy/add/cos",
+    },
+    {
+        name: "onedrive",
+        img: "onedrive.png",
+        path: "/admin/policy/add/onedrive",
+    },
+    {
+        name: "s3",
+        img: "s3.png",
+        path: "/admin/policy/add/s3",
+    },
+];
+
+export default function AddPolicy({ open, onClose }) {
+    const { t } = useTranslation("dashboard", { keyPrefix: "policy" });
+    const { t: tCommon } = useTranslation("common");
+    const classes = useStyles();
+
+    const location = useHistory();
+
+    return (
+        <Dialog
+            open={open}
+            onClose={onClose}
+            aria-labelledby="alert-dialog-title"
+            aria-describedby="alert-dialog-description"
+            maxWidth={"sm"}
+            fullWidth
+        >
+            <DialogTitle id="alert-dialog-title">
+                {t("selectAStorageProvider")}
+            </DialogTitle>
+            <DialogContent dividers className={classes.bg}>
+                <Grid container spacing={2}>
+                    {policies.map((v, index) => (
+                        <Grid key={index} item sm={12} md={6}>
+                            <Card className={classes.card}>
+                                <CardActionArea
+                                    onClick={() => {
+                                        location.push(v.path);
+                                        onClose();
+                                    }}
+                                    className={classes.cardContainer}
+                                >
+                                    <CardMedia
+                                        className={classes.cover}
+                                        image={"/static/img/" + v.img}
+                                    />
+                                    <CardContent className={classes.content}>
+                                        <Typography
+                                            variant="subtitle1"
+                                            color="textSecondary"
+                                        >
+                                            {t(v.name)}
+                                        </Typography>
+                                    </CardContent>
+                                </CardActionArea>
+                            </Card>
+                        </Grid>
+                    ))}
+                </Grid>
+            </DialogContent>
+            <DialogActions className={classes.dialogFooter}>
+                <Button
+                    onClick={() =>
+                        window.open(t("comparesStoragePoliciesLink"))
+                    }
+                    color="primary"
+                >
+                    {t("comparesStoragePolicies")}
+                </Button>
+                <Button onClick={onClose} color="primary">
+                    {tCommon("cancel")}
+                </Button>
+            </DialogActions>
+        </Dialog>
+    );
+}
diff --git a/src/component/Admin/Dialogs/AddRedeem.js b/src/component/Admin/Dialogs/AddRedeem.js
new file mode 100644
index 0000000..043c66c
--- /dev/null
+++ b/src/component/Admin/Dialogs/AddRedeem.js
@@ -0,0 +1,183 @@
+import React, { useCallback, useState } from "react";
+import DialogTitle from "@material-ui/core/DialogTitle";
+import DialogContent from "@material-ui/core/DialogContent";
+import DialogContentText from "@material-ui/core/DialogContentText";
+import DialogActions from "@material-ui/core/DialogActions";
+import Button from "@material-ui/core/Button";
+import Dialog from "@material-ui/core/Dialog";
+import InputLabel from "@material-ui/core/InputLabel";
+import Input from "@material-ui/core/Input";
+import FormHelperText from "@material-ui/core/FormHelperText";
+import FormControl from "@material-ui/core/FormControl";
+import { makeStyles } from "@material-ui/core/styles";
+import Select from "@material-ui/core/Select";
+import MenuItem from "@material-ui/core/MenuItem";
+import API from "../../../middleware/Api";
+import { useDispatch } from "react-redux";
+import { toggleSnackbar } from "../../../redux/explorer";
+import { useTranslation } from "react-i18next";
+
+const useStyles = makeStyles(() => ({
+    formContainer: {
+        margin: "8px 0 8px 0",
+    },
+}));
+
+export default function AddRedeem({ open, onClose, products, onSuccess }) {
+    const { t } = useTranslation("dashboard", { keyPrefix: "vas" });
+    const { t: tCommon } = useTranslation("common");
+    const { t: tApp } = useTranslation();
+    const classes = useStyles();
+    const [input, setInput] = useState({
+        num: 1,
+        id: 0,
+        time: 1,
+    });
+    const [loading, setLoading] = useState(false);
+
+    const dispatch = useDispatch();
+    const ToggleSnackbar = useCallback(
+        (vertical, horizontal, msg, color) =>
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color)),
+        [dispatch]
+    );
+
+    const handleChange = (name) => (event) => {
+        setInput({
+            ...input,
+            [name]: event.target.value,
+        });
+    };
+
+    const submit = (e) => {
+        e.preventDefault();
+        setLoading(true);
+        input.num = parseInt(input.num);
+        input.id = parseInt(input.id);
+        input.time = parseInt(input.time);
+        input.type = 2;
+        for (let i = 0; i < products.length; i++) {
+            if (products[i].id === input.id) {
+                if (products[i].group_id !== undefined) {
+                    input.type = 1;
+                } else {
+                    input.type = 0;
+                }
+                break;
+            }
+        }
+
+        API.post("/admin/redeem", input)
+            .then((response) => {
+                onSuccess(response.data);
+                onClose();
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            })
+            .then(() => {
+                setLoading(false);
+            });
+    };
+
+    return (
+        <Dialog
+            open={open}
+            onClose={onClose}
+            aria-labelledby="alert-dialog-title"
+            aria-describedby="alert-dialog-description"
+            maxWidth={"xs"}
+        >
+            <form onSubmit={submit}>
+                <DialogTitle id="alert-dialog-title">
+                    {t("generateGiftCode")}
+                </DialogTitle>
+                <DialogContent>
+                    <DialogContentText id="alert-dialog-description">
+                        <div className={classes.formContainer}>
+                            <FormControl fullWidth>
+                                <InputLabel htmlFor="component-helper">
+                                    {t("numberOfCodes")}
+                                </InputLabel>
+                                <Input
+                                    type={"number"}
+                                    inputProps={{
+                                        step: 1,
+                                        min: 1,
+                                        max: 100,
+                                    }}
+                                    value={input.num}
+                                    onChange={handleChange("num")}
+                                    required
+                                />
+                                <FormHelperText id="component-helper-text">
+                                    {t("numberOfCodesDes")}
+                                </FormHelperText>
+                            </FormControl>
+                        </div>
+
+                        <div className={classes.formContainer}>
+                            <FormControl fullWidth>
+                                <InputLabel htmlFor="component-helper">
+                                    {t("linkedProduct")}
+                                </InputLabel>
+                                <Select
+                                    value={input.id}
+                                    onChange={(e) => {
+                                        handleChange("id")(e);
+                                    }}
+                                >
+                                    {products.map((v) => (
+                                        <MenuItem
+                                            key={v.id}
+                                            value={v.id}
+                                            data-type={"1"}
+                                        >
+                                            {v.name}
+                                        </MenuItem>
+                                    ))}
+                                    <MenuItem value={0}>
+                                        {tApp("vas.credits")}
+                                    </MenuItem>
+                                </Select>
+                            </FormControl>
+                        </div>
+
+                        <div className={classes.formContainer}>
+                            <FormControl fullWidth>
+                                <InputLabel htmlFor="component-helper">
+                                    {t("productQyt")}
+                                </InputLabel>
+                                <Input
+                                    type={"number"}
+                                    inputProps={{
+                                        step: 1,
+                                        min: 1,
+                                    }}
+                                    value={input.time}
+                                    onChange={handleChange("time")}
+                                    required
+                                />
+                                <FormHelperText id="component-helper-text">
+                                    {t("productQytDes")}
+                                </FormHelperText>
+                            </FormControl>
+                        </div>
+                    </DialogContentText>
+                </DialogContent>
+                <DialogActions>
+                    <Button
+                        disabled={loading}
+                        onClick={onClose}
+                        color="default"
+                    >
+                        {tCommon("cancel")}
+                    </Button>
+                    <Button disabled={loading} type={"submit"} color="primary">
+                        {tCommon("ok")}
+                    </Button>
+                </DialogActions>
+            </form>
+        </Dialog>
+    );
+}
diff --git a/src/component/Admin/Dialogs/Alert.js b/src/component/Admin/Dialogs/Alert.js
new file mode 100644
index 0000000..afdfaea
--- /dev/null
+++ b/src/component/Admin/Dialogs/Alert.js
@@ -0,0 +1,33 @@
+import React from "react";
+import DialogTitle from "@material-ui/core/DialogTitle";
+import DialogContent from "@material-ui/core/DialogContent";
+import DialogContentText from "@material-ui/core/DialogContentText";
+import Typography from "@material-ui/core/Typography";
+import DialogActions from "@material-ui/core/DialogActions";
+import Button from "@material-ui/core/Button";
+import Dialog from "@material-ui/core/Dialog";
+import { useTranslation } from "react-i18next";
+
+export default function AlertDialog({ title, msg, open, onClose }) {
+    const { t } = useTranslation("common");
+    return (
+        <Dialog
+            open={open}
+            onClose={onClose}
+            aria-labelledby="alert-dialog-title"
+            aria-describedby="alert-dialog-description"
+        >
+            <DialogTitle id="alert-dialog-title">{title}</DialogTitle>
+            <DialogContent>
+                <DialogContentText id="alert-dialog-description">
+                    <Typography>{msg}</Typography>
+                </DialogContentText>
+            </DialogContent>
+            <DialogActions>
+                <Button onClick={onClose} color="primary">
+                    {t("ok")}
+                </Button>
+            </DialogActions>
+        </Dialog>
+    );
+}
diff --git a/src/component/Admin/Dialogs/CreateTheme.js b/src/component/Admin/Dialogs/CreateTheme.js
new file mode 100644
index 0000000..a457240
--- /dev/null
+++ b/src/component/Admin/Dialogs/CreateTheme.js
@@ -0,0 +1,355 @@
+import React, { useCallback, useState } from "react";
+import DialogContent from "@material-ui/core/DialogContent";
+import { CompactPicker } from "react-color";
+import Typography from "@material-ui/core/Typography";
+import DialogActions from "@material-ui/core/DialogActions";
+import Button from "@material-ui/core/Button";
+import Dialog from "@material-ui/core/Dialog";
+import Grid from "@material-ui/core/Grid";
+import TextField from "@material-ui/core/TextField";
+import { createMuiTheme, makeStyles } from "@material-ui/core/styles";
+import AppBar from "@material-ui/core/AppBar";
+import Toolbar from "@material-ui/core/Toolbar";
+import IconButton from "@material-ui/core/IconButton";
+import { Add, Menu } from "@material-ui/icons";
+import { ThemeProvider } from "@material-ui/styles";
+import Fab from "@material-ui/core/Fab";
+import { useTranslation } from "react-i18next";
+
+const useStyles = makeStyles((theme) => ({
+    picker: {
+        "& div": {
+            boxShadow: "none !important",
+        },
+        marginTop: theme.spacing(1),
+    },
+    "@global": {
+        ".compact-picker:parent ": {
+            boxShadow: "none !important",
+        },
+    },
+    statusBar: {
+        height: 24,
+        width: "100%",
+    },
+    fab: {
+        textAlign: "right",
+    },
+}));
+
+export default function CreateTheme({ open, onClose, onSubmit }) {
+    const { t } = useTranslation("dashboard", { keyPrefix: "settings" });
+    const { t: tGlobal } = useTranslation("common");
+    const classes = useStyles();
+    const [theme, setTheme] = useState({
+        palette: {
+            primary: {
+                main: "#3f51b5",
+                contrastText: "#fff",
+            },
+            secondary: {
+                main: "#d81b60",
+                contrastText: "#fff",
+            },
+        },
+    });
+
+    const subTheme = useCallback(() => {
+        try {
+            return createMuiTheme(theme);
+        } catch (e) {
+            return createMuiTheme({});
+        }
+    }, [theme]);
+
+    return (
+        <Dialog open={open} onClose={onClose} fullWidth maxWidth={"md"}>
+            <DialogContent>
+                <Grid container>
+                    <Grid spacing={2} md={8} xs={12} container>
+                        <Grid md={6} xs={12} item>
+                            <Typography variant="h6" gutterBottom>
+                                {t("primaryColor")}
+                            </Typography>
+                            <TextField
+                                value={theme.palette.primary.main}
+                                onChange={(e) => {
+                                    setTheme({
+                                        ...theme,
+                                        palette: {
+                                            ...theme.palette,
+                                            primary: {
+                                                ...theme.palette.primary,
+                                                main: e.target.value,
+                                            },
+                                        },
+                                    });
+                                }}
+                                fullWidth
+                            />
+                            <div className={classes.picker}>
+                                <CompactPicker
+                                    colors={[
+                                        "#4D4D4D",
+                                        "#999999",
+                                        "#FFFFFF",
+                                        "#f44336",
+                                        "#ff9800",
+                                        "#ffeb3b",
+                                        "#cddc39",
+                                        "#A4DD00",
+                                        "#00bcd4",
+                                        "#03a9f4",
+                                        "#AEA1FF",
+                                        "#FDA1FF",
+                                        "#333333",
+                                        "#808080",
+                                        "#cccccc",
+                                        "#ff5722",
+                                        "#ffc107",
+                                        "#FCC400",
+                                        "#8bc34a",
+                                        "#4caf50",
+                                        "#009688",
+                                        "#2196f3",
+                                        "#3f51b5",
+                                        "#e91e63",
+                                        "#000000",
+                                        "#666666",
+                                        "#B3B3B3",
+                                        "#9F0500",
+                                        "#C45100",
+                                        "#FB9E00",
+                                        "#808900",
+                                        "#194D33",
+                                        "#0C797D",
+                                        "#0062B1",
+                                        "#673ab7",
+                                        "#9c27b0",
+                                    ]}
+                                    color={theme.palette.primary.main}
+                                    onChangeComplete={(c) => {
+                                        setTheme({
+                                            ...theme,
+                                            palette: {
+                                                ...theme.palette,
+                                                primary: {
+                                                    ...theme.palette.primary,
+                                                    main: c.hex,
+                                                },
+                                            },
+                                        });
+                                    }}
+                                />
+                            </div>
+                        </Grid>
+                        <Grid md={6} xs={12} item>
+                            <Typography variant="h6" gutterBottom>
+                                {t("secondaryColor")}
+                            </Typography>
+                            <TextField
+                                value={theme.palette.secondary.main}
+                                onChange={(e) => {
+                                    setTheme({
+                                        ...theme,
+                                        palette: {
+                                            ...theme.palette,
+                                            secondary: {
+                                                ...theme.palette.secondary,
+                                                main: e.target.value,
+                                            },
+                                        },
+                                    });
+                                }}
+                                fullWidth
+                            />
+                            <div className={classes.picker}>
+                                <CompactPicker
+                                    colors={[
+                                        "#4D4D4D",
+                                        "#999999",
+                                        "#FFFFFF",
+                                        "#ff1744",
+                                        "#ff3d00",
+                                        "#ffeb3b",
+                                        "#cddc39",
+                                        "#A4DD00",
+                                        "#00bcd4",
+                                        "#00e5ff",
+                                        "#AEA1FF",
+                                        "#FDA1FF",
+                                        "#333333",
+                                        "#808080",
+                                        "#cccccc",
+                                        "#ff5722",
+                                        "#ffea00",
+                                        "#ffc400",
+                                        "#c6ff00",
+                                        "#00e676",
+                                        "#76ff03",
+                                        "#00b0ff",
+                                        "#2979ff",
+                                        "#f50057",
+                                        "#000000",
+                                        "#666666",
+                                        "#B3B3B3",
+                                        "#9F0500",
+                                        "#C45100",
+                                        "#FB9E00",
+                                        "#808900",
+                                        "#1de9b6",
+                                        "#0C797D",
+                                        "#3d5afe",
+                                        "#651fff",
+                                        "#d500f9",
+                                    ]}
+                                    color={theme.palette.secondary.main}
+                                    onChangeComplete={(c) => {
+                                        setTheme({
+                                            ...theme,
+                                            palette: {
+                                                ...theme.palette,
+                                                secondary: {
+                                                    ...theme.palette.secondary,
+                                                    main: c.hex,
+                                                },
+                                            },
+                                        });
+                                    }}
+                                />
+                            </div>
+                        </Grid>
+                        <Grid md={6} xs={12} item>
+                            <Typography variant="h6" gutterBottom>
+                                {t("primaryColorText")}
+                            </Typography>
+                            <TextField
+                                value={theme.palette.primary.contrastText}
+                                onChange={(e) => {
+                                    setTheme({
+                                        ...theme,
+                                        palette: {
+                                            ...theme.palette,
+                                            primary: {
+                                                ...theme.palette.primary,
+                                                contrastText: e.target.value,
+                                            },
+                                        },
+                                    });
+                                }}
+                                fullWidth
+                            />
+                            <div className={classes.picker}>
+                                <CompactPicker
+                                    color={theme.palette.primary.contrastText}
+                                    onChangeComplete={(c) => {
+                                        setTheme({
+                                            ...theme,
+                                            palette: {
+                                                ...theme.palette,
+                                                primary: {
+                                                    ...theme.palette.primary,
+                                                    contrastText: c.hex,
+                                                },
+                                            },
+                                        });
+                                    }}
+                                />
+                            </div>
+                        </Grid>
+                        <Grid md={6} xs={12} item>
+                            <Typography variant="h6" gutterBottom>
+                                {t("secondaryColorText")}
+                            </Typography>
+                            <TextField
+                                value={theme.palette.secondary.contrastText}
+                                onChange={(e) => {
+                                    setTheme({
+                                        ...theme,
+                                        palette: {
+                                            ...theme.palette,
+                                            secondary: {
+                                                ...theme.palette.secondary,
+                                                contrastText: e.target.value,
+                                            },
+                                        },
+                                    });
+                                }}
+                                fullWidth
+                            />
+                            <div className={classes.picker}>
+                                <CompactPicker
+                                    color={theme.palette.secondary.contrastText}
+                                    onChangeComplete={(c) => {
+                                        setTheme({
+                                            ...theme,
+                                            palette: {
+                                                ...theme.palette,
+                                                secondary: {
+                                                    ...theme.palette.secondary,
+                                                    contrastText: c.hex,
+                                                },
+                                            },
+                                        });
+                                    }}
+                                />
+                            </div>
+                        </Grid>
+                    </Grid>
+                    <Grid spacing={2} md={4} xs={12}>
+                        <ThemeProvider theme={subTheme()}>
+                            <div
+                                className={classes.statusBar}
+                                style={{
+                                    backgroundColor: subTheme().palette.primary
+                                        .dark,
+                                }}
+                            />
+                            <AppBar position="static">
+                                <Toolbar>
+                                    <IconButton
+                                        edge="start"
+                                        className={classes.menuButton}
+                                        color="inherit"
+                                        aria-label="menu"
+                                    >
+                                        <Menu />
+                                    </IconButton>
+                                    <Typography
+                                        variant="h6"
+                                        className={classes.title}
+                                    >
+                                        Color
+                                    </Typography>
+                                </Toolbar>
+                            </AppBar>
+                            <div style={{ padding: 16 }}>
+                                <TextField
+                                    fullWidth
+                                    color={"secondary"}
+                                    label={"Text input"}
+                                />
+                                <div
+                                    className={classes.fab}
+                                    style={{ paddingTop: 64 }}
+                                >
+                                    <Fab color="secondary" aria-label="add">
+                                        <Add />
+                                    </Fab>
+                                </div>
+                            </div>
+                        </ThemeProvider>
+                    </Grid>
+                </Grid>
+            </DialogContent>
+            <DialogActions>
+                <Button onClick={onClose} color="default">
+                    {tGlobal("cancel")}
+                </Button>
+                <Button onClick={() => onSubmit(theme)} color="primary">
+                    {tGlobal("ok")}
+                </Button>
+            </DialogActions>
+        </Dialog>
+    );
+}
diff --git a/src/component/Admin/Dialogs/FileFilter.js b/src/component/Admin/Dialogs/FileFilter.js
new file mode 100644
index 0000000..5cbc96f
--- /dev/null
+++ b/src/component/Admin/Dialogs/FileFilter.js
@@ -0,0 +1,134 @@
+import React, { useCallback, useEffect, useState } from "react";
+import DialogTitle from "@material-ui/core/DialogTitle";
+import DialogContent from "@material-ui/core/DialogContent";
+import DialogActions from "@material-ui/core/DialogActions";
+import Button from "@material-ui/core/Button";
+import Dialog from "@material-ui/core/Dialog";
+import FormControl from "@material-ui/core/FormControl";
+import InputLabel from "@material-ui/core/InputLabel";
+import Select from "@material-ui/core/Select";
+import MenuItem from "@material-ui/core/MenuItem";
+import API from "../../../middleware/Api";
+import { useDispatch } from "react-redux";
+import TextField from "@material-ui/core/TextField";
+import { toggleSnackbar } from "../../../redux/explorer";
+import { useTranslation } from "react-i18next";
+
+export default function FileFilter({ setFilter, setSearch, open, onClose }) {
+    const { t } = useTranslation("dashboard", { keyPrefix: "file" });
+    const { t: tDashboard } = useTranslation("dashboard");
+    const { t: tCommon } = useTranslation("common");
+    const [input, setInput] = useState({
+        policy_id: "all",
+        user_id: "",
+    });
+    const [policies, setPolicies] = useState([]);
+    const [keywords, setKeywords] = useState("");
+
+    const dispatch = useDispatch();
+    const ToggleSnackbar = useCallback(
+        (vertical, horizontal, msg, color) =>
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color)),
+        [dispatch]
+    );
+
+    const handleChange = (name) => (event) => {
+        setInput({ ...input, [name]: event.target.value });
+    };
+
+    useEffect(() => {
+        API.post("/admin/policy/list", {
+            page: 1,
+            page_size: 10000,
+            order_by: "id asc",
+            conditions: {},
+        })
+            .then((response) => {
+                setPolicies(response.data.items);
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            });
+    }, []);
+
+    const submit = () => {
+        const res = {};
+        Object.keys(input).forEach((v) => {
+            if (input[v] !== "all" && input[v] !== "") {
+                res[v] = input[v];
+            }
+        });
+        setFilter(res);
+        if (keywords !== "") {
+            setSearch({
+                name: keywords,
+            });
+        } else {
+            setSearch({});
+        }
+        onClose();
+    };
+
+    return (
+        <Dialog
+            open={open}
+            onClose={onClose}
+            aria-labelledby="alert-dialog-title"
+            aria-describedby="alert-dialog-description"
+            fullWidth
+            maxWidth={"xs"}
+        >
+            <DialogTitle id="alert-dialog-title">
+                {tDashboard("user.filterCondition")}
+            </DialogTitle>
+            <DialogContent>
+                <FormControl fullWidth>
+                    <InputLabel id="demo-simple-select-label">
+                        {t("storagePolicy")}
+                    </InputLabel>
+                    <Select
+                        labelId="demo-simple-select-label"
+                        id="demo-simple-select"
+                        value={input.policy_id}
+                        onChange={handleChange("policy_id")}
+                    >
+                        <MenuItem value={"all"}>
+                            {tDashboard("user.all")}
+                        </MenuItem>
+                        {policies.map((v) => {
+                            return (
+                                <MenuItem key={v.ID} value={v.ID.toString()}>
+                                    {v.Name}
+                                </MenuItem>
+                            );
+                        })}
+                    </Select>
+                </FormControl>
+                <FormControl fullWidth style={{ marginTop: 16 }}>
+                    <TextField
+                        value={input.user_id}
+                        onChange={handleChange("user_id")}
+                        id="standard-basic"
+                        label={t("uploaderID")}
+                    />
+                </FormControl>
+                <FormControl fullWidth style={{ marginTop: 16 }}>
+                    <TextField
+                        value={keywords}
+                        onChange={(e) => setKeywords(e.target.value)}
+                        id="standard-basic"
+                        label={t("searchFileName")}
+                    />
+                </FormControl>
+            </DialogContent>
+            <DialogActions>
+                <Button onClick={onClose} color="default">
+                    {tCommon("cancel")}
+                </Button>
+                <Button onClick={submit} color="primary">
+                    {tDashboard("user.apply")}
+                </Button>
+            </DialogActions>
+        </Dialog>
+    );
+}
diff --git a/src/component/Admin/Dialogs/MagicVar.js b/src/component/Admin/Dialogs/MagicVar.js
new file mode 100644
index 0000000..4623eca
--- /dev/null
+++ b/src/component/Admin/Dialogs/MagicVar.js
@@ -0,0 +1,180 @@
+import React from "react";
+import DialogTitle from "@material-ui/core/DialogTitle";
+import DialogContent from "@material-ui/core/DialogContent";
+import DialogActions from "@material-ui/core/DialogActions";
+import Button from "@material-ui/core/Button";
+import Dialog from "@material-ui/core/Dialog";
+import TableBody from "@material-ui/core/TableBody";
+import TableContainer from "@material-ui/core/TableContainer";
+import Table from "@material-ui/core/Table";
+import TableHead from "@material-ui/core/TableHead";
+import TableRow from "@material-ui/core/TableRow";
+import TableCell from "@material-ui/core/TableCell";
+import { useTranslation } from "react-i18next";
+
+const magicVars = [
+    {
+        value: "{randomkey16}",
+        des: "16digitsRandomString",
+        example: "N6IimT5XZP324ACK",
+        fileOnly: false,
+    },
+    {
+        value: "{randomkey8}",
+        des: "8digitsRandomString",
+        example: "gWz78q30",
+        fileOnly: false,
+    },
+    {
+        value: "{timestamp}",
+        des: "secondTimestamp",
+        example: "1582692933",
+        fileOnly: false,
+    },
+    {
+        value: "{timestamp_nano}",
+        des: "nanoTimestamp",
+        example: "1582692933231834600",
+        fileOnly: false,
+    },
+    {
+        value: "{uid}",
+        des: "uid",
+        example: "1",
+        fileOnly: false,
+    },
+    {
+        value: "{originname}",
+        des: "originalFileName",
+        example: "MyPico.mp4",
+        fileOnly: true,
+    },
+    {
+        value: "{originname_without_ext}",
+        des: "originFileNameNoext",
+        example: "MyPico",
+        fileOnly: true,
+    },
+    {
+        value: "{ext}",
+        des: "extension",
+        example: ".jpg",
+        fileOnly: true,
+    },
+    {
+        value: "{uuid}",
+        des: "uuidV4",
+        example: "31f0a770-659d-45bf-a5a9-166c06f33281",
+        fileOnly: true,
+    },
+    {
+        value: "{date}",
+        des: "date",
+        example: "20060102",
+        fileOnly: false,
+    },
+    {
+        value: "{datetime}",
+        des: "dateAndTime",
+        example: "20060102150405",
+        fileOnly: false,
+    },
+    {
+        value: "{year}",
+        des: "year",
+        example: "2006",
+        fileOnly: false,
+    },
+    {
+        value: "{month}",
+        des: "month",
+        example: "01",
+        fileOnly: false,
+    },
+    {
+        value: "{day}",
+        des: "day",
+        example: "02",
+        fileOnly: false,
+    },
+    {
+        value: "{hour}",
+        des: "hour",
+        example: "15",
+        fileOnly: false,
+    },
+    {
+        value: "{minute}",
+        des: "minute",
+        example: "04",
+        fileOnly: false,
+    },
+    {
+        value: "{second}",
+        des: "second",
+        example: "05",
+        fileOnly: false,
+    },
+];
+
+export default function MagicVar({ isFile, open, onClose, isSlave }) {
+    const { t } = useTranslation("dashboard", { keyPrefix: "policy.magicVar" });
+    const { t: tCommon } = useTranslation("common");
+    return (
+        <Dialog
+            open={open}
+            onClose={onClose}
+            aria-labelledby="alert-dialog-title"
+            aria-describedby="alert-dialog-description"
+        >
+            <DialogTitle id="alert-dialog-title">
+                {isFile ? t("fileNameMagicVar") : t("pathMagicVar")}
+            </DialogTitle>
+            <DialogContent>
+                <TableContainer>
+                    <Table size="small" aria-label="a dense table">
+                        <TableHead>
+                            <TableRow>
+                                <TableCell>{t("variable")}</TableCell>
+                                <TableCell>{t("description")}</TableCell>
+                                <TableCell>{t("example")}</TableCell>
+                            </TableRow>
+                        </TableHead>
+                        <TableBody>
+                            {magicVars.map((m) => {
+                                if (!m.fileOnly || isFile) {
+                                    return (
+                                        <TableRow>
+                                            <TableCell
+                                                component="th"
+                                                scope="row"
+                                            >
+                                                {m.value}
+                                            </TableCell>
+                                            <TableCell>{t(m.des)}</TableCell>
+                                            <TableCell>{m.example}</TableCell>
+                                        </TableRow>
+                                    );
+                                }
+                            })}
+                            {!isFile && (
+                                <TableRow>
+                                    <TableCell component="th" scope="row">
+                                        {"{path}"}
+                                    </TableCell>
+                                    <TableCell>{t("userUploadPath")}</TableCell>
+                                    <TableCell>/MyFile/Documents/</TableCell>
+                                </TableRow>
+                            )}
+                        </TableBody>
+                    </Table>
+                </TableContainer>
+            </DialogContent>
+            <DialogActions>
+                <Button onClick={onClose} color="primary">
+                    {tCommon("close")}
+                </Button>
+            </DialogActions>
+        </Dialog>
+    );
+}
diff --git a/src/component/Admin/Dialogs/ShareFilter.js b/src/component/Admin/Dialogs/ShareFilter.js
new file mode 100644
index 0000000..1cfe13a
--- /dev/null
+++ b/src/component/Admin/Dialogs/ShareFilter.js
@@ -0,0 +1,103 @@
+import React, { useState } from "react";
+import DialogTitle from "@material-ui/core/DialogTitle";
+import DialogContent from "@material-ui/core/DialogContent";
+import DialogActions from "@material-ui/core/DialogActions";
+import Button from "@material-ui/core/Button";
+import Dialog from "@material-ui/core/Dialog";
+import FormControl from "@material-ui/core/FormControl";
+import InputLabel from "@material-ui/core/InputLabel";
+import Select from "@material-ui/core/Select";
+import MenuItem from "@material-ui/core/MenuItem";
+import TextField from "@material-ui/core/TextField";
+import { useTranslation } from "react-i18next";
+
+export default function ShareFilter({ setFilter, setSearch, open, onClose }) {
+    const { t } = useTranslation("dashboard", { keyPrefix: "share" });
+    const { t: tDashboard } = useTranslation("dashboard");
+    const { t: tCommon } = useTranslation("common");
+    const [input, setInput] = useState({
+        is_dir: "all",
+        user_id: "",
+    });
+    const [keywords, setKeywords] = useState("");
+
+    const handleChange = (name) => (event) => {
+        setInput({ ...input, [name]: event.target.value });
+    };
+
+    const submit = () => {
+        const res = {};
+        Object.keys(input).forEach((v) => {
+            if (input[v] !== "all" && input[v] !== "") {
+                res[v] = input[v];
+            }
+        });
+        setFilter(res);
+        if (keywords !== "") {
+            setSearch({
+                source_name: keywords,
+            });
+        } else {
+            setSearch({});
+        }
+        onClose();
+    };
+
+    return (
+        <Dialog
+            open={open}
+            onClose={onClose}
+            aria-labelledby="alert-dialog-title"
+            aria-describedby="alert-dialog-description"
+            fullWidth
+            maxWidth={"xs"}
+        >
+            <DialogTitle id="alert-dialog-title">
+                {tDashboard("user.filterCondition")}
+            </DialogTitle>
+            <DialogContent>
+                <FormControl fullWidth>
+                    <InputLabel id="demo-simple-select-label">
+                        {t("srcType")}
+                    </InputLabel>
+                    <Select
+                        labelId="demo-simple-select-label"
+                        id="demo-simple-select"
+                        value={input.is_dir}
+                        onChange={handleChange("is_dir")}
+                    >
+                        <MenuItem value={"all"}>
+                            {tDashboard("user.all")}
+                        </MenuItem>
+                        <MenuItem value={"1"}>{t("folder")}</MenuItem>
+                        <MenuItem value={"0"}>{t("file")}</MenuItem>
+                    </Select>
+                </FormControl>
+                <FormControl fullWidth style={{ marginTop: 16 }}>
+                    <TextField
+                        value={input.user_id}
+                        onChange={handleChange("user_id")}
+                        id="standard-basic"
+                        label={tDashboard("file.uploaderID")}
+                    />
+                </FormControl>
+                <FormControl fullWidth style={{ marginTop: 16 }}>
+                    <TextField
+                        value={keywords}
+                        onChange={(e) => setKeywords(e.target.value)}
+                        id="standard-basic"
+                        label={tDashboard("file.searchFileName")}
+                    />
+                </FormControl>
+            </DialogContent>
+            <DialogActions>
+                <Button onClick={onClose} color="default">
+                    {tCommon("cancel")}
+                </Button>
+                <Button onClick={submit} color="primary">
+                    {tCommon("ok")}
+                </Button>
+            </DialogActions>
+        </Dialog>
+    );
+}
diff --git a/src/component/Admin/Dialogs/UserFilter.js b/src/component/Admin/Dialogs/UserFilter.js
new file mode 100644
index 0000000..b5bc6d8
--- /dev/null
+++ b/src/component/Admin/Dialogs/UserFilter.js
@@ -0,0 +1,139 @@
+import React, { useCallback, useEffect, useState } from "react";
+import DialogTitle from "@material-ui/core/DialogTitle";
+import DialogContent from "@material-ui/core/DialogContent";
+import DialogActions from "@material-ui/core/DialogActions";
+import Button from "@material-ui/core/Button";
+import Dialog from "@material-ui/core/Dialog";
+import FormControl from "@material-ui/core/FormControl";
+import InputLabel from "@material-ui/core/InputLabel";
+import Select from "@material-ui/core/Select";
+import MenuItem from "@material-ui/core/MenuItem";
+import API from "../../../middleware/Api";
+import { useDispatch } from "react-redux";
+import TextField from "@material-ui/core/TextField";
+import { toggleSnackbar } from "../../../redux/explorer";
+import { useTranslation } from "react-i18next";
+
+export default function UserFilter({ setFilter, setSearch, open, onClose }) {
+    const { t } = useTranslation("dashboard", { keyPrefix: "user" });
+    const { t: tCommon } = useTranslation("common");
+    const [input, setInput] = useState({
+        group_id: "all",
+        status: "all",
+    });
+    const [groups, setGroups] = useState([]);
+    const [keywords, setKeywords] = useState("");
+
+    const dispatch = useDispatch();
+    const ToggleSnackbar = useCallback(
+        (vertical, horizontal, msg, color) =>
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color)),
+        [dispatch]
+    );
+
+    const handleChange = (name) => (event) => {
+        setInput({ ...input, [name]: event.target.value });
+    };
+
+    useEffect(() => {
+        API.get("/admin/groups")
+            .then((response) => {
+                setGroups(response.data);
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            });
+    }, []);
+
+    const submit = () => {
+        const res = {};
+        Object.keys(input).forEach((v) => {
+            if (input[v] !== "all") {
+                res[v] = input[v];
+            }
+        });
+        setFilter(res);
+        if (keywords !== "") {
+            setSearch({
+                nick: keywords,
+                email: keywords,
+            });
+        } else {
+            setSearch({});
+        }
+        onClose();
+    };
+
+    return (
+        <Dialog
+            open={open}
+            onClose={onClose}
+            aria-labelledby="alert-dialog-title"
+            aria-describedby="alert-dialog-description"
+            fullWidth
+            maxWidth={"xs"}
+        >
+            <DialogTitle id="alert-dialog-title">
+                {t("filterCondition")}
+            </DialogTitle>
+            <DialogContent>
+                <FormControl fullWidth>
+                    <InputLabel id="demo-simple-select-label">
+                        {t("group")}
+                    </InputLabel>
+                    <Select
+                        labelId="demo-simple-select-label"
+                        id="demo-simple-select"
+                        value={input.group_id}
+                        onChange={handleChange("group_id")}
+                    >
+                        <MenuItem value={"all"}>{t("all")}</MenuItem>
+                        {groups.map((v) => {
+                            if (v.ID === 3) {
+                                return null;
+                            }
+                            return (
+                                <MenuItem key={v.ID} value={v.ID.toString()}>
+                                    {v.Name}
+                                </MenuItem>
+                            );
+                        })}
+                    </Select>
+                </FormControl>
+                <FormControl fullWidth style={{ marginTop: 16 }}>
+                    <InputLabel id="demo-simple-select-label">
+                        {t("userStatus")}
+                    </InputLabel>
+                    <Select
+                        labelId="demo-simple-select-label"
+                        id="demo-simple-select"
+                        value={input.status}
+                        onChange={handleChange("status")}
+                    >
+                        <MenuItem value={"all"}>{t("all")}</MenuItem>
+                        <MenuItem value={"0"}>{t("active")}</MenuItem>
+                        <MenuItem value={"1"}>{t("notActivated")}</MenuItem>
+                        <MenuItem value={"2"}>{t("banned")}</MenuItem>
+                        <MenuItem value={"3"}>{t("bannedBySys")}</MenuItem>
+                    </Select>
+                </FormControl>
+                <FormControl fullWidth style={{ marginTop: 16 }}>
+                    <TextField
+                        value={keywords}
+                        onChange={(e) => setKeywords(e.target.value)}
+                        id="standard-basic"
+                        label={t("searchNickUserName")}
+                    />
+                </FormControl>
+            </DialogContent>
+            <DialogActions>
+                <Button onClick={onClose} color="default">
+                    {tCommon("cancel")}
+                </Button>
+                <Button onClick={submit} color="primary">
+                    {t("apply")}
+                </Button>
+            </DialogActions>
+        </Dialog>
+    );
+}
diff --git a/src/component/Admin/File/File.js b/src/component/Admin/File/File.js
new file mode 100644
index 0000000..bef842d
--- /dev/null
+++ b/src/component/Admin/File/File.js
@@ -0,0 +1,502 @@
+import React, { useCallback, useEffect, useState } from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import API from "../../../middleware/Api";
+import { useDispatch } from "react-redux";
+import Paper from "@material-ui/core/Paper";
+import Button from "@material-ui/core/Button";
+import TableContainer from "@material-ui/core/TableContainer";
+import Table from "@material-ui/core/Table";
+import TableHead from "@material-ui/core/TableHead";
+import TableRow from "@material-ui/core/TableRow";
+import TableCell from "@material-ui/core/TableCell";
+import { sizeToString } from "../../../utils";
+import TableBody from "@material-ui/core/TableBody";
+import TablePagination from "@material-ui/core/TablePagination";
+import { useHistory } from "react-router";
+import IconButton from "@material-ui/core/IconButton";
+import { Delete, DeleteForever, FilterList, LinkOff } from "@material-ui/icons";
+import Tooltip from "@material-ui/core/Tooltip";
+import Checkbox from "@material-ui/core/Checkbox";
+import Toolbar from "@material-ui/core/Toolbar";
+import Typography from "@material-ui/core/Typography";
+import { lighten } from "@material-ui/core";
+import Link from "@material-ui/core/Link";
+import TableSortLabel from "@material-ui/core/TableSortLabel";
+import Badge from "@material-ui/core/Badge";
+import FileFilter from "../Dialogs/FileFilter";
+import { formatLocalTime } from "../../../utils/datetime";
+import { toggleSnackbar } from "../../../redux/explorer";
+import Chip from "@material-ui/core/Chip";
+import { useTranslation } from "react-i18next";
+
+const useStyles = makeStyles((theme) => ({
+    root: {
+        [theme.breakpoints.up("md")]: {
+            marginLeft: 100,
+        },
+        marginBottom: 40,
+    },
+    content: {
+        padding: theme.spacing(2),
+    },
+    container: {
+        overflowX: "auto",
+    },
+    tableContainer: {
+        marginTop: 16,
+    },
+    header: {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "flex-start",
+    },
+    headerRight: {},
+    highlight:
+        theme.palette.type === "light"
+            ? {
+                  color: theme.palette.secondary.main,
+                  backgroundColor: lighten(theme.palette.secondary.light, 0.85),
+              }
+            : {
+                  color: theme.palette.text.primary,
+                  backgroundColor: theme.palette.secondary.dark,
+              },
+    visuallyHidden: {
+        border: 0,
+        clip: "rect(0 0 0 0)",
+        height: 1,
+        margin: -1,
+        overflow: "hidden",
+        padding: 0,
+        position: "absolute",
+        top: 20,
+        width: 1,
+    },
+    disabledBadge: {
+        marginLeft: theme.spacing(1),
+        height: 18,
+    },
+}));
+
+export default function File() {
+    const { t } = useTranslation("dashboard", { keyPrefix: "file" });
+    const { t: tDashboard } = useTranslation("dashboard");
+    const classes = useStyles();
+    const [files, setFiles] = useState([]);
+    const [page, setPage] = useState(1);
+    const [pageSize, setPageSize] = useState(10);
+    const [total, setTotal] = useState(0);
+    const [filter, setFilter] = useState({});
+    const [users, setUsers] = useState({});
+    const [search, setSearch] = useState({});
+    const [orderBy, setOrderBy] = useState(["id", "desc"]);
+    const [filterDialog, setFilterDialog] = useState(false);
+    const [selected, setSelected] = useState([]);
+    const [loading, setLoading] = useState(false);
+
+    const history = useHistory();
+
+    const dispatch = useDispatch();
+    const ToggleSnackbar = useCallback(
+        (vertical, horizontal, msg, color) =>
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color)),
+        [dispatch]
+    );
+
+    const loadList = () => {
+        API.post("/admin/file/list", {
+            page: page,
+            page_size: pageSize,
+            order_by: orderBy.join(" "),
+            conditions: filter,
+            searches: search,
+        })
+            .then((response) => {
+                setFiles(response.data.items);
+                setTotal(response.data.total);
+                setSelected([]);
+                setUsers(response.data.users);
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            });
+    };
+
+    useEffect(() => {
+        loadList();
+    }, [page, pageSize, orderBy, filter, search]);
+
+    const deleteFile = (id, unlink = false) => {
+        setLoading(true);
+        API.post("/admin/file/delete", { id: [id], unlink })
+            .then(() => {
+                loadList();
+                ToggleSnackbar("top", "right", t("deleteAsync"), "success");
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            })
+            .then(() => {
+                setLoading(false);
+            });
+    };
+
+    const deleteBatch =
+        (force, unlink = false) =>
+        () => {
+            setLoading(true);
+            API.post("/admin/file/delete", { id: selected, force, unlink })
+                .then(() => {
+                    loadList();
+                    ToggleSnackbar("top", "right", t("deleteAsync"), "success");
+                })
+                .catch((error) => {
+                    ToggleSnackbar("top", "right", error.message, "error");
+                })
+                .then(() => {
+                    setLoading(false);
+                });
+        };
+
+    const handleSelectAllClick = (event) => {
+        if (event.target.checked) {
+            const newSelecteds = files.map((n) => n.ID);
+            setSelected(newSelecteds);
+            return;
+        }
+        setSelected([]);
+    };
+
+    const handleClick = (event, name) => {
+        const selectedIndex = selected.indexOf(name);
+        let newSelected = [];
+
+        if (selectedIndex === -1) {
+            newSelected = newSelected.concat(selected, name);
+        } else if (selectedIndex === 0) {
+            newSelected = newSelected.concat(selected.slice(1));
+        } else if (selectedIndex === selected.length - 1) {
+            newSelected = newSelected.concat(selected.slice(0, -1));
+        } else if (selectedIndex > 0) {
+            newSelected = newSelected.concat(
+                selected.slice(0, selectedIndex),
+                selected.slice(selectedIndex + 1)
+            );
+        }
+
+        setSelected(newSelected);
+    };
+
+    const isSelected = (id) => selected.indexOf(id) !== -1;
+
+    return (
+        <div>
+            <FileFilter
+                filter={filter}
+                open={filterDialog}
+                onClose={() => setFilterDialog(false)}
+                setSearch={setSearch}
+                setFilter={setFilter}
+            />
+            <div className={classes.header}>
+                <Button
+                    color={"primary"}
+                    onClick={() => history.push("/admin/file/import")}
+                    variant={"contained"}
+                    style={{
+                        alignSelf: "center",
+                    }}
+                >
+                    {t("import")}
+                </Button>
+                <div className={classes.headerRight}>
+                    <Tooltip title={tDashboard("user.filter")}>
+                        <IconButton
+                            style={{ marginRight: 8 }}
+                            onClick={() => setFilterDialog(true)}
+                        >
+                            <Badge
+                                color="secondary"
+                                variant="dot"
+                                invisible={
+                                    Object.keys(search).length === 0 &&
+                                    Object.keys(filter).length === 0
+                                }
+                            >
+                                <FilterList />
+                            </Badge>
+                        </IconButton>
+                    </Tooltip>
+                    <Button
+                        color={"primary"}
+                        onClick={() => loadList()}
+                        variant={"outlined"}
+                    >
+                        {tDashboard("policy.refresh")}
+                    </Button>
+                </div>
+            </div>
+
+            <Paper square className={classes.tableContainer}>
+                {selected.length > 0 && (
+                    <Toolbar className={classes.highlight}>
+                        <Typography
+                            style={{ flex: "1 1 100%" }}
+                            color="inherit"
+                            variant="subtitle1"
+                        >
+                            {tDashboard("user.selectedObjects", {
+                                num: selected.length,
+                            })}
+                        </Typography>
+                        <Tooltip title={tDashboard("policy.delete")}>
+                            <IconButton
+                                onClick={deleteBatch(false)}
+                                disabled={loading}
+                                aria-label="delete"
+                            >
+                                <Delete />
+                            </IconButton>
+                        </Tooltip>
+                        <Tooltip title={t("forceDelete")}>
+                            <IconButton
+                                onClick={deleteBatch(true)}
+                                disabled={loading}
+                                aria-label="delete"
+                            >
+                                <DeleteForever />
+                            </IconButton>
+                        </Tooltip>
+                        <Tooltip title={tDashboard("file.unlink")}>
+                            <IconButton
+                                disabled={loading}
+                                onClick={deleteBatch(true, true)}
+                                size={"small"}
+                            >
+                                <LinkOff />
+                            </IconButton>
+                        </Tooltip>
+                    </Toolbar>
+                )}
+                <TableContainer className={classes.container}>
+                    <Table aria-label="sticky table" size={"small"}>
+                        <TableHead>
+                            <TableRow style={{ height: 52 }}>
+                                <TableCell padding="checkbox">
+                                    <Checkbox
+                                        indeterminate={
+                                            selected.length > 0 &&
+                                            selected.length < files.length
+                                        }
+                                        checked={
+                                            files.length > 0 &&
+                                            selected.length === files.length
+                                        }
+                                        onChange={handleSelectAllClick}
+                                        inputProps={{
+                                            "aria-label": "select all desserts",
+                                        }}
+                                    />
+                                </TableCell>
+                                <TableCell style={{ minWidth: 59 }}>
+                                    <TableSortLabel
+                                        active={orderBy[0] === "id"}
+                                        direction={orderBy[1]}
+                                        onClick={() =>
+                                            setOrderBy([
+                                                "id",
+                                                orderBy[1] === "asc"
+                                                    ? "desc"
+                                                    : "asc",
+                                            ])
+                                        }
+                                    >
+                                        #
+                                        {orderBy[0] === "id" ? (
+                                            <span
+                                                className={
+                                                    classes.visuallyHidden
+                                                }
+                                            >
+                                                {orderBy[1] === "desc"
+                                                    ? "sorted descending"
+                                                    : "sorted ascending"}
+                                            </span>
+                                        ) : null}
+                                    </TableSortLabel>
+                                </TableCell>
+                                <TableCell style={{ minWidth: 250 }}>
+                                    <TableSortLabel
+                                        active={orderBy[0] === "name"}
+                                        direction={orderBy[1]}
+                                        onClick={() =>
+                                            setOrderBy([
+                                                "name",
+                                                orderBy[1] === "asc"
+                                                    ? "desc"
+                                                    : "asc",
+                                            ])
+                                        }
+                                    >
+                                        {t("name")}
+                                        {orderBy[0] === "name" ? (
+                                            <span
+                                                className={
+                                                    classes.visuallyHidden
+                                                }
+                                            >
+                                                {orderBy[1] === "desc"
+                                                    ? "sorted descending"
+                                                    : "sorted ascending"}
+                                            </span>
+                                        ) : null}
+                                    </TableSortLabel>
+                                </TableCell>
+                                <TableCell
+                                    align={"right"}
+                                    style={{ minWidth: 70 }}
+                                >
+                                    <TableSortLabel
+                                        active={orderBy[0] === "size"}
+                                        direction={orderBy[1]}
+                                        onClick={() =>
+                                            setOrderBy([
+                                                "size",
+                                                orderBy[1] === "asc"
+                                                    ? "desc"
+                                                    : "asc",
+                                            ])
+                                        }
+                                    >
+                                        {t("size")}
+                                        {orderBy[0] === "size" ? (
+                                            <span
+                                                className={
+                                                    classes.visuallyHidden
+                                                }
+                                            >
+                                                {orderBy[1] === "desc"
+                                                    ? "sorted descending"
+                                                    : "sorted ascending"}
+                                            </span>
+                                        ) : null}
+                                    </TableSortLabel>
+                                </TableCell>
+                                <TableCell style={{ minWidth: 120 }}>
+                                    {t("uploader")}
+                                </TableCell>
+                                <TableCell style={{ minWidth: 150 }}>
+                                    {t("createdAt")}
+                                </TableCell>
+                                <TableCell style={{ minWidth: 100 }}>
+                                    {tDashboard("policy.actions")}
+                                </TableCell>
+                            </TableRow>
+                        </TableHead>
+                        <TableBody>
+                            {files.map((row) => (
+                                <TableRow
+                                    hover
+                                    key={row.ID}
+                                    role="checkbox"
+                                    selected={isSelected(row.ID)}
+                                >
+                                    <TableCell padding="checkbox">
+                                        <Checkbox
+                                            onClick={(event) =>
+                                                handleClick(event, row.ID)
+                                            }
+                                            checked={isSelected(row.ID)}
+                                        />
+                                    </TableCell>
+                                    <TableCell>{row.ID}</TableCell>
+                                    <TableCell>
+                                        <Link
+                                            target={"_blank"}
+                                            color="inherit"
+                                            href={
+                                                "/api/v3/admin/file/preview/" +
+                                                row.ID
+                                            }
+                                        >
+                                            {row.Name}
+                                            {row.UploadSessionID && (
+                                                <Chip
+                                                    className={
+                                                        classes.disabledBadge
+                                                    }
+                                                    size="small"
+                                                    label={t("uploading")}
+                                                />
+                                            )}
+                                        </Link>
+                                    </TableCell>
+                                    <TableCell align={"right"}>
+                                        {sizeToString(row.Size)}
+                                    </TableCell>
+                                    <TableCell>
+                                        <Link
+                                            href={
+                                                "/admin/user/edit/" + row.UserID
+                                            }
+                                        >
+                                            {users[row.UserID]
+                                                ? users[row.UserID].Nick
+                                                : t("unknownUploader")}
+                                        </Link>
+                                    </TableCell>
+                                    <TableCell>
+                                        {formatLocalTime(
+                                            row.CreatedAt,
+                                            "YYYY-MM-DD H:mm:ss"
+                                        )}
+                                    </TableCell>
+                                    <TableCell>
+                                        <Tooltip
+                                            title={tDashboard("policy.delete")}
+                                        >
+                                            <IconButton
+                                                disabled={loading}
+                                                onClick={() =>
+                                                    deleteFile(row.ID)
+                                                }
+                                                size={"small"}
+                                            >
+                                                <Delete />
+                                            </IconButton>
+                                        </Tooltip>
+                                        <Tooltip
+                                            title={tDashboard("file.unlink")}
+                                        >
+                                            <IconButton
+                                                disabled={loading}
+                                                onClick={() =>
+                                                    deleteFile(row.ID, true)
+                                                }
+                                                size={"small"}
+                                            >
+                                                <LinkOff />
+                                            </IconButton>
+                                        </Tooltip>
+                                    </TableCell>
+                                </TableRow>
+                            ))}
+                        </TableBody>
+                    </Table>
+                </TableContainer>
+                <TablePagination
+                    rowsPerPageOptions={[10, 25, 50, 100]}
+                    component="div"
+                    count={total}
+                    rowsPerPage={pageSize}
+                    page={page - 1}
+                    onChangePage={(e, p) => setPage(p + 1)}
+                    onChangeRowsPerPage={(e) => {
+                        setPageSize(e.target.value);
+                        setPage(1);
+                    }}
+                />
+            </Paper>
+        </div>
+    );
+}
diff --git a/src/component/Admin/File/Import.js b/src/component/Admin/File/Import.js
new file mode 100644
index 0000000..ce10862
--- /dev/null
+++ b/src/component/Admin/File/Import.js
@@ -0,0 +1,481 @@
+import React, { useCallback, useEffect, useState } from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import Typography from "@material-ui/core/Typography";
+import InputLabel from "@material-ui/core/InputLabel";
+import FormControl from "@material-ui/core/FormControl";
+import Input from "@material-ui/core/Input";
+import FormHelperText from "@material-ui/core/FormHelperText";
+import Button from "@material-ui/core/Button";
+import API from "../../../middleware/Api";
+import { useDispatch } from "react-redux";
+import Select from "@material-ui/core/Select";
+import MenuItem from "@material-ui/core/MenuItem";
+import Alert from "@material-ui/lab/Alert";
+import Fade from "@material-ui/core/Fade";
+import Paper from "@material-ui/core/Paper";
+import Popper from "@material-ui/core/Popper";
+import InputAdornment from "@material-ui/core/InputAdornment";
+import Chip from "@material-ui/core/Chip";
+import { Dialog } from "@material-ui/core";
+import DialogTitle from "@material-ui/core/DialogTitle";
+import PathSelector from "../../FileManager/PathSelector";
+import DialogActions from "@material-ui/core/DialogActions";
+import FormControlLabel from "@material-ui/core/FormControlLabel";
+import Switch from "@material-ui/core/Switch";
+import { useHistory } from "react-router";
+import { toggleSnackbar } from "../../../redux/explorer";
+import { useTranslation } from "react-i18next";
+
+const useStyles = makeStyles((theme) => ({
+    root: {
+        [theme.breakpoints.up("md")]: {
+            marginLeft: 100,
+        },
+        marginBottom: 40,
+    },
+    form: {
+        maxWidth: 400,
+        marginTop: 20,
+        marginBottom: 20,
+    },
+    formContainer: {
+        [theme.breakpoints.up("md")]: {
+            padding: "0px 24px 0 24px",
+        },
+    },
+    userSelect: {
+        width: 400,
+        borderRadius: 0,
+    },
+}));
+
+function useDebounce(value, delay) {
+    const [debouncedValue, setDebouncedValue] = useState(value);
+
+    useEffect(() => {
+        const handler = setTimeout(() => {
+            setDebouncedValue(value);
+        }, delay);
+        return () => {
+            clearTimeout(handler);
+        };
+    }, [value]);
+
+    return debouncedValue;
+}
+
+export default function Import() {
+    const { t } = useTranslation("dashboard", { keyPrefix: "file" });
+    const { t: tCommon } = useTranslation("common");
+    const classes = useStyles();
+    const [loading, setLoading] = useState(false);
+    const [options, setOptions] = useState({
+        policy: 1,
+        userInput: "",
+        src: "",
+        dst: "",
+        recursive: true,
+    });
+    const [anchorEl, setAnchorEl] = useState(null);
+    const [policies, setPolicies] = useState({});
+    const [users, setUsers] = useState([]);
+    const [user, setUser] = useState(null);
+    const [selectRemote, setSelectRemote] = useState(false);
+    const [selectLocal, setSelectLocal] = useState(false);
+
+    const handleChange = (name) => (event) => {
+        setOptions({
+            ...options,
+            [name]: event.target.value,
+        });
+    };
+
+    const handleCheckChange = (name) => (event) => {
+        setOptions({
+            ...options,
+            [name]: event.target.checked,
+        });
+    };
+
+    const history = useHistory();
+    const dispatch = useDispatch();
+    const ToggleSnackbar = useCallback(
+        (vertical, horizontal, msg, color) =>
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color)),
+        [dispatch]
+    );
+
+    const submit = (e) => {
+        e.preventDefault();
+        if (user === null) {
+            ToggleSnackbar("top", "right", t("selectTargetUser"), "warning");
+            return;
+        }
+        setLoading(true);
+        API.post("/admin/task/import", {
+            uid: user.ID,
+            policy_id: parseInt(options.policy),
+            src: options.src,
+            dst: options.dst,
+            recursive: options.recursive,
+        })
+            .then(() => {
+                setLoading(false);
+                history.push("/admin/file");
+                ToggleSnackbar(
+                    "top",
+                    "right",
+                    t("importTaskCreated"),
+                    "success"
+                );
+            })
+            .catch((error) => {
+                setLoading(false);
+                ToggleSnackbar("top", "right", error.message, "error");
+            });
+    };
+
+    const debouncedSearchTerm = useDebounce(options.userInput, 500);
+
+    useEffect(() => {
+        if (debouncedSearchTerm !== "") {
+            API.post("/admin/user/list", {
+                page: 1,
+                page_size: 10000,
+                order_by: "id asc",
+                searches: {
+                    nick: debouncedSearchTerm,
+                    email: debouncedSearchTerm,
+                },
+            })
+                .then((response) => {
+                    setUsers(response.data.items);
+                })
+                .catch((error) => {
+                    ToggleSnackbar("top", "right", error.message, "error");
+                });
+        }
+    }, [debouncedSearchTerm]);
+
+    useEffect(() => {
+        API.post("/admin/policy/list", {
+            page: 1,
+            page_size: 10000,
+            order_by: "id asc",
+            conditions: {},
+        })
+            .then((response) => {
+                const res = {};
+                response.data.items.forEach((v) => {
+                    res[v.ID] = v;
+                });
+                setPolicies(res);
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            });
+        // eslint-disable-next-line
+    }, []);
+
+    const selectUser = (u) => {
+        setOptions({
+            ...options,
+            userInput: "",
+        });
+        setUser(u);
+    };
+
+    const setMoveTarget = (setter) => (folder) => {
+        const path =
+            folder.path === "/"
+                ? folder.path + folder.name
+                : folder.path + "/" + folder.name;
+        setter(path === "//" ? "/" : path);
+    };
+
+    const openPathSelector = (isSrcSelect) => {
+        if (isSrcSelect) {
+            if (
+                !policies[options.policy] ||
+                policies[options.policy].Type === "local" ||
+                policies[options.policy].Type === "remote"
+            ) {
+                ToggleSnackbar(
+                    "top",
+                    "right",
+                    t("manuallyPathOnly"),
+                    "warning"
+                );
+                return;
+            }
+            setSelectRemote(true);
+        } else {
+            if (user === null) {
+                ToggleSnackbar(
+                    "top",
+                    "right",
+                    t("selectTargetUser"),
+                    "warning"
+                );
+                return;
+            }
+            setSelectLocal(true);
+        }
+    };
+
+    return (
+        <div>
+            <Dialog
+                open={selectRemote}
+                onClose={() => setSelectRemote(false)}
+                aria-labelledby="form-dialog-title"
+            >
+                <DialogTitle id="form-dialog-title">
+                    {t("selectFolder")}
+                </DialogTitle>
+                <PathSelector
+                    presentPath="/"
+                    api={"/admin/file/folders/policy/" + options.policy}
+                    selected={[]}
+                    onSelect={setMoveTarget((p) =>
+                        setOptions({
+                            ...options,
+                            src: p,
+                        })
+                    )}
+                />
+
+                <DialogActions>
+                    <Button
+                        onClick={() => setSelectRemote(false)}
+                        color="primary"
+                    >
+                        {tCommon("ok")}
+                    </Button>
+                </DialogActions>
+            </Dialog>
+            <Dialog
+                open={selectLocal}
+                onClose={() => setSelectLocal(false)}
+                aria-labelledby="form-dialog-title"
+            >
+                <DialogTitle id="form-dialog-title">
+                    {t("selectFolder")}
+                </DialogTitle>
+                <PathSelector
+                    presentPath="/"
+                    api={
+                        "/admin/file/folders/user/" +
+                        (user === null ? 0 : user.ID)
+                    }
+                    selected={[]}
+                    onSelect={setMoveTarget((p) =>
+                        setOptions({
+                            ...options,
+                            dst: p,
+                        })
+                    )}
+                />
+
+                <DialogActions>
+                    <Button
+                        onClick={() => setSelectLocal(false)}
+                        color="primary"
+                    >
+                        {tCommon("ok")}
+                    </Button>
+                </DialogActions>
+            </Dialog>
+            <form onSubmit={submit}>
+                <div className={classes.root}>
+                    <Typography variant="h6" gutterBottom>
+                        {t("importExternalFolder")}
+                    </Typography>
+                    <div className={classes.formContainer}>
+                        <div className={classes.form}>
+                            <Alert severity="info">
+                                {t("importExternalFolderDes")}
+                            </Alert>
+                        </div>
+                        <div className={classes.form}>
+                            <FormControl fullWidth>
+                                <InputLabel htmlFor="component-helper">
+                                    {t("storagePolicy")}
+                                </InputLabel>
+                                <Select
+                                    labelId="demo-mutiple-chip-label"
+                                    id="demo-mutiple-chip"
+                                    value={options.policy}
+                                    onChange={handleChange("policy")}
+                                    input={<Input id="select-multiple-chip" />}
+                                >
+                                    {Object.keys(policies).map((pid) => (
+                                        <MenuItem key={pid} value={pid}>
+                                            {policies[pid].Name}
+                                        </MenuItem>
+                                    ))}
+                                </Select>
+                                <FormHelperText id="component-helper-text">
+                                    {t("storagePolicyDes")}
+                                </FormHelperText>
+                            </FormControl>
+                        </div>
+                        <div className={classes.form}>
+                            <FormControl fullWidth>
+                                <InputLabel htmlFor="component-helper">
+                                    {t("targetUser")}
+                                </InputLabel>
+                                <Input
+                                    value={options.userInput}
+                                    onChange={(e) => {
+                                        handleChange("userInput")(e);
+                                        setAnchorEl(e.currentTarget);
+                                    }}
+                                    startAdornment={
+                                        user !== null && (
+                                            <InputAdornment position="start">
+                                                <Chip
+                                                    size="small"
+                                                    onDelete={() => {
+                                                        setUser(null);
+                                                    }}
+                                                    label={user.Nick}
+                                                />
+                                            </InputAdornment>
+                                        )
+                                    }
+                                    disabled={user !== null}
+                                />
+                                <Popper
+                                    open={
+                                        options.userInput !== "" &&
+                                        users.length > 0
+                                    }
+                                    anchorEl={anchorEl}
+                                    placement={"bottom"}
+                                    transition
+                                >
+                                    {({ TransitionProps }) => (
+                                        <Fade
+                                            {...TransitionProps}
+                                            timeout={350}
+                                        >
+                                            <Paper
+                                                className={classes.userSelect}
+                                            >
+                                                {users.map((u) => (
+                                                    <MenuItem
+                                                        key={u.ID}
+                                                        onClick={() =>
+                                                            selectUser(u)
+                                                        }
+                                                    >
+                                                        {u.Nick}{" "}
+                                                        {"<" + u.Email + ">"}
+                                                    </MenuItem>
+                                                ))}
+                                            </Paper>
+                                        </Fade>
+                                    )}
+                                </Popper>
+                                <FormHelperText id="component-helper-text">
+                                    {t("targetUserDes")}
+                                </FormHelperText>
+                            </FormControl>
+                        </div>
+
+                        <div className={classes.form}>
+                            <FormControl fullWidth>
+                                <InputLabel htmlFor="component-helper">
+                                    {t("srcFolderPath")}
+                                </InputLabel>
+
+                                <Input
+                                    value={options.src}
+                                    onChange={(e) => {
+                                        handleChange("src")(e);
+                                        setAnchorEl(e.currentTarget);
+                                    }}
+                                    required
+                                    endAdornment={
+                                        <Button
+                                            onClick={() =>
+                                                openPathSelector(true)
+                                            }
+                                        >
+                                            {t("select")}
+                                        </Button>
+                                    }
+                                />
+
+                                <FormHelperText id="component-helper-text">
+                                    {t("selectSrcDes")}
+                                </FormHelperText>
+                            </FormControl>
+                        </div>
+
+                        <div className={classes.form}>
+                            <FormControl fullWidth>
+                                <InputLabel htmlFor="component-helper">
+                                    {t("dstFolderPath")}
+                                </InputLabel>
+
+                                <Input
+                                    value={options.dst}
+                                    onChange={(e) => {
+                                        handleChange("dst")(e);
+                                        setAnchorEl(e.currentTarget);
+                                    }}
+                                    required
+                                    endAdornment={
+                                        <Button
+                                            onClick={() =>
+                                                openPathSelector(false)
+                                            }
+                                        >
+                                            {t("select")}
+                                        </Button>
+                                    }
+                                />
+
+                                <FormHelperText id="component-helper-text">
+                                    {t("dstFolderPathDes")}
+                                </FormHelperText>
+                            </FormControl>
+                        </div>
+
+                        <div className={classes.form}>
+                            <FormControl fullWidth>
+                                <FormControlLabel
+                                    control={
+                                        <Switch
+                                            checked={options.recursive}
+                                            onChange={handleCheckChange(
+                                                "recursive"
+                                            )}
+                                        />
+                                    }
+                                    label={t("recursivelyImport")}
+                                />
+                                <FormHelperText id="component-helper-text">
+                                    {t("recursivelyImportDes")}
+                                </FormHelperText>
+                            </FormControl>
+                        </div>
+                    </div>
+                </div>
+
+                <div className={classes.root}>
+                    <Button
+                        disabled={loading}
+                        type={"submit"}
+                        variant={"contained"}
+                        color={"primary"}
+                    >
+                        {t("createImportTask")}
+                    </Button>
+                </div>
+            </form>
+        </div>
+    );
+}
diff --git a/src/component/Admin/Group/EditGroup.js b/src/component/Admin/Group/EditGroup.js
new file mode 100644
index 0000000..40d202d
--- /dev/null
+++ b/src/component/Admin/Group/EditGroup.js
@@ -0,0 +1,108 @@
+import React, { useCallback, useEffect, useState } from "react";
+import { useParams } from "react-router";
+import API from "../../../middleware/Api";
+import { useDispatch } from "react-redux";
+import GroupForm from "./GroupForm";
+import { toggleSnackbar } from "../../../redux/explorer";
+import { useTranslation } from "react-i18next";
+
+export default function EditGroupPreload() {
+    const { t } = useTranslation("dashboard", { keyPrefix: "group" });
+    const [group, setGroup] = useState({});
+
+    const { id } = useParams();
+
+    const dispatch = useDispatch();
+    const ToggleSnackbar = useCallback(
+        (vertical, horizontal, msg, color) =>
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color)),
+        [dispatch]
+    );
+
+    useEffect(() => {
+        setGroup({});
+        API.get("/admin/group/" + id)
+            .then((response) => {
+                // 布尔值转换
+                ["ShareEnabled", "WebDAVEnabled"].forEach((v) => {
+                    response.data[v] = response.data[v] ? "true" : "false";
+                });
+                [
+                    "archive_download",
+                    "archive_task",
+                    "relocate",
+                    "one_time_download",
+                    "share_download",
+                    "webdav_proxy",
+                    "share_free",
+                    "aria2",
+                    "redirected_source",
+                    "advance_delete",
+                    "select_node",
+                ].forEach((v) => {
+                    if (response.data.OptionsSerialized[v] !== undefined) {
+                        response.data.OptionsSerialized[v] = response.data
+                            .OptionsSerialized[v]
+                            ? "true"
+                            : "false";
+                    }
+                });
+
+                // 整型转换
+                ["MaxStorage", "SpeedLimit"].forEach((v) => {
+                    response.data[v] = response.data[v].toString();
+                });
+                [
+                    "compress_size",
+                    "decompress_size",
+                    "source_batch",
+                    "aria2_batch",
+                ].forEach((v) => {
+                    if (response.data.OptionsSerialized[v] !== undefined) {
+                        response.data.OptionsSerialized[v] =
+                            response.data.OptionsSerialized[v].toString();
+                    }
+                });
+                response.data.PolicyList = response.data.PolicyList.map((v) => {
+                    return v.toString();
+                });
+
+                response.data.OptionsSerialized.available_nodes = response.data
+                    .OptionsSerialized.available_nodes
+                    ? response.data.OptionsSerialized.available_nodes.map(
+                          (v) => {
+                              return v.toString();
+                          }
+                      )
+                    : [];
+
+                // JSON转换
+                if (
+                    response.data.OptionsSerialized.aria2_options === undefined
+                ) {
+                    response.data.OptionsSerialized.aria2_options = "{}";
+                } else {
+                    try {
+                        response.data.OptionsSerialized.aria2_options =
+                            JSON.stringify(
+                                response.data.OptionsSerialized.aria2_options
+                            );
+                    } catch (e) {
+                        ToggleSnackbar(
+                            "top",
+                            "right",
+                            t("aria2FormatError"),
+                            "warning"
+                        );
+                        return;
+                    }
+                }
+                setGroup(response.data);
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            });
+    }, [id]);
+
+    return <div>{group.ID !== undefined && <GroupForm group={group} />}</div>;
+}
diff --git a/src/component/Admin/Group/Group.js b/src/component/Admin/Group/Group.js
new file mode 100644
index 0000000..b2d7e0a
--- /dev/null
+++ b/src/component/Admin/Group/Group.js
@@ -0,0 +1,252 @@
+import React, { useCallback, useEffect, useState } from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import API from "../../../middleware/Api";
+import { useDispatch } from "react-redux";
+import Paper from "@material-ui/core/Paper";
+import Button from "@material-ui/core/Button";
+import TableContainer from "@material-ui/core/TableContainer";
+import Table from "@material-ui/core/Table";
+import TableHead from "@material-ui/core/TableHead";
+import TableRow from "@material-ui/core/TableRow";
+import TableCell from "@material-ui/core/TableCell";
+import { sizeToString } from "../../../utils";
+import TableBody from "@material-ui/core/TableBody";
+import TablePagination from "@material-ui/core/TablePagination";
+import { useHistory, useLocation } from "react-router";
+import IconButton from "@material-ui/core/IconButton";
+import { Delete, Edit } from "@material-ui/icons";
+import Tooltip from "@material-ui/core/Tooltip";
+import { toggleSnackbar } from "../../../redux/explorer";
+import { useTranslation } from "react-i18next";
+
+const useStyles = makeStyles((theme) => ({
+    root: {
+        [theme.breakpoints.up("md")]: {
+            marginLeft: 100,
+        },
+        marginBottom: 40,
+    },
+    content: {
+        padding: theme.spacing(2),
+    },
+    container: {
+        overflowX: "auto",
+    },
+    tableContainer: {
+        marginTop: 16,
+    },
+    header: {
+        display: "flex",
+        justifyContent: "space-between",
+    },
+    headerRight: {},
+}));
+
+const columns = [
+    { id: "#", minWidth: 50 },
+    { id: "name", minWidth: 170 },
+    { id: "type", label: "存储策略", minWidth: 170 },
+    {
+        id: "count",
+        minWidth: 50,
+        align: "right",
+    },
+    {
+        id: "size",
+        minWidth: 100,
+        align: "right",
+    },
+    {
+        id: "action",
+        minWidth: 170,
+        align: "right",
+    },
+];
+
+function useQuery() {
+    return new URLSearchParams(useLocation().search);
+}
+
+export default function Group() {
+    const { t } = useTranslation("dashboard", { keyPrefix: "group" });
+    const { t: tDashboard } = useTranslation("dashboard");
+    const classes = useStyles();
+    const [groups, setGroups] = useState([]);
+    const [statics, setStatics] = useState([]);
+    const [page, setPage] = useState(1);
+    const [pageSize, setPageSize] = useState(10);
+    const [total, setTotal] = useState(0);
+    const [policies, setPolicies] = React.useState({});
+
+    const location = useLocation();
+    const history = useHistory();
+    const query = useQuery();
+
+    const dispatch = useDispatch();
+    const ToggleSnackbar = useCallback(
+        (vertical, horizontal, msg, color) =>
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color)),
+        [dispatch]
+    );
+
+    const loadList = () => {
+        API.post("/admin/group/list", {
+            page: page,
+            page_size: pageSize,
+            order_by: "id desc",
+        })
+            .then((response) => {
+                setGroups(response.data.items);
+                setStatics(response.data.statics);
+                setTotal(response.data.total);
+                setPolicies(response.data.policies);
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            });
+    };
+
+    useEffect(() => {
+        if (query.get("code") === "0") {
+            ToggleSnackbar("top", "right", "授权成功", "success");
+        } else if (query.get("msg") && query.get("msg") !== "") {
+            ToggleSnackbar(
+                "top",
+                "right",
+                query.get("msg") + ", " + query.get("err"),
+                "warning"
+            );
+        }
+    }, [location]);
+
+    useEffect(() => {
+        loadList();
+    }, [page, pageSize]);
+
+    const deletePolicy = (id) => {
+        API.delete("/admin/group/" + id)
+            .then(() => {
+                loadList();
+                ToggleSnackbar("top", "right", t("deleted"), "success");
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            });
+    };
+
+    return (
+        <div>
+            <div className={classes.header}>
+                <Button
+                    color={"primary"}
+                    onClick={() => history.push("/admin/group/add")}
+                    variant={"contained"}
+                >
+                    {t("new")}
+                </Button>
+                <div className={classes.headerRight}>
+                    <Button
+                        color={"primary"}
+                        onClick={() => loadList()}
+                        variant={"outlined"}
+                    >
+                        {tDashboard("policy.refresh")}
+                    </Button>
+                </div>
+            </div>
+
+            <Paper square className={classes.tableContainer}>
+                <TableContainer className={classes.container}>
+                    <Table aria-label="sticky table" size={"small"}>
+                        <TableHead>
+                            <TableRow style={{ height: 52 }}>
+                                {columns.map((column) => (
+                                    <TableCell
+                                        key={column.id}
+                                        align={column.align}
+                                        style={{ minWidth: column.minWidth }}
+                                    >
+                                        {t(column.id)}
+                                    </TableCell>
+                                ))}
+                            </TableRow>
+                        </TableHead>
+                        <TableBody>
+                            {groups.map((row) => (
+                                <TableRow hover key={row.ID}>
+                                    <TableCell>{row.ID}</TableCell>
+                                    <TableCell>{row.Name}</TableCell>
+                                    <TableCell>
+                                        {row.PolicyList !== null &&
+                                            row.PolicyList.map((pid, key) => {
+                                                let res = "";
+                                                if (policies[pid]) {
+                                                    res += policies[pid].Name;
+                                                }
+                                                if (
+                                                    key !==
+                                                    row.PolicyList.length - 1
+                                                ) {
+                                                    res += " / ";
+                                                }
+                                                return res;
+                                            })}
+                                    </TableCell>
+                                    <TableCell align={"right"}>
+                                        {statics[row.ID] !== undefined &&
+                                            statics[row.ID].toLocaleString()}
+                                    </TableCell>
+                                    <TableCell align={"right"}>
+                                        {statics[row.ID] !== undefined &&
+                                            sizeToString(row.MaxStorage)}
+                                    </TableCell>
+                                    <TableCell align={"right"}>
+                                        <Tooltip
+                                            title={tDashboard("policy.edit")}
+                                        >
+                                            <IconButton
+                                                onClick={() =>
+                                                    history.push(
+                                                        "/admin/group/edit/" +
+                                                            row.ID
+                                                    )
+                                                }
+                                                size={"small"}
+                                            >
+                                                <Edit />
+                                            </IconButton>
+                                        </Tooltip>
+                                        <Tooltip
+                                            title={tDashboard("policy.delete")}
+                                        >
+                                            <IconButton
+                                                onClick={() =>
+                                                    deletePolicy(row.ID)
+                                                }
+                                                size={"small"}
+                                            >
+                                                <Delete />
+                                            </IconButton>
+                                        </Tooltip>
+                                    </TableCell>
+                                </TableRow>
+                            ))}
+                        </TableBody>
+                    </Table>
+                </TableContainer>
+                <TablePagination
+                    rowsPerPageOptions={[10, 25, 100]}
+                    component="div"
+                    count={total}
+                    rowsPerPage={pageSize}
+                    page={page - 1}
+                    onChangePage={(e, p) => setPage(p + 1)}
+                    onChangeRowsPerPage={(e) => {
+                        setPageSize(e.target.value);
+                        setPage(1);
+                    }}
+                />
+            </Paper>
+        </div>
+    );
+}
diff --git a/src/component/Admin/Group/GroupForm.js b/src/component/Admin/Group/GroupForm.js
new file mode 100644
index 0000000..969467d
--- /dev/null
+++ b/src/component/Admin/Group/GroupForm.js
@@ -0,0 +1,825 @@
+import React, { useCallback, useEffect, useState } from "react";
+import { makeStyles, useTheme } from "@material-ui/core/styles";
+import Typography from "@material-ui/core/Typography";
+import InputLabel from "@material-ui/core/InputLabel";
+import FormControl from "@material-ui/core/FormControl";
+import Input from "@material-ui/core/Input";
+import FormHelperText from "@material-ui/core/FormHelperText";
+import Button from "@material-ui/core/Button";
+import API from "../../../middleware/Api";
+import { useDispatch } from "react-redux";
+import Select from "@material-ui/core/Select";
+import MenuItem from "@material-ui/core/MenuItem";
+import Chip from "@material-ui/core/Chip";
+import SizeInput from "../Common/SizeInput";
+import FormControlLabel from "@material-ui/core/FormControlLabel";
+import Switch from "@material-ui/core/Switch";
+import Collapse from "@material-ui/core/Collapse";
+import { useHistory } from "react-router";
+import { toggleSnackbar } from "../../../redux/explorer";
+import { Trans, useTranslation } from "react-i18next";
+import { Link } from "@material-ui/core";
+import { getSelectItemStyles } from "../../../utils";
+import NodeSelector from "./NodeSelector";
+
+const useStyles = makeStyles((theme) => ({
+    root: {
+        [theme.breakpoints.up("md")]: {
+            marginLeft: 100,
+        },
+        marginBottom: 40,
+    },
+    form: {
+        maxWidth: 400,
+        marginTop: 20,
+        marginBottom: 20,
+    },
+    formContainer: {
+        [theme.breakpoints.up("md")]: {
+            padding: "0px 24px 0 24px",
+        },
+    },
+}));
+
+export default function GroupForm(props) {
+    const { t } = useTranslation("dashboard", { keyPrefix: "group" });
+    const { t: tVas } = useTranslation("dashboard", { keyPrefix: "vas" });
+    const { t: tDashboard } = useTranslation("dashboard");
+    const classes = useStyles();
+    const [loading, setLoading] = useState(false);
+    const [group, setGroup] = useState(
+        props.group
+            ? props.group
+            : {
+                  ID: 0,
+                  Name: "",
+                  MaxStorage: "1073741824", // 转换类型
+                  ShareEnabled: "true", // 转换类型
+                  WebDAVEnabled: "true", // 转换类型
+                  SpeedLimit: "0", // 转换类型
+                  PolicyList: ["1"], // 转换类型,至少选择一个
+                  OptionsSerialized: {
+                      // 批量转换类型
+                      share_download: "true",
+                      aria2_options: "{}", // json decode
+                      compress_size: "0",
+                      decompress_size: "0",
+                      source_batch: "0",
+                      aria2_batch: "1",
+                      available_nodes: [],
+                  },
+              }
+    );
+    const [policies, setPolicies] = useState({});
+
+    const theme = useTheme();
+    const history = useHistory();
+
+    const dispatch = useDispatch();
+    const ToggleSnackbar = useCallback(
+        (vertical, horizontal, msg, color) =>
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color)),
+        [dispatch]
+    );
+
+    useEffect(() => {
+        API.post("/admin/policy/list", {
+            page: 1,
+            page_size: 10000,
+            order_by: "id asc",
+            conditions: {},
+        })
+            .then((response) => {
+                const res = {};
+                response.data.items.forEach((v) => {
+                    res[v.ID] = v.Name;
+                });
+                setPolicies(res);
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            });
+    }, []);
+
+    const handleChange = (name) => (event) => {
+        setGroup({
+            ...group,
+            [name]: event.target.value,
+        });
+    };
+
+    const handleCheckChange = (name) => (event) => {
+        const value = event.target.checked ? "true" : "false";
+        setGroup({
+            ...group,
+            [name]: value,
+        });
+    };
+
+    const handleOptionCheckChange = (name) => (event) => {
+        const value = event.target.checked ? "true" : "false";
+        setGroup({
+            ...group,
+            OptionsSerialized: {
+                ...group.OptionsSerialized,
+                [name]: value,
+            },
+        });
+    };
+
+    const handleOptionChange = (name) => (event) => {
+        setGroup({
+            ...group,
+            OptionsSerialized: {
+                ...group.OptionsSerialized,
+                [name]: event.target.value,
+            },
+        });
+    };
+
+    const submit = (e) => {
+        e.preventDefault();
+        const groupCopy = {
+            ...group,
+            OptionsSerialized: { ...group.OptionsSerialized },
+        };
+
+        // 布尔值转换
+        ["ShareEnabled", "WebDAVEnabled"].forEach((v) => {
+            groupCopy[v] = groupCopy[v] === "true";
+        });
+        [
+            "archive_download",
+            "archive_task",
+            "relocate",
+            "one_time_download",
+            "share_download",
+            "webdav_proxy",
+            "share_free",
+            "aria2",
+            "redirected_source",
+            "advance_delete",
+            "select_node",
+        ].forEach((v) => {
+            if (groupCopy.OptionsSerialized[v] !== undefined) {
+                groupCopy.OptionsSerialized[v] =
+                    groupCopy.OptionsSerialized[v] === "true";
+            }
+        });
+
+        // 整型转换
+        ["MaxStorage", "SpeedLimit"].forEach((v) => {
+            groupCopy[v] = parseInt(groupCopy[v]);
+        });
+        [
+            "compress_size",
+            "decompress_size",
+            "source_batch",
+            "aria2_batch",
+        ].forEach((v) => {
+            if (groupCopy.OptionsSerialized[v] !== undefined) {
+                groupCopy.OptionsSerialized[v] = parseInt(
+                    groupCopy.OptionsSerialized[v]
+                );
+            }
+        });
+
+        groupCopy.PolicyList = groupCopy.PolicyList.map((v) => {
+            return parseInt(v);
+        });
+
+        groupCopy.OptionsSerialized.available_nodes =
+            groupCopy.OptionsSerialized.available_nodes.map((v) => {
+                return parseInt(v);
+            });
+
+        if (groupCopy.PolicyList.length < 1 && groupCopy.ID !== 3) {
+            ToggleSnackbar("top", "right", t("atLeastOnePolicy"), "warning");
+            return;
+        }
+
+        // JSON转换
+        try {
+            groupCopy.OptionsSerialized.aria2_options = JSON.parse(
+                groupCopy.OptionsSerialized.aria2_options
+            );
+        } catch (e) {
+            ToggleSnackbar("top", "right", t("aria2FormatError"), "warning");
+            return;
+        }
+
+        setLoading(true);
+        API.post("/admin/group", {
+            group: groupCopy,
+        })
+            .then(() => {
+                history.push("/admin/group");
+                ToggleSnackbar(
+                    "top",
+                    "right",
+                    props.group ? t("saved") : t("added"),
+                    "success"
+                );
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            })
+            .then(() => {
+                setLoading(false);
+            });
+    };
+
+    return (
+        <div>
+            <form onSubmit={submit}>
+                <div className={classes.root}>
+                    <Typography variant="h6" gutterBottom>
+                        {group.ID === 0 && t("new")}
+                        {group.ID !== 0 &&
+                            t("editGroup", { group: group.Name })}
+                    </Typography>
+
+                    <div className={classes.formContainer}>
+                        {group.ID !== 3 && (
+                            <>
+                                <div className={classes.form}>
+                                    <FormControl fullWidth>
+                                        <InputLabel htmlFor="component-helper">
+                                            {t("nameOfGroup")}
+                                        </InputLabel>
+                                        <Input
+                                            value={group.Name}
+                                            onChange={handleChange("Name")}
+                                            required
+                                        />
+                                        <FormHelperText id="component-helper-text">
+                                            {t("nameOfGroupDes")}
+                                        </FormHelperText>
+                                    </FormControl>
+                                </div>
+
+                                <div className={classes.form}>
+                                    <FormControl fullWidth>
+                                        <InputLabel htmlFor="component-helper">
+                                            {t("availablePolicies")}
+                                        </InputLabel>
+                                        <Select
+                                            labelId="demo-mutiple-chip-label"
+                                            id="demo-mutiple-chip"
+                                            multiple
+                                            value={group.PolicyList}
+                                            onChange={handleChange(
+                                                "PolicyList"
+                                            )}
+                                            input={
+                                                <Input id="select-multiple-chip" />
+                                            }
+                                            renderValue={(selected) => (
+                                                <div>
+                                                    {selected.map((value) => (
+                                                        <Chip
+                                                            style={{
+                                                                margin: 2,
+                                                            }}
+                                                            key={value}
+                                                            size={"small"}
+                                                            label={
+                                                                policies[value]
+                                                            }
+                                                            className={
+                                                                classes.chip
+                                                            }
+                                                        />
+                                                    ))}
+                                                </div>
+                                            )}
+                                        >
+                                            {Object.keys(policies).map(
+                                                (pid) => (
+                                                    <MenuItem
+                                                        key={pid}
+                                                        value={pid}
+                                                        style={getSelectItemStyles(
+                                                            pid,
+                                                            group.PolicyList,
+                                                            theme
+                                                        )}
+                                                    >
+                                                        {policies[pid]}
+                                                    </MenuItem>
+                                                )
+                                            )}
+                                        </Select>
+                                        <FormHelperText id="component-helper-text">
+                                            {t("availablePoliciesDes")}
+                                        </FormHelperText>
+                                    </FormControl>
+                                </div>
+
+                                <div className={classes.form}>
+                                    <FormControl fullWidth>
+                                        <SizeInput
+                                            value={group.MaxStorage}
+                                            onChange={handleChange(
+                                                "MaxStorage"
+                                            )}
+                                            min={0}
+                                            max={9223372036854775807}
+                                            label={t("initialStorageQuota")}
+                                            required
+                                        />
+                                    </FormControl>
+                                    <FormHelperText id="component-helper-text">
+                                        {t("initialStorageQuotaDes")}
+                                    </FormHelperText>
+                                </div>
+                            </>
+                        )}
+
+                        <div className={classes.form}>
+                            <FormControl fullWidth>
+                                <SizeInput
+                                    value={group.SpeedLimit}
+                                    onChange={handleChange("SpeedLimit")}
+                                    min={0}
+                                    max={9223372036854775807}
+                                    label={t("downloadSpeedLimit")}
+                                    suffix={"/s"}
+                                    required
+                                />
+                            </FormControl>
+                            <FormHelperText id="component-helper-text">
+                                {t("downloadSpeedLimitDes")}
+                            </FormHelperText>
+                        </div>
+
+                        {group.ID !== 3 && (
+                            <div className={classes.form}>
+                                <FormControl fullWidth>
+                                    <InputLabel htmlFor="component-helper">
+                                        {t("bathSourceLinkLimit")}
+                                    </InputLabel>
+                                    <Input
+                                        multiline
+                                        type={"number"}
+                                        inputProps={{
+                                            min: 1,
+                                            step: 1,
+                                        }}
+                                        value={
+                                            group.OptionsSerialized.source_batch
+                                        }
+                                        onChange={handleOptionChange(
+                                            "source_batch"
+                                        )}
+                                    />
+                                    <FormHelperText id="component-helper-text">
+                                        {t("bathSourceLinkLimitDes")}
+                                    </FormHelperText>
+                                </FormControl>
+                            </div>
+                        )}
+
+                        {group.ID !== 3 && (
+                            <div className={classes.form}>
+                                <FormControl fullWidth>
+                                    <FormControlLabel
+                                        control={
+                                            <Switch
+                                                checked={
+                                                    group.ShareEnabled ===
+                                                    "true"
+                                                }
+                                                onChange={handleCheckChange(
+                                                    "ShareEnabled"
+                                                )}
+                                            />
+                                        }
+                                        label={t("allowCreateShareLink")}
+                                    />
+                                    <FormHelperText id="component-helper-text">
+                                        {t("allowCreateShareLinkDes")}
+                                    </FormHelperText>
+                                </FormControl>
+                            </div>
+                        )}
+
+                        <div className={classes.form}>
+                            <FormControl fullWidth>
+                                <FormControlLabel
+                                    control={
+                                        <Switch
+                                            checked={
+                                                group.OptionsSerialized
+                                                    .share_download === "true"
+                                            }
+                                            onChange={handleOptionCheckChange(
+                                                "share_download"
+                                            )}
+                                        />
+                                    }
+                                    label={t("allowDownloadShare")}
+                                />
+                                <FormHelperText id="component-helper-text">
+                                    {t("allowDownloadShareDes")}
+                                </FormHelperText>
+                            </FormControl>
+                        </div>
+
+                        <div className={classes.form}>
+                            <FormControl fullWidth>
+                                <FormControlLabel
+                                    control={
+                                        <Switch
+                                            checked={
+                                                group.OptionsSerialized
+                                                    .share_free === "true"
+                                            }
+                                            onChange={handleOptionCheckChange(
+                                                "share_free"
+                                            )}
+                                        />
+                                    }
+                                    label={tVas("freeDownload")}
+                                />
+                                <FormHelperText id="component-helper-text">
+                                    {tVas("freeDownloadDes")}
+                                </FormHelperText>
+                            </FormControl>
+                        </div>
+
+                        {group.ID !== 3 && (
+                            <div className={classes.form}>
+                                <FormControl fullWidth>
+                                    <FormControlLabel
+                                        control={
+                                            <Switch
+                                                checked={
+                                                    group.WebDAVEnabled ===
+                                                    "true"
+                                                }
+                                                onChange={handleCheckChange(
+                                                    "WebDAVEnabled"
+                                                )}
+                                            />
+                                        }
+                                        label={t("allowWabDAV")}
+                                    />
+                                    <FormHelperText id="component-helper-text">
+                                        {t("allowWabDAVDes")}
+                                    </FormHelperText>
+                                </FormControl>
+                            </div>
+                        )}
+
+                        {group.ID !== 3 && group.WebDAVEnabled === "true" && (
+                            <div className={classes.form}>
+                                <FormControl fullWidth>
+                                    <FormControlLabel
+                                        control={
+                                            <Switch
+                                                checked={
+                                                    group.OptionsSerialized.webdav_proxy ===
+                                                    "true"
+                                                }
+                                                onChange={handleOptionCheckChange(
+                                                    "webdav_proxy"
+                                                )}
+                                            />
+                                        }
+                                        label={t("allowWabDAVProxy")}
+                                    />
+                                    <FormHelperText id="component-helper-text">
+                                        {t("allowWabDAVProxyDes")}
+                                    </FormHelperText>
+                                </FormControl>
+                            </div>
+                        )}
+
+                        <div className={classes.form}>
+                            <FormControl fullWidth>
+                                <FormControlLabel
+                                    control={
+                                        <Switch
+                                            checked={
+                                                group.OptionsSerialized
+                                                    .one_time_download ===
+                                                "true"
+                                            }
+                                            onChange={handleOptionCheckChange(
+                                                "one_time_download"
+                                            )}
+                                        />
+                                    }
+                                    label={t("disableMultipleDownload")}
+                                />
+                                <FormHelperText id="component-helper-text">
+                                    {t("disableMultipleDownloadDes")}
+                                </FormHelperText>
+                            </FormControl>
+                        </div>
+
+                        {group.ID !== 3 && (
+                            <div className={classes.form}>
+                                <FormControl fullWidth>
+                                    <FormControlLabel
+                                        control={
+                                            <Switch
+                                                checked={
+                                                    group.OptionsSerialized
+                                                        .aria2 === "true"
+                                                }
+                                                onChange={handleOptionCheckChange(
+                                                    "aria2"
+                                                )}
+                                            />
+                                        }
+                                        label={t("allowRemoteDownload")}
+                                    />
+                                    <FormHelperText id="component-helper-text">
+                                        {t("allowRemoteDownloadDes")}
+                                    </FormHelperText>
+                                </FormControl>
+                            </div>
+                        )}
+
+                        <Collapse in={group.OptionsSerialized.aria2 === "true"}>
+                            <div className={classes.form}>
+                                <FormControl fullWidth>
+                                    <InputLabel htmlFor="component-helper">
+                                        {t("aria2Options")}
+                                    </InputLabel>
+                                    <Input
+                                        multiline
+                                        value={
+                                            group.OptionsSerialized
+                                                .aria2_options
+                                        }
+                                        onChange={handleOptionChange(
+                                            "aria2_options"
+                                        )}
+                                    />
+                                    <FormHelperText id="component-helper-text">
+                                        {t("aria2OptionsDes")}
+                                    </FormHelperText>
+                                </FormControl>
+                            </div>
+                            <div className={classes.form}>
+                                <FormControl fullWidth>
+                                    <InputLabel htmlFor="component-helper">
+                                        {t("aria2BatchSize")}
+                                    </InputLabel>
+                                    <Input
+                                        multiline
+                                        type={"number"}
+                                        inputProps={{
+                                            min: 0,
+                                            step: 1,
+                                        }}
+                                        value={
+                                            group.OptionsSerialized.aria2_batch
+                                        }
+                                        onChange={handleOptionChange(
+                                            "aria2_batch"
+                                        )}
+                                    />
+                                    <FormHelperText id="component-helper-text">
+                                        {t("aria2BatchSizeDes")}
+                                    </FormHelperText>
+                                </FormControl>
+                            </div>
+                            <div className={classes.form}>
+                                <FormControl fullWidth>
+                                    <InputLabel htmlFor="component-helper">
+                                        {t("availableNodes")}
+                                    </InputLabel>
+                                    <NodeSelector
+                                        selected={
+                                            group.OptionsSerialized
+                                                .available_nodes
+                                        }
+                                        handleChange={handleOptionChange(
+                                            "available_nodes"
+                                        )}
+                                    />
+                                    <FormHelperText id="component-helper-text">
+                                        {t("availableNodesDes")}
+                                    </FormHelperText>
+                                </FormControl>
+                            </div>
+                            <div className={classes.form}>
+                                <FormControl fullWidth>
+                                    <FormControlLabel
+                                        control={
+                                            <Switch
+                                                checked={
+                                                    group.OptionsSerialized
+                                                        .select_node === "true"
+                                                }
+                                                onChange={handleOptionCheckChange(
+                                                    "select_node"
+                                                )}
+                                            />
+                                        }
+                                        label={t("allowSelectNode")}
+                                    />
+                                    <FormHelperText id="component-helper-text">
+                                        {t("allowSelectNodeDes")}
+                                    </FormHelperText>
+                                </FormControl>
+                            </div>
+                        </Collapse>
+
+                        <div className={classes.form}>
+                            <FormControl fullWidth>
+                                <FormControlLabel
+                                    control={
+                                        <Switch
+                                            checked={
+                                                group.OptionsSerialized
+                                                    .archive_download === "true"
+                                            }
+                                            onChange={handleOptionCheckChange(
+                                                "archive_download"
+                                            )}
+                                        />
+                                    }
+                                    label={t("serverSideBatchDownload")}
+                                />
+                                <FormHelperText id="component-helper-text">
+                                    {t("serverSideBatchDownloadDes")}
+                                </FormHelperText>
+                            </FormControl>
+                        </div>
+
+                        {group.ID !== 3 && (
+                            <div className={classes.form}>
+                                <FormControl fullWidth>
+                                    <FormControlLabel
+                                        control={
+                                            <Switch
+                                                checked={
+                                                    group.OptionsSerialized
+                                                        .archive_task === "true"
+                                                }
+                                                onChange={handleOptionCheckChange(
+                                                    "archive_task"
+                                                )}
+                                            />
+                                        }
+                                        label={t("compressTask")}
+                                    />
+                                    <FormHelperText id="component-helper-text">
+                                        {t("compressTaskDes")}
+                                    </FormHelperText>
+                                </FormControl>
+                            </div>
+                        )}
+
+                        <Collapse
+                            in={group.OptionsSerialized.archive_task === "true"}
+                        >
+                            <div className={classes.form}>
+                                <FormControl fullWidth>
+                                    <SizeInput
+                                        value={
+                                            group.OptionsSerialized
+                                                .compress_size
+                                        }
+                                        onChange={handleOptionChange(
+                                            "compress_size"
+                                        )}
+                                        min={0}
+                                        max={9223372036854775807}
+                                        label={t("compressSize")}
+                                    />
+                                </FormControl>
+                                <FormHelperText id="component-helper-text">
+                                    {t("compressSizeDes")}
+                                </FormHelperText>
+                            </div>
+
+                            <div className={classes.form}>
+                                <FormControl fullWidth>
+                                    <SizeInput
+                                        value={
+                                            group.OptionsSerialized
+                                                .decompress_size
+                                        }
+                                        onChange={handleOptionChange(
+                                            "decompress_size"
+                                        )}
+                                        min={0}
+                                        max={9223372036854775807}
+                                        label={t("decompressSize")}
+                                    />
+                                </FormControl>
+                                <FormHelperText id="component-helper-text">
+                                    {t("decompressSizeDes")}
+                                </FormHelperText>
+                            </div>
+                        </Collapse>
+
+                        {group.ID !== 3 && (
+                            <div className={classes.form}>
+                                <FormControl fullWidth>
+                                    <FormControlLabel
+                                        control={
+                                            <Switch
+                                                checked={
+                                                    group.OptionsSerialized
+                                                        .relocate === "true"
+                                                }
+                                                onChange={handleOptionCheckChange(
+                                                    "relocate"
+                                                )}
+                                            />
+                                        }
+                                        label={t("migratePolicy")}
+                                    />
+                                    <FormHelperText id="component-helper-text">
+                                        {t("migratePolicyDes")}
+                                    </FormHelperText>
+                                </FormControl>
+                            </div>
+                        )}
+
+                        {group.ID !== 3 && (
+                            <div className={classes.form}>
+                                <FormControl fullWidth>
+                                    <FormControlLabel
+                                        control={
+                                            <Switch
+                                                checked={
+                                                    group.OptionsSerialized
+                                                        .redirected_source ===
+                                                    "true"
+                                                }
+                                                onChange={handleOptionCheckChange(
+                                                    "redirected_source"
+                                                )}
+                                            />
+                                        }
+                                        label={t("redirectedSource")}
+                                    />
+                                    <FormHelperText id="component-helper-text">
+                                        <Trans
+                                            ns={"dashboard"}
+                                            i18nKey={
+                                                "group.redirectedSourceDes"
+                                            }
+                                            components={[
+                                                <Link
+                                                    href={tDashboard(
+                                                        "policy.comparesStoragePoliciesLink"
+                                                    )}
+                                                    key={0}
+                                                    target={"_blank"}
+                                                />,
+                                            ]}
+                                        />
+                                    </FormHelperText>
+                                </FormControl>
+                            </div>
+                        )}
+
+                        {group.ID !== 3 && (
+                            <div className={classes.form}>
+                                <FormControl fullWidth>
+                                    <FormControlLabel
+                                        control={
+                                            <Switch
+                                                checked={
+                                                    group.OptionsSerialized
+                                                        .advance_delete ===
+                                                    "true"
+                                                }
+                                                onChange={handleOptionCheckChange(
+                                                    "advance_delete"
+                                                )}
+                                            />
+                                        }
+                                        label={t("advanceDelete")}
+                                    />
+                                    <FormHelperText id="component-helper-text">
+                                        {t("advanceDeleteDes")}
+                                    </FormHelperText>
+                                </FormControl>
+                            </div>
+                        )}
+                    </div>
+                </div>
+                <div className={classes.root}>
+                    <Button
+                        disabled={loading}
+                        type={"submit"}
+                        variant={"contained"}
+                        color={"primary"}
+                    >
+                        {tDashboard("settings.save")}
+                    </Button>
+                </div>
+            </form>
+        </div>
+    );
+}
diff --git a/src/component/Admin/Group/NodeSelector.js b/src/component/Admin/Group/NodeSelector.js
new file mode 100644
index 0000000..bd6fa15
--- /dev/null
+++ b/src/component/Admin/Group/NodeSelector.js
@@ -0,0 +1,78 @@
+import React, { useCallback, useEffect, useState } from "react";
+import API from "../../../middleware/Api";
+import { useDispatch } from "react-redux";
+import { toggleSnackbar } from "../../../redux/explorer";
+import { useTranslation } from "react-i18next";
+import Input from "@material-ui/core/Input";
+import Chip from "@material-ui/core/Chip";
+import MenuItem from "@material-ui/core/MenuItem";
+import Select from "@material-ui/core/Select";
+import { getSelectItemStyles } from "../../../utils";
+import { useTheme } from "@material-ui/core/styles";
+
+export default function NodeSelector({ selected, handleChange }) {
+    const { t } = useTranslation("dashboard", { keyPrefix: "group" });
+    const [nodes, setNodes] = useState({});
+    const theme = useTheme();
+
+    const dispatch = useDispatch();
+    const ToggleSnackbar = useCallback(
+        (vertical, horizontal, msg, color) =>
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color)),
+        [dispatch]
+    );
+
+    useEffect(() => {
+        API.post("/admin/node/list", {
+            page: 1,
+            page_size: 10000,
+            order_by: "id asc",
+            conditions: {},
+        })
+            .then((response) => {
+                const res = {};
+                response.data.items.forEach((v) => {
+                    res[v.ID] = v.Name;
+                });
+                setNodes(res);
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            });
+    }, []);
+
+    return (
+        <Select
+            labelId="demo-mutiple-chip-label"
+            id="demo-mutiple-chip"
+            multiple
+            value={selected}
+            onChange={handleChange}
+            input={<Input id="select-multiple-chip" />}
+            renderValue={(selected) => (
+                <div>
+                    {selected.map((value) => (
+                        <Chip
+                            style={{
+                                margin: 2,
+                            }}
+                            key={value}
+                            size={"small"}
+                            label={nodes[value]}
+                        />
+                    ))}
+                </div>
+            )}
+        >
+            {Object.keys(nodes).map((pid) => (
+                <MenuItem
+                    key={pid}
+                    value={pid}
+                    style={getSelectItemStyles(pid, selected, theme)}
+                >
+                    {nodes[pid]}
+                </MenuItem>
+            ))}
+        </Select>
+    );
+}
diff --git a/src/component/Admin/Index.js b/src/component/Admin/Index.js
new file mode 100644
index 0000000..b41ca1f
--- /dev/null
+++ b/src/component/Admin/Index.js
@@ -0,0 +1,527 @@
+import React, { useCallback, useEffect, useState } from "react";
+import Grid from "@material-ui/core/Grid";
+import Paper from "@material-ui/core/Paper";
+import {
+    CartesianGrid,
+    Legend,
+    Line,
+    LineChart,
+    Tooltip,
+    XAxis,
+    YAxis,
+} from "recharts";
+import { ResponsiveContainer } from "recharts/lib/component/ResponsiveContainer";
+import { makeStyles } from "@material-ui/core/styles";
+import pathHelper from "../../utils/page";
+import API from "../../middleware/Api";
+import { useDispatch } from "react-redux";
+import Typography from "@material-ui/core/Typography";
+import Divider from "@material-ui/core/Divider";
+import List from "@material-ui/core/List";
+import ListItem from "@material-ui/core/ListItem";
+import ListItemAvatar from "@material-ui/core/ListItemAvatar";
+import Avatar from "@material-ui/core/Avatar";
+import {
+    Description,
+    Favorite,
+    FileCopy,
+    Forum,
+    GitHub,
+    Home,
+    Launch,
+    Lock,
+    People,
+    Public,
+    Telegram,
+} from "@material-ui/icons";
+import ListItemText from "@material-ui/core/ListItemText";
+import ListItemIcon from "@material-ui/core/ListItemIcon";
+import { blue, green, red, yellow } from "@material-ui/core/colors";
+import axios from "axios";
+import TimeAgo from "timeago-react";
+import Chip from "@material-ui/core/Chip";
+import DialogTitle from "@material-ui/core/DialogTitle";
+import Dialog from "@material-ui/core/Dialog";
+import DialogContent from "@material-ui/core/DialogContent";
+import DialogContentText from "@material-ui/core/DialogContentText";
+import DialogActions from "@material-ui/core/DialogActions";
+import Button from "@material-ui/core/Button";
+import { toggleSnackbar } from "../../redux/explorer";
+import { Trans, useTranslation } from "react-i18next";
+
+const useStyles = makeStyles((theme) => ({
+    paper: {
+        padding: theme.spacing(3),
+        height: "100%",
+    },
+    logo: {
+        width: 70,
+    },
+    logoContainer: {
+        padding: theme.spacing(3),
+        display: "flex",
+    },
+    title: {
+        marginLeft: 16,
+    },
+    cloudreve: {
+        fontSize: 25,
+        color: theme.palette.text.secondary,
+    },
+    version: {
+        color: theme.palette.text.hint,
+    },
+    links: {
+        padding: theme.spacing(3),
+    },
+    iconRight: {
+        minWidth: 0,
+    },
+    userIcon: {
+        backgroundColor: blue[100],
+        color: blue[600],
+    },
+    fileIcon: {
+        backgroundColor: yellow[100],
+        color: yellow[800],
+    },
+    publicIcon: {
+        backgroundColor: green[100],
+        color: green[800],
+    },
+    secretIcon: {
+        backgroundColor: red[100],
+        color: red[800],
+    },
+}));
+
+export default function Index() {
+    const { t } = useTranslation("dashboard");
+    const classes = useStyles();
+    const [lineData, setLineData] = useState([]);
+    // const [news, setNews] = useState([]);
+    // const [newsUsers, setNewsUsers] = useState({});
+    const [open, setOpen] = React.useState(false);
+    const [siteURL, setSiteURL] = React.useState("");
+    const [statistics, setStatistics] = useState({
+        fileTotal: 0,
+        userTotal: 0,
+        publicShareTotal: 0,
+        secretShareTotal: 0,
+    });
+    const [version, setVersion] = useState({
+        backend: "-",
+    });
+
+    const dispatch = useDispatch();
+    const ToggleSnackbar = useCallback(
+        (vertical, horizontal, msg, color) =>
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color)),
+        [dispatch]
+    );
+
+    const ResetSiteURL = () => {
+        setOpen(false);
+        API.patch("/admin/setting", {
+            options: [
+                {
+                    key: "siteURL",
+                    value: window.location.origin,
+                },
+            ],
+        })
+            .then(() => {
+                setSiteURL(window.location.origin);
+                ToggleSnackbar("top", "right", t("settings.saved"), "success");
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            });
+    };
+
+    useEffect(() => {
+        API.get("/admin/summary")
+            .then((response) => {
+                const data = [];
+                response.data.date.forEach((v, k) => {
+                    data.push({
+                        name: v,
+                        file: response.data.files[k],
+                        user: response.data.users[k],
+                        share: response.data.shares[k],
+                    });
+                });
+                setLineData(data);
+                setStatistics({
+                    fileTotal: response.data.fileTotal,
+                    userTotal: response.data.userTotal,
+                    publicShareTotal: response.data.publicShareTotal,
+                    secretShareTotal: response.data.secretShareTotal,
+                });
+                setVersion(response.data.version);
+                setSiteURL(response.data.siteURL);
+                if (
+                    response.data.siteURL === "" ||
+                    response.data.siteURL !== window.location.origin
+                ) {
+                    setOpen(true);
+                }
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            });
+
+        // axios
+        //     .get("/api/v3/admin/news?tag=" + t("summary.newsTag"))
+        //     .then((response) => {
+        //         setNews(response.data.data);
+        //         const res = {};
+        //         response.data.included.forEach((v) => {
+        //             if (v.type === "users") {
+        //                 res[v.id] = v.attributes;
+        //             }
+        //         });
+        //         setNewsUsers(res);
+        //     })
+        //     .catch((error) => {
+        //         ToggleSnackbar(
+        //             "top",
+        //             "right",
+        //             t("summary.newsletterError"),
+        //             "warning"
+        //         );
+        //     });
+    }, []);
+
+    return (
+        <Grid container spacing={3}>
+            <Dialog
+                open={open}
+                onClose={() => setOpen(false)}
+                aria-labelledby="alert-dialog-title"
+                aria-describedby="alert-dialog-description"
+            >
+                <DialogTitle id="alert-dialog-title">
+                    {t("summary.confirmSiteURLTitle")}
+                </DialogTitle>
+                <DialogContent>
+                    <DialogContentText id="alert-dialog-description">
+                        <Typography>
+                            {siteURL === "" &&
+                                t("summary.siteURLNotSet", {
+                                    current: window.location.origin,
+                                })}
+                            {siteURL !== "" &&
+                                t("summary.siteURLNotMatch", {
+                                    current: window.location.origin,
+                                })}
+                        </Typography>
+                        <Typography>
+                            {t("summary.siteURLDescription")}
+                        </Typography>
+                    </DialogContentText>
+                </DialogContent>
+                <DialogActions>
+                    <Button onClick={() => setOpen(false)} color="default">
+                        {t("summary.ignore")}
+                    </Button>
+                    <Button onClick={() => ResetSiteURL()} color="primary">
+                        {t("summary.changeIt")}
+                    </Button>
+                </DialogActions>
+            </Dialog>
+            <Grid alignContent={"stretch"} item xs={12} md={8} lg={9}>
+                <Paper className={classes.paper}>
+                    <Typography variant="button" display="block" gutterBottom>
+                        {t("summary.trend")}
+                    </Typography>
+                    <ResponsiveContainer
+                        width="100%"
+                        aspect={pathHelper.isMobile() ? 4.0 / 3.0 : 3.0 / 1.0}
+                    >
+                        <LineChart width={1200} height={300} data={lineData}>
+                            <CartesianGrid strokeDasharray="3 3" />
+                            <XAxis dataKey="name" />
+                            <YAxis />
+                            <Tooltip />
+                            <Legend />
+                            <Line
+                                name={t("nav.files")}
+                                type="monotone"
+                                dataKey="file"
+                                stroke="#3f51b5"
+                            />
+                            <Line
+                                name={t("nav.users")}
+                                type="monotone"
+                                dataKey="user"
+                                stroke="#82ca9d"
+                            />
+                            <Line
+                                name={t("nav.shares")}
+                                type="monotone"
+                                dataKey="share"
+                                stroke="#e91e63"
+                            />
+                        </LineChart>
+                    </ResponsiveContainer>
+                </Paper>
+            </Grid>
+            <Grid item xs={12} md={4} lg={3}>
+                <Paper className={classes.paper}>
+                    <Typography variant="button" display="block" gutterBottom>
+                        {t("summary.summary")}
+                    </Typography>
+                    <Divider />
+                    <List className={classes.root}>
+                        <ListItem>
+                            <ListItemAvatar>
+                                <Avatar className={classes.userIcon}>
+                                    <People />
+                                </Avatar>
+                            </ListItemAvatar>
+                            <ListItemText
+                                primary={statistics.userTotal}
+                                secondary={t("summary.totalUsers")}
+                            />
+                        </ListItem>
+                        <ListItem>
+                            <ListItemAvatar>
+                                <Avatar className={classes.fileIcon}>
+                                    <FileCopy />
+                                </Avatar>
+                            </ListItemAvatar>
+                            <ListItemText
+                                primary={statistics.fileTotal}
+                                secondary={t("summary.totalFiles")}
+                            />
+                        </ListItem>
+                        <ListItem>
+                            <ListItemAvatar>
+                                <Avatar className={classes.publicIcon}>
+                                    <Public />
+                                </Avatar>
+                            </ListItemAvatar>
+                            <ListItemText
+                                primary={statistics.publicShareTotal}
+                                secondary={t("summary.publicShares")}
+                            />
+                        </ListItem>
+                        <ListItem>
+                            <ListItemAvatar>
+                                <Avatar className={classes.secretIcon}>
+                                    <Lock />
+                                </Avatar>
+                            </ListItemAvatar>
+                            <ListItemText
+                                primary={statistics.secretShareTotal}
+                                secondary={t("summary.privateShares")}
+                            />
+                        </ListItem>
+                    </List>
+                </Paper>
+            </Grid>
+            <Grid item xs={12} md={4} lg={3}>
+                <Paper>
+                    <div className={classes.logoContainer}>
+                        <img
+                            alt="cloudreve"
+                            className={classes.logo}
+                            src={"/static/img/cloudreve.svg"}
+                        />
+                        <div className={classes.title}>
+                            <Typography className={classes.cloudreve}>
+                                Cloudreve
+                            </Typography>
+                            <Typography className={classes.version}>
+                                {version.backend}{" "}
+                                {version.is_plus === "true" && (
+                                    <Chip size="small" label="Plus" />
+                                )}
+                            </Typography>
+                        </div>
+                    </div>
+                    <Divider />
+                    <div>
+                        <List component="nav" aria-label="main mailbox folders">
+                            <ListItem
+                                button
+                                onClick={() =>
+                                    window.open("https://cloudreve.org")
+                                }
+                            >
+                                <ListItemIcon>
+                                    <Home />
+                                </ListItemIcon>
+                                <ListItemText primary={t("summary.homepage")} />
+                                <ListItemIcon className={classes.iconRight}>
+                                    <Launch />
+                                </ListItemIcon>
+                            </ListItem>
+                            <ListItem
+                                button
+                                onClick={() =>
+                                    window.open(
+                                        "https://github.com/cloudreve/cloudreve"
+                                    )
+                                }
+                            >
+                                <ListItemIcon>
+                                    <GitHub />
+                                </ListItemIcon>
+                                <ListItemText primary={t("summary.github")} />
+                                <ListItemIcon className={classes.iconRight}>
+                                    <Launch />
+                                </ListItemIcon>
+                            </ListItem>
+                            <ListItem
+                                button
+                                onClick={() =>
+                                    window.open("https://docs.cloudreve.org/")
+                                }
+                            >
+                                <ListItemIcon>
+                                    <Description />
+                                </ListItemIcon>
+                                <ListItemText
+                                    primary={t("summary.documents")}
+                                />
+                                <ListItemIcon className={classes.iconRight}>
+                                    <Launch />
+                                </ListItemIcon>
+                            </ListItem>
+                            <ListItem
+                                button
+                                onClick={() =>
+                                    window.open(t("summary.forumLink"))
+                                }
+                            >
+                                <ListItemIcon>
+                                    <Forum />
+                                </ListItemIcon>
+                                <ListItemText primary={t("summary.forum")} />
+                                <ListItemIcon className={classes.iconRight}>
+                                    <Launch />
+                                </ListItemIcon>
+                            </ListItem>
+                            <ListItem
+                                button
+                                onClick={() =>
+                                    window.open(t("summary.telegramGroupLink"))
+                                }
+                            >
+                                <ListItemIcon>
+                                    <Telegram />
+                                </ListItemIcon>
+                                <ListItemText
+                                    primary={t("summary.telegramGroup")}
+                                />
+                                <ListItemIcon className={classes.iconRight}>
+                                    <Launch />
+                                </ListItemIcon>
+                            </ListItem>
+                            <ListItem
+                                button
+                                onClick={() =>
+                                    window.open("https://docs.cloudreve.org/use/pro/jie-shao")
+                                }
+                            >
+                                <ListItemIcon style={{ color: "#ff789d" }}>
+                                    <Favorite />
+                                </ListItemIcon>
+                                <ListItemText primary={t("summary.buyPro")} />
+                                <ListItemIcon className={classes.iconRight}>
+                                    <Launch />
+                                </ListItemIcon>
+                            </ListItem>
+                        </List>
+                    </div>
+                </Paper>
+            </Grid>
+            {/* <Grid item xs={12} md={8} lg={9}>
+                <Paper className={classes.paper}>
+                    <List>
+                        {news &&
+                            news.map((v) => (
+                                <>
+                                    <ListItem
+                                        button
+                                        alignItems="flex-start"
+                                        onClick={() =>
+                                            window.open(
+                                                "https://forum.cloudreve.org/d/" +
+                                                    v.id
+                                            )
+                                        }
+                                    >
+                                        <ListItemAvatar>
+                                            <Avatar
+                                                alt="Travis Howard"
+                                                src={
+                                                    newsUsers[
+                                                        v.relationships
+                                                            .startUser.data.id
+                                                    ] &&
+                                                    newsUsers[
+                                                        v.relationships
+                                                            .startUser.data.id
+                                                    ].avatarUrl
+                                                }
+                                            />
+                                        </ListItemAvatar>
+                                        <ListItemText
+                                            primary={v.attributes.title}
+                                            secondary={
+                                                <React.Fragment>
+                                                    <Typography
+                                                        component="span"
+                                                        variant="body2"
+                                                        className={
+                                                            classes.inline
+                                                        }
+                                                        color="textPrimary"
+                                                    >
+                                                        {newsUsers[
+                                                            v.relationships
+                                                                .startUser.data
+                                                                .id
+                                                        ] &&
+                                                            newsUsers[
+                                                                v.relationships
+                                                                    .startUser
+                                                                    .data.id
+                                                            ].username}{" "}
+                                                    </Typography>
+                                                    <Trans
+                                                        ns={"dashboard"}
+                                                        i18nKey="summary.publishedAt"
+                                                        components={[
+                                                            <TimeAgo
+                                                                key={0}
+                                                                datetime={
+                                                                    v.attributes
+                                                                        .startTime
+                                                                }
+                                                                locale={t(
+                                                                    "timeAgoLocaleCode",
+                                                                    {
+                                                                        ns:
+                                                                            "common",
+                                                                    }
+                                                                )}
+                                                            />,
+                                                        ]}
+                                                    />
+                                                </React.Fragment>
+                                            }
+                                        />
+                                    </ListItem>
+                                    <Divider />
+                                </>
+                            ))}
+                    </List>
+                </Paper>
+            </Grid> */}
+        </Grid>
+    );
+}
diff --git a/src/component/Admin/Node/AddNode.js b/src/component/Admin/Node/AddNode.js
new file mode 100644
index 0000000..57479cb
--- /dev/null
+++ b/src/component/Admin/Node/AddNode.js
@@ -0,0 +1,27 @@
+import React from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import Paper from "@material-ui/core/Paper";
+import NodeGuide from "./Guide/NodeGuide";
+
+const useStyles = makeStyles((theme) => ({
+    root: {
+        [theme.breakpoints.up("md")]: {
+            marginLeft: 100,
+        },
+        marginBottom: 40,
+    },
+    content: {
+        padding: theme.spacing(2),
+    },
+}));
+
+export default function AddNode() {
+    const classes = useStyles();
+    return (
+        <div>
+            <Paper square className={classes.content}>
+                <NodeGuide />
+            </Paper>
+        </div>
+    );
+}
diff --git a/src/component/Admin/Node/EditNode.js b/src/component/Admin/Node/EditNode.js
new file mode 100644
index 0000000..7ccc1a8
--- /dev/null
+++ b/src/component/Admin/Node/EditNode.js
@@ -0,0 +1,57 @@
+import React, { useCallback, useEffect, useState } from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import Paper from "@material-ui/core/Paper";
+import NodeGuide from "./Guide/NodeGuide";
+import { useParams } from "react-router";
+import { useDispatch } from "react-redux";
+import API from "../../../middleware/Api";
+import { toggleSnackbar } from "../../../redux/explorer";
+
+const useStyles = makeStyles((theme) => ({
+    root: {
+        [theme.breakpoints.up("md")]: {
+            marginLeft: 100,
+        },
+        marginBottom: 40,
+    },
+    content: {
+        padding: theme.spacing(2),
+    },
+}));
+
+export default function EditNode() {
+    const classes = useStyles();
+    const { id } = useParams();
+    const [node, setNode] = useState(null);
+
+    const dispatch = useDispatch();
+    const ToggleSnackbar = useCallback(
+        (vertical, horizontal, msg, color) =>
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color)),
+        [dispatch]
+    );
+
+    useEffect(() => {
+        API.get("/admin/node/" + id)
+            .then((response) => {
+                response.data.Rank = response.data.Rank.toString();
+                response.data.Aria2OptionsSerialized.interval = response.data.Aria2OptionsSerialized.interval.toString();
+                response.data.Aria2OptionsSerialized.timeout = response.data.Aria2OptionsSerialized.timeout.toString();
+                response.data.Aria2Enabled = response.data.Aria2Enabled
+                    ? "true"
+                    : "false";
+                setNode(response.data);
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            });
+    }, [id]);
+
+    return (
+        <div>
+            <Paper square className={classes.content}>
+                {node && <NodeGuide node={node} />}
+            </Paper>
+        </div>
+    );
+}
diff --git a/src/component/Admin/Node/Guide/Aria2RPC.js b/src/component/Admin/Node/Guide/Aria2RPC.js
new file mode 100644
index 0000000..d065903
--- /dev/null
+++ b/src/component/Admin/Node/Guide/Aria2RPC.js
@@ -0,0 +1,454 @@
+import { lighten, makeStyles } from "@material-ui/core/styles";
+import React, { useCallback, useState } from "react";
+import Typography from "@material-ui/core/Typography";
+import { useDispatch } from "react-redux";
+import Link from "@material-ui/core/Link";
+import FormControl from "@material-ui/core/FormControl";
+import InputLabel from "@material-ui/core/InputLabel";
+import Input from "@material-ui/core/Input";
+import RadioGroup from "@material-ui/core/RadioGroup";
+import FormControlLabel from "@material-ui/core/FormControlLabel";
+import Radio from "@material-ui/core/Radio";
+import Collapse from "@material-ui/core/Collapse";
+import Button from "@material-ui/core/Button";
+import Alert from "@material-ui/lab/Alert";
+import Box from "@material-ui/core/Box";
+import FormHelperText from "@material-ui/core/FormHelperText";
+import API from "../../../../middleware/Api";
+import { toggleSnackbar } from "../../../../redux/explorer";
+import { Trans, useTranslation } from "react-i18next";
+
+const useStyles = makeStyles((theme) => ({
+    stepContent: {
+        padding: "16px 32px 16px 32px",
+    },
+    form: {
+        maxWidth: 400,
+        marginTop: 20,
+    },
+    formContainer: {
+        [theme.breakpoints.up("md")]: {
+            padding: "0px 24px 0 24px",
+        },
+    },
+    subStepContainer: {
+        display: "flex",
+        marginBottom: 20,
+        padding: 10,
+        transition: theme.transitions.create("background-color", {
+            easing: theme.transitions.easing.sharp,
+            duration: theme.transitions.duration.leavingScreen,
+        }),
+        "&:focus-within": {
+            backgroundColor: theme.palette.background.default,
+        },
+    },
+    stepNumber: {
+        width: 20,
+        height: 20,
+        backgroundColor: lighten(theme.palette.secondary.light, 0.2),
+        color: theme.palette.secondary.contrastText,
+        textAlign: "center",
+        borderRadius: " 50%",
+    },
+    stepNumberContainer: {
+        marginRight: 10,
+    },
+    stepFooter: {
+        marginTop: 32,
+    },
+    button: {
+        marginRight: theme.spacing(1),
+    },
+    viewButtonLabel: { textTransform: "none" },
+    "@global": {
+        code: {
+            color: "rgba(0, 0, 0, 0.87)",
+            display: "inline-block",
+            padding: "2px 6px",
+            fontFamily:
+                ' Consolas, "Liberation Mono", Menlo, Courier, monospace',
+            borderRadius: "2px",
+            backgroundColor: "rgba(255,229,100,0.1)",
+        },
+        pre: {
+            margin: "24px 0",
+            padding: "12px 18px",
+            overflow: "auto",
+            direction: "ltr",
+            borderRadius: "4px",
+            backgroundColor: "#272c34",
+            color: "#fff",
+            fontFamily:
+                ' Consolas, "Liberation Mono", Menlo, Courier, monospace',
+        },
+    },
+}));
+
+export default function Aria2RPC(props) {
+    const { t } = useTranslation("dashboard", { keyPrefix: "node" });
+    const { t: tDashboard } = useTranslation("dashboard");
+    const classes = useStyles();
+    const dispatch = useDispatch();
+    const [loading, setLoading] = useState(false);
+    const ToggleSnackbar = useCallback(
+        (vertical, horizontal, msg, color) =>
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color)),
+        [dispatch]
+    );
+
+    const testAria2 = () => {
+        setLoading(true);
+        API.post("/admin/node/aria2/test", {
+            type: props.node.Type,
+            server: props.node.Server,
+            secret: props.node.SlaveKey,
+            rpc: props.node.Aria2OptionsSerialized.server,
+            token: props.node.Aria2OptionsSerialized.token,
+        })
+            .then((response) => {
+                ToggleSnackbar(
+                    "top",
+                    "right",
+                    t("ariaSuccess", { version: response.data }),
+                    "success"
+                );
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            })
+            .then(() => {
+                setLoading(false);
+            });
+    };
+
+    const mode = props.node.Type === 0 ? t("slave") : t("master");
+
+    return (
+        <form
+            className={classes.stepContent}
+            onSubmit={(e) => {
+                e.preventDefault();
+                props.onSubmit(e);
+            }}
+        >
+            <Alert severity="info" style={{ marginBottom: 10 }}>
+                <Typography variant="body2">
+                    <Trans
+                        ns={"dashboard"}
+                        i18nKey={"node.aria2Des"}
+                        values={{
+                            mode: mode,
+                        }}
+                        components={[
+                            <Link
+                                href={"https://aria2.github.io/"}
+                                target={"_blank"}
+                                key={0}
+                            />,
+                            <Box
+                                component="span"
+                                fontWeight="fontWeightBold"
+                                key={1}
+                            />,
+                            <Link
+                                href={t("aria2DocURL")}
+                                target={"_blank"}
+                                key={2}
+                            />,
+                        ]}
+                    />
+                </Typography>
+            </Alert>
+
+            <div className={classes.subStepContainer}>
+                <div className={classes.stepNumberContainer}>
+                    <div className={classes.stepNumber}>1</div>
+                </div>
+                <div className={classes.subStepContent}>
+                    <Typography variant={"body2"}>
+                        {props.node.Type === 0
+                            ? t("slaveTakeOverRemoteDownload")
+                            : t("masterTakeOverRemoteDownload")}
+                        <br />
+                        {props.node.Type === 0
+                            ? t("routeTaskSlave")
+                            : t("routeTaskMaster")}
+                    </Typography>
+
+                    <div className={classes.form}>
+                        <FormControl required component="fieldset">
+                            <RadioGroup
+                                required
+                                value={props.node.Aria2Enabled}
+                                onChange={props.handleTextChange(
+                                    "Aria2Enabled"
+                                )}
+                                row
+                            >
+                                <FormControlLabel
+                                    value={"true"}
+                                    control={<Radio color={"primary"} />}
+                                    label={t("enable")}
+                                />
+                                <FormControlLabel
+                                    value={"false"}
+                                    control={<Radio color={"primary"} />}
+                                    label={t("disable")}
+                                />
+                            </RadioGroup>
+                        </FormControl>
+                    </div>
+                </div>
+            </div>
+
+            <Collapse in={props.node.Aria2Enabled === "true"}>
+                <div className={classes.subStepContainer}>
+                    <div className={classes.stepNumberContainer}>
+                        <div className={classes.stepNumber}>2</div>
+                    </div>
+                    <div className={classes.subStepContent}>
+                        <Typography variant={"body2"}>
+                            {t("aria2ConfigDes", {
+                                target:
+                                    props.node.Type === 0
+                                        ? t("slaveNodeTarget")
+                                        : t("masterNodeTarget"),
+                            })}
+                        </Typography>
+                        <pre>
+                            # {t("enableRPCComment")}
+                            <br />
+                            enable-rpc=true
+                            <br /># {t("rpcPortComment")}
+                            <br />
+                            rpc-listen-port=6800
+                            <br /># {t("rpcSecretComment")}
+                            <br />
+                            rpc-secret=
+                            {props.node.Aria2OptionsSerialized.token}
+                            <br />
+                        </pre>
+                        <Alert severity="info" style={{ marginBottom: 10 }}>
+                            <Typography variant="body2">
+                                {t("rpcConfigDes")}
+                            </Typography>
+                        </Alert>
+                    </div>
+                </div>
+
+                <div className={classes.subStepContainer}>
+                    <div className={classes.stepNumberContainer}>
+                        <div className={classes.stepNumber}>3</div>
+                    </div>
+                    <div className={classes.subStepContent}>
+                        <Typography variant={"body2"}>
+                            <Trans
+                                ns={"dashboard"}
+                                i18nKey={"node.rpcServerDes"}
+                                values={{
+                                    mode: mode,
+                                }}
+                                components={[
+                                    <code key={0} />,
+                                    <code key={1} />,
+                                    <code key={2} />,
+                                ]}
+                            />
+                        </Typography>
+                        <div className={classes.form}>
+                            <FormControl fullWidth>
+                                <InputLabel htmlFor="component-helper">
+                                    {t("rpcServer")}
+                                </InputLabel>
+                                <Input
+                                    required
+                                    type={"url"}
+                                    value={
+                                        props.node.Aria2OptionsSerialized.server
+                                    }
+                                    onChange={props.handleOptionChange(
+                                        "server"
+                                    )}
+                                />
+                                <FormHelperText id="component-helper-text">
+                                    {t("rpcServerHelpDes")}
+                                </FormHelperText>
+                            </FormControl>
+                        </div>
+                    </div>
+                </div>
+
+                <div className={classes.subStepContainer}>
+                    <div className={classes.stepNumberContainer}>
+                        <div className={classes.stepNumber}>4</div>
+                    </div>
+                    <div className={classes.subStepContent}>
+                        <Typography variant={"body2"}>
+                            <Trans
+                                ns={"dashboard"}
+                                i18nKey={"node.rpcTokenDes"}
+                                components={[<code key={0} />]}
+                            />
+                        </Typography>
+                        <div className={classes.form}>
+                            <Input
+                                value={props.node.Aria2OptionsSerialized.token}
+                                onChange={props.handleOptionChange("token")}
+                            />
+                        </div>
+                    </div>
+                </div>
+
+                <div className={classes.subStepContainer}>
+                    <div className={classes.stepNumberContainer}>
+                        <div className={classes.stepNumber}>5</div>
+                    </div>
+                    <div className={classes.subStepContent}>
+                        <Typography variant={"body2"}>
+                            <Trans
+                                ns={"dashboard"}
+                                i18nKey={"node.aria2PathDes"}
+                                components={[<strong key={0} />]}
+                            />
+                        </Typography>
+                        <div className={classes.form}>
+                            <Input
+                                value={
+                                    props.node.Aria2OptionsSerialized.temp_path
+                                }
+                                onChange={props.handleOptionChange("temp_path")}
+                            />
+                        </div>
+                    </div>
+                </div>
+
+                <div className={classes.subStepContainer}>
+                    <div className={classes.stepNumberContainer}>
+                        <div className={classes.stepNumber}>5</div>
+                    </div>
+                    <div className={classes.subStepContent}>
+                        <Typography variant={"body2"}>
+                            {t("aria2SettingDes")}
+                        </Typography>
+                        <div className={classes.form}>
+                            <FormControl fullWidth>
+                                <InputLabel htmlFor="component-helper">
+                                    {t("refreshInterval")}
+                                </InputLabel>
+                                <Input
+                                    type={"number"}
+                                    inputProps={{
+                                        step: 1,
+                                        min: 1,
+                                    }}
+                                    required
+                                    value={
+                                        props.node.Aria2OptionsSerialized
+                                            .interval
+                                    }
+                                    onChange={props.handleOptionChange(
+                                        "interval"
+                                    )}
+                                />
+                                <FormHelperText id="component-helper-text">
+                                    {t("refreshIntervalDes")}
+                                </FormHelperText>
+                            </FormControl>
+                        </div>
+                        <div className={classes.form}>
+                            <FormControl fullWidth>
+                                <InputLabel htmlFor="component-helper">
+                                    {t("rpcTimeout")}
+                                </InputLabel>
+                                <Input
+                                    type={"number"}
+                                    inputProps={{
+                                        step: 1,
+                                        min: 1,
+                                    }}
+                                    required
+                                    value={
+                                        props.node.Aria2OptionsSerialized
+                                            .timeout
+                                    }
+                                    onChange={props.handleOptionChange(
+                                        "timeout"
+                                    )}
+                                />
+                                <FormHelperText id="component-helper-text">
+                                    {t("rpcTimeoutDes")}
+                                </FormHelperText>
+                            </FormControl>
+                        </div>
+                        <div className={classes.form}>
+                            <FormControl fullWidth>
+                                <InputLabel htmlFor="component-helper">
+                                    {t("globalOptions")}
+                                </InputLabel>
+                                <Input
+                                    multiline
+                                    required
+                                    value={
+                                        props.node.Aria2OptionsSerialized
+                                            .options
+                                    }
+                                    onChange={props.handleOptionChange(
+                                        "options"
+                                    )}
+                                />
+                                <FormHelperText id="component-helper-text">
+                                    {t("globalOptionsDes")}
+                                </FormHelperText>
+                            </FormControl>
+                        </div>
+                    </div>
+                </div>
+
+                <div className={classes.subStepContainer}>
+                    <div className={classes.stepNumberContainer}>
+                        <div className={classes.stepNumber}>6</div>
+                    </div>
+                    <div className={classes.subStepContent}>
+                        <Typography variant={"body2"}>
+                            {t("testAria2Des", { mode })}
+                            {props.node.Type === 0 &&
+                                t("testAria2DesSlaveAddition")}
+                        </Typography>
+                        <div className={classes.form}>
+                            <Button
+                                disabled={loading}
+                                variant={"outlined"}
+                                onClick={() => testAria2()}
+                                color={"primary"}
+                            >
+                                {t("testAria2")}
+                            </Button>
+                        </div>
+                    </div>
+                </div>
+            </Collapse>
+
+            <div className={classes.stepFooter}>
+                {props.activeStep !== 0 && (
+                    <Button
+                        color={"default"}
+                        className={classes.button}
+                        onClick={props.onBack}
+                    >
+                        {tDashboard("policy.back")}
+                    </Button>
+                )}
+                <Button
+                    disabled={loading || props.loading}
+                    type={"submit"}
+                    variant={"contained"}
+                    color={"primary"}
+                    onClick={props.onSubmit}
+                >
+                    {tDashboard("policy.next")}
+                </Button>
+            </div>
+        </form>
+    );
+}
diff --git a/src/component/Admin/Node/Guide/Communication.js b/src/component/Admin/Node/Guide/Communication.js
new file mode 100644
index 0000000..6a99e49
--- /dev/null
+++ b/src/component/Admin/Node/Guide/Communication.js
@@ -0,0 +1,305 @@
+import { lighten, makeStyles } from "@material-ui/core/styles";
+import React, { useCallback, useState } from "react";
+import Typography from "@material-ui/core/Typography";
+import { useDispatch } from "react-redux";
+import FormControl from "@material-ui/core/FormControl";
+import InputLabel from "@material-ui/core/InputLabel";
+import Input from "@material-ui/core/Input";
+import Button from "@material-ui/core/Button";
+import API from "../../../../middleware/Api";
+import Alert from "@material-ui/lab/Alert";
+import Box from "@material-ui/core/Box";
+import { toggleSnackbar } from "../../../../redux/explorer";
+import { Trans, useTranslation } from "react-i18next";
+
+const useStyles = makeStyles((theme) => ({
+    stepContent: {
+        padding: "16px 32px 16px 32px",
+    },
+    form: {
+        maxWidth: 400,
+        marginTop: 20,
+    },
+    formContainer: {
+        [theme.breakpoints.up("md")]: {
+            padding: "0px 24px 0 24px",
+        },
+    },
+    subStepContainer: {
+        display: "flex",
+        marginBottom: 20,
+        padding: 10,
+        transition: theme.transitions.create("background-color", {
+            easing: theme.transitions.easing.sharp,
+            duration: theme.transitions.duration.leavingScreen,
+        }),
+        "&:focus-within": {
+            backgroundColor: theme.palette.background.default,
+        },
+    },
+    stepNumber: {
+        width: 20,
+        height: 20,
+        backgroundColor: lighten(theme.palette.secondary.light, 0.2),
+        color: theme.palette.secondary.contrastText,
+        textAlign: "center",
+        borderRadius: " 50%",
+    },
+    stepNumberContainer: {
+        marginRight: 10,
+    },
+    stepFooter: {
+        marginTop: 32,
+    },
+    button: {
+        marginRight: theme.spacing(1),
+    },
+    viewButtonLabel: { textTransform: "none" },
+    "@global": {
+        code: {
+            color: "rgba(0, 0, 0, 0.87)",
+            display: "inline-block",
+            padding: "2px 6px",
+            fontFamily:
+                ' Consolas, "Liberation Mono", Menlo, Courier, monospace',
+            borderRadius: "2px",
+            backgroundColor: "rgba(255,229,100,0.1)",
+        },
+        pre: {
+            margin: "24px 0",
+            padding: "12px 18px",
+            overflow: "auto",
+            direction: "ltr",
+            borderRadius: "4px",
+            backgroundColor: "#272c34",
+            color: "#fff",
+            fontFamily:
+                ' Consolas, "Liberation Mono", Menlo, Courier, monospace',
+        },
+    },
+}));
+
+export default function Communication(props) {
+    const { t } = useTranslation("dashboard", { keyPrefix: "node" });
+    const { t: tDashboard } = useTranslation("dashboard");
+    const classes = useStyles();
+    const dispatch = useDispatch();
+    const [loading, setLoading] = useState(false);
+    const ToggleSnackbar = useCallback(
+        (vertical, horizontal, msg, color) =>
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color)),
+        [dispatch]
+    );
+
+    const testSlave = () => {
+        setLoading(true);
+
+        // 测试路径是否可用
+        API.post("/admin/policy/test/slave", {
+            server: props.node.Server,
+            secret: props.node.SlaveKey,
+        })
+            .then(() => {
+                ToggleSnackbar(
+                    "top",
+                    "right",
+                    tDashboard("policy.communicationOK"),
+                    "success"
+                );
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            })
+            .then(() => {
+                setLoading(false);
+            });
+    };
+
+    return (
+        <form
+            className={classes.stepContent}
+            onSubmit={(e) => {
+                e.preventDefault();
+                props.onSubmit(e);
+            }}
+        >
+            <Alert severity="info" style={{ marginBottom: 10 }}>
+                <Trans
+                    ns={"dashboard"}
+                    i18nKey={"node.slaveNodeDes"}
+                    components={[<Box key={0} fontWeight="fontWeightBold" />]}
+                />
+            </Alert>
+
+            <div className={classes.subStepContainer}>
+                <div className={classes.stepNumberContainer}>
+                    <div className={classes.stepNumber}>1</div>
+                </div>
+                <div className={classes.subStepContent}>
+                    <Typography variant={"body2"}>
+                        {tDashboard("policy.remoteCopyBinaryDescription")}
+                    </Typography>
+                </div>
+            </div>
+
+            <div className={classes.subStepContainer}>
+                <div className={classes.stepNumberContainer}>
+                    <div className={classes.stepNumber}>2</div>
+                </div>
+                <div className={classes.subStepContent}>
+                    <Typography variant={"body2"}>
+                        {tDashboard("policy.remoteSecretDescription")}
+                    </Typography>
+                    <div className={classes.form}>
+                        <FormControl fullWidth>
+                            <InputLabel htmlFor="component-helper">
+                                {tDashboard("policy.remoteSecret")}
+                            </InputLabel>
+                            <Input
+                                required
+                                inputProps={{
+                                    minlength: 64,
+                                }}
+                                value={props.node.SlaveKey}
+                                onChange={props.handleTextChange("SlaveKey")}
+                            />
+                        </FormControl>
+                    </div>
+                </div>
+            </div>
+
+            <div className={classes.subStepContainer}>
+                <div className={classes.stepNumberContainer}>
+                    <div className={classes.stepNumber}>3</div>
+                </div>
+                <div className={classes.subStepContent}>
+                    <Typography variant={"body2"}>
+                        {tDashboard("policy.modifyRemoteConfig")}
+                        <br />
+                        <Trans
+                            ns={"dashboard"}
+                            i18nKey={"policy.addRemoteConfigDes"}
+                            components={[<code key={0} />]}
+                        />
+                    </Typography>
+                    <pre>
+                        [System]
+                        <br />
+                        Mode = slave
+                        <br />
+                        Listen = :5212
+                        <br />
+                        <br />
+                        [Slave]
+                        <br />
+                        Secret = {props.node.SlaveKey}
+                        <br />
+                        <br />
+                        <Trans
+                            ns={"dashboard"}
+                            i18nKey={"node.overwriteDes"}
+                            components={[<br key={0} />, <br key={1} />]}
+                        />
+                        <br />
+                        [OptionOverwrite]
+                        <br />; {t("workerNumDes")}
+                        <br />
+                        max_worker_num = 50
+                        <br />; {t("parallelTransferDes")}
+                        <br />
+                        max_parallel_transfer = 10
+                        <br />; {t("chunkRetriesDes")}
+                        <br />
+                        chunk_retries = 10
+                    </pre>
+                    <Typography variant={"body2"}>
+                        {tDashboard("policy.remoteConfigDifference")}
+                        <ul>
+                            <li>
+                                <Trans
+                                    ns={"dashboard"}
+                                    i18nKey={"policy.remoteConfigDifference1"}
+                                    components={[
+                                        <code key={0} />,
+                                        <code key={1} />,
+                                        <code key={2} />,
+                                    ]}
+                                />
+                            </li>
+                            <li>
+                                <Trans
+                                    ns={"dashboard"}
+                                    i18nKey={"policy.remoteConfigDifference2"}
+                                    components={[
+                                        <code key={0} />,
+                                        <code key={1} />,
+                                    ]}
+                                />
+                            </li>
+                        </ul>
+                        {t("multipleMasterDes")}
+                    </Typography>
+                </div>
+            </div>
+
+            <div className={classes.subStepContainer}>
+                <div className={classes.stepNumberContainer}>
+                    <div className={classes.stepNumber}>4</div>
+                </div>
+                <div className={classes.subStepContent}>
+                    <Typography variant={"body2"}>
+                        {tDashboard("policy.inputRemoteAddress")}
+                        <br />
+                        {tDashboard("policy.inputRemoteAddressDes")}
+                    </Typography>
+                    <div className={classes.form}>
+                        <FormControl fullWidth>
+                            <InputLabel htmlFor="component-helper">
+                                {tDashboard("policy.remoteAddress")}
+                            </InputLabel>
+                            <Input
+                                fullWidth
+                                required
+                                type={"url"}
+                                value={props.node.Server}
+                                onChange={props.handleTextChange("Server")}
+                            />
+                        </FormControl>
+                    </div>
+                </div>
+            </div>
+
+            <div className={classes.subStepContainer}>
+                <div className={classes.stepNumberContainer}>
+                    <div className={classes.stepNumber}>5</div>
+                </div>
+                <div className={classes.subStepContent}>
+                    <Typography variant={"body2"}>
+                        {tDashboard("policy.testCommunicationDes")}
+                    </Typography>
+                    <div className={classes.form}>
+                        <Button
+                            disabled={loading}
+                            variant={"outlined"}
+                            onClick={() => testSlave()}
+                            color={"primary"}
+                        >
+                            {tDashboard("policy.testCommunication")}
+                        </Button>
+                    </div>
+                </div>
+            </div>
+
+            <div className={classes.stepFooter}>
+                <Button
+                    disabled={loading || props.loading}
+                    type={"submit"}
+                    variant={"contained"}
+                    color={"primary"}
+                >
+                    {tDashboard("policy.next")}
+                </Button>
+            </div>
+        </form>
+    );
+}
diff --git a/src/component/Admin/Node/Guide/Completed.js b/src/component/Admin/Node/Guide/Completed.js
new file mode 100644
index 0000000..1aa835b
--- /dev/null
+++ b/src/component/Admin/Node/Guide/Completed.js
@@ -0,0 +1,98 @@
+import { lighten, makeStyles } from "@material-ui/core/styles";
+import React from "react";
+import Typography from "@material-ui/core/Typography";
+import Button from "@material-ui/core/Button";
+import { useHistory } from "react-router";
+import { useTranslation } from "react-i18next";
+
+const useStyles = makeStyles((theme) => ({
+    stepContent: {
+        padding: "16px 32px 16px 32px",
+    },
+    form: {
+        maxWidth: 400,
+        marginTop: 20,
+    },
+    formContainer: {
+        [theme.breakpoints.up("md")]: {
+            padding: "0px 24px 0 24px",
+        },
+    },
+    subStepContainer: {
+        display: "flex",
+        marginBottom: 20,
+        padding: 10,
+        transition: theme.transitions.create("background-color", {
+            easing: theme.transitions.easing.sharp,
+            duration: theme.transitions.duration.leavingScreen,
+        }),
+        "&:focus-within": {
+            backgroundColor: theme.palette.background.default,
+        },
+    },
+    stepNumber: {
+        width: 20,
+        height: 20,
+        backgroundColor: lighten(theme.palette.secondary.light, 0.2),
+        color: theme.palette.secondary.contrastText,
+        textAlign: "center",
+        borderRadius: " 50%",
+    },
+    stepNumberContainer: {
+        marginRight: 10,
+    },
+    stepFooter: {
+        marginTop: 32,
+    },
+    button: {
+        marginRight: theme.spacing(1),
+    },
+    viewButtonLabel: { textTransform: "none" },
+    "@global": {
+        code: {
+            color: "rgba(0, 0, 0, 0.87)",
+            display: "inline-block",
+            padding: "2px 6px",
+            fontFamily:
+                ' Consolas, "Liberation Mono", Menlo, Courier, monospace',
+            borderRadius: "2px",
+            backgroundColor: "rgba(255,229,100,0.1)",
+        },
+        pre: {
+            margin: "24px 0",
+            padding: "12px 18px",
+            overflow: "auto",
+            direction: "ltr",
+            borderRadius: "4px",
+            backgroundColor: "#272c34",
+            color: "#fff",
+            fontFamily:
+                ' Consolas, "Liberation Mono", Menlo, Courier, monospace',
+        },
+    },
+}));
+
+export default function Completed(props) {
+    const { t } = useTranslation("dashboard", { keyPrefix: "node" });
+    const classes = useStyles();
+    const history = useHistory();
+
+    return (
+        <form className={classes.stepContent}>
+            <Typography>{t("nodeSaved")}</Typography>
+            <Typography variant={"body2"} color={"textSecondary"}>
+                {t("nodeSavedFutureAction")}
+            </Typography>
+
+            <div className={classes.stepFooter}>
+                <Button
+                    color={"primary"}
+                    className={classes.button}
+                    onClick={() => history.push("/admin/node")}
+                >
+                    {t("backToNodeList")}
+                </Button>
+            </div>
+        </form>
+    );
+}
diff --git a/src/component/Admin/Node/Guide/Metainfo.js b/src/component/Admin/Node/Guide/Metainfo.js
new file mode 100644
index 0000000..a2b6ede
--- /dev/null
+++ b/src/component/Admin/Node/Guide/Metainfo.js
@@ -0,0 +1,157 @@
+import { lighten, makeStyles } from "@material-ui/core/styles";
+import React, { useCallback, useState } from "react";
+import Typography from "@material-ui/core/Typography";
+import { useDispatch } from "react-redux";
+import FormControl from "@material-ui/core/FormControl";
+import InputLabel from "@material-ui/core/InputLabel";
+import Input from "@material-ui/core/Input";
+import Button from "@material-ui/core/Button";
+import { toggleSnackbar } from "../../../../redux/explorer";
+import { useTranslation } from "react-i18next";
+
+const useStyles = makeStyles((theme) => ({
+    stepContent: {
+        padding: "16px 32px 16px 32px",
+    },
+    form: {
+        maxWidth: 400,
+        marginTop: 20,
+    },
+    formContainer: {
+        [theme.breakpoints.up("md")]: {
+            padding: "0px 24px 0 24px",
+        },
+    },
+    subStepContainer: {
+        display: "flex",
+        marginBottom: 20,
+        padding: 10,
+        transition: theme.transitions.create("background-color", {
+            easing: theme.transitions.easing.sharp,
+            duration: theme.transitions.duration.leavingScreen,
+        }),
+        "&:focus-within": {
+            backgroundColor: theme.palette.background.default,
+        },
+    },
+    stepNumber: {
+        width: 20,
+        height: 20,
+        backgroundColor: lighten(theme.palette.secondary.light, 0.2),
+        color: theme.palette.secondary.contrastText,
+        textAlign: "center",
+        borderRadius: " 50%",
+    },
+    stepNumberContainer: {
+        marginRight: 10,
+    },
+    stepFooter: {
+        marginTop: 32,
+    },
+    button: {
+        marginRight: theme.spacing(1),
+    },
+    viewButtonLabel: { textTransform: "none" },
+    "@global": {
+        code: {
+            color: "rgba(0, 0, 0, 0.87)",
+            display: "inline-block",
+            padding: "2px 6px",
+            fontFamily:
+                ' Consolas, "Liberation Mono", Menlo, Courier, monospace',
+            borderRadius: "2px",
+            backgroundColor: "rgba(255,229,100,0.1)",
+        },
+        pre: {
+            margin: "24px 0",
+            padding: "12px 18px",
+            overflow: "auto",
+            direction: "ltr",
+            borderRadius: "4px",
+            backgroundColor: "#272c34",
+            color: "#fff",
+            fontFamily:
+                ' Consolas, "Liberation Mono", Menlo, Courier, monospace',
+        },
+    },
+}));
+
+export default function Metainfo(props) {
+    const { t } = useTranslation("dashboard", { keyPrefix: "node" });
+    const { t: tDashboard } = useTranslation("dashboard");
+    const classes = useStyles();
+    const dispatch = useDispatch();
+    const [loading, setLoading] = useState(false);
+    const ToggleSnackbar = useCallback(
+        (vertical, horizontal, msg, color) =>
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color)),
+        [dispatch]
+    );
+
+    return (
+        <form
+            className={classes.stepContent}
+            onSubmit={(e) => {
+                e.preventDefault();
+                props.onSubmit(e);
+            }}
+        >
+            <div className={classes.subStepContainer}>
+                <div className={classes.stepNumberContainer}>
+                    <div className={classes.stepNumber}>1</div>
+                </div>
+                <div className={classes.subStepContent}>
+                    <Typography variant={"body2"}>{t("nameNode")}</Typography>
+                    <div className={classes.form}>
+                        <FormControl fullWidth>
+                            <Input
+                                required
+                                value={props.node.Name}
+                                onChange={props.handleTextChange("Name")}
+                            />
+                        </FormControl>
+                    </div>
+                </div>
+            </div>
+
+            <div className={classes.subStepContainer}>
+                <div className={classes.stepNumberContainer}>
+                    <div className={classes.stepNumber}>2</div>
+                </div>
+                <div className={classes.subStepContent}>
+                    <Typography variant={"body2"}>
+                        {t("loadBalancerRankDes")}
+                    </Typography>
+                    <div className={classes.form}>
+                        <FormControl fullWidth>
+                            <InputLabel htmlFor="component-helper">
+                                {t("loadBalancerRank")}
+                            </InputLabel>
+                            <Input
+                                type={"number"}
+                                required
+                                inputProps={{
+                                    step: 1,
+                                    min: 0,
+                                }}
+                                value={props.node.Rank}
+                                onChange={props.handleTextChange("Rank")}
+                            />
+                        </FormControl>
+                    </div>
+                </div>
+            </div>
+
+            <div className={classes.stepFooter}>
+                <Button
+                    disabled={loading || props.loading}
+                    type={"submit"}
+                    variant={"contained"}
+                    color={"primary"}
+                >
+                    {tDashboard("policy.next")}
+                </Button>
+            </div>
+        </form>
+    );
+}
diff --git a/src/component/Admin/Node/Guide/NodeGuide.js b/src/component/Admin/Node/Guide/NodeGuide.js
new file mode 100644
index 0000000..1d3e62f
--- /dev/null
+++ b/src/component/Admin/Node/Guide/NodeGuide.js
@@ -0,0 +1,191 @@
+import React, { useCallback, useMemo, useState } from "react";
+import Stepper from "@material-ui/core/Stepper";
+import StepLabel from "@material-ui/core/StepLabel";
+import Step from "@material-ui/core/Step";
+import Typography from "@material-ui/core/Typography";
+import { useDispatch } from "react-redux";
+import { randomStr } from "../../../../utils";
+import Communication from "./Communication";
+import Aria2RPC from "./Aria2RPC";
+import API from "../../../../middleware/Api";
+import Metainfo from "./Metainfo";
+import Completed from "./Completed";
+import { toggleSnackbar } from "../../../../redux/explorer";
+import { useTranslation } from "react-i18next";
+
+const steps = [
+    {
+        slaveOnly: true,
+        title: "communication",
+        optional: false,
+        component: function show(p) {
+            return <Communication {...p} />;
+        },
+    },
+    {
+        slaveOnly: false,
+        title: "remoteDownload",
+        optional: false,
+        component: function show(p) {
+            return <Aria2RPC {...p} />;
+        },
+    },
+    {
+        slaveOnly: false,
+        title: "otherSettings",
+        optional: false,
+        component: function show(p) {
+            return <Metainfo {...p} />;
+        },
+    },
+    {
+        slaveOnly: false,
+        title: "finish",
+        optional: false,
+        component: function show(p) {
+            return <Completed {...p} />;
+        },
+    },
+];
+
+export default function NodeGuide(props) {
+    const { t } = useTranslation("dashboard", { keyPrefix: "node" });
+    const { t: tDashboard } = useTranslation("dashboard");
+    const [activeStep, setActiveStep] = useState(0);
+    const [skipped, setSkipped] = React.useState(new Set());
+    const [loading, setLoading] = useState(false);
+    const [node, setNode] = useState(
+        props.node
+            ? props.node
+            : {
+                  Status: 1,
+                  Type: 0,
+                  Aria2Enabled: "false",
+                  Server: "https://example.com:5212",
+                  SlaveKey: randomStr(64),
+                  MasterKey: randomStr(64),
+                  Rank: "0",
+                  Aria2OptionsSerialized: {
+                      token: randomStr(32),
+                      options: "{}",
+                      interval: "10",
+                      timeout: "10",
+                  },
+              }
+    );
+
+    const usedSteps = useMemo(() => {
+        return steps.filter((step) => !(step.slaveOnly && node.Type === 1));
+    }, [node.Type]);
+
+    const isStepSkipped = (step) => {
+        return skipped.has(step);
+    };
+
+    const handleTextChange = (name) => (event) => {
+        setNode({
+            ...node,
+            [name]: event.target.value,
+        });
+    };
+
+    const handleOptionChange = (name) => (event) => {
+        setNode({
+            ...node,
+            Aria2OptionsSerialized: {
+                ...node.Aria2OptionsSerialized,
+                [name]: event.target.value,
+            },
+        });
+    };
+
+    const dispatch = useDispatch();
+    const ToggleSnackbar = useCallback(
+        (vertical, horizontal, msg, color) =>
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color)),
+        [dispatch]
+    );
+
+    const nextStep = () => {
+        if (props.node || activeStep + 1 === steps.length - 1) {
+            setLoading(true);
+
+            const nodeCopy = { ...node };
+            nodeCopy.Aria2OptionsSerialized = {
+                ...node.Aria2OptionsSerialized,
+            };
+            nodeCopy.Rank = parseInt(nodeCopy.Rank);
+            nodeCopy.Aria2OptionsSerialized.interval = parseInt(
+                nodeCopy.Aria2OptionsSerialized.interval
+            );
+            nodeCopy.Aria2OptionsSerialized.timeout = parseInt(
+                nodeCopy.Aria2OptionsSerialized.timeout
+            );
+            nodeCopy.Aria2Enabled = nodeCopy.Aria2Enabled === "true";
+            API.post("/admin/node", {
+                node: nodeCopy,
+            })
+                .then(() => {
+                    ToggleSnackbar(
+                        "top",
+                        "right",
+                        props.node ? t("nodeSavedNow") : t("nodeAdded"),
+                        "success"
+                    );
+                    setActiveStep(activeStep + 1);
+                    setLoading(false);
+                })
+                .catch((error) => {
+                    ToggleSnackbar("top", "right", error.message, "error");
+                })
+                .then(() => {
+                    setLoading(false);
+                });
+        } else {
+            setActiveStep(activeStep + 1);
+        }
+    };
+
+    return (
+        <div>
+            <Typography variant={"h6"}>
+                {props.node ? t("editNode") : t("addNode")}
+            </Typography>
+            <Stepper activeStep={activeStep}>
+                {usedSteps.map((label, index) => {
+                    const stepProps = {};
+                    const labelProps = {};
+                    if (label.optional) {
+                        labelProps.optional = (
+                            <Typography variant="caption">
+                                {tDashboard("policy.optional")}
+                            </Typography>
+                        );
+                    }
+                    if (isStepSkipped(index)) {
+                        stepProps.completed = false;
+                    }
+                    if (!(label.slaveOnly && node.Type === 1)) {
+                        return (
+                            <Step key={label.title} {...stepProps}>
+                                <StepLabel {...labelProps}>
+                                    {t(label.title)}
+                                </StepLabel>
+                            </Step>
+                        );
+                    }
+                })}
+            </Stepper>
+
+            {usedSteps[activeStep].component({
+                onSubmit: (e) => nextStep(),
+                node: node,
+                loading: loading,
+                onBack: (e) => setActiveStep(activeStep - 1),
+                handleTextChange: handleTextChange,
+                activeStep: activeStep,
+                handleOptionChange: handleOptionChange,
+            })}
+        </div>
+    );
+}
diff --git a/src/component/Admin/Node/Node.js b/src/component/Admin/Node/Node.js
new file mode 100644
index 0000000..87f076d
--- /dev/null
+++ b/src/component/Admin/Node/Node.js
@@ -0,0 +1,333 @@
+import React, { useCallback, useEffect, useState } from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import API from "../../../middleware/Api";
+import { useDispatch } from "react-redux";
+import Paper from "@material-ui/core/Paper";
+import Button from "@material-ui/core/Button";
+import TableContainer from "@material-ui/core/TableContainer";
+import Table from "@material-ui/core/Table";
+import TableHead from "@material-ui/core/TableHead";
+import TableRow from "@material-ui/core/TableRow";
+import TableCell from "@material-ui/core/TableCell";
+import TableBody from "@material-ui/core/TableBody";
+import TablePagination from "@material-ui/core/TablePagination";
+import { useHistory } from "react-router";
+import IconButton from "@material-ui/core/IconButton";
+import {
+    Cancel,
+    CheckCircle,
+    Delete,
+    Edit,
+    Pause,
+    PlayArrow,
+} from "@material-ui/icons";
+import Tooltip from "@material-ui/core/Tooltip";
+import Chip from "@material-ui/core/Chip";
+import classNames from "classnames";
+import Box from "@material-ui/core/Box";
+import { toggleSnackbar } from "../../../redux/explorer";
+import { useTranslation } from "react-i18next";
+
+const useStyles = makeStyles((theme) => ({
+    root: {
+        [theme.breakpoints.up("md")]: {
+            marginLeft: 100,
+        },
+        marginBottom: 40,
+    },
+    content: {
+        padding: theme.spacing(2),
+    },
+    container: {
+        overflowX: "auto",
+    },
+    tableContainer: {
+        marginTop: 16,
+    },
+    header: {
+        display: "flex",
+        justifyContent: "space-between",
+    },
+    disabledBadge: {
+        marginLeft: theme.spacing(1),
+        height: 18,
+    },
+    disabledCell: {
+        color: theme.palette.text.disabled,
+    },
+    verticalAlign: {
+        verticalAlign: "middle",
+        display: "inline-block",
+    },
+}));
+
+const columns = [
+    { id: "#", minWidth: 50 },
+    { id: "name", minWidth: 170 },
+    {
+        id: "status",
+        minWidth: 50,
+    },
+    {
+        id: "features",
+        minWidth: 170,
+    },
+    {
+        id: "action",
+        minWidth: 170,
+    },
+];
+
+const features = [
+    {
+        field: "Aria2Enabled",
+        name: "remoteDownload",
+    },
+];
+
+export default function Node() {
+    const { t } = useTranslation("dashboard", { keyPrefix: "node" });
+    const classes = useStyles();
+    const [nodes, setNodes] = useState([]);
+    const [isActive, setIsActive] = useState({});
+    const [loading, setLoading] = useState(false);
+    const [page, setPage] = useState(1);
+    const [pageSize, setPageSize] = useState(10);
+    const [total, setTotal] = useState(0);
+
+    const history = useHistory();
+
+    const dispatch = useDispatch();
+    const ToggleSnackbar = useCallback(
+        (vertical, horizontal, msg, color) =>
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color)),
+        [dispatch]
+    );
+
+    const loadList = () => {
+        API.post("/admin/node/list", {
+            page: page,
+            page_size: pageSize,
+            order_by: "id desc",
+        })
+            .then((response) => {
+                setNodes(response.data.items);
+                setTotal(response.data.total);
+                setIsActive(response.data.active);
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            });
+    };
+
+    const toggleNode = (id, desired) => {
+        setLoading(true);
+        API.patch("/admin/node/enable/" + id + "/" + desired)
+            .then((response) => {
+                loadList();
+                ToggleSnackbar(
+                    "top",
+                    "right",
+                    desired === 1 ? t("nodeDisabled") : t("nodeEnabled"),
+                    "success"
+                );
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            })
+            .then(() => {
+                setLoading(false);
+            });
+    };
+
+    const deleteNode = (id) => {
+        setLoading(true);
+        API.delete("/admin/node/" + id)
+            .then(() => {
+                loadList();
+                ToggleSnackbar("top", "right", t("nodeDeleted"), "success");
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            })
+            .then(() => {
+                setLoading(false);
+            });
+    };
+
+    useEffect(() => {
+        loadList();
+    }, [page, pageSize]);
+
+    const getStatusBadge = (status) => {
+        if (status === 1) {
+            return (
+                <Chip
+                    className={classes.disabledBadge}
+                    size="small"
+                    label={t("disabled")}
+                />
+            );
+        }
+    };
+
+    const getFeatureBadge = (node) =>
+        features.map((feature) => {
+            if (node[feature.field]) {
+                return (
+                    <Chip
+                        className={classes.disabledBadge}
+                        size="small"
+                        color="primary"
+                        label={t(feature.name)}
+                    />
+                );
+            }
+        });
+
+    const getRealStatusBadge = (status) =>
+        status ? (
+            <Box color="success.main" fontSize="small">
+                <CheckCircle
+                    className={classes.verticalAlign}
+                    fontSize="small"
+                />{" "}
+                <span className={classes.verticalAlign}>{t("online")}</span>
+            </Box>
+        ) : (
+            <Box color="error.main" fontSize="small">
+                <Cancel className={classes.verticalAlign} fontSize="small" />{" "}
+                <span className={classes.verticalAlign}>{t("offline")}</span>
+            </Box>
+        );
+
+    return (
+        <div>
+            <div className={classes.header}>
+                <Button
+                    color={"primary"}
+                    onClick={() => history.push("/admin/node/add")}
+                    variant={"contained"}
+                >
+                    {t("addNewNode")}
+                </Button>
+                <div className={classes.headerRight}>
+                    <Button
+                        color={"primary"}
+                        onClick={() => loadList()}
+                        variant={"outlined"}
+                    >
+                        {t("refresh")}
+                    </Button>
+                </div>
+            </div>
+
+            <Paper square className={classes.tableContainer}>
+                <TableContainer className={classes.container}>
+                    <Table aria-label="sticky table" size={"small"}>
+                        <TableHead>
+                            <TableRow style={{ height: 52 }}>
+                                {columns.map((column) => (
+                                    <TableCell
+                                        key={column.id}
+                                        align={column.align}
+                                        style={{
+                                            minWidth: column.minWidthclassNames,
+                                        }}
+                                    >
+                                        {t(column.id)}
+                                    </TableCell>
+                                ))}
+                            </TableRow>
+                        </TableHead>
+                        <TableBody>
+                            {nodes.map((row) => (
+                                <TableRow hover key={row.ID}>
+                                    <TableCell>{row.ID}</TableCell>
+                                    <TableCell
+                                        className={classNames({
+                                            [classes.disabledCell]:
+                                                row.Status === 1,
+                                        })}
+                                    >
+                                        {row.Name}
+                                        {getStatusBadge(row.Status)}
+                                    </TableCell>
+                                    <TableCell>
+                                        {getRealStatusBadge(isActive[row.ID])}
+                                    </TableCell>
+                                    <TableCell>
+                                        {getFeatureBadge(row)}
+                                    </TableCell>
+
+                                    <TableCell align={"right"}>
+                                        <Tooltip
+                                            title={
+                                                row.Status === 1
+                                                    ? t("enableNode")
+                                                    : t("disableNode")
+                                            }
+                                        >
+                                            <IconButton
+                                                disabled={loading}
+                                                onClick={() =>
+                                                    toggleNode(
+                                                        row.ID,
+                                                        1 - row.Status
+                                                    )
+                                                }
+                                                size={"small"}
+                                            >
+                                                {row.Status === 1 && (
+                                                    <PlayArrow />
+                                                )}
+                                                {row.Status !== 1 && <Pause />}
+                                            </IconButton>
+                                        </Tooltip>
+                                        <Tooltip title={t("edit")}>
+                                            <IconButton
+                                                disabled={loading}
+                                                onClick={() =>
+                                                    history.push(
+                                                        "/admin/node/edit/" +
+                                                            row.ID
+                                                    )
+                                                }
+                                                size={"small"}
+                                            >
+                                                <Edit />
+                                            </IconButton>
+                                        </Tooltip>
+                                        <Tooltip title={t("delete")}>
+                                            <IconButton
+                                                onClick={() =>
+                                                    deleteNode(row.ID)
+                                                }
+                                                disabled={loading}
+                                                size={"small"}
+                                            >
+                                                <Delete />
+                                            </IconButton>
+                                        </Tooltip>
+                                    </TableCell>
+                                </TableRow>
+                            ))}
+                        </TableBody>
+                    </Table>
+                </TableContainer>
+                <TablePagination
+                    rowsPerPageOptions={[10, 25, 100]}
+                    component="div"
+                    count={total}
+                    rowsPerPage={pageSize}
+                    page={page - 1}
+                    onChangePage={(e, p) => setPage(p + 1)}
+                    onChangeRowsPerPage={(e) => {
+                        setPageSize(e.target.value);
+                        setPage(1);
+                    }}
+                />
+            </Paper>
+        </div>
+    );
+}
diff --git a/src/component/Admin/Order/Order.js b/src/component/Admin/Order/Order.js
new file mode 100644
index 0000000..f9a9fcb
--- /dev/null
+++ b/src/component/Admin/Order/Order.js
@@ -0,0 +1,432 @@
+import React, { useCallback, useEffect, useState } from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import API from "../../../middleware/Api";
+import { useDispatch } from "react-redux";
+import Paper from "@material-ui/core/Paper";
+import Button from "@material-ui/core/Button";
+import TableContainer from "@material-ui/core/TableContainer";
+import Table from "@material-ui/core/Table";
+import TableHead from "@material-ui/core/TableHead";
+import TableRow from "@material-ui/core/TableRow";
+import TableCell from "@material-ui/core/TableCell";
+import TableBody from "@material-ui/core/TableBody";
+import TablePagination from "@material-ui/core/TablePagination";
+import IconButton from "@material-ui/core/IconButton";
+import { Delete } from "@material-ui/icons";
+import Tooltip from "@material-ui/core/Tooltip";
+import Checkbox from "@material-ui/core/Checkbox";
+import Toolbar from "@material-ui/core/Toolbar";
+import Typography from "@material-ui/core/Typography";
+import { lighten } from "@material-ui/core";
+import Link from "@material-ui/core/Link";
+import TableSortLabel from "@material-ui/core/TableSortLabel";
+import ShareFilter from "../Dialogs/ShareFilter";
+import { formatLocalTime } from "../../../utils/datetime";
+import { toggleSnackbar } from "../../../redux/explorer";
+import { useTranslation } from "react-i18next";
+
+const useStyles = makeStyles((theme) => ({
+    root: {
+        [theme.breakpoints.up("md")]: {
+            marginLeft: 100,
+        },
+        marginBottom: 40,
+    },
+    content: {
+        padding: theme.spacing(2),
+    },
+    container: {
+        overflowX: "auto",
+    },
+    tableContainer: {
+        marginTop: 16,
+    },
+    header: {
+        display: "flex",
+        justifyContent: "space-between",
+    },
+    headerRight: {},
+    highlight:
+        theme.palette.type === "light"
+            ? {
+                  color: theme.palette.secondary.main,
+                  backgroundColor: lighten(theme.palette.secondary.light, 0.85),
+              }
+            : {
+                  color: theme.palette.text.primary,
+                  backgroundColor: theme.palette.secondary.dark,
+              },
+    visuallyHidden: {
+        border: 0,
+        clip: "rect(0 0 0 0)",
+        height: 1,
+        margin: -1,
+        overflow: "hidden",
+        padding: 0,
+        position: "absolute",
+        top: 20,
+        width: 1,
+    },
+}));
+
+export default function Order() {
+    const { t } = useTranslation("dashboard", { keyPrefix: "vas" });
+    const { t: tDashboard } = useTranslation("dashboard");
+    const classes = useStyles();
+    const [orders, setOrders] = useState([]);
+    const [page, setPage] = useState(1);
+    const [pageSize, setPageSize] = useState(10);
+    const [total, setTotal] = useState(0);
+    const [filter, setFilter] = useState({});
+    const [users, setUsers] = useState({});
+    const [search, setSearch] = useState({});
+    const [orderBy, setOrderBy] = useState(["id", "desc"]);
+    const [filterDialog, setFilterDialog] = useState(false);
+    const [selected, setSelected] = useState([]);
+    const [loading, setLoading] = useState(false);
+
+    const dispatch = useDispatch();
+    const ToggleSnackbar = useCallback(
+        (vertical, horizontal, msg, color) =>
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color)),
+        [dispatch]
+    );
+
+    const loadList = () => {
+        API.post("/admin/order/list", {
+            page: page,
+            page_size: pageSize,
+            order_by: orderBy.join(" "),
+            conditions: filter,
+            searches: search,
+        })
+            .then((response) => {
+                setUsers(response.data.users);
+                setOrders(response.data.items);
+                setTotal(response.data.total);
+                setSelected([]);
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            });
+    };
+
+    useEffect(() => {
+        loadList();
+    }, [page, pageSize, orderBy, filter, search]);
+
+    const deletePolicy = (id) => {
+        setLoading(true);
+        API.post("/admin/order/delete", { id: [id] })
+            .then(() => {
+                loadList();
+                ToggleSnackbar("top", "right", t("orderDeleted"), "success");
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            })
+            .then(() => {
+                setLoading(false);
+            });
+    };
+
+    const deleteBatch = () => {
+        setLoading(true);
+        API.post("/admin/order/delete", { id: selected })
+            .then(() => {
+                loadList();
+                ToggleSnackbar("top", "right", t("orderDeleted"), "success");
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            })
+            .then(() => {
+                setLoading(false);
+            });
+    };
+
+    const handleSelectAllClick = (event) => {
+        if (event.target.checked) {
+            const newSelecteds = orders.map((n) => n.ID);
+            setSelected(newSelecteds);
+            return;
+        }
+        setSelected([]);
+    };
+
+    const handleClick = (event, name) => {
+        const selectedIndex = selected.indexOf(name);
+        let newSelected = [];
+
+        if (selectedIndex === -1) {
+            newSelected = newSelected.concat(selected, name);
+        } else if (selectedIndex === 0) {
+            newSelected = newSelected.concat(selected.slice(1));
+        } else if (selectedIndex === selected.length - 1) {
+            newSelected = newSelected.concat(selected.slice(0, -1));
+        } else if (selectedIndex > 0) {
+            newSelected = newSelected.concat(
+                selected.slice(0, selectedIndex),
+                selected.slice(selectedIndex + 1)
+            );
+        }
+
+        setSelected(newSelected);
+    };
+
+    const isSelected = (id) => selected.indexOf(id) !== -1;
+
+    return (
+        <div>
+            <ShareFilter
+                filter={filter}
+                open={filterDialog}
+                onClose={() => setFilterDialog(false)}
+                setSearch={setSearch}
+                setFilter={setFilter}
+            />
+            <div className={classes.header}>
+                <div className={classes.headerRight}>
+                    <Button
+                        color={"primary"}
+                        onClick={() => loadList()}
+                        variant={"outlined"}
+                    >
+                        {tDashboard("policy.refresh")}
+                    </Button>
+                </div>
+            </div>
+
+            <Paper square className={classes.tableContainer}>
+                {selected.length > 0 && (
+                    <Toolbar className={classes.highlight}>
+                        <Typography
+                            style={{ flex: "1 1 100%" }}
+                            color="inherit"
+                            variant="subtitle1"
+                        >
+                            {tDashboard("user.selectedObjects", {
+                                num: selected.length,
+                            })}
+                        </Typography>
+                        <Tooltip title={tDashboard("policy.delete")}>
+                            <IconButton
+                                onClick={deleteBatch}
+                                disabled={loading}
+                                aria-label="delete"
+                            >
+                                <Delete />
+                            </IconButton>
+                        </Tooltip>
+                    </Toolbar>
+                )}
+                <TableContainer className={classes.container}>
+                    <Table aria-label="sticky table" size={"small"}>
+                        <TableHead>
+                            <TableRow style={{ height: 52 }}>
+                                <TableCell padding="checkbox">
+                                    <Checkbox
+                                        indeterminate={
+                                            selected.length > 0 &&
+                                            selected.length < orders.length
+                                        }
+                                        checked={
+                                            orders.length > 0 &&
+                                            selected.length === orders.length
+                                        }
+                                        onChange={handleSelectAllClick}
+                                        inputProps={{
+                                            "aria-label": "select all desserts",
+                                        }}
+                                    />
+                                </TableCell>
+                                <TableCell style={{ minWidth: 10 }}>
+                                    <TableSortLabel
+                                        active={orderBy[0] === "id"}
+                                        direction={orderBy[1]}
+                                        onClick={() =>
+                                            setOrderBy([
+                                                "id",
+                                                orderBy[1] === "asc"
+                                                    ? "desc"
+                                                    : "asc",
+                                            ])
+                                        }
+                                    >
+                                        #
+                                        {orderBy[0] === "id" ? (
+                                            <span
+                                                className={
+                                                    classes.visuallyHidden
+                                                }
+                                            >
+                                                {orderBy[1] === "desc"
+                                                    ? "sorted descending"
+                                                    : "sorted ascending"}
+                                            </span>
+                                        ) : null}
+                                    </TableSortLabel>
+                                </TableCell>
+                                <TableCell style={{ minWidth: 130 }}>
+                                    {t("orderName")}
+                                </TableCell>
+                                <TableCell style={{ minWidth: 90 }}>
+                                    {t("product")}
+                                </TableCell>
+                                <TableCell style={{ minWidth: 80 }}>
+                                    <TableSortLabel
+                                        active={orderBy[0] === "order_no"}
+                                        direction={orderBy[1]}
+                                        onClick={() =>
+                                            setOrderBy([
+                                                "order_no",
+                                                orderBy[1] === "asc"
+                                                    ? "desc"
+                                                    : "asc",
+                                            ])
+                                        }
+                                    >
+                                        {t("orderNumber")}
+                                        {orderBy[0] === "order_no" ? (
+                                            <span
+                                                className={
+                                                    classes.visuallyHidden
+                                                }
+                                            >
+                                                {orderBy[1] === "desc"
+                                                    ? "sorted descending"
+                                                    : "sorted ascending"}
+                                            </span>
+                                        ) : null}
+                                    </TableSortLabel>
+                                </TableCell>
+                                <TableCell
+                                    style={{ minWidth: 100 }}
+                                    align={"right"}
+                                >
+                                    {t("price")}
+                                </TableCell>
+                                <TableCell
+                                    style={{ minWidth: 80 }}
+                                    align={"right"}
+                                >
+                                    {t("qyt")}
+                                </TableCell>
+                                <TableCell style={{ minWidth: 100 }}>
+                                    {t("status")}
+                                </TableCell>
+                                <TableCell style={{ minWidth: 80 }}>
+                                    {t("paidBy")}
+                                </TableCell>
+                                <TableCell style={{ minWidth: 100 }}>
+                                    {t("orderOwner")}
+                                </TableCell>
+                                <TableCell style={{ minWidth: 150 }}>
+                                    {tDashboard("file.createdAt")}
+                                </TableCell>
+                                <TableCell style={{ minWidth: 80 }}>
+                                    {tDashboard("policy.actions")}
+                                </TableCell>
+                            </TableRow>
+                        </TableHead>
+                        <TableBody>
+                            {orders.map((row) => (
+                                <TableRow
+                                    hover
+                                    key={row.ID}
+                                    role="checkbox"
+                                    selected={isSelected(row.ID)}
+                                >
+                                    <TableCell padding="checkbox">
+                                        <Checkbox
+                                            onClick={(event) =>
+                                                handleClick(event, row.ID)
+                                            }
+                                            checked={isSelected(row.ID)}
+                                        />
+                                    </TableCell>
+                                    <TableCell>{row.ID}</TableCell>
+                                    <TableCell>{row.Name}</TableCell>
+                                    <TableCell>
+                                        {row.Type === 0 && t("storagePack")}
+                                        {row.Type === 1 &&
+                                            t("purchasableGroups")}
+                                        {row.Type === 2 && t("credits")}
+                                    </TableCell>
+                                    <TableCell>{row.OrderNo}</TableCell>
+                                    <TableCell align={"right"}>
+                                        {row.Method === "score" && row.Price}
+                                        {row.Method !== "score" && (
+                                            <>
+                                                ￥{(row.Price / 100).toFixed(2)}
+                                            </>
+                                        )}
+                                    </TableCell>
+                                    <TableCell align={"right"}>
+                                        {row.Num}
+                                    </TableCell>
+                                    <TableCell>
+                                        {row.Status === 0 && t("unpaid")}
+                                        {row.Status === 1 && t("paid")}
+                                    </TableCell>
+                                    <TableCell>
+                                        {row.Method === "score" && t("credits")}
+                                        {row.Method === "alipay" && t("alipay")}
+                                        {row.Method === "payjs" && t("payjs")}
+                                        {row.Method === "custom" &&
+                                            t("customPayment")}
+                                        {row.Method === "weixin" &&
+                                            t("wechatPay")}
+                                    </TableCell>
+                                    <TableCell>
+                                        <Link
+                                            href={
+                                                "/admin/user/edit/" + row.UserID
+                                            }
+                                        >
+                                            {users[row.UserID]
+                                                ? users[row.UserID].Nick
+                                                : tDashboard(
+                                                      "file.unknownUploader"
+                                                  )}
+                                        </Link>
+                                    </TableCell>
+                                    <TableCell>
+                                        {formatLocalTime(row.CreatedAt)}
+                                    </TableCell>
+                                    <TableCell>
+                                        <Tooltip
+                                            title={tDashboard("policy.delete")}
+                                        >
+                                            <IconButton
+                                                disabled={loading}
+                                                onClick={() =>
+                                                    deletePolicy(row.ID)
+                                                }
+                                                size={"small"}
+                                            >
+                                                <Delete />
+                                            </IconButton>
+                                        </Tooltip>
+                                    </TableCell>
+                                </TableRow>
+                            ))}
+                        </TableBody>
+                    </Table>
+                </TableContainer>
+                <TablePagination
+                    rowsPerPageOptions={[10, 25, 50, 100]}
+                    component="div"
+                    count={total}
+                    rowsPerPage={pageSize}
+                    page={page - 1}
+                    onChangePage={(e, p) => setPage(p + 1)}
+                    onChangeRowsPerPage={(e) => {
+                        setPageSize(e.target.value);
+                        setPage(1);
+                    }}
+                />
+            </Paper>
+        </div>
+    );
+}
diff --git a/src/component/Admin/Policy/AddPolicy.js b/src/component/Admin/Policy/AddPolicy.js
new file mode 100644
index 0000000..9e2c3c1
--- /dev/null
+++ b/src/component/Admin/Policy/AddPolicy.js
@@ -0,0 +1,45 @@
+import React from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import Paper from "@material-ui/core/Paper";
+import { useParams } from "react-router";
+import LocalGuide from "./Guid/LocalGuide";
+import RemoteGuide from "./Guid/RemoteGuide";
+import QiniuGuide from "./Guid/QiniuGuide";
+import OSSGuide from "./Guid/OSSGuide";
+import UpyunGuide from "./Guid/UpyunGuide";
+import COSGuide from "./Guid/COSGuide";
+import OneDriveGuide from "./Guid/OneDriveGuide";
+import S3Guide from "./Guid/S3Guide";
+
+const useStyles = makeStyles((theme) => ({
+    root: {
+        [theme.breakpoints.up("md")]: {
+            marginLeft: 100,
+        },
+        marginBottom: 40,
+    },
+    content: {
+        padding: theme.spacing(2),
+    },
+}));
+
+export default function AddPolicyParent() {
+    const classes = useStyles();
+
+    const { type } = useParams();
+
+    return (
+        <div>
+            <Paper square className={classes.content}>
+                {type === "local" && <LocalGuide />}
+                {type === "remote" && <RemoteGuide />}
+                {type === "qiniu" && <QiniuGuide />}
+                {type === "oss" && <OSSGuide />}
+                {type === "upyun" && <UpyunGuide />}
+                {type === "cos" && <COSGuide />}
+                {type === "onedrive" && <OneDriveGuide />}
+                {type === "s3" && <S3Guide />}
+            </Paper>
+        </div>
+    );
+}
diff --git a/src/component/Admin/Policy/EditPolicy.js b/src/component/Admin/Policy/EditPolicy.js
new file mode 100644
index 0000000..6b40e5a
--- /dev/null
+++ b/src/component/Admin/Policy/EditPolicy.js
@@ -0,0 +1,80 @@
+import React, { useCallback, useEffect, useState } from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import Paper from "@material-ui/core/Paper";
+import { useParams } from "react-router";
+import LocalGuide from "./Guid/LocalGuide";
+import RemoteGuide from "./Guid/RemoteGuide";
+import QiniuGuide from "./Guid/QiniuGuide";
+import OSSGuide from "./Guid/OSSGuide";
+import UpyunGuide from "./Guid/UpyunGuide";
+import S3Guide from "./Guid/S3Guide";
+import COSGuide from "./Guid/COSGuide";
+import OneDriveGuide from "./Guid/OneDriveGuide";
+import API from "../../../middleware/Api";
+import { useDispatch } from "react-redux";
+import EditPro from "./Guid/EditPro";
+import { toggleSnackbar } from "../../../redux/explorer";
+import { transformResponse } from "./utils";
+
+const useStyles = makeStyles((theme) => ({
+    root: {
+        [theme.breakpoints.up("md")]: {
+            marginLeft: 100,
+        },
+        marginBottom: 40,
+    },
+    content: {
+        padding: theme.spacing(2),
+    },
+}));
+
+export default function EditPolicyPreload() {
+    const classes = useStyles();
+    const [type, setType] = useState("");
+    const [policy, setPolicy] = useState({});
+
+    const { mode, id } = useParams();
+
+    const dispatch = useDispatch();
+    const ToggleSnackbar = useCallback(
+        (vertical, horizontal, msg, color) =>
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color)),
+        [dispatch]
+    );
+
+    useEffect(() => {
+        setType("");
+        API.get("/admin/policy/" + id)
+            .then((response) => {
+                response = transformResponse(response);
+                setPolicy(response.data);
+                setType(response.data.Type);
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            });
+    }, [id]);
+
+    return (
+        <div>
+            <Paper square className={classes.content}>
+                {mode === "guide" && (
+                    <>
+                        {type === "local" && <LocalGuide policy={policy} />}
+                        {type === "remote" && <RemoteGuide policy={policy} />}
+                        {type === "qiniu" && <QiniuGuide policy={policy} />}
+                        {type === "oss" && <OSSGuide policy={policy} />}
+                        {type === "upyun" && <UpyunGuide policy={policy} />}
+                        {type === "cos" && <COSGuide policy={policy} />}
+                        {type === "onedrive" && (
+                            <OneDriveGuide policy={policy} />
+                        )}
+                        {type === "s3" && <S3Guide policy={policy} />}
+                    </>
+                )}
+
+                {mode === "pro" && type !== "" && <EditPro policy={policy} />}
+            </Paper>
+        </div>
+    );
+}
diff --git a/src/component/Admin/Policy/Guid/COSGuide.js b/src/component/Admin/Policy/Guid/COSGuide.js
new file mode 100644
index 0000000..51a64c2
--- /dev/null
+++ b/src/component/Admin/Policy/Guid/COSGuide.js
@@ -0,0 +1,1220 @@
+import { lighten, makeStyles } from "@material-ui/core/styles";
+import React, { useCallback, useState } from "react";
+import Stepper from "@material-ui/core/Stepper";
+import StepLabel from "@material-ui/core/StepLabel";
+import Step from "@material-ui/core/Step";
+import Typography from "@material-ui/core/Typography";
+import { useDispatch } from "react-redux";
+import Link from "@material-ui/core/Link";
+import FormControl from "@material-ui/core/FormControl";
+import InputLabel from "@material-ui/core/InputLabel";
+import Input from "@material-ui/core/Input";
+import RadioGroup from "@material-ui/core/RadioGroup";
+import FormControlLabel from "@material-ui/core/FormControlLabel";
+import Radio from "@material-ui/core/Radio";
+import Collapse from "@material-ui/core/Collapse";
+import Button from "@material-ui/core/Button";
+import API from "../../../../middleware/Api";
+import MagicVar from "../../Dialogs/MagicVar";
+import DomainInput from "../../Common/DomainInput";
+import SizeInput from "../../Common/SizeInput";
+import { useHistory } from "react-router";
+import { getNumber } from "../../../../utils";
+import Select from "@material-ui/core/Select";
+import MenuItem from "@material-ui/core/MenuItem";
+import { toggleSnackbar } from "../../../../redux/explorer";
+import { Trans, useTranslation } from "react-i18next";
+import { transformPolicyRequest } from "../utils";
+
+const useStyles = makeStyles((theme) => ({
+    stepContent: {
+        padding: "16px 32px 16px 32px",
+    },
+    form: {
+        maxWidth: 400,
+        marginTop: 20,
+    },
+    formContainer: {
+        [theme.breakpoints.up("md")]: {
+            padding: "0px 24px 0 24px",
+        },
+    },
+    subStepContainer: {
+        display: "flex",
+        marginBottom: 20,
+        padding: 10,
+        transition: theme.transitions.create("background-color", {
+            easing: theme.transitions.easing.sharp,
+            duration: theme.transitions.duration.leavingScreen,
+        }),
+        "&:focus-within": {
+            backgroundColor: theme.palette.background.default,
+        },
+    },
+    stepNumber: {
+        width: 20,
+        height: 20,
+        backgroundColor: lighten(theme.palette.secondary.light, 0.2),
+        color: theme.palette.secondary.contrastText,
+        textAlign: "center",
+        borderRadius: " 50%",
+    },
+    stepNumberContainer: {
+        marginRight: 10,
+    },
+    stepFooter: {
+        marginTop: 32,
+    },
+    button: {
+        marginRight: theme.spacing(1),
+    },
+    viewButtonLabel: { textTransform: "none" },
+    "@global": {
+        code: {
+            color: "rgba(0, 0, 0, 0.87)",
+            display: "inline-block",
+            padding: "2px 6px",
+            fontFamily:
+                ' Consolas, "Liberation Mono", Menlo, Courier, monospace',
+            borderRadius: "2px",
+            backgroundColor: "rgba(255,229,100,0.1)",
+        },
+    },
+}));
+
+const steps = [
+    {
+        title: "storageBucket",
+        optional: false,
+    },
+    {
+        title: "storagePathStep",
+        optional: false,
+    },
+    {
+        title: "sourceLinkStep",
+        optional: false,
+    },
+    {
+        title: "uploadSettingStep",
+        optional: false,
+    },
+    {
+        title: "corsSettingStep",
+        optional: true,
+    },
+    {
+        title: "callbackFunctionStep",
+        optional: true,
+    },
+    {
+        title: "finishStep",
+        optional: false,
+    },
+];
+
+export default function COSGuide(props) {
+    const { t } = useTranslation("dashboard", { keyPrefix: "policy" });
+    const classes = useStyles();
+    const history = useHistory();
+
+    const [activeStep, setActiveStep] = useState(0);
+    const [loading, setLoading] = useState(false);
+    const [skipped, setSkipped] = React.useState(new Set());
+    const [magicVar, setMagicVar] = useState("");
+    const [useCDN, setUseCDN] = useState("false");
+    const [policy, setPolicy] = useState(
+        props.policy
+            ? props.policy
+            : {
+                  Type: "cos",
+                  Name: "",
+                  SecretKey: "",
+                  AccessKey: "",
+                  BaseURL: "",
+                  Server: "",
+                  IsPrivate: "true",
+                  DirNameRule: "uploads/{year}/{month}/{day}",
+                  AutoRename: "true",
+                  FileNameRule: "{randomkey8}_{originname}",
+                  IsOriginLinkEnable: "false",
+                  MaxSize: "0",
+                  OptionsSerialized: {
+                      file_type: "",
+                      placeholder_with_size: "false",
+                  },
+              }
+    );
+    const [policyID, setPolicyID] = useState(
+        props.policy ? props.policy.ID : 0
+    );
+    const [region, setRegion] = useState("ap-chengdu");
+
+    const handleChange = (name) => (event) => {
+        setPolicy({
+            ...policy,
+            [name]: event.target.value,
+        });
+    };
+
+    const handleOptionChange = (name) => (event) => {
+        setPolicy({
+            ...policy,
+            OptionsSerialized: {
+                ...policy.OptionsSerialized,
+                [name]: event.target.value,
+            },
+        });
+    };
+
+    const isStepSkipped = (step) => {
+        return skipped.has(step);
+    };
+
+    const dispatch = useDispatch();
+    const ToggleSnackbar = useCallback(
+        (vertical, horizontal, msg, color) =>
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color)),
+        [dispatch]
+    );
+
+    const submitPolicy = (e) => {
+        e.preventDefault();
+        setLoading(true);
+
+        let policyCopy = { ...policy };
+        policyCopy.OptionsSerialized = { ...policyCopy.OptionsSerialized };
+
+        if (useCDN === "false") {
+            policyCopy.BaseURL = policy.Server;
+        }
+
+        // 类型转换
+        policyCopy = transformPolicyRequest(policyCopy);
+
+        API.post("/admin/policy", {
+            policy: policyCopy,
+        })
+            .then((response) => {
+                ToggleSnackbar(
+                    "top",
+                    "right",
+                    props.policy ? t("policySaved") : t("policyAdded"),
+                    "success"
+                );
+                setActiveStep(4);
+                setPolicyID(response.data);
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            })
+            .then(() => {
+                setLoading(false);
+            });
+
+        setLoading(false);
+    };
+
+    const createCORS = () => {
+        setLoading(true);
+        API.post("/admin/policy/cors", {
+            id: policyID,
+        })
+            .then(() => {
+                ToggleSnackbar("top", "right", t("corsPolicyAdded"), "success");
+                setActiveStep(5);
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            })
+            .then(() => {
+                setLoading(false);
+            });
+    };
+
+    const creatCallback = () => {
+        setLoading(true);
+        API.post("/admin/policy/scf", {
+            id: policyID,
+            region: region,
+        })
+            .then(() => {
+                ToggleSnackbar(
+                    "top",
+                    "right",
+                    t("callbackFunctionAdded"),
+                    "success"
+                );
+                setActiveStep(6);
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            })
+            .then(() => {
+                setLoading(false);
+            });
+    };
+
+    return (
+        <div>
+            <Typography variant={"h6"}>
+                {props.policy
+                    ? t("editCOSStoragePolicy")
+                    : t("addCOSStoragePolicy")}
+            </Typography>
+            <Stepper activeStep={activeStep}>
+                {steps.map((label, index) => {
+                    const stepProps = {};
+                    const labelProps = {};
+                    if (label.optional) {
+                        labelProps.optional = (
+                            <Typography variant="caption">
+                                {t("optional")}
+                            </Typography>
+                        );
+                    }
+                    if (isStepSkipped(index)) {
+                        stepProps.completed = false;
+                    }
+                    return (
+                        <Step key={label.title} {...stepProps}>
+                            <StepLabel {...labelProps}>
+                                {t(label.title)}
+                            </StepLabel>
+                        </Step>
+                    );
+                })}
+            </Stepper>
+
+            {activeStep === 0 && (
+                <form
+                    className={classes.stepContent}
+                    onSubmit={(e) => {
+                        e.preventDefault();
+                        setActiveStep(1);
+                    }}
+                >
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>0</div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                <Trans
+                                    ns={"dashboard"}
+                                    i18nKey={"policy.wanSiteURLDes"}
+                                    components={[<strong key={0} />]}
+                                />
+                            </Typography>
+                        </div>
+                    </div>
+
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>1</div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                <Trans
+                                    ns={"dashboard"}
+                                    i18nKey={"policy.createCOSBucketDes"}
+                                    components={[
+                                        <Link
+                                            key={0}
+                                            href={
+                                                "https://console.cloud.tencent.com/cos5"
+                                            }
+                                            target={"_blank"}
+                                        />,
+                                    ]}
+                                />
+                            </Typography>
+                        </div>
+                    </div>
+
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>2</div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                <Trans
+                                    ns={"dashboard"}
+                                    i18nKey={"policy.cosBucketNameDes"}
+                                    components={[<code key={0} />]}
+                                />
+                            </Typography>
+                            <div className={classes.form}>
+                                <FormControl fullWidth>
+                                    <InputLabel htmlFor="component-helper">
+                                        {t("qiniuBucketName")}
+                                    </InputLabel>
+                                    <Input
+                                        inputProps={{
+                                            pattern: "[a-z0-9-]+-[0-9]+",
+                                            title: t("cosBucketFormatError"),
+                                        }}
+                                        required
+                                        value={policy.BucketName}
+                                        onChange={handleChange("BucketName")}
+                                    />
+                                </FormControl>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>3</div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                <Trans
+                                    ns={"dashboard"}
+                                    i18nKey={"policy.cosBucketTypeDes"}
+                                    components={[<code key={0} />]}
+                                />
+                            </Typography>
+                            <div className={classes.form}>
+                                <FormControl required component="fieldset">
+                                    <RadioGroup
+                                        required
+                                        value={policy.IsPrivate}
+                                        onChange={handleChange("IsPrivate")}
+                                        row
+                                    >
+                                        <FormControlLabel
+                                            value={"true"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("cosPrivateRW")}
+                                        />
+                                        <FormControlLabel
+                                            value={"false"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("cosPublicRW")}
+                                        />
+                                    </RadioGroup>
+                                </FormControl>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>4</div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                <Trans
+                                    ns={"dashboard"}
+                                    i18nKey={"policy.cosAccessDomainDes"}
+                                    components={[
+                                        <code key={0} />,
+                                        <code key={1} />,
+                                    ]}
+                                />
+                            </Typography>
+                            <div className={classes.form}>
+                                <DomainInput
+                                    value={policy.Server}
+                                    onChange={handleChange("Server")}
+                                    required
+                                    label={t("accessDomain")}
+                                />
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>5</div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                {t("cosCDNDes")}
+                            </Typography>
+                            <div className={classes.form}>
+                                <FormControl required component="fieldset">
+                                    <RadioGroup
+                                        required
+                                        value={useCDN}
+                                        onChange={(e) => {
+                                            setUseCDN(e.target.value);
+                                        }}
+                                        row
+                                    >
+                                        <FormControlLabel
+                                            value={"true"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("use")}
+                                        />
+                                        <FormControlLabel
+                                            value={"false"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("notUse")}
+                                        />
+                                    </RadioGroup>
+                                </FormControl>
+                            </div>
+                        </div>
+                    </div>
+
+                    <Collapse in={useCDN === "true"}>
+                        <div className={classes.subStepContainer}>
+                            <div className={classes.stepNumberContainer}>
+                                <div className={classes.stepNumber}>6</div>
+                            </div>
+                            <div className={classes.subStepContent}>
+                                <Typography variant={"body2"}>
+                                    <Trans
+                                        ns={"dashboard"}
+                                        i18nKey={"policy.cosCDNDomainDes"}
+                                        components={[
+                                            <Link
+                                                key={0}
+                                                href={
+                                                    "https://console.cloud.tencent.com/cdn/access/guid"
+                                                }
+                                                target={"_blank"}
+                                            />,
+                                        ]}
+                                    />
+                                </Typography>
+                                <div className={classes.form}>
+                                    <DomainInput
+                                        value={policy.BaseURL}
+                                        onChange={handleChange("BaseURL")}
+                                        required={useCDN === "true"}
+                                        label={t("bucketCDNDomain")}
+                                    />
+                                </div>
+                            </div>
+                        </div>
+                    </Collapse>
+
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>
+                                {getNumber(6, [useCDN === "true"])}
+                            </div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                <Trans
+                                    ns={"dashboard"}
+                                    i18nKey={"policy.cosCredentialDes"}
+                                    components={[
+                                        <Link
+                                            key={0}
+                                            href={
+                                                "https://console.cloud.tencent.com/cam/capi"
+                                            }
+                                            target={"_blank"}
+                                        />,
+                                    ]}
+                                />
+                            </Typography>
+                            <div className={classes.form}>
+                                <FormControl fullWidth>
+                                    <InputLabel htmlFor="component-helper">
+                                        {t("secretId")}
+                                    </InputLabel>
+                                    <Input
+                                        required
+                                        inputProps={{
+                                            pattern: "\\S+",
+                                            title: t("shouldNotContainSpace"),
+                                        }}
+                                        value={policy.AccessKey}
+                                        onChange={handleChange("AccessKey")}
+                                    />
+                                </FormControl>
+                            </div>
+                            <div className={classes.form}>
+                                <FormControl fullWidth>
+                                    <InputLabel htmlFor="component-helper">
+                                        {t("secretKey")}
+                                    </InputLabel>
+                                    <Input
+                                        required
+                                        inputProps={{
+                                            pattern: "\\S+",
+                                            title: t("shouldNotContainSpace"),
+                                        }}
+                                        value={policy.SecretKey}
+                                        onChange={handleChange("SecretKey")}
+                                    />
+                                </FormControl>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>
+                                {getNumber(7, [useCDN === "true"])}
+                            </div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                {t("nameThePolicyFirst")}
+                            </Typography>
+                            <div className={classes.form}>
+                                <FormControl fullWidth>
+                                    <InputLabel htmlFor="component-helper">
+                                        {t("policyName")}
+                                    </InputLabel>
+                                    <Input
+                                        required
+                                        value={policy.Name}
+                                        onChange={handleChange("Name")}
+                                    />
+                                </FormControl>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className={classes.stepFooter}>
+                        <Button
+                            disabled={loading}
+                            type={"submit"}
+                            variant={"contained"}
+                            color={"primary"}
+                        >
+                            {t("next")}
+                        </Button>
+                    </div>
+                </form>
+            )}
+
+            {activeStep === 1 && (
+                <form
+                    className={classes.stepContental}
+                    onSubmit={(e) => {
+                        e.preventDefault();
+                        setActiveStep(2);
+                    }}
+                >
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>1</div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                <Trans
+                                    ns={"dashboard"}
+                                    i18nKey={"policy.pathMagicVarDes"}
+                                    components={[
+                                        <Link
+                                            key={0}
+                                            color={"secondary"}
+                                            href={"javascript:void()"}
+                                            onClick={() => setMagicVar("path")}
+                                        />,
+                                    ]}
+                                />
+                            </Typography>
+                            <div className={classes.form}>
+                                <FormControl fullWidth>
+                                    <InputLabel htmlFor="component-helper">
+                                        {t("pathOfFolderToStoreFiles")}
+                                    </InputLabel>
+                                    <Input
+                                        required
+                                        value={policy.DirNameRule}
+                                        onChange={handleChange("DirNameRule")}
+                                    />
+                                </FormControl>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>2</div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                <Trans
+                                    ns={"dashboard"}
+                                    i18nKey={"policy.filePathMagicVarDes"}
+                                    components={[
+                                        <Link
+                                            key={0}
+                                            color={"secondary"}
+                                            href={"javascript:void()"}
+                                            onClick={() => setMagicVar("file")}
+                                        />,
+                                    ]}
+                                />
+                            </Typography>
+                            <div className={classes.form}>
+                                <FormControl required component="fieldset">
+                                    <RadioGroup
+                                        aria-label="gender"
+                                        name="gender1"
+                                        value={policy.AutoRename}
+                                        onChange={handleChange("AutoRename")}
+                                        row
+                                    >
+                                        <FormControlLabel
+                                            value={"true"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("autoRenameStoredFile")}
+                                        />
+                                        <FormControlLabel
+                                            value={"false"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("keepOriginalFileName")}
+                                        />
+                                    </RadioGroup>
+                                </FormControl>
+                            </div>
+
+                            <Collapse in={policy.AutoRename === "true"}>
+                                <div className={classes.form}>
+                                    <FormControl fullWidth>
+                                        <InputLabel htmlFor="component-helper">
+                                            {t("renameRule")}
+                                        </InputLabel>
+                                        <Input
+                                            required={
+                                                policy.AutoRename === "true"
+                                            }
+                                            value={policy.FileNameRule}
+                                            onChange={handleChange(
+                                                "FileNameRule"
+                                            )}
+                                        />
+                                    </FormControl>
+                                </div>
+                            </Collapse>
+                        </div>
+                    </div>
+
+                    <div className={classes.stepFooter}>
+                        <Button
+                            color={"default"}
+                            className={classes.button}
+                            onClick={() => setActiveStep(0)}
+                        >
+                            {t("back")}
+                        </Button>
+                        <Button
+                            disabled={loading}
+                            type={"submit"}
+                            variant={"contained"}
+                            color={"primary"}
+                        >
+                            {t("next")}
+                        </Button>
+                    </div>
+                </form>
+            )}
+
+            {activeStep === 2 && (
+                <form
+                    className={classes.stepContent}
+                    onSubmit={(e) => {
+                        e.preventDefault();
+                        setActiveStep(3);
+                    }}
+                >
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>1</div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                {t("enableGettingPermanentSourceLink")}
+                                <br />
+                                {t("enableGettingPermanentSourceLinkDes")}
+                            </Typography>
+
+                            <div className={classes.form}>
+                                <FormControl required component="fieldset">
+                                    <RadioGroup
+                                        required
+                                        value={policy.IsOriginLinkEnable}
+                                        onChange={(e) => {
+                                            if (
+                                                policy.IsPrivate === "true" &&
+                                                e.target.value === "true"
+                                            ) {
+                                                ToggleSnackbar(
+                                                    "top",
+                                                    "right",
+                                                    t(
+                                                        "cannotEnableForPrivateBucket"
+                                                    ),
+                                                    "warning"
+                                                );
+                                            }
+                                            handleChange("IsOriginLinkEnable")(
+                                                e
+                                            );
+                                        }}
+                                        row
+                                    >
+                                        <FormControlLabel
+                                            value={"true"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("allowed")}
+                                        />
+                                        <FormControlLabel
+                                            value={"false"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("forbidden")}
+                                        />
+                                    </RadioGroup>
+                                </FormControl>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className={classes.stepFooter}>
+                        <Button
+                            color={"default"}
+                            className={classes.button}
+                            onClick={() => setActiveStep(1)}
+                        >
+                            {t("back")}
+                        </Button>{" "}
+                        <Button
+                            disabled={loading}
+                            type={"submit"}
+                            variant={"contained"}
+                            color={"primary"}
+                        >
+                            {t("next")}
+                        </Button>
+                    </div>
+                </form>
+            )}
+
+            {activeStep === 3 && (
+                <form className={classes.stepContent} onSubmit={submitPolicy}>
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>1</div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                {t("limitFileSize")}
+                            </Typography>
+
+                            <div className={classes.form}>
+                                <FormControl required component="fieldset">
+                                    <RadioGroup
+                                        required
+                                        value={
+                                            policy.MaxSize === "0"
+                                                ? "false"
+                                                : "true"
+                                        }
+                                        onChange={(e) => {
+                                            if (e.target.value === "true") {
+                                                setPolicy({
+                                                    ...policy,
+                                                    MaxSize: "10485760",
+                                                });
+                                            } else {
+                                                setPolicy({
+                                                    ...policy,
+                                                    MaxSize: "0",
+                                                });
+                                            }
+                                        }}
+                                        row
+                                    >
+                                        <FormControlLabel
+                                            value={"true"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("limit")}
+                                        />
+                                        <FormControlLabel
+                                            value={"false"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("notLimit")}
+                                        />
+                                    </RadioGroup>
+                                </FormControl>
+                            </div>
+                        </div>
+                    </div>
+
+                    <Collapse in={policy.MaxSize !== "0"}>
+                        <div className={classes.subStepContainer}>
+                            <div className={classes.stepNumberContainer}>
+                                <div className={classes.stepNumber}>2</div>
+                            </div>
+                            <div className={classes.subStepContent}>
+                                <Typography variant={"body2"}>
+                                    {t("enterSizeLimit")}
+                                </Typography>
+                                <div className={classes.form}>
+                                    <SizeInput
+                                        value={policy.MaxSize}
+                                        onChange={handleChange("MaxSize")}
+                                        min={0}
+                                        max={9223372036854775807}
+                                        label={t("maxSizeOfSingleFile")}
+                                    />
+                                </div>
+                            </div>
+                        </div>
+                    </Collapse>
+
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>
+                                {policy.MaxSize !== "0" ? "3" : "2"}
+                            </div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                {t("limitFileExt")}
+                            </Typography>
+
+                            <div className={classes.form}>
+                                <FormControl required component="fieldset">
+                                    <RadioGroup
+                                        required
+                                        value={
+                                            policy.OptionsSerialized
+                                                .file_type === ""
+                                                ? "false"
+                                                : "true"
+                                        }
+                                        onChange={(e) => {
+                                            if (e.target.value === "true") {
+                                                setPolicy({
+                                                    ...policy,
+                                                    OptionsSerialized: {
+                                                        ...policy.OptionsSerialized,
+                                                        file_type:
+                                                            "jpg,png,mp4,zip,rar",
+                                                    },
+                                                });
+                                            } else {
+                                                setPolicy({
+                                                    ...policy,
+                                                    OptionsSerialized: {
+                                                        ...policy.OptionsSerialized,
+                                                        file_type: "",
+                                                    },
+                                                });
+                                            }
+                                        }}
+                                        row
+                                    >
+                                        <FormControlLabel
+                                            value={"true"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("limit")}
+                                        />
+                                        <FormControlLabel
+                                            value={"false"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("notLimit")}
+                                        />
+                                    </RadioGroup>
+                                </FormControl>
+                            </div>
+                        </div>
+                    </div>
+
+                    <Collapse in={policy.OptionsSerialized.file_type !== ""}>
+                        <div className={classes.subStepContainer}>
+                            <div className={classes.stepNumberContainer}>
+                                <div className={classes.stepNumber}>
+                                    {policy.MaxSize !== "0" ? "4" : "3"}
+                                </div>
+                            </div>
+                            <div className={classes.subStepContent}>
+                                <Typography variant={"body2"}>
+                                    {t("enterFileExt")}
+                                </Typography>
+                                <div className={classes.form}>
+                                    <FormControl fullWidth>
+                                        <InputLabel htmlFor="component-helper">
+                                            {t("extList")}
+                                        </InputLabel>
+                                        <Input
+                                            value={
+                                                policy.OptionsSerialized
+                                                    .file_type
+                                            }
+                                            onChange={handleOptionChange(
+                                                "file_type"
+                                            )}
+                                        />
+                                    </FormControl>
+                                </div>
+                            </div>
+                        </div>
+                    </Collapse>
+
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>
+                                {getNumber(3, [
+                                    policy.MaxSize !== "0",
+                                    policy.OptionsSerialized.file_type !== "",
+                                ])}
+                            </div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                {t("createPlaceholderDes")}
+                            </Typography>
+                            <div className={classes.form}>
+                                <FormControl required component="fieldset">
+                                    <RadioGroup
+                                        aria-label="gender"
+                                        name="gender1"
+                                        value={
+                                            policy.OptionsSerialized
+                                                .placeholder_with_size
+                                        }
+                                        onChange={handleOptionChange(
+                                            "placeholder_with_size"
+                                        )}
+                                        row
+                                    >
+                                        <FormControlLabel
+                                            value={"true"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("createPlaceholder")}
+                                        />
+                                        <FormControlLabel
+                                            value={"false"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("notCreatePlaceholder")}
+                                        />
+                                    </RadioGroup>
+                                </FormControl>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className={classes.stepFooter}>
+                        <Button
+                            color={"default"}
+                            className={classes.button}
+                            onClick={() => setActiveStep(2)}
+                        >
+                            {t("back")}
+                        </Button>{" "}
+                        <Button
+                            disabled={loading}
+                            type={"submit"}
+                            variant={"contained"}
+                            color={"primary"}
+                        >
+                            {t("next")}
+                        </Button>
+                    </div>
+                </form>
+            )}
+
+            {activeStep === 4 && (
+                <form className={classes.stepContent}>
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer} />
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                {t("ossCORSDes")}
+                            </Typography>
+                            <div className={classes.form}>
+                                <Button
+                                    disabled={loading}
+                                    color={"secondary"}
+                                    variant={"contained"}
+                                    className={classes.button}
+                                    onClick={() => createCORS()}
+                                    classes={{ label: classes.viewButtonLabel }}
+                                >
+                                    {t("letCloudreveHelpMe")}
+                                </Button>
+                            </div>
+                        </div>
+                    </div>
+                    <div className={classes.stepFooter}>
+                        <Button
+                            color={"default"}
+                            className={classes.button}
+                            onClick={() => {
+                                setActiveStep(
+                                    (prevActiveStep) => prevActiveStep + 1
+                                );
+                                setSkipped((prevSkipped) => {
+                                    const newSkipped = new Set(
+                                        prevSkipped.values()
+                                    );
+                                    newSkipped.add(activeStep);
+                                    return newSkipped;
+                                });
+                            }}
+                        >
+                            {t("skip")}
+                        </Button>{" "}
+                    </div>
+                </form>
+            )}
+
+            {activeStep === 5 && (
+                <form className={classes.stepContent}>
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer} />
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                <Trans
+                                    ns={"dashboard"}
+                                    i18nKey={"policy.cosCallbackDes"}
+                                    components={[
+                                        <Link
+                                            key={0}
+                                            href={
+                                                "https://console.cloud.tencent.com/scf/index?rid=16"
+                                            }
+                                            target={"_blank"}
+                                        />,
+                                    ]}
+                                />
+                                <br />
+                                <br />
+                            </Typography>
+                            <Typography variant={"body2"}>
+                                {t("cosCallbackCreate")}
+                            </Typography>
+
+                            <div className={classes.form}>
+                                <FormControl>
+                                    <InputLabel htmlFor="component-helper">
+                                        {t("cosBucketRegion")}
+                                    </InputLabel>
+                                    <Select
+                                        value={region}
+                                        onChange={(e) =>
+                                            setRegion(e.target.value)
+                                        }
+                                        required
+                                    >
+                                        {[
+                                            "ap-beijing",
+                                            "ap-chengdu",
+                                            "ap-guangzhou",
+                                            "ap-guangzhou-open",
+                                            "ap-hongkong",
+                                            "ap-mumbai",
+                                            "na-siliconvalley",
+                                            "na-toronto",
+                                        ].map((v) => (
+                                            <MenuItem key={v} value={v}>
+                                                {t(v)}
+                                            </MenuItem>
+                                        ))}
+                                    </Select>
+                                </FormControl>
+                            </div>
+
+                            <div className={classes.form}>
+                                <Button
+                                    disabled={loading}
+                                    color={"secondary"}
+                                    variant={"contained"}
+                                    className={classes.button}
+                                    onClick={() => creatCallback()}
+                                    classes={{ label: classes.viewButtonLabel }}
+                                >
+                                    {t("letCloudreveHelpMe")}
+                                </Button>
+                            </div>
+                        </div>
+                    </div>
+                    <div className={classes.stepFooter}>
+                        <Button
+                            color={"default"}
+                            className={classes.button}
+                            onClick={() => {
+                                setActiveStep(
+                                    (prevActiveStep) => prevActiveStep + 1
+                                );
+                                setSkipped((prevSkipped) => {
+                                    const newSkipped = new Set(
+                                        prevSkipped.values()
+                                    );
+                                    newSkipped.add(activeStep);
+                                    return newSkipped;
+                                });
+                            }}
+                        >
+                            {t("skip")}
+                        </Button>{" "}
+                    </div>
+                </form>
+            )}
+
+            {activeStep === 6 && (
+                <>
+                    <form className={classes.stepContent}>
+                        <Typography>
+                            {props.policy ? t("policySaved") : t("policyAdded")}
+                        </Typography>
+                        <Typography variant={"body2"} color={"textSecondary"}>
+                            {t("furtherActions")}
+                        </Typography>
+                    </form>
+                    <div className={classes.stepFooter}>
+                        <Button
+                            color={"primary"}
+                            className={classes.button}
+                            onClick={() => history.push("/admin/policy")}
+                        >
+                            {t("backToList")}
+                        </Button>
+                    </div>
+                </>
+            )}
+
+            <MagicVar
+                open={magicVar === "file"}
+                isFile
+                onClose={() => setMagicVar("")}
+            />
+            <MagicVar
+                open={magicVar === "path"}
+                onClose={() => setMagicVar("")}
+            />
+        </div>
+    );
+}
diff --git a/src/component/Admin/Policy/Guid/EditPro.js b/src/component/Admin/Policy/Guid/EditPro.js
new file mode 100644
index 0000000..f8b1e08
--- /dev/null
+++ b/src/component/Admin/Policy/Guid/EditPro.js
@@ -0,0 +1,690 @@
+import React, { useCallback, useState } from "react";
+import Typography from "@material-ui/core/Typography";
+import { useDispatch } from "react-redux";
+import FormControl from "@material-ui/core/FormControl";
+import Input from "@material-ui/core/Input";
+import RadioGroup from "@material-ui/core/RadioGroup";
+import FormControlLabel from "@material-ui/core/FormControlLabel";
+import Radio from "@material-ui/core/Radio";
+import Button from "@material-ui/core/Button";
+import API from "../../../../middleware/Api";
+import TableContainer from "@material-ui/core/TableContainer";
+import Table from "@material-ui/core/Table";
+import TableHead from "@material-ui/core/TableHead";
+import TableRow from "@material-ui/core/TableRow";
+import TableCell from "@material-ui/core/TableCell";
+import TableBody from "@material-ui/core/TableBody";
+import { toggleSnackbar } from "../../../../redux/explorer";
+import { useTranslation } from "react-i18next";
+import { transformPolicyRequest } from "../utils";
+
+export default function EditPro(props) {
+    const { t } = useTranslation("dashboard", { keyPrefix: "policy" });
+    const [, setLoading] = useState(false);
+    const [policy, setPolicy] = useState(props.policy);
+
+    const handleChange = (name) => (event) => {
+        setPolicy({
+            ...policy,
+            [name]: event.target.value,
+        });
+    };
+
+    const handleOptionChange = (name) => (event) => {
+        setPolicy({
+            ...policy,
+            OptionsSerialized: {
+                ...policy.OptionsSerialized,
+                [name]: event.target.value,
+            },
+        });
+    };
+
+    const dispatch = useDispatch();
+    const ToggleSnackbar = useCallback(
+        (vertical, horizontal, msg, color) =>
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color)),
+        [dispatch]
+    );
+
+    const submitPolicy = (e) => {
+        e.preventDefault();
+        setLoading(true);
+
+        let policyCopy = { ...policy };
+        policyCopy.OptionsSerialized = { ...policyCopy.OptionsSerialized };
+
+        // 类型转换
+        policyCopy = transformPolicyRequest(policyCopy);
+
+        API.post("/admin/policy", {
+            policy: policyCopy,
+        })
+            .then(() => {
+                ToggleSnackbar(
+                    "top",
+                    "right",
+                    props.policy ? t("policySaved") : t("policyAdded"),
+                    "success"
+                );
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            })
+            .then(() => {
+                setLoading(false);
+            });
+
+        setLoading(false);
+    };
+
+    return (
+        <div>
+            <Typography variant={"h6"}>{t("editPolicy")}</Typography>
+            <TableContainer>
+                <form onSubmit={submitPolicy}>
+                    <Table aria-label="simple table">
+                        <TableHead>
+                            <TableRow>
+                                <TableCell>{t("setting")}</TableCell>
+                                <TableCell>{t("value")}</TableCell>
+                                <TableCell>{t("description")}</TableCell>
+                            </TableRow>
+                        </TableHead>
+                        <TableBody>
+                            <TableRow>
+                                <TableCell component="th" scope="row">
+                                    {t("id")}
+                                </TableCell>
+                                <TableCell>{policy.ID}</TableCell>
+                                <TableCell>{t("policyID")}</TableCell>
+                            </TableRow>
+                            <TableRow>
+                                <TableCell component="th" scope="row">
+                                    {t("type")}
+                                </TableCell>
+                                <TableCell>{policy.Type}</TableCell>
+                                <TableCell>{t("policyType")}</TableCell>
+                            </TableRow>
+                            <TableRow>
+                                <TableCell component="th" scope="row">
+                                    {t("name")}
+                                </TableCell>
+                                <TableCell>
+                                    <FormControl>
+                                        <Input
+                                            required
+                                            value={policy.Name}
+                                            onChange={handleChange("Name")}
+                                        />
+                                    </FormControl>
+                                </TableCell>
+                                <TableCell>{t("policyName")}</TableCell>
+                            </TableRow>
+                            <TableRow>
+                                <TableCell component="th" scope="row">
+                                    {t("server")}
+                                </TableCell>
+                                <TableCell>
+                                    <FormControl>
+                                        <Input
+                                            value={policy.Server}
+                                            onChange={handleChange("Server")}
+                                        />
+                                    </FormControl>
+                                </TableCell>
+                                <TableCell>{t("policyEndpoint")}</TableCell>
+                            </TableRow>
+                            <TableRow>
+                                <TableCell component="th" scope="row">
+                                    {t("bucketName")}
+                                </TableCell>
+                                <TableCell>
+                                    <FormControl>
+                                        <Input
+                                            value={policy.BucketName}
+                                            onChange={handleChange(
+                                                "BucketName"
+                                            )}
+                                        />
+                                    </FormControl>
+                                </TableCell>
+                                <TableCell>{t("bucketID")}</TableCell>
+                            </TableRow>
+                            <TableRow>
+                                <TableCell component="th" scope="row">
+                                    {t("privateBucket")}
+                                </TableCell>
+                                <TableCell>
+                                    <FormControl>
+                                        <RadioGroup
+                                            required
+                                            value={policy.IsPrivate}
+                                            onChange={handleChange("IsPrivate")}
+                                            row
+                                        >
+                                            <FormControlLabel
+                                                value={"true"}
+                                                control={
+                                                    <Radio color={"primary"} />
+                                                }
+                                                label={t("yes")}
+                                            />
+                                            <FormControlLabel
+                                                value={"false"}
+                                                control={
+                                                    <Radio color={"primary"} />
+                                                }
+                                                label={t("no")}
+                                            />
+                                        </RadioGroup>
+                                    </FormControl>
+                                </TableCell>
+                                <TableCell>{t("privateBucketDes")}</TableCell>
+                            </TableRow>
+                            <TableRow>
+                                <TableCell component="th" scope="row">
+                                    {t("resourceRootURL")}
+                                </TableCell>
+                                <TableCell>
+                                    <FormControl>
+                                        <Input
+                                            value={policy.BaseURL}
+                                            onChange={handleChange("BaseURL")}
+                                        />
+                                    </FormControl>
+                                </TableCell>
+                                <TableCell>{t("resourceRootURLDes")}</TableCell>
+                            </TableRow>
+                            <TableRow>
+                                <TableCell component="th" scope="row">
+                                    {t("accessKey")}
+                                </TableCell>
+                                <TableCell>
+                                    <FormControl>
+                                        <Input
+                                            multiline
+                                            rowsMax={10}
+                                            value={policy.AccessKey}
+                                            onChange={handleChange("AccessKey")}
+                                        />
+                                    </FormControl>
+                                </TableCell>
+                                <TableCell>{t("akDes")}</TableCell>
+                            </TableRow>
+                            <TableRow>
+                                <TableCell component="th" scope="row">
+                                    {t("secretKey")}
+                                </TableCell>
+                                <TableCell>
+                                    <FormControl>
+                                        <Input
+                                            multiline
+                                            rowsMax={10}
+                                            value={policy.SecretKey}
+                                            onChange={handleChange("SecretKey")}
+                                        />
+                                    </FormControl>
+                                </TableCell>
+                                <TableCell>{t("secretKey")}</TableCell>
+                            </TableRow>
+                            <TableRow>
+                                <TableCell component="th" scope="row">
+                                    {t("maxSizeBytes")}
+                                </TableCell>
+                                <TableCell>
+                                    <FormControl>
+                                        <Input
+                                            type={"number"}
+                                            inputProps={{
+                                                min: 0,
+                                                step: 1,
+                                            }}
+                                            value={policy.MaxSize}
+                                            onChange={handleChange("MaxSize")}
+                                        />
+                                    </FormControl>
+                                </TableCell>
+                                <TableCell>{t("maxSizeBytesDes")}</TableCell>
+                            </TableRow>
+                            <TableRow>
+                                <TableCell component="th" scope="row">
+                                    {t("autoRename")}
+                                </TableCell>
+                                <TableCell>
+                                    <FormControl>
+                                        <RadioGroup
+                                            required
+                                            value={policy.AutoRename}
+                                            onChange={handleChange(
+                                                "AutoRename"
+                                            )}
+                                            row
+                                        >
+                                            <FormControlLabel
+                                                value={"true"}
+                                                control={
+                                                    <Radio color={"primary"} />
+                                                }
+                                                label={t("yes")}
+                                            />
+                                            <FormControlLabel
+                                                value={"false"}
+                                                control={
+                                                    <Radio color={"primary"} />
+                                                }
+                                                label={t("no")}
+                                            />
+                                        </RadioGroup>
+                                    </FormControl>
+                                </TableCell>
+                                <TableCell>{t("autoRenameDes")}</TableCell>
+                            </TableRow>
+                            <TableRow>
+                                <TableCell component="th" scope="row">
+                                    {t("storagePath")}
+                                </TableCell>
+                                <TableCell>
+                                    <FormControl>
+                                        <Input
+                                            multiline
+                                            value={policy.DirNameRule}
+                                            onChange={handleChange(
+                                                "DirNameRule"
+                                            )}
+                                        />
+                                    </FormControl>
+                                </TableCell>
+                                <TableCell>{t("storagePathDes")}</TableCell>
+                            </TableRow>
+                            <TableRow>
+                                <TableCell component="th" scope="row">
+                                    {t("fileName")}
+                                </TableCell>
+                                <TableCell>
+                                    <FormControl>
+                                        <Input
+                                            multiline
+                                            value={policy.FileNameRule}
+                                            onChange={handleChange(
+                                                "FileNameRule"
+                                            )}
+                                        />
+                                    </FormControl>
+                                </TableCell>
+                                <TableCell>{t("fileNameDes")}</TableCell>
+                            </TableRow>
+                            <TableRow>
+                                <TableCell component="th" scope="row">
+                                    {t("allowGetSourceLink")}
+                                </TableCell>
+                                <TableCell>
+                                    <FormControl>
+                                        <RadioGroup
+                                            required
+                                            value={policy.IsOriginLinkEnable}
+                                            onChange={handleChange(
+                                                "IsOriginLinkEnable"
+                                            )}
+                                            row
+                                        >
+                                            <FormControlLabel
+                                                value={"true"}
+                                                control={
+                                                    <Radio color={"primary"} />
+                                                }
+                                                label={t("yes")}
+                                            />
+                                            <FormControlLabel
+                                                value={"false"}
+                                                control={
+                                                    <Radio color={"primary"} />
+                                                }
+                                                label={t("no")}
+                                            />
+                                        </RadioGroup>
+                                    </FormControl>
+                                </TableCell>
+                                <TableCell>
+                                    {t("allowGetSourceLinkDes")}
+                                </TableCell>
+                            </TableRow>
+                            <TableRow>
+                                <TableCell component="th" scope="row">
+                                    {t("upyunToken")}
+                                </TableCell>
+                                <TableCell>
+                                    <FormControl>
+                                        <Input
+                                            multiline
+                                            value={
+                                                policy.OptionsSerialized.token
+                                            }
+                                            onChange={handleOptionChange(
+                                                "token"
+                                            )}
+                                        />
+                                    </FormControl>
+                                </TableCell>
+                                <TableCell>{t("upyunOnly")}</TableCell>
+                            </TableRow>
+                            <TableRow>
+                                <TableCell component="th" scope="row">
+                                    {t("allowedFileExtension")}
+                                </TableCell>
+                                <TableCell>
+                                    <FormControl>
+                                        <Input
+                                            multiline
+                                            value={
+                                                policy.OptionsSerialized
+                                                    .file_type
+                                            }
+                                            onChange={handleOptionChange(
+                                                "file_type"
+                                            )}
+                                        />
+                                    </FormControl>
+                                </TableCell>
+                                <TableCell>{t("emptyIsNoLimit")}</TableCell>
+                            </TableRow>
+                            <TableRow>
+                                <TableCell component="th" scope="row">
+                                    {t("allowedMimetype")}
+                                </TableCell>
+                                <TableCell>
+                                    <FormControl>
+                                        <Input
+                                            multiline
+                                            value={
+                                                policy.OptionsSerialized
+                                                    .mimetype
+                                            }
+                                            onChange={handleOptionChange(
+                                                "mimetype"
+                                            )}
+                                        />
+                                    </FormControl>
+                                </TableCell>
+                                <TableCell>{t("qiniuOnly")}</TableCell>
+                            </TableRow>
+                            <TableRow>
+                                <TableCell component="th" scope="row">
+                                    {t("odRedirectURL")}
+                                </TableCell>
+                                <TableCell>
+                                    <FormControl>
+                                        <Input
+                                            multiline
+                                            value={
+                                                policy.OptionsSerialized
+                                                    .od_redirect
+                                            }
+                                            onChange={handleOptionChange(
+                                                "od_redirect"
+                                            )}
+                                        />
+                                    </FormControl>
+                                </TableCell>
+                                <TableCell>
+                                    {t("noModificationNeeded")}
+                                </TableCell>
+                            </TableRow>
+                            <TableRow>
+                                <TableCell component="th" scope="row">
+                                    {t("odReverseProxy")}
+                                </TableCell>
+                                <TableCell>
+                                    <FormControl>
+                                        <Input
+                                            multiline
+                                            value={
+                                                policy.OptionsSerialized
+                                                    .od_proxy
+                                            }
+                                            onChange={handleOptionChange(
+                                                "od_proxy"
+                                            )}
+                                        />
+                                    </FormControl>
+                                </TableCell>
+                                <TableCell>{t("odOnly")}</TableCell>
+                            </TableRow>
+                            <TableRow>
+                                <TableCell component="th" scope="row">
+                                    {t("odDriverID")}
+                                </TableCell>
+                                <TableCell>
+                                    <FormControl>
+                                        <Input
+                                            multiline
+                                            value={
+                                                policy.OptionsSerialized
+                                                    .od_driver
+                                            }
+                                            onChange={handleOptionChange(
+                                                "od_driver"
+                                            )}
+                                        />
+                                    </FormControl>
+                                </TableCell>
+                                <TableCell>{t("odDriverIDDes")}</TableCell>
+                            </TableRow>
+                            <TableRow>
+                                <TableCell component="th" scope="row">
+                                    {t("s3Region")}
+                                </TableCell>
+                                <TableCell>
+                                    <FormControl>
+                                        <Input
+                                            multiline
+                                            value={
+                                                policy.OptionsSerialized.region
+                                            }
+                                            onChange={handleOptionChange(
+                                                "region"
+                                            )}
+                                        />
+                                    </FormControl>
+                                </TableCell>
+                                <TableCell>{t("s3Only")}</TableCell>
+                            </TableRow>
+                            <TableRow>
+                                <TableCell component="th" scope="row">
+                                    {t("lanEndpoint")}
+                                </TableCell>
+                                <TableCell>
+                                    <FormControl>
+                                        <Input
+                                            multiline
+                                            value={
+                                                policy.OptionsSerialized
+                                                    .server_side_endpoint
+                                            }
+                                            onChange={handleOptionChange(
+                                                "server_side_endpoint"
+                                            )}
+                                        />
+                                    </FormControl>
+                                </TableCell>
+                                <TableCell>{t("ossOnly")}</TableCell>
+                            </TableRow>
+                            <TableRow>
+                                <TableCell component="th" scope="row">
+                                    {t("chunkSizeBytes")}
+                                </TableCell>
+                                <TableCell>
+                                    <FormControl>
+                                        <Input
+                                            type={"number"}
+                                            inputProps={{
+                                                min: 0,
+                                                step: 1,
+                                            }}
+                                            value={
+                                                policy.OptionsSerialized
+                                                    .chunk_size
+                                            }
+                                            onChange={handleOptionChange(
+                                                "chunk_size"
+                                            )}
+                                        />
+                                    </FormControl>
+                                </TableCell>
+                                <TableCell>{t("chunkSizeBytesDes")}</TableCell>
+                            </TableRow>
+                            <TableRow>
+                                <TableCell component="th" scope="row">
+                                    {t("placeHolderWithSize")}
+                                </TableCell>
+                                <TableCell>
+                                    <FormControl>
+                                        <RadioGroup
+                                            required
+                                            value={
+                                                policy.OptionsSerialized
+                                                    .placeholder_with_size
+                                            }
+                                            onChange={handleOptionChange(
+                                                "placeholder_with_size"
+                                            )}
+                                            row
+                                        >
+                                            <FormControlLabel
+                                                value={"true"}
+                                                control={
+                                                    <Radio color={"primary"} />
+                                                }
+                                                label={t("yes")}
+                                            />
+                                            <FormControlLabel
+                                                value={"false"}
+                                                control={
+                                                    <Radio color={"primary"} />
+                                                }
+                                                label={t("no")}
+                                            />
+                                        </RadioGroup>
+                                    </FormControl>
+                                </TableCell>
+                                <TableCell>
+                                    {t("placeHolderWithSizeDes")}
+                                </TableCell>
+                            </TableRow>
+                            <TableRow>
+                                <TableCell component="th" scope="row">
+                                    {t("tps")}
+                                </TableCell>
+                                <TableCell>
+                                    <FormControl>
+                                        <Input
+                                            type={"number"}
+                                            inputProps={{
+                                                step: 0.1,
+                                            }}
+                                            value={
+                                                policy.OptionsSerialized
+                                                    .tps_limit
+                                            }
+                                            onChange={handleOptionChange(
+                                                "tps_limit"
+                                            )}
+                                        />
+                                    </FormControl>
+                                </TableCell>
+                                <TableCell>{t("odOnly")}</TableCell>
+                            </TableRow>
+                            <TableRow>
+                                <TableCell component="th" scope="row">
+                                    {t("tpsBurst")}
+                                </TableCell>
+                                <TableCell>
+                                    <FormControl>
+                                        <Input
+                                            type={"number"}
+                                            inputProps={{
+                                                step: 1,
+                                            }}
+                                            value={
+                                                policy.OptionsSerialized
+                                                    .tps_limit_burst
+                                            }
+                                            onChange={handleOptionChange(
+                                                "tps_limit_burst"
+                                            )}
+                                        />
+                                    </FormControl>
+                                </TableCell>
+                                <TableCell>{t("odOnly")}</TableCell>
+                            </TableRow>
+                            <TableRow>
+                                <TableCell component="th" scope="row">
+                                    {t("usePathEndpoint")}
+                                </TableCell>
+                                <TableCell>
+                                    <FormControl>
+                                        <RadioGroup
+                                            required
+                                            value={
+                                                policy.OptionsSerialized
+                                                    .s3_path_style
+                                            }
+                                            onChange={handleOptionChange(
+                                                "s3_path_style"
+                                            )}
+                                            row
+                                        >
+                                            <FormControlLabel
+                                                value={"true"}
+                                                control={
+                                                    <Radio color={"primary"} />
+                                                }
+                                                label={t("yes")}
+                                            />
+                                            <FormControlLabel
+                                                value={"false"}
+                                                control={
+                                                    <Radio color={"primary"} />
+                                                }
+                                                label={t("no")}
+                                            />
+                                        </RadioGroup>
+                                    </FormControl>
+                                </TableCell>
+                                <TableCell>{t("s3Only")}</TableCell>
+                            </TableRow>
+                            <TableRow>
+                                <TableCell component="th" scope="row">
+                                    {t("thumbExt")}
+                                </TableCell>
+                                <TableCell>
+                                    <FormControl>
+                                        <Input
+                                            multiline
+                                            value={
+                                                policy.OptionsSerialized
+                                                    .thumb_exts
+                                            }
+                                            onChange={handleOptionChange(
+                                                "thumb_exts"
+                                            )}
+                                        />
+                                    </FormControl>
+                                </TableCell>
+                                <TableCell>{t("thumbExtDes")}</TableCell>
+                            </TableRow>
+                        </TableBody>
+                    </Table>
+                    <Button
+                        type={"submit"}
+                        color={"primary"}
+                        variant={"contained"}
+                        style={{ margin: 8 }}
+                    >
+                        {t("saveChanges")}
+                    </Button>
+                </form>
+            </TableContainer>
+        </div>
+    );
+}
diff --git a/src/component/Admin/Policy/Guid/LocalGuide.js b/src/component/Admin/Policy/Guid/LocalGuide.js
new file mode 100644
index 0000000..c6c08db
--- /dev/null
+++ b/src/component/Admin/Policy/Guid/LocalGuide.js
@@ -0,0 +1,797 @@
+import { lighten, makeStyles } from "@material-ui/core/styles";
+import React, { useCallback, useState } from "react";
+import Stepper from "@material-ui/core/Stepper";
+import StepLabel from "@material-ui/core/StepLabel";
+import Step from "@material-ui/core/Step";
+import Typography from "@material-ui/core/Typography";
+import { useDispatch } from "react-redux";
+import Link from "@material-ui/core/Link";
+import FormControl from "@material-ui/core/FormControl";
+import InputLabel from "@material-ui/core/InputLabel";
+import Input from "@material-ui/core/Input";
+import RadioGroup from "@material-ui/core/RadioGroup";
+import FormControlLabel from "@material-ui/core/FormControlLabel";
+import Radio from "@material-ui/core/Radio";
+import Collapse from "@material-ui/core/Collapse";
+import Button from "@material-ui/core/Button";
+import API from "../../../../middleware/Api";
+import MagicVar from "../../Dialogs/MagicVar";
+import DomainInput from "../../Common/DomainInput";
+import SizeInput from "../../Common/SizeInput";
+import { useHistory } from "react-router";
+import { toggleSnackbar } from "../../../../redux/explorer";
+import { getNumber } from "../../../../utils";
+import { Trans, useTranslation } from "react-i18next";
+import { transformPolicyRequest } from "../utils";
+
+const useStyles = makeStyles((theme) => ({
+    stepContent: {
+        padding: "16px 32px 16px 32px",
+    },
+    form: {
+        maxWidth: 400,
+        marginTop: 20,
+    },
+    formContainer: {
+        [theme.breakpoints.up("md")]: {
+            padding: "0px 24px 0 24px",
+        },
+    },
+    subStepContainer: {
+        display: "flex",
+        marginBottom: 20,
+        padding: 10,
+        transition: theme.transitions.create("background-color", {
+            easing: theme.transitions.easing.sharp,
+            duration: theme.transitions.duration.leavingScreen,
+        }),
+        "&:focus-within": {
+            backgroundColor: theme.palette.background.default,
+        },
+    },
+    stepNumber: {
+        width: 20,
+        height: 20,
+        backgroundColor: lighten(theme.palette.secondary.light, 0.2),
+        color: theme.palette.secondary.contrastText,
+        textAlign: "center",
+        borderRadius: " 50%",
+    },
+    stepNumberContainer: {
+        marginRight: 10,
+    },
+    stepFooter: {
+        marginTop: 32,
+    },
+    button: {
+        marginRight: theme.spacing(1),
+    },
+}));
+
+const steps = [
+    {
+        title: "storagePathStep",
+        optional: false,
+    },
+    {
+        title: "sourceLinkStep",
+        optional: false,
+    },
+    {
+        title: "uploadSettingStep",
+        optional: false,
+    },
+    {
+        title: "finishStep",
+        optional: false,
+    },
+];
+
+export default function LocalGuide(props) {
+    const { t } = useTranslation("dashboard", { keyPrefix: "policy" });
+    const classes = useStyles();
+    const history = useHistory();
+
+    const [activeStep, setActiveStep] = useState(0);
+    const [loading, setLoading] = useState(false);
+    const [skipped] = React.useState(new Set());
+    const [magicVar, setMagicVar] = useState("");
+    const [useCDN, setUseCDN] = useState("false");
+    const [policy, setPolicy] = useState(
+        props.policy
+            ? props.policy
+            : {
+                  Type: "local",
+                  Name: "",
+                  DirNameRule: "uploads/{uid}/{path}",
+                  AutoRename: "true",
+                  FileNameRule: "{randomkey8}_{originname}",
+                  IsOriginLinkEnable: "false",
+                  BaseURL: "",
+                  IsPrivate: "true",
+                  MaxSize: "0",
+                  OptionsSerialized: {
+                      file_type: "",
+                      chunk_size: 25 << 20,
+                  },
+              }
+    );
+
+    const handleChange = (name) => (event) => {
+        setPolicy({
+            ...policy,
+            [name]: event.target.value,
+        });
+    };
+
+    const handleOptionChange = (name) => (event) => {
+        setPolicy({
+            ...policy,
+            OptionsSerialized: {
+                ...policy.OptionsSerialized,
+                [name]: event.target.value,
+            },
+        });
+    };
+
+    const isStepSkipped = (step) => {
+        return skipped.has(step);
+    };
+
+    const dispatch = useDispatch();
+    const ToggleSnackbar = useCallback(
+        (vertical, horizontal, msg, color) =>
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color)),
+        [dispatch]
+    );
+
+    const checkPathSetting = (e) => {
+        e.preventDefault();
+        setLoading(true);
+
+        // 测试路径是否可用
+        API.post("/admin/policy/test/path", {
+            path: policy.DirNameRule,
+        })
+            .then(() => {
+                setActiveStep(1);
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            })
+            .then(() => {
+                setLoading(false);
+            });
+    };
+
+    const submitPolicy = (e) => {
+        e.preventDefault();
+        setLoading(true);
+
+        let policyCopy = { ...policy };
+        policyCopy.OptionsSerialized = { ...policyCopy.OptionsSerialized };
+
+        // 处理存储策略
+        if (useCDN === "false" || policy.IsOriginLinkEnable === "false") {
+            policyCopy.BaseURL = "";
+        }
+
+        // 类型转换
+        policyCopy = transformPolicyRequest(policyCopy);
+
+        API.post("/admin/policy", {
+            policy: policyCopy,
+        })
+            .then(() => {
+                ToggleSnackbar(
+                    "top",
+                    "right",
+                    props.policy ? t("policySaved") : t("policyAdded"),
+                    "success"
+                );
+                setActiveStep(4);
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            })
+            .then(() => {
+                setLoading(false);
+            });
+
+        setLoading(false);
+    };
+
+    return (
+        <div>
+            <Typography variant={"h6"}>
+                {props.policy
+                    ? t("editLocalStoragePolicy")
+                    : t("addLocalStoragePolicy")}
+            </Typography>
+            <Stepper activeStep={activeStep}>
+                {steps.map((label, index) => {
+                    const stepProps = {};
+                    const labelProps = {};
+                    if (label.optional) {
+                        labelProps.optional = (
+                            <Typography variant="caption">
+                                {t("optional")}
+                            </Typography>
+                        );
+                    }
+                    if (isStepSkipped(index)) {
+                        stepProps.completed = false;
+                    }
+                    return (
+                        <Step key={t(label.title)} {...stepProps}>
+                            <StepLabel {...labelProps}>
+                                {t(label.title)}
+                            </StepLabel>
+                        </Step>
+                    );
+                })}
+            </Stepper>
+            {activeStep === 0 && (
+                <form
+                    className={classes.stepContent}
+                    onSubmit={checkPathSetting}
+                >
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>1</div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                <Trans
+                                    ns={"dashboard"}
+                                    i18nKey={"policy.pathMagicVarDes"}
+                                    components={[
+                                        <Link
+                                            key={0}
+                                            color={"secondary"}
+                                            href={"javascript:void()"}
+                                            onClick={() => setMagicVar("path")}
+                                        />,
+                                    ]}
+                                />
+                            </Typography>
+                            <div className={classes.form}>
+                                <FormControl fullWidth>
+                                    <InputLabel htmlFor="component-helper">
+                                        {t("pathOfFolderToStoreFiles")}
+                                    </InputLabel>
+                                    <Input
+                                        required
+                                        value={policy.DirNameRule}
+                                        onChange={handleChange("DirNameRule")}
+                                    />
+                                </FormControl>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>2</div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                <Trans
+                                    ns={"dashboard"}
+                                    i18nKey={"policy.filePathMagicVarDes"}
+                                    components={[
+                                        <Link
+                                            key={0}
+                                            color={"secondary"}
+                                            href={"javascript:void()"}
+                                            onClick={() => setMagicVar("file")}
+                                        />,
+                                    ]}
+                                />
+                            </Typography>
+                            <div className={classes.form}>
+                                <FormControl required component="fieldset">
+                                    <RadioGroup
+                                        aria-label="gender"
+                                        name="gender1"
+                                        value={policy.AutoRename}
+                                        onChange={handleChange("AutoRename")}
+                                        row
+                                    >
+                                        <FormControlLabel
+                                            value={"true"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("autoRenameStoredFile")}
+                                        />
+                                        <FormControlLabel
+                                            value={"false"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("keepOriginalFileName")}
+                                        />
+                                    </RadioGroup>
+                                </FormControl>
+                            </div>
+
+                            <Collapse in={policy.AutoRename === "true"}>
+                                <div className={classes.form}>
+                                    <FormControl fullWidth>
+                                        <InputLabel htmlFor="component-helper">
+                                            {t("renameRule")}
+                                        </InputLabel>
+                                        <Input
+                                            required={
+                                                policy.AutoRename === "true"
+                                            }
+                                            value={policy.FileNameRule}
+                                            onChange={handleChange(
+                                                "FileNameRule"
+                                            )}
+                                        />
+                                    </FormControl>
+                                </div>
+                            </Collapse>
+                        </div>
+                    </div>
+
+                    <div className={classes.stepFooter}>
+                        <Button
+                            disabled={loading}
+                            type={"submit"}
+                            variant={"contained"}
+                            color={"primary"}
+                        >
+                            {t("next")}
+                        </Button>
+                    </div>
+                </form>
+            )}
+
+            {activeStep === 1 && (
+                <form
+                    className={classes.stepContent}
+                    onSubmit={(e) => {
+                        e.preventDefault();
+                        setActiveStep(2);
+                    }}
+                >
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>1</div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                {t("enableGettingPermanentSourceLink")}
+                                <br />
+                                {t("enableGettingPermanentSourceLinkDes")}
+                            </Typography>
+
+                            <div className={classes.form}>
+                                <FormControl required component="fieldset">
+                                    <RadioGroup
+                                        required
+                                        value={policy.IsOriginLinkEnable}
+                                        onChange={handleChange(
+                                            "IsOriginLinkEnable"
+                                        )}
+                                        row
+                                    >
+                                        <FormControlLabel
+                                            value={"true"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("allowed")}
+                                        />
+                                        <FormControlLabel
+                                            value={"false"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("forbidden")}
+                                        />
+                                    </RadioGroup>
+                                </FormControl>
+                            </div>
+                        </div>
+                    </div>
+
+                    <Collapse in={policy.IsOriginLinkEnable === "true"}>
+                        <div className={classes.subStepContainer}>
+                            <div className={classes.stepNumberContainer}>
+                                <div className={classes.stepNumber}>2</div>
+                            </div>
+                            <div className={classes.subStepContent}>
+                                <Typography variant={"body2"}>
+                                    {t("useCDN")}
+                                    <br />
+                                    {t("useCDNDes")}
+                                </Typography>
+
+                                <div className={classes.form}>
+                                    <FormControl required component="fieldset">
+                                        <RadioGroup
+                                            required
+                                            value={useCDN}
+                                            onChange={(e) => {
+                                                if (
+                                                    e.target.value === "false"
+                                                ) {
+                                                    setPolicy({
+                                                        ...policy,
+                                                        BaseURL: "",
+                                                    });
+                                                }
+                                                setUseCDN(e.target.value);
+                                            }}
+                                            row
+                                        >
+                                            <FormControlLabel
+                                                value={"true"}
+                                                control={
+                                                    <Radio color={"primary"} />
+                                                }
+                                                label={t("use")}
+                                            />
+                                            <FormControlLabel
+                                                value={"false"}
+                                                control={
+                                                    <Radio color={"primary"} />
+                                                }
+                                                label={t("notUse")}
+                                            />
+                                        </RadioGroup>
+                                    </FormControl>
+                                </div>
+                            </div>
+                        </div>
+
+                        <Collapse in={useCDN === "true"}>
+                            <div className={classes.subStepContainer}>
+                                <div className={classes.stepNumberContainer}>
+                                    <div className={classes.stepNumber}>3</div>
+                                </div>
+                                <div className={classes.subStepContent}>
+                                    <Typography variant={"body2"}>
+                                        {t("cdnDomain")}
+                                    </Typography>
+
+                                    <div className={classes.form}>
+                                        <DomainInput
+                                            value={policy.BaseURL}
+                                            onChange={handleChange("BaseURL")}
+                                            required={
+                                                policy.IsOriginLinkEnable ===
+                                                    "true" && useCDN === "true"
+                                            }
+                                            label={t("cdnPrefix")}
+                                        />
+                                    </div>
+                                </div>
+                            </div>
+                        </Collapse>
+                    </Collapse>
+
+                    <div className={classes.stepFooter}>
+                        <Button
+                            color={"default"}
+                            className={classes.button}
+                            onClick={() => setActiveStep(0)}
+                        >
+                            {t("back")}
+                        </Button>{" "}
+                        <Button
+                            disabled={loading}
+                            type={"submit"}
+                            variant={"contained"}
+                            color={"primary"}
+                        >
+                            {t("next")}
+                        </Button>
+                    </div>
+                </form>
+            )}
+
+            {activeStep === 2 && (
+                <form
+                    className={classes.stepContent}
+                    onSubmit={(e) => {
+                        e.preventDefault();
+                        setActiveStep(3);
+                    }}
+                >
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>1</div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                {t("limitFileSize")}
+                            </Typography>
+
+                            <div className={classes.form}>
+                                <FormControl required component="fieldset">
+                                    <RadioGroup
+                                        required
+                                        value={
+                                            policy.MaxSize === "0"
+                                                ? "false"
+                                                : "true"
+                                        }
+                                        onChange={(e) => {
+                                            if (e.target.value === "true") {
+                                                setPolicy({
+                                                    ...policy,
+                                                    MaxSize: "10485760",
+                                                });
+                                            } else {
+                                                setPolicy({
+                                                    ...policy,
+                                                    MaxSize: "0",
+                                                });
+                                            }
+                                        }}
+                                        row
+                                    >
+                                        <FormControlLabel
+                                            value={"true"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("limit")}
+                                        />
+                                        <FormControlLabel
+                                            value={"false"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("notLimit")}
+                                        />
+                                    </RadioGroup>
+                                </FormControl>
+                            </div>
+                        </div>
+                    </div>
+
+                    <Collapse in={policy.MaxSize !== "0"}>
+                        <div className={classes.subStepContainer}>
+                            <div className={classes.stepNumberContainer}>
+                                <div className={classes.stepNumber}>2</div>
+                            </div>
+                            <div className={classes.subStepContent}>
+                                <Typography variant={"body2"}>
+                                    {t("enterSizeLimit")}
+                                </Typography>
+                                <div className={classes.form}>
+                                    <SizeInput
+                                        value={policy.MaxSize}
+                                        onChange={handleChange("MaxSize")}
+                                        min={0}
+                                        max={9223372036854775807}
+                                        label={t("maxSizeOfSingleFile")}
+                                    />
+                                </div>
+                            </div>
+                        </div>
+                    </Collapse>
+
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>
+                                {policy.MaxSize !== "0" ? "3" : "2"}
+                            </div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                {t("limitFileExt")}
+                            </Typography>
+
+                            <div className={classes.form}>
+                                <FormControl required component="fieldset">
+                                    <RadioGroup
+                                        required
+                                        value={
+                                            policy.OptionsSerialized
+                                                .file_type === ""
+                                                ? "false"
+                                                : "true"
+                                        }
+                                        onChange={(e) => {
+                                            if (e.target.value === "true") {
+                                                setPolicy({
+                                                    ...policy,
+                                                    OptionsSerialized: {
+                                                        ...policy.OptionsSerialized,
+                                                        file_type:
+                                                            "jpg,png,mp4,zip,rar",
+                                                    },
+                                                });
+                                            } else {
+                                                setPolicy({
+                                                    ...policy,
+                                                    OptionsSerialized: {
+                                                        ...policy.OptionsSerialized,
+                                                        file_type: "",
+                                                    },
+                                                });
+                                            }
+                                        }}
+                                        row
+                                    >
+                                        <FormControlLabel
+                                            value={"true"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("limit")}
+                                        />
+                                        <FormControlLabel
+                                            value={"false"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("notLimit")}
+                                        />
+                                    </RadioGroup>
+                                </FormControl>
+                            </div>
+                        </div>
+                    </div>
+
+                    <Collapse in={policy.OptionsSerialized.file_type !== ""}>
+                        <div className={classes.subStepContainer}>
+                            <div className={classes.stepNumberContainer}>
+                                <div className={classes.stepNumber}>
+                                    {policy.MaxSize !== "0" ? "4" : "3"}
+                                </div>
+                            </div>
+                            <div className={classes.subStepContent}>
+                                <Typography variant={"body2"}>
+                                    {t("enterFileExt")}
+                                </Typography>
+                                <div className={classes.form}>
+                                    <FormControl fullWidth>
+                                        <InputLabel htmlFor="component-helper">
+                                            {t("extList")}
+                                        </InputLabel>
+                                        <Input
+                                            value={
+                                                policy.OptionsSerialized
+                                                    .file_type
+                                            }
+                                            onChange={handleOptionChange(
+                                                "file_type"
+                                            )}
+                                        />
+                                    </FormControl>
+                                </div>
+                            </div>
+                        </div>
+                    </Collapse>
+
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>
+                                {getNumber(3, [
+                                    policy.MaxSize !== "0",
+                                    policy.OptionsSerialized.file_type !== "",
+                                ])}
+                            </div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                {t("chunkSizeLabel")}
+                                <br />
+                                {t("chunkSizeDes")}
+                            </Typography>
+                            <div className={classes.form}>
+                                <SizeInput
+                                    value={policy.OptionsSerialized.chunk_size}
+                                    onChange={handleOptionChange("chunk_size")}
+                                    min={0}
+                                    max={9223372036854775807}
+                                    label={t("chunkSize")}
+                                />
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className={classes.stepFooter}>
+                        <Button
+                            color={"default"}
+                            className={classes.button}
+                            onClick={() => setActiveStep(1)}
+                        >
+                            {t("back")}
+                        </Button>{" "}
+                        <Button
+                            disabled={loading}
+                            type={"submit"}
+                            variant={"contained"}
+                            color={"primary"}
+                        >
+                            {t("next")}
+                        </Button>
+                    </div>
+                </form>
+            )}
+
+            {activeStep === 3 && (
+                <form className={classes.stepContent} onSubmit={submitPolicy}>
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer} />
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                {t("nameThePolicy")}
+                            </Typography>
+                            <div className={classes.form}>
+                                <FormControl fullWidth>
+                                    <InputLabel htmlFor="component-helper">
+                                        {t("policyName")}
+                                    </InputLabel>
+                                    <Input
+                                        required
+                                        value={policy.Name}
+                                        onChange={handleChange("Name")}
+                                    />
+                                </FormControl>
+                            </div>
+                        </div>
+                    </div>
+                    <div className={classes.stepFooter}>
+                        <Button
+                            color={"default"}
+                            className={classes.button}
+                            onClick={() => setActiveStep(2)}
+                        >
+                            {t("back")}
+                        </Button>{" "}
+                        <Button
+                            disabled={loading}
+                            type={"submit"}
+                            variant={"contained"}
+                            color={"primary"}
+                        >
+                            {t("finish")}
+                        </Button>
+                    </div>
+                </form>
+            )}
+
+            {activeStep === 4 && (
+                <>
+                    <form className={classes.stepContent}>
+                        <Typography>
+                            {props.policy ? t("policySaved") : t("policyAdded")}
+                        </Typography>
+                        <Typography variant={"body2"} color={"textSecondary"}>
+                            {t("furtherActions")}
+                        </Typography>
+                    </form>
+                    <div className={classes.stepFooter}>
+                        <Button
+                            color={"primary"}
+                            className={classes.button}
+                            onClick={() => history.push("/admin/policy")}
+                        >
+                            {t("backToList")}
+                        </Button>
+                    </div>
+                </>
+            )}
+
+            <MagicVar
+                open={magicVar === "file"}
+                isFile
+                onClose={() => setMagicVar("")}
+            />
+            <MagicVar
+                open={magicVar === "path"}
+                onClose={() => setMagicVar("")}
+            />
+        </div>
+    );
+}
diff --git a/src/component/Admin/Policy/Guid/OSSGuide.js b/src/component/Admin/Policy/Guid/OSSGuide.js
new file mode 100644
index 0000000..c04b1d8
--- /dev/null
+++ b/src/component/Admin/Policy/Guid/OSSGuide.js
@@ -0,0 +1,1204 @@
+import { lighten, makeStyles } from "@material-ui/core/styles";
+import React, { useCallback, useState } from "react";
+import Stepper from "@material-ui/core/Stepper";
+import StepLabel from "@material-ui/core/StepLabel";
+import Step from "@material-ui/core/Step";
+import Typography from "@material-ui/core/Typography";
+import { useDispatch } from "react-redux";
+import Link from "@material-ui/core/Link";
+import FormControl from "@material-ui/core/FormControl";
+import InputLabel from "@material-ui/core/InputLabel";
+import Input from "@material-ui/core/Input";
+import RadioGroup from "@material-ui/core/RadioGroup";
+import FormControlLabel from "@material-ui/core/FormControlLabel";
+import Radio from "@material-ui/core/Radio";
+import Collapse from "@material-ui/core/Collapse";
+import Button from "@material-ui/core/Button";
+import API from "../../../../middleware/Api";
+import MagicVar from "../../Dialogs/MagicVar";
+import DomainInput from "../../Common/DomainInput";
+import SizeInput from "../../Common/SizeInput";
+import { useHistory } from "react-router";
+import { getNumber } from "../../../../utils";
+import { toggleSnackbar } from "../../../../redux/explorer";
+import { Trans, useTranslation } from "react-i18next";
+import { transformPolicyRequest } from "../utils";
+
+const useStyles = makeStyles((theme) => ({
+    stepContent: {
+        padding: "16px 32px 16px 32px",
+    },
+    form: {
+        maxWidth: 400,
+        marginTop: 20,
+    },
+    formContainer: {
+        [theme.breakpoints.up("md")]: {
+            padding: "0px 24px 0 24px",
+        },
+    },
+    subStepContainer: {
+        display: "flex",
+        marginBottom: 20,
+        padding: 10,
+        transition: theme.transitions.create("background-color", {
+            easing: theme.transitions.easing.sharp,
+            duration: theme.transitions.duration.leavingScreen,
+        }),
+        "&:focus-within": {
+            backgroundColor: theme.palette.background.default,
+        },
+    },
+    stepNumber: {
+        width: 20,
+        height: 20,
+        backgroundColor: lighten(theme.palette.secondary.light, 0.2),
+        color: theme.palette.secondary.contrastText,
+        textAlign: "center",
+        borderRadius: " 50%",
+    },
+    stepNumberContainer: {
+        marginRight: 10,
+    },
+    stepFooter: {
+        marginTop: 32,
+    },
+    button: {
+        marginRight: theme.spacing(1),
+    },
+    viewButtonLabel: { textTransform: "none" },
+    "@global": {
+        code: {
+            color: "rgba(0, 0, 0, 0.87)",
+            display: "inline-block",
+            padding: "2px 6px",
+            fontFamily:
+                ' Consolas, "Liberation Mono", Menlo, Courier, monospace',
+            borderRadius: "2px",
+            backgroundColor: "rgba(255,229,100,0.1)",
+        },
+    },
+}));
+
+const steps = [
+    {
+        title: "storageBucket",
+        optional: false,
+    },
+    {
+        title: "storagePathStep",
+        optional: false,
+    },
+    {
+        title: "sourceLinkStep",
+        optional: false,
+    },
+    {
+        title: "uploadSettingStep",
+        optional: false,
+    },
+    {
+        title: "corsSettingStep",
+        optional: true,
+    },
+    {
+        title: "finishStep",
+        optional: false,
+    },
+];
+
+export default function OSSGuide(props) {
+    const { t } = useTranslation("dashboard", { keyPrefix: "policy" });
+    const classes = useStyles();
+    const history = useHistory();
+
+    const [activeStep, setActiveStep] = useState(0);
+    const [loading, setLoading] = useState(false);
+    const [skipped, setSkipped] = React.useState(new Set());
+    const [magicVar, setMagicVar] = useState("");
+    const [useCDN, setUseCDN] = useState("false");
+    const [useLanEndpoint, setUseLanEndpoint] = useState(
+        props.policy && props.policy.OptionsSerialized.server_side_endpoint
+            ? props.policy.OptionsSerialized.server_side_endpoint !== ""
+            : false
+    );
+    const [policy, setPolicy] = useState(
+        props.policy
+            ? props.policy
+            : {
+                  Type: "oss",
+                  Name: "",
+                  SecretKey: "",
+                  AccessKey: "",
+                  BaseURL: "",
+                  Server: "",
+                  IsPrivate: "true",
+                  DirNameRule: "uploads/{year}/{month}/{day}",
+                  AutoRename: "true",
+                  FileNameRule: "{randomkey8}_{originname}",
+                  IsOriginLinkEnable: "false",
+                  MaxSize: "0",
+                  OptionsSerialized: {
+                      file_type: "",
+                      server_side_endpoint: "",
+                      chunk_size: 25 << 20,
+                      placeholder_with_size: "false",
+                  },
+              }
+    );
+    const [policyID, setPolicyID] = useState(
+        props.policy ? props.policy.ID : 0
+    );
+
+    const handleChange = (name) => (event) => {
+        setPolicy({
+            ...policy,
+            [name]: event.target.value,
+        });
+    };
+
+    const handleOptionChange = (name) => (event) => {
+        setPolicy({
+            ...policy,
+            OptionsSerialized: {
+                ...policy.OptionsSerialized,
+                [name]: event.target.value,
+            },
+        });
+    };
+
+    const isStepSkipped = (step) => {
+        return skipped.has(step);
+    };
+
+    const dispatch = useDispatch();
+    const ToggleSnackbar = useCallback(
+        (vertical, horizontal, msg, color) =>
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color)),
+        [dispatch]
+    );
+
+    const submitPolicy = (e) => {
+        e.preventDefault();
+        setLoading(true);
+
+        let policyCopy = { ...policy };
+        policyCopy.OptionsSerialized = { ...policyCopy.OptionsSerialized };
+
+        if (useCDN === "false") {
+            policyCopy.BaseURL = "";
+        }
+
+        if (!useLanEndpoint) {
+            policyCopy.OptionsSerialized.server_side_endpoint = "";
+        }
+
+        // 类型转换
+        policyCopy = transformPolicyRequest(policyCopy);
+
+        API.post("/admin/policy", {
+            policy: policyCopy,
+        })
+            .then((response) => {
+                ToggleSnackbar(
+                    "top",
+                    "right",
+                    props.policy ? t("policySaved") : t("policyAdded"),
+                    "success"
+                );
+                setActiveStep(4);
+                setPolicyID(response.data);
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            })
+            .then(() => {
+                setLoading(false);
+            });
+
+        setLoading(false);
+    };
+
+    const createCORS = () => {
+        setLoading(true);
+        API.post("/admin/policy/cors", {
+            id: policyID,
+        })
+            .then(() => {
+                ToggleSnackbar("top", "right", t("corsPolicyAdded"), "success");
+                setActiveStep(5);
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            })
+            .then(() => {
+                setLoading(false);
+            });
+    };
+
+    return (
+        <div>
+            <Typography variant={"h6"}>
+                {props.policy
+                    ? t("editOSSStoragePolicy")
+                    : t("addOSSStoragePolicy")}
+            </Typography>
+            <Stepper activeStep={activeStep}>
+                {steps.map((label, index) => {
+                    const stepProps = {};
+                    const labelProps = {};
+                    if (label.optional) {
+                        labelProps.optional = (
+                            <Typography variant="caption">
+                                {t("optional")}
+                            </Typography>
+                        );
+                    }
+                    if (isStepSkipped(index)) {
+                        stepProps.completed = false;
+                    }
+                    return (
+                        <Step key={label.title} {...stepProps}>
+                            <StepLabel {...labelProps}>
+                                {t(label.title)}
+                            </StepLabel>
+                        </Step>
+                    );
+                })}
+            </Stepper>
+
+            {activeStep === 0 && (
+                <form
+                    className={classes.stepContent}
+                    onSubmit={(e) => {
+                        e.preventDefault();
+                        setActiveStep(1);
+                    }}
+                >
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>0</div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                <Trans
+                                    ns={"dashboard"}
+                                    i18nKey={"policy.wanSiteURLDes"}
+                                    components={[<strong key={0} />]}
+                                />
+                            </Typography>
+                        </div>
+                    </div>
+
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>1</div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                <Trans
+                                    ns={"dashboard"}
+                                    i18nKey={"policy.createOSSBucketDes"}
+                                    components={[
+                                        <Link
+                                            key={0}
+                                            href={
+                                                "https://oss.console.aliyun.com/overview"
+                                            }
+                                            target={"_blank"}
+                                        />,
+                                        <code key={1} />,
+                                        <code key={2} />,
+                                        <code key={3} />,
+                                    ]}
+                                />
+                            </Typography>
+                        </div>
+                    </div>
+
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>2</div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                <Trans
+                                    ns={"dashboard"}
+                                    i18nKey={"policy.ossBucketNameDes"}
+                                    components={[<code key={0} />]}
+                                />
+                            </Typography>
+                            <div className={classes.form}>
+                                <FormControl fullWidth>
+                                    <InputLabel htmlFor="component-helper">
+                                        {t("bucketName")}
+                                    </InputLabel>
+                                    <Input
+                                        required
+                                        value={policy.BucketName}
+                                        onChange={handleChange("BucketName")}
+                                    />
+                                </FormControl>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>3</div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                {t("bucketTypeDes")}
+                            </Typography>
+                            <div className={classes.form}>
+                                <FormControl required component="fieldset">
+                                    <RadioGroup
+                                        required
+                                        value={policy.IsPrivate}
+                                        onChange={handleChange("IsPrivate")}
+                                        row
+                                    >
+                                        <FormControlLabel
+                                            value={"true"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("privateBucket")}
+                                        />
+                                        <FormControlLabel
+                                            value={"false"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("publicReadBucket")}
+                                        />
+                                    </RadioGroup>
+                                </FormControl>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>4</div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                <Trans
+                                    ns={"dashboard"}
+                                    i18nKey={"policy.ossEndpointDes"}
+                                    components={[
+                                        <code key={0} />,
+                                        <code key={1} />,
+                                        <code key={2} />,
+                                    ]}
+                                />
+                            </Typography>
+                            <div className={classes.form}>
+                                <FormControl fullWidth>
+                                    <InputLabel htmlFor="component-helper">
+                                        {t("endpoint")}
+                                    </InputLabel>
+                                    <Input
+                                        required
+                                        value={policy.Server}
+                                        onChange={handleChange("Server")}
+                                        inputProps={{
+                                            pattern:
+                                                "(?:(?:(?<thld>[\\w\\-]*)(?:\\.))?(?<sld>[\\w\\-]*))\\.(?<tld>[\\w\\-]*)",
+                                            title: t("endpointDomainOnly"),
+                                        }}
+                                    />
+                                </FormControl>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>5</div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                {t("ossLANEndpointDes")}
+                            </Typography>
+                            <div className={classes.form}>
+                                <FormControl required component="fieldset">
+                                    <RadioGroup
+                                        required
+                                        value={useLanEndpoint.toString()}
+                                        onChange={(e) => {
+                                            setUseLanEndpoint(
+                                                e.target.value === "true"
+                                            );
+                                        }}
+                                        row
+                                    >
+                                        <FormControlLabel
+                                            value={"true"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("use")}
+                                        />
+                                        <FormControlLabel
+                                            value={"false"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("notUse")}
+                                        />
+                                    </RadioGroup>
+                                </FormControl>
+                            </div>
+                            <Collapse in={useLanEndpoint}>
+                                <div className={classes.form}>
+                                    <FormControl fullWidth>
+                                        <InputLabel htmlFor="component-helper">
+                                            {t("intranetEndPoint")}
+                                        </InputLabel>
+                                        <Input
+                                            required={useLanEndpoint}
+                                            value={
+                                                policy.OptionsSerialized
+                                                    .server_side_endpoint
+                                            }
+                                            onChange={handleOptionChange(
+                                                "server_side_endpoint"
+                                            )}
+                                            inputProps={{
+                                                pattern:
+                                                    "(?:(?:(?<thld>[\\w\\-]*)(?:\\.))?(?<sld>[\\w\\-]*))\\.(?<tld>[\\w\\-]*)",
+                                                title: t("endpointDomainOnly"),
+                                            }}
+                                        />
+                                    </FormControl>
+                                </div>
+                            </Collapse>
+                        </div>
+                    </div>
+
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>6</div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                {t("ossCDNDes")}
+                            </Typography>
+                            <div className={classes.form}>
+                                <FormControl required component="fieldset">
+                                    <RadioGroup
+                                        required
+                                        value={useCDN}
+                                        onChange={(e) => {
+                                            setUseCDN(e.target.value);
+                                        }}
+                                        row
+                                    >
+                                        <FormControlLabel
+                                            value={"true"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("use")}
+                                        />
+                                        <FormControlLabel
+                                            value={"false"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("notUse")}
+                                        />
+                                    </RadioGroup>
+                                </FormControl>
+                            </div>
+                        </div>
+                    </div>
+
+                    <Collapse in={useCDN === "true"}>
+                        <div className={classes.subStepContainer}>
+                            <div className={classes.stepNumberContainer}>
+                                <div className={classes.stepNumber}>7</div>
+                            </div>
+                            <div className={classes.subStepContent}>
+                                <Typography variant={"body2"}>
+                                    <Trans
+                                        ns={"dashboard"}
+                                        i18nKey={"policy.createOSSCDNDes"}
+                                        components={[
+                                            <Link
+                                                key={0}
+                                                href={
+                                                    "https://cdn.console.aliyun.com/domain/list"
+                                                }
+                                                target={"_blank"}
+                                            />,
+                                        ]}
+                                    />
+                                </Typography>
+                                <div className={classes.form}>
+                                    <DomainInput
+                                        value={policy.BaseURL}
+                                        onChange={handleChange("BaseURL")}
+                                        required={useCDN === "true"}
+                                        label={t("bucketCDNDomain")}
+                                    />
+                                </div>
+                            </div>
+                        </div>
+                    </Collapse>
+
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>
+                                {getNumber(7, [useCDN === "true"])}
+                            </div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                <Trans
+                                    ns={"dashboard"}
+                                    i18nKey={"policy.ossAKDes"}
+                                    components={[
+                                        <Link
+                                            key={0}
+                                            href={
+                                                "https://usercenter.console.aliyun.com/#/manage/ak"
+                                            }
+                                            target={"_blank"}
+                                        />,
+                                    ]}
+                                />
+                            </Typography>
+                            <div className={classes.form}>
+                                <FormControl fullWidth>
+                                    <InputLabel htmlFor="component-helper">
+                                        AccessKey ID
+                                    </InputLabel>
+                                    <Input
+                                        required
+                                        inputProps={{
+                                            pattern: "\\S+",
+                                            title: t("shouldNotContainSpace"),
+                                        }}
+                                        value={policy.AccessKey}
+                                        onChange={handleChange("AccessKey")}
+                                    />
+                                </FormControl>
+                            </div>
+                            <div className={classes.form}>
+                                <FormControl fullWidth>
+                                    <InputLabel htmlFor="component-helper">
+                                        Access Key Secret
+                                    </InputLabel>
+                                    <Input
+                                        required
+                                        inputProps={{
+                                            pattern: "\\S+",
+                                            title: t("shouldNotContainSpace"),
+                                        }}
+                                        value={policy.SecretKey}
+                                        onChange={handleChange("SecretKey")}
+                                    />
+                                </FormControl>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>
+                                {getNumber(8, [useCDN === "true"])}
+                            </div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                {t("nameThePolicyFirst")}
+                            </Typography>
+                            <div className={classes.form}>
+                                <FormControl fullWidth>
+                                    <InputLabel htmlFor="component-helper">
+                                        {t("policyName")}
+                                    </InputLabel>
+                                    <Input
+                                        required
+                                        value={policy.Name}
+                                        onChange={handleChange("Name")}
+                                    />
+                                </FormControl>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className={classes.stepFooter}>
+                        <Button
+                            disabled={loading}
+                            type={"submit"}
+                            variant={"contained"}
+                            color={"primary"}
+                        >
+                            {t("next")}
+                        </Button>
+                    </div>
+                </form>
+            )}
+
+            {activeStep === 1 && (
+                <form
+                    className={classes.stepContent}
+                    onSubmit={(e) => {
+                        e.preventDefault();
+                        setActiveStep(2);
+                    }}
+                >
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>1</div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                <Trans
+                                    ns={"dashboard"}
+                                    i18nKey={"policy.pathMagicVarDes"}
+                                    components={[
+                                        <Link
+                                            key={0}
+                                            color={"secondary"}
+                                            href={"javascript:void()"}
+                                            onClick={() => setMagicVar("path")}
+                                        />,
+                                    ]}
+                                />
+                            </Typography>
+                            <div className={classes.form}>
+                                <FormControl fullWidth>
+                                    <InputLabel htmlFor="component-helper">
+                                        {t("pathOfFolderToStoreFiles")}
+                                    </InputLabel>
+                                    <Input
+                                        required
+                                        value={policy.DirNameRule}
+                                        onChange={handleChange("DirNameRule")}
+                                    />
+                                </FormControl>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>2</div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                <Trans
+                                    ns={"dashboard"}
+                                    i18nKey={"policy.filePathMagicVarDes"}
+                                    components={[
+                                        <Link
+                                            key={0}
+                                            color={"secondary"}
+                                            href={"javascript:void()"}
+                                            onClick={() => setMagicVar("file")}
+                                        />,
+                                    ]}
+                                />
+                            </Typography>
+                            <div className={classes.form}>
+                                <FormControl required component="fieldset">
+                                    <RadioGroup
+                                        aria-label="gender"
+                                        name="gender1"
+                                        value={policy.AutoRename}
+                                        onChange={handleChange("AutoRename")}
+                                        row
+                                    >
+                                        <FormControlLabel
+                                            value={"true"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("autoRenameStoredFile")}
+                                        />
+                                        <FormControlLabel
+                                            value={"false"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("keepOriginalFileName")}
+                                        />
+                                    </RadioGroup>
+                                </FormControl>
+                            </div>
+
+                            <Collapse in={policy.AutoRename === "true"}>
+                                <div className={classes.form}>
+                                    <FormControl fullWidth>
+                                        <InputLabel htmlFor="component-helper">
+                                            {t("renameRule")}
+                                        </InputLabel>
+                                        <Input
+                                            required={
+                                                policy.AutoRename === "true"
+                                            }
+                                            value={policy.FileNameRule}
+                                            onChange={handleChange(
+                                                "FileNameRule"
+                                            )}
+                                        />
+                                    </FormControl>
+                                </div>
+                            </Collapse>
+                        </div>
+                    </div>
+
+                    <div className={classes.stepFooter}>
+                        <Button
+                            color={"default"}
+                            className={classes.button}
+                            onClick={() => setActiveStep(0)}
+                        >
+                            {t("back")}
+                        </Button>
+                        <Button
+                            disabled={loading}
+                            type={"submit"}
+                            variant={"contained"}
+                            color={"primary"}
+                        >
+                            {t("next")}
+                        </Button>
+                    </div>
+                </form>
+            )}
+
+            {activeStep === 2 && (
+                <form
+                    className={classes.stepContent}
+                    onSubmit={(e) => {
+                        e.preventDefault();
+                        setActiveStep(3);
+                    }}
+                >
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>1</div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                {t("enableGettingPermanentSourceLink")}
+                                <br />
+                                {t("enableGettingPermanentSourceLinkDes")}
+                            </Typography>
+
+                            <div className={classes.form}>
+                                <FormControl required component="fieldset">
+                                    <RadioGroup
+                                        required
+                                        value={policy.IsOriginLinkEnable}
+                                        onChange={(e) => {
+                                            if (
+                                                policy.IsPrivate === "true" &&
+                                                e.target.value === "true"
+                                            ) {
+                                                ToggleSnackbar(
+                                                    "top",
+                                                    "right",
+                                                    t(
+                                                        "cannotEnableForPrivateBucket"
+                                                    ),
+                                                    "warning"
+                                                );
+                                            }
+                                            handleChange("IsOriginLinkEnable")(
+                                                e
+                                            );
+                                        }}
+                                        row
+                                    >
+                                        <FormControlLabel
+                                            value={"true"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("allowed")}
+                                        />
+                                        <FormControlLabel
+                                            value={"false"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("forbidden")}
+                                        />
+                                    </RadioGroup>
+                                </FormControl>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className={classes.stepFooter}>
+                        <Button
+                            color={"default"}
+                            className={classes.button}
+                            onClick={() => setActiveStep(1)}
+                        >
+                            {t("back")}
+                        </Button>{" "}
+                        <Button
+                            disabled={loading}
+                            type={"submit"}
+                            variant={"contained"}
+                            color={"primary"}
+                        >
+                            {t("next")}
+                        </Button>
+                    </div>
+                </form>
+            )}
+
+            {activeStep === 3 && (
+                <form className={classes.stepContent} onSubmit={submitPolicy}>
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>1</div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                {t("limitFileSize")}
+                            </Typography>
+
+                            <div className={classes.form}>
+                                <FormControl required component="fieldset">
+                                    <RadioGroup
+                                        required
+                                        value={
+                                            policy.MaxSize === "0"
+                                                ? "false"
+                                                : "true"
+                                        }
+                                        onChange={(e) => {
+                                            if (e.target.value === "true") {
+                                                setPolicy({
+                                                    ...policy,
+                                                    MaxSize: "10485760",
+                                                });
+                                            } else {
+                                                setPolicy({
+                                                    ...policy,
+                                                    MaxSize: "0",
+                                                });
+                                            }
+                                        }}
+                                        row
+                                    >
+                                        <FormControlLabel
+                                            value={"true"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("limit")}
+                                        />
+                                        <FormControlLabel
+                                            value={"false"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("notLimit")}
+                                        />
+                                    </RadioGroup>
+                                </FormControl>
+                            </div>
+                        </div>
+                    </div>
+
+                    <Collapse in={policy.MaxSize !== "0"}>
+                        <div className={classes.subStepContainer}>
+                            <div className={classes.stepNumberContainer}>
+                                <div className={classes.stepNumber}>2</div>
+                            </div>
+                            <div className={classes.subStepContent}>
+                                <Typography variant={"body2"}>
+                                    {t("enterSizeLimit")}
+                                </Typography>
+                                <div className={classes.form}>
+                                    <SizeInput
+                                        value={policy.MaxSize}
+                                        onChange={handleChange("MaxSize")}
+                                        min={0}
+                                        max={9223372036854775807}
+                                        label={t("maxSizeOfSingleFile")}
+                                    />
+                                </div>
+                            </div>
+                        </div>
+                    </Collapse>
+
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>
+                                {policy.MaxSize !== "0" ? "3" : "2"}
+                            </div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                {t("limitFileExt")}
+                            </Typography>
+
+                            <div className={classes.form}>
+                                <FormControl required component="fieldset">
+                                    <RadioGroup
+                                        required
+                                        value={
+                                            policy.OptionsSerialized
+                                                .file_type === ""
+                                                ? "false"
+                                                : "true"
+                                        }
+                                        onChange={(e) => {
+                                            if (e.target.value === "true") {
+                                                setPolicy({
+                                                    ...policy,
+                                                    OptionsSerialized: {
+                                                        ...policy.OptionsSerialized,
+                                                        file_type:
+                                                            "jpg,png,mp4,zip,rar",
+                                                    },
+                                                });
+                                            } else {
+                                                setPolicy({
+                                                    ...policy,
+                                                    OptionsSerialized: {
+                                                        ...policy.OptionsSerialized,
+                                                        file_type: "",
+                                                    },
+                                                });
+                                            }
+                                        }}
+                                        row
+                                    >
+                                        <FormControlLabel
+                                            value={"true"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("limit")}
+                                        />
+                                        <FormControlLabel
+                                            value={"false"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("notLimit")}
+                                        />
+                                    </RadioGroup>
+                                </FormControl>
+                            </div>
+                        </div>
+                    </div>
+
+                    <Collapse in={policy.OptionsSerialized.file_type !== ""}>
+                        <div className={classes.subStepContainer}>
+                            <div className={classes.stepNumberContainer}>
+                                <div className={classes.stepNumber}>
+                                    {policy.MaxSize !== "0" ? "4" : "3"}
+                                </div>
+                            </div>
+                            <div className={classes.subStepContent}>
+                                <Typography variant={"body2"}>
+                                    {t("enterFileExt")}
+                                </Typography>
+                                <div className={classes.form}>
+                                    <FormControl fullWidth>
+                                        <InputLabel htmlFor="component-helper">
+                                            {t("extList")}
+                                        </InputLabel>
+                                        <Input
+                                            value={
+                                                policy.OptionsSerialized
+                                                    .file_type
+                                            }
+                                            onChange={handleOptionChange(
+                                                "file_type"
+                                            )}
+                                        />
+                                    </FormControl>
+                                </div>
+                            </div>
+                        </div>
+                    </Collapse>
+
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>
+                                {getNumber(3, [
+                                    policy.MaxSize !== "0",
+                                    policy.OptionsSerialized.file_type !== "",
+                                ])}
+                            </div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                {t("chunkSizeLabelOSS")}
+                                <br />
+                                {t("chunkSizeDes")}
+                            </Typography>
+                            <div className={classes.form}>
+                                <SizeInput
+                                    value={policy.OptionsSerialized.chunk_size}
+                                    onChange={handleOptionChange("chunk_size")}
+                                    min={100 * 1024}
+                                    max={5368709120}
+                                    label={t("chunkSize")}
+                                />
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>
+                                {getNumber(4, [
+                                    policy.MaxSize !== "0",
+                                    policy.OptionsSerialized.file_type !== "",
+                                ])}
+                            </div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                {t("createPlaceholderDes")}
+                            </Typography>
+                            <div className={classes.form}>
+                                <FormControl required component="fieldset">
+                                    <RadioGroup
+                                        aria-label="gender"
+                                        name="gender1"
+                                        value={
+                                            policy.OptionsSerialized
+                                                .placeholder_with_size
+                                        }
+                                        onChange={handleOptionChange(
+                                            "placeholder_with_size"
+                                        )}
+                                        row
+                                    >
+                                        <FormControlLabel
+                                            value={"true"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("createPlaceholder")}
+                                        />
+                                        <FormControlLabel
+                                            value={"false"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("notCreatePlaceholder")}
+                                        />
+                                    </RadioGroup>
+                                </FormControl>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className={classes.stepFooter}>
+                        <Button
+                            color={"default"}
+                            className={classes.button}
+                            onClick={() => setActiveStep(2)}
+                        >
+                            {t("back")}
+                        </Button>{" "}
+                        <Button
+                            disabled={loading}
+                            type={"submit"}
+                            variant={"contained"}
+                            color={"primary"}
+                        >
+                            {t("next")}
+                        </Button>
+                    </div>
+                </form>
+            )}
+
+            {activeStep === 4 && (
+                <form className={classes.stepContent} onSubmit={submitPolicy}>
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer} />
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                {t("ossCORSDes")}
+                            </Typography>
+                            <div className={classes.form}>
+                                <Button
+                                    disabled={loading}
+                                    color={"secondary"}
+                                    variant={"contained"}
+                                    className={classes.button}
+                                    onClick={() => createCORS()}
+                                    classes={{ label: classes.viewButtonLabel }}
+                                >
+                                    {t("letCloudreveHelpMe")}
+                                </Button>
+                            </div>
+                        </div>
+                    </div>
+                    <div className={classes.stepFooter}>
+                        <Button
+                            color={"default"}
+                            className={classes.button}
+                            onClick={() => {
+                                setActiveStep(
+                                    (prevActiveStep) => prevActiveStep + 1
+                                );
+                                setSkipped((prevSkipped) => {
+                                    const newSkipped = new Set(
+                                        prevSkipped.values()
+                                    );
+                                    newSkipped.add(activeStep);
+                                    return newSkipped;
+                                });
+                            }}
+                        >
+                            {t("skip")}
+                        </Button>{" "}
+                    </div>
+                </form>
+            )}
+
+            {activeStep === 5 && (
+                <>
+                    <form className={classes.stepContent}>
+                        <Typography>
+                            {props.policy ? t("policySaved") : t("policyAdded")}
+                        </Typography>
+                        <Typography variant={"body2"} color={"textSecondary"}>
+                            {t("furtherActions")}
+                        </Typography>
+                    </form>
+                    <div className={classes.stepFooter}>
+                        <Button
+                            color={"primary"}
+                            className={classes.button}
+                            onClick={() => history.push("/admin/policy")}
+                        >
+                            {t("backToList")}
+                        </Button>
+                    </div>
+                </>
+            )}
+
+            <MagicVar
+                open={magicVar === "file"}
+                isFile
+                onClose={() => setMagicVar("")}
+            />
+            <MagicVar
+                open={magicVar === "path"}
+                onClose={() => setMagicVar("")}
+            />
+        </div>
+    );
+}
diff --git a/src/component/Admin/Policy/Guid/OneDriveGuide.js b/src/component/Admin/Policy/Guid/OneDriveGuide.js
new file mode 100644
index 0000000..55bf078
--- /dev/null
+++ b/src/component/Admin/Policy/Guid/OneDriveGuide.js
@@ -0,0 +1,1323 @@
+import { lighten, makeStyles } from "@material-ui/core/styles";
+import React, { useCallback, useEffect, useState } from "react";
+import Stepper from "@material-ui/core/Stepper";
+import StepLabel from "@material-ui/core/StepLabel";
+import Step from "@material-ui/core/Step";
+import Typography from "@material-ui/core/Typography";
+import { useDispatch } from "react-redux";
+import Link from "@material-ui/core/Link";
+import FormControl from "@material-ui/core/FormControl";
+import InputLabel from "@material-ui/core/InputLabel";
+import Input from "@material-ui/core/Input";
+import RadioGroup from "@material-ui/core/RadioGroup";
+import FormControlLabel from "@material-ui/core/FormControlLabel";
+import Radio from "@material-ui/core/Radio";
+import Collapse from "@material-ui/core/Collapse";
+import Button from "@material-ui/core/Button";
+import API from "../../../../middleware/Api";
+import MagicVar from "../../Dialogs/MagicVar";
+import SizeInput from "../../Common/SizeInput";
+import { useHistory } from "react-router";
+import AlertDialog from "../../Dialogs/Alert";
+import { getNumber } from "../../../../utils";
+import DomainInput from "../../Common/DomainInput";
+import { toggleSnackbar } from "../../../../redux/explorer";
+import FormHelperText from "@material-ui/core/FormHelperText";
+import { Trans, useTranslation } from "react-i18next";
+import { transformPolicyRequest } from "../utils";
+
+const useStyles = makeStyles((theme) => ({
+    stepContent: {
+        padding: "16px 32px 16px 32px",
+    },
+    form: {
+        maxWidth: 400,
+        marginTop: 20,
+    },
+    formContainer: {
+        [theme.breakpoints.up("md")]: {
+            padding: "0px 24px 0 24px",
+        },
+    },
+    subStepContainer: {
+        display: "flex",
+        marginBottom: 20,
+        padding: 10,
+        transition: theme.transitions.create("background-color", {
+            easing: theme.transitions.easing.sharp,
+            duration: theme.transitions.duration.leavingScreen,
+        }),
+        "&:focus-within": {
+            backgroundColor: theme.palette.background.default,
+        },
+    },
+    stepNumber: {
+        width: 20,
+        height: 20,
+        backgroundColor: lighten(theme.palette.secondary.light, 0.2),
+        color: theme.palette.secondary.contrastText,
+        textAlign: "center",
+        borderRadius: " 50%",
+    },
+    stepNumberContainer: {
+        marginRight: 10,
+    },
+    stepFooter: {
+        marginTop: 32,
+    },
+    button: {
+        marginRight: theme.spacing(1),
+    },
+    viewButtonLabel: { textTransform: "none" },
+    "@global": {
+        code: {
+            color: "rgba(0, 0, 0, 0.87)",
+            display: "inline-block",
+            padding: "2px 6px",
+            fontFamily:
+                ' Consolas, "Liberation Mono", Menlo, Courier, monospace',
+            borderRadius: "2px",
+            backgroundColor: "rgba(255,229,100,0.1)",
+        },
+    },
+}));
+
+const steps = [
+    {
+        title: "applicationRegistration",
+        optional: false,
+    },
+    {
+        title: "storagePathStep",
+        optional: false,
+    },
+    {
+        title: "sourceLinkStep",
+        optional: false,
+    },
+    {
+        title: "uploadSettingStep",
+        optional: false,
+    },
+    {
+        title: "grantAccess",
+        optional: false,
+    },
+    {
+        title: "finishStep",
+        optional: false,
+    },
+];
+
+export default function OneDriveGuide(props) {
+    const { t } = useTranslation("dashboard", { keyPrefix: "policy" });
+    const classes = useStyles();
+    const history = useHistory();
+
+    const [activeStep, setActiveStep] = useState(0);
+    const [loading, setLoading] = useState(false);
+    const [skipped] = React.useState(new Set());
+    const [magicVar, setMagicVar] = useState("");
+    const [useCDN, setUseCDN] = useState(
+        props.policy && props.policy.OptionsSerialized.od_proxy
+            ? props.policy.OptionsSerialized.od_proxy !== ""
+            : false
+    );
+    const [useSharePoint, setUseSharePoint] = useState(
+        props.policy && props.policy.OptionsSerialized.od_driver
+            ? props.policy.OptionsSerialized.od_driver !== ""
+            : false
+    );
+    const [policy, setPolicy] = useState(
+        props.policy
+            ? props.policy
+            : {
+                  Type: "onedrive",
+                  Name: "",
+                  BucketName: "",
+                  SecretKey: "",
+                  AccessKey: "",
+                  BaseURL: "",
+                  Server: "https://graph.microsoft.com/v1.0",
+                  IsPrivate: "true",
+                  DirNameRule: "uploads/{year}/{month}/{day}",
+                  AutoRename: "true",
+                  FileNameRule: "{randomkey8}_{originname}",
+                  IsOriginLinkEnable: "false",
+                  MaxSize: "0",
+                  OptionsSerialized: {
+                      file_type: "",
+                      od_redirect: "",
+                      od_proxy: "",
+                      od_driver: "",
+                      chunk_size: 50 << 20,
+                      placeholder_with_size: "false",
+                      tps_limit: "0",
+                      tps_limit_burst: "0",
+                  },
+              }
+    );
+    const [policyID, setPolicyID] = useState(
+        props.policy ? props.policy.ID : 0
+    );
+    const [httpsAlert, setHttpsAlert] = useState(false);
+
+    const handleChange = (name) => (event) => {
+        setPolicy({
+            ...policy,
+            [name]: event.target.value,
+        });
+    };
+
+    const handleOptionChange = (name) => (event) => {
+        setPolicy({
+            ...policy,
+            OptionsSerialized: {
+                ...policy.OptionsSerialized,
+                [name]: event.target.value,
+            },
+        });
+    };
+
+    const isStepSkipped = (step) => {
+        return skipped.has(step);
+    };
+
+    const dispatch = useDispatch();
+    const ToggleSnackbar = useCallback(
+        (vertical, horizontal, msg, color) =>
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color)),
+        [dispatch]
+    );
+
+    useEffect(() => {
+        API.post("/admin/setting", {
+            keys: ["siteURL"],
+        })
+            .then((response) => {
+                if (!response.data.siteURL.startsWith("https://")) {
+                    setHttpsAlert(true);
+                }
+                if (policy.OptionsSerialized.od_redirect === "") {
+                    setPolicy({
+                        ...policy,
+                        OptionsSerialized: {
+                            ...policy.OptionsSerialized,
+                            od_redirect: new URL(
+                                "/api/v3/callback/onedrive/auth",
+                                response.data.siteURL
+                            ).toString(),
+                        },
+                    });
+                }
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            });
+    }, []);
+
+    const statOAuth = () => {
+        setLoading(true);
+        API.get("/admin/policy/" + policyID + "/oauth/onedrive")
+            .then((response) => {
+                window.location.href = response.data;
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+                setLoading(false);
+            });
+    };
+
+    const submitPolicy = (e) => {
+        e.preventDefault();
+        setLoading(true);
+
+        let policyCopy = { ...policy };
+        policyCopy.OptionsSerialized = { ...policyCopy.OptionsSerialized };
+
+        // baseURL处理
+        if (policyCopy.Server === "https://graph.microsoft.com/v1.0") {
+            policyCopy.BaseURL =
+                "https://login.microsoftonline.com/common/oauth2/v2.0";
+        } else {
+            policyCopy.BaseURL = "https://login.chinacloudapi.cn/common/oauth2";
+        }
+
+        if (!useCDN) {
+            policyCopy.OptionsSerialized.od_proxy = "";
+        }
+
+        if (!useSharePoint) {
+            policyCopy.OptionsSerialized.od_driver = "";
+        }
+
+        // 类型转换
+        policyCopy = transformPolicyRequest(policyCopy);
+
+        API.post("/admin/policy", {
+            policy: policyCopy,
+        })
+            .then((response) => {
+                ToggleSnackbar(
+                    "top",
+                    "right",
+                    props.policy ? t("policySaved") : t("policyAdded"),
+                    "success"
+                );
+                setActiveStep(4);
+                setPolicyID(response.data);
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            })
+            .then(() => {
+                setLoading(false);
+            });
+
+        setLoading(false);
+    };
+
+    return (
+        <div>
+            <AlertDialog
+                open={httpsAlert}
+                onClose={() => setHttpsAlert(false)}
+                title={t("warning")}
+                msg={t("odHttpsWarning")}
+            />
+            <Typography variant={"h6"}>
+                {props.policy
+                    ? t("editOdStoragePolicy")
+                    : t("addOdStoragePolicy")}
+            </Typography>
+            <Stepper activeStep={activeStep}>
+                {steps.map((label, index) => {
+                    const stepProps = {};
+                    const labelProps = {};
+                    if (label.optional) {
+                        labelProps.optional = (
+                            <Typography variant="caption">
+                                {t("optional")}
+                            </Typography>
+                        );
+                    }
+                    if (isStepSkipped(index)) {
+                        stepProps.completed = false;
+                    }
+                    return (
+                        <Step key={label.title} {...stepProps}>
+                            <StepLabel {...labelProps}>
+                                {t(label.title)}
+                            </StepLabel>
+                        </Step>
+                    );
+                })}
+            </Stepper>
+
+            {activeStep === 0 && (
+                <form
+                    className={classes.stepContent}
+                    onSubmit={(e) => {
+                        e.preventDefault();
+                        setActiveStep(1);
+                    }}
+                >
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>1</div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                <Trans
+                                    ns={"dashboard"}
+                                    i18nKey={"policy.creatAadAppDes"}
+                                    components={[
+                                        <Link
+                                            key={0}
+                                            href={
+                                                "https://portal.azure.com/#blade/Microsoft_AAD_IAM/ActiveDirectoryMenuBlade/Overview"
+                                            }
+                                            target={"_blank"}
+                                        />,
+                                        <Link
+                                            key={1}
+                                            href={
+                                                "https://portal.azure.cn/#blade/Microsoft_AAD_IAM/ActiveDirectoryMenuBlade/Overview"
+                                            }
+                                            target={"_blank"}
+                                        />,
+                                        <code key={2} />,
+                                    ]}
+                                />
+                            </Typography>
+                        </div>
+                    </div>
+
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>2</div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                <Trans
+                                    ns={"dashboard"}
+                                    i18nKey={"policy.createAadAppDes2"}
+                                    components={[
+                                        <code key={0} />,
+                                        <code key={1} />,
+                                    ]}
+                                />
+                            </Typography>
+                        </div>
+                    </div>
+
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>3</div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                <Trans
+                                    ns={"dashboard"}
+                                    i18nKey={"policy.createAadAppDes3"}
+                                    values={{
+                                        url: policy.OptionsSerialized
+                                            .od_redirect,
+                                    }}
+                                    components={[
+                                        <code key={0} />,
+                                        <code key={1} />,
+                                        <code key={2} />,
+                                        <code key={3} />,
+                                        <code key={4} />,
+                                    ]}
+                                />
+                            </Typography>
+                        </div>
+                    </div>
+
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>4</div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                <Trans
+                                    ns={"dashboard"}
+                                    i18nKey={"policy.aadAppIDDes"}
+                                    components={[
+                                        <code key={0} />,
+                                        <code key={1} />,
+                                    ]}
+                                />
+                            </Typography>
+                            <div className={classes.form}>
+                                <FormControl fullWidth>
+                                    <InputLabel htmlFor="component-helper">
+                                        {t("aadAppID")}
+                                    </InputLabel>
+                                    <Input
+                                        required
+                                        value={policy.BucketName}
+                                        onChange={handleChange("BucketName")}
+                                    />
+                                </FormControl>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>5</div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                <Trans
+                                    ns={"dashboard"}
+                                    i18nKey={"policy.addAppSecretDes"}
+                                    components={[
+                                        <code key={0} />,
+                                        <code key={1} />,
+                                        <code key={2} />,
+                                        <code key={3} />,
+                                    ]}
+                                />
+                            </Typography>
+                            <div className={classes.form}>
+                                <FormControl fullWidth>
+                                    <InputLabel htmlFor="component-helper">
+                                        {t("aadAppSecret")}
+                                    </InputLabel>
+                                    <Input
+                                        required
+                                        value={policy.SecretKey}
+                                        onChange={handleChange("SecretKey")}
+                                    />
+                                </FormControl>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>6</div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                {t("aadAccountCloudDes")}
+                            </Typography>
+                            <div className={classes.form}>
+                                <FormControl required component="fieldset">
+                                    <RadioGroup
+                                        required
+                                        value={policy.Server}
+                                        onChange={handleChange("Server")}
+                                        row
+                                    >
+                                        <FormControlLabel
+                                            value={
+                                                "https://graph.microsoft.com/v1.0"
+                                            }
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("multiTenant")}
+                                        />
+                                        <FormControlLabel
+                                            value={
+                                                "https://microsoftgraph.chinacloudapi.cn/v1.0"
+                                            }
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("gallatin")}
+                                        />
+                                    </RadioGroup>
+                                </FormControl>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>7</div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                {t("sharePointDes")}
+                            </Typography>
+                            <div className={classes.form}>
+                                <FormControl required component="fieldset">
+                                    <RadioGroup
+                                        required
+                                        value={useSharePoint.toString()}
+                                        onChange={(e) => {
+                                            setUseSharePoint(
+                                                e.target.value === "true"
+                                            );
+                                        }}
+                                        row
+                                    >
+                                        <FormControlLabel
+                                            value={"true"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("saveToSharePoint")}
+                                        />
+                                        <FormControlLabel
+                                            value={"false"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("saveToOneDrive")}
+                                        />
+                                    </RadioGroup>
+                                </FormControl>
+                            </div>
+                            <Collapse in={useSharePoint}>
+                                <div className={classes.form}>
+                                    <FormControl fullWidth>
+                                        <InputLabel htmlFor="component-helper">
+                                            {t("spSiteURL")}
+                                        </InputLabel>
+                                        <Input
+                                            placeholder={
+                                                "https://example.sharepoint.com/sites/demo"
+                                            }
+                                            value={
+                                                policy.OptionsSerialized
+                                                    .od_driver
+                                            }
+                                            onChange={handleOptionChange(
+                                                "od_driver"
+                                            )}
+                                            required={useSharePoint}
+                                            label={t("spSiteURL")}
+                                        />
+                                    </FormControl>
+                                </div>
+                            </Collapse>
+                        </div>
+                    </div>
+
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>8</div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                {t("odReverseProxyURLDes")}
+                            </Typography>
+                            <div className={classes.form}>
+                                <FormControl required component="fieldset">
+                                    <RadioGroup
+                                        required
+                                        value={useCDN.toString()}
+                                        onChange={(e) => {
+                                            setUseCDN(
+                                                e.target.value === "true"
+                                            );
+                                        }}
+                                        row
+                                    >
+                                        <FormControlLabel
+                                            value={"true"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("use")}
+                                        />
+                                        <FormControlLabel
+                                            value={"false"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("notUse")}
+                                        />
+                                    </RadioGroup>
+                                </FormControl>
+                            </div>
+                            <Collapse in={useCDN}>
+                                <div className={classes.form}>
+                                    <FormControl fullWidth>
+                                        <DomainInput
+                                            value={
+                                                policy.OptionsSerialized
+                                                    .od_proxy
+                                            }
+                                            onChange={handleOptionChange(
+                                                "od_proxy"
+                                            )}
+                                            required={useCDN}
+                                            label={t("odReverseProxyURL")}
+                                        />
+                                    </FormControl>
+                                </div>
+                            </Collapse>
+                        </div>
+                    </div>
+
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>9</div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                {t("nameThePolicyFirst")}
+                            </Typography>
+                            <div className={classes.form}>
+                                <FormControl fullWidth>
+                                    <InputLabel htmlFor="component-helper">
+                                        {t("policyName")}
+                                    </InputLabel>
+                                    <Input
+                                        required
+                                        value={policy.Name}
+                                        onChange={handleChange("Name")}
+                                    />
+                                </FormControl>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className={classes.stepFooter}>
+                        <Button
+                            disabled={loading}
+                            type={"submit"}
+                            variant={"contained"}
+                            color={"primary"}
+                        >
+                            {t("next")}
+                        </Button>
+                    </div>
+                </form>
+            )}
+
+            {activeStep === 1 && (
+                <form
+                    className={classes.stepContent}
+                    onSubmit={(e) => {
+                        e.preventDefault();
+                        setActiveStep(2);
+                    }}
+                >
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>1</div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                <Trans
+                                    ns={"dashboard"}
+                                    i18nKey={"policy.pathMagicVarDes"}
+                                    components={[
+                                        <Link
+                                            key={0}
+                                            color={"secondary"}
+                                            href={"javascript:void()"}
+                                            onClick={() => setMagicVar("path")}
+                                        />,
+                                    ]}
+                                />
+                            </Typography>
+                            <div className={classes.form}>
+                                <FormControl fullWidth>
+                                    <InputLabel htmlFor="component-helper">
+                                        {t("pathOfFolderToStoreFiles")}
+                                    </InputLabel>
+                                    <Input
+                                        required
+                                        value={policy.DirNameRule}
+                                        onChange={handleChange("DirNameRule")}
+                                    />
+                                </FormControl>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>2</div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                <Trans
+                                    ns={"dashboard"}
+                                    i18nKey={"policy.filePathMagicVarDes"}
+                                    components={[
+                                        <Link
+                                            key={0}
+                                            color={"secondary"}
+                                            href={"javascript:void()"}
+                                            onClick={() => setMagicVar("file")}
+                                        />,
+                                    ]}
+                                />
+                            </Typography>
+                            <div className={classes.form}>
+                                <FormControl required component="fieldset">
+                                    <RadioGroup
+                                        aria-label="gender"
+                                        name="gender1"
+                                        value={policy.AutoRename}
+                                        onChange={handleChange("AutoRename")}
+                                        row
+                                    >
+                                        <FormControlLabel
+                                            value={"true"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("autoRenameStoredFile")}
+                                        />
+                                        <FormControlLabel
+                                            value={"false"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("keepOriginalFileName")}
+                                        />
+                                    </RadioGroup>
+                                </FormControl>
+                            </div>
+
+                            <Collapse in={policy.AutoRename === "true"}>
+                                <div className={classes.form}>
+                                    <FormControl fullWidth>
+                                        <InputLabel htmlFor="component-helper">
+                                            {t("renameRule")}
+                                        </InputLabel>
+                                        <Input
+                                            required={
+                                                policy.AutoRename === "true"
+                                            }
+                                            value={policy.FileNameRule}
+                                            onChange={handleChange(
+                                                "FileNameRule"
+                                            )}
+                                        />
+                                    </FormControl>
+                                </div>
+                            </Collapse>
+                        </div>
+                    </div>
+
+                    <div className={classes.stepFooter}>
+                        <Button
+                            color={"default"}
+                            className={classes.button}
+                            onClick={() => setActiveStep(0)}
+                        >
+                            {t("back")}
+                        </Button>
+                        <Button
+                            disabled={loading}
+                            type={"submit"}
+                            variant={"contained"}
+                            color={"primary"}
+                        >
+                            {t("next")}
+                        </Button>
+                    </div>
+                </form>
+            )}
+
+            {activeStep === 2 && (
+                <form
+                    className={classes.stepContent}
+                    onSubmit={(e) => {
+                        e.preventDefault();
+                        setActiveStep(3);
+                    }}
+                >
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>1</div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                {t("enableGettingPermanentSourceLink")}
+                                <br />
+                                {t("enableGettingPermanentSourceLinkDes")}
+                            </Typography>
+
+                            <div className={classes.form}>
+                                <FormControl required component="fieldset">
+                                    <RadioGroup
+                                        required
+                                        value={policy.IsOriginLinkEnable}
+                                        onChange={(e) => {
+                                            if (
+                                                policy.IsPrivate === "true" &&
+                                                e.target.value === "true"
+                                            ) {
+                                                ToggleSnackbar(
+                                                    "top",
+                                                    "right",
+                                                    t(
+                                                        "cannotEnableForPrivateBucket"
+                                                    ),
+                                                    "warning"
+                                                );
+                                            }
+                                            handleChange("IsOriginLinkEnable")(
+                                                e
+                                            );
+                                        }}
+                                        row
+                                    >
+                                        <FormControlLabel
+                                            value={"true"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("allowed")}
+                                        />
+                                        <FormControlLabel
+                                            value={"false"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("forbidden")}
+                                        />
+                                    </RadioGroup>
+                                </FormControl>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className={classes.stepFooter}>
+                        <Button
+                            color={"default"}
+                            className={classes.button}
+                            onClick={() => setActiveStep(1)}
+                        >
+                            {t("back")}
+                        </Button>{" "}
+                        <Button
+                            disabled={loading}
+                            type={"submit"}
+                            variant={"contained"}
+                            color={"primary"}
+                        >
+                            {t("next")}
+                        </Button>
+                    </div>
+                </form>
+            )}
+
+            {activeStep === 3 && (
+                <form className={classes.stepContent} onSubmit={submitPolicy}>
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>1</div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                {t("limitFileSize")}
+                            </Typography>
+
+                            <div className={classes.form}>
+                                <FormControl required component="fieldset">
+                                    <RadioGroup
+                                        required
+                                        value={
+                                            policy.MaxSize === "0"
+                                                ? "false"
+                                                : "true"
+                                        }
+                                        onChange={(e) => {
+                                            if (e.target.value === "true") {
+                                                setPolicy({
+                                                    ...policy,
+                                                    MaxSize: "10485760",
+                                                });
+                                            } else {
+                                                setPolicy({
+                                                    ...policy,
+                                                    MaxSize: "0",
+                                                });
+                                            }
+                                        }}
+                                        row
+                                    >
+                                        <FormControlLabel
+                                            value={"true"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("limit")}
+                                        />
+                                        <FormControlLabel
+                                            value={"false"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("notLimit")}
+                                        />
+                                    </RadioGroup>
+                                </FormControl>
+                            </div>
+                        </div>
+                    </div>
+
+                    <Collapse in={policy.MaxSize !== "0"}>
+                        <div className={classes.subStepContainer}>
+                            <div className={classes.stepNumberContainer}>
+                                <div className={classes.stepNumber}>2</div>
+                            </div>
+                            <div className={classes.subStepContent}>
+                                <Typography variant={"body2"}>
+                                    {t("enterSizeLimit")}
+                                </Typography>
+                                <div className={classes.form}>
+                                    <SizeInput
+                                        value={policy.MaxSize}
+                                        onChange={handleChange("MaxSize")}
+                                        min={0}
+                                        max={9223372036854775807}
+                                        label={t("maxSizeOfSingleFile")}
+                                    />
+                                </div>
+                            </div>
+                        </div>
+                    </Collapse>
+
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>
+                                {policy.MaxSize !== "0" ? "3" : "2"}
+                            </div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                {t("limitFileExt")}
+                            </Typography>
+
+                            <div className={classes.form}>
+                                <FormControl required component="fieldset">
+                                    <RadioGroup
+                                        required
+                                        value={
+                                            policy.OptionsSerialized
+                                                .file_type === ""
+                                                ? "false"
+                                                : "true"
+                                        }
+                                        onChange={(e) => {
+                                            if (e.target.value === "true") {
+                                                setPolicy({
+                                                    ...policy,
+                                                    OptionsSerialized: {
+                                                        ...policy.OptionsSerialized,
+                                                        file_type:
+                                                            "jpg,png,mp4,zip,rar",
+                                                    },
+                                                });
+                                            } else {
+                                                setPolicy({
+                                                    ...policy,
+                                                    OptionsSerialized: {
+                                                        ...policy.OptionsSerialized,
+                                                        file_type: "",
+                                                    },
+                                                });
+                                            }
+                                        }}
+                                        row
+                                    >
+                                        <FormControlLabel
+                                            value={"true"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("limit")}
+                                        />
+                                        <FormControlLabel
+                                            value={"false"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("notLimit")}
+                                        />
+                                    </RadioGroup>
+                                </FormControl>
+                            </div>
+                        </div>
+                    </div>
+
+                    <Collapse in={policy.OptionsSerialized.file_type !== ""}>
+                        <div className={classes.subStepContainer}>
+                            <div className={classes.stepNumberContainer}>
+                                <div className={classes.stepNumber}>
+                                    {policy.MaxSize !== "0" ? "4" : "3"}
+                                </div>
+                            </div>
+                            <div className={classes.subStepContent}>
+                                <Typography variant={"body2"}>
+                                    {t("enterFileExt")}
+                                </Typography>
+                                <div className={classes.form}>
+                                    <FormControl fullWidth>
+                                        <InputLabel htmlFor="component-helper">
+                                            {t("extList")}
+                                        </InputLabel>
+                                        <Input
+                                            value={
+                                                policy.OptionsSerialized
+                                                    .file_type
+                                            }
+                                            onChange={handleOptionChange(
+                                                "file_type"
+                                            )}
+                                        />
+                                    </FormControl>
+                                </div>
+                            </div>
+                        </div>
+                    </Collapse>
+
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>
+                                {getNumber(3, [
+                                    policy.MaxSize !== "0",
+                                    policy.OptionsSerialized.file_type !== "",
+                                ])}
+                            </div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                {t("chunkSizeLabelOd")}
+                                <br />
+                                {t("chunkSizeDes")}
+                            </Typography>
+                            <div className={classes.form}>
+                                <SizeInput
+                                    value={policy.OptionsSerialized.chunk_size}
+                                    onChange={handleOptionChange("chunk_size")}
+                                    min={0}
+                                    max={9223372036854775807}
+                                    label={t("chunkSize")}
+                                />
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>
+                                {getNumber(4, [
+                                    policy.MaxSize !== "0",
+                                    policy.OptionsSerialized.file_type !== "",
+                                ])}
+                            </div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                {t("createPlaceholderDes")}
+                            </Typography>
+                            <div className={classes.form}>
+                                <FormControl required component="fieldset">
+                                    <RadioGroup
+                                        aria-label="gender"
+                                        name="gender1"
+                                        value={
+                                            policy.OptionsSerialized
+                                                .placeholder_with_size
+                                        }
+                                        onChange={handleOptionChange(
+                                            "placeholder_with_size"
+                                        )}
+                                        row
+                                    >
+                                        <FormControlLabel
+                                            value={"true"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("createPlaceholder")}
+                                        />
+                                        <FormControlLabel
+                                            value={"false"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("notCreatePlaceholder")}
+                                        />
+                                    </RadioGroup>
+                                </FormControl>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>
+                                {getNumber(5, [
+                                    policy.MaxSize !== "0",
+                                    policy.OptionsSerialized.file_type !== "",
+                                ])}
+                            </div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                {t("limitOdTPSDes")}
+                            </Typography>
+
+                            <div className={classes.form}>
+                                <FormControl required component="fieldset">
+                                    <RadioGroup
+                                        required
+                                        value={
+                                            parseFloat(
+                                                policy.OptionsSerialized
+                                                    .tps_limit
+                                            ) === 0
+                                                ? "false"
+                                                : "true"
+                                        }
+                                        onChange={(e) => {
+                                            if (e.target.value === "true") {
+                                                setPolicy({
+                                                    ...policy,
+                                                    OptionsSerialized: {
+                                                        ...policy.OptionsSerialized,
+                                                        tps_limit: "5.0",
+                                                    },
+                                                });
+                                            } else {
+                                                setPolicy({
+                                                    ...policy,
+                                                    OptionsSerialized: {
+                                                        ...policy.OptionsSerialized,
+                                                        tps_limit: "0",
+                                                    },
+                                                });
+                                            }
+                                        }}
+                                        row
+                                    >
+                                        <FormControlLabel
+                                            value={"true"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("limit")}
+                                        />
+                                        <FormControlLabel
+                                            value={"false"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("notLimit")}
+                                        />
+                                    </RadioGroup>
+                                </FormControl>
+                            </div>
+
+                            <Collapse
+                                in={
+                                    parseFloat(
+                                        policy.OptionsSerialized.tps_limit
+                                    ) !== 0
+                                }
+                            >
+                                <div className={classes.form}>
+                                    <FormControl fullWidth>
+                                        <InputLabel htmlFor="component-helper">
+                                            {t("tps")}
+                                        </InputLabel>
+                                        <Input
+                                            type={"number"}
+                                            inputProps={{
+                                                step: 0.1,
+                                            }}
+                                            required
+                                            value={
+                                                policy.OptionsSerialized
+                                                    .tps_limit
+                                            }
+                                            onChange={handleOptionChange(
+                                                "tps_limit"
+                                            )}
+                                        />
+                                        <FormHelperText>
+                                            {t("tpsDes")}
+                                        </FormHelperText>
+                                    </FormControl>
+                                </div>
+                                <div className={classes.form}>
+                                    <FormControl fullWidth>
+                                        <InputLabel htmlFor="component-helper">
+                                            {t("tpsBurst")}
+                                        </InputLabel>
+                                        <Input
+                                            type={"number"}
+                                            inputProps={{
+                                                step: 1,
+                                            }}
+                                            required
+                                            value={
+                                                policy.OptionsSerialized
+                                                    .tps_limit_burst
+                                            }
+                                            onChange={handleOptionChange(
+                                                "tps_limit_burst"
+                                            )}
+                                        />
+                                        <FormHelperText>
+                                            {t("tpsBurstDes")}
+                                        </FormHelperText>
+                                    </FormControl>
+                                </div>
+                            </Collapse>
+                        </div>
+                    </div>
+
+                    <div className={classes.stepFooter}>
+                        <Button
+                            color={"default"}
+                            className={classes.button}
+                            onClick={() => setActiveStep(4)}
+                        >
+                            {t("back")}
+                        </Button>{" "}
+                        <Button
+                            disabled={loading}
+                            type={"submit"}
+                            variant={"contained"}
+                            color={"primary"}
+                        >
+                            {t("next")}
+                        </Button>
+                    </div>
+                </form>
+            )}
+
+            {activeStep === 4 && (
+                <form className={classes.stepContent}>
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer} />
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                {props.policy
+                                    ? t("policySaved")
+                                    : t("policyAdded")}
+                            </Typography>
+                            <Typography variant={"body2"}>
+                                {t("odOauthDes")}
+                            </Typography>
+                            <div className={classes.form}>
+                                <Button
+                                    disabled={loading}
+                                    color={"secondary"}
+                                    variant={"contained"}
+                                    className={classes.button}
+                                    onClick={statOAuth}
+                                    classes={{ label: classes.viewButtonLabel }}
+                                >
+                                    {t("gotoAuthPage")}
+                                </Button>
+                            </div>
+                        </div>
+                    </div>
+                    <div className={classes.stepFooter}></div>
+                </form>
+            )}
+
+            {activeStep === 5 && (
+                <>
+                    <form className={classes.stepContent}>
+                        <Typography>
+                            {props.policy ? t("policySaved") : t("policyAdded")}
+                        </Typography>
+                        <Typography variant={"body2"} color={"textSecondary"}>
+                            {t("furtherActions")}
+                        </Typography>
+                    </form>
+                    <div className={classes.stepFooter}>
+                        <Button
+                            color={"primary"}
+                            className={classes.button}
+                            onClick={() => history.push("/admin/policy")}
+                        >
+                            {t("backToList")}
+                        </Button>
+                    </div>
+                </>
+            )}
+
+            <MagicVar
+                open={magicVar === "file"}
+                isFile
+                onClose={() => setMagicVar("")}
+            />
+            <MagicVar
+                open={magicVar === "path"}
+                onClose={() => setMagicVar("")}
+            />
+        </div>
+    );
+}
diff --git a/src/component/Admin/Policy/Guid/QiniuGuide.js b/src/component/Admin/Policy/Guid/QiniuGuide.js
new file mode 100644
index 0000000..a713c12
--- /dev/null
+++ b/src/component/Admin/Policy/Guid/QiniuGuide.js
@@ -0,0 +1,1051 @@
+import { lighten, makeStyles } from "@material-ui/core/styles";
+import React, { useCallback, useState } from "react";
+import Stepper from "@material-ui/core/Stepper";
+import StepLabel from "@material-ui/core/StepLabel";
+import Step from "@material-ui/core/Step";
+import Typography from "@material-ui/core/Typography";
+import { useDispatch } from "react-redux";
+import Link from "@material-ui/core/Link";
+import FormControl from "@material-ui/core/FormControl";
+import InputLabel from "@material-ui/core/InputLabel";
+import Input from "@material-ui/core/Input";
+import RadioGroup from "@material-ui/core/RadioGroup";
+import FormControlLabel from "@material-ui/core/FormControlLabel";
+import Radio from "@material-ui/core/Radio";
+import Collapse from "@material-ui/core/Collapse";
+import Button from "@material-ui/core/Button";
+import API from "../../../../middleware/Api";
+import MagicVar from "../../Dialogs/MagicVar";
+import DomainInput from "../../Common/DomainInput";
+import SizeInput from "../../Common/SizeInput";
+import { useHistory } from "react-router";
+import { getNumber } from "../../../../utils";
+import { toggleSnackbar } from "../../../../redux/explorer";
+import { Trans, useTranslation } from "react-i18next";
+import { transformPolicyRequest } from "../utils";
+
+const useStyles = makeStyles((theme) => ({
+    stepContent: {
+        padding: "16px 32px 16px 32px",
+    },
+    form: {
+        maxWidth: 400,
+        marginTop: 20,
+    },
+    formContainer: {
+        [theme.breakpoints.up("md")]: {
+            padding: "0px 24px 0 24px",
+        },
+    },
+    subStepContainer: {
+        display: "flex",
+        marginBottom: 20,
+        padding: 10,
+        transition: theme.transitions.create("background-color", {
+            easing: theme.transitions.easing.sharp,
+            duration: theme.transitions.duration.leavingScreen,
+        }),
+        "&:focus-within": {
+            backgroundColor: theme.palette.background.default,
+        },
+    },
+    stepNumber: {
+        width: 20,
+        height: 20,
+        backgroundColor: lighten(theme.palette.secondary.light, 0.2),
+        color: theme.palette.secondary.contrastText,
+        textAlign: "center",
+        borderRadius: " 50%",
+    },
+    stepNumberContainer: {
+        marginRight: 10,
+    },
+    stepFooter: {
+        marginTop: 32,
+    },
+    button: {
+        marginRight: theme.spacing(1),
+    },
+}));
+
+const steps = [
+    {
+        title: "storageBucket",
+        optional: false,
+    },
+    {
+        title: "storagePathStep",
+        optional: false,
+    },
+    {
+        title: "sourceLinkStep",
+        optional: false,
+    },
+    {
+        title: "uploadSettingStep",
+        optional: false,
+    },
+    {
+        title: "finishStep",
+        optional: false,
+    },
+];
+
+export default function RemoteGuide(props) {
+    const { t } = useTranslation("dashboard", { keyPrefix: "policy" });
+    const classes = useStyles();
+    const history = useHistory();
+
+    const [activeStep, setActiveStep] = useState(0);
+    const [loading, setLoading] = useState(false);
+    const [skipped] = React.useState(new Set());
+    const [magicVar, setMagicVar] = useState("");
+    const [policy, setPolicy] = useState(
+        props.policy
+            ? props.policy
+            : {
+                  Type: "qiniu",
+                  Name: "",
+                  SecretKey: "",
+                  AccessKey: "",
+                  BaseURL: "",
+                  IsPrivate: "true",
+                  DirNameRule: "uploads/{year}/{month}/{day}",
+                  AutoRename: "true",
+                  FileNameRule: "{randomkey8}_{originname}",
+                  IsOriginLinkEnable: "false",
+                  MaxSize: "0",
+                  OptionsSerialized: {
+                      file_type: "",
+                      mimetype: "",
+                      chunk_size: 25 << 20,
+                      placeholder_with_size: "false",
+                  },
+              }
+    );
+
+    const handleChange = (name) => (event) => {
+        setPolicy({
+            ...policy,
+            [name]: event.target.value,
+        });
+    };
+
+    const handleOptionChange = (name) => (event) => {
+        setPolicy({
+            ...policy,
+            OptionsSerialized: {
+                ...policy.OptionsSerialized,
+                [name]: event.target.value,
+            },
+        });
+    };
+
+    const isStepSkipped = (step) => {
+        return skipped.has(step);
+    };
+
+    const dispatch = useDispatch();
+    const ToggleSnackbar = useCallback(
+        (vertical, horizontal, msg, color) =>
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color)),
+        [dispatch]
+    );
+
+    const submitPolicy = (e) => {
+        e.preventDefault();
+        setLoading(true);
+
+        let policyCopy = { ...policy };
+        policyCopy.OptionsSerialized = { ...policyCopy.OptionsSerialized };
+
+        // 类型转换
+        policyCopy = transformPolicyRequest(policyCopy);
+
+        API.post("/admin/policy", {
+            policy: policyCopy,
+        })
+            .then(() => {
+                ToggleSnackbar(
+                    "top",
+                    "right",
+                    props.policy ? t("policySaved") : t("policyAdded"),
+                    "success"
+                );
+                setActiveStep(5);
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            })
+            .then(() => {
+                setLoading(false);
+            });
+
+        setLoading(false);
+    };
+
+    return (
+        <div>
+            <Typography variant={"h6"}>
+                {props.policy
+                    ? t("editQiniuStoragePolicy")
+                    : t("addQiniuStoragePolicy")}
+            </Typography>
+            <Stepper activeStep={activeStep}>
+                {steps.map((label, index) => {
+                    const stepProps = {};
+                    const labelProps = {};
+                    if (label.optional) {
+                        labelProps.optional = (
+                            <Typography variant="caption">
+                                {t("optional")}
+                            </Typography>
+                        );
+                    }
+                    if (isStepSkipped(index)) {
+                        stepProps.completed = false;
+                    }
+                    return (
+                        <Step key={label.title} {...stepProps}>
+                            <StepLabel {...labelProps}>
+                                {t(label.title)}
+                            </StepLabel>
+                        </Step>
+                    );
+                })}
+            </Stepper>
+
+            {activeStep === 0 && (
+                <form
+                    className={classes.stepContent}
+                    onSubmit={(e) => {
+                        e.preventDefault();
+                        setActiveStep(1);
+                    }}
+                >
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>0</div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                <Trans
+                                    ns={"dashboard"}
+                                    i18nKey={"policy.wanSiteURLDes"}
+                                    components={[<strong key={0} />]}
+                                />
+                            </Typography>
+                        </div>
+                    </div>
+
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>1</div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                <Trans
+                                    ns={"dashboard"}
+                                    i18nKey={"policy.createQiniuBucket"}
+                                    components={[
+                                        <Link
+                                            key={0}
+                                            href={
+                                                "https://portal.qiniu.com/create"
+                                            }
+                                            target={"_blank"}
+                                        />,
+                                    ]}
+                                />
+                            </Typography>
+                        </div>
+                    </div>
+
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>2</div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                {t("enterQiniuBucket")}
+                            </Typography>
+                            <div className={classes.form}>
+                                <FormControl fullWidth>
+                                    <InputLabel htmlFor="component-helper">
+                                        {t("qiniuBucketName")}
+                                    </InputLabel>
+                                    <Input
+                                        required
+                                        value={policy.BucketName}
+                                        onChange={handleChange("BucketName")}
+                                    />
+                                </FormControl>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>3</div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                {t("bucketTypeDes")}
+                            </Typography>
+                            <div className={classes.form}>
+                                <FormControl required component="fieldset">
+                                    <RadioGroup
+                                        required
+                                        value={policy.IsPrivate}
+                                        onChange={handleChange("IsPrivate")}
+                                        row
+                                    >
+                                        <FormControlLabel
+                                            value={"true"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("privateBucket")}
+                                        />
+                                        <FormControlLabel
+                                            value={"false"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("publicBucket")}
+                                        />
+                                    </RadioGroup>
+                                </FormControl>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>4</div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                {t("bucketCDNDes")}
+                            </Typography>
+                            <div className={classes.form}>
+                                <DomainInput
+                                    value={policy.BaseURL}
+                                    onChange={handleChange("BaseURL")}
+                                    required
+                                    label={t("bucketCDNDomain")}
+                                />
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>5</div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                {t("qiniuCredentialDes")}
+                            </Typography>
+                            <div className={classes.form}>
+                                <FormControl fullWidth>
+                                    <InputLabel htmlFor="component-helper">
+                                        {t("ak")}
+                                    </InputLabel>
+                                    <Input
+                                        required
+                                        value={policy.AccessKey}
+                                        onChange={handleChange("AccessKey")}
+                                    />
+                                </FormControl>
+                            </div>
+                            <div className={classes.form}>
+                                <FormControl fullWidth>
+                                    <InputLabel htmlFor="component-helper">
+                                        {t("sk")}
+                                    </InputLabel>
+                                    <Input
+                                        required
+                                        value={policy.SecretKey}
+                                        onChange={handleChange("SecretKey")}
+                                    />
+                                </FormControl>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className={classes.stepFooter}>
+                        <Button
+                            disabled={loading}
+                            type={"submit"}
+                            variant={"contained"}
+                            color={"primary"}
+                        >
+                            {t("next")}
+                        </Button>
+                    </div>
+                </form>
+            )}
+
+            {activeStep === 1 && (
+                <form
+                    className={classes.stepContent}
+                    onSubmit={(e) => {
+                        e.preventDefault();
+                        setActiveStep(2);
+                    }}
+                >
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>1</div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                <Trans
+                                    ns={"dashboard"}
+                                    i18nKey={"policy.pathMagicVarDes"}
+                                    components={[
+                                        <Link
+                                            key={0}
+                                            color={"secondary"}
+                                            href={"javascript:void()"}
+                                            onClick={() => setMagicVar("path")}
+                                        />,
+                                    ]}
+                                />
+                            </Typography>
+                            <div className={classes.form}>
+                                <FormControl fullWidth>
+                                    <InputLabel htmlFor="component-helper">
+                                        {t("pathOfFolderToStoreFiles")}
+                                    </InputLabel>
+                                    <Input
+                                        required
+                                        value={policy.DirNameRule}
+                                        onChange={handleChange("DirNameRule")}
+                                    />
+                                </FormControl>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>2</div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                <Trans
+                                    ns={"dashboard"}
+                                    i18nKey={"policy.filePathMagicVarDes"}
+                                    components={[
+                                        <Link
+                                            key={0}
+                                            color={"secondary"}
+                                            href={"javascript:void()"}
+                                            onClick={() => setMagicVar("file")}
+                                        />,
+                                    ]}
+                                />
+                            </Typography>
+                            <div className={classes.form}>
+                                <FormControl required component="fieldset">
+                                    <RadioGroup
+                                        aria-label="gender"
+                                        name="gender1"
+                                        value={policy.AutoRename}
+                                        onChange={handleChange("AutoRename")}
+                                        row
+                                    >
+                                        <FormControlLabel
+                                            value={"true"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("autoRenameStoredFile")}
+                                        />
+                                        <FormControlLabel
+                                            value={"false"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("keepOriginalFileName")}
+                                        />
+                                    </RadioGroup>
+                                </FormControl>
+                            </div>
+
+                            <Collapse in={policy.AutoRename === "true"}>
+                                <div className={classes.form}>
+                                    <FormControl fullWidth>
+                                        <InputLabel htmlFor="component-helper">
+                                            {t("renameRule")}
+                                        </InputLabel>
+                                        <Input
+                                            required={
+                                                policy.AutoRename === "true"
+                                            }
+                                            value={policy.FileNameRule}
+                                            onChange={handleChange(
+                                                "FileNameRule"
+                                            )}
+                                        />
+                                    </FormControl>
+                                </div>
+                            </Collapse>
+                        </div>
+                    </div>
+
+                    <div className={classes.stepFooter}>
+                        <Button
+                            color={"default"}
+                            className={classes.button}
+                            onClick={() => setActiveStep(0)}
+                        >
+                            {t("back")}
+                        </Button>
+                        <Button
+                            disabled={loading}
+                            type={"submit"}
+                            variant={"contained"}
+                            color={"primary"}
+                        >
+                            {t("next")}
+                        </Button>
+                    </div>
+                </form>
+            )}
+
+            {activeStep === 2 && (
+                <form
+                    className={classes.stepContent}
+                    onSubmit={(e) => {
+                        e.preventDefault();
+                        setActiveStep(3);
+                    }}
+                >
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>1</div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                {t("enableGettingPermanentSourceLink")}
+                                <br />
+                                {t("enableGettingPermanentSourceLinkDes")}
+                            </Typography>
+
+                            <div className={classes.form}>
+                                <FormControl required component="fieldset">
+                                    <RadioGroup
+                                        required
+                                        value={policy.IsOriginLinkEnable}
+                                        onChange={(e) => {
+                                            if (
+                                                policy.IsPrivate === "true" &&
+                                                e.target.value === "true"
+                                            ) {
+                                                ToggleSnackbar(
+                                                    "top",
+                                                    "right",
+                                                    t(
+                                                        "cannotEnableForPrivateBucket"
+                                                    ),
+                                                    "warning"
+                                                );
+                                            }
+                                            handleChange("IsOriginLinkEnable")(
+                                                e
+                                            );
+                                        }}
+                                        row
+                                    >
+                                        <FormControlLabel
+                                            value={"true"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("allowed")}
+                                        />
+                                        <FormControlLabel
+                                            value={"false"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("forbidden")}
+                                        />
+                                    </RadioGroup>
+                                </FormControl>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className={classes.stepFooter}>
+                        <Button
+                            color={"default"}
+                            className={classes.button}
+                            onClick={() => setActiveStep(1)}
+                        >
+                            {t("back")}
+                        </Button>{" "}
+                        <Button
+                            disabled={loading}
+                            type={"submit"}
+                            variant={"contained"}
+                            color={"primary"}
+                        >
+                            {t("next")}
+                        </Button>
+                    </div>
+                </form>
+            )}
+
+            {activeStep === 3 && (
+                <form
+                    className={classes.stepContent}
+                    onSubmit={(e) => {
+                        e.preventDefault();
+                        setActiveStep(4);
+                    }}
+                >
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>1</div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                {t("limitFileSize")}
+                            </Typography>
+
+                            <div className={classes.form}>
+                                <FormControl required component="fieldset">
+                                    <RadioGroup
+                                        required
+                                        value={
+                                            policy.MaxSize === "0"
+                                                ? "false"
+                                                : "true"
+                                        }
+                                        onChange={(e) => {
+                                            if (e.target.value === "true") {
+                                                setPolicy({
+                                                    ...policy,
+                                                    MaxSize: "10485760",
+                                                });
+                                            } else {
+                                                setPolicy({
+                                                    ...policy,
+                                                    MaxSize: "0",
+                                                });
+                                            }
+                                        }}
+                                        row
+                                    >
+                                        <FormControlLabel
+                                            value={"true"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("limit")}
+                                        />
+                                        <FormControlLabel
+                                            value={"false"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("notLimit")}
+                                        />
+                                    </RadioGroup>
+                                </FormControl>
+                            </div>
+                        </div>
+                    </div>
+
+                    <Collapse in={policy.MaxSize !== "0"}>
+                        <div className={classes.subStepContainer}>
+                            <div className={classes.stepNumberContainer}>
+                                <div className={classes.stepNumber}>2</div>
+                            </div>
+                            <div className={classes.subStepContent}>
+                                <Typography variant={"body2"}>
+                                    {t("enterSizeLimit")}
+                                </Typography>
+                                <div className={classes.form}>
+                                    <SizeInput
+                                        value={policy.MaxSize}
+                                        onChange={handleChange("MaxSize")}
+                                        min={0}
+                                        max={9223372036854775807}
+                                        label={t("maxSizeOfSingleFile")}
+                                    />
+                                </div>
+                            </div>
+                        </div>
+                    </Collapse>
+
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>
+                                {policy.MaxSize !== "0" ? "3" : "2"}
+                            </div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                {t("limitFileExt")}
+                            </Typography>
+
+                            <div className={classes.form}>
+                                <FormControl required component="fieldset">
+                                    <RadioGroup
+                                        required
+                                        value={
+                                            policy.OptionsSerialized
+                                                .file_type === ""
+                                                ? "false"
+                                                : "true"
+                                        }
+                                        onChange={(e) => {
+                                            if (e.target.value === "true") {
+                                                setPolicy({
+                                                    ...policy,
+                                                    OptionsSerialized: {
+                                                        ...policy.OptionsSerialized,
+                                                        file_type:
+                                                            "jpg,png,mp4,zip,rar",
+                                                    },
+                                                });
+                                            } else {
+                                                setPolicy({
+                                                    ...policy,
+                                                    OptionsSerialized: {
+                                                        ...policy.OptionsSerialized,
+                                                        file_type: "",
+                                                    },
+                                                });
+                                            }
+                                        }}
+                                        row
+                                    >
+                                        <FormControlLabel
+                                            value={"true"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("limit")}
+                                        />
+                                        <FormControlLabel
+                                            value={"false"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("notLimit")}
+                                        />
+                                    </RadioGroup>
+                                </FormControl>
+                            </div>
+                        </div>
+                    </div>
+
+                    <Collapse in={policy.OptionsSerialized.file_type !== ""}>
+                        <div className={classes.subStepContainer}>
+                            <div className={classes.stepNumberContainer}>
+                                <div className={classes.stepNumber}>
+                                    {policy.MaxSize !== "0" ? "4" : "3"}
+                                </div>
+                            </div>
+                            <div className={classes.subStepContent}>
+                                <Typography variant={"body2"}>
+                                    {t("enterFileExt")}
+                                </Typography>
+                                <div className={classes.form}>
+                                    <FormControl fullWidth>
+                                        <InputLabel htmlFor="component-helper">
+                                            {t("extList")}
+                                        </InputLabel>
+                                        <Input
+                                            value={
+                                                policy.OptionsSerialized
+                                                    .file_type
+                                            }
+                                            onChange={handleOptionChange(
+                                                "file_type"
+                                            )}
+                                        />
+                                    </FormControl>
+                                </div>
+                            </div>
+                        </div>
+                    </Collapse>
+
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>
+                                {getNumber(3, [
+                                    policy.MaxSize !== "0",
+                                    policy.OptionsSerialized.file_type !== "",
+                                ])}
+                            </div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                {t("limitMimeType")}
+                            </Typography>
+
+                            <div className={classes.form}>
+                                <FormControl required component="fieldset">
+                                    <RadioGroup
+                                        required
+                                        value={
+                                            policy.OptionsSerialized
+                                                .mimetype === ""
+                                                ? "false"
+                                                : "true"
+                                        }
+                                        onChange={(e) => {
+                                            if (e.target.value === "true") {
+                                                setPolicy({
+                                                    ...policy,
+                                                    OptionsSerialized: {
+                                                        ...policy.OptionsSerialized,
+                                                        mimetype: "image/*",
+                                                    },
+                                                });
+                                            } else {
+                                                setPolicy({
+                                                    ...policy,
+                                                    OptionsSerialized: {
+                                                        ...policy.OptionsSerialized,
+                                                        mimetype: "",
+                                                    },
+                                                });
+                                            }
+                                        }}
+                                        row
+                                    >
+                                        <FormControlLabel
+                                            value={"true"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("limit")}
+                                        />
+                                        <FormControlLabel
+                                            value={"false"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("notLimit")}
+                                        />
+                                    </RadioGroup>
+                                </FormControl>
+                            </div>
+                        </div>
+                    </div>
+
+                    <Collapse in={policy.OptionsSerialized.mimetype !== ""}>
+                        <div className={classes.subStepContainer}>
+                            <div className={classes.stepNumberContainer}>
+                                <div className={classes.stepNumber}>
+                                    {getNumber(4, [
+                                        policy.MaxSize !== "0",
+                                        policy.OptionsSerialized.file_type !==
+                                            "",
+                                    ])}
+                                </div>
+                            </div>
+                            <div className={classes.subStepContent}>
+                                <Typography variant={"body2"}>
+                                    {t("mimeTypeDes")}
+                                </Typography>
+                                <div className={classes.form}>
+                                    <FormControl fullWidth>
+                                        <InputLabel htmlFor="component-helper">
+                                            {t("mimeTypeList")}
+                                        </InputLabel>
+                                        <Input
+                                            value={
+                                                policy.OptionsSerialized
+                                                    .mimetype
+                                            }
+                                            onChange={handleOptionChange(
+                                                "mimetype"
+                                            )}
+                                        />
+                                    </FormControl>
+                                </div>
+                            </div>
+                        </div>
+                    </Collapse>
+
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>
+                                {getNumber(4, [
+                                    policy.MaxSize !== "0",
+                                    policy.OptionsSerialized.file_type !== "",
+                                    policy.OptionsSerialized.mimetype !== "",
+                                ])}
+                            </div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                {t("chunkSizeLabelQiniu")}
+                                <br />
+                                {t("chunkSizeDes")}
+                            </Typography>
+                            <div className={classes.form}>
+                                <SizeInput
+                                    value={policy.OptionsSerialized.chunk_size}
+                                    onChange={handleOptionChange("chunk_size")}
+                                    min={1 << 20}
+                                    max={1024 << 20}
+                                    label={t("chunkSize")}
+                                />
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>
+                                {getNumber(5, [
+                                    policy.MaxSize !== "0",
+                                    policy.OptionsSerialized.file_type !== "",
+                                    policy.OptionsSerialized.mimetype !== "",
+                                ])}
+                            </div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                {t("createPlaceholderDes")}
+                            </Typography>
+                            <div className={classes.form}>
+                                <FormControl required component="fieldset">
+                                    <RadioGroup
+                                        aria-label="gender"
+                                        name="gender1"
+                                        value={
+                                            policy.OptionsSerialized
+                                                .placeholder_with_size
+                                        }
+                                        onChange={handleOptionChange(
+                                            "placeholder_with_size"
+                                        )}
+                                        row
+                                    >
+                                        <FormControlLabel
+                                            value={"true"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("createPlaceholder")}
+                                        />
+                                        <FormControlLabel
+                                            value={"false"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("notCreatePlaceholder")}
+                                        />
+                                    </RadioGroup>
+                                </FormControl>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className={classes.stepFooter}>
+                        <Button
+                            color={"default"}
+                            className={classes.button}
+                            onClick={() => setActiveStep(2)}
+                        >
+                            {t("back")}
+                        </Button>{" "}
+                        <Button
+                            disabled={loading}
+                            type={"submit"}
+                            variant={"contained"}
+                            color={"primary"}
+                        >
+                            {t("next")}
+                        </Button>
+                    </div>
+                </form>
+            )}
+
+            {activeStep === 4 && (
+                <form className={classes.stepContent} onSubmit={submitPolicy}>
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer} />
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                {t("nameThePolicy")}
+                            </Typography>
+                            <div className={classes.form}>
+                                <FormControl fullWidth>
+                                    <InputLabel htmlFor="component-helper">
+                                        {t("policyName")}
+                                    </InputLabel>
+                                    <Input
+                                        required
+                                        value={policy.Name}
+                                        onChange={handleChange("Name")}
+                                    />
+                                </FormControl>
+                            </div>
+                        </div>
+                    </div>
+                    <div className={classes.stepFooter}>
+                        <Button
+                            color={"default"}
+                            className={classes.button}
+                            onClick={() => setActiveStep(3)}
+                        >
+                            {t("back")}
+                        </Button>{" "}
+                        <Button
+                            disabled={loading}
+                            type={"submit"}
+                            variant={"contained"}
+                            color={"primary"}
+                        >
+                            {t("finish")}
+                        </Button>
+                    </div>
+                </form>
+            )}
+
+            {activeStep === 5 && (
+                <>
+                    <form className={classes.stepContent}>
+                        <Typography>
+                            {props.policy ? t("policySaved") : t("policyAdded")}
+                        </Typography>
+                        <Typography variant={"body2"} color={"textSecondary"}>
+                            {t("furtherActions")}
+                        </Typography>
+                    </form>
+                    <div className={classes.stepFooter}>
+                        <Button
+                            color={"primary"}
+                            className={classes.button}
+                            onClick={() => history.push("/admin/policy")}
+                        >
+                            {t("backToList")}
+                        </Button>
+                    </div>
+                </>
+            )}
+
+            <MagicVar
+                open={magicVar === "file"}
+                isFile
+                onClose={() => setMagicVar("")}
+            />
+            <MagicVar
+                open={magicVar === "path"}
+                onClose={() => setMagicVar("")}
+            />
+        </div>
+    );
+}
diff --git a/src/component/Admin/Policy/Guid/RemoteGuide.js b/src/component/Admin/Policy/Guid/RemoteGuide.js
new file mode 100644
index 0000000..c41526e
--- /dev/null
+++ b/src/component/Admin/Policy/Guid/RemoteGuide.js
@@ -0,0 +1,1027 @@
+import { lighten, makeStyles } from "@material-ui/core/styles";
+import React, { useCallback, useState } from "react";
+import Stepper from "@material-ui/core/Stepper";
+import StepLabel from "@material-ui/core/StepLabel";
+import Step from "@material-ui/core/Step";
+import Typography from "@material-ui/core/Typography";
+import { useDispatch } from "react-redux";
+import Link from "@material-ui/core/Link";
+import FormControl from "@material-ui/core/FormControl";
+import InputLabel from "@material-ui/core/InputLabel";
+import Input from "@material-ui/core/Input";
+import RadioGroup from "@material-ui/core/RadioGroup";
+import FormControlLabel from "@material-ui/core/FormControlLabel";
+import Radio from "@material-ui/core/Radio";
+import Collapse from "@material-ui/core/Collapse";
+import Button from "@material-ui/core/Button";
+import API from "../../../../middleware/Api";
+import MagicVar from "../../Dialogs/MagicVar";
+import DomainInput from "../../Common/DomainInput";
+import SizeInput from "../../Common/SizeInput";
+import { useHistory } from "react-router";
+import Alert from "@material-ui/lab/Alert";
+import { getNumber, randomStr } from "../../../../utils";
+import { toggleSnackbar } from "../../../../redux/explorer";
+import { Trans, useTranslation } from "react-i18next";
+import { transformPolicyRequest } from "../utils";
+
+const useStyles = makeStyles((theme) => ({
+    stepContent: {
+        padding: "16px 32px 16px 32px",
+    },
+    form: {
+        maxWidth: 400,
+        marginTop: 20,
+    },
+    formContainer: {
+        [theme.breakpoints.up("md")]: {
+            padding: "0px 24px 0 24px",
+        },
+    },
+    subStepContainer: {
+        display: "flex",
+        marginBottom: 20,
+        padding: 10,
+        transition: theme.transitions.create("background-color", {
+            easing: theme.transitions.easing.sharp,
+            duration: theme.transitions.duration.leavingScreen,
+        }),
+        "&:focus-within": {
+            backgroundColor: theme.palette.background.default,
+        },
+    },
+    stepNumber: {
+        width: 20,
+        height: 20,
+        backgroundColor: lighten(theme.palette.secondary.light, 0.2),
+        color: theme.palette.secondary.contrastText,
+        textAlign: "center",
+        borderRadius: " 50%",
+    },
+    stepNumberContainer: {
+        marginRight: 10,
+    },
+    stepFooter: {
+        marginTop: 32,
+    },
+    button: {
+        marginRight: theme.spacing(1),
+    },
+    "@global": {
+        code: {
+            color: "rgba(0, 0, 0, 0.87)",
+            display: "inline-block",
+            padding: "2px 6px",
+            fontSize: "14px",
+            fontFamily:
+                ' Consolas, "Liberation Mono", Menlo, Courier, monospace',
+            borderRadius: "2px",
+            backgroundColor: "rgba(255,229,100,0.1)",
+        },
+        pre: {
+            margin: "24px 0",
+            padding: "12px 18px",
+            overflow: "auto",
+            direction: "ltr",
+            borderRadius: "4px",
+            backgroundColor: "#272c34",
+            color: "#fff",
+        },
+    },
+}));
+
+const steps = [
+    {
+        title: "storageNode",
+        optional: false,
+    },
+    {
+        title: "storagePathStep",
+        optional: false,
+    },
+    {
+        title: "sourceLinkStep",
+        optional: false,
+    },
+    {
+        title: "uploadSettingStep",
+        optional: false,
+    },
+    {
+        title: "finishStep",
+        optional: false,
+    },
+];
+
+export default function RemoteGuide(props) {
+    const { t } = useTranslation("dashboard", { keyPrefix: "policy" });
+    const classes = useStyles();
+    const history = useHistory();
+
+    const [activeStep, setActiveStep] = useState(0);
+    const [loading, setLoading] = useState(false);
+    const [skipped] = React.useState(new Set());
+    const [magicVar, setMagicVar] = useState("");
+    const [useCDN, setUseCDN] = useState("false");
+    const [policy, setPolicy] = useState(
+        props.policy
+            ? props.policy
+            : {
+                  Type: "remote",
+                  Name: "",
+                  Server: "https://example.com:5212",
+                  SecretKey: randomStr(64),
+                  DirNameRule: "uploads/{year}/{month}/{day}",
+                  AutoRename: "true",
+                  FileNameRule: "{randomkey8}_{originname}",
+                  IsOriginLinkEnable: "false",
+                  BaseURL: "",
+                  IsPrivate: "true",
+                  MaxSize: "0",
+                  OptionsSerialized: {
+                      file_type: "",
+                      chunk_size: 25 << 20,
+                  },
+              }
+    );
+
+    const handleChange = (name) => (event) => {
+        setPolicy({
+            ...policy,
+            [name]: event.target.value,
+        });
+    };
+
+    const handleOptionChange = (name) => (event) => {
+        setPolicy({
+            ...policy,
+            OptionsSerialized: {
+                ...policy.OptionsSerialized,
+                [name]: event.target.value,
+            },
+        });
+    };
+
+    const isStepSkipped = (step) => {
+        return skipped.has(step);
+    };
+
+    const dispatch = useDispatch();
+    const ToggleSnackbar = useCallback(
+        (vertical, horizontal, msg, color) =>
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color)),
+        [dispatch]
+    );
+
+    const testSlave = () => {
+        setLoading(true);
+
+        // 测试路径是否可用
+        API.post("/admin/policy/test/slave", {
+            server: policy.Server,
+            secret: policy.SecretKey,
+        })
+            .then(() => {
+                ToggleSnackbar("top", "right", t("communicationOK"), "success");
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            })
+            .then(() => {
+                setLoading(false);
+            });
+    };
+
+    const submitPolicy = (e) => {
+        e.preventDefault();
+        setLoading(true);
+
+        let policyCopy = { ...policy };
+        policyCopy.OptionsSerialized = { ...policyCopy.OptionsSerialized };
+
+        // 处理存储策略
+        if (useCDN === "false" || policy.IsOriginLinkEnable === "false") {
+            policyCopy.BaseURL = "";
+        }
+
+        // 类型转换
+        policyCopy = transformPolicyRequest(policyCopy);
+
+        API.post("/admin/policy", {
+            policy: policyCopy,
+        })
+            .then(() => {
+                ToggleSnackbar(
+                    "top",
+                    "right",
+                    props.policy ? t("policySaved") : t("policyAdded"),
+                    "success"
+                );
+                setActiveStep(5);
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            })
+            .then(() => {
+                setLoading(false);
+            });
+
+        setLoading(false);
+    };
+
+    return (
+        <div>
+            <Typography variant={"h6"}>
+                {props.policy
+                    ? t("editRemoteStoragePolicy")
+                    : t("addRemoteStoragePolicy")}
+            </Typography>
+            <Stepper activeStep={activeStep}>
+                {steps.map((label, index) => {
+                    const stepProps = {};
+                    const labelProps = {};
+                    if (label.optional) {
+                        labelProps.optional = (
+                            <Typography variant="caption">
+                                {t("optional")}
+                            </Typography>
+                        );
+                    }
+                    if (isStepSkipped(index)) {
+                        stepProps.completed = false;
+                    }
+                    return (
+                        <Step key={label.title} {...stepProps}>
+                            <StepLabel {...labelProps}>
+                                {t(label.title)}
+                            </StepLabel>
+                        </Step>
+                    );
+                })}
+            </Stepper>
+
+            {activeStep === 0 && (
+                <form
+                    className={classes.stepContent}
+                    onSubmit={(e) => {
+                        e.preventDefault();
+                        setActiveStep(1);
+                    }}
+                >
+                    <Alert severity="info" style={{ marginBottom: 10 }}>
+                        {t("remoteDescription")}
+                    </Alert>
+
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>1</div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                {t("remoteCopyBinaryDescription")}
+                            </Typography>
+                        </div>
+                    </div>
+
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>2</div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                {t("remoteSecretDescription")}
+                            </Typography>
+                            <div className={classes.form}>
+                                <FormControl fullWidth>
+                                    <InputLabel htmlFor="component-helper">
+                                        {t("remoteSecret")}
+                                    </InputLabel>
+                                    <Input
+                                        required
+                                        inputProps={{
+                                            minlength: 64,
+                                        }}
+                                        value={policy.SecretKey}
+                                        onChange={handleChange("SecretKey")}
+                                    />
+                                </FormControl>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>3</div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                {t("modifyRemoteConfig")}
+                                <br />
+                                <Trans
+                                    ns={"dashboard"}
+                                    i18nKey={"policy.addRemoteConfigDes"}
+                                    components={[<code key={0} />]}
+                                />
+                            </Typography>
+                            <pre>
+                                [System]
+                                <br />
+                                Mode = slave
+                                <br />
+                                Listen = :5212
+                                <br />
+                                <br />
+                                [Slave]
+                                <br />
+                                Secret = {policy.SecretKey}
+                                <br />
+                                <br />
+                                [CORS]
+                                <br />
+                                AllowOrigins = *<br />
+                                AllowMethods = OPTIONS,GET,POST
+                                <br />
+                                AllowHeaders = *<br />
+                            </pre>
+                            <Typography variant={"body2"}>
+                                {t("remoteConfigDifference")}
+                                <ul>
+                                    <li>
+                                        <Trans
+                                            ns={"dashboard"}
+                                            i18nKey={
+                                                "policy.remoteConfigDifference1"
+                                            }
+                                            components={[
+                                                <code key={0} />,
+                                                <code key={1} />,
+                                                <code key={2} />,
+                                            ]}
+                                        />
+                                    </li>
+                                    <li>
+                                        <Trans
+                                            ns={"dashboard"}
+                                            i18nKey={
+                                                "policy.remoteConfigDifference2"
+                                            }
+                                            components={[
+                                                <code key={0} />,
+                                                <code key={1} />,
+                                            ]}
+                                        />
+                                    </li>
+                                    <li>
+                                        <Trans
+                                            ns={"dashboard"}
+                                            i18nKey={
+                                                "policy.remoteConfigDifference3"
+                                            }
+                                            components={[<code key={0} />]}
+                                        />
+                                    </li>
+                                </ul>
+                            </Typography>
+                        </div>
+                    </div>
+
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>4</div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                {t("inputRemoteAddress")}
+                                <br />
+                                {t("inputRemoteAddressDes")}
+                            </Typography>
+                            <div className={classes.form}>
+                                <FormControl fullWidth>
+                                    <InputLabel htmlFor="component-helper">
+                                        {t("remoteAddress")}
+                                    </InputLabel>
+                                    <Input
+                                        fullWidth
+                                        required
+                                        type={"url"}
+                                        value={policy.Server}
+                                        onChange={handleChange("Server")}
+                                    />
+                                </FormControl>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>5</div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                {t("testCommunicationDes")}
+                            </Typography>
+                            <div className={classes.form}>
+                                <Button
+                                    disabled={loading}
+                                    onClick={() => testSlave()}
+                                    variant={"outlined"}
+                                    color={"primary"}
+                                >
+                                    {t("testCommunication")}
+                                </Button>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className={classes.stepFooter}>
+                        <Button
+                            disabled={loading}
+                            type={"submit"}
+                            variant={"contained"}
+                            color={"primary"}
+                        >
+                            {t("next")}
+                        </Button>
+                    </div>
+                </form>
+            )}
+
+            {activeStep === 1 && (
+                <form
+                    className={classes.stepContent}
+                    onSubmit={(e) => {
+                        e.preventDefault();
+                        setActiveStep(2);
+                    }}
+                >
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>1</div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                <Trans
+                                    ns={"dashboard"}
+                                    i18nKey={"policy.pathMagicVarDesRemote"}
+                                    components={[
+                                        <Link
+                                            key={0}
+                                            color={"secondary"}
+                                            href={"javascript:void()"}
+                                            onClick={() => setMagicVar("path")}
+                                        />,
+                                    ]}
+                                />
+                            </Typography>
+                            <div className={classes.form}>
+                                <FormControl fullWidth>
+                                    <InputLabel htmlFor="component-helper">
+                                        {t("pathOfFolderToStoreFiles")}
+                                    </InputLabel>
+                                    <Input
+                                        required
+                                        value={policy.DirNameRule}
+                                        onChange={handleChange("DirNameRule")}
+                                    />
+                                </FormControl>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>2</div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                <Trans
+                                    ns={"dashboard"}
+                                    i18nKey={"policy.filePathMagicVarDes"}
+                                    components={[
+                                        <Link
+                                            key={0}
+                                            color={"secondary"}
+                                            href={"javascript:void()"}
+                                            onClick={(e) => {
+                                                e.preventDefault();
+                                                setMagicVar("file");
+                                            }}
+                                        />,
+                                    ]}
+                                />
+                            </Typography>
+                            <div className={classes.form}>
+                                <FormControl required component="fieldset">
+                                    <RadioGroup
+                                        aria-label="gender"
+                                        name="gender1"
+                                        value={policy.AutoRename}
+                                        onChange={handleChange("AutoRename")}
+                                        row
+                                    >
+                                        <FormControlLabel
+                                            value={"true"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("autoRenameStoredFile")}
+                                        />
+                                        <FormControlLabel
+                                            value={"false"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("keepOriginalFileName")}
+                                        />
+                                    </RadioGroup>
+                                </FormControl>
+                            </div>
+
+                            <Collapse in={policy.AutoRename === "true"}>
+                                <div className={classes.form}>
+                                    <FormControl fullWidth>
+                                        <InputLabel htmlFor="component-helper">
+                                            {t("renameRule")}
+                                        </InputLabel>
+                                        <Input
+                                            required={
+                                                policy.AutoRename === "true"
+                                            }
+                                            value={policy.FileNameRule}
+                                            onChange={handleChange(
+                                                "FileNameRule"
+                                            )}
+                                        />
+                                    </FormControl>
+                                </div>
+                            </Collapse>
+                        </div>
+                    </div>
+
+                    <div className={classes.stepFooter}>
+                        <Button
+                            color={"default"}
+                            className={classes.button}
+                            onClick={() => setActiveStep(0)}
+                        >
+                            {t("back")}
+                        </Button>
+                        <Button
+                            disabled={loading}
+                            type={"submit"}
+                            variant={"contained"}
+                            color={"primary"}
+                        >
+                            {t("next")}
+                        </Button>
+                    </div>
+                </form>
+            )}
+
+            {activeStep === 2 && (
+                <form
+                    className={classes.stepContent}
+                    onSubmit={(e) => {
+                        e.preventDefault();
+                        setActiveStep(3);
+                    }}
+                >
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>1</div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                {t("enableGettingPermanentSourceLink")}
+                                <br />
+                                {t("enableGettingPermanentSourceLinkDes")}
+                            </Typography>
+
+                            <div className={classes.form}>
+                                <FormControl required component="fieldset">
+                                    <RadioGroup
+                                        required
+                                        value={policy.IsOriginLinkEnable}
+                                        onChange={handleChange(
+                                            "IsOriginLinkEnable"
+                                        )}
+                                        row
+                                    >
+                                        <FormControlLabel
+                                            value={"true"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("allowed")}
+                                        />
+                                        <FormControlLabel
+                                            value={"false"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("forbidden")}
+                                        />
+                                    </RadioGroup>
+                                </FormControl>
+                            </div>
+                        </div>
+                    </div>
+
+                    <Collapse in={policy.IsOriginLinkEnable === "true"}>
+                        <div className={classes.subStepContainer}>
+                            <div className={classes.stepNumberContainer}>
+                                <div className={classes.stepNumber}>2</div>
+                            </div>
+                            <div className={classes.subStepContent}>
+                                <Typography variant={"body2"}>
+                                    {t("useCDN")}
+                                    <br />
+                                    {t("useCDNDes")}
+                                </Typography>
+
+                                <div className={classes.form}>
+                                    <FormControl required component="fieldset">
+                                        <RadioGroup
+                                            required
+                                            value={useCDN}
+                                            onChange={(e) => {
+                                                if (
+                                                    e.target.value === "false"
+                                                ) {
+                                                    setPolicy({
+                                                        ...policy,
+                                                        BaseURL: "",
+                                                    });
+                                                }
+                                                setUseCDN(e.target.value);
+                                            }}
+                                            row
+                                        >
+                                            <FormControlLabel
+                                                value={"true"}
+                                                control={
+                                                    <Radio color={"primary"} />
+                                                }
+                                                label={t("use")}
+                                            />
+                                            <FormControlLabel
+                                                value={"false"}
+                                                control={
+                                                    <Radio color={"primary"} />
+                                                }
+                                                label={t("notUse")}
+                                            />
+                                        </RadioGroup>
+                                    </FormControl>
+                                </div>
+                            </div>
+                        </div>
+
+                        <Collapse in={useCDN === "true"}>
+                            <div className={classes.subStepContainer}>
+                                <div className={classes.stepNumberContainer}>
+                                    <div className={classes.stepNumber}>3</div>
+                                </div>
+                                <div className={classes.subStepContent}>
+                                    <Typography variant={"body2"}>
+                                        {t("cdnDomain")}
+                                    </Typography>
+
+                                    <div className={classes.form}>
+                                        <DomainInput
+                                            value={policy.BaseURL}
+                                            onChange={handleChange("BaseURL")}
+                                            required={
+                                                policy.IsOriginLinkEnable ===
+                                                    "true" && useCDN === "true"
+                                            }
+                                            label={t("cdnPrefix")}
+                                        />
+                                    </div>
+                                </div>
+                            </div>
+                        </Collapse>
+                    </Collapse>
+
+                    <div className={classes.stepFooter}>
+                        <Button
+                            color={"default"}
+                            className={classes.button}
+                            onClick={() => setActiveStep(1)}
+                        >
+                            {t("back")}
+                        </Button>{" "}
+                        <Button
+                            disabled={loading}
+                            type={"submit"}
+                            variant={"contained"}
+                            color={"primary"}
+                        >
+                            {t("next")}
+                        </Button>
+                    </div>
+                </form>
+            )}
+
+            {activeStep === 3 && (
+                <form
+                    className={classes.stepContent}
+                    onSubmit={(e) => {
+                        e.preventDefault();
+                        setActiveStep(4);
+                    }}
+                >
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>1</div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                {t("limitFileSize")}
+                            </Typography>
+
+                            <div className={classes.form}>
+                                <FormControl required component="fieldset">
+                                    <RadioGroup
+                                        required
+                                        value={
+                                            policy.MaxSize === "0"
+                                                ? "false"
+                                                : "true"
+                                        }
+                                        onChange={(e) => {
+                                            if (e.target.value === "true") {
+                                                setPolicy({
+                                                    ...policy,
+                                                    MaxSize: "10485760",
+                                                });
+                                            } else {
+                                                setPolicy({
+                                                    ...policy,
+                                                    MaxSize: "0",
+                                                });
+                                            }
+                                        }}
+                                        row
+                                    >
+                                        <FormControlLabel
+                                            value={"true"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("limit")}
+                                        />
+                                        <FormControlLabel
+                                            value={"false"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("notLimit")}
+                                        />
+                                    </RadioGroup>
+                                </FormControl>
+                            </div>
+                        </div>
+                    </div>
+
+                    <Collapse in={policy.MaxSize !== "0"}>
+                        <div className={classes.subStepContainer}>
+                            <div className={classes.stepNumberContainer}>
+                                <div className={classes.stepNumber}>2</div>
+                            </div>
+                            <div className={classes.subStepContent}>
+                                <Typography variant={"body2"}>
+                                    {t("enterSizeLimit")}
+                                </Typography>
+                                <div className={classes.form}>
+                                    <SizeInput
+                                        value={policy.MaxSize}
+                                        onChange={handleChange("MaxSize")}
+                                        min={0}
+                                        max={9223372036854775807}
+                                        label={t("maxSizeOfSingleFile")}
+                                    />
+                                </div>
+                            </div>
+                        </div>
+                    </Collapse>
+
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>
+                                {policy.MaxSize !== "0" ? "3" : "2"}
+                            </div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                {t("limitFileExt")}
+                            </Typography>
+
+                            <div className={classes.form}>
+                                <FormControl required component="fieldset">
+                                    <RadioGroup
+                                        required
+                                        value={
+                                            policy.OptionsSerialized
+                                                .file_type === ""
+                                                ? "false"
+                                                : "true"
+                                        }
+                                        onChange={(e) => {
+                                            if (e.target.value === "true") {
+                                                setPolicy({
+                                                    ...policy,
+                                                    OptionsSerialized: {
+                                                        ...policy.OptionsSerialized,
+                                                        file_type:
+                                                            "jpg,png,mp4,zip,rar",
+                                                    },
+                                                });
+                                            } else {
+                                                setPolicy({
+                                                    ...policy,
+                                                    OptionsSerialized: {
+                                                        ...policy.OptionsSerialized,
+                                                        file_type: "",
+                                                    },
+                                                });
+                                            }
+                                        }}
+                                        row
+                                    >
+                                        <FormControlLabel
+                                            value={"true"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("limit")}
+                                        />
+                                        <FormControlLabel
+                                            value={"false"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("notLimit")}
+                                        />
+                                    </RadioGroup>
+                                </FormControl>
+                            </div>
+                        </div>
+                    </div>
+
+                    <Collapse in={policy.OptionsSerialized.file_type !== ""}>
+                        <div className={classes.subStepContainer}>
+                            <div className={classes.stepNumberContainer}>
+                                <div className={classes.stepNumber}>
+                                    {policy.MaxSize !== "0" ? "4" : "3"}
+                                </div>
+                            </div>
+                            <div className={classes.subStepContent}>
+                                <Typography variant={"body2"}>
+                                    {t("enterFileExt")}
+                                </Typography>
+                                <div className={classes.form}>
+                                    <FormControl fullWidth>
+                                        <InputLabel htmlFor="component-helper">
+                                            {t("extList")}
+                                        </InputLabel>
+                                        <Input
+                                            value={
+                                                policy.OptionsSerialized
+                                                    .file_type
+                                            }
+                                            onChange={handleOptionChange(
+                                                "file_type"
+                                            )}
+                                        />
+                                    </FormControl>
+                                </div>
+                            </div>
+                        </div>
+                    </Collapse>
+
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>
+                                {getNumber(3, [
+                                    policy.MaxSize !== "0",
+                                    policy.OptionsSerialized.file_type !== "",
+                                ])}
+                            </div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                {t("chunkSizeLabel")}
+                                <br />
+                                {t("chunkSizeDes")}
+                            </Typography>
+                            <div className={classes.form}>
+                                <SizeInput
+                                    value={policy.OptionsSerialized.chunk_size}
+                                    onChange={handleOptionChange("chunk_size")}
+                                    min={0}
+                                    max={9223372036854775807}
+                                    label={t("chunkSize")}
+                                />
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className={classes.stepFooter}>
+                        <Button
+                            color={"default"}
+                            className={classes.button}
+                            onClick={() => setActiveStep(2)}
+                        >
+                            {t("back")}
+                        </Button>{" "}
+                        <Button
+                            disabled={loading}
+                            type={"submit"}
+                            variant={"contained"}
+                            color={"primary"}
+                        >
+                            {t("next")}
+                        </Button>
+                    </div>
+                </form>
+            )}
+
+            {activeStep === 4 && (
+                <form className={classes.stepContent} onSubmit={submitPolicy}>
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}></div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                {t("nameThePolicy")}
+                            </Typography>
+                            <div className={classes.form}>
+                                <FormControl fullWidth>
+                                    <InputLabel htmlFor="component-helper">
+                                        {t("policyName")}
+                                    </InputLabel>
+                                    <Input
+                                        required
+                                        value={policy.Name}
+                                        onChange={handleChange("Name")}
+                                    />
+                                </FormControl>
+                            </div>
+                        </div>
+                    </div>
+                    <div className={classes.stepFooter}>
+                        <Button
+                            color={"default"}
+                            className={classes.button}
+                            onClick={() => setActiveStep(3)}
+                        >
+                            {t("back")}
+                        </Button>{" "}
+                        <Button
+                            disabled={loading}
+                            type={"submit"}
+                            variant={"contained"}
+                            color={"primary"}
+                        >
+                            {t("finish")}
+                        </Button>
+                    </div>
+                </form>
+            )}
+
+            {activeStep === 5 && (
+                <>
+                    <form className={classes.stepContent}>
+                        <Typography>
+                            {props.policy ? t("policySaved") : t("policyAdded")}
+                        </Typography>
+                        <Typography variant={"body2"} color={"textSecondary"}>
+                            {t("furtherActions")}
+                        </Typography>
+                    </form>
+                    <div className={classes.stepFooter}>
+                        <Button
+                            color={"primary"}
+                            className={classes.button}
+                            onClick={() => history.push("/admin/policy")}
+                        >
+                            {t("backToList")}
+                        </Button>
+                    </div>
+                </>
+            )}
+
+            <MagicVar
+                open={magicVar === "file"}
+                isFile
+                isSlave
+                onClose={() => setMagicVar("")}
+            />
+            <MagicVar
+                open={magicVar === "path"}
+                isSlave
+                onClose={() => setMagicVar("")}
+            />
+        </div>
+    );
+}
diff --git a/src/component/Admin/Policy/Guid/S3Guide.js b/src/component/Admin/Policy/Guid/S3Guide.js
new file mode 100644
index 0000000..7a69568
--- /dev/null
+++ b/src/component/Admin/Policy/Guid/S3Guide.js
@@ -0,0 +1,1183 @@
+import { lighten, makeStyles } from "@material-ui/core/styles";
+import React, { useCallback, useState } from "react";
+import Stepper from "@material-ui/core/Stepper";
+import StepLabel from "@material-ui/core/StepLabel";
+import Step from "@material-ui/core/Step";
+import Typography from "@material-ui/core/Typography";
+import { useDispatch } from "react-redux";
+import Link from "@material-ui/core/Link";
+import FormControl from "@material-ui/core/FormControl";
+import InputLabel from "@material-ui/core/InputLabel";
+import Input from "@material-ui/core/Input";
+import RadioGroup from "@material-ui/core/RadioGroup";
+import FormControlLabel from "@material-ui/core/FormControlLabel";
+import Radio from "@material-ui/core/Radio";
+import Collapse from "@material-ui/core/Collapse";
+import Button from "@material-ui/core/Button";
+import API from "../../../../middleware/Api";
+import MagicVar from "../../Dialogs/MagicVar";
+import DomainInput from "../../Common/DomainInput";
+import SizeInput from "../../Common/SizeInput";
+import { useHistory } from "react-router";
+import { getNumber } from "../../../../utils";
+import Autocomplete from "@material-ui/lab/Autocomplete";
+import TextField from "@material-ui/core/TextField";
+import AlertDialog from "../../Dialogs/Alert";
+import { toggleSnackbar } from "../../../../redux/explorer";
+import { Trans, useTranslation } from "react-i18next";
+import { transformPolicyRequest } from "../utils";
+
+const useStyles = makeStyles((theme) => ({
+    stepContent: {
+        padding: "16px 32px 16px 32px",
+    },
+    form: {
+        maxWidth: 400,
+        marginTop: 20,
+    },
+    formContainer: {
+        [theme.breakpoints.up("md")]: {
+            padding: "0px 24px 0 24px",
+        },
+    },
+    subStepContainer: {
+        display: "flex",
+        marginBottom: 20,
+        padding: 10,
+        transition: theme.transitions.create("background-color", {
+            easing: theme.transitions.easing.sharp,
+            duration: theme.transitions.duration.leavingScreen,
+        }),
+        "&:focus-within": {
+            backgroundColor: theme.palette.background.default,
+        },
+    },
+    stepNumber: {
+        width: 20,
+        height: 20,
+        backgroundColor: lighten(theme.palette.secondary.light, 0.2),
+        color: theme.palette.secondary.contrastText,
+        textAlign: "center",
+        borderRadius: " 50%",
+    },
+    stepNumberContainer: {
+        marginRight: 10,
+    },
+    stepFooter: {
+        marginTop: 32,
+    },
+    button: {
+        marginRight: theme.spacing(1),
+    },
+    viewButtonLabel: { textTransform: "none" },
+    "@global": {
+        code: {
+            color: "rgba(0, 0, 0, 0.87)",
+            display: "inline-block",
+            padding: "2px 6px",
+            fontFamily:
+                ' Consolas, "Liberation Mono", Menlo, Courier, monospace',
+            borderRadius: "2px",
+            backgroundColor: "rgba(255,229,100,0.1)",
+        },
+        pre: {
+            margin: "24px 0",
+            padding: "12px 18px",
+            overflow: "auto",
+            direction: "ltr",
+            borderRadius: "4px",
+            backgroundColor: "#272c34",
+            color: "#fff",
+        },
+    },
+}));
+
+const steps = [
+    {
+        title: "storageBucket",
+        optional: false,
+    },
+    {
+        title: "storagePathStep",
+        optional: false,
+    },
+    {
+        title: "sourceLinkStep",
+        optional: false,
+    },
+    {
+        title: "uploadSettingStep",
+        optional: false,
+    },
+    {
+        title: "corsSettingStep",
+        optional: true,
+    },
+    {
+        title: "finishStep",
+        optional: false,
+    },
+];
+
+const regions = {
+    "us-east-2": "US East (Ohio)",
+    "us-east-1": "US East (N. Virginia)",
+    "us-west-1": "US West (N. California)",
+    "us-west-2": "US West (Oregon)",
+    "af-south-1": "Africa (Cape Town)",
+    "ap-east-1": "Asia Pacific (Hong Kong)",
+    "ap-south-1": "Asia Pacific (Mumbai)",
+    "ap-northeast-3": "Asia Pacific (Osaka-Local)",
+    "ap-northeast-2": "Asia Pacific (Seoul)",
+    "ap-southeast-1": "Asia Pacific (Singapore)",
+    "ap-southeast-2": "Asia Pacific (Sydney)",
+    "ap-northeast-1": "Asia Pacific (Tokyo)",
+    "ca-central-1": "Canada (Central)",
+    "cn-north-1": "China (Beijing)",
+    "cn-northwest-1": "China (Ningxia)",
+    "eu-central-1": "Europe (Frankfurt)",
+    "eu-west-1": "Europe (Ireland)",
+    "eu-west-2": "Europe (London)",
+    "eu-south-1": "Europe (Milan)",
+    "eu-west-3": "Europe (Paris)",
+    "eu-north-1": "Europe (Stockholm)",
+    "me-south-1": "Middle East (Bahrain)",
+    "sa-east-1": "South America (São Paulo)",
+};
+
+export default function S3Guide(props) {
+    const { t } = useTranslation("dashboard", { keyPrefix: "policy" });
+    const classes = useStyles();
+    const history = useHistory();
+
+    const [activeStep, setActiveStep] = useState(0);
+    const [loading, setLoading] = useState(false);
+    const [alertOpen, setAlertOpen] = useState(true);
+    const [skipped, setSkipped] = React.useState(new Set());
+    const [magicVar, setMagicVar] = useState("");
+    const [useCDN, setUseCDN] = useState("false");
+    const [policy, setPolicy] = useState(
+        props.policy
+            ? props.policy
+            : {
+                  Type: "s3",
+                  Name: "",
+                  SecretKey: "",
+                  AccessKey: "",
+                  BaseURL: "",
+                  Server: "",
+                  IsPrivate: "true",
+                  DirNameRule: "uploads/{year}/{month}/{day}",
+                  AutoRename: "true",
+                  FileNameRule: "{randomkey8}_{originname}",
+                  IsOriginLinkEnable: "false",
+                  MaxSize: "0",
+                  OptionsSerialized: {
+                      file_type: "",
+                      region: "us-east-2",
+                      chunk_size: 25 << 20,
+                      placeholder_with_size: "false",
+                      s3_path_style: "true",
+                  },
+              }
+    );
+    const [policyID, setPolicyID] = useState(
+        props.policy ? props.policy.ID : 0
+    );
+
+    const handleChange = (name) => (event) => {
+        setPolicy({
+            ...policy,
+            [name]: event.target.value,
+        });
+    };
+
+    const handleOptionChange = (name) => (event) => {
+        setPolicy({
+            ...policy,
+            OptionsSerialized: {
+                ...policy.OptionsSerialized,
+                [name]: event.target.value,
+            },
+        });
+    };
+
+    const isStepSkipped = (step) => {
+        return skipped.has(step);
+    };
+
+    const dispatch = useDispatch();
+    const ToggleSnackbar = useCallback(
+        (vertical, horizontal, msg, color) =>
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color)),
+        [dispatch]
+    );
+
+    const submitPolicy = (e) => {
+        e.preventDefault();
+        setLoading(true);
+
+        let policyCopy = { ...policy };
+        policyCopy.OptionsSerialized = { ...policyCopy.OptionsSerialized };
+
+        if (useCDN === "false") {
+            policyCopy.BaseURL = "";
+        }
+
+        // 类型转换
+        policyCopy = transformPolicyRequest(policyCopy);
+
+        API.post("/admin/policy", {
+            policy: policyCopy,
+        })
+            .then((response) => {
+                ToggleSnackbar(
+                    "top",
+                    "right",
+                    props.policy ? t("policySaved") : t("policyAdded"),
+                    "success"
+                );
+                setActiveStep(4);
+                setPolicyID(response.data);
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            })
+            .then(() => {
+                setLoading(false);
+            });
+
+        setLoading(false);
+    };
+
+    const createCORS = () => {
+        setLoading(true);
+        API.post("/admin/policy/cors", {
+            id: policyID,
+        })
+            .then(() => {
+                ToggleSnackbar("top", "right", t("corsPolicyAdded"), "success");
+                setActiveStep(5);
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            })
+            .then(() => {
+                setLoading(false);
+            });
+    };
+
+    return (
+        <div>
+            <AlertDialog
+                open={alertOpen}
+                onClose={() => setAlertOpen(false)}
+                title={t("warning")}
+                msg={t("s3SelfHostWarning")}
+            />
+            <Typography variant={"h6"}>
+                {props.policy
+                    ? t("editS3StoragePolicy")
+                    : t("addS3StoragePolicy")}
+            </Typography>
+            <Stepper activeStep={activeStep}>
+                {steps.map((label, index) => {
+                    const stepProps = {};
+                    const labelProps = {};
+                    if (label.optional) {
+                        labelProps.optional = (
+                            <Typography variant="caption">
+                                {t("optional")}
+                            </Typography>
+                        );
+                    }
+                    if (isStepSkipped(index)) {
+                        stepProps.completed = false;
+                    }
+                    return (
+                        <Step key={label.title} {...stepProps}>
+                            <StepLabel {...labelProps}>
+                                {t(label.title)}
+                            </StepLabel>
+                        </Step>
+                    );
+                })}
+            </Stepper>
+
+            {activeStep === 0 && (
+                <form
+                    className={classes.stepContent}
+                    onSubmit={(e) => {
+                        e.preventDefault();
+                        setActiveStep(1);
+                    }}
+                >
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>1</div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                <Trans
+                                    ns={"dashboard"}
+                                    i18nKey={"policy.s3BucketDes"}
+                                    components={[<code key={0} />]}
+                                />
+                            </Typography>
+                            <div className={classes.form}>
+                                <FormControl fullWidth>
+                                    <InputLabel htmlFor="component-helper">
+                                        {t("bucketName")}
+                                    </InputLabel>
+                                    <Input
+                                        required
+                                        value={policy.BucketName}
+                                        onChange={handleChange("BucketName")}
+                                    />
+                                </FormControl>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>2</div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                {t("bucketTypeDes")}
+                            </Typography>
+                            <div className={classes.form}>
+                                <FormControl required component="fieldset">
+                                    <RadioGroup
+                                        required
+                                        value={policy.IsPrivate}
+                                        onChange={handleChange("IsPrivate")}
+                                        row
+                                    >
+                                        <FormControlLabel
+                                            value={"true"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("publicAccessDisabled")}
+                                        />
+                                        <FormControlLabel
+                                            value={"false"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("publicAccessEnabled")}
+                                        />
+                                    </RadioGroup>
+                                </FormControl>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>3</div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                <Trans
+                                    ns={"dashboard"}
+                                    i18nKey={"policy.s3EndpointDes"}
+                                    components={[<code key={0} />]}
+                                />
+                            </Typography>
+                            <div className={classes.form}>
+                                <FormControl fullWidth>
+                                    <InputLabel htmlFor="component-helper">
+                                        {t("endpoint")}
+                                    </InputLabel>
+                                    <Input
+                                        value={policy.Server}
+                                        onChange={handleChange("Server")}
+                                    />
+                                </FormControl>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>4</div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                <Trans
+                                    ns={"dashboard"}
+                                    i18nKey={"policy.s3EndpointPathStyle"}
+                                    components={[<code key={0} />]}
+                                />
+                            </Typography>
+                            <div className={classes.form}>
+                                <FormControl required component="fieldset">
+                                    <RadioGroup
+                                        required
+                                        value={
+                                            policy.OptionsSerialized
+                                                .s3_path_style
+                                        }
+                                        onChange={handleOptionChange(
+                                            "s3_path_style"
+                                        )}
+                                        row
+                                    >
+                                        <FormControlLabel
+                                            value={"true"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("usePathEndpoint")}
+                                        />
+                                        <FormControlLabel
+                                            value={"false"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("useHostnameEndpoint")}
+                                        />
+                                    </RadioGroup>
+                                </FormControl>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>5</div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                {t("selectRegionDes")}
+                            </Typography>
+                            <div className={classes.form}>
+                                <FormControl fullWidth>
+                                    <Autocomplete
+                                        options={Object.keys(regions)}
+                                        freeSolo
+                                        value={policy.OptionsSerialized.region}
+                                        onInputChange={(_, value) =>
+                                            handleOptionChange("region")({
+                                                target: { value: value },
+                                            })
+                                        }
+                                        renderOption={(option) => (
+                                            <React.Fragment>
+                                                {regions[option]}
+                                            </React.Fragment>
+                                        )}
+                                        renderInput={(params) => (
+                                            <TextField
+                                                style={{ width: "100%" }}
+                                                {...params}
+                                            />
+                                        )}
+                                    />
+                                </FormControl>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>6</div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                {t("useCDN")}
+                            </Typography>
+                            <div className={classes.form}>
+                                <FormControl required component="fieldset">
+                                    <RadioGroup
+                                        required
+                                        value={useCDN}
+                                        onChange={(e) => {
+                                            setUseCDN(e.target.value);
+                                        }}
+                                        row
+                                    >
+                                        <FormControlLabel
+                                            value={"true"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("use")}
+                                        />
+                                        <FormControlLabel
+                                            value={"false"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("notUse")}
+                                        />
+                                    </RadioGroup>
+                                </FormControl>
+                            </div>
+                        </div>
+                    </div>
+
+                    <Collapse in={useCDN === "true"}>
+                        <div className={classes.subStepContainer}>
+                            <div className={classes.stepNumberContainer}>
+                                <div className={classes.stepNumber}>7</div>
+                            </div>
+                            <div className={classes.subStepContent}>
+                                <Typography variant={"body2"}>
+                                    {t("bucketCDNDomain")}
+                                </Typography>
+                                <div className={classes.form}>
+                                    <DomainInput
+                                        value={policy.BaseURL}
+                                        onChange={handleChange("BaseURL")}
+                                        required={useCDN === "true"}
+                                        label={t("bucketCDNDomain")}
+                                    />
+                                </div>
+                            </div>
+                        </div>
+                    </Collapse>
+
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>
+                                {getNumber(7, [useCDN === "true"])}
+                            </div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                {t("enterAccessCredentials")}
+                            </Typography>
+                            <div className={classes.form}>
+                                <FormControl fullWidth>
+                                    <InputLabel htmlFor="component-helper">
+                                        {t("accessKey")}
+                                    </InputLabel>
+                                    <Input
+                                        required
+                                        inputProps={{
+                                            pattern: "\\S+",
+                                            title: t("shouldNotContainSpace"),
+                                        }}
+                                        value={policy.AccessKey}
+                                        onChange={handleChange("AccessKey")}
+                                    />
+                                </FormControl>
+                            </div>
+                            <div className={classes.form}>
+                                <FormControl fullWidth>
+                                    <InputLabel htmlFor="component-helper">
+                                        {t("secretKey")}
+                                    </InputLabel>
+                                    <Input
+                                        required
+                                        inputProps={{
+                                            pattern: "\\S+",
+                                            title: t("shouldNotContainSpace"),
+                                        }}
+                                        value={policy.SecretKey}
+                                        onChange={handleChange("SecretKey")}
+                                    />
+                                </FormControl>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>
+                                {getNumber(8, [useCDN === "true"])}
+                            </div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                {t("nameThePolicyFirst")}
+                            </Typography>
+                            <div className={classes.form}>
+                                <FormControl fullWidth>
+                                    <InputLabel htmlFor="component-helper">
+                                        {t("policyName")}
+                                    </InputLabel>
+                                    <Input
+                                        required
+                                        value={policy.Name}
+                                        onChange={handleChange("Name")}
+                                    />
+                                </FormControl>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className={classes.stepFooter}>
+                        <Button
+                            disabled={loading}
+                            type={"submit"}
+                            variant={"contained"}
+                            color={"primary"}
+                        >
+                            {t("next")}
+                        </Button>
+                    </div>
+                </form>
+            )}
+
+            {activeStep === 1 && (
+                <form
+                    className={classes.stepContent}
+                    onSubmit={(e) => {
+                        e.preventDefault();
+                        setActiveStep(2);
+                    }}
+                >
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>1</div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                <Trans
+                                    ns={"dashboard"}
+                                    i18nKey={"policy.pathMagicVarDes"}
+                                    components={[
+                                        <Link
+                                            key={0}
+                                            color={"secondary"}
+                                            href={"javascript:void()"}
+                                            onClick={() => setMagicVar("path")}
+                                        />,
+                                    ]}
+                                />
+                            </Typography>
+                            <div className={classes.form}>
+                                <FormControl fullWidth>
+                                    <InputLabel htmlFor="component-helper">
+                                        {t("pathOfFolderToStoreFiles")}
+                                    </InputLabel>
+                                    <Input
+                                        required
+                                        value={policy.DirNameRule}
+                                        onChange={handleChange("DirNameRule")}
+                                    />
+                                </FormControl>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>2</div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                <Trans
+                                    ns={"dashboard"}
+                                    i18nKey={"policy.filePathMagicVarDes"}
+                                    components={[
+                                        <Link
+                                            key={0}
+                                            color={"secondary"}
+                                            href={"javascript:void()"}
+                                            onClick={() => setMagicVar("file")}
+                                        />,
+                                    ]}
+                                />
+                            </Typography>
+                            <div className={classes.form}>
+                                <FormControl required component="fieldset">
+                                    <RadioGroup
+                                        aria-label="gender"
+                                        name="gender1"
+                                        value={policy.AutoRename}
+                                        onChange={handleChange("AutoRename")}
+                                        row
+                                    >
+                                        <FormControlLabel
+                                            value={"true"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("autoRenameStoredFile")}
+                                        />
+                                        <FormControlLabel
+                                            value={"false"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("keepOriginalFileName")}
+                                        />
+                                    </RadioGroup>
+                                </FormControl>
+                            </div>
+
+                            <Collapse in={policy.AutoRename === "true"}>
+                                <div className={classes.form}>
+                                    <FormControl fullWidth>
+                                        <InputLabel htmlFor="component-helper">
+                                            {t("renameRule")}
+                                        </InputLabel>
+                                        <Input
+                                            required={
+                                                policy.AutoRename === "true"
+                                            }
+                                            value={policy.FileNameRule}
+                                            onChange={handleChange(
+                                                "FileNameRule"
+                                            )}
+                                        />
+                                    </FormControl>
+                                </div>
+                            </Collapse>
+                        </div>
+                    </div>
+
+                    <div className={classes.stepFooter}>
+                        <Button
+                            color={"default"}
+                            className={classes.button}
+                            onClick={() => setActiveStep(0)}
+                        >
+                            {t("back")}
+                        </Button>
+                        <Button
+                            disabled={loading}
+                            type={"submit"}
+                            variant={"contained"}
+                            color={"primary"}
+                        >
+                            {t("next")}
+                        </Button>
+                    </div>
+                </form>
+            )}
+
+            {activeStep === 2 && (
+                <form
+                    className={classes.stepContent}
+                    onSubmit={(e) => {
+                        e.preventDefault();
+                        setActiveStep(3);
+                    }}
+                >
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>1</div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                {t("enableGettingPermanentSourceLink")}
+                                <br />
+                                {t("enableGettingPermanentSourceLinkDes")}
+                            </Typography>
+
+                            <div className={classes.form}>
+                                <FormControl required component="fieldset">
+                                    <RadioGroup
+                                        required
+                                        value={policy.IsOriginLinkEnable}
+                                        onChange={(e) => {
+                                            if (
+                                                policy.IsPrivate === "true" &&
+                                                e.target.value === "true"
+                                            ) {
+                                                ToggleSnackbar(
+                                                    "top",
+                                                    "right",
+                                                    t(
+                                                        "cannotEnableForPrivateBucket"
+                                                    ),
+                                                    "warning"
+                                                );
+                                            }
+                                            handleChange("IsOriginLinkEnable")(
+                                                e
+                                            );
+                                        }}
+                                        row
+                                    >
+                                        <FormControlLabel
+                                            value={"true"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("allowed")}
+                                        />
+                                        <FormControlLabel
+                                            value={"false"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("forbidden")}
+                                        />
+                                    </RadioGroup>
+                                </FormControl>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className={classes.stepFooter}>
+                        <Button
+                            color={"default"}
+                            className={classes.button}
+                            onClick={() => setActiveStep(1)}
+                        >
+                            {t("back")}
+                        </Button>{" "}
+                        <Button
+                            disabled={loading}
+                            type={"submit"}
+                            variant={"contained"}
+                            color={"primary"}
+                        >
+                            {t("next")}
+                        </Button>
+                    </div>
+                </form>
+            )}
+
+            {activeStep === 3 && (
+                <form className={classes.stepContent} onSubmit={submitPolicy}>
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>1</div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                {t("limitFileSize")}
+                            </Typography>
+
+                            <div className={classes.form}>
+                                <FormControl required component="fieldset">
+                                    <RadioGroup
+                                        required
+                                        value={
+                                            policy.MaxSize === "0"
+                                                ? "false"
+                                                : "true"
+                                        }
+                                        onChange={(e) => {
+                                            if (e.target.value === "true") {
+                                                setPolicy({
+                                                    ...policy,
+                                                    MaxSize: "10485760",
+                                                });
+                                            } else {
+                                                setPolicy({
+                                                    ...policy,
+                                                    MaxSize: "0",
+                                                });
+                                            }
+                                        }}
+                                        row
+                                    >
+                                        <FormControlLabel
+                                            value={"true"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("limit")}
+                                        />
+                                        <FormControlLabel
+                                            value={"false"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("notLimit")}
+                                        />
+                                    </RadioGroup>
+                                </FormControl>
+                            </div>
+                        </div>
+                    </div>
+
+                    <Collapse in={policy.MaxSize !== "0"}>
+                        <div className={classes.subStepContainer}>
+                            <div className={classes.stepNumberContainer}>
+                                <div className={classes.stepNumber}>2</div>
+                            </div>
+                            <div className={classes.subStepContent}>
+                                <Typography variant={"body2"}>
+                                    {t("enterSizeLimit")}
+                                </Typography>
+                                <div className={classes.form}>
+                                    <SizeInput
+                                        value={policy.MaxSize}
+                                        onChange={handleChange("MaxSize")}
+                                        min={0}
+                                        max={9223372036854775807}
+                                        label={t("maxSizeOfSingleFile")}
+                                    />
+                                </div>
+                            </div>
+                        </div>
+                    </Collapse>
+
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>
+                                {policy.MaxSize !== "0" ? "3" : "2"}
+                            </div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                {t("limitFileExt")}
+                            </Typography>
+
+                            <div className={classes.form}>
+                                <FormControl required component="fieldset">
+                                    <RadioGroup
+                                        required
+                                        value={
+                                            policy.OptionsSerialized
+                                                .file_type === ""
+                                                ? "false"
+                                                : "true"
+                                        }
+                                        onChange={(e) => {
+                                            if (e.target.value === "true") {
+                                                setPolicy({
+                                                    ...policy,
+                                                    OptionsSerialized: {
+                                                        ...policy.OptionsSerialized,
+                                                        file_type:
+                                                            "jpg,png,mp4,zip,rar",
+                                                    },
+                                                });
+                                            } else {
+                                                setPolicy({
+                                                    ...policy,
+                                                    OptionsSerialized: {
+                                                        ...policy.OptionsSerialized,
+                                                        file_type: "",
+                                                    },
+                                                });
+                                            }
+                                        }}
+                                        row
+                                    >
+                                        <FormControlLabel
+                                            value={"true"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("limit")}
+                                        />
+                                        <FormControlLabel
+                                            value={"false"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("notLimit")}
+                                        />
+                                    </RadioGroup>
+                                </FormControl>
+                            </div>
+                        </div>
+                    </div>
+
+                    <Collapse in={policy.OptionsSerialized.file_type !== ""}>
+                        <div className={classes.subStepContainer}>
+                            <div className={classes.stepNumberContainer}>
+                                <div className={classes.stepNumber}>
+                                    {policy.MaxSize !== "0" ? "4" : "3"}
+                                </div>
+                            </div>
+                            <div className={classes.subStepContent}>
+                                <Typography variant={"body2"}>
+                                    {t("enterFileExt")}
+                                </Typography>
+                                <div className={classes.form}>
+                                    <FormControl fullWidth>
+                                        <InputLabel htmlFor="component-helper">
+                                            {t("extList")}
+                                        </InputLabel>
+                                        <Input
+                                            value={
+                                                policy.OptionsSerialized
+                                                    .file_type
+                                            }
+                                            onChange={handleOptionChange(
+                                                "file_type"
+                                            )}
+                                        />
+                                    </FormControl>
+                                </div>
+                            </div>
+                        </div>
+                    </Collapse>
+
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>
+                                {getNumber(3, [
+                                    policy.MaxSize !== "0",
+                                    policy.OptionsSerialized.file_type !== "",
+                                ])}
+                            </div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                {t("chunkSizeLabelS3")}
+                                <br />
+                                {t("chunkSizeDes")}
+                            </Typography>
+                            <div className={classes.form}>
+                                <SizeInput
+                                    value={policy.OptionsSerialized.chunk_size}
+                                    onChange={handleOptionChange("chunk_size")}
+                                    min={5 << 20}
+                                    max={53687091200}
+                                    label={t("chunkSize")}
+                                />
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>
+                                {getNumber(4, [
+                                    policy.MaxSize !== "0",
+                                    policy.OptionsSerialized.file_type !== "",
+                                ])}
+                            </div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                {t("createPlaceholderDes")}
+                            </Typography>
+                            <div className={classes.form}>
+                                <FormControl required component="fieldset">
+                                    <RadioGroup
+                                        aria-label="gender"
+                                        name="gender1"
+                                        value={
+                                            policy.OptionsSerialized
+                                                .placeholder_with_size
+                                        }
+                                        onChange={handleOptionChange(
+                                            "placeholder_with_size"
+                                        )}
+                                        row
+                                    >
+                                        <FormControlLabel
+                                            value={"true"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("createPlaceholder")}
+                                        />
+                                        <FormControlLabel
+                                            value={"false"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("notCreatePlaceholder")}
+                                        />
+                                    </RadioGroup>
+                                </FormControl>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className={classes.stepFooter}>
+                        <Button
+                            color={"default"}
+                            className={classes.button}
+                            onClick={() => setActiveStep(2)}
+                        >
+                            {t("back")}
+                        </Button>{" "}
+                        <Button
+                            disabled={loading}
+                            type={"submit"}
+                            variant={"contained"}
+                            color={"primary"}
+                        >
+                            {t("next")}
+                        </Button>
+                    </div>
+                </form>
+            )}
+
+            {activeStep === 4 && (
+                <form className={classes.stepContent} onSubmit={submitPolicy}>
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer} />
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                {t("ossCORSDes")}
+                            </Typography>
+                            <div className={classes.form}>
+                                <Button
+                                    disabled={loading}
+                                    color={"secondary"}
+                                    variant={"contained"}
+                                    className={classes.button}
+                                    onClick={() => createCORS()}
+                                    classes={{ label: classes.viewButtonLabel }}
+                                >
+                                    {t("letCloudreveHelpMe")}
+                                </Button>
+                            </div>
+                        </div>
+                    </div>
+                    <div className={classes.stepFooter}>
+                        <Button
+                            color={"default"}
+                            className={classes.button}
+                            onClick={() => {
+                                setActiveStep(
+                                    (prevActiveStep) => prevActiveStep + 1
+                                );
+                                setSkipped((prevSkipped) => {
+                                    const newSkipped = new Set(
+                                        prevSkipped.values()
+                                    );
+                                    newSkipped.add(activeStep);
+                                    return newSkipped;
+                                });
+                            }}
+                        >
+                            {t("skip")}
+                        </Button>{" "}
+                    </div>
+                </form>
+            )}
+
+            {activeStep === 5 && (
+                <>
+                    <form className={classes.stepContent}>
+                        <Typography>
+                            {props.policy ? t("policySaved") : t("policyAdded")}
+                        </Typography>
+                        <Typography variant={"body2"} color={"textSecondary"}>
+                            {t("furtherActions")}
+                        </Typography>
+                    </form>
+                    <div className={classes.stepFooter}>
+                        <Button
+                            color={"primary"}
+                            className={classes.button}
+                            onClick={() => history.push("/admin/policy")}
+                        >
+                            {t("backToList")}
+                        </Button>
+                    </div>
+                </>
+            )}
+
+            <MagicVar
+                open={magicVar === "file"}
+                isFile
+                onClose={() => setMagicVar("")}
+            />
+            <MagicVar
+                open={magicVar === "path"}
+                onClose={() => setMagicVar("")}
+            />
+        </div>
+    );
+}
diff --git a/src/component/Admin/Policy/Guid/UpyunGuide.js b/src/component/Admin/Policy/Guid/UpyunGuide.js
new file mode 100644
index 0000000..be64d9d
--- /dev/null
+++ b/src/component/Admin/Policy/Guid/UpyunGuide.js
@@ -0,0 +1,903 @@
+import { lighten, makeStyles } from "@material-ui/core/styles";
+import React, { useCallback, useState } from "react";
+import Stepper from "@material-ui/core/Stepper";
+import StepLabel from "@material-ui/core/StepLabel";
+import Step from "@material-ui/core/Step";
+import Typography from "@material-ui/core/Typography";
+import { useDispatch } from "react-redux";
+import Link from "@material-ui/core/Link";
+import FormControl from "@material-ui/core/FormControl";
+import InputLabel from "@material-ui/core/InputLabel";
+import Input from "@material-ui/core/Input";
+import RadioGroup from "@material-ui/core/RadioGroup";
+import FormControlLabel from "@material-ui/core/FormControlLabel";
+import Radio from "@material-ui/core/Radio";
+import Collapse from "@material-ui/core/Collapse";
+import Button from "@material-ui/core/Button";
+import API from "../../../../middleware/Api";
+import MagicVar from "../../Dialogs/MagicVar";
+import DomainInput from "../../Common/DomainInput";
+import SizeInput from "../../Common/SizeInput";
+import { useHistory } from "react-router";
+import { toggleSnackbar } from "../../../../redux/explorer";
+import { Trans, useTranslation } from "react-i18next";
+import { transformPolicyRequest } from "../utils";
+
+const useStyles = makeStyles((theme) => ({
+    stepContent: {
+        padding: "16px 32px 16px 32px",
+    },
+    form: {
+        maxWidth: 400,
+        marginTop: 20,
+    },
+    formContainer: {
+        [theme.breakpoints.up("md")]: {
+            padding: "0px 24px 0 24px",
+        },
+    },
+    subStepContainer: {
+        display: "flex",
+        marginBottom: 20,
+        padding: 10,
+        transition: theme.transitions.create("background-color", {
+            easing: theme.transitions.easing.sharp,
+            duration: theme.transitions.duration.leavingScreen,
+        }),
+        "&:focus-within": {
+            backgroundColor: theme.palette.background.default,
+        },
+    },
+    stepNumber: {
+        width: 20,
+        height: 20,
+        backgroundColor: lighten(theme.palette.secondary.light, 0.2),
+        color: theme.palette.secondary.contrastText,
+        textAlign: "center",
+        borderRadius: " 50%",
+    },
+    stepNumberContainer: {
+        marginRight: 10,
+    },
+    stepFooter: {
+        marginTop: 32,
+    },
+    button: {
+        marginRight: theme.spacing(1),
+    },
+}));
+
+const steps = [
+    {
+        title: "storageBucket",
+        optional: false,
+    },
+    {
+        title: "storagePathStep",
+        optional: false,
+    },
+    {
+        title: "sourceLinkStep",
+        optional: false,
+    },
+    {
+        title: "uploadSettingStep",
+        optional: false,
+    },
+    {
+        title: "finishStep",
+        optional: false,
+    },
+];
+
+export default function UpyunGuide(props) {
+    const { t } = useTranslation("dashboard", { keyPrefix: "policy" });
+    const classes = useStyles();
+    const history = useHistory();
+
+    const [activeStep, setActiveStep] = useState(0);
+    const [loading, setLoading] = useState(false);
+    const [skipped] = React.useState(new Set());
+    const [magicVar, setMagicVar] = useState("");
+    const [policy, setPolicy] = useState(
+        props.policy
+            ? props.policy
+            : {
+                  Type: "upyun",
+                  Name: "",
+                  SecretKey: "",
+                  AccessKey: "",
+                  BaseURL: "",
+                  IsPrivate: "false",
+                  DirNameRule: "uploads/{year}/{month}/{day}",
+                  AutoRename: "true",
+                  FileNameRule: "{randomkey8}_{originname}",
+                  IsOriginLinkEnable: "false",
+                  MaxSize: "0",
+                  OptionsSerialized: {
+                      file_type: "",
+                      token: "",
+                  },
+              }
+    );
+
+    const handleChange = (name) => (event) => {
+        setPolicy({
+            ...policy,
+            [name]: event.target.value,
+        });
+    };
+
+    const handleOptionChange = (name) => (event) => {
+        setPolicy({
+            ...policy,
+            OptionsSerialized: {
+                ...policy.OptionsSerialized,
+                [name]: event.target.value,
+            },
+        });
+    };
+
+    const isStepSkipped = (step) => {
+        return skipped.has(step);
+    };
+
+    const dispatch = useDispatch();
+    const ToggleSnackbar = useCallback(
+        (vertical, horizontal, msg, color) =>
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color)),
+        [dispatch]
+    );
+
+    const submitPolicy = (e) => {
+        e.preventDefault();
+        setLoading(true);
+
+        let policyCopy = { ...policy };
+        policyCopy.OptionsSerialized = { ...policyCopy.OptionsSerialized };
+
+        // 类型转换
+        policyCopy = transformPolicyRequest(policyCopy);
+
+        API.post("/admin/policy", {
+            policy: policyCopy,
+        })
+            .then(() => {
+                ToggleSnackbar(
+                    "top",
+                    "right",
+                    props.policy ? t("policySaved") : t("policyAdded"),
+                    "success"
+                );
+                setActiveStep(5);
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            })
+            .then(() => {
+                setLoading(false);
+            });
+
+        setLoading(false);
+    };
+
+    return (
+        <div>
+            <Typography variant={"h6"}>
+                {props.policy
+                    ? t("editUpyunStoragePolicy")
+                    : t("addUpyunStoragePolicy")}
+            </Typography>
+            <Stepper activeStep={activeStep}>
+                {steps.map((label, index) => {
+                    const stepProps = {};
+                    const labelProps = {};
+                    if (label.optional) {
+                        labelProps.optional = (
+                            <Typography variant="caption">可选</Typography>
+                        );
+                    }
+                    if (isStepSkipped(index)) {
+                        stepProps.completed = false;
+                    }
+                    return (
+                        <Step key={label.title} {...stepProps}>
+                            <StepLabel {...labelProps}>
+                                {t(label.title)}
+                            </StepLabel>
+                        </Step>
+                    );
+                })}
+            </Stepper>
+
+            {activeStep === 0 && (
+                <form
+                    className={classes.stepContent}
+                    onSubmit={(e) => {
+                        e.preventDefault();
+                        setActiveStep(1);
+                    }}
+                >
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>0</div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                <Trans
+                                    ns={"dashboard"}
+                                    i18nKey={"policy.wanSiteURLDes"}
+                                    components={[<strong key={0} />]}
+                                />
+                            </Typography>
+                        </div>
+                    </div>
+
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>1</div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                <Trans
+                                    ns={"dashboard"}
+                                    i18nKey={"policy.createUpyunBucketDes"}
+                                    components={[
+                                        <Link
+                                            key={0}
+                                            href={
+                                                "https://console.upyun.com/services/create/file/"
+                                            }
+                                            target={"_blank"}
+                                        />,
+                                    ]}
+                                />
+                            </Typography>
+                        </div>
+                    </div>
+
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>2</div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                {t("storageServiceNameDes")}
+                            </Typography>
+                            <div className={classes.form}>
+                                <FormControl fullWidth>
+                                    <InputLabel htmlFor="component-helper">
+                                        {t("storageServiceName")}
+                                    </InputLabel>
+                                    <Input
+                                        required
+                                        value={policy.BucketName}
+                                        onChange={handleChange("BucketName")}
+                                    />
+                                </FormControl>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>3</div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                {t("operatorNameDes")}
+                            </Typography>
+                            <div className={classes.form}>
+                                <FormControl fullWidth>
+                                    <InputLabel htmlFor="component-helper">
+                                        {t("operatorName")}
+                                    </InputLabel>
+                                    <Input
+                                        required
+                                        value={policy.AccessKey}
+                                        onChange={handleChange("AccessKey")}
+                                    />
+                                </FormControl>
+                            </div>
+                            <div className={classes.form}>
+                                <FormControl fullWidth>
+                                    <InputLabel htmlFor="component-helper">
+                                        {t("operatorPassword")}
+                                    </InputLabel>
+                                    <Input
+                                        required
+                                        value={policy.SecretKey}
+                                        onChange={handleChange("SecretKey")}
+                                    />
+                                </FormControl>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>4</div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                {t("upyunCDNDes")}
+                            </Typography>
+                            <div className={classes.form}>
+                                <DomainInput
+                                    value={policy.BaseURL}
+                                    onChange={handleChange("BaseURL")}
+                                    required
+                                    label={t("bucketCDNDomain")}
+                                />
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>5</div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                {t("upyunOptionalDes")}
+                                <br />
+                                {t("upyunTokenDes")}
+                            </Typography>
+                            <div className={classes.form}>
+                                <FormControl required component="fieldset">
+                                    <RadioGroup
+                                        required
+                                        value={policy.IsPrivate}
+                                        onChange={handleChange("IsPrivate")}
+                                        row
+                                    >
+                                        <FormControlLabel
+                                            value={"true"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("tokenEnabled")}
+                                        />
+                                        <FormControlLabel
+                                            value={"false"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("tokenDisabled")}
+                                        />
+                                    </RadioGroup>
+                                </FormControl>
+                            </div>
+                        </div>
+                    </div>
+
+                    <Collapse in={policy.IsPrivate === "true"}>
+                        <div className={classes.subStepContainer}>
+                            <div className={classes.stepNumberContainer}>
+                                <div className={classes.stepNumber}>6</div>
+                            </div>
+                            <div className={classes.subStepContent}>
+                                <Typography variant={"body2"}>
+                                    {t("upyunTokenSecretDes")}
+                                </Typography>
+                                <div className={classes.form}>
+                                    <FormControl fullWidth>
+                                        <InputLabel htmlFor="component-helper">
+                                            {t("upyunTokenSecret")}
+                                        </InputLabel>
+                                        <Input
+                                            value={
+                                                policy.OptionsSerialized.token
+                                            }
+                                            onChange={handleOptionChange(
+                                                "token"
+                                            )}
+                                            required={
+                                                policy.IsPrivate === "true"
+                                            }
+                                        />
+                                    </FormControl>
+                                </div>
+                            </div>
+                        </div>
+                    </Collapse>
+
+                    <div className={classes.stepFooter}>
+                        <Button
+                            disabled={loading}
+                            type={"submit"}
+                            variant={"contained"}
+                            color={"primary"}
+                        >
+                            {t("next")}
+                        </Button>
+                    </div>
+                </form>
+            )}
+
+            {activeStep === 1 && (
+                <form
+                    className={classes.stepContent}
+                    onSubmit={(e) => {
+                        e.preventDefault();
+                        setActiveStep(2);
+                    }}
+                >
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>1</div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                <Trans
+                                    ns={"dashboard"}
+                                    i18nKey={"policy.pathMagicVarDes"}
+                                    components={[
+                                        <Link
+                                            key={0}
+                                            color={"secondary"}
+                                            href={"javascript:void()"}
+                                            onClick={() => setMagicVar("path")}
+                                        />,
+                                    ]}
+                                />
+                            </Typography>
+                            <div className={classes.form}>
+                                <FormControl fullWidth>
+                                    <InputLabel htmlFor="component-helper">
+                                        {t("pathOfFolderToStoreFiles")}
+                                    </InputLabel>
+                                    <Input
+                                        required
+                                        value={policy.DirNameRule}
+                                        onChange={handleChange("DirNameRule")}
+                                    />
+                                </FormControl>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>2</div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                <Trans
+                                    ns={"dashboard"}
+                                    i18nKey={"policy.filePathMagicVarDes"}
+                                    components={[
+                                        <Link
+                                            key={0}
+                                            color={"secondary"}
+                                            href={"javascript:void()"}
+                                            onClick={() => setMagicVar("file")}
+                                        />,
+                                    ]}
+                                />
+                            </Typography>
+                            <div className={classes.form}>
+                                <FormControl required component="fieldset">
+                                    <RadioGroup
+                                        aria-label="gender"
+                                        name="gender1"
+                                        value={policy.AutoRename}
+                                        onChange={handleChange("AutoRename")}
+                                        row
+                                    >
+                                        <FormControlLabel
+                                            value={"true"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("autoRenameStoredFile")}
+                                        />
+                                        <FormControlLabel
+                                            value={"false"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("keepOriginalFileName")}
+                                        />
+                                    </RadioGroup>
+                                </FormControl>
+                            </div>
+
+                            <Collapse in={policy.AutoRename === "true"}>
+                                <div className={classes.form}>
+                                    <FormControl fullWidth>
+                                        <InputLabel htmlFor="component-helper">
+                                            {t("renameRule")}
+                                        </InputLabel>
+                                        <Input
+                                            required={
+                                                policy.AutoRename === "true"
+                                            }
+                                            value={policy.FileNameRule}
+                                            onChange={handleChange(
+                                                "FileNameRule"
+                                            )}
+                                        />
+                                    </FormControl>
+                                </div>
+                            </Collapse>
+                        </div>
+                    </div>
+
+                    <div className={classes.stepFooter}>
+                        <Button
+                            color={"default"}
+                            className={classes.button}
+                            onClick={() => setActiveStep(0)}
+                        >
+                            {t("back")}
+                        </Button>
+                        <Button
+                            disabled={loading}
+                            type={"submit"}
+                            variant={"contained"}
+                            color={"primary"}
+                        >
+                            {t("next")}
+                        </Button>
+                    </div>
+                </form>
+            )}
+
+            {activeStep === 2 && (
+                <form
+                    className={classes.stepContent}
+                    onSubmit={(e) => {
+                        e.preventDefault();
+                        setActiveStep(3);
+                    }}
+                >
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>1</div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                {t("enableGettingPermanentSourceLink")}
+                                <br />
+                                {t("enableGettingPermanentSourceLinkDes")}
+                            </Typography>
+
+                            <div className={classes.form}>
+                                <FormControl required component="fieldset">
+                                    <RadioGroup
+                                        required
+                                        value={policy.IsOriginLinkEnable}
+                                        onChange={(e) => {
+                                            if (
+                                                policy.IsPrivate === "true" &&
+                                                e.target.value === "true"
+                                            ) {
+                                                ToggleSnackbar(
+                                                    "top",
+                                                    "right",
+                                                    t(
+                                                        "cannotEnableForTokenProtectedBucket"
+                                                    ),
+                                                    "warning"
+                                                );
+                                            }
+                                            handleChange("IsOriginLinkEnable")(
+                                                e
+                                            );
+                                        }}
+                                        row
+                                    >
+                                        <FormControlLabel
+                                            value={"true"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("allowed")}
+                                        />
+                                        <FormControlLabel
+                                            value={"false"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("forbidden")}
+                                        />
+                                    </RadioGroup>
+                                </FormControl>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className={classes.stepFooter}>
+                        <Button
+                            color={"default"}
+                            className={classes.button}
+                            onClick={() => setActiveStep(1)}
+                        >
+                            {t("back")}
+                        </Button>{" "}
+                        <Button
+                            disabled={loading}
+                            type={"submit"}
+                            variant={"contained"}
+                            color={"primary"}
+                        >
+                            {t("next")}
+                        </Button>
+                    </div>
+                </form>
+            )}
+
+            {activeStep === 3 && (
+                <form
+                    className={classes.stepContent}
+                    onSubmit={(e) => {
+                        e.preventDefault();
+                        setActiveStep(4);
+                    }}
+                >
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>1</div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                {t("limitFileSize")}
+                            </Typography>
+
+                            <div className={classes.form}>
+                                <FormControl required component="fieldset">
+                                    <RadioGroup
+                                        required
+                                        value={
+                                            policy.MaxSize === "0"
+                                                ? "false"
+                                                : "true"
+                                        }
+                                        onChange={(e) => {
+                                            if (e.target.value === "true") {
+                                                setPolicy({
+                                                    ...policy,
+                                                    MaxSize: "10485760",
+                                                });
+                                            } else {
+                                                setPolicy({
+                                                    ...policy,
+                                                    MaxSize: "0",
+                                                });
+                                            }
+                                        }}
+                                        row
+                                    >
+                                        <FormControlLabel
+                                            value={"true"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("limit")}
+                                        />
+                                        <FormControlLabel
+                                            value={"false"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("notLimit")}
+                                        />
+                                    </RadioGroup>
+                                </FormControl>
+                            </div>
+                        </div>
+                    </div>
+
+                    <Collapse in={policy.MaxSize !== "0"}>
+                        <div className={classes.subStepContainer}>
+                            <div className={classes.stepNumberContainer}>
+                                <div className={classes.stepNumber}>2</div>
+                            </div>
+                            <div className={classes.subStepContent}>
+                                <Typography variant={"body2"}>
+                                    {t("enterSizeLimit")}
+                                </Typography>
+                                <div className={classes.form}>
+                                    <SizeInput
+                                        value={policy.MaxSize}
+                                        onChange={handleChange("MaxSize")}
+                                        min={0}
+                                        max={9223372036854775807}
+                                        label={t("maxSizeOfSingleFile")}
+                                    />
+                                </div>
+                            </div>
+                        </div>
+                    </Collapse>
+
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}>
+                            <div className={classes.stepNumber}>
+                                {policy.MaxSize !== "0" ? "3" : "2"}
+                            </div>
+                        </div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                {t("limitFileExt")}
+                            </Typography>
+
+                            <div className={classes.form}>
+                                <FormControl required component="fieldset">
+                                    <RadioGroup
+                                        required
+                                        value={
+                                            policy.OptionsSerialized
+                                                .file_type === ""
+                                                ? "false"
+                                                : "true"
+                                        }
+                                        onChange={(e) => {
+                                            if (e.target.value === "true") {
+                                                setPolicy({
+                                                    ...policy,
+                                                    OptionsSerialized: {
+                                                        ...policy.OptionsSerialized,
+                                                        file_type:
+                                                            "jpg,png,mp4,zip,rar",
+                                                    },
+                                                });
+                                            } else {
+                                                setPolicy({
+                                                    ...policy,
+                                                    OptionsSerialized: {
+                                                        ...policy.OptionsSerialized,
+                                                        file_type: "",
+                                                    },
+                                                });
+                                            }
+                                        }}
+                                        row
+                                    >
+                                        <FormControlLabel
+                                            value={"true"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("limit")}
+                                        />
+                                        <FormControlLabel
+                                            value={"false"}
+                                            control={
+                                                <Radio color={"primary"} />
+                                            }
+                                            label={t("notLimit")}
+                                        />
+                                    </RadioGroup>
+                                </FormControl>
+                            </div>
+                        </div>
+                    </div>
+
+                    <Collapse in={policy.OptionsSerialized.file_type !== ""}>
+                        <div className={classes.subStepContainer}>
+                            <div className={classes.stepNumberContainer}>
+                                <div className={classes.stepNumber}>
+                                    {policy.MaxSize !== "0" ? "4" : "3"}
+                                </div>
+                            </div>
+                            <div className={classes.subStepContent}>
+                                <Typography variant={"body2"}>
+                                    {t("enterFileExt")}
+                                </Typography>
+                                <div className={classes.form}>
+                                    <FormControl fullWidth>
+                                        <InputLabel htmlFor="component-helper">
+                                            {t("extList")}
+                                        </InputLabel>
+                                        <Input
+                                            value={
+                                                policy.OptionsSerialized
+                                                    .file_type
+                                            }
+                                            onChange={handleOptionChange(
+                                                "file_type"
+                                            )}
+                                        />
+                                    </FormControl>
+                                </div>
+                            </div>
+                        </div>
+                    </Collapse>
+
+                    <div className={classes.stepFooter}>
+                        <Button
+                            color={"default"}
+                            className={classes.button}
+                            onClick={() => setActiveStep(2)}
+                        >
+                            {t("back")}
+                        </Button>{" "}
+                        <Button
+                            disabled={loading}
+                            type={"submit"}
+                            variant={"contained"}
+                            color={"primary"}
+                        >
+                            {t("next")}
+                        </Button>
+                    </div>
+                </form>
+            )}
+
+            {activeStep === 4 && (
+                <form className={classes.stepContent} onSubmit={submitPolicy}>
+                    <div className={classes.subStepContainer}>
+                        <div className={classes.stepNumberContainer}></div>
+                        <div className={classes.subStepContent}>
+                            <Typography variant={"body2"}>
+                                {t("nameThePolicy")}
+                            </Typography>
+                            <div className={classes.form}>
+                                <FormControl fullWidth>
+                                    <InputLabel htmlFor="component-helper">
+                                        {t("policyName")}
+                                    </InputLabel>
+                                    <Input
+                                        required
+                                        value={policy.Name}
+                                        onChange={handleChange("Name")}
+                                    />
+                                </FormControl>
+                            </div>
+                        </div>
+                    </div>
+                    <div className={classes.stepFooter}>
+                        <Button
+                            color={"default"}
+                            className={classes.button}
+                            onClick={() => setActiveStep(3)}
+                        >
+                            {t("back")}
+                        </Button>{" "}
+                        <Button
+                            disabled={loading}
+                            type={"submit"}
+                            variant={"contained"}
+                            color={"primary"}
+                        >
+                            {t("finish")}
+                        </Button>
+                    </div>
+                </form>
+            )}
+
+            {activeStep === 5 && (
+                <>
+                    <form className={classes.stepContent}>
+                        <Typography>
+                            {props.policy ? t("policySaved") : t("policyAdded")}
+                        </Typography>
+                        <Typography variant={"body2"} color={"textSecondary"}>
+                            {t("furtherActions")}
+                        </Typography>
+                    </form>
+                    <div className={classes.stepFooter}>
+                        <Button
+                            color={"primary"}
+                            className={classes.button}
+                            onClick={() => history.push("/admin/policy")}
+                        >
+                            {t("backToList")}
+                        </Button>
+                    </div>
+                </>
+            )}
+
+            <MagicVar
+                open={magicVar === "file"}
+                isFile
+                onClose={() => setMagicVar("")}
+            />
+            <MagicVar
+                open={magicVar === "path"}
+                onClose={() => setMagicVar("")}
+            />
+        </div>
+    );
+}
diff --git a/src/component/Admin/Policy/Policy.js b/src/component/Admin/Policy/Policy.js
new file mode 100644
index 0000000..a5ae4b6
--- /dev/null
+++ b/src/component/Admin/Policy/Policy.js
@@ -0,0 +1,297 @@
+import React, { useCallback, useEffect, useState } from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import API from "../../../middleware/Api";
+import { useDispatch } from "react-redux";
+import Paper from "@material-ui/core/Paper";
+import Button from "@material-ui/core/Button";
+import TableContainer from "@material-ui/core/TableContainer";
+import Table from "@material-ui/core/Table";
+import TableHead from "@material-ui/core/TableHead";
+import TableRow from "@material-ui/core/TableRow";
+import TableCell from "@material-ui/core/TableCell";
+import { sizeToString } from "../../../utils";
+import TableBody from "@material-ui/core/TableBody";
+import TablePagination from "@material-ui/core/TablePagination";
+import AddPolicy from "../Dialogs/AddPolicy";
+import Select from "@material-ui/core/Select";
+import MenuItem from "@material-ui/core/MenuItem";
+import { useHistory, useLocation } from "react-router";
+import IconButton from "@material-ui/core/IconButton";
+import { Delete, Edit } from "@material-ui/icons";
+import Tooltip from "@material-ui/core/Tooltip";
+import Menu from "@material-ui/core/Menu";
+import { toggleSnackbar } from "../../../redux/explorer";
+import { useTranslation } from "react-i18next";
+
+const useStyles = makeStyles((theme) => ({
+    root: {
+        [theme.breakpoints.up("md")]: {
+            marginLeft: 100,
+        },
+        marginBottom: 40,
+    },
+    content: {
+        padding: theme.spacing(2),
+    },
+    container: {
+        overflowX: "auto",
+    },
+    tableContainer: {
+        marginTop: 16,
+    },
+    header: {
+        display: "flex",
+        justifyContent: "space-between",
+    },
+    headerRight: {},
+}));
+
+const columns = [
+    { id: "#", label: "sharp", minWidth: 50 },
+    { id: "name", label: "name", minWidth: 170 },
+    { id: "type", label: "type", minWidth: 170 },
+    {
+        id: "count",
+        label: "childFiles",
+        minWidth: 50,
+        align: "right",
+    },
+    {
+        id: "size",
+        label: "totalSize",
+        minWidth: 100,
+        align: "right",
+    },
+    {
+        id: "action",
+        label: "actions",
+        minWidth: 170,
+        align: "right",
+    },
+];
+
+function useQuery() {
+    return new URLSearchParams(useLocation().search);
+}
+
+export default function Policy() {
+    const { t } = useTranslation("dashboard", { keyPrefix: "policy" });
+    const classes = useStyles();
+    const [policies, setPolicies] = useState([]);
+    const [statics, setStatics] = useState([]);
+    const [page, setPage] = useState(1);
+    const [pageSize, setPageSize] = useState(10);
+    const [total, setTotal] = useState(0);
+    const [addDialog, setAddDialog] = useState(false);
+    const [filter, setFilter] = useState("all");
+    const [anchorEl, setAnchorEl] = React.useState(null);
+    const [editID, setEditID] = React.useState(0);
+
+    const location = useLocation();
+    const history = useHistory();
+    const query = useQuery();
+
+    const handleClick = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+
+    const dispatch = useDispatch();
+    const ToggleSnackbar = useCallback(
+        (vertical, horizontal, msg, color) =>
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color)),
+        [dispatch]
+    );
+
+    useEffect(() => {
+        if (query.get("code") === "0") {
+            ToggleSnackbar("top", "right", t("authSuccess"), "success");
+        } else if (query.get("msg") && query.get("msg") !== "") {
+            ToggleSnackbar(
+                "top",
+                "right",
+                query.get("msg") + ", " + query.get("err"),
+                "warning"
+            );
+        }
+    }, [location]);
+
+    const loadList = () => {
+        API.post("/admin/policy/list", {
+            page: page,
+            page_size: pageSize,
+            order_by: "id desc",
+            conditions: filter === "all" ? {} : { type: filter },
+        })
+            .then((response) => {
+                setPolicies(response.data.items);
+                setStatics(response.data.statics);
+                setTotal(response.data.total);
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            });
+    };
+
+    useEffect(() => {
+        loadList();
+    }, [page, pageSize, filter]);
+
+    const deletePolicy = (id) => {
+        API.delete("/admin/policy/" + id)
+            .then(() => {
+                loadList();
+                ToggleSnackbar("top", "right", t("policyDeleted"), "success");
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            });
+    };
+
+    const open = Boolean(anchorEl);
+
+    return (
+        <div>
+            <AddPolicy open={addDialog} onClose={() => setAddDialog(false)} />
+            <div className={classes.header}>
+                <Button
+                    color={"primary"}
+                    onClick={() => setAddDialog(true)}
+                    variant={"contained"}
+                >
+                    {t("newStoragePolicy")}
+                </Button>
+                <div className={classes.headerRight}>
+                    <Select
+                        style={{
+                            marginRight: 8,
+                        }}
+                        value={filter}
+                        onChange={(e) => setFilter(e.target.value)}
+                    >
+                        {[
+                            "all",
+                            "local",
+                            "remote",
+                            "qiniu",
+                            "upyun",
+                            "oss",
+                            "cos",
+                            "onedrive",
+                            "s3",
+                        ].map((v) => (
+                            <MenuItem key={v} value={v}>
+                                {t(v)}
+                            </MenuItem>
+                        ))}
+                    </Select>
+                    <Button
+                        color={"primary"}
+                        onClick={() => loadList()}
+                        variant={"outlined"}
+                    >
+                        {t("refresh")}
+                    </Button>
+                </div>
+            </div>
+
+            <Paper square className={classes.tableContainer}>
+                <TableContainer className={classes.container}>
+                    <Table aria-label="sticky table" size={"small"}>
+                        <TableHead>
+                            <TableRow style={{ height: 52 }}>
+                                {columns.map((column) => (
+                                    <TableCell
+                                        key={column.id}
+                                        align={column.align}
+                                        style={{ minWidth: column.minWidth }}
+                                    >
+                                        {t(column.label)}
+                                    </TableCell>
+                                ))}
+                            </TableRow>
+                        </TableHead>
+                        <TableBody>
+                            {policies.map((row) => (
+                                <TableRow hover key={row.ID}>
+                                    <TableCell>{row.ID}</TableCell>
+                                    <TableCell>{row.Name}</TableCell>
+                                    <TableCell>{t(row.Type)}</TableCell>
+                                    <TableCell align={"right"}>
+                                        {statics[row.ID] !== undefined &&
+                                            statics[row.ID][0].toLocaleString()}
+                                    </TableCell>
+                                    <TableCell align={"right"}>
+                                        {statics[row.ID] !== undefined &&
+                                            sizeToString(statics[row.ID][1])}
+                                    </TableCell>
+                                    <TableCell align={"right"}>
+                                        <Tooltip title={t("delete")}>
+                                            <IconButton
+                                                onClick={() =>
+                                                    deletePolicy(row.ID)
+                                                }
+                                                size={"small"}
+                                            >
+                                                <Delete />
+                                            </IconButton>
+                                        </Tooltip>
+                                        <Tooltip title={t("edit")}>
+                                            <IconButton
+                                                onClick={(e) => {
+                                                    setEditID(row.ID);
+                                                    handleClick(e);
+                                                }}
+                                                size={"small"}
+                                            >
+                                                <Edit />
+                                            </IconButton>
+                                        </Tooltip>
+                                    </TableCell>
+                                </TableRow>
+                            ))}
+                        </TableBody>
+                    </Table>
+                </TableContainer>
+                <TablePagination
+                    rowsPerPageOptions={[10, 25, 100]}
+                    component="div"
+                    count={total}
+                    rowsPerPage={pageSize}
+                    page={page - 1}
+                    onChangePage={(e, p) => setPage(p + 1)}
+                    onChangeRowsPerPage={(e) => {
+                        setPageSize(e.target.value);
+                        setPage(1);
+                    }}
+                />
+            </Paper>
+            <Menu
+                open={open}
+                anchorEl={anchorEl}
+                onClose={handleClose}
+                keepMounted
+            >
+                <MenuItem
+                    onClick={(e) => {
+                        handleClose(e);
+                        history.push("/admin/policy/edit/pro/" + editID);
+                    }}
+                >
+                    {t("editInProMode")}
+                </MenuItem>
+                <MenuItem
+                    onClick={(e) => {
+                        handleClose(e);
+                        history.push("/admin/policy/edit/guide/" + editID);
+                    }}
+                >
+                    {t("editInWizardMode")}
+                </MenuItem>
+            </Menu>
+        </div>
+    );
+}
diff --git a/src/component/Admin/Policy/utils.js b/src/component/Admin/Policy/utils.js
new file mode 100644
index 0000000..23934a6
--- /dev/null
+++ b/src/component/Admin/Policy/utils.js
@@ -0,0 +1,76 @@
+const boolFields = ["IsOriginLinkEnable", "AutoRename", "IsPrivate"];
+
+const numberFields = ["MaxSize"];
+
+const boolFieldsInOptions = ["placeholder_with_size", "s3_path_style"];
+
+const numberFieldsInOptions = ["chunk_size", "tps_limit", "tps_limit_burst"];
+const listJsonFieldsInOptions = ["file_type", "thumb_exts"];
+
+export const transformResponse = (response) => {
+    boolFields.forEach(
+        (field) =>
+            (response.data[field] = response.data[field] ? "true" : "false")
+    );
+    numberFields.forEach(
+        (field) => (response.data[field] = response.data[field].toString())
+    );
+    boolFieldsInOptions.forEach(
+        (field) =>
+        (response.data.OptionsSerialized[field] = response.data
+            .OptionsSerialized[field]
+            ? "true"
+            : "false")
+    );
+    numberFieldsInOptions.forEach(
+        (field) =>
+        (response.data.OptionsSerialized[field] = response.data
+            .OptionsSerialized[field]
+            ? response.data.OptionsSerialized[field].toString()
+            : 0)
+    );
+
+    listJsonFieldsInOptions.forEach((field) => {
+        response.data.OptionsSerialized[field] = response.data
+            .OptionsSerialized[field]
+            ? response.data.OptionsSerialized[field].join(",")
+            : "";
+    });
+    return response;
+};
+
+export const transformPolicyRequest = (policyCopy) => {
+    boolFields.forEach(
+        (field) => (policyCopy[field] = policyCopy[field] === "true")
+    );
+    numberFields.forEach(
+        (field) => (policyCopy[field] = parseInt(policyCopy[field]))
+    );
+    boolFieldsInOptions.forEach(
+        (field) =>
+        (policyCopy.OptionsSerialized[field] =
+            policyCopy.OptionsSerialized[field] === "true")
+    );
+    numberFieldsInOptions.forEach(
+        (field) =>
+        (policyCopy.OptionsSerialized[field] = parseInt(
+            policyCopy.OptionsSerialized[field]
+        ))
+    );
+
+    listJsonFieldsInOptions.forEach((field) => {
+        policyCopy.OptionsSerialized[field] = policyCopy.OptionsSerialized[
+            field
+        ]
+            ? policyCopy.OptionsSerialized[field].split(",")
+            : [];
+        if (
+            policyCopy.OptionsSerialized[field].length === 1 &&
+            policyCopy.OptionsSerialized[field][0] === ""
+        ) {
+            policyCopy.OptionsSerialized[field] = [];
+        }
+    });
+
+    return policyCopy;
+};
diff --git a/src/component/Admin/Report/ReportList.js b/src/component/Admin/Report/ReportList.js
new file mode 100644
index 0000000..e125102
--- /dev/null
+++ b/src/component/Admin/Report/ReportList.js
@@ -0,0 +1,422 @@
+import React, { useCallback, useEffect, useState } from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import API from "../../../middleware/Api";
+import { useDispatch } from "react-redux";
+import Paper from "@material-ui/core/Paper";
+import Button from "@material-ui/core/Button";
+import TableContainer from "@material-ui/core/TableContainer";
+import Table from "@material-ui/core/Table";
+import TableHead from "@material-ui/core/TableHead";
+import TableRow from "@material-ui/core/TableRow";
+import TableCell from "@material-ui/core/TableCell";
+import TableBody from "@material-ui/core/TableBody";
+import TablePagination from "@material-ui/core/TablePagination";
+import IconButton from "@material-ui/core/IconButton";
+import Tooltip from "@material-ui/core/Tooltip";
+import Checkbox from "@material-ui/core/Checkbox";
+import Toolbar from "@material-ui/core/Toolbar";
+import Typography from "@material-ui/core/Typography";
+import { lighten } from "@material-ui/core";
+import Link from "@material-ui/core/Link";
+import TableSortLabel from "@material-ui/core/TableSortLabel";
+import { reportReasons } from "../../../config";
+import CheckCircleOutlineIcon from "@material-ui/icons/CheckCircleOutline";
+import { Delete } from "@material-ui/icons";
+import { formatLocalTime } from "../../../utils/datetime";
+import { toggleSnackbar } from "../../../redux/explorer";
+import { useTranslation } from "react-i18next";
+
+const useStyles = makeStyles((theme) => ({
+    root: {
+        [theme.breakpoints.up("md")]: {
+            marginLeft: 100,
+        },
+        marginBottom: 40,
+    },
+    content: {
+        padding: theme.spacing(2),
+    },
+    container: {
+        overflowX: "auto",
+    },
+    tableContainer: {
+        marginTop: 16,
+    },
+    header: {
+        display: "flex",
+        justifyContent: "space-between",
+    },
+    headerRight: {},
+    highlight:
+        theme.palette.type === "light"
+            ? {
+                  color: theme.palette.secondary.main,
+                  backgroundColor: lighten(theme.palette.secondary.light, 0.85),
+              }
+            : {
+                  color: theme.palette.text.primary,
+                  backgroundColor: theme.palette.secondary.dark,
+              },
+    visuallyHidden: {
+        border: 0,
+        clip: "rect(0 0 0 0)",
+        height: 1,
+        margin: -1,
+        overflow: "hidden",
+        padding: 0,
+        position: "absolute",
+        top: 20,
+        width: 1,
+    },
+}));
+
+export default function ReportList() {
+    const { t } = useTranslation("dashboard", { keyPrefix: "vas" });
+    const { t: tApp } = useTranslation("application");
+    const { t: tDashboard } = useTranslation("dashboard");
+    const classes = useStyles();
+    const [reports, setReports] = useState([]);
+    const [page, setPage] = useState(1);
+    const [pageSize, setPageSize] = useState(10);
+    const [total, setTotal] = useState(0);
+    const [users, setUsers] = useState({});
+    const [orderBy, setOrderBy] = useState(["id", "desc"]);
+    const [selected, setSelected] = useState([]);
+    const [loading, setLoading] = useState(false);
+    const [ids, setIds] = useState({});
+
+    const dispatch = useDispatch();
+    const ToggleSnackbar = useCallback(
+        (vertical, horizontal, msg, color) =>
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color)),
+        [dispatch]
+    );
+
+    const loadList = () => {
+        API.post("/admin/report/list", {
+            page: page,
+            page_size: pageSize,
+            order_by: orderBy.join(" "),
+        })
+            .then((response) => {
+                setUsers(response.data.users);
+                setReports(response.data.items);
+                setTotal(response.data.total);
+                setIds(response.data.ids);
+                setSelected([]);
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            });
+    };
+
+    useEffect(() => {
+        loadList();
+    }, [page, pageSize, orderBy]);
+
+    const deleteReport = (id) => {
+        setLoading(true);
+        API.post("/admin/report/delete", { id: [id] })
+            .then(() => {
+                loadList();
+                ToggleSnackbar("top", "right", t("markSuccessful"), "success");
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            })
+            .then(() => {
+                setLoading(false);
+            });
+    };
+
+    const deleteShare = (id) => {
+        setLoading(true);
+        API.post("/admin/share/delete", { id: [id] })
+            .then(() => {
+                loadList();
+                ToggleSnackbar(
+                    "top",
+                    "right",
+                    tDashboard("share.deleted"),
+                    "success"
+                );
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            })
+            .then(() => {
+                setLoading(false);
+            });
+    };
+
+    const deleteBatch = () => {
+        setLoading(true);
+        API.post("/admin/report/delete", { id: selected })
+            .then(() => {
+                loadList();
+                ToggleSnackbar("top", "right", t("markSuccessful"), "success");
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            })
+            .then(() => {
+                setLoading(false);
+            });
+    };
+
+    const handleSelectAllClick = (event) => {
+        if (event.target.checked) {
+            const newSelecteds = reports.map((n) => n.ID);
+            setSelected(newSelecteds);
+            return;
+        }
+        setSelected([]);
+    };
+
+    const handleClick = (event, name) => {
+        const selectedIndex = selected.indexOf(name);
+        let newSelected = [];
+
+        if (selectedIndex === -1) {
+            newSelected = newSelected.concat(selected, name);
+        } else if (selectedIndex === 0) {
+            newSelected = newSelected.concat(selected.slice(1));
+        } else if (selectedIndex === selected.length - 1) {
+            newSelected = newSelected.concat(selected.slice(0, -1));
+        } else if (selectedIndex > 0) {
+            newSelected = newSelected.concat(
+                selected.slice(0, selectedIndex),
+                selected.slice(selectedIndex + 1)
+            );
+        }
+
+        setSelected(newSelected);
+    };
+
+    const isSelected = (id) => selected.indexOf(id) !== -1;
+
+    return (
+        <div>
+            <div className={classes.header}>
+                <div className={classes.headerRight}>
+                    <Button
+                        color={"primary"}
+                        onClick={() => loadList()}
+                        variant={"outlined"}
+                    >
+                        {tDashboard("policy.refresh")}
+                    </Button>
+                </div>
+            </div>
+
+            <Paper square className={classes.tableContainer}>
+                {selected.length > 0 && (
+                    <Toolbar className={classes.highlight}>
+                        <Typography
+                            style={{ flex: "1 1 100%" }}
+                            color="inherit"
+                            variant="subtitle1"
+                        >
+                            {tDashboard("user.selectedObjects", {
+                                num: selected.length,
+                            })}
+                        </Typography>
+                        <Tooltip title={t("markAsResolved")}>
+                            <IconButton
+                                onClick={deleteBatch}
+                                disabled={loading}
+                                aria-label="delete"
+                            >
+                                <CheckCircleOutlineIcon />
+                            </IconButton>
+                        </Tooltip>
+                    </Toolbar>
+                )}
+                <TableContainer className={classes.container}>
+                    <Table aria-label="sticky table" size={"small"}>
+                        <TableHead>
+                            <TableRow style={{ height: 52 }}>
+                                <TableCell padding="checkbox">
+                                    <Checkbox
+                                        indeterminate={
+                                            selected.length > 0 &&
+                                            selected.length < reports.length
+                                        }
+                                        checked={
+                                            reports.length > 0 &&
+                                            selected.length === reports.length
+                                        }
+                                        onChange={handleSelectAllClick}
+                                        inputProps={{
+                                            "aria-label": "select all desserts",
+                                        }}
+                                    />
+                                </TableCell>
+                                <TableCell style={{ minWidth: 10 }}>
+                                    <TableSortLabel
+                                        active={orderBy[0] === "id"}
+                                        direction={orderBy[1]}
+                                        onClick={() =>
+                                            setOrderBy([
+                                                "id",
+                                                orderBy[1] === "asc"
+                                                    ? "desc"
+                                                    : "asc",
+                                            ])
+                                        }
+                                    >
+                                        #
+                                        {orderBy[0] === "id" ? (
+                                            <span
+                                                className={
+                                                    classes.visuallyHidden
+                                                }
+                                            >
+                                                {orderBy[1] === "desc"
+                                                    ? "sorted descending"
+                                                    : "sorted ascending"}
+                                            </span>
+                                        ) : null}
+                                    </TableSortLabel>
+                                </TableCell>
+                                <TableCell style={{ minWidth: 130 }}>
+                                    {t("reportedContent")}
+                                </TableCell>
+                                <TableCell style={{ minWidth: 90 }}>
+                                    {tDashboard("policy.type")}
+                                </TableCell>
+                                <TableCell style={{ minWidth: 90 }}>
+                                    {t("reason")}
+                                </TableCell>
+                                <TableCell style={{ minWidth: 150 }}>
+                                    {t("description")}
+                                </TableCell>
+                                <TableCell style={{ minWidth: 100 }}>
+                                    {tDashboard("vas.shareLink")}
+                                </TableCell>
+                                <TableCell style={{ minWidth: 150 }}>
+                                    {t("reportTime")}
+                                </TableCell>
+                                <TableCell style={{ minWidth: 80 }}>
+                                    {tDashboard("policy.actions")}
+                                </TableCell>
+                            </TableRow>
+                        </TableHead>
+                        <TableBody>
+                            {reports.map((row) => (
+                                <TableRow
+                                    hover
+                                    key={row.ID}
+                                    role="checkbox"
+                                    selected={isSelected(row.ID)}
+                                >
+                                    <TableCell padding="checkbox">
+                                        <Checkbox
+                                            onClick={(event) =>
+                                                handleClick(event, row.ID)
+                                            }
+                                            checked={isSelected(row.ID)}
+                                        />
+                                    </TableCell>
+                                    <TableCell>{row.ID}</TableCell>
+                                    <TableCell
+                                        style={{ wordBreak: "break-all" }}
+                                    >
+                                        {row.Share.ID === 0 && t("invalid")}
+                                        {row.Share.ID > 0 && (
+                                            <Link
+                                                target={"_blank"}
+                                                color="inherit"
+                                                href={
+                                                    "/s/" +
+                                                    ids[row.Share.ID] +
+                                                    (row.Share.Password === ""
+                                                        ? ""
+                                                        : "?password=" +
+                                                          row.Share.Password)
+                                                }
+                                            >
+                                                {row.Share.SourceName}
+                                            </Link>
+                                        )}
+                                    </TableCell>
+                                    <TableCell>
+                                        {row.Share.ID > 0 &&
+                                            (row.Share.IsDir
+                                                ? tDashboard("share.folder")
+                                                : tDashboard("share.file"))}
+                                    </TableCell>
+                                    <TableCell>
+                                        {tApp(reportReasons[row.Reason])}
+                                    </TableCell>
+                                    <TableCell
+                                        style={{ wordBreak: "break-all" }}
+                                    >
+                                        {row.Description}
+                                    </TableCell>
+                                    <TableCell>
+                                        <Link
+                                            href={
+                                                "/admin/user/edit/" +
+                                                row.Share.UserID
+                                            }
+                                        >
+                                            {users[row.Share.UserID]
+                                                ? users[row.Share.UserID].Nick
+                                                : tDashboard(
+                                                      "file.unknownUploader"
+                                                  )}
+                                        </Link>
+                                    </TableCell>
+                                    <TableCell>
+                                        {formatLocalTime(row.CreatedAt)}
+                                    </TableCell>
+                                    <TableCell>
+                                        <Tooltip title={t("markAsResolved")}>
+                                            <IconButton
+                                                disabled={loading}
+                                                onClick={() =>
+                                                    deleteReport(row.ID)
+                                                }
+                                                size={"small"}
+                                            >
+                                                <CheckCircleOutlineIcon />
+                                            </IconButton>
+                                        </Tooltip>
+                                        {row.Share.ID > 0 && (
+                                            <Tooltip title={t("deleteShare")}>
+                                                <IconButton
+                                                    disabled={loading}
+                                                    onClick={() =>
+                                                        deleteShare(
+                                                            row.Share.ID
+                                                        )
+                                                    }
+                                                    size={"small"}
+                                                >
+                                                    <Delete />
+                                                </IconButton>
+                                            </Tooltip>
+                                        )}
+                                    </TableCell>
+                                </TableRow>
+                            ))}
+                        </TableBody>
+                    </Table>
+                </TableContainer>
+                <TablePagination
+                    rowsPerPageOptions={[10, 25, 50, 100]}
+                    component="div"
+                    count={total}
+                    rowsPerPage={pageSize}
+                    page={page - 1}
+                    onChangePage={(e, p) => setPage(p + 1)}
+                    onChangeRowsPerPage={(e) => {
+                        setPageSize(e.target.value);
+                        setPage(1);
+                    }}
+                />
+            </Paper>
+        </div>
+    );
+}
diff --git a/src/component/Admin/Setting/Access.js b/src/component/Admin/Setting/Access.js
new file mode 100644
index 0000000..44ee85c
--- /dev/null
+++ b/src/component/Admin/Setting/Access.js
@@ -0,0 +1,502 @@
+import React, { useCallback, useEffect, useState } from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import Typography from "@material-ui/core/Typography";
+import InputLabel from "@material-ui/core/InputLabel";
+import FormControl from "@material-ui/core/FormControl";
+import Input from "@material-ui/core/Input";
+import FormHelperText from "@material-ui/core/FormHelperText";
+import Button from "@material-ui/core/Button";
+import API from "../../../middleware/Api";
+import { useDispatch } from "react-redux";
+import Select from "@material-ui/core/Select";
+import MenuItem from "@material-ui/core/MenuItem";
+import Switch from "@material-ui/core/Switch";
+import FormControlLabel from "@material-ui/core/FormControlLabel";
+import AlertDialog from "../Dialogs/Alert";
+import Alert from "@material-ui/lab/Alert";
+import FileSelector from "../Common/FileSelector";
+import { toggleSnackbar } from "../../../redux/explorer";
+import { useTranslation } from "react-i18next";
+
+const useStyles = makeStyles((theme) => ({
+    root: {
+        [theme.breakpoints.up("md")]: {
+            marginLeft: 100,
+        },
+        marginBottom: 40,
+    },
+    form: {
+        maxWidth: 400,
+        marginTop: 20,
+        marginBottom: 20,
+    },
+    formContainer: {
+        [theme.breakpoints.up("md")]: {
+            padding: "0px 24px 0 24px",
+        },
+    },
+}));
+
+export default function Access() {
+    const { t } = useTranslation("dashboard", { keyPrefix: "settings" });
+    const { t: tVas } = useTranslation("dashboard", { keyPrefix: "vas" });
+    const classes = useStyles();
+    const [loading, setLoading] = useState(false);
+    const [initCompleted, setInitComplete] = useState(false);
+    const [options, setOptions] = useState({
+        register_enabled: "1",
+        default_group: "1",
+        email_active: "0",
+        login_captcha: "0",
+        reg_captcha: "0",
+        forget_captcha: "0",
+        qq_login: "0",
+        qq_direct_login: "0",
+        qq_login_id: "",
+        qq_login_key: "",
+        authn_enabled: "0",
+        mail_domain_filter: "0",
+        mail_domain_filter_list: "",
+        initial_files: "[]",
+    });
+    const [siteURL, setSiteURL] = useState("");
+    const [groups, setGroups] = useState([]);
+    const [httpAlert, setHttpAlert] = useState(false);
+
+    const handleChange = (name) => (event) => {
+        let value = event.target.value;
+        if (event.target.checked !== undefined) {
+            value = event.target.checked ? "1" : "0";
+        }
+        setOptions({
+            ...options,
+            [name]: value,
+        });
+    };
+
+    const handleInputChange = (name) => (event) => {
+        const value = event.target.value;
+        setOptions({
+            ...options,
+            [name]: value,
+        });
+    };
+
+    const dispatch = useDispatch();
+    const ToggleSnackbar = useCallback(
+        (vertical, horizontal, msg, color) =>
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color)),
+        [dispatch]
+    );
+
+    useEffect(() => {
+        API.post("/admin/setting", {
+            keys: [...Object.keys(options), "siteURL"],
+        })
+            .then((response) => {
+                setSiteURL(response.data.siteURL);
+                delete response.data.siteURL;
+                setOptions(response.data);
+                setInitComplete(true);
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            });
+
+        API.get("/admin/groups")
+            .then((response) => {
+                setGroups(response.data);
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            });
+        // eslint-disable-next-line
+    }, []);
+
+    const submit = (e) => {
+        e.preventDefault();
+        setLoading(true);
+        const option = [];
+        Object.keys(options).forEach((k) => {
+            option.push({
+                key: k,
+                value: options[k],
+            });
+        });
+        API.patch("/admin/setting", {
+            options: option,
+        })
+            .then(() => {
+                ToggleSnackbar("top", "right", t("saved"), "success");
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            })
+            .then(() => {
+                setLoading(false);
+            });
+    };
+
+    return (
+        <div>
+            <AlertDialog
+                title={t("hint")}
+                msg={t("webauthnNoHttps")}
+                onClose={() => setHttpAlert(false)}
+                open={httpAlert}
+            />
+            <form onSubmit={submit}>
+                <div className={classes.root}>
+                    <Typography variant="h6" gutterBottom>
+                        {t("accountManagement")}
+                    </Typography>
+                    <div className={classes.formContainer}>
+                        <div className={classes.form}>
+                            <FormControl fullWidth>
+                                <FormControlLabel
+                                    control={
+                                        <Switch
+                                            checked={
+                                                options.register_enabled === "1"
+                                            }
+                                            onChange={handleChange(
+                                                "register_enabled"
+                                            )}
+                                        />
+                                    }
+                                    label={t("allowNewRegistrations")}
+                                />
+                                <FormHelperText id="component-helper-text">
+                                    {t("allowNewRegistrationsDes")}
+                                </FormHelperText>
+                            </FormControl>
+                        </div>
+
+                        <div className={classes.form}>
+                            <FormControl fullWidth>
+                                <FormControlLabel
+                                    control={
+                                        <Switch
+                                            checked={
+                                                options.email_active === "1"
+                                            }
+                                            onChange={handleChange(
+                                                "email_active"
+                                            )}
+                                        />
+                                    }
+                                    label={t("emailActivation")}
+                                />
+                                <FormHelperText id="component-helper-text">
+                                    {t("emailActivationDes")}
+                                </FormHelperText>
+                            </FormControl>
+                        </div>
+
+                        <div className={classes.form}>
+                            <FormControl fullWidth>
+                                <FormControlLabel
+                                    control={
+                                        <Switch
+                                            checked={
+                                                options.reg_captcha === "1"
+                                            }
+                                            onChange={handleChange(
+                                                "reg_captcha"
+                                            )}
+                                        />
+                                    }
+                                    label={t("captchaForSignup")}
+                                />
+                                <FormHelperText id="component-helper-text">
+                                    {t("captchaForSignupDes")}
+                                </FormHelperText>
+                            </FormControl>
+                        </div>
+
+                        <div className={classes.form}>
+                            <FormControl fullWidth>
+                                <FormControlLabel
+                                    control={
+                                        <Switch
+                                            checked={
+                                                options.login_captcha === "1"
+                                            }
+                                            onChange={handleChange(
+                                                "login_captcha"
+                                            )}
+                                        />
+                                    }
+                                    label={t("captchaForLogin")}
+                                />
+                                <FormHelperText id="component-helper-text">
+                                    {t("captchaForLoginDes")}
+                                </FormHelperText>
+                            </FormControl>
+                        </div>
+
+                        <div className={classes.form}>
+                            <FormControl fullWidth>
+                                <FormControlLabel
+                                    control={
+                                        <Switch
+                                            checked={
+                                                options.forget_captcha === "1"
+                                            }
+                                            onChange={handleChange(
+                                                "forget_captcha"
+                                            )}
+                                        />
+                                    }
+                                    label={t("captchaForReset")}
+                                />
+                                <FormHelperText id="component-helper-text">
+                                    {t("captchaForResetDes")}
+                                </FormHelperText>
+                            </FormControl>
+                        </div>
+
+                        <div className={classes.form}>
+                            <FormControl fullWidth>
+                                <FormControlLabel
+                                    control={
+                                        <Switch
+                                            checked={
+                                                options.authn_enabled === "1"
+                                            }
+                                            onChange={(e) => {
+                                                if (
+                                                    !siteURL.startsWith(
+                                                        "https://"
+                                                    )
+                                                ) {
+                                                    setHttpAlert(true);
+                                                    return;
+                                                }
+                                                handleChange("authn_enabled")(
+                                                    e
+                                                );
+                                            }}
+                                        />
+                                    }
+                                    label={t("webauthn")}
+                                />
+                                <FormHelperText id="component-helper-text">
+                                    {t("webauthnDes")}
+                                </FormHelperText>
+                            </FormControl>
+                        </div>
+
+                        <div className={classes.form}>
+                            <FormControl>
+                                <InputLabel htmlFor="component-helper">
+                                    {t("defaultGroup")}
+                                </InputLabel>
+                                <Select
+                                    value={options.default_group}
+                                    onChange={handleInputChange(
+                                        "default_group"
+                                    )}
+                                    required
+                                >
+                                    {groups.map((v) => {
+                                        if (v.ID === 3) {
+                                            return null;
+                                        }
+                                        return (
+                                            <MenuItem
+                                                key={v.ID}
+                                                value={v.ID.toString()}
+                                            >
+                                                {v.Name}
+                                            </MenuItem>
+                                        );
+                                    })}
+                                </Select>
+                                <FormHelperText id="component-helper-text">
+                                    {t("defaultGroupDes")}
+                                </FormHelperText>
+                            </FormControl>
+                        </div>
+
+                        <div className={classes.form}>
+                            <FormControl>
+                                {initCompleted && (
+                                    <FileSelector
+                                        label={tVas("initialFiles")}
+                                        value={JSON.parse(
+                                            options.initial_files
+                                        )}
+                                        onChange={(v) =>
+                                            handleInputChange("initial_files")({
+                                                target: { value: v },
+                                            })
+                                        }
+                                    />
+                                )}
+                                <FormHelperText id="component-helper-text">
+                                    {tVas("initialFilesDes")}
+                                </FormHelperText>
+                            </FormControl>
+                        </div>
+
+                        <div className={classes.form}>
+                            <FormControl>
+                                <InputLabel htmlFor="component-helper">
+                                    {tVas("filterEmailProvider")}
+                                </InputLabel>
+                                <Select
+                                    value={options.mail_domain_filter}
+                                    onChange={handleInputChange(
+                                        "mail_domain_filter"
+                                    )}
+                                    required
+                                >
+                                    {[
+                                        tVas("filterEmailProviderDisabled"),
+                                        tVas("filterEmailProviderWhitelist"),
+                                        tVas("filterEmailProviderBlacklist"),
+                                    ].map((v, i) => (
+                                        <MenuItem key={i} value={i.toString()}>
+                                            {v}
+                                        </MenuItem>
+                                    ))}
+                                </Select>
+                                <FormHelperText id="component-helper-text">
+                                    {tVas("filterEmailProviderDes")}
+                                </FormHelperText>
+                            </FormControl>
+                        </div>
+
+                        {options.mail_domain_filter !== "0" && (
+                            <div className={classes.form}>
+                                <FormControl fullWidth>
+                                    <InputLabel htmlFor="component-helper">
+                                        {tVas("filterEmailProviderRule")}
+                                    </InputLabel>
+                                    <Input
+                                        value={options.mail_domain_filter_list}
+                                        onChange={handleChange(
+                                            "mail_domain_filter_list"
+                                        )}
+                                        multiline
+                                        rowsMax="10"
+                                    />
+                                    <FormHelperText id="component-helper-text">
+                                        {tVas("filterEmailProviderRuleDes")}
+                                    </FormHelperText>
+                                </FormControl>
+                            </div>
+                        )}
+                    </div>
+                </div>
+
+                <div className={classes.root}>
+                    <Typography variant="h6" gutterBottom>
+                        {tVas("qqConnect")}
+                    </Typography>
+                    <div className={classes.formContainer}>
+                        <div className={classes.form}>
+                            <Alert severity="info">
+                                {tVas("qqConnectHint", {
+                                    url: siteURL.endsWith("/")
+                                        ? siteURL + "login/qq"
+                                        : siteURL + "/login/qq",
+                                })}
+                            </Alert>
+                        </div>
+                        <div className={classes.form}>
+                            <FormControl fullWidth>
+                                <FormControlLabel
+                                    control={
+                                        <Switch
+                                            checked={options.qq_login === "1"}
+                                            onChange={handleChange("qq_login")}
+                                        />
+                                    }
+                                    label={tVas("enableQQConnect")}
+                                />
+                                <FormHelperText id="component-helper-text">
+                                    {tVas("enableQQConnectDes")}
+                                </FormHelperText>
+                            </FormControl>
+                        </div>
+
+                        {options.qq_login === "1" && (
+                            <>
+                                <div className={classes.form}>
+                                    <FormControl fullWidth>
+                                        <FormControlLabel
+                                            control={
+                                                <Switch
+                                                    checked={
+                                                        options.qq_direct_login ===
+                                                        "1"
+                                                    }
+                                                    onChange={handleChange(
+                                                        "qq_direct_login"
+                                                    )}
+                                                />
+                                            }
+                                            label={tVas("loginWithoutBinding")}
+                                        />
+                                        <FormHelperText id="component-helper-text">
+                                            {tVas("loginWithoutBindingDes")}
+                                        </FormHelperText>
+                                    </FormControl>
+                                </div>
+
+                                <div className={classes.form}>
+                                    <FormControl fullWidth>
+                                        <InputLabel htmlFor="component-helper">
+                                            {tVas("appid")}
+                                        </InputLabel>
+                                        <Input
+                                            required
+                                            value={options.qq_login_id}
+                                            onChange={handleInputChange(
+                                                "qq_login_id"
+                                            )}
+                                        />
+                                        <FormHelperText id="component-helper-text">
+                                            {tVas("appidDes")}
+                                        </FormHelperText>
+                                    </FormControl>
+                                </div>
+
+                                <div className={classes.form}>
+                                    <FormControl fullWidth>
+                                        <InputLabel htmlFor="component-helper">
+                                            {tVas("appKey")}
+                                        </InputLabel>
+                                        <Input
+                                            required
+                                            value={options.qq_login_key}
+                                            onChange={handleInputChange(
+                                                "qq_login_key"
+                                            )}
+                                        />
+                                        <FormHelperText id="component-helper-text">
+                                            {tVas("appKeyDes")}
+                                        </FormHelperText>
+                                    </FormControl>
+                                </div>
+                            </>
+                        )}
+                    </div>
+                </div>
+
+                <div className={classes.root}>
+                    <Button
+                        disabled={loading}
+                        type={"submit"}
+                        variant={"contained"}
+                        color={"primary"}
+                    >
+                        {t("save")}
+                    </Button>
+                </div>
+            </form>
+        </div>
+    );
+}
diff --git a/src/component/Admin/Setting/Captcha.js b/src/component/Admin/Setting/Captcha.js
new file mode 100644
index 0000000..0634fa2
--- /dev/null
+++ b/src/component/Admin/Setting/Captcha.js
@@ -0,0 +1,537 @@
+import React, { useCallback, useEffect, useState } from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import Typography from "@material-ui/core/Typography";
+import InputLabel from "@material-ui/core/InputLabel";
+import FormControl from "@material-ui/core/FormControl";
+import FormHelperText from "@material-ui/core/FormHelperText";
+import Button from "@material-ui/core/Button";
+import API from "../../../middleware/Api";
+import { useDispatch } from "react-redux";
+import Select from "@material-ui/core/Select";
+import MenuItem from "@material-ui/core/MenuItem";
+import Input from "@material-ui/core/Input";
+import Link from "@material-ui/core/Link";
+import { toggleSnackbar } from "../../../redux/explorer";
+import FormControlLabel from "@material-ui/core/FormControlLabel";
+import Switch from "@material-ui/core/Switch";
+import { Trans, useTranslation } from "react-i18next";
+
+const useStyles = makeStyles((theme) => ({
+    root: {
+        [theme.breakpoints.up("md")]: {
+            marginLeft: 100,
+        },
+        marginBottom: 40,
+    },
+    form: {
+        maxWidth: 400,
+        marginTop: 20,
+        marginBottom: 20,
+    },
+    formContainer: {
+        [theme.breakpoints.up("md")]: {
+            padding: "0px 24px 0 24px",
+        },
+    },
+}));
+
+export default function Captcha() {
+    const { t } = useTranslation("dashboard", { keyPrefix: "settings" });
+    const classes = useStyles();
+    const [loading, setLoading] = useState(false);
+    const [options, setOptions] = useState({
+        captcha_type: "normal",
+        captcha_height: "1",
+        captcha_width: "1",
+        captcha_mode: "3",
+        captcha_CaptchaLen: "6",
+        captcha_ComplexOfNoiseText: "0",
+        captcha_ComplexOfNoiseDot: "0",
+        captcha_IsShowHollowLine: "0",
+        captcha_IsShowNoiseDot: "0",
+        captcha_IsShowNoiseText: "0",
+        captcha_IsShowSlimeLine: "0",
+        captcha_IsShowSineLine: "0",
+        captcha_ReCaptchaKey: "",
+        captcha_ReCaptchaSecret: "",
+        captcha_TCaptcha_CaptchaAppId: "",
+        captcha_TCaptcha_AppSecretKey: "",
+        captcha_TCaptcha_SecretId: "",
+        captcha_TCaptcha_SecretKey: "",
+    });
+
+    const handleChange = (name) => (event) => {
+        setOptions({
+            ...options,
+            [name]: event.target.value,
+        });
+    };
+
+    const dispatch = useDispatch();
+    const ToggleSnackbar = useCallback(
+        (vertical, horizontal, msg, color) =>
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color)),
+        [dispatch]
+    );
+
+    useEffect(() => {
+        API.post("/admin/setting", {
+            keys: Object.keys(options),
+        })
+            .then((response) => {
+                setOptions(response.data);
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            });
+        // eslint-disable-next-line
+    }, []);
+
+    const submit = (e) => {
+        e.preventDefault();
+        setLoading(true);
+        const option = [];
+        Object.keys(options).forEach((k) => {
+            option.push({
+                key: k,
+                value: options[k],
+            });
+        });
+        API.patch("/admin/setting", {
+            options: option,
+        })
+            .then(() => {
+                ToggleSnackbar("top", "right", t("saved"), "success");
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            })
+            .then(() => {
+                setLoading(false);
+            });
+    };
+
+    const handleCheckChange = (name) => (event) => {
+        const value = event.target.checked ? "1" : "0";
+        setOptions({
+            ...options,
+            [name]: value,
+        });
+    };
+
+    return (
+        <div>
+            <form onSubmit={submit}>
+                <div className={classes.root}>
+                    <Typography variant="h6" gutterBottom>
+                        {t("captcha")}
+                    </Typography>
+                    <div className={classes.formContainer}>
+                        <div className={classes.form}>
+                            <FormControl fullWidth>
+                                <InputLabel htmlFor="component-helper">
+                                    {t("captchaType")}
+                                </InputLabel>
+                                <Select
+                                    value={options.captcha_type}
+                                    onChange={handleChange("captcha_type")}
+                                    required
+                                >
+                                    <MenuItem value={"normal"}>
+                                        {t("plainCaptcha")}
+                                    </MenuItem>
+                                    <MenuItem value={"recaptcha"}>
+                                        {t("reCaptchaV2")}
+                                    </MenuItem>
+                                    <MenuItem value={"tcaptcha"}>
+                                        {t("tencentCloudCaptcha")}
+                                    </MenuItem>
+                                </Select>
+                                <FormHelperText id="component-helper-text">
+                                    {t("captchaProvider")}
+                                </FormHelperText>
+                            </FormControl>
+                        </div>
+                    </div>
+                </div>
+
+                {options.captcha_type === "normal" && (
+                    <div className={classes.root}>
+                        <Typography variant="h6" gutterBottom>
+                            {t("plainCaptchaTitle")}
+                        </Typography>
+                        <div className={classes.formContainer}>
+                            <div className={classes.form}>
+                                <FormControl>
+                                    <InputLabel htmlFor="component-helper">
+                                        {t("captchaWidth")}
+                                    </InputLabel>
+                                    <Input
+                                        type={"number"}
+                                        inputProps={{
+                                            min: 1,
+                                            step: 1,
+                                        }}
+                                        value={options.captcha_width}
+                                        onChange={handleChange("captcha_width")}
+                                        required
+                                    />
+                                </FormControl>
+                            </div>
+
+                            <div className={classes.form}>
+                                <FormControl>
+                                    <InputLabel htmlFor="component-helper">
+                                        {t("captchaHeight")}
+                                    </InputLabel>
+                                    <Input
+                                        type={"number"}
+                                        inputProps={{
+                                            min: 1,
+                                            step: 1,
+                                        }}
+                                        value={options.captcha_height}
+                                        onChange={handleChange(
+                                            "captcha_height"
+                                        )}
+                                        required
+                                    />
+                                </FormControl>
+                            </div>
+
+                            <div className={classes.form}>
+                                <FormControl>
+                                    <InputLabel htmlFor="component-helper">
+                                        {t("captchaLength")}
+                                    </InputLabel>
+                                    <Input
+                                        type={"number"}
+                                        inputProps={{
+                                            min: 1,
+                                            step: 1,
+                                        }}
+                                        value={options.captcha_CaptchaLen}
+                                        onChange={handleChange(
+                                            "captcha_CaptchaLen"
+                                        )}
+                                        required
+                                    />
+                                </FormControl>
+                            </div>
+                            <div className={classes.form}>
+                                <FormControl>
+                                    <InputLabel htmlFor="component-helper">
+                                        {t("captchaMode")}
+                                    </InputLabel>
+                                    <Select
+                                        value={options.captcha_mode}
+                                        onChange={handleChange("captcha_mode")}
+                                        required
+                                    >
+                                        <MenuItem value={"0"}>
+                                            {t("captchaModeNumber")}
+                                        </MenuItem>
+                                        <MenuItem value={"1"}>
+                                            {t("captchaModeLetter")}
+                                        </MenuItem>
+                                        <MenuItem value={"2"}>
+                                            {t("captchaModeMath")}
+                                        </MenuItem>
+                                        <MenuItem value={"3"}>
+                                            {t("captchaModeNumberLetter")}
+                                        </MenuItem>
+                                    </Select>
+                                    <FormHelperText id="component-helper-text">
+                                        {t("captchaElement")}
+                                    </FormHelperText>
+                                </FormControl>
+                            </div>
+                            {[
+                                {
+                                    name: "complexOfNoiseText",
+                                    field: "captcha_ComplexOfNoiseText",
+                                },
+                                {
+                                    name: "complexOfNoiseDot",
+                                    field: "captcha_ComplexOfNoiseDot",
+                                },
+                                {
+                                    name: "showHollowLine",
+                                    field: "captcha_IsShowHollowLine",
+                                },
+                                {
+                                    name: "showNoiseDot",
+                                    field: "captcha_IsShowNoiseDot",
+                                },
+                                {
+                                    name: "showNoiseText",
+                                    field: "captcha_IsShowNoiseText",
+                                },
+                                {
+                                    name: "showSlimeLine",
+                                    field: "captcha_IsShowSlimeLine",
+                                },
+                                {
+                                    name: "showSineLine",
+                                    field: "captcha_IsShowSineLine",
+                                },
+                            ].map((input) => (
+                                <div key={input.name} className={classes.form}>
+                                    <FormControl fullWidth>
+                                        <FormControlLabel
+                                            control={
+                                                <Switch
+                                                    checked={
+                                                        options[input.field] ===
+                                                        "1"
+                                                    }
+                                                    onChange={handleCheckChange(
+                                                        input.field
+                                                    )}
+                                                />
+                                            }
+                                            label={t(input.name)}
+                                        />
+                                    </FormControl>
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+                )}
+
+                {options.captcha_type === "recaptcha" && (
+                    <div className={classes.root}>
+                        <Typography variant="h6" gutterBottom>
+                            {t("reCaptchaV2")}
+                        </Typography>
+                        <div className={classes.formContainer}>
+                            <div className={classes.form}>
+                                <div className={classes.form}>
+                                    <FormControl fullWidth>
+                                        <InputLabel htmlFor="component-helper">
+                                            {t("siteKey")}
+                                        </InputLabel>
+                                        <Input
+                                            required
+                                            value={options.captcha_ReCaptchaKey}
+                                            onChange={handleChange(
+                                                "captcha_ReCaptchaKey"
+                                            )}
+                                        />
+                                        <FormHelperText id="component-helper-text">
+                                            <Trans
+                                                ns={"dashboard"}
+                                                i18nKey={"settings.siteKeyDes"}
+                                                components={[
+                                                    <Link
+                                                        key={0}
+                                                        href={
+                                                            "https://www.google.com/recaptcha/admin/create"
+                                                        }
+                                                        target={"_blank"}
+                                                    />,
+                                                ]}
+                                            />
+                                        </FormHelperText>
+                                    </FormControl>
+                                </div>
+
+                                <div className={classes.form}>
+                                    <FormControl fullWidth>
+                                        <InputLabel htmlFor="component-helper">
+                                            {t("siteSecret")}
+                                        </InputLabel>
+                                        <Input
+                                            required
+                                            value={
+                                                options.captcha_ReCaptchaSecret
+                                            }
+                                            onChange={handleChange(
+                                                "captcha_ReCaptchaSecret"
+                                            )}
+                                        />
+                                        <FormHelperText id="component-helper-text">
+                                            <Trans
+                                                ns={"dashboard"}
+                                                i18nKey={
+                                                    "settings.siteSecretDes"
+                                                }
+                                                components={[
+                                                    <Link
+                                                        key={0}
+                                                        href={
+                                                            "https://www.google.com/recaptcha/admin/create"
+                                                        }
+                                                        target={"_blank"}
+                                                    />,
+                                                ]}
+                                            />
+                                        </FormHelperText>
+                                    </FormControl>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                )}
+
+                {options.captcha_type === "tcaptcha" && (
+                    <div className={classes.root}>
+                        <Typography variant="h6" gutterBottom>
+                            {t("tencentCloudCaptcha")}
+                        </Typography>
+                        <div className={classes.formContainer}>
+                            <div className={classes.form}>
+                                <div className={classes.form}>
+                                    <FormControl fullWidth>
+                                        <InputLabel htmlFor="component-helper">
+                                            {t("secretID")}
+                                        </InputLabel>
+                                        <Input
+                                            required
+                                            value={
+                                                options.captcha_TCaptcha_SecretId
+                                            }
+                                            onChange={handleChange(
+                                                "captcha_TCaptcha_SecretId"
+                                            )}
+                                        />
+                                        <FormHelperText id="component-helper-text">
+                                            <Trans
+                                                ns={"dashboard"}
+                                                i18nKey={
+                                                    "settings.siteSecretDes"
+                                                }
+                                                components={[
+                                                    <Link
+                                                        key={0}
+                                                        href={
+                                                            "https://console.cloud.tencent.com/capi"
+                                                        }
+                                                        target={"_blank"}
+                                                    />,
+                                                ]}
+                                            />
+                                        </FormHelperText>
+                                    </FormControl>
+                                </div>
+
+                                <div className={classes.form}>
+                                    <FormControl fullWidth>
+                                        <InputLabel htmlFor="component-helper">
+                                            {t("secretKey")}
+                                        </InputLabel>
+                                        <Input
+                                            required
+                                            value={
+                                                options.captcha_TCaptcha_SecretKey
+                                            }
+                                            onChange={handleChange(
+                                                "captcha_TCaptcha_SecretKey"
+                                            )}
+                                        />
+                                        <FormHelperText id="component-helper-text">
+                                            <Trans
+                                                ns={"dashboard"}
+                                                i18nKey={
+                                                    "settings.secretKeyDes"
+                                                }
+                                                components={[
+                                                    <Link
+                                                        key={0}
+                                                        href={
+                                                            "https://console.cloud.tencent.com/capi"
+                                                        }
+                                                        target={"_blank"}
+                                                    />,
+                                                ]}
+                                            />
+                                        </FormHelperText>
+                                    </FormControl>
+                                </div>
+
+                                <div className={classes.form}>
+                                    <FormControl fullWidth>
+                                        <InputLabel htmlFor="component-helper">
+                                            {t("tCaptchaAppID")}
+                                        </InputLabel>
+                                        <Input
+                                            required
+                                            value={
+                                                options.captcha_TCaptcha_CaptchaAppId
+                                            }
+                                            onChange={handleChange(
+                                                "captcha_TCaptcha_CaptchaAppId"
+                                            )}
+                                        />
+                                        <FormHelperText id="component-helper-text">
+                                            <Trans
+                                                ns={"dashboard"}
+                                                i18nKey={
+                                                    "settings.tCaptchaAppIDDes"
+                                                }
+                                                components={[
+                                                    <Link
+                                                        key={0}
+                                                        href={
+                                                            "https://console.cloud.tencent.com/captcha/graphical"
+                                                        }
+                                                        target={"_blank"}
+                                                    />,
+                                                ]}
+                                            />
+                                        </FormHelperText>
+                                    </FormControl>
+                                </div>
+
+                                <div className={classes.form}>
+                                    <FormControl fullWidth>
+                                        <InputLabel htmlFor="component-helper">
+                                            {t("tCaptchaSecretKey")}
+                                        </InputLabel>
+                                        <Input
+                                            required
+                                            value={
+                                                options.captcha_TCaptcha_AppSecretKey
+                                            }
+                                            onChange={handleChange(
+                                                "captcha_TCaptcha_AppSecretKey"
+                                            )}
+                                        />
+                                        <FormHelperText id="component-helper-text">
+                                            <Trans
+                                                ns={"dashboard"}
+                                                i18nKey={
+                                                    "settings.tCaptchaSecretKeyDes"
+                                                }
+                                                components={[
+                                                    <Link
+                                                        key={0}
+                                                        href={
+                                                            "https://console.cloud.tencent.com/captcha/graphical"
+                                                        }
+                                                        target={"_blank"}
+                                                    />,
+                                                ]}
+                                            />
+                                        </FormHelperText>
+                                    </FormControl>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                )}
+
+                <div className={classes.root}>
+                    <Button
+                        disabled={loading}
+                        type={"submit"}
+                        variant={"contained"}
+                        color={"primary"}
+                    >
+                        {t("save")}
+                    </Button>
+                </div>
+            </form>
+        </div>
+    );
+}
diff --git a/src/component/Admin/Setting/Image.js b/src/component/Admin/Setting/Image.js
new file mode 100644
index 0000000..daea4bf
--- /dev/null
+++ b/src/component/Admin/Setting/Image.js
@@ -0,0 +1,664 @@
+import React, { useCallback, useEffect, useState } from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import Typography from "@material-ui/core/Typography";
+import InputLabel from "@material-ui/core/InputLabel";
+import FormControl from "@material-ui/core/FormControl";
+import Input from "@material-ui/core/Input";
+import FormHelperText from "@material-ui/core/FormHelperText";
+import Button from "@material-ui/core/Button";
+import API from "../../../middleware/Api";
+import { useDispatch } from "react-redux";
+import SizeInput from "../Common/SizeInput";
+import { toggleSnackbar } from "../../../redux/explorer";
+import Alert from "@material-ui/lab/Alert";
+import FormControlLabel from "@material-ui/core/FormControlLabel";
+import Switch from "@material-ui/core/Switch";
+import { Trans, useTranslation } from "react-i18next";
+import Link from "@material-ui/core/Link";
+import ThumbGenerators from "./ThumbGenerators";
+import PolicySelector from "../Common/PolicySelector";
+
+const useStyles = makeStyles((theme) => ({
+    root: {
+        [theme.breakpoints.up("md")]: {
+            marginLeft: 100,
+        },
+        marginBottom: 40,
+    },
+    form: {
+        maxWidth: 400,
+        marginTop: 20,
+        marginBottom: 20,
+    },
+    formContainer: {
+        [theme.breakpoints.up("md")]: {
+            padding: "0px 24px 0 24px",
+        },
+    },
+}));
+
+export default function ImageSetting() {
+    const { t } = useTranslation("dashboard", { keyPrefix: "settings" });
+    const classes = useStyles();
+    const [loading, setLoading] = useState(false);
+    const [options, setOptions] = useState({
+        gravatar_server: "",
+        avatar_path: "",
+        avatar_size: "",
+        avatar_size_l: "",
+        avatar_size_m: "",
+        avatar_size_s: "",
+        thumb_width: "",
+        thumb_height: "",
+        office_preview_service: "",
+        thumb_file_suffix: "",
+        thumb_max_task_count: "",
+        thumb_encode_method: "",
+        thumb_gc_after_gen: "0",
+        thumb_encode_quality: "",
+        maxEditSize: "",
+        wopi_enabled: "0",
+        wopi_endpoint: "",
+        wopi_session_timeout: "0",
+        thumb_builtin_enabled: "0",
+        thumb_vips_enabled: "0",
+        thumb_vips_exts: "",
+        thumb_ffmpeg_enabled: "0",
+        thumb_vips_path: "",
+        thumb_ffmpeg_path: "",
+        thumb_ffmpeg_exts: "",
+        thumb_ffmpeg_seek: "",
+        thumb_libreoffice_path: "",
+        thumb_libreoffice_enabled: "0",
+        thumb_libreoffice_exts: "",
+        thumb_proxy_enabled: "0",
+        thumb_proxy_policy: [],
+        thumb_max_src_size: "",
+    });
+
+    const handleChange = (name) => (event) => {
+        setOptions({
+            ...options,
+            [name]: event.target.value,
+        });
+    };
+
+    const dispatch = useDispatch();
+    const ToggleSnackbar = useCallback(
+        (vertical, horizontal, msg, color) =>
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color)),
+        [dispatch]
+    );
+
+    useEffect(() => {
+        API.post("/admin/setting", {
+            keys: Object.keys(options),
+        })
+            .then((response) => {
+                response.data.thumb_proxy_policy = JSON.parse(
+                    response.data.thumb_proxy_policy
+                ).map((v) => {
+                    return v.toString();
+                });
+                setOptions(response.data);
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            });
+        // eslint-disable-next-line
+    }, []);
+
+    const reload = () => {
+        API.get("/admin/reload/wopi")
+            // eslint-disable-next-line @typescript-eslint/no-empty-function
+            .then(() => {})
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            })
+            // eslint-disable-next-line @typescript-eslint/no-empty-function
+            .then(() => {});
+    };
+
+    const submit = (e) => {
+        e.preventDefault();
+        setLoading(true);
+        const option = [];
+        Object.keys(options).forEach((k) => {
+            let value = options[k];
+            if (k === "thumb_proxy_policy") {
+                value = JSON.stringify(value.map((v) => parseInt(v)));
+            }
+
+            option.push({
+                key: k,
+                value,
+            });
+        });
+        API.patch("/admin/setting", {
+            options: option,
+        })
+            .then(() => {
+                ToggleSnackbar("top", "right", t("saved"), "success");
+                reload();
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            })
+            .then(() => {
+                setLoading(false);
+            });
+    };
+
+    const handleCheckChange = (name) => (event) => {
+        const value = event.target.checked ? "1" : "0";
+        setOptions({
+            ...options,
+            [name]: value,
+        });
+    };
+
+    return (
+        <div>
+            <form onSubmit={submit}>
+                <div className={classes.root}>
+                    <Typography variant="h6" gutterBottom>
+                        {t("avatar")}
+                    </Typography>
+                    <div className={classes.formContainer}>
+                        <div className={classes.form}>
+                            <FormControl fullWidth>
+                                <InputLabel htmlFor="component-helper">
+                                    {t("gravatarServer")}
+                                </InputLabel>
+                                <Input
+                                    type={"url"}
+                                    value={options.gravatar_server}
+                                    onChange={handleChange("gravatar_server")}
+                                    required
+                                />
+                                <FormHelperText id="component-helper-text">
+                                    {t("gravatarServerDes")}
+                                </FormHelperText>
+                            </FormControl>
+                        </div>
+
+                        <div className={classes.form}>
+                            <FormControl fullWidth>
+                                <InputLabel htmlFor="component-helper">
+                                    {t("avatarFilePath")}
+                                </InputLabel>
+                                <Input
+                                    value={options.avatar_path}
+                                    onChange={handleChange("avatar_path")}
+                                    required
+                                />
+                                <FormHelperText id="component-helper-text">
+                                    {t("avatarFilePathDes")}
+                                </FormHelperText>
+                            </FormControl>
+                        </div>
+
+                        <div className={classes.form}>
+                            <FormControl fullWidth>
+                                {options.avatar_size !== "" && (
+                                    <SizeInput
+                                        value={options.avatar_size}
+                                        onChange={handleChange("avatar_size")}
+                                        required
+                                        min={0}
+                                        max={2147483647}
+                                        label={t("avatarSize")}
+                                    />
+                                )}
+                                <FormHelperText id="component-helper-text">
+                                    {t("avatarSizeDes")}
+                                </FormHelperText>
+                            </FormControl>
+                        </div>
+
+                        <div className={classes.form}>
+                            <FormControl>
+                                <InputLabel htmlFor="component-helper">
+                                    {t("smallAvatarSize")}
+                                </InputLabel>
+                                <Input
+                                    type={"number"}
+                                    inputProps={{
+                                        min: 1,
+                                        step: 1,
+                                    }}
+                                    value={options.avatar_size_s}
+                                    onChange={handleChange("avatar_size_s")}
+                                    required
+                                />
+                            </FormControl>
+                        </div>
+
+                        <div className={classes.form}>
+                            <FormControl>
+                                <InputLabel htmlFor="component-helper">
+                                    {t("mediumAvatarSize")}
+                                </InputLabel>
+                                <Input
+                                    type={"number"}
+                                    inputProps={{
+                                        min: 1,
+                                        step: 1,
+                                    }}
+                                    value={options.avatar_size_m}
+                                    onChange={handleChange("avatar_size_m")}
+                                    required
+                                />
+                            </FormControl>
+                        </div>
+
+                        <div className={classes.form}>
+                            <FormControl>
+                                <InputLabel htmlFor="component-helper">
+                                    {t("largeAvatarSize")}
+                                </InputLabel>
+                                <Input
+                                    type={"number"}
+                                    inputProps={{
+                                        min: 1,
+                                        step: 1,
+                                    }}
+                                    value={options.avatar_size_l}
+                                    onChange={handleChange("avatar_size_l")}
+                                    required
+                                />
+                            </FormControl>
+                        </div>
+                    </div>
+                </div>
+
+                <div className={classes.root}>
+                    <Typography variant="h6" gutterBottom>
+                        {t("filePreview")}
+                    </Typography>
+
+                    <div className={classes.formContainer}>
+                        <div className={classes.form}>
+                            <FormControl fullWidth>
+                                <InputLabel htmlFor="component-helper">
+                                    {t("officePreviewService")}
+                                </InputLabel>
+                                <Input
+                                    value={options.office_preview_service}
+                                    onChange={handleChange(
+                                        "office_preview_service"
+                                    )}
+                                    required
+                                />
+                                <FormHelperText id="component-helper-text">
+                                    {t("officePreviewServiceDes")}
+                                    <br />
+                                    <code>{"{$src}"}</code> -{" "}
+                                    {t("officePreviewServiceSrcDes")}
+                                    <br />
+                                    <code>{"{$srcB64}"}</code> -{" "}
+                                    {t("officePreviewServiceSrcB64Des")}
+                                    <br />
+                                    <code>{"{$name}"}</code> -{" "}
+                                    {t("officePreviewServiceName")}
+                                </FormHelperText>
+                            </FormControl>
+                        </div>
+
+                        <div className={classes.form}>
+                            <FormControl>
+                                {options.maxEditSize !== "" && (
+                                    <SizeInput
+                                        value={options.maxEditSize}
+                                        onChange={handleChange("maxEditSize")}
+                                        required
+                                        min={0}
+                                        max={2147483647}
+                                        label={t("textEditMaxSize")}
+                                    />
+                                )}
+
+                                <FormHelperText id="component-helper-text">
+                                    {t("textEditMaxSizeDes")}
+                                </FormHelperText>
+                            </FormControl>
+                        </div>
+                    </div>
+                </div>
+
+                <div className={classes.root}>
+                    <Typography variant="h6" gutterBottom>
+                        {t("wopiClient")}
+                    </Typography>
+
+                    <div className={classes.formContainer}>
+                        <div className={classes.form}>
+                            <Alert severity="info">
+                                <Trans
+                                    ns={"dashboard"}
+                                    i18nKey={"settings.wopiClientDes"}
+                                    components={[
+                                        <Link
+                                            key={0}
+                                            target={"_blank"}
+                                            href={t("wopiDocLink")}
+                                        />,
+                                    ]}
+                                />
+                            </Alert>
+                        </div>
+
+                        <div className={classes.form}>
+                            <FormControl fullWidth>
+                                <FormControlLabel
+                                    control={
+                                        <Switch
+                                            checked={
+                                                options.wopi_enabled === "1"
+                                            }
+                                            onChange={handleCheckChange(
+                                                "wopi_enabled"
+                                            )}
+                                        />
+                                    }
+                                    label={t("enableWopi")}
+                                />
+                            </FormControl>
+                        </div>
+
+                        {options.wopi_enabled === "1" && (
+                            <>
+                                <div className={classes.form}>
+                                    <FormControl fullWidth>
+                                        <InputLabel htmlFor="component-helper">
+                                            {t("wopiEndpoint")}
+                                        </InputLabel>
+                                        <Input
+                                            value={options.wopi_endpoint}
+                                            onChange={handleChange(
+                                                "wopi_endpoint"
+                                            )}
+                                            required
+                                        />
+                                        <FormHelperText id="component-helper-text">
+                                            {t("wopiEndpointDes")}
+                                        </FormHelperText>
+                                    </FormControl>
+                                </div>
+
+                                <div className={classes.form}>
+                                    <FormControl fullWidth>
+                                        <InputLabel htmlFor="component-helper">
+                                            {t("wopiSessionTtl")}
+                                        </InputLabel>
+                                        <Input
+                                            inputProps={{ min: 1, step: 1 }}
+                                            type={"number"}
+                                            value={options.wopi_session_timeout}
+                                            onChange={handleChange(
+                                                "wopi_session_timeout"
+                                            )}
+                                            required
+                                        />
+                                        <FormHelperText id="component-helper-text">
+                                            {t("wopiSessionTtlDes")}
+                                        </FormHelperText>
+                                    </FormControl>
+                                </div>
+                            </>
+                        )}
+                    </div>
+                </div>
+
+                <div className={classes.root}>
+                    <Typography variant="h6" gutterBottom>
+                        {t("thumbnails")}
+                    </Typography>
+                        <div className={classes.form}>
+                        <Alert severity="info">
+                            <Trans
+                                ns={"dashboard"}
+                                i18nKey={"settings.thumbnailDoc"}
+                                components={[
+                                    <Link
+                                        key={0}
+                                        target={"_blank"}
+                                        href={t("thumbnailDocLink")}
+                                    />,
+                                ]}
+                            />
+                        </Alert>
+                        </div>
+                    <Typography variant="subtitle1" gutterBottom>
+                        {t("thumbnailBasic")}
+                    </Typography>
+
+                    <div className={classes.formContainer}>
+                        <div className={classes.form}>
+                            <FormControl>
+                                <InputLabel htmlFor="component-helper">
+                                    {t("thumbWidth")}
+                                </InputLabel>
+                                <Input
+                                    type={"number"}
+                                    inputProps={{
+                                        min: 1,
+                                        step: 1,
+                                    }}
+                                    value={options.thumb_width}
+                                    onChange={handleChange("thumb_width")}
+                                    required
+                                />
+                            </FormControl>
+                        </div>
+
+                        <div className={classes.form}>
+                            <FormControl>
+                                <InputLabel htmlFor="component-helper">
+                                    {t("thumbHeight")}
+                                </InputLabel>
+                                <Input
+                                    type={"number"}
+                                    inputProps={{
+                                        min: 1,
+                                        step: 1,
+                                    }}
+                                    value={options.thumb_height}
+                                    onChange={handleChange("thumb_height")}
+                                    required
+                                />
+                            </FormControl>
+                        </div>
+
+                        <div className={classes.form}>
+                            <FormControl>
+                                <InputLabel htmlFor="component-helper">
+                                    {t("thumbSuffix")}
+                                </InputLabel>
+                                <Input
+                                    type={"text"}
+                                    value={options.thumb_file_suffix}
+                                    onChange={handleChange("thumb_file_suffix")}
+                                    required
+                                />
+                            </FormControl>
+                        </div>
+
+                        <div className={classes.form}>
+                            <FormControl>
+                                <InputLabel htmlFor="component-helper">
+                                    {t("thumbConcurrent")}
+                                </InputLabel>
+                                <Input
+                                    type={"number"}
+                                    inputProps={{
+                                        min: -1,
+                                        step: 1,
+                                    }}
+                                    value={options.thumb_max_task_count}
+                                    onChange={handleChange(
+                                        "thumb_max_task_count"
+                                    )}
+                                    required
+                                />
+                                <FormHelperText id="component-helper-text">
+                                    {t("thumbConcurrentDes")}
+                                </FormHelperText>
+                            </FormControl>
+                        </div>
+
+                        <div className={classes.form}>
+                            <FormControl>
+                                <InputLabel htmlFor="component-helper">
+                                    {t("thumbFormat")}
+                                </InputLabel>
+                                <Input
+                                    type={"test"}
+                                    value={options.thumb_encode_method}
+                                    onChange={handleChange(
+                                        "thumb_encode_method"
+                                    )}
+                                    required
+                                />
+                                <FormHelperText id="component-helper-text">
+                                    {t("thumbFormatDes")}
+                                </FormHelperText>
+                            </FormControl>
+                        </div>
+
+                        <div className={classes.form}>
+                            <FormControl>
+                                <InputLabel htmlFor="component-helper">
+                                    {t("thumbQuality")}
+                                </InputLabel>
+                                <Input
+                                    type={"number"}
+                                    inputProps={{
+                                        min: 1,
+                                        step: 1,
+                                        max: 100,
+                                    }}
+                                    value={options.thumb_encode_quality}
+                                    onChange={handleChange(
+                                        "thumb_encode_quality"
+                                    )}
+                                    required
+                                />
+                                <FormHelperText id="component-helper-text">
+                                    {t("thumbQualityDes")}
+                                </FormHelperText>
+                            </FormControl>
+                        </div>
+
+                        <div className={classes.form}>
+                            <FormControl fullWidth>
+                                {options.thumb_max_src_size !== "" && (
+                                    <SizeInput
+                                        value={options.thumb_max_src_size}
+                                        onChange={handleChange(
+                                            "thumb_max_src_size"
+                                        )}
+                                        required
+                                        min={0}
+                                        max={2147483647}
+                                        label={t("thumbMaxSize")}
+                                    />
+                                )}
+                                <FormHelperText id="component-helper-text">
+                                    {t("thumbMaxSizeDes")}
+                                </FormHelperText>
+                            </FormControl>
+                        </div>
+
+                        <div className={classes.form}>
+                            <FormControl fullWidth>
+                                <FormControlLabel
+                                    control={
+                                        <Switch
+                                            checked={
+                                                options.thumb_gc_after_gen ===
+                                                "1"
+                                            }
+                                            onChange={handleCheckChange(
+                                                "thumb_gc_after_gen"
+                                            )}
+                                        />
+                                    }
+                                    label={t("thumbGC")}
+                                />
+                            </FormControl>
+                        </div>
+                    </div>
+
+                    <Typography variant="subtitle1" gutterBottom>
+                        {t("generators")}
+                    </Typography>
+                    <div className={classes.formContainer}>
+                        <div className={classes.form}>
+                            <ThumbGenerators
+                                options={options}
+                                setOptions={setOptions}
+                            />
+                        </div>
+                    </div>
+
+                    <Typography variant="subtitle1" gutterBottom>
+                        {t("generatorProxy")}
+                    </Typography>
+                    <div className={classes.formContainer}>
+                        <div className={classes.form}>
+                            <Alert severity="info">
+                                {t("generatorProxyWarning")}
+                            </Alert>
+                        </div>
+
+                        <div className={classes.form}>
+                            <FormControl fullWidth>
+                                <FormControlLabel
+                                    control={
+                                        <Switch
+                                            checked={
+                                                options.thumb_proxy_enabled ===
+                                                "1"
+                                            }
+                                            onChange={handleCheckChange(
+                                                "thumb_proxy_enabled"
+                                            )}
+                                        />
+                                    }
+                                    label={t("enableThumbProxy")}
+                                />
+                            </FormControl>
+                        </div>
+                        {options.thumb_proxy_enabled === "1" && (
+                            <>
+                                <div className={classes.form}>
+                                    <PolicySelector
+                                        value={options.thumb_proxy_policy}
+                                        onChange={handleChange(
+                                            "thumb_proxy_policy"
+                                        )}
+                                        filter={(t) => t.Type !== "local"}
+                                        label={t("proxyPolicyList")}
+                                        helperText={t("proxyPolicyListDes")}
+                                    />
+                                </div>
+                            </>
+                        )}
+                    </div>
+                </div>
+
+                <div className={classes.root}>
+                    <Button
+                        disabled={loading}
+                        type={"submit"}
+                        variant={"contained"}
+                        color={"primary"}
+                    >
+                        {t("save")}
+                    </Button>
+                </div>
+            </form>
+        </div>
+    );
+}
diff --git a/src/component/Admin/Setting/Mail.js b/src/component/Admin/Setting/Mail.js
new file mode 100644
index 0000000..4b1159c
--- /dev/null
+++ b/src/component/Admin/Setting/Mail.js
@@ -0,0 +1,450 @@
+import React, { useCallback, useEffect, useState } from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import Typography from "@material-ui/core/Typography";
+import InputLabel from "@material-ui/core/InputLabel";
+import FormControl from "@material-ui/core/FormControl";
+import Input from "@material-ui/core/Input";
+import FormHelperText from "@material-ui/core/FormHelperText";
+import Button from "@material-ui/core/Button";
+import API from "../../../middleware/Api";
+import FormControlLabel from "@material-ui/core/FormControlLabel";
+import Switch from "@material-ui/core/Switch";
+import { useDispatch } from "react-redux";
+import Dialog from "@material-ui/core/Dialog";
+import DialogTitle from "@material-ui/core/DialogTitle";
+import DialogContent from "@material-ui/core/DialogContent";
+import DialogContentText from "@material-ui/core/DialogContentText";
+import TextField from "@material-ui/core/TextField";
+import DialogActions from "@material-ui/core/DialogActions";
+import { toggleSnackbar } from "../../../redux/explorer";
+import { useTranslation } from "react-i18next";
+
+const useStyles = makeStyles((theme) => ({
+    root: {
+        [theme.breakpoints.up("md")]: {
+            marginLeft: 100,
+        },
+        marginBottom: 40,
+    },
+    form: {
+        maxWidth: 400,
+        marginTop: 20,
+        marginBottom: 20,
+    },
+    formContainer: {
+        [theme.breakpoints.up("md")]: {
+            padding: "0px 24px 0 24px",
+        },
+    },
+    buttonMargin: {
+        marginLeft: 8,
+    },
+}));
+
+export default function Mail() {
+    const { t } = useTranslation("dashboard", { keyPrefix: "settings" });
+    const { t: tVas } = useTranslation("dashboard", { keyPrefix: "vas" });
+    const { t: tGlobal } = useTranslation("common");
+    const classes = useStyles();
+    const [loading, setLoading] = useState(false);
+    const [test, setTest] = useState(false);
+    const [tesInput, setTestInput] = useState("");
+    const [options, setOptions] = useState({
+        fromName: "",
+        fromAdress: "",
+        smtpHost: "",
+        smtpPort: "",
+        replyTo: "",
+        smtpUser: "",
+        smtpPass: "",
+        smtpEncryption: "",
+        mail_keepalive: "30",
+        over_used_template: "",
+        mail_activation_template: "",
+        mail_reset_pwd_template: "",
+    });
+
+    const handleChange = (name) => (event) => {
+        setOptions({
+            ...options,
+            [name]: event.target.value,
+        });
+    };
+
+    const handleCheckChange = (name) => (event) => {
+        let value = event.target.value;
+        if (event.target.checked !== undefined) {
+            value = event.target.checked ? "1" : "0";
+        }
+        setOptions({
+            ...options,
+            [name]: value,
+        });
+    };
+
+    const dispatch = useDispatch();
+    const ToggleSnackbar = useCallback(
+        (vertical, horizontal, msg, color) =>
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color)),
+        [dispatch]
+    );
+
+    useEffect(() => {
+        API.post("/admin/setting", {
+            keys: Object.keys(options),
+        })
+            .then((response) => {
+                setOptions(response.data);
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            });
+        // eslint-disable-next-line
+    }, []);
+
+    const sendTestMail = () => {
+        setLoading(true);
+        API.post("/admin/test/mail", {
+            to: tesInput,
+        })
+            .then(() => {
+                ToggleSnackbar("top", "right", t("testMailSent"), "success");
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            })
+            .then(() => {
+                setLoading(false);
+            });
+    };
+
+    const reload = () => {
+        API.get("/admin/reload/email")
+            // eslint-disable-next-line @typescript-eslint/no-empty-function
+            .then(() => {})
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            })
+            // eslint-disable-next-line @typescript-eslint/no-empty-function
+            .then(() => {});
+    };
+
+    const submit = (e) => {
+        e.preventDefault();
+        setLoading(true);
+        const option = [];
+        Object.keys(options).forEach((k) => {
+            option.push({
+                key: k,
+                value: options[k],
+            });
+        });
+        API.patch("/admin/setting", {
+            options: option,
+        })
+            .then(() => {
+                ToggleSnackbar("top", "right", t("saved"), "success");
+                reload();
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            })
+            .then(() => {
+                setLoading(false);
+            });
+    };
+
+    return (
+        <div>
+            <Dialog
+                open={test}
+                onClose={() => setTest(false)}
+                aria-labelledby="form-dialog-title"
+            >
+                <DialogTitle id="form-dialog-title">
+                    {t("testSMTPSettings")}
+                </DialogTitle>
+                <DialogContent>
+                    <DialogContentText>
+                        <Typography>{t("testSMTPTooltip")}</Typography>
+                    </DialogContentText>
+                    <TextField
+                        autoFocus
+                        margin="dense"
+                        id="name"
+                        label={t("recipient")}
+                        value={tesInput}
+                        onChange={(e) => setTestInput(e.target.value)}
+                        type="email"
+                        fullWidth
+                    />
+                </DialogContent>
+                <DialogActions>
+                    <Button onClick={() => setTest(false)} color="default">
+                        {tGlobal("cancel")}
+                    </Button>
+                    <Button
+                        onClick={() => sendTestMail()}
+                        disabled={loading}
+                        color="primary"
+                    >
+                        {t("send")}
+                    </Button>
+                </DialogActions>
+            </Dialog>
+
+            <form onSubmit={submit}>
+                <div className={classes.root}>
+                    <Typography variant="h6" gutterBottom>
+                        {t("smtp")}
+                    </Typography>
+
+                    <div className={classes.formContainer}>
+                        <div className={classes.form}>
+                            <FormControl fullWidth>
+                                <InputLabel htmlFor="component-helper">
+                                    {t("senderName")}
+                                </InputLabel>
+                                <Input
+                                    value={options.fromName}
+                                    onChange={handleChange("fromName")}
+                                    required
+                                />
+                                <FormHelperText id="component-helper-text">
+                                    {t("senderNameDes")}
+                                </FormHelperText>
+                            </FormControl>
+                        </div>
+
+                        <div className={classes.form}>
+                            <FormControl fullWidth>
+                                <InputLabel htmlFor="component-helper">
+                                    {t("senderAddress")}
+                                </InputLabel>
+                                <Input
+                                    type={"email"}
+                                    required
+                                    value={options.fromAdress}
+                                    onChange={handleChange("fromAdress")}
+                                />
+                                <FormHelperText id="component-helper-text">
+                                    {t("senderAddressDes")}
+                                </FormHelperText>
+                            </FormControl>
+                        </div>
+
+                        <div className={classes.form}>
+                            <FormControl fullWidth>
+                                <InputLabel htmlFor="component-helper">
+                                    {t("smtpServer")}
+                                </InputLabel>
+                                <Input
+                                    value={options.smtpHost}
+                                    onChange={handleChange("smtpHost")}
+                                    required
+                                />
+                                <FormHelperText id="component-helper-text">
+                                    {t("smtpServerDes")}
+                                </FormHelperText>
+                            </FormControl>
+                        </div>
+
+                        <div className={classes.form}>
+                            <FormControl fullWidth>
+                                <InputLabel htmlFor="component-helper">
+                                    {t("smtpPort")}
+                                </InputLabel>
+                                <Input
+                                    inputProps={{ min: 1, step: 1 }}
+                                    type={"number"}
+                                    value={options.smtpPort}
+                                    onChange={handleChange("smtpPort")}
+                                    required
+                                />
+                                <FormHelperText id="component-helper-text">
+                                    {t("smtpPortDes")}
+                                </FormHelperText>
+                            </FormControl>
+                        </div>
+
+                        <div className={classes.form}>
+                            <FormControl fullWidth>
+                                <InputLabel htmlFor="component-helper">
+                                    {t("smtpUsername")}
+                                </InputLabel>
+                                <Input
+                                    value={options.smtpUser}
+                                    onChange={handleChange("smtpUser")}
+                                    required
+                                />
+                                <FormHelperText id="component-helper-text">
+                                    {t("smtpUsernameDes")}
+                                </FormHelperText>
+                            </FormControl>
+                        </div>
+
+                        <div className={classes.form}>
+                            <FormControl fullWidth>
+                                <InputLabel htmlFor="component-helper">
+                                    {t("smtpPassword")}
+                                </InputLabel>
+                                <Input
+                                    type={"password"}
+                                    value={options.smtpPass}
+                                    onChange={handleChange("smtpPass")}
+                                    required
+                                />
+                                <FormHelperText id="component-helper-text">
+                                    {t("smtpPasswordDes")}
+                                </FormHelperText>
+                            </FormControl>
+                        </div>
+
+                        <div className={classes.form}>
+                            <FormControl fullWidth>
+                                <InputLabel htmlFor="component-helper">
+                                    {t("replyToAddress")}
+                                </InputLabel>
+                                <Input
+                                    value={options.replyTo}
+                                    onChange={handleChange("replyTo")}
+                                    required
+                                />
+                                <FormHelperText id="component-helper-text">
+                                    {t("replyToAddressDes")}
+                                </FormHelperText>
+                            </FormControl>
+                        </div>
+
+                        <div className={classes.form}>
+                            <FormControl fullWidth>
+                                <FormControlLabel
+                                    control={
+                                        <Switch
+                                            checked={
+                                                options.smtpEncryption === "1"
+                                            }
+                                            onChange={handleCheckChange(
+                                                "smtpEncryption"
+                                            )}
+                                        />
+                                    }
+                                    label={t("enforceSSL")}
+                                />
+                                <FormHelperText id="component-helper-text">
+                                    {t("enforceSSLDes")}
+                                </FormHelperText>
+                            </FormControl>
+                        </div>
+
+                        <div className={classes.form}>
+                            <FormControl fullWidth>
+                                <InputLabel htmlFor="component-helper">
+                                    {t("smtpTTL")}
+                                </InputLabel>
+                                <Input
+                                    inputProps={{ min: 1, step: 1 }}
+                                    type={"number"}
+                                    value={options.mail_keepalive}
+                                    onChange={handleChange("mail_keepalive")}
+                                    required
+                                />
+                                <FormHelperText id="component-helper-text">
+                                    {t("smtpTTLDes")}
+                                </FormHelperText>
+                            </FormControl>
+                        </div>
+                    </div>
+                </div>
+
+                <div className={classes.root}>
+                    <Typography variant="h6" gutterBottom>
+                        {t("emailTemplates")}
+                    </Typography>
+
+                    <div className={classes.formContainer}>
+                        <div className={classes.form}>
+                            <FormControl fullWidth>
+                                <InputLabel htmlFor="component-helper">
+                                    {t("activateNewUser")}
+                                </InputLabel>
+                                <Input
+                                    value={options.mail_activation_template}
+                                    onChange={handleChange(
+                                        "mail_activation_template"
+                                    )}
+                                    multiline
+                                    rowsMax="10"
+                                    required
+                                />
+                                <FormHelperText id="component-helper-text">
+                                    {t("activateNewUserDes")}
+                                </FormHelperText>
+                            </FormControl>
+                        </div>
+
+                        <div className={classes.form}>
+                            <FormControl fullWidth>
+                                <InputLabel htmlFor="component-helper">
+                                    {tVas("overuseReminder")}
+                                </InputLabel>
+                                <Input
+                                    value={options.over_used_template}
+                                    onChange={handleChange(
+                                        "over_used_template"
+                                    )}
+                                    multiline
+                                    rowsMax="10"
+                                    required
+                                />
+                                <FormHelperText id="component-helper-text">
+                                    {tVas("overuseReminderDes")}
+                                </FormHelperText>
+                            </FormControl>
+                        </div>
+
+                        <div className={classes.form}>
+                            <FormControl fullWidth>
+                                <InputLabel htmlFor="component-helper">
+                                    {t("resetPassword")}
+                                </InputLabel>
+                                <Input
+                                    value={options.mail_reset_pwd_template}
+                                    onChange={handleChange(
+                                        "mail_reset_pwd_template"
+                                    )}
+                                    multiline
+                                    rowsMax="10"
+                                    required
+                                />
+                                <FormHelperText id="component-helper-text">
+                                    {t("resetPasswordDes")}
+                                </FormHelperText>
+                            </FormControl>
+                        </div>
+                    </div>
+                </div>
+
+                <div className={classes.root}>
+                    <Button
+                        disabled={loading}
+                        type={"submit"}
+                        variant={"contained"}
+                        color={"primary"}
+                    >
+                        {t("save")}
+                    </Button>
+                    {"   "}
+                    <Button
+                        className={classes.buttonMargin}
+                        variant={"outlined"}
+                        color={"primary"}
+                        onClick={() => setTest(true)}
+                    >
+                        {t("sendTestEmail")}
+                    </Button>
+                </div>
+            </form>
+        </div>
+    );
+}
diff --git a/src/component/Admin/Setting/SiteInformation.js b/src/component/Admin/Setting/SiteInformation.js
new file mode 100644
index 0000000..dd56d50
--- /dev/null
+++ b/src/component/Admin/Setting/SiteInformation.js
@@ -0,0 +1,517 @@
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import Typography from "@material-ui/core/Typography";
+import InputLabel from "@material-ui/core/InputLabel";
+import FormControl from "@material-ui/core/FormControl";
+import Input from "@material-ui/core/Input";
+import FormHelperText from "@material-ui/core/FormHelperText";
+import Button from "@material-ui/core/Button";
+import API from "../../../middleware/Api";
+import { useDispatch } from "react-redux";
+import Select from "@material-ui/core/Select";
+import MenuItem from "@material-ui/core/MenuItem";
+import { toggleSnackbar } from "../../../redux/explorer";
+import { Trans, useTranslation } from "react-i18next";
+import InputAdornment from "@material-ui/core/InputAdornment";
+import { green } from "@material-ui/core/colors";
+import { Cancel, CheckCircle, Sync } from "@material-ui/icons";
+import IconButton from "@material-ui/core/IconButton";
+import { Tooltip } from "@material-ui/core";
+import Alert from "@material-ui/lab/Alert";
+import Link from "@material-ui/core/Link";
+import FormControlLabel from "@material-ui/core/FormControlLabel";
+import Switch from "@material-ui/core/Switch";
+
+const useStyles = makeStyles((theme) => ({
+    root: {
+        [theme.breakpoints.up("md")]: {
+            marginLeft: 100,
+        },
+        marginBottom: 40,
+    },
+    form: {
+        maxWidth: 400,
+        marginTop: 20,
+        marginBottom: 20,
+    },
+    formContainer: {
+        [theme.breakpoints.up("md")]: {
+            padding: "0px 24px 0 24px",
+        },
+    },
+}));
+
+export default function SiteInformation() {
+    const { t } = useTranslation("dashboard", { keyPrefix: "settings" });
+    const { t: tVas } = useTranslation("dashboard", { keyPrefix: "vas" });
+    const { t: tGlobal } = useTranslation("dashboard");
+    const classes = useStyles();
+    const [loading, setLoading] = useState(false);
+    const [options, setOptions] = useState({
+        siteURL: "",
+        siteName: "",
+        siteTitle: "",
+        siteKeywords: "",
+        siteDes: "",
+        siteScript: "",
+        siteNotice: "",
+        pwa_small_icon: "",
+        pwa_medium_icon: "",
+        pwa_large_icon: "",
+        pwa_display: "",
+        pwa_theme_color: "",
+        pwa_background_color: "",
+        vol_content: "",
+        show_app_promotion: "0",
+        app_feedback_link: "",
+        app_forum_link: "",
+    });
+
+    const vol = useMemo(() => {
+        if (options.vol_content) {
+            const volJson = atob(options.vol_content);
+            return JSON.parse(volJson);
+        }
+    }, [options]);
+
+    const handleChange = (name) => (event) => {
+        setOptions({
+            ...options,
+            [name]: event.target.value,
+        });
+    };
+
+    const handleOptionChange = (name) => (event) => {
+        let value = event.target.value;
+        if (event.target.checked !== undefined) {
+            value = event.target.checked ? "1" : "0";
+        }
+        setOptions({
+            ...options,
+            [name]: value,
+        });
+    };
+
+    const dispatch = useDispatch();
+    const ToggleSnackbar = useCallback(
+        (vertical, horizontal, msg, color) =>
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color)),
+        [dispatch]
+    );
+
+    const refresh = () =>
+        API.post("/admin/setting", {
+            keys: Object.keys(options),
+        })
+            .then((response) => {
+                setOptions(response.data);
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            });
+
+    useEffect(() => {
+        refresh();
+        // eslint-disable-next-line
+    }, []);
+
+    const submit = (e) => {
+        e.preventDefault();
+        setLoading(true);
+        const option = [];
+        Object.keys(options).forEach((k) => {
+            option.push({
+                key: k,
+                value: options[k],
+            });
+        });
+        API.patch("/admin/setting", {
+            options: option,
+        })
+            .then(() => {
+                ToggleSnackbar("top", "right", t("saved"), "success");
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            })
+            .then(() => {
+                setLoading(false);
+            });
+    };
+
+    const syncVol = () => {
+        setLoading(true);
+        API.get("/admin/vol/sync")
+            .then(() => {
+                refresh();
+                ToggleSnackbar("top", "right", tVas("volSynced"), "success");
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            })
+            .then(() => {
+                setLoading(false);
+            });
+    };
+
+    return (
+        <div>
+            <form onSubmit={submit}>
+                <div className={classes.root}>
+                    <Typography variant="h6" gutterBottom>
+                        {t("basicInformation")}
+                    </Typography>
+                    <div className={classes.formContainer}>
+                        <div className={classes.form}>
+                            <FormControl fullWidth>
+                                <InputLabel htmlFor="component-helper">
+                                    {t("mainTitle")}
+                                </InputLabel>
+                                <Input
+                                    value={options.siteName}
+                                    onChange={handleChange("siteName")}
+                                    required
+                                />
+                                <FormHelperText id="component-helper-text">
+                                    {t("mainTitleDes")}
+                                </FormHelperText>
+                            </FormControl>
+                        </div>
+                        <div className={classes.form}>
+                            <FormControl fullWidth>
+                                <InputLabel htmlFor="component-helper">
+                                    {t("subTitle")}
+                                </InputLabel>
+                                <Input
+                                    value={options.siteTitle}
+                                    onChange={handleChange("siteTitle")}
+                                />
+                                <FormHelperText id="component-helper-text">
+                                    {t("subTitleDes")}
+                                </FormHelperText>
+                            </FormControl>
+                        </div>
+                        <div className={classes.form}>
+                            <FormControl fullWidth>
+                                <InputLabel htmlFor="component-helper">
+                                    {t("siteKeywords")}
+                                </InputLabel>
+                                <Input
+                                    value={options.siteKeywords}
+                                    onChange={handleChange("siteKeywords")}
+                                />
+                                <FormHelperText id="component-helper-text">
+                                    {t("siteKeywordsDes")}
+                                </FormHelperText>
+                            </FormControl>
+                        </div>
+                        <div className={classes.form}>
+                            <FormControl fullWidth>
+                                <InputLabel htmlFor="component-helper">
+                                    {t("siteDescription")}
+                                </InputLabel>
+                                <Input
+                                    value={options.siteDes}
+                                    onChange={handleChange("siteDes")}
+                                />
+                                <FormHelperText id="component-helper-text">
+                                    {t("siteDescriptionDes")}
+                                </FormHelperText>
+                            </FormControl>
+                        </div>
+                        <div className={classes.form}>
+                            <FormControl fullWidth>
+                                <InputLabel htmlFor="component-helper">
+                                    {t("siteURL")}
+                                </InputLabel>
+                                <Input
+                                    type={"url"}
+                                    value={options.siteURL}
+                                    onChange={handleChange("siteURL")}
+                                    required
+                                />
+                                <FormHelperText id="component-helper-text">
+                                    {t("siteURLDes")}
+                                </FormHelperText>
+                            </FormControl>
+                        </div>
+                        <div className={classes.form}>
+                            <FormControl fullWidth>
+                                <InputLabel htmlFor="component-helper">
+                                    {t("customFooterHTML")}
+                                </InputLabel>
+                                <Input
+                                    multiline
+                                    value={options.siteScript}
+                                    onChange={handleChange("siteScript")}
+                                />
+                                <FormHelperText id="component-helper-text">
+                                    {t("customFooterHTMLDes")}
+                                </FormHelperText>
+                            </FormControl>
+                        </div>
+                        <div className={classes.form}>
+                            <FormControl fullWidth>
+                                <InputLabel htmlFor="component-helper">
+                                    {t("announcement")}
+                                </InputLabel>
+                                <Input
+                                    placeholder={t("supportHTML")}
+                                    multiline
+                                    value={options.siteNotice}
+                                    onChange={handleChange("siteNotice")}
+                                />
+                                <FormHelperText id="component-helper-text">
+                                    {t("announcementDes")}
+                                </FormHelperText>
+                            </FormControl>
+                        </div>
+                    </div>
+                </div>
+
+                <div className={classes.root}>
+                    <Typography variant="h6" gutterBottom>
+                        {tVas("mobileApp")}
+                    </Typography>
+                    <div className={classes.formContainer}>
+                        <div className={classes.form}>
+                            <Alert severity="info">
+                                <Typography variant="body2">
+                                    <Trans
+                                        ns={"dashboard"}
+                                        i18nKey={"vas.volPurchase"}
+                                        components={[
+                                            <Link
+                                                key={0}
+                                                href={
+                                                    "https://cloudreve.org/login"
+                                                }
+                                                target={"_blank"}
+                                            />,
+                                            <Link
+                                                key={1}
+                                                href={
+                                                    "https://cloudreve.org/ios"
+                                                }
+                                                target={"_blank"}
+                                            />,
+                                        ]}
+                                    />
+                                </Typography>
+                            </Alert>
+                        </div>
+                        <div className={classes.form}>
+                            <FormControl fullWidth>
+                                <InputLabel htmlFor="component-helper">
+                                    {tVas("iosVol")}
+                                </InputLabel>
+                                <Input
+                                    startAdornment={
+                                        <InputAdornment position="start">
+                                            {vol ? (
+                                                <CheckCircle
+                                                    style={{
+                                                        color: green[500],
+                                                    }}
+                                                />
+                                            ) : (
+                                                <Cancel color={"error"} />
+                                            )}
+                                        </InputAdornment>
+                                    }
+                                    endAdornment={
+                                        <InputAdornment position="end">
+                                            <Tooltip
+                                                title={tVas("syncLicense")}
+                                            >
+                                                <IconButton
+                                                    disabled={loading}
+                                                    onClick={() => syncVol()}
+                                                    aria-label="toggle password visibility"
+                                                >
+                                                    <Sync />
+                                                </IconButton>
+                                            </Tooltip>
+                                        </InputAdornment>
+                                    }
+                                    readOnly
+                                    value={
+                                        vol ? vol.domain : tGlobal("share.none")
+                                    }
+                                />
+                            </FormControl>
+                        </div>
+                        <div className={classes.form}>
+                            <FormControl fullWidth>
+                                <FormControlLabel
+                                    control={
+                                        <Switch
+                                            checked={
+                                                options.show_app_promotion ===
+                                                "1"
+                                            }
+                                            onChange={handleOptionChange(
+                                                "show_app_promotion"
+                                            )}
+                                        />
+                                    }
+                                    label={tVas("showAppPromotion")}
+                                />
+                                <FormHelperText id="component-helper-text">
+                                    {tVas("showAppPromotionDes")}
+                                </FormHelperText>
+                            </FormControl>
+                        </div>
+                        <div className={classes.form}>
+                            <FormControl fullWidth>
+                                <InputLabel htmlFor="component-helper">
+                                    {tVas("appFeedback")}
+                                </InputLabel>
+                                <Input
+                                    value={options.app_feedback_link}
+                                    onChange={handleChange("app_feedback_link")}
+                                />
+                                <FormHelperText id="component-helper-text">
+                                    {tVas("appLinkDes")}
+                                </FormHelperText>
+                            </FormControl>
+                        </div>
+                        <div className={classes.form}>
+                            <FormControl fullWidth>
+                                <InputLabel htmlFor="component-helper">
+                                    {tVas("appForum")}
+                                </InputLabel>
+                                <Input
+                                    value={options.app_forum_link}
+                                    onChange={handleChange("app_forum_link")}
+                                />
+                                <FormHelperText id="component-helper-text">
+                                    {tVas("appLinkDes")}
+                                </FormHelperText>
+                            </FormControl>
+                        </div>
+                    </div>
+                </div>
+
+                <div className={classes.root}>
+                    <Typography variant="h6" gutterBottom>
+                        {t("pwa")}
+                    </Typography>
+                    <div className={classes.formContainer}>
+                        <div className={classes.form}>
+                            <FormControl fullWidth>
+                                <InputLabel htmlFor="component-helper">
+                                    {t("smallIcon")}
+                                </InputLabel>
+                                <Input
+                                    value={options.pwa_small_icon}
+                                    onChange={handleChange("pwa_small_icon")}
+                                />
+                                <FormHelperText id="component-helper-text">
+                                    {t("smallIconDes")}
+                                </FormHelperText>
+                            </FormControl>
+                        </div>
+                        <div className={classes.form}>
+                            <FormControl fullWidth>
+                                <InputLabel htmlFor="component-helper">
+                                    {t("mediumIcon")}
+                                </InputLabel>
+                                <Input
+                                    value={options.pwa_medium_icon}
+                                    onChange={handleChange("pwa_medium_icon")}
+                                />
+                                <FormHelperText id="component-helper-text">
+                                    {t("mediumIconDes")}
+                                </FormHelperText>
+                            </FormControl>
+                        </div>
+                        <div className={classes.form}>
+                            <FormControl fullWidth>
+                                <InputLabel htmlFor="component-helper">
+                                    {t("largeIcon")}
+                                </InputLabel>
+                                <Input
+                                    value={options.pwa_large_icon}
+                                    onChange={handleChange("pwa_large_icon")}
+                                />
+                                <FormHelperText id="component-helper-text">
+                                    {t("largeIconDes")}
+                                </FormHelperText>
+                            </FormControl>
+                        </div>
+                        <div className={classes.form}>
+                            <FormControl>
+                                <InputLabel htmlFor="component-helper">
+                                    {t("displayMode")}
+                                </InputLabel>
+                                <Select
+                                    value={options.pwa_display}
+                                    onChange={handleChange("pwa_display")}
+                                >
+                                    <MenuItem value={"fullscreen"}>
+                                        fullscreen
+                                    </MenuItem>
+                                    <MenuItem value={"standalone"}>
+                                        standalone
+                                    </MenuItem>
+                                    <MenuItem value={"minimal-ui"}>
+                                        minimal-ui
+                                    </MenuItem>
+                                    <MenuItem value={"browser"}>
+                                        browser
+                                    </MenuItem>
+                                </Select>
+                                <FormHelperText id="component-helper-text">
+                                    {t("displayModeDes")}
+                                </FormHelperText>
+                            </FormControl>
+                        </div>
+                        <div className={classes.form}>
+                            <FormControl fullWidth>
+                                <InputLabel htmlFor="component-helper">
+                                    {t("themeColor")}
+                                </InputLabel>
+                                <Input
+                                    value={options.pwa_theme_color}
+                                    onChange={handleChange("pwa_theme_color")}
+                                />
+                                <FormHelperText id="component-helper-text">
+                                    {t("themeColorDes")}
+                                </FormHelperText>
+                            </FormControl>
+                        </div>
+                    </div>
+                    <div className={classes.formContainer}>
+                        <div className={classes.form}>
+                            <FormControl fullWidth>
+                                <InputLabel htmlFor="component-helper">
+                                    {t("backgroundColor")}
+                                </InputLabel>
+                                <Input
+                                    value={options.pwa_background_color}
+                                    onChange={handleChange(
+                                        "pwa_background_color"
+                                    )}
+                                />
+                                <FormHelperText id="component-helper-text">
+                                    {t("backgroundColorDes")}
+                                </FormHelperText>
+                            </FormControl>
+                        </div>
+                    </div>
+                </div>
+                <div className={classes.root}>
+                    <Button
+                        disabled={loading}
+                        type={"submit"}
+                        variant={"contained"}
+                        color={"primary"}
+                    >
+                        {t("save")}
+                    </Button>
+                </div>
+            </form>
+        </div>
+    );
+}
diff --git a/src/component/Admin/Setting/Theme.js b/src/component/Admin/Setting/Theme.js
new file mode 100644
index 0000000..4372dfe
--- /dev/null
+++ b/src/component/Admin/Setting/Theme.js
@@ -0,0 +1,465 @@
+import React, { useCallback, useEffect, useState } from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import Typography from "@material-ui/core/Typography";
+import Button from "@material-ui/core/Button";
+import API from "../../../middleware/Api";
+import { useDispatch } from "react-redux";
+import TableHead from "@material-ui/core/TableHead";
+import Table from "@material-ui/core/Table";
+import TableCell from "@material-ui/core/TableCell";
+import TableRow from "@material-ui/core/TableRow";
+import TableBody from "@material-ui/core/TableBody";
+import { Delete } from "@material-ui/icons";
+import IconButton from "@material-ui/core/IconButton";
+import TextField from "@material-ui/core/TextField";
+import CreateTheme from "../Dialogs/CreateTheme";
+import Alert from "@material-ui/lab/Alert";
+import Link from "@material-ui/core/Link";
+import FormControl from "@material-ui/core/FormControl";
+import InputLabel from "@material-ui/core/InputLabel";
+import Select from "@material-ui/core/Select";
+import MenuItem from "@material-ui/core/MenuItem";
+import FormHelperText from "@material-ui/core/FormHelperText";
+import { toggleSnackbar } from "../../../redux/explorer";
+import { Trans, useTranslation } from "react-i18next";
+
+const useStyles = makeStyles((theme) => ({
+    root: {
+        [theme.breakpoints.up("md")]: {
+            marginLeft: 100,
+        },
+        marginBottom: 40,
+    },
+    form: {
+        maxWidth: 500,
+        marginTop: 20,
+        marginBottom: 20,
+    },
+    formContainer: {
+        [theme.breakpoints.up("md")]: {
+            padding: "0px 24px 0 24px",
+        },
+    },
+    colorContainer: {
+        display: "flex",
+    },
+    colorDot: {
+        width: 20,
+        height: 20,
+        borderRadius: "50%",
+        marginLeft: 6,
+    },
+}));
+
+export default function Theme() {
+    const { t } = useTranslation("dashboard", { keyPrefix: "settings" });
+    const { t: tApp } = useTranslation();
+    const classes = useStyles();
+    const [loading, setLoading] = useState(false);
+    const [theme, setTheme] = useState({});
+    const [options, setOptions] = useState({
+        themes: "{}",
+        defaultTheme: "",
+        home_view_method: "icon",
+        share_view_method: "list",
+    });
+    const [themeConfig, setThemeConfig] = useState({});
+    const [themeConfigError, setThemeConfigError] = useState({});
+    const [create, setCreate] = useState(false);
+
+    const dispatch = useDispatch();
+    const ToggleSnackbar = useCallback(
+        (vertical, horizontal, msg, color) =>
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color)),
+        [dispatch]
+    );
+
+    const deleteTheme = (color) => {
+        if (color === options.defaultTheme) {
+            ToggleSnackbar(
+                "top",
+                "right",
+                t("cannotDeleteDefaultTheme"),
+                "warning"
+            );
+            return;
+        }
+        if (Object.keys(theme).length <= 1) {
+            ToggleSnackbar("top", "right", t("keepAtLeastOneTheme"), "warning");
+            return;
+        }
+        const themeCopy = { ...theme };
+        delete themeCopy[color];
+        const resStr = JSON.stringify(themeCopy);
+        setOptions({
+            ...options,
+            themes: resStr,
+        });
+    };
+
+    const addTheme = (newTheme) => {
+        setCreate(false);
+        if (theme[newTheme.palette.primary.main] !== undefined) {
+            ToggleSnackbar(
+                "top",
+                "right",
+                t("duplicatedThemePrimaryColor"),
+                "warning"
+            );
+            return;
+        }
+        const res = {
+            ...theme,
+            [newTheme.palette.primary.main]: newTheme,
+        };
+        const resStr = JSON.stringify(res);
+        setOptions({
+            ...options,
+            themes: resStr,
+        });
+    };
+
+    useEffect(() => {
+        const res = JSON.parse(options.themes);
+        const themeString = {};
+
+        Object.keys(res).map((k) => {
+            themeString[k] = JSON.stringify(res[k]);
+        });
+
+        setTheme(res);
+        setThemeConfig(themeString);
+    }, [options.themes]);
+
+    const handleChange = (name) => (event) => {
+        setOptions({
+            ...options,
+            [name]: event.target.value,
+        });
+    };
+
+    useEffect(() => {
+        API.post("/admin/setting", {
+            keys: Object.keys(options),
+        })
+            .then((response) => {
+                setOptions(response.data);
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            });
+        // eslint-disable-next-line
+    }, []);
+
+    const submit = (e) => {
+        e.preventDefault();
+        setLoading(true);
+        const option = [];
+        Object.keys(options).forEach((k) => {
+            option.push({
+                key: k,
+                value: options[k],
+            });
+        });
+        API.patch("/admin/setting", {
+            options: option,
+        })
+            .then(() => {
+                ToggleSnackbar("top", "right", t("saved"), "success");
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            })
+            .then(() => {
+                setLoading(false);
+            });
+    };
+
+    return (
+        <div>
+            <form onSubmit={submit}>
+                <div className={classes.root}>
+                    <Typography variant="h6" gutterBottom>
+                        {t("themes")}
+                    </Typography>
+                    <div className={classes.formContainer}>
+                        <div className={classes.form}>
+                            <Table aria-label="simple table">
+                                <TableHead>
+                                    <TableRow>
+                                        <TableCell>{t("colors")}</TableCell>
+                                        <TableCell>
+                                            {t("themeConfig")}
+                                        </TableCell>
+                                        <TableCell>{t("actions")}</TableCell>
+                                    </TableRow>
+                                </TableHead>
+                                <TableBody>
+                                    {Object.keys(theme).map((k) => (
+                                        <TableRow key={k}>
+                                            <TableCell
+                                                component="th"
+                                                scope="row"
+                                            >
+                                                <div
+                                                    className={
+                                                        classes.colorContainer
+                                                    }
+                                                >
+                                                    <div
+                                                        style={{
+                                                            backgroundColor:
+                                                                theme[k].palette
+                                                                    .primary
+                                                                    .main,
+                                                        }}
+                                                        className={
+                                                            classes.colorDot
+                                                        }
+                                                    />
+                                                    <div
+                                                        style={{
+                                                            backgroundColor:
+                                                                theme[k].palette
+                                                                    .secondary
+                                                                    .main,
+                                                        }}
+                                                        className={
+                                                            classes.colorDot
+                                                        }
+                                                    />
+                                                </div>
+                                            </TableCell>
+                                            <TableCell>
+                                                <TextField
+                                                    error={themeConfigError[k]}
+                                                    helperText={
+                                                        themeConfigError[k] &&
+                                                        t("wrongFormat")
+                                                    }
+                                                    fullWidth
+                                                    multiline
+                                                    onChange={(e) => {
+                                                        setThemeConfig({
+                                                            ...themeConfig,
+                                                            [k]: e.target.value,
+                                                        });
+                                                    }}
+                                                    onBlur={(e) => {
+                                                        try {
+                                                            const res = JSON.parse(
+                                                                e.target.value
+                                                            );
+                                                            if (
+                                                                !(
+                                                                    "palette" in
+                                                                    res
+                                                                ) ||
+                                                                !(
+                                                                    "primary" in
+                                                                    res.palette
+                                                                ) ||
+                                                                !(
+                                                                    "main" in
+                                                                    res.palette
+                                                                        .primary
+                                                                ) ||
+                                                                !(
+                                                                    "secondary" in
+                                                                    res.palette
+                                                                ) ||
+                                                                !(
+                                                                    "main" in
+                                                                    res.palette
+                                                                        .secondary
+                                                                )
+                                                            ) {
+                                                                throw "error";
+                                                            }
+                                                            setTheme({
+                                                                ...theme,
+                                                                [k]: res,
+                                                            });
+                                                        } catch (e) {
+                                                            setThemeConfigError(
+                                                                {
+                                                                    ...themeConfigError,
+                                                                    [k]: true,
+                                                                }
+                                                            );
+                                                            return;
+                                                        }
+                                                        setThemeConfigError({
+                                                            ...themeConfigError,
+                                                            [k]: false,
+                                                        });
+                                                    }}
+                                                    value={themeConfig[k]}
+                                                />
+                                            </TableCell>
+                                            <TableCell>
+                                                <IconButton
+                                                    onClick={() =>
+                                                        deleteTheme(k)
+                                                    }
+                                                >
+                                                    <Delete />
+                                                </IconButton>
+                                            </TableCell>
+                                        </TableRow>
+                                    ))}
+                                </TableBody>
+                            </Table>
+                            <div>
+                                <Button
+                                    variant="outlined"
+                                    color="primary"
+                                    style={{ marginTop: 8 }}
+                                    onClick={() => setCreate(true)}
+                                >
+                                    {t("createNewTheme")}
+                                </Button>
+                            </div>
+                            <Alert severity="info" style={{ marginTop: 8 }}>
+                                <Typography variant="body2">
+                                    <Trans
+                                        i18nKey={"settings.themeConfigDes"}
+                                        ns={"dashboard"}
+                                        components={[
+                                            <Link
+                                                key={0}
+                                                href={t("themeConfigDoc")}
+                                                target={"_blank"}
+                                            />,
+                                        ]}
+                                    />
+                                </Typography>
+                            </Alert>
+                        </div>
+
+                        <div className={classes.form}>
+                            <FormControl>
+                                <InputLabel htmlFor="component-helper">
+                                    {t("defaultTheme")}
+                                </InputLabel>
+                                <Select
+                                    value={options.defaultTheme}
+                                    onChange={handleChange("defaultTheme")}
+                                >
+                                    {Object.keys(theme).map((k) => (
+                                        <MenuItem key={k} value={k}>
+                                            <div
+                                                className={
+                                                    classes.colorContainer
+                                                }
+                                            >
+                                                <div
+                                                    style={{
+                                                        backgroundColor:
+                                                            theme[k].palette
+                                                                .primary.main,
+                                                    }}
+                                                    className={classes.colorDot}
+                                                />
+                                                <div
+                                                    style={{
+                                                        backgroundColor:
+                                                            theme[k].palette
+                                                                .secondary.main,
+                                                    }}
+                                                    className={classes.colorDot}
+                                                />
+                                            </div>
+                                        </MenuItem>
+                                    ))}
+                                </Select>
+                                <FormHelperText id="component-helper-text">
+                                    {t("defaultThemeDes")}
+                                </FormHelperText>
+                            </FormControl>
+                        </div>
+                    </div>
+                </div>
+
+                <div className={classes.root}>
+                    <Typography variant="h6" gutterBottom>
+                        {t("appearance")}
+                    </Typography>
+
+                    <div className={classes.formContainer}>
+                        <div className={classes.form}>
+                            <FormControl>
+                                <InputLabel htmlFor="component-helper">
+                                    {t("personalFileListView")}
+                                </InputLabel>
+                                <Select
+                                    value={options.home_view_method}
+                                    onChange={handleChange("home_view_method")}
+                                    required
+                                >
+                                    <MenuItem value={"icon"}>
+                                        {tApp("fileManager.gridViewLarge")}
+                                    </MenuItem>
+                                    <MenuItem value={"smallIcon"}>
+                                        {tApp("fileManager.gridViewSmall")}
+                                    </MenuItem>
+                                    <MenuItem value={"list"}>
+                                        {tApp("fileManager.listView")}
+                                    </MenuItem>
+                                </Select>
+                                <FormHelperText id="component-helper-text">
+                                    {t("personalFileListViewDes")}
+                                </FormHelperText>
+                            </FormControl>
+                        </div>
+                    </div>
+
+                    <div className={classes.formContainer}>
+                        <div className={classes.form}>
+                            <FormControl>
+                                <InputLabel htmlFor="component-helper">
+                                    {t("sharedFileListView")}
+                                </InputLabel>
+                                <Select
+                                    value={options.share_view_method}
+                                    onChange={handleChange("share_view_method")}
+                                    required
+                                >
+                                    <MenuItem value={"icon"}>
+                                        {tApp("fileManager.gridViewLarge")}
+                                    </MenuItem>
+                                    <MenuItem value={"smallIcon"}>
+                                        {tApp("fileManager.gridViewSmall")}
+                                    </MenuItem>
+                                    <MenuItem value={"list"}>
+                                        {tApp("fileManager.listView")}
+                                    </MenuItem>
+                                </Select>
+                                <FormHelperText id="component-helper-text">
+                                    {t("sharedFileListViewDes")}
+                                </FormHelperText>
+                            </FormControl>
+                        </div>
+                    </div>
+                </div>
+
+                <div className={classes.root}>
+                    <Button
+                        disabled={loading}
+                        type={"submit"}
+                        variant={"contained"}
+                        color={"primary"}
+                    >
+                        {t("save")}
+                    </Button>
+                </div>
+            </form>
+
+            <CreateTheme
+                onSubmit={addTheme}
+                open={create}
+                onClose={() => setCreate(false)}
+            />
+        </div>
+    );
+}
diff --git a/src/component/Admin/Setting/ThumbGenerators.js b/src/component/Admin/Setting/ThumbGenerators.js
new file mode 100644
index 0000000..d0a72a0
--- /dev/null
+++ b/src/component/Admin/Setting/ThumbGenerators.js
@@ -0,0 +1,248 @@
+import React, { useCallback, useState } from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import Accordion from "@material-ui/core/Accordion";
+import AccordionSummary from "@material-ui/core/AccordionSummary";
+import AccordionDetails from "@material-ui/core/AccordionDetails";
+import Checkbox from "@material-ui/core/Checkbox";
+import FormControlLabel from "@material-ui/core/FormControlLabel";
+import Typography from "@material-ui/core/Typography";
+import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
+import { useTranslation } from "react-i18next";
+import { useDispatch } from "react-redux";
+import { toggleSnackbar } from "../../../redux/explorer";
+import FormHelperText from "@material-ui/core/FormHelperText";
+import FormControl from "@material-ui/core/FormControl";
+import { Button, TextField } from "@material-ui/core";
+import InputAdornment from "@material-ui/core/InputAdornment";
+import API from "../../../middleware/Api";
+
+const useStyles = makeStyles((theme) => ({
+    root: {
+        width: "100%",
+    },
+    secondaryHeading: {
+        fontSize: theme.typography.pxToRem(15),
+        color: theme.palette.text.secondary,
+    },
+    column: {
+        flexBasis: "33.33%",
+    },
+    details: {
+        display: "block",
+    },
+}));
+
+const generators = [
+    {
+        name: "policyBuiltin",
+        des: "policyBuiltinDes",
+        readOnly: true,
+    },
+    {
+        name: "libreOffice",
+        des: "libreOfficeDes",
+        enableFlag: "thumb_libreoffice_enabled",
+        executableSetting: "thumb_libreoffice_path",
+        inputs: [
+            {
+                name: "thumb_libreoffice_exts",
+                label: "generatorExts",
+                des: "generatorExtsDes",
+            },
+        ],
+    },
+    {
+        name: "vips",
+        des: "vipsDes",
+        enableFlag: "thumb_vips_enabled",
+        executableSetting: "thumb_vips_path",
+        inputs: [
+            {
+                name: "thumb_vips_exts",
+                label: "generatorExts",
+                des: "generatorExtsDes",
+            },
+        ],
+    },
+    {
+        name: "ffmpeg",
+        des: "ffmpegDes",
+        enableFlag: "thumb_ffmpeg_enabled",
+        executableSetting: "thumb_ffmpeg_path",
+        inputs: [
+            {
+                name: "thumb_ffmpeg_exts",
+                label: "generatorExts",
+                des: "generatorExtsDes",
+            },
+            {
+                name: "thumb_ffmpeg_seek",
+                label: "ffmpegSeek",
+                des: "ffmpegSeekDes",
+                required: true,
+            },
+        ],
+    },
+    {
+        name: "cloudreveBuiltin",
+        des: "cloudreveBuiltinDes",
+        enableFlag: "thumb_builtin_enabled",
+    },
+];
+
+export default function ThumbGenerators({ options, setOptions }) {
+    const classes = useStyles();
+    const { t } = useTranslation("dashboard", { keyPrefix: "settings" });
+    const [loading, setLoading] = useState(false);
+    const dispatch = useDispatch();
+    const ToggleSnackbar = useCallback(
+        (vertical, horizontal, msg, color) =>
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color)),
+        [dispatch]
+    );
+
+    const handleChange = (name) => (event) => {
+        setOptions({
+            ...options,
+            [name]: event.target.value,
+        });
+    };
+
+    const testExecutable = (name, executable) => {
+        setLoading(true);
+        API.post("/admin/test/thumb", {
+            name,
+            executable,
+        })
+            .then((response) => {
+                ToggleSnackbar(
+                    "top",
+                    "right",
+                    t("executableTestSuccess", { version: response.data }),
+                    "success"
+                );
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            })
+            .then(() => {
+                setLoading(false);
+            });
+    };
+
+    const handleEnableChange = (name) => (event) => {
+        const newOpts = {
+            ...options,
+            [name]: event.target.checked ? "1" : "0",
+        };
+        setOptions(newOpts);
+
+        if (
+            newOpts["thumb_libreoffice_enabled"] === "1" &&
+            newOpts["thumb_builtin_enabled"] === "0" &&
+            newOpts["thumb_vips_enabled"] === "0"
+        ) {
+            ToggleSnackbar(
+                "top",
+                "center",
+                t("thumbDependencyWarning"),
+                "warning"
+            );
+        }
+    };
+
+    return (
+        <div className={classes.root}>
+            {generators.map((generator) => (
+                <Accordion key={generator.name}>
+                    <AccordionSummary
+                        expandIcon={<ExpandMoreIcon />}
+                        aria-label="Expand"
+                        aria-controls="additional-actions1-content"
+                        id="additional-actions1-header"
+                    >
+                        <FormControlLabel
+                            aria-label="Acknowledge"
+                            onClick={(event) => event.stopPropagation()}
+                            onFocus={(event) => event.stopPropagation()}
+                            control={
+                                <Checkbox
+                                    checked={
+                                        generator.readOnly ||
+                                        options[generator.enableFlag] === "1"
+                                    }
+                                    onChange={handleEnableChange(
+                                        generator.enableFlag
+                                    )}
+                                />
+                            }
+                            label={t(generator.name)}
+                            disabled={generator.readOnly}
+                        />
+                    </AccordionSummary>
+                    <AccordionDetails className={classes.details}>
+                        <Typography color="textSecondary">
+                            {t(generator.des)}
+                        </Typography>
+                        {generator.executableSetting && (
+                            <FormControl margin="normal" fullWidth>
+                                <TextField
+                                    label={t("executable")}
+                                    variant="outlined"
+                                    value={options[generator.executableSetting]}
+                                    onChange={handleChange(
+                                        generator.executableSetting
+                                    )}
+                                    InputProps={{
+                                        endAdornment: (
+                                            <InputAdornment position="end">
+                                                <Button
+                                                    disabled={loading}
+                                                    onClick={() =>
+                                                        testExecutable(
+                                                            generator.name,
+                                                            options[
+                                                                generator
+                                                                    .executableSetting
+                                                            ]
+                                                        )
+                                                    }
+                                                    color="primary"
+                                                >
+                                                    {t("executableTest")}
+                                                </Button>
+                                            </InputAdornment>
+                                        ),
+                                    }}
+                                    required
+                                />
+                                <FormHelperText id="component-helper-text">
+                                    {t("executableDes")}
+                                </FormHelperText>
+                            </FormControl>
+                        )}
+                        {generator.inputs &&
+                            generator.inputs.map((input) => (
+                                <FormControl
+                                    key={input.name}
+                                    margin="normal"
+                                    fullWidth
+                                >
+                                    <TextField
+                                        label={t(input.label)}
+                                        variant="outlined"
+                                        value={options[input.name]}
+                                        onChange={handleChange(input.name)}
+                                        required={!!input.required}
+                                    />
+                                    <FormHelperText id="component-helper-text">
+                                        {t(input.des)}
+                                    </FormHelperText>
+                                </FormControl>
+                            ))}
+                    </AccordionDetails>
+                </Accordion>
+            ))}
+        </div>
+    );
+}
diff --git a/src/component/Admin/Setting/UploadDownload.js b/src/component/Admin/Setting/UploadDownload.js
new file mode 100644
index 0000000..c8d5af9
--- /dev/null
+++ b/src/component/Admin/Setting/UploadDownload.js
@@ -0,0 +1,407 @@
+import React, { useCallback, useEffect, useState } from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import Typography from "@material-ui/core/Typography";
+import InputLabel from "@material-ui/core/InputLabel";
+import FormControl from "@material-ui/core/FormControl";
+import Input from "@material-ui/core/Input";
+import FormHelperText from "@material-ui/core/FormHelperText";
+import Button from "@material-ui/core/Button";
+import API from "../../../middleware/Api";
+import { useDispatch } from "react-redux";
+import SizeInput from "../Common/SizeInput";
+import FormControlLabel from "@material-ui/core/FormControlLabel";
+import Switch from "@material-ui/core/Switch";
+import { toggleSnackbar } from "../../../redux/explorer";
+import { useTranslation } from "react-i18next";
+
+const useStyles = makeStyles((theme) => ({
+    root: {
+        [theme.breakpoints.up("md")]: {
+            marginLeft: 100,
+        },
+        marginBottom: 40,
+    },
+    form: {
+        maxWidth: 400,
+        marginTop: 20,
+        marginBottom: 20,
+    },
+    formContainer: {
+        [theme.breakpoints.up("md")]: {
+            padding: "0px 24px 0 24px",
+        },
+    },
+}));
+
+export default function UploadDownload() {
+    const { t } = useTranslation("dashboard", { keyPrefix: "settings" });
+    const classes = useStyles();
+    const [loading, setLoading] = useState(false);
+    const [options, setOptions] = useState({
+        max_worker_num: "1",
+        max_parallel_transfer: "1",
+        temp_path: "",
+        chunk_retries: "0",
+        archive_timeout: "0",
+        download_timeout: "0",
+        preview_timeout: "0",
+        doc_preview_timeout: "0",
+        upload_credential_timeout: "0",
+        upload_session_timeout: "0",
+        slave_api_timeout: "0",
+        onedrive_monitor_timeout: "0",
+        share_download_session_timeout: "0",
+        onedrive_callback_check: "0",
+        reset_after_upload_failed: "0",
+        onedrive_source_timeout: "0",
+        slave_node_retry: "0",
+        slave_ping_interval: "0",
+        slave_recover_interval: "0",
+        slave_transfer_timeout: "0",
+        use_temp_chunk_buffer: "1",
+        public_resource_maxage: "0",
+    });
+
+    const handleCheckChange = (name) => (event) => {
+        const value = event.target.checked ? "1" : "0";
+        setOptions({
+            ...options,
+            [name]: value,
+        });
+    };
+
+    const handleChange = (name) => (event) => {
+        setOptions({
+            ...options,
+            [name]: event.target.value,
+        });
+    };
+
+    const dispatch = useDispatch();
+    const ToggleSnackbar = useCallback(
+        (vertical, horizontal, msg, color) =>
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color)),
+        [dispatch]
+    );
+
+    useEffect(() => {
+        API.post("/admin/setting", {
+            keys: Object.keys(options),
+        })
+            .then((response) => {
+                setOptions(response.data);
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            });
+        // eslint-disable-next-line
+    }, []);
+
+    const submit = (e) => {
+        e.preventDefault();
+        setLoading(true);
+        const option = [];
+        Object.keys(options).forEach((k) => {
+            option.push({
+                key: k,
+                value: options[k],
+            });
+        });
+        API.patch("/admin/setting", {
+            options: option,
+        })
+            .then(() => {
+                ToggleSnackbar("top", "right", t("saved"), "success");
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            })
+            .then(() => {
+                setLoading(false);
+            });
+    };
+
+    return (
+        <div>
+            <form onSubmit={submit}>
+                <div className={classes.root}>
+                    <Typography variant="h6" gutterBottom>
+                        {t("transportation")}
+                    </Typography>
+                    <div className={classes.formContainer}>
+                        <div className={classes.form}>
+                            <FormControl>
+                                <InputLabel htmlFor="component-helper">
+                                    {t("workerNum")}
+                                </InputLabel>
+                                <Input
+                                    type={"number"}
+                                    inputProps={{
+                                        min: 1,
+                                        step: 1,
+                                    }}
+                                    value={options.max_worker_num}
+                                    onChange={handleChange("max_worker_num")}
+                                    required
+                                />
+                                <FormHelperText id="component-helper-text">
+                                    {t("workerNumDes")}
+                                </FormHelperText>
+                            </FormControl>
+                        </div>
+
+                        <div className={classes.form}>
+                            <FormControl>
+                                <InputLabel htmlFor="component-helper">
+                                    {t("transitParallelNum")}
+                                </InputLabel>
+                                <Input
+                                    type={"number"}
+                                    inputProps={{
+                                        min: 1,
+                                        step: 1,
+                                    }}
+                                    value={options.max_parallel_transfer}
+                                    onChange={handleChange(
+                                        "max_parallel_transfer"
+                                    )}
+                                    required
+                                />
+                                <FormHelperText id="component-helper-text">
+                                    {t("transitParallelNumDes")}
+                                </FormHelperText>
+                            </FormControl>
+                        </div>
+
+                        <div className={classes.form}>
+                            <FormControl fullWidth>
+                                <InputLabel htmlFor="component-helper">
+                                    {t("tempFolder")}
+                                </InputLabel>
+                                <Input
+                                    value={options.temp_path}
+                                    onChange={handleChange("temp_path")}
+                                    required
+                                />
+                                <FormHelperText id="component-helper-text">
+                                    {t("tempFolderDes")}
+                                </FormHelperText>
+                            </FormControl>
+                        </div>
+
+                        <div className={classes.form}>
+                            <FormControl>
+                                <InputLabel htmlFor="component-helper">
+                                    {t("failedChunkRetry")}
+                                </InputLabel>
+                                <Input
+                                    type={"number"}
+                                    inputProps={{
+                                        min: 0,
+                                        step: 1,
+                                    }}
+                                    value={options.chunk_retries}
+                                    onChange={handleChange("chunk_retries")}
+                                    required
+                                />
+                                <FormHelperText id="component-helper-text">
+                                    {t("failedChunkRetryDes")}
+                                </FormHelperText>
+                            </FormControl>
+                        </div>
+
+                        <div className={classes.form}>
+                            <FormControl fullWidth>
+                                <FormControlLabel
+                                    control={
+                                        <Switch
+                                            checked={
+                                                options.use_temp_chunk_buffer ===
+                                                "1"
+                                            }
+                                            onChange={handleCheckChange(
+                                                "use_temp_chunk_buffer"
+                                            )}
+                                        />
+                                    }
+                                    label={t("cacheChunks")}
+                                />
+                                <FormHelperText id="component-helper-text">
+                                    {t("cacheChunksDes")}
+                                </FormHelperText>
+                            </FormControl>
+                        </div>
+
+                        <div className={classes.form}>
+                            <FormControl fullWidth>
+                                <FormControlLabel
+                                    control={
+                                        <Switch
+                                            checked={
+                                                options.reset_after_upload_failed ===
+                                                "1"
+                                            }
+                                            onChange={handleCheckChange(
+                                                "reset_after_upload_failed"
+                                            )}
+                                        />
+                                    }
+                                    label={t("resetConnection")}
+                                />
+                                <FormHelperText id="component-helper-text">
+                                    {t("resetConnectionDes")}
+                                </FormHelperText>
+                            </FormControl>
+                        </div>
+                    </div>
+                </div>
+
+                <div className={classes.root}>
+                    <Typography variant="h6" gutterBottom>
+                        {t("expirationDuration")}
+                    </Typography>
+                    <div className={classes.formContainer}>
+                        {[
+                            {
+                                name: "batchDownload",
+                                field: "archive_timeout",
+                            },
+                            {
+                                name: "downloadSession",
+                                field: "download_timeout",
+                            },
+                            {
+                                name: "previewURL",
+                                field: "preview_timeout",
+                            },
+                            {
+                                name: "docPreviewURL",
+                                field: "doc_preview_timeout",
+                            },
+                            {
+                                name: "staticResourceCache",
+                                field: "public_resource_maxage",
+                                des: "staticResourceCacheDes",
+                            },
+                            {
+                                name: "uploadSession",
+                                field: "upload_session_timeout",
+                                des: "uploadSessionDes",
+                            },
+                            {
+                                name: "downloadSessionForShared",
+                                field: "share_download_session_timeout",
+                                des: "downloadSessionForSharedDes",
+                            },
+                            {
+                                name: "onedriveMonitorInterval",
+                                field: "onedrive_monitor_timeout",
+                                des: "onedriveMonitorIntervalDes",
+                            },
+                            {
+                                name: "onedriveCallbackTolerance",
+                                field: "onedrive_callback_check",
+                                des: "onedriveCallbackToleranceDes",
+                            },
+                            {
+                                name: "onedriveDownloadURLCache",
+                                field: "onedrive_source_timeout",
+                                des: "onedriveDownloadURLCacheDes",
+                            },
+                        ].map((input) => (
+                            <div key={input.name} className={classes.form}>
+                                <FormControl>
+                                    <InputLabel htmlFor="component-helper">
+                                        {t(input.name)}
+                                    </InputLabel>
+                                    <Input
+                                        type={"number"}
+                                        inputProps={{
+                                            min: 1,
+                                            step: 1,
+                                        }}
+                                        value={options[input.field]}
+                                        onChange={handleChange(input.field)}
+                                        required
+                                    />
+                                    {input.des && (
+                                        <FormHelperText id="component-helper-text">
+                                            {t(input.des)}
+                                        </FormHelperText>
+                                    )}
+                                </FormControl>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+
+                <div className={classes.root}>
+                    <Typography variant="h6" gutterBottom>
+                        {t("nodesCommunication")}
+                    </Typography>
+                    <div className={classes.formContainer}>
+                        {[
+                            {
+                                name: "slaveAPIExpiration",
+                                field: "slave_api_timeout",
+                                des: "slaveAPIExpirationDes",
+                            },
+                            {
+                                name: "heartbeatInterval",
+                                field: "slave_ping_interval",
+                                des: "heartbeatIntervalDes",
+                            },
+                            {
+                                name: "heartbeatFailThreshold",
+                                field: "slave_node_retry",
+                                des: "heartbeatFailThresholdDes",
+                            },
+                            {
+                                name: "heartbeatRecoverModeInterval",
+                                field: "slave_recover_interval",
+                                des: "heartbeatRecoverModeIntervalDes",
+                            },
+                            {
+                                name: "slaveTransitExpiration",
+                                field: "slave_transfer_timeout",
+                                des: "slaveTransitExpirationDes",
+                            },
+                        ].map((input) => (
+                            <div key={input.name} className={classes.form}>
+                                <FormControl>
+                                    <InputLabel htmlFor="component-helper">
+                                        {t(input.name)}
+                                    </InputLabel>
+                                    <Input
+                                        type={"number"}
+                                        inputProps={{
+                                            min: 1,
+                                            step: 1,
+                                        }}
+                                        value={options[input.field]}
+                                        onChange={handleChange(input.field)}
+                                        required
+                                    />
+                                    <FormHelperText id="component-helper-text">
+                                        {t(input.des)}
+                                    </FormHelperText>
+                                </FormControl>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+
+                <div className={classes.root}>
+                    <Button
+                        disabled={loading}
+                        type={"submit"}
+                        variant={"contained"}
+                        color={"primary"}
+                    >
+                        {t("save")}
+                    </Button>
+                </div>
+            </form>
+        </div>
+    );
+}
diff --git a/src/component/Admin/Setting/VAS.js b/src/component/Admin/Setting/VAS.js
new file mode 100644
index 0000000..15f78ff
--- /dev/null
+++ b/src/component/Admin/Setting/VAS.js
@@ -0,0 +1,1222 @@
+import React, { useCallback, useEffect, useState } from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import Typography from "@material-ui/core/Typography";
+import InputLabel from "@material-ui/core/InputLabel";
+import FormControl from "@material-ui/core/FormControl";
+import Input from "@material-ui/core/Input";
+import FormHelperText from "@material-ui/core/FormHelperText";
+import Button from "@material-ui/core/Button";
+import API from "../../../middleware/Api";
+import { useDispatch } from "react-redux";
+import Tab from "@material-ui/core/Tab";
+import Paper from "@material-ui/core/Paper";
+import Tabs from "@material-ui/core/Tabs";
+import FormControlLabel from "@material-ui/core/FormControlLabel";
+import Switch from "@material-ui/core/Switch";
+import Link from "@material-ui/core/Link";
+import Alert from "@material-ui/lab/Alert";
+import AddPack from "../Dialogs/AddPack";
+import TableHead from "@material-ui/core/TableHead";
+import Table from "@material-ui/core/Table";
+import TableRow from "@material-ui/core/TableRow";
+import TableCell from "@material-ui/core/TableCell";
+import TableBody from "@material-ui/core/TableBody";
+import IconButton from "@material-ui/core/IconButton";
+import { Delete, Edit } from "@material-ui/icons";
+import AddGroup from "../Dialogs/AddGroupk";
+import AddRedeem from "../Dialogs/AddRedeem";
+import AlertDialog from "../Dialogs/Alert";
+import Box from "@material-ui/core/Box";
+import Pagination from "@material-ui/lab/Pagination";
+import { toggleSnackbar } from "../../../redux/explorer";
+import { Trans, useTranslation } from "react-i18next";
+import { sizeToString } from "../../../utils";
+
+const useStyles = makeStyles((theme) => ({
+    root: {
+        [theme.breakpoints.up("md")]: {
+            marginLeft: 100,
+        },
+        marginBottom: 40,
+    },
+    form: {
+        maxWidth: 400,
+        marginTop: 20,
+        marginBottom: 20,
+    },
+    formContainer: {
+        [theme.breakpoints.up("md")]: {
+            padding: "0px 24px 0 24px",
+        },
+    },
+    tabForm: {
+        marginTop: 20,
+    },
+    content: {
+        padding: theme.spacing(2),
+    },
+    tableContainer: {
+        overflowX: "auto",
+        marginTop: theme.spacing(2),
+    },
+    navigator: {
+        marginTop: 10,
+    },
+}));
+
+const product = {};
+
+export default function VAS() {
+    const { t: tSetting } = useTranslation("dashboard", {
+        keyPrefix: "settings",
+    });
+    const { t } = useTranslation("dashboard", { keyPrefix: "vas" });
+    const { t: tApp } = useTranslation();
+    const classes = useStyles();
+    const [loading, setLoading] = useState(false);
+    const [tab, setTab] = useState(0);
+    const [options, setOptions] = useState({
+        alipay_enabled: "0",
+        payjs_enabled: "0",
+        wechat_enabled: "0",
+        custom_payment_enabled: "0",
+        payjs_id: "",
+        appid: "",
+        appkey: "",
+        shopid: "",
+        payjs_secret: "",
+        wechat_appid: "",
+        wechat_mchid: "",
+        wechat_serial_no: "",
+        wechat_api_key: "",
+        wechat_pk_content: "",
+        score_enabled: "0",
+        share_score_rate: "0",
+        score_price: "0",
+        ban_time: "0",
+        group_sell_data: "[]",
+        pack_data: "[]",
+        report_enabled: "0",
+        custom_payment_endpoint: "",
+        custom_payment_secret: "",
+        custom_payment_name: "",
+    });
+    const [groups, setGroups] = useState([]);
+    const [packs, setPacks] = useState([]);
+    const [addPack, setAddPack] = useState(false);
+    const [addGroup, setAddGroup] = useState(false);
+    const [packEdit, setPackEdit] = useState(null);
+    const [groupEdit, setGroupEdit] = useState(null);
+    const [addRedeem, setAddRedeem] = useState(false);
+    const [redeems, setRedeems] = useState([]);
+    const [redeemsRes, setRedeemsRes] = useState([]);
+    const [redeemsResOpen, setRedeemsResOpen] = useState(false);
+    const [page, setPage] = useState(1);
+    const [pageSize] = useState(20);
+    const [total, setTotal] = useState(0);
+
+    const dispatch = useDispatch();
+    const ToggleSnackbar = useCallback(
+        (vertical, horizontal, msg, color) =>
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color)),
+        [dispatch]
+    );
+
+    const loadRedeemList = () => {
+        API.post("/admin/redeem/list", {
+            page: page,
+            page_size: pageSize,
+            order_by: "id desc",
+        })
+            .then((response) => {
+                setRedeems(response.data.items);
+                setTotal(response.data.total);
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            });
+    };
+
+    useEffect(() => {
+        const res = JSON.parse(options.group_sell_data);
+        res.forEach((k) => {
+            product[k.id] = k.name;
+        });
+        setGroups(res);
+    }, [options.group_sell_data]);
+
+    useEffect(() => {
+        const res = JSON.parse(options.pack_data);
+        res.forEach((k) => {
+            product[k.id] = k.name;
+        });
+        setPacks(res);
+    }, [options.pack_data]);
+
+    useEffect(() => {
+        if (tab === 3) {
+            loadRedeemList();
+        }
+    }, [tab, page, pageSize]);
+
+    const deleteRedeem = (id) => {
+        API.delete("/admin/redeem/" + id)
+            .then(() => {
+                loadRedeemList();
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            });
+    };
+
+    const redeemGenerated = (codes) => {
+        setRedeemsRes(codes);
+        setRedeemsResOpen(true);
+        loadRedeemList();
+    };
+
+    const handleChange = (name) => (event) => {
+        setOptions({
+            ...options,
+            [name]: event.target.value,
+        });
+    };
+
+    const handleCheckChange = (name) => (event) => {
+        let value = event.target.value;
+        if (event.target.checked !== undefined) {
+            value = event.target.checked ? "1" : "0";
+        }
+        setOptions({
+            ...options,
+            [name]: value,
+        });
+    };
+
+    useEffect(() => {
+        API.post("/admin/setting", {
+            keys: Object.keys(options),
+        })
+            .then((response) => {
+                setOptions(response.data);
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            });
+        // eslint-disable-next-line
+    }, []);
+
+    const updateOption = () => {
+        const option = [];
+        Object.keys(options).forEach((k) => {
+            option.push({
+                key: k,
+                value: options[k],
+            });
+        });
+        API.patch("/admin/setting", {
+            options: option,
+        })
+            .then(() => {
+                ToggleSnackbar("top", "right", tSetting("saved"), "success");
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            })
+            .then(() => {
+                setLoading(false);
+            });
+    };
+
+    const submit = (e) => {
+        e.preventDefault();
+        setLoading(true);
+        updateOption();
+    };
+
+    const updatePackOption = (name, pack) => {
+        const option = [];
+        Object.keys(options).forEach((k) => {
+            option.push({
+                key: k,
+                value: k === name ? pack : options[k],
+            });
+        });
+        API.patch("/admin/setting", {
+            options: option,
+        })
+            .then(() => {
+                ToggleSnackbar("top", "right", tSetting("saved"), "success");
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            })
+            .then(() => {
+                setLoading(false);
+            });
+    };
+
+    const handleAddPack = (pack, isEdit) => {
+        setAddPack(false);
+        setPackEdit(null);
+        let newPacks;
+        if (isEdit) {
+            newPacks = packs.map((v) => {
+                if (v.id === pack.id) {
+                    return pack;
+                }
+                return v;
+            });
+        } else {
+            newPacks = [...packs, pack];
+        }
+
+        setPacks(newPacks);
+        const newPackData = JSON.stringify(newPacks);
+        setOptions({ ...options, pack_data: newPackData });
+        updatePackOption("pack_data", newPackData);
+    };
+
+    const handleAddGroup = (group, isEdit) => {
+        setAddGroup(false);
+        setGroupEdit(null);
+        let newGroup;
+        if (isEdit) {
+            newGroup = groups.map((v) => {
+                if (v.id === group.id) {
+                    return group;
+                }
+                return v;
+            });
+        } else {
+            newGroup = [...groups, group];
+        }
+
+        setGroups(newGroup);
+        const newGroupData = JSON.stringify(newGroup);
+        setOptions({ ...options, group_sell_data: newGroupData });
+        updatePackOption("group_sell_data", newGroupData);
+    };
+
+    const deletePack = (id) => {
+        let newPacks = [...packs];
+        newPacks = newPacks.filter((v) => {
+            return v.id !== id;
+        });
+        setPacks(newPacks);
+        const newPackData = JSON.stringify(newPacks);
+        setOptions({ ...options, pack_data: newPackData });
+        updatePackOption("pack_data", newPackData);
+    };
+
+    const deleteGroup = (id) => {
+        let newGroups = [...groups];
+        newGroups = newGroups.filter((v) => {
+            return v.id !== id;
+        });
+        setGroups(newGroups);
+        const newPackData = JSON.stringify(newGroups);
+        setOptions({ ...options, group_sell_data: newPackData });
+        updatePackOption("group_sell_data", newPackData);
+    };
+
+    return (
+        <div>
+            <Paper square>
+                <Tabs
+                    value={tab}
+                    indicatorColor="primary"
+                    textColor="primary"
+                    onChange={(e, v) => setTab(v)}
+                    scrollButtons="auto"
+                >
+                    <Tab label={t("vasSetting")} />
+                    <Tab label={t("storagePack")} />
+                    <Tab label={t("purchasableGroups")} />
+                    <Tab label={t("giftCodes")} />
+                </Tabs>
+                <div className={classes.content}>
+                    {tab === 0 && (
+                        <form onSubmit={submit} className={classes.tabForm}>
+                            <div className={classes.root}>
+                                <Typography variant="h6" gutterBottom>
+                                    {t("alipay")}
+                                </Typography>
+                                <div className={classes.formContainer}>
+                                    <div className={classes.form}>
+                                        <FormControl fullWidth>
+                                            <FormControlLabel
+                                                control={
+                                                    <Switch
+                                                        checked={
+                                                            options.alipay_enabled ===
+                                                            "1"
+                                                        }
+                                                        onChange={handleCheckChange(
+                                                            "alipay_enabled"
+                                                        )}
+                                                    />
+                                                }
+                                                label={t("enable")}
+                                            />
+                                        </FormControl>
+                                    </div>
+
+                                    {options.alipay_enabled === "1" && (
+                                        <>
+                                            <div className={classes.form}>
+                                                <FormControl fullWidth>
+                                                    <InputLabel htmlFor="component-helper">
+                                                        {t("appID")}
+                                                    </InputLabel>
+                                                    <Input
+                                                        value={options.appid}
+                                                        onChange={handleChange(
+                                                            "appid"
+                                                        )}
+                                                        required
+                                                    />
+                                                    <FormHelperText id="component-helper-text">
+                                                        {t("appIDDes")}
+                                                    </FormHelperText>
+                                                </FormControl>
+                                            </div>
+
+                                            <div className={classes.form}>
+                                                <FormControl fullWidth>
+                                                    <InputLabel htmlFor="component-helper">
+                                                        {t("rsaPrivate")}
+                                                    </InputLabel>
+                                                    <Input
+                                                        value={options.appkey}
+                                                        onChange={handleChange(
+                                                            "appkey"
+                                                        )}
+                                                        multiline
+                                                        rowsMax={10}
+                                                        required
+                                                    />
+                                                    <FormHelperText id="component-helper-text">
+                                                        <Trans
+                                                            ns={"dashboard"}
+                                                            i18nKey={
+                                                                "vas.rsaPrivateDes"
+                                                            }
+                                                            components={[
+                                                                <Link
+                                                                    key={0}
+                                                                    target={
+                                                                        "_blank"
+                                                                    }
+                                                                    href={
+                                                                        "https://docs.open.alipay.com/291/105971"
+                                                                    }
+                                                                />,
+                                                            ]}
+                                                        />
+                                                    </FormHelperText>
+                                                </FormControl>
+                                            </div>
+
+                                            <div className={classes.form}>
+                                                <FormControl fullWidth>
+                                                    <InputLabel htmlFor="component-helper">
+                                                        {t("alipayPublicKey")}
+                                                    </InputLabel>
+                                                    <Input
+                                                        value={options.shopid}
+                                                        onChange={handleChange(
+                                                            "shopid"
+                                                        )}
+                                                        multiline
+                                                        rowsMax={10}
+                                                        required
+                                                    />
+                                                    <FormHelperText id="component-helper-text">
+                                                        {t(
+                                                            "alipayPublicKeyDes"
+                                                        )}
+                                                    </FormHelperText>
+                                                </FormControl>
+                                            </div>
+                                        </>
+                                    )}
+                                </div>
+                            </div>
+
+                            <div className={classes.root}>
+                                <Typography variant="h6" gutterBottom>
+                                    {t("wechatPay")}
+                                </Typography>
+                                <div className={classes.formContainer}>
+                                    <div className={classes.form}>
+                                        <FormControl fullWidth>
+                                            <FormControlLabel
+                                                control={
+                                                    <Switch
+                                                        checked={
+                                                            options.wechat_enabled ===
+                                                            "1"
+                                                        }
+                                                        onChange={handleCheckChange(
+                                                            "wechat_enabled"
+                                                        )}
+                                                    />
+                                                }
+                                                label={t("enable")}
+                                            />
+                                        </FormControl>
+                                    </div>
+
+                                    {options.wechat_enabled === "1" && (
+                                        <>
+                                            <div className={classes.form}>
+                                                <FormControl fullWidth>
+                                                    <InputLabel htmlFor="component-helper">
+                                                        {t("applicationID")}
+                                                    </InputLabel>
+                                                    <Input
+                                                        value={
+                                                            options.wechat_appid
+                                                        }
+                                                        onChange={handleChange(
+                                                            "wechat_appid"
+                                                        )}
+                                                        required
+                                                    />
+                                                    <FormHelperText id="component-helper-text">
+                                                        {t("applicationIDDes")}
+                                                    </FormHelperText>
+                                                </FormControl>
+                                            </div>
+
+                                            <div className={classes.form}>
+                                                <FormControl fullWidth>
+                                                    <InputLabel htmlFor="component-helper">
+                                                        {t("merchantID")}
+                                                    </InputLabel>
+                                                    <Input
+                                                        value={
+                                                            options.wechat_mchid
+                                                        }
+                                                        onChange={handleChange(
+                                                            "wechat_mchid"
+                                                        )}
+                                                        required
+                                                    />
+                                                    <FormHelperText id="component-helper-text">
+                                                        {t("merchantIDDes")}
+                                                    </FormHelperText>
+                                                </FormControl>
+                                            </div>
+
+                                            <div className={classes.form}>
+                                                <FormControl fullWidth>
+                                                    <InputLabel htmlFor="component-helper">
+                                                        {t("apiV3Secret")}
+                                                    </InputLabel>
+                                                    <Input
+                                                        value={
+                                                            options.wechat_api_key
+                                                        }
+                                                        onChange={handleChange(
+                                                            "wechat_api_key"
+                                                        )}
+                                                        required
+                                                    />
+                                                    <FormHelperText id="component-helper-text">
+                                                        {t("apiV3SecretDes")}
+                                                    </FormHelperText>
+                                                </FormControl>
+                                            </div>
+
+                                            <div className={classes.form}>
+                                                <FormControl fullWidth>
+                                                    <InputLabel htmlFor="component-helper">
+                                                        {t(
+                                                            "mcCertificateSerial"
+                                                        )}
+                                                    </InputLabel>
+                                                    <Input
+                                                        value={
+                                                            options.wechat_serial_no
+                                                        }
+                                                        onChange={handleChange(
+                                                            "wechat_serial_no"
+                                                        )}
+                                                        required
+                                                    />
+                                                    <FormHelperText id="component-helper-text">
+                                                        {t(
+                                                            "mcCertificateSerialDes"
+                                                        )}
+                                                    </FormHelperText>
+                                                </FormControl>
+                                            </div>
+
+                                            <div className={classes.form}>
+                                                <FormControl fullWidth>
+                                                    <InputLabel htmlFor="component-helper">
+                                                        {t("mcAPISecret")}
+                                                    </InputLabel>
+                                                    <Input
+                                                        value={
+                                                            options.wechat_pk_content
+                                                        }
+                                                        onChange={handleChange(
+                                                            "wechat_pk_content"
+                                                        )}
+                                                        multiline
+                                                        rowsMax={10}
+                                                        required
+                                                    />
+                                                    <FormHelperText id="component-helper-text">
+                                                        {t("mcAPISecretDes")}
+                                                    </FormHelperText>
+                                                </FormControl>
+                                            </div>
+                                        </>
+                                    )}
+                                </div>
+                            </div>
+
+                            <div className={classes.root}>
+                                <Typography variant="h6" gutterBottom>
+                                    {t("payjs")}
+                                </Typography>
+
+                                <div className={classes.formContainer}>
+                                    <div className={classes.form}>
+                                        <Alert severity="info">
+                                            <Typography variant="body2">
+                                                <Trans
+                                                    ns={"dashboard"}
+                                                    i18nKey={"vas.payjsWarning"}
+                                                    components={[
+                                                        <Link
+                                                            key={0}
+                                                            href={
+                                                                "https://payjs.cn/"
+                                                            }
+                                                            target={"_blank"}
+                                                        />,
+                                                    ]}
+                                                />
+                                            </Typography>
+                                        </Alert>
+                                    </div>
+                                    <div className={classes.form}>
+                                        <FormControl fullWidth>
+                                            <FormControlLabel
+                                                control={
+                                                    <Switch
+                                                        checked={
+                                                            options.payjs_enabled ===
+                                                            "1"
+                                                        }
+                                                        onChange={handleCheckChange(
+                                                            "payjs_enabled"
+                                                        )}
+                                                    />
+                                                }
+                                                label={t("enable")}
+                                            />
+                                        </FormControl>
+                                    </div>
+
+                                    {options.payjs_enabled === "1" && (
+                                        <>
+                                            <div className={classes.form}>
+                                                <FormControl fullWidth>
+                                                    <InputLabel htmlFor="component-helper">
+                                                        {t("mcNumber")}
+                                                    </InputLabel>
+                                                    <Input
+                                                        value={options.payjs_id}
+                                                        onChange={handleChange(
+                                                            "payjs_id"
+                                                        )}
+                                                        required
+                                                    />
+                                                    <FormHelperText id="component-helper-text">
+                                                        {t("mcNumberDes")}
+                                                    </FormHelperText>
+                                                </FormControl>
+                                            </div>
+
+                                            <div className={classes.form}>
+                                                <FormControl fullWidth>
+                                                    <InputLabel htmlFor="component-helper">
+                                                        {t(
+                                                            "communicationSecret"
+                                                        )}
+                                                    </InputLabel>
+                                                    <Input
+                                                        value={
+                                                            options.payjs_secret
+                                                        }
+                                                        onChange={handleChange(
+                                                            "payjs_secret"
+                                                        )}
+                                                        required
+                                                    />
+                                                    <FormHelperText id="component-helper-text">
+                                                        {t("mcNumberDes")}
+                                                    </FormHelperText>
+                                                </FormControl>
+                                            </div>
+                                        </>
+                                    )}
+                                </div>
+                            </div>
+
+                            <div className={classes.root}>
+                                <Typography variant="h6" gutterBottom>
+                                    {t("customPayment")}
+                                </Typography>
+
+                                <div className={classes.formContainer}>
+                                    <div className={classes.form}>
+                                        <Alert severity="info">
+                                            <Typography variant="body2">
+                                                <Trans
+                                                    ns={"dashboard"}
+                                                    i18nKey={
+                                                        "vas.customPaymentDes"
+                                                    }
+                                                    components={[
+                                                        <Link
+                                                            key={0}
+                                                            href={t(
+                                                                "customPaymentDocumentLink"
+                                                            )}
+                                                            target={"_blank"}
+                                                        />,
+                                                    ]}
+                                                />
+                                            </Typography>
+                                        </Alert>
+                                    </div>
+                                    <div className={classes.form}>
+                                        <FormControl fullWidth>
+                                            <FormControlLabel
+                                                control={
+                                                    <Switch
+                                                        checked={
+                                                            options.custom_payment_enabled ===
+                                                            "1"
+                                                        }
+                                                        onChange={handleCheckChange(
+                                                            "custom_payment_enabled"
+                                                        )}
+                                                    />
+                                                }
+                                                label={t("enable")}
+                                            />
+                                        </FormControl>
+                                    </div>
+
+                                    {options.custom_payment_enabled === "1" && (
+                                        <>
+                                            <div className={classes.form}>
+                                                <FormControl fullWidth>
+                                                    <InputLabel htmlFor="component-helper">
+                                                        {t("customPaymentName")}
+                                                    </InputLabel>
+                                                    <Input
+                                                        value={
+                                                            options.custom_payment_name
+                                                        }
+                                                        onChange={handleChange(
+                                                            "custom_payment_name"
+                                                        )}
+                                                        required
+                                                    />
+                                                    <FormHelperText id="component-helper-text">
+                                                        {t(
+                                                            "customPaymentNameDes"
+                                                        )}
+                                                    </FormHelperText>
+                                                </FormControl>
+                                            </div>
+
+                                            <div className={classes.form}>
+                                                <FormControl fullWidth>
+                                                    <InputLabel htmlFor="component-helper">
+                                                        {t(
+                                                            "customPaymentEndpoint"
+                                                        )}
+                                                    </InputLabel>
+                                                    <Input
+                                                        value={
+                                                            options.custom_payment_endpoint
+                                                        }
+                                                        onChange={handleChange(
+                                                            "custom_payment_endpoint"
+                                                        )}
+                                                        required
+                                                    />
+                                                    <FormHelperText id="component-helper-text">
+                                                        {t(
+                                                            "customPaymentEndpointDes"
+                                                        )}
+                                                    </FormHelperText>
+                                                </FormControl>
+                                            </div>
+
+                                            <div className={classes.form}>
+                                                <FormControl fullWidth>
+                                                    <InputLabel htmlFor="component-helper">
+                                                        {t(
+                                                            "communicationSecret"
+                                                        )}
+                                                    </InputLabel>
+                                                    <Input
+                                                        value={
+                                                            options.custom_payment_secret
+                                                        }
+                                                        onChange={handleChange(
+                                                            "custom_payment_secret"
+                                                        )}
+                                                        required
+                                                    />
+                                                    <FormHelperText id="component-helper-text">
+                                                        {t(
+                                                            "customPaymentSecretDes"
+                                                        )}
+                                                    </FormHelperText>
+                                                </FormControl>
+                                            </div>
+                                        </>
+                                    )}
+                                </div>
+                            </div>
+
+                            <div className={classes.root}>
+                                <Typography variant="h6" gutterBottom>
+                                    {t("otherSettings")}
+                                </Typography>
+                                <div className={classes.formContainer}>
+                                    <div className={classes.form}>
+                                        <FormControl fullWidth>
+                                            <InputLabel htmlFor="component-helper">
+                                                {t("banBufferPeriod")}
+                                            </InputLabel>
+                                            <Input
+                                                type={"number"}
+                                                inputProps={{
+                                                    step: 1,
+                                                    min: 1,
+                                                }}
+                                                value={options.ban_time}
+                                                onChange={handleChange(
+                                                    "ban_time"
+                                                )}
+                                                required
+                                            />
+                                            <FormHelperText id="component-helper-text">
+                                                {t("banBufferPeriodDes")}
+                                            </FormHelperText>
+                                        </FormControl>
+                                    </div>
+
+                                    <div className={classes.form}>
+                                        <FormControl fullWidth>
+                                            <FormControlLabel
+                                                control={
+                                                    <Switch
+                                                        checked={
+                                                            options.score_enabled ===
+                                                            "1"
+                                                        }
+                                                        onChange={handleCheckChange(
+                                                            "score_enabled"
+                                                        )}
+                                                    />
+                                                }
+                                                label={t("allowSellShares")}
+                                            />
+                                            <FormHelperText>
+                                                {t("allowSellSharesDes")}
+                                            </FormHelperText>
+                                        </FormControl>
+                                    </div>
+
+                                    {options.score_enabled === "1" && (
+                                        <div className={classes.form}>
+                                            <FormControl fullWidth>
+                                                <InputLabel htmlFor="component-helper">
+                                                    {t("creditPriceRatio")}
+                                                </InputLabel>
+                                                <Input
+                                                    type={"number"}
+                                                    inputProps={{
+                                                        step: 1,
+                                                        min: 0,
+                                                        max: 100,
+                                                    }}
+                                                    value={
+                                                        options.share_score_rate
+                                                    }
+                                                    onChange={handleChange(
+                                                        "share_score_rate"
+                                                    )}
+                                                    required
+                                                />
+                                                <FormHelperText id="component-helper-text">
+                                                    {t("creditPriceRatioDes")}
+                                                </FormHelperText>
+                                            </FormControl>
+                                        </div>
+                                    )}
+
+                                    <div className={classes.form}>
+                                        <FormControl fullWidth>
+                                            <InputLabel htmlFor="component-helper">
+                                                {t("creditPrice")}
+                                            </InputLabel>
+                                            <Input
+                                                type={"number"}
+                                                inputProps={{
+                                                    step: 1,
+                                                    min: 1,
+                                                }}
+                                                value={options.score_price}
+                                                onChange={handleChange(
+                                                    "score_price"
+                                                )}
+                                                required
+                                            />
+                                            <FormHelperText id="component-helper-text">
+                                                {t("creditPriceDes")}
+                                            </FormHelperText>
+                                        </FormControl>
+                                    </div>
+
+                                    <div className={classes.form}>
+                                        <FormControl fullWidth>
+                                            <FormControlLabel
+                                                control={
+                                                    <Switch
+                                                        checked={
+                                                            options.report_enabled ===
+                                                            "1"
+                                                        }
+                                                        onChange={handleCheckChange(
+                                                            "report_enabled"
+                                                        )}
+                                                    />
+                                                }
+                                                label={t("allowReportShare")}
+                                            />
+                                            <FormHelperText>
+                                                {t("allowReportShareDes")}
+                                            </FormHelperText>
+                                        </FormControl>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div className={classes.root}>
+                                <Button
+                                    disabled={loading}
+                                    type={"submit"}
+                                    variant={"contained"}
+                                    color={"primary"}
+                                >
+                                    {tSetting("save")}
+                                </Button>
+                            </div>
+                        </form>
+                    )}
+
+                    {tab === 1 && (
+                        <div>
+                            <Button
+                                onClick={() => setAddPack(true)}
+                                variant={"contained"}
+                                color={"secondary"}
+                            >
+                                {t("add")}
+                            </Button>
+                            <div className={classes.tableContainer}>
+                                <Table size="small">
+                                    <TableHead>
+                                        <TableRow>
+                                            <TableCell>{t("name")}</TableCell>
+                                            <TableCell>{t("price")}</TableCell>
+                                            <TableCell>
+                                                {t("duration")}
+                                            </TableCell>
+                                            <TableCell>{t("size")}</TableCell>
+                                            <TableCell>
+                                                {t("actions")}
+                                            </TableCell>
+                                        </TableRow>
+                                    </TableHead>
+                                    <TableBody>
+                                        {packs.map((row) => (
+                                            <TableRow key={row.id}>
+                                                <TableCell
+                                                    component="th"
+                                                    scope="row"
+                                                >
+                                                    {row.name}
+                                                </TableCell>
+                                                <TableCell>
+                                                    ￥{row.price / 100}
+                                                    {row.score !== 0 &&
+                                                        t("orCredits", {
+                                                            num: row.score,
+                                                        })}
+                                                </TableCell>
+                                                <TableCell>
+                                                    {tApp("vas.days", {
+                                                        num: Math.ceil(
+                                                            row.time / 86400
+                                                        ),
+                                                    })}
+                                                </TableCell>
+                                                <TableCell>
+                                                    {sizeToString(row.size)}
+                                                </TableCell>
+                                                <TableCell>
+                                                    <IconButton
+                                                        onClick={() => {
+                                                            setPackEdit(row);
+                                                            setAddPack(true);
+                                                        }}
+                                                        size={"small"}
+                                                    >
+                                                        <Edit />
+                                                    </IconButton>
+                                                    <IconButton
+                                                        onClick={() =>
+                                                            deletePack(row.id)
+                                                        }
+                                                        size={"small"}
+                                                    >
+                                                        <Delete />
+                                                    </IconButton>
+                                                </TableCell>
+                                            </TableRow>
+                                        ))}
+                                    </TableBody>
+                                </Table>
+                            </div>
+                        </div>
+                    )}
+
+                    {tab === 2 && (
+                        <div>
+                            <Button
+                                onClick={() => setAddGroup(true)}
+                                variant={"contained"}
+                                color={"secondary"}
+                            >
+                                {t("add")}
+                            </Button>
+                            <div className={classes.tableContainer}>
+                                <Table size="small">
+                                    <TableHead>
+                                        <TableRow>
+                                            <TableCell>{t("name")}</TableCell>
+                                            <TableCell>{t("price")}</TableCell>
+                                            <TableCell>
+                                                {t("duration")}
+                                            </TableCell>
+                                            <TableCell>
+                                                {t("highlight")}
+                                            </TableCell>
+                                            <TableCell>
+                                                {t("actions")}
+                                            </TableCell>
+                                        </TableRow>
+                                    </TableHead>
+                                    <TableBody>
+                                        {groups.map((row) => (
+                                            <TableRow key={row.id}>
+                                                <TableCell
+                                                    component="th"
+                                                    scope="row"
+                                                >
+                                                    {row.name}
+                                                </TableCell>
+                                                <TableCell>
+                                                    ￥{row.price / 100}
+                                                    {row.score !== 0 &&
+                                                        t("orCredits", {
+                                                            num: row.score,
+                                                        })}
+                                                </TableCell>
+                                                <TableCell>
+                                                    {tApp("vas.days", {
+                                                        num: Math.ceil(
+                                                            row.time / 86400
+                                                        ),
+                                                    })}
+                                                </TableCell>
+                                                <TableCell>
+                                                    {row.highlight
+                                                        ? t("yes")
+                                                        : t("no")}
+                                                </TableCell>
+                                                <TableCell>
+                                                    <IconButton
+                                                        onClick={() => {
+                                                            setGroupEdit(row);
+                                                            setAddGroup(true);
+                                                        }}
+                                                        size={"small"}
+                                                    >
+                                                        <Edit />
+                                                    </IconButton>
+                                                    <IconButton
+                                                        onClick={() =>
+                                                            deleteGroup(row.id)
+                                                        }
+                                                        size={"small"}
+                                                    >
+                                                        <Delete />
+                                                    </IconButton>
+                                                </TableCell>
+                                            </TableRow>
+                                        ))}
+                                    </TableBody>
+                                </Table>
+                            </div>
+                        </div>
+                    )}
+
+                    {tab === 3 && (
+                        <div>
+                            <Button
+                                onClick={() => setAddRedeem(true)}
+                                variant={"contained"}
+                                color={"secondary"}
+                            >
+                                {t("add")}
+                            </Button>
+                            <div className={classes.tableContainer}>
+                                <Table size="small">
+                                    <TableHead>
+                                        <TableRow>
+                                            <TableCell>#</TableCell>
+                                            <TableCell>
+                                                {t("productName")}
+                                            </TableCell>
+                                            <TableCell>{t("qyt")}</TableCell>
+                                            <TableCell>{t("code")}</TableCell>
+                                            <TableCell>{t("status")}</TableCell>
+                                            <TableCell>{t("action")}</TableCell>
+                                        </TableRow>
+                                    </TableHead>
+                                    <TableBody>
+                                        {redeems.map((row) => (
+                                            <TableRow key={row.ID}>
+                                                <TableCell
+                                                    component="th"
+                                                    scope="row"
+                                                >
+                                                    {row.ID}
+                                                </TableCell>
+                                                <TableCell>
+                                                    {row.ProductID === 0 &&
+                                                        tApp("vas.credits")}
+                                                    {product[row.ProductID] !==
+                                                        undefined && (
+                                                        <>
+                                                            {
+                                                                product[
+                                                                    row
+                                                                        .ProductID
+                                                                ]
+                                                            }
+                                                        </>
+                                                    )}
+                                                    {row.ProductID !== 0 &&
+                                                        !product[
+                                                            row.ProductID
+                                                        ] &&
+                                                        t("invalidProduct")}
+                                                </TableCell>
+                                                <TableCell>{row.Num}</TableCell>
+                                                <TableCell>
+                                                    {row.Code}
+                                                </TableCell>
+                                                <TableCell>
+                                                    {!row.Used ? (
+                                                        <Box color="success.main">
+                                                            {t("notUsed")}
+                                                        </Box>
+                                                    ) : (
+                                                        <Box color="warning.main">
+                                                            {t("used")}
+                                                        </Box>
+                                                    )}
+                                                </TableCell>
+                                                <TableCell>
+                                                    <IconButton
+                                                        onClick={() =>
+                                                            deleteRedeem(row.ID)
+                                                        }
+                                                        size={"small"}
+                                                    >
+                                                        <Delete />
+                                                    </IconButton>
+                                                </TableCell>
+                                            </TableRow>
+                                        ))}
+                                    </TableBody>
+                                </Table>
+                            </div>
+                            <div className={classes.navigator}>
+                                <Pagination
+                                    count={Math.ceil(total / pageSize)}
+                                    onChange={(e, v) => setPage(v)}
+                                    color="secondary"
+                                />
+                            </div>
+                        </div>
+                    )}
+
+                    <AddPack
+                        onSubmit={handleAddPack}
+                        open={addPack}
+                        packEdit={packEdit}
+                        onClose={() => {
+                            setAddPack(false);
+                            setPackEdit(null);
+                        }}
+                    />
+                    <AddGroup
+                        onSubmit={handleAddGroup}
+                        open={addGroup}
+                        groupEdit={groupEdit}
+                        onClose={() => {
+                            setAddGroup(false);
+                            setGroupEdit(null);
+                        }}
+                    />
+                    <AddRedeem
+                        open={addRedeem}
+                        onSuccess={redeemGenerated}
+                        products={[...groups, ...packs]}
+                        onClose={() => setAddRedeem(false)}
+                    />
+                    <AlertDialog
+                        title={t("generatingResult")}
+                        open={redeemsResOpen}
+                        msg={redeemsRes.map((v, k) => (
+                            <div key={k}>{v}</div>
+                        ))}
+                        onClose={() => {
+                            setRedeemsResOpen(false);
+                            setRedeemsRes([]);
+                        }}
+                    />
+                </div>
+            </Paper>
+        </div>
+    );
+}
diff --git a/src/component/Admin/Share/Share.js b/src/component/Admin/Share/Share.js
new file mode 100644
index 0000000..9618da7
--- /dev/null
+++ b/src/component/Admin/Share/Share.js
@@ -0,0 +1,532 @@
+import React, { useCallback, useEffect, useState } from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import API from "../../../middleware/Api";
+import { useDispatch } from "react-redux";
+import Paper from "@material-ui/core/Paper";
+import Button from "@material-ui/core/Button";
+import TableContainer from "@material-ui/core/TableContainer";
+import Table from "@material-ui/core/Table";
+import TableHead from "@material-ui/core/TableHead";
+import TableRow from "@material-ui/core/TableRow";
+import TableCell from "@material-ui/core/TableCell";
+import TableBody from "@material-ui/core/TableBody";
+import TablePagination from "@material-ui/core/TablePagination";
+import IconButton from "@material-ui/core/IconButton";
+import { Delete, FilterList } from "@material-ui/icons";
+import Tooltip from "@material-ui/core/Tooltip";
+import Checkbox from "@material-ui/core/Checkbox";
+import Toolbar from "@material-ui/core/Toolbar";
+import Typography from "@material-ui/core/Typography";
+import { lighten } from "@material-ui/core";
+import Link from "@material-ui/core/Link";
+import TableSortLabel from "@material-ui/core/TableSortLabel";
+import Badge from "@material-ui/core/Badge";
+import ShareFilter from "../Dialogs/ShareFilter";
+import { formatLocalTime } from "../../../utils/datetime";
+import { toggleSnackbar } from "../../../redux/explorer";
+import { useTranslation } from "react-i18next";
+
+const useStyles = makeStyles((theme) => ({
+    root: {
+        [theme.breakpoints.up("md")]: {
+            marginLeft: 100,
+        },
+        marginBottom: 40,
+    },
+    content: {
+        padding: theme.spacing(2),
+    },
+    container: {
+        overflowX: "auto",
+    },
+    tableContainer: {
+        marginTop: 16,
+    },
+    header: {
+        display: "flex",
+        justifyContent: "space-between",
+    },
+    headerRight: {},
+    highlight:
+        theme.palette.type === "light"
+            ? {
+                  color: theme.palette.secondary.main,
+                  backgroundColor: lighten(theme.palette.secondary.light, 0.85),
+              }
+            : {
+                  color: theme.palette.text.primary,
+                  backgroundColor: theme.palette.secondary.dark,
+              },
+    visuallyHidden: {
+        border: 0,
+        clip: "rect(0 0 0 0)",
+        height: 1,
+        margin: -1,
+        overflow: "hidden",
+        padding: 0,
+        position: "absolute",
+        top: 20,
+        width: 1,
+    },
+}));
+
+export default function Share() {
+    const { t } = useTranslation("dashboard", { keyPrefix: "share" });
+    const { t: tDashboard } = useTranslation("dashboard");
+    const classes = useStyles();
+    const [shares, setShares] = useState([]);
+    const [page, setPage] = useState(1);
+    const [pageSize, setPageSize] = useState(10);
+    const [total, setTotal] = useState(0);
+    const [filter, setFilter] = useState({});
+    const [users, setUsers] = useState({});
+    const [ids, setIds] = useState({});
+    const [search, setSearch] = useState({});
+    const [orderBy, setOrderBy] = useState(["id", "desc"]);
+    const [filterDialog, setFilterDialog] = useState(false);
+    const [selected, setSelected] = useState([]);
+    const [loading, setLoading] = useState(false);
+
+    const dispatch = useDispatch();
+    const ToggleSnackbar = useCallback(
+        (vertical, horizontal, msg, color) =>
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color)),
+        [dispatch]
+    );
+
+    const loadList = () => {
+        API.post("/admin/share/list", {
+            page: page,
+            page_size: pageSize,
+            order_by: orderBy.join(" "),
+            conditions: filter,
+            searches: search,
+        })
+            .then((response) => {
+                setUsers(response.data.users);
+                setIds(response.data.ids);
+                setShares(response.data.items);
+                setTotal(response.data.total);
+                setSelected([]);
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            });
+    };
+
+    useEffect(() => {
+        loadList();
+    }, [page, pageSize, orderBy, filter, search]);
+
+    const deletePolicy = (id) => {
+        setLoading(true);
+        API.post("/admin/share/delete", { id: [id] })
+            .then(() => {
+                loadList();
+                ToggleSnackbar("top", "right", t("deleted"), "success");
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            })
+            .then(() => {
+                setLoading(false);
+            });
+    };
+
+    const deleteBatch = () => {
+        setLoading(true);
+        API.post("/admin/share/delete", { id: selected })
+            .then(() => {
+                loadList();
+                ToggleSnackbar("top", "right", t("deleted"), "success");
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            })
+            .then(() => {
+                setLoading(false);
+            });
+    };
+
+    const handleSelectAllClick = (event) => {
+        if (event.target.checked) {
+            const newSelecteds = shares.map((n) => n.ID);
+            setSelected(newSelecteds);
+            return;
+        }
+        setSelected([]);
+    };
+
+    const handleClick = (event, name) => {
+        const selectedIndex = selected.indexOf(name);
+        let newSelected = [];
+
+        if (selectedIndex === -1) {
+            newSelected = newSelected.concat(selected, name);
+        } else if (selectedIndex === 0) {
+            newSelected = newSelected.concat(selected.slice(1));
+        } else if (selectedIndex === selected.length - 1) {
+            newSelected = newSelected.concat(selected.slice(0, -1));
+        } else if (selectedIndex > 0) {
+            newSelected = newSelected.concat(
+                selected.slice(0, selectedIndex),
+                selected.slice(selectedIndex + 1)
+            );
+        }
+
+        setSelected(newSelected);
+    };
+
+    const isSelected = (id) => selected.indexOf(id) !== -1;
+
+    return (
+        <div>
+            <ShareFilter
+                filter={filter}
+                open={filterDialog}
+                onClose={() => setFilterDialog(false)}
+                setSearch={setSearch}
+                setFilter={setFilter}
+            />
+            <div className={classes.header}>
+                <div className={classes.headerRight}>
+                    <Tooltip title={tDashboard("user.filter")}>
+                        <IconButton
+                            style={{ marginRight: 8 }}
+                            onClick={() => setFilterDialog(true)}
+                        >
+                            <Badge
+                                color="secondary"
+                                variant="dot"
+                                invisible={
+                                    Object.keys(search).length === 0 &&
+                                    Object.keys(filter).length === 0
+                                }
+                            >
+                                <FilterList />
+                            </Badge>
+                        </IconButton>
+                    </Tooltip>
+                    <Button
+                        color={"primary"}
+                        onClick={() => loadList()}
+                        variant={"outlined"}
+                    >
+                        {tDashboard("policy.refresh")}
+                    </Button>
+                </div>
+            </div>
+
+            <Paper square className={classes.tableContainer}>
+                {selected.length > 0 && (
+                    <Toolbar className={classes.highlight}>
+                        <Typography
+                            style={{ flex: "1 1 100%" }}
+                            color="inherit"
+                            variant="subtitle1"
+                        >
+                            {tDashboard("user.selectedObjects", {
+                                num: selected.length,
+                            })}
+                        </Typography>
+                        <Tooltip title={tDashboard("node.delete")}>
+                            <IconButton
+                                onClick={deleteBatch}
+                                disabled={loading}
+                                aria-label="delete"
+                            >
+                                <Delete />
+                            </IconButton>
+                        </Tooltip>
+                    </Toolbar>
+                )}
+                <TableContainer className={classes.container}>
+                    <Table aria-label="sticky table" size={"small"}>
+                        <TableHead>
+                            <TableRow style={{ height: 52 }}>
+                                <TableCell padding="checkbox">
+                                    <Checkbox
+                                        indeterminate={
+                                            selected.length > 0 &&
+                                            selected.length < shares.length
+                                        }
+                                        checked={
+                                            shares.length > 0 &&
+                                            selected.length === shares.length
+                                        }
+                                        onChange={handleSelectAllClick}
+                                        inputProps={{
+                                            "aria-label": "select all desserts",
+                                        }}
+                                    />
+                                </TableCell>
+                                <TableCell style={{ minWidth: 10 }}>
+                                    <TableSortLabel
+                                        active={orderBy[0] === "id"}
+                                        direction={orderBy[1]}
+                                        onClick={() =>
+                                            setOrderBy([
+                                                "id",
+                                                orderBy[1] === "asc"
+                                                    ? "desc"
+                                                    : "asc",
+                                            ])
+                                        }
+                                    >
+                                        #
+                                        {orderBy[0] === "id" ? (
+                                            <span
+                                                className={
+                                                    classes.visuallyHidden
+                                                }
+                                            >
+                                                {orderBy[1] === "desc"
+                                                    ? "sorted descending"
+                                                    : "sorted ascending"}
+                                            </span>
+                                        ) : null}
+                                    </TableSortLabel>
+                                </TableCell>
+                                <TableCell style={{ minWidth: 200 }}>
+                                    <TableSortLabel
+                                        active={orderBy[0] === "source_name"}
+                                        direction={orderBy[1]}
+                                        onClick={() =>
+                                            setOrderBy([
+                                                "source_name",
+                                                orderBy[1] === "asc"
+                                                    ? "desc"
+                                                    : "asc",
+                                            ])
+                                        }
+                                    >
+                                        {t("objectName")}
+                                        {orderBy[0] === "source_name" ? (
+                                            <span
+                                                className={
+                                                    classes.visuallyHidden
+                                                }
+                                            >
+                                                {orderBy[1] === "desc"
+                                                    ? "sorted descending"
+                                                    : "sorted ascending"}
+                                            </span>
+                                        ) : null}
+                                    </TableSortLabel>
+                                </TableCell>
+                                <TableCell style={{ minWidth: 70 }}>
+                                    {tDashboard("policy.type")}
+                                </TableCell>
+                                <TableCell
+                                    style={{ minWidth: 100 }}
+                                    align={"right"}
+                                >
+                                    <TableSortLabel
+                                        active={orderBy[0] === "views"}
+                                        direction={orderBy[1]}
+                                        onClick={() =>
+                                            setOrderBy([
+                                                "views",
+                                                orderBy[1] === "asc"
+                                                    ? "desc"
+                                                    : "asc",
+                                            ])
+                                        }
+                                    >
+                                        {t("views")}
+                                        {orderBy[0] === "views" ? (
+                                            <span
+                                                className={
+                                                    classes.visuallyHidden
+                                                }
+                                            >
+                                                {orderBy[1] === "desc"
+                                                    ? "sorted descending"
+                                                    : "sorted ascending"}
+                                            </span>
+                                        ) : null}
+                                    </TableSortLabel>
+                                </TableCell>
+                                <TableCell
+                                    style={{ minWidth: 100 }}
+                                    align={"right"}
+                                >
+                                    <TableSortLabel
+                                        active={orderBy[0] === "downloads"}
+                                        direction={orderBy[1]}
+                                        onClick={() =>
+                                            setOrderBy([
+                                                "downloads",
+                                                orderBy[1] === "asc"
+                                                    ? "desc"
+                                                    : "asc",
+                                            ])
+                                        }
+                                    >
+                                        {t("downloads")}
+                                        {orderBy[0] === "downloads" ? (
+                                            <span
+                                                className={
+                                                    classes.visuallyHidden
+                                                }
+                                            >
+                                                {orderBy[1] === "desc"
+                                                    ? "sorted descending"
+                                                    : "sorted ascending"}
+                                            </span>
+                                        ) : null}
+                                    </TableSortLabel>
+                                </TableCell>
+                                <TableCell
+                                    style={{ minWidth: 100 }}
+                                    align={"right"}
+                                >
+                                    <TableSortLabel
+                                        active={orderBy[0] === "score"}
+                                        direction={orderBy[1]}
+                                        onClick={() =>
+                                            setOrderBy([
+                                                "score",
+                                                orderBy[1] === "asc"
+                                                    ? "desc"
+                                                    : "asc",
+                                            ])
+                                        }
+                                    >
+                                        {t("price")}
+                                        {orderBy[0] === "score" ? (
+                                            <span
+                                                className={
+                                                    classes.visuallyHidden
+                                                }
+                                            >
+                                                {orderBy[1] === "desc"
+                                                    ? "sorted descending"
+                                                    : "sorted ascending"}
+                                            </span>
+                                        ) : null}
+                                    </TableSortLabel>
+                                </TableCell>
+                                <TableCell style={{ minWidth: 120 }}>
+                                    {t("autoExpire")}
+                                </TableCell>
+                                <TableCell style={{ minWidth: 120 }}>
+                                    {t("owner")}
+                                </TableCell>
+                                <TableCell style={{ minWidth: 150 }}>
+                                    {t("createdAt")}
+                                </TableCell>
+                                <TableCell style={{ minWidth: 100 }}>
+                                    {tDashboard("policy.actions")}
+                                </TableCell>
+                            </TableRow>
+                        </TableHead>
+                        <TableBody>
+                            {shares.map((row) => (
+                                <TableRow
+                                    hover
+                                    key={row.ID}
+                                    role="checkbox"
+                                    selected={isSelected(row.ID)}
+                                >
+                                    <TableCell padding="checkbox">
+                                        <Checkbox
+                                            onClick={(event) =>
+                                                handleClick(event, row.ID)
+                                            }
+                                            checked={isSelected(row.ID)}
+                                        />
+                                    </TableCell>
+                                    <TableCell>{row.ID}</TableCell>
+                                    <TableCell
+                                        style={{ wordBreak: "break-all" }}
+                                    >
+                                        <Link
+                                            target={"_blank"}
+                                            color="inherit"
+                                            href={
+                                                "/s/" +
+                                                ids[row.ID] +
+                                                (row.Password === ""
+                                                    ? ""
+                                                    : "?password=" +
+                                                      row.Password)
+                                            }
+                                        >
+                                            {row.SourceName}
+                                        </Link>
+                                    </TableCell>
+                                    <TableCell>
+                                        {row.Password === ""
+                                            ? t("public")
+                                            : t("private")}
+                                    </TableCell>
+                                    <TableCell align={"right"}>
+                                        {row.Views}
+                                    </TableCell>
+                                    <TableCell align={"right"}>
+                                        {row.Downloads}
+                                    </TableCell>
+                                    <TableCell align={"right"}>
+                                        {row.Score}
+                                    </TableCell>
+                                    <TableCell>
+                                        {row.RemainDownloads > -1 &&
+                                            t("afterNDownloads", {
+                                                num: row.RemainDownloads,
+                                            })}
+                                        {row.RemainDownloads === -1 &&
+                                            t("none")}
+                                    </TableCell>
+                                    <TableCell>
+                                        <Link
+                                            href={
+                                                "/admin/user/edit/" + row.UserID
+                                            }
+                                        >
+                                            {users[row.UserID]
+                                                ? users[row.UserID].Nick
+                                                : tDashboard(
+                                                      "file.unknownUploader"
+                                                  )}
+                                        </Link>
+                                    </TableCell>
+                                    <TableCell>
+                                        {formatLocalTime(row.CreatedAt)}
+                                    </TableCell>
+                                    <TableCell>
+                                        <Tooltip
+                                            title={tDashboard("node.delete")}
+                                        >
+                                            <IconButton
+                                                disabled={loading}
+                                                onClick={() =>
+                                                    deletePolicy(row.ID)
+                                                }
+                                                size={"small"}
+                                            >
+                                                <Delete />
+                                            </IconButton>
+                                        </Tooltip>
+                                    </TableCell>
+                                </TableRow>
+                            ))}
+                        </TableBody>
+                    </Table>
+                </TableContainer>
+                <TablePagination
+                    rowsPerPageOptions={[10, 25, 50, 100]}
+                    component="div"
+                    count={total}
+                    rowsPerPage={pageSize}
+                    page={page - 1}
+                    onChangePage={(e, p) => setPage(p + 1)}
+                    onChangeRowsPerPage={(e) => {
+                        setPageSize(e.target.value);
+                        setPage(1);
+                    }}
+                />
+            </Paper>
+        </div>
+    );
+}
diff --git a/src/component/Admin/Task/Aria2Helper.js b/src/component/Admin/Task/Aria2Helper.js
new file mode 100644
index 0000000..6c2d0c9
--- /dev/null
+++ b/src/component/Admin/Task/Aria2Helper.js
@@ -0,0 +1,83 @@
+import React from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import {
+    Button,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogContentText,
+    DialogTitle,
+    Link,
+} from "@material-ui/core";
+import { Link as RouterLink } from "react-router-dom";
+import { Trans, useTranslation } from "react-i18next";
+
+const useStyles = makeStyles((theme) => ({}));
+
+export default function Aria2Helper(props) {
+    const { t } = useTranslation("dashboard", { keyPrefix: "task" });
+    const { t: tCommon } = useTranslation("common");
+    const classes = useStyles();
+
+    return (
+        <Dialog
+            open={props.open}
+            onClose={props.onClose}
+            aria-labelledby="alert-dialog-title"
+            aria-describedby="alert-dialog-description"
+        >
+            <DialogTitle id="alert-dialog-title">
+                {t("howToConfigAria2")}
+            </DialogTitle>
+            <DialogContent>
+                <DialogContentText id="alert-dialog-description">
+                    {t("aria2Des")}
+                    <ul>
+                        <li>
+                            <Trans
+                                ns={"dashboard"}
+                                i18nKey={"task.masterAria2Des"}
+                                components={[
+                                    <Link
+                                        component={RouterLink}
+                                        to={"/admin/node/edit/1"}
+                                        key={0}
+                                    />,
+                                ]}
+                            />
+                        </li>
+                        <li>
+                            <Trans
+                                ns={"dashboard"}
+                                i18nKey={"task.slaveAria2Des"}
+                                components={[
+                                    <Link
+                                        component={RouterLink}
+                                        to={"/admin/node/add"}
+                                        key={0}
+                                    />,
+                                ]}
+                            />
+                        </li>
+                    </ul>
+                    <Trans
+                        ns={"dashboard"}
+                        i18nKey={"task.editGroupDes"}
+                        components={[
+                            <Link
+                                component={RouterLink}
+                                to={"/admin/group"}
+                                key={0}
+                            />,
+                        ]}
+                    />
+                </DialogContentText>
+            </DialogContent>
+            <DialogActions>
+                <Button onClick={props.onClose} color="primary" autoFocus>
+                    {tCommon("close")}
+                </Button>
+            </DialogActions>
+        </Dialog>
+    );
+}
diff --git a/src/component/Admin/Task/Download.js b/src/component/Admin/Task/Download.js
new file mode 100644
index 0000000..76d54d1
--- /dev/null
+++ b/src/component/Admin/Task/Download.js
@@ -0,0 +1,444 @@
+import React, { useCallback, useEffect, useState } from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import API from "../../../middleware/Api";
+import { useDispatch } from "react-redux";
+import Paper from "@material-ui/core/Paper";
+import Button from "@material-ui/core/Button";
+import TableContainer from "@material-ui/core/TableContainer";
+import Table from "@material-ui/core/Table";
+import TableHead from "@material-ui/core/TableHead";
+import TableRow from "@material-ui/core/TableRow";
+import TableCell from "@material-ui/core/TableCell";
+import TableBody from "@material-ui/core/TableBody";
+import TablePagination from "@material-ui/core/TablePagination";
+import IconButton from "@material-ui/core/IconButton";
+import { Delete } from "@material-ui/icons";
+import Tooltip from "@material-ui/core/Tooltip";
+import Checkbox from "@material-ui/core/Checkbox";
+import Toolbar from "@material-ui/core/Toolbar";
+import Typography from "@material-ui/core/Typography";
+import { lighten } from "@material-ui/core";
+import Link from "@material-ui/core/Link";
+import TableSortLabel from "@material-ui/core/TableSortLabel";
+import ShareFilter from "../Dialogs/ShareFilter";
+import { sizeToString } from "../../../utils";
+import { formatLocalTime } from "../../../utils/datetime";
+import Aria2Helper from "./Aria2Helper";
+import HelpIcon from "@material-ui/icons/Help";
+import { Link as RouterLink } from "react-router-dom";
+import { toggleSnackbar } from "../../../redux/explorer";
+import { useTranslation } from "react-i18next";
+
+const useStyles = makeStyles((theme) => ({
+    root: {
+        [theme.breakpoints.up("md")]: {
+            marginLeft: 100,
+        },
+        marginBottom: 40,
+    },
+    content: {
+        padding: theme.spacing(2),
+    },
+    container: {
+        overflowX: "auto",
+    },
+    tableContainer: {
+        marginTop: 16,
+    },
+    header: {
+        display: "flex",
+        justifyContent: "space-between",
+    },
+    headerRight: {},
+    highlight:
+        theme.palette.type === "light"
+            ? {
+                  color: theme.palette.secondary.main,
+                  backgroundColor: lighten(theme.palette.secondary.light, 0.85),
+              }
+            : {
+                  color: theme.palette.text.primary,
+                  backgroundColor: theme.palette.secondary.dark,
+              },
+    visuallyHidden: {
+        border: 0,
+        clip: "rect(0 0 0 0)",
+        height: 1,
+        margin: -1,
+        overflow: "hidden",
+        padding: 0,
+        position: "absolute",
+        top: 20,
+        width: 1,
+    },
+}));
+
+export default function Download() {
+    const { t } = useTranslation("dashboard", { keyPrefix: "task" });
+    const { t: tDashboard } = useTranslation("dashboard");
+    const classes = useStyles();
+    const [downloads, setDownloads] = useState([]);
+    const [page, setPage] = useState(1);
+    const [pageSize, setPageSize] = useState(10);
+    const [total, setTotal] = useState(0);
+    const [filter, setFilter] = useState({});
+    const [users, setUsers] = useState({});
+    const [search, setSearch] = useState({});
+    const [orderBy, setOrderBy] = useState(["id", "desc"]);
+    const [filterDialog, setFilterDialog] = useState(false);
+    const [selected, setSelected] = useState([]);
+    const [loading, setLoading] = useState(false);
+    const [helperOpen, setHelperOpen] = useState(false);
+
+    const dispatch = useDispatch();
+    const ToggleSnackbar = useCallback(
+        (vertical, horizontal, msg, color) =>
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color)),
+        [dispatch]
+    );
+
+    const loadList = () => {
+        API.post("/admin/download/list", {
+            page: page,
+            page_size: pageSize,
+            order_by: orderBy.join(" "),
+            conditions: filter,
+            searches: search,
+        })
+            .then((response) => {
+                setUsers(response.data.users);
+                setDownloads(response.data.items);
+                setTotal(response.data.total);
+                setSelected([]);
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            });
+    };
+
+    useEffect(() => {
+        loadList();
+    }, [page, pageSize, orderBy, filter, search]);
+
+    const deletePolicy = (id) => {
+        setLoading(true);
+        API.post("/admin/download/delete", { id: [id] })
+            .then(() => {
+                loadList();
+                ToggleSnackbar("top", "right", t("taskDeleted"), "success");
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            })
+            .then(() => {
+                setLoading(false);
+            });
+    };
+
+    const deleteBatch = () => {
+        setLoading(true);
+        API.post("/admin/download/delete", { id: selected })
+            .then(() => {
+                loadList();
+                ToggleSnackbar("top", "right", t("taskDeleted"), "success");
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            })
+            .then(() => {
+                setLoading(false);
+            });
+    };
+
+    const handleSelectAllClick = (event) => {
+        if (event.target.checked) {
+            const newSelecteds = downloads.map((n) => n.ID);
+            setSelected(newSelecteds);
+            return;
+        }
+        setSelected([]);
+    };
+
+    const handleClick = (event, name) => {
+        const selectedIndex = selected.indexOf(name);
+        let newSelected = [];
+
+        if (selectedIndex === -1) {
+            newSelected = newSelected.concat(selected, name);
+        } else if (selectedIndex === 0) {
+            newSelected = newSelected.concat(selected.slice(1));
+        } else if (selectedIndex === selected.length - 1) {
+            newSelected = newSelected.concat(selected.slice(0, -1));
+        } else if (selectedIndex > 0) {
+            newSelected = newSelected.concat(
+                selected.slice(0, selectedIndex),
+                selected.slice(selectedIndex + 1)
+            );
+        }
+
+        setSelected(newSelected);
+    };
+
+    const isSelected = (id) => selected.indexOf(id) !== -1;
+
+    return (
+        <div>
+            <Aria2Helper
+                open={helperOpen}
+                onClose={() => setHelperOpen(false)}
+            />
+            <ShareFilter
+                filter={filter}
+                open={filterDialog}
+                onClose={() => setFilterDialog(false)}
+                setSearch={setSearch}
+                setFilter={setFilter}
+            />
+            <div className={classes.header}>
+                <Button
+                    color={"primary"}
+                    onClick={() => loadList()}
+                    variant={"outlined"}
+                >
+                    {tDashboard("policy.refresh")}
+                </Button>
+                <div className={classes.headerRight}>
+                    <Button
+                        color={"primary"}
+                        onClick={() => setHelperOpen(true)}
+                    >
+                        <HelpIcon /> {"  "}
+                        {t("howToConfigAria2")}
+                    </Button>
+                </div>
+            </div>
+
+            <Paper square className={classes.tableContainer}>
+                {selected.length > 0 && (
+                    <Toolbar className={classes.highlight}>
+                        <Typography
+                            style={{ flex: "1 1 100%" }}
+                            color="inherit"
+                            variant="subtitle1"
+                        >
+                            {tDashboard("user.selectedObjects", {
+                                num: selected.length,
+                            })}
+                        </Typography>
+                        <Tooltip title={tDashboard("policy.delete")}>
+                            <IconButton
+                                onClick={deleteBatch}
+                                disabled={loading}
+                                aria-label="delete"
+                            >
+                                <Delete />
+                            </IconButton>
+                        </Tooltip>
+                    </Toolbar>
+                )}
+                <TableContainer className={classes.container}>
+                    <Table aria-label="sticky table" size={"small"}>
+                        <TableHead>
+                            <TableRow style={{ height: 52 }}>
+                                <TableCell padding="checkbox">
+                                    <Checkbox
+                                        indeterminate={
+                                            selected.length > 0 &&
+                                            selected.length < downloads.length
+                                        }
+                                        checked={
+                                            downloads.length > 0 &&
+                                            selected.length === downloads.length
+                                        }
+                                        onChange={handleSelectAllClick}
+                                        inputProps={{
+                                            "aria-label": "select all desserts",
+                                        }}
+                                    />
+                                </TableCell>
+                                <TableCell style={{ minWidth: 10 }}>
+                                    <TableSortLabel
+                                        active={orderBy[0] === "id"}
+                                        direction={orderBy[1]}
+                                        onClick={() =>
+                                            setOrderBy([
+                                                "id",
+                                                orderBy[1] === "asc"
+                                                    ? "desc"
+                                                    : "asc",
+                                            ])
+                                        }
+                                    >
+                                        #
+                                        {orderBy[0] === "id" ? (
+                                            <span
+                                                className={
+                                                    classes.visuallyHidden
+                                                }
+                                            >
+                                                {orderBy[1] === "desc"
+                                                    ? "sorted descending"
+                                                    : "sorted ascending"}
+                                            </span>
+                                        ) : null}
+                                    </TableSortLabel>
+                                </TableCell>
+                                <TableCell style={{ minWidth: 130 }}>
+                                    {t("srcURL")}
+                                </TableCell>
+                                <TableCell style={{ minWidth: 90 }}>
+                                    {tDashboard("user.status")}
+                                </TableCell>
+                                <TableCell style={{ minWidth: 90 }}>
+                                    {t("node")}
+                                </TableCell>
+                                <TableCell
+                                    style={{ minWidth: 150 }}
+                                    align={"right"}
+                                >
+                                    <TableSortLabel
+                                        active={orderBy[0] === "total_size"}
+                                        direction={orderBy[1]}
+                                        onClick={() =>
+                                            setOrderBy([
+                                                "total_size",
+                                                orderBy[1] === "asc"
+                                                    ? "desc"
+                                                    : "asc",
+                                            ])
+                                        }
+                                    >
+                                        {tDashboard("file.size")}
+                                        {orderBy[0] === "total_size" ? (
+                                            <span
+                                                className={
+                                                    classes.visuallyHidden
+                                                }
+                                            >
+                                                {orderBy[1] === "desc"
+                                                    ? "sorted descending"
+                                                    : "sorted ascending"}
+                                            </span>
+                                        ) : null}
+                                    </TableSortLabel>
+                                </TableCell>
+                                <TableCell style={{ minWidth: 100 }}>
+                                    {t("createdBy")}
+                                </TableCell>
+                                <TableCell style={{ minWidth: 150 }}>
+                                    {tDashboard("file.createdAt")}
+                                </TableCell>
+                                <TableCell style={{ minWidth: 80 }}>
+                                    {tDashboard("policy.actions")}
+                                </TableCell>
+                            </TableRow>
+                        </TableHead>
+                        <TableBody>
+                            {downloads.map((row) => (
+                                <TableRow
+                                    hover
+                                    key={row.ID}
+                                    role="checkbox"
+                                    selected={isSelected(row.ID)}
+                                >
+                                    <TableCell padding="checkbox">
+                                        <Checkbox
+                                            onClick={(event) =>
+                                                handleClick(event, row.ID)
+                                            }
+                                            checked={isSelected(row.ID)}
+                                        />
+                                    </TableCell>
+                                    <TableCell>{row.ID}</TableCell>
+                                    <TableCell
+                                        style={{ wordBreak: "break-all" }}
+                                    >
+                                        {row.Source}
+                                    </TableCell>
+                                    <TableCell>
+                                        {row.Status === 0 && t("ready")}
+                                        {row.Status === 1 && t("downloading")}
+                                        {row.Status === 2 && t("paused")}
+                                        {row.Status === 3 && t("error")}
+                                        {row.Status === 4 && t("finished")}
+                                        {row.Status === 5 && t("canceled")}
+                                        {row.Status === 6 && t("unknown")}
+                                        {row.Status === 7 && t("seeding")}
+                                    </TableCell>
+                                    <TableCell>
+                                        {row.NodeID <= 1 && (
+                                            <Link
+                                                component={RouterLink}
+                                                to={"/admin/node/edit/1"}
+                                            >
+                                                {tDashboard("node.master")}
+                                            </Link>
+                                        )}
+                                        {row.NodeID > 1 && (
+                                            <Link
+                                                component={RouterLink}
+                                                to={
+                                                    "/admin/node/edit/" +
+                                                    row.NodeID
+                                                }
+                                            >
+                                                {tDashboard("node.slave")}#
+                                                {row.NodeID}
+                                            </Link>
+                                        )}
+                                    </TableCell>
+                                    <TableCell align={"right"}>
+                                        {sizeToString(row.TotalSize)}
+                                    </TableCell>
+                                    <TableCell>
+                                        <Link
+                                            href={
+                                                "/admin/user/edit/" + row.UserID
+                                            }
+                                        >
+                                            {users[row.UserID]
+                                                ? users[row.UserID].Nick
+                                                : tDashboard(
+                                                      "file.unknownUploader"
+                                                  )}
+                                        </Link>
+                                    </TableCell>
+                                    <TableCell>
+                                        {formatLocalTime(row.CreatedAt)}
+                                    </TableCell>
+                                    <TableCell>
+                                        <Tooltip
+                                            title={tDashboard("policy.delete")}
+                                        >
+                                            <IconButton
+                                                disabled={loading}
+                                                onClick={() =>
+                                                    deletePolicy(row.ID)
+                                                }
+                                                size={"small"}
+                                            >
+                                                <Delete />
+                                            </IconButton>
+                                        </Tooltip>
+                                    </TableCell>
+                                </TableRow>
+                            ))}
+                        </TableBody>
+                    </Table>
+                </TableContainer>
+                <TablePagination
+                    rowsPerPageOptions={[10, 25, 50, 100]}
+                    component="div"
+                    count={total}
+                    rowsPerPage={pageSize}
+                    page={page - 1}
+                    onChangePage={(e, p) => setPage(p + 1)}
+                    onChangeRowsPerPage={(e) => {
+                        setPageSize(e.target.value);
+                        setPage(1);
+                    }}
+                />
+            </Paper>
+        </div>
+    );
+}
diff --git a/src/component/Admin/Task/Task.js b/src/component/Admin/Task/Task.js
new file mode 100644
index 0000000..edc10ee
--- /dev/null
+++ b/src/component/Admin/Task/Task.js
@@ -0,0 +1,389 @@
+import React, { useCallback, useEffect, useState } from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import API from "../../../middleware/Api";
+import { useDispatch } from "react-redux";
+import Paper from "@material-ui/core/Paper";
+import Button from "@material-ui/core/Button";
+import TableContainer from "@material-ui/core/TableContainer";
+import Table from "@material-ui/core/Table";
+import TableHead from "@material-ui/core/TableHead";
+import TableRow from "@material-ui/core/TableRow";
+import TableCell from "@material-ui/core/TableCell";
+import TableBody from "@material-ui/core/TableBody";
+import TablePagination from "@material-ui/core/TablePagination";
+import IconButton from "@material-ui/core/IconButton";
+import { Delete } from "@material-ui/icons";
+import Tooltip from "@material-ui/core/Tooltip";
+import Checkbox from "@material-ui/core/Checkbox";
+import Toolbar from "@material-ui/core/Toolbar";
+import Typography from "@material-ui/core/Typography";
+import { lighten } from "@material-ui/core";
+import Link from "@material-ui/core/Link";
+import TableSortLabel from "@material-ui/core/TableSortLabel";
+import ShareFilter from "../Dialogs/ShareFilter";
+import { getTaskProgress, getTaskStatus, getTaskType } from "../../../config";
+import { formatLocalTime } from "../../../utils/datetime";
+import { toggleSnackbar } from "../../../redux/explorer";
+import { useTranslation } from "react-i18next";
+
+const useStyles = makeStyles((theme) => ({
+    root: {
+        [theme.breakpoints.up("md")]: {
+            marginLeft: 100,
+        },
+        marginBottom: 40,
+    },
+    content: {
+        padding: theme.spacing(2),
+    },
+    container: {
+        overflowX: "auto",
+    },
+    tableContainer: {
+        marginTop: 16,
+    },
+    header: {
+        display: "flex",
+        justifyContent: "space-between",
+    },
+    headerRight: {},
+    highlight:
+        theme.palette.type === "light"
+            ? {
+                  color: theme.palette.secondary.main,
+                  backgroundColor: lighten(theme.palette.secondary.light, 0.85),
+              }
+            : {
+                  color: theme.palette.text.primary,
+                  backgroundColor: theme.palette.secondary.dark,
+              },
+    visuallyHidden: {
+        border: 0,
+        clip: "rect(0 0 0 0)",
+        height: 1,
+        margin: -1,
+        overflow: "hidden",
+        padding: 0,
+        position: "absolute",
+        top: 20,
+        width: 1,
+    },
+}));
+
+export default function Task() {
+    const { t } = useTranslation("dashboard", { keyPrefix: "task" });
+    const { t: tDashboard } = useTranslation("dashboard");
+    const classes = useStyles();
+    const [tasks, setTasks] = useState([]);
+    const [page, setPage] = useState(1);
+    const [pageSize, setPageSize] = useState(10);
+    const [total, setTotal] = useState(0);
+    const [filter, setFilter] = useState({});
+    const [users, setUsers] = useState({});
+    const [search, setSearch] = useState({});
+    const [orderBy, setOrderBy] = useState(["id", "desc"]);
+    const [filterDialog, setFilterDialog] = useState(false);
+    const [selected, setSelected] = useState([]);
+    const [loading, setLoading] = useState(false);
+
+    const dispatch = useDispatch();
+    const ToggleSnackbar = useCallback(
+        (vertical, horizontal, msg, color) =>
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color)),
+        [dispatch]
+    );
+
+    const loadList = () => {
+        API.post("/admin/task/list", {
+            page: page,
+            page_size: pageSize,
+            order_by: orderBy.join(" "),
+            conditions: filter,
+            searches: search,
+        })
+            .then((response) => {
+                setUsers(response.data.users);
+                setTasks(response.data.items);
+                setTotal(response.data.total);
+                setSelected([]);
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            });
+    };
+
+    useEffect(() => {
+        loadList();
+    }, [page, pageSize, orderBy, filter, search]);
+
+    const deletePolicy = (id) => {
+        setLoading(true);
+        API.post("/admin/task/delete", { id: [id] })
+            .then(() => {
+                loadList();
+                ToggleSnackbar("top", "right", t("taskDeleted"), "success");
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            })
+            .then(() => {
+                setLoading(false);
+            });
+    };
+
+    const deleteBatch = () => {
+        setLoading(true);
+        API.post("/admin/task/delete", { id: selected })
+            .then(() => {
+                loadList();
+                ToggleSnackbar("top", "right", t("taskDeleted"), "success");
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            })
+            .then(() => {
+                setLoading(false);
+            });
+    };
+
+    const handleSelectAllClick = (event) => {
+        if (event.target.checked) {
+            const newSelecteds = tasks.map((n) => n.ID);
+            setSelected(newSelecteds);
+            return;
+        }
+        setSelected([]);
+    };
+
+    const handleClick = (event, name) => {
+        const selectedIndex = selected.indexOf(name);
+        let newSelected = [];
+
+        if (selectedIndex === -1) {
+            newSelected = newSelected.concat(selected, name);
+        } else if (selectedIndex === 0) {
+            newSelected = newSelected.concat(selected.slice(1));
+        } else if (selectedIndex === selected.length - 1) {
+            newSelected = newSelected.concat(selected.slice(0, -1));
+        } else if (selectedIndex > 0) {
+            newSelected = newSelected.concat(
+                selected.slice(0, selectedIndex),
+                selected.slice(selectedIndex + 1)
+            );
+        }
+
+        setSelected(newSelected);
+    };
+
+    const getError = (error) => {
+        if (error === "") {
+            return "-";
+        }
+        try {
+            const res = JSON.parse(error);
+            return res.msg;
+        } catch (e) {
+            return t("unknown");
+        }
+    };
+
+    const isSelected = (id) => selected.indexOf(id) !== -1;
+
+    return (
+        <div>
+            <ShareFilter
+                filter={filter}
+                open={filterDialog}
+                onClose={() => setFilterDialog(false)}
+                setSearch={setSearch}
+                setFilter={setFilter}
+            />
+            <div className={classes.header}>
+                <div className={classes.headerRight}>
+                    <Button
+                        color={"primary"}
+                        onClick={() => loadList()}
+                        variant={"outlined"}
+                    >
+                        {tDashboard("policy.refresh")}
+                    </Button>
+                </div>
+            </div>
+
+            <Paper square className={classes.tableContainer}>
+                {selected.length > 0 && (
+                    <Toolbar className={classes.highlight}>
+                        <Typography
+                            style={{ flex: "1 1 100%" }}
+                            color="inherit"
+                            variant="subtitle1"
+                        >
+                            {tDashboard("user.selectedObjects", {
+                                num: selected.length,
+                            })}
+                        </Typography>
+                        <Tooltip title={tDashboard("policy.delete")}>
+                            <IconButton
+                                onClick={deleteBatch}
+                                disabled={loading}
+                                aria-label="delete"
+                            >
+                                <Delete />
+                            </IconButton>
+                        </Tooltip>
+                    </Toolbar>
+                )}
+                <TableContainer className={classes.container}>
+                    <Table aria-label="sticky table" size={"small"}>
+                        <TableHead>
+                            <TableRow style={{ height: 52 }}>
+                                <TableCell padding="checkbox">
+                                    <Checkbox
+                                        indeterminate={
+                                            selected.length > 0 &&
+                                            selected.length < tasks.length
+                                        }
+                                        checked={
+                                            tasks.length > 0 &&
+                                            selected.length === tasks.length
+                                        }
+                                        onChange={handleSelectAllClick}
+                                        inputProps={{
+                                            "aria-label": "select all desserts",
+                                        }}
+                                    />
+                                </TableCell>
+                                <TableCell style={{ minWidth: 10 }}>
+                                    <TableSortLabel
+                                        active={orderBy[0] === "id"}
+                                        direction={orderBy[1]}
+                                        onClick={() =>
+                                            setOrderBy([
+                                                "id",
+                                                orderBy[1] === "asc"
+                                                    ? "desc"
+                                                    : "asc",
+                                            ])
+                                        }
+                                    >
+                                        #
+                                        {orderBy[0] === "id" ? (
+                                            <span
+                                                className={
+                                                    classes.visuallyHidden
+                                                }
+                                            >
+                                                {orderBy[1] === "desc"
+                                                    ? "sorted descending"
+                                                    : "sorted ascending"}
+                                            </span>
+                                        ) : null}
+                                    </TableSortLabel>
+                                </TableCell>
+                                <TableCell style={{ minWidth: 130 }}>
+                                    {tDashboard("policy.type")}
+                                </TableCell>
+                                <TableCell style={{ minWidth: 90 }}>
+                                    {tDashboard("user.status")}
+                                </TableCell>
+                                <TableCell style={{ minWidth: 90 }}>
+                                    {t("lastProgress")}
+                                </TableCell>
+                                <TableCell style={{ minWidth: 150 }}>
+                                    {t("errorMsg")}
+                                </TableCell>
+                                <TableCell style={{ minWidth: 100 }}>
+                                    {t("createdBy")}
+                                </TableCell>
+                                <TableCell style={{ minWidth: 150 }}>
+                                    {tDashboard("file.createdAt")}
+                                </TableCell>
+                                <TableCell style={{ minWidth: 80 }}>
+                                    {tDashboard("policy.actions")}
+                                </TableCell>
+                            </TableRow>
+                        </TableHead>
+                        <TableBody>
+                            {tasks.map((row) => (
+                                <TableRow
+                                    hover
+                                    key={row.ID}
+                                    role="checkbox"
+                                    selected={isSelected(row.ID)}
+                                >
+                                    <TableCell padding="checkbox">
+                                        <Checkbox
+                                            onClick={(event) =>
+                                                handleClick(event, row.ID)
+                                            }
+                                            checked={isSelected(row.ID)}
+                                        />
+                                    </TableCell>
+                                    <TableCell>{row.ID}</TableCell>
+                                    <TableCell
+                                        style={{ wordBreak: "break-all" }}
+                                    >
+                                        {getTaskType(row.Type)}
+                                    </TableCell>
+                                    <TableCell>
+                                        {getTaskStatus(row.Status)}
+                                    </TableCell>
+                                    <TableCell>
+                                        {getTaskProgress(
+                                            row.Type,
+                                            row.Progress
+                                        )}
+                                    </TableCell>
+                                    <TableCell className={classes.noWrap}>
+                                        {getError(row.Error)}
+                                    </TableCell>
+                                    <TableCell>
+                                        <Link
+                                            href={
+                                                "/admin/user/edit/" + row.UserID
+                                            }
+                                        >
+                                            {users[row.UserID]
+                                                ? users[row.UserID].Nick
+                                                : t("unknown")}
+                                        </Link>
+                                    </TableCell>
+                                    <TableCell>
+                                        {formatLocalTime(row.CreatedAt)}
+                                    </TableCell>
+                                    <TableCell>
+                                        <Tooltip
+                                            title={tDashboard("policy.delete")}
+                                        >
+                                            <IconButton
+                                                disabled={loading}
+                                                onClick={() =>
+                                                    deletePolicy(row.ID)
+                                                }
+                                                size={"small"}
+                                            >
+                                                <Delete />
+                                            </IconButton>
+                                        </Tooltip>
+                                    </TableCell>
+                                </TableRow>
+                            ))}
+                        </TableBody>
+                    </Table>
+                </TableContainer>
+                <TablePagination
+                    rowsPerPageOptions={[10, 25, 50, 100]}
+                    component="div"
+                    count={total}
+                    rowsPerPage={pageSize}
+                    page={page - 1}
+                    onChangePage={(e, p) => setPage(p + 1)}
+                    onChangeRowsPerPage={(e) => {
+                        setPageSize(e.target.value);
+                        setPage(1);
+                    }}
+                />
+            </Paper>
+        </div>
+    );
+}
diff --git a/src/component/Admin/User/EditUser.js b/src/component/Admin/User/EditUser.js
new file mode 100644
index 0000000..a958f72
--- /dev/null
+++ b/src/component/Admin/User/EditUser.js
@@ -0,0 +1,36 @@
+import React, { useCallback, useEffect, useState } from "react";
+import { useParams } from "react-router";
+import API from "../../../middleware/Api";
+import { useDispatch } from "react-redux";
+import UserForm from "./UserForm";
+import { toggleSnackbar } from "../../../redux/explorer";
+
+export default function EditUserPreload() {
+    const [user, setUser] = useState({});
+
+    const { id } = useParams();
+
+    const dispatch = useDispatch();
+    const ToggleSnackbar = useCallback(
+        (vertical, horizontal, msg, color) =>
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color)),
+        [dispatch]
+    );
+
+    useEffect(() => {
+        setUser({});
+        API.get("/admin/user/" + id)
+            .then((response) => {
+                // 整型转换
+                ["Status", "GroupID", "Score"].forEach((v) => {
+                    response.data[v] = response.data[v].toString();
+                });
+                setUser(response.data);
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            });
+    }, [id]);
+
+    return <div>{user.ID !== undefined && <UserForm user={user} />}</div>;
+}
diff --git a/src/component/Admin/User/User.js b/src/component/Admin/User/User.js
new file mode 100644
index 0000000..37a9d1f
--- /dev/null
+++ b/src/component/Admin/User/User.js
@@ -0,0 +1,541 @@
+import React, { useCallback, useEffect, useState } from "react";
+import { makeStyles, useTheme } from "@material-ui/core/styles";
+import API from "../../../middleware/Api";
+import { useDispatch } from "react-redux";
+import Paper from "@material-ui/core/Paper";
+import Button from "@material-ui/core/Button";
+import TableContainer from "@material-ui/core/TableContainer";
+import Table from "@material-ui/core/Table";
+import TableHead from "@material-ui/core/TableHead";
+import TableRow from "@material-ui/core/TableRow";
+import TableCell from "@material-ui/core/TableCell";
+import { sizeToString } from "../../../utils";
+import TableBody from "@material-ui/core/TableBody";
+import TablePagination from "@material-ui/core/TablePagination";
+import { useHistory } from "react-router";
+import IconButton from "@material-ui/core/IconButton";
+import { Block, Delete, Edit, FilterList } from "@material-ui/icons";
+import Tooltip from "@material-ui/core/Tooltip";
+import Checkbox from "@material-ui/core/Checkbox";
+import Toolbar from "@material-ui/core/Toolbar";
+import Typography from "@material-ui/core/Typography";
+import { lighten } from "@material-ui/core";
+import Link from "@material-ui/core/Link";
+import TableSortLabel from "@material-ui/core/TableSortLabel";
+import UserFilter from "../Dialogs/UserFilter";
+import Badge from "@material-ui/core/Badge";
+import { toggleSnackbar } from "../../../redux/explorer";
+import { useTranslation } from "react-i18next";
+
+const useStyles = makeStyles((theme) => ({
+    root: {
+        [theme.breakpoints.up("md")]: {
+            marginLeft: 100,
+        },
+        marginBottom: 40,
+    },
+    content: {
+        padding: theme.spacing(2),
+    },
+    container: {
+        overflowX: "auto",
+    },
+    tableContainer: {
+        marginTop: 16,
+    },
+    header: {
+        display: "flex",
+        justifyContent: "space-between",
+    },
+    headerRight: {},
+    highlight:
+        theme.palette.type === "light"
+            ? {
+                  color: theme.palette.secondary.main,
+                  backgroundColor: lighten(theme.palette.secondary.light, 0.85),
+              }
+            : {
+                  color: theme.palette.text.primary,
+                  backgroundColor: theme.palette.secondary.dark,
+              },
+    visuallyHidden: {
+        border: 0,
+        clip: "rect(0 0 0 0)",
+        height: 1,
+        margin: -1,
+        overflow: "hidden",
+        padding: 0,
+        position: "absolute",
+        top: 20,
+        width: 1,
+    },
+}));
+
+export default function Group() {
+    const { t } = useTranslation("dashboard", { keyPrefix: "user" });
+    const { t: tDashboard } = useTranslation("dashboard");
+    const classes = useStyles();
+    const [users, setUsers] = useState([]);
+    const [page, setPage] = useState(1);
+    const [pageSize, setPageSize] = useState(10);
+    const [total, setTotal] = useState(0);
+    const [filter, setFilter] = useState({});
+    const [search, setSearch] = useState({});
+    const [orderBy, setOrderBy] = useState(["id", "desc"]);
+    const [filterDialog, setFilterDialog] = useState(false);
+    const [selected, setSelected] = useState([]);
+    const [loading, setLoading] = useState(false);
+
+    const history = useHistory();
+    const theme = useTheme();
+
+    const dispatch = useDispatch();
+    const ToggleSnackbar = useCallback(
+        (vertical, horizontal, msg, color) =>
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color)),
+        [dispatch]
+    );
+
+    const loadList = () => {
+        API.post("/admin/user/list", {
+            page: page,
+            page_size: pageSize,
+            order_by: orderBy.join(" "),
+            conditions: filter,
+            searches: search,
+        })
+            .then((response) => {
+                setUsers(response.data.items);
+                setTotal(response.data.total);
+                setSelected([]);
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            });
+    };
+
+    useEffect(() => {
+        loadList();
+    }, [page, pageSize, orderBy, filter, search]);
+
+    const deletePolicy = (id) => {
+        setLoading(true);
+        API.post("/admin/user/delete", { id: [id] })
+            .then(() => {
+                loadList();
+                ToggleSnackbar("top", "right", "用户已删除", "success");
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            })
+            .then(() => {
+                setLoading(false);
+            });
+    };
+
+    const deleteBatch = () => {
+        setLoading(true);
+        API.post("/admin/user/delete", { id: selected })
+            .then(() => {
+                loadList();
+                ToggleSnackbar("top", "right", t("deleted"), "success");
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            })
+            .then(() => {
+                setLoading(false);
+            });
+    };
+
+    const block = (id) => {
+        setLoading(true);
+        API.patch("/admin/user/ban/" + id)
+            .then((response) => {
+                setUsers(
+                    users.map((v) => {
+                        if (v.ID === id) {
+                            const newUser = { ...v, Status: response.data };
+                            return newUser;
+                        }
+                        return v;
+                    })
+                );
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            })
+            .then(() => {
+                setLoading(false);
+            });
+    };
+
+    const handleSelectAllClick = (event) => {
+        if (event.target.checked) {
+            const newSelecteds = users.map((n) => n.ID);
+            setSelected(newSelecteds);
+            return;
+        }
+        setSelected([]);
+    };
+
+    const handleClick = (event, name) => {
+        const selectedIndex = selected.indexOf(name);
+        let newSelected = [];
+
+        if (selectedIndex === -1) {
+            newSelected = newSelected.concat(selected, name);
+        } else if (selectedIndex === 0) {
+            newSelected = newSelected.concat(selected.slice(1));
+        } else if (selectedIndex === selected.length - 1) {
+            newSelected = newSelected.concat(selected.slice(0, -1));
+        } else if (selectedIndex > 0) {
+            newSelected = newSelected.concat(
+                selected.slice(0, selectedIndex),
+                selected.slice(selectedIndex + 1)
+            );
+        }
+
+        setSelected(newSelected);
+    };
+
+    const isSelected = (id) => selected.indexOf(id) !== -1;
+
+    return (
+        <div>
+            <UserFilter
+                filter={filter}
+                open={filterDialog}
+                onClose={() => setFilterDialog(false)}
+                setSearch={setSearch}
+                setFilter={setFilter}
+            />
+            <div className={classes.header}>
+                <Button
+                    style={{ alignSelf: "center" }}
+                    color={"primary"}
+                    onClick={() => history.push("/admin/user/add")}
+                    variant={"contained"}
+                >
+                    {t("new")}
+                </Button>
+                <div className={classes.headerRight}>
+                    <Tooltip title={t("filter")}>
+                        <IconButton
+                            style={{ marginRight: 8 }}
+                            onClick={() => setFilterDialog(true)}
+                        >
+                            <Badge
+                                color="secondary"
+                                variant="dot"
+                                invisible={
+                                    Object.keys(search).length === 0 &&
+                                    Object.keys(filter).length === 0
+                                }
+                            >
+                                <FilterList />
+                            </Badge>
+                        </IconButton>
+                    </Tooltip>
+                    <Button
+                        color={"primary"}
+                        onClick={() => loadList()}
+                        variant={"outlined"}
+                    >
+                        {tDashboard("policy.refresh")}
+                    </Button>
+                </div>
+            </div>
+
+            <Paper square className={classes.tableContainer}>
+                {selected.length > 0 && (
+                    <Toolbar className={classes.highlight}>
+                        <Typography
+                            style={{ flex: "1 1 100%" }}
+                            color="inherit"
+                            variant="subtitle1"
+                        >
+                            {t("selectedObjects", { num: selected.length })}
+                        </Typography>
+                        <Tooltip title={tDashboard("policy.delete")}>
+                            <IconButton
+                                onClick={deleteBatch}
+                                disabled={loading}
+                                aria-label="delete"
+                            >
+                                <Delete />
+                            </IconButton>
+                        </Tooltip>
+                    </Toolbar>
+                )}
+                <TableContainer className={classes.container}>
+                    <Table aria-label="sticky table" size={"small"}>
+                        <TableHead>
+                            <TableRow style={{ height: 52 }}>
+                                <TableCell padding="checkbox">
+                                    <Checkbox
+                                        indeterminate={
+                                            selected.length > 0 &&
+                                            selected.length < users.length
+                                        }
+                                        checked={
+                                            users.length > 0 &&
+                                            selected.length === users.length
+                                        }
+                                        onChange={handleSelectAllClick}
+                                        inputProps={{
+                                            "aria-label": "select all desserts",
+                                        }}
+                                    />
+                                </TableCell>
+                                <TableCell style={{ minWidth: 59 }}>
+                                    <TableSortLabel
+                                        active={orderBy[0] === "id"}
+                                        direction={orderBy[1]}
+                                        onClick={() =>
+                                            setOrderBy([
+                                                "id",
+                                                orderBy[1] === "asc"
+                                                    ? "desc"
+                                                    : "asc",
+                                            ])
+                                        }
+                                    >
+                                        {tDashboard("node.#")}
+                                        {orderBy[0] === "id" ? (
+                                            <span
+                                                className={
+                                                    classes.visuallyHidden
+                                                }
+                                            >
+                                                {orderBy[1] === "desc"
+                                                    ? "sorted descending"
+                                                    : "sorted ascending"}
+                                            </span>
+                                        ) : null}
+                                    </TableSortLabel>
+                                </TableCell>
+                                <TableCell style={{ minWidth: 120 }}>
+                                    <TableSortLabel
+                                        active={orderBy[0] === "nick"}
+                                        direction={orderBy[1]}
+                                        onClick={() =>
+                                            setOrderBy([
+                                                "nick",
+                                                orderBy[1] === "asc"
+                                                    ? "desc"
+                                                    : "asc",
+                                            ])
+                                        }
+                                    >
+                                        {t("nick")}
+                                        {orderBy[0] === "nick" ? (
+                                            <span
+                                                className={
+                                                    classes.visuallyHidden
+                                                }
+                                            >
+                                                {orderBy[1] === "desc"
+                                                    ? "sorted descending"
+                                                    : "sorted ascending"}
+                                            </span>
+                                        ) : null}
+                                    </TableSortLabel>
+                                </TableCell>
+                                <TableCell style={{ minWidth: 170 }}>
+                                    <TableSortLabel
+                                        active={orderBy[0] === "email"}
+                                        direction={orderBy[1]}
+                                        onClick={() =>
+                                            setOrderBy([
+                                                "email",
+                                                orderBy[1] === "asc"
+                                                    ? "desc"
+                                                    : "asc",
+                                            ])
+                                        }
+                                    >
+                                        {t("email")}
+                                        {orderBy[0] === "email" ? (
+                                            <span
+                                                className={
+                                                    classes.visuallyHidden
+                                                }
+                                            >
+                                                {orderBy[1] === "desc"
+                                                    ? "sorted descending"
+                                                    : "sorted ascending"}
+                                            </span>
+                                        ) : null}
+                                    </TableSortLabel>
+                                </TableCell>
+                                <TableCell style={{ minWidth: 70 }}>
+                                    {t("group")}
+                                </TableCell>
+                                <TableCell style={{ minWidth: 50 }}>
+                                    {t("status")}
+                                </TableCell>
+                                <TableCell
+                                    align={"right"}
+                                    style={{ minWidth: 80 }}
+                                >
+                                    <TableSortLabel
+                                        active={orderBy[0] === "storage"}
+                                        direction={orderBy[1]}
+                                        onClick={() =>
+                                            setOrderBy([
+                                                "storage",
+                                                orderBy[1] === "asc"
+                                                    ? "desc"
+                                                    : "asc",
+                                            ])
+                                        }
+                                    >
+                                        {t("usedStorage")}
+                                        {orderBy[0] === "storage" ? (
+                                            <span
+                                                className={
+                                                    classes.visuallyHidden
+                                                }
+                                            >
+                                                {orderBy[1] === "desc"
+                                                    ? "sorted descending"
+                                                    : "sorted ascending"}
+                                            </span>
+                                        ) : null}
+                                    </TableSortLabel>
+                                </TableCell>
+                                <TableCell style={{ minWidth: 100 }}>
+                                    {tDashboard("policy.actions")}
+                                </TableCell>
+                            </TableRow>
+                        </TableHead>
+                        <TableBody>
+                            {users.map((row) => (
+                                <TableRow
+                                    hover
+                                    key={row.ID}
+                                    role="checkbox"
+                                    selected={isSelected(row.ID)}
+                                >
+                                    <TableCell padding="checkbox">
+                                        <Checkbox
+                                            onClick={(event) =>
+                                                handleClick(event, row.ID)
+                                            }
+                                            checked={isSelected(row.ID)}
+                                        />
+                                    </TableCell>
+                                    <TableCell>{row.ID}</TableCell>
+                                    <TableCell>{row.Nick}</TableCell>
+                                    <TableCell>{row.Email}</TableCell>
+                                    <TableCell>
+                                        <Link
+                                            href={
+                                                "/admin/group/edit/" +
+                                                row.Group.ID
+                                            }
+                                        >
+                                            {row.Group.Name}
+                                        </Link>
+                                    </TableCell>
+                                    <TableCell>
+                                        {row.Status === 0 && (
+                                            <Typography
+                                                style={{
+                                                    color: theme.palette.success
+                                                        .main,
+                                                }}
+                                                variant={"body2"}
+                                            >
+                                                {t("active")}
+                                            </Typography>
+                                        )}
+                                        {row.Status === 1 && (
+                                            <Typography
+                                                color={"textSecondary"}
+                                                variant={"body2"}
+                                            >
+                                                {t("notActivated")}
+                                            </Typography>
+                                        )}
+                                        {row.Status === 2 && (
+                                            <Typography
+                                                color={"error"}
+                                                variant={"body2"}
+                                            >
+                                                {t("banned")}
+                                            </Typography>
+                                        )}
+                                        {row.Status === 3 && (
+                                            <Typography
+                                                color={"error"}
+                                                variant={"body2"}
+                                            >
+                                                {t("bannedBySys")}
+                                            </Typography>
+                                        )}
+                                    </TableCell>
+                                    <TableCell align={"right"}>
+                                        {sizeToString(row.Storage)}
+                                    </TableCell>
+                                    <TableCell>
+                                        <Tooltip
+                                            title={tDashboard("node.edit")}
+                                        >
+                                            <IconButton
+                                                onClick={() =>
+                                                    history.push(
+                                                        "/admin/user/edit/" +
+                                                            row.ID
+                                                    )
+                                                }
+                                                size={"small"}
+                                            >
+                                                <Edit />
+                                            </IconButton>
+                                        </Tooltip>
+                                        <Tooltip title={t("toggleBan")}>
+                                            <IconButton
+                                                disabled={loading}
+                                                onClick={() => block(row.ID)}
+                                                size={"small"}
+                                            >
+                                                <Block />
+                                            </IconButton>
+                                        </Tooltip>
+                                        <Tooltip
+                                            title={tDashboard("node.delete")}
+                                        >
+                                            <IconButton
+                                                disabled={loading}
+                                                onClick={() =>
+                                                    deletePolicy(row.ID)
+                                                }
+                                                size={"small"}
+                                            >
+                                                <Delete />
+                                            </IconButton>
+                                        </Tooltip>
+                                    </TableCell>
+                                </TableRow>
+                            ))}
+                        </TableBody>
+                    </Table>
+                </TableContainer>
+                <TablePagination
+                    rowsPerPageOptions={[10, 25, 100]}
+                    component="div"
+                    count={total}
+                    rowsPerPage={pageSize}
+                    page={page - 1}
+                    onChangePage={(e, p) => setPage(p + 1)}
+                    onChangeRowsPerPage={(e) => {
+                        setPageSize(e.target.value);
+                        setPage(1);
+                    }}
+                />
+            </Paper>
+        </div>
+    );
+}
diff --git a/src/component/Admin/User/UserForm.js b/src/component/Admin/User/UserForm.js
new file mode 100644
index 0000000..817ae82
--- /dev/null
+++ b/src/component/Admin/User/UserForm.js
@@ -0,0 +1,273 @@
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import Typography from "@material-ui/core/Typography";
+import InputLabel from "@material-ui/core/InputLabel";
+import FormControl from "@material-ui/core/FormControl";
+import Input from "@material-ui/core/Input";
+import FormHelperText from "@material-ui/core/FormHelperText";
+import Button from "@material-ui/core/Button";
+import API from "../../../middleware/Api";
+import { useDispatch } from "react-redux";
+import Select from "@material-ui/core/Select";
+import MenuItem from "@material-ui/core/MenuItem";
+import { useHistory } from "react-router";
+import { toggleSnackbar } from "../../../redux/explorer";
+import { useTranslation } from "react-i18next";
+
+const useStyles = makeStyles((theme) => ({
+    root: {
+        [theme.breakpoints.up("md")]: {
+            marginLeft: 100,
+        },
+        marginBottom: 40,
+    },
+    form: {
+        maxWidth: 400,
+        marginTop: 20,
+        marginBottom: 20,
+    },
+    formContainer: {
+        [theme.breakpoints.up("md")]: {
+            padding: "0px 24px 0 24px",
+        },
+    },
+}));
+export default function UserForm(props) {
+    const { t } = useTranslation("dashboard", { keyPrefix: "user" });
+    const { t: tDashboard } = useTranslation("dashboard");
+    const classes = useStyles();
+    const [loading, setLoading] = useState(false);
+    const [user, setUser] = useState(
+        props.user
+            ? props.user
+            : {
+                  ID: 0,
+                  Email: "",
+                  Nick: "",
+                  Password: "", // 为空时只读
+                  Status: "0", // 转换类型
+                  GroupID: "2", // 转换类型
+                  Score: "0", // 转换类型
+                  TwoFactor: "",
+              }
+    );
+    const [groups, setGroups] = useState([]);
+
+    const history = useHistory();
+
+    const dispatch = useDispatch();
+    const ToggleSnackbar = useCallback(
+        (vertical, horizontal, msg, color) =>
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color)),
+        [dispatch]
+    );
+
+    useEffect(() => {
+        API.get("/admin/groups")
+            .then((response) => {
+                setGroups(response.data);
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            });
+    }, []);
+
+    const handleChange = (name) => (event) => {
+        setUser({
+            ...user,
+            [name]: event.target.value,
+        });
+    };
+
+    const submit = (e) => {
+        e.preventDefault();
+        const userCopy = { ...user };
+
+        // 整型转换
+        ["Status", "GroupID", "Score"].forEach((v) => {
+            userCopy[v] = parseInt(userCopy[v]);
+        });
+
+        setLoading(true);
+        API.post("/admin/user", {
+            user: userCopy,
+            password: userCopy.Password,
+        })
+            .then(() => {
+                history.push("/admin/user");
+                ToggleSnackbar(
+                    "top",
+                    "right",
+                    props.user ? t("saved") : t("added"),
+                    "success"
+                );
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            })
+            .then(() => {
+                setLoading(false);
+            });
+    };
+
+    const groupSelections = useMemo(
+        () =>
+            groups.map((v) => {
+                if (v.ID === 3) {
+                    return null;
+                }
+                return (
+                    <MenuItem key={v.ID} value={v.ID.toString()}>
+                        {v.Name}
+                    </MenuItem>
+                );
+            }),
+        [groups]
+    );
+
+    return (
+        <div>
+            <form onSubmit={submit}>
+                <div className={classes.root}>
+                    <Typography variant="h6" gutterBottom>
+                        {user.ID === 0 && t("new")}
+                        {user.ID !== 0 && t("editUser", { nick: user.Nick })}
+                    </Typography>
+
+                    <div className={classes.formContainer}>
+                        <div className={classes.form}>
+                            <FormControl fullWidth>
+                                <InputLabel htmlFor="component-helper">
+                                    {t("email")}
+                                </InputLabel>
+                                <Input
+                                    value={user.Email}
+                                    type={"email"}
+                                    onChange={handleChange("Email")}
+                                    required
+                                />
+                            </FormControl>
+                        </div>
+
+                        <div className={classes.form}>
+                            <FormControl fullWidth>
+                                <InputLabel htmlFor="component-helper">
+                                    {t("nick")}
+                                </InputLabel>
+                                <Input
+                                    value={user.Nick}
+                                    onChange={handleChange("Nick")}
+                                    required
+                                />
+                            </FormControl>
+                        </div>
+
+                        <div className={classes.form}>
+                            <FormControl fullWidth>
+                                <InputLabel htmlFor="component-helper">
+                                    {t("password")}
+                                </InputLabel>
+                                <Input
+                                    type={"password"}
+                                    value={user.Password}
+                                    onChange={handleChange("Password")}
+                                    required={user.ID === 0}
+                                />
+                                <FormHelperText id="component-helper-text">
+                                    {user.ID !== 0 && t("passwordDes")}
+                                </FormHelperText>
+                            </FormControl>
+                        </div>
+
+                        <div className={classes.form}>
+                            <FormControl fullWidth>
+                                <InputLabel htmlFor="component-helper">
+                                    {t("group")}
+                                </InputLabel>
+                                <Select
+                                    value={user.GroupID}
+                                    onChange={handleChange("GroupID")}
+                                    required
+                                >
+                                    {groupSelections}
+                                </Select>
+                                <FormHelperText id="component-helper-text">
+                                    {t("groupDes")}
+                                </FormHelperText>
+                            </FormControl>
+                        </div>
+
+                        <div className={classes.form}>
+                            <FormControl fullWidth>
+                                <InputLabel htmlFor="component-helper">
+                                    {t("status")}
+                                </InputLabel>
+                                <Select
+                                    value={user.Status}
+                                    onChange={handleChange("Status")}
+                                    required
+                                >
+                                    <MenuItem value={"0"}>
+                                        {t("active")}
+                                    </MenuItem>
+                                    <MenuItem value={"1"}>
+                                        {t("notActivated")}
+                                    </MenuItem>
+                                    <MenuItem value={"2"}>
+                                        {t("banned")}
+                                    </MenuItem>
+                                    <MenuItem value={"3"}>
+                                        {t("bannedBySys")}
+                                    </MenuItem>
+                                </Select>
+                            </FormControl>
+                        </div>
+
+                        <div className={classes.form}>
+                            <FormControl fullWidth>
+                                <InputLabel htmlFor="component-helper">
+                                    {tDashboard("vas.credits")}
+                                </InputLabel>
+                                <Input
+                                    type={"number"}
+                                    inputProps={{
+                                        min: 0,
+                                        step: 1,
+                                    }}
+                                    value={user.Score}
+                                    onChange={handleChange("Score")}
+                                    required
+                                />
+                            </FormControl>
+                        </div>
+
+                        <div className={classes.form}>
+                            <FormControl fullWidth>
+                                <InputLabel htmlFor="component-helper">
+                                    {t("2FASecret")}
+                                </InputLabel>
+                                <Input
+                                    value={user.TwoFactor}
+                                    onChange={handleChange("TwoFactor")}
+                                />
+                            </FormControl>
+                            <FormHelperText id="component-helper-text">
+                                {t("2FASecretDes")}
+                            </FormHelperText>
+                        </div>
+                    </div>
+                </div>
+                <div className={classes.root}>
+                    <Button
+                        disabled={loading}
+                        type={"submit"}
+                        variant={"contained"}
+                        color={"primary"}
+                    >
+                        {tDashboard("settings.save")}
+                    </Button>
+                </div>
+            </form>
+        </div>
+    );
+}
diff --git a/src/component/Common/ICPFooter.js b/src/component/Common/ICPFooter.js
new file mode 100644
index 0000000..d0390b4
--- /dev/null
+++ b/src/component/Common/ICPFooter.js
@@ -0,0 +1,42 @@
+import { Link, makeStyles } from "@material-ui/core";
+import React, { useEffect, useState } from "react";
+import { useSelector } from "react-redux";
+import { useLocation } from "react-router";
+import pageHelper from "../../utils/page";
+
+const useStyles = makeStyles(() => ({
+    icp: {
+        padding: "8px 24px",
+        position: "absolute",
+        bottom: 0,
+    },
+}));
+
+export const ICPFooter = () => {
+    const siteICPId = useSelector((state) => state.siteConfig.siteICPId);
+    const classes = useStyles();
+    const location = useLocation();
+    const [show, setShow] = useState(true);
+
+    useEffect(() => {
+        // 只在分享和登录界面显示
+        const isSharePage = pageHelper.isSharePage(location.pathname);
+        const isLoginPage = pageHelper.isLoginPage(location.pathname);
+        setShow(siteICPId && (isSharePage || isLoginPage));
+    }, [siteICPId, location]);
+
+    if (!show) {
+        return <></>;
+    }
+    return (
+        <div className={classes.icp}>
+            <Link
+                href="https://beian.miit.gov.cn/"
+                rel="noopener noreferrer"
+                target="_blank"
+            >
+                {siteICPId}
+            </Link>
+        </div>
+    );
+};
diff --git a/src/component/Common/Snackbar.js b/src/component/Common/Snackbar.js
new file mode 100644
index 0000000..b5262c3
--- /dev/null
+++ b/src/component/Common/Snackbar.js
@@ -0,0 +1,151 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import classNames from "classnames";
+import ErrorIcon from "@material-ui/icons/Error";
+import InfoIcon from "@material-ui/icons/Info";
+import CloseIcon from "@material-ui/icons/Close";
+import CheckCircleIcon from "@material-ui/icons/CheckCircle";
+import WarningIcon from "@material-ui/icons/Warning";
+
+import {
+    IconButton,
+    Snackbar,
+    SnackbarContent,
+    withStyles,
+} from "@material-ui/core";
+
+const mapStateToProps = (state) => {
+    return {
+        snackbar: state.viewUpdate.snackbar,
+    };
+};
+
+const mapDispatchToProps = () => {
+    return {};
+};
+
+const variantIcon = {
+    success: CheckCircleIcon,
+    warning: WarningIcon,
+    error: ErrorIcon,
+    info: InfoIcon,
+};
+
+const styles1 = (theme) => ({
+    success: {
+        backgroundColor: theme.palette.success.main,
+    },
+    error: {
+        backgroundColor: theme.palette.error.dark,
+    },
+    info: {
+        backgroundColor: theme.palette.info.main,
+    },
+    warning: {
+        backgroundColor: theme.palette.warning.main,
+    },
+    icon: {
+        fontSize: 20,
+    },
+    iconVariant: {
+        opacity: 0.9,
+        marginRight: theme.spacing(1),
+    },
+    message: {
+        display: "flex",
+        alignItems: "center",
+    },
+});
+
+function MySnackbarContent(props) {
+    const { classes, className, message, onClose, variant, ...other } = props;
+    const Icon = variantIcon[variant];
+
+    return (
+        <SnackbarContent
+            className={classNames(classes[variant], className)}
+            aria-describedby="client-snackbar"
+            message={
+                <span id="client-snackbar" className={classes.message}>
+                    <Icon
+                        className={classNames(
+                            classes.icon,
+                            classes.iconVariant
+                        )}
+                    />
+                    {message}
+                </span>
+            }
+            action={[
+                <IconButton
+                    key="close"
+                    aria-label="Close"
+                    color="inherit"
+                    className={classes.close}
+                    onClick={onClose}
+                >
+                    <CloseIcon className={classes.icon} />
+                </IconButton>,
+            ]}
+            {...other}
+        />
+    );
+}
+MySnackbarContent.propTypes = {
+    classes: PropTypes.object.isRequired,
+    className: PropTypes.string,
+    message: PropTypes.node,
+    onClose: PropTypes.func,
+    variant: PropTypes.oneOf(["alert", "success", "warning", "error", "info"])
+        .isRequired,
+};
+
+const MySnackbarContentWrapper = withStyles(styles1)(MySnackbarContent);
+const styles = (theme) => ({
+    margin: {
+        margin: theme.spacing(1),
+    },
+});
+class SnackbarCompoment extends Component {
+    state = {
+        open: false,
+    };
+
+    UNSAFE_componentWillReceiveProps = (nextProps) => {
+        if (nextProps.snackbar.toggle !== this.props.snackbar.toggle) {
+            this.setState({ open: true });
+        }
+    };
+
+    handleClose = () => {
+        this.setState({ open: false });
+    };
+
+    render() {
+        return (
+            <Snackbar
+                anchorOrigin={{
+                    vertical: this.props.snackbar.vertical,
+                    horizontal: this.props.snackbar.horizontal,
+                }}
+                open={this.state.open}
+                autoHideDuration={6000}
+                onClose={this.handleClose}
+            >
+                <MySnackbarContentWrapper
+                    onClose={this.handleClose}
+                    variant={this.props.snackbar.color}
+                    message={this.props.snackbar.msg}
+                />
+            </Snackbar>
+        );
+    }
+}
+
+const AlertBar = connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(withStyles(styles)(SnackbarCompoment));
+
+export default AlertBar;
diff --git a/src/component/Dial/Aria2.js b/src/component/Dial/Aria2.js
new file mode 100644
index 0000000..3e22a55
--- /dev/null
+++ b/src/component/Dial/Aria2.js
@@ -0,0 +1,45 @@
+import React, { useCallback } from "react";
+import { useDispatch } from "react-redux";
+import AutoHidden from "./AutoHidden";
+import { makeStyles } from "@material-ui/core";
+import Fab from "@material-ui/core/Fab";
+import { Add } from "@material-ui/icons";
+import Modals from "../FileManager/Modals";
+import { openRemoteDownloadDialog } from "../../redux/explorer";
+
+const useStyles = makeStyles(() => ({
+    fab: {
+        margin: 0,
+        top: "auto",
+        right: 20,
+        bottom: 20,
+        left: "auto",
+        zIndex: 5,
+        position: "fixed",
+    },
+}));
+
+export default function RemoteDownloadButton() {
+    const classes = useStyles();
+    const dispatch = useDispatch();
+
+    const OpenRemoteDownloadDialog = useCallback(
+        () => dispatch(openRemoteDownloadDialog()),
+        [dispatch]
+    );
+
+    return (
+        <>
+            <Modals />
+            <AutoHidden enable>
+                <Fab
+                    className={classes.fab}
+                    color="secondary"
+                    onClick={() => OpenRemoteDownloadDialog()}
+                >
+                    <Add />
+                </Fab>
+            </AutoHidden>
+        </>
+    );
+}
diff --git a/src/component/Dial/AutoHidden.js b/src/component/Dial/AutoHidden.js
new file mode 100644
index 0000000..b78c34b
--- /dev/null
+++ b/src/component/Dial/AutoHidden.js
@@ -0,0 +1,38 @@
+import React, { useEffect, useState } from "react";
+import Zoom from "@material-ui/core/Zoom";
+
+function AutoHidden({ children, enable, hide = false, element = null }) {
+    const [hidden, setHidden] = useState(false);
+    let prev = window.scrollY;
+    let lastUpdate = window.scrollY;
+    const show = 50;
+
+    useEffect(() => {
+        const handleNavigation = (e) => {
+            const window = e.currentTarget;
+            const current = element ? element.scrollTop : window.scrollY;
+
+            if (prev > current) {
+                if (lastUpdate - current > show) {
+                    lastUpdate = current;
+                    setHidden(false);
+                }
+            } else if (prev < current) {
+                if (current - lastUpdate > show) {
+                    lastUpdate = current;
+                    setHidden(true);
+                }
+            }
+            prev = current;
+        };
+        if (enable) {
+            const target = element ? element : window;
+            target.addEventListener("scroll", (e) => handleNavigation(e));
+        }
+        // eslint-disable-next-line
+    }, [enable]);
+
+    return <Zoom in={!hidden && !hide}>{children}</Zoom>;
+}
+
+export default AutoHidden;
diff --git a/src/component/Dial/Create.js b/src/component/Dial/Create.js
new file mode 100644
index 0000000..2ff29c1
--- /dev/null
+++ b/src/component/Dial/Create.js
@@ -0,0 +1,195 @@
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { Badge, CircularProgress, makeStyles } from "@material-ui/core";
+import SpeedDial from "@material-ui/lab/SpeedDial";
+import SpeedDialIcon from "@material-ui/lab/SpeedDialIcon";
+import SpeedDialAction from "@material-ui/lab/SpeedDialAction";
+import CreateNewFolderIcon from "@material-ui/icons/CreateNewFolder";
+import PublishIcon from "@material-ui/icons/Publish";
+import { useDispatch, useSelector } from "react-redux";
+import AutoHidden from "./AutoHidden";
+import statusHelper from "../../utils/page";
+import Backdrop from "@material-ui/core/Backdrop";
+import { FilePlus, FolderUpload } from "mdi-material-ui";
+import { green } from "@material-ui/core/colors";
+import { SelectType } from "../Uploader/core";
+import {
+    openCreateFileDialog,
+    openCreateFolderDialog,
+    toggleSnackbar,
+} from "../../redux/explorer";
+import { useTranslation } from "react-i18next";
+
+const useStyles = makeStyles(() => ({
+    fab: {
+        margin: 0,
+        top: "auto",
+        right: 20,
+        bottom: 20,
+        left: "auto",
+        zIndex: 5,
+        position: "fixed",
+    },
+    badge: {
+        position: "absolute",
+        bottom: 26,
+        top: "auto",
+        zIndex: 9999,
+        right: 7,
+    },
+    "@global": {
+        ".MuiSpeedDialAction-staticTooltipLabel": {
+            whiteSpace: "nowrap",
+        },
+    },
+    fabProgress: {
+        color: green[500],
+        position: "absolute",
+        bottom: -6,
+        left: -6,
+        zIndex: 1,
+    },
+    buttonSuccess: {
+        backgroundColor: green[500],
+        "&:hover": {
+            backgroundColor: green[700],
+        },
+    },
+}));
+
+export default function UploadButton(props) {
+    const { t } = useTranslation("application", { keyPrefix: "fileManager" });
+    const [open, setOpen] = useState(false);
+    const [queued, setQueued] = useState(5);
+    const path = useSelector((state) => state.navigator.path);
+    const classes = useStyles();
+    const dispatch = useDispatch();
+    const ToggleSnackbar = useCallback(
+        (vertical, horizontal, msg, color) =>
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color)),
+        [dispatch]
+    );
+    const OpenNewFolderDialog = useCallback(
+        () => dispatch(openCreateFolderDialog()),
+        [dispatch]
+    );
+    const OpenNewFileDialog = useCallback(
+        () => dispatch(openCreateFileDialog()),
+        [dispatch]
+    );
+
+    useEffect(() => {
+        setQueued(props.Queued);
+    }, [props.Queued]);
+
+    const uploadClicked = () => {
+        if (open) {
+            if (queued !== 0) {
+                props.openFileList();
+            } else {
+                props.selectFile(path);
+            }
+        }
+    };
+
+    const handleOpen = () => {
+        setOpen(true);
+    };
+
+    const handleClose = () => {
+        setOpen(false);
+    };
+
+    const circularProgress = useMemo(() => {
+        if (props.progress.totalSize > 0) {
+            return (
+                <CircularProgress
+                    key={1}
+                    size={68}
+                    variant="determinate"
+                    value={
+                        (props.progress.processedSize /
+                            props.progress.totalSize) *
+                        100
+                    }
+                    className={classes.fabProgress}
+                />
+            );
+        }
+    }, [classes, props.progress]);
+
+    return (
+        <AutoHidden enable hide={props.taskListOpen}>
+            <Badge
+                badgeContent={queued}
+                classes={{
+                    badge: classes.badge, // class name, e.g. `root-x`
+                }}
+                className={classes.fab}
+                invisible={queued === 0}
+                color="primary"
+            >
+                <Backdrop open={open && statusHelper.isMobile()} />
+                <SpeedDial
+                    hidden={false}
+                    tooltipTitle={t("uploadFiles")}
+                    icon={
+                        <SpeedDialIcon
+                            openIcon={
+                                !statusHelper.isMobile() && <PublishIcon />
+                            }
+                        />
+                    }
+                    onClose={handleClose}
+                    FabProps={{
+                        onClick: () =>
+                            !statusHelper.isMobile() && uploadClicked(),
+                        color: "secondary",
+                    }}
+                    onOpen={handleOpen}
+                    open={open}
+                    ariaLabel={""}
+                >
+                    {statusHelper.isMobile() && (
+                        <SpeedDialAction
+                            key="UploadFile"
+                            icon={<PublishIcon />}
+                            tooltipOpen
+                            tooltipTitle={t("uploadFiles")}
+                            onClick={() => uploadClicked()}
+                            title={t("uploadFiles")}
+                        />
+                    )}
+                    {!statusHelper.isMobile() && (
+                        <SpeedDialAction
+                            key="UploadFolder"
+                            icon={<FolderUpload />}
+                            tooltipOpen
+                            tooltipTitle={t("uploadFolder")}
+                            onClick={() =>
+                                props.selectFile(path, SelectType.Directory)
+                            }
+                            title={t("uploadFolder")}
+                        />
+                    )}
+                    <SpeedDialAction
+                        key="NewFolder"
+                        icon={<CreateNewFolderIcon />}
+                        tooltipOpen
+                        tooltipTitle={t("newFolder")}
+                        onClick={() => OpenNewFolderDialog()}
+                        title={t("newFolder")}
+                    />
+                    <SpeedDialAction
+                        key="NewFile"
+                        icon={<FilePlus />}
+                        tooltipOpen
+                        tooltipTitle={t("newFile")}
+                        onClick={() => OpenNewFileDialog()}
+                        title={t("newFile")}
+                    />
+                </SpeedDial>
+                {circularProgress}
+            </Badge>
+        </AutoHidden>
+    );
+}
diff --git a/src/component/Dial/Save.js b/src/component/Dial/Save.js
new file mode 100644
index 0000000..104a18e
--- /dev/null
+++ b/src/component/Dial/Save.js
@@ -0,0 +1,84 @@
+import React from "react";
+import { makeStyles } from "@material-ui/core";
+import SaveIcon from "@material-ui/icons/Save";
+import CheckIcon from "@material-ui/icons/Check";
+import AutoHidden from "./AutoHidden";
+import statusHelper from "../../utils/page";
+import Fab from "@material-ui/core/Fab";
+import Tooltip from "@material-ui/core/Tooltip";
+import CircularProgress from "@material-ui/core/CircularProgress";
+import { green } from "@material-ui/core/colors";
+import clsx from "clsx";
+
+const useStyles = makeStyles((theme) => ({
+    fab: {
+        margin: 0,
+        top: "auto",
+        right: 20,
+        bottom: 20,
+        left: "auto",
+        zIndex: 5,
+        position: "fixed",
+    },
+    badge: {
+        position: "absolute",
+        bottom: 26,
+        top: "auto",
+        zIndex: 9999,
+        right: 7,
+    },
+    fabProgress: {
+        color: green[500],
+        position: "absolute",
+        top: -6,
+        left: -6,
+        zIndex: 1,
+    },
+    wrapper: {
+        margin: theme.spacing(1),
+        position: "relative",
+    },
+    buttonSuccess: {
+        backgroundColor: green[500],
+        "&:hover": {
+            backgroundColor: green[700],
+        },
+    },
+}));
+
+export default function SaveButton(props) {
+    const classes = useStyles();
+    const buttonClassname = clsx({
+        [classes.buttonSuccess]: props.status === "success",
+    });
+
+    return (
+        <AutoHidden enable={statusHelper.isMobile()}>
+            <div className={classes.fab}>
+                <div className={classes.wrapper}>
+                    <Tooltip title={"保存"} placement={"left"}>
+                        <Fab
+                            onClick={props.onClick}
+                            color="primary"
+                            className={buttonClassname}
+                            disabled={props.status === "loading"}
+                            aria-label="add"
+                        >
+                            {props.status === "success" ? (
+                                <CheckIcon />
+                            ) : (
+                                <SaveIcon />
+                            )}
+                        </Fab>
+                    </Tooltip>
+                    {props.status === "loading" && (
+                        <CircularProgress
+                            size={68}
+                            className={classes.fabProgress}
+                        />
+                    )}
+                </div>
+            </div>
+        </AutoHidden>
+    );
+}
diff --git a/src/component/Download/Download.js b/src/component/Download/Download.js
new file mode 100644
index 0000000..eea5281
--- /dev/null
+++ b/src/component/Download/Download.js
@@ -0,0 +1,229 @@
+import React, { Component } from "react";
+import { connect } from "react-redux";
+import RefreshIcon from "@material-ui/icons/Refresh";
+import API from "../../middleware/Api";
+import { Button, IconButton, Typography, withStyles } from "@material-ui/core";
+import DownloadingCard from "./DownloadingCard";
+import FinishedCard from "./FinishedCard";
+import RemoteDownloadButton from "../Dial/Aria2";
+import Auth from "../../middleware/Auth";
+import { toggleSnackbar } from "../../redux/explorer";
+import Nothing from "../Placeholder/Nothing";
+import { withTranslation } from "react-i18next";
+
+const styles = (theme) => ({
+    actions: {
+        display: "flex",
+    },
+    title: {
+        marginTop: "20px",
+    },
+    layout: {
+        width: "auto",
+        marginTop: "30px",
+        marginLeft: theme.spacing(3),
+        marginRight: theme.spacing(3),
+        [theme.breakpoints.up(1100 + theme.spacing(3) * 2)]: {
+            width: 700,
+            marginLeft: "auto",
+            marginRight: "auto",
+        },
+    },
+    shareTitle: {
+        maxWidth: "200px",
+    },
+    avatarFile: {
+        backgroundColor: theme.palette.primary.light,
+    },
+    avatarFolder: {
+        backgroundColor: theme.palette.secondary.light,
+    },
+    gird: {
+        marginTop: "30px",
+    },
+    hide: {
+        display: "none",
+    },
+    loadingAnimation: {
+        borderRadius: "6px 6px 0 0",
+    },
+    shareFix: {
+        marginLeft: "20px",
+    },
+    loadMore: {
+        textAlign: "center",
+        marginTop: "20px",
+        marginBottom: "20px",
+    },
+    margin: {
+        marginTop: theme.spacing(2),
+    },
+});
+const mapStateToProps = () => {
+    return {};
+};
+
+const mapDispatchToProps = (dispatch) => {
+    return {
+        toggleSnackbar: (vertical, horizontal, msg, color) => {
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color));
+        },
+    };
+};
+
+class DownloadComponent extends Component {
+    page = 0;
+    interval = 0;
+    previousDownloading = -1;
+
+    state = {
+        downloading: [],
+        loading: false,
+        finishedList: [],
+        continue: true,
+    };
+
+    componentDidMount = () => {
+        this.loadDownloading();
+    };
+
+    componentWillUnmount() {
+        clearTimeout(this.interval);
+    }
+
+    loadDownloading = () => {
+        this.setState({
+            loading: true,
+        });
+        API.get("/aria2/downloading")
+            .then((response) => {
+                this.setState({
+                    downloading: response.data,
+                    loading: false,
+                });
+                // 设定自动更新
+                clearTimeout(this.interval);
+                if (response.data.length > 0) {
+                    this.interval = setTimeout(
+                        this.loadDownloading,
+                        1000 *
+                            response.data.reduce(function (prev, current) {
+                                return prev.interval < current.interval
+                                    ? prev
+                                    : current;
+                            }).interval
+                    );
+                }
+
+                // 下载中条目变更时刷新已完成列表
+                if (response.data.length !== this.previousDownloading) {
+                    this.page = 0;
+                    this.setState({
+                        finishedList: [],
+                        continue: true,
+                    });
+                    this.loadMore();
+                }
+                this.previousDownloading = response.data.length;
+            })
+            .catch((error) => {
+                this.props.toggleSnackbar(
+                    "top",
+                    "right",
+                    error.message,
+                    "error"
+                );
+            });
+    };
+
+    loadMore = () => {
+        this.setState({
+            loading: true,
+        });
+        API.get("/aria2/finished?page=" + ++this.page)
+            .then((response) => {
+                this.setState({
+                    finishedList: [
+                        ...this.state.finishedList,
+                        ...response.data,
+                    ],
+                    loading: false,
+                    continue: response.data.length >= 10,
+                });
+            })
+            .catch(() => {
+                this.props.toggleSnackbar(
+                    "top",
+                    "right",
+                    this.props.t("download.failedToLoad"),
+                    "error"
+                );
+                this.setState({
+                    loading: false,
+                });
+            });
+    };
+
+    render() {
+        const { classes, t } = this.props;
+        const user = Auth.GetUser();
+
+        return (
+            <div className={classes.layout}>
+                {user.group.allowRemoteDownload && <RemoteDownloadButton />}
+                <Typography
+                    color="textSecondary"
+                    variant="h4"
+                    className={classes.title}
+                >
+                    {t("download.active")}
+                    <IconButton
+                        disabled={this.state.loading}
+                        onClick={this.loadDownloading}
+                    >
+                        <RefreshIcon />
+                    </IconButton>
+                </Typography>
+                {this.state.downloading.length === 0 && (
+                    <Nothing primary={t("download.activeEmpty")} />
+                )}
+                {this.state.downloading.map((value, k) => (
+                    <DownloadingCard key={k} task={value} />
+                ))}
+                <Typography
+                    color="textSecondary"
+                    variant="h4"
+                    className={classes.title}
+                >
+                    {t("download.finished")}
+                </Typography>
+                <div className={classes.loadMore}>
+                    {this.state.finishedList.length === 0 && (
+                        <Nothing primary={t("download.finishedEmpty")} />
+                    )}
+                    {this.state.finishedList.map((value, k) => {
+                        if (value.files) {
+                            return <FinishedCard key={k} task={value} />;
+                        }
+                        return null;
+                    })}
+                    <Button
+                        size="large"
+                        className={classes.margin}
+                        disabled={!this.state.continue}
+                        onClick={this.loadMore}
+                    >
+                        {t("download.loadMore")}
+                    </Button>
+                </div>
+            </div>
+        );
+    }
+}
+
+const Download = connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(withStyles(styles)(withTranslation()(DownloadComponent)));
+
+export default Download;
diff --git a/src/component/Download/DownloadingCard.js b/src/component/Download/DownloadingCard.js
new file mode 100644
index 0000000..dfcfb03
--- /dev/null
+++ b/src/component/Download/DownloadingCard.js
@@ -0,0 +1,761 @@
+import React, { useCallback, useEffect,useMemo } from "react";
+import {
+    Card,
+    CardContent,
+    darken,
+    IconButton,
+    lighten,
+    LinearProgress,
+    makeStyles,
+    Typography,
+    useTheme,
+} from "@material-ui/core";
+import { useDispatch } from "react-redux";
+import { hex2bin, sizeToString } from "../../utils";
+import PermMediaIcon from "@material-ui/icons/PermMedia";
+import TypeIcon from "../FileManager/TypeIcon";
+import MuiExpansionPanel from "@material-ui/core/ExpansionPanel";
+import MuiExpansionPanelSummary from "@material-ui/core/ExpansionPanelSummary";
+import MuiExpansionPanelDetails from "@material-ui/core/ExpansionPanelDetails";
+import withStyles from "@material-ui/core/styles/withStyles";
+import Divider from "@material-ui/core/Divider";
+import { ExpandMore, HighlightOff } from "@material-ui/icons";
+import classNames from "classnames";
+import TableRow from "@material-ui/core/TableRow";
+import TableCell from "@material-ui/core/TableCell";
+import TableBody from "@material-ui/core/TableBody";
+import Table from "@material-ui/core/Table";
+import Badge from "@material-ui/core/Badge";
+import Tooltip from "@material-ui/core/Tooltip";
+import API from "../../middleware/Api";
+import Button from "@material-ui/core/Button";
+import Grid from "@material-ui/core/Grid";
+import TimeAgo from "timeago-react";
+import SelectFileDialog from "../Modals/SelectFile";
+import { useHistory } from "react-router";
+import { toggleSnackbar } from "../../redux/explorer";
+import { useTranslation } from "react-i18next";
+import { TableVirtuoso } from "react-virtuoso";
+
+const ExpansionPanel = withStyles({
+    root: {
+        maxWidth: "100%",
+        boxShadow: "none",
+        "&:not(:last-child)": {
+            borderBottom: 0,
+        },
+        "&:before": {
+            display: "none",
+        },
+        "&$expanded": {},
+    },
+    expanded: {},
+})(MuiExpansionPanel);
+
+const ExpansionPanelSummary = withStyles({
+    root: {
+        minHeight: 0,
+        padding: 0,
+
+        "&$expanded": {
+            minHeight: 56,
+        },
+    },
+    content: {
+        maxWidth: "100%",
+        margin: 0,
+        display: "flex",
+        "&$expanded": {
+            margin: "0",
+        },
+    },
+    expanded: {},
+})(MuiExpansionPanelSummary);
+
+const ExpansionPanelDetails = withStyles((theme) => ({
+    root: {
+        display: "block",
+        padding: theme.spacing(0),
+    },
+}))(MuiExpansionPanelDetails);
+
+const useStyles = makeStyles((theme) => ({
+    card: {
+        marginTop: "20px",
+        justifyContent: "space-between",
+    },
+    iconContainer: {
+        width: "90px",
+        height: "96px",
+        padding: " 35px 29px 29px 29px",
+        paddingLeft: "35px",
+        [theme.breakpoints.down("sm")]: {
+            display: "none",
+        },
+    },
+    content: {
+        width: "100%",
+        minWidth: 0,
+        [theme.breakpoints.up("sm")]: {
+            borderInlineStart: "1px " + theme.palette.divider + " solid",
+        },
+    },
+    contentSide: {
+        minWidth: 0,
+        paddingTop: "24px",
+        paddingRight: "28px",
+        [theme.breakpoints.down("sm")]: {
+            display: "none",
+        },
+    },
+    iconBig: {
+        fontSize: "30px",
+    },
+    iconMultiple: {
+        fontSize: "30px",
+        color: "#607D8B",
+    },
+    progress: {
+        marginTop: 8,
+        marginBottom: 4,
+    },
+    expand: {
+        transition: ".15s transform ease-in-out",
+    },
+    expanded: {
+        transform: "rotate(180deg)",
+    },
+    subFile: {
+        width: "100%",
+        minWidth: 300,
+        wordBreak: "break-all",
+    },
+    subFileName: {
+        display: "flex",
+    },
+    subFileIcon: {
+        marginRight: "20px",
+    },
+    subFileSize: {
+        minWidth: 120,
+    },
+    subFilePercent: {
+        minWidth: 105,
+    },
+    scroll: {
+        overflow: "auto",
+        maxHeight: "300px",
+    },
+    action: {
+        padding: theme.spacing(2),
+        textAlign: "right",
+    },
+    actionButton: {
+        marginLeft: theme.spacing(1),
+    },
+    info: {
+        padding: theme.spacing(2),
+    },
+    infoTitle: {
+        fontWeight: 700,
+        textAlign: "left",
+    },
+    infoValue: {
+        color: theme.palette.text.secondary,
+        textAlign: "left",
+        paddingLeft:theme.spacing(1),
+    },
+    bitmap: {
+        width: "100%",
+        height: "50px",
+        backgroundColor: theme.palette.background.default,
+    },
+}));
+
+export default function DownloadingCard(props) {
+    const { t } = useTranslation("application", { keyPrefix: "download" });
+    const { t: tGlobal } = useTranslation();
+    const canvasRef = React.createRef();
+    const classes = useStyles();
+    const theme = useTheme();
+    const history = useHistory();
+
+    const [expanded, setExpanded] = React.useState("");
+    const [task, setTask] = React.useState(props.task);
+    const [loading, setLoading] = React.useState(false);
+    const [selectDialogOpen, setSelectDialogOpen] = React.useState(false);
+    const [selectFileOption, setSelectFileOption] = React.useState([]);
+
+    const handleChange = (panel) => (event, newExpanded) => {
+        setExpanded(newExpanded ? panel : false);
+    };
+
+    const dispatch = useDispatch();
+    const ToggleSnackbar = useCallback(
+        (vertical, horizontal, msg, color) =>
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color)),
+        [dispatch]
+    );
+
+    useEffect(() => {
+        setTask(props.task);
+    }, [props.task]);
+
+    useEffect(() => {
+        if (task.info.bitfield === "") {
+            return;
+        }
+        let result = "";
+        task.info.bitfield.match(/.{1,2}/g).forEach((str) => {
+            result += hex2bin(str);
+        });
+        const canvas = canvasRef.current;
+        const context = canvas.getContext("2d");
+        context.clearRect(0, 0, canvas.width, canvas.height);
+        context.strokeStyle = theme.palette.primary.main;
+        for (let i = 0; i < canvas.width; i++) {
+            let bit =
+                result[
+                    Math.round(((i + 1) / canvas.width) * task.info.numPieces)
+                ];
+            bit = bit ? bit : result.slice(-1);
+            if (bit === "1") {
+                context.beginPath();
+                context.moveTo(i, 0);
+                context.lineTo(i, canvas.height);
+                context.stroke();
+            }
+        }
+        // eslint-disable-next-line
+    }, [task.info.bitfield, task.info.numPieces, theme]);
+
+    const getPercent = (completed, total) => {
+        if (total === 0) {
+            return 0;
+        }
+        return (completed / total) * 100;
+    };
+
+    const activeFiles = useCallback(() => {
+        return task.info.files.filter((v) => v.selected === "true");
+    }, [task.info.files]);
+
+    const deleteFile = (index) => {
+        setLoading(true);
+        const current = activeFiles();
+        const newIndex = [];
+        const newFiles = [];
+        // eslint-disable-next-line
+        current.map((v) => {
+            if (v.index !== index && v.selected) {
+                newIndex.push(parseInt(v.index));
+                newFiles.push({
+                    ...v,
+                    selected: "true",
+                });
+            } else {
+                newFiles.push({
+                    ...v,
+                    selected: "false",
+                });
+            }
+        });
+        API.put("/aria2/select/" + task.info.gid, {
+            indexes: newIndex,
+        })
+            .then(() => {
+                setTask({
+                    ...task,
+                    info: {
+                        ...task.info,
+                        files: newFiles,
+                    },
+                });
+                ToggleSnackbar("top", "right", t("taskFileDeleted"), "success");
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            })
+            .then(() => {
+                setLoading(false);
+            });
+    };
+
+    const getDownloadName = useCallback(() => {
+        if (task.info.bittorrent.info.name !== "") {
+            return task.info.bittorrent.info.name;
+        }
+        return task.name === "." ? t("unknownTaskName") : task.name;
+    }, [task]);
+
+    const getIcon = useCallback(() => {
+        if (task.info.bittorrent.mode === "multi") {
+            return (
+                <Badge badgeContent={activeFiles().length} color="secondary">
+                    <PermMediaIcon className={classes.iconMultiple} />
+                </Badge>
+            );
+        } else {
+            return (
+                <TypeIcon
+                    className={classes.iconBig}
+                    fileName={getDownloadName(task)}
+                />
+            );
+        }
+        // eslint-disable-next-line
+    }, [task, classes]);
+
+    const cancel = () => {
+        setLoading(true);
+        API.delete("/aria2/task/" + task.info.gid)
+            .then(() => {
+                ToggleSnackbar("top", "right", t("taskCanceled"), "success");
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            })
+            .then(() => {
+                setLoading(false);
+            });
+    };
+
+    const changeSelectedFile = (fileIndex) => {
+        setLoading(true);
+        API.put("/aria2/select/" + task.info.gid, {
+            indexes: fileIndex,
+        })
+            .then(() => {
+                ToggleSnackbar(
+                    "top",
+                    "right",
+                    t("operationSubmitted"),
+                    "success"
+                );
+                setSelectDialogOpen(false);
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            })
+            .then(() => {
+                setLoading(false);
+            });
+    };
+
+    const subFileList = useMemo(() => {
+        const processStyle = (value) => ({
+            background:
+                "linear-gradient(to right, " +
+                (theme.palette.type ===
+                    "dark"
+                    ? darken(
+                        theme.palette
+                            .primary
+                            .main,
+                        0.4
+                    )
+                    : lighten(
+                        theme.palette
+                            .primary
+                            .main,
+                        0.85
+                    )) +
+                " 0%," +
+                (theme.palette.type ===
+                    "dark"
+                    ? darken(
+                        theme.palette
+                            .primary
+                            .main,
+                        0.4
+                    )
+                    : lighten(
+                        theme.palette
+                            .primary
+                            .main,
+                        0.85
+                    )) +
+                " " +
+                getPercent(
+                    value.completedLength,
+                    value.length
+                ).toFixed(0) +
+                "%," +
+                theme.palette.background
+                    .paper +
+                " " +
+                getPercent(
+                    value.completedLength,
+                    value.length
+                ).toFixed(0) +
+                "%," +
+                theme.palette.background
+                    .paper +
+                " 100%)",
+        });
+
+        const subFileCell = (value) => (
+            <>
+                <TableCell
+                    component="th"
+                    scope="row"
+                    className={classes.subFile}
+                >
+                    <Typography
+                        className={
+                            classes.subFileName
+                        }
+                    >
+                        <TypeIcon
+                            className={
+                                classes.subFileIcon
+                            }
+                            fileName={
+                                value.path
+                            }
+                        />
+                        {value.path}
+                    </Typography>
+                </TableCell>
+                <TableCell
+                    component="th"
+                    scope="row"
+                    className={classes.subFileSize}
+                >
+                    <Typography noWrap>
+                        {" "}
+                        {sizeToString(
+                            value.length
+                        )}
+                    </Typography>
+                </TableCell>
+                <TableCell
+                    component="th"
+                    scope="row"
+                    className={classes.subFilePercent}
+                >
+                    <Typography noWrap>
+                        {getPercent(
+                            value.completedLength,
+                            value.length
+                        ).toFixed(2)}
+                        %
+                    </Typography>
+                </TableCell>
+                <TableCell>
+                    <Tooltip
+                        title={t(
+                            "deleteThisFile"
+                        )}
+                    >
+                        <IconButton
+                            onClick={() =>
+                                deleteFile(
+                                    value.index
+                                )
+                            }
+                            disabled={loading}
+                            size={"small"}
+                        >
+                            <HighlightOff />
+                        </IconButton>
+                    </Tooltip>
+                </TableCell>
+            </>
+        );
+
+        return activeFiles().length > 5 ? (
+            <TableVirtuoso
+                style={{ height: 43 * activeFiles().length }}
+                className={classes.scroll}
+                components={{
+                    // eslint-disable-next-line react/display-name
+                    Table: (props) => <Table {...props} size={"small"} />,
+                    // eslint-disable-next-line react/display-name
+                    TableRow: (props) => {
+                        const index = props["data-index"];
+                        const value = activeFiles()[index];
+                        return (
+                            <TableRow
+                                {...props}
+                                key={index}
+                                style={processStyle(value)}
+                            />
+                        );
+                    },
+                }}
+                data={activeFiles()}
+                itemContent={(index, value) => (
+                    subFileCell(value)
+                )}
+            />
+        ) : (
+            <div className={classes.scroll}>
+                <Table size="small">
+                    <TableBody>
+                        {activeFiles().map((value) => {
+                            return (
+                                <TableRow
+                                    key={value.index}
+                                    style={processStyle(value)}
+                                >
+                                    {subFileCell(value)}
+                                </TableRow>
+                            );
+                        })}
+                    </TableBody>
+                </Table>
+            </div>
+        );
+    }, [
+        classes,
+        theme,
+        activeFiles,
+    ]);
+
+    return (
+        <Card className={classes.card}>
+            <SelectFileDialog
+                open={selectDialogOpen}
+                onClose={() => setSelectDialogOpen(false)}
+                modalsLoading={loading}
+                files={selectFileOption}
+                onSubmit={changeSelectedFile}
+            />
+            <ExpansionPanel
+                square
+                expanded={expanded === task.info.gid}
+                onChange={handleChange(task.info.gid)}
+            >
+                <ExpansionPanelSummary
+                    aria-controls="panel1d-content"
+                    id="panel1d-header"
+                >
+                    <div className={classes.iconContainer}>{getIcon()}</div>
+                    <CardContent className={classes.content}>
+                        <Typography color="primary" noWrap>
+                            <Tooltip title={getDownloadName()}>
+                                <span>{getDownloadName()}</span>
+                            </Tooltip>
+                        </Typography>
+                        <LinearProgress
+                            color="secondary"
+                            variant="determinate"
+                            className={classes.progress}
+                            value={getPercent(task.downloaded, task.total)}
+                        />
+                        <Typography
+                            variant="body2"
+                            color="textSecondary"
+                            noWrap
+                        >
+                            {task.total > 0 && (
+                                <span>
+                                    {getPercent(
+                                        task.downloaded,
+                                        task.total
+                                    ).toFixed(2)}
+                                    % -{" "}
+                                    {task.downloaded === 0
+                                        ? "0Bytes"
+                                        : sizeToString(task.downloaded)}
+                                    /
+                                    {task.total === 0
+                                        ? "0Bytes"
+                                        : sizeToString(task.total)}{" "}
+                                    -{" "}
+                                    {task.speed === "0"
+                                        ? "0B/s"
+                                        : sizeToString(task.speed) + "/s"}
+                                </span>
+                            )}
+                            {task.total === 0 && <span> - </span>}
+                        </Typography>
+                    </CardContent>
+                    <CardContent className={classes.contentSide}>
+                        <IconButton>
+                            <ExpandMore
+                                className={classNames(
+                                    {
+                                        [classes.expanded]:
+                                            expanded === task.info.gid,
+                                    },
+                                    classes.expand
+                                )}
+                            />
+                        </IconButton>
+                    </CardContent>
+                </ExpansionPanelSummary>
+                <ExpansionPanelDetails>
+                    <Divider />
+                    {task.info.bittorrent.mode === "multi" && subFileList}
+                    <div className={classes.action}>
+                        <Button
+                            className={classes.actionButton}
+                            variant="outlined"
+                            color="secondary"
+                            onClick={() =>
+                                history.push(
+                                    "/home?path=" + encodeURIComponent(task.dst)
+                                )
+                            }
+                        >
+                            {t("openDstFolder")}
+                        </Button>
+                        {task.info.bittorrent.mode === "multi" && (
+                            <Button
+                                className={classes.actionButton}
+                                variant="outlined"
+                                color="secondary"
+                                disabled={loading}
+                                onClick={() => {
+                                    setSelectDialogOpen(true);
+                                    setSelectFileOption([
+                                        ...props.task.info.files,
+                                    ]);
+                                }}
+                            >
+                                {t("selectDownloadingFile")}
+                            </Button>
+                        )}
+                        <Button
+                            className={classes.actionButton}
+                            onClick={cancel}
+                            variant="contained"
+                            color="secondary"
+                            disabled={loading}
+                        >
+                            {t("cancelTask")}
+                        </Button>
+                    </div>
+                    <Divider />
+                    <div className={classes.info}>
+                        {task.info.bitfield !== "" && (
+                            <canvas
+                                width={"700"}
+                                height={"100"}
+                                ref={canvasRef}
+                                className={classes.bitmap}
+                            />
+                        )}
+
+                        <Grid container>
+                            <Grid container xs={12} sm={4}>
+                                <Grid item xs={5} className={classes.infoTitle}>
+                                    {t("updatedAt")}
+                                </Grid>
+                                <Grid item xs={7} className={classes.infoValue}>
+                                    <TimeAgo
+                                        datetime={task.update}
+                                        locale={tGlobal("timeAgoLocaleCode", {
+                                            ns: "common",
+                                        })}
+                                    />
+                                </Grid>
+                            </Grid>
+                            <Grid container xs={12} sm={4}>
+                                <Grid item xs={5} className={classes.infoTitle}>
+                                    {t("uploaded")}
+                                </Grid>
+                                <Grid item xs={7} className={classes.infoValue}>
+                                    {sizeToString(task.info.uploadLength)}
+                                </Grid>
+                            </Grid>
+                            <Grid container xs={12} sm={4}>
+                                <Grid item xs={5} className={classes.infoTitle}>
+                                    {t("uploadSpeed")}
+                                </Grid>
+                                <Grid item xs={7} className={classes.infoValue}>
+                                    {sizeToString(task.info.uploadSpeed)} / s
+                                </Grid>
+                            </Grid>
+                            {task.info.bittorrent.mode !== "" && (
+                                <>
+                                    <Grid container xs={12} sm={8}>
+                                        <Grid
+                                            item
+                                            sm={2}
+                                            xs={4}
+                                            className={classes.infoTitle}
+                                        >
+                                            {t("InfoHash")}
+                                        </Grid>
+                                        <Grid
+                                            item
+                                            sm={10}
+                                            xs={8}
+                                            style={{
+                                                wordBreak: "break-all",
+                                            }}
+                                            className={classes.infoValue}
+                                        >
+                                            {task.info.infoHash}
+                                        </Grid>
+                                    </Grid>
+                                    <Grid container xs={12} sm={4}>
+                                        <Grid
+                                            item
+                                            xs={5}
+                                            className={classes.infoTitle}
+                                        >
+                                            {t("seederCount")}
+                                        </Grid>
+                                        <Grid
+                                            item
+                                            xs={7}
+                                            className={classes.infoValue}
+                                        >
+                                            {task.info.numSeeders}
+                                        </Grid>
+                                    </Grid>
+                                    <Grid container xs={12} sm={4}>
+                                        <Grid
+                                            item
+                                            xs={5}
+                                            className={classes.infoTitle}
+                                        >
+                                            {t("seeding")}
+                                        </Grid>
+                                        <Grid
+                                            item
+                                            xs={7}
+                                            className={classes.infoValue}
+                                        >
+                                            {task.info.seeder === "true"
+                                                ? t("isSeeding")
+                                                : t("notSeeding")}
+                                        </Grid>
+                                    </Grid>
+                                </>
+                            )}
+                            <Grid container xs={12} sm={4}>
+                                <Grid item xs={5} className={classes.infoTitle}>
+                                    {t("chunkSize")}
+                                </Grid>
+                                <Grid item xs={7} className={classes.infoValue}>
+                                    {sizeToString(task.info.pieceLength)}
+                                </Grid>
+                            </Grid>
+                            <Grid container xs={12} sm={4}>
+                                <Grid item xs={5} className={classes.infoTitle}>
+                                    {t("chunkNumbers")}
+                                </Grid>
+                                <Grid item xs={7} className={classes.infoValue}>
+                                    {task.info.numPieces}
+                                </Grid>
+                            </Grid>
+                            {props.task.node && <Grid container xs={12} sm={4}>
+                                <Grid item xs={5} className={classes.infoTitle}>
+                                    {t("downloadNode")}
+                                </Grid>
+                                <Grid item xs={7} className={classes.infoValue}>
+                                    {props.task.node}
+                                </Grid>
+                            </Grid>}
+                        </Grid>
+                    </div>
+                </ExpansionPanelDetails>
+            </ExpansionPanel>
+        </Card>
+    );
+}
diff --git a/src/component/Download/FinishedCard.js b/src/component/Download/FinishedCard.js
new file mode 100644
index 0000000..c8b1ca9
--- /dev/null
+++ b/src/component/Download/FinishedCard.js
@@ -0,0 +1,489 @@
+import React, { useCallback, useMemo } from "react";
+import {
+    Card,
+    CardContent,
+    IconButton,
+    makeStyles,
+    Typography,
+    useTheme,
+} from "@material-ui/core";
+import { sizeToString } from "../../utils";
+import PermMediaIcon from "@material-ui/icons/PermMedia";
+import TypeIcon from "../FileManager/TypeIcon";
+import MuiExpansionPanel from "@material-ui/core/ExpansionPanel";
+import MuiExpansionPanelSummary from "@material-ui/core/ExpansionPanelSummary";
+import MuiExpansionPanelDetails from "@material-ui/core/ExpansionPanelDetails";
+import withStyles from "@material-ui/core/styles/withStyles";
+import Divider from "@material-ui/core/Divider";
+import { ExpandMore } from "@material-ui/icons";
+import classNames from "classnames";
+import Table from "@material-ui/core/Table";
+import TableBody from "@material-ui/core/TableBody";
+import TableRow from "@material-ui/core/TableRow";
+import TableCell from "@material-ui/core/TableCell";
+import Badge from "@material-ui/core/Badge";
+import Tooltip from "@material-ui/core/Tooltip";
+import Button from "@material-ui/core/Button";
+import Grid from "@material-ui/core/Grid";
+import API from "../../middleware/Api";
+import { useDispatch } from "react-redux";
+import { useHistory } from "react-router";
+import { formatLocalTime } from "../../utils/datetime";
+import { toggleSnackbar } from "../../redux/explorer";
+import { TableVirtuoso } from "react-virtuoso";
+import { useTranslation } from "react-i18next";
+
+const ExpansionPanel = withStyles({
+    root: {
+        maxWidth: "100%",
+        boxShadow: "none",
+        "&:not(:last-child)": {
+            borderBottom: 0,
+        },
+        "&:before": {
+            display: "none",
+        },
+        "&$expanded": {},
+    },
+    expanded: {},
+})(MuiExpansionPanel);
+
+const ExpansionPanelSummary = withStyles({
+    root: {
+        minHeight: 0,
+        padding: 0,
+
+        "&$expanded": {
+            minHeight: 56,
+        },
+    },
+    content: {
+        maxWidth: "100%",
+        margin: 0,
+        display: "flex",
+        "&$expanded": {
+            margin: "0",
+        },
+    },
+    expanded: {},
+})(MuiExpansionPanelSummary);
+
+const ExpansionPanelDetails = withStyles((theme) => ({
+    root: {
+        display: "block",
+        padding: theme.spacing(0),
+    },
+}))(MuiExpansionPanelDetails);
+
+const useStyles = makeStyles((theme) => ({
+    card: {
+        marginTop: "20px",
+        justifyContent: "space-between",
+    },
+    iconContainer: {
+        width: "90px",
+        height: "96px",
+        padding: " 35px 29px 29px 29px",
+        paddingLeft: "35px",
+        [theme.breakpoints.down("sm")]: {
+            display: "none",
+        },
+    },
+    content: {
+        width: "100%",
+        minWidth: 0,
+        [theme.breakpoints.up("sm")]: {
+            borderInlineStart: "1px " + theme.palette.divider + " solid",
+        },
+        textAlign: "left",
+    },
+    contentSide: {
+        minWidth: 0,
+        paddingTop: "24px",
+        paddingRight: "28px",
+        [theme.breakpoints.down("sm")]: {
+            display: "none",
+        },
+    },
+    iconBig: {
+        fontSize: "30px",
+    },
+    iconMultiple: {
+        fontSize: "30px",
+        color: "#607D8B",
+    },
+    progress: {
+        marginTop: 8,
+        marginBottom: 4,
+    },
+    expand: {
+        transition: ".15s transform ease-in-out",
+    },
+    expanded: {
+        transform: "rotate(180deg)",
+    },
+    subFile: {
+        width: "100%",
+        minWidth: 300,
+        wordBreak: "break-all",
+    },
+    subFileName: {
+        display: "flex",
+    },
+    subFileIcon: {
+        marginRight: "20px",
+    },
+    subFileSize: {
+        minWidth: 115,
+    },
+    subFilePercent: {
+        minWidth: 100,
+    },
+    scroll: {
+        overflow: "auto",
+        maxHeight: "300px",
+    },
+    action: {
+        padding: theme.spacing(2),
+        textAlign: "right",
+    },
+    actionButton: {
+        marginLeft: theme.spacing(1),
+    },
+    info: {
+        padding: theme.spacing(2),
+    },
+    infoTitle: {
+        fontWeight: 700,
+        textAlign: "left",
+    },
+    infoValue: {
+        color: theme.palette.text.secondary,
+        textAlign: "left",
+        paddingLeft: theme.spacing(1),
+    },
+}));
+
+export default function FinishedCard(props) {
+    const { t } = useTranslation("application", { keyPrefix: "download" });
+    const classes = useStyles();
+    const theme = useTheme();
+    const history = useHistory();
+
+    const [expanded, setExpanded] = React.useState(false);
+    const [loading, setLoading] = React.useState(false);
+
+    const dispatch = useDispatch();
+    const ToggleSnackbar = useCallback(
+        (vertical, horizontal, msg, color) =>
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color)),
+        [dispatch]
+    );
+
+    const handleChange = () => (event, newExpanded) => {
+        setExpanded(!!newExpanded);
+    };
+
+    const cancel = () => {
+        setLoading(true);
+        API.delete("/aria2/task/" + props.task.gid)
+            .then(() => {
+                ToggleSnackbar("top", "right", t("taskDeleted"), "success");
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            })
+            .then(() => {
+                window.location.reload();
+            });
+    };
+
+    const getPercent = (completed, total) => {
+        if (total == 0) {
+            return 0;
+        }
+        return (completed / total) * 100;
+    };
+
+    const getDownloadName = useCallback(() => {
+        return props.task.name === "." ? t("unknownTaskName") : props.task.name;
+    }, [props.task.name]);
+
+    const activeFiles = useCallback(() => {
+        return props.task.files.filter((v) => v.selected === "true");
+    }, [props.task.files]);
+
+    const getIcon = useCallback(() => {
+        if (props.task.files.length > 1) {
+            return (
+                <Badge badgeContent={activeFiles().length} color="secondary">
+                    <PermMediaIcon className={classes.iconMultiple} />
+                </Badge>
+            );
+        } else {
+            return (
+                <TypeIcon
+                    className={classes.iconBig}
+                    fileName={getDownloadName(props.task)}
+                />
+            );
+        }
+    }, [props.task, classes]);
+
+    const getTaskError = (error) => {
+        try {
+            const res = JSON.parse(error);
+            return res.msg + "：" + res.error;
+        } catch (e) {
+            return t("transferFailed");
+        }
+    };
+
+    const subFileList = useMemo(() => {
+        const subFileCell = (value) => (
+            <>
+                <TableCell
+                    component="th"
+                    scope="row"
+                    className={classes.subFile}
+                >
+                    <Typography className={classes.subFileName}>
+                        <TypeIcon
+                            className={classes.subFileIcon}
+                            fileName={value.path}
+                        />
+                        {value.path}
+                    </Typography>
+                </TableCell>
+                <TableCell
+                    component="th"
+                    scope="row"
+                    className={classes.subFileSize}
+                >
+                    <Typography noWrap>
+                        {" "}
+                        {sizeToString(value.length)}
+                    </Typography>
+                </TableCell>
+                <TableCell
+                    component="th"
+                    scope="row"
+                    className={classes.subFilePercent}
+                >
+                    <Typography noWrap>
+                        {getPercent(
+                            value.completedLength,
+                            value.length
+                        ).toFixed(2)}
+                        %
+                    </Typography>
+                </TableCell>
+            </>
+        );
+
+        return activeFiles().length > 5 ? (
+            <TableVirtuoso
+                style={{ height: 57 * activeFiles().length }}
+                className={classes.scroll}
+                components={{
+                    // eslint-disable-next-line react/display-name
+                    Table: (props) => <Table {...props} />,
+                }}
+                data={activeFiles()}
+                itemContent={(index, value) => subFileCell(value)}
+            />
+        ) : (
+            <div className={classes.scroll}>
+                <Table>
+                    <TableBody>
+                        {activeFiles().map((value) => {
+                            return (
+                                <TableRow key={value.index}>
+                                    {subFileCell(value)}
+                                </TableRow>
+                            );
+                        })}
+                    </TableBody>
+                </Table>
+            </div>
+        );
+    }, [classes, activeFiles]);
+
+    return (
+        <Card className={classes.card}>
+            <ExpansionPanel
+                square
+                expanded={expanded}
+                onChange={handleChange("")}
+            >
+                <ExpansionPanelSummary
+                    aria-controls="panel1d-content"
+                    id="panel1d-header"
+                >
+                    <div className={classes.iconContainer}>{getIcon()}</div>
+                    <CardContent className={classes.content}>
+                        <Typography color="primary" noWrap>
+                            <Tooltip title={getDownloadName()}>
+                                <span>{getDownloadName()}</span>
+                            </Tooltip>
+                        </Typography>
+                        {props.task.status === 3 && (
+                            <Tooltip title={props.task.error}>
+                                <Typography
+                                    variant="body2"
+                                    color="error"
+                                    noWrap
+                                >
+                                    {t("downloadFailed", {
+                                        msg: props.task.error,
+                                    })}
+                                </Typography>
+                            </Tooltip>
+                        )}
+                        {props.task.status === 5 && (
+                            <Typography
+                                variant="body2"
+                                color="textSecondary"
+                                noWrap
+                            >
+                                {t("canceledStatus")}
+                                {props.task.error !== "" && (
+                                    <span>({props.task.error})</span>
+                                )}
+                            </Typography>
+                        )}
+                        {props.task.status === 4 &&
+                            props.task.task_status === 4 && (
+                                <Typography
+                                    variant="body2"
+                                    style={{
+                                        color: theme.palette.success.main,
+                                    }}
+                                    noWrap
+                                >
+                                    {t("finishedStatus")}
+                                </Typography>
+                            )}
+                        {props.task.status === 4 &&
+                            props.task.task_status === 0 && (
+                                <Typography
+                                    variant="body2"
+                                    style={{
+                                        color: theme.palette.success.light,
+                                    }}
+                                    noWrap
+                                >
+                                    {t("pending")}
+                                </Typography>
+                            )}
+                        {props.task.status === 4 &&
+                            props.task.task_status === 1 && (
+                                <Typography
+                                    variant="body2"
+                                    style={{
+                                        color: theme.palette.success.light,
+                                    }}
+                                    noWrap
+                                >
+                                    {t("transferring")}
+                                </Typography>
+                            )}
+                        {props.task.status === 4 &&
+                            props.task.task_status === 2 && (
+                                <Tooltip
+                                    title={getTaskError(props.task.task_error)}
+                                >
+                                    <Typography
+                                        variant="body2"
+                                        color={"error"}
+                                        noWrap
+                                    >
+                                        {getTaskError(props.task.task_error)}
+                                    </Typography>
+                                </Tooltip>
+                            )}
+                    </CardContent>
+                    <CardContent className={classes.contentSide}>
+                        <IconButton>
+                            <ExpandMore
+                                className={classNames(
+                                    {
+                                        [classes.expanded]: expanded,
+                                    },
+                                    classes.expand
+                                )}
+                            />
+                        </IconButton>
+                    </CardContent>
+                </ExpansionPanelSummary>
+                <ExpansionPanelDetails>
+                    <Divider />
+                    {props.task.files.length > 1 && subFileList}
+                    <div className={classes.action}>
+                        <Button
+                            className={classes.actionButton}
+                            variant="outlined"
+                            color="secondary"
+                            onClick={() =>
+                                history.push(
+                                    "/home?path=" +
+                                        encodeURIComponent(props.task.dst)
+                                )
+                            }
+                        >
+                            {t("openDstFolder")}
+                        </Button>
+                        <Button
+                            className={classes.actionButton}
+                            onClick={cancel}
+                            variant="contained"
+                            color="secondary"
+                            disabled={loading}
+                        >
+                            {t("deleteRecord")}
+                        </Button>
+                    </div>
+                    <Divider />
+                    <div className={classes.info}>
+                        <Grid container>
+                            <Grid container xs={12} sm={6}>
+                                <Grid item xs={5} className={classes.infoTitle}>
+                                    {t("createdAt")}
+                                </Grid>
+                                <Grid item xs={7} className={classes.infoValue}>
+                                    {formatLocalTime(props.task.create)}
+                                </Grid>
+                            </Grid>
+                            <Grid container xs={12} sm={6}>
+                                <Grid item xs={5} className={classes.infoTitle}>
+                                    {t("updatedAt")}
+                                </Grid>
+                                <Grid item xs={7} className={classes.infoValue}>
+                                    {formatLocalTime(props.task.update)}
+                                </Grid>
+                            </Grid>
+                            {props.task.node && (
+                                <Grid container xs={12} sm={6}>
+                                    <Grid
+                                        item
+                                        xs={5}
+                                        className={classes.infoTitle}
+                                    >
+                                        {t("downloadNode")}
+                                    </Grid>
+                                    <Grid
+                                        item
+                                        xs={7}
+                                        className={classes.infoValue}
+                                    >
+                                        {props.task.node}
+                                    </Grid>
+                                </Grid>
+                            )}
+                        </Grid>
+                    </div>
+                </ExpansionPanelDetails>
+            </ExpansionPanel>
+        </Card>
+    );
+}
diff --git a/src/component/FileManager/ContextMenu.js b/src/component/FileManager/ContextMenu.js
new file mode 100644
index 0000000..43291a6
--- /dev/null
+++ b/src/component/FileManager/ContextMenu.js
@@ -0,0 +1,754 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import { isCompressFile, isPreviewable, isTorrent } from "../../config";
+import UploadIcon from "@material-ui/icons/CloudUpload";
+import DownloadIcon from "@material-ui/icons/CloudDownload";
+import NewFolderIcon from "@material-ui/icons/CreateNewFolder";
+import OpenFolderIcon from "@material-ui/icons/FolderOpen";
+import FileCopyIcon from "@material-ui/icons/FileCopy";
+import ShareIcon from "@material-ui/icons/Share";
+import RenameIcon from "@material-ui/icons/BorderColor";
+import MoveIcon from "@material-ui/icons/Input";
+import LinkIcon from "@material-ui/icons/InsertLink";
+import DeleteIcon from "@material-ui/icons/Delete";
+import OpenIcon from "@material-ui/icons/OpenInNew";
+import {
+    FolderDownload,
+    FilePlus,
+    FolderUpload,
+    MagnetOn,
+    Transfer,
+} from "mdi-material-ui";
+import {
+    Divider,
+    ListItemIcon,
+    MenuItem,
+    Typography,
+    withStyles,
+} from "@material-ui/core";
+import pathHelper from "../../utils/page";
+import { withRouter } from "react-router-dom";
+import Auth from "../../middleware/Auth";
+import { Archive, InfoOutlined, Unarchive } from "@material-ui/icons";
+import Menu from "@material-ui/core/Menu";
+import RefreshIcon from "@material-ui/icons/Refresh";
+import {
+    batchGetSource,
+    openParentFolder,
+    openPreview,
+    openTorrentDownload,
+    setSelectedTarget,
+    startBatchDownload,
+    startDirectoryDownload,
+    startDownload,
+    toggleObjectInfoSidebar,
+} from "../../redux/explorer/action";
+import {
+    changeContextMenu,
+    navigateTo,
+    openCompressDialog,
+    openCopyDialog,
+    openCreateFileDialog,
+    openCreateFolderDialog,
+    openDecompressDialog,
+    openLoadingDialog,
+    openMoveDialog,
+    openMusicDialog,
+    openRelocateDialog,
+    openRemoteDownloadDialog,
+    openRemoveDialog,
+    openRenameDialog,
+    openShareDialog,
+    refreshFileList,
+    setNavigatorLoadingStatus,
+    showImgPreivew,
+    toggleSnackbar,
+} from "../../redux/explorer";
+import { pathJoin } from "../Uploader/core/utils";
+import {
+    openFileSelector,
+    openFolderSelector,
+} from "../../redux/viewUpdate/action";
+import { withTranslation } from "react-i18next";
+
+const styles = () => ({
+    propover: {},
+    divider: {
+        marginTop: 4,
+        marginBottom: 4,
+    },
+});
+
+const StyledListItemIcon = withStyles({
+    root: {
+        minWidth: 38,
+    },
+})(ListItemIcon);
+
+const mapStateToProps = (state) => {
+    return {
+        menuType: state.viewUpdate.contextType,
+        menuOpen: state.viewUpdate.contextOpen,
+        isMultiple: state.explorer.selectProps.isMultiple,
+        withFolder: state.explorer.selectProps.withFolder,
+        withFile: state.explorer.selectProps.withFile,
+        withSourceEnabled: state.explorer.selectProps.withSourceEnabled,
+        path: state.navigator.path,
+        selected: state.explorer.selected,
+        search: state.explorer.search,
+    };
+};
+
+const mapDispatchToProps = (dispatch) => {
+    return {
+        changeContextMenu: (type, open) => {
+            dispatch(changeContextMenu(type, open));
+        },
+        setNavigatorLoadingStatus: (status) => {
+            dispatch(setNavigatorLoadingStatus(status));
+        },
+        setSelectedTarget: (targets) => {
+            dispatch(setSelectedTarget(targets));
+        },
+        navigateTo: (path) => {
+            dispatch(navigateTo(path));
+        },
+        openCreateFolderDialog: () => {
+            dispatch(openCreateFolderDialog());
+        },
+        openCreateFileDialog: () => {
+            dispatch(openCreateFileDialog());
+        },
+        openRenameDialog: () => {
+            dispatch(openRenameDialog());
+        },
+        openMoveDialog: () => {
+            dispatch(openMoveDialog());
+        },
+        openRemoveDialog: () => {
+            dispatch(openRemoveDialog());
+        },
+        openShareDialog: () => {
+            dispatch(openShareDialog());
+        },
+        showImgPreivew: (first) => {
+            dispatch(showImgPreivew(first));
+        },
+        openMusicDialog: () => {
+            dispatch(openMusicDialog());
+        },
+        toggleSnackbar: (vertical, horizontal, msg, color) => {
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color));
+        },
+        openRemoteDownloadDialog: () => {
+            dispatch(openRemoteDownloadDialog());
+        },
+        openTorrentDownloadDialog: () => {
+            dispatch(openTorrentDownload());
+        },
+        openCopyDialog: () => {
+            dispatch(openCopyDialog());
+        },
+        openLoadingDialog: (text) => {
+            dispatch(openLoadingDialog(text));
+        },
+        openDecompressDialog: () => {
+            dispatch(openDecompressDialog());
+        },
+        openCompressDialog: () => {
+            dispatch(openCompressDialog());
+        },
+        refreshFileList: () => {
+            dispatch(refreshFileList());
+        },
+        openRelocateDialog: () => {
+            dispatch(openRelocateDialog());
+        },
+        openPreview: (share) => {
+            dispatch(openPreview(share));
+        },
+        toggleObjectInfoSidebar: (open) => {
+            dispatch(toggleObjectInfoSidebar(open));
+        },
+        startBatchDownload: (share) => {
+            dispatch(startBatchDownload(share));
+        },
+        openFileSelector: () => {
+            dispatch(openFileSelector());
+        },
+        openFolderSelector: () => {
+            dispatch(openFolderSelector());
+        },
+        startDownload: (share, file) => {
+            dispatch(startDownload(share, file));
+        },
+        batchGetSource: () => {
+            dispatch(batchGetSource());
+        },
+        startDirectoryDownload: (share) => {
+            dispatch(startDirectoryDownload(share));
+        },
+        openParentFolder: () => {
+            dispatch(openParentFolder());
+        },
+    };
+};
+
+class ContextMenuCompoment extends Component {
+    X = 0;
+    Y = 0;
+
+    state = {};
+
+    componentDidMount = () => {
+        window.document.addEventListener("mousemove", this.setPoint);
+    };
+
+    setPoint = (e) => {
+        this.Y = e.clientY;
+        this.X = e.clientX;
+    };
+
+    openArchiveDownload = () => {
+        this.props.startBatchDownload(this.props.share);
+    };
+
+    openDirectoryDownload = () => {
+        this.props.startDirectoryDownload(this.props.share);
+    };
+
+    openDownload = () => {
+        this.props.startDownload(this.props.share, this.props.selected[0]);
+    };
+
+    enterFolder = () => {
+        this.props.navigateTo(
+            pathJoin([this.props.path, this.props.selected[0].name])
+        );
+    };
+
+    // 暂时只对空白处右键菜单使用这个函数，疑似有bug会导致的一个菜单被默认选中。
+    // 相关issue： https://github.com/mui-org/material-ui/issues/23747
+    renderMenuItems = (items) => {
+        const res = [];
+        let key = 0;
+
+        ["top", "center", "bottom"].forEach((position) => {
+            let visibleCount = 0;
+            items[position].forEach((item) => {
+                if (item.condition) {
+                    res.push(
+                        <MenuItem dense key={key} onClick={item.onClick}>
+                            <ListItemIcon>{item.icon}</ListItemIcon>
+                            <Typography variant="inherit">
+                                {item.text}
+                            </Typography>
+                        </MenuItem>
+                    );
+                    key++;
+                    visibleCount++;
+                }
+            });
+            if (visibleCount > 0 && position != "bottom") {
+                res.push(
+                    <Divider key={key} className={this.props.classes.divider} />
+                );
+                key++;
+            }
+        });
+
+        return res;
+    };
+
+    render() {
+        const { classes, t } = this.props;
+        const user = Auth.GetUser();
+        const isHomePage = pathHelper.isHomePage(this.props.location.pathname);
+        const emptyMenuList = {
+            top: [
+                {
+                    condition: true,
+                    onClick: () => {
+                        this.props.refreshFileList();
+                        this.props.changeContextMenu(
+                            this.props.menuType,
+                            false
+                        );
+                    },
+                    icon: <RefreshIcon />,
+                    text: "刷新",
+                },
+            ],
+            center: [
+                {
+                    condition: true,
+                    onClick: () => this.props.openFileSelector(),
+                    icon: <UploadIcon />,
+                    text: "上传文件",
+                },
+                {
+                    condition: true,
+                    onClick: () => this.props.openFolderSelector(),
+                    icon: <FolderUpload />,
+                    text: "上传目录",
+                },
+                {
+                    condition: user.group.allowRemoteDownload,
+                    onClick: () => this.props.openRemoteDownloadDialog(),
+                    icon: <DownloadIcon />,
+                    text: "离线下载",
+                },
+            ],
+            bottom: [
+                {
+                    condition: true,
+                    onClick: () => this.props.openCreateFolderDialog(),
+                    icon: <NewFolderIcon />,
+                    text: "创建文件夹",
+                },
+                {
+                    condition: true,
+                    onClick: () => this.props.openCreateFileDialog(),
+                    icon: <FilePlus />,
+                    text: "创建文件",
+                },
+            ],
+        };
+
+        return (
+            <div>
+                <Menu
+                    keepMounted
+                    open={this.props.menuOpen}
+                    onClose={() =>
+                        this.props.changeContextMenu(this.props.menuType, false)
+                    }
+                    anchorReference="anchorPosition"
+                    anchorPosition={{ top: this.Y, left: this.X }}
+                    anchorOrigin={{
+                        vertical: "top",
+                        horizontal: "left",
+                    }}
+                    transformOrigin={{
+                        vertical: "top",
+                        horizontal: "left",
+                    }}
+                >
+                    {this.props.menuType === "empty" && (
+                        <div>
+                            <MenuItem
+                                dense
+                                onClick={() => {
+                                    this.props.refreshFileList();
+                                    this.props.changeContextMenu(
+                                        this.props.menuType,
+                                        false
+                                    );
+                                }}
+                            >
+                                <StyledListItemIcon>
+                                    <RefreshIcon />
+                                </StyledListItemIcon>
+                                <Typography variant="inherit">
+                                    {t("fileManager.refresh")}
+                                </Typography>
+                            </MenuItem>
+                            <Divider className={classes.divider} />
+                            <MenuItem
+                                dense
+                                onClick={() => this.props.openFileSelector()}
+                            >
+                                <StyledListItemIcon>
+                                    <UploadIcon />
+                                </StyledListItemIcon>
+                                <Typography variant="inherit">
+                                    {t("fileManager.uploadFiles")}
+                                </Typography>
+                            </MenuItem>
+                            <MenuItem
+                                dense
+                                onClick={() => this.props.openFolderSelector()}
+                            >
+                                <StyledListItemIcon>
+                                    <FolderUpload />
+                                </StyledListItemIcon>
+                                <Typography variant="inherit">
+                                    {t("fileManager.uploadFolder")}
+                                </Typography>
+                            </MenuItem>
+                            {user.group.allowRemoteDownload && (
+                                <MenuItem
+                                    dense
+                                    onClick={() =>
+                                        this.props.openRemoteDownloadDialog()
+                                    }
+                                >
+                                    <StyledListItemIcon>
+                                        <DownloadIcon />
+                                    </StyledListItemIcon>
+                                    <Typography variant="inherit">
+                                        {t("fileManager.newRemoteDownloads")}
+                                    </Typography>
+                                </MenuItem>
+                            )}
+
+                            <Divider className={classes.divider} />
+                            <MenuItem
+                                dense
+                                onClick={() =>
+                                    this.props.openCreateFolderDialog()
+                                }
+                            >
+                                <StyledListItemIcon>
+                                    <NewFolderIcon />
+                                </StyledListItemIcon>
+                                <Typography variant="inherit">
+                                    {t("fileManager.newFolder")}
+                                </Typography>
+                            </MenuItem>
+                            <MenuItem
+                                dense
+                                onClick={() =>
+                                    this.props.openCreateFileDialog()
+                                }
+                            >
+                                <StyledListItemIcon>
+                                    <FilePlus />
+                                </StyledListItemIcon>
+                                <Typography variant="inherit">
+                                    {t("fileManager.newFile")}
+                                </Typography>
+                            </MenuItem>
+                        </div>
+                    )}
+                    {this.props.menuType !== "empty" && (
+                        <div>
+                            {!this.props.isMultiple && this.props.withFolder && (
+                                <div>
+                                    <MenuItem dense onClick={this.enterFolder}>
+                                        <StyledListItemIcon>
+                                            <OpenFolderIcon />
+                                        </StyledListItemIcon>
+                                        <Typography variant="inherit">
+                                            {t("fileManager.enter")}
+                                        </Typography>
+                                    </MenuItem>
+                                    {isHomePage && (
+                                        <Divider className={classes.divider} />
+                                    )}
+                                </div>
+                            )}
+                            {!this.props.isMultiple &&
+                                this.props.withFile &&
+                                (!this.props.share ||
+                                    this.props.share.preview) &&
+                                isPreviewable(this.props.selected[0].name) && (
+                                    <div>
+                                        <MenuItem
+                                            dense
+                                            onClick={() =>
+                                                this.props.openPreview()
+                                            }
+                                        >
+                                            <StyledListItemIcon>
+                                                <OpenIcon />
+                                            </StyledListItemIcon>
+                                            <Typography variant="inherit">
+                                                {t("fileManager.open")}
+                                            </Typography>
+                                        </MenuItem>
+                                    </div>
+                                )}
+
+                            {this.props.search && !this.props.isMultiple && (
+                                <div>
+                                    <MenuItem
+                                        dense
+                                        onClick={() =>
+                                            this.props.openParentFolder()
+                                        }
+                                    >
+                                        <StyledListItemIcon>
+                                            <OpenFolderIcon />
+                                        </StyledListItemIcon>
+                                        <Typography variant="inherit">
+                                            {t("fileManager.openParentFolder")}
+                                        </Typography>
+                                    </MenuItem>
+                                </div>
+                            )}
+
+                            {!this.props.isMultiple && this.props.withFile && (
+                                <div>
+                                    <MenuItem
+                                        dense
+                                        onClick={() =>
+                                            this.openDownload(this.props.share)
+                                        }
+                                    >
+                                        <StyledListItemIcon>
+                                            <DownloadIcon />
+                                        </StyledListItemIcon>
+                                        <Typography variant="inherit">
+                                            {t("fileManager.download")}
+                                        </Typography>
+                                    </MenuItem>
+                                    {isHomePage && (
+                                        <Divider className={classes.divider} />
+                                    )}
+                                </div>
+                            )}
+
+                            {(this.props.isMultiple || this.props.withFolder) &&
+                                window.showDirectoryPicker &&
+                                window.isSecureContext && (
+                                    <MenuItem
+                                        dense
+                                        onClick={() =>
+                                            this.openDirectoryDownload()
+                                        }
+                                    >
+                                        <StyledListItemIcon>
+                                            <FolderDownload />
+                                        </StyledListItemIcon>
+                                        <Typography variant="inherit">
+                                            {t("fileManager.download")}
+                                        </Typography>
+                                    </MenuItem>
+                                )}
+
+                            {(this.props.isMultiple ||
+                                this.props.withFolder) && (
+                                <MenuItem
+                                    dense
+                                    onClick={() => this.openArchiveDownload()}
+                                >
+                                    <StyledListItemIcon>
+                                        <DownloadIcon />
+                                    </StyledListItemIcon>
+                                    <Typography variant="inherit">
+                                        {t("fileManager.batchDownload")}
+                                    </Typography>
+                                </MenuItem>
+                            )}
+
+                            {isHomePage &&
+                                user.group.sourceBatch > 0 &&
+                                this.props.withSourceEnabled && (
+                                    <MenuItem
+                                        dense
+                                        onClick={() =>
+                                            this.props.batchGetSource()
+                                        }
+                                    >
+                                        <StyledListItemIcon>
+                                            <LinkIcon />
+                                        </StyledListItemIcon>
+                                        <Typography variant="inherit">
+                                            {this.props.isMultiple ||
+                                            (this.props.withFolder &&
+                                                !this.props.withFile)
+                                                ? t(
+                                                      "fileManager.getSourceLinkInBatch"
+                                                  )
+                                                : t(
+                                                      "fileManager.getSourceLink"
+                                                  )}
+                                        </Typography>
+                                    </MenuItem>
+                                )}
+
+                            {!this.props.isMultiple &&
+                                isHomePage &&
+                                user.group.allowRemoteDownload &&
+                                this.props.withFile &&
+                                isTorrent(this.props.selected[0].name) && (
+                                    <MenuItem
+                                        dense
+                                        onClick={() =>
+                                            this.props.openTorrentDownloadDialog()
+                                        }
+                                    >
+                                        <StyledListItemIcon>
+                                            <MagnetOn />
+                                        </StyledListItemIcon>
+                                        <Typography variant="inherit">
+                                            {t(
+                                                "fileManager.createRemoteDownloadForTorrent"
+                                            )}
+                                        </Typography>
+                                    </MenuItem>
+                                )}
+                            {!this.props.isMultiple &&
+                                isHomePage &&
+                                user.group.compress &&
+                                this.props.withFile &&
+                                isCompressFile(this.props.selected[0].name) && (
+                                    <MenuItem
+                                        dense
+                                        onClick={() =>
+                                            this.props.openDecompressDialog()
+                                        }
+                                    >
+                                        <StyledListItemIcon>
+                                            <Unarchive />
+                                        </StyledListItemIcon>
+                                        <Typography variant="inherit">
+                                            {t("fileManager.decompress")}
+                                        </Typography>
+                                    </MenuItem>
+                                )}
+
+                            {isHomePage && user.group.compress && (
+                                <MenuItem
+                                    dense
+                                    onClick={() =>
+                                        this.props.openCompressDialog()
+                                    }
+                                >
+                                    <StyledListItemIcon>
+                                        <Archive />
+                                    </StyledListItemIcon>
+                                    <Typography variant="inherit">
+                                        {t("fileManager.compress")}
+                                    </Typography>
+                                </MenuItem>
+                            )}
+
+                            {isHomePage && user.group.relocate && (
+                                <MenuItem
+                                    dense
+                                    onClick={() =>
+                                        this.props.openRelocateDialog()
+                                    }
+                                >
+                                    <StyledListItemIcon>
+                                        <Transfer />
+                                    </StyledListItemIcon>
+                                    <Typography variant="inherit">
+                                        {t("vas.migrateStoragePolicy")}
+                                    </Typography>
+                                </MenuItem>
+                            )}
+
+                            {!this.props.isMultiple && isHomePage && (
+                                <MenuItem
+                                    dense
+                                    onClick={() => this.props.openShareDialog()}
+                                >
+                                    <StyledListItemIcon>
+                                        <ShareIcon />
+                                    </StyledListItemIcon>
+                                    <Typography variant="inherit">
+                                        {t("fileManager.createShareLink")}
+                                    </Typography>
+                                </MenuItem>
+                            )}
+
+                            {!this.props.isMultiple && isHomePage && (
+                                <MenuItem
+                                    dense
+                                    onClick={() =>
+                                        this.props.toggleObjectInfoSidebar(true)
+                                    }
+                                >
+                                    <StyledListItemIcon>
+                                        <InfoOutlined />
+                                    </StyledListItemIcon>
+                                    <Typography variant="inherit">
+                                        {t("fileManager.viewDetails")}
+                                    </Typography>
+                                </MenuItem>
+                            )}
+
+                            {!this.props.isMultiple && isHomePage && (
+                                <Divider className={classes.divider} />
+                            )}
+
+                            {!this.props.isMultiple && isHomePage && (
+                                <div>
+                                    <MenuItem
+                                        dense
+                                        onClick={() =>
+                                            this.props.openRenameDialog()
+                                        }
+                                    >
+                                        <StyledListItemIcon>
+                                            <RenameIcon />
+                                        </StyledListItemIcon>
+                                        <Typography variant="inherit">
+                                            {t("fileManager.rename")}
+                                        </Typography>
+                                    </MenuItem>
+                                    {!this.props.search && (
+                                        <MenuItem
+                                            dense
+                                            onClick={() =>
+                                                this.props.openCopyDialog()
+                                            }
+                                        >
+                                            <StyledListItemIcon>
+                                                <FileCopyIcon />
+                                            </StyledListItemIcon>
+                                            <Typography variant="inherit">
+                                                {t("fileManager.copy")}
+                                            </Typography>
+                                        </MenuItem>
+                                    )}
+                                </div>
+                            )}
+                            {isHomePage && (
+                                <div>
+                                    {!this.props.search && (
+                                        <MenuItem
+                                            dense
+                                            onClick={() =>
+                                                this.props.openMoveDialog()
+                                            }
+                                        >
+                                            <StyledListItemIcon>
+                                                <MoveIcon />
+                                            </StyledListItemIcon>
+                                            <Typography variant="inherit">
+                                                {t("fileManager.move")}
+                                            </Typography>
+                                        </MenuItem>
+                                    )}
+
+                                    <Divider className={classes.divider} />
+                                    <MenuItem
+                                        dense
+                                        className={classes.propover}
+                                        onClick={() =>
+                                            this.props.openRemoveDialog()
+                                        }
+                                    >
+                                        <StyledListItemIcon>
+                                            <DeleteIcon />
+                                        </StyledListItemIcon>
+                                        <Typography variant="inherit">
+                                            {t("fileManager.delete")}
+                                        </Typography>
+                                    </MenuItem>
+                                </div>
+                            )}
+                        </div>
+                    )}
+                </Menu>
+            </div>
+        );
+    }
+}
+
+ContextMenuCompoment.propTypes = {
+    classes: PropTypes.object.isRequired,
+    menuType: PropTypes.string.isRequired,
+};
+
+const ContextMenu = connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(withStyles(styles)(withRouter(withTranslation()(ContextMenuCompoment))));
+
+export default ContextMenu;
diff --git a/src/component/FileManager/DnD/DragLayer.js b/src/component/FileManager/DnD/DragLayer.js
new file mode 100644
index 0000000..6b7ee6c
--- /dev/null
+++ b/src/component/FileManager/DnD/DragLayer.js
@@ -0,0 +1,85 @@
+import React, { useMemo } from "react";
+import { useDragLayer } from "react-dnd";
+import Preview from "./Preview";
+import { useSelector } from "react-redux";
+
+const layerStyles = {
+    position: "fixed",
+    pointerEvents: "none",
+    zIndex: 100,
+    left: 0,
+    top: 0,
+    width: "100%",
+    height: "100%",
+};
+
+function getItemStyles(
+    initialOffset,
+    currentOffset,
+    pointerOffset,
+    viewMethod
+) {
+    if (!initialOffset || !currentOffset) {
+        return {
+            display: "none",
+        };
+    }
+    let { x, y } = currentOffset;
+    if (viewMethod === "list") {
+        x += pointerOffset.x - initialOffset.x;
+        y += pointerOffset.y - initialOffset.y;
+    }
+
+    const transform = `translate(${x}px, ${y}px)`;
+    return {
+        opacity: 0.5,
+        transform,
+        WebkitTransform: transform,
+    };
+}
+const CustomDragLayer = (props) => {
+    const {
+        itemType,
+        isDragging,
+        item,
+        initialOffset,
+        currentOffset,
+        pointerOffset,
+    } = useDragLayer((monitor) => ({
+        item: monitor.getItem(),
+        itemType: monitor.getItemType(),
+        initialOffset: monitor.getInitialSourceClientOffset(),
+        currentOffset: monitor.getSourceClientOffset(),
+        pointerOffset: monitor.getInitialClientOffset(),
+        isDragging: monitor.isDragging(),
+    }));
+    const viewMethod = useSelector(
+        (state) => state.viewUpdate.explorerViewMethod
+    );
+    const image = useMemo(() => {
+        switch (itemType) {
+            case "object":
+                return <Preview object={item.object} />;
+            default:
+                return null;
+        }
+    }, [itemType, item]);
+    if (!isDragging) {
+        return null;
+    }
+    return (
+        <div style={layerStyles}>
+            <div
+                style={getItemStyles(
+                    initialOffset,
+                    currentOffset,
+                    pointerOffset,
+                    viewMethod
+                )}
+            >
+                {image}
+            </div>
+        </div>
+    );
+};
+export default CustomDragLayer;
diff --git a/src/component/FileManager/DnD/DropWarpper.js b/src/component/FileManager/DnD/DropWarpper.js
new file mode 100644
index 0000000..2833ffb
--- /dev/null
+++ b/src/component/FileManager/DnD/DropWarpper.js
@@ -0,0 +1,49 @@
+import React from "react";
+import { useDrop } from "react-dnd";
+import Folder from "../Folder";
+import classNames from "classnames";
+import TableItem from "../TableRow";
+export default function FolderDropWarpper({
+    isListView,
+    folder,
+    onIconClick,
+    contextMenu,
+    handleClick,
+    handleDoubleClick,
+    className,
+    pref,
+}) {
+    const [{ canDrop, isOver }, drop] = useDrop({
+        accept: "object",
+        drop: () => ({ folder }),
+        collect: (monitor) => ({
+            isOver: monitor.isOver(),
+            canDrop: monitor.canDrop(),
+        }),
+    });
+    const isActive = canDrop && isOver;
+    if (!isListView) {
+        return (
+            <div ref={drop}>
+                <Folder
+                    folder={folder}
+                    onIconClick={onIconClick}
+                    isActive={isActive}
+                />
+            </div>
+        );
+    }
+    return (
+        <TableItem
+            pref={pref}
+            dref={drop}
+            className={className}
+            onIconClick={onIconClick}
+            contextMenu={contextMenu}
+            handleClick={handleClick}
+            handleDoubleClick={handleDoubleClick}
+            file={folder}
+            isActive={isActive}
+        />
+    );
+}
diff --git a/src/component/FileManager/DnD/Preview.js b/src/component/FileManager/DnD/Preview.js
new file mode 100644
index 0000000..93d0370
--- /dev/null
+++ b/src/component/FileManager/DnD/Preview.js
@@ -0,0 +1,74 @@
+import React from "react";
+import SmallIcon from "../SmallIcon";
+import FileIcon from "../FileIcon";
+import { useSelector } from "react-redux";
+import { makeStyles } from "@material-ui/core";
+import Folder from "../Folder";
+
+const useStyles = makeStyles(() => ({
+    dragging: {
+        width: "200px",
+    },
+    cardDragged: {
+        position: "absolute",
+        "transform-origin": "bottom left",
+    },
+}));
+
+const diliverIcon = (object, viewMethod, classes) => {
+    if (object.type === "dir") {
+        return (
+            <div className={classes.dragging}>
+                <SmallIcon file={object} isFolder />
+            </div>
+        );
+    }
+    if (object.type === "file" && viewMethod === "icon") {
+        return (
+            <div className={classes.dragging}>
+                <FileIcon file={object} />
+            </div>
+        );
+    }
+    if (
+        (object.type === "file" && viewMethod === "smallIcon") ||
+        viewMethod === "list"
+    ) {
+        return (
+            <div className={classes.dragging}>
+                <SmallIcon file={object} />
+            </div>
+        );
+    }
+};
+
+const Preview = (props) => {
+    const selected = useSelector((state) => state.explorer.selected);
+    const viewMethod = useSelector(
+        (state) => state.viewUpdate.explorerViewMethod
+    );
+    const classes = useStyles();
+    return (
+        <>
+            {selected.length === 0 &&
+                diliverIcon(props.object, viewMethod, classes)}
+            {selected.length > 0 && (
+                <>
+                    {selected.slice(0, 3).map((card, i) => (
+                        <div
+                            key={card.id}
+                            className={classes.cardDragged}
+                            style={{
+                                zIndex: selected.length - i,
+                                transform: `rotateZ(${-i * 2.5}deg)`,
+                            }}
+                        >
+                            {diliverIcon(card, viewMethod, classes)}
+                        </div>
+                    ))}
+                </>
+            )}
+        </>
+    );
+};
+export default Preview;
diff --git a/src/component/FileManager/DnD/Scrolling.js b/src/component/FileManager/DnD/Scrolling.js
new file mode 100644
index 0000000..8c0d030
--- /dev/null
+++ b/src/component/FileManager/DnD/Scrolling.js
@@ -0,0 +1,63 @@
+import { useRef } from "react";
+import { throttle } from "lodash";
+
+const useDragScrolling = () => {
+    const isScrolling = useRef(false);
+    const target = document.querySelector("#explorer-container");
+
+    const goDown = () => {
+        target.scrollTop += 10;
+
+        const { offsetHeight, scrollTop, scrollHeight } = target;
+        const isScrollEnd = offsetHeight + scrollTop >= scrollHeight;
+
+        if (isScrolling.current && !isScrollEnd) {
+            window.requestAnimationFrame(goDown);
+        }
+    };
+
+    const goUp = () => {
+        target.scrollTop -= 10;
+
+        if (isScrolling.current && target.scrollTop > 0) {
+            window.requestAnimationFrame(goUp);
+        }
+    };
+
+    const onDragOver = (event) => {
+        const isMouseOnTop = event.clientY < 100;
+        const isMouseOnDown = window.innerHeight - event.clientY < 100;
+
+        if (!isScrolling.current && (isMouseOnTop || isMouseOnDown)) {
+            isScrolling.current = true;
+
+            if (isMouseOnTop) {
+                window.requestAnimationFrame(goUp);
+            }
+
+            if (isMouseOnDown) {
+                window.requestAnimationFrame(goDown);
+            }
+        } else if (!isMouseOnTop && !isMouseOnDown) {
+            isScrolling.current = false;
+        }
+    };
+
+    const throttleOnDragOver = throttle(onDragOver, 300);
+
+    const addEventListenerForWindow = () => {
+        window.addEventListener("dragover", throttleOnDragOver, false);
+    };
+
+    const removeEventListenerForWindow = () => {
+        window.removeEventListener("dragover", throttleOnDragOver, false);
+        isScrolling.current = false;
+    };
+
+    return {
+        addEventListenerForWindow,
+        removeEventListenerForWindow,
+    };
+};
+
+export default useDragScrolling;
diff --git a/src/component/FileManager/Explorer.js b/src/component/FileManager/Explorer.js
new file mode 100644
index 0000000..240165f
--- /dev/null
+++ b/src/component/FileManager/Explorer.js
@@ -0,0 +1,477 @@
+import React, { useCallback, useEffect, useMemo } from "react";
+import explorer, {
+    changeContextMenu,
+    openRemoveDialog,
+    setSelectedTarget,
+} from "../../redux/explorer";
+import ObjectIcon from "./ObjectIcon";
+import ContextMenu from "./ContextMenu";
+import classNames from "classnames";
+import ImgPreivew from "./ImgPreview";
+import pathHelper from "../../utils/page";
+import { isMac } from "../../utils";
+import {
+    CircularProgress,
+    Grid,
+    Paper,
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableRow,
+    Typography,
+} from "@material-ui/core";
+import { configure, GlobalHotKeys } from "react-hotkeys";
+import TableSortLabel from "@material-ui/core/TableSortLabel";
+import Nothing from "../Placeholder/Nothing";
+import { useDispatch, useSelector } from "react-redux";
+import { useLocation } from "react-router";
+import { usePagination } from "../../hooks/pagination";
+import { makeStyles } from "@material-ui/core/styles";
+import { useTranslation } from "react-i18next";
+
+const useStyles = makeStyles((theme) => ({
+    paper: {
+        padding: theme.spacing(2),
+        textAlign: "center",
+        color: theme.palette.text.secondary,
+        margin: "10px",
+    },
+    root: {
+        padding: "10px",
+        [theme.breakpoints.up("sm")]: {
+            height: "calc(100vh - 113px)",
+        },
+    },
+    rootTable: {
+        padding: "0px",
+        backgroundColor: theme.palette.background.paper.white,
+        [theme.breakpoints.up("sm")]: {
+            height: "calc(100vh - 113px)",
+        },
+    },
+    typeHeader: {
+        margin: "10px 25px",
+        color: "#6b6b6b",
+        fontWeight: "500",
+    },
+    loading: {
+        justifyContent: "center",
+        display: "flex",
+        marginTop: "40px",
+    },
+    errorBox: {
+        padding: theme.spacing(4),
+    },
+    errorMsg: {
+        marginTop: "10px",
+    },
+    hideAuto: {
+        [theme.breakpoints.down("sm")]: {
+            display: "none",
+        },
+    },
+    flexFix: {
+        minWidth: 0,
+    },
+    upButton: {
+        marginLeft: "20px",
+        marginTop: "10px",
+        marginBottom: "10px",
+    },
+    clickAway: {
+        height: "100%",
+        width: "100%",
+    },
+    rootShare: {
+        height: "100%",
+        minHeight: 500,
+    },
+    visuallyHidden: {
+        border: 0,
+        clip: "rect(0 0 0 0)",
+        height: 1,
+        margin: -1,
+        overflow: "hidden",
+        padding: 0,
+        position: "absolute",
+        top: 20,
+        width: 1,
+    },
+    gridContainer: {
+        [theme.breakpoints.down("sm")]: {
+            gridTemplateColumns:
+                "repeat(auto-fill,minmax(180px,1fr))!important",
+        },
+        [theme.breakpoints.up("md")]: {
+            gridTemplateColumns:
+                "repeat(auto-fill,minmax(220px,1fr))!important",
+        },
+        display: "grid!important",
+    },
+    gridItem: {
+        flex: "1 1 220px!important",
+    },
+}));
+
+const keyMap = {
+    DELETE_FILE: "del",
+    SELECT_ALL_SHOWED: `${isMac() ? "command" : "ctrl"}+a`,
+    SELECT_ALL: `${isMac() ? "command" : "ctrl"}+shift+a`,
+    DESELECT_ALL: "esc",
+};
+
+export default function Explorer({ share }) {
+    const { t } = useTranslation("application", { keyPrefix: "fileManager" });
+    const location = useLocation();
+    const dispatch = useDispatch();
+    const selected = useSelector((state) => state.explorer.selected);
+    const search = useSelector((state) => state.explorer.search);
+    const loading = useSelector((state) => state.viewUpdate.navigatorLoading);
+    const path = useSelector((state) => state.navigator.path);
+    const sortMethod = useSelector((state) => state.viewUpdate.sortMethod);
+    const navigatorErrorMsg = useSelector(
+        (state) => state.viewUpdate.navigatorErrorMsg
+    );
+    const navigatorError = useSelector(
+        (state) => state.viewUpdate.navigatorError
+    );
+    const viewMethod = useSelector(
+        (state) => state.viewUpdate.explorerViewMethod
+    );
+
+    const OpenRemoveDialog = useCallback(() => dispatch(openRemoveDialog()), [
+        dispatch,
+    ]);
+    const SetSelectedTarget = useCallback(
+        (targets) => dispatch(setSelectedTarget(targets)),
+        [dispatch]
+    );
+    const ChangeContextMenu = useCallback(
+        (type, open) => dispatch(changeContextMenu(type, open)),
+        [dispatch]
+    );
+    const ChangeSortMethod = useCallback(
+        (method) => dispatch(explorer.actions.changeSortMethod(method)),
+        [dispatch]
+    );
+    const SelectAll = useCallback(
+        () => dispatch(explorer.actions.selectAll()),
+        [dispatch]
+    );
+
+    const { dirList, fileList, startIndex } = usePagination();
+
+    const handlers = {
+        DELETE_FILE: () => {
+            if (selected.length > 0 && !share) {
+                OpenRemoveDialog();
+            }
+        },
+        SELECT_ALL_SHOWED: (e) => {
+            e.preventDefault();
+            if (selected.length >= dirList.length + fileList.length) {
+                SetSelectedTarget([]);
+            } else {
+                SetSelectedTarget([...dirList, ...fileList]);
+            }
+        },
+        SELECT_ALL: (e) => {
+            e.preventDefault();
+            SelectAll();
+        },
+        DESELECT_ALL: (e) => {
+            e.preventDefault();
+            SetSelectedTarget([]);
+        },
+    };
+
+    useEffect(
+        () =>
+            configure({
+                ignoreTags: ["input", "select", "textarea"],
+            }),
+        []
+    );
+
+    const contextMenu = (e) => {
+        e.preventDefault();
+        if (!search && !pathHelper.isSharePage(location.pathname)) {
+            if (!loading) {
+                ChangeContextMenu("empty", true);
+            }
+        }
+    };
+
+    const ClickAway = (e) => {
+        const element = e.target;
+        if (element.dataset.clickaway) {
+            SetSelectedTarget([]);
+        }
+    };
+
+    const classes = useStyles();
+    const isHomePage = pathHelper.isHomePage(location.pathname);
+
+    const showView =
+        !loading && (dirList.length !== 0 || fileList.length !== 0);
+
+    const listView = useMemo(
+        () => (
+            <Table className={classes.table}>
+                <TableHead>
+                    <TableRow>
+                        <TableCell>
+                            <TableSortLabel
+                                active={
+                                    sortMethod === "namePos" ||
+                                    sortMethod === "nameRev"
+                                }
+                                direction={
+                                    sortMethod === "namePos" ? "asc" : "des"
+                                }
+                                onClick={() => {
+                                    ChangeSortMethod(
+                                        sortMethod === "namePos"
+                                            ? "nameRev"
+                                            : "namePos"
+                                    );
+                                }}
+                            >
+                                {t("name")}
+                                {sortMethod === "namePos" ||
+                                sortMethod === "nameRev" ? (
+                                    <span className={classes.visuallyHidden}>
+                                        {sortMethod === "nameRev"
+                                            ? "sorted descending"
+                                            : "sorted ascending"}
+                                    </span>
+                                ) : null}
+                            </TableSortLabel>
+                        </TableCell>
+                        <TableCell className={classes.hideAuto}>
+                            <TableSortLabel
+                                active={
+                                    sortMethod === "sizePos" ||
+                                    sortMethod === "sizeRes"
+                                }
+                                direction={
+                                    sortMethod === "sizePos" ? "asc" : "des"
+                                }
+                                onClick={() => {
+                                    ChangeSortMethod(
+                                        sortMethod === "sizePos"
+                                            ? "sizeRes"
+                                            : "sizePos"
+                                    );
+                                }}
+                            >
+                                {t("size")}
+                                {sortMethod === "sizePos" ||
+                                sortMethod === "sizeRes" ? (
+                                    <span className={classes.visuallyHidden}>
+                                        {sortMethod === "sizeRes"
+                                            ? "sorted descending"
+                                            : "sorted ascending"}
+                                    </span>
+                                ) : null}
+                            </TableSortLabel>
+                        </TableCell>
+                        <TableCell className={classes.hideAuto}>
+                            <TableSortLabel
+                                active={
+                                    sortMethod === "modifyTimePos" ||
+                                    sortMethod === "modifyTimeRev"
+                                }
+                                direction={
+                                    sortMethod === "modifyTimePos"
+                                        ? "asc"
+                                        : "des"
+                                }
+                                onClick={() => {
+                                    ChangeSortMethod(
+                                        sortMethod === "modifyTimePos"
+                                            ? "modifyTimeRev"
+                                            : "modifyTimePos"
+                                    );
+                                }}
+                            >
+                                {t("lastModified")}
+                                {sortMethod === "modifyTimePos" ||
+                                sortMethod === "modifyTimeRev" ? (
+                                    <span className={classes.visuallyHidden}>
+                                        {sortMethod === "sizeRes"
+                                            ? "sorted descending"
+                                            : "sorted ascending"}
+                                    </span>
+                                ) : null}
+                            </TableSortLabel>
+                        </TableCell>
+                    </TableRow>
+                </TableHead>
+                <TableBody>
+                    {pathHelper.isMobile() && path !== "/" && (
+                        <ObjectIcon
+                            file={{
+                                type: "up",
+                                name: t("backToParentFolder"),
+                            }}
+                        />
+                    )}
+                    {dirList.map((value, index) => (
+                        <ObjectIcon
+                            key={value.id}
+                            file={value}
+                            index={startIndex + index}
+                        />
+                    ))}
+                    {fileList.map((value, index) => (
+                        <ObjectIcon
+                            key={value.id}
+                            file={value}
+                            index={startIndex + dirList.length + index}
+                        />
+                    ))}
+                </TableBody>
+            </Table>
+        ),
+        [dirList, fileList, path, sortMethod, ChangeSortMethod, classes]
+    );
+
+    const normalView = useMemo(
+        () => (
+            <div className={classes.flexFix}>
+                {dirList.length !== 0 && (
+                    <>
+                        <Typography
+                            data-clickAway={"true"}
+                            variant="body2"
+                            className={classes.typeHeader}
+                        >
+                            {t("folders")}
+                        </Typography>
+                        <Grid
+                            data-clickAway={"true"}
+                            container
+                            spacing={0}
+                            alignItems="flex-start"
+                            className={classes.gridContainer}
+                        >
+                            {dirList.map((value, index) => (
+                                <Grid
+                                    key={value.id}
+                                    item
+                                    className={classes.gridItem}
+                                >
+                                    <ObjectIcon
+                                        key={value.id}
+                                        file={value}
+                                        index={startIndex + index}
+                                    />
+                                </Grid>
+                            ))}
+                        </Grid>
+                    </>
+                )}
+                {fileList.length !== 0 && (
+                    <>
+                        <Typography
+                            data-clickAway={"true"}
+                            variant="body2"
+                            className={classes.typeHeader}
+                        >
+                            {t("files")}
+                        </Typography>
+                        <Grid
+                            data-clickAway={"true"}
+                            container
+                            spacing={0}
+                            alignItems="flex-start"
+                            className={classes.gridContainer}
+                        >
+                            {fileList.map((value, index) => (
+                                <Grid
+                                    className={classes.gridItem}
+                                    key={value.id}
+                                    item
+                                >
+                                    <ObjectIcon
+                                        key={value.id}
+                                        index={
+                                            startIndex + dirList.length + index
+                                        }
+                                        file={value}
+                                    />
+                                </Grid>
+                            ))}
+                        </Grid>
+                    </>
+                )}
+            </div>
+        ),
+        [dirList, fileList, classes]
+    );
+
+    const view = viewMethod === "list" ? listView : normalView;
+
+    return (
+        <div
+            onContextMenu={contextMenu}
+            onClick={ClickAway}
+            className={classNames(
+                {
+                    [classes.root]: viewMethod !== "list",
+                    [classes.rootTable]: viewMethod === "list",
+                    [classes.rootShare]: share,
+                },
+                classes.button
+            )}
+        >
+            <GlobalHotKeys handlers={handlers} allowChanges keyMap={keyMap} />
+            <ContextMenu share={share} />
+            <ImgPreivew />
+            {navigatorError && (
+                <Paper elevation={1} className={classes.errorBox}>
+                    <Typography variant="h5" component="h3">
+                        {t("listError")}
+                    </Typography>
+                    <Typography
+                        color={"textSecondary"}
+                        className={classes.errorMsg}
+                    >
+                        {navigatorErrorMsg.message}
+                    </Typography>
+                </Paper>
+            )}
+
+            {loading && !navigatorError && (
+                <div className={classes.loading}>
+                    <CircularProgress />
+                </div>
+            )}
+
+            {!search &&
+                isHomePage &&
+                dirList.length === 0 &&
+                fileList.length === 0 &&
+                !loading &&
+                !navigatorError && (
+                    <Nothing
+                        primary={t("dropFileHere")}
+                        secondary={t("orClickUploadButton")}
+                    />
+                )}
+            {((search &&
+                dirList.length === 0 &&
+                fileList.length === 0 &&
+                !loading &&
+                !navigatorError) ||
+                (dirList.length === 0 &&
+                    fileList.length === 0 &&
+                    !loading &&
+                    !navigatorError &&
+                    !isHomePage)) && <Nothing primary={t("nothingFound")} />}
+            {showView && view}
+        </div>
+    );
+}
diff --git a/src/component/FileManager/FileIcon.js b/src/component/FileManager/FileIcon.js
new file mode 100644
index 0000000..1219535
--- /dev/null
+++ b/src/component/FileManager/FileIcon.js
@@ -0,0 +1,301 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import classNames from "classnames";
+import { LazyLoadImage } from "react-lazy-load-image-component";
+import ContentLoader from "react-content-loader";
+import { baseURL } from "../../middleware/Api";
+import {
+    ButtonBase,
+    Divider,
+    fade,
+    Tooltip,
+    Typography,
+    withStyles,
+} from "@material-ui/core";
+import TypeIcon from "./TypeIcon";
+import { withRouter } from "react-router";
+import pathHelper from "../../utils/page";
+import statusHelper from "../../utils/page";
+import CheckCircleRoundedIcon from "@material-ui/icons/CheckCircleRounded";
+import Grow from "@material-ui/core/Grow";
+import FileName from "./FileName";
+
+const styles = (theme) => ({
+    container: {},
+
+    selected: {
+        "&:hover": {
+            border: "1px solid #d0d0d0",
+        },
+        backgroundColor: fade(
+            theme.palette.primary.main,
+            theme.palette.type === "dark" ? 0.3 : 0.18
+        ),
+    },
+
+    notSelected: {
+        "&:hover": {
+            backgroundColor: theme.palette.background.default,
+            border: "1px solid #d0d0d0",
+        },
+        backgroundColor: theme.palette.background.paper,
+    },
+
+    button: {
+        border: "1px solid " + theme.palette.divider,
+        width: "100%",
+        borderRadius: theme.shape.borderRadius,
+        boxSizing: "border-box",
+        transition:
+            "background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
+        alignItems: "initial",
+        display: "initial",
+    },
+    folderNameSelected: {
+        color:
+            theme.palette.type === "dark" ? "#fff" : theme.palette.primary.dark,
+        fontWeight: "500",
+    },
+    folderNameNotSelected: {
+        color: theme.palette.text.secondary,
+    },
+    folderName: {
+        marginTop: "15px",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+        overflow: "hidden",
+        marginRight: "20px",
+    },
+    preview: {
+        overflow: "hidden",
+        height: "150px",
+        width: "100%",
+        borderRadius: "12px 12px 0 0",
+        backgroundColor: theme.palette.background.default,
+    },
+    previewIcon: {
+        overflow: "hidden",
+        height: "149px",
+        width: "100%",
+        borderRadius: "12px 12px 0 0",
+        backgroundColor: theme.palette.background.paper,
+        paddingTop: "50px",
+    },
+    iconBig: {
+        fontSize: 50,
+    },
+    picPreview: {
+        objectFit: "cover",
+        width: "100%",
+        height: "100%",
+    },
+    fileInfo: {
+        height: "50px",
+        display: "flex",
+    },
+    icon: {
+        margin: "10px 10px 10px 16px",
+        height: "30px",
+        minWidth: "30px",
+        backgroundColor: theme.palette.background.paper,
+        borderRadius: "90%",
+        paddingTop: "3px",
+        color: theme.palette.text.secondary,
+    },
+    hide: {
+        display: "none",
+    },
+    loadingAnimation: {
+        borderRadius: "12px 12px 0 0",
+        height: "100%",
+        width: "100%",
+    },
+    shareFix: {
+        marginLeft: "20px",
+    },
+    checkIcon: {
+        color: theme.palette.primary.main,
+    },
+    noDrag: {
+        userDrag: "none",
+    },
+});
+
+const mapStateToProps = (state) => {
+    return {
+        path: state.navigator.path,
+        selected: state.explorer.selected,
+        shareInfo: state.viewUpdate.shareInfo,
+    };
+};
+
+const mapDispatchToProps = () => {
+    return {};
+};
+
+class FileIconCompoment extends Component {
+    static defaultProps = {
+        share: false,
+    };
+
+    state = {
+        loading: false,
+        showPicIcon: false,
+    };
+
+    shouldComponentUpdate(nextProps, nextState, nextContext) {
+        const isSelectedCurrent =
+            this.props.selected.findIndex((value) => {
+                return value === this.props.file;
+            }) !== -1;
+        const isSelectedNext =
+            nextProps.selected.findIndex((value) => {
+                return value === this.props.file;
+            }) !== -1;
+        if (
+            nextProps.selected !== this.props.selected &&
+            isSelectedCurrent === isSelectedNext
+        ) {
+            return false;
+        }
+
+        return true;
+    }
+
+    render() {
+        const { classes } = this.props;
+        const isSelected =
+            this.props.selected.findIndex((value) => {
+                return value === this.props.file;
+            }) !== -1;
+        const isSharePage = pathHelper.isSharePage(
+            this.props.location.pathname
+        );
+        const isMobile = statusHelper.isMobile();
+
+        return (
+            <div className={classes.container}>
+                <ButtonBase
+                    focusRipple
+                    className={classNames(
+                        {
+                            [classes.selected]: isSelected,
+                            [classes.notSelected]: !isSelected,
+                        },
+                        classes.button
+                    )}
+                >
+                    {this.props.file.thumb && !this.state.showPicIcon && (
+                            <div className={classes.preview}>
+                                <LazyLoadImage
+                                    className={classNames(
+                                        {
+                                            [classes.hide]: this.state.loading,
+                                            [classes.picPreview]:
+                                                !this.state.loading,
+                                        },
+                                        classes.noDrag
+                                    )}
+                                    src={
+                                        baseURL +
+                                        (isSharePage && this.props.shareInfo
+                                            ? "/share/thumb/" +
+                                              this.props.shareInfo.key +
+                                              "/" +
+                                              this.props.file.id +
+                                              "?path=" +
+                                              encodeURIComponent(
+                                                  this.props.file.path
+                                              )
+                                            : "/file/thumb/" + this.props.file.id)
+                                    }
+                                    afterLoad={() =>
+                                        this.setState({ loading: false })
+                                    }
+                                    beforeLoad={() =>
+                                        this.setState({ loading: true })
+                                    }
+                                    onError={() =>
+                                        this.setState({ showPicIcon: true })
+                                    }
+                                />
+                                <ContentLoader
+                                    height={150}
+                                    width={170}
+                                    className={classNames(
+                                        {
+                                            [classes.hide]: !this.state.loading,
+                                        },
+                                        classes.loadingAnimation
+                                    )}
+                                >
+                                <rect x="0" y="0" width="100%" height="150" />
+                                </ContentLoader>
+                            </div>
+                        )}
+                    {(!this.props.file.thumb || this.state.showPicIcon) && (
+                        <div className={classes.previewIcon}>
+                            <TypeIcon
+                                className={classes.iconBig}
+                                fileName={this.props.file.name}
+                            />
+                        </div>
+                    )}
+                    {(!this.props.file.thumb || this.state.showPicIcon) && (
+                        <Divider />
+                    )}
+                    <div className={classes.fileInfo}>
+                        {!this.props.share && (
+                            <div
+                                onClick={this.props.onIconClick}
+                                className={classNames(classes.icon, {
+                                    [classes.iconSelected]: isSelected,
+                                    [classes.iconNotSelected]: !isSelected,
+                                })}
+                            >
+                                {!isSelected && (
+                                    <TypeIcon fileName={this.props.file.name} />
+                                )}
+                                {isSelected && (
+                                    <Grow in={isSelected}>
+                                        <CheckCircleRoundedIcon
+                                            className={classes.checkIcon}
+                                        />
+                                    </Grow>
+                                )}
+                            </div>
+                        )}
+                        <Tooltip
+                            title={this.props.file.name}
+                            aria-label={this.props.file.name}
+                        >
+                            <Typography
+                                variant="body2"
+                                className={classNames(classes.folderName, {
+                                    [classes.folderNameSelected]: isSelected,
+                                    [classes.folderNameNotSelected]: !isSelected,
+                                    [classes.shareFix]: this.props.share,
+                                })}
+                            >
+                                <FileName name={this.props.file.name} />
+                            </Typography>
+                        </Tooltip>
+                    </div>
+                </ButtonBase>
+            </div>
+        );
+    }
+}
+
+FileIconCompoment.propTypes = {
+    classes: PropTypes.object.isRequired,
+    file: PropTypes.object.isRequired,
+};
+
+const FileIcon = connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(withStyles(styles)(withRouter(FileIconCompoment)));
+
+export default FileIcon;
diff --git a/src/component/FileManager/FileManager.js b/src/component/FileManager/FileManager.js
new file mode 100644
index 0000000..3b20a42
--- /dev/null
+++ b/src/component/FileManager/FileManager.js
@@ -0,0 +1,120 @@
+import React, { Component } from "react";
+
+import Navigator from "./Navigator/Navigator";
+import { DndProvider } from "react-dnd";
+import HTML5Backend from "react-dnd-html5-backend";
+import DragLayer from "./DnD/DragLayer";
+import Explorer from "./Explorer";
+import Modals from "./Modals";
+import { connect } from "react-redux";
+import { changeSubTitle } from "../../redux/viewUpdate/action";
+import { withRouter } from "react-router-dom";
+import pathHelper from "../../utils/page";
+import SideDrawer from "./Sidebar/SideDrawer";
+import classNames from "classnames";
+//import { ImageLoader } from "@abslant/cd-image-loader";
+import {
+    closeAllModals,
+    navigateTo,
+    setSelectedTarget,
+    toggleSnackbar,
+} from "../../redux/explorer";
+import PaginationFooter from "./Pagination";
+import withStyles from "@material-ui/core/styles/withStyles";
+
+const styles = (theme) => ({
+    root: {
+        display: "flex",
+        flexDirection: "column",
+        height: "calc(100vh - 64px)",
+        [theme.breakpoints.down("xs")]: {
+            height: "100%",
+        },
+    },
+    rootShare: {
+        display: "flex",
+        flexDirection: "column",
+        height: "100%",
+        minHeight: 500,
+    },
+    explorer: {
+        display: "flex",
+        flexDirection: "column",
+        overflowY: "auto",
+    },
+});
+
+const mapStateToProps = () => ({});
+
+const mapDispatchToProps = (dispatch) => {
+    return {
+        changeSubTitle: (text) => {
+            dispatch(changeSubTitle(text));
+        },
+        setSelectedTarget: (targets) => {
+            dispatch(setSelectedTarget(targets));
+        },
+        toggleSnackbar: (vertical, horizontal, msg, color) => {
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color));
+        },
+        closeAllModals: () => {
+            dispatch(closeAllModals());
+        },
+        navigateTo: (path) => {
+            dispatch(navigateTo(path));
+        },
+    };
+};
+
+class FileManager extends Component {
+    constructor(props) {
+        super(props);
+        this.image = React.createRef();
+    }
+
+    componentWillUnmount() {
+        this.props.setSelectedTarget([]);
+        this.props.closeAllModals();
+        this.props.navigateTo("/");
+    }
+
+    componentDidMount() {
+        if (pathHelper.isHomePage(this.props.location.pathname)) {
+            this.props.changeSubTitle(null);
+        }
+    }
+
+    render() {
+        const { classes } = this.props;
+        return (
+            <div
+                className={classNames({
+                    [classes.rootShare]: this.props.share,
+                    [classes.root]: !this.props.share,
+                })}
+            >
+                <DndProvider backend={HTML5Backend}>
+                    <Modals share={this.props.share} />
+                    <Navigator
+                        isShare={this.props.isShare}
+                        share={this.props.share}
+                    />
+                    <div className={classes.explorer} id={"explorer-container"}>
+                        <Explorer share={this.props.share} />
+                        <PaginationFooter />
+                    </div>
+
+                    <DragLayer />
+                </DndProvider>
+                <SideDrawer />
+            </div>
+        );
+    }
+}
+
+FileManager.propTypes = {};
+
+export default connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(withStyles(styles)(withRouter(FileManager)));
diff --git a/src/component/FileManager/FileName.js b/src/component/FileManager/FileName.js
new file mode 100644
index 0000000..81813f8
--- /dev/null
+++ b/src/component/FileManager/FileName.js
@@ -0,0 +1,28 @@
+import Highlighter from "react-highlight-words";
+import { trimPrefix } from "../Uploader/core/utils";
+import React from "react";
+import { useSelector } from "react-redux";
+import { makeStyles } from "@material-ui/core/styles";
+
+const useStyles = makeStyles((theme) => ({
+    highlight: {
+        backgroundColor: theme.palette.warning.light,
+    },
+}));
+
+export default function FileName({ name }) {
+    const classes = useStyles();
+    const search = useSelector((state) => state.explorer.search);
+    if (!search) {
+        return name;
+    }
+
+    return (
+        <Highlighter
+            highlightClassName={classes.highlight}
+            searchWords={trimPrefix(search.keywords, "keywords/").split(" ")}
+            autoEscape={true}
+            textToHighlight={name}
+        />
+    );
+}
diff --git a/src/component/FileManager/Folder.js b/src/component/FileManager/Folder.js
new file mode 100644
index 0000000..d89ba5a
--- /dev/null
+++ b/src/component/FileManager/Folder.js
@@ -0,0 +1,128 @@
+import React from "react";
+import FolderIcon from "@material-ui/icons/Folder";
+import classNames from "classnames";
+import {
+    ButtonBase,
+    fade,
+    makeStyles,
+    Tooltip,
+    Typography,
+} from "@material-ui/core";
+import { useSelector } from "react-redux";
+import statusHelper from "../../utils/page";
+import CheckCircleRoundedIcon from "@material-ui/icons/CheckCircleRounded";
+
+const useStyles = makeStyles((theme) => ({
+    container: {
+        padding: "7px",
+    },
+
+    selected: {
+        "&:hover": {
+            border: "1px solid #d0d0d0",
+        },
+        backgroundColor: fade(
+            theme.palette.primary.main,
+            theme.palette.type === "dark" ? 0.3 : 0.18
+        ),
+    },
+
+    notSelected: {
+        "&:hover": {
+            backgroundColor: theme.palette.background.default,
+            border: "1px solid #d0d0d0",
+        },
+        backgroundColor: theme.palette.background.paper,
+    },
+
+    button: {
+        height: "50px",
+        border: "1px solid " + theme.palette.divider,
+        width: "100%",
+        borderRadius: theme.shape.borderRadius,
+        boxSizing: "border-box",
+        transition:
+            "background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
+        display: "flex",
+        justifyContent: "left",
+        alignItems: "initial",
+    },
+    icon: {
+        margin: "10px 10px 10px 16px",
+        height: "30px",
+        minWidth: "30px",
+        backgroundColor: theme.palette.background.paper,
+        borderRadius: "90%",
+        paddingTop: "3px",
+        color: theme.palette.text.secondary,
+    },
+    folderNameSelected: {
+        color:
+            theme.palette.type === "dark" ? "#fff" : theme.palette.primary.dark,
+        fontWeight: "500",
+    },
+    folderNameNotSelected: {
+        color: theme.palette.text.secondary,
+    },
+    folderName: {
+        marginTop: "15px",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+        overflow: "hidden",
+        marginRight: "20px",
+    },
+    active: {
+        boxShadow: "0 0 0 2px " + theme.palette.primary.light,
+    },
+    checkIcon: {
+        color: theme.palette.primary.main,
+    },
+}));
+
+export default function Folder({ folder, isActive, onIconClick }) {
+    const selected = useSelector((state) => state.explorer.selected);
+    const classes = useStyles();
+    const isMobile = statusHelper.isMobile();
+    const isSelected =
+        selected.findIndex((value) => {
+            return value === folder;
+        }) !== -1;
+
+    return (
+        <ButtonBase
+            focusRipple
+            className={classNames(
+                {
+                    [classes.selected]: isSelected,
+                    [classes.notSelected]: !isSelected,
+                    [classes.active]: isActive,
+                },
+                classes.button
+            )}
+        >
+            <div
+                onClick={onIconClick}
+                className={classNames(classes.icon, {
+                    [classes.iconSelected]: isSelected,
+                    [classes.iconNotSelected]: !isSelected,
+                })}
+            >
+                {!isSelected && <FolderIcon />}
+                {isSelected && (
+                    <CheckCircleRoundedIcon className={classes.checkIcon} />
+                )}
+            </div>
+            <Tooltip title={folder.name} aria-label={folder.name}>
+                <Typography
+                    variant="body2"
+                    className={classNames(classes.folderName, {
+                        [classes.folderNameSelected]: isSelected,
+                        [classes.folderNameNotSelected]: !isSelected,
+                    })}
+                >
+                    {folder.name}
+                </Typography>
+            </Tooltip>
+        </ButtonBase>
+    );
+}
diff --git a/src/component/FileManager/ImgPreview.js b/src/component/FileManager/ImgPreview.js
new file mode 100644
index 0000000..e367bc2
--- /dev/null
+++ b/src/component/FileManager/ImgPreview.js
@@ -0,0 +1,137 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import { baseURL } from "../../middleware/Api";
+import { imgPreviewSuffix } from "../../config";
+import { withStyles } from "@material-ui/core";
+import pathHelper from "../../utils/page";
+import { withRouter } from "react-router";
+import { PhotoSlider } from "react-photo-view";
+import "react-photo-view/dist/index.css";
+import * as explorer from "../../redux/explorer/reducer";
+import { showImgPreivew } from "../../redux/explorer";
+
+const styles = () => ({});
+
+const mapStateToProps = (state) => {
+    return {
+        first: state.explorer.imgPreview.first,
+        other: state.explorer.imgPreview.other,
+    };
+};
+
+const mapDispatchToProps = (dispatch) => {
+    return {
+        showImgPreivew: (first) => {
+            dispatch(showImgPreivew(first));
+        },
+    };
+};
+
+class ImagPreviewComponent extends Component {
+    state = {
+        items: [],
+        photoIndex: 0,
+        isOpen: false,
+    };
+
+    UNSAFE_componentWillReceiveProps = (nextProps) => {
+        const items = [];
+        let firstOne = 0;
+        if (nextProps.first.id !== "") {
+            if (
+                pathHelper.isSharePage(this.props.location.pathname) &&
+                !nextProps.first.path
+            ) {
+                const newImg = {
+                    intro: nextProps.first.name,
+                    src: baseURL + "/share/preview/" + nextProps.first.key,
+                };
+                firstOne = 0;
+                items.push(newImg);
+                this.setState({
+                    photoIndex: firstOne,
+                    items: items,
+                    isOpen: true,
+                });
+                return;
+            }
+            // eslint-disable-next-line
+            nextProps.other.map((value) => {
+                const fileType = value.name.split(".").pop().toLowerCase();
+                if (imgPreviewSuffix.indexOf(fileType) !== -1) {
+                    let src = "";
+                    if (pathHelper.isSharePage(this.props.location.pathname)) {
+                        src = baseURL + "/share/preview/" + value.key;
+                        src =
+                            src +
+                            "?path=" +
+                            encodeURIComponent(
+                                value.path === "/"
+                                    ? value.path + value.name
+                                    : value.path + "/" + value.name
+                            );
+                    } else {
+                        src = baseURL + "/file/preview/" + value.id;
+                    }
+                    const newImg = {
+                        intro: value.name,
+                        src: src,
+                    };
+                    if (
+                        value.path === nextProps.first.path &&
+                        value.name === nextProps.first.name
+                    ) {
+                        firstOne = items.length;
+                    }
+                    items.push(newImg);
+                }
+            });
+            this.setState({
+                photoIndex: firstOne,
+                items: items,
+                isOpen: true,
+            });
+        }
+    };
+
+    handleClose = () => {
+        this.props.showImgPreivew(explorer.initState.imgPreview.first);
+        this.setState({
+            isOpen: false,
+        });
+    };
+
+    render() {
+        const { photoIndex, isOpen, items } = this.state;
+
+        return (
+            <div>
+                {isOpen && (
+                    <PhotoSlider
+                        images={items}
+                        visible={isOpen}
+                        onClose={() => this.handleClose()}
+                        index={photoIndex}
+                        onIndexChange={(n) =>
+                            this.setState({
+                                photoIndex: n,
+                            })
+                        }
+                    />
+                )}
+            </div>
+        );
+    }
+}
+
+ImagPreviewComponent.propTypes = {
+    classes: PropTypes.object.isRequired,
+};
+
+const ImgPreivew = connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(withStyles(styles)(withRouter(ImagPreviewComponent)));
+
+export default ImgPreivew;
diff --git a/src/component/FileManager/Modals.js b/src/component/FileManager/Modals.js
new file mode 100644
index 0000000..c640b21
--- /dev/null
+++ b/src/component/FileManager/Modals.js
@@ -0,0 +1,793 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import PathSelector from "./PathSelector";
+import API from "../../middleware/Api";
+import {
+    Button,
+    CircularProgress,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogContentText,
+    DialogTitle,
+    TextField,
+    withStyles,
+} from "@material-ui/core";
+import Loading from "../Modals/Loading";
+import CopyDialog from "../Modals/Copy";
+import DirectoryDownloadDialog from "../Modals/DirectoryDownload";
+import CreatShare from "../Modals/CreateShare";
+import { withRouter } from "react-router-dom";
+import PurchaseShareDialog from "../Modals/PurchaseShare";
+import DecompressDialog from "../Modals/Decompress";
+import CompressDialog from "../Modals/Compress";
+import RelocateDialog from "../Modals/Relocate";
+import {
+    closeAllModals,
+    openLoadingDialog,
+    refreshFileList,
+    refreshStorage,
+    setModalsLoading,
+    toggleSnackbar,
+} from "../../redux/explorer";
+import OptionSelector from "../Modals/OptionSelector";
+import { Trans, withTranslation } from "react-i18next";
+import RemoteDownload from "../Modals/RemoteDownload";
+import Delete from "../Modals/Delete";
+
+const styles = (theme) => ({
+    wrapper: {
+        margin: theme.spacing(1),
+        position: "relative",
+    },
+    buttonProgress: {
+        color: theme.palette.secondary.light,
+        position: "absolute",
+        top: "50%",
+        left: "50%",
+        marginTop: -12,
+        marginLeft: -12,
+    },
+    contentFix: {
+        padding: "10px 24px 0px 24px",
+    },
+});
+
+const mapStateToProps = (state) => {
+    return {
+        path: state.navigator.path,
+        selected: state.explorer.selected,
+        modalsStatus: state.viewUpdate.modals,
+        modalsLoading: state.viewUpdate.modalsLoading,
+        dirList: state.explorer.dirList,
+        fileList: state.explorer.fileList,
+        dndSignale: state.explorer.dndSignal,
+        dndTarget: state.explorer.dndTarget,
+        dndSource: state.explorer.dndSource,
+        loading: state.viewUpdate.modals.loading,
+        loadingText: state.viewUpdate.modals.loadingText,
+    };
+};
+
+const mapDispatchToProps = (dispatch) => {
+    return {
+        closeAllModals: () => {
+            dispatch(closeAllModals());
+        },
+        toggleSnackbar: (vertical, horizontal, msg, color) => {
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color));
+        },
+        setModalsLoading: (status) => {
+            dispatch(setModalsLoading(status));
+        },
+        refreshFileList: () => {
+            dispatch(refreshFileList());
+        },
+        refreshStorage: () => {
+            dispatch(refreshStorage());
+        },
+        openLoadingDialog: (text) => {
+            dispatch(openLoadingDialog(text));
+        },
+    };
+};
+
+class ModalsCompoment extends Component {
+    state = {
+        newFolderName: "",
+        newFileName: "",
+        newName: "",
+        selectedPath: "",
+        selectedPathName: "",
+        secretShare: false,
+        sharePwd: "",
+        shareUrl: "",
+        purchaseCallback: null,
+    };
+
+    handleInputChange = (e) => {
+        this.setState({
+            [e.target.id]: e.target.value,
+        });
+    };
+
+    newNameSuffix = "";
+
+    UNSAFE_componentWillReceiveProps = (nextProps) => {
+        if (this.props.dndSignale !== nextProps.dndSignale) {
+            this.dragMove(nextProps.dndSource, nextProps.dndTarget);
+            return;
+        }
+
+        if (this.props.modalsStatus.rename !== nextProps.modalsStatus.rename) {
+            const name = nextProps.selected[0].name;
+            this.setState({
+                newName: name,
+            });
+            return;
+        }
+    };
+
+    submitResave = (e) => {
+        e.preventDefault();
+        this.props.setModalsLoading(true);
+        API.post("/share/save/" + window.shareKey, {
+            path:
+                this.state.selectedPath === "//"
+                    ? "/"
+                    : this.state.selectedPath,
+        })
+            .then(() => {
+                this.onClose();
+                this.props.toggleSnackbar(
+                    "top",
+                    "right",
+                    this.props.t("vas.fileSaved"),
+                    "success"
+                );
+                this.props.refreshFileList();
+                this.props.setModalsLoading(false);
+            })
+            .catch((error) => {
+                this.props.toggleSnackbar(
+                    "top",
+                    "right",
+                    error.message,
+                    "error"
+                );
+                this.props.setModalsLoading(false);
+            });
+    };
+
+    submitMove = (e) => {
+        if (e != null) {
+            e.preventDefault();
+        }
+        this.props.setModalsLoading(true);
+        const dirs = [],
+            items = [];
+        // eslint-disable-next-line
+        this.props.selected.map((value) => {
+            if (value.type === "dir") {
+                dirs.push(value.id);
+            } else {
+                items.push(value.id);
+            }
+        });
+        API.patch("/object", {
+            action: "move",
+            src_dir: this.props.selected[0].path,
+            src: {
+                dirs: dirs,
+                items: items,
+            },
+            dst: this.DragSelectedPath
+                ? this.DragSelectedPath
+                : this.state.selectedPath === "//"
+                ? "/"
+                : this.state.selectedPath,
+        })
+            .then(() => {
+                this.onClose();
+                this.props.refreshFileList();
+                this.props.setModalsLoading(false);
+                this.DragSelectedPath = "";
+            })
+            .catch((error) => {
+                this.props.toggleSnackbar(
+                    "top",
+                    "right",
+                    error.message,
+                    "error"
+                );
+                this.props.setModalsLoading(false);
+                this.DragSelectedPath = "";
+            })
+            .then(() => {
+                this.props.closeAllModals();
+            });
+    };
+
+    dragMove = (source, target) => {
+        if (this.props.selected.length === 0) {
+            this.props.selected[0] = source;
+        }
+        let doMove = true;
+
+        // eslint-disable-next-line
+        this.props.selected.map((value) => {
+            // 根据ID过滤
+            if (value.id === target.id && value.type === target.type) {
+                doMove = false;
+                // eslint-disable-next-line
+                return;
+            }
+            // 根据路径过滤
+            if (
+                value.path ===
+                target.path + (target.path === "/" ? "" : "/") + target.name
+            ) {
+                doMove = false;
+                // eslint-disable-next-line
+                return;
+            }
+        });
+        if (doMove) {
+            this.DragSelectedPath =
+                target.path === "/"
+                    ? target.path + target.name
+                    : target.path + "/" + target.name;
+            this.props.openLoadingDialog(this.props.t("modals.processing"));
+            this.submitMove();
+        }
+    };
+
+    submitRename = (e) => {
+        e.preventDefault();
+        this.props.setModalsLoading(true);
+        const newName = this.state.newName;
+
+        const src = {
+            dirs: [],
+            items: [],
+        };
+
+        if (this.props.selected[0].type === "dir") {
+            src.dirs[0] = this.props.selected[0].id;
+        } else {
+            src.items[0] = this.props.selected[0].id;
+        }
+
+        // 检查重名
+        if (
+            this.props.dirList.findIndex((value) => {
+                return value.name === newName;
+            }) !== -1 ||
+            this.props.fileList.findIndex((value) => {
+                return value.name === newName;
+            }) !== -1
+        ) {
+            this.props.toggleSnackbar(
+                "top",
+                "right",
+                this.props.t("modals.duplicatedObjectName"),
+                "warning"
+            );
+            this.props.setModalsLoading(false);
+        } else {
+            API.post("/object/rename", {
+                action: "rename",
+                src: src,
+                new_name: newName,
+            })
+                .then(() => {
+                    this.onClose();
+                    this.props.refreshFileList();
+                    this.props.setModalsLoading(false);
+                })
+                .catch((error) => {
+                    this.props.toggleSnackbar(
+                        "top",
+                        "right",
+                        error.message,
+                        "error"
+                    );
+                    this.props.setModalsLoading(false);
+                });
+        }
+    };
+
+    submitCreateNewFolder = (e) => {
+        e.preventDefault();
+        this.props.setModalsLoading(true);
+        if (
+            this.props.dirList.findIndex((value) => {
+                return value.name === this.state.newFolderName;
+            }) !== -1
+        ) {
+            this.props.toggleSnackbar(
+                "top",
+                "right",
+                this.props.t("modals.duplicatedFolderName"),
+                "warning"
+            );
+            this.props.setModalsLoading(false);
+        } else {
+            API.put("/directory", {
+                path:
+                    (this.props.path === "/" ? "" : this.props.path) +
+                    "/" +
+                    this.state.newFolderName,
+            })
+                .then(() => {
+                    this.onClose();
+                    this.props.refreshFileList();
+                    this.props.setModalsLoading(false);
+                })
+                .catch((error) => {
+                    this.props.setModalsLoading(false);
+
+                    this.props.toggleSnackbar(
+                        "top",
+                        "right",
+                        error.message,
+                        "error"
+                    );
+                });
+        }
+        //this.props.toggleSnackbar();
+    };
+
+    submitCreateNewFile = (e) => {
+        e.preventDefault();
+        this.props.setModalsLoading(true);
+        if (
+            this.props.dirList.findIndex((value) => {
+                return value.name === this.state.newFileName;
+            }) !== -1
+        ) {
+            this.props.toggleSnackbar(
+                "top",
+                "right",
+                this.props.t("modals.duplicatedFolderName"),
+                "warning"
+            );
+            this.props.setModalsLoading(false);
+        } else {
+            API.post("/file/create", {
+                path:
+                    (this.props.path === "/" ? "" : this.props.path) +
+                    "/" +
+                    this.state.newFileName,
+            })
+                .then(() => {
+                    this.onClose();
+                    this.props.refreshFileList();
+                    this.props.setModalsLoading(false);
+                })
+                .catch((error) => {
+                    this.props.setModalsLoading(false);
+
+                    this.props.toggleSnackbar(
+                        "top",
+                        "right",
+                        error.message,
+                        "error"
+                    );
+                });
+        }
+        //this.props.toggleSnackbar();
+    };
+
+    setMoveTarget = (folder) => {
+        const path =
+            folder.path === "/"
+                ? folder.path + folder.name
+                : folder.path + "/" + folder.name;
+        this.setState({
+            selectedPath: path,
+            selectedPathName: folder.name,
+        });
+    };
+
+    onClose = () => {
+        this.setState({
+            newFolderName: "",
+            newFileName: "",
+            newName: "",
+            selectedPath: "",
+            selectedPathName: "",
+            secretShare: false,
+            sharePwd: "",
+            shareUrl: "",
+        });
+        this.newNameSuffix = "";
+        this.props.closeAllModals();
+    };
+
+    handleChange = (name) => (event) => {
+        this.setState({ [name]: event.target.checked });
+    };
+
+    copySource = () => {
+        if (navigator.clipboard) {
+            navigator.clipboard.writeText(this.props.modalsStatus.getSource);
+            this.props.toggleSnackbar(
+                "top",
+                "right",
+                this.props.t("modals.linkCopied"),
+                "info"
+            );
+        }
+    };
+
+    render() {
+        const { classes, t } = this.props;
+
+        return (
+            <div>
+                <Loading />
+                <OptionSelector />
+                <PurchaseShareDialog />
+                <Dialog
+                    open={this.props.modalsStatus.getSource}
+                    onClose={this.onClose}
+                    aria-labelledby="form-dialog-title"
+                    fullWidth
+                >
+                    <DialogTitle id="form-dialog-title">
+                        {t("modals.getSourceLinkTitle")}
+                    </DialogTitle>
+
+                    <DialogContent>
+                        <TextField
+                            autoFocus
+                            inputProps={{ readonly: true }}
+                            label={t("modals.sourceLink")}
+                            multiline
+                            value={this.props.modalsStatus.getSource}
+                            variant="outlined"
+                            fullWidth
+                        />
+                    </DialogContent>
+                    <DialogActions>
+                        <Button onClick={this.copySource} color="secondary">
+                            {t("copyToClipboard", { ns: "common" })}
+                        </Button>
+                        <Button onClick={this.onClose}>
+                            {t("close", { ns: "common" })}
+                        </Button>
+                    </DialogActions>
+                </Dialog>
+                <Dialog
+                    open={this.props.modalsStatus.createNewFolder}
+                    onClose={this.onClose}
+                    aria-labelledby="form-dialog-title"
+                >
+                    <DialogTitle id="form-dialog-title">
+                        {t("fileManager.newFolder")}
+                    </DialogTitle>
+
+                    <DialogContent>
+                        <form onSubmit={this.submitCreateNewFolder}>
+                            <TextField
+                                autoFocus
+                                margin="dense"
+                                id="newFolderName"
+                                label={t("modals.folderName")}
+                                type="text"
+                                value={this.state.newFolderName}
+                                onChange={(e) => this.handleInputChange(e)}
+                                fullWidth
+                            />
+                        </form>
+                    </DialogContent>
+                    <DialogActions>
+                        <Button onClick={this.onClose}>
+                            {t("cancel", { ns: "common" })}
+                        </Button>
+                        <div className={classes.wrapper}>
+                            <Button
+                                onClick={this.submitCreateNewFolder}
+                                color="primary"
+                                disabled={
+                                    this.state.newFolderName === "" ||
+                                    this.props.modalsLoading
+                                }
+                            >
+                                {t("modals.create")}
+                                {this.props.modalsLoading && (
+                                    <CircularProgress
+                                        size={24}
+                                        className={classes.buttonProgress}
+                                    />
+                                )}
+                            </Button>
+                        </div>
+                    </DialogActions>
+                </Dialog>
+
+                <Dialog
+                    open={this.props.modalsStatus.createNewFile}
+                    onClose={this.onClose}
+                    aria-labelledby="form-dialog-title"
+                >
+                    <DialogTitle id="form-dialog-title">
+                        {t("fileManager.newFile")}
+                    </DialogTitle>
+
+                    <DialogContent>
+                        <form onSubmit={this.submitCreateNewFile}>
+                            <TextField
+                                autoFocus
+                                margin="dense"
+                                id="newFileName"
+                                label={t("modals.fileName")}
+                                type="text"
+                                value={this.state.newFileName}
+                                onChange={(e) => this.handleInputChange(e)}
+                                fullWidth
+                            />
+                        </form>
+                    </DialogContent>
+                    <DialogActions>
+                        <Button onClick={this.onClose}>
+                            {t("cancel", { ns: "common" })}
+                        </Button>
+                        <div className={classes.wrapper}>
+                            <Button
+                                onClick={this.submitCreateNewFile}
+                                color="primary"
+                                disabled={
+                                    this.state.newFileName === "" ||
+                                    this.props.modalsLoading
+                                }
+                            >
+                                {t("modals.create")}
+                                {this.props.modalsLoading && (
+                                    <CircularProgress
+                                        size={24}
+                                        className={classes.buttonProgress}
+                                    />
+                                )}
+                            </Button>
+                        </div>
+                    </DialogActions>
+                </Dialog>
+
+                <Dialog
+                    open={this.props.modalsStatus.rename}
+                    onClose={this.onClose}
+                    aria-labelledby="form-dialog-title"
+                    maxWidth="sm"
+                    fullWidth={true}
+                >
+                    <DialogTitle id="form-dialog-title">
+                        {t("fileManager.rename")}
+                    </DialogTitle>
+                    <DialogContent>
+                        <DialogContentText>
+                            <Trans
+                                i18nKey="modals.renameDescription"
+                                values={{
+                                    name:
+                                        this.props.selected.length === 1
+                                            ? this.props.selected[0].name
+                                            : "",
+                                }}
+                                components={[<strong key={0} />]}
+                            />
+                        </DialogContentText>
+                        <form onSubmit={this.submitRename}>
+                            <TextField
+                                autoFocus
+                                margin="dense"
+                                id="newName"
+                                label={t("modals.newName")}
+                                type="text"
+                                value={this.state.newName}
+                                onChange={(e) => this.handleInputChange(e)}
+                                fullWidth
+                            />
+                        </form>
+                    </DialogContent>
+                    <DialogActions>
+                        <Button onClick={this.onClose}>
+                            {t("cancel", { ns: "common" })}
+                        </Button>
+                        <div className={classes.wrapper}>
+                            <Button
+                                onClick={this.submitRename}
+                                color="primary"
+                                disabled={
+                                    this.state.newName === "" ||
+                                    this.props.modalsLoading
+                                }
+                            >
+                                {t("ok", { ns: "common" })}
+                                {this.props.modalsLoading && (
+                                    <CircularProgress
+                                        size={24}
+                                        className={classes.buttonProgress}
+                                    />
+                                )}
+                            </Button>
+                        </div>
+                    </DialogActions>
+                </Dialog>
+                <CopyDialog
+                    open={this.props.modalsStatus.copy}
+                    onClose={this.onClose}
+                    presentPath={this.props.path}
+                    selected={this.props.selected}
+                    modalsLoading={this.props.modalsLoading}
+                />
+
+                <Dialog
+                    open={this.props.modalsStatus.move}
+                    onClose={this.onClose}
+                    aria-labelledby="form-dialog-title"
+                >
+                    <DialogTitle id="form-dialog-title">
+                        {t("modals.moveToTitle")}
+                    </DialogTitle>
+                    <PathSelector
+                        presentPath={this.props.path}
+                        selected={this.props.selected}
+                        onSelect={this.setMoveTarget}
+                    />
+
+                    {this.state.selectedPath !== "" && (
+                        <DialogContent className={classes.contentFix}>
+                            <DialogContentText>
+                                <Trans
+                                    i18nKey="modals.moveToDescription"
+                                    values={{
+                                        name: this.state.selectedPathName,
+                                    }}
+                                    components={[<strong key={0} />]}
+                                />
+                            </DialogContentText>
+                        </DialogContent>
+                    )}
+                    <DialogActions>
+                        <Button onClick={this.onClose}>
+                            {t("cancel", { ns: "common" })}
+                        </Button>
+                        <div className={classes.wrapper}>
+                            <Button
+                                onClick={this.submitMove}
+                                color="primary"
+                                disabled={
+                                    this.state.selectedPath === "" ||
+                                    this.props.modalsLoading
+                                }
+                            >
+                                {t("ok", { ns: "common" })}
+                                {this.props.modalsLoading && (
+                                    <CircularProgress
+                                        size={24}
+                                        className={classes.buttonProgress}
+                                    />
+                                )}
+                            </Button>
+                        </div>
+                    </DialogActions>
+                </Dialog>
+                <Dialog
+                    open={this.props.modalsStatus.resave}
+                    onClose={this.onClose}
+                    aria-labelledby="form-dialog-title"
+                >
+                    <DialogTitle id="form-dialog-title">
+                        {t("modals.saveToTitle")}
+                    </DialogTitle>
+                    <PathSelector
+                        presentPath={this.props.path}
+                        selected={this.props.selected}
+                        onSelect={this.setMoveTarget}
+                    />
+
+                    {this.state.selectedPath !== "" && (
+                        <DialogContent className={classes.contentFix}>
+                            <DialogContentText>
+                                <Trans
+                                    i18nKey="modals.saveToTitleDescription"
+                                    values={{
+                                        name: this.state.selectedPathName,
+                                    }}
+                                    components={[<strong key={0} />]}
+                                />
+                            </DialogContentText>
+                        </DialogContent>
+                    )}
+                    <DialogActions>
+                        <Button onClick={this.onClose}>
+                            {t("cancel", { ns: "common" })}
+                        </Button>
+                        <div className={classes.wrapper}>
+                            <Button
+                                onClick={this.submitResave}
+                                color="primary"
+                                disabled={
+                                    this.state.selectedPath === "" ||
+                                    this.props.modalsLoading
+                                }
+                            >
+                                {t("ok", { ns: "common" })}
+                                {this.props.modalsLoading && (
+                                    <CircularProgress
+                                        size={24}
+                                        className={classes.buttonProgress}
+                                    />
+                                )}
+                            </Button>
+                        </div>
+                    </DialogActions>
+                </Dialog>
+                <Delete
+                    open={this.props.modalsStatus.remove}
+                    onClose={this.onClose}
+                    modalsLoading={this.props.modalsLoading}
+                    setModalsLoading={this.props.setModalsLoading}
+                    selected={this.props.selected}
+                    refreshFileList={this.props.refreshFileList}
+                    refreshStorage={this.props.refreshStorage}
+                />
+                <CreatShare
+                    open={this.props.modalsStatus.share}
+                    onClose={this.onClose}
+                    modalsLoading={this.props.modalsLoading}
+                    setModalsLoading={this.props.setModalsLoading}
+                    selected={this.props.selected}
+                />
+                <RemoteDownload
+                    open={this.props.modalsStatus.remoteDownload}
+                    onClose={this.onClose}
+                    modalsLoading={this.props.modalsLoading}
+                    setModalsLoading={this.props.setModalsLoading}
+                    presentPath={this.props.path}
+                    torrent={this.props.modalsStatus.remoteDownloadTorrent}
+                />
+                <DecompressDialog
+                    open={this.props.modalsStatus.decompress}
+                    onClose={this.onClose}
+                    presentPath={this.props.path}
+                    selected={this.props.selected}
+                    modalsLoading={this.props.modalsLoading}
+                />
+                <CompressDialog
+                    open={this.props.modalsStatus.compress}
+                    onClose={this.onClose}
+                    presentPath={this.props.path}
+                    selected={this.props.selected}
+                    modalsLoading={this.props.modalsLoading}
+                />
+                <RelocateDialog
+                    open={this.props.modalsStatus.relocate}
+                    onClose={this.onClose}
+                    selected={this.props.selected}
+                    modalsLoading={this.props.modalsLoading}
+                />
+                <DirectoryDownloadDialog
+                    open={this.props.modalsStatus.directoryDownloading}
+                    onClose={this.onClose}
+                    done={this.props.modalsStatus.directoryDownloadDone}
+                    log={this.props.modalsStatus.directoryDownloadLog}
+                />
+            </div>
+        );
+    }
+}
+
+ModalsCompoment.propTypes = {
+    classes: PropTypes.object.isRequired,
+};
+
+const Modals = connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(withStyles(styles)(withRouter(withTranslation()(ModalsCompoment))));
+
+export default Modals;
diff --git a/src/component/FileManager/MusicPlayer.js b/src/component/FileManager/MusicPlayer.js
new file mode 100644
index 0000000..fc7d638
--- /dev/null
+++ b/src/component/FileManager/MusicPlayer.js
@@ -0,0 +1,525 @@
+import {
+    Button,
+    Card,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogTitle,
+    Grid,
+    List,
+    Popover,
+    Slider,
+    withStyles,
+} from "@material-ui/core";
+import IconButton from "@material-ui/core/IconButton";
+import ListItem from "@material-ui/core/ListItem";
+import ListItemIcon from "@material-ui/core/ListItemIcon";
+import ListItemText from "@material-ui/core/ListItemText";
+import MusicNote from "@material-ui/icons/MusicNote";
+import PlayArrow from "@material-ui/icons/PlayArrow";
+import PlayNext from "@material-ui/icons/SkipNext";
+import PlayPrev from "@material-ui/icons/SkipPrevious";
+import Pause from "@material-ui/icons/Pause";
+import VolumeUp from '@material-ui/icons/VolumeUp';
+import VolumeDown from '@material-ui/icons/VolumeDown';
+import VolumeMute from '@material-ui/icons/VolumeMute';
+import VolumeOff from '@material-ui/icons/VolumeOff';
+import { Repeat, RepeatOne, Shuffle } from "@material-ui/icons";
+import PropTypes from "prop-types";
+import React, { Component } from "react";
+import { connect } from "react-redux";
+import { withRouter } from "react-router";
+import { audioPreviewSuffix } from "../../config";
+import { baseURL } from "../../middleware/Api";
+import * as explorer from "../../redux/explorer/reducer";
+import pathHelper from "../../utils/page";
+import {
+    audioPreviewSetIsOpen,
+    audioPreviewSetPlaying,
+    showAudioPreview,
+} from "../../redux/explorer";
+import { withTranslation } from "react-i18next";
+
+const styles = (theme) => ({
+    list: {
+        //maxWidth: 360,
+        backgroundColor: theme.palette.background.paper,
+        position: "relative",
+        overflow: "auto",
+        maxHeight: 300,
+    },
+    slider_root: {
+        "vertical-align": "middle",
+    },
+    setvol: {
+        width: 200,
+        height: 28,
+        "line-height": "42px",
+    },
+});
+
+const mapStateToProps = (state) => {
+    return {
+        first: state.explorer.audioPreview.first,
+        other: state.explorer.audioPreview.other,
+        isOpen: state.explorer.audioPreview.isOpen,
+        playingName: state.explorer.audioPreview.playingName,
+    };
+};
+
+const mapDispatchToProps = (dispatch) => {
+    return {
+        showAudioPreview: (first) => {
+            dispatch(showAudioPreview(first));
+        },
+        audioPreviewSetIsOpen: (first) => {
+            dispatch(audioPreviewSetIsOpen(first));
+        },
+        audioPreviewSetPlaying: (playingName, paused) => {
+            dispatch(audioPreviewSetPlaying(playingName, paused));
+        },
+    };
+};
+
+class MusicPlayerComponent extends Component {
+    state = {
+        items: [],
+        currentIndex: 0,
+        //isOpen: false,
+        isPlay: false,
+        currentTime: 0,
+        duration: 0,
+        progressText: "00:00/00:00",
+        looptype: 0,
+        volume: 0.8,
+        openPropEl: null,
+        mute: false,
+    };
+    myAudioRef = React.createRef();
+
+    UNSAFE_componentWillReceiveProps = (nextProps) => {
+        const items = [];
+        let firstOne = 0;
+        if (nextProps.first.id !== "") {
+            if (
+                pathHelper.isSharePage(this.props.location.pathname) &&
+                !nextProps.first.path
+            ) {
+                const newItem = {
+                    intro: nextProps.first.name,
+                    src: baseURL + "/share/preview/" + nextProps.first.key,
+                };
+                firstOne = 0;
+                items.push(newItem);
+                this.setState({
+                    currentIndex: firstOne,
+                    items: items,
+                    //isOpen: true,
+                });
+                this.props.audioPreviewSetIsOpen(true);
+                this.props.showAudioPreview(
+                    explorer.initState.audioPreview.first
+                );
+                return;
+            }
+            // eslint-disable-next-line
+            nextProps.other.map((value) => {
+                const fileType = value.name.split(".").pop().toLowerCase();
+                if (audioPreviewSuffix.indexOf(fileType) !== -1) {
+                    let src = "";
+                    if (pathHelper.isSharePage(this.props.location.pathname)) {
+                        src = baseURL + "/share/preview/" + value.key;
+                        src =
+                            src +
+                            "?path=" +
+                            encodeURIComponent(
+                                value.path === "/"
+                                    ? value.path + value.name
+                                    : value.path + "/" + value.name
+                            );
+                    } else {
+                        src = baseURL + "/file/preview/" + value.id;
+                    }
+                    const newItem = {
+                        intro: value.name,
+                        src: src,
+                    };
+                    if (
+                        value.path === nextProps.first.path &&
+                        value.name === nextProps.first.name
+                    ) {
+                        firstOne = items.length;
+                    }
+                    items.push(newItem);
+                }
+            });
+            this.setState({
+                currentIndex: firstOne,
+                items: items,
+                //isOpen: true,
+            });
+            this.props.audioPreviewSetIsOpen(true);
+            this.props.showAudioPreview(explorer.initState.audioPreview.first);
+        }
+    };
+
+    handleItemClick = (currentIndex) => () => {
+        this.setState({
+            currentIndex: currentIndex,
+        });
+    };
+
+    handleClose = () => {
+        /*this.setState({
+            isOpen: false,
+        });*/
+        this.setState({
+            currentIndex: -1,
+        });
+        this.pause();
+        this.props.audioPreviewSetPlaying(null, false);
+        this.props.audioPreviewSetIsOpen(false);
+    };
+    backgroundPlay = () => {
+        this.props.audioPreviewSetIsOpen(false);
+    };
+
+    componentDidMount() {
+        if (this.myAudioRef.current) {
+            this.bindEvents(this.myAudioRef.current);
+        }
+    }
+    componentDidUpdate() {
+        if (this.myAudioRef.current) {
+            this.bindEvents(this.myAudioRef.current);
+        }
+    }
+    componentWillUnmount() {
+        this.unbindEvents(this.myAudioRef.current);
+    }
+
+    bindEvents = (ele) => {
+        if (ele) {
+            ele.addEventListener("canplay", this.readyPlay);
+            ele.addEventListener("ended", this.loopnext);
+            ele.addEventListener("timeupdate", this.timeUpdate);
+        }
+    };
+
+    unbindEvents = (ele) => {
+        if (ele) {
+            ele.removeEventListener("canplay", this.readyPlay);
+            ele.removeEventListener("ended", this.loopnext);
+            ele.removeEventListener("timeupdate", this.timeUpdate);
+        }
+    };
+
+    readyPlay = () => {
+        this.myAudioRef.current.volume = this.state.volume;
+        this.play();
+    };
+
+    formatTime = (s) => {
+        if (isNaN(s)) return "00:00";
+        const minute = Math.floor(s / 60);
+        const second = Math.floor(s % 60);
+        return (
+            `${minute}`.padStart(2, "0") + ":" + `${second}`.padStart(2, "0")
+        );
+    };
+
+    timeUpdate = () => {
+        const currentTime = Math.floor(this.myAudioRef.current.currentTime); //this.myAudioRef.current.currentTime;//
+        this.setState({
+            currentTime: currentTime,
+            duration: this.myAudioRef.current.duration,
+            progressText:
+                this.formatTime(currentTime) +
+                "/" +
+                this.formatTime(this.myAudioRef.current.duration),
+        });
+    };
+
+    play = () => {
+        this.myAudioRef.current.play();
+        this.setState({
+            isPlay: true
+        });
+        this.props.audioPreviewSetPlaying(
+            this.state.items[this.state.currentIndex].intro,
+            false
+        );
+    };
+
+    pause = () => {
+        if (this.myAudioRef.current) {
+            this.myAudioRef.current.pause();
+        }
+        this.setState({
+            isPlay: false
+        })
+        this.props.audioPreviewSetPlaying(
+            this.state.items[this.state.currentIndex]?.intro,
+            true
+        );
+    };
+
+    playOrPaues = () => {
+        if (this.state.isPlay) {
+            this.pause();
+        } else {
+            this.play();
+        }
+    };
+    changeLoopType = () => {
+        let lt = this.state.looptype + 1;
+        if (lt >= 3) {
+            lt = 0;
+        }
+        this.setState({
+            looptype: lt,
+        });
+    };
+    loopnext = () => {
+        let index = this.state.currentIndex;
+        if (this.state.looptype == 0) {
+            //all
+            index = index + 1;
+            if (index >= this.state.items.length) {
+                index = 0;
+            }
+        } else if (this.state.looptype == 1) {
+            //single
+            //index=index;
+        } else if (this.state.looptype == 2) {
+            //random
+            if (this.state.items.length <= 2) {
+                index = index + 1;
+                if (index >= this.state.items.length) {
+                    index = 0;
+                }
+            } else {
+                while (index == this.state.currentIndex) {
+                    index = Math.floor(Math.random() * this.state.items.length);
+                }
+            }
+        }
+        if (this.state.currentIndex == index) {
+            this.myAudioRef.current.currentTime = 0;
+            this.play();
+        }
+        this.setState({
+            currentIndex: index,
+        });
+    };
+
+    prev = () => {
+        let index = this.state.currentIndex - 1;
+        if (index < 0) {
+            index = this.state.items.length - 1;
+        }
+        this.setState({
+            currentIndex: index,
+        });
+    };
+
+    next = () => {
+        let index = this.state.currentIndex + 1;
+        if (index >= this.state.items.length) {
+            index = 0;
+        }
+        this.setState({
+            currentIndex: index,
+        });
+    };
+
+    handleProgress = (e, newValue) => {
+        this.myAudioRef.current.currentTime = newValue;
+    };
+
+    render() {
+        const { currentIndex, items } = this.state;
+        const { isOpen, classes, t } = this.props;
+        return (
+            <Dialog
+                open={isOpen}
+                onClose={this.backgroundPlay}
+                aria-labelledby="form-dialog-title"
+                maxWidth="xs"
+                fullWidth
+                keepMounted
+            >
+                <DialogTitle id="form-dialog-title">
+                    {t("fileManager.musicPlayer")}
+                </DialogTitle>
+                <DialogContent>
+                    <List className={classes.list} dense>
+                        {items.map((value, idx) => {
+                            const labelId = `label-${value.intro}`;
+                            return (
+                                <ListItem
+                                    key={value.src}
+                                    dense
+                                    button
+                                    onClick={this.handleItemClick(idx)}
+                                    selected={idx === currentIndex}
+                                >
+                                    <ListItemIcon>
+                                        {idx === currentIndex ? (
+                                            <PlayArrow />
+                                        ) : (
+                                            <MusicNote />
+                                        )}
+                                    </ListItemIcon>
+                                    <ListItemText
+                                        id={labelId}
+                                        primary={`${value.intro}`}
+                                    />
+                                </ListItem>
+                            );
+                        })}
+                    </List>
+                    <audio
+                        ref={this.myAudioRef}
+                        src={items[currentIndex]?.src}
+                    />
+                    <div style={{ "padding-top": 8 }} />
+                    <Grid container spacing={2} alignItems="center">
+                        <Grid item xs>
+                            <Slider
+                                classes={{ root: classes.slider_root }}
+                                value={this.state.currentTime}
+                                onChange={this.handleProgress}
+                                step={1}
+                                min={0}
+                                max={this.state.duration}
+                                aria-labelledby="continuous-slider"
+                            />
+                        </Grid>
+                        <Grid item>{this.state.progressText}</Grid>
+                    </Grid>
+                    <Grid
+                        container
+                        spacing={2}
+                        justifyContent="center"
+                        justify="center"
+                    >
+                        <Grid item>
+                            <IconButton
+                                edge="end"
+                                aria-label=""
+                                onClick={this.changeLoopType}
+                            >
+                                {this.state.looptype === 0 ? (
+                                    <Repeat />
+                                ) : this.state.looptype === 1 ? (
+                                    <RepeatOne />
+                                ) : (
+                                    <Shuffle />
+                                )}
+                            </IconButton>
+                        </Grid>
+                        <Grid item>
+                            <IconButton
+                                edge="end"
+                                aria-label=""
+                                onClick={this.prev}
+                            >
+                                <PlayPrev />
+                            </IconButton>
+                        </Grid>
+                        <Grid item>
+                            <IconButton
+                                edge="end"
+                                aria-label=""
+                                onClick={this.playOrPaues}
+                            >
+                                {this.state.isPlay ? (<Pause />) : (<PlayArrow />)}
+                            </IconButton>
+                        </Grid>
+                        <Grid item>
+                            <IconButton
+                                edge="end"
+                                aria-label=""
+                                onClick={this.next}
+                            >
+                                <PlayNext />
+                            </IconButton>
+                        </Grid>
+                        <Grid item>
+                            <IconButton
+                                edge="end"
+                                aria-label=""
+                                onClick={(e) => { this.setState({ openPropEl: e.currentTarget }) }}
+                                onContextMenu={(e) => {
+                                    e.preventDefault();
+                                    if (this.state.mute) {
+                                        this.setState({ mute: false });
+                                        this.myAudioRef.current.muted = false;
+                                    } else {
+                                        this.setState({ mute: true });
+                                        this.myAudioRef.current.muted = true;
+                                    }
+                                }}
+                            >
+                                {this.state.mute ? (
+                                    <VolumeOff />
+                                ) : this.state.volume >= 0.7 ? (
+                                    <VolumeUp />
+                                ) : this.state.volume <= 0.3 ? (
+                                    <VolumeMute />
+                                ) : (
+                                    <VolumeDown />
+                                )}
+                            </IconButton>
+                            <Popover
+                                id="volume-controller"
+                                open={Boolean(this.state.openPropEl)}
+                                anchorEl={this.state.openPropEl}
+                                onClose={() => { this.setState({ openPropEl: null }) }}
+                                anchorOrigin={{ vertical: "top", horizontal: "center" }}
+                                transformOrigin={{ vertical: "bottom", horizontal: "center" }}
+                            >
+                                <Card className={classes.setvol}>
+                                    <Grid container spacing={2}>
+                                        <Grid item><VolumeDown /></Grid>
+                                        <Grid item xs><Slider
+                                            aria-labelledby="continuous-slider"
+                                            value={this.state.volume}
+                                            min={0} max={1} step={0.01} defaultValue={this.state.volume}
+                                            onChange={(e, vol) => {
+                                                this.setState({ volume: vol });
+                                                this.myAudioRef.current.volume = vol;
+                                            }}
+                                            style={{ padding: "13px 0" }}
+                                        /></Grid>
+                                        <Grid item><VolumeUp /></Grid>
+                                    </Grid>
+                                </Card>
+                            </Popover>
+                        </Grid>
+                    </Grid>
+                </DialogContent>
+                <DialogActions>
+                    <Button onClick={this.handleClose}>
+                        {t("fileManager.closeAndStop")}
+                    </Button>
+                    <Button onClick={this.backgroundPlay}>
+                        {t("fileManager.playInBackground")}
+                    </Button>
+                </DialogActions>
+            </Dialog>
+        );
+    }
+}
+
+MusicPlayerComponent.propTypes = {
+    classes: PropTypes.object.isRequired,
+};
+
+const MusicPlayer = connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(withStyles(styles)(withRouter(withTranslation()(MusicPlayerComponent))));
+
+export default MusicPlayer;
diff --git a/src/component/FileManager/Navigator/DropDown.js b/src/component/FileManager/Navigator/DropDown.js
new file mode 100644
index 0000000..288e050
--- /dev/null
+++ b/src/component/FileManager/Navigator/DropDown.js
@@ -0,0 +1,51 @@
+import React from "react";
+import DropDownItem from "./DropDownItem";
+
+export default function DropDown(props) {
+    let timer;
+    let first = props.folders.length;
+    const status = [];
+    for (let index = 0; index < props.folders.length; index++) {
+        status[index] = false;
+    }
+
+    const setActiveStatus = (id, value) => {
+        status[id] = value;
+        if (value) {
+            clearTimeout(timer);
+        } else {
+            let shouldClose = true;
+            status.forEach((element) => {
+                if (element) {
+                    shouldClose = false;
+                }
+            });
+            if (shouldClose) {
+                if (first <= 0) {
+                    timer = setTimeout(() => {
+                        props.onClose();
+                    }, 100);
+                } else {
+                    first--;
+                }
+            }
+        }
+        console.log(status);
+    };
+
+    return (
+        <>
+            {props.folders.map((folder, id) => (
+                // eslint-disable-next-line react/jsx-key
+                <DropDownItem
+                    key={id}
+                    path={"/" + props.folders.slice(0, id).join("/")}
+                    navigateTo={props.navigateTo}
+                    id={id}
+                    setActiveStatus={setActiveStatus}
+                    folder={folder}
+                />
+            ))}
+        </>
+    );
+}
diff --git a/src/component/FileManager/Navigator/DropDownItem.js b/src/component/FileManager/Navigator/DropDownItem.js
new file mode 100644
index 0000000..6df0a10
--- /dev/null
+++ b/src/component/FileManager/Navigator/DropDownItem.js
@@ -0,0 +1,54 @@
+import React, { useEffect } from "react";
+import { makeStyles } from "@material-ui/core";
+import FolderIcon from "@material-ui/icons/Folder";
+import { MenuItem, ListItemIcon, ListItemText } from "@material-ui/core";
+import { useDrop } from "react-dnd";
+import classNames from "classnames";
+
+const useStyles = makeStyles((theme) => ({
+    active: {
+        border: "2px solid " + theme.palette.primary.light,
+    },
+}));
+
+export default function DropDownItem(props) {
+    const [{ canDrop, isOver }, drop] = useDrop({
+        accept: "object",
+        drop: () => {
+            console.log({
+                folder: {
+                    id: -1,
+                    path: props.path,
+                    name: props.folder === "/" ? "" : props.folder,
+                },
+            });
+        },
+        collect: (monitor) => ({
+            isOver: monitor.isOver(),
+            canDrop: monitor.canDrop(),
+        }),
+    });
+
+    const isActive = canDrop && isOver;
+
+    useEffect(() => {
+        props.setActiveStatus(props.id, isActive);
+        // eslint-disable-next-line
+    }, [isActive]);
+
+    const classes = useStyles();
+    return (
+        <MenuItem
+            ref={drop}
+            className={classNames({
+                [classes.active]: isActive,
+            })}
+            onClick={(e) => props.navigateTo(e, props.id)}
+        >
+            <ListItemIcon>
+                <FolderIcon />
+            </ListItemIcon>
+            <ListItemText primary={props.folder} />
+        </MenuItem>
+    );
+}
diff --git a/src/component/FileManager/Navigator/Navigator.js b/src/component/FileManager/Navigator/Navigator.js
new file mode 100644
index 0000000..80f6aa7
--- /dev/null
+++ b/src/component/FileManager/Navigator/Navigator.js
@@ -0,0 +1,500 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import { withRouter } from "react-router-dom";
+import RightIcon from "@material-ui/icons/KeyboardArrowRight";
+import ShareIcon from "@material-ui/icons/Share";
+import NewFolderIcon from "@material-ui/icons/CreateNewFolder";
+import RefreshIcon from "@material-ui/icons/Refresh";
+import explorer, {
+    drawerToggleAction,
+    navigateTo,
+    navigateUp,
+    openCompressDialog,
+    openCreateFileDialog,
+    openCreateFolderDialog,
+    openShareDialog,
+    refreshFileList,
+    setNavigatorError,
+    setNavigatorLoadingStatus,
+    setSelectedTarget,
+} from "../../../redux/explorer";
+import { fixUrlHash, setGetParameter } from "../../../utils/index";
+import {
+    Divider,
+    ListItemIcon,
+    Menu,
+    MenuItem,
+    withStyles,
+} from "@material-ui/core";
+import PathButton from "./PathButton";
+import DropDown from "./DropDown";
+import pathHelper from "../../../utils/page";
+import classNames from "classnames";
+import Auth from "../../../middleware/Auth";
+import { Archive } from "@material-ui/icons";
+import { FilePlus } from "mdi-material-ui";
+import SubActions from "./SubActions";
+import { setCurrentPolicy } from "../../../redux/explorer/action";
+import { list } from "../../../services/navigate";
+import { withTranslation } from "react-i18next";
+
+const mapStateToProps = (state) => {
+    return {
+        path: state.navigator.path,
+        refresh: state.navigator.refresh,
+        drawerDesktopOpen: state.viewUpdate.open,
+        viewMethod: state.viewUpdate.explorerViewMethod,
+        search: state.explorer.search,
+        sortMethod: state.viewUpdate.sortMethod,
+    };
+};
+
+const mapDispatchToProps = (dispatch) => {
+    return {
+        navigateToPath: (path) => {
+            dispatch(navigateTo(path));
+        },
+        navigateUp: () => {
+            dispatch(navigateUp());
+        },
+        setNavigatorError: (status, msg) => {
+            dispatch(setNavigatorError(status, msg));
+        },
+        updateFileList: (list) => {
+            dispatch(explorer.actions.updateFileList(list));
+        },
+        setNavigatorLoadingStatus: (status) => {
+            dispatch(setNavigatorLoadingStatus(status));
+        },
+        refreshFileList: () => {
+            dispatch(refreshFileList());
+        },
+        setSelectedTarget: (target) => {
+            dispatch(setSelectedTarget(target));
+        },
+        openCreateFolderDialog: () => {
+            dispatch(openCreateFolderDialog());
+        },
+        openCreateFileDialog: () => {
+            dispatch(openCreateFileDialog());
+        },
+        openShareDialog: () => {
+            dispatch(openShareDialog());
+        },
+        handleDesktopToggle: (open) => {
+            dispatch(drawerToggleAction(open));
+        },
+        openCompressDialog: () => {
+            dispatch(openCompressDialog());
+        },
+        setCurrentPolicy: (policy) => {
+            dispatch(setCurrentPolicy(policy));
+        },
+    };
+};
+
+const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+
+const styles = (theme) => ({
+    container: {
+        [theme.breakpoints.down("xs")]: {
+            display: "none",
+        },
+        backgroundColor: theme.palette.background.paper,
+    },
+    navigatorContainer: {
+        display: "flex",
+        justifyContent: "space-between",
+    },
+    nav: {
+        height: "48px",
+        padding: "5px 15px",
+        display: "flex",
+    },
+    optionContainer: {
+        paddingTop: "6px",
+        marginRight: "10px",
+    },
+    rightIcon: {
+        marginTop: "6px",
+        verticalAlign: "top",
+        color: "#868686",
+    },
+    expandMore: {
+        color: "#8d8d8d",
+    },
+    roundBorder: {
+        borderRadius: "4px 4px 0 0",
+    },
+});
+
+class NavigatorComponent extends Component {
+    search = undefined;
+    currentID = 0;
+
+    state = {
+        hidden: false,
+        hiddenFolders: [],
+        folders: [],
+        anchorEl: null,
+        hiddenMode: false,
+        anchorHidden: null,
+    };
+
+    constructor(props) {
+        super(props);
+        this.element = React.createRef();
+    }
+
+    componentDidMount = () => {
+        const url = new URL(fixUrlHash(window.location.href));
+        const c = url.searchParams.get("path");
+        this.renderPath(c === null ? "/" : c);
+
+        if (!this.props.isShare) {
+            // 如果是在个人文件管理页，首次加载时打开侧边栏
+            this.props.handleDesktopToggle(true);
+        }
+
+        // 后退操作时重新导航
+        window.onpopstate = () => {
+            const url = new URL(fixUrlHash(window.location.href));
+            const c = url.searchParams.get("path");
+            if (c !== null) {
+                this.props.navigateToPath(c);
+            }
+        };
+    };
+
+    renderPath = (path = null) => {
+        this.props.setNavigatorError(false, null);
+        this.setState({
+            folders:
+                path !== null
+                    ? path.substr(1).split("/")
+                    : this.props.path.substr(1).split("/"),
+        });
+        const newPath = path !== null ? path : this.props.path;
+        list(
+            newPath,
+            this.props.share,
+            this.search ? this.search.keywords : "",
+            this.search ? this.search.searchPath : ""
+        )
+            .then((response) => {
+                this.currentID = response.data.parent;
+                this.props.updateFileList(response.data.objects);
+                this.props.setNavigatorLoadingStatus(false);
+                if (!this.search) {
+                    setGetParameter("path", encodeURIComponent(newPath));
+                }
+                if (response.data.policy) {
+                    this.props.setCurrentPolicy({
+                        id: response.data.policy.id,
+                        name: response.data.policy.name,
+                        type: response.data.policy.type,
+                        maxSize: response.data.policy.max_size,
+                        allowedSuffix: response.data.policy.file_type,
+                    });
+                }
+            })
+            .catch((error) => {
+                this.props.setNavigatorError(true, error);
+            });
+
+        this.checkOverFlow(true);
+    };
+
+    redresh = (path) => {
+        this.props.setNavigatorLoadingStatus(true);
+        this.props.setNavigatorError(false, "error");
+        this.renderPath(path);
+    };
+
+    UNSAFE_componentWillReceiveProps = (nextProps) => {
+        if (this.props.search !== nextProps.search) {
+            this.search = nextProps.search;
+        }
+        if (this.props.path !== nextProps.path) {
+            this.renderPath(nextProps.path);
+        }
+        if (this.props.refresh !== nextProps.refresh) {
+            this.redresh(nextProps.path);
+        }
+    };
+
+    componentWillUnmount() {
+        this.props.updateFileList([]);
+    }
+
+    componentDidUpdate = (prevProps, prevStates) => {
+        if (this.state.folders !== prevStates.folders) {
+            this.checkOverFlow(true);
+        }
+        if (this.props.drawerDesktopOpen !== prevProps.drawerDesktopOpen) {
+            delay(500).then(() => this.checkOverFlow());
+        }
+    };
+
+    checkOverFlow = (force) => {
+        if (this.overflowInitLock && !force) {
+            return;
+        }
+        if (this.element.current !== null) {
+            const hasOverflowingChildren =
+                this.element.current.offsetHeight <
+                    this.element.current.scrollHeight ||
+                this.element.current.offsetWidth <
+                    this.element.current.scrollWidth;
+            if (hasOverflowingChildren) {
+                this.overflowInitLock = true;
+                this.setState({ hiddenMode: true });
+            }
+            if (!hasOverflowingChildren && this.state.hiddenMode) {
+                this.setState({ hiddenMode: false });
+            }
+        }
+    };
+
+    navigateTo = (event, id) => {
+        if (id === this.state.folders.length - 1) {
+            //最后一个路径
+            this.setState({ anchorEl: event.currentTarget });
+        } else if (
+            id === -1 &&
+            this.state.folders.length === 1 &&
+            this.state.folders[0] === ""
+        ) {
+            this.props.refreshFileList();
+            this.handleClose();
+        } else if (id === -1) {
+            this.props.navigateToPath("/");
+            this.handleClose();
+        } else {
+            this.props.navigateToPath(
+                "/" + this.state.folders.slice(0, id + 1).join("/")
+            );
+            this.handleClose();
+        }
+    };
+
+    handleClose = () => {
+        this.setState({ anchorEl: null, anchorHidden: null, anchorSort: null });
+    };
+
+    showHiddenPath = (e) => {
+        this.setState({ anchorHidden: e.currentTarget });
+    };
+
+    performAction = (e) => {
+        this.handleClose();
+        if (e === "refresh") {
+            this.redresh();
+            return;
+        }
+        const presentPath = this.props.path.split("/");
+        const newTarget = [
+            {
+                id: this.currentID,
+                type: "dir",
+                name: presentPath.pop(),
+                path: presentPath.length === 1 ? "/" : presentPath.join("/"),
+            },
+        ];
+        //this.props.navitateUp();
+        switch (e) {
+            case "share":
+                this.props.setSelectedTarget(newTarget);
+                this.props.openShareDialog();
+                break;
+            case "newfolder":
+                this.props.openCreateFolderDialog();
+                break;
+            case "compress":
+                this.props.setSelectedTarget(newTarget);
+                this.props.openCompressDialog();
+                break;
+            case "newFile":
+                this.props.openCreateFileDialog();
+                break;
+            default:
+                break;
+        }
+    };
+
+    render() {
+        const { classes, t } = this.props;
+        const isHomePage = pathHelper.isHomePage(this.props.location.pathname);
+        const user = Auth.GetUser();
+
+        const presentFolderMenu = (
+            <Menu
+                id="presentFolderMenu"
+                anchorEl={this.state.anchorEl}
+                open={Boolean(this.state.anchorEl)}
+                onClose={this.handleClose}
+                disableAutoFocusItem={true}
+            >
+                <MenuItem onClick={() => this.performAction("refresh")}>
+                    <ListItemIcon>
+                        <RefreshIcon />
+                    </ListItemIcon>
+                    {t("fileManager.refresh")}
+                </MenuItem>
+                {!this.props.search && isHomePage && (
+                    <div>
+                        <Divider />
+                        <MenuItem onClick={() => this.performAction("share")}>
+                            <ListItemIcon>
+                                <ShareIcon />
+                            </ListItemIcon>
+                            {t("fileManager.share")}
+                        </MenuItem>
+                        {user.group.compress && (
+                            <MenuItem
+                                onClick={() => this.performAction("compress")}
+                            >
+                                <ListItemIcon>
+                                    <Archive />
+                                </ListItemIcon>
+                                {t("fileManager.compress")}
+                            </MenuItem>
+                        )}
+                        <Divider />
+                        <MenuItem
+                            onClick={() => this.performAction("newfolder")}
+                        >
+                            <ListItemIcon>
+                                <NewFolderIcon />
+                            </ListItemIcon>
+                            {t("fileManager.newFolder")}
+                        </MenuItem>
+
+                        <MenuItem onClick={() => this.performAction("newFile")}>
+                            <ListItemIcon>
+                                <FilePlus />
+                            </ListItemIcon>
+                            {t("fileManager.newFile")}
+                        </MenuItem>
+                    </div>
+                )}
+            </Menu>
+        );
+
+        return (
+            <div
+                className={classNames(
+                    {
+                        [classes.roundBorder]: this.props.isShare,
+                    },
+                    classes.container
+                )}
+                id={"drag-layer-inherit"}
+            >
+                <div className={classes.navigatorContainer}>
+                    <div className={classes.nav} ref={this.element}>
+                        <span>
+                            <PathButton
+                                folder="/"
+                                path="/"
+                                onClick={(e) => this.navigateTo(e, -1)}
+                            />
+                            <RightIcon className={classes.rightIcon} />
+                        </span>
+                        {this.state.hiddenMode && (
+                            <span>
+                                <PathButton
+                                    more
+                                    title={t("fileManager.showFullPath")}
+                                    onClick={this.showHiddenPath}
+                                />
+                                <Menu
+                                    id="hiddenPathMenu"
+                                    anchorEl={this.state.anchorHidden}
+                                    open={Boolean(this.state.anchorHidden)}
+                                    onClose={this.handleClose}
+                                    disableAutoFocusItem={true}
+                                >
+                                    <DropDown
+                                        onClose={this.handleClose}
+                                        folders={this.state.folders.slice(
+                                            0,
+                                            -1
+                                        )}
+                                        navigateTo={this.navigateTo}
+                                    />
+                                </Menu>
+                                <RightIcon className={classes.rightIcon} />
+                                <PathButton
+                                    folder={this.state.folders.slice(-1)}
+                                    path={
+                                        "/" +
+                                        this.state.folders
+                                            .slice(0, -1)
+                                            .join("/")
+                                    }
+                                    last={true}
+                                    onClick={(e) =>
+                                        this.navigateTo(
+                                            e,
+                                            this.state.folders.length - 1
+                                        )
+                                    }
+                                />
+                                {presentFolderMenu}
+                            </span>
+                        )}
+                        {!this.state.hiddenMode &&
+                            this.state.folders.map((folder, id, folders) => (
+                                <span key={id}>
+                                    {folder !== "" && (
+                                        <span>
+                                            <PathButton
+                                                folder={folder}
+                                                path={
+                                                    "/" +
+                                                    folders
+                                                        .slice(0, id)
+                                                        .join("/")
+                                                }
+                                                last={id === folders.length - 1}
+                                                onClick={(e) =>
+                                                    this.navigateTo(e, id)
+                                                }
+                                            />
+                                            {id === folders.length - 1 &&
+                                                presentFolderMenu}
+                                            {id !== folders.length - 1 && (
+                                                <RightIcon
+                                                    className={
+                                                        classes.rightIcon
+                                                    }
+                                                />
+                                            )}
+                                        </span>
+                                    )}
+                                </span>
+                            ))}
+                    </div>
+                    <div className={classes.optionContainer}>
+                        <SubActions isSmall />
+                    </div>
+                </div>
+                <Divider />
+            </div>
+        );
+    }
+}
+
+NavigatorComponent.propTypes = {
+    classes: PropTypes.object.isRequired,
+    path: PropTypes.string.isRequired,
+};
+
+const Navigator = connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(withStyles(styles)(withRouter(withTranslation()(NavigatorComponent))));
+
+export default Navigator;
diff --git a/src/component/FileManager/Navigator/PathButton.js b/src/component/FileManager/Navigator/PathButton.js
new file mode 100644
index 0000000..9998b47
--- /dev/null
+++ b/src/component/FileManager/Navigator/PathButton.js
@@ -0,0 +1,80 @@
+import React, { useEffect } from "react";
+import ExpandMore from "@material-ui/icons/ExpandMore";
+import { Button } from "@material-ui/core";
+import { makeStyles } from "@material-ui/core";
+import { useDrop } from "react-dnd";
+import classNames from "classnames";
+import MoreIcon from "@material-ui/icons/MoreHoriz";
+
+const useStyles = makeStyles((theme) => ({
+    expandMore: {
+        color: "#8d8d8d",
+    },
+    active: {
+        boxShadow: "0 0 0 2px " + theme.palette.primary.light,
+    },
+    button: {
+        textTransform: "none",
+    },
+}));
+
+export default function PathButton(props) {
+    const inputRef = React.useRef(null);
+
+    const [{ canDrop, isOver }, drop] = useDrop({
+        accept: "object",
+        drop: () => {
+            if (props.more) {
+                inputRef.current.click();
+            } else {
+                return {
+                    folder: {
+                        id: -1,
+                        path: props.path,
+                        name: props.folder === "/" ? "" : props.folder,
+                    },
+                };
+            }
+        },
+        collect: (monitor) => ({
+            isOver: monitor.isOver(),
+            canDrop: monitor.canDrop(),
+        }),
+    });
+
+    const isActive = canDrop && isOver;
+
+    useEffect(() => {
+        if (props.more && isActive) {
+            inputRef.current.click();
+        }
+        // eslint-disable-next-line
+    }, [isActive]);
+
+    const classes = useStyles();
+    return (
+        <span onClick={props.onClick} ref={inputRef}>
+            <Button
+                ref={drop}
+                className={classNames(
+                    {
+                        [classes.active]: isActive,
+                    },
+                    classes.button
+                )}
+                component="span"
+                title={props.title}
+            >
+                {props.more && <MoreIcon />}
+                {!props.more && (
+                    <>
+                        {props.folder}
+                        {props.last && (
+                            <ExpandMore className={classes.expandMore} />
+                        )}
+                    </>
+                )}
+            </Button>
+        </span>
+    );
+}
diff --git a/src/component/FileManager/Navigator/SubActions.js b/src/component/FileManager/Navigator/SubActions.js
new file mode 100644
index 0000000..be5731e
--- /dev/null
+++ b/src/component/FileManager/Navigator/SubActions.js
@@ -0,0 +1,238 @@
+import React, { useCallback, useState } from "react";
+import { IconButton, makeStyles, Menu, MenuItem } from "@material-ui/core";
+import ViewListIcon from "@material-ui/icons/ViewList";
+import ViewSmallIcon from "@material-ui/icons/ViewComfy";
+import ViewModuleIcon from "@material-ui/icons/ViewModule";
+import DownloadIcon from "@material-ui/icons/CloudDownload";
+import SaveIcon from "@material-ui/icons/Save";
+import ReportIcon from "@material-ui/icons/Report";
+import Avatar from "@material-ui/core/Avatar";
+import { useDispatch, useSelector } from "react-redux";
+import Auth from "../../../middleware/Auth";
+import { changeSortMethod, startBatchDownload } from "../../../redux/explorer/action";
+import {
+    changeViewMethod,
+    openResaveDialog,
+    setShareUserPopover,
+} from "../../../redux/explorer";
+import { FormatPageBreak } from "mdi-material-ui";
+import pathHelper from "../../../utils/page";
+import { changePageSize } from "../../../redux/viewUpdate/action";
+import Report from "../../Modals/Report";
+import { useTranslation } from "react-i18next";
+import Sort from "../Sort";
+
+const useStyles = makeStyles((theme) => ({
+    sideButton: {
+        padding: "8px",
+        marginRight: "5px",
+    },
+}));
+
+// const sortOptions = [
+//     "A-Z",
+//     "Z-A",
+//     "oldestUploaded",
+//     "newestUploaded",
+//     "oldestModified",
+//     "newestModified",
+//     "smallest",
+//     "largest",
+// ];
+
+const paginationOption = ["50", "100", "200", "500", "1000"];
+
+export default function SubActions({ isSmall, inherit }) {
+    const { t } = useTranslation("application", { keyPrefix: "fileManager" });
+    const { t: vasT } = useTranslation("application", { keyPrefix: "vas" });
+    const dispatch = useDispatch();
+    const viewMethod = useSelector(
+        (state) => state.viewUpdate.explorerViewMethod
+    );
+    const share = useSelector((state) => state.viewUpdate.shareInfo);
+    const pageSize = useSelector((state) => state.viewUpdate.pagination.size);
+    const OpenLoadingDialog = useCallback(
+        (method) => dispatch(changeViewMethod(method)),
+        [dispatch]
+    );
+    const ChangeSortMethod = useCallback(
+        (method) => dispatch(changeSortMethod(method)),
+        [dispatch]
+    );
+    const OpenResaveDialog = useCallback(
+        (key) => dispatch(openResaveDialog(key)),
+        [dispatch]
+    );
+    const SetShareUserPopover = useCallback(
+        (e) => dispatch(setShareUserPopover(e)),
+        [dispatch]
+    );
+    const StartBatchDownloadAll = useCallback(
+        () => dispatch(startBatchDownload(share)),
+        [dispatch, share]
+    );
+    const ChangePageSize = useCallback((e) => dispatch(changePageSize(e)), [
+        dispatch,
+    ]);
+    // const [anchorSort, setAnchorSort] = useState(null);
+    const [anchorPagination, setAnchorPagination] = useState(null);
+    // const [selectedIndex, setSelectedIndex] = useState(0);
+    const [openReport, setOpenReport] = useState(false);
+    // const showSortOptions = (e) => {
+    //     setAnchorSort(e.currentTarget);
+    // };
+    const showPaginationOptions = (e) => {
+        setAnchorPagination(e.currentTarget);
+    };
+
+    /** change sort */
+    const onChangeSort = (value) => {
+        ChangeSortMethod(value);
+    };
+    const handlePaginationChange = (s) => {
+        ChangePageSize(s);
+        setAnchorPagination(null);
+    };
+
+    const toggleViewMethod = () => {
+        const newMethod =
+            viewMethod === "icon"
+                ? "list"
+                : viewMethod === "list"
+                    ? "smallIcon"
+                    : "icon";
+        Auth.SetPreference("view_method", newMethod);
+        OpenLoadingDialog(newMethod);
+    };
+    const isMobile = pathHelper.isMobile();
+
+    const classes = useStyles();
+    return (
+        <>
+            <IconButton
+                title={t("batchDownload")}
+                className={classes.sideButton}
+                onClick={StartBatchDownloadAll}
+                color={inherit ? "inherit" : "default"}
+            >
+                <DownloadIcon fontSize={isSmall ? "small" : "default"} />
+            </IconButton>
+
+            {viewMethod === "icon" && (
+                <IconButton
+                    title={t("listView")}
+                    className={classes.sideButton}
+                    onClick={toggleViewMethod}
+                    color={inherit ? "inherit" : "default"}
+                >
+                    <ViewListIcon fontSize={isSmall ? "small" : "default"} />
+                </IconButton>
+            )}
+            {viewMethod === "list" && (
+                <IconButton
+                    title={t("gridViewSmall")}
+                    className={classes.sideButton}
+                    onClick={toggleViewMethod}
+                    color={inherit ? "inherit" : "default"}
+                >
+                    <ViewSmallIcon fontSize={isSmall ? "small" : "default"} />
+                </IconButton>
+            )}
+
+            {viewMethod === "smallIcon" && (
+                <IconButton
+                    title={t("gridViewLarge")}
+                    className={classes.sideButton}
+                    onClick={toggleViewMethod}
+                    color={inherit ? "inherit" : "default"}
+                >
+                    <ViewModuleIcon fontSize={isSmall ? "small" : "default"} />
+                </IconButton>
+            )}
+
+            {!isMobile && (
+                <IconButton
+                    title={t("paginationSize")}
+                    className={classes.sideButton}
+                    onClick={showPaginationOptions}
+                    color={inherit ? "inherit" : "default"}
+                >
+                    <FormatPageBreak fontSize={isSmall ? "small" : "default"} />
+                </IconButton>
+            )}
+            <Menu
+                id="sort-menu"
+                anchorEl={anchorPagination}
+                open={Boolean(anchorPagination)}
+                onClose={() => setAnchorPagination(null)}
+            >
+                {paginationOption.map((option, index) => (
+                    <MenuItem
+                        key={option}
+                        selected={option === pageSize.toString()}
+                        onClick={() => handlePaginationChange(parseInt(option))}
+                    >
+                        {t("paginationOption", { option })}
+                    </MenuItem>
+                ))}
+                <MenuItem
+                    selected={pageSize === -1}
+                    onClick={() => handlePaginationChange(-1)}
+                >
+                    {t("noPagination")}
+                </MenuItem>
+            </Menu>
+
+            <Sort
+                isSmall={isSmall}
+                inherit={inherit}
+                className={classes.sideButton}
+                onChange={onChangeSort}
+            />
+
+            {share && (
+                <>
+                    <IconButton
+                        title={vasT("saveToMyFiles")}
+                        className={classes.sideButton}
+                        onClick={() => OpenResaveDialog(share.key)}
+                        color={inherit ? "inherit" : "default"}
+                    >
+                        <SaveIcon fontSize={isSmall ? "small" : "default"} />
+                    </IconButton>
+                    {!inherit && (
+                        <>
+                            <IconButton
+                                title={vasT("report")}
+                                className={classes.sideButton}
+                                onClick={() => setOpenReport(true)}
+                            >
+                                <ReportIcon
+                                    fontSize={isSmall ? "small" : "default"}
+                                />
+                            </IconButton>
+                            <Report
+                                open={openReport}
+                                share={share}
+                                onClose={() => setOpenReport(false)}
+                            />
+                        </>
+                    )}
+                </>
+            )}
+            {share && (
+                <IconButton
+                    title={t("shareCreateBy", { nick: share.creator.nick })}
+                    className={classes.sideButton}
+                    onClick={(e) => SetShareUserPopover(e.currentTarget)}
+                    style={{ padding: 5 }}
+                >
+                    <Avatar
+                        style={{ height: 23, width: 23 }}
+                        src={"/api/v3/user/avatar/" + share.creator.key + "/s"}
+                    />
+                </IconButton>
+            )}
+        </>
+    );
+}
diff --git a/src/component/FileManager/ObjectIcon.js b/src/component/FileManager/ObjectIcon.js
new file mode 100644
index 0000000..c9a1384
--- /dev/null
+++ b/src/component/FileManager/ObjectIcon.js
@@ -0,0 +1,261 @@
+import React, { useCallback, useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import statusHelper from "../../utils/page";
+import FileIcon from "./FileIcon";
+import SmallIcon from "./SmallIcon";
+import TableItem from "./TableRow";
+import classNames from "classnames";
+import { makeStyles } from "@material-ui/core";
+import { useDrag } from "react-dnd";
+import { getEmptyImage } from "react-dnd-html5-backend";
+import DropWarpper from "./DnD/DropWarpper";
+import { useLocation } from "react-router-dom";
+import { pathBack } from "../../utils";
+import {
+    changeContextMenu,
+    dragAndDrop,
+    navigateTo,
+    openLoadingDialog,
+    openPreview,
+    selectFile,
+    setSelectedTarget,
+    toggleSnackbar,
+} from "../../redux/explorer";
+import useDragScrolling from "./DnD/Scrolling";
+
+const useStyles = makeStyles(() => ({
+    container: {
+        padding: "7px",
+    },
+    fixFlex: {
+        minWidth: 0,
+    },
+    dragging: {
+        opacity: 0.4,
+    },
+}));
+
+export default function ObjectIcon(props) {
+    const path = useSelector((state) => state.navigator.path);
+    const shareInfo = useSelector((state) => state.viewUpdate.shareInfo);
+    const selected = useSelector((state) => state.explorer.selected);
+    const viewMethod = useSelector(
+        (state) => state.viewUpdate.explorerViewMethod
+    );
+    const navigatorPath = useSelector((state) => state.navigator.path);
+    const location = useLocation();
+
+    const dispatch = useDispatch();
+    const ContextMenu = useCallback(
+        (type, open) => dispatch(changeContextMenu(type, open)),
+        [dispatch]
+    );
+    const SetSelectedTarget = useCallback(
+        (targets) => dispatch(setSelectedTarget(targets)),
+        [dispatch]
+    );
+
+    const NavitateTo = useCallback((targets) => dispatch(navigateTo(targets)), [
+        dispatch,
+    ]);
+    const ToggleSnackbar = useCallback(
+        (vertical, horizontal, msg, color) =>
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color)),
+        [dispatch]
+    );
+    const DragAndDrop = useCallback(
+        (source, target) => dispatch(dragAndDrop(source, target)),
+        [dispatch]
+    );
+    const OpenLoadingDialog = useCallback(
+        (text) => dispatch(openLoadingDialog(text)),
+        [dispatch]
+    );
+    const OpenPreview = useCallback((share) => dispatch(openPreview(share)), [
+        dispatch,
+    ]);
+    const StartDownload = useCallback(
+        (share, file) => dispatch(StartDownload(share, file)),
+        [dispatch]
+    );
+
+    const classes = useStyles();
+
+    const contextMenu = (e) => {
+        if (props.file.type === "up") {
+            return;
+        }
+        e.preventDefault();
+        if (
+            selected.findIndex((value) => {
+                return value === props.file;
+            }) === -1
+        ) {
+            SetSelectedTarget([props.file]);
+        }
+        ContextMenu("file", true);
+    };
+
+    const SelectFile = (e) => {
+        dispatch(selectFile(props.file, e, props.index));
+    };
+    const enterFolder = () => {
+        NavitateTo(
+            path === "/" ? path + props.file.name : path + "/" + props.file.name
+        );
+    };
+    const handleClick = (e) => {
+        if (props.file.type === "up") {
+            NavitateTo(pathBack(navigatorPath));
+            return;
+        }
+
+        SelectFile(e);
+        if (
+            props.file.type === "dir" &&
+            !e.ctrlKey &&
+            !e.metaKey &&
+            !e.shiftKey
+        ) {
+            enterFolder();
+        }
+    };
+
+    const handleDoubleClick = () => {
+        if (props.file.type === "up") {
+            return;
+        }
+        if (props.file.type === "dir") {
+            enterFolder();
+            return;
+        }
+
+        OpenPreview(shareInfo);
+    };
+
+    const handleIconClick = (e) => {
+        e.stopPropagation();
+        if (!e.shiftKey) {
+            e.ctrlKey = true;
+        }
+        SelectFile(e);
+        return false;
+    };
+
+    const {
+        addEventListenerForWindow,
+        removeEventListenerForWindow,
+    } = useDragScrolling();
+
+    const [{ isDragging }, drag, preview] = useDrag({
+        item: {
+            object: props.file,
+            type: "object",
+            selected: [...selected],
+            viewMethod: viewMethod,
+        },
+        begin: () => {
+            addEventListenerForWindow();
+        },
+        end: (item, monitor) => {
+            removeEventListenerForWindow();
+            const dropResult = monitor.getDropResult();
+            if (item && dropResult) {
+                if (dropResult.folder) {
+                    if (
+                        item.object.id !== dropResult.folder.id ||
+                        item.object.type !== dropResult.folder.type
+                    ) {
+                        DragAndDrop(item.object, dropResult.folder);
+                    }
+                }
+            }
+        },
+        canDrag: () => {
+            return (
+                !statusHelper.isMobile() &&
+                statusHelper.isHomePage(location.pathname)
+            );
+        },
+        collect: (monitor) => ({
+            isDragging: monitor.isDragging(),
+        }),
+    });
+
+    useEffect(() => {
+        preview(getEmptyImage(), { captureDraggingState: true });
+        // eslint-disable-next-line
+    }, []);
+
+    if (viewMethod === "list") {
+        return (
+            <>
+                {props.file.type === "dir" && (
+                    <DropWarpper
+                        isListView={true}
+                        pref={drag}
+                        className={classNames(classes.container, {
+                            [classes.dragging]: isDragging,
+                        })}
+                        onIconClick={handleIconClick}
+                        contextMenu={contextMenu}
+                        handleClick={handleClick}
+                        handleDoubleClick={handleDoubleClick.bind(this)}
+                        folder={props.file}
+                    />
+                )}
+                {props.file.type !== "dir" && (
+                    <TableItem
+                        pref={drag}
+                        className={classNames(classes.container, {
+                            [classes.dragging]: isDragging,
+                        })}
+                        onIconClick={handleIconClick}
+                        contextMenu={contextMenu}
+                        handleClick={handleClick}
+                        handleDoubleClick={handleDoubleClick.bind(this)}
+                        file={props.file}
+                    />
+                )}
+            </>
+        );
+    }
+
+    return (
+        <div
+            ref={drag}
+            className={classNames({
+                [classes.container]: viewMethod !== "list",
+                [classes.dragging]: isDragging,
+            })}
+        >
+            <div
+                className={classes.fixFlex}
+                onContextMenu={contextMenu}
+                onClick={handleClick}
+                onDoubleClick={handleDoubleClick.bind(this)}
+            >
+                {props.file.type === "dir" && viewMethod !== "list" && (
+                    <DropWarpper
+                        isListView={false}
+                        onIconClick={handleIconClick}
+                        folder={props.file}
+                    />
+                )}
+                {props.file.type === "file" && viewMethod === "icon" && (
+                    <FileIcon
+                        onIconClick={handleIconClick}
+                        ref={drag}
+                        file={props.file}
+                    />
+                )}
+                {props.file.type === "file" && viewMethod === "smallIcon" && (
+                    <SmallIcon
+                        onIconClick={handleIconClick}
+                        file={props.file}
+                    />
+                )}
+            </div>
+        </div>
+    );
+}
diff --git a/src/component/FileManager/Pagination.js b/src/component/FileManager/Pagination.js
new file mode 100644
index 0000000..b5adcf4
--- /dev/null
+++ b/src/component/FileManager/Pagination.js
@@ -0,0 +1,87 @@
+import React, { useCallback, useMemo } from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import { useDispatch, useSelector } from "react-redux";
+import { Pagination } from "@material-ui/lab";
+import CustomPaginationItem from "./PaginationItem";
+import { setPagination } from "../../redux/viewUpdate/action";
+import AutoHidden from "../Dial/AutoHidden";
+import statusHelper from "../../utils/page";
+import { useLocation } from "react-router-dom";
+
+const useStyles = makeStyles((theme) => ({
+    root: {
+        position: "fixed",
+        bottom: 23,
+        /* left: 8px; */
+        background: theme.palette.background.paper,
+        borderRadius: 24,
+        boxShadow:
+            " 0px 3px 5px -1px rgb(0 0 0 / 20%), 0px 6px 10px 0px rgb(0 0 0 / 14%), 0px 1px 18px 0px rgb(0 0 0 / 12%)",
+        padding: "8px 4px 8px 4px",
+        marginLeft: 20,
+    },
+    placeholder: {
+        marginTop: 80,
+    },
+}));
+
+export default function PaginationFooter() {
+    const classes = useStyles();
+    const dispatch = useDispatch();
+    const files = useSelector((state) => state.explorer.fileList);
+    const folders = useSelector((state) => state.explorer.dirList);
+    const pagination = useSelector((state) => state.viewUpdate.pagination);
+    const loading = useSelector((state) => state.viewUpdate.navigatorLoading);
+    const location = useLocation();
+
+    const SetPagination = useCallback((p) => dispatch(setPagination(p)), [
+        dispatch,
+    ]);
+
+    const handleChange = (event, value) => {
+        SetPagination({ ...pagination, page: value });
+    };
+
+    const count = useMemo(
+        () => Math.ceil((files.length + folders.length) / pagination.size),
+        [files, folders, pagination.size]
+    );
+
+    const isMobile = statusHelper.isMobile();
+    const isSharePage = statusHelper.isSharePage(location.pathname);
+
+    if (count > 1 && !loading) {
+        return (
+            <>
+                {!isMobile && !isSharePage && (
+                    <div className={classes.placeholder} />
+                )}
+                <AutoHidden
+                    enable
+                    element={
+                        isMobile || isSharePage
+                            ? null
+                            : document.querySelector("#explorer-container")
+                    }
+                >
+                    <div className={classes.root}>
+                        <Pagination
+                            renderItem={(item) => (
+                                <CustomPaginationItem
+                                    count={count}
+                                    isMobile={isMobile}
+                                    {...item}
+                                />
+                            )}
+                            color="secondary"
+                            count={count}
+                            page={pagination.page}
+                            onChange={handleChange}
+                        />
+                    </div>
+                </AutoHidden>
+            </>
+        );
+    }
+    return <div></div>;
+}
diff --git a/src/component/FileManager/PaginationItem.js b/src/component/FileManager/PaginationItem.js
new file mode 100644
index 0000000..9b76a9a
--- /dev/null
+++ b/src/component/FileManager/PaginationItem.js
@@ -0,0 +1,50 @@
+import React, { useEffect, useRef } from "react";
+import { useDrop } from "react-dnd";
+import { PaginationItem } from "@material-ui/lab";
+
+export default function CustomPaginationItem(props) {
+    const inputRef = useRef(null);
+
+    const [{ canDrop, isOver }, drop] = useDrop({
+        accept: "object",
+        collect: (monitor) => ({
+            isOver: monitor.isOver(),
+            canDrop: monitor.canDrop(),
+        }),
+    });
+
+    const isActive = canDrop && isOver;
+
+    useEffect(() => {
+        if (
+            isActive &&
+            props.onClick &&
+            props.type !== "start-ellipsis" &&
+            props.type !== "end-ellipsis"
+        ) {
+            console.log("ss");
+            props.onClick();
+        }
+    }, [isActive, inputRef]);
+
+    if (
+        props.isMobile &&
+        (props.type === "start-ellipsis" ||
+            props.type === "end-ellipsis" ||
+            props.type === "page")
+    ) {
+        if (props.selected) {
+            return (
+                <div>
+                    {props.page} / {props.count}
+                </div>
+            );
+        }
+        return <></>;
+    }
+    return (
+        <div ref={inputRef}>
+            <PaginationItem ref={drop} {...props} />
+        </div>
+    );
+}
diff --git a/src/component/FileManager/PathSelector.js b/src/component/FileManager/PathSelector.js
new file mode 100644
index 0000000..944cf23
--- /dev/null
+++ b/src/component/FileManager/PathSelector.js
@@ -0,0 +1,268 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import FolderIcon from "@material-ui/icons/Folder";
+import RightIcon from "@material-ui/icons/KeyboardArrowRight";
+import UpIcon from "@material-ui/icons/ArrowUpward";
+import { connect } from "react-redux";
+import classNames from "classnames";
+
+import {
+    IconButton,
+    ListItemIcon,
+    ListItemSecondaryAction,
+    ListItemText,
+    MenuItem,
+    MenuList,
+    withStyles,
+} from "@material-ui/core";
+import Sort, { sortMethodFuncs } from './Sort';
+import API from "../../middleware/Api";
+import { toggleSnackbar } from "../../redux/explorer";
+import { withTranslation } from "react-i18next";
+
+const mapStateToProps = (state) => {
+    return {
+        search: state.explorer.search,
+    };
+};
+
+const mapDispatchToProps = (dispatch) => {
+    return {
+        toggleSnackbar: (vertical, horizontal, msg, color) => {
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color));
+        },
+    };
+};
+
+const styles = (theme) => ({
+    iconWhite: {
+        color: theme.palette.common.white,
+    },
+    selected: {
+        backgroundColor: theme.palette.primary.main + "!important",
+        "& $primary, & $icon": {
+            color: theme.palette.common.white,
+        },
+    },
+    primary: {},
+    icon: {},
+    buttonIcon: {},
+    selector: {
+        minWidth: "300px",
+    },
+    container: {
+        maxHeight: "330px",
+        overflowY: " auto",
+    },
+    sortWrapper: {
+        textAlign: "right",
+        paddingRight: "30px",
+    },
+    sortButton: {
+        padding: "0",
+    },
+});
+
+class PathSelectorCompoment extends Component {
+    state = {
+        presentPath: "/",
+        sortBy: '',
+        dirList: [],
+        selectedTarget: null,
+    };
+    /**
+     * the source dir list from api `/directory`
+     *
+     * `state.dirList` is a sorted copy of it
+     */
+    sourceDirList = []
+
+    componentDidMount = () => {
+        const toBeLoad = this.props.presentPath;
+        this.enterFolder(!this.props.search ? toBeLoad : "/");
+    };
+
+    back = () => {
+        const paths = this.state.presentPath.split("/");
+        paths.pop();
+        const toBeLoad = paths.join("/");
+        this.enterFolder(toBeLoad === "" ? "/" : toBeLoad);
+    };
+
+    enterFolder = (toBeLoad) => {
+        API.get(
+            (this.props.api ? this.props.api : "/directory") +
+                encodeURIComponent(toBeLoad)
+        )
+            .then((response) => {
+                const dirList = response.data.objects.filter((x) => {
+                    return (
+                        x.type === "dir" &&
+                        this.props.selected.findIndex((value) => {
+                            return (
+                                value.name === x.name && value.path === x.path
+                            );
+                        }) === -1
+                    );
+                });
+                dirList.forEach((value) => {
+                    value.displayName = value.name;
+                });
+                this.sourceDirList = dirList
+                this.setState({
+                    presentPath: toBeLoad,
+                    dirList: dirList,
+                    selectedTarget: null,
+                }, this.updateDirList);
+            })
+            .catch((error) => {
+                this.props.toggleSnackbar(
+                    "top",
+                    "right",
+                    error.message,
+                    "warning"
+                );
+            });
+    };
+
+    handleSelect = (index) => {
+        this.setState({ selectedTarget: index });
+        this.props.onSelect(this.state.dirList[index]);
+    };
+
+
+    /**
+     * change sort type
+     * @param {Event} event
+     */
+    onChangeSort = (sortBy) => {
+        this.setState({ sortBy }, this.updateDirList)
+    };
+    
+    /**
+     * sort dir list, and handle parent dirs
+     */
+    updateDirList = () => {
+        const { state, sourceDirList } = this
+        const { sortBy, presentPath } = state
+
+        // copy
+        const dirList = [...sourceDirList]
+        // sort
+        const sortMethod = sortMethodFuncs[sortBy]
+        if (sortMethod) dirList.sort(sortMethod)
+
+        // add root/parent dirs to top
+        if (presentPath === "/") {
+            dirList.unshift({ name: "/", path: "", displayName: "/" });
+        } else {
+            let path = presentPath;
+            let name = presentPath;
+            const displayNames = ["fileManager.currentFolder", "fileManager.backToParentFolder"];
+            for (let i = 0; i < 2; i++) {
+                const paths = path.split("/");
+                name = paths.pop();
+                name = name === "" ? "/" : name;
+                path = paths.join("/");
+                dirList.unshift({
+                    name: name,
+                    path: path,
+                    displayName: this.props.t(
+                        displayNames[i]
+                    ),
+                });
+            }
+        }
+        this.setState({ dirList })
+    }
+    render() {
+        const { classes, t } = this.props;
+
+        const showActionIcon = (index) => {
+            if (this.state.presentPath === "/") {
+                return index !== 0;
+            }
+            return index !== 1;
+        };
+
+        const actionIcon = (index) => {
+            if (this.state.presentPath === "/") {
+                return <RightIcon />;
+            }
+
+            if (index === 0) {
+                return <UpIcon />;
+            }
+            return <RightIcon />;
+        };
+
+        return (
+            <div className={classes.container}>
+                <div className={classes.sortWrapper}>
+                    <Sort value={this.state.sortBy} isSmall className={classes.sortButton} onChange={this.onChangeSort} />
+                </div>
+                <MenuList className={classes.selector}>
+                    {this.state.dirList.map((value, index) => (
+                        <MenuItem
+                            classes={{
+                                selected: classes.selected,
+                            }}
+                            key={index}
+                            selected={this.state.selectedTarget === index}
+                            onClick={() => this.handleSelect(index)}
+                        >
+                            <ListItemIcon className={classes.icon}>
+                                <FolderIcon />
+                            </ListItemIcon>
+                            <ListItemText
+                                classes={{ primary: classes.primary }}
+                                primary={value.displayName}
+                                primaryTypographyProps={{
+                                    style: { whiteSpace: "normal" },
+                                }}
+                            />
+                            {showActionIcon(index) && (
+                                <ListItemSecondaryAction
+                                    className={classes.buttonIcon}
+                                >
+                                    <IconButton
+                                        className={classNames({
+                                            [classes.iconWhite]:
+                                                this.state.selectedTarget ===
+                                                index,
+                                        })}
+                                        onClick={() =>
+                                            index === 0
+                                                ? this.back()
+                                                : this.enterFolder(
+                                                      value.path === "/"
+                                                          ? value.path +
+                                                                value.name
+                                                          : value.path +
+                                                                "/" +
+                                                                value.name
+                                                  )
+                                        }
+                                    >
+                                        {actionIcon(index)}
+                                    </IconButton>
+                                </ListItemSecondaryAction>
+                            )}
+                        </MenuItem>
+                    ))}
+                </MenuList>
+            </div>
+        );
+    }
+}
+
+PathSelectorCompoment.propTypes = {
+    classes: PropTypes.object.isRequired,
+    presentPath: PropTypes.string.isRequired,
+    selected: PropTypes.array.isRequired,
+};
+
+export default connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(withStyles(styles)(withTranslation()(PathSelectorCompoment)));
diff --git a/src/component/FileManager/Sidebar/SideDrawer.js b/src/component/FileManager/Sidebar/SideDrawer.js
new file mode 100644
index 0000000..4dca4db
--- /dev/null
+++ b/src/component/FileManager/Sidebar/SideDrawer.js
@@ -0,0 +1,339 @@
+import React, { useCallback, useEffect, useState } from "react";
+import { makeStyles } from "@material-ui/core";
+import { useDispatch, useSelector } from "react-redux";
+import Drawer from "@material-ui/core/Drawer";
+import Toolbar from "@material-ui/core/Toolbar";
+import { Clear, Folder } from "@material-ui/icons";
+import Divider from "@material-ui/core/Divider";
+import { setSideBar } from "../../../redux/explorer/action";
+import TypeIcon from "../TypeIcon";
+import Typography from "@material-ui/core/Typography";
+import IconButton from "@material-ui/core/IconButton";
+import Grid from "@material-ui/core/Grid";
+import API from "../../../middleware/Api";
+import { filename, sizeToString } from "../../../utils";
+import Link from "@material-ui/core/Link";
+import Tooltip from "@material-ui/core/Tooltip";
+import TimeAgo from "timeago-react";
+import ListLoading from "../../Placeholder/ListLoading";
+import Hidden from "@material-ui/core/Hidden";
+import Dialog from "@material-ui/core/Dialog";
+import Slide from "@material-ui/core/Slide";
+import AppBar from "@material-ui/core/AppBar";
+import { formatLocalTime } from "../../../utils/datetime";
+import { navigateTo, toggleSnackbar } from "../../../redux/explorer";
+import { Trans, useTranslation } from "react-i18next";
+
+const drawerWidth = 350;
+
+const useStyles = makeStyles((theme) => ({
+    drawer: {
+        width: drawerWidth,
+        flexShrink: 0,
+    },
+    drawerPaper: {
+        width: drawerWidth,
+        boxShadow:
+            "0px 8px 10px -5px rgb(0 0 0 / 20%), 0px 16px 24px 2px rgb(0 0 0 / 14%), 0px 6px 30px 5px rgb(0 0 0 / 12%)",
+    },
+    drawerContainer: {
+        overflow: "auto",
+    },
+    header: {
+        display: "flex",
+        padding: theme.spacing(3),
+        placeContent: "space-between",
+    },
+    fileIcon: { width: 33, height: 33 },
+    fileIconSVG: { fontSize: 20 },
+    folderIcon: {
+        color: theme.palette.text.secondary,
+        width: 33,
+        height: 33,
+    },
+    fileName: {
+        marginLeft: theme.spacing(2),
+        marginRight: theme.spacing(2),
+        wordBreak: "break-all",
+        flexGrow: 2,
+    },
+    closeIcon: {
+        placeSelf: "flex-start",
+        marginTop: 2,
+    },
+    propsContainer: {
+        padding: theme.spacing(3),
+    },
+    propsLabel: {
+        color: theme.palette.text.secondary,
+        padding: theme.spacing(1),
+    },
+    propsTime: {
+        color: theme.palette.text.disabled,
+        padding: theme.spacing(1),
+    },
+    propsValue: {
+        padding: theme.spacing(1),
+        wordBreak: "break-all",
+    },
+    appBar: {
+        position: "relative",
+    },
+    title: {
+        marginLeft: theme.spacing(2),
+        flex: 1,
+    },
+}));
+
+const Transition = React.forwardRef(function Transition(props, ref) {
+    return <Slide direction="up" ref={ref} {...props} />;
+});
+
+export default function SideDrawer() {
+    const { t } = useTranslation();
+    const dispatch = useDispatch();
+    const sideBarOpen = useSelector((state) => state.explorer.sideBarOpen);
+    const selected = useSelector((state) => state.explorer.selected);
+    const SetSideBar = useCallback((open) => dispatch(setSideBar(open)), [
+        dispatch,
+    ]);
+    const ToggleSnackbar = useCallback(
+        (vertical, horizontal, msg, color) =>
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color)),
+        [dispatch]
+    );
+    const NavigateTo = useCallback((k) => dispatch(navigateTo(k)), [dispatch]);
+    const search = useSelector((state) => state.explorer.search);
+    const [target, setTarget] = useState(null);
+    const [details, setDetails] = useState(null);
+    const loadProps = (object) => {
+        API.get(
+            "/object/property/" +
+                object.id +
+                "?trace_root=" +
+                (search ? "true" : "false") +
+                "&is_folder=" +
+                (object.type === "dir").toString()
+        )
+            .then((response) => {
+                setDetails(response.data);
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            });
+    };
+
+    useEffect(() => {
+        setDetails(null);
+        if (sideBarOpen) {
+            if (selected.length !== 1) {
+                SetSideBar(false);
+            } else {
+                setTarget(selected[0]);
+                loadProps(selected[0]);
+            }
+        }
+    }, [selected, sideBarOpen]);
+
+    const classes = useStyles();
+    const propsItem = [
+        {
+            label: t("fileManager.size"),
+            value: (d, target) =>
+                sizeToString(d.size) +
+                t("fileManager.bytes", { bytes: d.size.toLocaleString() }),
+            show: (d) => true,
+        },
+        {
+            label: t("fileManager.storagePolicy"),
+            value: (d, target) => d.policy,
+            show: (d) => d.type === "file",
+        },
+        {
+            label: t("fileManager.storagePolicy"),
+            value: (d, target) =>
+                d.policy === ""
+                    ? t("fileManager.inheritedFromParent")
+                    : d.policy,
+            show: (d) => d.type === "dir",
+        },
+        {
+            label: t("fileManager.childFolders"),
+            value: (d, target) =>
+                t("fileManager.childCount", {
+                    num: d.child_folder_num.toLocaleString(),
+                }),
+            show: (d) => d.type === "dir",
+        },
+        {
+            label: t("fileManager.childFiles"),
+            value: (d, target) =>
+                t("fileManager.childCount", {
+                    num: d.child_file_num.toLocaleString(),
+                }),
+            show: (d) => d.type === "dir",
+        },
+        {
+            label: t("fileManager.parentFolder"),
+            // eslint-disable-next-line react/display-name
+            value: (d, target) => {
+                const path = d.path === "" ? target.path : d.path;
+                const name = filename(path);
+                return (
+                    <Tooltip title={path}>
+                        <Link
+                            href={"javascript:void"}
+                            onClick={() => NavigateTo(path)}
+                        >
+                            {name === "" ? t("fileManager.rootFolder") : name}
+                        </Link>
+                    </Tooltip>
+                );
+            },
+            show: (d) => true,
+        },
+        {
+            label: t("fileManager.modifiedAt"),
+            value: (d, target) => formatLocalTime(d.updated_at),
+            show: (d) => true,
+        },
+        {
+            label: t("fileManager.createdAt"),
+            value: (d) => formatLocalTime(d.created_at),
+            show: (d) => true,
+        },
+    ];
+    const content = (
+        <Grid container className={classes.propsContainer}>
+            {!details && <ListLoading />}
+            {details && (
+                <>
+                    {propsItem.map((item) => {
+                        if (item.show(target)) {
+                            return (
+                                <>
+                                    <Grid
+                                        item
+                                        xs={5}
+                                        className={classes.propsLabel}
+                                    >
+                                        {item.label}
+                                    </Grid>
+                                    <Grid
+                                        item
+                                        xs={7}
+                                        className={classes.propsValue}
+                                    >
+                                        {item.value(details, target)}
+                                    </Grid>
+                                </>
+                            );
+                        }
+                    })}
+                    {target.type === "dir" && (
+                        <Grid item xs={12} className={classes.propsTime}>
+                            <Trans
+                                i18nKey="fileManager.statisticAt"
+                                components={[
+                                    <span key={0} />,
+                                    <TimeAgo
+                                        key={1}
+                                        datetime={details.query_date}
+                                        locale={t("timeAgoLocaleCode", {
+                                            ns: "common",
+                                        })}
+                                    />,
+                                    <span key={2} />,
+                                ]}
+                            />
+                        </Grid>
+                    )}
+                </>
+            )}
+        </Grid>
+    );
+    return (
+        <>
+            <Hidden smUp>
+                <Dialog
+                    fullScreen
+                    open={sideBarOpen}
+                    TransitionComponent={Transition}
+                >
+                    {target && (
+                        <>
+                            <AppBar className={classes.appBar}>
+                                <Toolbar>
+                                    <IconButton
+                                        edge="start"
+                                        color="inherit"
+                                        onClick={() => SetSideBar(false)}
+                                        aria-label="close"
+                                    >
+                                        <Clear />
+                                    </IconButton>
+                                    <Typography
+                                        variant="h6"
+                                        className={classes.title}
+                                    >
+                                        {target.name}
+                                    </Typography>
+                                </Toolbar>
+                            </AppBar>
+                            {content}
+                        </>
+                    )}
+                </Dialog>
+            </Hidden>
+            <Hidden xsDown>
+                <Drawer
+                    className={classes.drawer}
+                    variant="persistent"
+                    classes={{
+                        paper: classes.drawerPaper,
+                    }}
+                    open={sideBarOpen}
+                    anchor="right"
+                >
+                    <Toolbar />
+                    <div className={classes.drawerContainer}>
+                        {target && (
+                            <>
+                                <div className={classes.header}>
+                                    {target.type === "dir" && (
+                                        <Folder
+                                            className={classes.folderIcon}
+                                        />
+                                    )}
+                                    {target.type !== "dir" && (
+                                        <TypeIcon
+                                            isUpload
+                                            className={classes.fileIcon}
+                                            iconClassName={classes.fileIconSVG}
+                                            fileName={target.name}
+                                        />
+                                    )}
+                                    <div className={classes.fileName}>
+                                        <Typography variant="h6" gutterBottom>
+                                            {target.name}
+                                        </Typography>
+                                    </div>
+                                    <IconButton
+                                        onClick={() => SetSideBar(false)}
+                                        className={classes.closeIcon}
+                                        aria-label="close"
+                                        size={"small"}
+                                    >
+                                        <Clear />
+                                    </IconButton>
+                                </div>
+                            </>
+                        )}
+                        <Divider />
+                        {content}
+                    </div>
+                </Drawer>
+            </Hidden>
+        </>
+    );
+}
diff --git a/src/component/FileManager/SmallIcon.js b/src/component/FileManager/SmallIcon.js
new file mode 100644
index 0000000..10b4e55
--- /dev/null
+++ b/src/component/FileManager/SmallIcon.js
@@ -0,0 +1,183 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import classNames from "classnames";
+import {
+    ButtonBase,
+    fade,
+    Tooltip,
+    Typography,
+    withStyles,
+} from "@material-ui/core";
+import TypeIcon from "./TypeIcon";
+import CheckCircleRoundedIcon from "@material-ui/icons/CheckCircleRounded";
+import Grow from "@material-ui/core/Grow";
+import { Folder } from "@material-ui/icons";
+import FileName from "./FileName";
+
+const styles = (theme) => ({
+    container: {
+        padding: "7px",
+    },
+
+    selected: {
+        "&:hover": {
+            border: "1px solid #d0d0d0",
+        },
+        backgroundColor: fade(
+            theme.palette.primary.main,
+            theme.palette.type === "dark" ? 0.3 : 0.18
+        ),
+    },
+    notSelected: {
+        "&:hover": {
+            backgroundColor: theme.palette.background.default,
+            border: "1px solid #d0d0d0",
+        },
+        backgroundColor: theme.palette.background.paper,
+    },
+
+    button: {
+        height: "50px",
+        border: "1px solid " + theme.palette.divider,
+        width: "100%",
+        borderRadius: theme.shape.borderRadius,
+        boxSizing: "border-box",
+        transition:
+            "background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
+        display: "flex",
+        justifyContent: "left",
+        alignItems: "initial",
+    },
+    icon: {
+        margin: "10px 10px 10px 16px",
+        height: "30px",
+        minWidth: "30px",
+        backgroundColor: theme.palette.background.paper,
+        borderRadius: "90%",
+        paddingTop: "3px",
+        color: theme.palette.text.secondary,
+    },
+    folderNameSelected: {
+        color:
+            theme.palette.type === "dark" ? "#fff" : theme.palette.primary.dark,
+        fontWeight: "500",
+    },
+    folderNameNotSelected: {
+        color: theme.palette.text.secondary,
+    },
+    folderName: {
+        marginTop: "15px",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+        overflow: "hidden",
+        marginRight: "20px",
+    },
+    checkIcon: {
+        color: theme.palette.primary.main,
+    },
+});
+
+const mapStateToProps = (state) => {
+    return {
+        selected: state.explorer.selected,
+    };
+};
+
+const mapDispatchToProps = () => {
+    return {};
+};
+
+class SmallIconCompoment extends Component {
+    state = {};
+
+    shouldComponentUpdate(nextProps, nextState, nextContext) {
+        const isSelectedCurrent =
+            this.props.selected.findIndex((value) => {
+                return value === this.props.file;
+            }) !== -1;
+        const isSelectedNext =
+            nextProps.selected.findIndex((value) => {
+                return value === this.props.file;
+            }) !== -1;
+        if (
+            nextProps.selected !== this.props.selected &&
+            isSelectedCurrent === isSelectedNext
+        ) {
+            return false;
+        }
+
+        return true;
+    }
+
+    render() {
+        const { classes } = this.props;
+        const isSelected =
+            this.props.selected.findIndex((value) => {
+                return value === this.props.file;
+            }) !== -1;
+
+        return (
+            <ButtonBase
+                focusRipple
+                className={classNames(
+                    {
+                        [classes.selected]: isSelected,
+                        [classes.notSelected]: !isSelected,
+                    },
+                    classes.button
+                )}
+            >
+                <div
+                    onClick={this.props.onIconClick}
+                    className={classNames(classes.icon, {
+                        [classes.iconSelected]: isSelected,
+                        [classes.iconNotSelected]: !isSelected,
+                    })}
+                >
+                    {!isSelected && (
+                        <>
+                            {this.props.isFolder && <Folder />}
+                            {!this.props.isFolder && (
+                                <TypeIcon fileName={this.props.file.name} />
+                            )}
+                        </>
+                    )}
+                    {isSelected && (
+                        <Grow in={isSelected}>
+                            <CheckCircleRoundedIcon
+                                className={classes.checkIcon}
+                            />
+                        </Grow>
+                    )}
+                </div>
+                <Tooltip
+                    title={this.props.file.name}
+                    aria-label={this.props.file.name}
+                >
+                    <Typography
+                        className={classNames(classes.folderName, {
+                            [classes.folderNameSelected]: isSelected,
+                            [classes.folderNameNotSelected]: !isSelected,
+                        })}
+                        variant="body2"
+                    >
+                        <FileName name={this.props.file.name} />
+                    </Typography>
+                </Tooltip>
+            </ButtonBase>
+        );
+    }
+}
+
+SmallIconCompoment.propTypes = {
+    classes: PropTypes.object.isRequired,
+    file: PropTypes.object.isRequired,
+};
+
+const SmallIcon = connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(withStyles(styles)(SmallIconCompoment));
+
+export default SmallIcon;
diff --git a/src/component/FileManager/Sort.tsx b/src/component/FileManager/Sort.tsx
new file mode 100644
index 0000000..017687d
--- /dev/null
+++ b/src/component/FileManager/Sort.tsx
@@ -0,0 +1,105 @@
+import React, { MouseEventHandler, useState } from "react";
+import { IconButton, Menu, MenuItem } from "@material-ui/core";
+import TextTotateVerticalIcon from "@material-ui/icons/TextRotateVertical";
+import { useTranslation } from "react-i18next";
+import { CloudreveFile, SortMethod } from "./../../types/index";
+
+const SORT_OPTIONS: {
+    value: SortMethod;
+    label: string;
+}[] = [
+    { value: "namePos", label: "A-Z" },
+    { value: "nameRev", label: "Z-A" },
+    { value: "timePos", label: "oldestUploaded" },
+    { value: "timeRev", label: "newestUploaded" },
+    { value: "modifyTimePos", label: "oldestModified" },
+    { value: "modifyTimeRev", label: "newestModified" },
+    { value: "sizePos", label: "smallest" },
+    { value: "sizeRes", label: "largest" },
+]
+
+export default function Sort({ value, onChange, isSmall, inherit, className }) {
+    const { t } = useTranslation("application", { keyPrefix: "fileManager.sortMethods" });
+
+    const [anchorSort, setAnchorSort] = useState<Element | null>(null);
+    const showSortOptions: MouseEventHandler<HTMLButtonElement> = (e) => {
+        setAnchorSort(e.currentTarget);
+    }
+    
+    const [sortBy, setSortBy] = useState<SortMethod>(value || '')
+    function onChangeSort(value: SortMethod) {
+        setSortBy(value)
+        onChange(value)
+        setAnchorSort(null);
+    }
+    return (
+        <>
+            <IconButton
+                title={t("sortMethod")}
+                className={className}
+                onClick={showSortOptions}
+                color={inherit ? "inherit" : "default"}
+            >
+                <TextTotateVerticalIcon
+                    fontSize={isSmall ? "small" : "default"}
+                />
+            </IconButton>
+            <Menu
+                id="sort-menu"
+                anchorEl={anchorSort}
+                open={Boolean(anchorSort)}
+                onClose={() => setAnchorSort(null)}
+            >
+                {
+                    SORT_OPTIONS.map((option, index) => (
+                        <MenuItem
+                            key={index}
+                            selected={option.value === sortBy}
+                            onClick={() => onChangeSort(option.value)}
+                        >
+                            {t(option.label)}
+                        </MenuItem>
+                    ))
+                }
+            </Menu>
+        </>
+    )
+}
+
+
+type SortFunc = (a: CloudreveFile, b: CloudreveFile) => number;
+
+export const sortMethodFuncs: Record<SortMethod, SortFunc> = {
+    sizePos: (a: CloudreveFile, b: CloudreveFile) => {
+        return a.size - b.size;
+    },
+    sizeRes: (a: CloudreveFile, b: CloudreveFile) => {
+        return b.size - a.size;
+    },
+    namePos: (a: CloudreveFile, b: CloudreveFile) => {
+        return a.name.localeCompare(
+            b.name,
+            navigator.languages[0] || navigator.language,
+            { numeric: true, ignorePunctuation: true }
+        );
+    },
+    nameRev: (a: CloudreveFile, b: CloudreveFile) => {
+        return b.name.localeCompare(
+            a.name,
+            navigator.languages[0] || navigator.language,
+            { numeric: true, ignorePunctuation: true }
+        );
+    },
+    timePos: (a: CloudreveFile, b: CloudreveFile) => {
+        return Date.parse(a.create_date) - Date.parse(b.create_date);
+    },
+    timeRev: (a: CloudreveFile, b: CloudreveFile) => {
+        return Date.parse(b.create_date) - Date.parse(a.create_date);
+    },
+    modifyTimePos: (a: CloudreveFile, b: CloudreveFile) => {
+        return Date.parse(a.date) - Date.parse(b.date);
+    },
+    modifyTimeRev: (a: CloudreveFile, b: CloudreveFile) => {
+        return Date.parse(b.date) - Date.parse(a.date);
+    },
+};
diff --git a/src/component/FileManager/TableRow.js b/src/component/FileManager/TableRow.js
new file mode 100644
index 0000000..f562dc7
--- /dev/null
+++ b/src/component/FileManager/TableRow.js
@@ -0,0 +1,229 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+
+import FolderIcon from "@material-ui/icons/Folder";
+import classNames from "classnames";
+import { sizeToString } from "../../utils/index";
+import {
+    fade,
+    TableCell,
+    TableRow,
+    Typography,
+    withStyles,
+} from "@material-ui/core";
+import TypeIcon from "./TypeIcon";
+import pathHelper from "../../utils/page";
+import statusHelper from "../../utils/page";
+import { withRouter } from "react-router";
+import KeyboardReturnIcon from "@material-ui/icons/KeyboardReturn";
+import CheckCircleRoundedIcon from "@material-ui/icons/CheckCircleRounded";
+import Grow from "@material-ui/core/Grow";
+import { formatLocalTime } from "../../utils/datetime";
+import FileName from "./FileName";
+
+const styles = (theme) => ({
+    selected: {
+        "&:hover": {},
+        backgroundColor: fade(theme.palette.primary.main, 0.18),
+    },
+
+    selectedShared: {
+        "&:hover": {},
+        backgroundColor: fade(theme.palette.primary.main, 0.18),
+    },
+
+    notSelected: {
+        "&:hover": {
+            backgroundColor: theme.palette.action.hover,
+        },
+    },
+    icon: {
+        verticalAlign: "middle",
+        marginRight: "20px",
+        color: theme.palette.text.secondary,
+    },
+    tableIcon: {
+        marginRight: "20px",
+        verticalAlign: "middle",
+    },
+    folderNameSelected: {
+        color:
+            theme.palette.type === "dark" ? "#fff" : theme.palette.primary.dark,
+        fontWeight: "500",
+        userSelect: "none",
+    },
+    folderNameNotSelected: {
+        color: theme.palette.text.secondary,
+        userSelect: "none",
+    },
+    folderName: {
+        marginRight: "20px",
+        display: "flex",
+        alignItems: "center",
+    },
+    hideAuto: {
+        [theme.breakpoints.down("sm")]: {
+            display: "none",
+        },
+    },
+    tableRow: {
+        padding: "10px 16px",
+    },
+    checkIcon: {
+        color: theme.palette.primary.main,
+    },
+    active: {
+        backgroundColor: fade(theme.palette.primary.main, 0.1),
+    },
+});
+
+const mapStateToProps = (state) => {
+    return {
+        selected: state.explorer.selected,
+    };
+};
+
+const mapDispatchToProps = () => {
+    return {};
+};
+
+class TableRowCompoment extends Component {
+    state = {};
+
+    shouldComponentUpdate(nextProps, nextState, nextContext) {
+        const isSelectedCurrent =
+            this.props.selected.findIndex((value) => {
+                return value === this.props.file;
+            }) !== -1;
+        const isSelectedNext =
+            nextProps.selected.findIndex((value) => {
+                return value === this.props.file;
+            }) !== -1;
+        if (
+            nextProps.selected !== this.props.selected &&
+            isSelectedCurrent === isSelectedNext
+        ) {
+            return false;
+        }
+
+        return true;
+    }
+
+    render() {
+        const { classes } = this.props;
+        const isShare = pathHelper.isSharePage(this.props.location.pathname);
+
+        let icon;
+        if (this.props.file.type === "dir") {
+            icon = <FolderIcon className={classes.icon} />;
+        } else if (this.props.file.type === "up") {
+            icon = <KeyboardReturnIcon className={classes.icon} />;
+        } else {
+            icon = (
+                <TypeIcon
+                    className={classes.tableIcon}
+                    fileName={this.props.file.name}
+                />
+            );
+        }
+        const isSelected =
+            this.props.selected.findIndex((value) => {
+                return value === this.props.file;
+            }) !== -1;
+        const isMobile = statusHelper.isMobile();
+
+        return (
+            <TableRow
+                ref={this.props.pref}
+                onContextMenu={this.props.contextMenu}
+                onClick={this.props.handleClick}
+                onDoubleClick={this.props.handleDoubleClick.bind(this)}
+                className={classNames({
+                    [classes.selected]: isSelected && !isShare,
+                    [classes.selectedShared]: isSelected && isShare,
+                    [classes.notSelected]: !isSelected,
+                    [classes.active]: this.props.isActive,
+                })}
+            >
+                <TableCell
+                    ref={this.props.dref}
+                    component="th"
+                    scope="row"
+                    className={classes.tableRow}
+                >
+                    <Typography
+                        variant="body2"
+                        className={classNames(classes.folderName, {
+                            [classes.folderNameSelected]: isSelected,
+                            [classes.folderNameNotSelected]: !isSelected,
+                        })}
+                    >
+                        <div
+                            onClick={
+                                this.props.file.type !== "up"
+                                    ? this.props.onIconClick
+                                    : null
+                            }
+                        >
+                            {!isSelected && icon}
+                            {isSelected && (
+                                <Grow in={isSelected}>
+                                    <CheckCircleRoundedIcon
+                                        className={classNames(
+                                            classes.checkIcon,
+                                            classes.icon
+                                        )}
+                                    />
+                                </Grow>
+                            )}
+                        </div>
+                        <FileName name={this.props.file.name} />
+                    </Typography>
+                </TableCell>
+                <TableCell
+                    className={classNames(classes.hideAuto, classes.tableRow)}
+                >
+                    <Typography
+                        variant="body2"
+                        className={classNames(classes.folderName, {
+                            [classes.folderNameSelected]: isSelected,
+                            [classes.folderNameNotSelected]: !isSelected,
+                        })}
+                    >
+                        {" "}
+                        {this.props.file.type !== "dir" &&
+                            this.props.file.type !== "up" &&
+                            sizeToString(this.props.file.size)}
+                    </Typography>
+                </TableCell>
+                <TableCell
+                    className={classNames(classes.hideAuto, classes.tableRow)}
+                >
+                    <Typography
+                        variant="body2"
+                        className={classNames(classes.folderName, {
+                            [classes.folderNameSelected]: isSelected,
+                            [classes.folderNameNotSelected]: !isSelected,
+                        })}
+                    >
+                        {" "}
+                        {formatLocalTime(this.props.file.date)}
+                    </Typography>
+                </TableCell>
+            </TableRow>
+        );
+    }
+}
+
+TableRowCompoment.propTypes = {
+    classes: PropTypes.object.isRequired,
+    file: PropTypes.object.isRequired,
+};
+
+const TableItem = connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(withStyles(styles)(withRouter(TableRowCompoment)));
+
+export default TableItem;
diff --git a/src/component/FileManager/TypeIcon.js b/src/component/FileManager/TypeIcon.js
new file mode 100644
index 0000000..fb75c84
--- /dev/null
+++ b/src/component/FileManager/TypeIcon.js
@@ -0,0 +1,162 @@
+import React from "react";
+import { mediaType } from "../../config";
+import ImageIcon from "@material-ui/icons/PhotoSizeSelectActual";
+import VideoIcon from "@material-ui/icons/Videocam";
+import AudioIcon from "@material-ui/icons/Audiotrack";
+import PdfIcon from "@material-ui/icons/PictureAsPdf";
+import {
+    Android,
+    FileExcelBox,
+    FilePowerpointBox,
+    FileWordBox,
+    LanguageC,
+    LanguageCpp,
+    LanguageGo,
+    LanguageJavascript,
+    LanguagePhp,
+    LanguagePython,
+    MagnetOn,
+    ScriptText,
+    WindowRestore,
+    ZipBox,
+} from "mdi-material-ui";
+import FileShowIcon from "@material-ui/icons/InsertDriveFile";
+import { lighten } from "@material-ui/core/styles";
+import useTheme from "@material-ui/core/styles/useTheme";
+import { Avatar } from "@material-ui/core";
+import { MenuBook } from "@material-ui/icons";
+
+const icons = {
+    audio: {
+        color: "#651fff",
+        icon: AudioIcon,
+    },
+    video: {
+        color: "#d50000",
+        icon: VideoIcon,
+    },
+    image: {
+        color: "#d32f2f",
+        icon: ImageIcon,
+    },
+    pdf: {
+        color: "#f44336",
+        icon: PdfIcon,
+    },
+    word: {
+        color: "#538ce5",
+        icon: FileWordBox,
+    },
+    ppt: {
+        color: "rgb(239, 99, 63)",
+        icon: FilePowerpointBox,
+    },
+    excel: {
+        color: "#4caf50",
+        icon: FileExcelBox,
+    },
+    text: {
+        color: "#607d8b",
+        icon: ScriptText,
+    },
+    torrent: {
+        color: "#5c6bc0",
+        icon: MagnetOn,
+    },
+    zip: {
+        color: "#f9a825",
+        icon: ZipBox,
+    },
+    excute: {
+        color: "#1a237e",
+        icon: WindowRestore,
+    },
+    android: {
+        color: "#8bc34a",
+        icon: Android,
+    },
+    file: {
+        color: "#607d8b",
+        icon: FileShowIcon,
+    },
+    php: {
+        color: "#777bb3",
+        icon: LanguagePhp,
+    },
+    go: {
+        color: "#16b3da",
+        icon: LanguageGo,
+    },
+    python: {
+        color: "#3776ab",
+        icon: LanguagePython,
+    },
+    c: {
+        color: "#a8b9cc",
+        icon: LanguageC,
+    },
+    cpp: {
+        color: "#004482",
+        icon: LanguageCpp,
+    },
+    js: {
+        color: "#f4d003",
+        icon: LanguageJavascript,
+    },
+    epub: {
+        color: "#81b315",
+        icon: MenuBook,
+    },
+};
+
+const getColor = (theme, color) =>
+    theme.palette.type === "light" ? color : lighten(color, 0.2);
+
+let color;
+
+const TypeIcon = (props) => {
+    const theme = useTheme();
+
+    const fileSuffix = props.fileName.split(".").pop().toLowerCase();
+    let fileType = "file";
+    Object.keys(mediaType).forEach((k) => {
+        if (mediaType[k].indexOf(fileSuffix) !== -1) {
+            fileType = k;
+        }
+    });
+    const IconComponent = icons[fileType].icon;
+    color = getColor(theme, icons[fileType].color);
+    if (props.getColorValue) {
+        props.getColorValue(color);
+    }
+
+    return (
+        <>
+            {props.isUpload && (
+                <Avatar
+                    className={props.className}
+                    style={{
+                        backgroundColor: color,
+                    }}
+                >
+                    <IconComponent
+                        className={props.iconClassName}
+                        style={{
+                            color: theme.palette.background.paper,
+                        }}
+                    />
+                </Avatar>
+            )}
+            {!props.isUpload && (
+                <IconComponent
+                    className={props.className}
+                    style={{
+                        color: color,
+                    }}
+                />
+            )}
+        </>
+    );
+};
+
+export default TypeIcon;
diff --git a/src/component/Login/Activication.js b/src/component/Login/Activication.js
new file mode 100644
index 0000000..472bfbc
--- /dev/null
+++ b/src/component/Login/Activication.js
@@ -0,0 +1,114 @@
+import React, { useCallback, useEffect, useState } from "react";
+import { useDispatch } from "react-redux";
+import {
+    Avatar,
+    Button,
+    makeStyles,
+    Paper,
+    Typography,
+} from "@material-ui/core";
+import { useHistory } from "react-router-dom";
+import API from "../../middleware/Api";
+import EmailIcon from "@material-ui/icons/EmailOutlined";
+import { useLocation } from "react-router";
+import { toggleSnackbar } from "../../redux/explorer";
+import { useTranslation } from "react-i18next";
+
+const useStyles = makeStyles((theme) => ({
+    layout: {
+        width: "auto",
+        marginTop: "110px",
+        marginLeft: theme.spacing(3),
+        marginRight: theme.spacing(3),
+        [theme.breakpoints.up("sm")]: {
+            width: 400,
+            marginLeft: "auto",
+            marginRight: "auto",
+        },
+        marginBottom: 110,
+    },
+    paper: {
+        marginTop: theme.spacing(8),
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        padding: `${theme.spacing(2)}px ${theme.spacing(3)}px ${theme.spacing(
+            3
+        )}px`,
+    },
+    avatar: {
+        margin: theme.spacing(1),
+        backgroundColor: theme.palette.secondary.main,
+    },
+    submit: {
+        marginTop: theme.spacing(3),
+    },
+}));
+
+function useQuery() {
+    return new URLSearchParams(useLocation().search);
+}
+
+function Activation() {
+    const { t } = useTranslation();
+    const query = useQuery();
+    const location = useLocation();
+
+    const [success, setSuccess] = useState(false);
+    const [email, setEmail] = useState("");
+
+    const dispatch = useDispatch();
+    const ToggleSnackbar = useCallback(
+        (vertical, horizontal, msg, color) =>
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color)),
+        [dispatch]
+    );
+    const history = useHistory();
+
+    const classes = useStyles();
+
+    useEffect(() => {
+        API.get(
+            "/user/activate/" + query.get("id") + "?sign=" + query.get("sign")
+        )
+            .then((response) => {
+                setEmail(response.data);
+                setSuccess(true);
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "warning");
+                history.push("/login");
+            });
+        // eslint-disable-next-line
+    }, [location]);
+
+    return (
+        <div className={classes.layout}>
+            {success && (
+                <Paper className={classes.paper}>
+                    <Avatar className={classes.avatar}>
+                        <EmailIcon />
+                    </Avatar>
+                    <Typography component="h1" variant="h5">
+                        {t("login.activateSuccess")}
+                    </Typography>
+                    <Typography style={{ marginTop: "20px" }}>
+                        {t("login.accountActivated")}
+                    </Typography>
+                    <Button
+                        type="submit"
+                        fullWidth
+                        variant="contained"
+                        color="primary"
+                        className={classes.submit}
+                        onClick={() => history.push("/login?username=" + email)}
+                    >
+                        {t("login.backToSingIn")}
+                    </Button>
+                </Paper>
+            )}
+        </div>
+    );
+}
+
+export default Activation;
diff --git a/src/component/Login/LoginForm.js b/src/component/Login/LoginForm.js
new file mode 100644
index 0000000..b74062f
--- /dev/null
+++ b/src/component/Login/LoginForm.js
@@ -0,0 +1,517 @@
+import React, { useCallback, useEffect, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import LockOutlinedIcon from "@material-ui/icons/LockOutlined";
+import {
+    Avatar,
+    Button,
+    Divider,
+    FormControl,
+    Link,
+    makeStyles,
+    Paper,
+    TextField,
+    Typography,
+} from "@material-ui/core";
+import { Link as RouterLink, useHistory } from "react-router-dom";
+import API from "../../middleware/Api";
+import Auth from "../../middleware/Auth";
+import { bufferDecode, bufferEncode } from "../../utils/index";
+import {
+    EmailOutlined,
+    Fingerprint,
+    VpnKey,
+    VpnKeyOutlined,
+} from "@material-ui/icons";
+import VpnIcon from "@material-ui/icons/VpnKeyOutlined";
+import { useLocation } from "react-router";
+import { useCaptcha } from "../../hooks/useCaptcha";
+import {
+    applyThemes,
+    setSessionStatus,
+    toggleSnackbar,
+} from "../../redux/explorer";
+import { useTranslation } from "react-i18next";
+import InputAdornment from "@material-ui/core/InputAdornment";
+import useMediaQuery from "@material-ui/core/useMediaQuery";
+import { useTheme } from "@material-ui/core/styles";
+
+const useStyles = makeStyles((theme) => ({
+    layout: {
+        width: "auto",
+        marginTop: "110px",
+        marginLeft: theme.spacing(3),
+        marginRight: theme.spacing(3),
+        [theme.breakpoints.up("sm")]: {
+            width: 400,
+            marginLeft: "auto",
+            marginRight: "auto",
+        },
+        marginBottom: 110,
+    },
+    paper: {
+        marginTop: theme.spacing(8),
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        padding: `${theme.spacing(2)}px ${theme.spacing(3)}px ${theme.spacing(
+            3
+        )}px`,
+    },
+    avatar: {
+        margin: theme.spacing(1),
+        backgroundColor: theme.palette.secondary.main,
+    },
+    form: {
+        width: "100%", // Fix IE 11 issue.
+        marginTop: theme.spacing(1),
+    },
+    submit: {
+        marginTop: theme.spacing(3),
+    },
+    link: {
+        marginTop: "20px",
+        display: "flex",
+        width: "100%",
+        justifyContent: "space-between",
+    },
+    buttonContainer: {
+        display: "flex",
+    },
+    authnLink: {
+        textAlign: "center",
+        marginTop: 16,
+    },
+}));
+
+function useQuery() {
+    return new URLSearchParams(useLocation().search);
+}
+
+function LoginForm() {
+    const { t } = useTranslation();
+
+    const [email, setEmail] = useState("");
+    const [pwd, setPwd] = useState("");
+    const [loading, setLoading] = useState(false);
+    const [useAuthn, setUseAuthn] = useState(false);
+    const [twoFA, setTwoFA] = useState(false);
+    const [faCode, setFACode] = useState("");
+
+    const loginCaptcha = useSelector((state) => state.siteConfig.loginCaptcha);
+    const registerEnabled = useSelector(
+        (state) => state.siteConfig.registerEnabled
+    );
+    const title = useSelector((state) => state.siteConfig.title);
+    const QQLogin = useSelector((state) => state.siteConfig.QQLogin);
+    const authn = useSelector((state) => state.siteConfig.authn);
+    const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
+
+    const dispatch = useDispatch();
+    const ToggleSnackbar = useCallback(
+        (vertical, horizontal, msg, color) =>
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color)),
+        [dispatch]
+    );
+    const ApplyThemes = useCallback(
+        (theme) => dispatch(applyThemes(theme)),
+        [dispatch]
+    );
+    const SetSessionStatus = useCallback(
+        (status) => dispatch(setSessionStatus(status)),
+        [dispatch]
+    );
+
+    const history = useHistory();
+    const location = useLocation();
+    const {
+        captchaLoading,
+        isValidate,
+        validate,
+        CaptchaRender,
+        captchaRefreshRef,
+        captchaParamsRef,
+    } = useCaptcha();
+    const query = useQuery();
+
+    const classes = useStyles();
+
+    useEffect(() => {
+        setEmail(query.get("username"));
+    }, [location]);
+
+    const afterLogin = (data) => {
+        Auth.authenticate(data);
+
+        // 设置用户主题色
+        if (data["preferred_theme"] !== "") {
+            ApplyThemes(data["preferred_theme"]);
+        }
+
+        // 设置登录状态
+        SetSessionStatus(true);
+
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        if (query.get("redirect")) {
+            history.push(query.get("redirect"));
+        } else {
+            history.push("/home");
+        }
+        ToggleSnackbar("top", "right", t("login.success"), "success");
+
+        localStorage.removeItem("siteConfigCache");
+    };
+
+    const authnLogin = (e) => {
+        e.preventDefault();
+        if (!navigator.credentials) {
+            ToggleSnackbar(
+                "top",
+                "right",
+                t("login.browserNotSupport"),
+                "warning"
+            );
+
+            return;
+        }
+
+        setLoading(true);
+
+        API.get("/user/authn/" + email)
+            .then((response) => {
+                const credentialRequestOptions = response.data;
+                console.log(credentialRequestOptions);
+                credentialRequestOptions.publicKey.challenge = bufferDecode(
+                    credentialRequestOptions.publicKey.challenge
+                );
+                credentialRequestOptions.publicKey.allowCredentials.forEach(
+                    function (listItem) {
+                        listItem.id = bufferDecode(listItem.id);
+                    }
+                );
+
+                return navigator.credentials.get({
+                    publicKey: credentialRequestOptions.publicKey,
+                });
+            })
+            .then((assertion) => {
+                const authData = assertion.response.authenticatorData;
+                const clientDataJSON = assertion.response.clientDataJSON;
+                const rawId = assertion.rawId;
+                const sig = assertion.response.signature;
+                const userHandle = assertion.response.userHandle;
+
+                return API.post(
+                    "/user/authn/finish/" + email,
+                    JSON.stringify({
+                        id: assertion.id,
+                        rawId: bufferEncode(rawId),
+                        type: assertion.type,
+                        response: {
+                            authenticatorData: bufferEncode(authData),
+                            clientDataJSON: bufferEncode(clientDataJSON),
+                            signature: bufferEncode(sig),
+                            userHandle: bufferEncode(userHandle),
+                        },
+                    })
+                );
+            })
+            .then((response) => {
+                afterLogin(response.data);
+            })
+            .catch((error) => {
+                console.log(error);
+                ToggleSnackbar("top", "right", error.message, "warning");
+            })
+            .then(() => {
+                setLoading(false);
+            });
+    };
+
+    const login = (e) => {
+        e.preventDefault();
+        setLoading(true);
+        if (!isValidate.current.isValidate && loginCaptcha) {
+            validate(() => login(e), setLoading);
+            return;
+        }
+        API.post("/user/session", {
+            userName: email,
+            Password: pwd,
+            ...captchaParamsRef.current,
+        })
+            .then((response) => {
+                setLoading(false);
+                if (response.rawData.code === 203) {
+                    setTwoFA(true);
+                } else {
+                    afterLogin(response.data);
+                }
+            })
+            .catch((error) => {
+                setLoading(false);
+                ToggleSnackbar("top", "right", error.message, "warning");
+                captchaRefreshRef.current();
+            });
+    };
+
+    const initQQLogin = () => {
+        setLoading(true);
+        API.post("/user/qq")
+            .then((response) => {
+                window.location.href = response.data;
+            })
+            .catch((error) => {
+                setLoading(false);
+                ToggleSnackbar("top", "right", error.message, "warning");
+            });
+    };
+
+    const twoFALogin = (e) => {
+        e.preventDefault();
+        setLoading(true);
+        API.post("/user/2fa", {
+            code: faCode,
+        })
+            .then((response) => {
+                setLoading(false);
+                afterLogin(response.data);
+            })
+            .catch((error) => {
+                setLoading(false);
+                ToggleSnackbar("top", "right", error.message, "warning");
+            });
+    };
+
+    return (
+        <div className={classes.layout}>
+            {!twoFA && (
+                <>
+                    <Paper className={classes.paper}>
+                        <Avatar className={classes.avatar}>
+                            <LockOutlinedIcon />
+                        </Avatar>
+                        <Typography component="h1" variant="h5">
+                            {t("login.title", { title })}
+                        </Typography>
+                        {!useAuthn && (
+                            <form className={classes.form} onSubmit={login}>
+                                <FormControl margin="normal" required fullWidth>
+                                    <TextField
+                                        label={t("login.email")}
+                                        variant={"outlined"}
+                                        inputProps={{
+                                            id: "email",
+                                            type: "email",
+                                            name: "email",
+                                        }}
+                                        onChange={(e) =>
+                                            setEmail(e.target.value)
+                                        }
+                                        InputProps={{
+                                            startAdornment: !isMobile && (
+                                                <InputAdornment position="start">
+                                                    <EmailOutlined />
+                                                </InputAdornment>
+                                            ),
+                                        }}
+                                        autoComplete
+                                        value={email}
+                                        autoFocus
+                                    />
+                                </FormControl>
+                                <FormControl margin="normal" required fullWidth>
+                                    <TextField
+                                        variant={"outlined"}
+                                        label={t("login.password")}
+                                        inputProps={{
+                                            name: "password",
+                                            type: "password",
+                                            id: "password",
+                                        }}
+                                        onChange={(e) => setPwd(e.target.value)}
+                                        InputProps={{
+                                            startAdornment: !isMobile && (
+                                                <InputAdornment position="start">
+                                                    <VpnKeyOutlined />
+                                                </InputAdornment>
+                                            ),
+                                        }}
+                                        value={pwd}
+                                        autoComplete
+                                    />
+                                </FormControl>
+                                {loginCaptcha && <CaptchaRender />}
+                                {QQLogin && (
+                                    <div className={classes.buttonContainer}>
+                                        <Button
+                                            type="submit"
+                                            variant="contained"
+                                            color="primary"
+                                            disabled={loading}
+                                            className={classes.submit}
+                                        >
+                                            {t("login.signIn")}
+                                        </Button>
+                                        <Button
+                                            variant="contained"
+                                            color="secondary"
+                                            style={{ marginLeft: "10px" }}
+                                            disabled={loading}
+                                            className={classes.submit}
+                                            onClick={initQQLogin}
+                                        >
+                                            {t("vas.loginWithQQ")}
+                                        </Button>
+                                    </div>
+                                )}
+                                {!QQLogin && (
+                                    <Button
+                                        type="submit"
+                                        fullWidth
+                                        variant="contained"
+                                        color="primary"
+                                        disabled={
+                                            loading ||
+                                            (loginCaptcha
+                                                ? captchaLoading
+                                                : false)
+                                        }
+                                        className={classes.submit}
+                                    >
+                                        {t("login.signIn")}
+                                    </Button>
+                                )}
+                            </form>
+                        )}
+                        {useAuthn && (
+                            <form className={classes.form}>
+                                <FormControl margin="normal" required fullWidth>
+                                    <TextField
+                                        variant={"outlined"}
+                                        label={t("login.email")}
+                                        InputProps={{
+                                            id: "email",
+                                            type: "email",
+                                            name: "email",
+                                            startAdornment: !isMobile && (
+                                                <InputAdornment position="start">
+                                                    <EmailOutlined />
+                                                </InputAdornment>
+                                            ),
+                                        }}
+                                        onChange={(e) =>
+                                            setEmail(e.target.value)
+                                        }
+                                        autoComplete
+                                        value={email}
+                                        autoFocus
+                                        required
+                                    />
+                                </FormControl>
+                                <Button
+                                    type="submit"
+                                    fullWidth
+                                    variant="contained"
+                                    color="primary"
+                                    disabled={loading}
+                                    onClick={authnLogin}
+                                    className={classes.submit}
+                                >
+                                    {t("login.continue")}
+                                </Button>
+                            </form>
+                        )}
+                        <Divider />
+                        <div className={classes.link}>
+                            <div>
+                                <Link component={RouterLink} to={"/forget"}>
+                                    {t("login.forgetPassword")}
+                                </Link>
+                            </div>
+                            <div>
+                                {registerEnabled && (
+                                    <Link component={RouterLink} to={"/signup"}>
+                                        {t("login.signUpAccount")}
+                                    </Link>
+                                )}
+                            </div>
+                        </div>
+                    </Paper>
+
+                    {authn && (
+                        <div className={classes.authnLink}>
+                            <Button
+                                color="primary"
+                                onClick={() => setUseAuthn(!useAuthn)}
+                            >
+                                {!useAuthn && (
+                                    <>
+                                        <Fingerprint
+                                            style={{
+                                                marginRight: 8,
+                                            }}
+                                        />
+                                        {t("login.useFIDO2")}
+                                    </>
+                                )}
+                                {useAuthn && (
+                                    <>
+                                        <VpnKey
+                                            style={{
+                                                marginRight: 8,
+                                            }}
+                                        />
+                                        {t("login.usePassword")}
+                                    </>
+                                )}
+                            </Button>
+                        </div>
+                    )}
+                </>
+            )}
+            {twoFA && (
+                <Paper className={classes.paper}>
+                    <Avatar className={classes.avatar}>
+                        <VpnIcon />
+                    </Avatar>
+                    <Typography component="h1" variant="h5">
+                        {t("login.2FA")}
+                    </Typography>
+                    <form className={classes.form} onSubmit={twoFALogin}>
+                        <FormControl margin="normal" required fullWidth>
+                            <TextField
+                                label={t("login.input2FACode")}
+                                variant={"outlined"}
+                                inputProps={{
+                                    id: "code",
+                                    type: "number",
+                                    name: "code",
+                                }}
+                                onChange={(event) =>
+                                    setFACode(event.target.value)
+                                }
+                                autoComplete
+                                value={faCode}
+                                autoFocus
+                            />
+                        </FormControl>
+                        <Button
+                            type="submit"
+                            fullWidth
+                            variant="contained"
+                            color="primary"
+                            disabled={loading}
+                            className={classes.submit}
+                        >
+                            {t("login.continue")}
+                        </Button>{" "}
+                    </form>{" "}
+                    <Divider />
+                </Paper>
+            )}
+        </div>
+    );
+}
+
+export default LoginForm;
diff --git a/src/component/Login/QQ.js b/src/component/Login/QQ.js
new file mode 100644
index 0000000..25dcae7
--- /dev/null
+++ b/src/component/Login/QQ.js
@@ -0,0 +1,82 @@
+import React, { useCallback, useEffect, useState } from "react";
+import { useDispatch } from "react-redux";
+import Notice from "../Share/NotFound";
+import { useHistory, useLocation } from "react-router";
+import API from "../../middleware/Api";
+import Auth from "../../middleware/Auth";
+import {
+    applyThemes,
+    setSessionStatus,
+    toggleSnackbar,
+} from "../../redux/explorer";
+import { useTranslation } from "react-i18next";
+
+function useQuery() {
+    return new URLSearchParams(useLocation().search);
+}
+
+export default function QQCallback() {
+    const { t } = useTranslation();
+    const query = useQuery();
+    const location = useLocation();
+    const history = useHistory();
+    const dispatch = useDispatch();
+    const ToggleSnackbar = useCallback(
+        (vertical, horizontal, msg, color) =>
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color)),
+        [dispatch]
+    );
+    const ApplyThemes = useCallback((theme) => dispatch(applyThemes(theme)), [
+        dispatch,
+    ]);
+    const SetSessionStatus = useCallback(
+        (status) => dispatch(setSessionStatus(status)),
+        [dispatch]
+    );
+
+    const [msg, setMsg] = useState("");
+
+    const afterLogin = (data) => {
+        Auth.authenticate(data);
+
+        // 设置用户主题色
+        if (data["preferred_theme"] !== "") {
+            ApplyThemes(data["preferred_theme"]);
+        }
+
+        // 设置登录状态
+        SetSessionStatus(true);
+
+        history.push("/home");
+        ToggleSnackbar("top", "right", t("login.success"), "success");
+
+        localStorage.removeItem("siteConfigCache");
+    };
+
+    useEffect(() => {
+        if (query.get("error_description")) {
+            setMsg(query.get("error_description"));
+            return;
+        }
+        if (query.get("code") === null) {
+            return;
+        }
+        API.post("/callback/qq", {
+            code: query.get("code"),
+            state: query.get("state"),
+        })
+            .then((response) => {
+                if (response.rawData.code === 203) {
+                    afterLogin(response.data);
+                } else {
+                    history.push(response.data);
+                }
+            })
+            .catch((error) => {
+                setMsg(error.message);
+            });
+        // eslint-disable-next-line
+    }, [location]);
+
+    return <>{msg !== "" && <Notice msg={msg} />}</>;
+}
diff --git a/src/component/Login/ReCaptcha.js b/src/component/Login/ReCaptcha.js
new file mode 100644
index 0000000..b6c6f83
--- /dev/null
+++ b/src/component/Login/ReCaptcha.js
@@ -0,0 +1,15 @@
+import ReCAPTCHA from "./ReCaptchaWrapper";
+import makeAsyncScriptLoader from "react-async-script";
+
+const callbackName = "onloadcallback";
+const globalName = "grecaptcha";
+
+function getURL() {
+    const hostname = "recaptcha.net";
+    return `https://${hostname}/recaptcha/api.js?onload=${callbackName}&render=explicit`;
+}
+
+export default makeAsyncScriptLoader(getURL, {
+    callbackName,
+    globalName,
+})(ReCAPTCHA);
diff --git a/src/component/Login/ReCaptchaWrapper.js b/src/component/Login/ReCaptchaWrapper.js
new file mode 100644
index 0000000..7fc46c3
--- /dev/null
+++ b/src/component/Login/ReCaptchaWrapper.js
@@ -0,0 +1,173 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+export default class ReCAPTCHA extends React.Component {
+    constructor() {
+        super();
+        this.handleExpired = this.handleExpired.bind(this);
+        this.handleErrored = this.handleErrored.bind(this);
+        this.handleChange = this.handleChange.bind(this);
+        this.handleRecaptchaRef = this.handleRecaptchaRef.bind(this);
+    }
+
+    getValue() {
+        if (this.props.grecaptcha && this._widgetId !== undefined) {
+            return this.props.grecaptcha.getResponse(this._widgetId);
+        }
+        return null;
+    }
+
+    getWidgetId() {
+        if (this.props.grecaptcha && this._widgetId !== undefined) {
+            return this._widgetId;
+        }
+        return null;
+    }
+
+    execute() {
+        const { grecaptcha } = this.props;
+
+        if (grecaptcha && this._widgetId !== undefined) {
+            return grecaptcha.execute(this._widgetId);
+        } else {
+            this._executeRequested = true;
+        }
+    }
+
+    reset() {
+        if (this.props.grecaptcha && this._widgetId !== undefined) {
+            this.props.grecaptcha.reset(this._widgetId);
+        }
+    }
+
+    handleExpired() {
+        if (this.props.onExpired) {
+            this.props.onExpired();
+        } else {
+            this.handleChange(null);
+        }
+    }
+
+    handleErrored() {
+        if (this.props.onErrored) this.props.onErrored();
+    }
+
+    handleChange(token) {
+        if (this.props.onChange) this.props.onChange(token);
+    }
+
+    explicitRender() {
+        if (
+            this.props.grecaptcha &&
+            this.props.grecaptcha.render &&
+            this._widgetId === undefined
+        ) {
+            const wrapper = document.createElement("div");
+            this._widgetId = this.props.grecaptcha.render(wrapper, {
+                sitekey: this.props.sitekey,
+                callback: this.handleChange,
+                theme: this.props.theme,
+                type: this.props.type,
+                tabindex: this.props.tabindex,
+                "expired-callback": this.handleExpired,
+                "error-callback": this.handleErrored,
+                size: this.props.size,
+                stoken: this.props.stoken,
+                hl: this.props.hl,
+                badge: this.props.badge,
+            });
+            this.captcha.appendChild(wrapper);
+        }
+        if (
+            this._executeRequested &&
+            this.props.grecaptcha &&
+            this._widgetId !== undefined
+        ) {
+            this._executeRequested = false;
+            this.execute();
+        }
+    }
+
+    componentDidMount() {
+        this.explicitRender();
+    }
+
+    componentDidUpdate() {
+        this.explicitRender();
+    }
+
+    componentWillUnmount() {
+        if (this._widgetId !== undefined) {
+            this.delayOfCaptchaIframeRemoving();
+            this.reset();
+        }
+    }
+
+    delayOfCaptchaIframeRemoving() {
+        const temporaryNode = document.createElement("div");
+        document.body.appendChild(temporaryNode);
+        temporaryNode.style.display = "none";
+
+        // move of the recaptcha to a temporary node
+        while (this.captcha.firstChild) {
+            temporaryNode.appendChild(this.captcha.firstChild);
+        }
+
+        // delete the temporary node after reset will be done
+        setTimeout(() => {
+            document.body.removeChild(temporaryNode);
+        }, 5000);
+    }
+
+    handleRecaptchaRef(elem) {
+        this.captcha = elem;
+    }
+
+    render() {
+        // consume properties owned by the reCATPCHA, pass the rest to the div so the user can style it.
+        /* eslint-disable no-unused-vars */
+        /* eslint-disable @typescript-eslint/no-unused-vars */
+        const {
+            sitekey,
+            onChange,
+            theme,
+            type,
+            tabindex,
+            onExpired,
+            onErrored,
+            size,
+            stoken,
+            grecaptcha,
+            badge,
+            hl,
+            ...childProps
+        } = this.props;
+        /* eslint-enable no-unused-vars */
+        return <div {...childProps} ref={this.handleRecaptchaRef} />;
+    }
+}
+
+ReCAPTCHA.displayName = "ReCAPTCHA";
+ReCAPTCHA.propTypes = {
+    sitekey: PropTypes.string.isRequired,
+    onChange: PropTypes.func,
+    grecaptcha: PropTypes.object,
+    theme: PropTypes.oneOf(["dark", "light"]),
+    type: PropTypes.oneOf(["image", "audio"]),
+    tabindex: PropTypes.number,
+    onExpired: PropTypes.func,
+    onErrored: PropTypes.func,
+    size: PropTypes.oneOf(["compact", "normal", "invisible"]),
+    stoken: PropTypes.string,
+    hl: PropTypes.string,
+    badge: PropTypes.oneOf(["bottomright", "bottomleft", "inline"]),
+};
+ReCAPTCHA.defaultProps = {
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    onChange: () => {},
+    theme: "light",
+    type: "image",
+    tabindex: 0,
+    size: "normal",
+    badge: "bottomright",
+};
diff --git a/src/component/Login/Register.js b/src/component/Login/Register.js
new file mode 100644
index 0000000..4206930
--- /dev/null
+++ b/src/component/Login/Register.js
@@ -0,0 +1,294 @@
+import React, { useCallback, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import RegIcon from "@material-ui/icons/AssignmentIndOutlined";
+import {
+    Avatar,
+    Button,
+    Divider,
+    FormControl,
+    Input,
+    InputLabel,
+    Link,
+    makeStyles,
+    Paper,
+    TextField,
+    Typography,
+} from "@material-ui/core";
+import { Link as RouterLink, useHistory } from "react-router-dom";
+import API from "../../middleware/Api";
+import EmailIcon from "@material-ui/icons/EmailOutlined";
+import { useCaptcha } from "../../hooks/useCaptcha";
+import { toggleSnackbar } from "../../redux/explorer";
+import { useTranslation } from "react-i18next";
+import InputAdornment from "@material-ui/core/InputAdornment";
+import { EmailOutlined, VpnKeyOutlined } from "@material-ui/icons";
+import { useTheme } from "@material-ui/core/styles";
+import useMediaQuery from "@material-ui/core/useMediaQuery";
+
+const useStyles = makeStyles((theme) => ({
+    layout: {
+        width: "auto",
+        marginTop: "110px",
+        marginLeft: theme.spacing(3),
+        marginRight: theme.spacing(3),
+        [theme.breakpoints.up("sm")]: {
+            width: 400,
+            marginLeft: "auto",
+            marginRight: "auto",
+        },
+        marginBottom: 110,
+    },
+    paper: {
+        marginTop: theme.spacing(8),
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        padding: `${theme.spacing(2)}px ${theme.spacing(3)}px ${theme.spacing(
+            3
+        )}px`,
+    },
+    avatar: {
+        margin: theme.spacing(1),
+        backgroundColor: theme.palette.secondary.main,
+    },
+    form: {
+        width: "100%", // Fix IE 11 issue.
+        marginTop: theme.spacing(1),
+    },
+    submit: {
+        marginTop: theme.spacing(3),
+    },
+    link: {
+        marginTop: "20px",
+        display: "flex",
+        width: "100%",
+        justifyContent: "space-between",
+    },
+    buttonContainer: {
+        display: "flex",
+    },
+    authnLink: {
+        textAlign: "center",
+        marginTop: 16,
+    },
+    avatarSuccess: {
+        margin: theme.spacing(1),
+        backgroundColor: theme.palette.primary.main,
+    },
+}));
+
+function Register() {
+    const { t } = useTranslation();
+
+    const [input, setInput] = useState({
+        email: "",
+        password: "",
+        password_repeat: "",
+    });
+    const [loading, setLoading] = useState(false);
+    const [emailActive, setEmailActive] = useState(false);
+
+    const title = useSelector((state) => state.siteConfig.title);
+    const regCaptcha = useSelector((state) => state.siteConfig.regCaptcha);
+
+    const dispatch = useDispatch();
+    const ToggleSnackbar = useCallback(
+        (vertical, horizontal, msg, color) =>
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color)),
+        [dispatch]
+    );
+    const history = useHistory();
+    const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
+
+    const handleInputChange = (name) => (e) => {
+        setInput({
+            ...input,
+            [name]: e.target.value,
+        });
+    };
+
+    const {
+        captchaLoading,
+        isValidate,
+        validate,
+        CaptchaRender,
+        captchaRefreshRef,
+        captchaParamsRef,
+    } = useCaptcha();
+    const classes = useStyles();
+
+    const register = (e) => {
+        e.preventDefault();
+
+        if (input.password !== input.password_repeat) {
+            ToggleSnackbar(
+                "top",
+                "right",
+                t("login.passwordNotMatch"),
+                "warning"
+            );
+            return;
+        }
+
+        setLoading(true);
+        if (!isValidate.current.isValidate && regCaptcha) {
+            validate(() => register(e), setLoading);
+            return;
+        }
+        API.post("/user", {
+            userName: input.email,
+            Password: input.password,
+            ...captchaParamsRef.current,
+        })
+            .then((response) => {
+                setLoading(false);
+                if (response.rawData.code === 203) {
+                    setEmailActive(true);
+                } else {
+                    history.push("/login?username=" + input.email);
+                    ToggleSnackbar(
+                        "top",
+                        "right",
+                        t("login.signUpSuccess"),
+                        "success"
+                    );
+                }
+            })
+            .catch((error) => {
+                setLoading(false);
+                ToggleSnackbar("top", "right", error.message, "warning");
+                captchaRefreshRef.current();
+            });
+    };
+
+    return (
+        <div className={classes.layout}>
+            <>
+                {!emailActive && (
+                    <Paper className={classes.paper}>
+                        <Avatar className={classes.avatar}>
+                            <RegIcon />
+                        </Avatar>
+                        <Typography component="h1" variant="h5">
+                            {t("login.sinUpTitle", { title })}
+                        </Typography>
+
+                        <form className={classes.form} onSubmit={register}>
+                            <FormControl margin="normal" required fullWidth>
+                                <TextField
+                                    variant={"outlined"}
+                                    label={t("login.email")}
+                                    inputProps={{
+                                        name: "email",
+                                        type: "email",
+                                        id: "email",
+                                    }}
+                                    InputProps={{
+                                        startAdornment: !isMobile && (
+                                            <InputAdornment position="start">
+                                                <EmailOutlined />
+                                            </InputAdornment>
+                                        ),
+                                    }}
+                                    onChange={handleInputChange("email")}
+                                    autoComplete
+                                    value={input.email}
+                                    autoFocus
+                                />
+                            </FormControl>
+                            <FormControl margin="normal" required fullWidth>
+                                <TextField
+                                    variant={"outlined"}
+                                    label={t("login.password")}
+                                    inputProps={{
+                                        name: "password",
+                                        type: "password",
+                                        id: "password",
+                                    }}
+                                    InputProps={{
+                                        startAdornment: !isMobile && (
+                                            <InputAdornment position="start">
+                                                <VpnKeyOutlined />
+                                            </InputAdornment>
+                                        ),
+                                    }}
+                                    onChange={handleInputChange("password")}
+                                    value={input.password}
+                                    autoComplete
+                                />
+                            </FormControl>
+                            <FormControl margin="normal" required fullWidth>
+                                <TextField
+                                    label={t("login.repeatPassword")}
+                                    variant={"outlined"}
+                                    inputProps={{
+                                        name: "pwdRepeat",
+                                        type: "password",
+                                        id: "pwdRepeat",
+                                    }}
+                                    onChange={handleInputChange(
+                                        "password_repeat"
+                                    )}
+                                    InputProps={{
+                                        startAdornment: !isMobile && (
+                                            <InputAdornment position="start">
+                                                <VpnKeyOutlined />
+                                            </InputAdornment>
+                                        ),
+                                    }}
+                                    value={input.password_repeat}
+                                    autoComplete
+                                />
+                            </FormControl>
+                            {regCaptcha && <CaptchaRender />}
+
+                            <Button
+                                type="submit"
+                                fullWidth
+                                variant="contained"
+                                color="primary"
+                                disabled={
+                                    loading ||
+                                    (regCaptcha ? captchaLoading : false)
+                                }
+                                className={classes.submit}
+                            >
+                                {t("login.signUp")}
+                            </Button>
+                        </form>
+
+                        <Divider />
+                        <div className={classes.link}>
+                            <div>
+                                <Link component={RouterLink} to={"/login"}>
+                                    {t("login.backToSingIn")}
+                                </Link>
+                            </div>
+                            <div>
+                                <Link component={RouterLink} to={"/forget"}>
+                                    {t("login.forgetPassword")}
+                                </Link>
+                            </div>
+                        </div>
+                    </Paper>
+                )}
+                {emailActive && (
+                    <Paper className={classes.paper}>
+                        <Avatar className={classes.avatarSuccess}>
+                            <EmailIcon />
+                        </Avatar>
+                        <Typography component="h1" variant="h5">
+                            {t("login.activateTitle")}
+                        </Typography>
+                        <Typography style={{ marginTop: "10px" }}>
+                            {t("login.activateDescription")}
+                        </Typography>
+                    </Paper>
+                )}
+            </>
+        </div>
+    );
+}
+
+export default Register;
diff --git a/src/component/Login/Reset.js b/src/component/Login/Reset.js
new file mode 100644
index 0000000..07aa8cf
--- /dev/null
+++ b/src/component/Login/Reset.js
@@ -0,0 +1,196 @@
+import React, { useCallback, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import {
+    Avatar,
+    Button,
+    Divider,
+    FormControl,
+    Input,
+    InputLabel,
+    Link,
+    makeStyles,
+    Paper,
+    TextField,
+    Typography,
+} from "@material-ui/core";
+import API from "../../middleware/Api";
+import KeyIcon from "@material-ui/icons/VpnKeyOutlined";
+import { useCaptcha } from "../../hooks/useCaptcha";
+import { toggleSnackbar } from "../../redux/explorer";
+import { useTranslation } from "react-i18next";
+import { Link as RouterLink } from "react-router-dom";
+import InputAdornment from "@material-ui/core/InputAdornment";
+import { EmailOutlined } from "@material-ui/icons";
+import { useTheme } from "@material-ui/core/styles";
+import useMediaQuery from "@material-ui/core/useMediaQuery";
+
+const useStyles = makeStyles((theme) => ({
+    layout: {
+        width: "auto",
+        marginTop: "110px",
+        marginLeft: theme.spacing(3),
+        marginRight: theme.spacing(3),
+        [theme.breakpoints.up("sm")]: {
+            width: 400,
+            marginLeft: "auto",
+            marginRight: "auto",
+        },
+        marginBottom: 110,
+    },
+    paper: {
+        marginTop: theme.spacing(8),
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        padding: `${theme.spacing(2)}px ${theme.spacing(3)}px ${theme.spacing(
+            3
+        )}px`,
+    },
+    avatar: {
+        margin: theme.spacing(1),
+        backgroundColor: theme.palette.secondary.main,
+    },
+    submit: {
+        marginTop: theme.spacing(3),
+    },
+    link: {
+        marginTop: "20px",
+        display: "flex",
+        width: "100%",
+        justifyContent: "space-between",
+    },
+}));
+
+function Reset() {
+    const { t } = useTranslation();
+
+    const [input, setInput] = useState({
+        email: "",
+    });
+    const [loading, setLoading] = useState(false);
+    const forgetCaptcha = useSelector(
+        (state) => state.siteConfig.forgetCaptcha
+    );
+    const registerEnabled = useSelector(
+        (state) => state.siteConfig.registerEnabled
+    );
+    const dispatch = useDispatch();
+    const ToggleSnackbar = useCallback(
+        (vertical, horizontal, msg, color) =>
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color)),
+        [dispatch]
+    );
+    const handleInputChange = (name) => (e) => {
+        setInput({
+            ...input,
+            [name]: e.target.value,
+        });
+    };
+
+    const {
+        captchaLoading,
+        isValidate,
+        validate,
+        CaptchaRender,
+        captchaRefreshRef,
+        captchaParamsRef,
+    } = useCaptcha();
+    const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
+
+    const submit = (e) => {
+        e.preventDefault();
+        setLoading(true);
+        if (!isValidate.current.isValidate && forgetCaptcha) {
+            validate(() => submit(e), setLoading);
+            return;
+        }
+        API.post("/user/reset", {
+            userName: input.email,
+            ...captchaParamsRef.current,
+        })
+            .then(() => {
+                setLoading(false);
+                ToggleSnackbar(
+                    "top",
+                    "right",
+                    t("login.resetEmailSent"),
+                    "success"
+                );
+            })
+            .catch((error) => {
+                setLoading(false);
+                ToggleSnackbar("top", "right", error.message, "warning");
+                captchaRefreshRef.current();
+            });
+    };
+
+    const classes = useStyles();
+
+    return (
+        <div className={classes.layout}>
+            <Paper className={classes.paper}>
+                <Avatar className={classes.avatar}>
+                    <KeyIcon />
+                </Avatar>
+                <Typography component="h1" variant="h5">
+                    {t("login.findMyPassword")}
+                </Typography>
+                <form className={classes.form} onSubmit={submit}>
+                    <FormControl margin="normal" required fullWidth>
+                        <TextField
+                            variant={"outlined"}
+                            label={t("login.email")}
+                            inputProps={{
+                                name: "email",
+                                id: "email",
+                                type: "email",
+                            }}
+                            InputProps={{
+                                startAdornment: !isMobile && (
+                                    <InputAdornment position="start">
+                                        <EmailOutlined />
+                                    </InputAdornment>
+                                ),
+                            }}
+                            onChange={handleInputChange("email")}
+                            autoComplete
+                            value={input.email}
+                            autoFocus
+                        />
+                    </FormControl>
+                    {forgetCaptcha && <CaptchaRender />}
+                    <Button
+                        type="submit"
+                        fullWidth
+                        variant="contained"
+                        color="primary"
+                        disabled={
+                            loading || (forgetCaptcha ? captchaLoading : false)
+                        }
+                        className={classes.submit}
+                    >
+                        {t("login.sendMeAnEmail")}
+                    </Button>{" "}
+                </form>{" "}
+                <Divider />
+                <div className={classes.link}>
+                    <div>
+                        <Link component={RouterLink} to={"/login"}>
+                            {t("login.backToSingIn")}
+                        </Link>
+                    </div>
+                    <div>
+                        {registerEnabled && (
+                            <Link component={RouterLink} to={"/signup"}>
+                                {t("login.signUpAccount")}
+                            </Link>
+                        )}
+                    </div>
+                </div>
+            </Paper>
+        </div>
+    );
+}
+
+export default Reset;
diff --git a/src/component/Login/ResetForm.js b/src/component/Login/ResetForm.js
new file mode 100644
index 0000000..b3d70f6
--- /dev/null
+++ b/src/component/Login/ResetForm.js
@@ -0,0 +1,213 @@
+import React, { useCallback, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import {
+    Avatar,
+    Button,
+    Divider,
+    FormControl,
+    Link,
+    makeStyles,
+    Paper,
+    TextField,
+    Typography,
+} from "@material-ui/core";
+import { Link as RouterLink, useHistory } from "react-router-dom";
+import API from "../../middleware/Api";
+import { useLocation } from "react-router";
+import KeyIcon from "@material-ui/icons/VpnKeyOutlined";
+import { toggleSnackbar } from "../../redux/explorer";
+import { useTranslation } from "react-i18next";
+import InputAdornment from "@material-ui/core/InputAdornment";
+import { VpnKeyOutlined } from "@material-ui/icons";
+import { useTheme } from "@material-ui/core/styles";
+import useMediaQuery from "@material-ui/core/useMediaQuery";
+
+const useStyles = makeStyles((theme) => ({
+    layout: {
+        width: "auto",
+        marginTop: "110px",
+        marginLeft: theme.spacing(3),
+        marginRight: theme.spacing(3),
+        [theme.breakpoints.up("sm")]: {
+            width: 400,
+            marginLeft: "auto",
+            marginRight: "auto",
+        },
+        marginBottom: 110,
+    },
+    paper: {
+        marginTop: theme.spacing(8),
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        padding: `${theme.spacing(2)}px ${theme.spacing(3)}px ${theme.spacing(
+            3
+        )}px`,
+    },
+    avatar: {
+        margin: theme.spacing(1),
+        backgroundColor: theme.palette.secondary.main,
+    },
+    submit: {
+        marginTop: theme.spacing(3),
+    },
+    link: {
+        marginTop: "20px",
+        display: "flex",
+        width: "100%",
+        justifyContent: "space-between",
+    },
+}));
+
+function useQuery() {
+    return new URLSearchParams(useLocation().search);
+}
+
+function ResetForm() {
+    const { t } = useTranslation();
+    const query = useQuery();
+    const [input, setInput] = useState({
+        password: "",
+        password_repeat: "",
+    });
+    const [loading, setLoading] = useState(false);
+    const registerEnabled = useSelector(
+        (state) => state.siteConfig.registerEnabled
+    );
+    const handleInputChange = (name) => (e) => {
+        setInput({
+            ...input,
+            [name]: e.target.value,
+        });
+    };
+    const dispatch = useDispatch();
+    const ToggleSnackbar = useCallback(
+        (vertical, horizontal, msg, color) =>
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color)),
+        [dispatch]
+    );
+    const history = useHistory();
+    const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
+
+    const submit = (e) => {
+        e.preventDefault();
+        if (input.password !== input.password_repeat) {
+            ToggleSnackbar(
+                "top",
+                "right",
+                t("login.passwordNotMatch"),
+                "warning"
+            );
+            return;
+        }
+        setLoading(true);
+        API.patch("/user/reset", {
+            secret: query.get("sign"),
+            id: query.get("id"),
+            Password: input.password,
+        })
+            .then(() => {
+                setLoading(false);
+                history.push("/login");
+                ToggleSnackbar(
+                    "top",
+                    "right",
+                    t("login.passwordReset"),
+                    "success"
+                );
+            })
+            .catch((error) => {
+                setLoading(false);
+                ToggleSnackbar("top", "right", error.message, "warning");
+            });
+    };
+
+    const classes = useStyles();
+
+    return (
+        <div className={classes.layout}>
+            <Paper className={classes.paper}>
+                <Avatar className={classes.avatar}>
+                    <KeyIcon />
+                </Avatar>
+                <Typography component="h1" variant="h5">
+                    {t("login.findMyPassword")}
+                </Typography>
+                <form className={classes.form} onSubmit={submit}>
+                    <FormControl margin="normal" required fullWidth>
+                        <TextField
+                            variant={"outlined"}
+                            label={t("login.newPassword")}
+                            inputProps={{
+                                type: "password",
+                                id: "pwd",
+                                name: "pwd",
+                            }}
+                            InputProps={{
+                                startAdornment: !isMobile && (
+                                    <InputAdornment position="start">
+                                        <VpnKeyOutlined />
+                                    </InputAdornment>
+                                ),
+                            }}
+                            onChange={handleInputChange("password")}
+                            autoComplete
+                            value={input.password}
+                            autoFocus
+                        />
+                    </FormControl>
+                    <FormControl margin="normal" required fullWidth>
+                        <TextField
+                            variant={"outlined"}
+                            label={t("login.repeatNewPassword")}
+                            inputProps={{
+                                type: "password",
+                                id: "pwdRepeat",
+                                name: "pwdRepeat",
+                            }}
+                            InputProps={{
+                                startAdornment: !isMobile && (
+                                    <InputAdornment position="start">
+                                        <VpnKeyOutlined />
+                                    </InputAdornment>
+                                ),
+                            }}
+                            onChange={handleInputChange("password_repeat")}
+                            autoComplete
+                            value={input.password_repeat}
+                            autoFocus
+                        />
+                    </FormControl>
+                    <Button
+                        type="submit"
+                        fullWidth
+                        variant="contained"
+                        color="primary"
+                        disabled={loading}
+                        className={classes.submit}
+                    >
+                        {t("login.resetPassword")}
+                    </Button>{" "}
+                </form>{" "}
+                <Divider />
+                <div className={classes.link}>
+                    <div>
+                        <Link component={RouterLink} to={"/login"}>
+                            {t("login.backToSingIn")}
+                        </Link>
+                    </div>
+                    <div>
+                        {registerEnabled && (
+                            <Link component={RouterLink} to={"/signup"}>
+                                {t("login.signUpAccount")}
+                            </Link>
+                        )}
+                    </div>
+                </div>
+            </Paper>
+        </div>
+    );
+}
+
+export default ResetForm;
diff --git a/src/component/Modals/AddTag.js b/src/component/Modals/AddTag.js
new file mode 100644
index 0000000..d454219
--- /dev/null
+++ b/src/component/Modals/AddTag.js
@@ -0,0 +1,411 @@
+import React, { useCallback, useState } from "react";
+import {
+    Button,
+    CircularProgress,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogTitle,
+    makeStyles,
+    useTheme,
+} from "@material-ui/core";
+import PathSelector from "../FileManager/PathSelector";
+import { useDispatch } from "react-redux";
+import API from "../../middleware/Api";
+import AppBar from "@material-ui/core/AppBar";
+import Tabs from "@material-ui/core/Tabs";
+import Tab from "@material-ui/core/Tab";
+import TextField from "@material-ui/core/TextField";
+import Typography from "@material-ui/core/Typography";
+import FormLabel from "@material-ui/core/FormLabel";
+import ToggleButtonGroup from "@material-ui/lab/ToggleButtonGroup";
+import ToggleButton from "@material-ui/lab/ToggleButton";
+import {
+    Circle,
+    CircleOutline,
+    Heart,
+    HeartOutline,
+    Hexagon,
+    HexagonOutline,
+    Hexagram,
+    HexagramOutline,
+    Rhombus,
+    RhombusOutline,
+    Square,
+    SquareOutline,
+    Triangle,
+} from "mdi-material-ui";
+import { toggleSnackbar } from "../../redux/explorer";
+import { Trans, useTranslation } from "react-i18next";
+
+const useStyles = makeStyles((theme) => ({
+    contentFix: {
+        padding: "10px 24px 0px 24px",
+    },
+    wrapper: {
+        margin: theme.spacing(1),
+        position: "relative",
+    },
+    buttonProgress: {
+        color: theme.palette.secondary.light,
+        position: "absolute",
+        top: "50%",
+        left: "50%",
+        marginTop: -12,
+        marginLeft: -12,
+    },
+    content: {
+        padding: 0,
+        marginTop: 0,
+    },
+    marginTop: {
+        marginTop: theme.spacing(2),
+        display: "block",
+    },
+    textField: {
+        marginTop: theme.spacing(1),
+    },
+    scroll: {
+        overflowX: "auto",
+    },
+    dialogContent: {
+        marginTop: theme.spacing(2),
+    },
+    pathSelect: {
+        marginTop: theme.spacing(2),
+        display: "flex",
+    },
+}));
+
+const icons = {
+    Circle: <Circle />,
+    CircleOutline: <CircleOutline />,
+    Heart: <Heart />,
+    HeartOutline: <HeartOutline />,
+    Hexagon: <Hexagon />,
+    HexagonOutline: <HexagonOutline />,
+    Hexagram: <Hexagram />,
+    HexagramOutline: <HexagramOutline />,
+    Rhombus: <Rhombus />,
+    RhombusOutline: <RhombusOutline />,
+    Square: <Square />,
+    SquareOutline: <SquareOutline />,
+    Triangle: <Triangle />,
+};
+
+export default function AddTag(props) {
+    const theme = useTheme();
+    const { t } = useTranslation();
+
+    const [value, setValue] = React.useState(0);
+    const [loading, setLoading] = React.useState(false);
+    const [alignment, setAlignment] = React.useState("Circle");
+    const [color, setColor] = React.useState(theme.palette.text.secondary);
+    const [input, setInput] = React.useState({
+        filename: "",
+        tagName: "",
+        path: "/",
+    });
+    const [pathSelectDialog, setPathSelectDialog] = React.useState(false);
+    const [selectedPath, setSelectedPath] = useState("");
+    // eslint-disable-next-line
+    const [selectedPathName, setSelectedPathName] = useState("");
+    const setMoveTarget = (folder) => {
+        const path =
+            folder.path === "/"
+                ? folder.path + folder.name
+                : folder.path + "/" + folder.name;
+        setSelectedPath(path);
+        setSelectedPathName(folder.name);
+    };
+
+    const handleChange = (event, newValue) => {
+        setValue(newValue);
+    };
+
+    const handleIconChange = (event, newAlignment) => {
+        if (newAlignment) {
+            setAlignment(newAlignment);
+        }
+    };
+
+    const handleColorChange = (event, newAlignment) => {
+        if (newAlignment) {
+            setColor(newAlignment);
+        }
+    };
+
+    const handleInputChange = (name) => (event) => {
+        setInput({
+            ...input,
+            [name]: event.target.value,
+        });
+    };
+
+    const dispatch = useDispatch();
+    const ToggleSnackbar = useCallback(
+        (vertical, horizontal, msg, color) =>
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color)),
+        [dispatch]
+    );
+
+    const submitNewLink = () => {
+        setLoading(true);
+
+        API.post("/tag/link", {
+            path: input.path,
+            name: input.tagName,
+        })
+            .then((response) => {
+                setLoading(false);
+                props.onClose();
+                props.onSuccess({
+                    type: 1,
+                    name: input.tagName,
+                    expression: input.path,
+                    color: theme.palette.text.secondary,
+                    icon: "FolderHeartOutline",
+                    id: response.data,
+                });
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            })
+            .then(() => {
+                setLoading(false);
+            });
+    };
+
+    const submitNewTag = () => {
+        setLoading(true);
+
+        API.post("/tag/filter", {
+            expression: input.filename,
+            name: input.tagName,
+            color: color,
+            icon: alignment,
+        })
+            .then((response) => {
+                setLoading(false);
+                props.onClose();
+                props.onSuccess({
+                    type: 0,
+                    name: input.tagName,
+                    color: color,
+                    icon: alignment,
+                    id: response.data,
+                });
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            })
+            .then(() => {
+                setLoading(false);
+            });
+    };
+    const submit = () => {
+        if (value === 0) {
+            submitNewTag();
+        } else {
+            submitNewLink();
+        }
+    };
+    const selectPath = () => {
+        setInput({
+            ...input,
+            path: selectedPath === "//" ? "/" : selectedPath,
+        });
+        setPathSelectDialog(false);
+    };
+
+    const classes = useStyles();
+
+    return (
+        <Dialog
+            open={props.open}
+            onClose={props.onClose}
+            aria-labelledby="form-dialog-title"
+            fullWidth
+        >
+            <Dialog
+                open={pathSelectDialog}
+                onClose={() => setPathSelectDialog(false)}
+                aria-labelledby="form-dialog-title"
+            >
+                <DialogTitle id="form-dialog-title">
+                    {t("navbar.addTagDialog.selectFolder")}
+                </DialogTitle>
+                <PathSelector
+                    presentPath="/"
+                    selected={[]}
+                    onSelect={setMoveTarget}
+                />
+
+                <DialogActions>
+                    <Button onClick={() => setPathSelectDialog(false)}>
+                        {t("common:cancel")}
+                    </Button>
+                    <Button
+                        onClick={selectPath}
+                        color="primary"
+                        disabled={selectedPath === ""}
+                    >
+                        {t("common:ok")}
+                    </Button>
+                </DialogActions>
+            </Dialog>
+
+            <AppBar position="static">
+                <Tabs
+                    value={value}
+                    onChange={handleChange}
+                    variant="fullWidth"
+                    aria-label="full width tabs example"
+                >
+                    <Tab label={t("navbar.addTagDialog.fileSelector")} />
+                    <Tab label={t("navbar.addTagDialog.folderLink")} />
+                </Tabs>
+            </AppBar>
+            {value === 0 && (
+                <DialogContent className={classes.dialogContent}>
+                    <TextField
+                        label={t("navbar.addTagDialog.tagName")}
+                        id="filled-name"
+                        value={input["tagName"]}
+                        onChange={handleInputChange("tagName")}
+                        fullWidth
+                        className={classes.textField}
+                    />
+                    <TextField
+                        id="filled-name"
+                        label={t("navbar.addTagDialog.matchPattern")}
+                        value={input["filename"]}
+                        onChange={handleInputChange("filename")}
+                        fullWidth
+                        multiline
+                        className={classes.textField}
+                    />
+                    <Typography variant="caption" color={"textSecondary"}>
+                        <Trans i18nKey="navbar.addTagDialog.matchPatternDescription">
+                            {[<code key={0} />, <code key={1} />]}
+                        </Trans>
+                    </Typography>
+                    <FormLabel className={classes.marginTop}>
+                        {t("navbar.addTagDialog.icon")}
+                    </FormLabel>
+                    <div className={classes.scroll}>
+                        <ToggleButtonGroup
+                            size="small"
+                            value={alignment}
+                            exclusive
+                            onChange={handleIconChange}
+                            className={classes.textField}
+                        >
+                            {Object.keys(icons).map((key, index) => (
+                                <ToggleButton key={index} value={key}>
+                                    {icons[key]}
+                                </ToggleButton>
+                            ))}
+                        </ToggleButtonGroup>
+                    </div>
+                    <FormLabel className={classes.marginTop}>
+                        {t("navbar.addTagDialog.color")}
+                    </FormLabel>
+                    <div className={classes.scroll}>
+                        <ToggleButtonGroup
+                            size="small"
+                            value={color}
+                            exclusive
+                            onChange={handleColorChange}
+                            className={classes.textField}
+                        >
+                            {[
+                                theme.palette.text.secondary,
+                                "#f44336",
+                                "#e91e63",
+                                "#9c27b0",
+                                "#673ab7",
+                                "#3f51b5",
+                                "#2196f3",
+                                "#03a9f4",
+                                "#00bcd4",
+                                "#009688",
+                                "#4caf50",
+                                "#cddc39",
+                                "#ffeb3b",
+                                "#ffc107",
+                                "#ff9800",
+                                "#ff5722",
+                                "#795548",
+                                "#9e9e9e",
+                                "#607d8b",
+                            ].map((key, index) => (
+                                <ToggleButton key={index} value={key}>
+                                    <Circle style={{ color: key }} />
+                                </ToggleButton>
+                            ))}
+                        </ToggleButtonGroup>
+                    </div>
+                </DialogContent>
+            )}
+            {value === 1 && (
+                <DialogContent className={classes.dialogContent}>
+                    <TextField
+                        label={t("navbar.addTagDialog.tagName")}
+                        id="filled-name"
+                        value={input["tagName"]}
+                        onChange={handleInputChange("tagName")}
+                        fullWidth
+                        className={classes.textField}
+                    />
+                    <div className={classes.pathSelect}>
+                        <TextField
+                            label={t("navbar.addTagDialog.folderPath")}
+                            id="filled-name"
+                            value={input["path"]}
+                            onChange={handleInputChange("path")}
+                            fullWidth
+                            className={classes.textField}
+                        />
+                        <Button
+                            onClick={() => setPathSelectDialog(true)}
+                            style={{
+                                marginLeft: theme.spacing(1),
+                                alignSelf: "flex-end",
+                            }}
+                            color="primary"
+                            variant="outlined"
+                        >
+                            {t("common:select")}
+                        </Button>
+                    </div>
+                </DialogContent>
+            )}
+            <DialogActions>
+                <Button onClick={props.onClose}>{t("common:cancel")}</Button>
+                <div className={classes.wrapper}>
+                    <Button
+                        onClick={submit}
+                        color="primary"
+                        disabled={
+                            loading ||
+                            (value === 0 &&
+                                (input.filename === "" ||
+                                    input.tagName === "")) ||
+                            (value === 1 &&
+                                (input.tagName === "" || input.path === ""))
+                        }
+                    >
+                        {t("common:ok")}
+                        {loading && (
+                            <CircularProgress
+                                size={24}
+                                className={classes.buttonProgress}
+                            />
+                        )}
+                    </Button>
+                </div>
+            </DialogActions>
+        </Dialog>
+    );
+}
diff --git a/src/component/Modals/BindPhone.js b/src/component/Modals/BindPhone.js
new file mode 100644
index 0000000..89ff226
--- /dev/null
+++ b/src/component/Modals/BindPhone.js
@@ -0,0 +1,128 @@
+import React, { useState, useCallback } from "react";
+import { makeStyles } from "@material-ui/core";
+import {
+    Button,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogTitle,
+    CircularProgress,
+} from "@material-ui/core";
+import { useDispatch } from "react-redux";
+import TextField from "@material-ui/core/TextField";
+import FormControl from "@material-ui/core/FormControl";
+import { useCaptcha } from "../../hooks/useCaptcha";
+import { toggleSnackbar } from "../../redux/explorer";
+
+const useStyles = makeStyles((theme) => ({
+    smsCode: {
+        flexDirection: "row",
+        alignItems: "baseline",
+    },
+    sendButton: {
+        marginLeft: theme.spacing(1),
+    },
+}));
+
+export default function BindPhone(props) {
+    const [phone, setPhone] = useState(props.phone);
+    const [loading, setLoading] = useState(false);
+    const [verifyCode, setVerifyCode] = useState("");
+    const [countdown, setCountdown] = useState(0);
+    const dispatch = useDispatch();
+    const ToggleSnackbar = useCallback(
+        (vertical, horizontal, msg, color) =>
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color)),
+        [dispatch]
+    );
+    let countdownTimer, countdownSecond;
+
+    const {
+        captchaLoading,
+        isValidate,
+        validate,
+        CaptchaRender,
+        captchaRefreshRef,
+        captchaParamsRef,
+    } = useCaptcha();
+
+    const savePhoneInfo = () => {
+        return false;
+    };
+
+    const sendSMS = () => {
+        setCountdown(60);
+        countdownSecond = 60;
+        countdownTimer = setInterval(function () {
+            countdownSecond = countdownSecond - 1;
+            setCountdown(countdownSecond);
+            if (countdownSecond <= 0) {
+                clearInterval(countdownTimer);
+            }
+        }, 1000);
+        return false;
+    };
+
+    const classes = useStyles();
+
+    return (
+        <Dialog
+            open={props.open}
+            onClose={props.onClose}
+            aria-labelledby="form-dialog-title"
+            maxWidth={"xs"}
+        >
+            <DialogTitle id="form-dialog-title">绑定手机</DialogTitle>
+
+            <DialogContent>
+                <FormControl fullWidth>
+                    <TextField
+                        label={"手机号"}
+                        value={phone}
+                        onChange={(e) => setPhone(e.target.value)}
+                    />
+                    <CaptchaRender />
+                </FormControl>
+                <FormControl fullWidth className={classes.smsCode}>
+                    <TextField
+                        fullWidth
+                        label={"短信验证码"}
+                        value={verifyCode}
+                        onChange={(e) => setVerifyCode(e.target.value)}
+                    />
+                    <Button
+                        disabled={countdown > 0 || loading}
+                        fullWidth
+                        onClick={sendSMS}
+                        variant="contained"
+                        className={classes.sendButton}
+                        color="primary"
+                    >
+                        {countdown <= 0
+                            ? "发送短信验证码"
+                            : `重新发送 (${countdown})`}
+                    </Button>
+                </FormControl>
+            </DialogContent>
+
+            <DialogActions>
+                <Button onClick={props.onClose}>取消</Button>
+                <div className={classes.wrapper}>
+                    <Button
+                        color="primary"
+                        disabled={loading}
+                        onClick={() => savePhoneInfo()}
+                    >
+                        确定
+                        {loading && (
+                            <CircularProgress
+                                size={24}
+                                className={classes.buttonProgress}
+                            />
+                        )}
+                    </Button>
+                </div>
+            </DialogActions>
+        </Dialog>
+    );
+}
diff --git a/src/component/Modals/Compress.js b/src/component/Modals/Compress.js
new file mode 100644
index 0000000..3225933
--- /dev/null
+++ b/src/component/Modals/Compress.js
@@ -0,0 +1,154 @@
+import React, { useCallback, useState } from "react";
+import {
+    Button,
+    CircularProgress,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogContentText,
+    DialogTitle,
+    makeStyles,
+} from "@material-ui/core";
+import PathSelector from "../FileManager/PathSelector";
+import { useDispatch } from "react-redux";
+import TextField from "@material-ui/core/TextField";
+import { setModalsLoading, toggleSnackbar } from "../../redux/explorer";
+import { submitCompressTask } from "../../redux/explorer/action";
+import { useTranslation } from "react-i18next";
+
+const useStyles = makeStyles((theme) => ({
+    contentFix: {
+        padding: "10px 24px 0px 24px",
+        backgroundColor: theme.palette.background.default,
+    },
+    wrapper: {
+        margin: theme.spacing(1),
+        position: "relative",
+    },
+    buttonProgress: {
+        color: theme.palette.secondary.light,
+        position: "absolute",
+        top: "50%",
+        left: "50%",
+        marginTop: -12,
+        marginLeft: -12,
+    },
+}));
+
+export default function CompressDialog(props) {
+    const { t } = useTranslation();
+    const [selectedPath, setSelectedPath] = useState("");
+    const [fileName, setFileName] = useState("");
+    // eslint-disable-next-line
+    const [selectedPathName, setSelectedPathName] = useState("");
+
+    const dispatch = useDispatch();
+
+    const ToggleSnackbar = useCallback(
+        (vertical, horizontal, msg, color) =>
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color)),
+        [dispatch]
+    );
+
+    const SetModalsLoading = useCallback(
+        (status) => {
+            dispatch(setModalsLoading(status));
+        },
+        [dispatch]
+    );
+
+    const SubmitCompressTask = useCallback(
+        (name, path) => dispatch(submitCompressTask(name, path)),
+        [dispatch]
+    );
+
+    const setMoveTarget = (folder) => {
+        const path =
+            folder.path === "/"
+                ? folder.path + folder.name
+                : folder.path + "/" + folder.name;
+        setSelectedPath(path);
+        setSelectedPathName(folder.name);
+    };
+
+    const submitMove = (e) => {
+        if (e != null) {
+            e.preventDefault();
+        }
+        SetModalsLoading(true);
+
+        SubmitCompressTask(fileName, selectedPath)
+            .then(() => {
+                props.onClose();
+                ToggleSnackbar(
+                    "top",
+                    "right",
+                    t("modals.taskCreated"),
+                    "success"
+                );
+                SetModalsLoading(false);
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+                SetModalsLoading(false);
+            });
+    };
+
+    const classes = useStyles();
+
+    return (
+        <Dialog
+            open={props.open}
+            onClose={props.onClose}
+            aria-labelledby="form-dialog-title"
+        >
+            <DialogTitle id="form-dialog-title">
+                {t("modals.saveToTitle")}
+            </DialogTitle>
+            <PathSelector
+                presentPath={props.presentPath}
+                selected={props.selected}
+                onSelect={setMoveTarget}
+            />
+
+            {selectedPath !== "" && (
+                <DialogContent className={classes.contentFix}>
+                    <DialogContentText>
+                        <TextField
+                            onChange={(e) => setFileName(e.target.value)}
+                            value={fileName}
+                            fullWidth
+                            autoFocus
+                            id="standard-basic"
+                            label={t("modals.zipFileName")}
+                        />
+                    </DialogContentText>
+                </DialogContent>
+            )}
+            <DialogActions>
+                <Button onClick={props.onClose}>
+                    {t("cancel", { ns: "common" })}
+                </Button>
+                <div className={classes.wrapper}>
+                    <Button
+                        onClick={submitMove}
+                        color="primary"
+                        disabled={
+                            selectedPath === "" ||
+                            fileName === "" ||
+                            props.modalsLoading
+                        }
+                    >
+                        {t("ok", { ns: "common" })}
+                        {props.modalsLoading && (
+                            <CircularProgress
+                                size={24}
+                                className={classes.buttonProgress}
+                            />
+                        )}
+                    </Button>
+                </div>
+            </DialogActions>
+        </Dialog>
+    );
+}
diff --git a/src/component/Modals/ConcurrentOption.js b/src/component/Modals/ConcurrentOption.js
new file mode 100644
index 0000000..7881b8e
--- /dev/null
+++ b/src/component/Modals/ConcurrentOption.js
@@ -0,0 +1,71 @@
+import React, { useState } from "react";
+import {
+    Button,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogTitle,
+    Input,
+    InputLabel,
+    makeStyles,
+} from "@material-ui/core";
+import FormControl from "@material-ui/core/FormControl";
+import Auth from "../../middleware/Auth";
+import { useTranslation } from "react-i18next";
+
+const useStyles = makeStyles((theme) => ({}));
+
+export default function ConcurrentOptionDialog({ open, onClose, onSave }) {
+    const { t } = useTranslation();
+    const [count, setCount] = useState(
+        Auth.GetPreferenceWithDefault("concurrent_limit", "5")
+    );
+    const classes = useStyles();
+
+    return (
+        <Dialog
+            fullWidth
+            maxWidth={"xs"}
+            open={open}
+            onClose={onClose}
+            aria-labelledby="form-dialog-title"
+        >
+            <DialogTitle id="form-dialog-title">
+                {t("uploader.setConcurrent")}
+            </DialogTitle>
+
+            <DialogContent>
+                <FormControl fullWidth>
+                    <InputLabel htmlFor="component-helper">
+                        {t("uploader.concurrentTaskNumber")}
+                    </InputLabel>
+                    <Input
+                        type={"number"}
+                        inputProps={{
+                            min: 1,
+                            step: 1,
+                            max: 20,
+                        }}
+                        value={count}
+                        onChange={(e) => setCount(e.target.value)}
+                    />
+                </FormControl>
+            </DialogContent>
+
+            <DialogActions>
+                <Button onClick={onClose}>
+                    {t("cancel", { ns: "common" })}
+                </Button>
+                <div className={classes.wrapper}>
+                    <Button
+                        color="primary"
+                        disabled={count === ""}
+                        onClick={() => onSave(count)}
+                    >
+                        {t("ok", { ns: "common" })}
+                    </Button>
+                </div>
+            </DialogActions>
+        </Dialog>
+    );
+}
diff --git a/src/component/Modals/Copy.js b/src/component/Modals/Copy.js
new file mode 100644
index 0000000..438569b
--- /dev/null
+++ b/src/component/Modals/Copy.js
@@ -0,0 +1,156 @@
+import React, { useCallback, useState } from "react";
+import {
+    Button,
+    CircularProgress,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogContentText,
+    DialogTitle,
+    makeStyles,
+} from "@material-ui/core";
+import PathSelector from "../FileManager/PathSelector";
+import { useDispatch } from "react-redux";
+import API from "../../middleware/Api";
+import {
+    refreshFileList,
+    setModalsLoading,
+    toggleSnackbar,
+} from "../../redux/explorer";
+import { Trans, useTranslation } from "react-i18next";
+
+const useStyles = makeStyles((theme) => ({
+    contentFix: {
+        padding: "10px 24px 0px 24px",
+    },
+    wrapper: {
+        margin: theme.spacing(1),
+        position: "relative",
+    },
+    buttonProgress: {
+        color: theme.palette.secondary.light,
+        position: "absolute",
+        top: "50%",
+        left: "50%",
+        marginTop: -12,
+        marginLeft: -12,
+    },
+}));
+
+export default function CopyDialog(props) {
+    const { t } = useTranslation();
+    const [selectedPath, setSelectedPath] = useState("");
+    const [selectedPathName, setSelectedPathName] = useState("");
+
+    const dispatch = useDispatch();
+    const ToggleSnackbar = useCallback(
+        (vertical, horizontal, msg, color) =>
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color)),
+        [dispatch]
+    );
+    const SetModalsLoading = useCallback(
+        (status) => {
+            dispatch(setModalsLoading(status));
+        },
+        [dispatch]
+    );
+    const RefreshFileList = useCallback(() => {
+        dispatch(refreshFileList());
+    }, [dispatch]);
+
+    const setMoveTarget = (folder) => {
+        const path =
+            folder.path === "/"
+                ? folder.path + folder.name
+                : folder.path + "/" + folder.name;
+        setSelectedPath(path);
+        setSelectedPathName(folder.name);
+    };
+
+    const submitMove = (e) => {
+        if (e != null) {
+            e.preventDefault();
+        }
+        SetModalsLoading(true);
+        const dirs = [],
+            items = [];
+        // eslint-disable-next-line
+
+        if (props.selected[0].type === "dir") {
+            dirs.push(props.selected[0].id);
+        } else {
+            items.push(props.selected[0].id);
+        }
+
+        API.post("/object/copy", {
+            src_dir: props.selected[0].path,
+            src: {
+                dirs: dirs,
+                items: items,
+            },
+            dst: selectedPath === "//" ? "/" : selectedPath,
+        })
+            .then(() => {
+                props.onClose();
+                RefreshFileList();
+                SetModalsLoading(false);
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+                SetModalsLoading(false);
+            });
+    };
+
+    const classes = useStyles();
+
+    return (
+        <Dialog
+            open={props.open}
+            onClose={props.onClose}
+            aria-labelledby="form-dialog-title"
+        >
+            <DialogTitle id="form-dialog-title">
+                {t("fileManager.copyTo")}
+            </DialogTitle>
+            <PathSelector
+                presentPath={props.presentPath}
+                selected={props.selected}
+                onSelect={setMoveTarget}
+            />
+
+            {selectedPath !== "" && (
+                <DialogContent className={classes.contentFix}>
+                    <DialogContentText>
+                        <Trans
+                            i18nKey={"fileManager.copyToDst"}
+                            values={{
+                                dst: selectedPathName,
+                            }}
+                            components={[<strong key={0} />]}
+                        />
+                    </DialogContentText>
+                </DialogContent>
+            )}
+            <DialogActions>
+                <Button onClick={props.onClose}>
+                    {t("cancel", { ns: "common" })}
+                </Button>
+                <div className={classes.wrapper}>
+                    <Button
+                        onClick={submitMove}
+                        color="primary"
+                        disabled={selectedPath === "" || props.modalsLoading}
+                    >
+                        {t("ok", { ns: "common" })}
+                        {props.modalsLoading && (
+                            <CircularProgress
+                                size={24}
+                                className={classes.buttonProgress}
+                            />
+                        )}
+                    </Button>
+                </div>
+            </DialogActions>
+        </Dialog>
+    );
+}
diff --git a/src/component/Modals/CreateShare.js b/src/component/Modals/CreateShare.js
new file mode 100644
index 0000000..8f16cc8
--- /dev/null
+++ b/src/component/Modals/CreateShare.js
@@ -0,0 +1,656 @@
+import React, { useCallback, useRef } from "react";
+import {
+    Button,
+    Checkbox,
+    CircularProgress,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogTitle,
+    FormControl,
+    Input,
+    makeStyles,
+    TextField,
+} from "@material-ui/core";
+import { useDispatch, useSelector } from "react-redux";
+import API from "../../middleware/Api";
+import List from "@material-ui/core/List";
+import ListItemText from "@material-ui/core/ListItemText";
+import ListItem from "@material-ui/core/ListItem";
+import ListItemIcon from "@material-ui/core/ListItemIcon";
+import LockIcon from "@material-ui/icons/Lock";
+import TimerIcon from "@material-ui/icons/Timer";
+import CasinoIcon from "@material-ui/icons/Casino";
+import AccountBalanceWalletIcon from "@material-ui/icons/AccountBalanceWallet";
+import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
+import Divider from "@material-ui/core/Divider";
+import MuiExpansionPanel from "@material-ui/core/ExpansionPanel";
+import MuiExpansionPanelSummary from "@material-ui/core/ExpansionPanelSummary";
+import MuiExpansionPanelDetails from "@material-ui/core/ExpansionPanelDetails";
+import Typography from "@material-ui/core/Typography";
+import withStyles from "@material-ui/core/styles/withStyles";
+import InputLabel from "@material-ui/core/InputLabel";
+import { Visibility, VisibilityOff } from "@material-ui/icons";
+import IconButton from "@material-ui/core/IconButton";
+import InputAdornment from "@material-ui/core/InputAdornment";
+import OutlinedInput from "@material-ui/core/OutlinedInput";
+import Tooltip from "@material-ui/core/Tooltip";
+import MenuItem from "@material-ui/core/MenuItem";
+import Select from "@material-ui/core/Select";
+import ToggleIcon from "material-ui-toggle-icon";
+import { toggleSnackbar } from "../../redux/explorer";
+import { useTranslation } from "react-i18next";
+
+const useStyles = makeStyles((theme) => ({
+    widthAnimation: {},
+    shareUrl: {
+        minWidth: "400px",
+    },
+    wrapper: {
+        margin: theme.spacing(1),
+        position: "relative",
+    },
+    buttonProgress: {
+        color: theme.palette.secondary.light,
+        position: "absolute",
+        top: "50%",
+        left: "50%",
+    },
+    flexCenter: {
+        alignItems: "center",
+    },
+    noFlex: {
+        display: "block",
+    },
+    scoreCalc: {
+        marginTop: 10,
+    },
+    expireLabel: {
+        whiteSpace: "nowrap",
+    },
+}));
+
+const ExpansionPanel = withStyles({
+    root: {
+        border: "0px solid rgba(0, 0, 0, .125)",
+        boxShadow: "none",
+        "&:not(:last-child)": {
+            borderBottom: 0,
+        },
+        "&:before": {
+            display: "none",
+        },
+        "&$expanded": {
+            margin: "auto",
+        },
+    },
+    expanded: {},
+})(MuiExpansionPanel);
+
+const ExpansionPanelSummary = withStyles({
+    root: {
+        padding: 0,
+        "&$expanded": {},
+    },
+    content: {
+        margin: 0,
+        display: "initial",
+        "&$expanded": {
+            margin: "0 0",
+        },
+    },
+    expanded: {},
+})(MuiExpansionPanelSummary);
+
+const ExpansionPanelDetails = withStyles((theme) => ({
+    root: {
+        padding: 24,
+        backgroundColor: theme.palette.background.default,
+    },
+}))(MuiExpansionPanelDetails);
+
+export default function CreatShare(props) {
+    const { t } = useTranslation();
+    const dispatch = useDispatch();
+    const classes = useStyles();
+
+    const ToggleSnackbar = useCallback(
+        (vertical, horizontal, msg, color) =>
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color)),
+        [dispatch]
+    );
+
+    const scoreEnabled = useSelector((state) => state.siteConfig.score_enabled);
+    const scoreRate = useSelector((state) => state.siteConfig.share_score_rate);
+    const lastSubmit = useRef(null);
+
+    const [expanded, setExpanded] = React.useState(false);
+    const [shareURL, setShareURL] = React.useState("");
+    const [values, setValues] = React.useState({
+        password: "",
+        downloads: 1,
+        expires: 24 * 3600,
+        showPassword: false,
+        score: 0,
+    });
+    const [shareOption, setShareOption] = React.useState({
+        password: false,
+        expire: false,
+        score: false,
+        preview: true,
+    });
+    const [customExpires, setCustomExpires] = React.useState(3600);
+    const [customDownloads, setCustomDownloads] = React.useState(10);
+
+    const handleChange = (prop) => (event) => {
+        // 输入密码
+        if (prop === "password") {
+            if (event.target.value === "") {
+                setShareOption({ ...shareOption, password: false });
+            } else {
+                setShareOption({ ...shareOption, password: true });
+            }
+        }
+
+        // 输入积分
+        if (prop === "score") {
+            if (event.target.value == "0") {
+                setShareOption({ ...shareOption, score: false });
+            } else {
+                setShareOption({ ...shareOption, score: true });
+            }
+        }
+
+        setValues({ ...values, [prop]: event.target.value });
+    };
+
+    const handleClickShowPassword = () => {
+        setValues({ ...values, showPassword: !values.showPassword });
+    };
+
+    const handleMouseDownPassword = (event) => {
+        event.preventDefault();
+    };
+
+    const randomPassword = () => {
+        setShareOption({ ...shareOption, password: true });
+        setValues({
+            ...values,
+            password: Math.random().toString(36).substr(2).slice(2, 8),
+            showPassword: true,
+        });
+    };
+
+    const handleExpand = (panel) => (event, isExpanded) => {
+        setExpanded(isExpanded ? panel : false);
+    };
+
+    const handleCheck = (prop) => () => {
+        if (!shareOption[prop]) {
+            handleExpand(prop)(null, true);
+        }
+        if (prop === "password" && shareOption[prop]) {
+            setValues({
+                ...values,
+                password: "",
+            });
+        }
+        if (prop === "score" && shareOption[prop]) {
+            setValues({
+                ...values,
+                score: 0,
+            });
+        }
+        setShareOption({ ...shareOption, [prop]: !shareOption[prop] });
+    };
+
+    const onClose = () => {
+        props.onClose();
+        setTimeout(() => {
+            setShareURL("");
+        }, 500);
+    };
+
+    const senLink = () => {
+        if (navigator.share) {
+            let text = t("modals.shareLinkShareContent", {
+                name: props.selected[0].name,
+                link: shareURL,
+            });
+            if (lastSubmit.current && lastSubmit.current.password) {
+                text += t("modals.shareLinkPasswordInfo", {
+                    password: lastSubmit.current.password,
+                });
+            }
+            navigator.share({ text });
+        } else if (navigator.clipboard) {
+            navigator.clipboard.writeText(shareURL);
+            ToggleSnackbar("top", "right", t("modals.linkCopied"), "info");
+        }
+    };
+
+    const submitShare = (e) => {
+        e.preventDefault();
+        props.setModalsLoading(true);
+        const submitFormBody = {
+            id: props.selected[0].id,
+            is_dir: props.selected[0].type === "dir",
+            password: values.password,
+            downloads: shareOption.expire
+                ? values.downloads === -1
+                    ? parseInt(customDownloads)
+                    : values.downloads
+                : -1,
+            expire:
+                values.expires === -1
+                    ? parseInt(customExpires)
+                    : values.expires,
+            score: parseInt(values.score),
+            preview: shareOption.preview,
+        };
+        lastSubmit.current = submitFormBody;
+
+        API.post("/share", submitFormBody)
+            .then((response) => {
+                setShareURL(response.data);
+                setValues({
+                    password: "",
+                    downloads: 1,
+                    expires: 24 * 3600,
+                    showPassword: false,
+                    score: 0,
+                });
+                setShareOption({
+                    password: false,
+                    expire: false,
+                    score: false,
+                });
+                props.setModalsLoading(false);
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+                props.setModalsLoading(false);
+            });
+    };
+
+    const handleFocus = (event) => event.target.select();
+
+    return (
+        <Dialog
+            open={props.open}
+            onClose={onClose}
+            aria-labelledby="form-dialog-title"
+            className={classes.widthAnimation}
+            maxWidth="xs"
+            fullWidth
+        >
+            <DialogTitle id="form-dialog-title">
+                {t("modals.createShareLink")}
+            </DialogTitle>
+
+            {shareURL === "" && (
+                <>
+                    <Divider />
+                    <List>
+                        <ExpansionPanel
+                            expanded={expanded === "password"}
+                            onChange={handleExpand("password")}
+                        >
+                            <ExpansionPanelSummary
+                                aria-controls="panel1a-content"
+                                id="panel1a-header"
+                            >
+                                <ListItem button>
+                                    <ListItemIcon>
+                                        <LockIcon />
+                                    </ListItemIcon>
+                                    <ListItemText
+                                        primary={t(
+                                            "modals.usePasswordProtection"
+                                        )}
+                                    />
+                                    <ListItemSecondaryAction>
+                                        <Checkbox
+                                            checked={shareOption.password}
+                                            onChange={handleCheck("password")}
+                                        />
+                                    </ListItemSecondaryAction>
+                                </ListItem>
+                            </ExpansionPanelSummary>
+                            <ExpansionPanelDetails>
+                                <FormControl
+                                    variant="outlined"
+                                    color="secondary"
+                                    fullWidth
+                                >
+                                    <InputLabel htmlFor="filled-adornment-password">
+                                        {t("modals.sharePassword")}
+                                    </InputLabel>
+                                    <OutlinedInput
+                                        fullWidth
+                                        id="outlined-adornment-password"
+                                        type={
+                                            values.showPassword
+                                                ? "text"
+                                                : "password"
+                                        }
+                                        value={values.password}
+                                        onChange={handleChange("password")}
+                                        endAdornment={
+                                            <InputAdornment position="end">
+                                                <Tooltip
+                                                    title={t(
+                                                        "modals.randomlyGenerate"
+                                                    )}
+                                                >
+                                                    <IconButton
+                                                        aria-label="toggle password visibility"
+                                                        onClick={randomPassword}
+                                                        edge="end"
+                                                    >
+                                                        <CasinoIcon />
+                                                    </IconButton>
+                                                </Tooltip>
+                                                <IconButton
+                                                    aria-label="toggle password visibility"
+                                                    onClick={
+                                                        handleClickShowPassword
+                                                    }
+                                                    onMouseDown={
+                                                        handleMouseDownPassword
+                                                    }
+                                                    edge="end"
+                                                >
+                                                    <ToggleIcon
+                                                        on={values.showPassword}
+                                                        onIcon={<Visibility />}
+                                                        offIcon={
+                                                            <VisibilityOff />
+                                                        }
+                                                    />
+                                                </IconButton>
+                                            </InputAdornment>
+                                        }
+                                        labelWidth={70}
+                                    />
+                                </FormControl>
+                            </ExpansionPanelDetails>
+                        </ExpansionPanel>
+                        <ExpansionPanel
+                            expanded={expanded === "expire"}
+                            onChange={handleExpand("expire")}
+                        >
+                            <ExpansionPanelSummary
+                                aria-controls="panel1a-content"
+                                id="panel1a-header"
+                            >
+                                <ListItem button>
+                                    <ListItemIcon>
+                                        <TimerIcon />
+                                    </ListItemIcon>
+                                    <ListItemText
+                                        primary={t(
+                                            "modals.expireAutomatically"
+                                        )}
+                                    />
+                                    <ListItemSecondaryAction>
+                                        <Checkbox
+                                            checked={shareOption.expire}
+                                            onChange={handleCheck("expire")}
+                                        />
+                                    </ListItemSecondaryAction>
+                                </ListItem>
+                            </ExpansionPanelSummary>
+                            <ExpansionPanelDetails
+                                className={classes.flexCenter}
+                            >
+                                <FormControl
+                                    style={{
+                                        marginRight: 10,
+                                    }}
+                                >
+                                    {values.downloads >= 0 && (
+                                        <Select
+                                            labelId="demo-simple-select-label"
+                                            id="demo-simple-select"
+                                            value={values.downloads}
+                                            onChange={handleChange("downloads")}
+                                        >
+                                            {[1, 2, 3, 4, 5, 20, 50, 100].map(
+                                                (v) => (
+                                                    <MenuItem value={v} key={v}>
+                                                        {t(
+                                                            "modals.downloadLimitOptions",
+                                                            { num: v }
+                                                        )}
+                                                    </MenuItem>
+                                                )
+                                            )}
+                                            <MenuItem value={-1}>
+                                                <em>{t("modals.custom")}</em>
+                                            </MenuItem>
+                                        </Select>
+                                    )}
+                                    {values.downloads === -1 && (
+                                        <Input
+                                            id="outlined-basic"
+                                            type="number"
+                                            inputProps={{
+                                                min: 1,
+                                            }}
+                                            value={customDownloads}
+                                            onChange={(e) =>
+                                                setCustomDownloads(
+                                                    e.target.value
+                                                )
+                                            }
+                                            endAdornment={
+                                                <InputAdornment position="start">
+                                                    {t("modals.downloads")}
+                                                </InputAdornment>
+                                            }
+                                        />
+                                    )}
+                                </FormControl>
+                                <Typography className={classes.expireLabel}>
+                                    {t("modals.or")}
+                                </Typography>
+                                <FormControl
+                                    style={{
+                                        marginRight: 10,
+                                        marginLeft: 10,
+                                    }}
+                                >
+                                    {values.expires >= 0 && (
+                                        <Select
+                                            labelId="demo-simple-select-label"
+                                            id="demo-simple-select"
+                                            value={values.expires}
+                                            onChange={handleChange("expires")}
+                                        >
+                                            <MenuItem value={300}>
+                                                {t("modals.5minutes")}
+                                            </MenuItem>
+                                            <MenuItem value={3600}>
+                                                {t("modals.1hour")}
+                                            </MenuItem>
+                                            <MenuItem value={24 * 3600}>
+                                                {t("modals.1day")}
+                                            </MenuItem>
+                                            <MenuItem value={7 * 24 * 3600}>
+                                                {t("modals.7days")}
+                                            </MenuItem>
+                                            <MenuItem value={30 * 24 * 3600}>
+                                                {t("modals.30days")}
+                                            </MenuItem>
+                                            <MenuItem value={-1}>
+                                                <em>{t("modals.custom")}</em>
+                                            </MenuItem>
+                                        </Select>
+                                    )}
+                                    {values.expires === -1 && (
+                                        <Input
+                                            id="outlined-basic"
+                                            type="number"
+                                            inputProps={{
+                                                min: 1,
+                                            }}
+                                            value={customExpires}
+                                            onChange={(e) =>
+                                                setCustomExpires(e.target.value)
+                                            }
+                                            endAdornment={
+                                                <InputAdornment position="start">
+                                                    {t("modals.seconds")}
+                                                </InputAdornment>
+                                            }
+                                        />
+                                    )}
+                                </FormControl>
+                                <Typography className={classes.expireLabel}>
+                                    {t("modals.downloadSuffix")}
+                                </Typography>
+                            </ExpansionPanelDetails>
+                        </ExpansionPanel>
+                        {scoreEnabled && (
+                            <ExpansionPanel
+                                expanded={expanded === "score"}
+                                onChange={handleExpand("score")}
+                            >
+                                <ExpansionPanelSummary
+                                    aria-controls="panel1a-content"
+                                    id="panel1a-header"
+                                >
+                                    <ListItem button>
+                                        <ListItemIcon>
+                                            <AccountBalanceWalletIcon />
+                                        </ListItemIcon>
+                                        <ListItemText
+                                            primary={t("vas.payToDownload")}
+                                        />
+                                        <ListItemSecondaryAction>
+                                            <Checkbox
+                                                checked={shareOption.score}
+                                                onChange={handleCheck("score")}
+                                            />
+                                        </ListItemSecondaryAction>
+                                    </ListItem>
+                                </ExpansionPanelSummary>
+
+                                <ExpansionPanelDetails
+                                    className={classes.noFlex}
+                                >
+                                    <FormControl
+                                        variant="outlined"
+                                        color="secondary"
+                                        fullWidth
+                                    >
+                                        <InputLabel htmlFor="filled-adornment-password">
+                                            {t("vas.creditToBePaid")}
+                                        </InputLabel>
+                                        <OutlinedInput
+                                            fullWidth
+                                            id="outlined-adornment-password"
+                                            type="number"
+                                            inputProps={{ min: 0 }}
+                                            value={values.score}
+                                            onChange={handleChange("score")}
+                                            labelWidth={180}
+                                        />
+                                    </FormControl>
+                                    {values.score !== 0 && scoreRate !== "100" && (
+                                        <Typography
+                                            variant="body2"
+                                            className={classes.scoreCalc}
+                                        >
+                                            {t("vas.creditGainPredict", {
+                                                num: Math.ceil(
+                                                    (values.score * scoreRate) /
+                                                        100
+                                                ),
+                                            })}
+                                        </Typography>
+                                    )}
+                                </ExpansionPanelDetails>
+                            </ExpansionPanel>
+                        )}
+                        <ExpansionPanel
+                            expanded={expanded === "preview"}
+                            onChange={handleExpand("preview")}
+                        >
+                            <ExpansionPanelSummary
+                                aria-controls="panel1a-content"
+                                id="panel1a-header"
+                            >
+                                <ListItem button>
+                                    <ListItemIcon>
+                                        <LockIcon />
+                                    </ListItemIcon>
+                                    <ListItemText
+                                        primary={t("modals.allowPreview")}
+                                    />
+                                    <ListItemSecondaryAction>
+                                        <Checkbox
+                                            checked={shareOption.preview}
+                                            onChange={handleCheck("preview")}
+                                        />
+                                    </ListItemSecondaryAction>
+                                </ListItem>
+                            </ExpansionPanelSummary>
+                            <ExpansionPanelDetails>
+                                <Typography>
+                                    {t("modals.allowPreviewDescription")}
+                                </Typography>
+                            </ExpansionPanelDetails>
+                        </ExpansionPanel>
+                    </List>
+                    <Divider />
+                </>
+            )}
+            {shareURL !== "" && (
+                <DialogContent>
+                    <TextField
+                        onFocus={handleFocus}
+                        autoFocus
+                        inputProps={{ readonly: true }}
+                        label={t("modals.shareLink")}
+                        value={shareURL}
+                        variant="outlined"
+                        fullWidth
+                    />
+                </DialogContent>
+            )}
+
+            <DialogActions>
+                {shareURL !== "" && (
+                    <div className={classes.wrapper}>
+                        <Button onClick={senLink} color="secondary">
+                            {t("modals.sendLink")}
+                        </Button>
+                    </div>
+                )}
+                <Button onClick={onClose}>
+                    {t("close", { ns: "common" })}
+                </Button>
+
+                {shareURL === "" && (
+                    <div className={classes.wrapper}>
+                        <Button
+                            onClick={submitShare}
+                            color="secondary"
+                            disabled={props.modalsLoading}
+                        >
+                            {t("modals.createShareLink")}
+                            {props.modalsLoading && (
+                                <CircularProgress
+                                    size={24}
+                                    className={classes.buttonProgress}
+                                />
+                            )}
+                        </Button>
+                    </div>
+                )}
+            </DialogActions>
+        </Dialog>
+    );
+}
diff --git a/src/component/Modals/CreateWebDAVAccount.js b/src/component/Modals/CreateWebDAVAccount.js
new file mode 100644
index 0000000..a82d136
--- /dev/null
+++ b/src/component/Modals/CreateWebDAVAccount.js
@@ -0,0 +1,155 @@
+import React, { useState } from "react";
+import { Dialog, makeStyles } from "@material-ui/core";
+import DialogTitle from "@material-ui/core/DialogTitle";
+import DialogActions from "@material-ui/core/DialogActions";
+import Button from "@material-ui/core/Button";
+import TextField from "@material-ui/core/TextField";
+import { FolderOpenOutlined, LabelOutlined } from "@material-ui/icons";
+import PathSelector from "../FileManager/PathSelector";
+import { useTranslation } from "react-i18next";
+
+const useStyles = makeStyles((theme) => ({
+    formGroup: {
+        display: "flex",
+        marginTop: theme.spacing(1),
+    },
+    formIcon: {
+        marginTop: 21,
+        marginRight: 19,
+        color: theme.palette.text.secondary,
+    },
+    input: {
+        width: 250,
+    },
+    dialogContent: {
+        paddingTop: 24,
+        paddingRight: 24,
+        paddingBottom: 8,
+        paddingLeft: 24,
+    },
+    button: {
+        marginTop: 8,
+    },
+}));
+
+export default function CreateWebDAVAccount(props) {
+    const { t } = useTranslation();
+    const [value, setValue] = useState({
+        name: "",
+        path: "/",
+    });
+    const [pathSelectDialog, setPathSelectDialog] = React.useState(false);
+    const [selectedPath, setSelectedPath] = useState("");
+    // eslint-disable-next-line
+    const [selectedPathName, setSelectedPathName] = useState("");
+    const classes = useStyles();
+
+    const setMoveTarget = (folder) => {
+        const path =
+            folder.path === "/"
+                ? folder.path + folder.name
+                : folder.path + "/" + folder.name;
+        setSelectedPath(path);
+        setSelectedPathName(folder.name);
+    };
+
+    const handleInputChange = (name) => (e) => {
+        setValue({
+            ...value,
+            [name]: e.target.value,
+        });
+    };
+
+    const selectPath = () => {
+        setValue({
+            ...value,
+            path: selectedPath === "//" ? "/" : selectedPath,
+        });
+        setPathSelectDialog(false);
+    };
+
+    return (
+        <Dialog
+            open={props.open}
+            onClose={props.onClose}
+            aria-labelledby="form-dialog-title"
+        >
+            <Dialog
+                open={pathSelectDialog}
+                onClose={() => setPathSelectDialog(false)}
+                aria-labelledby="form-dialog-title"
+            >
+                <DialogTitle id="form-dialog-title">
+                    {t("navbar.addTagDialog.selectFolder")}
+                </DialogTitle>
+                <PathSelector
+                    presentPath="/"
+                    selected={[]}
+                    onSelect={setMoveTarget}
+                />
+
+                <DialogActions>
+                    <Button onClick={() => setPathSelectDialog(false)}>
+                        {t("cancel", { ns: "common" })}
+                    </Button>
+                    <Button
+                        onClick={selectPath}
+                        color="primary"
+                        disabled={selectedPath === ""}
+                    >
+                        {t("ok", { ns: "common" })}
+                    </Button>
+                </DialogActions>
+            </Dialog>
+            <div className={classes.dialogContent}>
+                <div className={classes.formContainer}>
+                    <div className={classes.formGroup}>
+                        <div className={classes.formIcon}>
+                            <LabelOutlined />
+                        </div>
+
+                        <TextField
+                            className={classes.input}
+                            value={value.name}
+                            onChange={handleInputChange("name")}
+                            label={t("setting.annotation")}
+                        />
+                    </div>
+                    <div className={classes.formGroup}>
+                        <div className={classes.formIcon}>
+                            <FolderOpenOutlined />
+                        </div>
+                        <div>
+                            <TextField
+                                value={value.path}
+                                onChange={handleInputChange("path")}
+                                className={classes.input}
+                                label={t("setting.rootFolder")}
+                            />
+                            <br />
+                            <Button
+                                className={classes.button}
+                                color="primary"
+                                onClick={() => setPathSelectDialog(true)}
+                            >
+                                {t("navbar.addTagDialog.selectFolder")}
+                            </Button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <DialogActions>
+                <Button onClick={props.onClose}>
+                    {t("cancel", { ns: "common" })}
+                </Button>
+                <Button
+                    disabled={value.path === "" || value.name === ""}
+                    color="primary"
+                    onClick={() => props.callback(value)}
+                >
+                    {t("ok", { ns: "common" })}
+                </Button>
+            </DialogActions>
+        </Dialog>
+    );
+}
diff --git a/src/component/Modals/CreateWebDAVMount.js b/src/component/Modals/CreateWebDAVMount.js
new file mode 100644
index 0000000..a6f5466
--- /dev/null
+++ b/src/component/Modals/CreateWebDAVMount.js
@@ -0,0 +1,192 @@
+import React, { useCallback, useEffect, useState } from "react";
+import { Dialog, makeStyles } from "@material-ui/core";
+import API from "../../middleware/Api";
+import { useDispatch } from "react-redux";
+import DialogTitle from "@material-ui/core/DialogTitle";
+import DialogActions from "@material-ui/core/DialogActions";
+import Button from "@material-ui/core/Button";
+import TextField from "@material-ui/core/TextField";
+import FormControl from "@material-ui/core/FormControl";
+import { FolderOpenOutlined, Storage } from "@material-ui/icons";
+import PathSelector from "../FileManager/PathSelector";
+import Select from "@material-ui/core/Select";
+import InputLabel from "@material-ui/core/InputLabel";
+import MenuItem from "@material-ui/core/MenuItem";
+import { toggleSnackbar } from "../../redux/explorer";
+import { useTranslation } from "react-i18next";
+
+const useStyles = makeStyles((theme) => ({
+    formGroup: {
+        display: "flex",
+        marginTop: theme.spacing(1),
+    },
+    formIcon: {
+        marginTop: 21,
+        marginRight: 19,
+        color: theme.palette.text.secondary,
+    },
+    input: {
+        width: 250,
+    },
+    dialogContent: {
+        paddingTop: 24,
+        paddingRight: 24,
+        paddingBottom: 8,
+        paddingLeft: 24,
+    },
+    button: {
+        marginTop: 8,
+    },
+}));
+
+export default function CreateWebDAVMount(props) {
+    const { t } = useTranslation();
+    const [value, setValue] = useState({
+        policy: "",
+        path: "/",
+    });
+    const [policies, setPolicies] = useState([]);
+    const [pathSelectDialog, setPathSelectDialog] = React.useState(false);
+    const [selectedPath, setSelectedPath] = useState("");
+    // eslint-disable-next-line
+    const [selectedPathName, setSelectedPathName] = useState("");
+
+    const classes = useStyles();
+
+    const dispatch = useDispatch();
+    const ToggleSnackbar = useCallback(
+        (vertical, horizontal, msg, color) =>
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color)),
+        [dispatch]
+    );
+
+    const setMoveTarget = (folder) => {
+        const path =
+            folder.path === "/"
+                ? folder.path + folder.name
+                : folder.path + "/" + folder.name;
+        setSelectedPath(path);
+        setSelectedPathName(folder.name);
+    };
+
+    const handleInputChange = (name) => (e) => {
+        setValue({
+            ...value,
+            [name]: e.target.value,
+        });
+    };
+
+    const selectPath = () => {
+        setValue({
+            ...value,
+            path: selectedPath === "//" ? "/" : selectedPath,
+        });
+        setPathSelectDialog(false);
+    };
+
+    useEffect(() => {
+        API.get("/user/setting/policies")
+            .then((response) => {
+                setPolicies(response.data);
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            });
+        // eslint-disable-next-line
+    }, []);
+
+    return (
+        <Dialog
+            open={props.open}
+            onClose={props.onClose}
+            aria-labelledby="form-dialog-title"
+        >
+            <Dialog
+                open={pathSelectDialog}
+                onClose={() => setPathSelectDialog(false)}
+                aria-labelledby="form-dialog-title"
+            >
+                <DialogTitle id="form-dialog-title">
+                    {t("navbar.addTagDialog.selectFolder")}
+                </DialogTitle>
+                <PathSelector
+                    presentPath="/"
+                    selected={[]}
+                    onSelect={setMoveTarget}
+                />
+
+                <DialogActions>
+                    <Button onClick={() => setPathSelectDialog(false)}>
+                        {t("cancel", { ns: "common" })}
+                    </Button>
+                    <Button
+                        onClick={selectPath}
+                        color="primary"
+                        disabled={selectedPath === ""}
+                    >
+                        {t("ok", { ns: "common" })}
+                    </Button>
+                </DialogActions>
+            </Dialog>
+            <div className={classes.dialogContent}>
+                <div className={classes.formContainer}>
+                    <div className={classes.formGroup}>
+                        <div className={classes.formIcon}>
+                            <Storage />
+                        </div>
+                        <FormControl className={classes.formControl}>
+                            <InputLabel id="demo-simple-select-label">
+                                {t("fileManager.storagePolicy")}
+                            </InputLabel>
+                            <Select
+                                className={classes.input}
+                                labelId="demo-simple-select-label"
+                                value={value.policy}
+                                onChange={handleInputChange("policy")}
+                            >
+                                {policies.map((v, k) => (
+                                    <MenuItem key={k} value={v.id}>
+                                        {v.name}
+                                    </MenuItem>
+                                ))}
+                            </Select>
+                        </FormControl>
+                    </div>
+                    <div className={classes.formGroup}>
+                        <div className={classes.formIcon}>
+                            <FolderOpenOutlined />
+                        </div>
+                        <div>
+                            <TextField
+                                value={value.path}
+                                onChange={handleInputChange("path")}
+                                className={classes.input}
+                                label={t("setting.rootFolder")}
+                            />
+                            <br />
+                            <Button
+                                className={classes.button}
+                                color="primary"
+                                onClick={() => setPathSelectDialog(true)}
+                            >
+                                {t("navbar.addTagDialog.selectFolder")}
+                            </Button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <DialogActions>
+                <Button onClick={props.onClose}>
+                    {t("cancel", { ns: "common" })}
+                </Button>
+                <Button
+                    disabled={value.path === "" || value.policy === ""}
+                    color="primary"
+                    onClick={() => props.callback(value)}
+                >
+                    {t("ok", { ns: "common" })}
+                </Button>
+            </DialogActions>
+        </Dialog>
+    );
+}
diff --git a/src/component/Modals/Decompress.js b/src/component/Modals/Decompress.js
new file mode 100644
index 0000000..44ee371
--- /dev/null
+++ b/src/component/Modals/Decompress.js
@@ -0,0 +1,141 @@
+import React, { useCallback, useState } from "react";
+import {
+    Button,
+    CircularProgress,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogContentText,
+    DialogTitle,
+    makeStyles,
+} from "@material-ui/core";
+import PathSelector from "../FileManager/PathSelector";
+import { useDispatch } from "react-redux";
+import { setModalsLoading, toggleSnackbar } from "../../redux/explorer";
+import { submitDecompressTask } from "../../redux/explorer/action";
+import { Trans, useTranslation } from "react-i18next";
+
+const useStyles = makeStyles((theme) => ({
+    contentFix: {
+        padding: "10px 24px 0px 24px",
+    },
+    wrapper: {
+        margin: theme.spacing(1),
+        position: "relative",
+    },
+    buttonProgress: {
+        color: theme.palette.secondary.light,
+        position: "absolute",
+        top: "50%",
+        left: "50%",
+        marginTop: -12,
+        marginLeft: -12,
+    },
+}));
+
+export default function DecompressDialog(props) {
+    const { t } = useTranslation();
+    const [selectedPath, setSelectedPath] = useState("");
+    const [selectedPathName, setSelectedPathName] = useState("");
+
+    const dispatch = useDispatch();
+    const ToggleSnackbar = useCallback(
+        (vertical, horizontal, msg, color) =>
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color)),
+        [dispatch]
+    );
+    const SetModalsLoading = useCallback(
+        (status) => {
+            dispatch(setModalsLoading(status));
+        },
+        [dispatch]
+    );
+    const SubmitDecompressTask = useCallback(
+        (path) => dispatch(submitDecompressTask(path)),
+        [dispatch]
+    );
+
+    const setMoveTarget = (folder) => {
+        const path =
+            folder.path === "/"
+                ? folder.path + folder.name
+                : folder.path + "/" + folder.name;
+        setSelectedPath(path);
+        setSelectedPathName(folder.name);
+    };
+
+    const submitMove = (e) => {
+        if (e != null) {
+            e.preventDefault();
+        }
+        SetModalsLoading(true);
+        SubmitDecompressTask(selectedPath)
+            .then(() => {
+                props.onClose();
+                ToggleSnackbar(
+                    "top",
+                    "right",
+                    t("modals.taskCreated"),
+                    "success"
+                );
+                SetModalsLoading(false);
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+                SetModalsLoading(false);
+            });
+    };
+
+    const classes = useStyles();
+
+    return (
+        <Dialog
+            open={props.open}
+            onClose={props.onClose}
+            aria-labelledby="form-dialog-title"
+        >
+            <DialogTitle id="form-dialog-title">
+                {t("modals.decompressTo")}
+            </DialogTitle>
+            <PathSelector
+                presentPath={props.presentPath}
+                selected={props.selected}
+                onSelect={setMoveTarget}
+            />
+
+            {selectedPath !== "" && (
+                <DialogContent className={classes.contentFix}>
+                    <DialogContentText>
+                        <Trans
+                            i18nKey="modals.decompressToDst"
+                            values={{
+                                name: selectedPathName,
+                            }}
+                            components={[<strong key={0} />]}
+                        />
+                    </DialogContentText>
+                </DialogContent>
+            )}
+            <DialogActions>
+                <Button onClick={props.onClose}>
+                    {t("cancel", { ns: "common" })}
+                </Button>
+                <div className={classes.wrapper}>
+                    <Button
+                        onClick={submitMove}
+                        color="primary"
+                        disabled={selectedPath === "" || props.modalsLoading}
+                    >
+                        {t("ok", { ns: "common" })}
+                        {props.modalsLoading && (
+                            <CircularProgress
+                                size={24}
+                                className={classes.buttonProgress}
+                            />
+                        )}
+                    </Button>
+                </div>
+            </DialogActions>
+        </Dialog>
+    );
+}
diff --git a/src/component/Modals/Delete.js b/src/component/Modals/Delete.js
new file mode 100644
index 0000000..d9f6750
--- /dev/null
+++ b/src/component/Modals/Delete.js
@@ -0,0 +1,173 @@
+import React, { useCallback, useState } from "react";
+import {
+    Button,
+    CircularProgress,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogContentText,
+    DialogTitle,
+    FormControl,
+    makeStyles,
+    Tooltip,
+} from "@material-ui/core";
+import { useDispatch } from "react-redux";
+import { toggleSnackbar } from "../../redux/explorer";
+import { Trans, useTranslation } from "react-i18next";
+import { useTheme } from "@material-ui/core/styles";
+import Auth from "../../middleware/Auth";
+import API from "../../middleware/Api";
+import FormLabel from "@material-ui/core/FormLabel";
+import FormGroup from "@material-ui/core/FormGroup";
+import FormControlLabel from "@material-ui/core/FormControlLabel";
+import Checkbox from "@material-ui/core/Checkbox";
+
+const useStyles = makeStyles((theme) => ({
+    form: {
+        marginTop: theme.spacing(2),
+    },
+}));
+
+export default function Delete(props) {
+    const { t } = useTranslation();
+    const theme = useTheme();
+    const user = Auth.GetUser();
+    const [force, setForce] = useState(false);
+    const [unlink, setUnlink] = useState(false);
+
+    const dispatch = useDispatch();
+    const ToggleSnackbar = useCallback(
+        (vertical, horizontal, msg, color) =>
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color)),
+        [dispatch]
+    );
+
+    const submitRemove = (e) => {
+        e.preventDefault();
+        props.setModalsLoading(true);
+        const dirs = [],
+            items = [];
+        // eslint-disable-next-line
+        props.selected.map((value) => {
+            if (value.type === "dir") {
+                dirs.push(value.id);
+            } else {
+                items.push(value.id);
+            }
+        });
+        API.delete("/object", {
+            data: {
+                items: items,
+                dirs: dirs,
+                force,
+                unlink,
+            },
+        })
+            .then((response) => {
+                if (response.rawData.code === 0) {
+                    props.onClose();
+                    setTimeout(props.refreshFileList, 500);
+                } else {
+                    ToggleSnackbar(
+                        "top",
+                        "right",
+                        response.rawData.msg,
+                        "warning"
+                    );
+                }
+                props.setModalsLoading(false);
+                props.refreshStorage();
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+                props.setModalsLoading(false);
+            });
+    };
+
+    const classes = useStyles();
+
+    return (
+        <Dialog
+            open={props.open}
+            onClose={props.onClose}
+            aria-labelledby="form-dialog-title"
+        >
+            <DialogTitle id="form-dialog-title">
+                {t("modals.deleteTitle")}
+            </DialogTitle>
+
+            <DialogContent>
+                <DialogContentText>
+                    {props.selected.length === 1 && (
+                        <Trans
+                            i18nKey="modals.deleteOneDescription"
+                            values={{
+                                name: props.selected[0].name,
+                            }}
+                            components={[<strong key={0} />]}
+                        />
+                    )}
+                    {props.selected.length > 1 &&
+                        t("modals.deleteMultipleDescription", {
+                            num: props.selected.length,
+                        })}
+                </DialogContentText>
+                {user.group.advanceDelete && (
+                    <FormControl component="fieldset" className={classes.form}>
+                        <FormLabel component="legend">
+                            {t("modals.advanceOptions")}
+                        </FormLabel>
+                        <FormGroup>
+                            <Tooltip title={t("modals.forceDeleteDes")}>
+                                <FormControlLabel
+                                    control={
+                                        <Checkbox
+                                            checked={force}
+                                            onChange={(e) =>
+                                                setForce(e.target.checked)
+                                            }
+                                        />
+                                    }
+                                    label={t("modals.forceDelete")}
+                                />
+                            </Tooltip>
+                            <Tooltip title={t("modals.unlinkOnlyDes")}>
+                                <FormControlLabel
+                                    control={
+                                        <Checkbox
+                                            checked={unlink}
+                                            onChange={(e) =>
+                                                setUnlink(e.target.checked)
+                                            }
+                                        />
+                                    }
+                                    label={t("modals.unlinkOnly")}
+                                />
+                            </Tooltip>
+                        </FormGroup>
+                    </FormControl>
+                )}
+            </DialogContent>
+            <DialogActions>
+                <Button onClick={props.onClose}>
+                    {t("cancel", { ns: "common" })}
+                </Button>
+                <div className={classes.wrapper}>
+                    <Button
+                        onClick={submitRemove}
+                        color="primary"
+                        disabled={props.modalsLoading}
+                    >
+                        {t("ok", { ns: "common" })}
+                        {props.modalsLoading && (
+                            <CircularProgress
+                                size={24}
+                                className={classes.buttonProgress}
+                            />
+                        )}
+                    </Button>
+                </div>
+            </DialogActions>
+        </Dialog>
+    );
+}
diff --git a/src/component/Modals/DirectoryDownload.js b/src/component/Modals/DirectoryDownload.js
new file mode 100644
index 0000000..f301f5f
--- /dev/null
+++ b/src/component/Modals/DirectoryDownload.js
@@ -0,0 +1,118 @@
+import React, { useState, useEffect, useRef } from "react";
+import {
+    Button,
+    CircularProgress,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogTitle,
+    makeStyles,
+    FormControlLabel,
+    Checkbox,
+} from "@material-ui/core";
+import TextField from "@material-ui/core/TextField";
+import { useTranslation } from "react-i18next";
+import { useInterval, usePrevious, useGetState } from "ahooks";
+import { cancelDirectoryDownload } from "../../redux/explorer/action";
+import Auth from "../../middleware/Auth";
+
+const useStyles = makeStyles((theme) => ({
+    contentFix: {
+        padding: "10px 24px 0px 24px",
+        backgroundColor: theme.palette.background.default,
+    },
+    buttonProgress: {
+        color: theme.palette.secondary.light,
+        position: "absolute",
+        top: "50%",
+        left: "50%",
+        marginTop: -12,
+        marginLeft: -12,
+    },
+}));
+
+export default function DirectoryDownloadDialog(props) {
+    const { t } = useTranslation();
+
+    const classes = useStyles();
+
+    const logRef = useRef();
+    const [autoScroll, setAutoScroll] = useState(
+        Auth.GetPreferenceWithDefault("autoScroll", true)
+    );
+    const previousLog = usePrevious(props.log, (prev, next) => true);
+    const [timer, setTimer] = useState(-1);
+
+    useInterval(() => {
+        if (autoScroll && logRef.current && previousLog !== props.log) {
+            logRef.current.scrollIntoView({ behavior: "smooth", block: "end" });
+        }
+    }, timer);
+
+    useEffect(() => {
+        if (props.done) {
+            setTimer(-1);
+        } else if (props.open) {
+            setTimer(1000);
+        }
+    }, [props.done, props.open]);
+
+    return (
+        <Dialog
+            open={props.open}
+            // open
+            onClose={props.onClose}
+            aria-labelledby="form-dialog-title"
+            fullWidth
+        >
+            <DialogTitle id="form-dialog-title">
+                {t("modals.directoryDownloadTitle")}
+            </DialogTitle>
+
+            <DialogContent className={classes.contentFix}>
+                <TextField
+                    value={props.log}
+                    ref={logRef}
+                    multiline
+                    fullWidth
+                    id="standard-basic"
+                />
+            </DialogContent>
+            <DialogActions>
+                <FormControlLabel
+                    control={<Checkbox />}
+                    checked={autoScroll}
+                    onChange={() =>
+                        setAutoScroll((previous) => {
+                            Auth.SetPreference("autoScroll", !previous);
+                            return !previous;
+                        })
+                    }
+                    label={t("modals.directoryDownloadAutoscroll")}
+                />
+                <Button
+                    onClick={
+                        props.done ? props.onClose : cancelDirectoryDownload
+                    }
+                >
+                    {t("cancel", { ns: "common" })}
+                </Button>
+                <div className={classes.wrapper}>
+                    <Button
+                        color="primary"
+                        disabled={!props.done}
+                        onClick={props.onClose}
+                    >
+                        {t("ok", { ns: "common" })}
+                        {!props.done && (
+                            <CircularProgress
+                                size={24}
+                                className={classes.buttonProgress}
+                            />
+                        )}
+                    </Button>
+                </div>
+            </DialogActions>
+        </Dialog>
+    );
+}
diff --git a/src/component/Modals/Loading.js b/src/component/Modals/Loading.js
new file mode 100644
index 0000000..042a898
--- /dev/null
+++ b/src/component/Modals/Loading.js
@@ -0,0 +1,39 @@
+import React from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import CircularProgress from "@material-ui/core/CircularProgress";
+import DialogContent from "@material-ui/core/DialogContent";
+import Dialog from "@material-ui/core/Dialog";
+import DialogContentText from "@material-ui/core/DialogContentText";
+import { blue } from "@material-ui/core/colors";
+import { useSelector } from "react-redux";
+
+const useStyles = makeStyles({
+    avatar: {
+        backgroundColor: blue[100],
+        color: blue[600],
+    },
+    loadingContainer: {
+        display: "flex",
+    },
+    loading: {
+        marginTop: 10,
+        marginLeft: 20,
+    },
+});
+
+export default function LoadingDialog() {
+    const classes = useStyles();
+    const open = useSelector((state) => state.viewUpdate.modals.loading);
+    const text = useSelector((state) => state.viewUpdate.modals.loadingText);
+
+    return (
+        <Dialog aria-labelledby="simple-dialog-title" open={open}>
+            <DialogContent>
+                <DialogContentText className={classes.loadingContainer}>
+                    <CircularProgress color="secondary" />
+                    <div className={classes.loading}>{text}</div>
+                </DialogContentText>
+            </DialogContent>
+        </Dialog>
+    );
+}
diff --git a/src/component/Modals/OptionSelector.js b/src/component/Modals/OptionSelector.js
new file mode 100644
index 0000000..00fc7aa
--- /dev/null
+++ b/src/component/Modals/OptionSelector.js
@@ -0,0 +1,60 @@
+import React from "react";
+import {
+    Button,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogTitle,
+    List,
+    ListItem,
+    ListItemText,
+    makeStyles,
+} from "@material-ui/core";
+import { useSelector } from "react-redux";
+import { useTranslation } from "react-i18next";
+
+const useStyles = makeStyles((theme) => ({
+    content: {
+        minWidth: 250,
+    },
+}));
+
+export default function OptionSelector() {
+    const { t } = useTranslation("common");
+    const classes = useStyles();
+    const option = useSelector((state) => state.viewUpdate.modals.option);
+
+    return (
+        <Dialog
+            open={option && option.open}
+            onClose={option && option.onClose}
+            aria-labelledby="form-dialog-title"
+        >
+            <DialogTitle id="form-dialog-title">
+                {option && option.title}
+            </DialogTitle>
+            <DialogContent dividers={"paper"} className={classes.content}>
+                <List component="nav" aria-label="main mailbox folders">
+                    {option &&
+                        option.options.map((o) => (
+                            <ListItem
+                                key={o.key}
+                                onClick={() => option && option.callback(o)}
+                                button
+                            >
+                                <ListItemText
+                                    primary={o.name}
+                                    secondary={o.description}
+                                />
+                            </ListItem>
+                        ))}
+                </List>
+            </DialogContent>
+            <DialogActions>
+                <Button onClick={option && option.onClose}>
+                    {t("cancel")}
+                </Button>
+            </DialogActions>
+        </Dialog>
+    );
+}
diff --git a/src/component/Modals/PurchaseShare.js b/src/component/Modals/PurchaseShare.js
new file mode 100644
index 0000000..58b86d7
--- /dev/null
+++ b/src/component/Modals/PurchaseShare.js
@@ -0,0 +1,46 @@
+import React from "react";
+import { Dialog } from "@material-ui/core";
+import DialogTitle from "@material-ui/core/DialogTitle";
+import DialogContent from "@material-ui/core/DialogContent";
+import DialogActions from "@material-ui/core/DialogActions";
+import Button from "@material-ui/core/Button";
+import DialogContentText from "@material-ui/core/DialogContentText";
+import { useSelector } from "react-redux";
+import { useTranslation } from "react-i18next";
+
+export default function PurchaseShareDialog() {
+    const { t } = useTranslation();
+    const purchase = useSelector((state) => state.explorer.purchase);
+    return (
+        <>
+            {purchase && (
+                <Dialog
+                    open={purchase}
+                    onClose={purchase.onClose}
+                    aria-labelledby="form-dialog-title"
+                >
+                    <DialogTitle id="alert-dialog-title">
+                        {t("vas.sharePurchaseTitle", { score: purchase.score })}
+                    </DialogTitle>
+                    <DialogContent>
+                        <DialogContentText id="alert-dialog-description">
+                            {t("vas.sharePurchaseDescription")}
+                        </DialogContentText>
+                    </DialogContent>
+                    <DialogActions>
+                        <Button onClick={purchase.onClose}>
+                            {t("cancel", { ns: "common" })}
+                        </Button>
+                        <Button
+                            onClick={() => purchase.callback()}
+                            color="primary"
+                            autoFocus
+                        >
+                            {t("ok", { ns: "common" })}
+                        </Button>
+                    </DialogActions>
+                </Dialog>
+            )}
+        </>
+    );
+}
diff --git a/src/component/Modals/Relocate.js b/src/component/Modals/Relocate.js
new file mode 100644
index 0000000..e3ab36f
--- /dev/null
+++ b/src/component/Modals/Relocate.js
@@ -0,0 +1,159 @@
+import React, { useCallback, useEffect, useState } from "react";
+import {
+    Button,
+    CircularProgress,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogTitle,
+    makeStyles,
+} from "@material-ui/core";
+import { useDispatch, useSelector } from "react-redux";
+import API from "../../middleware/Api";
+import Select from "@material-ui/core/Select";
+import MenuItem from "@material-ui/core/MenuItem";
+import { setModalsLoading, toggleSnackbar } from "../../redux/explorer";
+import { useTranslation } from "react-i18next";
+
+const useStyles = makeStyles((theme) => ({
+    wrapper: {
+        margin: theme.spacing(1),
+        position: "relative",
+    },
+    buttonProgress: {
+        color: theme.palette.secondary.light,
+        position: "absolute",
+        top: "50%",
+        left: "50%",
+        marginTop: -12,
+        marginLeft: -12,
+    },
+    input: {
+        width: 250,
+    },
+}));
+
+export default function RelocateDialog(props) {
+    const { t } = useTranslation();
+    const [selectedPolicy, setSelectedPolicy] = useState("");
+    const [policies, setPolicies] = useState([]);
+    const dispatch = useDispatch();
+    const policy = useSelector((state) => state.explorer.currentPolicy);
+    const ToggleSnackbar = useCallback(
+        (vertical, horizontal, msg, color) =>
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color)),
+        [dispatch]
+    );
+
+    const SetModalsLoading = useCallback(
+        (status) => {
+            dispatch(setModalsLoading(status));
+        },
+        [dispatch]
+    );
+
+    const submitRelocate = (e) => {
+        if (e != null) {
+            e.preventDefault();
+        }
+        SetModalsLoading(true);
+
+        const dirs = [],
+            items = [];
+        // eslint-disable-next-line
+        props.selected.map((value) => {
+            if (value.type === "dir") {
+                dirs.push(value.id);
+            } else {
+                items.push(value.id);
+            }
+        });
+
+        API.post("/file/relocate", {
+            src: {
+                dirs: dirs,
+                items: items,
+            },
+            dst_policy_id: selectedPolicy,
+        })
+            .then(() => {
+                props.onClose();
+                ToggleSnackbar(
+                    "top",
+                    "right",
+                    t("modals.taskCreated"),
+                    "success"
+                );
+                SetModalsLoading(false);
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+                SetModalsLoading(false);
+            });
+    };
+
+    useEffect(() => {
+        if (props.open) {
+            API.get("/user/setting/policies")
+                .then((response) => {
+                    setPolicies(response.data);
+                    setSelectedPolicy(policy.id);
+                })
+                .catch((error) => {
+                    ToggleSnackbar("top", "right", error.message, "error");
+                });
+        }
+
+        // eslint-disable-next-line
+    }, [props.open]);
+
+    const classes = useStyles();
+
+    return (
+        <Dialog
+            open={props.open}
+            onClose={props.onClose}
+            aria-labelledby="form-dialog-title"
+        >
+            <DialogTitle id="form-dialog-title">
+                {t("vas.migrateStoragePolicy")}
+            </DialogTitle>
+
+            <DialogContent className={classes.contentFix}>
+                <Select
+                    className={classes.input}
+                    labelId="demo-simple-select-label"
+                    value={selectedPolicy}
+                    onChange={(e) => setSelectedPolicy(e.target.value)}
+                >
+                    {policies.map((v, k) => (
+                        <MenuItem key={k} value={v.id}>
+                            {v.name}
+                        </MenuItem>
+                    ))}
+                </Select>
+            </DialogContent>
+
+            <DialogActions>
+                <Button onClick={props.onClose}>
+                    {t("cancel", { ns: "common" })}
+                </Button>
+                <div className={classes.wrapper}>
+                    <Button
+                        onClick={submitRelocate}
+                        color="primary"
+                        disabled={selectedPolicy === "" || props.modalsLoading}
+                    >
+                        {t("ok", { ns: "common" })}
+                        {props.modalsLoading && (
+                            <CircularProgress
+                                size={24}
+                                className={classes.buttonProgress}
+                            />
+                        )}
+                    </Button>
+                </div>
+            </DialogActions>
+        </Dialog>
+    );
+}
diff --git a/src/component/Modals/RemoteDownload.js b/src/component/Modals/RemoteDownload.js
new file mode 100644
index 0000000..fcfa953
--- /dev/null
+++ b/src/component/Modals/RemoteDownload.js
@@ -0,0 +1,380 @@
+import React, { useCallback, useEffect, useState } from "react";
+import {
+    Button,
+    CircularProgress,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogContentText,
+    DialogTitle,
+    makeStyles,
+    MenuItem,
+    TextField,
+} from "@material-ui/core";
+import PathSelector from "../FileManager/PathSelector";
+import { useDispatch } from "react-redux";
+import API, { AppError } from "../../middleware/Api";
+import { setModalsLoading, toggleSnackbar } from "../../redux/explorer";
+import { Trans, useTranslation } from "react-i18next";
+import { DnsOutlined, FolderOpenOutlined } from "@material-ui/icons";
+import { pathBack } from "../../utils";
+import InputAdornment from "@material-ui/core/InputAdornment";
+import { useTheme } from "@material-ui/core/styles";
+import useMediaQuery from "@material-ui/core/useMediaQuery";
+import LinkIcon from "@material-ui/icons/Link";
+import Auth from "../../middleware/Auth";
+import FormControl from "@material-ui/core/FormControl";
+import InputLabel from "@material-ui/core/InputLabel";
+import Select from "@material-ui/core/Select";
+
+const useStyles = makeStyles((theme) => ({
+    contentFix: {
+        padding: "10px 24px 0px 24px",
+    },
+    wrapper: {
+        margin: theme.spacing(1),
+        position: "relative",
+    },
+    buttonProgress: {
+        color: theme.palette.secondary.light,
+        position: "absolute",
+        top: "50%",
+        left: "50%",
+        marginTop: -12,
+        marginLeft: -12,
+    },
+    formGroup: {
+        display: "flex",
+        marginBottom: theme.spacing(3),
+    },
+    forumInput: {
+        flexGrow: 1,
+    },
+}));
+
+export default function RemoteDownload(props) {
+    const { t } = useTranslation();
+    const [selectPathOpen, setSelectPathOpen] = useState(false);
+    const [selectedPath, setSelectedPath] = useState("");
+    const [selectedPathName, setSelectedPathName] = useState("");
+    const [downloadTo, setDownloadTo] = useState("");
+    const [url, setUrl] = useState("");
+    const [nodes, setNodes] = useState([]);
+    const [nodesLoading, setNodesLoading] = useState(false);
+    const [preferredNode, setPreferredNode] = useState(0);
+    const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
+    const user = Auth.GetUser();
+
+    const dispatch = useDispatch();
+    const ToggleSnackbar = useCallback(
+        (vertical, horizontal, msg, color) =>
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color)),
+        [dispatch]
+    );
+
+    useEffect(() => {
+        if (props.open) {
+            setDownloadTo(props.presentPath);
+
+            if (user.group.selectNode && nodes.length === 0) {
+                setNodesLoading(true);
+                API.get("/user/setting/nodes")
+                    .then((response) => {
+                        setNodes(response.data);
+                        setNodesLoading(false);
+                    })
+                    .catch(() => {
+                        setNodes([]);
+                        setNodesLoading(false);
+                    });
+            }
+        }
+    }, [props.open]);
+
+    const setDownloadToPath = (folder) => {
+        const path =
+            folder.path === "/"
+                ? folder.path + folder.name
+                : folder.path + "/" + folder.name;
+        setSelectedPath(path);
+        setSelectedPathName(folder.name);
+    };
+
+    const selectPath = () => {
+        setDownloadTo(selectedPath === "//" ? "/" : selectedPath);
+        setSelectPathOpen(false);
+    };
+
+    const submitTorrentDownload = (e) => {
+        e.preventDefault();
+        props.setModalsLoading(true);
+        API.post("/aria2/torrent/" + props.torrent.id, {
+            dst: downloadTo === "//" ? "/" : downloadTo,
+            preferred_node: preferredNode,
+        })
+            .then(() => {
+                ToggleSnackbar(
+                    "top",
+                    "right",
+                    t("modals.taskCreated"),
+                    "success"
+                );
+                props.onClose();
+                props.setModalsLoading(false);
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "warning");
+                props.setModalsLoading(false);
+            });
+    };
+
+    const submitDownload = (e) => {
+        e.preventDefault();
+        props.setModalsLoading(true);
+        API.post("/aria2/url", {
+            url: url.split("\n"),
+            dst: downloadTo === "//" ? "/" : downloadTo,
+            preferred_node: preferredNode,
+        })
+            .then((response) => {
+                const failed = response.data
+                    .filter((r) => r.code !== 0)
+                    .map((r) => new AppError(r.msg, r.code, r.error).message);
+                if (failed.length > 0) {
+                    ToggleSnackbar(
+                        "top",
+                        "right",
+                        t("modals.taskCreateFailed", {
+                            failed: failed.length,
+                            details: failed.join(","),
+                        }),
+                        "warning"
+                    );
+                } else {
+                    ToggleSnackbar(
+                        "top",
+                        "right",
+                        t("modals.taskCreated"),
+                        "success"
+                    );
+                }
+
+                props.onClose();
+                props.setModalsLoading(false);
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+                props.setModalsLoading(false);
+            });
+    };
+
+    const classes = useStyles();
+
+    return (
+        <>
+            <Dialog
+                open={props.open}
+                onClose={props.onClose}
+                aria-labelledby="form-dialog-title"
+                fullWidth
+            >
+                <DialogTitle id="form-dialog-title">
+                    {t("modals.newRemoteDownloadTitle")}
+                </DialogTitle>
+                <DialogContent>
+                    <DialogContentText>
+                        <div className={classes.formGroup}>
+                            <div className={classes.forumInput}>
+                                <TextField
+                                    variant={"outlined"}
+                                    label={t("modals.remoteDownloadURL")}
+                                    autoFocus
+                                    fullWidth
+                                    disabled={props.torrent}
+                                    multiline
+                                    value={
+                                        props.torrent ? props.torrent.name : url
+                                    }
+                                    onChange={(e) => setUrl(e.target.value)}
+                                    placeholder={t(
+                                        "modals.remoteDownloadURLDescription"
+                                    )}
+                                    InputProps={{
+                                        startAdornment: !isMobile && (
+                                            <InputAdornment position="start">
+                                                <LinkIcon />
+                                            </InputAdornment>
+                                        ),
+                                    }}
+                                />
+                            </div>
+                        </div>
+                        <div className={classes.formGroup}>
+                            <div className={classes.forumInput}>
+                                <TextField
+                                    variant={"outlined"}
+                                    fullWidth
+                                    value={downloadTo}
+                                    onChange={(e) =>
+                                        setDownloadTo(e.target.value)
+                                    }
+                                    className={classes.input}
+                                    label={t("modals.remoteDownloadDst")}
+                                    InputProps={{
+                                        startAdornment: !isMobile && (
+                                            <InputAdornment position="start">
+                                                <FolderOpenOutlined />
+                                            </InputAdornment>
+                                        ),
+                                        endAdornment: (
+                                            <InputAdornment position="end">
+                                                <Button
+                                                    className={classes.button}
+                                                    color="primary"
+                                                    onClick={() =>
+                                                        setSelectPathOpen(true)
+                                                    }
+                                                >
+                                                    {t(
+                                                        "navbar.addTagDialog.selectFolder"
+                                                    )}
+                                                </Button>
+                                            </InputAdornment>
+                                        ),
+                                    }}
+                                />
+                                <br />
+                            </div>
+                        </div>
+                        {user.group.selectNode && (
+                            <div className={classes.formGroup}>
+                                <div className={classes.forumInput}>
+                                    <FormControl
+                                        variant="outlined"
+                                        fullWidth
+                                        className={classes.formControl}
+                                    >
+                                        <InputLabel id="demo-simple-select-label">
+                                            {t("modals.remoteDownloadNode")}
+                                        </InputLabel>
+                                        <Select
+                                            startAdornment={
+                                                !isMobile && (
+                                                    <InputAdornment position="start">
+                                                        {nodesLoading ? (
+                                                            <CircularProgress
+                                                                size={24}
+                                                            />
+                                                        ) : (
+                                                            <DnsOutlined />
+                                                        )}
+                                                    </InputAdornment>
+                                                )
+                                            }
+                                            labelId="demo-simple-select-label"
+                                            id="demo-simple-select"
+                                            label={t(
+                                                "modals.remoteDownloadNode"
+                                            )}
+                                            value={preferredNode}
+                                            onChange={(e) =>
+                                                setPreferredNode(e.target.value)
+                                            }
+                                        >
+                                            <MenuItem value={0}>
+                                                <em>
+                                                    {t(
+                                                        "modals.remoteDownloadNodeAuto"
+                                                    )}
+                                                </em>
+                                            </MenuItem>
+                                            {nodes.map((node) => (
+                                                <MenuItem
+                                                    key={node.id}
+                                                    value={node.id}
+                                                >
+                                                    {node.name}
+                                                </MenuItem>
+                                            ))}
+                                        </Select>
+                                    </FormControl>
+                                    <br />
+                                </div>
+                            </div>
+                        )}
+                    </DialogContentText>
+                </DialogContent>
+                <DialogActions>
+                    <Button onClick={props.onClose}>
+                        {t("cancel", { ns: "common" })}
+                    </Button>
+                    <div className={classes.wrapper}>
+                        <Button
+                            onClick={
+                                props.torrent
+                                    ? submitTorrentDownload
+                                    : submitDownload
+                            }
+                            color="primary"
+                            disabled={
+                                (url === "" && props.torrent === null) ||
+                                downloadTo === "" ||
+                                props.modalsLoading
+                            }
+                        >
+                            {t("modals.createTask")}
+                            {props.modalsLoading && (
+                                <CircularProgress
+                                    size={24}
+                                    className={classes.buttonProgress}
+                                />
+                            )}
+                        </Button>
+                    </div>
+                </DialogActions>
+            </Dialog>
+
+            <Dialog
+                open={selectPathOpen}
+                onClose={() => setSelectPathOpen(false)}
+                aria-labelledby="form-dialog-title"
+            >
+                <DialogTitle id="form-dialog-title">
+                    {t("modals.remoteDownloadDst")}
+                </DialogTitle>
+                <PathSelector
+                    presentPath={pathBack(props.presentPath)}
+                    selected={[]}
+                    onSelect={setDownloadToPath}
+                />
+
+                {selectedPathName !== "" && (
+                    <DialogContent className={classes.contentFix}>
+                        <DialogContentText>
+                            <Trans
+                                i18nKey="modals.downloadTo"
+                                values={{
+                                    name: selectedPathName,
+                                }}
+                                components={[<strong key={0} />]}
+                            />
+                        </DialogContentText>
+                    </DialogContent>
+                )}
+                <DialogActions>
+                    <Button onClick={() => setSelectPathOpen(false)}>
+                        {t("cancel", { ns: "common" })}
+                    </Button>
+                    <Button
+                        onClick={selectPath}
+                        color="primary"
+                        disabled={selectedPath === ""}
+                    >
+                        {t("ok", { ns: "common" })}
+                    </Button>
+                </DialogActions>
+            </Dialog>
+        </>
+    );
+}
diff --git a/src/component/Modals/Report.js b/src/component/Modals/Report.js
new file mode 100644
index 0000000..18e36fd
--- /dev/null
+++ b/src/component/Modals/Report.js
@@ -0,0 +1,148 @@
+import React, { useCallback, useState } from "react";
+import {
+    Button,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogTitle,
+    FormControl,
+    makeStyles,
+    TextField,
+} from "@material-ui/core";
+import { useDispatch, useSelector } from "react-redux";
+import API from "../../middleware/Api";
+import RadioGroup from "@material-ui/core/RadioGroup";
+import FormControlLabel from "@material-ui/core/FormControlLabel";
+import Radio from "@material-ui/core/Radio";
+import { reportReasons } from "../../config";
+import { toggleSnackbar } from "../../redux/explorer";
+import { useTranslation } from "react-i18next";
+
+const useStyles = makeStyles((theme) => ({
+    widthAnimation: {},
+    shareUrl: {
+        minWidth: "400px",
+    },
+    wrapper: {
+        margin: theme.spacing(1),
+        position: "relative",
+    },
+    buttonProgress: {
+        color: theme.palette.secondary.light,
+        position: "absolute",
+        top: "50%",
+        left: "50%",
+    },
+    flexCenter: {
+        alignItems: "center",
+    },
+    noFlex: {
+        display: "block",
+    },
+    scoreCalc: {
+        marginTop: 10,
+    },
+}));
+
+export default function Report(props) {
+    const { t } = useTranslation();
+    const dispatch = useDispatch();
+    const classes = useStyles();
+    const [reason, setReason] = useState("0");
+    const [des, setDes] = useState("");
+    const [loading, setLoading] = useState(false);
+
+    const ToggleSnackbar = useCallback(
+        (vertical, horizontal, msg, color) =>
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color)),
+        [dispatch]
+    );
+    const reportEnabled = useSelector(
+        (state) => state.siteConfig.report_enabled
+    );
+
+    const onClose = () => {
+        props.onClose();
+        setTimeout(() => {
+            setDes("");
+            setReason("0");
+        }, 500);
+    };
+
+    const submitReport = () => {
+        setLoading(true);
+        API.post("/share/report/" + props.share.key, {
+            des: des,
+            reason: parseInt(reason),
+        })
+            .then(() => {
+                ToggleSnackbar(
+                    "top",
+                    "right",
+                    t("vas.reportSuccessful"),
+                    "success"
+                );
+                setLoading(false);
+                onClose();
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+                setLoading(false);
+            });
+    };
+
+    return (
+        <Dialog
+            open={props.open}
+            onClose={onClose}
+            aria-labelledby="form-dialog-title"
+            className={classes.widthAnimation}
+            maxWidth="xs"
+            fullWidth
+        >
+            <DialogTitle id="form-dialog-title">{t("vas.report")}</DialogTitle>
+            <DialogContent>
+                <FormControl component="fieldset">
+                    <RadioGroup
+                        aria-label="gender"
+                        name="gender1"
+                        value={reason}
+                        onChange={(e) => setReason(e.target.value)}
+                    >
+                        {reportReasons.map((v, k) => (
+                            <FormControlLabel
+                                key={k}
+                                value={k.toString()}
+                                control={<Radio />}
+                                label={t(v)}
+                            />
+                        ))}
+                    </RadioGroup>
+                </FormControl>
+                <TextField
+                    fullWidth
+                    id="standard-multiline-static"
+                    label={t("vas.additionalDescription")}
+                    multiline
+                    value={des}
+                    onChange={(e) => setDes(e.target.value)}
+                    variant="filled"
+                    rows={4}
+                />
+            </DialogContent>
+
+            <DialogActions>
+                <Button onClick={onClose}>
+                    {t("cancel", { ns: "common" })}
+                </Button>
+                <Button
+                    onClick={submitReport}
+                    color="secondary"
+                    disabled={loading || !reportEnabled}
+                >
+                    {t("ok", { ns: "common" })}
+                </Button>
+            </DialogActions>
+        </Dialog>
+    );
+}
diff --git a/src/component/Modals/SelectFile.js b/src/component/Modals/SelectFile.js
new file mode 100644
index 0000000..e054f0a
--- /dev/null
+++ b/src/component/Modals/SelectFile.js
@@ -0,0 +1,132 @@
+import React, { useEffect, useState } from "react";
+import {
+    Button,
+    CircularProgress,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogTitle,
+    makeStyles,
+} from "@material-ui/core";
+import FormGroup from "@material-ui/core/FormGroup";
+import FormControlLabel from "@material-ui/core/FormControlLabel";
+import Checkbox from "@material-ui/core/Checkbox";
+import MenuItem from "@material-ui/core/MenuItem";
+import { Virtuoso } from "react-virtuoso";
+import { useTranslation } from "react-i18next";
+
+const useStyles = makeStyles((theme) => ({
+    contentFix: {
+        padding: "10px 24px 0px 24px",
+    },
+    wrapper: {
+        margin: theme.spacing(1),
+        position: "relative",
+    },
+    buttonProgress: {
+        color: theme.palette.secondary.light,
+        position: "absolute",
+        top: "50%",
+        left: "50%",
+        marginTop: -12,
+        marginLeft: -12,
+    },
+    content: {
+        padding: 0,
+    },
+    scroll: {
+        maxHeight: "calc(100vh - 200px)",
+    },
+}));
+
+export default function SelectFileDialog(props) {
+    const { t } = useTranslation();
+    const [files, setFiles] = useState(props.files);
+
+    useEffect(() => {
+        setFiles(props.files);
+    }, [props.files]);
+
+    const handleChange = (index) => (event) => {
+        const filesCopy = [...files];
+        // eslint-disable-next-line
+        filesCopy.map((v, k) => {
+            if (v.index === index) {
+                filesCopy[k] = {
+                    ...filesCopy[k],
+                    selected: event.target.checked ? "true" : "false",
+                };
+            }
+        });
+        setFiles(filesCopy);
+    };
+
+    const submit = () => {
+        const index = [];
+        // eslint-disable-next-line
+        files.map((v) => {
+            if (v.selected === "true") {
+                index.push(parseInt(v.index));
+            }
+        });
+        props.onSubmit(index);
+    };
+
+    const classes = useStyles();
+
+    return (
+        <Dialog
+            open={props.open}
+            onClose={props.onClose}
+            aria-labelledby="form-dialog-title"
+            fullWidth
+        >
+            <DialogTitle id="form-dialog-title">
+                {t("download.selectDownloadingFile")}
+            </DialogTitle>
+            <DialogContent dividers={"paper"} className={classes.content}>
+                <Virtuoso
+                    style={{ height: 54 * files.length }}
+                    className={classes.scroll}
+                    data={files}
+                    itemContent={(index, v) => (
+                        <MenuItem key={index}>
+                            <FormGroup row>
+                                <FormControlLabel
+                                    control={
+                                        <Checkbox
+                                            onChange={handleChange(v.index)}
+                                            checked={v.selected === "true"}
+                                            value="checkedA"
+                                        />
+                                    }
+                                    label={v.path}
+                                />
+                            </FormGroup>
+                        </MenuItem>
+                    )}
+                />
+            </DialogContent>
+            <DialogActions>
+                <Button onClick={props.onClose}>
+                    {t("cancel", { ns: "common" })}
+                </Button>
+                <div className={classes.wrapper}>
+                    <Button
+                        color="primary"
+                        onClick={submit}
+                        disabled={props.modalsLoading}
+                    >
+                        {t("ok", { ns: "common" })}
+                        {props.modalsLoading && (
+                            <CircularProgress
+                                size={24}
+                                className={classes.buttonProgress}
+                            />
+                        )}
+                    </Button>
+                </div>
+            </DialogActions>
+        </Dialog>
+    );
+}
diff --git a/src/component/Modals/SiteNotice.js b/src/component/Modals/SiteNotice.js
new file mode 100644
index 0000000..fdd9fb0
--- /dev/null
+++ b/src/component/Modals/SiteNotice.js
@@ -0,0 +1,62 @@
+import React, { useEffect, useState } from "react";
+import {
+    Button,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogTitle,
+    makeStyles,
+} from "@material-ui/core";
+import { useSelector } from "react-redux";
+import Auth from "../../middleware/Auth";
+import { useTranslation } from "react-i18next";
+
+const useStyles = makeStyles((theme) => ({
+    widthAnimation: {},
+    content: {
+        overflowWrap: "break-word",
+    },
+}));
+
+export default function SiteNotice() {
+    const { t } = useTranslation();
+    const content = useSelector((state) => state.siteConfig.site_notice);
+    const classes = useStyles();
+    const [show, setShow] = useState(false);
+    const setRead = () => {
+        setShow(false);
+        Auth.SetPreference("notice_read", content);
+    };
+    useEffect(() => {
+        const newNotice = Auth.GetPreference("notice_read");
+        if (content !== "" && newNotice !== content) {
+            setShow(true);
+        }
+    }, [content]);
+    return (
+        <Dialog
+            open={show}
+            onClose={() => setShow(false)}
+            aria-labelledby="form-dialog-title"
+            maxWidth="sm"
+            fullWidth
+        >
+            <DialogTitle id="form-dialog-title">
+                {t("vas.announcement")}
+            </DialogTitle>
+            <DialogContent
+                className={classes.content}
+                dangerouslySetInnerHTML={{ __html: content }}
+            />
+
+            <DialogActions>
+                <Button onClick={() => setRead()} color="primary">
+                    {t("vas.dontShowAgain")}
+                </Button>
+                <Button onClick={() => setShow(false)}>
+                    {t("close", { ns: "common" })}
+                </Button>
+            </DialogActions>
+        </Dialog>
+    );
+}
diff --git a/src/component/Modals/TimeZone.js b/src/component/Modals/TimeZone.js
new file mode 100644
index 0000000..2459f85
--- /dev/null
+++ b/src/component/Modals/TimeZone.js
@@ -0,0 +1,89 @@
+import React, { useCallback, useState } from "react";
+import {
+    Button,
+    CircularProgress,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogTitle,
+    makeStyles,
+} from "@material-ui/core";
+import { useDispatch } from "react-redux";
+import TextField from "@material-ui/core/TextField";
+import {
+    refreshTimeZone,
+    timeZone,
+    validateTimeZone,
+} from "../../utils/datetime";
+import FormControl from "@material-ui/core/FormControl";
+import Auth from "../../middleware/Auth";
+import { toggleSnackbar } from "../../redux/explorer";
+import { useTranslation } from "react-i18next";
+
+const useStyles = makeStyles((theme) => ({}));
+
+export default function TimeZoneDialog(props) {
+    const { t } = useTranslation();
+    const [timeZoneValue, setTimeZoneValue] = useState(timeZone);
+    const dispatch = useDispatch();
+    const ToggleSnackbar = useCallback(
+        (vertical, horizontal, msg, color) =>
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color)),
+        [dispatch]
+    );
+
+    const saveZoneInfo = () => {
+        if (!validateTimeZone(timeZoneValue)) {
+            ToggleSnackbar("top", "right", "无效的时区名称", "warning");
+            return;
+        }
+        Auth.SetPreference("timeZone", timeZoneValue);
+        refreshTimeZone();
+        props.onClose();
+    };
+
+    const classes = useStyles();
+
+    return (
+        <Dialog
+            open={props.open}
+            onClose={props.onClose}
+            aria-labelledby="form-dialog-title"
+        >
+            <DialogTitle id="form-dialog-title">
+                {t("setting.timeZone")}
+            </DialogTitle>
+
+            <DialogContent>
+                <FormControl>
+                    <TextField
+                        label={t("setting.timeZoneCode")}
+                        value={timeZoneValue}
+                        onChange={(e) => setTimeZoneValue(e.target.value)}
+                    />
+                </FormControl>
+            </DialogContent>
+
+            <DialogActions>
+                <Button onClick={props.onClose}>
+                    {t("cancel", { ns: "common" })}
+                </Button>
+                <div className={classes.wrapper}>
+                    <Button
+                        color="primary"
+                        disabled={timeZoneValue === ""}
+                        onClick={() => saveZoneInfo()}
+                    >
+                        {t("ok", { ns: "common" })}
+                        {props.modalsLoading && (
+                            <CircularProgress
+                                size={24}
+                                className={classes.buttonProgress}
+                            />
+                        )}
+                    </Button>
+                </div>
+            </DialogActions>
+        </Dialog>
+    );
+}
diff --git a/src/component/Navbar/DarkModeSwitcher.js b/src/component/Navbar/DarkModeSwitcher.js
new file mode 100644
index 0000000..0757a94
--- /dev/null
+++ b/src/component/Navbar/DarkModeSwitcher.js
@@ -0,0 +1,56 @@
+import React, { useCallback } from "react";
+import { IconButton, makeStyles } from "@material-ui/core";
+import DayIcon from "@material-ui/icons/Brightness7";
+import NightIcon from "@material-ui/icons/Brightness4";
+import { useDispatch, useSelector } from "react-redux";
+import Tooltip from "@material-ui/core/Tooltip";
+import Auth from "../../middleware/Auth";
+import classNames from "classnames";
+import { toggleDaylightMode } from "../../redux/explorer";
+import { useTranslation } from "react-i18next";
+
+const useStyles = makeStyles(() => ({
+    icon: {
+        color: "rgb(255, 255, 255)",
+        opacity: "0.54",
+    },
+}));
+
+const DarkModeSwitcher = ({ position }) => {
+    const { t } = useTranslation();
+    const ThemeType = useSelector(
+        (state) => state.siteConfig.theme.palette.type
+    );
+    const dispatch = useDispatch();
+    const ToggleThemeMode = useCallback(() => dispatch(toggleDaylightMode()), [
+        dispatch,
+    ]);
+    const isDayLight = (ThemeType && ThemeType === "light") || !ThemeType;
+    const isDark = ThemeType && ThemeType === "dark";
+    const toggleMode = () => {
+        Auth.SetPreference("theme_mode", isDayLight ? "dark" : "light");
+        ToggleThemeMode();
+    };
+    const classes = useStyles();
+    return (
+        <Tooltip
+            title={
+                isDayLight ? t("navbar.toDarkMode") : t("navbar.toLightMode")
+            }
+            placement="bottom"
+        >
+            <IconButton
+                className={classNames({
+                    [classes.icon]: "left" === position,
+                })}
+                onClick={toggleMode}
+                color="inherit"
+            >
+                {isDayLight && <NightIcon />}
+                {isDark && <DayIcon />}
+            </IconButton>
+        </Tooltip>
+    );
+};
+
+export default DarkModeSwitcher;
diff --git a/src/component/Navbar/FileTags.js b/src/component/Navbar/FileTags.js
new file mode 100644
index 0000000..8bb014c
--- /dev/null
+++ b/src/component/Navbar/FileTags.js
@@ -0,0 +1,407 @@
+import React, { Suspense, useCallback, useState } from "react";
+import {
+    Divider,
+    List,
+    ListItemIcon,
+    ListItemText,
+    makeStyles,
+    withStyles,
+} from "@material-ui/core";
+import { Clear, KeyboardArrowRight } from "@material-ui/icons";
+import classNames from "classnames";
+import FolderShared from "@material-ui/icons/FolderShared";
+import UploadIcon from "@material-ui/icons/CloudUpload";
+import VideoIcon from "@material-ui/icons/VideoLibraryOutlined";
+import ImageIcon from "@material-ui/icons/CollectionsOutlined";
+import MusicIcon from "@material-ui/icons/LibraryMusicOutlined";
+import DocIcon from "@material-ui/icons/FileCopyOutlined";
+import { useHistory, useLocation } from "react-router";
+import pathHelper from "../../utils/page";
+import MuiExpansionPanel from "@material-ui/core/ExpansionPanel";
+import MuiExpansionPanelSummary from "@material-ui/core/ExpansionPanelSummary";
+import MuiExpansionPanelDetails from "@material-ui/core/ExpansionPanelDetails";
+import MuiListItem from "@material-ui/core/ListItem";
+import { useDispatch } from "react-redux";
+import Auth from "../../middleware/Auth";
+import {
+    Circle,
+    CircleOutline,
+    FolderHeartOutline,
+    Heart,
+    HeartOutline,
+    Hexagon,
+    HexagonOutline,
+    Hexagram,
+    HexagramOutline,
+    Rhombus,
+    RhombusOutline,
+    Square,
+    SquareOutline,
+    TagPlus,
+    Triangle,
+    TriangleOutline,
+} from "mdi-material-ui";
+import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
+import IconButton from "@material-ui/core/IconButton";
+import API from "../../middleware/Api";
+import { navigateTo, searchMyFile, toggleSnackbar } from "../../redux/explorer";
+import { useTranslation } from "react-i18next";
+
+const ListItem = withStyles((theme) => ({
+    root: {
+        borderRadius:theme.shape.borderRadius,
+    },
+}))(MuiListItem);
+
+const ExpansionPanel = withStyles({
+    root: {
+        maxWidth: "100%",
+        boxShadow: "none",
+        "&:not(:last-child)": {
+            borderBottom: 0,
+        },
+        "&:before": {
+            display: "none",
+        },
+        "&$expanded": { margin: 0 },
+    },
+    expanded: {},
+})(MuiExpansionPanel);
+
+const ExpansionPanelSummary = withStyles((theme) =>({
+    root: {
+        minHeight: 0,
+        padding: 0,
+        "&$expanded": {
+            minHeight: 0,
+        },
+    },
+    content: {
+        maxWidth: "100%",
+        margin: 0,
+        display: "block",
+        "&$expanded": {
+            margin: "0",
+        },
+    },
+    expanded: {},
+}))(MuiExpansionPanelSummary);
+
+const ExpansionPanelDetails = withStyles((theme) => ({
+    root: {
+        display: "block",
+        padding: theme.spacing(0),
+    },
+}))(MuiExpansionPanelDetails);
+
+const useStyles = makeStyles((theme) => ({
+    expand: {
+        display: "none",
+        transition: ".15s all ease-in-out",
+    },
+    expanded: {
+        display: "block",
+        transform: "rotate(90deg)",
+    },
+    iconFix: {
+        marginLeft: "16px",
+    },
+    hiddenButton: {
+        display: "none",
+    },
+    subMenu: {
+        marginLeft: theme.spacing(2),
+    },
+    overFlow: {
+        whiteSpace: "nowrap",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+    },
+    paddingList:{
+        padding:theme.spacing(1),
+    },
+    paddingSummary:{
+        paddingLeft:theme.spacing(1),
+        paddingRight:theme.spacing(1),
+    }
+}));
+
+const icons = {
+    Circle: Circle,
+    CircleOutline: CircleOutline,
+    Heart: Heart,
+    HeartOutline: HeartOutline,
+    Hexagon: Hexagon,
+    HexagonOutline: HexagonOutline,
+    Hexagram: Hexagram,
+    HexagramOutline: HexagramOutline,
+    Rhombus: Rhombus,
+    RhombusOutline: RhombusOutline,
+    Square: Square,
+    SquareOutline: SquareOutline,
+    Triangle: Triangle,
+    TriangleOutline: TriangleOutline,
+    FolderHeartOutline: FolderHeartOutline,
+};
+
+const AddTag = React.lazy(() => import("../Modals/AddTag"));
+
+export default function FileTag() {
+    const classes = useStyles();
+    const { t } = useTranslation();
+
+    const location = useLocation();
+    const history = useHistory();
+
+    const isHomePage = pathHelper.isHomePage(location.pathname);
+
+    const [tagOpen, setTagOpen] = useState(true);
+    const [addTagModal, setAddTagModal] = useState(false);
+    const [tagHover, setTagHover] = useState(null);
+    const [tags, setTags] = useState(
+        Auth.GetUser().tags ? Auth.GetUser().tags : []
+    );
+
+    const dispatch = useDispatch();
+    const SearchMyFile = useCallback((k, p) => dispatch(searchMyFile(k, p)), [
+        dispatch,
+    ]);
+    const NavigateTo = useCallback((k) => dispatch(navigateTo(k)), [dispatch]);
+
+    const ToggleSnackbar = useCallback(
+        (vertical, horizontal, msg, color) =>
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color)),
+        [dispatch]
+    );
+
+    const getIcon = (icon, color) => {
+        if (icons[icon]) {
+            const IconComponent = icons[icon];
+            return (
+                <IconComponent
+                    className={[classes.iconFix]}
+                    style={
+                        color
+                            ? {
+                                  color: color,
+                              }
+                            : {}
+                    }
+                />
+            );
+        }
+        return <Circle className={[classes.iconFix]} />;
+    };
+
+    const submitSuccess = (tag) => {
+        const newTags = [...tags, tag];
+        setTags(newTags);
+        const user = Auth.GetUser();
+        user.tags = newTags;
+        Auth.SetUser(user);
+    };
+
+    const submitDelete = (id) => {
+        API.delete("/tag/" + id)
+            .then(() => {
+                const newTags = tags.filter((v) => {
+                    return v.id !== id;
+                });
+                setTags(newTags);
+                const user = Auth.GetUser();
+                user.tags = newTags;
+                Auth.SetUser(user);
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            });
+    };
+
+    return (
+        <>
+            <Suspense fallback={""}>
+                <AddTag
+                    onSuccess={submitSuccess}
+                    open={addTagModal}
+                    onClose={() => setAddTagModal(false)}
+                />
+            </Suspense>
+            <ExpansionPanel
+                square
+                expanded={tagOpen && isHomePage}
+                onChange={() => isHomePage && setTagOpen(!tagOpen)}
+            >
+                <ExpansionPanelSummary
+                    aria-controls="panel1d-content"
+                    id="panel1d-header"
+                >
+                    <div className={classes.paddingSummary}>
+                        <ListItem
+                            button
+                            key="我的文件"
+                            onClick={() =>
+                                !isHomePage && history.push("/home?path=%2F")
+                            }
+                        >
+                            <ListItemIcon>
+                                <KeyboardArrowRight
+                                    className={classNames(
+                                        {
+                                            [classes.expanded]:
+                                            tagOpen && isHomePage,
+                                            [classes.iconFix]: true,
+                                        },
+                                        classes.expand
+                                    )}
+                                />
+                                {!(tagOpen && isHomePage) && (
+                                    <FolderShared className={classes.iconFix} />
+                                )}
+                            </ListItemIcon>
+                            <ListItemText primary={t("navbar.myFiles")} />
+                        </ListItem>
+                    </div>
+
+                    <Divider />
+                </ExpansionPanelSummary>
+
+                <ExpansionPanelDetails>
+                    <List className={classes.paddingList} onMouseLeave={() => setTagHover(null)}>
+                        <ListItem
+                            button
+                            id="pickfiles"
+                            className={classes.hiddenButton}
+                        >
+                            <ListItemIcon>
+                                <UploadIcon />
+                            </ListItemIcon>
+                            <ListItemText />
+                        </ListItem>
+                        <ListItem
+                            button
+                            id="pickfolder"
+                            className={classes.hiddenButton}
+                        >
+                            <ListItemIcon>
+                                <UploadIcon />
+                            </ListItemIcon>
+                            <ListItemText />
+                        </ListItem>
+                        {[
+                            {
+                                key: t("navbar.videos"),
+                                id: "video",
+                                icon: (
+                                    <VideoIcon
+                                        className={[
+                                            classes.iconFix,
+                                            classes.iconVideo,
+                                        ]}
+                                    />
+                                ),
+                            },
+                            {
+                                key: t("navbar.photos"),
+                                id: "image",
+                                icon: (
+                                    <ImageIcon
+                                        className={[
+                                            classes.iconFix,
+                                            classes.iconImg,
+                                        ]}
+                                    />
+                                ),
+                            },
+                            {
+                                key: t("navbar.music"),
+                                id: "audio",
+                                icon: (
+                                    <MusicIcon
+                                        className={[
+                                            classes.iconFix,
+                                            classes.iconAudio,
+                                        ]}
+                                    />
+                                ),
+                            },
+                            {
+                                key: t("navbar.documents"),
+                                id: "doc",
+                                icon: (
+                                    <DocIcon
+                                        className={[
+                                            classes.iconFix,
+                                            classes.iconDoc,
+                                        ]}
+                                    />
+                                ),
+                            },
+                        ].map((v) => (
+                            <ListItem
+                                button
+                                key={v.key}
+                                onClick={() =>
+                                    SearchMyFile(v.id + "/internal", "")
+                                }
+                            >
+                                <ListItemIcon className={classes.subMenu}>
+                                    {v.icon}
+                                </ListItemIcon>
+                                <ListItemText primary={v.key} />
+                            </ListItem>
+                        ))}
+                        {tags.map((v) => (
+                            <ListItem
+                                button
+                                key={v.id}
+                                onMouseEnter={() => setTagHover(v.id)}
+                                onClick={() => {
+                                    if (v.type === 0) {
+                                        SearchMyFile("tag/" + v.id, "");
+                                    } else {
+                                        NavigateTo(v.expression);
+                                    }
+                                }}
+                            >
+                                <ListItemIcon className={classes.subMenu}>
+                                    {getIcon(
+                                        v.type === 0
+                                            ? v.icon
+                                            : "FolderHeartOutline",
+                                        v.type === 0 ? v.color : null
+                                    )}
+                                </ListItemIcon>
+                                <ListItemText
+                                    className={classes.overFlow}
+                                    primary={v.name}
+                                />
+
+                                {tagHover === v.id && (
+                                    <ListItemSecondaryAction
+                                        onClick={() => submitDelete(v.id)}
+                                    >
+                                        <IconButton
+                                            size={"small"}
+                                            edge="end"
+                                            aria-label="delete"
+                                        >
+                                            <Clear />
+                                        </IconButton>
+                                    </ListItemSecondaryAction>
+                                )}
+                            </ListItem>
+                        ))}
+
+                        <ListItem button onClick={() => setAddTagModal(true)}>
+                            <ListItemIcon className={classes.subMenu}>
+                                <TagPlus className={classes.iconFix} />
+                            </ListItemIcon>
+                            <ListItemText primary={t("navbar.addATag")} />
+                        </ListItem>
+                    </List>{" "}
+                    <Divider />
+                </ExpansionPanelDetails>
+            </ExpansionPanel>
+        </>
+    );
+}
diff --git a/src/component/Navbar/Navbar.js b/src/component/Navbar/Navbar.js
new file mode 100644
index 0000000..3a534b0
--- /dev/null
+++ b/src/component/Navbar/Navbar.js
@@ -0,0 +1,984 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import classNames from "classnames";
+import { connect } from "react-redux";
+import ShareIcon from "@material-ui/icons/Share";
+import MusicNote from "@material-ui/icons/MusicNote";
+import BackIcon from "@material-ui/icons/ArrowBack";
+import SdStorage from "@material-ui/icons/SdStorage";
+import OpenIcon from "@material-ui/icons/OpenInNew";
+import DownloadIcon from "@material-ui/icons/CloudDownload";
+import RenameIcon from "@material-ui/icons/BorderColor";
+import MoveIcon from "@material-ui/icons/Input";
+import DeleteIcon from "@material-ui/icons/Delete";
+import MenuIcon from "@material-ui/icons/Menu";
+import { isPreviewable } from "../../config";
+import { changeThemeColor, sizeToString, vhCheck } from "../../utils";
+import Uploader from "../Uploader/Uploader.js";
+import pathHelper from "../../utils/page";
+import SezrchBar from "./SearchBar";
+import StorageBar from "./StorageBar";
+import UserAvatar from "./UserAvatar";
+import UserInfo from "./UserInfo";
+import {
+    FolderDownload,
+    AccountArrowRight,
+    AccountPlus,
+    LogoutVariant,
+} from "mdi-material-ui";
+import { withRouter } from "react-router-dom";
+import {
+    AppBar,
+    Drawer,
+    Grow,
+    Hidden,
+    IconButton,
+    List,
+    ListItemIcon,
+    ListItemText,
+    SwipeableDrawer,
+    Toolbar,
+    Tooltip,
+    Typography,
+    withStyles,
+    withTheme
+} from "@material-ui/core";
+import Auth from "../../middleware/Auth";
+import API from "../../middleware/Api";
+import FileTag from "./FileTags";
+import { Assignment, Devices, MoreHoriz, Settings } from "@material-ui/icons";
+import Divider from "@material-ui/core/Divider";
+import SubActions from "../FileManager/Navigator/SubActions";
+import {
+    audioPreviewSetIsOpen,
+    changeContextMenu,
+    drawerToggleAction,
+    navigateTo,
+    openCreateFolderDialog,
+    openLoadingDialog,
+    openMoveDialog,
+    openMusicDialog,
+    openPreview,
+    openRemoveDialog,
+    openRenameDialog,
+    openShareDialog,
+    saveFile,
+    setSelectedTarget,
+    setSessionStatus,
+    showImgPreivew,
+    toggleSnackbar,
+} from "../../redux/explorer";
+import {
+    startBatchDownload,
+    startDirectoryDownload,
+    startDownload,
+} from "../../redux/explorer/action";
+import PolicySwitcher from "./PolicySwitcher";
+import { withTranslation } from "react-i18next";
+import MuiListItem from "@material-ui/core/ListItem";
+
+vhCheck();
+const drawerWidth = 240;
+const drawerWidthMobile = 270;
+
+const ListItem = withStyles((theme) => ({
+    root: {
+        borderRadius:theme.shape.borderRadius,
+    },
+}))(MuiListItem);
+
+const mapStateToProps = (state) => {
+    return {
+        desktopOpen: state.viewUpdate.open,
+        selected: state.explorer.selected,
+        isMultiple: state.explorer.selectProps.isMultiple,
+        withFolder: state.explorer.selectProps.withFolder,
+        withFile: state.explorer.selectProps.withFile,
+        path: state.navigator.path,
+        title: state.siteConfig.title,
+        subTitle: state.viewUpdate.subTitle,
+        loadUploader: state.viewUpdate.loadUploader,
+        isLogin: state.viewUpdate.isLogin,
+        shareInfo: state.viewUpdate.shareInfo,
+        registerEnabled: state.siteConfig.registerEnabled,
+        audioPreviewPlayingName: state.explorer.audioPreview.playingName,
+        audioPreviewIsOpen: state.explorer.audioPreview.isOpen,
+    };
+};
+
+const mapDispatchToProps = (dispatch) => {
+    return {
+        handleDesktopToggle: (open) => {
+            dispatch(drawerToggleAction(open));
+        },
+        setSelectedTarget: (targets) => {
+            dispatch(setSelectedTarget(targets));
+        },
+        navigateTo: (path) => {
+            dispatch(navigateTo(path));
+        },
+        openCreateFolderDialog: () => {
+            dispatch(openCreateFolderDialog());
+        },
+        changeContextMenu: (type, open) => {
+            dispatch(changeContextMenu(type, open));
+        },
+        saveFile: () => {
+            dispatch(saveFile());
+        },
+        openMusicDialog: () => {
+            dispatch(openMusicDialog());
+        },
+        showImgPreivew: (first) => {
+            dispatch(showImgPreivew(first));
+        },
+        toggleSnackbar: (vertical, horizontal, msg, color) => {
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color));
+        },
+        openRenameDialog: () => {
+            dispatch(openRenameDialog());
+        },
+        openMoveDialog: () => {
+            dispatch(openMoveDialog());
+        },
+        openRemoveDialog: () => {
+            dispatch(openRemoveDialog());
+        },
+        openShareDialog: () => {
+            dispatch(openShareDialog());
+        },
+        openLoadingDialog: (text) => {
+            dispatch(openLoadingDialog(text));
+        },
+        setSessionStatus: () => {
+            dispatch(setSessionStatus());
+        },
+        openPreview: (share) => {
+            dispatch(openPreview(share));
+        },
+        audioPreviewOpen: () => {
+            dispatch(audioPreviewSetIsOpen(true));
+        },
+        startBatchDownload: (share) => {
+            dispatch(startBatchDownload(share));
+        },
+        startDirectoryDownload: (share) => {
+            dispatch(startDirectoryDownload(share));
+        },
+        startDownload: (share, file) => {
+            dispatch(startDownload(share, file));
+        },
+    };
+};
+
+const styles = (theme) => ({
+    appBar: {
+        marginLeft: drawerWidth,
+        [theme.breakpoints.down("xs")]: {
+            marginLeft: drawerWidthMobile,
+        },
+        zIndex: theme.zIndex.drawer + 1,
+        transition: " background-color 250ms",
+    },
+
+    drawer: {
+        width: 0,
+        flexShrink: 0,
+    },
+    drawerDesktop: {
+        width: drawerWidth,
+        flexShrink: 0,
+    },
+    icon: {
+        marginRight: theme.spacing(2),
+    },
+    menuButton: {
+        marginRight: 20,
+        [theme.breakpoints.up("sm")]: {
+            display: "none",
+        },
+    },
+    menuButtonDesktop: {
+        marginRight: 20,
+        [theme.breakpoints.down("xs")]: {
+            display: "none",
+        },
+    },
+    menuIcon: {
+        marginRight: 20,
+    },
+    toolbar: theme.mixins.toolbar,
+    drawerPaper: {
+        width: drawerWidthMobile,
+    },
+    drawerPaperDesktop: {
+        width: drawerWidth,
+    },
+    upDrawer: {
+        overflowX: "hidden",
+        [theme.breakpoints.up("sm")]: {
+            display: "flex",
+            flexDirection: "column",
+            height: "100%",
+            justifyContent: "space-between",
+        },
+    },
+    drawerOpen: {
+        width: drawerWidth,
+        transition: theme.transitions.create("width", {
+            easing: theme.transitions.easing.sharp,
+            duration: theme.transitions.duration.enteringScreen,
+        }),
+    },
+    drawerClose: {
+        transition: theme.transitions.create("width", {
+            easing: theme.transitions.easing.sharp,
+            duration: theme.transitions.duration.leavingScreen,
+        }),
+        overflowX: "hidden",
+        width: 0,
+    },
+    content: {
+        flexGrow: 1,
+        padding: theme.spacing(3),
+    },
+    grow: {
+        flexGrow: 1,
+    },
+    badge: {
+        top: 1,
+        right: -15,
+    },
+    nested: {
+        paddingLeft: theme.spacing(4),
+    },
+    sectionForFile: {
+        display: "flex",
+    },
+    extendedIcon: {
+        marginRight: theme.spacing(1),
+    },
+    addButton: {
+        marginLeft: "40px",
+        marginTop: "25px",
+        marginBottom: "15px",
+    },
+    fabButton: {
+        borderRadius: "100px",
+    },
+    badgeFix: {
+        right: "10px",
+    },
+    iconFix: {
+        marginLeft: "16px",
+    },
+    dividerFix: {
+        marginTop: "8px",
+    },
+    folderShareIcon: {
+        verticalAlign: "sub",
+        marginRight: "5px",
+    },
+    shareInfoContainer: {
+        display: "flex",
+        marginTop: "15px",
+        marginBottom: "20px",
+        marginLeft: "28px",
+        textDecoration: "none",
+    },
+    shareAvatar: {
+        width: "40px",
+        height: "40px",
+    },
+    stickFooter: {
+        bottom: "0px",
+        position: "absolute",
+        backgroundColor: theme.palette.background.paper,
+        width: "100%",
+    },
+    ownerInfo: {
+        marginLeft: "10px",
+        width: "150px",
+    },
+    minStickDrawer: {
+        overflowY: "auto",
+    },
+    paddingList:{
+        padding:theme.spacing(1),
+    }
+});
+class NavbarCompoment extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            mobileOpen: false,
+        };
+        this.UploaderRef = React.createRef();
+    }
+
+    UNSAFE_componentWillMount() {
+        this.unlisten = this.props.history.listen(() => {
+            this.setState(() => ({ mobileOpen: false }));
+        });
+    }
+    componentWillUnmount() {
+        this.unlisten();
+    }
+
+    componentDidMount = () => {
+        changeThemeColor(
+            this.props.selected.length <= 1 &&
+                !(!this.props.isMultiple && this.props.withFile)
+                ? this.props.theme.palette.primary.main
+                : this.props.theme.palette.background.default
+        );
+    };
+
+    UNSAFE_componentWillReceiveProps = (nextProps) => {
+        if (
+            (this.props.selected.length === 0) !==
+            (nextProps.selected.length === 0)
+        ) {
+            changeThemeColor(
+                !(this.props.selected.length === 0)
+                    ? this.props.theme.palette.type === "dark"
+                        ? this.props.theme.palette.background.default
+                        : this.props.theme.palette.primary.main
+                    : this.props.theme.palette.background.default
+            );
+        }
+    };
+
+    handleDrawerToggle = () => {
+        this.setState((state) => ({ mobileOpen: !state.mobileOpen }));
+    };
+
+    openDownload = () => {
+        this.props.startDownload(this.props.shareInfo, this.props.selected[0]);
+    };
+
+    openDirectoryDownload = (e) => {
+        this.props.startDirectoryDownload(this.props.shareInfo);
+    };
+
+    archiveDownload = (e) => {
+        this.props.startBatchDownload(this.props.shareInfo);
+    };
+
+    signOut = () => {
+        API.delete("/user/session/")
+            .then(() => {
+                this.props.toggleSnackbar(
+                    "top",
+                    "right",
+                    this.props.t("login.loggedOut"),
+                    "success"
+                );
+                Auth.signout();
+                window.location.reload();
+                this.props.setSessionStatus(false);
+            })
+            .catch((error) => {
+                this.props.toggleSnackbar(
+                    "top",
+                    "right",
+                    error.message,
+                    "warning"
+                );
+            })
+            .finally(() => {
+                this.handleClose();
+            });
+    };
+
+    render() {
+        const { classes, t } = this.props;
+        const user = Auth.GetUser(this.props.isLogin);
+        const isHomePage = pathHelper.isHomePage(this.props.location.pathname);
+        const isSharePage = pathHelper.isSharePage(
+            this.props.location.pathname
+        );
+
+        const drawer = (
+            <div id="container" className={classes.upDrawer}>
+                {pathHelper.isMobile() && <UserInfo />}
+
+                {Auth.Check(this.props.isLogin) && (
+                    <>
+                        <div className={classes.minStickDrawer}>
+                            <FileTag />
+                            <List className={classes.paddingList}>
+                                <ListItem
+                                    button
+                                    key="我的分享"
+                                    onClick={() =>
+                                        this.props.history.push("/shares?")
+                                    }
+                                >
+                                    <ListItemIcon>
+                                        <ShareIcon
+                                            className={classes.iconFix}
+                                        />
+                                    </ListItemIcon>
+                                    <ListItemText
+                                        primary={t("navbar.myShare")}
+                                    />
+                                </ListItem>
+                                {user.group.allowRemoteDownload && (
+                                    <ListItem
+                                        button
+                                        key="离线下载"
+                                        onClick={() =>
+                                            this.props.history.push("/aria2?")
+                                        }
+                                    >
+                                        <ListItemIcon>
+                                            <DownloadIcon
+                                                className={classes.iconFix}
+                                            />
+                                        </ListItemIcon>
+                                        <ListItemText
+                                            primary={t("navbar.remoteDownload")}
+                                        />
+                                    </ListItem>
+                                )}
+                                <ListItem
+                                    button
+                                    key="容量配额"
+                                    onClick={() =>
+                                        this.props.history.push("/quota?")
+                                    }
+                                >
+                                    <ListItemIcon>
+                                        <SdStorage
+                                            className={classes.iconFix}
+                                        />
+                                    </ListItemIcon>
+                                    <ListItemText primary={t("vas.quota")} />
+                                </ListItem>
+                                <ListItem
+                                    button
+                                    key="WebDAV"
+                                    onClick={() =>
+                                        this.props.history.push("/connect?")
+                                    }
+                                >
+                                    <ListItemIcon>
+                                        <Devices className={classes.iconFix} />
+                                    </ListItemIcon>
+                                    <ListItemText
+                                        primary={t("navbar.connect")}
+                                    />
+                                </ListItem>
+
+                                <ListItem
+                                    button
+                                    key="任务队列"
+                                    onClick={() =>
+                                        this.props.history.push("/tasks?")
+                                    }
+                                >
+                                    <ListItemIcon>
+                                        <Assignment
+                                            className={classes.iconFix}
+                                        />
+                                    </ListItemIcon>
+                                    <ListItemText
+                                        primary={t("navbar.taskQueue")}
+                                    />
+                                </ListItem>
+                                {pathHelper.isMobile() && (
+                                    <>
+                                        <Divider />
+                                        <ListItem
+                                            button
+                                            key="个人设置"
+                                            onClick={() =>
+                                                this.props.history.push(
+                                                    "/setting?"
+                                                )
+                                            }
+                                        >
+                                            <ListItemIcon>
+                                                <Settings
+                                                    className={classes.iconFix}
+                                                />
+                                            </ListItemIcon>
+                                            <ListItemText
+                                                primary={t("navbar.setting")}
+                                            />
+                                        </ListItem>
+
+                                        <ListItem
+                                            button
+                                            key="退出登录"
+                                            onClick={this.signOut}
+                                        >
+                                            <ListItemIcon>
+                                                <LogoutVariant
+                                                    className={classes.iconFix}
+                                                />
+                                            </ListItemIcon>
+                                            <ListItemText
+                                                primary={t("login.logout")}
+                                            />
+                                        </ListItem>
+                                    </>
+                                )}
+                            </List>
+                        </div>
+                        <div>
+                            <StorageBar></StorageBar>
+                        </div>
+                    </>
+                )}
+
+                {!Auth.Check(this.props.isLogin) && (
+                    <div>
+                        <ListItem
+                            button
+                            key="登录"
+                            onClick={() => this.props.history.push("/login")}
+                        >
+                            <ListItemIcon>
+                                <AccountArrowRight
+                                    className={classes.iconFix}
+                                />
+                            </ListItemIcon>
+                            <ListItemText primary={t("login.signIn")} />
+                        </ListItem>
+                        {this.props.registerEnabled && (
+                            <ListItem
+                                button
+                                key="注册"
+                                onClick={() =>
+                                    this.props.history.push("/signup")
+                                }
+                            >
+                                <ListItemIcon>
+                                    <AccountPlus className={classes.iconFix} />
+                                </ListItemIcon>
+                                <ListItemText primary={t("login.signUp")} />
+                            </ListItem>
+                        )}
+                    </div>
+                )}
+            </div>
+        );
+        const iOS =
+            process.browser && /iPad|iPhone|iPod/.test(navigator.userAgent);
+        return (
+            <div>
+                <AppBar
+                    position="fixed"
+                    className={classes.appBar}
+                    color={
+                        this.props.theme.palette.type !== "dark" &&
+                        this.props.selected.length === 0
+                            ? "primary"
+                            : "default"
+                    }
+                >
+                    <Toolbar>
+                        {this.props.selected.length === 0 && (
+                            <IconButton
+                                color="inherit"
+                                aria-label="Open drawer"
+                                onClick={this.handleDrawerToggle}
+                                className={classes.menuButton}
+                            >
+                                <MenuIcon />
+                            </IconButton>
+                        )}
+                        {this.props.selected.length === 0 && (
+                            <IconButton
+                                color="inherit"
+                                aria-label="Open drawer"
+                                onClick={() =>
+                                    this.props.handleDesktopToggle(
+                                        !this.props.desktopOpen
+                                    )
+                                }
+                                className={classes.menuButtonDesktop}
+                            >
+                                <MenuIcon />
+                            </IconButton>
+                        )}
+                        {this.props.selected.length > 0 &&
+                            (isHomePage ||
+                                pathHelper.isSharePage(
+                                    this.props.location.pathname
+                                )) && (
+                                <Grow in={this.props.selected.length > 0}>
+                                    <IconButton
+                                        color="inherit"
+                                        className={classes.menuIcon}
+                                        onClick={() =>
+                                            this.props.setSelectedTarget([])
+                                        }
+                                    >
+                                        <BackIcon />
+                                    </IconButton>
+                                </Grow>
+                            )}
+                        {this.props.selected.length === 0 && (
+                            <Typography
+                                variant="h6"
+                                color="inherit"
+                                style={{
+                                    cursor: "pointer",
+                                }}
+                                noWrap
+                                onClick={() => {
+                                    this.props.history.push("/");
+                                }}
+                            >
+                                {this.props.subTitle
+                                    ? this.props.subTitle
+                                    : this.props.title}
+                            </Typography>
+                        )}
+
+                        {!this.props.isMultiple &&
+                            (this.props.withFile || this.props.withFolder) &&
+                            !pathHelper.isMobile() && (
+                                <Typography variant="h6" color="inherit" noWrap>
+                                    {this.props.selected[0].name}{" "}
+                                    {this.props.withFile &&
+                                        (isHomePage ||
+                                            pathHelper.isSharePage(
+                                                this.props.location.pathname
+                                            )) &&
+                                        "(" +
+                                            sizeToString(
+                                                this.props.selected[0].size
+                                            ) +
+                                            ")"}
+                                </Typography>
+                            )}
+
+                        {this.props.selected.length > 1 &&
+                            !pathHelper.isMobile() && (
+                                <Typography variant="h6" color="inherit" noWrap>
+                                    {t("navbar.objectsSelected", {
+                                        num: this.props.selected.length,
+                                    })}
+                                </Typography>
+                            )}
+                        {this.props.selected.length === 0 && <SezrchBar />}
+                        <div className={classes.grow} />
+                        {this.props.selected.length > 0 &&
+                            (isHomePage || isSharePage) && (
+                                <div className={classes.sectionForFile}>
+                                    {!this.props.isMultiple &&
+                                        this.props.withFile &&
+                                        isPreviewable(
+                                            this.props.selected[0].name
+                                        ) && (
+                                            <Grow
+                                                in={
+                                                    !this.props.isMultiple &&
+                                                    this.props.withFile &&
+                                                    isPreviewable(
+                                                        this.props.selected[0]
+                                                            .name
+                                                    )
+                                                }
+                                            >
+                                                <Tooltip
+                                                    title={t(
+                                                        "fileManager.open"
+                                                    )}
+                                                >
+                                                    <IconButton
+                                                        color="inherit"
+                                                        onClick={() =>
+                                                            this.props.openPreview(
+                                                                this.props
+                                                                    .shareInfo
+                                                            )
+                                                        }
+                                                    >
+                                                        <OpenIcon />
+                                                    </IconButton>
+                                                </Tooltip>
+                                            </Grow>
+                                        )}
+                                    {!this.props.isMultiple &&
+                                        this.props.withFile && (
+                                            <Grow
+                                                in={
+                                                    !this.props.isMultiple &&
+                                                    this.props.withFile
+                                                }
+                                            >
+                                                <Tooltip
+                                                    title={t(
+                                                        "fileManager.download"
+                                                    )}
+                                                >
+                                                    <IconButton
+                                                        color="inherit"
+                                                        onClick={() =>
+                                                            this.openDownload()
+                                                        }
+                                                    >
+                                                        <DownloadIcon />
+                                                    </IconButton>
+                                                </Tooltip>
+                                            </Grow>
+                                        )}
+                                    {(this.props.isMultiple ||
+                                        this.props.withFolder) &&
+                                        window.showDirectoryPicker &&
+                                        window.isSecureContext && (
+                                            <Grow
+                                                in={
+                                                    (this.props.isMultiple ||
+                                                        this.props
+                                                            .withFolder) &&
+                                                    window.showDirectoryPicker &&
+                                                    window.isSecureContext
+                                                }
+                                            >
+                                                <Tooltip
+                                                    title={t(
+                                                        "fileManager.download"
+                                                    )}
+                                                >
+                                                    <IconButton
+                                                        color="inherit"
+                                                        onClick={() =>
+                                                            this.openDirectoryDownload()
+                                                        }
+                                                    >
+                                                        <FolderDownload />
+                                                    </IconButton>
+                                                </Tooltip>
+                                            </Grow>
+                                        )}
+                                    {(this.props.isMultiple ||
+                                        this.props.withFolder) && (
+                                        <Grow
+                                            in={
+                                                this.props.isMultiple ||
+                                                this.props.withFolder
+                                            }
+                                        >
+                                            <Tooltip
+                                                title={t(
+                                                    "fileManager.batchDownload"
+                                                )}
+                                            >
+                                                <IconButton
+                                                    color="inherit"
+                                                    disableClickAway
+                                                    onClick={() =>
+                                                        this.archiveDownload()
+                                                    }
+                                                >
+                                                    <DownloadIcon />
+                                                </IconButton>
+                                            </Tooltip>
+                                        </Grow>
+                                    )}
+                                    {!this.props.isMultiple &&
+                                        !pathHelper.isMobile() &&
+                                        !isSharePage && (
+                                            <Grow in={!this.props.isMultiple}>
+                                                <Tooltip
+                                                    title={t(
+                                                        "fileManager.share"
+                                                    )}
+                                                >
+                                                    <IconButton
+                                                        color="inherit"
+                                                        onClick={() =>
+                                                            this.props.openShareDialog()
+                                                        }
+                                                    >
+                                                        <ShareIcon />
+                                                    </IconButton>
+                                                </Tooltip>
+                                            </Grow>
+                                        )}
+                                    {!this.props.isMultiple && !isSharePage && (
+                                        <Grow in={!this.props.isMultiple}>
+                                            <Tooltip
+                                                title={t("fileManager.rename")}
+                                            >
+                                                <IconButton
+                                                    color="inherit"
+                                                    onClick={() =>
+                                                        this.props.openRenameDialog()
+                                                    }
+                                                >
+                                                    <RenameIcon />
+                                                </IconButton>
+                                            </Tooltip>
+                                        </Grow>
+                                    )}
+                                    {!isSharePage && (
+                                        <div style={{ display: "flex" }}>
+                                            {!pathHelper.isMobile() && (
+                                                <Grow
+                                                    in={
+                                                        this.props.selected
+                                                            .length !== 0 &&
+                                                        !pathHelper.isMobile()
+                                                    }
+                                                >
+                                                    <Tooltip
+                                                        title={t(
+                                                            "fileManager.move"
+                                                        )}
+                                                    >
+                                                        <IconButton
+                                                            color="inherit"
+                                                            onClick={() =>
+                                                                this.props.openMoveDialog()
+                                                            }
+                                                        >
+                                                            <MoveIcon />
+                                                        </IconButton>
+                                                    </Tooltip>
+                                                </Grow>
+                                            )}
+
+                                            <Grow
+                                                in={
+                                                    this.props.selected
+                                                        .length !== 0
+                                                }
+                                            >
+                                                <Tooltip
+                                                    title={t(
+                                                        "fileManager.delete"
+                                                    )}
+                                                >
+                                                    <IconButton
+                                                        color="inherit"
+                                                        onClick={() =>
+                                                            this.props.openRemoveDialog()
+                                                        }
+                                                    >
+                                                        <DeleteIcon />
+                                                    </IconButton>
+                                                </Tooltip>
+                                            </Grow>
+
+                                            {pathHelper.isMobile() && (
+                                                <Grow
+                                                    in={
+                                                        this.props.selected
+                                                            .length !== 0 &&
+                                                        pathHelper.isMobile()
+                                                    }
+                                                >
+                                                    <Tooltip
+                                                        title={t(
+                                                            "fileManager.moreActions"
+                                                        )}
+                                                    >
+                                                        <IconButton
+                                                            color="inherit"
+                                                            onClick={() =>
+                                                                this.props.changeContextMenu(
+                                                                    "file",
+                                                                    true
+                                                                )
+                                                            }
+                                                        >
+                                                            <MoreHoriz />
+                                                        </IconButton>
+                                                    </Tooltip>
+                                                </Grow>
+                                            )}
+                                        </div>
+                                    )}
+                                </div>
+                            )}
+                        {this.props.selected.length <= 1 &&
+                            !(!this.props.isMultiple && this.props.withFile) &&
+                            this.props.audioPreviewPlayingName != null && (
+                                <IconButton
+                                    title={t("navbar.music")}
+                                    className={classes.sideButton}
+                                    onClick={this.props.audioPreviewOpen}
+                                    color={"inherit"}
+                                >
+                                    <MusicNote fontSize={"default"} />
+                                </IconButton>
+                            )}
+
+                        {this.props.selected.length === 0 && <UserAvatar />}
+                        {this.props.selected.length === 0 &&
+                            pathHelper.isMobile() && (
+                                <>
+                                    {isHomePage && <PolicySwitcher />}
+                                    {(isHomePage || this.props.shareInfo) && (
+                                        <SubActions inherit />
+                                    )}
+                                </>
+                            )}
+                    </Toolbar>
+                </AppBar>
+                <Uploader />
+
+                <Hidden smUp implementation="css">
+                    <SwipeableDrawer
+                        container={this.props.container}
+                        variant="temporary"
+                        classes={{
+                            paper: classes.drawerPaper,
+                        }}
+                        anchor="left"
+                        open={this.state.mobileOpen}
+                        onClose={this.handleDrawerToggle}
+                        onOpen={() =>
+                            this.setState(() => ({ mobileOpen: true }))
+                        }
+                        disableDiscovery={iOS}
+                        ModalProps={{
+                            keepMounted: true, // Better open performance on mobile.
+                        }}
+                    >
+                        {drawer}
+                    </SwipeableDrawer>
+                </Hidden>
+                <Hidden xsDown implementation="css">
+                    <Drawer
+                        classes={{
+                            paper: classes.drawerPaperDesktop,
+                        }}
+                        className={classNames(classes.drawer, {
+                            [classes.drawerOpen]: this.props.desktopOpen,
+                            [classes.drawerClose]: !this.props.desktopOpen,
+                        })}
+                        variant="persistent"
+                        anchor="left"
+                        open={this.props.desktopOpen}
+                    >
+                        <div className={classes.toolbar} />
+                        {drawer}
+                    </Drawer>
+                </Hidden>
+            </div>
+        );
+    }
+}
+NavbarCompoment.propTypes = {
+    classes: PropTypes.object.isRequired,
+    theme: PropTypes.object.isRequired,
+};
+
+const Navbar = connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(
+    withTheme(
+        withStyles(styles)(withRouter(withTranslation()(NavbarCompoment)))
+    )
+);
+
+export default Navbar;
diff --git a/src/component/Navbar/PolicySwitcher.js b/src/component/Navbar/PolicySwitcher.js
new file mode 100644
index 0000000..a3b3da3
--- /dev/null
+++ b/src/component/Navbar/PolicySwitcher.js
@@ -0,0 +1,202 @@
+import React, { useCallback } from "react";
+import {
+    Avatar,
+    CircularProgress,
+    IconButton,
+    ListItem,
+    ListItemAvatar,
+    ListItemText,
+    makeStyles,
+} from "@material-ui/core";
+import Tooltip from "@material-ui/core/Tooltip";
+import { Nas } from "mdi-material-ui";
+import Popover from "@material-ui/core/Popover";
+import API from "../../middleware/Api";
+import { useDispatch, useSelector } from "react-redux";
+import { Backup, Check } from "@material-ui/icons";
+import { blue, green } from "@material-ui/core/colors";
+import List from "@material-ui/core/List";
+import { refreshFileList, toggleSnackbar } from "../../redux/explorer";
+import Divider from "@material-ui/core/Divider";
+import Box from "@material-ui/core/Box";
+import Link from "@material-ui/core/Link";
+import { Link as RouterLink } from "react-router-dom";
+import pathHelper from "../../utils/page";
+import { useTranslation } from "react-i18next";
+
+const useStyles = makeStyles((theme) => ({
+    uploadFromFile: {
+        backgroundColor: blue[100],
+        color: blue[600],
+    },
+    policySelected: {
+        backgroundColor: green[100],
+        color: green[800],
+    },
+    header: {
+        padding: "8px 16px",
+        fontSize: 14,
+    },
+    list: {
+        minWidth: 300,
+        maxHeight: 600,
+        overflow: "auto",
+    },
+}));
+
+const PolicySwitcher = () => {
+    const { t } = useTranslation();
+    const [anchorEl, setAnchorEl] = React.useState(null);
+    const [policies, setPolicies] = React.useState([]);
+    const [loading, setLoading] = React.useState(null);
+    const policy = useSelector((state) => state.explorer.currentPolicy);
+    const path = useSelector((state) => state.navigator.path);
+    const dispatch = useDispatch();
+    const ToggleSnackbar = useCallback(
+        (vertical, horizontal, msg, color) =>
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color)),
+        [dispatch]
+    );
+    const RefreshFileList = useCallback(() => dispatch(refreshFileList()), [
+        dispatch,
+    ]);
+    const search = useSelector((state) => state.explorer.search);
+
+    const handleClick = (event) => {
+        if (policies.length === 0) {
+            API.get("/user/setting/policies", {})
+                .then((response) => {
+                    setPolicies(response.data);
+                })
+                .catch((error) => {
+                    ToggleSnackbar("top", "right", error.message, "error");
+                });
+        }
+        setAnchorEl(event.currentTarget);
+    };
+
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+
+    const switchTo = (id) => {
+        if (id === policy.id) {
+            handleClose();
+            return;
+        }
+        setLoading(id);
+        API.post("/webdav/mount", {
+            path: path,
+            policy: id,
+        })
+            .then(() => {
+                ToggleSnackbar(
+                    "top",
+                    "right",
+                    t("vas.folderPolicySwitched"),
+                    "success"
+                );
+                RefreshFileList();
+                setLoading(null);
+                handleClose();
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+                setLoading(null);
+                handleClose();
+            });
+    };
+
+    const open = Boolean(anchorEl);
+    const id = open ? "simple-popover" : undefined;
+
+    const classes = useStyles();
+    return (
+        <>
+            {pathHelper.isHomePage(location.pathname) && !search && (
+                <Tooltip title={t("vas.switchFolderPolicy")} placement="bottom">
+                    <IconButton onClick={handleClick} color="inherit">
+                        <Nas />
+                    </IconButton>
+                </Tooltip>
+            )}
+            <Popover
+                id={id}
+                open={open}
+                anchorEl={anchorEl}
+                onClose={handleClose}
+                anchorOrigin={{
+                    vertical: "bottom",
+                    horizontal: "center",
+                }}
+                transformOrigin={{
+                    vertical: "top",
+                    horizontal: "center",
+                }}
+            >
+                <div className={classes.header}>
+                    <Box color={"text.secondary"}>
+                        {t("vas.setPolicyForFolder")}
+                    </Box>
+                </div>
+
+                <Divider />
+                <List className={classes.list}>
+                    {policies.map((value, index) => (
+                        <ListItem
+                            button
+                            component="label"
+                            key={index}
+                            onClick={() => switchTo(value.id)}
+                        >
+                            <ListItemAvatar>
+                                {value.id === loading && (
+                                    <CircularProgress
+                                        size={35}
+                                        color="secondary"
+                                    />
+                                )}
+                                {value.id !== loading && (
+                                    <>
+                                        {value.id === policy.id && (
+                                            <Avatar
+                                                className={
+                                                    classes.policySelected
+                                                }
+                                            >
+                                                <Check />
+                                            </Avatar>
+                                        )}
+                                        {value.id !== policy.id && (
+                                            <Avatar
+                                                className={
+                                                    classes.uploadFromFile
+                                                }
+                                            >
+                                                <Backup />
+                                            </Avatar>
+                                        )}
+                                    </>
+                                )}
+                            </ListItemAvatar>
+                            <ListItemText primary={value.name} />
+                        </ListItem>
+                    ))}
+                </List>
+                <Divider />
+                <div className={classes.header}>
+                    <Link
+                        onClick={() => handleClose()}
+                        component={RouterLink}
+                        to={"/connect?tab=1"}
+                        color={"secondary"}
+                    >
+                        {t("vas.manageMount")}
+                    </Link>
+                </div>
+            </Popover>
+        </>
+    );
+};
+
+export default PolicySwitcher;
diff --git a/src/component/Navbar/SearchBar.js b/src/component/Navbar/SearchBar.js
new file mode 100644
index 0000000..21a5be5
--- /dev/null
+++ b/src/component/Navbar/SearchBar.js
@@ -0,0 +1,283 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import SearchIcon from "@material-ui/icons/Search";
+import { fade } from "@material-ui/core/styles/colorManipulator";
+import FileIcon from "@material-ui/icons/InsertDriveFile";
+import ShareIcon from "@material-ui/icons/Share";
+import { connect } from "react-redux";
+
+import {
+    Fade,
+    InputBase,
+    ListItemIcon,
+    ListItemText,
+    MenuItem,
+    Paper,
+    Popper,
+    Typography,
+    withStyles,
+} from "@material-ui/core";
+import { withRouter } from "react-router";
+import pathHelper from "../../utils/page";
+import { configure, HotKeys } from "react-hotkeys";
+import { searchMyFile } from "../../redux/explorer";
+import FolderIcon from "@material-ui/icons/Folder";
+import { Trans, withTranslation } from "react-i18next";
+
+configure({
+    ignoreTags: [],
+});
+
+const mapStateToProps = (state) => {
+    return {
+        path: state.navigator.path,
+        search: state.explorer.search,
+    };
+};
+
+const mapDispatchToProps = (dispatch) => {
+    return {
+        searchMyFile: (keywords, path) => {
+            dispatch(searchMyFile(keywords, path));
+        },
+    };
+};
+
+const styles = (theme) => ({
+    search: {
+        [theme.breakpoints.down("sm")]: {
+            display: "none",
+        },
+        position: "relative",
+        borderRadius: theme.shape.borderRadius,
+        backgroundColor: fade(theme.palette.common.white, 0.15),
+        "&:hover": {
+            backgroundColor: fade(theme.palette.common.white, 0.25),
+        },
+        marginRight: theme.spacing(2),
+        marginLeft: 0,
+        width: "100%",
+        [theme.breakpoints.up("sm")]: {
+            marginLeft: theme.spacing(7.2),
+            width: "auto",
+        },
+    },
+    searchIcon: {
+        width: theme.spacing(9),
+        height: "100%",
+        position: "absolute",
+        pointerEvents: "none",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    inputRoot: {
+        color: "inherit",
+        width: "100%",
+    },
+    inputInput: {
+        paddingTop: theme.spacing(1),
+        paddingRight: theme.spacing(1),
+        paddingBottom: theme.spacing(1),
+        paddingLeft: theme.spacing(7),
+        transition: theme.transitions.create("width"),
+        width: "100%",
+        [theme.breakpoints.up("md")]: {
+            width: 200,
+            "&:focus": {
+                width: 300,
+            },
+        },
+    },
+    suggestBox: {
+        zIndex: "9999",
+        width: 364,
+    },
+});
+
+const keyMap = {
+    SEARCH: "enter",
+};
+
+class SearchBarCompoment extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            anchorEl: null,
+            input: "",
+        };
+    }
+
+    handlers = {
+        SEARCH: (e) => {
+            if (pathHelper.isHomePage(this.props.location.pathname)) {
+                this.searchMyFile("")();
+            } else {
+                this.searchShare();
+            }
+            e.target.blur();
+        },
+    };
+
+    handleChange = (event) => {
+        const { currentTarget } = event;
+        this.input = event.target.value;
+        this.setState({
+            anchorEl: currentTarget,
+            input: event.target.value,
+        });
+    };
+
+    cancelSuggest = () => {
+        this.setState({
+            input: "",
+        });
+    };
+
+    searchMyFile = (path) => () => {
+        this.props.searchMyFile("keywords/" + this.input, path);
+    };
+
+    searchShare = () => {
+        this.props.history.push(
+            "/search?keywords=" + encodeURIComponent(this.input)
+        );
+    };
+
+    render() {
+        const { classes, t } = this.props;
+        const { anchorEl } = this.state;
+        const id = this.state.input !== "" ? "simple-popper" : null;
+        const isHomePage = pathHelper.isHomePage(this.props.location.pathname);
+
+        return (
+            <div className={classes.search}>
+                <div className={classes.searchIcon}>
+                    <SearchIcon />
+                </div>
+                <HotKeys keyMap={keyMap} handlers={this.handlers}>
+                    <InputBase
+                        placeholder={t("navbar.searchPlaceholder")}
+                        classes={{
+                            root: classes.inputRoot,
+                            input: classes.inputInput,
+                        }}
+                        onChange={this.handleChange}
+                        onBlur={this.cancelSuggest}
+                        value={this.state.input}
+                    />
+                </HotKeys>
+                <Popper
+                    id={id}
+                    open={this.state.input !== ""}
+                    anchorEl={anchorEl}
+                    className={classes.suggestBox}
+                    transition
+                >
+                    {({ TransitionProps }) => (
+                        <Fade {...TransitionProps} timeout={350}>
+                            <Paper square={true}>
+                                {isHomePage && (
+                                    <MenuItem onClick={this.searchMyFile("")}>
+                                        <ListItemIcon className={classes.icon}>
+                                            <FileIcon />
+                                        </ListItemIcon>
+                                        <ListItemText
+                                            classes={{
+                                                primary: classes.primary,
+                                            }}
+                                            primary={
+                                                <Typography noWrap>
+                                                    <Trans
+                                                        i18nKey="navbar.searchInFiles"
+                                                        values={{
+                                                            name: this.state
+                                                                .input,
+                                                        }}
+                                                        components={[
+                                                            <strong key={0} />,
+                                                        ]}
+                                                    />
+                                                </Typography>
+                                            }
+                                        />
+                                    </MenuItem>
+                                )}
+
+                                {isHomePage &&
+                                    this.props.path !== "/" &&
+                                    !this.props.search && (
+                                        <MenuItem
+                                            onClick={this.searchMyFile(
+                                                this.props.path
+                                            )}
+                                        >
+                                            <ListItemIcon
+                                                className={classes.icon}
+                                            >
+                                                <FolderIcon />
+                                            </ListItemIcon>
+                                            <ListItemText
+                                                classes={{
+                                                    primary: classes.primary,
+                                                }}
+                                                primary={
+                                                    <Typography noWrap>
+                                                        <Trans
+                                                            i18nKey="navbar.searchInFolders"
+                                                            values={{
+                                                                name: this.state
+                                                                    .input,
+                                                            }}
+                                                            components={[
+                                                                <strong
+                                                                    key={0}
+                                                                />,
+                                                            ]}
+                                                        />
+                                                    </Typography>
+                                                }
+                                            />
+                                        </MenuItem>
+                                    )}
+
+                                <MenuItem onClick={this.searchShare}>
+                                    <ListItemIcon className={classes.icon}>
+                                        <ShareIcon />
+                                    </ListItemIcon>
+                                    <ListItemText
+                                        classes={{ primary: classes.primary }}
+                                        primary={
+                                            <Typography noWrap>
+                                                <Trans
+                                                    i18nKey="navbar.searchInShares"
+                                                    values={{
+                                                        name: this.state.input,
+                                                    }}
+                                                    components={[
+                                                        <strong key={0} />,
+                                                    ]}
+                                                />
+                                            </Typography>
+                                        }
+                                    />
+                                </MenuItem>
+                            </Paper>
+                        </Fade>
+                    )}
+                </Popper>
+            </div>
+        );
+    }
+}
+
+SearchBarCompoment.propTypes = {
+    classes: PropTypes.object.isRequired,
+};
+
+const SearchBar = connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(withStyles(styles)(withRouter(withTranslation()(SearchBarCompoment))));
+
+export default SearchBar;
diff --git a/src/component/Navbar/StorageBar.js b/src/component/Navbar/StorageBar.js
new file mode 100644
index 0000000..8973c32
--- /dev/null
+++ b/src/component/Navbar/StorageBar.js
@@ -0,0 +1,208 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import StorageIcon from "@material-ui/icons/Storage";
+import { connect } from "react-redux";
+import API from "../../middleware/Api";
+import { sizeToString } from "../../utils";
+
+import {
+    Divider,
+    LinearProgress,
+    Tooltip,
+    Typography,
+    withStyles,
+} from "@material-ui/core";
+import ButtonBase from "@material-ui/core/ButtonBase";
+import Link from "@material-ui/core/Link";
+import { withRouter } from "react-router";
+import { toggleSnackbar } from "../../redux/explorer";
+import { Link as RouterLink } from "react-router-dom";
+import { withTranslation } from "react-i18next";
+
+const mapStateToProps = (state) => {
+    return {
+        refresh: state.viewUpdate.storageRefresh,
+        isLogin: state.viewUpdate.isLogin,
+    };
+};
+
+const mapDispatchToProps = (dispatch) => {
+    return {
+        toggleSnackbar: (vertical, horizontal, msg, color) => {
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color));
+        },
+    };
+};
+
+const styles = (theme) => ({
+    iconFix: {
+        marginLeft: "32px",
+        marginRight: "17px",
+        color: theme.palette.text.secondary,
+        marginTop: "2px",
+    },
+    textFix: {
+        padding: " 0 0 0 16px",
+    },
+    storageContainer: {
+        display: "flex",
+        marginTop: "15px",
+        textAlign: "left",
+        marginBottom: "11px",
+    },
+    detail: {
+        width: "100%",
+        marginRight: "35px",
+    },
+    info: {
+        width: "131px",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        [theme.breakpoints.down("xs")]: {
+            width: "162px",
+        },
+        marginTop: "5px",
+    },
+    bar: {
+        marginTop: "5px",
+    },
+    stickFooter: {
+        backgroundColor: theme.palette.background.paper,
+    },
+});
+
+// TODO 使用 hooks 重构
+class StorageBarCompoment extends Component {
+    state = {
+        percent: 0,
+        used: null,
+        total: null,
+        showExpand: false,
+    };
+
+    firstLoad = true;
+
+    componentDidMount = () => {
+        if (this.firstLoad && this.props.isLogin) {
+            this.firstLoad = !this.firstLoad;
+            this.updateStatus();
+        }
+    };
+
+    componentWillUnmount() {
+        this.firstLoad = false;
+    }
+
+    UNSAFE_componentWillReceiveProps = (nextProps) => {
+        if (
+            (this.props.isLogin && this.props.refresh !== nextProps.refresh) ||
+            (this.props.isLogin !== nextProps.isLogin && nextProps.isLogin)
+        ) {
+            this.updateStatus();
+        }
+    };
+
+    updateStatus = () => {
+        let percent = 0;
+        API.get("/user/storage")
+            .then((response) => {
+                if (response.data.used / response.data.total >= 1) {
+                    percent = 100;
+                    this.props.toggleSnackbar(
+                        "top",
+                        "right",
+                        this.props.t("vas.exceedQuota"),
+                        "warning"
+                    );
+                } else {
+                    percent = (response.data.used / response.data.total) * 100;
+                }
+                this.setState({
+                    percent: percent,
+                    used: sizeToString(response.data.used),
+                    total: sizeToString(response.data.total),
+                });
+            })
+            // eslint-disable-next-line @typescript-eslint/no-empty-function
+            .catch(() => {});
+    };
+
+    render() {
+        const { classes, t } = this.props;
+        return (
+            <div
+                onMouseEnter={() => this.setState({ showExpand: true })}
+                onMouseLeave={() => this.setState({ showExpand: false })}
+                className={classes.stickFooter}
+            >
+                <Divider />
+                <ButtonBase onClick={() => this.props.history.push("/quota")}>
+                    <div className={classes.storageContainer}>
+                        <StorageIcon className={classes.iconFix} />
+                        <div className={classes.detail}>
+                            <Typography variant={"subtitle2"}>
+                                {t("navbar.storage") + " "}
+                                {this.state.showExpand && (
+                                    <Link
+                                        component={RouterLink}
+                                        color={"secondary"}
+                                        to={"/buy"}
+                                    >
+                                        {t("vas.extendStorage")}
+                                    </Link>
+                                )}
+                            </Typography>
+
+                            <LinearProgress
+                                className={classes.bar}
+                                color="secondary"
+                                variant="determinate"
+                                value={this.state.percent}
+                            />
+                            <div className={classes.info}>
+                                <Tooltip
+                                    title={t("navbar.storageDetail", {
+                                        used:
+                                            this.state.used === null
+                                                ? " -- "
+                                                : this.state.used,
+                                        total:
+                                            this.state.total === null
+                                                ? " -- "
+                                                : this.state.total,
+                                    })}
+                                    placement="top"
+                                >
+                                    <Typography
+                                        variant="caption"
+                                        noWrap
+                                        color="textSecondary"
+                                    >
+                                        {this.state.used === null
+                                            ? " -- "
+                                            : this.state.used}
+                                        {" / "}
+                                        {this.state.total === null
+                                            ? " -- "
+                                            : this.state.total}
+                                    </Typography>
+                                </Tooltip>
+                            </div>
+                        </div>
+                    </div>
+                </ButtonBase>
+            </div>
+        );
+    }
+}
+
+StorageBarCompoment.propTypes = {
+    classes: PropTypes.object.isRequired,
+};
+
+const StorageBar = connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(withStyles(styles)(withRouter(withTranslation()(StorageBarCompoment))));
+
+export default StorageBar;
diff --git a/src/component/Navbar/UserAvatar.js b/src/component/Navbar/UserAvatar.js
new file mode 100644
index 0000000..789c850
--- /dev/null
+++ b/src/component/Navbar/UserAvatar.js
@@ -0,0 +1,178 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import SettingIcon from "@material-ui/icons/Settings";
+import UserAvatarPopover from "./UserAvatarPopover";
+import { AccountCircle } from "mdi-material-ui";
+import Auth from "../../middleware/Auth";
+import {
+    Avatar,
+    Grow,
+    IconButton,
+    Tooltip,
+    withStyles,
+} from "@material-ui/core";
+import { withRouter } from "react-router-dom";
+import pathHelper from "../../utils/page";
+import DarkModeSwitcher from "./DarkModeSwitcher";
+import PolicySwitcher from "./PolicySwitcher";
+import { Home } from "@material-ui/icons";
+import { setUserPopover } from "../../redux/explorer";
+import { withTranslation } from "react-i18next";
+
+const mapStateToProps = (state) => {
+    return {
+        selected: state.explorer.selected,
+        isMultiple: state.explorer.selectProps.isMultiple,
+        withFolder: state.explorer.selectProps.withFolder,
+        withFile: state.explorer.selectProps.withFile,
+        isLogin: state.viewUpdate.isLogin,
+    };
+};
+
+const mapDispatchToProps = (dispatch) => {
+    return {
+        setUserPopover: (anchor) => {
+            dispatch(setUserPopover(anchor));
+        },
+    };
+};
+
+const styles = (theme) => ({
+    mobileHidden: {
+        [theme.breakpoints.down("xs")]: {
+            display: "none",
+        },
+        whiteSpace: "nowrap",
+    },
+    avatar: {
+        width: "30px",
+        height: "30px",
+    },
+    header: {
+        display: "flex",
+        padding: "20px 20px 20px 20px",
+    },
+    largeAvatar: {
+        height: "90px",
+        width: "90px",
+    },
+    info: {
+        marginLeft: "10px",
+        width: "139px",
+    },
+    badge: {
+        marginTop: "10px",
+    },
+    visitorMenu: {
+        width: 200,
+    },
+});
+
+class UserAvatarCompoment extends Component {
+    state = {
+        anchorEl: null,
+    };
+
+    showUserInfo = (e) => {
+        this.props.setUserPopover(e.currentTarget);
+    };
+
+    handleClose = () => {
+        this.setState({
+            anchorEl: null,
+        });
+    };
+
+    openURL = (url) => {
+        window.location.href = url;
+    };
+
+    returnHome = () => {
+        window.location.href = "/home";
+    };
+
+    render() {
+        const { classes, t } = this.props;
+        const loginCheck = Auth.Check(this.props.isLogin);
+        const user = Auth.GetUser(this.props.isLogin);
+        const isAdminPage = pathHelper.isAdminPage(
+            this.props.location.pathname
+        );
+
+        return (
+            <div className={classes.mobileHidden}>
+                <Grow
+                    in={
+                        this.props.selected.length <= 1 &&
+                        !(!this.props.isMultiple && this.props.withFile)
+                    }
+                >
+                    <div>
+                        {!isAdminPage && (
+                            <>
+                                <DarkModeSwitcher position="top" />
+                                {loginCheck && (
+                                    <>
+                                        <PolicySwitcher />
+                                        <Tooltip
+                                            title={t("navbar.setting")}
+                                            placement="bottom"
+                                        >
+                                            <IconButton
+                                                onClick={() =>
+                                                    this.props.history.push(
+                                                        "/setting?"
+                                                    )
+                                                }
+                                                color="inherit"
+                                            >
+                                                <SettingIcon />
+                                            </IconButton>
+                                        </Tooltip>
+                                    </>
+                                )}
+                            </>
+                        )}
+                        {isAdminPage && (
+                            <Tooltip
+                                title={t("navbar.backToHomepage")}
+                                placement="bottom"
+                            >
+                                <IconButton
+                                    color="inherit"
+                                    onClick={this.returnHome}
+                                >
+                                    <Home />
+                                </IconButton>
+                            </Tooltip>
+                        )}
+                        <IconButton color="inherit" onClick={this.showUserInfo}>
+                            {!loginCheck && <AccountCircle />}
+                            {loginCheck && (
+                                <Avatar
+                                    src={
+                                        "/api/v3/user/avatar/" + user.id + "/s"
+                                    }
+                                    className={classes.avatar}
+                                />
+                            )}
+                        </IconButton>{" "}
+                    </div>
+                </Grow>
+                <UserAvatarPopover />
+            </div>
+        );
+    }
+}
+
+UserAvatarCompoment.propTypes = {
+    classes: PropTypes.object.isRequired,
+};
+
+const UserAvatar = connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(withStyles(styles)(withRouter(withTranslation()(UserAvatarCompoment))));
+
+export default UserAvatar;
diff --git a/src/component/Navbar/UserAvatarPopover.js b/src/component/Navbar/UserAvatarPopover.js
new file mode 100644
index 0000000..a8ca6e4
--- /dev/null
+++ b/src/component/Navbar/UserAvatarPopover.js
@@ -0,0 +1,260 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import {
+    AccountArrowRight,
+    AccountPlus,
+    DesktopMacDashboard,
+    HomeAccount,
+    LogoutVariant,
+} from "mdi-material-ui";
+import { withRouter } from "react-router-dom";
+import Auth from "../../middleware/Auth";
+import {
+    Avatar,
+    Chip,
+    Divider,
+    ListItemIcon,
+    MenuItem,
+    Popover,
+    Typography,
+    withStyles,
+} from "@material-ui/core";
+import API from "../../middleware/Api";
+import pathHelper from "../../utils/page";
+import {
+    setSessionStatus,
+    setUserPopover,
+    toggleSnackbar,
+} from "../../redux/explorer";
+import { withTranslation } from "react-i18next";
+
+const mapStateToProps = (state) => {
+    return {
+        anchorEl: state.viewUpdate.userPopoverAnchorEl,
+        registerEnabled: state.siteConfig.registerEnabled,
+    };
+};
+
+const mapDispatchToProps = (dispatch) => {
+    return {
+        setUserPopover: (anchor) => {
+            dispatch(setUserPopover(anchor));
+        },
+        toggleSnackbar: (vertical, horizontal, msg, color) => {
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color));
+        },
+        setSessionStatus: (status) => {
+            dispatch(setSessionStatus(status));
+        },
+    };
+};
+const styles = () => ({
+    avatar: {
+        width: "30px",
+        height: "30px",
+    },
+    header: {
+        display: "flex",
+        padding: "20px 20px 20px 20px",
+    },
+    largeAvatar: {
+        height: "90px",
+        width: "90px",
+    },
+    info: {
+        marginLeft: "10px",
+        width: "139px",
+    },
+    badge: {
+        marginTop: "10px",
+    },
+    visitorMenu: {
+        width: 200,
+    },
+});
+
+class UserAvatarPopoverCompoment extends Component {
+    handleClose = () => {
+        this.props.setUserPopover(null);
+    };
+
+    openURL = (url) => {
+        window.location.href = url;
+    };
+
+    sigOut = () => {
+        API.delete("/user/session/")
+            .then(() => {
+                this.props.toggleSnackbar(
+                    "top",
+                    "right",
+                    this.props.t("login.loggedOut"),
+                    "success"
+                );
+                Auth.signout();
+                window.location.reload();
+                this.props.setSessionStatus(false);
+            })
+            .catch((error) => {
+                this.props.toggleSnackbar(
+                    "top",
+                    "right",
+                    error.message,
+                    "warning"
+                );
+            })
+            .then(() => {
+                this.handleClose();
+            });
+    };
+
+    render() {
+        const { classes, t } = this.props;
+        const user = Auth.GetUser();
+        const isAdminPage = pathHelper.isAdminPage(
+            this.props.location.pathname
+        );
+
+        return (
+            <Popover
+                open={this.props.anchorEl !== null}
+                onClose={this.handleClose}
+                anchorEl={this.props.anchorEl}
+                anchorOrigin={{
+                    vertical: "bottom",
+                    horizontal: "right",
+                }}
+                transformOrigin={{
+                    vertical: "top",
+                    horizontal: "right",
+                }}
+            >
+                {!Auth.Check() && (
+                    <div className={classes.visitorMenu}>
+                        <Divider />
+                        <MenuItem
+                            onClick={() => this.props.history.push("/login")}
+                        >
+                            <ListItemIcon>
+                                <AccountArrowRight />
+                            </ListItemIcon>
+                            {t("login.signIn")}
+                        </MenuItem>
+                        {this.props.registerEnabled && (
+                            <MenuItem
+                                onClick={() =>
+                                    this.props.history.push("/signup")
+                                }
+                            >
+                                <ListItemIcon>
+                                    <AccountPlus />
+                                </ListItemIcon>
+                                {t("login.signUp")}
+                            </MenuItem>
+                        )}
+                    </div>
+                )}
+                {Auth.Check() && (
+                    <div>
+                        <div className={classes.header}>
+                            <div className={classes.largeAvatarContainer}>
+                                <Avatar
+                                    className={classes.largeAvatar}
+                                    src={
+                                        "/api/v3/user/avatar/" + user.id + "/l"
+                                    }
+                                />
+                            </div>
+                            <div className={classes.info}>
+                                <Typography noWrap>{user.nickname}</Typography>
+                                <Typography
+                                    color="textSecondary"
+                                    style={{
+                                        fontSize: "0.875rem",
+                                    }}
+                                    noWrap
+                                >
+                                    {user.user_name}
+                                </Typography>
+                                <Chip
+                                    className={classes.badge}
+                                    color={
+                                        user.group.id === 1
+                                            ? "secondary"
+                                            : "default"
+                                    }
+                                    label={user.group.name}
+                                />
+                            </div>
+                        </div>
+                        <div>
+                            <Divider />
+                            {!isAdminPage && (
+                                <MenuItem
+                                    style={{
+                                        padding: " 11px 16px 11px 16px",
+                                    }}
+                                    onClick={() => {
+                                        this.handleClose();
+                                        this.props.history.push(
+                                            "/profile/" + user.id
+                                        );
+                                    }}
+                                >
+                                    <ListItemIcon>
+                                        <HomeAccount />
+                                    </ListItemIcon>
+                                    {t("navbar.myProfile")}
+                                </MenuItem>
+                            )}
+                            {user.group.id === 1 && (
+                                <MenuItem
+                                    style={{
+                                        padding: " 11px 16px 11px 16px",
+                                    }}
+                                    onClick={() => {
+                                        this.handleClose();
+                                        this.props.history.push("/admin/home");
+                                    }}
+                                >
+                                    <ListItemIcon>
+                                        <DesktopMacDashboard />
+                                    </ListItemIcon>
+                                    {t("navbar.dashboard")}
+                                </MenuItem>
+                            )}
+
+                            <MenuItem
+                                style={{
+                                    padding: " 11px 16px 11px 16px",
+                                }}
+                                onClick={this.sigOut}
+                            >
+                                <ListItemIcon>
+                                    <LogoutVariant />
+                                </ListItemIcon>
+                                {t("login.logout")}
+                            </MenuItem>
+                        </div>
+                    </div>
+                )}
+            </Popover>
+        );
+    }
+}
+
+UserAvatarPopoverCompoment.propTypes = {
+    classes: PropTypes.object.isRequired,
+};
+
+const UserAvatarPopover = connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(
+    withStyles(styles)(
+        withRouter(withTranslation()(UserAvatarPopoverCompoment))
+    )
+);
+
+export default UserAvatarPopover;
diff --git a/src/component/Navbar/UserInfo.js b/src/component/Navbar/UserInfo.js
new file mode 100644
index 0000000..2daeffb
--- /dev/null
+++ b/src/component/Navbar/UserInfo.js
@@ -0,0 +1,152 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import { Typography, withStyles } from "@material-ui/core";
+import Auth from "../../middleware/Auth";
+import DarkModeSwitcher from "./DarkModeSwitcher";
+import Avatar from "@material-ui/core/Avatar";
+import { setUserPopover } from "../../redux/explorer";
+import { withTranslation } from "react-i18next";
+
+const mapStateToProps = (state) => {
+    return {
+        isLogin: state.viewUpdate.isLogin,
+    };
+};
+
+const mapDispatchToProps = (dispatch) => {
+    return {
+        setUserPopover: (anchor) => {
+            dispatch(setUserPopover(anchor));
+        },
+    };
+};
+
+const styles = (theme) => ({
+    userNav: {
+        height: "170px",
+        backgroundColor: theme.palette.primary.main,
+        padding: "20px 20px 2em",
+        backgroundImage:
+            "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900'%3E%3Cpolygon fill='" +
+            theme.palette.primary.light.replace("#", "%23") +
+            "' points='957 450 539 900 1396 900'/%3E%3Cpolygon fill='" +
+            theme.palette.primary.dark.replace("#", "%23") +
+            "' points='957 450 872.9 900 1396 900'/%3E%3Cpolygon fill='" +
+            theme.palette.secondary.main.replace("#", "%23") +
+            "' points='-60 900 398 662 816 900'/%3E%3Cpolygon fill='" +
+            theme.palette.secondary.dark.replace("#", "%23") +
+            "' points='337 900 398 662 816 900'/%3E%3Cpolygon fill='" +
+            theme.palette.secondary.light.replace("#", "%23") +
+            "' points='1203 546 1552 900 876 900'/%3E%3Cpolygon fill='" +
+            theme.palette.secondary.main.replace("#", "%23") +
+            "' points='1203 546 1552 900 1162 900'/%3E%3Cpolygon fill='" +
+            theme.palette.primary.dark.replace("#", "%23") +
+            "' points='641 695 886 900 367 900'/%3E%3Cpolygon fill='" +
+            theme.palette.primary.main.replace("#", "%23") +
+            "' points='587 900 641 695 886 900'/%3E%3Cpolygon fill='" +
+            theme.palette.secondary.light.replace("#", "%23") +
+            "' points='1710 900 1401 632 1096 900'/%3E%3Cpolygon fill='" +
+            theme.palette.secondary.dark.replace("#", "%23") +
+            "' points='1710 900 1401 632 1365 900'/%3E%3Cpolygon fill='" +
+            theme.palette.secondary.main.replace("#", "%23") +
+            "' points='1210 900 971 687 725 900'/%3E%3Cpolygon fill='" +
+            theme.palette.secondary.dark.replace("#", "%23") +
+            "' points='943 900 1210 900 971 687'/%3E%3C/svg%3E\")",
+        backgroundSize: "cover",
+    },
+    avatar: {
+        display: "block",
+        width: "70px",
+        height: "70px",
+        border: " 2px solid #fff",
+        borderRadius: "50%",
+        overflow: "hidden",
+        boxShadow:
+            "0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12)",
+    },
+    avatarImg: {
+        width: "66px",
+        height: "66px",
+    },
+    nickName: {
+        color: "#fff",
+        marginTop: "15px",
+        fontSize: "17px",
+    },
+    flexAvatar: {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "flex-start",
+    },
+    groupName: {
+        color: "#ffffff",
+        opacity: "0.54",
+    },
+    storageCircle: {
+        width: "200px",
+    },
+});
+
+class UserInfoCompoment extends Component {
+    showUserInfo = (e) => {
+        this.props.setUserPopover(e.currentTarget);
+    };
+
+    render() {
+        const { classes, t } = this.props;
+        const isLogin = Auth.Check(this.props.isLogin);
+        const user = Auth.GetUser(this.props.isLogin);
+
+        return (
+            <div className={classes.userNav}>
+                <div className={classes.flexAvatar}>
+                    {/* eslint-disable-next-line */}
+                    <a onClick={this.showUserInfo} className={classes.avatar}>
+                        {isLogin && (
+                            <Avatar
+                                src={"/api/v3/user/avatar/" + user.id + "/l"}
+                                className={classes.avatarImg}
+                            />
+                        )}
+                        {!isLogin && (
+                            <Avatar
+                                src={"/api/v3/user/avatar/0/l"}
+                                className={classes.avatarImg}
+                            />
+                        )}
+                    </a>
+                    <DarkModeSwitcher position="left" />
+                </div>
+                <div className={classes.storageCircle}>
+                    <Typography
+                        className={classes.nickName}
+                        component="h2"
+                        noWrap
+                    >
+                        {isLogin ? user.nickname : t("navbar.notLoginIn")}
+                    </Typography>
+                    <Typography
+                        className={classes.groupName}
+                        component="h2"
+                        color="textSecondary"
+                        noWrap
+                    >
+                        {isLogin ? user.group.name : t("navbar.visitor")}
+                    </Typography>
+                </div>
+            </div>
+        );
+    }
+}
+
+UserInfoCompoment.propTypes = {
+    classes: PropTypes.object.isRequired,
+};
+
+const UserInfo = connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(withStyles(styles)(withTranslation()(UserInfoCompoment)));
+
+export default UserInfo;
diff --git a/src/component/Placeholder/Captcha.js b/src/component/Placeholder/Captcha.js
new file mode 100644
index 0000000..d17542a
--- /dev/null
+++ b/src/component/Placeholder/Captcha.js
@@ -0,0 +1,20 @@
+import React from "react";
+import ContentLoader from "react-content-loader";
+
+const MyLoader = () => (
+    <ContentLoader
+        height={48}
+        width={192}
+        speed={2}
+        primaryColor="#f3f3f3"
+        secondaryColor="#e4e4e4"
+    >
+        <rect x="0" y="0" rx="3" ry="3" width="100%" height="100%" />
+    </ContentLoader>
+);
+
+function captchaPlacholder() {
+    return <MyLoader />;
+}
+
+export default captchaPlacholder;
diff --git a/src/component/Placeholder/DropFile.js b/src/component/Placeholder/DropFile.js
new file mode 100644
index 0000000..bef66c1
--- /dev/null
+++ b/src/component/Placeholder/DropFile.js
@@ -0,0 +1,33 @@
+import React from "react";
+import Backdrop from "@material-ui/core/Backdrop";
+import { createStyles, makeStyles } from "@material-ui/core/styles";
+import UploadIcon from "@material-ui/icons/CloudUpload";
+import { Typography } from "@material-ui/core";
+import { useTranslation } from "react-i18next";
+
+const useStyles = makeStyles((theme) =>
+    createStyles({
+        backdrop: {
+            zIndex: theme.zIndex.drawer + 1,
+            color: "#fff",
+            flexDirection: "column",
+        },
+    })
+);
+
+export function DropFileBackground({ open }) {
+    const classes = useStyles();
+    const { t } = useTranslation();
+    return (
+        <Backdrop className={classes.backdrop} open={open}>
+            <div>
+                <UploadIcon style={{ fontSize: 80 }} />
+            </div>
+            <div>
+                <Typography variant={"h4"}>
+                    {t("uploader.dropFileHere")}
+                </Typography>
+            </div>
+        </Backdrop>
+    );
+}
diff --git a/src/component/Placeholder/ErrorBoundary.js b/src/component/Placeholder/ErrorBoundary.js
new file mode 100644
index 0000000..ae4bab9
--- /dev/null
+++ b/src/component/Placeholder/ErrorBoundary.js
@@ -0,0 +1,62 @@
+import React from "react";
+import { withStyles } from "@material-ui/core";
+import { withTranslation } from "react-i18next";
+
+const styles = {
+    h1: {
+        color: "#a4a4a4",
+        margin: "5px 0px",
+    },
+    h2: {
+        margin: "15px 0px",
+    },
+};
+
+class ErrorBoundary extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = { hasError: false, error: null, errorInfo: null };
+    }
+
+    static getDerivedStateFromError() {
+        return { hasError: true };
+    }
+
+    componentDidCatch(error, errorInfo) {
+        this.setState({
+            error: error,
+            errorInfo: errorInfo,
+        });
+    }
+
+    render() {
+        const { classes, t } = this.props;
+        if (this.state.hasError) {
+            return (
+                <>
+                    <h1 className={classes.h1}>:(</h1>
+                    <h2 className={classes.h2}>{t("renderError")}</h2>
+                    {this.state.error &&
+                        this.state.errorInfo &&
+                        this.state.errorInfo.componentStack && (
+                            <details>
+                                <summary>{t("errorDetails")}</summary>
+                                <pre>
+                                    <code>{this.state.error.toString()}</code>
+                                </pre>
+                                <pre>
+                                    <code>
+                                        {this.state.errorInfo.componentStack}
+                                    </code>
+                                </pre>
+                            </details>
+                        )}
+                </>
+            );
+        }
+
+        return this.props.children;
+    }
+}
+
+export default withTranslation(["common"])(withStyles(styles)(ErrorBoundary));
diff --git a/src/component/Placeholder/ListLoading.js b/src/component/Placeholder/ListLoading.js
new file mode 100644
index 0000000..bbca6d4
--- /dev/null
+++ b/src/component/Placeholder/ListLoading.js
@@ -0,0 +1,38 @@
+import React from "react";
+import { BulletList } from "react-content-loader";
+import { makeStyles, useTheme } from "@material-ui/core/styles";
+
+const useStyles = makeStyles((theme) => ({
+    loader: {
+        width: "100%",
+        // padding: 40,
+        // [theme.breakpoints.down("md")]: {
+        //     width: "100%",
+        //     padding: 10
+        // }
+    },
+}));
+
+const MyLoader = (props) => (
+    <BulletList
+        backgroundColor={props.dark ? "#333" : "#f5f6f7"}
+        foregroundColor={props.dark ? "#636363" : "#eee"}
+        className={props.className}
+    />
+);
+
+function ListLoading() {
+    const theme = useTheme();
+    const classes = useStyles();
+
+    return (
+        <div>
+            <MyLoader
+                dark={theme.palette.type === "dark"}
+                className={classes.loader}
+            />
+        </div>
+    );
+}
+
+export default ListLoading;
diff --git a/src/component/Placeholder/Nothing.js b/src/component/Placeholder/Nothing.js
new file mode 100644
index 0000000..6ea2e24
--- /dev/null
+++ b/src/component/Placeholder/Nothing.js
@@ -0,0 +1,50 @@
+import React from "react";
+import { PackageVariant } from "mdi-material-ui";
+import { makeStyles } from "@material-ui/core";
+
+const useStyles = makeStyles((theme) => ({
+    emptyContainer: {
+        bottom: "0",
+
+        color: theme.palette.action.disabled,
+        textAlign: "center",
+        paddingTop: "20px",
+    },
+    emptyInfoBig: {
+        fontSize: "25px",
+        color: theme.palette.action.disabled,
+    },
+    emptyInfoSmall: {
+        color: theme.palette.action.disabled,
+    },
+}));
+
+export default function Nothing({ primary, secondary, top = 20, size = 1 }) {
+    const classes = useStyles();
+    return (
+        <div
+            style={{
+                margin: `${50 * size}px auto`,
+                paddingTop: top,
+            }}
+            className={classes.emptyContainer}
+        >
+            <PackageVariant
+                style={{
+                    fontSize: 160 * size,
+                }}
+            />
+            <div
+                style={{
+                    fontSize: 25 * size,
+                }}
+                className={classes.emptyInfoBig}
+            >
+                {primary}
+            </div>
+            {secondary !== "" && (
+                <div className={classes.emptyInfoSmall}>{secondary}</div>
+            )}
+        </div>
+    );
+}
diff --git a/src/component/Placeholder/PageLoading.js b/src/component/Placeholder/PageLoading.js
new file mode 100644
index 0000000..411f662
--- /dev/null
+++ b/src/component/Placeholder/PageLoading.js
@@ -0,0 +1,44 @@
+import React from "react";
+import { Facebook } from "react-content-loader";
+import { makeStyles, useTheme } from "@material-ui/core/styles";
+
+const useStyles = makeStyles((theme) => ({
+    loader: {
+        width: "80%",
+        [theme.breakpoints.up("md")]: {
+            width: " 50%",
+        },
+
+        marginTop: 30,
+    },
+}));
+
+const MyLoader = (props) => {
+    return (
+        <Facebook
+            backgroundColor={props.dark ? "#333" : "#f5f6f7"}
+            foregroundColor={props.dark ? "#636363" : "#eee"}
+            className={props.className}
+        />
+    );
+};
+
+function PageLoading() {
+    const theme = useTheme();
+    const classes = useStyles();
+
+    return (
+        <div
+            style={{
+                textAlign: "center",
+            }}
+        >
+            <MyLoader
+                dark={theme.palette.type === "dark"}
+                className={classes.loader}
+            />
+        </div>
+    );
+}
+
+export default PageLoading;
diff --git a/src/component/Placeholder/TextLoading.js b/src/component/Placeholder/TextLoading.js
new file mode 100644
index 0000000..da264ec
--- /dev/null
+++ b/src/component/Placeholder/TextLoading.js
@@ -0,0 +1,38 @@
+import React from "react";
+import { Code } from "react-content-loader";
+import { makeStyles, useTheme } from "@material-ui/core/styles";
+
+const useStyles = makeStyles((theme) => ({
+    loader: {
+        width: "70%",
+        padding: 40,
+        [theme.breakpoints.down("md")]: {
+            width: "100%",
+            padding: 10,
+        },
+    },
+}));
+
+const MyLoader = (props) => (
+    <Code
+        backgroundColor={props.dark ? "#333" : "#f5f6f7"}
+        foregroundColor={props.dark ? "#636363" : "#eee"}
+        className={props.className}
+    />
+);
+
+function TextLoading() {
+    const theme = useTheme();
+    const classes = useStyles();
+
+    return (
+        <div>
+            <MyLoader
+                dark={theme.palette.type === "dark"}
+                className={classes.loader}
+            />
+        </div>
+    );
+}
+
+export default TextLoading;
diff --git a/src/component/Setting/AppPromotion.js b/src/component/Setting/AppPromotion.js
new file mode 100644
index 0000000..10ff334
--- /dev/null
+++ b/src/component/Setting/AppPromotion.js
@@ -0,0 +1,210 @@
+import React from "react";
+import { Grid, makeStyles, Typography } from "@material-ui/core";
+import { Trans, useTranslation } from "react-i18next";
+import { useTheme, fade } from "@material-ui/core/styles";
+import Box from "@material-ui/core/Box";
+import { useSelector } from "react-redux";
+import Link from "@material-ui/core/Link";
+import AppQRCode from "./AppQRCode";
+
+const PhoneSkeleton = () => {
+    const theme = useTheme();
+
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            x={0}
+            y={0}
+            enableBackground="new 0 0 444 908"
+            viewBox="0 0 444 908"
+        >
+            <path
+                fill={theme.palette.background.paper}
+                stroke={theme.palette.divider}
+                strokeMiterlimit="10"
+                d="M378.8.5H65.6C29.6.5.5 29.6.5 65.6V843c0 35.9 29.1 65.1 65.1 65.1h313.2c35.9 0 65.1-29.1 65.1-65.1V65.6c0-36-29.2-65.1-65.1-65.1zm46.5 838.8c0 28-21.8 50.7-48.8 50.7H67.9c-26.9 0-48.8-22.7-48.8-50.7V74.1c0-28 21.8-50.7 48.8-50.7h35.3c4 0 7.2 3.4 7.2 7.5 0 14.9 11.6 27 26 27h171.5c14.4.1 26-12 26-27 0-4.1 3.2-7.5 7.2-7.5h35.4c26.9 0 48.8 22.7 48.8 50.7v765.2z"
+            ></path>
+            <path
+                fill="none"
+                stroke={theme.palette.divider}
+                strokeMiterlimit="10"
+                strokeWidth="4"
+                d="M243.3 37.3h-46.4c-2 0-3.6-1.6-3.6-3.6h0c0-2 1.6-3.6 3.6-3.6h46.4c2 0 3.6 1.6 3.6 3.6h0c0 2-1.6 3.6-3.6 3.6z"
+            ></path>
+            <circle
+                cx="270"
+                cy="33.7"
+                r="5.5"
+                fill="none"
+                stroke={theme.palette.divider}
+                strokeMiterlimit="10"
+                strokeWidth="4"
+            ></circle>
+        </svg>
+    );
+};
+
+const useStyles = makeStyles((theme) => ({
+    phoneContainer: {
+        maxWidth: 450,
+        position: "relative",
+        marginX: "auto",
+        perspective: 1500,
+        transformStyle: "preserve-3d",
+        perspectiveOrigin: 0,
+    },
+    phoneFrame: {
+        position: "relative",
+        borderRadius: "2.75rem",
+        boxShadow: 1,
+        width: "75% !important",
+        marginX: "auto",
+        transform: "rotateY(-35deg) rotateX(15deg) translateZ(0)",
+    },
+    phoneImage: {
+        objectFit: "cover",
+        borderRadius: "2.5rem",
+        filter: theme.palette.type === "dark" ? "brightness(0.7)" : "none",
+    },
+    highlight: {
+        background: `linear-gradient(180deg, transparent 82%, ${fade(
+            theme.palette.secondary.main,
+            0.3
+        )} 0%)`,
+    },
+    bold: {
+        fontWeight: 700,
+    },
+    frameContainer: {
+        verticalAlign: "middle",
+    },
+    grid: {
+        padding: theme.spacing(2),
+        paddingTop: 0,
+        paddingBottom: theme.spacing(4),
+    },
+    "@global": {
+        ol: {
+            paddingInlineStart: 24,
+        },
+        "li::marker": {
+            fontSize: "1.25rem",
+        },
+        li: {
+            marginBottom: theme.spacing(2),
+        },
+    },
+}));
+
+export default function AppPromotion() {
+    const { t } = useTranslation("application", { keyPrefix: "setting" });
+    const theme = useTheme();
+    const title = useSelector((state) => state.siteConfig.title);
+
+    const classes = useStyles();
+
+    return (
+        <Grid container className={classes.grid}>
+            <Grid item container alignItems={"center"} xs={12} md={7}>
+                <Box>
+                    <Box marginBottom={2}>
+                        <Typography
+                            variant="h4"
+                            className={classes.bold}
+                            color="text.primary"
+                        >
+                            <Trans
+                                i18nKey={"setting.connectByiOS"}
+                                values={{ title }}
+                                components={[
+                                    <Typography
+                                        key={0}
+                                        color={"primary"}
+                                        component={"span"}
+                                        variant={"inherit"}
+                                        className={classes.highlight}
+                                    />,
+                                ]}
+                            />
+                        </Typography>
+                    </Box>
+                    <Box color="text.secondary">
+                        <ol>
+                            <li>
+                                <Typography variant="h6" component="p">
+                                    {t("downloadOurApp")}
+                                </Typography>
+                                <Box marginTop={1}>
+                                    <Box
+                                        component={"a"}
+                                        href={
+                                            "https://apps.apple.com/us/app/cloudreve/id1619480823"
+                                        }
+                                        target={"_blank"}
+                                    >
+                                        <Box
+                                            component={"img"}
+                                            src={"/static/img/appstore.svg"}
+                                        />
+                                    </Box>
+                                </Box>
+                            </li>
+                            <li>
+                                <Typography variant="h6" component="p">
+                                    {t("fillInEndpoint")}
+                                </Typography>
+                                <Box marginTop={1}>
+                                    <AppQRCode />
+                                </Box>
+                            </li>
+                            <li>
+                                <Typography variant="h6" component="p">
+                                    {t("loginApp")}
+                                </Typography>
+                            </li>
+                        </ol>
+                    </Box>
+                </Box>
+            </Grid>
+            <Grid item xs={12} md={5}>
+                <Box className={classes.phoneContainer}>
+                    <Box className={classes.phoneFrame}>
+                        <Box>
+                            <Box
+                                position={"relative"}
+                                zIndex={2}
+                                maxWidth={1}
+                                height={"auto"}
+                                className={classes.frameContainer}
+                            >
+                                <PhoneSkeleton />
+                            </Box>
+                            <Box
+                                position={"absolute"}
+                                top={"2.4%"}
+                                left={"4%"}
+                                width={"92.4%"}
+                                height={"96%"}
+                            >
+                                <Box
+                                    component={"img"}
+                                    src={
+                                        "https://cloudreve.org/imgs/ios/" +
+                                        (theme.palette.type === "light"
+                                            ? "main.png"
+                                            : "main_dark.jpg")
+                                    }
+                                    alt="Image Description"
+                                    effect="blur"
+                                    width={1}
+                                    height={1}
+                                    className={classes.phoneImage}
+                                />
+                            </Box>
+                        </Box>
+                    </Box>
+                </Box>
+            </Grid>
+        </Grid>
+    );
+}
diff --git a/src/component/Setting/AppQRCode.js b/src/component/Setting/AppQRCode.js
new file mode 100644
index 0000000..a3db9e9
--- /dev/null
+++ b/src/component/Setting/AppQRCode.js
@@ -0,0 +1,81 @@
+import React, { useCallback, useEffect, useState } from "react";
+import { CircularProgress, makeStyles } from "@material-ui/core";
+import { useTranslation } from "react-i18next";
+import { useTheme } from "@material-ui/core/styles";
+import Box from "@material-ui/core/Box";
+import { QRCodeSVG } from "qrcode.react";
+import { randomStr } from "../../utils";
+import classNames from "classnames";
+import API from "../../middleware/Api";
+import { useDispatch } from "react-redux";
+import { toggleSnackbar } from "../../redux/explorer";
+
+const useStyles = makeStyles((theme) => ({
+    blur: {
+        filter: "blur(8px)",
+    },
+    container: {
+        position: "relative",
+        width: 128,
+    },
+    progress: {
+        position: "absolute",
+        top: "50%",
+        left: "50%",
+        marginLeft: -12,
+        marginTop: -12,
+        zIndex: 1,
+    },
+    qrcode: {
+        transition: "all .3s ease-in",
+    },
+}));
+
+export default function AppQRCode() {
+    const [content, setContent] = useState(randomStr(32));
+    const [loading, setLoading] = useState(true);
+    const { t } = useTranslation("application", { keyPrefix: "setting" });
+    const theme = useTheme();
+    const classes = useStyles();
+    const dispatch = useDispatch();
+    const ToggleSnackbar = useCallback(
+        (vertical, horizontal, msg, color) =>
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color)),
+        [dispatch]
+    );
+
+    const refresh = () => {
+        setLoading(true);
+        API.get("/user/session")
+            .then((response) => {
+                setContent(response.data);
+                setLoading(false);
+            })
+            .catch((error) => {
+                setLoading(false);
+                ToggleSnackbar("top", "right", error.message, "error");
+            });
+    };
+
+    useEffect(() => {
+        refresh();
+        const interval = window.setInterval(refresh, 1000 * 45);
+        return () => {
+            window.clearInterval(interval);
+        };
+    }, []);
+
+    return (
+        <Box className={classes.container}>
+            {loading && (
+                <CircularProgress size={24} className={classes.progress} />
+            )}
+            <QRCodeSVG
+                className={classNames(classes.qrcode, {
+                    [classes.blur]: loading,
+                })}
+                value={content}
+            />
+        </Box>
+    );
+}
diff --git a/src/component/Setting/Authn.js b/src/component/Setting/Authn.js
new file mode 100644
index 0000000..9f9e942
--- /dev/null
+++ b/src/component/Setting/Authn.js
@@ -0,0 +1,230 @@
+import React, { useCallback, useState } from "react";
+import {
+    Button,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogTitle,
+    Divider,
+    List,
+    ListItem,
+    ListItemIcon,
+    ListItemSecondaryAction,
+    ListItemText,
+    makeStyles,
+    Paper,
+    Typography,
+} from "@material-ui/core";
+import { useDispatch } from "react-redux";
+import RightIcon from "@material-ui/icons/KeyboardArrowRight";
+import { Add, Fingerprint, HighlightOff } from "@material-ui/icons";
+import API from "../../middleware/Api";
+import { bufferDecode, bufferEncode } from "../../utils";
+import { toggleSnackbar } from "../../redux/explorer";
+import { useTranslation } from "react-i18next";
+
+const useStyles = makeStyles((theme) => ({
+    sectionTitle: {
+        paddingBottom: "10px",
+        paddingTop: "30px",
+    },
+    rightIcon: {
+        marginTop: "4px",
+        marginRight: "10px",
+        color: theme.palette.text.secondary,
+    },
+    desenList: {
+        paddingTop: 0,
+        paddingBottom: 0,
+    },
+    iconFix: {
+        marginRight: "11px",
+        marginLeft: "7px",
+        minWidth: 40,
+    },
+    flexContainer: {
+        display: "flex",
+    },
+}));
+
+export default function Authn(props) {
+    const { t } = useTranslation();
+    const [selected, setSelected] = useState("");
+    const [confirm, setConfirm] = useState(false);
+    const dispatch = useDispatch();
+    const ToggleSnackbar = useCallback(
+        (vertical, horizontal, msg, color) =>
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color)),
+        [dispatch]
+    );
+
+    const deleteCredential = (id) => {
+        API.patch("/user/setting/authn", {
+            id: id,
+        })
+            .then(() => {
+                ToggleSnackbar(
+                    "top",
+                    "right",
+                    t("setting.authenticatorRemoved"),
+                    "success"
+                );
+                props.remove(id);
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            })
+            .then(() => {
+                setConfirm(false);
+            });
+    };
+
+    const classes = useStyles();
+
+    const addCredential = () => {
+        if (!navigator.credentials) {
+            ToggleSnackbar(
+                "top",
+                "right",
+                t("setting.browserNotSupported"),
+                "warning"
+            );
+
+            return;
+        }
+        API.put("/user/authn", {})
+            .then((response) => {
+                const credentialCreationOptions = response.data;
+                credentialCreationOptions.publicKey.challenge = bufferDecode(
+                    credentialCreationOptions.publicKey.challenge
+                );
+                credentialCreationOptions.publicKey.user.id = bufferDecode(
+                    credentialCreationOptions.publicKey.user.id
+                );
+                if (credentialCreationOptions.publicKey.excludeCredentials) {
+                    for (
+                        let i = 0;
+                        i <
+                        credentialCreationOptions.publicKey.excludeCredentials
+                            .length;
+                        i++
+                    ) {
+                        credentialCreationOptions.publicKey.excludeCredentials[
+                            i
+                        ].id = bufferDecode(
+                            credentialCreationOptions.publicKey
+                                .excludeCredentials[i].id
+                        );
+                    }
+                }
+
+                return navigator.credentials.create({
+                    publicKey: credentialCreationOptions.publicKey,
+                });
+            })
+            .then((credential) => {
+                const attestationObject = credential.response.attestationObject;
+                const clientDataJSON = credential.response.clientDataJSON;
+                const rawId = credential.rawId;
+                return API.put(
+                    "/user/authn/finish",
+                    JSON.stringify({
+                        id: credential.id,
+                        rawId: bufferEncode(rawId),
+                        type: credential.type,
+                        response: {
+                            attestationObject: bufferEncode(attestationObject),
+                            clientDataJSON: bufferEncode(clientDataJSON),
+                        },
+                    })
+                );
+            })
+            .then((response) => {
+                props.add(response.data);
+                ToggleSnackbar(
+                    "top",
+                    "right",
+                    t("setting.authenticatorAdded"),
+                    "success"
+                );
+                return;
+            })
+            .catch((error) => {
+                console.log(error);
+                ToggleSnackbar("top", "right", error.message, "error");
+            });
+    };
+
+    return (
+        <div>
+            <Dialog open={confirm} onClose={() => setConfirm(false)}>
+                <DialogTitle>{t("setting.removedAuthenticator")}</DialogTitle>
+                <DialogContent>
+                    {t("setting.removedAuthenticatorConfirm")}
+                </DialogContent>
+                <DialogActions>
+                    <Button onClick={() => setConfirm(false)} color="default">
+                        {t("cancel", { ns: "common" })}
+                    </Button>
+                    <Button
+                        onClick={() => deleteCredential(selected)}
+                        color="primary"
+                    >
+                        {t("ok", { ns: "common" })}
+                    </Button>
+                </DialogActions>
+            </Dialog>
+
+            <Typography className={classes.sectionTitle} variant="subtitle2">
+                {t("setting.hardwareAuthenticator")}
+            </Typography>
+            <Paper>
+                <List className={classes.desenList}>
+                    {props.list.map((v) => (
+                        <>
+                            <ListItem
+                                button
+                                style={{
+                                    paddingRight: 60,
+                                }}
+                                onClick={() => {
+                                    setConfirm(true);
+                                    setSelected(v.id);
+                                }}
+                            >
+                                <ListItemIcon className={classes.iconFix}>
+                                    <Fingerprint />
+                                </ListItemIcon>
+                                <ListItemText primary={v.fingerprint} />
+
+                                <ListItemSecondaryAction
+                                    onClick={() => deleteCredential(v.id)}
+                                    className={classes.flexContainer}
+                                >
+                                    <HighlightOff
+                                        className={classes.rightIcon}
+                                    />
+                                </ListItemSecondaryAction>
+                            </ListItem>
+                            <Divider />
+                        </>
+                    ))}
+                    <ListItem button onClick={() => addCredential()}>
+                        <ListItemIcon className={classes.iconFix}>
+                            <Add />
+                        </ListItemIcon>
+                        <ListItemText
+                            primary={t("setting.addNewAuthenticator")}
+                        />
+
+                        <ListItemSecondaryAction
+                            className={classes.flexContainer}
+                        >
+                            <RightIcon className={classes.rightIcon} />
+                        </ListItemSecondaryAction>
+                    </ListItem>
+                </List>
+            </Paper>
+        </div>
+    );
+}
diff --git a/src/component/Setting/Profile.js b/src/component/Setting/Profile.js
new file mode 100644
index 0000000..81b253d
--- /dev/null
+++ b/src/component/Setting/Profile.js
@@ -0,0 +1,443 @@
+import React, { Component } from "react";
+import { connect } from "react-redux";
+import API from "../../middleware/Api";
+
+import {
+    Avatar,
+    Grid,
+    Paper,
+    Tab,
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableRow,
+    Tabs,
+    Typography,
+    withStyles,
+} from "@material-ui/core";
+import { withRouter } from "react-router";
+import Pagination from "@material-ui/lab/Pagination";
+import { formatLocalTime } from "../../utils/datetime";
+import { toggleSnackbar } from "../../redux/explorer";
+import { withTranslation } from "react-i18next";
+
+const styles = (theme) => ({
+    layout: {
+        width: "auto",
+        marginTop: "50px",
+        marginLeft: theme.spacing(3),
+        marginRight: theme.spacing(3),
+        marginBottom: "30px",
+        [theme.breakpoints.up("sm")]: {
+            width: 700,
+            marginLeft: "auto",
+            marginRight: "auto",
+        },
+    },
+    userNav: {
+        borderRadius: `${theme.shape.borderRadius}px ${theme.shape.borderRadius}px 0 0`,
+        height: "270px",
+        backgroundColor: theme.palette.primary.main,
+        padding: "20px 20px 2em",
+        backgroundImage:
+            "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900'%3E%3Cpolygon fill='" +
+            theme.palette.primary.light.replace("#", "%23") +
+            "' points='957 450 539 900 1396 900'/%3E%3Cpolygon fill='" +
+            theme.palette.primary.dark.replace("#", "%23") +
+            "' points='957 450 872.9 900 1396 900'/%3E%3Cpolygon fill='" +
+            theme.palette.secondary.main.replace("#", "%23") +
+            "' points='-60 900 398 662 816 900'/%3E%3Cpolygon fill='" +
+            theme.palette.secondary.dark.replace("#", "%23") +
+            "' points='337 900 398 662 816 900'/%3E%3Cpolygon fill='" +
+            theme.palette.secondary.light.replace("#", "%23") +
+            "' points='1203 546 1552 900 876 900'/%3E%3Cpolygon fill='" +
+            theme.palette.secondary.main.replace("#", "%23") +
+            "' points='1203 546 1552 900 1162 900'/%3E%3Cpolygon fill='" +
+            theme.palette.primary.dark.replace("#", "%23") +
+            "' points='641 695 886 900 367 900'/%3E%3Cpolygon fill='" +
+            theme.palette.primary.main.replace("#", "%23") +
+            "' points='587 900 641 695 886 900'/%3E%3Cpolygon fill='" +
+            theme.palette.secondary.light.replace("#", "%23") +
+            "' points='1710 900 1401 632 1096 900'/%3E%3Cpolygon fill='" +
+            theme.palette.secondary.dark.replace("#", "%23") +
+            "' points='1710 900 1401 632 1365 900'/%3E%3Cpolygon fill='" +
+            theme.palette.secondary.main.replace("#", "%23") +
+            "' points='1210 900 971 687 725 900'/%3E%3Cpolygon fill='" +
+            theme.palette.secondary.dark.replace("#", "%23") +
+            "' points='943 900 1210 900 971 687'/%3E%3C/svg%3E\")",
+        backgroundSize: "cover",
+        backgroundPosition: "bottom",
+    },
+    avatarContainer: {
+        height: "80px",
+        width: "80px",
+        borderRaidus: "50%",
+        margin: "auto",
+        marginTop: "50px",
+        boxShadow:
+            "0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12)",
+        border: "2px solid #fff",
+    },
+    nickName: {
+        width: "200px",
+        margin: "auto",
+        textAlign: "center",
+        marginTop: "1px",
+        fontSize: "25px",
+        color: "#ffffff",
+        opacity: "0.81",
+    },
+    th: {
+        minWidth: "106px",
+    },
+    mobileHide: {
+        [theme.breakpoints.down("md")]: {
+            display: "none",
+        },
+    },
+    tableLink: {
+        cursor: "pointer",
+    },
+    navigator: {
+        padding: theme.spacing(2),
+    },
+    pageInfo: {
+        marginTop: "14px",
+        marginLeft: "23px",
+    },
+    infoItem: {
+        paddingLeft: "46px!important",
+        paddingBottom: "20px!important",
+    },
+    infoContainer: {
+        marginTop: "30px",
+    },
+    tableContainer: {
+        overflowX: "auto",
+    },
+});
+const mapStateToProps = () => {
+    return {};
+};
+
+const mapDispatchToProps = (dispatch) => {
+    return {
+        toggleSnackbar: (vertical, horizontal, msg, color) => {
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color));
+        },
+    };
+};
+
+class ProfileCompoment extends Component {
+    state = {
+        listType: 0,
+        shareList: [],
+        page: 1,
+        user: null,
+        total: 0,
+    };
+
+    handleChange = (event, listType) => {
+        this.setState({ listType });
+        if (listType === 1) {
+            this.loadList(1, "hot");
+        } else if (listType === 0) {
+            this.loadList(1, "default");
+        }
+    };
+
+    componentDidMount = () => {
+        this.loadList(1, "default");
+    };
+
+    loadList = (page, order) => {
+        API.get(
+            "/user/profile/" +
+                this.props.match.params.id +
+                "?page=" +
+                page +
+                "&type=" +
+                order
+        )
+            .then((response) => {
+                this.setState({
+                    shareList: response.data.items,
+                    user: response.data.user,
+                    total: response.data.total,
+                });
+            })
+            .catch((error) => {
+                this.props.toggleSnackbar(
+                    "top",
+                    "right",
+                    error.message,
+                    "error"
+                );
+            });
+    };
+
+    loadNext = () => {
+        this.loadList(
+            this.state.page + 1,
+            this.state.listType === 0 ? "default" : "hot"
+        );
+    };
+
+    loadPrev = () => {
+        this.loadList(
+            this.state.page - 1,
+            this.state.listType === 0 ? "default" : "hot"
+        );
+    };
+
+    render() {
+        const { classes, t } = this.props;
+
+        return (
+            <div className={classes.layout}>
+                {this.state.user === null && <div></div>}
+                {this.state.user !== null && (
+                    <Paper>
+                        <div className={classes.userNav}>
+                            <div>
+                                <Avatar
+                                    className={classes.avatarContainer}
+                                    src={
+                                        "/api/v3/user/avatar/" +
+                                        this.state.user.id +
+                                        "/l"
+                                    }
+                                />
+                            </div>
+                            <div>
+                                <Typography className={classes.nickName} noWrap>
+                                    {this.state.user.nick}
+                                </Typography>
+                            </div>
+                        </div>
+                        <Tabs
+                            value={this.state.listType}
+                            indicatorColor="primary"
+                            textColor="primary"
+                            onChange={this.handleChange}
+                            centered
+                        >
+                            <Tab label={t("setting.allShares")} />
+                            <Tab label={t("setting.trendingShares")} />
+                            <Tab label={t("setting.profile")} />
+                        </Tabs>
+                        {this.state.listType === 2 && (
+                            <div className={classes.infoContainer}>
+                                <Grid container spacing={24}>
+                                    <Grid
+                                        item
+                                        md={4}
+                                        xs={12}
+                                        className={classes.infoItem}
+                                    >
+                                        <Typography
+                                            color="textSecondary"
+                                            variant="h6"
+                                        >
+                                            {t("setting.uid")}
+                                        </Typography>
+                                        <Typography>
+                                            {this.state.user.id}
+                                        </Typography>
+                                    </Grid>
+                                    <Grid
+                                        item
+                                        md={4}
+                                        xs={12}
+                                        className={classes.infoItem}
+                                    >
+                                        <Typography
+                                            color="textSecondary"
+                                            variant="h6"
+                                        >
+                                            {t("setting.nickname")}
+                                        </Typography>
+                                        <Typography>
+                                            {this.state.user.nick}
+                                        </Typography>
+                                    </Grid>
+                                    <Grid
+                                        item
+                                        md={4}
+                                        xs={12}
+                                        className={classes.infoItem}
+                                    >
+                                        <Typography
+                                            color="textSecondary"
+                                            variant="h6"
+                                        >
+                                            {t("setting.group")}
+                                        </Typography>
+                                        <Typography>
+                                            {this.state.user.group}
+                                        </Typography>
+                                    </Grid>
+                                    <Grid
+                                        item
+                                        md={4}
+                                        xs={12}
+                                        className={classes.infoItem}
+                                    >
+                                        <Typography
+                                            color="textSecondary"
+                                            variant="h6"
+                                        >
+                                            {t("setting.totalShares")}
+                                        </Typography>
+                                        <Typography>
+                                            {this.state.total}
+                                        </Typography>
+                                    </Grid>
+                                    <Grid
+                                        item
+                                        md={4}
+                                        xs={12}
+                                        className={classes.infoItem}
+                                    >
+                                        <Typography
+                                            color="textSecondary"
+                                            variant="h6"
+                                        >
+                                            {t("setting.regTime")}
+                                        </Typography>
+                                        <Typography>
+                                            {this.state.user.date}
+                                        </Typography>
+                                    </Grid>
+                                </Grid>
+                            </div>
+                        )}
+                        {(this.state.listType === 0 ||
+                            this.state.listType === 1) && (
+                            <div>
+                                <div className={classes.tableContainer}>
+                                    <Table className={classes.table}>
+                                        <TableHead>
+                                            <TableRow>
+                                                <TableCell>
+                                                    {t("setting.fileName")}
+                                                </TableCell>
+                                                <TableCell
+                                                    className={
+                                                        classes.mobileHide
+                                                    }
+                                                >
+                                                    {t("setting.shareDate")}
+                                                </TableCell>
+                                                <TableCell
+                                                    className={[
+                                                        classes.th,
+                                                        classes.mobileHide,
+                                                    ]}
+                                                >
+                                                    {t(
+                                                        "setting.downloadNumber"
+                                                    )}
+                                                </TableCell>
+                                                <TableCell
+                                                    className={[
+                                                        classes.th,
+                                                        classes.mobileHide,
+                                                    ]}
+                                                >
+                                                    {t("setting.viewNumber")}
+                                                </TableCell>
+                                            </TableRow>
+                                        </TableHead>
+                                        <TableBody>
+                                            {this.state.shareList.map(
+                                                (row, id) => (
+                                                    <TableRow
+                                                        key={id}
+                                                        className={
+                                                            classes.tableLink
+                                                        }
+                                                        onClick={() =>
+                                                            this.props.history.push(
+                                                                "/s/" + row.key
+                                                            )
+                                                        }
+                                                    >
+                                                        <TableCell>
+                                                            <Typography>
+                                                                {row.source
+                                                                    ? row.source
+                                                                          .name
+                                                                    : "[" +
+                                                                      t(
+                                                                          "share.expired"
+                                                                      ) +
+                                                                      "]"}
+                                                            </Typography>
+                                                        </TableCell>
+                                                        <TableCell
+                                                            nowrap={"nowrap"}
+                                                            className={
+                                                                classes.mobileHide
+                                                            }
+                                                        >
+                                                            {formatLocalTime(
+                                                                row.create_date
+                                                            )}
+                                                        </TableCell>
+                                                        <TableCell
+                                                            className={
+                                                                classes.mobileHide
+                                                            }
+                                                        >
+                                                            {row.downloads}
+                                                        </TableCell>
+                                                        <TableCell
+                                                            className={
+                                                                classes.mobileHide
+                                                            }
+                                                        >
+                                                            {row.views}
+                                                        </TableCell>
+                                                    </TableRow>
+                                                )
+                                            )}
+                                        </TableBody>
+                                    </Table>
+                                </div>
+                                {this.state.shareList.length !== 0 &&
+                                    this.state.listType === 0 && (
+                                        <div className={classes.navigator}>
+                                            <Pagination
+                                                count={Math.ceil(
+                                                    this.state.total / 10
+                                                )}
+                                                onChange={(e, v) =>
+                                                    this.loadList(
+                                                        v,
+                                                        this.state.listType ===
+                                                            0
+                                                            ? "default"
+                                                            : "hot"
+                                                    )
+                                                }
+                                                color="secondary"
+                                            />
+                                        </div>
+                                    )}
+                            </div>
+                        )}
+                    </Paper>
+                )}
+            </div>
+        );
+    }
+}
+
+const Profile = connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(withStyles(styles)(withRouter(withTranslation()(ProfileCompoment))));
+
+export default Profile;
diff --git a/src/component/Setting/Tasks.js b/src/component/Setting/Tasks.js
new file mode 100644
index 0000000..8aedf34
--- /dev/null
+++ b/src/component/Setting/Tasks.js
@@ -0,0 +1,160 @@
+import React, { useCallback, useEffect, useState } from "react";
+import { makeStyles, Typography } from "@material-ui/core";
+import { useDispatch } from "react-redux";
+import Paper from "@material-ui/core/Paper";
+import Table from "@material-ui/core/Table";
+import TableHead from "@material-ui/core/TableHead";
+import TableRow from "@material-ui/core/TableRow";
+import TableCell from "@material-ui/core/TableCell";
+import TableBody from "@material-ui/core/TableBody";
+import API from "../../middleware/Api";
+import { getTaskProgress, getTaskStatus, getTaskType } from "../../config";
+import Pagination from "@material-ui/lab/Pagination";
+import { formatLocalTime } from "../../utils/datetime";
+import { toggleSnackbar } from "../../redux/explorer";
+import Nothing from "../Placeholder/Nothing";
+import { useTranslation } from "react-i18next";
+
+const useStyles = makeStyles((theme) => ({
+    layout: {
+        width: "auto",
+        marginTop: "50px",
+        marginLeft: theme.spacing(3),
+        marginRight: theme.spacing(3),
+        [theme.breakpoints.up(1100 + theme.spacing(3) * 2)]: {
+            width: 1100,
+            marginLeft: "auto",
+            marginRight: "auto",
+        },
+        marginBottom: "50px",
+    },
+    content: {
+        marginTop: theme.spacing(4),
+        overflowX: "auto",
+    },
+    cardContent: {
+        padding: theme.spacing(2),
+    },
+    tableContainer: {
+        overflowX: "auto",
+    },
+    create: {
+        marginTop: theme.spacing(2),
+    },
+    noWrap: {
+        wordBreak: "keepAll",
+    },
+    footer: {
+        padding: theme.spacing(2),
+    },
+}));
+
+export default function Tasks() {
+    const { t } = useTranslation();
+    const [tasks, setTasks] = useState([]);
+    const [total, setTotal] = useState(0);
+    const [page, setPage] = useState(1);
+
+    const dispatch = useDispatch();
+    const ToggleSnackbar = useCallback(
+        (vertical, horizontal, msg, color) =>
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color)),
+        [dispatch]
+    );
+
+    const loadList = (page) => {
+        API.get("/user/setting/tasks?page=" + page)
+            .then((response) => {
+                setTasks(response.data.tasks);
+                setTotal(response.data.total);
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            });
+    };
+
+    useEffect(() => {
+        loadList(page);
+        // eslint-disable-next-line
+    }, [page]);
+
+    const getError = (error) => {
+        if (error === "") {
+            return "-";
+        }
+        try {
+            const res = JSON.parse(error);
+            return `${res.msg}: ${res.error}`;
+        } catch (e) {
+            return t("uploader.unknownStatus");
+        }
+    };
+
+    const classes = useStyles();
+
+    return (
+        <div className={classes.layout}>
+            <Typography color="textSecondary" variant="h4">
+                {t("navbar.taskQueue")}
+            </Typography>
+            <Paper elevation={3} className={classes.content}>
+                <Table className={classes.table} aria-label="simple table">
+                    <TableHead>
+                        <TableRow>
+                            <TableCell nowrap="nowrap">
+                                {t("setting.createdAt")}
+                            </TableCell>
+                            <TableCell nowrap="nowrap" align="right">
+                                {t("setting.taskType")}
+                            </TableCell>
+                            <TableCell nowrap="nowrap" align="right">
+                                {t("setting.taskStatus")}
+                            </TableCell>
+                            <TableCell nowrap="nowrap" align="right">
+                                {t("setting.lastProgress")}
+                            </TableCell>
+                            <TableCell nowrap="nowrap">
+                                {t("setting.errorDetails")}
+                            </TableCell>
+                        </TableRow>
+                    </TableHead>
+                    <TableBody>
+                        {tasks.map((row, id) => (
+                            <TableRow key={id}>
+                                <TableCell
+                                    nowrap="nowrap"
+                                    component="th"
+                                    scope="row"
+                                >
+                                    {formatLocalTime(row.create_date)}
+                                </TableCell>
+                                <TableCell nowrap="nowrap" align="right">
+                                    {getTaskType(row.type)}
+                                </TableCell>
+                                <TableCell nowrap="nowrap" align="right">
+                                    {getTaskStatus(row.status)}
+                                </TableCell>
+                                <TableCell nowrap="nowrap" align="right">
+                                    {getTaskProgress(row.type, row.progress)}
+                                </TableCell>
+                                <TableCell className={classes.noWrap}>
+                                    {getError(row.error)}
+                                </TableCell>
+                            </TableRow>
+                        ))}
+                    </TableBody>
+                </Table>
+                {tasks.length === 0 && (
+                    <Nothing primary={t("setting.listEmpty")} />
+                )}
+                <div className={classes.footer}>
+                    <Pagination
+                        count={Math.ceil(total / 10)}
+                        onChange={(e, v) => setPage(v)}
+                        color="secondary"
+                    />
+                </div>
+            </Paper>
+        </div>
+    );
+}
diff --git a/src/component/Setting/UserSetting.js b/src/component/Setting/UserSetting.js
new file mode 100644
index 0000000..5677a7d
--- /dev/null
+++ b/src/component/Setting/UserSetting.js
@@ -0,0 +1,1570 @@
+import React, { Component } from "react";
+import { connect } from "react-redux";
+import PhotoIcon from "@material-ui/icons/InsertPhoto";
+import GroupIcon from "@material-ui/icons/Group";
+import DateIcon from "@material-ui/icons/DateRange";
+import EmailIcon from "@material-ui/icons/Email";
+import HomeIcon from "@material-ui/icons/Home";
+import LinkIcon from "@material-ui/icons/Phonelink";
+import AlarmOff from "@material-ui/icons/AlarmOff";
+import InputIcon from "@material-ui/icons/Input";
+import SecurityIcon from "@material-ui/icons/Security";
+import NickIcon from "@material-ui/icons/PermContactCalendar";
+import LockIcon from "@material-ui/icons/Lock";
+import VerifyIcon from "@material-ui/icons/VpnKey";
+import ColorIcon from "@material-ui/icons/Palette";
+import axios from "axios";
+import FingerprintIcon from "@material-ui/icons/Fingerprint";
+import ToggleButton from "@material-ui/lab/ToggleButton";
+import ToggleButtonGroup from "@material-ui/lab/ToggleButtonGroup";
+import RightIcon from "@material-ui/icons/KeyboardArrowRight";
+import {
+    Avatar,
+    Button,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogTitle,
+    Divider,
+    List,
+    ListItem,
+    ListItemAvatar,
+    ListItemIcon,
+    ListItemSecondaryAction,
+    ListItemText,
+    Paper,
+    Switch,
+    TextField,
+    Tooltip,
+    Typography,
+    withStyles,
+} from "@material-ui/core";
+import SettingsInputHdmi from "@material-ui/icons/SettingsInputHdmi";
+import { blue, green, yellow } from "@material-ui/core/colors";
+import API from "../../middleware/Api";
+import Auth from "../../middleware/Auth";
+import { withRouter } from "react-router";
+import TimeAgo from "timeago-react";
+import { QRCodeSVG } from "qrcode.react";
+import {
+    Brightness3,
+    ConfirmationNumber,
+    ListAlt,
+    PermContactCalendar,
+    Schedule,
+    Translate,
+} from "@material-ui/icons";
+import Authn from "./Authn";
+import { formatLocalTime, timeZone } from "../../utils/datetime";
+import TimeZoneDialog from "../Modals/TimeZone";
+import BindPhone from "../Modals/BindPhone";
+import {
+    applyThemes,
+    changeViewMethod,
+    toggleDaylightMode,
+    toggleSnackbar,
+} from "../../redux/explorer";
+import { Trans, withTranslation } from "react-i18next";
+import { selectLanguage } from "../../redux/viewUpdate/action";
+import OptionSelector from "../Modals/OptionSelector";
+
+const styles = (theme) => ({
+    layout: {
+        width: "auto",
+        marginLeft: theme.spacing(3),
+        marginRight: theme.spacing(3),
+        [theme.breakpoints.up(1100 + theme.spacing(3) * 2)]: {
+            width: 700,
+            marginLeft: "auto",
+            marginRight: "auto",
+        },
+    },
+    sectionTitle: {
+        paddingBottom: "10px",
+        paddingTop: "30px",
+    },
+    rightIcon: {
+        marginTop: "4px",
+        marginRight: "10px",
+        color: theme.palette.text.secondary,
+    },
+    uploadFromFile: {
+        backgroundColor: blue[100],
+        color: blue[600],
+    },
+    userGravatar: {
+        backgroundColor: yellow[100],
+        color: yellow[800],
+    },
+    policySelected: {
+        backgroundColor: green[100],
+        color: green[800],
+    },
+    infoText: {
+        marginRight: "17px",
+        [theme.breakpoints.down("xs")]: {
+            maxWidth: 100,
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap",
+            overflow: "hidden",
+        },
+    },
+    infoTextWithIcon: {
+        marginRight: "17px",
+        marginTop: "1px",
+        [theme.breakpoints.down("xs")]: {
+            maxWidth: 100,
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap",
+            overflow: "hidden",
+        },
+    },
+    rightIconWithText: {
+        marginTop: "0px",
+        marginRight: "10px",
+        color: theme.palette.text.secondary,
+    },
+    iconFix: {
+        marginRight: "11px",
+        marginLeft: "7px",
+        minWidth: 40,
+    },
+    flexContainer: {
+        display: "flex",
+    },
+    desenList: {
+        paddingTop: 0,
+        paddingBottom: 0,
+    },
+    flexContainerResponse: {
+        display: "flex",
+        [theme.breakpoints.down("sm")]: {
+            display: "initial",
+        },
+    },
+    desText: {
+        marginTop: "10px",
+    },
+    secondColor: {
+        height: "20px",
+        width: "20px",
+        backgroundColor: theme.palette.secondary.main,
+        borderRadius: "50%",
+        marginRight: "17px",
+    },
+    firstColor: {
+        height: "20px",
+        width: "20px",
+        backgroundColor: theme.palette.primary.main,
+        borderRadius: "50%",
+        marginRight: "6px",
+    },
+    themeBlock: {
+        height: "20px",
+        width: "20px",
+    },
+    paddingBottom: {
+        marginBottom: "30px",
+    },
+    paddingText: {
+        paddingRight: theme.spacing(2),
+    },
+    qrcode: {
+        width: 128,
+        marginTop: 16,
+        marginRight: 16,
+    },
+});
+
+const mapStateToProps = (state) => {
+    return {
+        title: state.siteConfig.title,
+        authn: state.siteConfig.authn,
+        viewMethod: state.viewUpdate.explorerViewMethod,
+    };
+};
+
+const mapDispatchToProps = (dispatch) => {
+    return {
+        toggleSnackbar: (vertical, horizontal, msg, color) => {
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color));
+        },
+        applyThemes: (color) => {
+            dispatch(applyThemes(color));
+        },
+        toggleDaylightMode: () => {
+            dispatch(toggleDaylightMode());
+        },
+        changeView: (method) => {
+            dispatch(changeViewMethod(method));
+        },
+        selectLanguage: () => {
+            dispatch(selectLanguage());
+        },
+    };
+};
+
+class UserSettingCompoment extends Component {
+    constructor(props) {
+        super(props);
+        this.fileInput = React.createRef();
+    }
+
+    state = {
+        avatarModal: false,
+        nickModal: false,
+        changePassword: false,
+        loading: "",
+        oldPwd: "",
+        newPwd: "",
+        webdavPwd: "",
+        newPwdRepeat: "",
+        twoFactor: false,
+        authCode: "",
+        changeTheme: false,
+        chosenTheme: null,
+        showWebDavUrl: false,
+        showWebDavUserName: false,
+        changeWebDavPwd: false,
+        groupBackModal: false,
+        changeTimeZone: false,
+        bindPhone: false,
+        settings: {
+            uid: 0,
+            group_expires: 0,
+            qq: "",
+            phone: "",
+            homepage: true,
+            two_factor: "",
+            two_fa_secret: "",
+            prefer_theme: "",
+            themes: {},
+            authn: [],
+        },
+    };
+
+    handleClose = () => {
+        this.setState({
+            avatarModal: false,
+            nickModal: false,
+            changePassword: false,
+            loading: "",
+            twoFactor: false,
+            changeTheme: false,
+            showWebDavUrl: false,
+            showWebDavUserName: false,
+            changeWebDavPwd: false,
+            groupBackModal: false,
+            bindPhone: false,
+        });
+    };
+
+    componentDidMount() {
+        this.loadSetting();
+    }
+
+    toggleViewMethod = () => {
+        const newMethod =
+            this.props.viewMethod === "icon"
+                ? "list"
+                : this.props.viewMethod === "list"
+                ? "smallIcon"
+                : "icon";
+        Auth.SetPreference("view_method", newMethod);
+        this.props.changeView(newMethod);
+    };
+
+    loadSetting = () => {
+        API.get("/user/setting")
+            .then((response) => {
+                const theme = JSON.parse(response.data.themes);
+                response.data.themes = theme;
+                this.setState({
+                    settings: response.data,
+                });
+            })
+            .catch((error) => {
+                this.props.toggleSnackbar(
+                    "top",
+                    "right",
+                    error.message,
+                    "error"
+                );
+            });
+    };
+
+    doChangeGroup = () => {
+        API.patch("/user/setting/vip", {})
+            .then(() => {
+                this.props.toggleSnackbar(
+                    "top",
+                    "right",
+                    this.props.t("vas.cancelSubscription"),
+                    "success"
+                );
+                this.handleClose();
+            })
+            .catch((error) => {
+                this.props.toggleSnackbar(
+                    "top",
+                    "right",
+                    error.message,
+                    "error"
+                );
+            });
+    };
+
+    useGravatar = () => {
+        this.setState({
+            loading: "gravatar",
+        });
+        API.put("/user/setting/avatar")
+            .then(() => {
+                this.props.toggleSnackbar(
+                    "top",
+                    "right",
+                    this.props.t("setting.avatarUpdated"),
+                    "success"
+                );
+                this.setState({
+                    loading: "",
+                });
+            })
+            .catch((error) => {
+                this.props.toggleSnackbar(
+                    "top",
+                    "right",
+                    error.message,
+                    "error"
+                );
+                this.setState({
+                    loading: "",
+                });
+            });
+    };
+
+    changeNick = () => {
+        this.setState({
+            loading: "nick",
+        });
+        API.patch("/user/setting/nick", {
+            nick: this.state.nick,
+        })
+            .then(() => {
+                this.props.toggleSnackbar(
+                    "top",
+                    "right",
+                    this.props.t("setting.nickChanged"),
+                    "success"
+                );
+                this.setState({
+                    loading: "",
+                });
+                this.handleClose();
+            })
+            .catch((error) => {
+                this.props.toggleSnackbar(
+                    "top",
+                    "right",
+                    error.message,
+                    "error"
+                );
+                this.setState({
+                    loading: "",
+                });
+            });
+    };
+
+    bindQQ = () => {
+        this.setState({
+            loading: "nick",
+        });
+        API.patch("/user/setting/qq", {})
+            .then((response) => {
+                if (response.data === "") {
+                    this.props.toggleSnackbar(
+                        "top",
+                        "right",
+                        this.props.t("vas.qqUnlinked"),
+                        "success"
+                    );
+                    this.setState({
+                        settings: {
+                            ...this.state.settings,
+                            qq: false,
+                        },
+                    });
+                } else {
+                    window.location.href = response.data;
+                }
+                this.handleClose();
+            })
+            .catch((error) => {
+                this.props.toggleSnackbar(
+                    "top",
+                    "right",
+                    error.message,
+                    "error"
+                );
+            })
+            .then(() => {
+                this.setState({
+                    loading: "",
+                });
+            });
+    };
+
+    uploadAvatar = () => {
+        this.setState({
+            loading: "avatar",
+        });
+        const formData = new FormData();
+        formData.append("avatar", this.fileInput.current.files[0]);
+        API.post("/user/setting/avatar", formData, {
+            headers: {
+                "Content-Type": "multipart/form-data",
+            },
+        })
+            .then(() => {
+                this.props.toggleSnackbar(
+                    "top",
+                    "right",
+                    this.props.t("setting.avatarUpdated"),
+                    "success"
+                );
+                this.setState({
+                    loading: "",
+                });
+            })
+            .catch((error) => {
+                this.props.toggleSnackbar(
+                    "top",
+                    "right",
+                    error.message,
+                    "error"
+                );
+                this.setState({
+                    loading: "",
+                });
+            });
+    };
+
+    handleToggle = () => {
+        API.patch("/user/setting/homepage", {
+            status: !this.state.settings.homepage,
+        })
+            .then(() => {
+                this.props.toggleSnackbar(
+                    "top",
+                    "right",
+                    this.props.t("setting.settingSaved"),
+                    "success"
+                );
+                this.setState({
+                    settings: {
+                        ...this.state.settings,
+                        homepage: !this.state.settings.homepage,
+                    },
+                });
+            })
+            .catch((error) => {
+                this.props.toggleSnackbar(
+                    "top",
+                    "right",
+                    error.message,
+                    "error"
+                );
+            });
+    };
+
+    changhePwd = () => {
+        if (this.state.newPwd !== this.state.newPwdRepeat) {
+            this.props.toggleSnackbar(
+                "top",
+                "right",
+                this.props.t("login.passwordNotMatch"),
+                "warning"
+            );
+            return;
+        }
+        this.setState({
+            loading: "changePassword",
+        });
+        API.patch("/user/setting/password", {
+            old: this.state.oldPwd,
+            new: this.state.newPwd,
+        })
+            .then(() => {
+                this.props.toggleSnackbar(
+                    "top",
+                    "right",
+                    this.props.t("login.passwordReset"),
+                    "success"
+                );
+                this.setState({
+                    loading: "",
+                });
+                this.handleClose();
+            })
+            .catch((error) => {
+                this.props.toggleSnackbar(
+                    "top",
+                    "right",
+                    error.message,
+                    "error"
+                );
+                this.setState({
+                    loading: "",
+                });
+            });
+    };
+
+    changeTheme = () => {
+        this.setState({
+            loading: "changeTheme",
+        });
+        API.patch("/user/setting/theme", {
+            theme: this.state.chosenTheme,
+        })
+            .then(() => {
+                this.props.toggleSnackbar(
+                    "top",
+                    "right",
+                    this.props.t("setting.themeColorChanged"),
+                    "success"
+                );
+                this.props.applyThemes(this.state.chosenTheme);
+                this.setState({
+                    loading: "",
+                });
+            })
+            .catch((error) => {
+                this.props.toggleSnackbar(
+                    "top",
+                    "right",
+                    error.message,
+                    "error"
+                );
+                this.setState({
+                    loading: "",
+                });
+            });
+    };
+
+    changheWebdavPwd = () => {
+        this.setState({
+            loading: "changheWebdavPwd",
+        });
+        axios
+            .post("/Member/setWebdavPwd", {
+                pwd: this.state.webdavPwd,
+            })
+            .then((response) => {
+                if (response.data.error === "1") {
+                    this.props.toggleSnackbar(
+                        "top",
+                        "right",
+                        response.data.msg,
+                        "error"
+                    );
+                    this.setState({
+                        loading: "",
+                    });
+                } else {
+                    this.props.toggleSnackbar(
+                        "top",
+                        "right",
+                        response.data.msg,
+                        "success"
+                    );
+                    this.setState({
+                        loading: "",
+                        changeWebDavPwd: false,
+                    });
+                }
+            })
+            .catch((error) => {
+                this.props.toggleSnackbar(
+                    "top",
+                    "right",
+                    error.message,
+                    "error"
+                );
+                this.setState({
+                    loading: "",
+                });
+            });
+    };
+
+    init2FA = () => {
+        if (this.state.settings.two_factor) {
+            this.setState({ twoFactor: true });
+            return;
+        }
+        API.get("/user/setting/2fa")
+            .then((response) => {
+                this.setState({
+                    two_fa_secret: response.data,
+                    twoFactor: true,
+                });
+            })
+            .catch((error) => {
+                this.props.toggleSnackbar(
+                    "top",
+                    "right",
+                    error.message,
+                    "error"
+                );
+            });
+    };
+
+    twoFactor = () => {
+        this.setState({
+            loading: "twoFactor",
+        });
+        API.patch("/user/setting/2fa", {
+            code: this.state.authCode,
+        })
+            .then(() => {
+                this.props.toggleSnackbar(
+                    "top",
+                    "right",
+                    this.props.t("setting.settingSaved"),
+                    "success"
+                );
+                this.setState({
+                    loading: "",
+                    settings: {
+                        ...this.state.settings,
+                        two_factor: !this.state.settings.two_factor,
+                    },
+                });
+                this.handleClose();
+            })
+            .catch((error) => {
+                this.props.toggleSnackbar(
+                    "top",
+                    "right",
+                    error.message,
+                    "error"
+                );
+                this.setState({
+                    loading: "",
+                });
+            });
+    };
+
+    handleChange = (name) => (event) => {
+        this.setState({ [name]: event.target.value });
+    };
+
+    handleAlignment = (event, chosenTheme) => this.setState({ chosenTheme });
+
+    toggleThemeMode = (current) => {
+        const newMode =
+            current === null ? "light" : current === "light" ? "dark" : null;
+        this.props.toggleDaylightMode();
+        Auth.SetPreference("theme_mode", newMode);
+    };
+
+    bindPhone = () => {
+        this.setState({ bindPhone: true });
+    };
+
+    render() {
+        const { classes, t } = this.props;
+        const user = Auth.GetUser();
+        const dark = Auth.GetPreference("theme_mode");
+
+        return (
+            <div>
+                <div className={classes.layout}>
+                    <Typography
+                        className={classes.sectionTitle}
+                        variant="subtitle2"
+                    >
+                        {t("setting.profile")}
+                    </Typography>
+                    <Paper>
+                        <List className={classes.desenList}>
+                            <ListItem
+                                button
+                                onClick={() =>
+                                    this.setState({ avatarModal: true })
+                                }
+                            >
+                                <ListItemAvatar>
+                                    <Avatar
+                                        src={
+                                            "/api/v3/user/avatar/" +
+                                            user.id +
+                                            "/l"
+                                        }
+                                    />
+                                </ListItemAvatar>
+                                <ListItemText primary={t("setting.avatar")} />
+                                <ListItemSecondaryAction>
+                                    <RightIcon className={classes.rightIcon} />
+                                </ListItemSecondaryAction>
+                            </ListItem>
+                            <Divider />
+                            <ListItem button>
+                                <ListItemIcon className={classes.iconFix}>
+                                    <PermContactCalendar />
+                                </ListItemIcon>
+                                <ListItemText primary={t("setting.uid")} />
+
+                                <ListItemSecondaryAction>
+                                    <Typography
+                                        className={classes.infoTextWithIcon}
+                                        color="textSecondary"
+                                    >
+                                        {this.state.settings.uid}
+                                    </Typography>
+                                </ListItemSecondaryAction>
+                            </ListItem>
+                            <Divider />
+                            <ListItem
+                                button
+                                onClick={() =>
+                                    this.setState({ nickModal: true })
+                                }
+                            >
+                                <ListItemIcon className={classes.iconFix}>
+                                    <NickIcon />
+                                </ListItemIcon>
+                                <ListItemText primary={t("setting.nickname")} />
+
+                                <ListItemSecondaryAction
+                                    onClick={() =>
+                                        this.setState({ nickModal: true })
+                                    }
+                                    className={classes.flexContainer}
+                                >
+                                    <Typography
+                                        className={classes.infoTextWithIcon}
+                                        color="textSecondary"
+                                    >
+                                        {user.nickname}
+                                    </Typography>
+                                    <RightIcon
+                                        className={classes.rightIconWithText}
+                                    />
+                                </ListItemSecondaryAction>
+                            </ListItem>
+                            <Divider />
+                            <ListItem button>
+                                <ListItemIcon className={classes.iconFix}>
+                                    <EmailIcon />
+                                </ListItemIcon>
+                                <ListItemText primary={t("login.email")} />
+
+                                <ListItemSecondaryAction>
+                                    <Typography
+                                        className={classes.infoText}
+                                        color="textSecondary"
+                                    >
+                                        {user.user_name}
+                                    </Typography>
+                                </ListItemSecondaryAction>
+                            </ListItem>
+                            {/*<Divider />*/}
+                            {/*<ListItem button onClick={() => this.bindPhone()}>*/}
+                            {/*    <ListItemIcon className={classes.iconFix}>*/}
+                            {/*        <SettingsInputHdmi />*/}
+                            {/*    </ListItemIcon>*/}
+                            {/*    <ListItemText primary="手机号" />*/}
+
+                            {/*    <ListItemSecondaryAction*/}
+                            {/*        className={classes.flexContainer}*/}
+                            {/*    >*/}
+                            {/*        <Typography*/}
+                            {/*            className={classes.infoTextWithIcon}*/}
+                            {/*            color="textSecondary"*/}
+                            {/*        >*/}
+                            {/*            {this.state.settings.phone*/}
+                            {/*                ? this.state.settings.phone*/}
+                            {/*                : "绑定"}*/}
+                            {/*        </Typography>*/}
+                            {/*        <RightIcon*/}
+                            {/*            className={classes.rightIconWithText}*/}
+                            {/*        />*/}
+                            {/*    </ListItemSecondaryAction>*/}
+                            {/*</ListItem>*/}
+                            <Divider />
+                            <ListItem
+                                button
+                                onClick={() =>
+                                    this.props.history.push("/buy?tab=1")
+                                }
+                            >
+                                <ListItemIcon className={classes.iconFix}>
+                                    <GroupIcon />
+                                </ListItemIcon>
+                                <ListItemText primary={t("setting.group")} />
+
+                                <ListItemSecondaryAction>
+                                    <Typography
+                                        className={classes.infoText}
+                                        color="textSecondary"
+                                    >
+                                        {user.group.name}
+                                        {this.state.settings.group_expires && (
+                                            <span>
+                                                <Tooltip
+                                                    key={0}
+                                                    title={formatLocalTime(
+                                                        this.state.settings
+                                                            .group_expires
+                                                    )}
+                                                >
+                                                    <Trans
+                                                        i18nKey="vas.groupExpire"
+                                                        components={[
+                                                            <TimeAgo
+                                                                key={0}
+                                                                datetime={
+                                                                    this.state
+                                                                        .settings
+                                                                        .group_expires
+                                                                }
+                                                                locale={t(
+                                                                    "timeAgoLocaleCode",
+                                                                    {
+                                                                        ns: "common",
+                                                                    }
+                                                                )}
+                                                            />,
+                                                        ]}
+                                                    />
+                                                </Tooltip>
+                                            </span>
+                                        )}
+                                    </Typography>
+                                </ListItemSecondaryAction>
+                            </ListItem>
+                            {this.state.settings.group_expires && (
+                                <div>
+                                    <Divider />
+                                    <ListItem
+                                        button
+                                        onClick={() =>
+                                            this.setState({
+                                                groupBackModal: true,
+                                            })
+                                        }
+                                    >
+                                        <ListItemIcon
+                                            className={classes.iconFix}
+                                        >
+                                            <AlarmOff />
+                                        </ListItemIcon>
+                                        <ListItemText
+                                            primary={t(
+                                                "vas.manuallyCancelSubscription"
+                                            )}
+                                        />
+
+                                        <ListItemSecondaryAction>
+                                            <RightIcon
+                                                className={classes.rightIcon}
+                                            />
+                                        </ListItemSecondaryAction>
+                                    </ListItem>
+                                </div>
+                            )}
+                            <Divider />
+                            <ListItem button onClick={() => this.bindQQ()}>
+                                <ListItemIcon className={classes.iconFix}>
+                                    <SettingsInputHdmi />
+                                </ListItemIcon>
+                                <ListItemText primary={t("vas.qqAccount")} />
+
+                                <ListItemSecondaryAction
+                                    className={classes.flexContainer}
+                                >
+                                    <Typography
+                                        className={classes.infoTextWithIcon}
+                                        color="textSecondary"
+                                    >
+                                        {this.state.settings.qq
+                                            ? t("vas.unlink")
+                                            : t("vas.connect")}
+                                    </Typography>
+                                    <RightIcon
+                                        className={classes.rightIconWithText}
+                                    />
+                                </ListItemSecondaryAction>
+                            </ListItem>
+                            <Divider />
+                            <ListItem button>
+                                <ListItemIcon className={classes.iconFix}>
+                                    <ConfirmationNumber />
+                                </ListItemIcon>
+                                <ListItemText primary={t("vas.credits")} />
+
+                                <ListItemSecondaryAction>
+                                    <Typography
+                                        className={classes.infoText}
+                                        color="textSecondary"
+                                    >
+                                        {user.score}
+                                    </Typography>
+                                </ListItemSecondaryAction>
+                            </ListItem>
+                            <Divider />
+                            <ListItem button>
+                                <ListItemIcon className={classes.iconFix}>
+                                    <DateIcon />
+                                </ListItemIcon>
+                                <ListItemText primary={t("setting.regTime")} />
+
+                                <ListItemSecondaryAction>
+                                    <Typography
+                                        className={classes.infoText}
+                                        color="textSecondary"
+                                    >
+                                        {formatLocalTime(user.created_at)}
+                                    </Typography>
+                                </ListItemSecondaryAction>
+                            </ListItem>
+                        </List>
+                    </Paper>
+                    <Typography
+                        className={classes.sectionTitle}
+                        variant="subtitle2"
+                    >
+                        {t("setting.privacyAndSecurity")}
+                    </Typography>
+                    <Paper>
+                        <List className={classes.desenList}>
+                            <ListItem button>
+                                <ListItemIcon className={classes.iconFix}>
+                                    <HomeIcon />
+                                </ListItemIcon>
+                                <ListItemText
+                                    primary={t("setting.profilePage")}
+                                />
+
+                                <ListItemSecondaryAction>
+                                    <Switch
+                                        onChange={this.handleToggle}
+                                        checked={this.state.settings.homepage}
+                                    />
+                                </ListItemSecondaryAction>
+                            </ListItem>
+                            <Divider />
+                            <ListItem
+                                button
+                                onClick={() =>
+                                    this.setState({ changePassword: true })
+                                }
+                            >
+                                <ListItemIcon className={classes.iconFix}>
+                                    <LockIcon />
+                                </ListItemIcon>
+                                <ListItemText
+                                    primary={t("setting.accountPassword")}
+                                />
+
+                                <ListItemSecondaryAction
+                                    className={classes.flexContainer}
+                                >
+                                    <RightIcon className={classes.rightIcon} />
+                                </ListItemSecondaryAction>
+                            </ListItem>
+                            <Divider />
+                            <ListItem button onClick={() => this.init2FA()}>
+                                <ListItemIcon className={classes.iconFix}>
+                                    <VerifyIcon />
+                                </ListItemIcon>
+                                <ListItemText primary={t("setting.2fa")} />
+
+                                <ListItemSecondaryAction
+                                    className={classes.flexContainer}
+                                >
+                                    <Typography
+                                        className={classes.infoTextWithIcon}
+                                        color="textSecondary"
+                                    >
+                                        {!this.state.settings.two_factor
+                                            ? t("setting.disabled")
+                                            : t("setting.enabled")}
+                                    </Typography>
+                                    <RightIcon
+                                        className={classes.rightIconWithText}
+                                    />
+                                </ListItemSecondaryAction>
+                            </ListItem>
+                        </List>
+                    </Paper>
+
+                    <Authn
+                        list={this.state.settings.authn}
+                        add={(credential) => {
+                            this.setState({
+                                settings: {
+                                    ...this.state.settings,
+                                    authn: [
+                                        ...this.state.settings.authn,
+                                        credential,
+                                    ],
+                                },
+                            });
+                        }}
+                        remove={(id) => {
+                            let credentials = [...this.state.settings.authn];
+                            credentials = credentials.filter((v) => {
+                                return v.id !== id;
+                            });
+                            this.setState({
+                                settings: {
+                                    ...this.state.settings,
+                                    authn: credentials,
+                                },
+                            });
+                        }}
+                    />
+
+                    <Typography
+                        className={classes.sectionTitle}
+                        variant="subtitle2"
+                    >
+                        {t("setting.appearance")}
+                    </Typography>
+                    <Paper>
+                        <List className={classes.desenList}>
+                            <ListItem
+                                button
+                                onClick={() =>
+                                    this.setState({ changeTheme: true })
+                                }
+                            >
+                                <ListItemIcon className={classes.iconFix}>
+                                    <ColorIcon />
+                                </ListItemIcon>
+                                <ListItemText
+                                    primary={t("setting.themeColor")}
+                                />
+
+                                <ListItemSecondaryAction
+                                    className={classes.flexContainer}
+                                >
+                                    <div className={classes.firstColor} />
+                                    <div className={classes.secondColor} />
+                                </ListItemSecondaryAction>
+                            </ListItem>
+                            <Divider />
+                            <ListItem
+                                button
+                                onClick={() => this.toggleThemeMode(dark)}
+                            >
+                                <ListItemIcon className={classes.iconFix}>
+                                    <Brightness3 />
+                                </ListItemIcon>
+                                <ListItemText primary={t("setting.darkMode")} />
+
+                                <ListItemSecondaryAction
+                                    className={classes.flexContainer}
+                                >
+                                    <Typography
+                                        className={classes.infoTextWithIcon}
+                                        color="textSecondary"
+                                    >
+                                        {dark &&
+                                            (dark === "dark"
+                                                ? t("setting.enabled")
+                                                : t("setting.disabled"))}
+                                        {dark === null &&
+                                            t("setting.syncWithSystem")}
+                                    </Typography>
+                                    <RightIcon
+                                        className={classes.rightIconWithText}
+                                    />
+                                </ListItemSecondaryAction>
+                            </ListItem>
+                            <Divider />
+                            <ListItem
+                                button
+                                onClick={() => this.toggleViewMethod()}
+                            >
+                                <ListItemIcon className={classes.iconFix}>
+                                    <ListAlt />
+                                </ListItemIcon>
+                                <ListItemText primary={t("setting.fileList")} />
+
+                                <ListItemSecondaryAction
+                                    className={classes.flexContainer}
+                                >
+                                    <Typography
+                                        className={classes.infoTextWithIcon}
+                                        color="textSecondary"
+                                    >
+                                        {this.props.viewMethod === "icon" &&
+                                            t("fileManager.gridViewLarge")}
+                                        {this.props.viewMethod === "list" &&
+                                            t("fileManager.listView")}
+                                        {this.props.viewMethod ===
+                                            "smallIcon" &&
+                                            t("fileManager.gridViewSmall")}
+                                    </Typography>
+                                    <RightIcon
+                                        className={classes.rightIconWithText}
+                                    />
+                                </ListItemSecondaryAction>
+                            </ListItem>
+                            <Divider />
+                            <ListItem
+                                onClick={() =>
+                                    this.setState({ changeTimeZone: true })
+                                }
+                                button
+                            >
+                                <ListItemIcon className={classes.iconFix}>
+                                    <Schedule />
+                                </ListItemIcon>
+                                <ListItemText primary={t("setting.timeZone")} />
+
+                                <ListItemSecondaryAction
+                                    className={classes.flexContainer}
+                                >
+                                    <Typography
+                                        className={classes.infoTextWithIcon}
+                                        color="textSecondary"
+                                    >
+                                        {timeZone}
+                                    </Typography>
+                                    <RightIcon
+                                        className={classes.rightIconWithText}
+                                    />
+                                </ListItemSecondaryAction>
+                            </ListItem>
+                            <Divider />
+                            <ListItem
+                                onClick={() => this.props.selectLanguage()}
+                                button
+                            >
+                                <ListItemIcon className={classes.iconFix}>
+                                    <Translate />
+                                </ListItemIcon>
+                                <ListItemText primary={t("setting.language")} />
+
+                                <ListItemSecondaryAction
+                                    className={classes.flexContainer}
+                                >
+                                    <RightIcon
+                                        className={classes.rightIconWithText}
+                                    />
+                                </ListItemSecondaryAction>
+                            </ListItem>
+                        </List>
+                    </Paper>
+                    {user.group.webdav && (
+                        <div>
+                            <Typography
+                                className={classes.sectionTitle}
+                                variant="subtitle2"
+                            >
+                                WebDAV
+                            </Typography>
+                            <Paper>
+                                <List className={classes.desenList}>
+                                    <ListItem
+                                        button
+                                        onClick={() =>
+                                            this.setState({
+                                                showWebDavUrl: true,
+                                            })
+                                        }
+                                    >
+                                        <ListItemIcon
+                                            className={classes.iconFix}
+                                        >
+                                            <LinkIcon />
+                                        </ListItemIcon>
+                                        <ListItemText
+                                            primary={t("setting.webdavServer")}
+                                        />
+
+                                        <ListItemSecondaryAction
+                                            className={classes.flexContainer}
+                                        >
+                                            <RightIcon
+                                                className={classes.rightIcon}
+                                            />
+                                        </ListItemSecondaryAction>
+                                    </ListItem>
+                                    <Divider />
+                                    <ListItem
+                                        button
+                                        onClick={() =>
+                                            this.setState({
+                                                showWebDavUserName: true,
+                                            })
+                                        }
+                                    >
+                                        <ListItemIcon
+                                            className={classes.iconFix}
+                                        >
+                                            <InputIcon />
+                                        </ListItemIcon>
+                                        <ListItemText
+                                            primary={t("setting.userName")}
+                                        />
+
+                                        <ListItemSecondaryAction
+                                            className={classes.flexContainer}
+                                        >
+                                            <RightIcon
+                                                className={classes.rightIcon}
+                                            />
+                                        </ListItemSecondaryAction>
+                                    </ListItem>
+                                    <Divider />
+                                    <ListItem
+                                        button
+                                        onClick={() =>
+                                            this.props.history.push("/connect?")
+                                        }
+                                    >
+                                        <ListItemIcon
+                                            className={classes.iconFix}
+                                        >
+                                            <SecurityIcon />
+                                        </ListItemIcon>
+                                        <ListItemText
+                                            primary={t("setting.manageAccount")}
+                                        />
+
+                                        <ListItemSecondaryAction
+                                            className={classes.flexContainer}
+                                        >
+                                            <RightIcon
+                                                className={classes.rightIcon}
+                                            />
+                                        </ListItemSecondaryAction>
+                                    </ListItem>
+                                </List>
+                            </Paper>
+                        </div>
+                    )}
+                    <div className={classes.paddingBottom} />
+                </div>
+                <BindPhone
+                    phone={this.state.settings.phone}
+                    onClose={this.handleClose}
+                    open={this.state.bindPhone}
+                />
+                <TimeZoneDialog
+                    onClose={() => this.setState({ changeTimeZone: false })}
+                    open={this.state.changeTimeZone}
+                />
+                <Dialog
+                    open={this.state.avatarModal}
+                    onClose={this.handleClose}
+                >
+                    <DialogTitle>{t("setting.avatar")}</DialogTitle>
+                    <List>
+                        <ListItem
+                            button
+                            component="label"
+                            disabled={this.state.loading === "avatar"}
+                        >
+                            <input
+                                type="file"
+                                accept="image/*"
+                                style={{ display: "none" }}
+                                ref={this.fileInput}
+                                onChange={this.uploadAvatar}
+                            />
+                            <ListItemAvatar>
+                                <Avatar className={classes.uploadFromFile}>
+                                    <PhotoIcon />
+                                </Avatar>
+                            </ListItemAvatar>
+                            <ListItemText primary={t("setting.uploadImage")} />
+                        </ListItem>
+                        <ListItem
+                            button
+                            onClick={this.useGravatar}
+                            disabled={this.state.loading === "gravatar"}
+                        >
+                            <ListItemAvatar>
+                                <Avatar className={classes.userGravatar}>
+                                    <FingerprintIcon />
+                                </Avatar>
+                            </ListItemAvatar>
+                            <ListItemText
+                                className={classes.paddingText}
+                                primary={t("setting.useGravatar")}
+                            />
+                        </ListItem>
+                    </List>
+                    <DialogActions>
+                        <Button onClick={this.handleClose} color="primary">
+                            {t("cancel", { ns: "common" })}
+                        </Button>
+                    </DialogActions>
+                </Dialog>
+                <Dialog open={this.state.nickModal} onClose={this.handleClose}>
+                    <DialogTitle>{t("setting.changeNick")}</DialogTitle>
+                    <DialogContent>
+                        <TextField
+                            id="standard-name"
+                            label={t("setting.nickname")}
+                            className={classes.textField}
+                            value={this.state.nick}
+                            onChange={this.handleChange("nick")}
+                            margin="normal"
+                            autoFocus
+                        />
+                    </DialogContent>
+                    <DialogActions>
+                        <Button onClick={this.handleClose} color="default">
+                            {t("cancel", { ns: "common" })}
+                        </Button>
+                        <Button
+                            onClick={this.changeNick}
+                            color="primary"
+                            disabled={
+                                this.state.loading === "nick" ||
+                                this.state.nick === ""
+                            }
+                        >
+                            {t("ok", { ns: "common" })}
+                        </Button>
+                    </DialogActions>
+                </Dialog>
+                <Dialog
+                    open={this.state.groupBackModal}
+                    onClose={this.handleClose}
+                >
+                    <DialogTitle>
+                        {t("vas.cancelSubscriptionTitle")}
+                    </DialogTitle>
+                    <DialogContent>
+                        {t("vas.cancelSubscriptionWarning")}
+                    </DialogContent>
+                    <DialogActions>
+                        <Button onClick={this.handleClose} color="default">
+                            {t("cancel", { ns: "common" })}
+                        </Button>
+                        <Button onClick={this.doChangeGroup} color="primary">
+                            {t("ok", { ns: "common" })}
+                        </Button>
+                    </DialogActions>
+                </Dialog>
+                <Dialog
+                    open={this.state.changePassword}
+                    onClose={this.handleClose}
+                >
+                    <DialogTitle>{t("login.resetPassword")}</DialogTitle>
+                    <DialogContent>
+                        <div>
+                            <TextField
+                                id="standard-name"
+                                label={t("setting.originalPassword")}
+                                type="password"
+                                className={classes.textField}
+                                value={this.state.oldPwd}
+                                onChange={this.handleChange("oldPwd")}
+                                margin="normal"
+                                autoFocus
+                            />
+                        </div>
+                        <div>
+                            <TextField
+                                id="standard-name"
+                                label={t("login.newPassword")}
+                                type="password"
+                                className={classes.textField}
+                                value={this.state.newPwd}
+                                onChange={this.handleChange("newPwd")}
+                                margin="normal"
+                            />
+                        </div>
+                        <div>
+                            <TextField
+                                id="standard-name"
+                                label={t("login.repeatNewPassword")}
+                                type="password"
+                                className={classes.textField}
+                                value={this.state.newPwdRepeat}
+                                onChange={this.handleChange("newPwdRepeat")}
+                                margin="normal"
+                            />
+                        </div>
+                    </DialogContent>
+                    <DialogActions>
+                        <Button onClick={this.handleClose} color="default">
+                            {t("cancel", { ns: "common" })}
+                        </Button>
+                        <Button
+                            onClick={this.changhePwd}
+                            color="primary"
+                            disabled={
+                                this.state.loading === "changePassword" ||
+                                this.state.oldPwd === "" ||
+                                this.state.newPwdRepeat === "" ||
+                                this.state.newPwd === ""
+                            }
+                        >
+                            {t("ok", { ns: "common" })}
+                        </Button>
+                    </DialogActions>
+                </Dialog>
+                <Dialog open={this.state.twoFactor} onClose={this.handleClose}>
+                    <DialogTitle>
+                        {this.state.settings.two_factor
+                            ? t("setting.disable2FA")
+                            : t("setting.enable2FA")}
+                    </DialogTitle>
+                    <DialogContent>
+                        <div className={classes.flexContainerResponse}>
+                            {!this.state.settings.two_factor && (
+                                <div className={classes.qrcode}>
+                                    <QRCodeSVG
+                                        value={
+                                            "otpauth://totp/" +
+                                            this.props.title +
+                                            "?secret=" +
+                                            this.state.two_fa_secret
+                                        }
+                                    />
+                                </div>
+                            )}
+
+                            <div className={classes.desText}>
+                                {!this.state.settings.two_factor && (
+                                    <Typography>
+                                        {t("setting.2faDescription")}
+                                    </Typography>
+                                )}
+                                {this.state.settings.two_factor && (
+                                    <Typography>
+                                        {t("setting.inputCurrent2FACode")}
+                                    </Typography>
+                                )}
+                                <TextField
+                                    id="standard-name"
+                                    label={t("login.input2FACode")}
+                                    type="number"
+                                    className={classes.textField}
+                                    value={this.state.authCode}
+                                    onChange={this.handleChange("authCode")}
+                                    margin="normal"
+                                    autoFocus
+                                    fullWidth
+                                />
+                            </div>
+                        </div>
+                    </DialogContent>
+                    <DialogActions>
+                        <Button onClick={this.handleClose} color="default">
+                            {t("cancel", { ns: "common" })}
+                        </Button>
+                        <Button
+                            onClick={this.twoFactor}
+                            color="primary"
+                            disabled={
+                                this.state.loading === "twoFactor" ||
+                                this.state.authCode === ""
+                            }
+                        >
+                            {this.state.settings.two_factor
+                                ? t("setting.disable2FA")
+                                : t("setting.enable2FA")}
+                        </Button>
+                    </DialogActions>
+                </Dialog>
+                <Dialog
+                    open={this.state.changeTheme}
+                    onClose={this.handleClose}
+                >
+                    <DialogTitle>{t("setting.themeColor")}</DialogTitle>
+                    <DialogContent>
+                        <ToggleButtonGroup
+                            value={this.state.chosenTheme}
+                            exclusive
+                            onChange={this.handleAlignment}
+                        >
+                            {Object.keys(this.state.settings.themes).map(
+                                (value, key) => (
+                                    <ToggleButton value={value} key={key}>
+                                        <div
+                                            className={classes.themeBlock}
+                                            style={{ backgroundColor: value }}
+                                        />
+                                    </ToggleButton>
+                                )
+                            )}
+                        </ToggleButtonGroup>
+                    </DialogContent>
+                    <DialogActions>
+                        <Button onClick={this.handleClose} color="default">
+                            {t("cancel", { ns: "common" })}
+                        </Button>
+                        <Button
+                            onClick={this.changeTheme}
+                            color="primary"
+                            disabled={
+                                this.state.loading === "changeTheme" ||
+                                this.state.chosenTheme === null
+                            }
+                        >
+                            {t("ok", { ns: "common" })}
+                        </Button>
+                    </DialogActions>
+                </Dialog>
+                <Dialog
+                    open={this.state.showWebDavUrl}
+                    onClose={this.handleClose}
+                >
+                    <DialogTitle>{t("setting.webdavServer")}</DialogTitle>
+                    <DialogContent>
+                        <TextField
+                            id="standard-name"
+                            className={classes.textField}
+                            value={window.location.origin + "/dav"}
+                            margin="normal"
+                            autoFocus
+                        />
+                    </DialogContent>
+                    <DialogActions>
+                        <Button onClick={this.handleClose} color="default">
+                            {t("close", { ns: "common" })}
+                        </Button>
+                    </DialogActions>
+                </Dialog>
+                <Dialog
+                    open={this.state.showWebDavUserName}
+                    onClose={this.handleClose}
+                >
+                    <DialogTitle>{t("setting.userName")}</DialogTitle>
+                    <DialogContent>
+                        <TextField
+                            id="standard-name"
+                            className={classes.textField}
+                            value={user.user_name}
+                            margin="normal"
+                            autoFocus
+                        />
+                    </DialogContent>
+                    <DialogActions>
+                        <Button onClick={this.handleClose} color="default">
+                            {t("close", { ns: "common" })}
+                        </Button>
+                    </DialogActions>
+                </Dialog>
+                <OptionSelector />
+            </div>
+        );
+    }
+}
+
+const UserSetting = connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(withStyles(styles)(withRouter(withTranslation()(UserSettingCompoment))));
+
+export default UserSetting;
diff --git a/src/component/Setting/WebDAV.js b/src/component/Setting/WebDAV.js
new file mode 100644
index 0000000..6f5e570
--- /dev/null
+++ b/src/component/Setting/WebDAV.js
@@ -0,0 +1,494 @@
+import React, { useCallback, useEffect, useState } from "react";
+import { makeStyles, Typography } from "@material-ui/core";
+import { useDispatch, useSelector } from "react-redux";
+import Paper from "@material-ui/core/Paper";
+import Tabs from "@material-ui/core/Tabs";
+import Tab from "@material-ui/core/Tab";
+import Button from "@material-ui/core/Button";
+import TableContainer from "@material-ui/core/TableContainer";
+import Table from "@material-ui/core/Table";
+import TableHead from "@material-ui/core/TableHead";
+import TableRow from "@material-ui/core/TableRow";
+import TableCell from "@material-ui/core/TableCell";
+import TableBody from "@material-ui/core/TableBody";
+import Alert from "@material-ui/lab/Alert";
+import Auth from "../../middleware/Auth";
+import API from "../../middleware/Api";
+import IconButton from "@material-ui/core/IconButton";
+import { Cloud, CloudOff, Delete } from "@material-ui/icons";
+import CreateWebDAVAccount from "../Modals/CreateWebDAVAccount";
+import TimeAgo from "timeago-react";
+import CreateWebDAVMount from "../Modals/CreateWebDAVMount";
+import Link from "@material-ui/core/Link";
+import { toggleSnackbar } from "../../redux/explorer";
+import { useLocation } from "react-router";
+import Nothing from "../Placeholder/Nothing";
+import { useTranslation } from "react-i18next";
+import AppPromotion from "./AppPromotion";
+import Tooltip from "@material-ui/core/Tooltip";
+import ToggleIcon from "material-ui-toggle-icon";
+import { Pencil, PencilOff } from "mdi-material-ui";
+
+const useStyles = makeStyles((theme) => ({
+    layout: {
+        width: "auto",
+        marginTop: "50px",
+        marginLeft: theme.spacing(3),
+        marginRight: theme.spacing(3),
+        [theme.breakpoints.up(1100 + theme.spacing(3) * 2)]: {
+            width: 1100,
+            marginLeft: "auto",
+            marginRight: "auto",
+        },
+        marginBottom: "50px",
+    },
+    content: {
+        marginTop: theme.spacing(4),
+    },
+    cardContent: {
+        padding: theme.spacing(2),
+    },
+    tableContainer: {
+        overflowX: "auto",
+    },
+    create: {
+        marginTop: theme.spacing(2),
+    },
+    copy: {
+        marginLeft: 10,
+    },
+}));
+
+export default function WebDAV() {
+    const { t } = useTranslation();
+    const query = parseInt(
+        new URLSearchParams(useLocation().search).get("tab")
+    );
+    const [tab, setTab] = useState(query ? query : 0);
+    const [create, setCreate] = useState(false);
+    const [mount, setMount] = useState(false);
+    const [accounts, setAccounts] = useState([]);
+    const [folders, setFolders] = useState([]);
+
+    const appPromotion = useSelector((state) => state.siteConfig.app_promotion);
+    const dispatch = useDispatch();
+    const ToggleSnackbar = useCallback(
+        (vertical, horizontal, msg, color) =>
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color)),
+        [dispatch]
+    );
+
+    const copyToClipboard = (text) => {
+        if (navigator.clipboard) {
+            navigator.clipboard.writeText(text);
+            ToggleSnackbar("top", "center", t("setting.copied"), "success");
+        } else {
+            ToggleSnackbar(
+                "top",
+                "center",
+                t("setting.pleaseManuallyCopy"),
+                "warning"
+            );
+        }
+    };
+
+    const loadList = () => {
+        API.get("/webdav/accounts")
+            .then((response) => {
+                setAccounts(response.data.accounts);
+                setFolders(response.data.folders);
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            });
+    };
+    useEffect(() => {
+        loadList();
+        // eslint-disable-next-line
+    }, []);
+
+    const deleteAccount = (id) => {
+        const account = accounts[id];
+        API.delete("/webdav/accounts/" + account.ID)
+            .then(() => {
+                let accountCopy = [...accounts];
+                accountCopy = accountCopy.filter((v, i) => {
+                    return i !== id;
+                });
+                setAccounts(accountCopy);
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            });
+    };
+
+    const deleteMount = (id) => {
+        const folder = folders[id];
+        API.delete("/webdav/mount/" + folder.id)
+            .then(() => {
+                let folderCopy = [...folders];
+                folderCopy = folderCopy.filter((v, i) => {
+                    return i !== id;
+                });
+                setFolders(folderCopy);
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            });
+    };
+
+    const toggleAccountReadonly = (id) => {
+        const account = accounts[id];
+        API.patch("/webdav/accounts", {
+            id: account.ID,
+            readonly: !account.Readonly,
+        })
+            .then((response) => {
+                account.Readonly = response.data.readonly;
+                const accountCopy = [...accounts];
+                setAccounts(accountCopy);
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            });
+    };
+
+    const toggleAccountUseProxy = (id) => {
+        const account = accounts[id];
+        API.patch("/webdav/accounts", {
+            id: account.ID,
+            use_proxy: !account.UseProxy,
+        })
+            .then((response) => {
+                account.UseProxy = response.data.use_proxy;
+                const accountCopy = [...accounts];
+                setAccounts(accountCopy);
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            });
+    };
+
+    const addAccount = (account) => {
+        setCreate(false);
+        API.post("/webdav/accounts", {
+            path: account.path,
+            name: account.name,
+        })
+            .then((response) => {
+                setAccounts([
+                    {
+                        ID: response.data.id,
+                        Password: response.data.password,
+                        CreatedAt: response.data.created_at,
+                        Name: account.name,
+                        Root: account.path,
+                        Readonly: account.Readonly,
+                    },
+                    ...accounts,
+                ]);
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            });
+    };
+
+    const addMount = (mountInfo) => {
+        setMount(false);
+        API.post("/webdav/mount", {
+            path: mountInfo.path,
+            policy: mountInfo.policy,
+        })
+            .then(() => {
+                loadList();
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            });
+    };
+
+    const classes = useStyles();
+    const user = Auth.GetUser();
+
+    return (
+        <div className={classes.layout}>
+            <CreateWebDAVAccount
+                callback={addAccount}
+                open={create}
+                onClose={() => setCreate(false)}
+            />
+            <CreateWebDAVMount
+                callback={addMount}
+                open={mount}
+                onClose={() => setMount(false)}
+            />
+            <Typography color="textSecondary" variant="h4">
+                {t("navbar.connect")}
+            </Typography>
+            <Paper elevation={3} className={classes.content}>
+                <Tabs
+                    value={tab}
+                    indicatorColor="primary"
+                    textColor="primary"
+                    onChange={(event, newValue) => setTab(newValue)}
+                    aria-label="disabled tabs example"
+                >
+                    <Tab label={t("setting.webdavAccounts")} />
+                    <Tab label={t("vas.mountPolicy")} />
+                    {appPromotion && <Tab label={t("setting.iOSApp")} />}
+                </Tabs>
+                <div className={classes.cardContent}>
+                    {tab === 0 && (
+                        <div>
+                            <Alert severity="info">
+                                {t("setting.webdavHint", {
+                                    url: window.location.origin + "/dav",
+                                    name: user.user_name,
+                                })}
+                            </Alert>
+                            <TableContainer className={classes.tableContainer}>
+                                <Table
+                                    className={classes.table}
+                                    aria-label="simple table"
+                                >
+                                    <TableHead>
+                                        <TableRow>
+                                            <TableCell>
+                                                {t("setting.annotation")}
+                                            </TableCell>
+                                            <TableCell>
+                                                {t("login.password")}
+                                            </TableCell>
+                                            <TableCell align="right">
+                                                {t("setting.rootFolder")}
+                                            </TableCell>
+                                            <TableCell align="right">
+                                                {t("setting.createdAt")}
+                                            </TableCell>
+                                            <TableCell align="center">
+                                                {t("setting.action")}
+                                            </TableCell>
+                                        </TableRow>
+                                    </TableHead>
+                                    <TableBody>
+                                        {accounts.map((row, id) => (
+                                            <TableRow key={id}>
+                                                <TableCell
+                                                    component="th"
+                                                    scope="row"
+                                                >
+                                                    {row.Name}
+                                                </TableCell>
+                                                <TableCell>
+                                                    {row.Password}
+                                                    <Link
+                                                        className={classes.copy}
+                                                        onClick={() =>
+                                                            copyToClipboard(
+                                                                row.Password
+                                                            )
+                                                        }
+                                                        href={"javascript:void"}
+                                                    >
+                                                        {t("copyToClipboard", {
+                                                            ns: "common",
+                                                        })}
+                                                    </Link>
+                                                </TableCell>
+                                                <TableCell align="right">
+                                                    {row.Root}
+                                                </TableCell>
+                                                <TableCell align="right">
+                                                    <TimeAgo
+                                                        datetime={row.CreatedAt}
+                                                        locale={t(
+                                                            "timeAgoLocaleCode",
+                                                            {
+                                                                ns: "common",
+                                                            }
+                                                        )}
+                                                    />
+                                                </TableCell>
+                                                <TableCell align="center">
+                                                    <Tooltip
+                                                        placement="top"
+                                                        title={
+                                                            row.Readonly
+                                                                ? t(
+                                                                      "setting.readonlyOff"
+                                                                  )
+                                                                : t(
+                                                                      "setting.readonlyOn"
+                                                                  )
+                                                        }
+                                                        onClick={() =>
+                                                            toggleAccountReadonly(
+                                                                id
+                                                            )
+                                                        }
+                                                    >
+                                                        <IconButton>
+                                                            <ToggleIcon
+                                                                on={
+                                                                    row.Readonly
+                                                                }
+                                                                onIcon={
+                                                                    <PencilOff
+                                                                        fontSize={
+                                                                            "small"
+                                                                        }
+                                                                    />
+                                                                }
+                                                                offIcon={
+                                                                    <Pencil
+                                                                        fontSize={
+                                                                            "small"
+                                                                        }
+                                                                    />
+                                                                }
+                                                            />
+                                                        </IconButton>
+                                                    </Tooltip>
+                                                    {user.group.allowWebDAVProxy && (<Tooltip
+                                                        placement="top"
+                                                        title={
+                                                            row.UseProxy
+                                                                ? t(
+                                                                    "setting.useProxyOff"
+                                                                )
+                                                                : t(
+                                                                    "setting.useProxyOn"
+                                                                )
+                                                        }
+                                                        onClick={() =>
+                                                            toggleAccountUseProxy(
+                                                                id
+                                                            )
+                                                        }
+                                                    >
+                                                        <IconButton>
+                                                            <ToggleIcon
+                                                                on={
+                                                                    row.UseProxy
+                                                                }
+                                                                onIcon={
+                                                                    <CloudOff
+                                                                        fontSize={
+                                                                            "small"
+                                                                        }
+                                                                    />
+                                                                }
+                                                                offIcon={
+                                                                    <Cloud
+                                                                        fontSize={
+                                                                            "small"
+                                                                        }
+                                                                    />
+                                                                }
+                                                            />
+                                                        </IconButton>
+                                                    </Tooltip>)}
+                                                    <Tooltip
+                                                        placement="top"
+                                                        title={t(
+                                                            "setting.delete"
+                                                        )}
+                                                        onClick={() =>
+                                                            deleteAccount(id)
+                                                        }
+                                                    >
+                                                        <IconButton
+                                                            fontSize={"small"}
+                                                        >
+                                                            <Delete />
+                                                        </IconButton>
+                                                    </Tooltip>
+                                                </TableCell>
+                                            </TableRow>
+                                        ))}
+                                    </TableBody>
+                                </Table>
+                                {accounts.length === 0 && (
+                                    <Nothing primary={t("setting.listEmpty")} />
+                                )}
+                            </TableContainer>
+                            <Button
+                                onClick={() => setCreate(true)}
+                                className={classes.create}
+                                variant="contained"
+                                color="secondary"
+                            >
+                                {t("setting.createNewAccount")}
+                            </Button>
+                        </div>
+                    )}
+                    {tab === 1 && (
+                        <div>
+                            <Alert severity="info">
+                                {t("vas.mountDescription")}
+                            </Alert>
+                            <TableContainer className={classes.tableContainer}>
+                                <Table
+                                    size="small"
+                                    className={classes.table}
+                                    aria-label="simple table"
+                                >
+                                    <TableHead>
+                                        <TableRow>
+                                            <TableCell>
+                                                {t("fileManager.folders")}
+                                            </TableCell>
+                                            <TableCell align="right">
+                                                {t("fileManager.storagePolicy")}
+                                            </TableCell>
+                                            <TableCell align="right">
+                                                {t("setting.action")}
+                                            </TableCell>
+                                        </TableRow>
+                                    </TableHead>
+                                    <TableBody>
+                                        {folders.map((row, id) => (
+                                            <TableRow key={id}>
+                                                <TableCell
+                                                    component="th"
+                                                    scope="row"
+                                                >
+                                                    {row.name}
+                                                </TableCell>
+                                                <TableCell align="right">
+                                                    {row.policy_name}
+                                                </TableCell>
+                                                <TableCell align="right">
+                                                    <IconButton
+                                                        size={"small"}
+                                                        onClick={() =>
+                                                            deleteMount(id)
+                                                        }
+                                                    >
+                                                        <Delete />
+                                                    </IconButton>
+                                                </TableCell>
+                                            </TableRow>
+                                        ))}
+                                    </TableBody>
+                                </Table>
+                                {folders.length === 0 && (
+                                    <Nothing primary={t("setting.listEmpty")} />
+                                )}
+                            </TableContainer>
+                            <Button
+                                onClick={() => setMount(true)}
+                                className={classes.create}
+                                variant="contained"
+                                color="secondary"
+                            >
+                                {t("vas.mountNewFolder")}
+                            </Button>
+                        </div>
+                    )}
+                    {tab === 2 && <AppPromotion />}
+                </div>
+            </Paper>
+        </div>
+    );
+}
diff --git a/src/component/Share/Creator.js b/src/component/Share/Creator.js
new file mode 100644
index 0000000..900f8f4
--- /dev/null
+++ b/src/component/Share/Creator.js
@@ -0,0 +1,107 @@
+import React from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import { Avatar, Typography } from "@material-ui/core";
+import { useHistory } from "react-router";
+import Link from "@material-ui/core/Link";
+import { formatLocalTime } from "../../utils/datetime";
+import { Trans, useTranslation } from "react-i18next";
+
+const useStyles = makeStyles((theme) => ({
+    boxHeader: {
+        textAlign: "center",
+        padding: 24,
+    },
+    avatar: {
+        backgroundColor: theme.palette.secondary.main,
+        margin: "0 auto",
+        width: 50,
+        height: 50,
+        cursor: "pointer",
+    },
+    shareDes: {
+        marginTop: 12,
+    },
+    shareInfo: {
+        color: theme.palette.text.disabled,
+        fontSize: 14,
+    },
+}));
+
+export default function Creator(props) {
+    const { t } = useTranslation("application", { keyPrefix: "share" });
+    const classes = useStyles();
+    const history = useHistory();
+
+    const getSecondDes = () => {
+        if (props.share.expire > 0) {
+            if (props.share.expire >= 24 * 3600) {
+                return t("expireInXDays", {
+                    num: Math.round(props.share.expire / (24 * 3600)),
+                });
+            }
+
+            return t("expireInXHours", {
+                num: Math.round(props.share.expire / 3600),
+            });
+        }
+        return formatLocalTime(props.share.create_date);
+    };
+
+    const userProfile = () => {
+        history.push("/profile/" + props.share.creator.key);
+        props.onClose && props.onClose();
+    };
+
+    return (
+        <div className={classes.boxHeader}>
+            <Avatar
+                className={classes.avatar}
+                alt={props.share.creator.nick}
+                src={"/api/v3/user/avatar/" + props.share.creator.key + "/l"}
+                onClick={() => userProfile()}
+            />
+            <Typography variant="h6" className={classes.shareDes}>
+                {props.isFolder && (
+                    <Trans
+                        i18nKey="share.createdBy"
+                        values={{
+                            nick: props.share.creator.nick,
+                        }}
+                        components={[
+                            <Link
+                                key={0}
+                                onClick={() => userProfile()}
+                                href={"javascript:void(0)"}
+                                color="inherit"
+                            />,
+                        ]}
+                    />
+                )}
+                {!props.isFolder && (
+                    <Trans
+                        i18nKey="share.sharedBy"
+                        values={{
+                            num: 1,
+                            nick: props.share.creator.nick,
+                        }}
+                        components={[
+                            <Link
+                                key={0}
+                                onClick={() => userProfile()}
+                                href={"javascript:void(0)"}
+                                color="inherit"
+                            />,
+                        ]}
+                    />
+                )}
+            </Typography>
+            <Typography className={classes.shareInfo}>
+                {t("statistics", {
+                    views: props.share.views,
+                    downloads: props.share.downloads,
+                    time: getSecondDes(),
+                })}
+            </Typography>
+        </div>
+    );
+}
diff --git a/src/component/Share/LockedFile.js b/src/component/Share/LockedFile.js
new file mode 100644
index 0000000..b8a1f2e
--- /dev/null
+++ b/src/component/Share/LockedFile.js
@@ -0,0 +1,145 @@
+import React, { Component } from "react";
+import { connect } from "react-redux";
+
+import {
+    Avatar,
+    Button,
+    Card,
+    CardActions,
+    CardContent,
+    CardHeader,
+    Divider,
+    TextField,
+    withStyles,
+} from "@material-ui/core";
+import { withRouter } from "react-router";
+import { formatLocalTime } from "../../utils/datetime";
+import { toggleSnackbar } from "../../redux/explorer";
+import { withTranslation } from "react-i18next";
+
+const styles = (theme) => ({
+    card: {
+        maxWidth: 400,
+        margin: "0 auto",
+    },
+    actions: {
+        display: "flex",
+    },
+    layout: {
+        width: "auto",
+        marginTop: "110px",
+        marginLeft: theme.spacing(3),
+        marginRight: theme.spacing(3),
+        [theme.breakpoints.up(1100 + theme.spacing(3) * 2)]: {
+            width: 1100,
+            marginLeft: "auto",
+            marginRight: "auto",
+        },
+    },
+    continue: {
+        marginLeft: "auto",
+        marginRight: "10px",
+        marginRottom: "10px",
+    },
+});
+const mapStateToProps = () => {
+    return {};
+};
+
+const mapDispatchToProps = (dispatch) => {
+    return {
+        toggleSnackbar: (vertical, horizontal, msg, color) => {
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color));
+        },
+    };
+};
+
+class LockedFileCompoment extends Component {
+    constructor(props) {
+        super(props);
+        const query = new URLSearchParams(this.props.location.search);
+        this.state = {
+            pwd: query.get("password"),
+        };
+    }
+
+    handleChange = (name) => (event) => {
+        this.setState({ [name]: event.target.value });
+    };
+
+    submit = (e) => {
+        e.preventDefault();
+        if (this.state.pwd === "") {
+            return;
+        }
+        this.props.setPassowrd(this.state.pwd);
+    };
+
+    render() {
+        const { classes, t } = this.props;
+
+        return (
+            <div className={classes.layout}>
+                <Card className={classes.card}>
+                    <CardHeader
+                        avatar={
+                            <Avatar
+                                aria-label="Recipe"
+                                src={
+                                    "/api/v3/user/avatar/" +
+                                    this.props.share.creator.key +
+                                    "/l"
+                                }
+                            />
+                        }
+                        title={t("share.privateShareTitle", {
+                            nick: this.props.share.creator.nick,
+                        })}
+                        subheader={formatLocalTime(
+                            this.props.share.create_date
+                        )}
+                    />
+                    <Divider />
+                    <CardContent>
+                        <form onSubmit={this.submit}>
+                            <TextField
+                                id="pwd"
+                                label={t("share.enterPassword")}
+                                value={this.state.pwd}
+                                onChange={this.handleChange("pwd")}
+                                margin="normal"
+                                type="password"
+                                autoFocus
+                                fullWidth
+                                color="secondary"
+                            />
+                        </form>
+                    </CardContent>
+                    <CardActions
+                        className={classes.actions}
+                        disableActionSpacing
+                    >
+                        <Button
+                            onClick={this.submit}
+                            color="secondary"
+                            className={classes.continue}
+                            variant="contained"
+                            disabled={
+                                this.state.pwd === "" || this.props.loading
+                            }
+                        >
+                            {t("share.continue")}
+                        </Button>
+                    </CardActions>
+                </Card>
+            </div>
+        );
+    }
+}
+
+const LockedFile = connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(withStyles(styles)(withRouter(withTranslation()(LockedFileCompoment))));
+
+export default LockedFile;
diff --git a/src/component/Share/MyShare.js b/src/component/Share/MyShare.js
new file mode 100644
index 0000000..5b0da66
--- /dev/null
+++ b/src/component/Share/MyShare.js
@@ -0,0 +1,515 @@
+import React, { Component } from "react";
+import { connect } from "react-redux";
+import OpenIcon from "@material-ui/icons/OpenInNew";
+import Pagination from "@material-ui/lab/Pagination";
+import FolderIcon from "@material-ui/icons/Folder";
+import LockIcon from "@material-ui/icons/Lock";
+import UnlockIcon from "@material-ui/icons/LockOpen";
+import EyeIcon from "@material-ui/icons/RemoveRedEye";
+import DeleteIcon from "@material-ui/icons/Delete";
+
+import {
+    Avatar,
+    Button,
+    Card,
+    CardActions,
+    CardHeader,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogTitle,
+    Grid,
+    IconButton,
+    TextField,
+    Tooltip,
+    Typography,
+    withStyles,
+} from "@material-ui/core";
+import API from "../../middleware/Api";
+import TypeIcon from "../FileManager/TypeIcon";
+import Chip from "@material-ui/core/Chip";
+import Divider from "@material-ui/core/Divider";
+import { VisibilityOff, VpnKey } from "@material-ui/icons";
+import Select from "@material-ui/core/Select";
+import MenuItem from "@material-ui/core/MenuItem";
+import FormControl from "@material-ui/core/FormControl";
+import { withRouter } from "react-router-dom";
+import ToggleIcon from "material-ui-toggle-icon";
+import { formatLocalTime } from "../../utils/datetime";
+import { toggleSnackbar } from "../../redux/explorer";
+import Nothing from "../Placeholder/Nothing";
+import { withTranslation } from "react-i18next";
+
+const styles = (theme) => ({
+    cardContainer: {
+        padding: theme.spacing(1),
+    },
+    card: {
+        maxWidth: 400,
+        margin: "0 auto",
+    },
+    actions: {
+        display: "flex",
+    },
+    layout: {
+        width: "auto",
+        marginTop: "50px",
+        marginLeft: theme.spacing(3),
+        marginRight: theme.spacing(3),
+        [theme.breakpoints.up(1100 + theme.spacing(3) * 2)]: {
+            width: 1100,
+            marginLeft: "auto",
+            marginRight: "auto",
+        },
+    },
+    shareTitle: {
+        maxWidth: "200px",
+    },
+    avatarFile: {
+        backgroundColor: theme.palette.primary.light,
+    },
+    avatarFolder: {
+        backgroundColor: theme.palette.secondary.light,
+    },
+    gird: {
+        marginTop: "30px",
+    },
+    loadMore: {
+        textAlign: "right",
+        marginTop: "20px",
+        marginBottom: "40px",
+    },
+    badge: {
+        marginLeft: theme.spacing(1),
+        height: 17,
+    },
+    orderSelect: {
+        textAlign: "right",
+        marginTop: 5,
+    },
+});
+const mapStateToProps = () => {
+    return {};
+};
+
+const mapDispatchToProps = (dispatch) => {
+    return {
+        toggleSnackbar: (vertical, horizontal, msg, color) => {
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color));
+        },
+    };
+};
+
+class MyShareCompoment extends Component {
+    state = {
+        page: 1,
+        total: 0,
+        shareList: [],
+        showPwd: null,
+        orderBy: "created_at DESC",
+    };
+
+    componentDidMount = () => {
+        this.loadList(1, this.state.orderBy);
+    };
+
+    showPwd = (pwd) => {
+        this.setState({ showPwd: pwd });
+    };
+
+    handleClose = () => {
+        this.setState({ showPwd: null });
+    };
+
+    removeShare = (id) => {
+        API.delete("/share/" + id)
+            .then(() => {
+                let oldList = this.state.shareList;
+                oldList = oldList.filter((value) => {
+                    return value.key !== id;
+                });
+                this.setState({
+                    shareList: oldList,
+                    total: this.state.total - 1,
+                });
+                this.props.toggleSnackbar(
+                    "top",
+                    "right",
+                    this.props.t("share.shareCanceled"),
+                    "success"
+                );
+                if (oldList.length === 0) {
+                    this.loadList(1, this.state.orderBy);
+                }
+            })
+            .catch((error) => {
+                this.props.toggleSnackbar(
+                    "top",
+                    "right",
+                    error.message,
+                    "error"
+                );
+            });
+    };
+
+    changePermission = (id) => {
+        const newPwd = Math.random().toString(36).substr(2).slice(2, 8);
+        const oldList = this.state.shareList;
+        const shareIndex = oldList.findIndex((value) => {
+            return value.key === id;
+        });
+        API.patch("/share/" + id, {
+            prop: "password",
+            value: oldList[shareIndex].password === "" ? newPwd : "",
+        })
+            .then((response) => {
+                oldList[shareIndex].password = response.data;
+                this.setState({
+                    shareList: oldList,
+                });
+            })
+            .catch((error) => {
+                this.props.toggleSnackbar(
+                    "top",
+                    "right",
+                    error.message,
+                    "error"
+                );
+            });
+    };
+
+    changePreviewOption = (id) => {
+        const oldList = this.state.shareList;
+        const shareIndex = oldList.findIndex((value) => {
+            return value.key === id;
+        });
+        API.patch("/share/" + id, {
+            prop: "preview_enabled",
+            value: oldList[shareIndex].preview ? "false" : "true",
+        })
+            .then((response) => {
+                oldList[shareIndex].preview = response.data;
+                this.setState({
+                    shareList: oldList,
+                });
+            })
+            .catch((error) => {
+                this.props.toggleSnackbar(
+                    "top",
+                    "right",
+                    error.message,
+                    "error"
+                );
+            });
+    };
+
+    loadList = (page, orderBy) => {
+        const order = orderBy.split(" ");
+        API.get(
+            "/share?page=" +
+                page +
+                "&order_by=" +
+                order[0] +
+                "&order=" +
+                order[1]
+        )
+            .then((response) => {
+                this.setState({
+                    total: response.data.total,
+                    shareList: response.data.items,
+                });
+            })
+            .catch(() => {
+                this.props.toggleSnackbar(
+                    "top",
+                    "right",
+                    this.props.t("share.listLoadingError"),
+                    "error"
+                );
+            });
+    };
+
+    handlePageChange = (event, value) => {
+        this.setState({
+            page: value,
+        });
+        this.loadList(value, this.state.orderBy);
+    };
+
+    handleOrderChange = (event) => {
+        this.setState({
+            orderBy: event.target.value,
+        });
+        this.loadList(this.state.page, event.target.value);
+    };
+
+    isExpired = (share) => {
+        return share.expire < -1 || share.remain_downloads === 0;
+    };
+
+    render() {
+        const { classes, t } = this.props;
+
+        return (
+            <div className={classes.layout}>
+                <Grid container>
+                    <Grid sm={6} xs={6}>
+                        <Typography color="textSecondary" variant="h4">
+                            {t("share.sharedFiles")}
+                        </Typography>
+                    </Grid>
+                    <Grid sm={6} xs={6} className={classes.orderSelect}>
+                        <FormControl>
+                            <Select
+                                color={"secondary"}
+                                onChange={this.handleOrderChange}
+                                value={this.state.orderBy}
+                            >
+                                <MenuItem value={"created_at DESC"}>
+                                    {t("share.createdAtDesc")}
+                                </MenuItem>
+                                <MenuItem value={"created_at ASC"}>
+                                    {t("share.createdAtAsc")}
+                                </MenuItem>
+                                <MenuItem value={"downloads DESC"}>
+                                    {t("share.downloadsDesc")}
+                                </MenuItem>
+                                <MenuItem value={"downloads ASC"}>
+                                    {t("share.downloadsAsc")}
+                                </MenuItem>
+                                <MenuItem value={"views DESC"}>
+                                    {t("share.viewsDesc")}
+                                </MenuItem>
+                                <MenuItem value={"views ASC"}>
+                                    {t("share.viewsAsc")}
+                                </MenuItem>
+                            </Select>
+                        </FormControl>
+                    </Grid>
+                </Grid>
+                <Grid container spacing={2} className={classes.gird}>
+                    {this.state.shareList.length === 0 && (
+                        <Nothing primary={t("share.noRecords")} />
+                    )}
+                    {this.state.shareList.map((value) => (
+                        <Grid
+                            item
+                            xs={12}
+                            sm={6}
+                            md={4}
+                            key={value.id}
+                            className={classes.cardContainer}
+                        >
+                            <Card className={classes.card}>
+                                <CardHeader
+                                    avatar={
+                                        <div>
+                                            {!value.is_dir && (
+                                                <TypeIcon
+                                                    fileName={
+                                                        value.source
+                                                            ? value.source.name
+                                                            : ""
+                                                    }
+                                                    isUpload
+                                                />
+                                            )}{" "}
+                                            {value.is_dir && (
+                                                <Avatar
+                                                    className={
+                                                        classes.avatarFolder
+                                                    }
+                                                >
+                                                    <FolderIcon />
+                                                </Avatar>
+                                            )}
+                                        </div>
+                                    }
+                                    title={
+                                        <Tooltip
+                                            placement="top"
+                                            title={
+                                                value.source
+                                                    ? value.source.name
+                                                    : t("share.sourceNotFound")
+                                            }
+                                        >
+                                            <Typography
+                                                noWrap
+                                                className={classes.shareTitle}
+                                            >
+                                                {value.source
+                                                    ? value.source.name
+                                                    : t("share.sourceNotFound")}
+                                            </Typography>
+                                        </Tooltip>
+                                    }
+                                    subheader={
+                                        <span>
+                                            {formatLocalTime(value.create_date)}
+                                            {this.isExpired(value) && (
+                                                <Chip
+                                                    size="small"
+                                                    className={classes.badge}
+                                                    label={t("share.expired")}
+                                                />
+                                            )}
+                                        </span>
+                                    }
+                                />
+                                <Divider />
+                                <CardActions
+                                    disableActionSpacing
+                                    style={{
+                                        display: "block",
+                                        textAlign: "right",
+                                    }}
+                                >
+                                    <Tooltip
+                                        placement="top"
+                                        title={t("fileManager.open")}
+                                    >
+                                        <IconButton
+                                            onClick={() =>
+                                                this.props.history.push(
+                                                    "/s/" +
+                                                        value.key +
+                                                        (value.password === ""
+                                                            ? ""
+                                                            : "?password=" +
+                                                              value.password)
+                                                )
+                                            }
+                                        >
+                                            <OpenIcon fontSize={"small"} />
+                                        </IconButton>
+                                    </Tooltip>{" "}
+                                    {value.password !== "" && (
+                                        <>
+                                            <Tooltip
+                                                placement="top"
+                                                title={t(
+                                                    "share.changeToPublic"
+                                                )}
+                                                onClick={() =>
+                                                    this.changePermission(
+                                                        value.key
+                                                    )
+                                                }
+                                            >
+                                                <IconButton>
+                                                    <LockIcon
+                                                        fontSize={"small"}
+                                                    />
+                                                </IconButton>
+                                            </Tooltip>
+                                            <Tooltip
+                                                placement="top"
+                                                title={t("share.viewPassword")}
+                                                onClick={() =>
+                                                    this.showPwd(value.password)
+                                                }
+                                            >
+                                                <IconButton>
+                                                    <VpnKey
+                                                        fontSize={"small"}
+                                                    />
+                                                </IconButton>
+                                            </Tooltip>
+                                        </>
+                                    )}
+                                    {value.password === "" && (
+                                        <Tooltip
+                                            placement="top"
+                                            title={t("share.changeToPrivate")}
+                                            onClick={() =>
+                                                this.changePermission(value.key)
+                                            }
+                                        >
+                                            <IconButton>
+                                                <UnlockIcon
+                                                    fontSize={"small"}
+                                                />
+                                            </IconButton>
+                                        </Tooltip>
+                                    )}
+                                    <Tooltip
+                                        placement="top"
+                                        title={
+                                            value.preview
+                                                ? t("share.disablePreview")
+                                                : t("share.enablePreview")
+                                        }
+                                        onClick={() =>
+                                            this.changePreviewOption(value.key)
+                                        }
+                                    >
+                                        <IconButton>
+                                            <ToggleIcon
+                                                on={value.preview}
+                                                onIcon={
+                                                    <EyeIcon
+                                                        fontSize={"small"}
+                                                    />
+                                                }
+                                                offIcon={
+                                                    <VisibilityOff
+                                                        fontSize={"small"}
+                                                    />
+                                                }
+                                            />
+                                        </IconButton>
+                                    </Tooltip>
+                                    <Tooltip
+                                        placement="top"
+                                        title={t("share.cancelShare")}
+                                        onClick={() =>
+                                            this.removeShare(value.key)
+                                        }
+                                    >
+                                        <IconButton>
+                                            <DeleteIcon fontSize={"small"} />
+                                        </IconButton>
+                                    </Tooltip>
+                                </CardActions>
+                            </Card>
+                        </Grid>
+                    ))}
+                </Grid>
+                <div className={classes.loadMore}>
+                    <Pagination
+                        count={Math.ceil(this.state.total / 18)}
+                        onChange={this.handlePageChange}
+                        color="secondary"
+                    />
+                </div>{" "}
+                <Dialog
+                    open={this.state.showPwd !== null}
+                    onClose={this.handleClose}
+                >
+                    <DialogTitle> {t("share.sharePassword")} </DialogTitle>{" "}
+                    <DialogContent>
+                        <TextField
+                            id="standard-name"
+                            value={this.state.showPwd}
+                            margin="normal"
+                            autoFocus
+                        />
+                    </DialogContent>{" "}
+                    <DialogActions>
+                        <Button onClick={this.handleClose} color="default">
+                            {t("close", { ns: "common" })}
+                        </Button>{" "}
+                    </DialogActions>{" "}
+                </Dialog>{" "}
+            </div>
+        );
+    }
+}
+
+const MyShare = connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(withStyles(styles)(withRouter(withTranslation()(MyShareCompoment))));
+
+export default MyShare;
diff --git a/src/component/Share/NotFound.js b/src/component/Share/NotFound.js
new file mode 100644
index 0000000..0ce52ae
--- /dev/null
+++ b/src/component/Share/NotFound.js
@@ -0,0 +1,32 @@
+import React from "react";
+import SentimentVeryDissatisfiedIcon from "@material-ui/icons/SentimentVeryDissatisfied";
+import { lighten, makeStyles } from "@material-ui/core/styles";
+
+const useStyles = makeStyles((theme) => ({
+    icon: {
+        fontSize: "160px",
+    },
+    emptyContainer: {
+        bottom: "0",
+        height: "300px",
+        margin: "50px auto",
+        width: "300px",
+        color: lighten(theme.palette.text.disabled, 0.4),
+        textAlign: "center",
+        paddingTop: "20px",
+    },
+    emptyInfoBig: {
+        fontSize: "25px",
+        color: lighten(theme.palette.text.disabled, 0.4),
+    },
+}));
+
+export default function Notice(props) {
+    const classes = useStyles();
+    return (
+        <div className={classes.emptyContainer}>
+            <SentimentVeryDissatisfiedIcon className={classes.icon} />
+            <div className={classes.emptyInfoBig}>{props.msg}</div>
+        </div>
+    );
+}
diff --git a/src/component/Share/ReadMe.js b/src/component/Share/ReadMe.js
new file mode 100644
index 0000000..d4b0d12
--- /dev/null
+++ b/src/component/Share/ReadMe.js
@@ -0,0 +1,143 @@
+import React, { useCallback, useEffect, useState } from "react";
+import { makeStyles, useTheme } from "@material-ui/core/styles";
+import { MenuBook } from "@material-ui/icons";
+import { Typography } from "@material-ui/core";
+import Divider from "@material-ui/core/Divider";
+import Paper from "@material-ui/core/Paper";
+import TextLoading from "../Placeholder/TextLoading";
+import API from "../../middleware/Api";
+import { useDispatch } from "react-redux";
+import Editor from "for-editor";
+import { toggleSnackbar } from "../../redux/explorer";
+import { useTranslation } from "react-i18next";
+
+const useStyles = makeStyles((theme) => ({
+    readMeContainer: {
+        marginTop: 30,
+        [theme.breakpoints.down("sm")]: {
+            marginTop: theme.spacing(2),
+        },
+    },
+    readMeHeader: {
+        padding: "10px 16px",
+        display: "flex",
+        color: theme.palette.text.secondary,
+    },
+    readMeIcon: {
+        marginRight: 8,
+    },
+    content: {},
+    "@global": {
+        //如果嵌套主题，则应该定位[class * =“MuiButton-root”]。
+        ".for-container": {
+            border: "none!important",
+        },
+        ".for-container .for-editor .for-editor-edit": {
+            height: "0!important",
+        },
+        ".for-container > div:first-child": {
+            borderTopLeftRadius: "0!important",
+            borderTopRightRadius: "0!important",
+        },
+        ".for-container .for-editor .for-panel .for-preview": {
+            backgroundColor: theme.palette.background.paper + "!important",
+            color: theme.palette.text.primary + "!important",
+        },
+        ".for-container .for-markdown-preview pre": {
+            backgroundColor: theme.palette.background.default + "!important",
+            color:
+                theme.palette.type === "dark"
+                    ? "#fff !important"
+                    : "rgba(0, 0, 0, 0.87);!important",
+        },
+
+        ".for-container .for-markdown-preview code": {
+            backgroundColor: theme.palette.background.default + "!important",
+        },
+        ".for-container .for-markdown-preview a": {
+            color:
+                theme.palette.type === "dark"
+                    ? "#67aeff !important"
+                    : "#0366d6 !important",
+        },
+        ".for-container .for-markdown-preview table th": {
+            backgroundColor: theme.palette.background.default + "!important",
+        },
+    },
+}));
+
+export default function ReadMe(props) {
+    const { t } = useTranslation();
+    const classes = useStyles();
+    const theme = useTheme();
+
+    const [loading, setLoading] = useState(true);
+    const [content, setContent] = useState("");
+
+    const dispatch = useDispatch();
+    const ToggleSnackbar = useCallback(
+        (vertical, horizontal, msg, color) =>
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color)),
+        [dispatch]
+    );
+
+    const $vm = React.createRef();
+
+    useEffect(() => {
+        setLoading(true);
+        const previewPath =
+            props.file.path === "/"
+                ? props.file.path + props.file.name
+                : props.file.path + "/" + props.file.name;
+        API.get(
+            "/share/readme/" +
+                props.share.key +
+                "?path=" +
+                encodeURIComponent(previewPath)
+        )
+            .then((response) => {
+                setContent(response.rawData.toString());
+            })
+            .catch((error) => {
+                ToggleSnackbar(
+                    "top",
+                    "right",
+                    t("share.readmeError", { msg: error.message }),
+                    "error"
+                );
+            })
+            .then(() => {
+                setLoading(false);
+            });
+        // eslint-disable-next-line
+    }, [props.share, props.file]);
+
+    return (
+        <Paper className={classes.readMeContainer}>
+            <div className={classes.readMeHeader}>
+                <MenuBook className={classes.readMeIcon} />
+                <Typography>{props.file.name}</Typography>
+            </div>
+
+            <Divider />
+            <div className={classes.content}>
+                {loading && <TextLoading />}
+                {!loading && (
+                    <Editor
+                        ref={$vm}
+                        style={{
+                            boxShadow: "none",
+                            borderRadius: theme.shape.borderRadius,
+                            backgroundColor: theme.palette.background.paper,
+                        }}
+                        height={"100%"}
+                        value={content}
+                        onChange={(value) => setContent(value)}
+                        preview
+                        toolbar={{}}
+                    />
+                )}
+            </div>
+        </Paper>
+    );
+}
diff --git a/src/component/Share/SearchResult.js b/src/component/Share/SearchResult.js
new file mode 100644
index 0000000..5ae6fe5
--- /dev/null
+++ b/src/component/Share/SearchResult.js
@@ -0,0 +1,287 @@
+import React, { useCallback, useEffect, useState } from "react";
+import { useDispatch } from "react-redux";
+import OpenIcon from "@material-ui/icons/OpenInNew";
+import Pagination from "@material-ui/lab/Pagination";
+import FolderIcon from "@material-ui/icons/Folder";
+
+import {
+    Avatar,
+    Card,
+    CardHeader,
+    Grid,
+    IconButton,
+    Tooltip,
+    Typography,
+} from "@material-ui/core";
+import API from "../../middleware/Api";
+import TypeIcon from "../FileManager/TypeIcon";
+import Select from "@material-ui/core/Select";
+import MenuItem from "@material-ui/core/MenuItem";
+import FormControl from "@material-ui/core/FormControl";
+import { useHistory } from "react-router-dom";
+import { makeStyles } from "@material-ui/core/styles";
+import { useLocation } from "react-router";
+import TimeAgo from "timeago-react";
+import { toggleSnackbar } from "../../redux/explorer";
+import Nothing from "../Placeholder/Nothing";
+import { Trans, useTranslation } from "react-i18next";
+
+const useStyles = makeStyles((theme) => ({
+    cardContainer: {
+        padding: theme.spacing(1),
+    },
+    card: {
+        maxWidth: 400,
+        margin: "0 auto",
+    },
+    actions: {
+        display: "flex",
+    },
+    layout: {
+        width: "auto",
+        marginTop: "50px",
+        marginLeft: theme.spacing(3),
+        marginRight: theme.spacing(3),
+        [theme.breakpoints.up(1100 + theme.spacing(3) * 2)]: {
+            width: 1100,
+            marginLeft: "auto",
+            marginRight: "auto",
+        },
+    },
+    shareTitle: {
+        maxWidth: "200px",
+    },
+    avatarFile: {
+        backgroundColor: theme.palette.primary.light,
+    },
+    avatarFolder: {
+        backgroundColor: theme.palette.secondary.light,
+    },
+    gird: {
+        marginTop: "30px",
+    },
+    loadMore: {
+        textAlign: "right",
+        marginTop: "20px",
+        marginBottom: "40px",
+    },
+    badge: {
+        marginLeft: theme.spacing(1),
+        height: 17,
+    },
+    orderSelect: {
+        textAlign: "right",
+        marginTop: 5,
+    },
+    cardAction: {
+        marginTop: 0,
+    },
+}));
+
+function useQuery() {
+    return new URLSearchParams(useLocation().search);
+}
+
+export default function SearchResult() {
+    const { t } = useTranslation("application", { keyPrefix: "share" });
+    const { t: tGlobal } = useTranslation();
+    const classes = useStyles();
+    const dispatch = useDispatch();
+
+    const query = useQuery();
+    const location = useLocation();
+    const history = useHistory();
+
+    const [page, setPage] = useState(1);
+    const [total, setTotal] = useState(0);
+    const [shareList, setShareList] = useState([]);
+    const [orderBy, setOrderBy] = useState("created_at DESC");
+
+    const ToggleSnackbar = useCallback(
+        (vertical, horizontal, msg, color) =>
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color)),
+        [dispatch]
+    );
+
+    const search = (keywords, page, orderBy) => {
+        const order = orderBy.split(" ");
+        API.get(
+            "/share/search?page=" +
+                page +
+                "&order_by=" +
+                order[0] +
+                "&order=" +
+                order[1] +
+                "&keywords=" +
+                encodeURIComponent(keywords)
+        )
+            .then((response) => {
+                setTotal(response.data.total);
+                setShareList(response.data.items);
+            })
+            .catch(() => {
+                ToggleSnackbar("top", "right", t("listLoadingError"), "error");
+            });
+    };
+
+    useEffect(() => {
+        const keywords = query.get("keywords");
+        if (keywords) {
+            search(keywords, page, orderBy);
+        } else {
+            ToggleSnackbar("top", "right", t("enterKeywords"), "warning");
+        }
+    }, [location]);
+
+    const handlePageChange = (event, value) => {
+        setPage(value);
+        const keywords = query.get("keywords");
+        search(keywords, value, orderBy);
+    };
+
+    const handleOrderChange = (event) => {
+        setOrderBy(event.target.value);
+        const keywords = query.get("keywords");
+        search(keywords, page, event.target.value);
+    };
+
+    return (
+        <div className={classes.layout}>
+            <Grid container>
+                <Grid sm={6} xs={6}>
+                    <Typography color="textSecondary" variant="h4">
+                        {t("searchResult")}
+                    </Typography>
+                </Grid>
+                <Grid sm={6} xs={6} className={classes.orderSelect}>
+                    <FormControl>
+                        <Select
+                            color={"secondary"}
+                            onChange={handleOrderChange}
+                            value={orderBy}
+                        >
+                            <MenuItem value={"created_at DESC"}>
+                                {t("createdAtDesc")}
+                            </MenuItem>
+                            <MenuItem value={"created_at ASC"}>
+                                {t("createdAtAsc")}
+                            </MenuItem>
+                            <MenuItem value={"downloads DESC"}>
+                                {t("downloadsDesc")}
+                            </MenuItem>
+                            <MenuItem value={"downloads ASC"}>
+                                {t("downloadsAsc")}
+                            </MenuItem>
+                            <MenuItem value={"views DESC"}>
+                                {t("viewsDesc")}
+                            </MenuItem>
+                            <MenuItem value={"views ASC"}>
+                                {t("viewsAsc")}
+                            </MenuItem>
+                        </Select>
+                    </FormControl>
+                </Grid>
+            </Grid>
+            <Grid container spacing={24} className={classes.gird}>
+                {shareList.length === 0 && <Nothing primary={t("noRecords")} />}
+                {shareList.map((value) => (
+                    <Grid
+                        item
+                        xs={12}
+                        sm={4}
+                        key={value.id}
+                        className={classes.cardContainer}
+                    >
+                        <Card className={classes.card}>
+                            <CardHeader
+                                classes={{
+                                    action: classes.cardAction,
+                                }}
+                                avatar={
+                                    <div>
+                                        {!value.is_dir && (
+                                            <TypeIcon
+                                                fileName={
+                                                    value.source
+                                                        ? value.source.name
+                                                        : ""
+                                                }
+                                                isUpload
+                                            />
+                                        )}{" "}
+                                        {value.is_dir && (
+                                            <Avatar
+                                                className={classes.avatarFolder}
+                                            >
+                                                <FolderIcon />
+                                            </Avatar>
+                                        )}
+                                    </div>
+                                }
+                                action={
+                                    <Tooltip
+                                        placement="top"
+                                        title={tGlobal("fileManager.open")}
+                                    >
+                                        <IconButton
+                                            onClick={() =>
+                                                history.push("/s/" + value.key)
+                                            }
+                                        >
+                                            <OpenIcon />
+                                        </IconButton>
+                                    </Tooltip>
+                                }
+                                title={
+                                    <Tooltip
+                                        placement="top"
+                                        title={
+                                            value.source
+                                                ? value.source.name
+                                                : t("sourceNotFound")
+                                        }
+                                    >
+                                        <Typography
+                                            noWrap
+                                            className={classes.shareTitle}
+                                        >
+                                            {value.source
+                                                ? value.source.name
+                                                : t("sourceNotFound")}
+                                        </Typography>
+                                    </Tooltip>
+                                }
+                                subheader={
+                                    <span>
+                                        <Trans
+                                            i18nKey="share.sharedAt"
+                                            components={[
+                                                <TimeAgo
+                                                    key={0}
+                                                    datetime={value.create_date}
+                                                    locale={tGlobal(
+                                                        "timeAgoLocaleCode",
+                                                        {
+                                                            ns: "common",
+                                                        }
+                                                    )}
+                                                />,
+                                            ]}
+                                        />
+                                    </span>
+                                }
+                            />
+                        </Card>
+                    </Grid>
+                ))}
+            </Grid>
+            <div className={classes.loadMore}>
+                <Pagination
+                    count={Math.ceil(total / 18)}
+                    onChange={handlePageChange}
+                    color="secondary"
+                />
+            </div>{" "}
+        </div>
+    );
+}
diff --git a/src/component/Share/SharePreload.js b/src/component/Share/SharePreload.js
new file mode 100644
index 0000000..dea490c
--- /dev/null
+++ b/src/component/Share/SharePreload.js
@@ -0,0 +1,104 @@
+import React, { Suspense, useCallback, useEffect, useState } from "react";
+import PageLoading from "../Placeholder/PageLoading";
+import { useParams } from "react-router";
+import API from "../../middleware/Api";
+import { changeSubTitle } from "../../redux/viewUpdate/action";
+import { useDispatch } from "react-redux";
+import Notice from "./NotFound";
+import LockedFile from "./LockedFile";
+import SharedFile from "./SharedFile";
+import SharedFolder from "./SharedFolder";
+import { toggleSnackbar } from "../../redux/explorer";
+import { useTranslation } from "react-i18next";
+
+export default function SharePreload() {
+    const { t } = useTranslation("application", { keyPrefix: "share" });
+    const dispatch = useDispatch();
+    const { id } = useParams();
+
+    const [share, setShare] = useState(undefined);
+    const [loading, setLoading] = useState(false);
+    const [password, setPassword] = useState("");
+
+    const SetSubTitle = useCallback(
+        (title) => dispatch(changeSubTitle(title)),
+        [dispatch]
+    );
+
+    const ToggleSnackbar = useCallback(
+        (vertical, horizontal, msg, color) =>
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color)),
+        [dispatch]
+    );
+
+    useEffect(() => {
+        if (share) {
+            if (share.locked) {
+                SetSubTitle(
+                    t("privateShareTitle", { nick: share.creator.nick })
+                );
+                if (password !== "") {
+                    ToggleSnackbar(
+                        "top",
+                        "right",
+                        t("incorrectPassword"),
+                        "warning"
+                    );
+                }
+            } else {
+                SetSubTitle(share.source.name);
+            }
+        } else {
+            SetSubTitle();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [share, SetSubTitle, ToggleSnackbar]);
+
+    useEffect(() => {
+        return () => {
+            SetSubTitle();
+        };
+        // eslint-disable-next-line
+    }, []);
+
+    useEffect(() => {
+        setLoading(true);
+        let withPassword = "";
+        if (password !== "") {
+            withPassword = "?password=" + password;
+        }
+        API.get("/share/info/" + id + withPassword)
+            .then((response) => {
+                setShare(response.data);
+                setLoading(false);
+            })
+            .catch((error) => {
+                setLoading(false);
+                if (error.code === 404) {
+                    setShare(null);
+                } else {
+                    ToggleSnackbar("top", "right", error.message, "error");
+                }
+            });
+    }, [id, password, ToggleSnackbar]);
+
+    return (
+        <Suspense fallback={<PageLoading />}>
+            {share === undefined && <PageLoading />}
+            {share === null && <Notice msg={t("shareNotExist")} />}
+            {share && share.locked && (
+                <LockedFile
+                    loading={loading}
+                    setPassowrd={setPassword}
+                    share={share}
+                />
+            )}
+            {share && !share.locked && !share.is_dir && (
+                <SharedFile share={share} />
+            )}
+            {share && !share.locked && share.is_dir && (
+                <SharedFolder share={share} />
+            )}
+        </Suspense>
+    );
+}
diff --git a/src/component/Share/SharedFile.js b/src/component/Share/SharedFile.js
new file mode 100644
index 0000000..b0d71b8
--- /dev/null
+++ b/src/component/Share/SharedFile.js
@@ -0,0 +1,334 @@
+import React, { Component } from "react";
+import { connect, useSelector } from "react-redux";
+import { sizeToString, vhCheck } from "../../utils";
+import { isPreviewable } from "../../config";
+import { Button, Typography, withStyles } from "@material-ui/core";
+import Divider from "@material-ui/core/Divider";
+import TypeIcon from "../FileManager/TypeIcon";
+import Auth from "../../middleware/Auth";
+import PurchaseShareDialog from "../Modals/PurchaseShare";
+import { withRouter } from "react-router-dom";
+import Creator from "./Creator";
+import pathHelper from "../../utils/page";
+import Report from "../Modals/Report";
+import {
+    openMusicDialog,
+    openResaveDialog,
+    setSelectedTarget,
+    showAudioPreview,
+    showImgPreivew,
+    toggleSnackbar,
+} from "../../redux/explorer";
+import { startDownload } from "../../redux/explorer/action";
+import { trySharePurchase } from "../../redux/explorer/async";
+import { withTranslation } from "react-i18next";
+
+vhCheck();
+const styles = (theme) => ({
+    layout: {
+        width: "auto",
+        marginTop: "90px",
+        marginLeft: theme.spacing(3),
+        marginRight: theme.spacing(3),
+        [theme.breakpoints.up(1100 + theme.spacing(3) * 2)]: {
+            width: 1100,
+            marginTop: "90px",
+            marginLeft: "auto",
+            marginRight: "auto",
+        },
+        [theme.breakpoints.down("sm")]: {
+            marginTop: 0,
+            marginLeft: 0,
+            marginRight: 0,
+        },
+        justifyContent: "center",
+        display: "flex",
+    },
+    player: {
+        borderRadius: "4px",
+    },
+    fileCotainer: {
+        width: "200px",
+        margin: "0 auto",
+    },
+    buttonCotainer: {
+        width: "400px",
+        margin: "0 auto",
+        textAlign: "center",
+        marginTop: "20px",
+    },
+    paper: {
+        padding: theme.spacing(2),
+    },
+    icon: {
+        borderRadius: "10%",
+        marginTop: 2,
+    },
+
+    box: {
+        width: "100%",
+        maxWidth: 490,
+        backgroundColor: theme.palette.background.paper,
+        borderRadius: theme.shape.borderRadius,
+        boxShadow: "0 8px 16px rgba(29,39,55,.25)",
+        [theme.breakpoints.down("sm")]: {
+            height: "calc(var(--vh, 100vh) - 56px)",
+            borderRadius: 0,
+            maxWidth: 1000,
+        },
+        display: "flex",
+        flexDirection: "column",
+    },
+    boxContent: {
+        padding: 24,
+        display: "flex",
+        flex: "1",
+    },
+    fileName: {
+        marginLeft: 20,
+    },
+    fileSize: {
+        color: theme.palette.text.disabled,
+        fontSize: 14,
+    },
+    boxFooter: {
+        display: "flex",
+        padding: "20px 16px",
+        justifyContent: "space-between",
+    },
+    downloadButton: {
+        marginLeft: 8,
+    },
+});
+const mapStateToProps = () => {
+    return {};
+};
+
+const mapDispatchToProps = (dispatch) => {
+    return {
+        toggleSnackbar: (vertical, horizontal, msg, color) => {
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color));
+        },
+        openMusicDialog: (first) => {
+            dispatch(showAudioPreview(first));
+        },
+        setSelectedTarget: (targets) => {
+            dispatch(setSelectedTarget(targets));
+        },
+        showImgPreivew: (first) => {
+            dispatch(showImgPreivew(first));
+        },
+        openResave: (key) => {
+            dispatch(openResaveDialog(key));
+        },
+        startDownload: (share, file) => {
+            dispatch(startDownload(share, file));
+        },
+        trySharePurchase: (share) => dispatch(trySharePurchase(share)),
+    };
+};
+
+const Modals = React.lazy(() => import("../FileManager/Modals"));
+const ImgPreview = React.lazy(() => import("../FileManager/ImgPreview"));
+
+class SharedFileCompoment extends Component {
+    state = {
+        anchorEl: null,
+        open: false,
+        purchaseCallback: null,
+        loading: false,
+        openReport: false,
+    };
+
+    downloaded = false;
+
+    // TODO merge into react thunk
+    preview = () => {
+        if (pathHelper.isSharePage(this.props.location.pathname)) {
+            const user = Auth.GetUser();
+            if (!Auth.Check() && user && !user.group.shareDownload) {
+                this.props.toggleSnackbar(
+                    "top",
+                    "right",
+                    this.props.t("share.pleaseLogin"),
+                    "warning"
+                );
+                return;
+            }
+        }
+
+        switch (isPreviewable(this.props.share.source.name)) {
+            case "img":
+                this.props.showImgPreivew({
+                    key: this.props.share.key,
+                    name: this.props.share.source.name,
+                });
+                return;
+            case "msDoc":
+                this.props.history.push(
+                    this.props.share.key +
+                    "/doc?name=" +
+                    encodeURIComponent(this.props.share.source.name)
+                );
+                return;
+            case "audio":
+                this.props.openMusicDialog({
+                    key: this.props.share.key,
+                    name: this.props.share.source.name,
+                    type: "share",
+                });
+                return;
+            case "video":
+                this.props.history.push(
+                    this.props.share.key +
+                    "/video?name=" +
+                    encodeURIComponent(this.props.share.source.name)
+                );
+                return;
+            case "edit":
+                this.props.history.push(
+                    this.props.share.key +
+                    "/text?name=" +
+                    encodeURIComponent(this.props.share.source.name)
+                );
+                return;
+            case "pdf":
+                this.props.history.push(
+                    this.props.share.key +
+                    "/pdf?name=" +
+                    encodeURIComponent(this.props.share.source.name)
+                );
+                return;
+            case "code":
+                this.props.history.push(
+                    this.props.share.key +
+                    "/code?name=" +
+                    encodeURIComponent(this.props.share.source.name)
+                );
+                return;
+            case "epub":
+                this.props.history.push(
+                    this.props.share.key +
+                    "/epub?name=" +
+                    encodeURIComponent(this.props.share.source.name)
+                );
+                return;
+            default:
+                this.props.toggleSnackbar(
+                    "top",
+                    "right",
+                    this.props.t("share.cannotShare"),
+                    "warning"
+                );
+                return;
+        }
+    };
+
+    scoreHandler = (callback) => (event) => {
+        this.props.trySharePurchase(this.props.share).then(() => callback());
+    };
+
+    componentWillUnmount() {
+        this.props.setSelectedTarget([]);
+    }
+
+    download = () => {
+        this.props.startDownload(this.props.share, null);
+    };
+
+    render() {
+        const { classes, t } = this.props;
+        const user = Auth.GetUser();
+        const isLogin = Auth.Check();
+
+        return (
+            <div className={classes.layout}>
+                <Modals />
+                <ImgPreview />
+                <PurchaseShareDialog />
+                <Report
+                    open={this.state.openReport}
+                    share={this.props.share}
+                    onClose={() => this.setState({ openReport: false })}
+                />
+                <div className={classes.box}>
+                    <Creator share={this.props.share} />
+                    <Divider />
+                    <div className={classes.boxContent}>
+                        <TypeIcon
+                            className={classes.icon}
+                            isUpload
+                            fileName={this.props.share.source.name}
+                        />
+                        <div className={classes.fileName}>
+                            <Typography style={{ wordBreak: "break-all" }}>
+                                {this.props.share.source.name}
+                            </Typography>
+                            <Typography className={classes.fileSize}>
+                                {sizeToString(this.props.share.source.size)}
+                            </Typography>
+                        </div>
+                    </div>
+                    <Divider />
+                    <div className={classes.boxFooter}>
+                        <div className={classes.actionLeft}>
+                            <Button
+                                onClick={() =>
+                                    this.props.openResave(this.props.share.key)
+                                }
+                                color="secondary"
+                            >
+                                {t("vas.saveToMyFiles")}
+                            </Button>
+                            <Button
+                                onClick={() =>
+                                    this.setState({ openReport: true })
+                                }
+                                color="secondary"
+                            >
+                                {t("vas.report")}
+                            </Button>
+                        </div>
+                        <div className={classes.actions}>
+                            {this.props.share.preview && (
+                                <Button
+                                    variant="outlined"
+                                    color="secondary"
+                                    onClick={this.scoreHandler(this.preview)}
+                                    disabled={this.state.loading}
+                                >
+                                    {t("share.preview")}
+                                </Button>
+                            )}
+                            <Button
+                                variant="contained"
+                                color="secondary"
+                                className={classes.downloadButton}
+                                onClick={this.download}
+                                disabled={this.state.loading}
+                            >
+                                {t("fileManager.download")}
+                                {this.props.share.score > 0 &&
+                                    (!isLogin || !user.group.shareFree) &&
+                                    t("vas.creditPrice", {
+                                        num: this.props.share.score,
+                                    })}
+                                {this.props.share.score > 0 &&
+                                    isLogin &&
+                                    user.group.shareFree &&
+                                    t("vas.creditFree")}
+                            </Button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}
+
+const SharedFile = connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(withStyles(styles)(withRouter(withTranslation()(SharedFileCompoment))));
+
+export default SharedFile;
diff --git a/src/component/Share/SharedFolder.js b/src/component/Share/SharedFolder.js
new file mode 100644
index 0000000..3316740
--- /dev/null
+++ b/src/component/Share/SharedFolder.js
@@ -0,0 +1,153 @@
+import React, { Component } from "react";
+import { connect } from "react-redux";
+import { Typography, withStyles } from "@material-ui/core";
+import { withRouter } from "react-router-dom";
+import FileManager from "../FileManager/FileManager";
+import Paper from "@material-ui/core/Paper";
+import Popover from "@material-ui/core/Popover";
+import Creator from "./Creator";
+import ClickAwayListener from "@material-ui/core/ClickAwayListener";
+import pathHelper from "../../utils/page";
+import {
+    openMusicDialog,
+    openResaveDialog,
+    setSelectedTarget,
+    setShareUserPopover,
+    showImgPreivew,
+    toggleSnackbar,
+} from "../../redux/explorer";
+import { setShareInfo } from "../../redux/viewUpdate/action";
+
+const styles = (theme) => ({
+    layout: {
+        width: "auto",
+        marginTop: 30,
+        marginBottom: 30,
+        marginLeft: theme.spacing(3),
+        marginRight: theme.spacing(3),
+        [theme.breakpoints.up(1100 + theme.spacing(3) * 2)]: {
+            width: 1100,
+            marginLeft: "auto",
+            marginRight: "auto",
+        },
+        [theme.breakpoints.down("sm")]: {
+            marginTop: theme.spacing(2),
+            marginLeft: theme.spacing(1),
+            marginRight: theme.spacing(1),
+        },
+    },
+    managerContainer: {
+        overflowY: "auto",
+    },
+});
+
+const ReadMe = React.lazy(() => import("./ReadMe"));
+
+const mapStateToProps = (state) => {
+    return {
+        anchorEl: state.viewUpdate.shareUserPopoverAnchorEl,
+        fileList: state.explorer.fileList,
+    };
+};
+
+const mapDispatchToProps = (dispatch) => {
+    return {
+        toggleSnackbar: (vertical, horizontal, msg, color) => {
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color));
+        },
+        openMusicDialog: () => {
+            dispatch(openMusicDialog());
+        },
+        setSelectedTarget: (targets) => {
+            dispatch(setSelectedTarget(targets));
+        },
+        showImgPreivew: (first) => {
+            dispatch(showImgPreivew(first));
+        },
+        openResave: (key) => {
+            dispatch(openResaveDialog(key));
+        },
+        setShareUserPopover: (e) => {
+            dispatch(setShareUserPopover(e));
+        },
+        setShareInfo: (s) => {
+            dispatch(setShareInfo(s));
+        },
+    };
+};
+
+class SharedFolderComponent extends Component {
+    state = {};
+
+    UNSAFE_componentWillMount() {
+        this.props.setShareInfo(this.props.share);
+    }
+
+    componentWillUnmount() {
+        this.props.setShareInfo(null);
+        this.props.setSelectedTarget([]);
+    }
+
+    handleClickAway = (e) => {
+        const ignore = e && e.clientY && e.clientY <= 64;
+        if (!pathHelper.isMobile() && !ignore) {
+            this.props.setSelectedTarget([]);
+        }
+    };
+
+    render() {
+        const { classes } = this.props;
+        let readmeShowed = false;
+        const id = this.props.anchorEl !== null ? "simple-popover" : undefined;
+
+        return (
+            <div className={classes.layout}>
+                <ClickAwayListener onClickAway={this.handleClickAway}>
+                    <Paper className={classes.managerContainer}>
+                        <FileManager isShare share={this.props.share} />
+                    </Paper>
+                </ClickAwayListener>
+                {/* eslint-disable-next-line */}
+                {this.props.fileList.map((value) => {
+                    if (
+                        (value.name.toLowerCase() === "readme.md" ||
+                            value.name.toLowerCase() === "readme.txt") &&
+                        !readmeShowed
+                    ) {
+                        readmeShowed = true;
+                        return <ReadMe share={this.props.share} file={value} />;
+                    }
+                })}
+                <Popover
+                    id={id}
+                    open={this.props.anchorEl !== null}
+                    anchorEl={this.props.anchorEl}
+                    onClose={() => this.props.setShareUserPopover(null)}
+                    anchorOrigin={{
+                        vertical: "bottom",
+                        horizontal: "center",
+                    }}
+                    transformOrigin={{
+                        vertical: "top",
+                        horizontal: "center",
+                    }}
+                >
+                    <Typography>
+                        <Creator
+                            isFolder
+                            onClose={() => this.props.setShareUserPopover(null)}
+                            share={this.props.share}
+                        />
+                    </Typography>
+                </Popover>
+            </div>
+        );
+    }
+}
+
+const SharedFolder = connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(withStyles(styles)(withRouter(SharedFolderComponent)));
+
+export default SharedFolder;
diff --git a/src/component/Uploader/Popup/MoreActions.js b/src/component/Uploader/Popup/MoreActions.js
new file mode 100644
index 0000000..13b5089
--- /dev/null
+++ b/src/component/Uploader/Popup/MoreActions.js
@@ -0,0 +1,210 @@
+import {
+    Icon,
+    ListItemIcon,
+    makeStyles,
+    Menu,
+    MenuItem,
+    Tooltip,
+} from "@material-ui/core";
+import React, { useCallback, useMemo, useState } from "react";
+import { useDispatch } from "react-redux";
+import API from "../../../middleware/Api";
+import { TaskType } from "../core/types";
+import { refreshStorage, toggleSnackbar } from "../../../redux/explorer";
+import Divider from "@material-ui/core/Divider";
+import CheckIcon from "@material-ui/icons/Check";
+import { DeleteEmpty } from "mdi-material-ui";
+import DeleteIcon from "@material-ui/icons/Delete";
+import ConcurrentOptionDialog from "../../Modals/ConcurrentOption";
+import Auth from "../../../middleware/Auth";
+import { ClearAll, Replay } from "@material-ui/icons";
+import { useTranslation } from "react-i18next";
+
+const useStyles = makeStyles((theme) => ({
+    icon: {
+        minWidth: 38,
+    },
+}));
+
+export default function MoreActions({
+    anchorEl,
+    onClose,
+    uploadManager,
+    deleteTask,
+    useAvgSpeed,
+    setUseAvgSpeed,
+    filter,
+    setFilter,
+    sorter,
+    setSorter,
+    cleanFinished,
+    retryFailed,
+}) {
+    const { t } = useTranslation("application", { keyPrefix: "uploader" });
+    const classes = useStyles();
+    const dispatch = useDispatch();
+    const [concurrentDialog, setConcurrentDialog] = useState(false);
+    const ToggleSnackbar = useCallback(
+        (vertical, horizontal, msg, color) =>
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color)),
+        [dispatch]
+    );
+    const RefreshStorage = useCallback(
+        () => dispatch(refreshStorage()),
+        [dispatch]
+    );
+
+    const actionClicked = (next) => () => {
+        onClose();
+        next();
+    };
+
+    const cleanupSessions = () => {
+        uploadManager.cleanupSessions();
+        API.delete("/file/upload")
+            .then((response) => {
+                if (response.rawData.code === 0) {
+                    ToggleSnackbar(
+                        "top",
+                        "right",
+                        t("uploadSessionCleaned"),
+                        "success"
+                    );
+                } else {
+                    ToggleSnackbar(
+                        "top",
+                        "right",
+                        response.rawData.msg,
+                        "warning"
+                    );
+                }
+                deleteTask((u) => u.task.type !== TaskType.resumeHint);
+                RefreshStorage();
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            });
+    };
+
+    const open = Boolean(anchorEl);
+    const id = open ? "uploader-action-popover" : undefined;
+
+    const listItems = useMemo(
+        () => [
+            {
+                tooltip: t("hideCompletedTooltip"),
+                onClick: () =>
+                    setFilter(filter === "default" ? "ongoing" : "default"),
+                icon: filter !== "default" ? <CheckIcon /> : <Icon />,
+                text: t("hideCompleted"),
+                divider: true,
+            },
+            {
+                tooltip: t("addTimeAscTooltip"),
+                onClick: () => setSorter("default"),
+                icon: sorter === "default" ? <CheckIcon /> : <Icon />,
+                text: t("addTimeAsc"),
+                divider: false,
+            },
+            {
+                tooltip: t("addTimeDescTooltip"),
+                onClick: () => setSorter("reverse"),
+                icon: sorter === "reverse" ? <CheckIcon /> : <Icon />,
+                text: t("addTimeDesc"),
+                divider: true,
+            },
+            {
+                tooltip: t("showInstantSpeedTooltip"),
+                onClick: () => setUseAvgSpeed(false),
+                icon: useAvgSpeed ? <Icon /> : <CheckIcon />,
+                text: t("showInstantSpeed"),
+                divider: false,
+            },
+            {
+                tooltip: t("showAvgSpeedTooltip"),
+                onClick: () => setUseAvgSpeed(true),
+                icon: !useAvgSpeed ? <Icon /> : <CheckIcon />,
+                text: t("showAvgSpeed"),
+                divider: true,
+            },
+            {
+                tooltip: t("cleanAllSessionTooltip"),
+                onClick: () => cleanupSessions(),
+                icon: <DeleteEmpty />,
+                text: t("cleanAllSession"),
+                divider: false,
+            },
+            {
+                tooltip: t("cleanCompletedTooltip"),
+                onClick: () => cleanFinished(),
+                icon: <DeleteIcon />,
+                text: t("cleanCompleted"),
+                divider: false,
+            },
+            {
+                tooltip: t("retryFailedTasksTooltip"),
+                onClick: () => retryFailed(),
+                icon: <Replay />,
+                text: t("retryFailedTasks"),
+                divider: true,
+            },
+            {
+                tooltip: t("setConcurrentTooltip"),
+                onClick: () => setConcurrentDialog(true),
+                icon: <ClearAll />,
+                text: t("setConcurrent"),
+                divider: false,
+            },
+        ],
+        [
+            useAvgSpeed,
+            setUseAvgSpeed,
+            sorter,
+            setSorter,
+            filter,
+            setFilter,
+            cleanFinished,
+        ]
+    );
+
+    const onConcurrentLimitSave = (val) => {
+        val = parseInt(val);
+        if (val > 0) {
+            Auth.SetPreference("concurrent_limit", val);
+            uploadManager.changeConcurrentLimit(parseInt(val));
+        }
+        setConcurrentDialog(false);
+    };
+
+    return (
+        <>
+            <Menu id={id} open={open} anchorEl={anchorEl} onClose={onClose}>
+                {listItems.map((item) => (
+                    <>
+                        <Tooltip
+                            enterNextDelay={500}
+                            key={item.text}
+                            title={item.tooltip}
+                        >
+                            <MenuItem
+                                dense
+                                onClick={actionClicked(item.onClick)}
+                            >
+                                <ListItemIcon className={classes.icon}>
+                                    {item.icon}
+                                </ListItemIcon>
+                                {item.text}
+                            </MenuItem>
+                        </Tooltip>
+                        {item.divider && <Divider />}
+                    </>
+                ))}
+            </Menu>
+            <ConcurrentOptionDialog
+                open={concurrentDialog}
+                onClose={() => setConcurrentDialog(false)}
+                onSave={onConcurrentLimitSave}
+            />
+        </>
+    );
+}
diff --git a/src/component/Uploader/Popup/TaskDetail.js b/src/component/Uploader/Popup/TaskDetail.js
new file mode 100644
index 0000000..db92912
--- /dev/null
+++ b/src/component/Uploader/Popup/TaskDetail.js
@@ -0,0 +1,107 @@
+import React from "react";
+import { makeStyles } from "@material-ui/core";
+import Grid from "@material-ui/core/Grid";
+import { sizeToString } from "../../../utils";
+import Link from "@material-ui/core/Link";
+import TimeAgo from "timeago-react";
+import { Status } from "../core/uploader/base";
+import { Trans, useTranslation } from "react-i18next";
+
+const useStyles = makeStyles((theme) => ({
+    infoTitle: {
+        fontWeight: 700,
+    },
+    infoValue: {
+        color: theme.palette.text.secondary,
+        wordBreak: "break-all",
+    },
+}));
+
+export default function TaskDetail({ uploader, navigateToDst, error }) {
+    const { t } = useTranslation();
+    const classes = useStyles();
+    const items = [
+        {
+            name: t("uploader.fileName"),
+            value: uploader.task.name,
+        },
+        {
+            name: t("uploader.fileSize"),
+            value: `${sizeToString(uploader.task.size)} ${
+                uploader.task.session && uploader.task.session.chunkSize > 0
+                    ? t("uploader.chunkDescription", {
+                          total: uploader.task.chunkProgress.length,
+                          size: sizeToString(uploader.task.session.chunkSize),
+                      })
+                    : t("uploader.noChunks")
+            }`,
+        },
+        {
+            name: t("fileManager.storagePolicy"),
+            value: uploader.task.policy.name,
+        },
+        {
+            name: t("uploader.destination"),
+            value: (
+                <Link
+                    href={"javascript:void"}
+                    onClick={() => navigateToDst(uploader.task.dst)}
+                >
+                    {uploader.task.dst === "/"
+                        ? t("uploader.rootFolder")
+                        : uploader.task.dst}
+                </Link>
+            ),
+        },
+        uploader.task.session
+            ? {
+                  name: t("uploader.uploadSession"),
+                  value: (
+                      <>
+                          <Trans
+                              i18nKey="uploader.sessionExpiredIn"
+                              components={[
+                                  <TimeAgo
+                                      key={0}
+                                      datetime={
+                                          uploader.task.session
+                                              ? uploader.task.session.expires *
+                                                1000
+                                              : 0
+                                      }
+                                      locale={t("timeAgoLocaleCode", {
+                                          ns: "common",
+                                      })}
+                                  />,
+                              ]}
+                          />
+                      </>
+                  ),
+              }
+            : null,
+        uploader.status === Status.error
+            ? {
+                  name: t("uploader.errorDetails"),
+                  value: error,
+              }
+            : null,
+    ];
+    return (
+        <Grid container>
+            {items.map((i) => (
+                <>
+                    {i && (
+                        <Grid key={i.name} container xs={12}>
+                            <Grid item xs={3} className={classes.infoTitle}>
+                                {i.name}
+                            </Grid>
+                            <Grid item xs={9} className={classes.infoValue}>
+                                {i.value}
+                            </Grid>
+                        </Grid>
+                    )}
+                </>
+            ))}
+        </Grid>
+    );
+}
diff --git a/src/component/Uploader/Popup/TaskList.js b/src/component/Uploader/Popup/TaskList.js
new file mode 100644
index 0000000..ac7a00b
--- /dev/null
+++ b/src/component/Uploader/Popup/TaskList.js
@@ -0,0 +1,359 @@
+import React, { useMemo, useState } from "react";
+import {
+    Accordion,
+    AccordionDetails,
+    AppBar,
+    Dialog,
+    DialogContent,
+    Fade,
+    IconButton,
+    makeStyles,
+    Slide,
+    Toolbar,
+    Tooltip,
+    Typography,
+} from "@material-ui/core";
+import { useTheme } from "@material-ui/core/styles";
+import useMediaQuery from "@material-ui/core/useMediaQuery";
+import CloseIcon from "@material-ui/icons/Close";
+import ExpandMoreIcon from "@material-ui/icons/ExpandLess";
+import AddIcon from "@material-ui/icons/Add";
+import classnames from "classnames";
+import UploadTask from "./UploadTask";
+import { MoreHoriz } from "@material-ui/icons";
+import MoreActions from "./MoreActions";
+import { useSelector } from "react-redux";
+import { Virtuoso } from "react-virtuoso";
+import Nothing from "../../Placeholder/Nothing";
+import { lighten } from "@material-ui/core/styles/colorManipulator";
+import { Status } from "../core/uploader/base";
+import Auth from "../../../middleware/Auth";
+import { useTranslation } from "react-i18next";
+import { useUpload } from "../UseUpload";
+
+const Transition = React.forwardRef(function Transition(props, ref) {
+    return <Slide direction="up" ref={ref} {...props} />;
+});
+
+const useStyles = makeStyles((theme) => ({
+    rootOverwrite: {
+        top: "auto!important",
+        left: "auto!important",
+    },
+    appBar: {
+        position: "relative",
+    },
+    flex: {
+        flex: 1,
+    },
+    popup: {
+        alignItems: "flex-end",
+        justifyContent: "flex-end",
+    },
+    dialog: {
+        margin: 0,
+        right: 10,
+        bottom: 10,
+        zIndex: 9999,
+        position: "fixed",
+        inset: "-1!important",
+    },
+    paddingZero: {
+        padding: 0,
+    },
+    dialogContent: {
+        [theme.breakpoints.up("md")]: {
+            width: 500,
+            minHeight: 300,
+            maxHeight: "calc(100vh - 140px)",
+        },
+        padding: 0,
+        paddingTop: "0!important",
+    },
+    virtualList: {
+        height: "100%",
+        maxHeight: "calc(100vh - 56px)",
+        [theme.breakpoints.up("md")]: {
+            minHeight: 300,
+            maxHeight: "calc(100vh - 140px)",
+        },
+    },
+    expandIcon: {
+        transform: "rotate(0deg)",
+        transition: theme.transitions.create("transform", {
+            duration: theme.transitions.duration.shortest,
+        }),
+    },
+    expandIconExpanded: {
+        transform: "rotate(180deg)",
+    },
+    toolbar: {
+        paddingLeft: theme.spacing(1),
+        paddingRight: theme.spacing(1),
+    },
+    progress: {
+        transition: "width .4s linear",
+        zIndex: -1,
+        height: "100%",
+        position: "absolute",
+        left: 0,
+        top: 0,
+    },
+}));
+
+const sorters = {
+    default: (a, b) => a.id - b.id,
+    reverse: (a, b) => b.id - a.id,
+};
+
+const filters = {
+    default: (u) => true,
+    ongoing: (u) => u.status < Status.finished,
+};
+
+export default function TaskList({
+    open,
+    onClose,
+    selectFile,
+    taskList,
+    onCancel,
+    uploadManager,
+    progress,
+    setUploaders,
+}) {
+    const { t } = useTranslation("application", { keyPrefix: "uploader" });
+    const classes = useStyles();
+    const theme = useTheme();
+    const fullScreen = useMediaQuery(theme.breakpoints.down("sm"));
+    const path = useSelector((state) => state.navigator.path);
+    const [expanded, setExpanded] = useState(true);
+    const [useAvgSpeed, setUseAvgSpeed] = useState(
+        Auth.GetPreferenceWithDefault("use_avg_speed", true)
+    );
+    const [anchorEl, setAnchorEl] = useState(null);
+    const [filter, setFilter] = useState(
+        Auth.GetPreferenceWithDefault("task_filter", "default")
+    );
+    const [sorter, setSorter] = useState(
+        Auth.GetPreferenceWithDefault("task_sorter", "default")
+    );
+    const [refreshList, setRefreshList] = useState(false);
+
+    const handleActionClick = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+
+    const handleActionClose = () => {
+        setAnchorEl(null);
+    };
+
+    const close = (e, reason) => {
+        if (reason !== "backdropClick") {
+            onClose();
+        } else {
+            setExpanded(false);
+        }
+    };
+    const handlePanelChange = (event, isExpanded) => {
+        setExpanded(isExpanded);
+    };
+
+    useMemo(() => {
+        if (open) {
+            setExpanded(true);
+        }
+    }, [taskList]);
+
+    const progressBar = useMemo(
+        () =>
+            progress.totalSize > 0 ? (
+                <Fade in={progress.totalSize > 0 && !expanded}>
+                    <div>
+                        <div
+                            style={{
+                                backgroundColor:
+                                    theme.palette.type === "light"
+                                        ? lighten(
+                                              theme.palette.primary.main,
+                                              0.2
+                                          )
+                                        : lighten(
+                                              theme.palette.primary.main,
+                                              0.2
+                                          ),
+                                width:
+                                    (progress.processedSize /
+                                        progress.totalSize) *
+                                        100 +
+                                    "%",
+                            }}
+                            className={classes.progress}
+                        />
+                    </div>
+                </Fade>
+            ) : null,
+        [progress, expanded, classes, theme]
+    );
+
+    const list = useMemo(() => {
+        const currentList = taskList
+            .filter(filters[filter])
+            .sort(sorters[sorter]);
+        if (currentList.length === 0) {
+            return <Nothing size={0.5} top={63} primary={t("taskListEmpty")} />;
+        }
+
+        return (
+            <Virtuoso
+                style={{
+                    height: (fullScreen ? 500 : 73) * currentList.length,
+                }}
+                className={classes.virtualList}
+                increaseViewportBy={180}
+                data={currentList}
+                itemContent={(index, uploader) => (
+                    <UploadTask
+                        selectFile={selectFile}
+                        onClose={close}
+                        onCancel={onCancel}
+                        key={uploader.id}
+                        useAvgSpeed={useAvgSpeed}
+                        uploader={uploader}
+                        filter={filters[filter]}
+                        onRefresh={() => setRefreshList((r) => !r)}
+                    />
+                )}
+            />
+        );
+    }, [
+        classes,
+        taskList,
+        useAvgSpeed,
+        fullScreen,
+        filter,
+        sorter,
+        refreshList,
+    ]);
+
+    const retryFailed = () => {
+        taskList.forEach((task) => {
+            if (task.status === Status.error) {
+                task.reset();
+                task.start();
+            }
+        });
+    };
+
+    return (
+        <>
+            <MoreActions
+                deleteTask={onCancel}
+                onClose={handleActionClose}
+                uploadManager={uploadManager}
+                anchorEl={anchorEl}
+                useAvgSpeed={useAvgSpeed}
+                setUseAvgSpeed={(v) => {
+                    Auth.SetPreference("use_avg_speed", v);
+                    setUseAvgSpeed(v);
+                }}
+                filter={filter}
+                sorter={sorter}
+                setFilter={(v) => {
+                    Auth.SetPreference("task_filter", v);
+                    setFilter(v);
+                }}
+                setSorter={(v) => {
+                    Auth.SetPreference("task_sorter", v);
+                    setSorter(v);
+                }}
+                retryFailed={retryFailed}
+                cleanFinished={() =>
+                    setUploaders((u) => u.filter(filters["ongoing"]))
+                }
+            />
+            <Dialog
+                classes={{
+                    container: classes.popup, // class name, e.g. `classes-nesting-root-x`
+                    root: classnames({
+                        [classes.rootOverwrite]: !fullScreen,
+                    }),
+                }}
+                className={classnames({
+                    [classes.dialog]: !fullScreen,
+                })}
+                fullScreen={fullScreen}
+                open={open}
+                onClose={close}
+                TransitionComponent={Transition}
+                disableEnforceFocus={!expanded}
+                hideBackdrop={!expanded}
+                disableBackdropClick={!expanded}
+                disableScrollLock={!expanded}
+            >
+                <Accordion
+                    expanded={expanded || fullScreen}
+                    onChange={handlePanelChange}
+                >
+                    <AppBar className={classes.appBar}>
+                        {progressBar}
+                        <Toolbar disableGutters className={classes.toolbar}>
+                            <Tooltip title={t("hideTaskList")}>
+                                <IconButton
+                                    color="inherit"
+                                    onClick={close}
+                                    aria-label="Close"
+                                >
+                                    <CloseIcon />
+                                </IconButton>
+                            </Tooltip>
+                            <Typography
+                                variant="h6"
+                                color="inherit"
+                                className={classes.flex}
+                            >
+                                {t("uploadTasks")}
+                            </Typography>
+                            <Tooltip title={t("moreActions")}>
+                                <IconButton
+                                    color="inherit"
+                                    onClick={handleActionClick}
+                                >
+                                    <MoreHoriz />
+                                </IconButton>
+                            </Tooltip>
+                            <Tooltip title={t("addNewFiles")}>
+                                <IconButton
+                                    color="inherit"
+                                    onClick={() => selectFile(path)}
+                                >
+                                    <AddIcon />
+                                </IconButton>
+                            </Tooltip>
+                            {!fullScreen && (
+                                <Tooltip title={t("toggleTaskList")}>
+                                    <IconButton
+                                        color="inherit"
+                                        onClick={() => setExpanded(!expanded)}
+                                    >
+                                        <ExpandMoreIcon
+                                            className={classnames({
+                                                [classes.expandIconExpanded]:
+                                                    expanded,
+                                                [classes.expandIcon]: true,
+                                            })}
+                                        />
+                                    </IconButton>
+                                </Tooltip>
+                            )}
+                        </Toolbar>
+                    </AppBar>
+                    <AccordionDetails className={classes.paddingZero}>
+                        <DialogContent className={classes.dialogContent}>
+                            {list}
+                        </DialogContent>
+                    </AccordionDetails>
+                </Accordion>
+            </Dialog>
+        </>
+    );
+}
diff --git a/src/component/Uploader/Popup/UploadTask.js b/src/component/Uploader/Popup/UploadTask.js
new file mode 100644
index 0000000..9cfb817
--- /dev/null
+++ b/src/component/Uploader/Popup/UploadTask.js
@@ -0,0 +1,428 @@
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import {
+    Divider,
+    Grow,
+    IconButton,
+    ListItem,
+    ListItemText,
+    makeStyles,
+    Tooltip,
+} from "@material-ui/core";
+import TypeIcon from "../../FileManager/TypeIcon";
+import { useUpload } from "../UseUpload";
+import { Status } from "../core/uploader/base";
+import { UploaderError } from "../core/errors";
+import { filename, sizeToString } from "../../../utils";
+import { darken, lighten } from "@material-ui/core/styles/colorManipulator";
+import { useTheme } from "@material-ui/core/styles";
+import Chip from "@material-ui/core/Chip";
+import DeleteIcon from "@material-ui/icons/Delete";
+import RefreshIcon from "@material-ui/icons/Refresh";
+import useMediaQuery from "@material-ui/core/useMediaQuery";
+import { useDispatch } from "react-redux";
+import Link from "@material-ui/core/Link";
+import PlayArrow from "@material-ui/icons/PlayArrow";
+import withStyles from "@material-ui/core/styles/withStyles";
+import MuiExpansionPanel from "@material-ui/core/ExpansionPanel";
+import MuiExpansionPanelSummary from "@material-ui/core/ExpansionPanelSummary";
+import MuiExpansionPanelDetails from "@material-ui/core/ExpansionPanelDetails";
+import TaskDetail from "./TaskDetail";
+import { SelectType } from "../core";
+import { navigateTo } from "../../../redux/explorer";
+import { useTranslation } from "react-i18next";
+
+const useStyles = makeStyles((theme) => ({
+    progressContent: {
+        position: "relative",
+        zIndex: 9,
+    },
+    progress: {
+        transition: "width .4s linear",
+        zIndex: 1,
+        height: "100%",
+        position: "absolute",
+        left: 0,
+        top: 0,
+    },
+    progressContainer: {
+        position: "relative",
+    },
+    listAction: {
+        marginLeft: 20,
+        marginRight: 20,
+    },
+    wordBreak: {
+        wordBreak: "break-all",
+        whiteSpace: "nowrap",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+    },
+    successStatus: {
+        color: theme.palette.success.main,
+    },
+    errorStatus: {
+        color: theme.palette.warning.main,
+        wordBreak: "break-all",
+        [theme.breakpoints.up("sm")]: {
+            whiteSpace: "nowrap",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+        },
+    },
+    disabledBadge: {
+        marginLeft: theme.spacing(1),
+        height: 18,
+    },
+    delete: {
+        zIndex: 9,
+    },
+    dstLink: {
+        color: theme.palette.success.main,
+        fontWeight: 600,
+    },
+    fileNameContainer: {
+        display: "flex",
+        alignItems: "center",
+    },
+}));
+
+const ExpansionPanel = withStyles({
+    root: {
+        maxWidth: "100%",
+        boxShadow: "none",
+        "&:not(:last-child)": {
+            borderBottom: 0,
+        },
+        "&:before": {
+            display: "none",
+        },
+        "&$expanded": {
+            margin: 0,
+        },
+    },
+    expanded: {},
+})(MuiExpansionPanel);
+
+const ExpansionPanelSummary = withStyles({
+    root: {
+        minHeight: 0,
+        padding: 0,
+        display: "block",
+        "&$expanded": {},
+    },
+    content: {
+        margin: 0,
+        display: "block",
+        "&$expanded": {
+            margin: "0",
+        },
+    },
+    expanded: {},
+})(MuiExpansionPanelSummary);
+
+const ExpansionPanelDetails = withStyles((theme) => ({
+    root: {
+        paddingLeft: 16,
+        paddingRight: 16,
+        paddingTop: 8,
+        paddingBottom: 8,
+        display: "block",
+        backgroundColor: theme.palette.background.default,
+    },
+}))(MuiExpansionPanelDetails);
+
+const getSpeedText = (speed, speedAvg, useSpeedAvg) => {
+    let displayedSpeed = speedAvg;
+    if (!useSpeedAvg) {
+        displayedSpeed = speed;
+    }
+
+    return `${sizeToString(displayedSpeed ? displayedSpeed : 0)} /s`;
+};
+
+const getErrMsg = (error) => {
+    let errMsg = error.message;
+    if (error instanceof UploaderError) {
+        errMsg = error.Message("");
+    }
+
+    return errMsg;
+};
+
+export default function UploadTask({
+    uploader,
+    useAvgSpeed,
+    onCancel,
+    onClose,
+    selectFile,
+    onRefresh,
+}) {
+    const { t } = useTranslation("application", { keyPrefix: "uploader" });
+    const classes = useStyles();
+    const theme = useTheme();
+    const [taskHover, setTaskHover] = useState(false);
+    const [expanded, setExpanded] = useState(false);
+    const { status, error, progress, speed, speedAvg, retry } = useUpload(
+        uploader
+    );
+    const fullScreen = useMediaQuery(theme.breakpoints.down("sm"));
+    const [loading, setLoading] = useState(false);
+    const dispatch = useDispatch();
+    const NavigateTo = useCallback((k) => dispatch(navigateTo(k)), [dispatch]);
+    const navigateToDst = (path) => {
+        onClose(null, "backdropClick");
+        NavigateTo(path);
+    };
+
+    const toggleDetail = (event, newExpanded) => {
+        setExpanded(!!newExpanded);
+    };
+
+    useEffect(() => {
+        if (status >= Status.finished) {
+            onRefresh();
+        }
+    }, [status]);
+
+    const statusText = useMemo(() => {
+        const parent = filename(uploader.task.dst);
+        switch (status) {
+            case Status.added:
+            case Status.initialized:
+            case Status.queued:
+                return <div>{t("pendingInQueue")}</div>;
+            case Status.preparing:
+                return <div>{t("preparing")}</div>;
+            case Status.error:
+                return (
+                    <div className={classes.errorStatus}>
+                        {getErrMsg(error)}
+                        <br />
+                    </div>
+                );
+            case Status.finishing:
+                return <div>{t("processing")}</div>;
+            case Status.resumable:
+                return (
+                    <div>
+                        {t("progressDescription", {
+                            uploaded: sizeToString(progress.total.loaded),
+                            total: sizeToString(progress.total.size),
+                            percentage: progress.total.percent.toFixed(2),
+                        })}
+                    </div>
+                );
+            case Status.processing:
+                if (progress) {
+                    return (
+                        <div>
+                            {t("progressDescriptionFull", {
+                                speed: getSpeedText(
+                                    speed,
+                                    speedAvg,
+                                    useAvgSpeed
+                                ),
+                                uploaded: sizeToString(progress.total.loaded),
+                                total: sizeToString(progress.total.size),
+                                percentage: progress.total.percent.toFixed(2),
+                            })}
+                        </div>
+                    );
+                }
+                return <div>{t("progressDescriptionPlaceHolder")}</div>;
+            case Status.finished:
+                return (
+                    <div className={classes.successStatus}>
+                        {t("uploadedTo")}
+                        <Tooltip title={uploader.task.dst}>
+                            <Link
+                                className={classes.dstLink}
+                                href={"javascript:void"}
+                                onClick={() => navigateToDst(uploader.task.dst)}
+                            >
+                                {parent === "" ? t("rootFolder") : parent}
+                            </Link>
+                        </Tooltip>
+                        <br />
+                    </div>
+                );
+            default:
+                return <div>{t("unknownStatus")}</div>;
+        }
+    }, [status, error, progress, speed, speedAvg, useAvgSpeed]);
+
+    const resumeLabel = useMemo(
+        () =>
+            uploader.task.resumed && !fullScreen ? (
+                <Chip
+                    className={classes.disabledBadge}
+                    size="small"
+                    label={t("resumed")}
+                />
+            ) : null,
+        [status, fullScreen]
+    );
+
+    const continueLabel = useMemo(
+        () =>
+            status === Status.resumable && !fullScreen ? (
+                <Chip
+                    className={classes.disabledBadge}
+                    size="small"
+                    color={"secondary"}
+                    label={t("resumable")}
+                />
+            ) : null,
+        [status, fullScreen]
+    );
+
+    const progressBar = useMemo(
+        () =>
+            (status === Status.processing ||
+                status === Status.finishing ||
+                status === Status.resumable) &&
+            progress ? (
+                <div
+                    style={{
+                        backgroundColor:
+                            theme.palette.type === "light"
+                                ? lighten(theme.palette.primary.main, 0.8)
+                                : darken(theme.palette.background.paper, 0.2),
+                        width: progress.total.percent + "%",
+                    }}
+                    className={classes.progress}
+                />
+            ) : null,
+        [status, progress, theme]
+    );
+
+    const taskDetail = useMemo(() => {
+        return (
+            <TaskDetail
+                error={error && getErrMsg(error)}
+                navigateToDst={navigateToDst}
+                uploader={uploader}
+            />
+        );
+    }, [uploader, expanded]);
+
+    const cancel = () => {
+        setLoading(true);
+        uploader.cancel().then(() => {
+            setLoading(false);
+            onCancel((u) => u.id != uploader.id);
+        });
+    };
+
+    const stopRipple = (e) => {
+        e.stopPropagation();
+    };
+
+    const secondaryAction = useMemo(() => {
+        if (!taskHover && !fullScreen) {
+            return <></>;
+        }
+
+        const actions = [
+            {
+                show: status === Status.error,
+                title: t("retry"),
+                click: retry,
+                icon: <RefreshIcon />,
+                loading: false,
+            },
+            {
+                show: true,
+                title:
+                    status === Status.finished
+                        ? t("deleteTask")
+                        : t("cancelAndDelete"),
+                click: cancel,
+                icon: <DeleteIcon />,
+                loading: loading,
+            },
+            {
+                show: status === Status.resumable,
+                title: t("selectAndResume"),
+                click: () =>
+                    selectFile(uploader.task.dst, SelectType.File, uploader),
+                icon: <PlayArrow />,
+                loading: false,
+            },
+        ];
+
+        return (
+            <>
+                {actions.map((a) => (
+                    <>
+                        {a.show && (
+                            <Grow in={a.show}>
+                                <Tooltip title={a.title}>
+                                    <IconButton
+                                        onMouseDown={stopRipple}
+                                        onTouchStart={stopRipple}
+                                        disabled={a.loading}
+                                        onClick={(e) => {
+                                            e.stopPropagation();
+                                            a.click();
+                                        }}
+                                    >
+                                        {a.icon}
+                                    </IconButton>
+                                </Tooltip>
+                            </Grow>
+                        )}
+                    </>
+                ))}
+            </>
+        );
+    }, [status, loading, taskHover, fullScreen, uploader]);
+
+    const fileIcon = useMemo(() => {
+        if (!fullScreen) {
+            return <TypeIcon fileName={uploader.task.name} isUpload />;
+        }
+    }, [uploader, fullScreen]);
+
+    return (
+        <>
+            <ExpansionPanel square expanded={expanded} onChange={toggleDetail}>
+                <ExpansionPanelSummary
+                    aria-controls="panel1d-content"
+                    id="panel1d-header"
+                >
+                    <div
+                        className={classes.progressContainer}
+                        onMouseLeave={() => setTaskHover(false)}
+                        onMouseOver={() => setTaskHover(true)}
+                    >
+                        {progressBar}
+                        <ListItem className={classes.progressContent} button>
+                            {fileIcon}
+                            <ListItemText
+                                className={classes.listAction}
+                                primary={
+                                    <div className={classes.fileNameContainer}>
+                                        <div className={classes.wordBreak}>
+                                            {uploader.task.name}
+                                        </div>
+                                        <div>{resumeLabel}</div>
+                                        <div>{continueLabel}</div>
+                                    </div>
+                                }
+                                secondary={
+                                    <div className={classes.wordBreak}>
+                                        {statusText}
+                                    </div>
+                                }
+                            />
+                            {secondaryAction}
+                        </ListItem>
+                    </div>
+                </ExpansionPanelSummary>
+                <ExpansionPanelDetails>{taskDetail}</ExpansionPanelDetails>
+            </ExpansionPanel>
+            <Divider />
+        </>
+    );
+}
diff --git a/src/component/Uploader/Uploader.js b/src/component/Uploader/Uploader.js
new file mode 100644
index 0000000..6af0e43
--- /dev/null
+++ b/src/component/Uploader/Uploader.js
@@ -0,0 +1,242 @@
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import UploadManager, { SelectType } from "./core";
+import { useDispatch, useSelector } from "react-redux";
+import UploadButton from "../Dial/Create";
+import pathHelper from "../../utils/page";
+import { useLocation } from "react-router-dom";
+import { UploaderError } from "./core/errors";
+import TaskList from "./Popup/TaskList";
+import { Status } from "./core/uploader/base";
+import { DropFileBackground } from "../Placeholder/DropFile";
+import {
+    refreshFileList,
+    refreshStorage,
+    toggleSnackbar,
+} from "../../redux/explorer";
+import Auth from "../../middleware/Auth";
+import { useTranslation } from "react-i18next";
+
+let totalProgressCollector = null;
+let lastProgressStart = -1;
+let dragCounter = 0;
+
+export default function Uploader() {
+    const { t } = useTranslation("application", { keyPrefix: "uploader" });
+    const [uploaders, setUploaders] = useState([]);
+    const [taskListOpen, setTaskListOpen] = useState(false);
+    const [dropBgOpen, setDropBgOpen] = useState(0);
+    const [totalProgress, setTotalProgress] = useState({
+        totalSize: 0,
+        processedSize: 0,
+        total: 0,
+        processed: 0,
+    });
+    const search = useSelector((state) => state.explorer.search);
+    const policy = useSelector((state) => state.explorer.currentPolicy);
+    const isLogin = useSelector((state) => state.viewUpdate.isLogin);
+    const path = useSelector((state) => state.navigator.path);
+    const fileSelectCounter = useSelector(
+        (state) => state.viewUpdate.openFileSelector
+    );
+    const folderSelectCounter = useSelector(
+        (state) => state.viewUpdate.openFolderSelector
+    );
+    const location = useLocation();
+    const dispatch = useDispatch();
+    const ToggleSnackbar = useCallback(
+        (vertical, horizontal, msg, color) =>
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color)),
+        [dispatch]
+    );
+    const RefreshFileList = useCallback(() => dispatch(refreshFileList()), [
+        dispatch,
+    ]);
+    const RefreshStorage = useCallback(() => dispatch(refreshStorage()), [
+        dispatch,
+    ]);
+
+    const enableUploader = useMemo(
+        () => pathHelper.isHomePage(location.pathname) && isLogin && !search,
+        [location.pathname, isLogin, search]
+    );
+
+    const taskAdded = (original = null) => (tasks) => {
+        if (original !== null) {
+            if (tasks.length !== 1 || tasks[0].key() !== original.key()) {
+                ToggleSnackbar(
+                    "top",
+                    "right",
+                    t("fileNotMatchError"),
+                    "warning"
+                );
+                return;
+            }
+        }
+
+        tasks.forEach((t) => t.start());
+
+        setTaskListOpen(true);
+        setUploaders((uploaders) => {
+            if (original !== null) {
+                uploaders = uploaders.filter((u) => u.key() !== original.key());
+            }
+
+            return [...uploaders, ...tasks];
+        });
+    };
+
+    const uploadManager = useMemo(() => {
+        return new UploadManager({
+            logLevel: "INFO",
+            concurrentLimit: parseInt(
+                Auth.GetPreferenceWithDefault("concurrent_limit", "5")
+            ),
+            dropZone: document.querySelector("body"),
+            onToast: (type, msg) => {
+                ToggleSnackbar("top", "right", msg, type);
+            },
+            onDropOver: (e) => {
+                dragCounter++;
+                setDropBgOpen((value) => !value);
+            },
+            onDropLeave: (e) => {
+                dragCounter--;
+                setDropBgOpen((value) => !value);
+            },
+            onDropFileAdded: taskAdded(),
+        });
+    }, []);
+
+    useEffect(() => {
+        uploadManager.setPolicy(policy, path);
+    }, [policy]);
+
+    useEffect(() => {
+        const unfinished = uploadManager.resumeTasks();
+        setUploaders((uploaders) => [...uploaders, ...unfinished]);
+        if (!totalProgressCollector) {
+            totalProgressCollector = setInterval(() => {
+                const progress = {
+                    totalSize: 0,
+                    processedSize: 0,
+                    total: 0,
+                    processed: 0,
+                };
+                setUploaders((uploaders) => {
+                    uploaders.forEach((u) => {
+                        if (u.id <= lastProgressStart) {
+                            return;
+                        }
+
+                        progress.totalSize += u.task.size;
+                        progress.total += 1;
+
+                        if (
+                            u.status === Status.finished ||
+                            u.status === Status.canceled ||
+                            u.status === Status.error
+                        ) {
+                            progress.processedSize += u.task.size;
+                            progress.processed += 1;
+                        }
+
+                        if (
+                            u.status === Status.added ||
+                            u.status === Status.initialized ||
+                            u.status === Status.queued ||
+                            u.status === Status.preparing ||
+                            u.status === Status.processing ||
+                            u.status === Status.finishing
+                        ) {
+                            progress.processedSize += u.progress
+                                ? u.progress.total.loaded
+                                : 0;
+                        }
+                    });
+
+                    if (
+                        progress.total > 0 &&
+                        progress.processed === progress.total
+                    ) {
+                        lastProgressStart = uploaders[uploaders.length - 1].id;
+                    }
+                    return uploaders;
+                });
+
+                if (
+                    progress.total > 0 &&
+                    progress.total === progress.processed
+                ) {
+                    RefreshFileList();
+                    RefreshStorage();
+                }
+
+                setTotalProgress(progress);
+            }, 2000);
+        }
+    }, []);
+
+    const selectFile = (path, type = SelectType.File, original = null) => {
+        setTaskListOpen(true);
+
+        // eslint-disable-next-line no-unreachable
+        uploadManager
+            .select(path, type)
+            .then(taskAdded(original))
+            .catch((e) => {
+                if (e instanceof UploaderError) {
+                    ToggleSnackbar("top", "right", e.Message(), "warning");
+                } else {
+                    ToggleSnackbar(
+                        "top",
+                        "right",
+                        t("unknownError", { msg: e.message }),
+                        "error"
+                    );
+                }
+            });
+    };
+
+    useEffect(() => {
+        if (fileSelectCounter > 0) {
+            selectFile(path);
+        }
+    }, [fileSelectCounter]);
+
+    useEffect(() => {
+        if (folderSelectCounter > 0) {
+            selectFile(path, SelectType.Directory);
+        }
+    }, [folderSelectCounter]);
+
+    const deleteTask = (filter) => {
+        setUploaders((uploaders) => uploaders.filter(filter));
+    };
+
+    return (
+        <>
+            {enableUploader && (
+                <>
+                    <DropFileBackground open={dropBgOpen > 0} />
+                    <UploadButton
+                        progress={totalProgress}
+                        taskListOpen={taskListOpen}
+                        selectFile={selectFile}
+                        Queued={uploaders.length}
+                        openFileList={() => setTaskListOpen(true)}
+                    />
+                    <TaskList
+                        progress={totalProgress}
+                        uploadManager={uploadManager}
+                        taskList={uploaders}
+                        open={taskListOpen}
+                        onCancel={deleteTask}
+                        selectFile={selectFile}
+                        onClose={() => setTaskListOpen(false)}
+                        setUploaders={setUploaders}
+                    />
+                </>
+            )}
+        </>
+    );
+}
diff --git a/src/component/Uploader/UseUpload.js b/src/component/Uploader/UseUpload.js
new file mode 100644
index 0000000..90e4b66
--- /dev/null
+++ b/src/component/Uploader/UseUpload.js
@@ -0,0 +1,70 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { useDispatch } from "react-redux";
+import { toggleSnackbar } from "../../redux/explorer";
+
+export function useUpload(uploader) {
+    const startLoadedRef = useRef(0);
+    const [status, setStatus] = useState(uploader.status);
+    const [error, setError] = useState(uploader.error);
+    const [progress, setProgress] = useState(uploader.progress);
+    const dispatch = useDispatch();
+
+    const ToggleSnackbar = useCallback(
+        (vertical, horizontal, msg, color) =>
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color)),
+        [dispatch]
+    );
+
+    useEffect(() => {
+        /* eslint-disable @typescript-eslint/no-empty-function */
+        uploader.subscribe({
+            onTransition: (newStatus) => {
+                setStatus(newStatus);
+            },
+            onError: (err) => {
+                setError(err);
+                setStatus(uploader.status);
+            },
+            onProgress: (data) => {
+                setProgress(data);
+            },
+            onMsg: (msg, color) => {
+                ToggleSnackbar("top", "right", msg, color);
+            },
+        });
+    }, []);
+
+    // 获取上传速度
+    const [speed, speedAvg] = React.useMemo(() => {
+        if (
+            progress == null ||
+            progress.total == null ||
+            progress.total.loaded == null
+        )
+            return [0, 0];
+        const duration = (Date.now() - (uploader.lastTime || 0)) / 1000;
+        const durationTotal = (Date.now() - (uploader.startTime || 0)) / 1000;
+        const res =
+            progress.total.loaded > startLoadedRef.current
+                ? Math.floor(
+                      (progress.total.loaded - startLoadedRef.current) /
+                          duration
+                  )
+                : 0;
+        const resAvg =
+            progress.total.loaded > 0
+                ? Math.floor(progress.total.loaded / durationTotal)
+                : 0;
+
+        startLoadedRef.current = progress.total.loaded;
+        uploader.lastTime = Date.now();
+        return [res, resAvg];
+    }, [progress]);
+
+    const retry = () => {
+        uploader.reset();
+        uploader.start();
+    };
+
+    return { status, error, progress, speed, speedAvg, retry };
+}
diff --git a/src/component/Uploader/core/api/index.ts b/src/component/Uploader/core/api/index.ts
new file mode 100644
index 0000000..a896073
--- /dev/null
+++ b/src/component/Uploader/core/api/index.ts
@@ -0,0 +1,444 @@
+import {
+    OneDriveChunkResponse,
+    QiniuChunkResponse,
+    QiniuFinishUploadRequest,
+    QiniuPartsInfo,
+    S3Part,
+    UploadCredential,
+    UploadSessionRequest,
+} from "../types";
+import { OBJtoXML, request, requestAPI } from "../utils";
+import {
+    COSUploadCallbackError,
+    COSUploadError,
+    CreateUploadSessionError,
+    DeleteUploadSessionError,
+    HTTPError,
+    LocalChunkUploadError,
+    OneDriveChunkError,
+    OneDriveFinishUploadError,
+    QiniuChunkError,
+    QiniuFinishUploadError,
+    S3LikeChunkError,
+    S3LikeFinishUploadError,
+    S3LikeUploadCallbackError,
+    SlaveChunkUploadError,
+    UpyunUploadError,
+} from "../errors";
+import { ChunkInfo, ChunkProgress } from "../uploader/chunk";
+import { Progress } from "../uploader/base";
+import { CancelToken } from "axios";
+
+export async function createUploadSession(
+    req: UploadSessionRequest,
+    cancel: CancelToken
+): Promise<UploadCredential> {
+    const res = await requestAPI<UploadCredential>("file/upload", {
+        method: "put",
+        data: req,
+        cancelToken: cancel,
+    });
+
+    if (res.data.code != 0) {
+        throw new CreateUploadSessionError(res.data);
+    }
+
+    return res.data.data;
+}
+
+export async function deleteUploadSession(id: string): Promise<any> {
+    const res = await requestAPI<UploadCredential>(`file/upload/${id}`, {
+        method: "delete",
+    });
+
+    if (res.data.code != 0) {
+        throw new DeleteUploadSessionError(res.data);
+    }
+
+    return res.data.data;
+}
+
+export async function localUploadChunk(
+    sessionID: string,
+    chunk: ChunkInfo,
+    onProgress: (p: Progress) => void,
+    cancel: CancelToken
+): Promise<any> {
+    const res = await requestAPI<any>(
+        `file/upload/${sessionID}/${chunk.index}`,
+        {
+            method: "post",
+            headers: { "content-type": "application/octet-stream" },
+            data: chunk.chunk,
+            onUploadProgress: (progressEvent) => {
+                onProgress({
+                    loaded: progressEvent.loaded,
+                    total: progressEvent.total,
+                });
+            },
+            cancelToken: cancel,
+        }
+    );
+
+    if (res.data.code != 0) {
+        throw new LocalChunkUploadError(res.data, chunk.index);
+    }
+
+    return res.data.data;
+}
+
+export async function slaveUploadChunk(
+    url: string,
+    credential: string,
+    chunk: ChunkInfo,
+    onProgress: (p: Progress) => void,
+    cancel: CancelToken
+): Promise<any> {
+    const res = await request<any>(`${url}?chunk=${chunk.index}`, {
+        method: "post",
+        headers: {
+            "content-type": "application/octet-stream",
+            Authorization: credential,
+        },
+        data: chunk.chunk,
+        onUploadProgress: (progressEvent) => {
+            onProgress({
+                loaded: progressEvent.loaded,
+                total: progressEvent.total,
+            });
+        },
+        cancelToken: cancel,
+    });
+
+    if (res.data.code != 0) {
+        throw new SlaveChunkUploadError(res.data, chunk.index);
+    }
+
+    return res.data.data;
+}
+
+export async function oneDriveUploadChunk(
+    url: string,
+    range: string, // if range is empty, this will be an request to query the session status
+    chunk: ChunkInfo,
+    onProgress: (p: Progress) => void,
+    cancel: CancelToken
+): Promise<OneDriveChunkResponse> {
+    const res = await request<OneDriveChunkResponse>(url, {
+        method: range === "" ? "get" : "put",
+        headers: {
+            "content-type": "application/octet-stream",
+            ...(range !== "" && { "content-range": range }),
+        },
+        data: chunk.chunk,
+        onUploadProgress: (progressEvent) => {
+            onProgress({
+                loaded: progressEvent.loaded,
+                total: progressEvent.total,
+            });
+        },
+        cancelToken: cancel,
+    }).catch((e) => {
+        if (e instanceof HTTPError && e.response) {
+            throw new OneDriveChunkError(e.response.data);
+        }
+
+        throw e;
+    });
+
+    return res.data;
+}
+
+export async function finishOneDriveUpload(
+    sessionID: string,
+    cancel: CancelToken
+): Promise<UploadCredential> {
+    const res = await requestAPI<UploadCredential>(
+        `callback/onedrive/finish/${sessionID}`,
+        {
+            method: "post",
+            data: "{}",
+            cancelToken: cancel,
+        }
+    );
+
+    if (res.data.code != 0) {
+        throw new OneDriveFinishUploadError(res.data);
+    }
+
+    return res.data.data;
+}
+
+export async function s3LikeUploadChunk(
+    url: string,
+    chunk: ChunkInfo,
+    onProgress: (p: Progress) => void,
+    cancel: CancelToken
+): Promise<string> {
+    const res = await request<string>(decodeURIComponent(url), {
+        method: "put",
+        headers: {
+            "content-type": "application/octet-stream",
+        },
+        data: chunk.chunk,
+        onUploadProgress: (progressEvent) => {
+            onProgress({
+                loaded: progressEvent.loaded,
+                total: progressEvent.total,
+            });
+        },
+        cancelToken: cancel,
+        responseType: "document",
+        transformResponse: undefined,
+    }).catch((e) => {
+        if (e instanceof HTTPError && e.response) {
+            throw new S3LikeChunkError(e.response.data);
+        }
+
+        throw e;
+    });
+
+    return res.headers.etag;
+}
+
+export async function s3LikeFinishUpload(
+    url: string,
+    isOss: boolean,
+    chunks: ChunkProgress[],
+    cancel: CancelToken
+): Promise<any> {
+    let body = "";
+    if (!isOss) {
+        body += "<CompleteMultipartUpload>";
+        chunks.forEach((chunk) => {
+            body += "<Part>";
+            const part: S3Part = {
+                PartNumber: chunk.index + 1,
+                ETag: chunk.etag!,
+            };
+            body += OBJtoXML(part);
+            body += "</Part>";
+        });
+        body += "</CompleteMultipartUpload>";
+    }
+
+    const res = await request<any>(url, {
+        method: "post",
+        cancelToken: cancel,
+        responseType: "document",
+        transformResponse: undefined,
+        data: body,
+        headers: isOss
+            ? {
+                  "content-type": "application/octet-stream",
+                  "x-oss-forbid-overwrite": "true",
+                  "x-oss-complete-all": "yes",
+              }
+            : {
+                  "content-type": "application/xhtml+xml",
+              },
+        validateStatus: function (status) {
+            return status == 200;
+        },
+    }).catch((e) => {
+        if (e instanceof HTTPError && e.response) {
+            throw new S3LikeFinishUploadError(e.response.data);
+        }
+
+        throw e;
+    });
+
+    return res.data;
+}
+
+export async function qiniuDriveUploadChunk(
+    url: string,
+    upToken: string,
+    chunk: ChunkInfo,
+    onProgress: (p: Progress) => void,
+    cancel: CancelToken
+): Promise<QiniuChunkResponse> {
+    const res = await request<QiniuChunkResponse>(`${url}/${chunk.index + 1}`, {
+        method: "put",
+        headers: {
+            "content-type": "application/octet-stream",
+            authorization: "UpToken " + upToken,
+        },
+        data: chunk.chunk,
+        onUploadProgress: (progressEvent) => {
+            onProgress({
+                loaded: progressEvent.loaded,
+                total: progressEvent.total,
+            });
+        },
+        cancelToken: cancel,
+    }).catch((e) => {
+        if (e instanceof HTTPError && e.response) {
+            throw new QiniuChunkError(e.response.data);
+        }
+
+        throw e;
+    });
+
+    return res.data;
+}
+
+export async function qiniuFinishUpload(
+    url: string,
+    upToken: string,
+    chunks: ChunkProgress[],
+    cancel: CancelToken
+): Promise<any> {
+    const content: QiniuFinishUploadRequest = {
+        parts: chunks.map(
+            (chunk): QiniuPartsInfo => {
+                return {
+                    etag: chunk.etag!,
+                    partNumber: chunk.index + 1,
+                };
+            }
+        ),
+    };
+
+    const res = await request<any>(`${url}`, {
+        method: "post",
+        headers: {
+            "content-type": "application/json",
+            authorization: "UpToken " + upToken,
+        },
+        data: content,
+        cancelToken: cancel,
+    }).catch((e) => {
+        if (e instanceof HTTPError && e.response) {
+            throw new QiniuFinishUploadError(e.response.data);
+        }
+
+        throw e;
+    });
+
+    return res.data;
+}
+
+export async function cosFormUploadChunk(
+    url: string,
+    file: File,
+    policy: string,
+    path: string,
+    callback: string,
+    sessionID: string,
+    keyTime: string,
+    credential: string,
+    ak: string,
+    onProgress: (p: Progress) => void,
+    cancel: CancelToken
+): Promise<any> {
+    const bodyFormData = new FormData();
+    bodyFormData.append("policy", policy);
+    bodyFormData.append("key", path);
+    bodyFormData.append("x-cos-meta-callback", callback);
+    bodyFormData.append("x-cos-meta-key", sessionID);
+    bodyFormData.append("q-sign-algorithm", "sha1");
+    bodyFormData.append("q-key-time", keyTime);
+    bodyFormData.append("q-ak", ak);
+    bodyFormData.append("q-signature", credential);
+    bodyFormData.append("name", file.name);
+    // File must be the last element in the form
+    bodyFormData.append("file", file);
+
+    const res = await request<any>(`${url}`, {
+        method: "post",
+        headers: {
+            "content-type": "multipart/form-data",
+        },
+        data: bodyFormData,
+        onUploadProgress: (progressEvent) => {
+            onProgress({
+                loaded: progressEvent.loaded,
+                total: progressEvent.total,
+            });
+        },
+        cancelToken: cancel,
+        responseType: "document",
+        transformResponse: undefined,
+    }).catch((e) => {
+        if (e instanceof HTTPError && e.response) {
+            throw new COSUploadError(e.response.data);
+        }
+
+        throw e;
+    });
+
+    return res.data;
+}
+
+export async function cosUploadCallback(
+    sessionID: string,
+    cancel: CancelToken
+): Promise<any> {
+    const res = await requestAPI<any>(`callback/cos/${sessionID}`, {
+        method: "get",
+        data: "{}",
+        cancelToken: cancel,
+    });
+
+    if (res.data.code != 0) {
+        throw new COSUploadCallbackError(res.data);
+    }
+
+    return res.data.data;
+}
+
+export async function upyunFormUploadChunk(
+    url: string,
+    file: File,
+    policy: string,
+    credential: string,
+    onProgress: (p: Progress) => void,
+    cancel: CancelToken
+): Promise<any> {
+    const bodyFormData = new FormData();
+    bodyFormData.append("policy", policy);
+    bodyFormData.append("authorization", credential);
+    // File must be the last element in the form
+    bodyFormData.append("file", file);
+
+    const res = await request<any>(`${url}`, {
+        method: "post",
+        headers: {
+            "content-type": "multipart/form-data",
+        },
+        data: bodyFormData,
+        onUploadProgress: (progressEvent) => {
+            onProgress({
+                loaded: progressEvent.loaded,
+                total: progressEvent.total,
+            });
+        },
+        cancelToken: cancel,
+    }).catch((e) => {
+        if (e instanceof HTTPError && e.response) {
+            throw new UpyunUploadError(e.response.data);
+        }
+
+        throw e;
+    });
+
+    return res.data;
+}
+
+export async function s3LikeUploadCallback(
+    sessionID: string,
+    cancel: CancelToken
+): Promise<any> {
+    const res = await requestAPI<any>(`callback/s3/${sessionID}`, {
+        method: "get",
+        data: "{}",
+        cancelToken: cancel,
+    });
+
+    if (res.data.code != 0) {
+        throw new S3LikeUploadCallbackError(res.data);
+    }
+
+    return res.data.data;
+}
diff --git a/src/component/Uploader/core/errors/index.ts b/src/component/Uploader/core/errors/index.ts
new file mode 100644
index 0000000..fc5a4ac
--- /dev/null
+++ b/src/component/Uploader/core/errors/index.ts
@@ -0,0 +1,399 @@
+import {
+    OneDriveError,
+    Policy,
+    QiniuError,
+    Response,
+    UpyunError,
+} from "../types";
+import { sizeToString } from "../utils";
+import i18next from "../../../../i18n";
+import { AppError } from "../../../../middleware/Api";
+
+export enum UploaderErrorName {
+    InvalidFile = "InvalidFile",
+    NoPolicySelected = "NoPolicySelected",
+    UnknownPolicyType = "UnknownPolicyType",
+    FailedCreateUploadSession = "FailedCreateUploadSession",
+    FailedDeleteUploadSession = "FailedDeleteUploadSession",
+    HTTPRequestFailed = "HTTPRequestFailed",
+    LocalChunkUploadFailed = "LocalChunkUploadFailed",
+    SlaveChunkUploadFailed = "SlaveChunkUploadFailed",
+    WriteCtxFailed = "WriteCtxFailed",
+    RemoveCtxFailed = "RemoveCtxFailed",
+    ReadCtxFailed = "ReadCtxFailed",
+    InvalidCtxData = "InvalidCtxData",
+    CtxExpired = "CtxExpired",
+    RequestCanceled = "RequestCanceled",
+    ProcessingTaskDuplicated = "ProcessingTaskDuplicated",
+    OneDriveChunkUploadFailed = "OneDriveChunkUploadFailed",
+    OneDriveEmptyFile = "OneDriveEmptyFile",
+    FailedFinishOneDriveUpload = "FailedFinishOneDriveUpload",
+    S3LikeChunkUploadFailed = "S3LikeChunkUploadFailed",
+    S3LikeUploadCallbackFailed = "S3LikeUploadCallbackFailed",
+    COSUploadCallbackFailed = "COSUploadCallbackFailed",
+    COSPostUploadFailed = "COSPostUploadFailed",
+    UpyunPostUploadFailed = "UpyunPostUploadFailed",
+    QiniuChunkUploadFailed = "QiniuChunkUploadFailed",
+    FailedFinishOSSUpload = "FailedFinishOSSUpload",
+    FailedFinishQiniuUpload = "FailedFinishQiniuUpload",
+    FailedTransformResponse = "FailedTransformResponse",
+}
+
+const RETRY_ERROR_LIST = [
+    UploaderErrorName.FailedCreateUploadSession,
+    UploaderErrorName.HTTPRequestFailed,
+    UploaderErrorName.LocalChunkUploadFailed,
+    UploaderErrorName.SlaveChunkUploadFailed,
+    UploaderErrorName.RequestCanceled,
+    UploaderErrorName.ProcessingTaskDuplicated,
+    UploaderErrorName.FailedTransformResponse,
+];
+
+const RETRY_CODE_LIST = [-1];
+
+export class UploaderError implements Error {
+    public stack: string | undefined;
+    constructor(public name: UploaderErrorName, public message: string) {
+        this.stack = new Error().stack;
+    }
+
+    public Message(): string {
+        return this.message;
+    }
+
+    public Retryable(): boolean {
+        return RETRY_ERROR_LIST.includes(this.name);
+    }
+}
+
+// 文件未通过存储策略验证
+export class FileValidateError extends UploaderError {
+    // 未通过验证的文件属性
+    public field: "size" | "suffix";
+
+    // 对应的存储策略
+    public policy: Policy;
+
+    constructor(message: string, field: "size" | "suffix", policy: Policy) {
+        super(UploaderErrorName.InvalidFile, message);
+        this.field = field;
+        this.policy = policy;
+    }
+
+    public Message(): string {
+        if (this.field == "size") {
+            return i18next.t(`uploader.sizeExceedLimitError`, {
+                max: sizeToString(this.policy.maxSize),
+            });
+        }
+
+        return i18next.t(`uploader.suffixNotAllowedError`, {
+            supported: this.policy.allowedSuffix
+                ? this.policy.allowedSuffix.join(",")
+                : "*",
+        });
+    }
+}
+
+// 未知存储策略
+export class UnknownPolicyError extends UploaderError {
+    // 对应的存储策略
+    public policy: Policy;
+
+    constructor(message: string, policy: Policy) {
+        super(UploaderErrorName.UnknownPolicyType, message);
+        this.policy = policy;
+    }
+}
+
+// 后端 API 出错
+export class APIError extends UploaderError {
+    private appError: AppError;
+    constructor(
+        name: UploaderErrorName,
+        message: string,
+        protected response: Response<any>
+    ) {
+        super(name, message);
+        this.appError = new AppError(response.msg, response.code, response.msg);
+    }
+
+    public Message(): string {
+        return `${this.message}: ${this.appError.message}`;
+    }
+
+    public Retryable(): boolean {
+        return (
+            super.Retryable() && RETRY_CODE_LIST.includes(this.response.code)
+        );
+    }
+}
+
+// 无法创建上传会话
+export class CreateUploadSessionError extends APIError {
+    constructor(response: Response<any>) {
+        super(UploaderErrorName.FailedCreateUploadSession, "", response);
+    }
+
+    public Message(): string {
+        this.message = i18next.t(`uploader.createUploadSessionError`);
+        return super.Message();
+    }
+}
+
+// 无法删除上传会话
+export class DeleteUploadSessionError extends APIError {
+    constructor(response: Response<any>) {
+        super(UploaderErrorName.FailedDeleteUploadSession, "", response);
+    }
+
+    public Message(): string {
+        this.message = i18next.t(`uploader.deleteUploadSessionError`);
+        return super.Message();
+    }
+}
+
+// HTTP 请求出错
+export class HTTPError extends UploaderError {
+    public response?: any;
+    constructor(public axiosErr: any, protected url: string) {
+        super(UploaderErrorName.HTTPRequestFailed, axiosErr.message);
+        this.response = axiosErr.response;
+    }
+
+    public Message(): string {
+        return i18next.t(`uploader.requestError`, {
+            msg: this.axiosErr,
+            url: this.url,
+        });
+    }
+}
+
+// 本地分块上传失败
+export class LocalChunkUploadError extends APIError {
+    constructor(response: Response<any>, protected chunkIndex: number) {
+        super(UploaderErrorName.LocalChunkUploadFailed, "", response);
+    }
+
+    public Message(): string {
+        this.message = i18next.t(`uploader.chunkUploadError`, {
+            index: this.chunkIndex,
+        });
+        return super.Message();
+    }
+}
+
+// 无法创建上传会话
+export class RequestCanceledError extends UploaderError {
+    constructor() {
+        super(UploaderErrorName.RequestCanceled, "Request canceled");
+    }
+}
+
+// 从机分块上传失败
+export class SlaveChunkUploadError extends APIError {
+    constructor(response: Response<any>, protected chunkIndex: number) {
+        super(UploaderErrorName.SlaveChunkUploadFailed, "", response);
+    }
+
+    public Message(): string {
+        this.message = i18next.t(`uploader.chunkUploadError`, {
+            index: this.chunkIndex,
+        });
+        return super.Message();
+    }
+}
+
+// 上传任务冲突
+export class ProcessingTaskDuplicatedError extends UploaderError {
+    constructor() {
+        super(
+            UploaderErrorName.ProcessingTaskDuplicated,
+            "Processing task duplicated"
+        );
+    }
+
+    public Message(): string {
+        return i18next.t(`uploader.conflictError`);
+    }
+}
+
+// OneDrive 分块上传失败
+export class OneDriveChunkError extends UploaderError {
+    constructor(public response: OneDriveError) {
+        super(
+            UploaderErrorName.OneDriveChunkUploadFailed,
+            response.error.message
+        );
+    }
+
+    public Message(): string {
+        let msg =  i18next.t(`uploader.chunkUploadErrorWithMsg`, {
+            msg: this.message,
+        });
+
+        if (this.response.error.retryAfterSeconds != undefined){
+            msg += " "+i18next.t(`uploader.chunkUploadErrorWithRetryAfter`, {
+                retryAfter: this.response.error.retryAfterSeconds,
+            })
+        }
+
+        return msg;
+    }
+
+    public Retryable(): boolean {
+        return (
+            super.Retryable() || this.response.error.retryAfterSeconds != undefined
+        );
+    }
+}
+
+// OneDrive 选择了空文件上传
+export class OneDriveEmptyFileSelected extends UploaderError {
+    constructor() {
+        super(UploaderErrorName.OneDriveEmptyFile, "empty file not supported");
+    }
+
+    public Message(): string {
+        return i18next.t("uploader.emptyFileError");
+    }
+}
+
+// OneDrive 无法完成文件上传
+export class OneDriveFinishUploadError extends APIError {
+    constructor(response: Response<any>) {
+        super(UploaderErrorName.FailedFinishOneDriveUpload, "", response);
+    }
+
+    public Message(): string {
+        this.message = i18next.t("uploader.finishUploadError");
+        return super.Message();
+    }
+}
+
+// S3 类策略分块上传失败
+export class S3LikeChunkError extends UploaderError {
+    constructor(public response: Document) {
+        super(
+            UploaderErrorName.S3LikeChunkUploadFailed,
+            response.getElementsByTagName("Message")[0].innerHTML
+        );
+    }
+
+    public Message(): string {
+        return i18next.t(`uploader.chunkUploadErrorWithMsg`, {
+            msg: this.message,
+        });
+    }
+}
+
+// OSS 完成传失败
+export class S3LikeFinishUploadError extends UploaderError {
+    constructor(public response: Document) {
+        super(
+            UploaderErrorName.S3LikeChunkUploadFailed,
+            response.getElementsByTagName("Message")[0].innerHTML
+        );
+    }
+
+    public Message(): string {
+        return i18next.t(`uploader.ossFinishUploadError`, {
+            msg: this.message,
+            code: this.response.getElementsByTagName("Code")[0].innerHTML,
+        });
+    }
+}
+
+// qiniu 分块上传失败
+export class QiniuChunkError extends UploaderError {
+    constructor(public response: QiniuError) {
+        super(UploaderErrorName.QiniuChunkUploadFailed, response.error);
+    }
+
+    public Message(): string {
+        return i18next.t(`uploader.chunkUploadErrorWithMsg`, {
+            msg: this.message,
+        });
+    }
+}
+
+// qiniu 完成传失败
+export class QiniuFinishUploadError extends UploaderError {
+    constructor(public response: QiniuError) {
+        super(UploaderErrorName.FailedFinishQiniuUpload, response.error);
+    }
+
+    public Message(): string {
+        return i18next.t(`uploader.finishUploadErrorWithMsg`, {
+            msg: this.message,
+        });
+    }
+}
+
+// COS 上传失败
+export class COSUploadError extends UploaderError {
+    constructor(public response: Document) {
+        super(
+            UploaderErrorName.COSPostUploadFailed,
+            response.getElementsByTagName("Message")[0].innerHTML
+        );
+    }
+
+    public Message(): string {
+        return i18next.t(`uploader.cosUploadFailed`, {
+            msg: this.message,
+            code: this.response.getElementsByTagName("Code")[0].innerHTML,
+        });
+    }
+}
+
+// COS 无法完成上传回调
+export class COSUploadCallbackError extends APIError {
+    constructor(response: Response<any>) {
+        super(UploaderErrorName.COSUploadCallbackFailed, "", response);
+    }
+
+    public Message(): string {
+        this.message = i18next.t("uploader.finishUploadError");
+        return super.Message();
+    }
+}
+
+// Upyun 上传失败
+export class UpyunUploadError extends UploaderError {
+    constructor(public response: UpyunError) {
+        super(UploaderErrorName.UpyunPostUploadFailed, response.message);
+    }
+
+    public Message(): string {
+        return i18next.t("uploader.upyunUploadFailed", {
+            msg: this.message,
+        });
+    }
+}
+
+// S3 无法完成上传回调
+export class S3LikeUploadCallbackError extends APIError {
+    constructor(response: Response<any>) {
+        super(UploaderErrorName.S3LikeUploadCallbackFailed, "", response);
+    }
+
+    public Message(): string {
+        this.message = i18next.t("uploader.finishUploadError");
+        return super.Message();
+    }
+}
+
+// 无法解析响应
+export class TransformResponseError extends UploaderError {
+    constructor(private response: string, parseError: Error) {
+        super(UploaderErrorName.FailedTransformResponse, parseError.message);
+    }
+
+    public Message(): string {
+        return i18next.t("uploader.parseResponseError", {
+            msg: this.message,
+            content: this.response,
+        });
+    }
+}
diff --git a/src/component/Uploader/core/index.ts b/src/component/Uploader/core/index.ts
new file mode 100644
index 0000000..11ef391
--- /dev/null
+++ b/src/component/Uploader/core/index.ts
@@ -0,0 +1,236 @@
+import { Policy, PolicyType, Task, TaskType } from "./types";
+import Logger, { LogLevel } from "./logger";
+import { UnknownPolicyError, UploaderError, UploaderErrorName } from "./errors";
+import Base from "./uploader/base";
+import Local from "./uploader/local";
+import { Pool } from "./utils/pool";
+import {
+    cleanupResumeCtx,
+    getAllFileEntries,
+    getDirectoryUploadDst,
+    getFileInput,
+    isFileDrop,
+    listResumeCtx,
+} from "./utils";
+import Remote from "./uploader/remote";
+import OneDrive from "./uploader/onedrive";
+import OSS from "./uploader/oss";
+import Qiniu from "./uploader/qiniu";
+import COS from "./uploader/cos";
+import Upyun from "./uploader/upyun";
+import S3 from "./uploader/s3";
+import ResumeHint from "./uploader/placeholder";
+
+export interface Option {
+    logLevel: LogLevel;
+    concurrentLimit: number;
+    dropZone?: HTMLElement;
+    onDropOver?: (e: DragEvent) => void;
+    onDropLeave?: (e: DragEvent) => void;
+    onToast: (type: string, msg: string) => void;
+    onDropFileAdded?: (uploaders: Base[]) => void;
+}
+
+export enum SelectType {
+    File,
+    Directory,
+}
+
+export default class UploadManager {
+    public logger: Logger;
+    public pool: Pool;
+    private static id = 0;
+    private policy?: Policy;
+    private fileInput: HTMLInputElement;
+    private directoryInput: HTMLInputElement;
+    private id = ++UploadManager.id;
+    // used for proactive upload (drop, paste)
+    private currentPath = "/";
+
+    constructor(private o: Option) {
+        this.logger = new Logger(o.logLevel, "MANAGER");
+        this.logger.info(`Initialized with log level: ${o.logLevel}`);
+
+        this.pool = new Pool(o.concurrentLimit);
+        this.fileInput = getFileInput(this.id, false);
+        this.directoryInput = getFileInput(this.id, true);
+
+        if (o.dropZone) {
+            this.logger.info(`Drag and drop container set to:`, o.dropZone);
+            o.dropZone.addEventListener("dragenter", (e) => {
+                if (isFileDrop(e)) {
+                    e.preventDefault();
+                    if (o.onDropOver) {
+                        o.onDropOver(e);
+                    }
+                }
+            });
+
+            o.dropZone.addEventListener("dragleave", (e) => {
+                if (isFileDrop(e)) {
+                    e.preventDefault();
+                    if (o.onDropLeave) {
+                        o.onDropLeave(e);
+                    }
+                }
+            });
+
+            o.dropZone.addEventListener("drop", this.onFileDroppedIn);
+        }
+    }
+
+    changeConcurrentLimit = (newLimit: number) => {
+        this.pool.limit = newLimit;
+    };
+
+    dispatchUploader(task: Task): Base {
+        if (task.type == TaskType.resumeHint) {
+            return new ResumeHint(task, this);
+        }
+
+        switch (task.policy.type) {
+            case PolicyType.local:
+                return new Local(task, this);
+            case PolicyType.remote:
+                return new Remote(task, this);
+            case PolicyType.onedrive:
+                return new OneDrive(task, this);
+            case PolicyType.oss:
+                return new OSS(task, this);
+            case PolicyType.qiniu:
+                return new Qiniu(task, this);
+            case PolicyType.cos:
+                return new COS(task, this);
+            case PolicyType.upyun:
+                return new Upyun(task, this);
+            case PolicyType.s3:
+                return new S3(task, this);
+            default:
+                throw new UnknownPolicyError(
+                    "Unknown policy type.",
+                    task.policy
+                );
+        }
+    }
+
+    // 设定当前存储策略
+    public setPolicy(p: Policy, path: string) {
+        this.policy = p;
+        this.currentPath = path;
+        if (p == undefined) {
+            this.logger.info(`Currently no policy selected`);
+            return;
+        }
+
+        this.logger.info(`Switching policy to:`, p);
+
+        if (p.allowedSuffix != undefined && p.allowedSuffix.length > 0) {
+            const acceptVal = p.allowedSuffix
+                .map((v) => {
+                    return "." + v;
+                })
+                .join(",");
+            this.logger.info(`Set allowed file suffix to ${acceptVal}`);
+            this.fileInput.setAttribute("accept", acceptVal);
+        } else {
+            this.logger.info(`Set allowed file suffix to *`);
+            this.fileInput.removeAttribute("accept");
+        }
+    }
+
+    // 选择文件
+    public select = (dst: string, type = SelectType.File): Promise<Base[]> => {
+        return new Promise<Base[]>((resolve) => {
+            if (this.policy == undefined) {
+                this.logger.warn(
+                    `Calling file selector while no policy is set`
+                );
+                throw new UploaderError(
+                    UploaderErrorName.NoPolicySelected,
+                    "No policy selected."
+                );
+            }
+
+            this.fileInput.onchange = (ev: Event) =>
+                this.fileSelectCallback(ev, dst, resolve);
+            this.directoryInput.onchange = (ev: Event) =>
+                this.fileSelectCallback(ev, dst, resolve);
+            this.fileInput.value = "";
+            this.directoryInput.value = "";
+            type == SelectType.File
+                ? this.fileInput.click()
+                : this.directoryInput.click();
+        });
+    };
+
+    public resumeTasks = (): Base[] => {
+        const tasks = listResumeCtx(this.logger);
+        if (tasks.length > 0) {
+            this.logger.info(
+                `Resumed ${tasks.length} unfinished task(s) from local storage:`,
+                tasks
+            );
+        }
+        return tasks
+            .filter(
+                (t) =>
+                    t.chunkProgress.length > 0 && t.chunkProgress[0].loaded > 0
+            )
+            .map((t) =>
+                this.dispatchUploader({ ...t, type: TaskType.resumeHint })
+            );
+    };
+
+    public cleanupSessions = () => {
+        cleanupResumeCtx(this.logger);
+    };
+
+    private fileSelectCallback = (
+        ev: Event | File[],
+        dst: string,
+        resolve: (value?: Base[] | PromiseLike<Base[]> | undefined) => void
+    ) => {
+        let files: File[] = [];
+        if (ev instanceof Event) {
+            const target = ev.target as HTMLInputElement;
+            if (!ev || !target || !target.files) return;
+            if (target.files.length > 0) {
+                files = Array.from(target.files);
+            }
+        } else {
+            files = ev as File[];
+        }
+
+        if (files.length > 0) {
+            resolve(
+                files.map(
+                    (file): Base =>
+                        this.dispatchUploader({
+                            type: TaskType.file,
+                            policy: this.policy as Policy,
+                            dst: getDirectoryUploadDst(dst, file),
+                            file: file,
+                            size: file.size,
+                            name: file.name,
+                            chunkProgress: [],
+                            resumed: false,
+                        })
+                )
+            );
+        }
+    };
+
+    private onFileDroppedIn = async (e: DragEvent) => {
+        const containFile =
+            e.dataTransfer && e.dataTransfer.types.includes("Files");
+        if (containFile) {
+            this.o.onDropLeave && this.o.onDropLeave(e);
+            const items = await getAllFileEntries(e.dataTransfer!.items);
+            console.log(items);
+            const uploaders = await new Promise<Base[]>((resolve) =>
+                this.fileSelectCallback(items, this.currentPath, resolve)
+            );
+            this.o.onDropFileAdded && this.o.onDropFileAdded(uploaders);
+        }
+    };
+}
diff --git a/src/component/Uploader/core/logger.ts b/src/component/Uploader/core/logger.ts
new file mode 100644
index 0000000..af39d6f
--- /dev/null
+++ b/src/component/Uploader/core/logger.ts
@@ -0,0 +1,37 @@
+export type LogLevel = "INFO" | "WARN" | "ERROR" | "OFF";
+
+export default class Logger {
+    constructor(
+        public level: LogLevel = "OFF",
+        private prefix = "UPLOAD",
+        private id: number = 1
+    ) {}
+
+    private getPrintPrefix(level: LogLevel) {
+        return `Cloudreve-Uploader [${level}][${this.prefix}#${this.id}]:`;
+    }
+
+    info(...args: unknown[]) {
+        const allowLevel: LogLevel[] = ["INFO"];
+        if (allowLevel.includes(this.level)) {
+            // eslint-disable-next-line no-console
+            console.log(this.getPrintPrefix("INFO"), ...args);
+        }
+    }
+
+    warn(...args: unknown[]) {
+        const allowLevel: LogLevel[] = ["INFO", "WARN"];
+        if (allowLevel.includes(this.level)) {
+            // eslint-disable-next-line no-console
+            console.warn(this.getPrintPrefix("WARN"), ...args);
+        }
+    }
+
+    error(...args: unknown[]) {
+        const allowLevel: LogLevel[] = ["INFO", "WARN", "ERROR"];
+        if (allowLevel.includes(this.level)) {
+            // eslint-disable-next-line no-console
+            console.error(this.getPrintPrefix("ERROR"), ...args);
+        }
+    }
+}
diff --git a/src/component/Uploader/core/types.ts b/src/component/Uploader/core/types.ts
new file mode 100644
index 0000000..7ab6051
--- /dev/null
+++ b/src/component/Uploader/core/types.ts
@@ -0,0 +1,116 @@
+import { ChunkProgress } from "./uploader/chunk";
+
+export enum PolicyType {
+    local = "local",
+    remote = "remote",
+    oss = "oss",
+    qiniu = "qiniu",
+    onedrive = "onedrive",
+    cos = "cos",
+    upyun = "upyun",
+    s3 = "s3",
+}
+
+export interface Policy {
+    id: number;
+    name: string;
+    allowedSuffix: Nullable<string[]>;
+    maxSize: number;
+    type: PolicyType;
+}
+
+export enum TaskType {
+    file,
+    resumeHint,
+}
+
+export interface Task {
+    type: TaskType;
+    name: string;
+    size: number;
+    policy: Policy;
+    dst: string;
+    file: File;
+    child?: Task[];
+    session?: UploadCredential;
+    chunkProgress: ChunkProgress[];
+    resumed: boolean;
+}
+
+type Nullable<T> = T | null;
+
+export interface Response<T> {
+    code: number;
+    data: T;
+    msg: string;
+    error: string;
+}
+
+export interface UploadSessionRequest {
+    path: string;
+    size: number;
+    name: string;
+    policy_id: number;
+    last_modified?: number;
+
+    mime_type?: string;
+}
+
+export interface UploadCredential {
+    sessionID: string;
+    expires: number;
+    chunkSize: number;
+    uploadURLs: string[];
+    credential: string;
+    uploadID: string;
+    callback: string;
+    policy: string;
+    ak: string;
+    keyTime: string;
+    path: string;
+    completeURL: string;
+}
+
+export interface OneDriveError {
+    error: {
+        code: string;
+        message: string;
+        innererror?: {
+            code: string;
+        };
+        retryAfterSeconds?: number;
+    };
+}
+
+export interface OneDriveChunkResponse {
+    expirationDateTime: string;
+    nextExpectedRanges: string[];
+}
+
+export interface QiniuChunkResponse {
+    etag: string;
+    md5: string;
+}
+
+export interface QiniuError {
+    error: string;
+}
+
+export interface QiniuPartsInfo {
+    etag: string;
+    partNumber: number;
+}
+
+export interface QiniuFinishUploadRequest {
+    parts: QiniuPartsInfo[];
+}
+
+export interface UpyunError {
+    message: string;
+    code: number;
+}
+
+export interface S3Part {
+    ETag: string;
+    PartNumber: number;
+}
diff --git a/src/component/Uploader/core/uploader/base.ts b/src/component/Uploader/core/uploader/base.ts
new file mode 100644
index 0000000..275445d
--- /dev/null
+++ b/src/component/Uploader/core/uploader/base.ts
@@ -0,0 +1,235 @@
+// 所有 Uploader 的基类
+import { PolicyType, Task } from "../types";
+import UploadManager from "../index";
+import Logger from "../logger";
+import { validate } from "../utils/validator";
+import { CancelToken } from "../utils/request";
+import axios, { CancelTokenSource } from "axios";
+import { createUploadSession, deleteUploadSession } from "../api";
+import * as utils from "../utils";
+import { RequestCanceledError, UploaderError } from "../errors";
+
+export enum Status {
+    added,
+    resumable,
+    initialized,
+    queued,
+    preparing,
+    processing,
+    finishing,
+    finished,
+    error,
+    canceled,
+}
+
+export interface UploadHandlers {
+    onTransition: (newStatus: Status) => void;
+    onError: (err: Error) => void;
+    onProgress: (data: UploadProgress) => void;
+    onMsg: (msg: string, color: string) => void;
+}
+
+export interface UploadProgress {
+    total: ProgressCompose;
+    chunks?: ProgressCompose[];
+}
+
+export interface ProgressCompose {
+    size: number;
+    loaded: number;
+    percent: number;
+    fromCache?: boolean;
+}
+
+export interface Progress {
+    total: number;
+    loaded: number;
+}
+
+const resumePolicy = [
+    PolicyType.local,
+    PolicyType.remote,
+    PolicyType.qiniu,
+    PolicyType.oss,
+    PolicyType.onedrive,
+    PolicyType.s3,
+];
+const deleteUploadSessionDelay = 500;
+
+export default abstract class Base {
+    public child?: Base[];
+    public status: Status = Status.added;
+    public error?: Error;
+
+    public id = ++Base.id;
+    private static id = 0;
+
+    protected logger: Logger;
+    protected subscriber: UploadHandlers;
+    // 用于取消请求
+    protected cancelToken: CancelTokenSource = CancelToken.source();
+    protected progress: UploadProgress;
+
+    public lastTime = Date.now();
+    public startTime = Date.now();
+
+    constructor(public task: Task, protected manager: UploadManager) {
+        this.logger = new Logger(
+            this.manager.logger.level,
+            "UPLOADER",
+            this.id
+        );
+        this.logger.info("Initialize new uploader for task: ", task);
+        this.subscriber = {
+            /* eslint-disable @typescript-eslint/no-empty-function */
+            onTransition: (newStatus: Status) => {},
+            onError: (err: Error) => {},
+            onProgress: (data: UploadProgress) => {},
+            onMsg: (msg, color: string) => {},
+            /* eslint-enable @typescript-eslint/no-empty-function */
+        };
+    }
+
+    public subscribe = (handlers: UploadHandlers) => {
+        this.subscriber = handlers;
+    };
+
+    public start = async () => {
+        this.logger.info("Activate uploading task");
+        this.transit(Status.initialized);
+        this.lastTime = this.startTime = Date.now();
+
+        try {
+            validate(this.task.file, this.task.policy);
+        } catch (e) {
+            this.logger.error("File validate failed with error:", e);
+            this.setError(e);
+            return;
+        }
+
+        this.logger.info("Enqueued in manager pool");
+        this.transit(Status.queued);
+        this.manager.pool.enqueue(this).catch((e) => {
+            this.logger.info("Upload task failed with error:", e);
+            this.setError(e);
+        });
+    };
+
+    public run = async () => {
+        this.logger.info("Start upload task, create upload session...");
+        this.transit(Status.preparing);
+        const cachedInfo = utils.getResumeCtx(this.task, this.logger);
+        if (cachedInfo == null) {
+            this.task.session = await createUploadSession(
+                {
+                    path: this.task.dst,
+                    size: this.task.file.size,
+                    name: this.task.file.name,
+                    policy_id: this.task.policy.id,
+                    last_modified: this.task.file.lastModified,
+                    mime_type: this.task.file.type,
+                },
+                this.cancelToken.token
+            );
+            this.logger.info("Upload session created:", this.task.session);
+        } else {
+            this.task.session = cachedInfo.session;
+            this.task.resumed = true;
+            this.task.chunkProgress = cachedInfo.chunkProgress;
+            this.logger.info("Resume upload from cached ctx:", cachedInfo);
+        }
+
+        this.transit(Status.processing);
+        await this.upload();
+        await this.afterUpload();
+        utils.removeResumeCtx(this.task, this.logger);
+        this.transit(Status.finished);
+        this.logger.info("Upload task completed");
+    };
+
+    public abstract async upload(): Promise<any>;
+    protected async afterUpload(): Promise<any> {
+        return;
+    }
+
+    public cancel = async () => {
+        if (this.status === Status.finished) {
+            return;
+        }
+
+        this.cancelToken.cancel();
+        await this.cancelUploadSession();
+        this.transit(Status.canceled);
+    };
+
+    public reset = () => {
+        this.cancelToken = axios.CancelToken.source();
+        this.progress = {
+            total: {
+                size: 0,
+                loaded: 0,
+                percent: 0,
+            },
+        };
+    };
+
+    protected setError(e: Error) {
+        if (
+            !(e instanceof UploaderError && e.Retryable()) ||
+            !resumePolicy.includes(this.task.policy.type)
+        ) {
+            this.logger.warn("Non-resume error occurs, clean resume ctx cache");
+            this.cancelUploadSession();
+        }
+
+        if (!(e instanceof RequestCanceledError)) {
+            this.status = Status.error;
+            this.error = e;
+            this.subscriber.onError(e);
+        }
+    }
+
+    protected cancelUploadSession = (): Promise<void> => {
+        return new Promise<void>((resolve) => {
+            utils.removeResumeCtx(this.task, this.logger);
+            if (this.task.session) {
+                setTimeout(() => {
+                    deleteUploadSession(this.task.session!?.sessionID)
+                        .catch((e) => {
+                            this.logger.warn(
+                                "Failed to cancel upload session: ",
+                                e
+                            );
+                        })
+                        .finally(() => {
+                            resolve();
+                        });
+                }, deleteUploadSessionDelay);
+            } else {
+                resolve();
+            }
+        });
+    };
+
+    protected transit(status: Status) {
+        this.status = status;
+        this.subscriber.onTransition(status);
+    }
+
+    public getProgressInfoItem(
+        loaded: number,
+        size: number,
+        fromCache?: boolean
+    ): ProgressCompose {
+        return {
+            size,
+            loaded,
+            percent: (loaded / size) * 100,
+            ...(fromCache == null ? {} : { fromCache }),
+        };
+    }
+
+    public key(): string {
+        return utils.getResumeCtxKey(this.task);
+    }
+}
diff --git a/src/component/Uploader/core/uploader/chunk.ts b/src/component/Uploader/core/uploader/chunk.ts
new file mode 100644
index 0000000..02cb302
--- /dev/null
+++ b/src/component/Uploader/core/uploader/chunk.ts
@@ -0,0 +1,84 @@
+import Base, { Status, UploadProgress } from "./base";
+import * as utils from "../utils";
+import { Task, TaskType } from "../types";
+import UploadManager from "../index";
+import Logger from "../logger";
+
+export interface ChunkProgress {
+    loaded: number;
+    index: number;
+    etag?: string;
+}
+
+export interface ChunkInfo {
+    chunk: Blob;
+    index: number;
+}
+
+export default abstract class Chunk extends Base {
+    protected chunks: Blob[];
+
+    public upload = async () => {
+        this.logger.info("Preparing uploading file chunks.");
+        this.initBeforeUploadChunks();
+
+        this.logger.info("Starting uploading file chunks:", this.chunks);
+        this.updateLocalCache();
+        for (let i = 0; i < this.chunks.length; i++) {
+            if (
+                this.task.chunkProgress[i].loaded < this.chunks[i].size ||
+                this.chunks[i].size == 0
+            ) {
+                await this.uploadChunk({ chunk: this.chunks[i], index: i });
+                this.logger.info(`Chunk [${i}] uploaded.`);
+                this.updateLocalCache();
+            }
+        }
+    };
+
+    private initBeforeUploadChunks() {
+        this.chunks = utils.getChunks(
+            this.task.file,
+            this.task.session?.chunkSize
+        );
+        const cachedInfo = utils.getResumeCtx(this.task, this.logger);
+        if (cachedInfo == null) {
+            this.task.chunkProgress = this.chunks.map(
+                (value, index): ChunkProgress => ({
+                    loaded: 0,
+                    index,
+                })
+            );
+        }
+
+        this.notifyResumeProgress();
+    }
+
+    protected abstract async uploadChunk(chunkInfo: ChunkInfo): Promise<any>;
+
+    protected updateChunkProgress(loaded: number, index: number) {
+        this.task.chunkProgress[index].loaded = loaded;
+        this.notifyResumeProgress();
+    }
+
+    private notifyResumeProgress() {
+        this.progress = {
+            total: this.getProgressInfoItem(
+                utils.sumChunk(this.task.chunkProgress),
+                this.task.file.size + 1
+            ),
+            chunks: this.chunks.map((chunk, index) => {
+                return this.getProgressInfoItem(
+                    this.task.chunkProgress[index].loaded,
+                    chunk.size,
+                    false
+                );
+            }),
+        };
+        this.subscriber.onProgress(this.progress);
+    }
+
+    private updateLocalCache() {
+        utils.setResumeCtx(this.task, this.logger);
+    }
+}
diff --git a/src/component/Uploader/core/uploader/cos.ts b/src/component/Uploader/core/uploader/cos.ts
new file mode 100644
index 0000000..57e0aaa
--- /dev/null
+++ b/src/component/Uploader/core/uploader/cos.ts
@@ -0,0 +1,38 @@
+import Base, { Status } from "./base";
+import { cosFormUploadChunk, cosUploadCallback } from "../api";
+
+export default class COS extends Base {
+    public upload = async () => {
+        this.logger.info("Starting uploading file stream:", this.task.file);
+        await cosFormUploadChunk(
+            this.task.session?.uploadURLs[0]!,
+            this.task.file,
+            this.task.session?.policy!,
+            this.task.session?.path!,
+            this.task.session?.callback!,
+            this.task.session?.sessionID!,
+            this.task.session?.keyTime!,
+            this.task.session?.credential!,
+            this.task.session?.ak!,
+            (p) => {
+                this.subscriber.onProgress({
+                    total: this.getProgressInfoItem(p.loaded, p.total),
+                });
+            },
+            this.cancelToken.token
+        );
+    };
+
+    protected async afterUpload(): Promise<any> {
+        this.transit(Status.finishing);
+        this.logger.info(`Sending COS upload callback...`);
+        try {
+            await cosUploadCallback(
+                this.task.session!.sessionID,
+                this.cancelToken.token
+            );
+        } catch (e) {
+            this.logger.warn(`Failed to finish COS upload:`, e);
+        }
+    }
+}
diff --git a/src/component/Uploader/core/uploader/local.ts b/src/component/Uploader/core/uploader/local.ts
new file mode 100644
index 0000000..7917d15
--- /dev/null
+++ b/src/component/Uploader/core/uploader/local.ts
@@ -0,0 +1,15 @@
+import Chunk, { ChunkInfo } from "./chunk";
+import { localUploadChunk } from "../api";
+
+export default class Local extends Chunk {
+    protected async uploadChunk(chunkInfo: ChunkInfo) {
+        return localUploadChunk(
+            this.task.session?.sessionID!,
+            chunkInfo,
+            (p) => {
+                this.updateChunkProgress(p.loaded, chunkInfo.index);
+            },
+            this.cancelToken.token
+        );
+    }
+}
diff --git a/src/component/Uploader/core/uploader/onedrive.ts b/src/component/Uploader/core/uploader/onedrive.ts
new file mode 100644
index 0000000..026fd38
--- /dev/null
+++ b/src/component/Uploader/core/uploader/onedrive.ts
@@ -0,0 +1,100 @@
+import Chunk, { ChunkInfo } from "./chunk";
+import { finishOneDriveUpload, oneDriveUploadChunk } from "../api";
+import { OneDriveChunkError, OneDriveEmptyFileSelected } from "../errors";
+import { Status } from "./base";
+
+export default class OneDrive extends Chunk {
+    protected async uploadChunk(chunkInfo: ChunkInfo) {
+        if (chunkInfo.chunk.size === 0) {
+            throw new OneDriveEmptyFileSelected();
+        }
+
+        const rangeEnd = this.progress.total.loaded + chunkInfo.chunk.size - 1;
+        return this.sendRange(
+            chunkInfo,
+            this.progress.total.loaded,
+            rangeEnd,
+            0
+        ).catch((e) => {
+            if (
+                e instanceof OneDriveChunkError &&
+                e.response.error.innererror &&
+                e.response.error.innererror.code == "fragmentOverlap"
+            ) {
+                return this.alignChunkOffset(chunkInfo);
+            }
+
+            throw e;
+        });
+    }
+
+    private async sendRange(
+        chunkInfo: ChunkInfo,
+        start: number,
+        end: number,
+        chunkOffset: number
+    ) {
+        const range = `bytes ${start}-${end}/${this.task.file.size}`;
+        return oneDriveUploadChunk(
+            `${this.task.session?.uploadURLs[0]!}`,
+            range,
+            chunkInfo,
+            (p) => {
+                this.updateChunkProgress(
+                    chunkOffset + p.loaded,
+                    chunkInfo.index
+                );
+            },
+            this.cancelToken.token
+        );
+    }
+
+    private async alignChunkOffset(chunkInfo: ChunkInfo) {
+        this.logger.info(
+            `Chunk [${chunkInfo.index}] overlapped, checking next expected range...`
+        );
+        const rangeStatus = await oneDriveUploadChunk(
+            `${this.task.session?.uploadURLs[0]!}`,
+            "",
+            chunkInfo,
+            (p) => {
+                return null;
+            },
+            this.cancelToken.token
+        );
+        const expectedStart = parseInt(
+            rangeStatus.nextExpectedRanges[0].split("-")[0]
+        );
+        this.logger.info(
+            `Next expected range start from OneDrive is ${expectedStart}.`
+        );
+
+        if (expectedStart >= this.progress.total.loaded) {
+            this.logger.info(`This whole chunk is overlapped, skipping...`);
+            this.updateChunkProgress(chunkInfo.chunk.size, chunkInfo.index);
+            return;
+        } else {
+            this.updateChunkProgress(0, chunkInfo.index);
+            const rangeEnd =
+                this.progress.total.loaded + chunkInfo.chunk.size - 1;
+            const newChunkOffset = expectedStart - this.progress.total.loaded;
+            chunkInfo.chunk = chunkInfo.chunk.slice(newChunkOffset);
+            this.updateChunkProgress(newChunkOffset, chunkInfo.index);
+            return this.sendRange(
+                chunkInfo,
+                expectedStart,
+                rangeEnd,
+                newChunkOffset
+            );
+        }
+    }
+
+    protected async afterUpload(): Promise<any> {
+        this.logger.info(`Finishing upload...`);
+        this.transit(Status.finishing);
+        return finishOneDriveUpload(
+            this.task.session!.sessionID,
+            this.cancelToken.token
+        );
+    }
+}
diff --git a/src/component/Uploader/core/uploader/oss.ts b/src/component/Uploader/core/uploader/oss.ts
new file mode 100644
index 0000000..305fd36
--- /dev/null
+++ b/src/component/Uploader/core/uploader/oss.ts
@@ -0,0 +1,27 @@
+import Chunk, { ChunkInfo } from "./chunk";
+import { s3LikeFinishUpload, s3LikeUploadChunk } from "../api";
+import { Status } from "./base";
+
+export default class OSS extends Chunk {
+    protected async uploadChunk(chunkInfo: ChunkInfo) {
+        return s3LikeUploadChunk(
+            this.task.session?.uploadURLs[chunkInfo.index]!,
+            chunkInfo,
+            (p) => {
+                this.updateChunkProgress(p.loaded, chunkInfo.index);
+            },
+            this.cancelToken.token
+        );
+    }
+
+    protected async afterUpload(): Promise<any> {
+        this.logger.info(`Finishing multipart upload...`);
+        this.transit(Status.finishing);
+        return s3LikeFinishUpload(
+            this.task.session!.completeURL,
+            true,
+            this.task.chunkProgress,
+            this.cancelToken.token
+        );
+    }
+}
diff --git a/src/component/Uploader/core/uploader/placeholder.ts b/src/component/Uploader/core/uploader/placeholder.ts
new file mode 100644
index 0000000..8821c5b
--- /dev/null
+++ b/src/component/Uploader/core/uploader/placeholder.ts
@@ -0,0 +1,24 @@
+import Chunk, { ChunkInfo } from "./chunk";
+import { qiniuDriveUploadChunk, qiniuFinishUpload } from "../api";
+import { Status } from "./base";
+import { Task } from "../types";
+import UploadManager from "../index";
+import * as utils from "../utils";
+
+export default class ResumeHint extends Chunk {
+    constructor(task: Task, manager: UploadManager) {
+        super(task, manager);
+        this.status = Status.resumable;
+        this.progress = {
+            total: this.getProgressInfoItem(
+                utils.sumChunk(this.task.chunkProgress),
+                this.task.size + 1
+            ),
+        };
+        this.subscriber.onProgress(this.progress);
+    }
+
+    protected async uploadChunk(chunkInfo: ChunkInfo) {
+        return null;
+    }
+}
diff --git a/src/component/Uploader/core/uploader/qiniu.ts b/src/component/Uploader/core/uploader/qiniu.ts
new file mode 100644
index 0000000..4b19dc5
--- /dev/null
+++ b/src/component/Uploader/core/uploader/qiniu.ts
@@ -0,0 +1,30 @@
+import Chunk, { ChunkInfo } from "./chunk";
+import { qiniuDriveUploadChunk, qiniuFinishUpload } from "../api";
+import { Status } from "./base";
+
+export default class Qiniu extends Chunk {
+    protected async uploadChunk(chunkInfo: ChunkInfo) {
+        const chunkRes = await qiniuDriveUploadChunk(
+            this.task.session?.uploadURLs[0]!,
+            this.task.session?.credential!,
+            chunkInfo,
+            (p) => {
+                this.updateChunkProgress(p.loaded, chunkInfo.index);
+            },
+            this.cancelToken.token
+        );
+
+        this.task.chunkProgress[chunkInfo.index].etag = chunkRes.etag;
+    }
+
+    protected async afterUpload(): Promise<any> {
+        this.logger.info(`Finishing multipart upload...`);
+        this.transit(Status.finishing);
+        return qiniuFinishUpload(
+            this.task.session?.uploadURLs[0]!,
+            this.task.session?.credential!,
+            this.task.chunkProgress,
+            this.cancelToken.token
+        );
+    }
+}
diff --git a/src/component/Uploader/core/uploader/remote.ts b/src/component/Uploader/core/uploader/remote.ts
new file mode 100644
index 0000000..8f13243
--- /dev/null
+++ b/src/component/Uploader/core/uploader/remote.ts
@@ -0,0 +1,16 @@
+import Chunk, { ChunkInfo } from "./chunk";
+import { slaveUploadChunk } from "../api";
+
+export default class Remote extends Chunk {
+    protected async uploadChunk(chunkInfo: ChunkInfo) {
+        return slaveUploadChunk(
+            `${this.task.session?.uploadURLs[0]!}`,
+            this.task.session?.credential!,
+            chunkInfo,
+            (p) => {
+                this.updateChunkProgress(p.loaded, chunkInfo.index);
+            },
+            this.cancelToken.token
+        );
+    }
+}
diff --git a/src/component/Uploader/core/uploader/s3.ts b/src/component/Uploader/core/uploader/s3.ts
new file mode 100644
index 0000000..4011628
--- /dev/null
+++ b/src/component/Uploader/core/uploader/s3.ts
@@ -0,0 +1,39 @@
+import Chunk, { ChunkInfo } from "./chunk";
+import {
+    s3LikeFinishUpload,
+    s3LikeUploadCallback,
+    s3LikeUploadChunk,
+} from "../api";
+import { Status } from "./base";
+
+export default class OSS extends Chunk {
+    protected async uploadChunk(chunkInfo: ChunkInfo) {
+        const etag = await s3LikeUploadChunk(
+            this.task.session?.uploadURLs[chunkInfo.index]!,
+            chunkInfo,
+            (p) => {
+                this.updateChunkProgress(p.loaded, chunkInfo.index);
+            },
+            this.cancelToken.token
+        );
+
+        this.task.chunkProgress[chunkInfo.index].etag = etag;
+    }
+
+    protected async afterUpload(): Promise<any> {
+        this.logger.info(`Finishing multipart upload...`);
+        this.transit(Status.finishing);
+        await s3LikeFinishUpload(
+            this.task.session!.completeURL,
+            false,
+            this.task.chunkProgress,
+            this.cancelToken.token
+        );
+
+        this.logger.info(`Sending S3-like upload callback...`);
+        return s3LikeUploadCallback(
+            this.task.session!.sessionID,
+            this.cancelToken.token
+        );
+    }
+}
diff --git a/src/component/Uploader/core/uploader/upyun.ts b/src/component/Uploader/core/uploader/upyun.ts
new file mode 100644
index 0000000..c72ee45
--- /dev/null
+++ b/src/component/Uploader/core/uploader/upyun.ts
@@ -0,0 +1,20 @@
+import Base from "./base";
+import { upyunFormUploadChunk } from "../api";
+
+export default class Upyun extends Base {
+    public upload = async () => {
+        this.logger.info("Starting uploading file stream:", this.task.file);
+        await upyunFormUploadChunk(
+            this.task.session?.uploadURLs[0]!,
+            this.task.file,
+            this.task.session?.policy!,
+            this.task.session?.credential!,
+            (p) => {
+                this.subscriber.onProgress({
+                    total: this.getProgressInfoItem(p.loaded, p.total),
+                });
+            },
+            this.cancelToken.token
+        );
+    };
+}
diff --git a/src/component/Uploader/core/utils/helper.ts b/src/component/Uploader/core/utils/helper.ts
new file mode 100644
index 0000000..a339043
--- /dev/null
+++ b/src/component/Uploader/core/utils/helper.ts
@@ -0,0 +1,320 @@
+import { Task } from "../types";
+import Logger from "../logger";
+import { UploaderError, UploaderErrorName } from "../errors";
+import { ChunkProgress } from "../uploader/chunk";
+
+export const sizeToString = (bytes: number): string => {
+    if (bytes === 0) return "0 B";
+    const k = 1024;
+    const sizes = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return (bytes / Math.pow(k, i)).toFixed(1) + " " + sizes[i];
+};
+
+// 文件分块
+export function getChunks(
+    file: File,
+    chunkByteSize: number | undefined
+): Blob[] {
+    // 如果 chunkByteSize 比文件大或为0，则直接取文件的大小
+    if (!chunkByteSize || chunkByteSize > file.size || chunkByteSize == 0) {
+        chunkByteSize = file.size;
+    }
+
+    const chunks: Blob[] = [];
+    const count = Math.ceil(file.size / chunkByteSize);
+    for (let i = 0; i < count; i++) {
+        const chunk = file.slice(
+            chunkByteSize * i,
+            i === count - 1 ? file.size : chunkByteSize * (i + 1)
+        );
+        chunks.push(chunk);
+    }
+
+    if (chunks.length == 0) {
+        chunks.push(file.slice(0));
+    }
+    return chunks;
+}
+
+export function sumChunk(list: ChunkProgress[]) {
+    return list.reduce((data, loaded) => data + loaded.loaded, 0);
+}
+
+const resumeKeyPrefix = "cd_upload_ctx_";
+
+function isTask(toBeDetermined: Task | string): toBeDetermined is Task {
+    return !!(toBeDetermined as Task).name;
+}
+
+export function getResumeCtxKey(task: Task | string): string {
+    if (isTask(task)) {
+        return `${resumeKeyPrefix}name_${task.name}_dst_${task.dst}_size_${task.size}_policy_${task.policy.id}`;
+    }
+
+    return task;
+}
+
+export function setResumeCtx(task: Task, logger: Logger) {
+    const ctxKey = getResumeCtxKey(task);
+    try {
+        localStorage.setItem(ctxKey, JSON.stringify(task));
+    } catch (err) {
+        logger.warn(
+            new UploaderError(
+                UploaderErrorName.WriteCtxFailed,
+                `setResumeCtx failed: ${ctxKey}`
+            )
+        );
+    }
+}
+
+export function removeResumeCtx(task: Task | string, logger: Logger) {
+    const ctxKey = getResumeCtxKey(task);
+    try {
+        localStorage.removeItem(ctxKey);
+    } catch (err) {
+        logger.warn(
+            new UploaderError(
+                UploaderErrorName.RemoveCtxFailed,
+                `removeResumeCtx failed. key: ${ctxKey}`
+            )
+        );
+    }
+}
+
+export function cleanupResumeCtx(logger: Logger) {
+    for (let i = 0; i < localStorage.length; i++) {
+        const key = localStorage.key(i);
+        if (key && key.startsWith(resumeKeyPrefix)) {
+            try {
+                localStorage.removeItem(key);
+            } catch (err) {
+                logger.warn(
+                    new UploaderError(
+                        UploaderErrorName.RemoveCtxFailed,
+                        `removeResumeCtx failed. key: ${key}`
+                    )
+                );
+            }
+        }
+    }
+}
+
+export function getResumeCtx(task: Task | string, logger: Logger): Task | null {
+    const ctxKey = getResumeCtxKey(task);
+    let localInfoString: string | null = null;
+    try {
+        localInfoString = localStorage.getItem(ctxKey);
+    } catch {
+        logger.warn(
+            new UploaderError(
+                UploaderErrorName.ReadCtxFailed,
+                `getResumeCtx failed. key: ${ctxKey}`
+            )
+        );
+    }
+
+    if (localInfoString == null) {
+        return null;
+    }
+
+    let localInfo: Task | null = null;
+    try {
+        localInfo = JSON.parse(localInfoString);
+    } catch {
+        // 本地信息已被破坏，直接删除
+        removeResumeCtx(task, logger);
+        logger.warn(
+            new UploaderError(
+                UploaderErrorName.InvalidCtxData,
+                `getResumeCtx failed to parse. key: ${ctxKey}`
+            )
+        );
+    }
+
+    if (
+        localInfo &&
+        localInfo.session &&
+        localInfo.session.expires < Math.floor(Date.now() / 1000)
+    ) {
+        removeResumeCtx(task, logger);
+        logger.warn(
+            new UploaderError(
+                UploaderErrorName.CtxExpired,
+                `upload session already expired at ${localInfo.session.expires}. key: ${ctxKey}`
+            )
+        );
+        return null;
+    }
+
+    return localInfo;
+}
+
+export function listResumeCtx(logger: Logger): Task[] {
+    const res: Task[] = [];
+    for (let i = 0, len = localStorage.length; i < len; i++) {
+        const key = localStorage.key(i);
+        if (key && key.startsWith(resumeKeyPrefix)) {
+            const value = getResumeCtx(key, logger);
+            if (value) {
+                res.push(value);
+            }
+        }
+    }
+
+    return res;
+}
+
+export function OBJtoXML(obj: any): string {
+    let xml = "";
+    for (const prop in obj) {
+        xml += "<" + prop + ">";
+        if (Array.isArray(obj[prop])) {
+            for (const array of obj[prop]) {
+                // A real botch fix here
+                xml += "</" + prop + ">";
+                xml += "<" + prop + ">";
+
+                xml += OBJtoXML(new Object(array));
+            }
+        } else if (typeof obj[prop] == "object") {
+            xml += OBJtoXML(new Object(obj[prop]));
+        } else {
+            xml += obj[prop];
+        }
+        xml += "</" + prop + ">";
+    }
+    return xml.replace(/<\/?[0-9]{1,}>/g, "");
+}
+
+export function getFileInput(id: number, isFolder: boolean): HTMLInputElement {
+    const input = document.createElement("input");
+    input.type = "file";
+    input.id = `upload-file-input-${id}`;
+    if (isFolder) {
+        input.id = `upload-folder-input-${id}`;
+        input.setAttribute("webkitdirectory", "true");
+        input.setAttribute("mozdirectory", "true");
+    } else {
+        input.id = `upload-file-input-${id}`;
+        input.multiple = true;
+    }
+    input.hidden = true;
+    document.body.appendChild(input);
+    return input;
+}
+
+export function pathJoin(parts: string[], sep = "/"): string {
+    parts = parts.map((part, index) => {
+        if (index) {
+            part = part.replace(new RegExp("^" + sep), "");
+        }
+        if (index !== parts.length - 1) {
+            part = part.replace(new RegExp(sep + "$"), "");
+        }
+        return part;
+    });
+    return parts.join(sep);
+}
+
+function basename(path: string): string {
+    const pathList = path.split("/");
+    pathList.pop();
+    return pathList.join("/") === "" ? "/" : pathList.join("/");
+}
+
+export function trimPrefix(src: string, prefix: string): string {
+    if (src.startsWith(prefix)) {
+        return src.slice(prefix.length);
+    }
+    return src;
+}
+
+export function getDirectoryUploadDst(dst: string, file: any): string {
+    let relPath = file.webkitRelativePath;
+    if (!relPath || relPath == "") {
+        relPath = file.fsPath;
+        if (!relPath || relPath == "") {
+            return dst;
+        }
+    }
+
+    relPath = trimPrefix(relPath, "/");
+
+    return basename(pathJoin([dst, relPath]));
+}
+
+// Wrap readEntries in a promise to make working with readEntries easier
+async function readEntriesPromise(directoryReader: any): Promise<any> {
+    try {
+        return await new Promise((resolve, reject) => {
+            directoryReader.readEntries(resolve, reject);
+        });
+    } catch (err) {
+        console.log(err);
+    }
+}
+
+async function readFilePromise(fileReader: any, path: string): Promise<any> {
+    try {
+        return await new Promise((resolve, reject) => {
+            fileReader.file((file: any) => {
+                file.fsPath = path;
+                resolve(file);
+            });
+        });
+    } catch (err) {
+        console.log(err);
+    }
+}
+
+// Get all the entries (files or sub-directories) in a directory by calling readEntries until it returns empty array
+async function readAllDirectoryEntries(directoryReader: any): Promise<any> {
+    const entries: any[] = [];
+    let readEntries = await readEntriesPromise(directoryReader);
+    while (readEntries.length > 0) {
+        entries.push(...readEntries);
+        readEntries = await readEntriesPromise(directoryReader);
+    }
+    return entries;
+}
+
+// Drop handler function to get all files
+export async function getAllFileEntries(
+    dataTransferItemList: DataTransferItemList
+): Promise<File[]> {
+    const fileEntries: any[] = [];
+    // Use BFS to traverse entire directory/file structure
+    const queue: any[] = [];
+    // Unfortunately dataTransferItemList is not iterable i.e. no forEach
+    for (let i = 0; i < dataTransferItemList.length; i++) {
+        const fileEntry = dataTransferItemList[i].webkitGetAsEntry();
+        if (!fileEntry) {
+            const file = dataTransferItemList[i].getAsFile();
+            if (file) {
+                fileEntries.push(file);
+            }
+        }
+
+        queue.push(dataTransferItemList[i].webkitGetAsEntry());
+    }
+    while (queue.length > 0) {
+        const entry = queue.shift();
+        if (!entry) {
+            continue;
+        }
+        if (entry.isFile) {
+            fileEntries.push(await readFilePromise(entry, entry.fullPath));
+        } else if (entry.isDirectory) {
+            const reader = entry.createReader();
+            const entries: any = await readAllDirectoryEntries(reader);
+            queue.push(...entries);
+        }
+    }
+    return fileEntries;
+}
+
+export function isFileDrop(e: DragEvent): boolean {
+    return !!e.dataTransfer && e.dataTransfer.types.includes("Files");
+}
diff --git a/src/component/Uploader/core/utils/index.ts b/src/component/Uploader/core/utils/index.ts
new file mode 100644
index 0000000..7ca10e3
--- /dev/null
+++ b/src/component/Uploader/core/utils/index.ts
@@ -0,0 +1,4 @@
+export * from "./pool";
+export * from "./helper";
+export * from "./validator";
+export * from "./request";
diff --git a/src/component/Uploader/core/utils/pool.ts b/src/component/Uploader/core/utils/pool.ts
new file mode 100644
index 0000000..3d000e2
--- /dev/null
+++ b/src/component/Uploader/core/utils/pool.ts
@@ -0,0 +1,67 @@
+import Base from "../uploader/base";
+import { ProcessingTaskDuplicatedError } from "../errors";
+
+export interface QueueContent {
+    uploader: Base;
+    resolve: () => void;
+    reject: (err?: any) => void;
+}
+
+export class Pool {
+    queue: Array<QueueContent> = [];
+    processing: Array<QueueContent> = [];
+
+    constructor(public limit: number) {}
+
+    enqueue(uploader: Base) {
+        return new Promise<void>((resolve, reject) => {
+            this.queue.push({
+                uploader,
+                resolve,
+                reject,
+            });
+            this.check();
+        });
+    }
+
+    release(item: QueueContent) {
+        this.processing = this.processing.filter((v) => v !== item);
+        this.check();
+    }
+
+    run(item: QueueContent) {
+        this.queue = this.queue.filter((v) => v !== item);
+        if (
+            this.processing.findIndex(
+                (v) =>
+                    v.uploader.task.dst == item.uploader.task.dst &&
+                    v.uploader.task.file.name == item.uploader.task.name
+            ) > -1
+        ) {
+            // 找到重名任务
+            item.reject(new ProcessingTaskDuplicatedError());
+            this.release(item);
+            return;
+        }
+
+        this.processing.push(item);
+        item.uploader.run().then(
+            () => {
+                item.resolve();
+                this.release(item);
+            },
+            (err) => {
+                item.reject(err);
+                this.release(item);
+            }
+        );
+    }
+
+    check() {
+        const processingNum = this.processing.length;
+        const availableNum = Math.max(0, this.limit - processingNum);
+        this.queue.slice(0, availableNum).forEach((item) => {
+            this.run(item);
+        });
+    }
+}
diff --git a/src/component/Uploader/core/utils/request.ts b/src/component/Uploader/core/utils/request.ts
new file mode 100644
index 0000000..17904b0
--- /dev/null
+++ b/src/component/Uploader/core/utils/request.ts
@@ -0,0 +1,46 @@
+import axios, { AxiosRequestConfig } from "axios";
+import { Response } from "../types";
+import {
+    HTTPError,
+    RequestCanceledError,
+    TransformResponseError,
+} from "../errors";
+
+export const { CancelToken } = axios;
+export { CancelTokenSource } from "axios";
+
+const baseConfig = {
+    transformResponse: [
+        (response: any) => {
+            try {
+                return JSON.parse(response);
+            } catch (e) {
+                throw new TransformResponseError(response, e);
+            }
+        },
+    ],
+};
+
+const cdBackendConfig = {
+    ...baseConfig,
+    baseURL: "/api/v3",
+    withCredentials: true,
+};
+
+export function request<T = any>(url: string, config?: AxiosRequestConfig) {
+    return axios.request<T>({ ...baseConfig, ...config, url }).catch((err) => {
+        if (axios.isCancel(err)) {
+            throw new RequestCanceledError();
+        }
+
+        if (err instanceof TransformResponseError) {
+            throw err;
+        }
+
+        throw new HTTPError(err, url);
+    });
+}
+
+export function requestAPI<T = any>(url: string, config?: AxiosRequestConfig) {
+    return request<Response<T>>(url, { ...cdBackendConfig, ...config });
+}
diff --git a/src/component/Uploader/core/utils/validator.ts b/src/component/Uploader/core/utils/validator.ts
new file mode 100644
index 0000000..6fb32e7
--- /dev/null
+++ b/src/component/Uploader/core/utils/validator.ts
@@ -0,0 +1,43 @@
+import { Policy } from "../types";
+import { FileValidateError } from "../errors";
+
+interface Validator {
+    (file: File, policy: Policy): void;
+}
+
+// validators
+const checkers: Array<Validator> = [
+    function checkExt(file: File, policy: Policy) {
+        if (
+            policy.allowedSuffix != undefined &&
+            policy.allowedSuffix.length > 0
+        ) {
+            const ext = file?.name.split(".").pop();
+            if (ext === null || !ext || !policy.allowedSuffix.includes(ext))
+                throw new FileValidateError(
+                    "File suffix not allowed in policy.",
+                    "suffix",
+                    policy
+                );
+        }
+    },
+
+    function checkSize(file: File, policy: Policy) {
+        if (policy.maxSize > 0) {
+            if (file.size > policy.maxSize) {
+                throw new FileValidateError(
+                    "File size exceeds maximum limit.",
+                    "size",
+                    policy
+                );
+            }
+        }
+    },
+];
+
+/* 将每个 Validator 执行
+   失败返回 Error
+ */
+export function validate(file: File, policy: Policy) {
+    checkers.forEach((c) => c(file, policy));
+}
diff --git a/src/component/VAS/BuyQuota.js b/src/component/VAS/BuyQuota.js
new file mode 100644
index 0000000..d0c231c
--- /dev/null
+++ b/src/component/VAS/BuyQuota.js
@@ -0,0 +1,978 @@
+import React, { Component } from "react";
+import { connect } from "react-redux";
+import SdStorage from "@material-ui/icons/SdStorage";
+import ShopIcon from "@material-ui/icons/ShoppingCart";
+import PackSelect from "./PackSelect";
+import SupervisedUserCircle from "@material-ui/icons/SupervisedUserCircle";
+import StarIcon from "@material-ui/icons/StarBorder";
+import LocalPlay from "@material-ui/icons/LocalPlay";
+import API from "../../middleware/Api";
+
+import {
+    AppBar,
+    Button,
+    Card,
+    CardActions,
+    CardContent,
+    CardHeader,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogContentText,
+    DialogTitle,
+    Grid,
+    Paper,
+    Tab,
+    Tabs,
+    TextField,
+    Typography,
+    withStyles,
+} from "@material-ui/core";
+import RadioGroup from "@material-ui/core/RadioGroup";
+import FormLabel from "@material-ui/core/FormLabel";
+import FormControlLabel from "@material-ui/core/FormControlLabel";
+import Radio from "@material-ui/core/Radio";
+import { AccountBalanceWallet } from "@material-ui/icons";
+import { withRouter } from "react-router";
+import { toggleSnackbar } from "../../redux/explorer";
+import { withTranslation } from "react-i18next";
+import PaymentDialog from "./PaymentDialog";
+
+const styles = (theme) => ({
+    layout: {
+        width: "auto",
+        marginTop: "50px",
+        marginLeft: theme.spacing(3),
+        marginRight: theme.spacing(3),
+        [theme.breakpoints.up(1100 + theme.spacing(3) * 2)]: {
+            width: 1100,
+            marginLeft: "auto",
+            marginRight: "auto",
+        },
+        marginBottom: "50px",
+    },
+
+    gird: {
+        marginTop: "30px",
+    },
+    paper: {
+        padding: theme.spacing(2),
+        color: theme.palette.text.secondary,
+    },
+    title: {
+        marginTop: "30px",
+        marginBottom: "30px",
+    },
+    button: {
+        margin: theme.spacing(1),
+    },
+    action: {
+        textAlign: "right",
+        marginTop: "20px",
+    },
+    textField: {
+        marginLeft: theme.spacing(1),
+        marginRight: theme.spacing(1),
+        width: 70,
+        textAlign: "center!important",
+    },
+    priceShow: {
+        color: theme.palette.secondary.main,
+        fontSize: "30px",
+    },
+    cardHeader: {
+        backgroundColor:
+            theme.palette.type === "dark"
+                ? theme.palette.background.default
+                : theme.palette.grey[200],
+    },
+    cardPricing: {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "baseline",
+        marginBottom: theme.spacing(2),
+    },
+    cardActions: {
+        [theme.breakpoints.up("sm")]: {
+            paddingBottom: theme.spacing(2),
+        },
+    },
+    redeemContainer: {
+        [theme.breakpoints.up("sm")]: {
+            marginLeft: "50px",
+            marginRight: "50px",
+            width: "auto",
+        },
+        marginTop: "50px",
+        marginBottom: "50px",
+    },
+    doRedeem: {
+        textAlign: "right",
+    },
+    payMethod: {
+        marginTop: theme.spacing(4),
+        padding: theme.spacing(2),
+    },
+});
+const mapStateToProps = () => {
+    return {};
+};
+
+const mapDispatchToProps = (dispatch) => {
+    return {
+        toggleSnackbar: (vertical, horizontal, msg, color) => {
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color));
+        },
+    };
+};
+
+class BuyQuotaCompoment extends Component {
+    IntervalId = null;
+    constructor(props) {
+        super(props);
+
+        const tab = new URLSearchParams(this.props.location.search);
+        const index = tab.get("tab");
+
+        this.state = {
+            value: index ? parseInt(index) : 0,
+            selectedPack: -1,
+            selectedGroup: -1,
+            times: 1,
+            scoreNum: 1,
+            loading: false,
+            redeemCode: "",
+            dialog: null,
+            payment: {
+                type: "",
+                img: "",
+            },
+            scorePrice: 0,
+            redeemInfo: null,
+            packs: [],
+            groups: [],
+            alipay: false,
+            payjs: false,
+            wechat: false,
+            packPayMethod: null,
+        };
+    }
+
+    componentWillUnmount() {
+        window.clearInterval(this.IntervalId);
+    }
+
+    componentDidMount() {
+        API.get("/vas/product")
+            .then((response) => {
+                this.setState({
+                    packs: response.data.packs,
+                    groups: response.data.groups,
+                    alipay: response.data.alipay,
+                    payjs: response.data.payjs,
+                    wechat: response.data.wechat,
+                    custom: response.data.custom
+                        ? response.data.custom_name
+                        : null,
+                    scorePrice: response.data.score_price,
+                });
+            })
+            .catch((error) => {
+                this.setState({
+                    loading: false,
+                });
+                this.props.toggleSnackbar(
+                    "top",
+                    "right",
+                    error.message,
+                    "error"
+                );
+            });
+    }
+
+    confirmRedeem = () => {
+        this.setState({
+            loading: true,
+        });
+        API.post("/vas/redeem/" + this.state.redeemCode)
+            .then(() => {
+                this.setState({
+                    loading: false,
+                    dialog: "success",
+                });
+            })
+            .catch((error) => {
+                this.setState({
+                    loading: false,
+                });
+                this.props.toggleSnackbar(
+                    "top",
+                    "right",
+                    error.message,
+                    "error"
+                );
+            });
+    };
+
+    doRedeem = () => {
+        if (this.state.redeemCode === "") {
+            this.props.toggleSnackbar(
+                "top",
+                "right",
+                this.props.t("vas.pleaseInputGiftCode"),
+                "warning"
+            );
+            return;
+        }
+        this.setState({
+            loading: true,
+        });
+        API.get("/vas/redeem/" + this.state.redeemCode)
+            .then((response) => {
+                this.setState({
+                    loading: false,
+                    dialog: "redeem",
+                    redeemInfo: response.data,
+                });
+            })
+            .catch((error) => {
+                this.setState({
+                    loading: false,
+                });
+                this.props.toggleSnackbar(
+                    "top",
+                    "right",
+                    error.message,
+                    "error"
+                );
+            });
+    };
+
+    buyPack = (packType) => {
+        if (packType === "pack" && this.state.selectedPack === -1) {
+            this.props.toggleSnackbar(
+                "top",
+                "right",
+                this.props.t("vas.pleaseSelectAStoragePack"),
+                "warning"
+            );
+            return;
+        }
+        this.setState({
+            loading: true,
+        });
+        API.post("/vas/order", {
+            action: packType,
+            method: this.state.packPayMethod,
+            id:
+                packType === "score"
+                    ? 1
+                    : packType === "pack"
+                    ? this.state.packs[this.state.selectedPack].id
+                    : this.state.groups[this.state.selectedGroup].id,
+            num:
+                packType === "score"
+                    ? parseInt(this.state.scoreNum)
+                    : parseInt(this.state.times),
+        })
+            .then((response) => {
+                if (!response.data.payment) {
+                    this.setState({
+                        loading: false,
+                        dialog: "success",
+                    });
+                    return;
+                }
+                if (response.data.qr_code) {
+                    this.setState({
+                        loading: false,
+                        dialog: "qr",
+                        payment: {
+                            type: this.state.packPayMethod,
+                            img: response.data.qr_code,
+                        },
+                    });
+                    this.IntervalId = window.setInterval(() => {
+                        this.querryLoop(response.data.id);
+                    }, 3000);
+                }
+            })
+            .catch((error) => {
+                this.setState({
+                    loading: false,
+                });
+                this.props.toggleSnackbar(
+                    "top",
+                    "right",
+                    error.message,
+                    "error"
+                );
+            });
+    };
+
+    querryLoop = (id) => {
+        API.get("/vas/order/" + id)
+            .then((response) => {
+                if (response.data === 1) {
+                    this.setState({
+                        dialog: "success",
+                    });
+                    window.clearInterval(this.IntervalId);
+                }
+            })
+            .catch((error) => {
+                this.props.toggleSnackbar(
+                    "top",
+                    "right",
+                    error.message,
+                    "error"
+                );
+                window.clearInterval(this.IntervalId);
+            });
+    };
+
+    handleChange = (event, value) => {
+        this.setState({
+            packPayMethod:
+                this.state.packPayMethod === "score"
+                    ? null
+                    : this.state.packPayMethod,
+        });
+        this.setState({ value });
+    };
+
+    handleChangeIndex = (index) => {
+        this.setState({ value: index });
+    };
+
+    handleClose = () => {
+        window.clearInterval(this.IntervalId);
+        this.setState({
+            dialog: null,
+        });
+    };
+
+    handleTexyChange = (name) => (event) => {
+        this.setState({ [name]: event.target.value });
+    };
+
+    selectPack = (id) => {
+        this.setState({
+            selectedPack: id,
+            packPayMethod:
+                this.state.packPayMethod === "score"
+                    ? null
+                    : this.state.packPayMethod,
+        });
+    };
+
+    selectGroup = (id) => {
+        this.setState({
+            selectedGroup: id,
+            dialog: "buyGroup",
+            packPayMethod:
+                this.state.packPayMethod === "score"
+                    ? null
+                    : this.state.packPayMethod,
+        });
+    };
+
+    selectPackPayMethod = (event) => {
+        this.setState({
+            packPayMethod: event.target.value,
+        });
+    };
+
+    render() {
+        const { classes, t } = this.props;
+
+        const methodSelect = (
+            <div>
+                <FormLabel>{t("vas.selectPaymentMethod")}</FormLabel>
+                <RadioGroup
+                    name="spacing"
+                    aria-label="spacing"
+                    value={this.state.packPayMethod}
+                    onChange={this.selectPackPayMethod}
+                    row
+                >
+                    {!this.state.alipay &&
+                        !this.state.payjs &&
+                        this.state.value === 0 &&
+                        (this.state.selectedPack === -1 ||
+                            this.state.packs[this.state.selectedPack].score ===
+                                0) &&
+                        this.state.value === 1 &&
+                        (this.state.selectedGroup === -1 ||
+                            this.state.groups[this.state.selectedGroup]
+                                .score === 0) && (
+                            <Typography>
+                                {t("vas.noAvailableMethod")}
+                            </Typography>
+                        )}
+                    {this.state.alipay && (
+                        <FormControlLabel
+                            value={"alipay"}
+                            control={<Radio />}
+                            label={t("vas.alipay")}
+                        />
+                    )}
+                    {this.state.payjs && (
+                        <FormControlLabel
+                            value={"payjs"}
+                            control={<Radio />}
+                            label={t("vas.wechatPay")}
+                        />
+                    )}
+                    {this.state.wechat && (
+                        <FormControlLabel
+                            value={"wechat"}
+                            control={<Radio />}
+                            label={t("vas.wechatPay")}
+                        />
+                    )}
+                    {this.state.custom && (
+                        <FormControlLabel
+                            value={"custom"}
+                            control={<Radio />}
+                            label={this.state.custom}
+                        />
+                    )}
+                    {this.state.value === 0 &&
+                        this.state.selectedPack !== -1 &&
+                        this.state.packs[this.state.selectedPack].score !==
+                            0 && (
+                            <FormControlLabel
+                                value={"score"}
+                                control={<Radio />}
+                                label={t("vas.payByCredits")}
+                            />
+                        )}
+                    {this.state.value === 1 &&
+                        this.state.selectedGroup !== -1 &&
+                        this.state.groups[this.state.selectedGroup].score !==
+                            0 && (
+                            <FormControlLabel
+                                value={"score"}
+                                control={<Radio />}
+                                label={t("vas.payByCredits")}
+                            />
+                        )}
+                </RadioGroup>
+                <div>
+                    {this.state.value !== 2 && (
+                        <FormLabel>{t("vas.purchaseDuration")}</FormLabel>
+                    )}
+                    {this.state.value === 2 && (
+                        <FormLabel>{t("vas.creditsNum")}</FormLabel>
+                    )}
+                </div>
+                {this.state.value !== 2 && (
+                    <TextField
+                        className={classes.textField}
+                        type="number"
+                        inputProps={{
+                            min: "1",
+                            max: "99",
+                            step: "1",
+                        }}
+                        value={this.state.times}
+                        onChange={this.handleTexyChange("times")}
+                    />
+                )}
+                {this.state.value === 2 && (
+                    <TextField
+                        className={classes.textField}
+                        type="number"
+                        inputProps={{
+                            min: "1",
+                            step: "1",
+                            max: "9999999",
+                        }}
+                        value={this.state.scoreNum}
+                        onChange={this.handleTexyChange("scoreNum")}
+                    />
+                )}
+            </div>
+        );
+
+        return (
+            <div className={classes.layout}>
+                <Typography
+                    color="textSecondary"
+                    className={classes.title}
+                    variant="h3"
+                >
+                    {t("vas.store")}
+                </Typography>
+                <AppBar position="static">
+                    <Tabs
+                        value={this.state.value}
+                        onChange={this.handleChange}
+                        variant="fullWidth"
+                    >
+                        <Tab
+                            label={t("vas.storagePacks")}
+                            icon={<SdStorage />}
+                        />
+                        <Tab
+                            label={t("vas.membership")}
+                            icon={<SupervisedUserCircle />}
+                        />
+                        {this.state.scorePrice > 0 && (
+                            <Tab
+                                label={t("vas.buyCredits")}
+                                icon={<AccountBalanceWallet />}
+                            />
+                        )}
+                        <Tab
+                            label={t("vas.useGiftCode")}
+                            icon={<LocalPlay />}
+                        />
+                    </Tabs>
+                </AppBar>
+                {this.state.value === 0 && (
+                    <Paper className={classes.paper} square={true}>
+                        <Grid container spacing={3}>
+                            {this.state.packs.map((value, id) => (
+                                <Grid item xs={12} md={3} key={id}>
+                                    <PackSelect
+                                        pack={value}
+                                        onSelect={() => this.selectPack(id)}
+                                        active={this.state.selectedPack === id}
+                                    />
+                                </Grid>
+                            ))}
+                        </Grid>
+                        <Grid
+                            container
+                            className={classes.payMethod}
+                            spacing={1}
+                        >
+                            <Grid sm={6} xs={12}>
+                                {methodSelect}
+                            </Grid>
+                            <Grid sm={6} xs={12}>
+                                <div className={classes.action}>
+                                    <div>
+                                        {t("vas.subtotal")}
+                                        {this.state.packPayMethod !==
+                                            "score" && (
+                                            <span className={classes.priceShow}>
+                                                ￥
+                                                {this.state.selectedPack ===
+                                                    -1 && <span>--</span>}
+                                                {this.state.selectedPack !==
+                                                    -1 &&
+                                                    this.state.times <= 99 &&
+                                                    this.state.times >= 1 && (
+                                                        <span>
+                                                            {(
+                                                                (this.state
+                                                                    .packs[
+                                                                    this.state
+                                                                        .selectedPack
+                                                                ].price /
+                                                                    100) *
+                                                                this.state.times
+                                                            ).toFixed(2)}
+                                                        </span>
+                                                    )}
+                                            </span>
+                                        )}
+                                        {this.state.packPayMethod ===
+                                            "score" && (
+                                            <span className={classes.priceShow}>
+                                                {this.state.selectedPack ===
+                                                    -1 && <span>--</span>}
+                                                {this.state.selectedPack !==
+                                                    -1 &&
+                                                    this.state.times <= 99 &&
+                                                    this.state.times >= 1 && (
+                                                        <span>
+                                                            {t(
+                                                                "vas.creditsTotalNum",
+                                                                {
+                                                                    num:
+                                                                        this
+                                                                            .state
+                                                                            .packs[
+                                                                            this
+                                                                                .state
+                                                                                .selectedPack
+                                                                        ]
+                                                                            .score *
+                                                                        this
+                                                                            .state
+                                                                            .times,
+                                                                }
+                                                            )}
+                                                        </span>
+                                                    )}
+                                            </span>
+                                        )}
+                                    </div>
+                                    <div>
+                                        <Button
+                                            size="large"
+                                            variant="contained"
+                                            color="secondary"
+                                            className={classes.button}
+                                            disabled={
+                                                this.state.loading ||
+                                                this.state.packPayMethod ===
+                                                    null
+                                            }
+                                            onClick={() => this.buyPack("pack")}
+                                        >
+                                            <ShopIcon /> {t("vas.checkoutNow")}
+                                        </Button>
+                                    </div>
+                                </div>
+                            </Grid>
+                        </Grid>
+                    </Paper>
+                )}
+                {this.state.value === 1 && (
+                    <Paper className={classes.paper} square={true}>
+                        <Grid container spacing={5} alignItems="flex-end">
+                            {this.state.groups.map((tier, id) => (
+                                // Enterprise card is full width at sm breakpoint
+                                <Grid item key={id} xs={12} sm={6} md={4}>
+                                    <Card>
+                                        <CardHeader
+                                            title={tier.name}
+                                            subheader={
+                                                tier.highlight
+                                                    ? t("vas.recommended")
+                                                    : null
+                                            }
+                                            titleTypographyProps={{
+                                                align: "center",
+                                            }}
+                                            subheaderTypographyProps={{
+                                                align: "center",
+                                            }}
+                                            action={
+                                                tier.highlight ? (
+                                                    <StarIcon />
+                                                ) : null
+                                            }
+                                            className={classes.cardHeader}
+                                        />
+                                        <CardContent>
+                                            <div
+                                                className={classes.cardPricing}
+                                            >
+                                                <Typography
+                                                    component="h2"
+                                                    variant="h3"
+                                                    color="textPrimary"
+                                                >
+                                                    ￥{tier.price / 100}
+                                                </Typography>
+                                                <Typography
+                                                    variant="h6"
+                                                    color="textSecondary"
+                                                >
+                                                    /
+                                                    {t("vas.days", {
+                                                        num: Math.ceil(
+                                                            tier.time / 86400
+                                                        ),
+                                                    })}
+                                                </Typography>
+                                            </div>
+                                            {tier.des.map((line) => (
+                                                <Typography
+                                                    variant="subtitle1"
+                                                    align="center"
+                                                    key={line}
+                                                >
+                                                    {line}
+                                                </Typography>
+                                            ))}
+                                        </CardContent>
+                                        <CardActions
+                                            className={classes.cardActions}
+                                        >
+                                            <Button
+                                                fullWidth
+                                                variant={
+                                                    tier.highlight
+                                                        ? "contained"
+                                                        : "outlined"
+                                                }
+                                                color="primary"
+                                                onClick={() =>
+                                                    this.selectGroup(id)
+                                                }
+                                            >
+                                                {t("vas.checkoutNow")}
+                                            </Button>
+                                        </CardActions>
+                                    </Card>
+                                </Grid>
+                            ))}
+                        </Grid>
+                    </Paper>
+                )}
+
+                {this.state.value === 2 && (
+                    <Paper className={classes.paper} square={true}>
+                        <Grid
+                            container
+                            className={classes.payMethod}
+                            spacing={1}
+                        >
+                            <Grid sm={6} xs={12}>
+                                {methodSelect}
+                            </Grid>
+                            <Grid sm={6} xs={12}>
+                                <div className={classes.action}>
+                                    <div>
+                                        {t("vas.subtotal")}
+                                        {this.state.packPayMethod !==
+                                            "score" && (
+                                            <span className={classes.priceShow}>
+                                                ￥
+                                                <span>
+                                                    {(
+                                                        (this.state.scorePrice /
+                                                            100) *
+                                                        this.state.scoreNum
+                                                    ).toFixed(2)}
+                                                </span>
+                                            </span>
+                                        )}
+                                    </div>
+                                    <div>
+                                        <Button
+                                            size="large"
+                                            variant="contained"
+                                            color="secondary"
+                                            className={classes.button}
+                                            disabled={
+                                                this.state.loading ||
+                                                this.state.packPayMethod ===
+                                                    null
+                                            }
+                                            onClick={() =>
+                                                this.buyPack("score")
+                                            }
+                                        >
+                                            <ShopIcon /> {t("vas.checkoutNow")}
+                                        </Button>
+                                    </div>
+                                </div>
+                            </Grid>
+                        </Grid>
+                    </Paper>
+                )}
+
+                {this.state.value === 3 && (
+                    <Paper className={classes.paper} square={true}>
+                        <div className={classes.redeemContainer}>
+                            <TextField
+                                id="standard-name"
+                                label={t("vas.enterGiftCode")}
+                                value={this.state.redeemCode}
+                                onChange={this.handleTexyChange("redeemCode")}
+                                margin="normal"
+                                inputProps={{
+                                    style: { textTransform: "uppercase" },
+                                }}
+                                fullWidth
+                            />
+                            <div className={classes.doRedeem}>
+                                <Button
+                                    size="large"
+                                    variant="contained"
+                                    color="secondary"
+                                    className={classes.button}
+                                    disabled={this.state.loading}
+                                    onClick={this.doRedeem}
+                                >
+                                    {t("login.continue")}
+                                </Button>
+                            </div>
+                        </div>
+                    </Paper>
+                )}
+                <PaymentDialog
+                    open={this.state.dialog === "qr"}
+                    payment={this.state.payment}
+                    handleClose={this.handleClose}
+                />
+
+                <Dialog
+                    open={this.state.dialog === "success"}
+                    onClose={this.handleClose}
+                    aria-labelledby="alert-dialog-title"
+                    aria-describedby="alert-dialog-description"
+                >
+                    <DialogTitle id="alert-dialog-title">
+                        {t("vas.paymentCompleted")}
+                    </DialogTitle>
+                    <DialogContent>
+                        <DialogContentText id="alert-dialog-description">
+                            {t("vas.productDelivered")}
+                        </DialogContentText>
+                    </DialogContent>
+                    <DialogActions>
+                        <Button onClick={this.handleClose} color="primary">
+                            {t("close", { ns: "common" })}
+                        </Button>
+                    </DialogActions>
+                </Dialog>
+
+                <Dialog
+                    open={this.state.dialog === "redeem"}
+                    onClose={this.handleClose}
+                    aria-labelledby="alert-dialog-title"
+                    aria-describedby="alert-dialog-description"
+                >
+                    <DialogTitle id="alert-dialog-title">
+                        {t("vas.confirmRedeem")}
+                    </DialogTitle>
+                    <DialogContent>
+                        {this.state.redeemInfo !== null && (
+                            <DialogContentText id="alert-dialog-description">
+                                <Typography variant="subtitle1">
+                                    {t("vas.productName")}
+                                </Typography>
+                                <Typography>
+                                    {this.state.redeemInfo.name}
+                                </Typography>
+                                <Typography variant="subtitle1">
+                                    {this.state.redeemInfo.type === 2
+                                        ? t("vas.qyt")
+                                        : t("vas.duration")}
+                                </Typography>
+                                <Typography>
+                                    {this.state.redeemInfo.type === 2 && (
+                                        <>{this.state.redeemInfo.num}</>
+                                    )}
+                                    {this.state.redeemInfo.type !== 2 && (
+                                        <>
+                                            {t("vas.days", {
+                                                num:
+                                                    Math.ceil(
+                                                        this.state.redeemInfo
+                                                            .time / 86400
+                                                    ) *
+                                                    this.state.redeemInfo.num,
+                                            })}
+                                        </>
+                                    )}
+                                </Typography>
+                            </DialogContentText>
+                        )}
+                    </DialogContent>
+                    <DialogActions>
+                        <Button onClick={this.handleClose}>
+                            {t("cancel", { ns: "common" })}
+                        </Button>
+                        <Button
+                            onClick={this.confirmRedeem}
+                            color="primary"
+                            disabled={this.state.loading}
+                        >
+                            {t("vas.confirmRedeem")}
+                        </Button>
+                    </DialogActions>
+                </Dialog>
+
+                <Dialog
+                    open={this.state.dialog === "buyGroup"}
+                    onClose={this.handleClose}
+                    aria-labelledby="alert-dialog-title"
+                    aria-describedby="alert-dialog-description"
+                >
+                    <DialogTitle id="alert-dialog-title">
+                        {t("vas.subscribe")}
+                    </DialogTitle>
+                    <DialogContent>
+                        <DialogContentText id="alert-dialog-description">
+                            {t("vas.selected")}
+                            {this.state.selectedGroup !== -1 &&
+                                this.state.groups[this.state.selectedGroup]
+                                    .name}
+                        </DialogContentText>
+                        {methodSelect}
+                        <div>
+                            {t("vas.subtotal")}
+                            {this.state.packPayMethod !== "score" && (
+                                <span className={classes.priceShow}>
+                                    ￥
+                                    {this.state.selectedGroup === -1 && (
+                                        <span>--</span>
+                                    )}
+                                    {this.state.selectedGroup !== -1 &&
+                                        this.state.times <= 99 &&
+                                        this.state.times >= 1 && (
+                                            <span>
+                                                {(
+                                                    (this.state.groups[
+                                                        this.state.selectedGroup
+                                                    ].price /
+                                                        100) *
+                                                    this.state.times
+                                                ).toFixed(2)}
+                                            </span>
+                                        )}
+                                </span>
+                            )}
+                            {this.state.packPayMethod === "score" && (
+                                <span className={classes.priceShow}>
+                                    {this.state.selectedGroup === -1 && (
+                                        <span>--</span>
+                                    )}
+                                    {this.state.selectedGroup !== -1 &&
+                                        this.state.times <= 99 &&
+                                        this.state.times >= 1 && (
+                                            <span>
+                                                {t("vas.creditsTotalNum", {
+                                                    num:
+                                                        this.state.groups[
+                                                            this.state
+                                                                .selectedGroup
+                                                        ].score *
+                                                        this.state.times,
+                                                })}
+                                            </span>
+                                        )}
+                                </span>
+                            )}
+                        </div>
+                    </DialogContent>
+                    <DialogActions>
+                        <Button
+                            onClick={this.handleClose}
+                            disabled={this.state.loading}
+                        >
+                            {t("cancel", { ns: "common" })}
+                        </Button>
+                        <Button
+                            disabled={
+                                this.state.loading ||
+                                this.state.packPayMethod === null
+                            }
+                            onClick={() => this.buyPack("group")}
+                            color="primary"
+                        >
+                            {t("vas.checkoutNow")}
+                        </Button>
+                    </DialogActions>
+                </Dialog>
+            </div>
+        );
+    }
+}
+
+const BuyQuota = connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(withStyles(styles)(withRouter(withTranslation()(BuyQuotaCompoment))));
+
+export default BuyQuota;
diff --git a/src/component/VAS/PackSelect.js b/src/component/VAS/PackSelect.js
new file mode 100644
index 0000000..e573f82
--- /dev/null
+++ b/src/component/VAS/PackSelect.js
@@ -0,0 +1,90 @@
+import React, { Component } from "react";
+import classNames from "classnames";
+import { ButtonBase, Typography, withStyles } from "@material-ui/core";
+import { withTranslation } from "react-i18next";
+
+const styles = (theme) => ({
+    container: {
+        boxShadow: "0 0 0 1px #e6e9eb",
+        borderRadius: theme.shape.borderRadius,
+        transition: "box-shadow .5s",
+        width: "100%",
+        display: "block",
+    },
+    active: {
+        boxShadow: "0 0 0 3px " + theme.palette.primary.main,
+    },
+    boxHead: {
+        textAlign: "center",
+        padding: "10px 10px 10px",
+        borderBottom: "1px solid #e6e9eb",
+        color: theme.palette.text.main,
+        width: "100%",
+    },
+    price: {
+        fontSize: "33px",
+        fontWeight: "500",
+        lineHeight: "40px",
+        color: theme.palette.primary.main,
+    },
+    priceWithScore: {
+        fontSize: "23px",
+        fontWeight: "500",
+        lineHeight: "40px",
+        color: theme.palette.primary.main,
+    },
+    packName: {
+        marginTop: "5px",
+        marginBottom: "5px",
+    },
+    boxBottom: {
+        color: theme.palette.text.main,
+        textAlign: "center",
+        padding: "5px",
+    },
+});
+
+class PackSelect extends Component {
+    render() {
+        const { classes, pack, t } = this.props;
+        return (
+            <ButtonBase
+                className={classNames(classes.container, {
+                    [classes.active]: this.props.active,
+                })}
+                onClick={this.props.onSelect}
+            >
+                <div className={classes.boxHead}>
+                    <Typography
+                        variant="subtitle1"
+                        className={classes.packName}
+                    >
+                        {pack.name}
+                    </Typography>
+                    {pack.score === 0 && (
+                        <Typography className={classes.price}>
+                            ￥{(pack.price / 100).toFixed(2)}
+                        </Typography>
+                    )}
+                    {pack.score !== 0 && (
+                        <Typography className={classes.priceWithScore}>
+                            ￥{(pack.price / 100).toFixed(2)} /
+                            {t("vas.creditsTotalNum", {
+                                num: pack.score,
+                            })}
+                        </Typography>
+                    )}
+                </div>
+                <div className={classes.boxBottom}>
+                    <Typography>
+                        {t("vas.validDurationDays", {
+                            num: Math.ceil(pack.time / 86400),
+                        })}
+                    </Typography>
+                </div>
+            </ButtonBase>
+        );
+    }
+}
+
+export default withStyles(styles)(withTranslation()(PackSelect));
diff --git a/src/component/VAS/PaymentDialog.js b/src/component/VAS/PaymentDialog.js
new file mode 100644
index 0000000..769bd9e
--- /dev/null
+++ b/src/component/VAS/PaymentDialog.js
@@ -0,0 +1,55 @@
+import React from "react";
+import {
+    Button,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogContentText,
+    DialogTitle,
+    makeStyles,
+} from "@material-ui/core";
+import { QRCodeSVG } from "qrcode.react";
+import { useTranslation } from "react-i18next";
+
+const useStyles = makeStyles((theme) => ({
+    codeContainer: {
+        textAlign: "center",
+        marginTop: "20px",
+    },
+}));
+
+export default function PaymentDialog({ open, handleClose, payment }) {
+    const classes = useStyles();
+    const { t } = useTranslation();
+
+    return (
+        <Dialog
+            open={open}
+            onClose={handleClose}
+            aria-labelledby="alert-dialog-title"
+            aria-describedby="alert-dialog-description"
+        >
+            <DialogTitle id="alert-dialog-title">
+                {t("vas.paymentQrcode")}
+            </DialogTitle>
+            <DialogContent>
+                <DialogContentText id="alert-dialog-description">
+                    {payment.type === "alipay" && t("vas.qrcodeAlipay")}
+                    {payment.type === "payjs" && t("vas.qrcodeWechat")}
+                    {payment.type === "custom" && t("vas.qrcodeCustom")}
+                </DialogContentText>
+                <div className={classes.codeContainer}>
+                    <QRCodeSVG value={payment.img} />,
+                </div>
+            </DialogContent>
+            <DialogActions>
+                <Button onClick={() => window.open(payment.img)}>
+                    {t("vas.openPaymentLink")}
+                </Button>
+                <Button onClick={handleClose} color="primary">
+                    {t("close", { ns: "common" })}
+                </Button>
+            </DialogActions>
+        </Dialog>
+    );
+}
diff --git a/src/component/VAS/Quota.js b/src/component/VAS/Quota.js
new file mode 100644
index 0000000..35a122f
--- /dev/null
+++ b/src/component/VAS/Quota.js
@@ -0,0 +1,349 @@
+import React, { Component } from "react";
+import { connect } from "react-redux";
+import classNames from "classnames";
+import API from "../../middleware/Api";
+
+import {
+    Button,
+    Grid,
+    Paper,
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableRow,
+    Typography,
+    withStyles,
+} from "@material-ui/core";
+import { sizeToString } from "../../utils";
+import { withRouter } from "react-router";
+import { formatLocalTime } from "../../utils/datetime";
+import { toggleSnackbar } from "../../redux/explorer";
+import Nothing from "../Placeholder/Nothing";
+import { withTranslation } from "react-i18next";
+
+const styles = (theme) => ({
+    layout: {
+        width: "auto",
+        marginTop: "50px",
+        marginLeft: theme.spacing(3),
+        marginRight: theme.spacing(3),
+        [theme.breakpoints.up(1100 + theme.spacing(3) * 2)]: {
+            width: 1100,
+            marginLeft: "auto",
+            marginRight: "auto",
+        },
+        marginBottom: "50px",
+    },
+
+    gird: {
+        marginTop: "30px",
+    },
+    paper: {
+        padding: theme.spacing(2),
+        color: theme.palette.text.secondary,
+    },
+    data: {
+        fontSize: "25px",
+        color: theme.palette.primary.main,
+    },
+    proBar: {
+        height: "10px",
+    },
+    r1: {
+        backgroundColor: "#f0ad4e",
+        transition: "width .6s ease",
+        height: "100%",
+        fontSize: "12px",
+        lineHeight: "20px",
+        float: "left",
+    },
+    r2: {
+        backgroundColor: "#4caf50",
+        transition: "width .6s ease",
+        height: "100%",
+        fontSize: "12px",
+        lineHeight: "20px",
+        float: "left",
+    },
+    r3: {
+        backgroundColor: "#5bc0de",
+        transition: "width .6s ease",
+        height: "100%",
+        fontSize: "12px",
+        lineHeight: "20px",
+        float: "left",
+    },
+    note_block: {
+        width: "10px",
+        height: "10px",
+        display: "inline-block",
+        position: "relative",
+        marginLeft: "10px",
+        marginRight: "3px",
+    },
+    r1_block: {
+        backgroundColor: "#f0ad4e",
+    },
+    r2_block: {
+        backgroundColor: "#4caf50",
+    },
+    r3_block: {
+        backgroundColor: "#5bc0de",
+    },
+    title: {
+        marginTop: "30px",
+        marginBottom: "30px",
+    },
+    button: {
+        margin: theme.spacing(1),
+    },
+    table: {
+        overflowX: "auto",
+    },
+});
+const mapStateToProps = () => {
+    return {};
+};
+
+const mapDispatchToProps = (dispatch) => {
+    return {
+        toggleSnackbar: (vertical, horizontal, msg, color) => {
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color));
+        },
+    };
+};
+
+class QuotaCompoment extends Component {
+    state = {
+        data: {
+            basic: 0,
+            used: 0,
+            total: 0,
+            pack: 0,
+            r1: 0,
+            r2: 0,
+            r3: 0,
+        },
+        packs: [],
+    };
+
+    firstLoad = true;
+
+    componentDidMount() {
+        if (this.firstLoad) {
+            this.firstLoad = !this.firstLoad;
+            API.get("/vas/pack")
+                .then((response) => {
+                    let usedR,
+                        baseR,
+                        packR = 0;
+                    if (response.data.used > response.data.base) {
+                        usedR = response.data.used / response.data.total;
+                        baseR = 0;
+                        packR = 1 - usedR;
+                    } else {
+                        usedR = response.data.used / response.data.total;
+                        baseR =
+                            (response.data.base - response.data.used) /
+                            response.data.total;
+                        packR = 1 - usedR - baseR;
+                    }
+
+                    this.setState({
+                        data: {
+                            used: response.data.used,
+                            pack: response.data.pack,
+                            total: response.data.total,
+                            basic: response.data.base,
+                            r1: usedR > 1 ? 100 : usedR * 100,
+                            r2: usedR > 1 ? 0 : baseR * 100,
+                            r3: usedR > 1 ? 0 : packR * 100,
+                        },
+                        packs: response.data.packs,
+                    });
+                })
+                .catch((error) => {
+                    this.setState({
+                        loading: false,
+                    });
+                    this.props.toggleSnackbar(
+                        "top",
+                        "right",
+                        error.message,
+                        "error"
+                    );
+                });
+        }
+    }
+    render() {
+        const { classes, t } = this.props;
+
+        return (
+            <div className={classes.layout}>
+                <Typography color="textSecondary" variant="h4">
+                    {t("vas.quota")}
+                </Typography>
+                <Grid container className={classes.gird} spacing={2}>
+                    <Grid item xs={12} sm={3}>
+                        <Paper className={classes.paper}>
+                            <Typography className={classes.data}>
+                                {sizeToString(this.state.data.basic)}
+                            </Typography>
+                            <Typography>{t("vas.groupBaseQuota")}</Typography>
+                        </Paper>
+                    </Grid>
+                    <Grid item xs={12} sm={3}>
+                        <Paper className={classes.paper}>
+                            <Typography className={classes.data}>
+                                {sizeToString(this.state.data.pack)}
+                            </Typography>
+                            <Typography>{t("vas.validPackQuota")}</Typography>
+                        </Paper>
+                    </Grid>
+                    <Grid item xs={12} sm={3}>
+                        <Paper className={classes.paper}>
+                            <Typography className={classes.data}>
+                                {sizeToString(this.state.data.used)}
+                            </Typography>
+                            <Typography>{t("vas.used")}</Typography>
+                        </Paper>
+                    </Grid>
+                    <Grid item xs={12} sm={3}>
+                        <Paper className={classes.paper}>
+                            <Typography className={classes.data}>
+                                {sizeToString(this.state.data.total)}
+                            </Typography>
+                            <Typography>{t("vas.total")}</Typography>
+                        </Paper>
+                    </Grid>
+                    <Grid item xs={12}>
+                        <Paper className={classes.paper}>
+                            <div className={classes.proBar}>
+                                <div
+                                    className={classes.r1}
+                                    style={{ width: this.state.data.r1 + "%" }}
+                                />
+                                <div
+                                    className={classes.r2}
+                                    style={{ width: this.state.data.r2 + "%" }}
+                                />
+                                <div
+                                    className={classes.r3}
+                                    style={{ width: this.state.data.r3 + "%" }}
+                                />
+                            </div>
+                            <div style={{ textAlign: "right" }}>
+                                <span
+                                    className={classNames(
+                                        classes.r1_block,
+                                        classes.note_block
+                                    )}
+                                />
+                                {t("vas.used")}
+                                <span
+                                    className={classNames(
+                                        classes.r2_block,
+                                        classes.note_block
+                                    )}
+                                />
+                                {t("vas.groupBaseQuota")}
+                                <span
+                                    className={classNames(
+                                        classes.r3_block,
+                                        classes.note_block
+                                    )}
+                                />
+                                {t("vas.validPackQuota")}
+                            </div>
+                        </Paper>
+                    </Grid>
+                </Grid>
+                <Typography
+                    color="textSecondary"
+                    variant="h4"
+                    className={classes.title}
+                >
+                    {t("vas.validStoragePack")}
+                </Typography>
+                <Paper className={classes.paper}>
+                    <Button
+                        variant="contained"
+                        color="secondary"
+                        className={classes.button}
+                        onClick={() => this.props.history.push("/buy")}
+                    >
+                        {t("vas.buyStoragePack")}
+                    </Button>
+                    <Button
+                        variant="contained"
+                        className={classes.button}
+                        onClick={() => this.props.history.push("/buy?tab=3")}
+                    >
+                        {t("vas.useGiftCode")}
+                    </Button>
+                    <div className={classes.table}>
+                        <Table>
+                            <TableHead>
+                                <TableRow>
+                                    <TableCell align="left">
+                                        {t("vas.packName")}
+                                    </TableCell>
+                                    <TableCell align="center">
+                                        {t("fileManager.size")}
+                                    </TableCell>
+                                    <TableCell align="center">
+                                        {t("vas.activationDate")}
+                                    </TableCell>
+                                    <TableCell align="center">
+                                        {t("vas.validDuration")}
+                                    </TableCell>
+                                    <TableCell align="center">
+                                        {t("vas.expiredAt")}
+                                    </TableCell>
+                                </TableRow>
+                            </TableHead>
+                            <TableBody>
+                                {this.state.packs.map((row, id) => (
+                                    <TableRow key={id}>
+                                        <TableCell component="th" scope="row">
+                                            {row.name}
+                                        </TableCell>
+                                        <TableCell align="center">
+                                            {sizeToString(row.size)}
+                                        </TableCell>
+                                        <TableCell align="center">
+                                            {formatLocalTime(row.activate_date)}
+                                        </TableCell>
+                                        <TableCell align="center">
+                                            {t("vas.days", {
+                                                num: Math.round(
+                                                    row.expiration / 86400
+                                                ),
+                                            })}
+                                        </TableCell>
+                                        <TableCell align="center">
+                                            {formatLocalTime(
+                                                row.expiration_date
+                                            )}
+                                        </TableCell>
+                                    </TableRow>
+                                ))}
+                            </TableBody>
+                        </Table>
+                        {this.state.packs.length === 0 && (
+                            <Nothing primary={t("setting.listEmpty")} />
+                        )}
+                    </div>
+                </Paper>
+            </div>
+        );
+    }
+}
+
+const Quota = connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(withStyles(styles)(withRouter(withTranslation()(QuotaCompoment))));
+
+export default Quota;
diff --git a/src/component/Viewer/Code.js b/src/component/Viewer/Code.js
new file mode 100644
index 0000000..d5321bb
--- /dev/null
+++ b/src/component/Viewer/Code.js
@@ -0,0 +1,198 @@
+import React, { Suspense, useCallback, useEffect, useState } from "react";
+import { Paper, useTheme } from "@material-ui/core";
+import { makeStyles } from "@material-ui/core/styles";
+import { useLocation, useParams, useRouteMatch } from "react-router";
+import API from "../../middleware/Api";
+import { useDispatch } from "react-redux";
+import pathHelper from "../../utils/page";
+import SaveButton from "../Dial/Save";
+import { codePreviewSuffix } from "../../config";
+import TextLoading from "../Placeholder/TextLoading";
+import FormControl from "@material-ui/core/FormControl";
+import FormControlLabel from "@material-ui/core/FormControlLabel";
+import Select from "@material-ui/core/Select";
+import Switch from "@material-ui/core/Switch";
+import MenuItem from "@material-ui/core/MenuItem";
+import Divider from "@material-ui/core/Divider";
+import { toggleSnackbar } from "../../redux/explorer";
+import UseFileSubTitle from "../../hooks/fileSubtitle";
+import { useTranslation } from "react-i18next";
+
+const MonacoEditor = React.lazy(() =>
+    import(/* webpackChunkName: "codeEditor" */ "react-monaco-editor")
+);
+
+const useStyles = makeStyles((theme) => ({
+    layout: {
+        width: "auto",
+        marginTop: "30px",
+        marginLeft: theme.spacing(3),
+        marginRight: theme.spacing(3),
+        [theme.breakpoints.up(1100 + theme.spacing(3) * 2)]: {
+            width: 1100,
+            marginLeft: "auto",
+            marginRight: "auto",
+        },
+        marginBottom: 40,
+    },
+    editor: {
+        borderRadius: theme.shape.borderRadius,
+    },
+    "@global": {
+        ".overflow-guard": {
+            borderRadius: "0 0 12px 12px!important",
+        },
+    },
+    formControl: {
+        margin: "8px 16px 8px 16px",
+    },
+    toobar: {
+        textAlign: "right",
+    },
+}));
+
+function useQuery() {
+    return new URLSearchParams(useLocation().search);
+}
+
+export default function CodeViewer() {
+    const { t } = useTranslation();
+    const [content, setContent] = useState("");
+    const [status, setStatus] = useState("");
+    const [loading, setLoading] = useState(true);
+    const [suffix, setSuffix] = useState("javascript");
+    const [wordWrap, setWordWrap] = useState("off");
+
+    const math = useRouteMatch();
+    const location = useLocation();
+    const query = useQuery();
+    const { id } = useParams();
+    const theme = useTheme();
+    const { title } = UseFileSubTitle(query, math, location);
+
+    const dispatch = useDispatch();
+    const ToggleSnackbar = useCallback(
+        (vertical, horizontal, msg, color) =>
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color)),
+        [dispatch]
+    );
+
+    useEffect(() => {
+        const extension = title.split(".");
+        setSuffix(codePreviewSuffix[extension.pop()]);
+        // eslint-disable-next-line
+    }, [title]);
+
+    useEffect(() => {
+        let requestURL = "/file/content/" + query.get("id");
+        if (pathHelper.isSharePage(location.pathname)) {
+            requestURL = "/share/content/" + id;
+            if (query.get("share_path") !== "") {
+                requestURL +=
+                    "?path=" + encodeURIComponent(query.get("share_path"));
+            }
+        }
+
+        setLoading(true);
+        API.get(requestURL, { responseType: "arraybuffer" })
+            .then((response) => {
+                const buffer = new Buffer(response.rawData, "binary");
+                const textdata = buffer.toString(); // for string
+                setContent(textdata);
+            })
+            .catch((error) => {
+                ToggleSnackbar(
+                    "top",
+                    "right",
+                    t("fileManager.errorReadFileContent", {
+                        msg: error.message,
+                    }),
+                    "error"
+                );
+            })
+            .then(() => {
+                setLoading(false);
+            });
+        // eslint-disable-next-line
+    }, [math.params[0]]);
+
+    const save = () => {
+        setStatus("loading");
+        API.put("/file/update/" + query.get("id"), content)
+            .then(() => {
+                setStatus("success");
+                setTimeout(() => setStatus(""), 2000);
+            })
+            .catch((error) => {
+                setStatus("");
+                ToggleSnackbar("top", "right", error.message, "error");
+            });
+    };
+
+    const classes = useStyles();
+    const isSharePage = pathHelper.isSharePage(location.pathname);
+    return (
+        <div className={classes.layout}>
+            <Paper className={classes.root} elevation={1}>
+                <div className={classes.toobar}>
+                    <FormControl className={classes.formControl}>
+                        <FormControlLabel
+                            control={
+                                <Switch
+                                    onChange={(e) =>
+                                        setWordWrap(
+                                            e.target.checked ? "on" : "off"
+                                        )
+                                    }
+                                />
+                            }
+                            label={t("fileManager.wordWrap")}
+                        />
+                    </FormControl>
+                    <FormControl className={classes.formControl}>
+                        <Select
+                            labelId="demo-simple-select-label"
+                            id="demo-simple-select"
+                            value={suffix}
+                            onChange={(e) => setSuffix(e.target.value)}
+                        >
+                            {Array.from(
+                                new Set(
+                                    Object.keys(codePreviewSuffix).map((k) => {
+                                        return codePreviewSuffix[k];
+                                    })
+                                )
+                            ).map((extension, index) => (
+                                // eslint-disable-next-line react/jsx-key
+                                <MenuItem value={extension} key={index}>
+                                    {extension}
+                                </MenuItem>
+                            ))}
+                        </Select>
+                    </FormControl>
+                </div>
+                <Divider />
+                {loading && <TextLoading />}
+                {!loading && (
+                    <Suspense fallback={<TextLoading />}>
+                        <MonacoEditor
+                            height="calc(100vh - 198px)"
+                            language={suffix}
+                            theme={
+                                theme.palette.type === "dark" ? "vs-dark" : "vs"
+                            }
+                            value={content}
+                            options={{
+                                readOnly: isSharePage,
+                                extraEditorClassName: classes.editor,
+                                wordWrap: wordWrap,
+                            }}
+                            onChange={(value) => setContent(value)}
+                        />
+                    </Suspense>
+                )}
+            </Paper>
+            {!isSharePage && <SaveButton onClick={save} status={status} />}
+        </div>
+    );
+}
diff --git a/src/component/Viewer/Doc.js b/src/component/Viewer/Doc.js
new file mode 100644
index 0000000..1b9fc19
--- /dev/null
+++ b/src/component/Viewer/Doc.js
@@ -0,0 +1,186 @@
+import React, { useCallback, useEffect, useState } from "react";
+import { makeStyles, useTheme } from "@material-ui/core/styles";
+import { useLocation, useParams, useRouteMatch } from "react-router";
+import API from "../../middleware/Api";
+import { useDispatch, useSelector } from "react-redux";
+import pathHelper from "../../utils/page";
+import {
+    closeAllModals,
+    openShareDialog,
+    setModalsLoading,
+    setSelectedTarget,
+    toggleSnackbar,
+} from "../../redux/explorer";
+import UseFileSubTitle from "../../hooks/fileSubtitle";
+import i18n from "i18next";
+import CreatShare from "../Modals/CreateShare";
+
+const useStyles = makeStyles(() => ({
+    layout: {
+        width: "auto",
+    },
+    "@global": {
+        iframe: {
+            border: "none",
+            width: "100%",
+            height: "calc(100vh - 64px)",
+            marginBottom: -10,
+        },
+    },
+}));
+
+function useQuery() {
+    return new URLSearchParams(useLocation().search);
+}
+
+export default function DocViewer() {
+    const [session, setSession] = useState(null);
+    const [file, setFile] = useState(null);
+    const math = useRouteMatch();
+    const location = useLocation();
+    const query = useQuery();
+    const { id } = useParams();
+    const theme = useTheme();
+    const { title } = UseFileSubTitle(query, math, location);
+
+    const shareOpened = useSelector((state) => state.viewUpdate.modals.share);
+    const modalLoading = useSelector((state) => state.viewUpdate.modalsLoading);
+    const dispatch = useDispatch();
+    const ToggleSnackbar = useCallback(
+        (vertical, horizontal, msg, color) =>
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color)),
+        [dispatch]
+    );
+    const CloseAllModals = useCallback(
+        () => dispatch(closeAllModals()),
+        [dispatch]
+    );
+    const OpenShareDialog = useCallback(
+        () => dispatch(openShareDialog()),
+        [dispatch]
+    );
+    const SetModalsLoading = useCallback(
+        (status) => dispatch(setModalsLoading(status)),
+        [dispatch]
+    );
+
+    useEffect(() => {
+        let requestURL = "/file/doc/" + query.get("id");
+        if (pathHelper.isSharePage(location.pathname)) {
+            requestURL = "/share/doc/" + id;
+            if (query.get("share_path") !== "") {
+                requestURL +=
+                    "?path=" + encodeURIComponent(query.get("share_path"));
+            }
+        }
+        API.get(requestURL)
+            .then((response) => {
+                if (response.data.access_token) {
+                    response.data.url = response.data.url.replaceAll(
+                        "lng",
+                        i18n.resolvedLanguage.toLowerCase()
+                    );
+                    response.data.url = response.data.url.replaceAll(
+                        "darkmode",
+                        theme.palette.type === "dark" ? "2" : "1"
+                    );
+                }
+
+                setSession(response.data);
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            });
+        // eslint-disable-next-line
+    }, [math.params[0], location]);
+
+    const classes = useStyles();
+
+    const handlePostMessage = (e) => {
+        console.log("Received PostMessage from " + e.origin, e.data);
+        let msg;
+        try {
+            msg = JSON.parse(e.data);
+        } catch (e) {
+            return;
+        }
+
+        if (msg.MessageId === "UI_Sharing") {
+            setFile([
+                {
+                    name: title,
+                    id: query.get("id"),
+                    type: "file",
+                },
+            ]);
+            OpenShareDialog();
+        }
+    };
+
+    useEffect(() => {
+        const frameholder = document.getElementById("frameholder");
+        const office_frame = document.createElement("iframe");
+        if (session && session.access_token && frameholder) {
+            office_frame.name = "office_frame";
+            office_frame.id = "office_frame";
+
+            // The title should be set for accessibility
+            office_frame.title = "Office Frame";
+
+            // This attribute allows true fullscreen mode in slideshow view
+            // when using PowerPoint's 'view' action.
+            office_frame.setAttribute("allowfullscreen", "true");
+
+            // The sandbox attribute is needed to allow automatic redirection to the O365 sign-in page in the business user flow
+            office_frame.setAttribute(
+                "sandbox",
+                "allow-scripts allow-same-origin allow-forms allow-popups allow-top-navigation allow-popups-to-escape-sandbox"
+            );
+            frameholder.appendChild(office_frame);
+            document.getElementById("office_form").submit();
+            window.addEventListener("message", handlePostMessage, false);
+
+            return () => {
+                window.removeEventListener("message", handlePostMessage, false);
+            };
+        }
+    }, [session]);
+
+    return (
+        <div className={classes.layout}>
+            <CreatShare
+                open={shareOpened}
+                onClose={() => CloseAllModals()}
+                modalsLoading={modalLoading}
+                setModalsLoading={SetModalsLoading}
+                selected={file}
+            />
+            {session && !session.access_token && (
+                <iframe title={"ms"} src={session.url} />
+            )}
+            {session && session.access_token && (
+                <>
+                    <form
+                        id="office_form"
+                        name="office_form"
+                        target="office_frame"
+                        action={session.url}
+                        method="post"
+                    >
+                        <input
+                            name="access_token"
+                            value={session.access_token}
+                            type="hidden"
+                        />
+                        <input
+                            name="access_token_ttl"
+                            value={session.access_token_ttl}
+                            type="hidden"
+                        />
+                    </form>
+                    <span id="frameholder"></span>
+                </>
+            )}
+        </div>
+    );
+}
diff --git a/src/component/Viewer/Epub.js b/src/component/Viewer/Epub.js
new file mode 100644
index 0000000..bf849d0
--- /dev/null
+++ b/src/component/Viewer/Epub.js
@@ -0,0 +1,78 @@
+import React, { Suspense, useCallback, useMemo, useState } from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import { useLocation, useParams, useRouteMatch } from "react-router";
+import { useDispatch } from "react-redux";
+import { toggleSnackbar } from "../../redux/explorer";
+import UseFileSubTitle from "../../hooks/fileSubtitle";
+import { getPreviewURL } from "../../middleware/Api";
+import pathHelper from "../../utils/page";
+import TextLoading from "../Placeholder/TextLoading";
+
+const ReactReader = React.lazy(() =>
+    import(/* webpackChunkName: "ReactReader" */ "react-reader").then((m) => ({
+        default: m.ReactReader,
+    }))
+);
+
+const useStyles = makeStyles((theme) => ({
+    layout: {
+        height: "calc(100vh - 64px)",
+    },
+    paper: {
+        marginBottom: theme.spacing(3),
+    },
+}));
+
+function useQuery() {
+    return new URLSearchParams(useLocation().search);
+}
+
+export default function EpubViewer() {
+    const math = useRouteMatch();
+    const location = useLocation();
+    const query = useQuery();
+    const { id } = useParams();
+    const { path } = UseFileSubTitle(query, math, location);
+    const isShare = pathHelper.isSharePage(location.pathname);
+
+    const [currentLocation, setLocation] = useState(null);
+    const locationChanged = (epubcifi) => {
+        setLocation(epubcifi);
+    };
+
+    const dispatch = useDispatch();
+    const ToggleSnackbar = useCallback(
+        (vertical, horizontal, msg, color) =>
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color)),
+        [dispatch]
+    );
+
+    const fileUrl = useMemo(
+        () =>
+            getPreviewURL(
+                isShare,
+                id,
+                query.get("id"),
+                query.get("share_path")
+            ),
+        [id, location, path]
+    );
+
+    const classes = useStyles();
+    return (
+        <div className={classes.layout}>
+            <Suspense fallback={<TextLoading />}>
+                <ReactReader
+                    location={currentLocation}
+                    locationChanged={locationChanged}
+                    epubInitOptions={{
+                        openAs: "epub",
+                    }}
+                    showToc={false}
+                    className={classes.container}
+                    url={fileUrl}
+                />
+            </Suspense>
+        </div>
+    );
+}
diff --git a/src/component/Viewer/PDF.js b/src/component/Viewer/PDF.js
new file mode 100644
index 0000000..4a818cc
--- /dev/null
+++ b/src/component/Viewer/PDF.js
@@ -0,0 +1,117 @@
+import React, { useCallback, useState } from "react";
+import { Document, Page, pdfjs } from "react-pdf";
+import { Paper } from "@material-ui/core";
+import { makeStyles } from "@material-ui/core/styles";
+import { useLocation, useParams, useRouteMatch } from "react-router";
+import { getBaseURL } from "../../middleware/Api";
+import { useDispatch } from "react-redux";
+import pathHelper from "../../utils/page";
+import TextLoading from "../Placeholder/TextLoading";
+import { toggleSnackbar } from "../../redux/explorer";
+import UseFileSubTitle from "../../hooks/fileSubtitle";
+import { useTranslation } from "react-i18next";
+
+// pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
+pdfjs.GlobalWorkerOptions.workerSrc = `//cdn.staticfile.org/pdf.js/${pdfjs.version}/pdf.worker.min.js`;
+
+const useStyles = makeStyles((theme) => ({
+    layout: {
+        marginTop: "30px",
+        marginLeft: theme.spacing(3),
+        marginRight: theme.spacing(3),
+        [theme.breakpoints.up(1100 + theme.spacing(3) * 2)]: {
+            maxWidth: 900,
+            marginLeft: "auto",
+            marginRight: "auto",
+        },
+        marginBottom: 50,
+    },
+    "@global": {
+        canvas: {
+            width: "100% !important",
+            height: "auto !important",
+            borderRadius: theme.shape.borderRadius,
+        }
+    },
+    paper: {
+        marginBottom: theme.spacing(3),
+    },
+}));
+
+function useQuery() {
+    return new URLSearchParams(useLocation().search);
+}
+
+export default function PDFViewer() {
+    const { t } = useTranslation();
+    const math = useRouteMatch();
+    const location = useLocation();
+    const query = useQuery();
+    const { id } = useParams();
+    UseFileSubTitle(query, math, location);
+
+    const [pageNumber, setPageNumber] = useState(1);
+
+    const dispatch = useDispatch();
+    const ToggleSnackbar = useCallback(
+        (vertical, horizontal, msg, color) =>
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color)),
+        [dispatch]
+    );
+    const removeTextLayerOffset = () => {
+        const textLayers = document.querySelectorAll(
+            ".react-pdf__Page__textContent"
+        );
+        textLayers.forEach((layer) => {
+            const { style } = layer;
+            style.display = "none";
+        });
+    };
+
+    const classes = useStyles();
+    return (
+        <div className={classes.layout}>
+            <Document
+                onLoadSuccess={({ numPages }) => setPageNumber(numPages)}
+                onLoadError={(error) => {
+                    ToggleSnackbar(
+                        "top",
+                        "right",
+                        t("fileManager.pdfLoadingError", {
+                            msg: error.message,
+                        }),
+                        "error"
+                    );
+                }}
+                loading={
+                    <Paper className={classes.paper} elevation={1}>
+                        <TextLoading />
+                    </Paper>
+                }
+                file={
+                    getBaseURL() +
+                    (pathHelper.isSharePage(location.pathname)
+                        ? "/share/preview/" +
+                          id +
+                          (query.get("share_path") !== ""
+                              ? "?path=" +
+                                encodeURIComponent(query.get("share_path"))
+                              : "")
+                        : "/file/preview/" + query.get("id"))
+                }
+            >
+                {Array.from(new Array(pageNumber), (el, index) => (
+                    <Paper className={classes.paper} elevation={1}>
+                        <Page
+                            width={900}
+                            onLoadSuccess={removeTextLayerOffset}
+                            key={`page_${index + 1}`}
+                            pageNumber={index + 1}
+                            renderAnnotationLayer={false}
+                        />
+                    </Paper>
+                ))}
+            </Document>
+        </div>
+    );
+}
diff --git a/src/component/Viewer/SelectMenu.js b/src/component/Viewer/SelectMenu.js
new file mode 100644
index 0000000..6464890
--- /dev/null
+++ b/src/component/Viewer/SelectMenu.js
@@ -0,0 +1,58 @@
+import React from "react";
+import {
+    Icon,
+    ListItemIcon,
+    makeStyles,
+    Menu,
+    MenuItem,
+} from "@material-ui/core";
+import CheckIcon from "@material-ui/icons/Check";
+
+const useStyles = makeStyles((theme) => ({
+    icon: {
+        minWidth: 38,
+    },
+}));
+
+export default function SelectMenu({
+    options,
+    anchorEl,
+    handleClose,
+    callback,
+    selected,
+    showIcon = true,
+}) {
+    const classes = useStyles();
+
+    return (
+        <Menu
+            id="simple-menu"
+            anchorEl={anchorEl}
+            keepMounted
+            open={Boolean(anchorEl)}
+            onClose={handleClose}
+        >
+            {options.map((item) => (
+                <>
+                    <MenuItem
+                        style={{ whiteSpace: "normal" }}
+                        dense
+                        onClick={() => callback(item)}
+                    >
+                        {showIcon && (
+                            <ListItemIcon className={classes.icon}>
+                                {item.name !== selected ? (
+                                    <Icon />
+                                ) : (
+                                    <CheckIcon />
+                                )}
+                            </ListItemIcon>
+                        )}
+
+                        {item.name}
+                    </MenuItem>
+                </>
+            ))}
+        </Menu>
+    );
+}
diff --git a/src/component/Viewer/Text.js b/src/component/Viewer/Text.js
new file mode 100644
index 0000000..37e5a58
--- /dev/null
+++ b/src/component/Viewer/Text.js
@@ -0,0 +1,161 @@
+import React, { useCallback, useEffect, useState } from "react";
+import { Paper } from "@material-ui/core";
+import { makeStyles } from "@material-ui/core/styles";
+import { useLocation, useParams, useRouteMatch } from "react-router";
+import API from "../../middleware/Api";
+import { useDispatch } from "react-redux";
+import Editor from "for-editor";
+import SaveButton from "../Dial/Save";
+import pathHelper from "../../utils/page";
+import TextLoading from "../Placeholder/TextLoading";
+import { toggleSnackbar } from "../../redux/explorer";
+import UseFileSubTitle from "../../hooks/fileSubtitle";
+import { useTranslation } from "react-i18next";
+
+const useStyles = makeStyles((theme) => ({
+    layout: {
+        width: "auto",
+        marginTop: "30px",
+        marginLeft: theme.spacing(3),
+        marginRight: theme.spacing(3),
+        [theme.breakpoints.up(1100 + theme.spacing(3) * 2)]: {
+            marginLeft: theme.spacing(12),
+            marginRight: theme.spacing(12),
+        },
+        marginBottom: 50,
+    },
+    player: {
+        borderRadius: theme.shape.borderRadius,
+    },
+    root: {
+        backgroundColor: "white",
+        borderRadius: theme.shape.borderRadius,
+    },
+    "@global": {
+        ".for-toolbar": {
+            overflowX: "auto!important",
+        },
+    },
+}));
+
+function useQuery() {
+    return new URLSearchParams(useLocation().search);
+}
+
+export default function TextViewer() {
+    const { t } = useTranslation();
+    const [content, setContent] = useState("");
+    const [status, setStatus] = useState("");
+    const [loading, setLoading] = useState(true);
+    const math = useRouteMatch();
+    const $vm = React.createRef();
+    const location = useLocation();
+    const query = useQuery();
+    const { id } = useParams();
+    UseFileSubTitle(query, math, location);
+
+    const dispatch = useDispatch();
+    const ToggleSnackbar = useCallback(
+        (vertical, horizontal, msg, color) =>
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color)),
+        [dispatch]
+    );
+
+    useEffect(() => {
+        let requestURL = "/file/content/" + query.get("id");
+        if (pathHelper.isSharePage(location.pathname)) {
+            requestURL = "/share/content/" + id;
+            if (query.get("share_path") !== "") {
+                requestURL +=
+                    "?path=" + encodeURIComponent(query.get("share_path"));
+            }
+        }
+
+        setLoading(true);
+        API.get(requestURL, { responseType: "arraybuffer" })
+            .then((response) => {
+                const buffer = new Buffer(response.rawData, "binary");
+                const textdata = buffer.toString(); // for string
+                setContent(textdata);
+            })
+            .catch((error) => {
+                ToggleSnackbar(
+                    "top",
+                    "right",
+                    t("fileManager.errorReadFileContent", {
+                        msg: error.message,
+                    }),
+                    "error"
+                );
+            })
+            .then(() => {
+                setLoading(false);
+            });
+        // eslint-disable-next-line
+    }, [math.params[0]]);
+
+    const toBase64 = (file) =>
+        new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.readAsDataURL(file);
+            reader.onload = () => resolve(reader.result);
+            reader.onerror = (error) => reject(error);
+        });
+
+    const save = () => {
+        setStatus("loading");
+        API.put("/file/update/" + query.get("id"), content)
+            .then(() => {
+                setStatus("success");
+                setTimeout(() => setStatus(""), 2000);
+            })
+            .catch((error) => {
+                setStatus("");
+                ToggleSnackbar("top", "right", error.message, "error");
+            });
+    };
+
+    const addImg = async ($file) => {
+        $vm.current.$img2Url($file.name, await toBase64($file));
+        console.log($file);
+    };
+
+    const classes = useStyles();
+    return (
+        <div className={classes.layout}>
+            <Paper className={classes.root} elevation={1}>
+                {loading && <TextLoading />}
+                {!loading && (
+                    <Editor
+                        language={t("forEditorLocaleCode", { ns: "common" })}
+                        ref={$vm}
+                        value={content}
+                        onSave={() => save()}
+                        addImg={($file) => addImg($file)}
+                        onChange={(value) => setContent(value)}
+                        toolbar={{
+                            h1: true, // h1
+                            h2: true, // h2
+                            h3: true, // h3
+                            h4: true, // h4
+                            img: true, // 图片
+                            link: true, // 链接
+                            code: true, // 代码块
+                            preview: true, // 预览
+                            expand: true, // 全屏
+                            /* v0.0.9 */
+                            undo: true, // 撤销
+                            redo: true, // 重做
+                            save: false, // 保存
+                            /* v0.2.3 */
+                            subfield: true, // 单双栏模式
+                        }}
+                    />
+                )}
+            </Paper>
+            {!pathHelper.isSharePage(location.pathname) && (
+                <SaveButton onClick={save} status={status} />
+            )}
+        </div>
+    );
+}
diff --git a/src/component/Viewer/Video.js b/src/component/Viewer/Video.js
new file mode 100644
index 0000000..e0f8251
--- /dev/null
+++ b/src/component/Viewer/Video.js
@@ -0,0 +1,377 @@
+import React, { Suspense, useCallback, useEffect, useState } from "react";
+import { Button, Paper } from "@material-ui/core";
+import { makeStyles, useTheme } from "@material-ui/core/styles";
+import { useLocation, useParams, useRouteMatch } from "react-router";
+import { useDispatch, useSelector } from "react-redux";
+import pathHelper from "../../utils/page";
+import UseFileSubTitle from "../../hooks/fileSubtitle";
+import { getPreviewURL } from "../../middleware/Api";
+import { useHistory } from "react-router-dom";
+import { basename, fileNameNoExt, isMobileSafari } from "../../utils";
+import { list } from "../../services/navigate";
+import { getViewerURL } from "../../redux/explorer/action";
+import { subtitleSuffix, videoPreviewSuffix } from "../../config";
+import { toggleSnackbar } from "../../redux/explorer";
+import { pathJoin } from "../Uploader/core/utils";
+import { Launch, PlaylistPlay, Subtitles/*, SubtitlesOutlined*/ } from "@material-ui/icons";
+import TextLoading from "../Placeholder/TextLoading";
+import SelectMenu from "./SelectMenu";
+import { getDownloadURL } from "../../services/file";
+import { sortMethodFuncs } from "../FileManager/Sort";
+import { useTranslation } from "react-i18next";
+
+const Artplayer = React.lazy(() =>
+    import(
+        /* webpackChunkName: "artplayer" */ "artplayer/examples/react/Artplayer"
+    )
+);
+
+const externalPlayers = [
+    {
+        name: "PotPlayer",
+        url: (source, title) => `potplayer://${source}`,
+    },
+    {
+        name: "VLC",
+        url: (source, title) => `vlc://${source}`,
+    },
+    {
+        name: "IINA",
+        url: (source, title) => `iina://weblink?url=${source}`,
+    },
+    {
+        name: "nPlayer",
+        url: (source, title) => `nplayer-${source}`,
+    },
+    {
+        name: "MXPlayer (Free)",
+        url: (source, title) =>
+            `intent:${source}#Intent;package=com.mxtech.videoplayer.ad;S.title=${title};end`,
+    },
+    {
+        name: "MXPlayer (Pro)",
+        url: (source, title) =>
+            `intent:${source}#Intent;package=com.mxtech.videoplayer.pro;S.title=${title};end`,
+    },
+];
+
+const useStyles = makeStyles((theme) => ({
+    layout: {
+        width: "auto",
+        marginTop: 30,
+        marginBottom: 20,
+        marginLeft: theme.spacing(3),
+        marginRight: theme.spacing(3),
+        [theme.breakpoints.up(1100 + theme.spacing(3) * 2)]: {
+            width: 1100,
+            marginLeft: "auto",
+            marginRight: "auto",
+        },
+    },
+    player: {
+        height: "100vh",
+        maxHeight: "calc(100vh - 180px)",
+    },
+    actions: {
+        marginTop: theme.spacing(2),
+    },
+    actionButton: {
+        marginRight: theme.spacing(1),
+        marginTop: theme.spacing(1),
+    },
+    "@global": {
+        "video,.art-video-player,.art-bottom": {
+            borderRadius: theme.shape.borderRadius,
+        }
+    }
+}));
+
+function useQuery() {
+    return new URLSearchParams(useLocation().search);
+}
+
+export default function VideoViewer() {
+    const { t } = useTranslation();
+    const math = useRouteMatch();
+    const location = useLocation();
+    const query = useQuery();
+    const { id } = useParams();
+    const dispatch = useDispatch();
+    const ToggleSnackbar = useCallback(
+        (vertical, horizontal, msg, color) =>
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color)),
+        [dispatch]
+    );
+    const { title, path } = UseFileSubTitle(query, math, location);
+    const theme = useTheme();
+    const [art, setArt] = useState(null);
+    const history = useHistory();
+    const [files, setFiles] = useState([]);
+    const [subtitles, setSubtitles] = useState([]);
+    const [playlist, setPlaylist] = useState([]);
+    const [subtitleOpen, setSubtitleOpen] = useState(null);
+    const [subtitleSelected, setSubtitleSelected] = useState("");
+    const [playlistOpen, setPlaylistOpen] = useState(null);
+    const [externalPlayerOpen, setExternalPlayerOpen] = useState(null);
+    const isShare = pathHelper.isSharePage(location.pathname);
+    const sortMethod = useSelector((state) => state.viewUpdate.sortMethod);
+    const sortFunc = sortMethodFuncs[sortMethod];
+
+    useEffect(() => {
+        art &&
+            art.on("ready", () => {
+                art.autoHeight = true;
+            });
+        return () => {
+            if (
+                art !== null &&
+                !isMobileSafari() &&
+                document.pictureInPictureEnabled &&
+                art.playing
+            ) {
+                art.pip = true;
+                art.query(".art-video").addEventListener(
+                    "leavepictureinpicture",
+                    () => {
+                        art.pause();
+                    },
+                    false
+                );
+            }
+        };
+    }, [art]);
+
+    const classes = useStyles();
+
+    useEffect(() => {
+        if (art !== null) {
+            const newURL = getPreviewURL(
+                isShare,
+                id,
+                query.get("id"),
+                query.get("share_path")
+            );
+            if (newURL !== art.url) {
+                if (art.subtitle) {
+                    art.subtitle.show = false;
+                }
+                art.switchUrl(newURL);
+                if (path && path !== "") {
+                    list(
+                        basename(path),
+                        isShare ? { key: id } : null,
+                        "",
+                        ""
+                    ).then((res) => {
+                        setFiles(
+                            res.data.objects.sort(sortFunc).filter((o) => o.type === "file")
+                        );
+                        setPlaylist(
+                            res.data.objects.filter(
+                                (o) =>
+                                    o.type === "file" &&
+                                    videoPreviewSuffix.indexOf(
+                                        o.name.split(".").pop().toLowerCase()
+                                    ) !== -1
+                            )
+                        );
+                    });
+                }
+            }
+        }
+    }, [art, id, location, path]);
+
+    const switchSubtitle = (f) => {
+        if (art !== null) {
+            // if (f.name === subtitleSelected) {
+            //     setSubtitleSelected('');
+            //     art.subtitle.show = false;
+            //     return;
+            // }
+            const fileType = f.name.split(".").pop().toLowerCase();
+            art.subtitle.switch(
+                getPreviewURL(
+                    isShare,
+                    id,
+                    f.id,
+                    pathJoin([basename(query.get("share_path")), f.name])
+                ),
+                {
+                    type: fileType,
+                }
+            );
+            art.subtitle.show = true;
+            setSubtitleSelected(f.name);
+            ToggleSnackbar(
+                "top",
+                "center",
+                t("fileManager.subtitleSwitchTo", {
+                    subtitle: f.name,
+                }),
+                "info"
+            );
+        }
+    };
+
+    useEffect(() => {
+        if (files.length > 0) {
+            const fileNameMatch = fileNameNoExt(title) + ".";
+            const options = files.filter((f) => {
+                const fileType = f.name.split(".").pop().toLowerCase();
+                return subtitleSuffix.indexOf(fileType) !== -1;
+            }).sort((a, b) => {
+                return (a.name.startsWith(fileNameMatch) && !b.name.startsWith(fileNameMatch)) ? -1 : 0;
+            });
+            if (options.length > 0 && options[0].name.startsWith(fileNameMatch)) {
+                switchSubtitle(options[0]);
+            }
+            setSubtitles(options);
+        }
+    }, [files]);
+
+    const switchVideo = (file) => {
+        setSubtitleSelected('');
+        if (isShare) {
+            file.key = id;
+        }
+        if (isMobileSafari()) {
+            window.location.href = getViewerURL("video", file, isShare);
+        } else {
+            history.push(getViewerURL("video", file, isShare));
+        }
+    };
+
+    const setSubtitle = (sub) => {
+        setSubtitleOpen(null);
+        switchSubtitle(sub);
+    };
+
+    const startSelectSubTitle = (e) => {
+        if (subtitles.length === 0) {
+            ToggleSnackbar(
+                "top",
+                "right",
+                t("fileManager.noSubtitleAvailable"),
+                "warning"
+            );
+            return;
+        }
+        setSubtitleOpen(e.currentTarget);
+    };
+
+    const openInExternalPlayer = (player) => {
+        const current = { name: title };
+        current.id = query.get("id");
+        current.path = basename(path);
+        if (isShare) {
+            current.key = id;
+        }
+
+        setExternalPlayerOpen(null);
+        getDownloadURL(current)
+            .then((response) => {
+                window.location.assign(player.url(response.data, title));
+            })
+            .catch((error) => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            });
+    };
+
+    return (
+        <div className={classes.layout}>
+            <Paper className={classes.root} elevation={1}>
+                <Suspense fallback={<TextLoading />}>
+                    <Artplayer
+                        option={{
+                            title: title,
+                            theme: theme.palette.secondary.main,
+                            flip: true,
+                            setting: true,
+                            playbackRate: true,
+                            aspectRatio: true,
+                            hotkey: true,
+                            pip: true,
+                            fullscreen: true,
+                            fullscreenWeb: true,
+                            autoHeight: true,
+                            whitelist: ["*"],
+                            moreVideoAttr: {
+                                "webkit-playsinline": true,
+                                playsInline: true,
+                            },
+                            lang: t("artPlayerLocaleCode", { ns: "common" }),
+                            subtitle: {
+                                style: {
+                                    color: 'var(--theme)', //#fe9200
+                                    // fontSize: '22px',// bottom: '15px',
+                                    'text-shadow': '#0009 1px 0 1px, #0009 0 1px 1px, #0009 -1px 0 1px, #0009 0 -1px 1px, #0009 1px 1px 1px, #0009 -1px -1px 1px, #0009 1px -1px 1px, #0009 -1px 1px 1px',
+                                }
+                            },
+                        }}
+                        className={classes.player}
+                        getInstance={(a) => setArt(a)}
+                    />
+                </Suspense>
+            </Paper>
+            <div className={classes.actions}>
+                <Button
+                    onClick={startSelectSubTitle}
+                    className={classes.actionButton}
+                    startIcon={/*(subtitleSelected !== '' && !art.subtitle.show) ? (<SubtitlesOutlined />) : */(<Subtitles />)}
+                    variant="outlined"
+                    onContextMenu={(e) => {
+                        e.preventDefault();
+                        if (subtitleSelected !== '') {
+                            if (art.subtitle.show) {
+                                art.subtitle.show = false;
+                            } else {
+                                art.subtitle.show = true;
+                            }
+                        }
+                    }}
+                >
+                    {t("fileManager.subtitle")}
+                </Button>
+                {playlist.length >= 2 && (
+                    <Button
+                        onClick={(e) => setPlaylistOpen(e.currentTarget)}
+                        className={classes.actionButton}
+                        startIcon={<PlaylistPlay />}
+                        variant="outlined"
+                    >
+                        {t("fileManager.playlist")}
+                    </Button>
+                )}
+                <Button
+                    onClick={(e) => setExternalPlayerOpen(e.currentTarget)}
+                    className={classes.actionButton}
+                    startIcon={<Launch />}
+                    variant="outlined"
+                >
+                    {t("fileManager.openInExternalPlayer")}
+                </Button>
+            </div>
+            <SelectMenu
+                selected={subtitleSelected}
+                options={subtitles}
+                callback={setSubtitle}
+                anchorEl={subtitleOpen}
+                handleClose={() => setSubtitleOpen(null)}
+            />
+            <SelectMenu
+                selected={title}
+                options={playlist}
+                callback={switchVideo}
+                anchorEl={playlistOpen}
+                handleClose={() => setPlaylistOpen(null)}
+            />
+            <SelectMenu
+                showIcon={false}
+                options={externalPlayers}
+                callback={openInExternalPlayer}
+                anchorEl={externalPlayerOpen}
+                handleClose={() => setExternalPlayerOpen(null)}
+            />
+        </div>
+    );
+}
diff --git a/src/config.ts b/src/config.ts
new file mode 100644
index 0000000..4bc0994
--- /dev/null
+++ b/src/config.ts
@@ -0,0 +1,178 @@
+import i18next from "./i18n";
+
+export const imgPreviewSuffix = [
+    "bmp",
+    "png",
+    "gif",
+    "jpg",
+    "jpeg",
+    "svg",
+    "webp",
+    "jfif",
+];
+export let msDocPreviewSuffix = [
+    "ppt",
+    "pptx",
+    "pps",
+    "doc",
+    "docx",
+    "xlsx",
+    "xls",
+];
+export const subtitleSuffix = ["ass", "srt", "vtt"];
+export const audioPreviewSuffix = ["mp3", "ogg", "wav", "flac", "m4a", "aac"];
+export const videoPreviewSuffix = ["mp4", "mkv", "webm", "avi", "m3u8", "mov"];
+export const pdfPreviewSuffix = ["pdf"];
+export const editSuffix = ["md", "txt"];
+export const epubSuffix = ["epub"];
+export const codePreviewSuffix = {
+    json: "json",
+    php: "php",
+    py: "python",
+    bat: "bat",
+    cpp: "cpp",
+    c: "cpp",
+    h: "cpp",
+    cs: "csharp",
+    css: "css",
+    dockerfile: "dockerfile",
+    go: "go",
+    html: "html",
+    ini: "ini",
+    java: "java",
+    js: "javascript",
+    jsx: "javascript",
+    less: "less",
+    lua: "lua",
+    sh: "shell",
+    sql: "sql",
+    xml: "xml",
+    yaml: "yaml",
+};
+export const mediaType = {
+    audio: ["mp3", "flac", "ape", "wav", "aac", "ogg", "m4a"],
+    video: ["mp4", "flv", "avi", "wmv", "mkv", "rm", "rmvb", "mov", "ogv"],
+    image: [
+        "bmp",
+        "iff",
+        "png",
+        "gif",
+        "jpg",
+        "jpeg",
+        "psd",
+        "svg",
+        "webp",
+        "heif",
+        "heic",
+        "tiff",
+        "avif",
+    ],
+    pdf: ["pdf"],
+    word: ["doc", "docx"],
+    ppt: ["ppt", "pptx"],
+    excel: ["xls", "xlsx", "csv"],
+    text: ["txt", "md", "html"],
+    torrent: ["torrent"],
+    zip: ["zip", "gz", "xz", "tar", "rar", "7z"],
+    excute: ["exe"],
+    android: ["apk"],
+    php: ["php"],
+    go: ["go"],
+    python: ["py"],
+    cpp: ["cpp"],
+    c: ["c"],
+    js: ["js", "jsx"],
+    epub: epubSuffix,
+};
+export const isPreviewable = (name: any) => {
+    const suffix = name.split(".").pop().toLowerCase();
+    if (imgPreviewSuffix.indexOf(suffix) !== -1) {
+        return "img";
+    } else if (msDocPreviewSuffix.indexOf(suffix) !== -1) {
+        return "msDoc";
+    } else if (audioPreviewSuffix.indexOf(suffix) !== -1) {
+        return "audio";
+    } else if (videoPreviewSuffix.indexOf(suffix) !== -1) {
+        return "video";
+    } else if (editSuffix.indexOf(suffix) !== -1) {
+        return "edit";
+    } else if (pdfPreviewSuffix.indexOf(suffix) !== -1) {
+        return "pdf";
+    } else if (Object.keys(codePreviewSuffix).indexOf(suffix) !== -1) {
+        return "code";
+    } else if (epubSuffix.indexOf(suffix) !== -1) {
+        return "epub";
+    }
+    return false;
+};
+export const isTorrent = (name: any) => {
+    const suffix = name.split(".").pop().toLowerCase();
+    if (mediaType.torrent.indexOf(suffix) !== -1) {
+        return true;
+    }
+    return false;
+};
+
+export const isCompressFile = (name: any) => {
+    const suffix = name.split(".").pop().toLowerCase();
+    return suffix !== "7z" && mediaType["zip"].indexOf(suffix) !== -1;
+};
+
+export const encodingRequired = (name: any) => {
+    const suffix = name.split(".").pop().toLowerCase();
+    return suffix === "zip";
+};
+
+const taskStatus = [
+    "setting.queueing",
+    "setting.processing",
+    "setting.failed",
+    "setting.canceled",
+    "setting.finished",
+];
+const taskType = [
+    "fileManager.compress",
+    "fileManager.decompress",
+    "setting.fileTransfer",
+    "setting.importFiles",
+    "vas.migrateStoragePolicy",
+    "setting.fileRecycle",
+];
+const taskProgress = [
+    "setting.waiting",
+    "setting.compressing",
+    "setting.decompressing",
+    "setting.downloading",
+    "setting.transferring",
+    "setting.indexing",
+    "setting.listing",
+];
+
+export const getTaskStatus = (status: any) => {
+    return i18next.t(taskStatus[status]);
+};
+
+export const getTaskType = (status: any) => {
+    return i18next.t(taskType[status]);
+};
+
+export const getTaskProgress = (type: any, status: any) => {
+    if (type === 2) {
+        return i18next.t("setting.transferProgress", {
+            num: status,
+        });
+    }
+    return i18next.t(taskProgress[status]);
+};
+
+export const reportReasons = [
+    "vas.nsfw",
+    "vas.malware",
+    "vas.copyright",
+    "vas.inappropriateStatements",
+    "vas.other",
+];
+
+export const setWopiExts = (exts: string[]) => {
+    msDocPreviewSuffix = exts;
+};
diff --git a/src/hooks/fileSubtitle.js b/src/hooks/fileSubtitle.js
new file mode 100644
index 0000000..587150b
--- /dev/null
+++ b/src/hooks/fileSubtitle.js
@@ -0,0 +1,30 @@
+import { useDispatch } from "react-redux";
+import { useCallback, useEffect, useState } from "react";
+import { changeSubTitle } from "../redux/viewUpdate/action";
+import pathHelper from "../utils/page";
+
+export default function UseFileSubTitle(query, math, location) {
+    const dispatch = useDispatch();
+    const [title, setTitle] = useState("");
+    const [path, setPath] = useState("");
+    const SetSubTitle = useCallback(
+        (title) => dispatch(changeSubTitle(title)),
+        [dispatch]
+    );
+
+    useEffect(() => {
+        if (!pathHelper.isSharePage(location.pathname)) {
+            const path = query.get("p").split("/");
+            setPath(query.get("p"));
+            SetSubTitle(path[path.length - 1]);
+            setTitle(path[path.length - 1]);
+        } else {
+            SetSubTitle(query.get("name"));
+            setTitle(query.get("name"));
+            setPath(query.get("share_path"));
+        }
+        // eslint-disable-next-line
+    }, [math.params[0], location]);
+
+    return { title, path };
+}
diff --git a/src/hooks/normal.js b/src/hooks/normal.js
new file mode 100644
index 0000000..d30ec36
--- /dev/null
+++ b/src/hooks/normal.js
@@ -0,0 +1,132 @@
+import React, {
+    forwardRef,
+    useCallback,
+    useEffect,
+    useRef,
+    useState,
+} from "react";
+import { useDispatch } from "react-redux";
+import API from "../middleware/Api";
+import {
+    FormControl,
+    Input,
+    InputAdornment,
+    InputLabel,
+    makeStyles,
+    TextField,
+} from "@material-ui/core";
+import Placeholder from "../component/Placeholder/Captcha";
+import { defaultValidate, useStyle } from "./useCaptcha";
+import { toggleSnackbar } from "../redux/explorer";
+import { useTranslation } from "react-i18next";
+
+const NormalCaptcha = forwardRef(function NormalCaptcha(
+    { captchaRef, setLoading },
+    ref
+) {
+    const { t } = useTranslation();
+    const classes = useStyle();
+
+    const [captcha, setCaptcha] = useState("");
+    const [captchaData, setCaptchaData] = useState(null);
+
+    const dispatch = useDispatch();
+    const ToggleSnackbar = useCallback(
+        (vertical, horizontal, msg, color) =>
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color)),
+        [dispatch]
+    );
+
+    const refreshCaptcha = () => {
+        API.get("/site/captcha")
+            .then((response) => {
+                setCaptchaData(response.data);
+                setLoading(false);
+            })
+            .catch((error) => {
+                ToggleSnackbar(
+                    "top",
+                    "right",
+                    t("login.captchaError", { message: error.message }),
+                    "error"
+                );
+            });
+    };
+
+    useEffect(() => {
+        ref.current = refreshCaptcha;
+        refreshCaptcha();
+    }, []);
+
+    useEffect(() => {
+        captchaRef.current.captchaCode = captcha;
+    }, [captcha]);
+
+    return (
+        <div className={classes.captchaInputContainer}>
+            <FormControl margin="normal" required fullWidth>
+                <TextField
+                    variant={"outlined"}
+                    label={t("login.captcha")}
+                    inputProps={{
+                        name: "captcha",
+                        id: "captcha",
+                    }}
+                    onChange={(e) => setCaptcha(e.target.value)}
+                    value={captcha}
+                    autoComplete
+                    InputProps={{
+                        endAdornment: (
+                            <InputAdornment position={"end"}>
+                                <div
+                                    className={classes.captchaImageContainer}
+                                    title={t("login.clickToRefresh")}
+                                >
+                                    {captchaData === null && <Placeholder />}
+                                    {captchaData !== null && (
+                                        <img
+                                            className={classes.captchaImage}
+                                            src={captchaData}
+                                            alt="captcha"
+                                            onClick={refreshCaptcha}
+                                        />
+                                    )}
+                                </div>
+                            </InputAdornment>
+                        ),
+                    }}
+                />
+            </FormControl>{" "}
+        </div>
+    );
+});
+
+export default function useNormalCaptcha(captchaRefreshRef, setLoading) {
+    const isValidate = useRef({
+        isValidate: true,
+    });
+
+    const captchaParamsRef = useRef({
+        captchaCode: "",
+    });
+
+    const CaptchaRender = useCallback(
+        function Normal() {
+            return (
+                <NormalCaptcha
+                    captchaRef={captchaParamsRef}
+                    ref={captchaRefreshRef}
+                    setLoading={setLoading}
+                />
+            );
+        },
+        [captchaParamsRef, captchaRefreshRef, setLoading]
+    );
+
+    return {
+        isValidate,
+        validate: defaultValidate,
+        captchaParamsRef,
+        CaptchaRender,
+    };
+}
diff --git a/src/hooks/pagination.js b/src/hooks/pagination.js
new file mode 100644
index 0000000..878f437
--- /dev/null
+++ b/src/hooks/pagination.js
@@ -0,0 +1,29 @@
+import React, { useMemo } from "react";
+import { useSelector } from "react-redux";
+
+const paginate = (array, page_size, page_number) =>
+    page_size === -1
+        ? array
+        : array.slice((page_number - 1) * page_size, page_number * page_size);
+
+export function usePagination() {
+    const files = useSelector((state) => state.explorer.fileList);
+    const folders = useSelector((state) => state.explorer.dirList);
+    const pagination = useSelector((state) => state.viewUpdate.pagination);
+
+    const { dirList, fileList, startIndex } = useMemo(() => {
+        const all = paginate(
+            [...folders, ...files],
+            pagination.size,
+            pagination.page
+        );
+        const dirList = [];
+        const fileList = [];
+        all.forEach((v) =>
+            v.type === "dir" ? dirList.push(v) : fileList.push(v)
+        );
+        const startIndex = pagination.size * (pagination.page - 1);
+        return { dirList, fileList, startIndex };
+    }, [folders, files, pagination]);
+    return { dirList, fileList, startIndex };
+}
diff --git a/src/hooks/recaptcha.js b/src/hooks/recaptcha.js
new file mode 100644
index 0000000..cb76236
--- /dev/null
+++ b/src/hooks/recaptcha.js
@@ -0,0 +1,68 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { useSelector } from "react-redux";
+import { FormControl } from "@material-ui/core";
+import ReCaptcha from "../component/Login/ReCaptcha";
+import { defaultValidate, useStyle } from "./useCaptcha";
+
+const Recaptcha = ({ captchaRef, setLoading }) => {
+    const classes = useStyle();
+
+    const [captcha, setCaptcha] = useState("");
+
+    const reCaptchaKey = useSelector(
+        (state) => state.siteConfig.captcha_ReCaptchaKey
+    );
+
+    useEffect(() => {
+        captchaRef.current.captchaCode = captcha;
+    }, [captcha]);
+
+    useEffect(() => setLoading(false), []);
+
+    return (
+        <div className={classes.captchaContainer}>
+            <FormControl margin="normal" required fullWidth>
+                <div>
+                    <ReCaptcha
+                        style={{
+                            display: "inline-block",
+                        }}
+                        sitekey={reCaptchaKey}
+                        onChange={(value) => setCaptcha(value)}
+                        id="captcha"
+                        name="captcha"
+                    />
+                </div>
+            </FormControl>{" "}
+        </div>
+    );
+};
+
+export default function useRecaptcha(setLoading) {
+    const isValidate = useRef({
+        isValidate: true,
+    });
+
+    const captchaParamsRef = useRef({
+        captchaCode: "",
+    });
+
+    const CaptchaRender = useCallback(
+        function RecaptchaRender() {
+            return (
+                <Recaptcha
+                    captchaRef={captchaParamsRef}
+                    setLoading={setLoading}
+                />
+            );
+        },
+        [captchaParamsRef, setLoading]
+    );
+
+    return {
+        isValidate,
+        validate: defaultValidate,
+        captchaParamsRef,
+        CaptchaRender,
+    };
+}
diff --git a/src/hooks/tcaptcha.js b/src/hooks/tcaptcha.js
new file mode 100644
index 0000000..c409480
--- /dev/null
+++ b/src/hooks/tcaptcha.js
@@ -0,0 +1,81 @@
+import React, { forwardRef, useCallback, useRef } from "react";
+import Script from "react-load-script";
+import { useSelector } from "react-redux";
+
+const TCaptcha = forwardRef(function TCaptcha(
+    { captchaRef, setLoading, isValidateRef, submitRef },
+    ref
+) {
+    const appid = useSelector(
+        (state) => state.siteConfig.tcaptcha_captcha_app_id
+    );
+    const onLoad = () => {
+        try {
+            ref.current = new window.TencentCaptcha(appid, function (res) {
+                if (res.ret === 0) {
+                    captchaRef.current.ticket = res.ticket;
+                    captchaRef.current.randstr = res.randstr;
+
+                    isValidateRef.current.isValidate = true;
+                    submitRef.current.submit();
+                    console.log(submitRef);
+                } else {
+                    submitRef.current.setLoading(false);
+                }
+            });
+        } catch (e) {
+            console.error(e);
+        }
+        setLoading(false);
+    };
+    return (
+        <Script
+            url={"https://ssl.captcha.qq.com/TCaptcha.js"}
+            onLoad={onLoad}
+        />
+    );
+});
+
+export default function useTCaptcha(setLoading) {
+    const isValidate = useRef({
+        isValidate: false,
+    });
+    const captchaParamsRef = useRef({
+        ticket: "",
+        randstr: "",
+    });
+    const submitRef = useRef({
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        submit: () => {},
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        setLoading: () => {},
+    });
+
+    const captchaRef = useRef();
+
+    const CaptchaRender = useCallback(
+        function TCaptchaRender() {
+            return (
+                <TCaptcha
+                    captchaRef={captchaParamsRef}
+                    setLoading={setLoading}
+                    isValidateRef={isValidate}
+                    submitRef={submitRef}
+                    ref={captchaRef}
+                />
+            );
+        },
+        [captchaParamsRef, setLoading, isValidate, submitRef, captchaRef]
+    );
+
+    return {
+        isValidate: isValidate,
+        validate: (submit, setLoading) => {
+            submitRef.current.submit = submit;
+            submitRef.current.setLoading = setLoading;
+            captchaRef.current.show();
+        },
+        captchaParamsRef,
+        CaptchaRender,
+    };
+}
diff --git a/src/hooks/useCaptcha.js b/src/hooks/useCaptcha.js
new file mode 100644
index 0000000..e1322be
--- /dev/null
+++ b/src/hooks/useCaptcha.js
@@ -0,0 +1,59 @@
+import { useSelector } from "react-redux";
+import { useRef, useState } from "react";
+import { makeStyles } from "@material-ui/core";
+import useNormalCaptcha from "./normal";
+import useRecaptcha from "./recaptcha";
+import useTCaptcha from "./tcaptcha";
+
+export const useStyle = makeStyles((theme) => ({
+    captchaContainer: {
+        display: "flex",
+        marginTop: "10px",
+        alignItems: "center",
+        [theme.breakpoints.down("sm")]: {
+            marginTop: 0,
+            display: "block",
+        },
+    },
+    captchaInputContainer: {
+        marginTop: 0,
+    },
+    captchaImageContainer: {
+        cursor: "pointer",
+        marginLeft: "1rem",
+        [theme.breakpoints.down("sm")]: {
+            marginLeft: 0,
+        },
+    },
+    captchaImage: {
+        borderRadius: theme.shape.borderRadius,
+        height: 48,
+        marginTop: 4,
+    },
+}));
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars,@typescript-eslint/no-empty-function
+export const defaultValidate = (submit, setLoading) => {};
+
+export const useCaptcha = () => {
+    const captchaType = useSelector((state) => state.siteConfig.captcha_type);
+
+    const [captchaLoading, setCaptchaLoading] = useState(true);
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    const captchaRefreshRef = useRef(() => {});
+
+    const normal = useNormalCaptcha(captchaRefreshRef, setCaptchaLoading);
+    const recaptcha = useRecaptcha(setCaptchaLoading);
+    const tcaptcha = useTCaptcha(setCaptchaLoading);
+
+    switch (captchaType) {
+        case "normal":
+            return { ...normal, captchaRefreshRef, captchaLoading };
+        case "recaptcha":
+            return { ...recaptcha, captchaRefreshRef, captchaLoading };
+        case "tcaptcha":
+            return { ...tcaptcha, captchaRefreshRef, captchaLoading };
+        default:
+            return { ...normal, captchaRefreshRef, captchaLoading };
+    }
+};
diff --git a/src/i18n.ts b/src/i18n.ts
new file mode 100644
index 0000000..e287ba5
--- /dev/null
+++ b/src/i18n.ts
@@ -0,0 +1,63 @@
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+
+import Backend from "i18next-http-backend";
+// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+// @ts-ignore
+import ChainedBackend, { ChainedBackendOptions } from "i18next-chained-backend";
+import LanguageDetector from "i18next-browser-languagedetector";
+import LocalStorageBackend from "i18next-localstorage-backend";
+
+declare let ASSETS_VERSION: string;
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+// @ts-ignore
+i18n.use(ChainedBackend)
+    .use(LanguageDetector)
+    .use(initReactI18next)
+    .init({
+        fallbackLng: "en-US",
+        debug: true,
+        ns: ["common", "application"],
+        load: "currentOnly",
+        defaultNS: "application",
+        interpolation: {
+            escapeValue: false,
+        },
+        backend: {
+            backends:
+                process.env.NODE_ENV === "development"
+                    ? [Backend]
+                    : [LocalStorageBackend, Backend],
+            backendOptions: [
+                {
+                    expirationTime: 7 * 24 * 60 * 60 * 1000, // 7 days
+                },
+                {
+                    queryStringParams: { v: ASSETS_VERSION },
+                    loadPath: "/locales/{{lng}}/{{ns}}.json",
+                },
+            ],
+        },
+    });
+
+i18n.on("languageChanged", (lng) => {
+    document.documentElement.setAttribute("lang", lng);
+});
+
+export const languages = [
+    {
+        code: "en-US",
+        displayName: "English",
+    },
+    {
+        code: "zh-CN",
+        displayName: "简体中文",
+    },
+    {
+        code: "zh-TW",
+        displayName: "繁體中文",
+    },
+];
+
+export default i18n;
diff --git a/src/index.js b/src/index.js
new file mode 100644
index 0000000..7dbfeec
--- /dev/null
+++ b/src/index.js
@@ -0,0 +1,64 @@
+import React, { Suspense } from "react";
+import ReactDOM from "react-dom";
+import * as serviceWorker from "./serviceWorker";
+import { Route, Switch } from "react-router-dom";
+import { Provider } from "react-redux";
+import { applyMiddleware, compose, createStore } from "redux";
+import thunk from "redux-thunk";
+import App from "./App";
+import cloureveApp from "./reducers";
+import { UpdateSiteConfig } from "./middleware/Init";
+import ErrorBoundary from "./component/Placeholder/ErrorBoundary";
+import { createBrowserHistory } from "history";
+import { ConnectedRouter, routerMiddleware } from "connected-react-router";
+import i18next from "./i18n";
+import PageLoading from "./component/Placeholder/PageLoading";
+import { removeI18nCache } from "./utils";
+
+const Admin = React.lazy(() => import("./Admin"));
+
+if (window.location.hash !== "") {
+    window.location.href = window.location.hash.split("#")[1];
+}
+serviceWorker.register({
+    onUpdate: (registration) => {
+        removeI18nCache();
+        alert(i18next.t("newVersionRefresh", { ns: "common" }));
+        if (registration && registration.waiting) {
+            registration.waiting.postMessage({ type: "SKIP_WAITING" });
+        }
+        window.location.reload();
+    },
+});
+
+export const history = createBrowserHistory();
+let reduxEnhance = applyMiddleware(routerMiddleware(history), thunk);
+if (
+    process.env.NODE_ENV === "development" &&
+    window.__REDUX_DEVTOOLS_EXTENSION__
+) {
+    reduxEnhance = compose(reduxEnhance, window.__REDUX_DEVTOOLS_EXTENSION__());
+}
+
+const store = createStore(cloureveApp(history), reduxEnhance);
+UpdateSiteConfig(store);
+
+ReactDOM.render(
+    <Suspense fallback={<PageLoading />}>
+        <ErrorBoundary>
+            <Provider store={store}>
+                <ConnectedRouter history={history}>
+                    <Switch>
+                        <Route path="/admin">
+                            <Admin />
+                        </Route>
+                        <Route exact path="">
+                            <App />
+                        </Route>
+                    </Switch>
+                </ConnectedRouter>
+            </Provider>
+        </ErrorBoundary>
+    </Suspense>,
+    document.getElementById("root")
+);
diff --git a/src/middleware/Api.ts b/src/middleware/Api.ts
new file mode 100644
index 0000000..d72f701
--- /dev/null
+++ b/src/middleware/Api.ts
@@ -0,0 +1,105 @@
+import axios from "axios";
+import Auth from "./Auth";
+import i18next from "../i18n";
+
+export const baseURL = "/api/v3";
+
+export const getBaseURL = () => {
+    return baseURL;
+};
+
+export const getPreviewURL = (
+    isShare: boolean,
+    shareID: any,
+    fileID: any,
+    path: any
+): string => {
+    return (
+        getBaseURL() +
+        (isShare
+            ? "/share/preview/" +
+              shareID +
+              (path !== "" ? "?path=" + encodeURIComponent(path) : "")
+            : "/file/preview/" + fileID)
+    );
+};
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+// @ts-ignore
+const instance = axios.create({
+    baseURL: getBaseURL(),
+    withCredentials: true,
+});
+
+export class AppError extends Error {
+    constructor(message: string | undefined, public code: any, error: any) {
+        super(message);
+        this.code = code;
+        if (i18next.exists(`errors.${code}`, { ns: "common" })) {
+            this.message = i18next.t(`errors.${code}`, {
+                ns: "common",
+                message,
+            });
+        } else if (i18next.exists(`vasErrors.${code}`, { ns: "common" })) {
+            this.message = i18next.t(`vasErrors.${code}`, {
+                ns: "common",
+                message,
+            });
+        } else if (i18next.exists(`errors.${code}`, { ns: "dashboard" })) {
+            this.message = i18next.t(`errors.${code}`, {
+                ns: "dashboard",
+                message,
+            });
+        } else {
+            this.message =
+                message || i18next.t("unknownError", { ns: "common" });
+        }
+
+        this.message +=
+            error && !this.message.includes(error) ? ` (${error})` : "";
+        this.stack = new Error().stack;
+    }
+}
+
+instance.interceptors.response.use(
+    function (response: any) {
+        response.rawData = response.data;
+        response.data = response.data.data;
+        if (
+            response.rawData.code !== undefined &&
+            response.rawData.code !== 0 &&
+            response.rawData.code !== 203
+        ) {
+            // Login expired
+            if (response.rawData.code === 401) {
+                Auth.signout();
+                window.location.href =
+                    "/login?redirect=" +
+                    encodeURIComponent(
+                        window.location.pathname + window.location.search
+                    );
+            }
+
+            // Non-admin
+            if (response.rawData.code === 40008) {
+                window.location.href = "/home";
+            }
+
+            // Not binding mobile phone
+            if (response.rawData.code === 40010) {
+                window.location.href = "/setting?modal=phone";
+            }
+            throw new AppError(
+                response.rawData.msg,
+                response.rawData.code,
+                response.rawData.error
+            );
+        }
+        return response;
+    },
+    function (error) {
+        return Promise.reject(error);
+    }
+);
+
+export default instance;
diff --git a/src/middleware/Auth.ts b/src/middleware/Auth.ts
new file mode 100644
index 0000000..6dbe690
--- /dev/null
+++ b/src/middleware/Auth.ts
@@ -0,0 +1,52 @@
+const Auth = {
+    isAuthenticated: false,
+    authenticate(cb: any) {
+        Auth.SetUser(cb);
+        Auth.isAuthenticated = true;
+    },
+    GetUser() {
+        return JSON.parse(localStorage.getItem("user") || "null");
+    },
+    SetUser(newUser: any) {
+        localStorage.setItem("user", JSON.stringify(newUser));
+    },
+    Check(): boolean {
+        if (Auth.isAuthenticated) {
+            return true;
+        }
+        if (localStorage.getItem("user") !== null) {
+            return !Auth.GetUser().anonymous;
+        }
+        return false;
+    },
+    signout() {
+        Auth.isAuthenticated = false;
+        const oldUser = Auth.GetUser();
+        oldUser.id = 0;
+        localStorage.setItem("user", JSON.stringify(oldUser));
+    },
+    SetPreference(key: string, value: any) {
+        let preference = JSON.parse(
+            localStorage.getItem("user_preference") || "{}"
+        );
+        preference = preference == null ? {} : preference;
+        preference[key] = value;
+        localStorage.setItem("user_preference", JSON.stringify(preference));
+    },
+    GetPreference(key: string): any | null {
+        const preference = JSON.parse(
+            localStorage.getItem("user_preference") || "{}"
+        );
+        if (preference && preference[key] !== undefined) {
+            return preference[key];
+        }
+        return null;
+    },
+    GetPreferenceWithDefault(key: string, defaultVal: any): any {
+        return Auth.GetPreference(key) !== null
+            ? Auth.GetPreference(key)
+            : defaultVal;
+    },
+};
+
+export default Auth;
diff --git a/src/middleware/AuthRoute.js b/src/middleware/AuthRoute.js
new file mode 100644
index 0000000..1f7b338
--- /dev/null
+++ b/src/middleware/AuthRoute.js
@@ -0,0 +1,25 @@
+import React from "react";
+import Auth from "./Auth";
+import { Route, Redirect } from "react-router-dom";
+
+function AuthRoute({ children, ...rest }) {
+    return (
+        <Route
+            {...rest}
+            render={({ location }) =>
+                Auth.Check(rest.isLogin) ? (
+                    children
+                ) : (
+                    <Redirect
+                        to={{
+                            pathname: "/login",
+                            state: { from: location },
+                        }}
+                    />
+                )
+            }
+        />
+    );
+}
+
+export default AuthRoute;
diff --git a/src/middleware/Init.js b/src/middleware/Init.js
new file mode 100644
index 0000000..a66a5b9
--- /dev/null
+++ b/src/middleware/Init.js
@@ -0,0 +1,98 @@
+import API from "./Api";
+import Auth from "./Auth";
+import pathHelper from "../utils/page";
+import {
+    changeViewMethod,
+    setSiteConfig,
+    toggleSnackbar,
+} from "../redux/explorer";
+import i18next from "../i18n";
+import { msDocPreviewSuffix, setWopiExts } from "../config";
+
+const initUserConfig = (siteConfig) => {
+    if (siteConfig.user !== undefined && !siteConfig.user.anonymous) {
+        const themes = JSON.parse(siteConfig.themes);
+        const user = siteConfig.user;
+        delete siteConfig.user;
+
+        //更换用户自定配色
+        if (
+            user["preferred_theme"] !== "" &&
+            themes[user["preferred_theme"]] !== undefined
+        ) {
+            siteConfig.theme = themes[user["preferred_theme"]];
+        }
+
+        // 更新登录态
+        Auth.authenticate(user);
+    }
+    if (siteConfig.user !== undefined && siteConfig.user.anonymous) {
+        Auth.SetUser(siteConfig.user);
+    }
+    return siteConfig;
+};
+
+export const InitSiteConfig = (rawStore) => {
+    // 从缓存获取默认配置
+    const configCache = JSON.parse(localStorage.getItem("siteConfigCache"));
+    if (configCache != null) {
+        rawStore.siteConfig = configCache;
+    }
+    // 检查是否有path参数
+    const url = new URL(window.location.href);
+    const c = url.searchParams.get("path");
+    rawStore.navigator.path = c === null ? "/" : c;
+    // 初始化用户个性配置
+    rawStore.siteConfig = initUserConfig(rawStore.siteConfig);
+
+    // 更改站点标题
+    document.title = rawStore.siteConfig.title;
+
+    return rawStore;
+};
+
+export async function UpdateSiteConfig(store) {
+    API.get("/site/config")
+        .then(function (response) {
+            const themes = JSON.parse(response.data.themes);
+            response.data.theme = themes[response.data.defaultTheme];
+            response.data = initUserConfig(response.data);
+            store.dispatch(setSiteConfig(response.data));
+            localStorage.setItem(
+                "siteConfigCache",
+                JSON.stringify(response.data)
+            );
+
+            // 更新 office WOPI 预览后缀
+            if (response.data.wopi_exts) {
+                setWopiExts(response.data.wopi_exts);
+            }
+
+            // 偏爱的列表样式
+            const preferListMethod = Auth.GetPreference("view_method");
+            if (preferListMethod) {
+                store.dispatch(changeViewMethod(preferListMethod));
+            } else {
+                if (pathHelper.isSharePage(window.location.pathname)) {
+                    store.dispatch(
+                        changeViewMethod(response.data.share_view_method)
+                    );
+                } else {
+                    store.dispatch(
+                        changeViewMethod(response.data.home_view_method)
+                    );
+                }
+            }
+        })
+        .catch(function (error) {
+            store.dispatch(
+                toggleSnackbar(
+                    "top",
+                    "right",
+                    i18next.t("errLoadingSiteConfig", { ns: "common" }) +
+                        error.message,
+                    "error"
+                )
+            );
+        });
+}
diff --git a/src/middleware/NoAuthRoute.js b/src/middleware/NoAuthRoute.js
new file mode 100644
index 0000000..33c449b
--- /dev/null
+++ b/src/middleware/NoAuthRoute.js
@@ -0,0 +1,25 @@
+import React from "react";
+import Auth from "./Auth";
+import { Route, Redirect } from "react-router-dom";
+
+function NoAuthRoute({ children, ...rest }) {
+    return (
+        <Route
+            {...rest}
+            render={({ location }) =>
+                !Auth.Check(rest.isLogin) ? (
+                    children
+                ) : (
+                    <Redirect
+                        to={{
+                            pathname: "/home",
+                            state: { from: location },
+                        }}
+                    />
+                )
+            }
+        />
+    );
+}
+
+export default NoAuthRoute;
diff --git a/src/reducers/index.js b/src/reducers/index.js
new file mode 100644
index 0000000..00872f4
--- /dev/null
+++ b/src/reducers/index.js
@@ -0,0 +1,170 @@
+/* eslint-disable no-case-declarations */
+import { InitSiteConfig } from "../middleware/Init";
+import { combineReducers } from "../redux/combineReducers";
+import viewUpdate from "../redux/viewUpdate/reducer";
+import explorer from "../redux/explorer/reducer";
+import { connectRouter } from "connected-react-router";
+import i18next from "../i18n";
+
+const doNavigate = (path, state) => {
+    window.currntPath = path;
+    return Object.assign({}, state, {
+        navigator: Object.assign({}, state.navigator, {
+            path: path,
+        }),
+    });
+};
+
+export const initState = {
+    siteConfig: {
+        title: window.subTitle,
+        siteICPId: "",
+        loginCaptcha: false,
+        regCaptcha: false,
+        forgetCaptcha: false,
+        emailActive: false,
+        QQLogin: false,
+        themes: null,
+        authn: false,
+        theme: {
+            palette: {
+                common: { black: "#000", white: "#fff" },
+                background: { paper: "#fff", default: "#fafafa" },
+                primary: {
+                    light: "#7986cb",
+                    main: "#3f51b5",
+                    dark: "#303f9f",
+                    contrastText: "#fff",
+                },
+                secondary: {
+                    light: "#ff4081",
+                    main: "#f50057",
+                    dark: "#c51162",
+                    contrastText: "#fff",
+                },
+                error: {
+                    light: "#e57373",
+                    main: "#f44336",
+                    dark: "#d32f2f",
+                    contrastText: "#fff",
+                },
+                text: {
+                    primary: "rgba(0, 0, 0, 0.87)",
+                    secondary: "rgba(0, 0, 0, 0.54)",
+                    disabled: "rgba(0, 0, 0, 0.38)",
+                    hint: "rgba(0, 0, 0, 0.38)",
+                },
+                explorer: {
+                    filename: "#474849",
+                    icon: "#8f8f8f",
+                    bgSelected: "#D5DAF0",
+                    emptyIcon: "#e8e8e8",
+                },
+            },
+        },
+        captcha_ReCaptchaKey: "defaultKey",
+        site_notice: "",
+        captcha_type: "normal",
+        tcaptcha_captcha_app_id: "",
+        wopi_exts: [],
+    },
+    navigator: {
+        path: "/",
+        refresh: true,
+    },
+};
+
+const defaultStatus = InitSiteConfig(initState);
+
+// TODO: 将cloureveApp切分成小的reducer
+const cloudreveApp = (state = defaultStatus, action) => {
+    switch (action.type) {
+        case "SET_NAVIGATOR":
+            return doNavigate(action.path, state);
+        case "TOGGLE_DAYLIGHT_MODE": {
+            const copy = Object.assign({}, state);
+            if (
+                copy.siteConfig.theme.palette.type === undefined ||
+                copy.siteConfig.theme.palette.type === "light"
+            ) {
+                return {
+                    ...state,
+                    siteConfig: {
+                        ...state.siteConfig,
+                        theme: {
+                            ...state.siteConfig.theme,
+                            palette: {
+                                ...state.siteConfig.theme.palette,
+                                type: "dark",
+                            },
+                        },
+                    },
+                };
+            }
+            return {
+                ...state,
+                siteConfig: {
+                    ...state.siteConfig,
+                    theme: {
+                        ...state.siteConfig.theme,
+                        palette: {
+                            ...state.siteConfig.theme.palette,
+                            type: "light",
+                        },
+                    },
+                },
+            };
+        }
+        case "APPLY_THEME":
+            if (state.siteConfig.themes !== null) {
+                const themes = JSON.parse(state.siteConfig.themes);
+                if (themes[action.theme] === undefined) {
+                    return state;
+                }
+                return Object.assign({}, state, {
+                    siteConfig: Object.assign({}, state.siteConfig, {
+                        theme: themes[action.theme],
+                    }),
+                });
+            }
+            break;
+        case "NAVIGATOR_UP":
+            return doNavigate(action.path, state);
+        case "SET_SITE_CONFIG":
+            return Object.assign({}, state, {
+                siteConfig: action.config,
+            });
+        case "REFRESH_FILE_LIST":
+            return Object.assign({}, state, {
+                navigator: Object.assign({}, state.navigator, {
+                    refresh: !state.navigator.refresh,
+                }),
+            });
+        case "SEARCH_MY_FILE":
+            return Object.assign({}, state, {
+                navigator: Object.assign({}, state.navigator, {
+                    path: "/" + i18next.t("fileManager.searchResult"),
+                    refresh: !state.explorer.search
+                        ? state.navigator.refresh
+                        : !state.navigator.refresh,
+                }),
+            });
+        default:
+            return state;
+    }
+};
+
+export default (history) => (state, action) => {
+    const { viewUpdate: viewUpdateState, explorer: explorerState } =
+        state || {};
+    const appState = cloudreveApp(state, action);
+    const combinedState = combineReducers({
+        viewUpdate,
+        explorer,
+        router: connectRouter(history),
+    })({ viewUpdate: viewUpdateState, explorer: explorerState }, action);
+    return {
+        ...appState,
+        ...combinedState,
+    };
+};
diff --git a/src/reducers/index.test.js b/src/reducers/index.test.js
new file mode 100644
index 0000000..0c730f8
--- /dev/null
+++ b/src/reducers/index.test.js
@@ -0,0 +1,1215 @@
+import configureMockStore from "redux-mock-store";
+import thunk from "redux-thunk";
+import cloudreveApp, { initState as cloudreveState } from "./index";
+import { initState as viewUpdateState } from "../redux/viewUpdate/reducer";
+import { initState as explorerState } from "../redux/explorer/reducer";
+
+import { changeSubTitle, setSubtitle } from "../redux/viewUpdate/action";
+import {
+    addSelectedTargets,
+    changeSortMethod,
+    removeSelectedTargets,
+    setDirList,
+    setFileList,
+    setLastSelect,
+    setSelectedTarget,
+    setShiftSelectedIds,
+    setSortMethod,
+    updateFileList,
+} from "../redux/explorer/action";
+import {
+    applyThemes, changeContextMenu, changeViewMethod,
+    closeAllModals, dragAndDrop, drawerToggleAction, navigateTo, navigateUp,
+    openCompressDialog,
+    openCopyDialog, openCreateFolderDialog,
+    openDecompressDialog,
+    openGetSourceDialog,
+    openLoadingDialog, openMoveDialog, openMusicDialog,
+    openRemoteDownloadDialog, openRemoveDialog, openRenameDialog, openResaveDialog, openShareDialog,
+    openTorrentDownloadDialog,
+    refreshFileList,
+    refreshStorage,
+    saveFile,
+    searchMyFile,
+    setModalsLoading, setNavigator, setNavigatorError, setNavigatorLoadingStatus, setSessionStatus, setShareUserPopover,
+    setSiteConfig, setUserPopover,
+    showImgPreivew, toggleDaylightMode,
+    toggleSnackbar
+} from "../redux/explorer";
+
+const initState = {
+    ...cloudreveState,
+    viewUpdate: viewUpdateState,
+    explorer: explorerState,
+};
+const middlewares = [thunk];
+const mockStore = configureMockStore(middlewares);
+
+describe("index reducer", () => {
+    it("should return the initial state", () => {
+        expect(cloudreveApp(undefined, { type: "@@INIT" })).toEqual(initState);
+    });
+
+    it("should handle redux init", () => {
+        expect(cloudreveApp(undefined, { type: "@@redux/INIT" })).toEqual(
+            initState
+        );
+    });
+
+    it("should handle DRAWER_TOGGLE", () => {
+        const openAction = drawerToggleAction(true);
+        expect(cloudreveApp(initState, openAction)).toEqual({
+            ...initState,
+            viewUpdate: {
+                ...initState.viewUpdate,
+                open: true,
+            },
+        });
+
+        const clossAction = drawerToggleAction(false);
+        expect(cloudreveApp(initState, clossAction)).toEqual({
+            ...initState,
+            viewUpdate: {
+                ...initState.viewUpdate,
+                open: false,
+            },
+        });
+    });
+
+    it("should handle CHANGE_VIEW_METHOD", () => {
+        const action = changeViewMethod("list");
+        expect(cloudreveApp(initState, action)).toEqual({
+            ...initState,
+            viewUpdate: {
+                ...initState.viewUpdate,
+                explorerViewMethod: "list",
+            },
+        });
+    });
+
+    it("should handle SET_SORT_METHOD", () => {
+        const action = setSortMethod("sizeRes");
+        expect(cloudreveApp(initState, action)).toEqual({
+            ...initState,
+            viewUpdate: {
+                ...initState.viewUpdate,
+                sortMethod: "sizeRes",
+            },
+        });
+    });
+
+    describe("CHANGE_SORT_METHOD", () => {
+        const explorerState = {
+            fileList: [
+                {
+                    type: "file",
+                    name: "b",
+                    size: 10,
+                    date: "2020/04/30",
+                },
+                {
+                    type: "file",
+                    name: "a",
+                    size: 11,
+                    date: "2020/05/01",
+                },
+                {
+                    type: "file",
+                    name: "z",
+                    size: 110,
+                    date: "2020/04/29",
+                },
+            ],
+            dirList: [
+                {
+                    type: "dir",
+                    name: "b_dir",
+                    size: 10,
+                    date: "2020/04/30",
+                },
+                {
+                    type: "dir",
+                    name: "a_dir",
+                    size: 11,
+                    date: "2020/05/01",
+                },
+                {
+                    type: "dir",
+                    name: "z_dir",
+                    size: 110,
+                    date: "2020/04/29",
+                },
+            ],
+        };
+
+        const state = {
+            ...initState,
+            explorer: {
+                ...initState.explorer,
+                ...explorerState,
+            },
+        };
+        it("should handle sizePos", async () => {
+            const action = changeSortMethod("sizePos");
+            const sortFunc = (a, b) => {
+                return a.size - b.size;
+            };
+            const fileList = explorerState.fileList;
+            const dirList = explorerState.dirList;
+            const store = mockStore(state);
+            await store.dispatch(action);
+            expect(store.getActions()).toEqual([
+                setSortMethod("sizePos"),
+                setDirList(dirList.sort(sortFunc)),
+                setFileList(fileList.sort(sortFunc)),
+            ]);
+        });
+
+        it("should handle sizeRes", async () => {
+            const action = changeSortMethod("sizePos");
+            const sortFunc = (a, b) => {
+                return b.size - a.size;
+            };
+            const fileList = explorerState.fileList;
+            const dirList = explorerState.dirList;
+            const store = mockStore(state);
+            await store.dispatch(action);
+            expect(store.getActions()).toEqual([
+                setSortMethod("sizePos"),
+                setDirList(dirList.sort(sortFunc)),
+                setFileList(fileList.sort(sortFunc)),
+            ]);
+        });
+
+        it("should handle namePos", async () => {
+            const action = changeSortMethod("namePos");
+            const sortFunc = (a, b) => {
+                return a.name.localeCompare(b.name);
+            };
+            const fileList = explorerState.fileList;
+            const dirList = explorerState.dirList;
+            const store = mockStore(state);
+            await store.dispatch(action);
+            expect(store.getActions()).toEqual([
+                setSortMethod("namePos"),
+                setDirList(dirList.sort(sortFunc)),
+                setFileList(fileList.sort(sortFunc)),
+            ]);
+        });
+
+        it("should handle nameRev", async () => {
+            const action = changeSortMethod("nameRev");
+            const sortFunc = (a, b) => {
+                return b.name.localeCompare(a.name);
+            };
+            const fileList = explorerState.fileList;
+            const dirList = explorerState.dirList;
+            const store = mockStore(state);
+            await store.dispatch(action);
+            expect(store.getActions()).toEqual([
+                setSortMethod("nameRev"),
+                setDirList(dirList.sort(sortFunc)),
+                setFileList(fileList.sort(sortFunc)),
+            ]);
+        });
+
+        it("should handle timePos", async () => {
+            const action = changeSortMethod("timePos");
+            const sortFunc = (a, b) => {
+                return Date.parse(a.date) - Date.parse(b.date);
+            };
+            const fileList = explorerState.fileList;
+            const dirList = explorerState.dirList;
+            const store = mockStore(state);
+            await store.dispatch(action);
+            expect(store.getActions()).toEqual([
+                setSortMethod("timePos"),
+                setDirList(dirList.sort(sortFunc)),
+                setFileList(fileList.sort(sortFunc)),
+            ]);
+        });
+
+        it("should handle timeRev", async () => {
+            const action = changeSortMethod("timeRev");
+            const sortFunc = (a, b) => {
+                return Date.parse(b.date) - Date.parse(a.date);
+            };
+            const fileList = explorerState.fileList;
+            const dirList = explorerState.dirList;
+            const store = mockStore(state);
+            await store.dispatch(action);
+            expect(store.getActions()).toEqual([
+                setSortMethod("timeRev"),
+                setDirList(dirList.sort(sortFunc)),
+                setFileList(fileList.sort(sortFunc)),
+            ]);
+        });
+    });
+
+    it("should handle CHANGE_CONTEXT_MENU", () => {
+        const action1 = changeContextMenu("empty", false);
+        expect(cloudreveApp(initState, action1)).toEqual({
+            ...initState,
+            viewUpdate: {
+                ...initState.viewUpdate,
+                contextOpen: false,
+                contextType: "empty",
+            },
+        });
+        const action2 = changeContextMenu("aa", true);
+        expect(cloudreveApp(initState, action2)).toEqual({
+            ...initState,
+            viewUpdate: {
+                ...initState.viewUpdate,
+                contextOpen: true,
+                contextType: "aa",
+            },
+        });
+    });
+
+    it("should handle DRAG_AND_DROP", () => {
+        const action = dragAndDrop("source", "target");
+        expect(cloudreveApp(initState, action)).toEqual({
+            ...initState,
+            explorer: {
+                ...initState.explorer,
+                dndSignal: true,
+                dndTarget: "target",
+                dndSource: "source",
+            },
+        });
+    });
+
+    it("should handle SET_NAVIGATOR_LOADING_STATUE", () => {
+        const action = setNavigatorLoadingStatus(true);
+        expect(cloudreveApp(initState, action)).toEqual({
+            ...initState,
+            viewUpdate: {
+                ...initState.viewUpdate,
+                navigatorLoading: true,
+            },
+        });
+    });
+
+    it("should handle SET_NAVIGATOR_ERROR", () => {
+        const action = setNavigatorError(true, "Error Message");
+        expect(cloudreveApp(initState, action)).toEqual({
+            ...initState,
+            viewUpdate: {
+                ...initState.viewUpdate,
+                navigatorError: true,
+                navigatorErrorMsg: "Error Message",
+            },
+        });
+    });
+
+    describe("UPDATE_FILE_LIST", () => {
+        const fileList = [
+            {
+                type: "file",
+                name: "b",
+                size: 10,
+                date: "2020/04/30",
+            },
+            {
+                type: "file",
+                name: "a",
+                size: 11,
+                date: "2020/05/01",
+            },
+            {
+                type: "file",
+                name: "z",
+                size: 110,
+                date: "2020/04/29",
+            },
+        ];
+        const dirList = [
+            {
+                type: "dir",
+                name: "b_dir",
+                size: 10,
+                date: "2020/04/30",
+            },
+            {
+                type: "dir",
+                name: "a_dir",
+                size: 11,
+                date: "2020/05/01",
+            },
+            {
+                type: "dir",
+                name: "z_dir",
+                size: 110,
+                date: "2020/04/29",
+            },
+        ];
+        const updateAction = updateFileList([...fileList, ...dirList]);
+        it("should handle sizePos", async () => {
+            const sortFun = (a, b) => {
+                return a.size - b.size;
+            };
+            const state = {
+                ...initState,
+                viewUpdate: {
+                    ...initState.viewUpdate,
+                    sortMethod: "sizePos",
+                },
+            };
+            const store = mockStore(state);
+            await store.dispatch(updateAction);
+            expect(store.getActions()).toEqual([
+                setDirList(dirList.sort(sortFun)),
+                setFileList(fileList.sort(sortFun)),
+            ]);
+        });
+
+        it("should handle sizeRes", async () => {
+            const sortFun = (a, b) => {
+                return b.size - a.size;
+            };
+            const state = {
+                ...initState,
+                viewUpdate: {
+                    ...initState.viewUpdate,
+                    sortMethod: "sizeRes",
+                },
+            };
+            const store = mockStore(state);
+            await store.dispatch(updateAction);
+            expect(store.getActions()).toEqual([
+                setDirList(dirList.sort(sortFun)),
+                setFileList(fileList.sort(sortFun)),
+            ]);
+        });
+
+        it("should handle namePos", async () => {
+            const sortFun = (a, b) => {
+                return a.name.localeCompare(b.name);
+            };
+            const state = {
+                ...initState,
+                viewUpdate: {
+                    ...initState.viewUpdate,
+                    sortMethod: "namePos",
+                },
+            };
+            const store = mockStore(state);
+            await store.dispatch(updateAction);
+            expect(store.getActions()).toEqual([
+                setDirList(dirList.sort(sortFun)),
+                setFileList(fileList.sort(sortFun)),
+            ]);
+        });
+
+        it("should handle nameRev", async () => {
+            const sortFun = (a, b) => {
+                return b.name.localeCompare(a.name);
+            };
+            const state = {
+                ...initState,
+                viewUpdate: {
+                    ...initState.viewUpdate,
+                    sortMethod: "nameRev",
+                },
+            };
+            const store = mockStore(state);
+            await store.dispatch(updateAction);
+            expect(store.getActions()).toEqual([
+                setDirList(dirList.sort(sortFun)),
+                setFileList(fileList.sort(sortFun)),
+            ]);
+        });
+
+        it("should handle timePos", async () => {
+            const sortFun = (a, b) => {
+                return Date.parse(a.date) - Date.parse(b.date);
+            };
+            const state = {
+                ...initState,
+                viewUpdate: {
+                    ...initState.viewUpdate,
+                    sortMethod: "timePos",
+                },
+            };
+            const store = mockStore(state);
+            await store.dispatch(updateAction);
+            expect(store.getActions()).toEqual([
+                setDirList(dirList.sort(sortFun)),
+                setFileList(fileList.sort(sortFun)),
+            ]);
+        });
+
+        it("should handle timeRev", async () => {
+            const sortFun = (a, b) => {
+                return Date.parse(b.date) - Date.parse(a.date);
+            };
+            const state = {
+                ...initState,
+                viewUpdate: {
+                    ...initState.viewUpdate,
+                    sortMethod: "timeRev",
+                },
+            };
+            const store = mockStore(state);
+            await store.dispatch(updateAction);
+            expect(store.getActions()).toEqual([
+                setDirList(dirList.sort(sortFun)),
+                setFileList(fileList.sort(sortFun)),
+            ]);
+        });
+    });
+
+    it("should handle SET_FILE_LIST", () => {
+        const action = setFileList([
+            {
+                type: "file",
+                id: "a",
+            },
+            {
+                type: "file",
+                id: "b",
+            },
+        ]);
+        expect(
+            cloudreveApp(
+                {
+                    ...initState,
+                    explorer: {
+                        ...initState.explorer,
+                        fileList: [{ type: "file", id: "test" }],
+                    },
+                },
+                action
+            )
+        ).toEqual({
+            ...initState,
+            explorer: {
+                ...initState.explorer,
+                fileList: [
+                    {
+                        type: "file",
+                        id: "a",
+                    },
+                    {
+                        type: "file",
+                        id: "b",
+                    },
+                ],
+            },
+        });
+    });
+
+    it("should handle SET_DIR_LIST", () => {
+        const action = setDirList([
+            {
+                type: "dir",
+                id: "a",
+            },
+            {
+                type: "dir",
+                id: "b",
+            },
+        ]);
+        expect(
+            cloudreveApp(
+                {
+                    ...initState,
+                    explorer: {
+                        ...initState.explorer,
+                        dirList: [{ type: "dir", id: "test" }],
+                    },
+                },
+                action
+            )
+        ).toEqual({
+            ...initState,
+            explorer: {
+                ...initState.explorer,
+                dirList: [
+                    {
+                        type: "dir",
+                        id: "a",
+                    },
+                    {
+                        type: "dir",
+                        id: "b",
+                    },
+                ],
+            },
+        });
+    });
+
+    it("should handle ADD_SELECTED_TARGETS", () => {
+        const newSelect = [
+            {
+                type: "file",
+            },
+            {
+                type: "dir",
+            },
+        ];
+        const action = addSelectedTargets(newSelect);
+        expect(
+            cloudreveApp(
+                {
+                    ...initState,
+                    explorer: {
+                        ...initState.explorer,
+                        selected: [{ type: "file" }],
+                    },
+                },
+                action
+            )
+        ).toEqual({
+            ...initState,
+            explorer: {
+                ...initState.explorer,
+                selected: [{ type: "file" }, ...newSelect],
+                selectProps: {
+                    isMultiple: true,
+                    withFolder: true,
+                    withFile: true,
+                },
+            },
+        });
+    });
+
+    it("should handle SET_SELECTED_TARGET", () => {
+        const newSelect = [
+            {
+                type: "file",
+            },
+            {
+                type: "dir",
+            },
+        ];
+        const action = setSelectedTarget(newSelect);
+        expect(
+            cloudreveApp(
+                {
+                    ...initState,
+                    explorer: {
+                        ...initState.explorer,
+                        selected: [{ type: "file" }],
+                    },
+                },
+                action
+            )
+        ).toEqual({
+            ...initState,
+            explorer: {
+                ...initState.explorer,
+                selected: newSelect,
+                selectProps: {
+                    isMultiple: true,
+                    withFolder: true,
+                    withFile: true,
+                },
+            },
+        });
+    });
+
+    it("should handle RMOVE_SELECTED_TARGETS", () => {
+        const remove = ["1"];
+        const action = removeSelectedTargets(remove);
+        expect(
+            cloudreveApp(
+                {
+                    ...initState,
+                    explorer: {
+                        ...initState.explorer,
+                        selected: [
+                            { id: "1", type: "file" },
+                            { id: "2", type: "file" },
+                        ],
+                    },
+                },
+                action
+            )
+        ).toEqual({
+            ...initState,
+            explorer: {
+                ...initState.explorer,
+                selected: [{ id: "2", type: "file" }],
+                selectProps: {
+                    isMultiple: false,
+                    withFolder: false,
+                    withFile: true,
+                },
+            },
+        });
+    });
+
+    it("should handle NAVIGATOR_TO", async () => {
+        const store = mockStore(initState);
+        const action = navigateTo("/somewhere");
+        await store.dispatch(action);
+        expect(store.getActions()).toEqual([setNavigator("/somewhere", true)]);
+    });
+
+    it("should handle NAVIGATOR_UP", async () => {
+        const navState = {
+            ...initState,
+            navigator: {
+                ...initState.navigator,
+                path: "/to/somewhere",
+            },
+        };
+        const store = mockStore(navState);
+        const action = navigateUp();
+        await store.dispatch(action);
+        expect(store.getActions()).toEqual([setNavigator("/to", true)]);
+    });
+
+    it("should handle SET_NAVIGATOR", () => {
+        const navState = {
+            ...initState,
+            navigator: {
+                ...initState.navigator,
+                path: "/to/somewhere",
+            },
+        };
+        const action = setNavigator("/newpath", true);
+        expect(cloudreveApp(navState, action)).toEqual({
+            ...initState,
+            navigator: {
+                ...initState.navigator,
+                path: "/newpath",
+            },
+            viewUpdate: {
+                ...initState.viewUpdate,
+                contextOpen: false,
+                navigatorError: false,
+                navigatorLoading: true,
+            },
+            explorer: {
+                ...initState.explorer,
+                selected: [],
+                selectProps: {
+                    isMultiple: false,
+                    withFolder: false,
+                    withFile: false,
+                },
+                keywords: "",
+            },
+        });
+        expect(window.currntPath).toEqual("/newpath");
+    });
+
+    it("should handle TOGGLE_DAYLIGHT_MODE", () => {
+        const action = toggleDaylightMode();
+        const darkState = {
+            ...initState,
+            siteConfig: {
+                ...initState.siteConfig,
+                theme: {
+                    ...initState.siteConfig.theme,
+                    palette: {
+                        ...initState.siteConfig.theme.palette,
+                        type: "dark",
+                    },
+                },
+            },
+        };
+        const lightState = {
+            ...initState,
+            siteConfig: {
+                ...initState.siteConfig,
+                theme: {
+                    ...initState.siteConfig.theme,
+                    palette: {
+                        ...initState.siteConfig.theme.palette,
+                        type: "light",
+                    },
+                },
+            },
+        };
+        expect(cloudreveApp(initState, action)).toEqual(darkState);
+        expect(cloudreveApp(darkState, action)).toEqual(lightState);
+    });
+
+    it("should handle APPLY_THEME", () => {
+        const action = applyThemes("foo");
+        const stateWithThemes = {
+            ...initState,
+            siteConfig: {
+                ...initState.siteConfig,
+                themes: JSON.stringify({ foo: "bar" }),
+            },
+        };
+        expect(cloudreveApp(stateWithThemes, action)).toEqual({
+            ...stateWithThemes,
+            siteConfig: {
+                ...stateWithThemes.siteConfig,
+                theme: "bar",
+            },
+        });
+    });
+
+    it("should handle OPEN_CREATE_FOLDER_DIALOG", () => {
+        const action = openCreateFolderDialog();
+        expect(cloudreveApp(initState, action)).toEqual({
+            ...initState,
+            viewUpdate: {
+                ...initState.viewUpdate,
+                modals: {
+                    ...initState.viewUpdate.modals,
+                    createNewFolder: true,
+                },
+                contextOpen: false,
+            },
+        });
+    });
+
+    it("should handle OPEN_RENAME_DIALOG", () => {
+        const action = openRenameDialog();
+        expect(cloudreveApp(initState, action)).toEqual({
+            ...initState,
+            viewUpdate: {
+                ...initState.viewUpdate,
+                modals: {
+                    ...initState.viewUpdate.modals,
+                    rename: true,
+                },
+                contextOpen: false,
+            },
+        });
+    });
+
+    it("should handle OPEN_REMOVE_DIALOG", () => {
+        const action = openRemoveDialog();
+        expect(cloudreveApp(initState, action)).toEqual({
+            ...initState,
+            viewUpdate: {
+                ...initState.viewUpdate,
+                modals: {
+                    ...initState.viewUpdate.modals,
+                    remove: true,
+                },
+                contextOpen: false,
+            },
+        });
+    });
+
+    it("should handle OPEN_MOVE_DIALOG", () => {
+        const action = openMoveDialog();
+        expect(cloudreveApp(initState, action)).toEqual({
+            ...initState,
+            viewUpdate: {
+                ...initState.viewUpdate,
+                modals: {
+                    ...initState.viewUpdate.modals,
+                    move: true,
+                },
+                contextOpen: false,
+            },
+        });
+    });
+
+    it("should handle OPEN_RESAVE_DIALOG", () => {
+        const action = openResaveDialog();
+        expect(cloudreveApp(initState, action)).toEqual({
+            ...initState,
+            viewUpdate: {
+                ...initState.viewUpdate,
+                modals: {
+                    ...initState.viewUpdate.modals,
+                    resave: true,
+                },
+                contextOpen: false,
+            },
+        });
+    });
+
+    it("should handle SET_USER_POPOVER", () => {
+        // TODO: update to real anchor
+        const action = setUserPopover("anchor");
+        expect(cloudreveApp(initState, action)).toEqual({
+            ...initState,
+            viewUpdate: {
+                ...initState.viewUpdate,
+                userPopoverAnchorEl: "anchor",
+            },
+        });
+    });
+
+    it("should handle SET_SHARE_USER_POPOVER", () => {
+        // TODO: update to real anchor
+        const action = setShareUserPopover("anchor");
+        expect(cloudreveApp(initState, action)).toEqual({
+            ...initState,
+            viewUpdate: {
+                ...initState.viewUpdate,
+                shareUserPopoverAnchorEl: "anchor",
+            },
+        });
+    });
+
+    it("should handle OPEN_SHARE_DIALOG", () => {
+        // TODO: update to real anchor
+        const action = openShareDialog();
+        expect(cloudreveApp(initState, action)).toEqual({
+            ...initState,
+            viewUpdate: {
+                ...initState.viewUpdate,
+                modals: {
+                    ...initState.viewUpdate.modals,
+                    share: true,
+                },
+                contextOpen: false,
+            },
+        });
+    });
+
+    it("should handle SET_SITE_CONFIG", () => {
+        // TODO: update to real anchor
+        const action = setSiteConfig({ foo: "bar" });
+        expect(cloudreveApp(initState, action)).toEqual({
+            ...initState,
+            siteConfig: {
+                foo: "bar",
+            },
+        });
+    });
+
+    it("should handle SET_SITE_CONFIG", () => {
+        // TODO: update to real anchor
+        const action = setSiteConfig({ foo: "bar" });
+        expect(cloudreveApp(initState, action)).toEqual({
+            ...initState,
+            siteConfig: {
+                foo: "bar",
+            },
+        });
+    });
+
+    it("should handle OPEN_MUSIC_DIALOG", () => {
+        const action = openMusicDialog();
+        expect(cloudreveApp(initState, action)).toEqual({
+            ...initState,
+            viewUpdate: {
+                ...initState.viewUpdate,
+                modals: {
+                    ...initState.viewUpdate.modals,
+                    music: true,
+                },
+                contextOpen: false,
+            },
+        });
+    });
+
+    it("should handle OPEN_REMOTE_DOWNLOAD_DIALOG", () => {
+        const action = openRemoteDownloadDialog();
+        expect(cloudreveApp(initState, action)).toEqual({
+            ...initState,
+            viewUpdate: {
+                ...initState.viewUpdate,
+                modals: {
+                    ...initState.viewUpdate.modals,
+                    remoteDownload: true,
+                },
+                contextOpen: false,
+            },
+        });
+    });
+
+    it("should handle OPEN_TORRENT_DOWNLOAD_DIALOG", () => {
+        const action = openTorrentDownloadDialog();
+        expect(cloudreveApp(initState, action)).toEqual({
+            ...initState,
+            viewUpdate: {
+                ...initState.viewUpdate,
+                modals: {
+                    ...initState.viewUpdate.modals,
+                    torrentDownload: true,
+                },
+                contextOpen: false,
+            },
+        });
+    });
+
+    it("should handle OPEN_DECOMPRESS_DIALOG", () => {
+        const action = openDecompressDialog();
+        expect(cloudreveApp(initState, action)).toEqual({
+            ...initState,
+            viewUpdate: {
+                ...initState.viewUpdate,
+                modals: {
+                    ...initState.viewUpdate.modals,
+                    decompress: true,
+                },
+                contextOpen: false,
+            },
+        });
+    });
+
+    it("should handle OPEN_COMPRESS_DIALOG", () => {
+        const action = openCompressDialog();
+        expect(cloudreveApp(initState, action)).toEqual({
+            ...initState,
+            viewUpdate: {
+                ...initState.viewUpdate,
+                modals: {
+                    ...initState.viewUpdate.modals,
+                    compress: true,
+                },
+                contextOpen: false,
+            },
+        });
+    });
+
+    it("should handle OPEN_GET_SOURCE_DIALOG", () => {
+        const action = openGetSourceDialog();
+        expect(cloudreveApp(initState, action)).toEqual({
+            ...initState,
+            viewUpdate: {
+                ...initState.viewUpdate,
+                modals: {
+                    ...initState.viewUpdate.modals,
+                    getSource: true,
+                },
+                contextOpen: false,
+            },
+        });
+    });
+
+    it("should handle OPEN_COPY_DIALOG", () => {
+        const action = openCopyDialog();
+        expect(cloudreveApp(initState, action)).toEqual({
+            ...initState,
+            viewUpdate: {
+                ...initState.viewUpdate,
+                modals: {
+                    ...initState.viewUpdate.modals,
+                    copy: true,
+                },
+                contextOpen: false,
+            },
+        });
+    });
+
+    it("should handle OPEN_LOADING_DIALOG", () => {
+        const action = openLoadingDialog("loading");
+        expect(cloudreveApp(initState, action)).toEqual({
+            ...initState,
+            viewUpdate: {
+                ...initState.viewUpdate,
+                modals: {
+                    ...initState.viewUpdate.modals,
+                    loading: true,
+                    loadingText: "loading",
+                },
+                contextOpen: false,
+            },
+        });
+    });
+
+    it("should handle CLOSE_ALL_MODALS", () => {
+        const action = closeAllModals();
+        expect(cloudreveApp(initState, action)).toEqual({
+            ...initState,
+            viewUpdate: {
+                ...initState.viewUpdate,
+                modals: {
+                    ...initState.viewUpdate.modals,
+                    createNewFolder: false,
+                    rename: false,
+                    move: false,
+                    remove: false,
+                    share: false,
+                    music: false,
+                    remoteDownload: false,
+                    torrentDownload: false,
+                    getSource: false,
+                    resave: false,
+                    copy: false,
+                    loading: false,
+                    compress: false,
+                    decompress: false,
+                },
+            },
+        });
+    });
+
+    it("should handle CHANGE_SUB_TITLE", async () => {
+        const store = mockStore(initState);
+        const action = changeSubTitle("test sub title");
+        await store.dispatch(action);
+        expect(store.getActions()).toEqual([setSubtitle("test sub title")]);
+        expect(document.title).toEqual("test sub title - Cloudreve");
+    });
+
+    it("should handle SET_SUBTITLE", () => {
+        const action = setSubtitle("test sub title 2");
+        expect(cloudreveApp(initState, action)).toEqual({
+            ...initState,
+            viewUpdate: {
+                ...initState.viewUpdate,
+                subTitle: "test sub title 2",
+            },
+        });
+    });
+
+    it("should handle TOGGLE_SNACKBAR", () => {
+        const action = toggleSnackbar(
+            "top",
+            "right",
+            "something wrong",
+            "error"
+        );
+        expect(cloudreveApp(initState, action)).toEqual({
+            ...initState,
+            viewUpdate: {
+                ...initState.viewUpdate,
+                snackbar: {
+                    toggle: true,
+                    vertical: "top",
+                    horizontal: "right",
+                    msg: "something wrong",
+                    color: "error",
+                },
+            },
+        });
+    });
+
+    it("should handle SET_MODALS_LOADING", () => {
+        const action = setModalsLoading("test loading status");
+        expect(cloudreveApp(initState, action)).toEqual({
+            ...initState,
+            viewUpdate: {
+                ...initState.viewUpdate,
+                modalsLoading: "test loading status",
+            },
+        });
+    });
+
+    it("should handle SET_SESSION_STATUS", () => {
+        const action = setSessionStatus(true);
+        expect(cloudreveApp(initState, action)).toEqual({
+            ...initState,
+            viewUpdate: {
+                ...initState.viewUpdate,
+                isLogin: true,
+            },
+        });
+    });
+
+    it("should handle REFRESH_FILE_LIST", () => {
+        const action = refreshFileList();
+        expect(cloudreveApp(initState, action)).toEqual({
+            ...initState,
+            navigator: {
+                ...initState.navigator,
+                refresh: false,
+            },
+            explorer: {
+                ...initState.explorer,
+                selected: [],
+                selectProps: {
+                    isMultiple: false,
+                    withFolder: false,
+                    withFile: false,
+                },
+            },
+        });
+    });
+
+    it("should handle SEARCH_MY_FILE", () => {
+        const action = searchMyFile("keyword");
+        expect(cloudreveApp(initState, action)).toEqual({
+            ...initState,
+            navigator: {
+                ...initState.navigator,
+                path: "/搜索结果",
+                refresh: true,
+            },
+            viewUpdate: {
+                ...initState.viewUpdate,
+                contextOpen: false,
+                navigatorError: false,
+                navigatorLoading: true,
+            },
+            explorer: {
+                ...initState.explorer,
+                selected: [],
+                selectProps: {
+                    isMultiple: false,
+                    withFolder: false,
+                    withFile: false,
+                },
+                keywords: "keyword",
+            },
+        });
+    });
+
+    it("should handle SHOW_IMG_PREIVEW", () => {
+        const action = showImgPreivew({ type: "file" });
+        const showImgState = {
+            ...initState,
+            explorer: {
+                ...initState.explorer,
+                fileList: [{ type: "file" }, { type: "dir" }],
+            },
+        };
+        expect(cloudreveApp(showImgState, action)).toEqual({
+            ...showImgState,
+            explorer: {
+                ...showImgState.explorer,
+                imgPreview: {
+                    ...showImgState.explorer.imgPreview,
+                    first: { type: "file" },
+                    other: [{ type: "file" }, { type: "dir" }],
+                },
+            },
+        });
+    });
+
+    it("should handle REFRESH_STORAGE", () => {
+        const action = refreshStorage();
+
+        expect(cloudreveApp(initState, action)).toEqual({
+            ...initState,
+            viewUpdate: {
+                ...initState.viewUpdate,
+                storageRefresh: true,
+            },
+        });
+    });
+
+    it("should handle SAVE_FILE", () => {
+        const action = saveFile();
+        expect(cloudreveApp(initState, action)).toEqual({
+            ...initState,
+            explorer: {
+                ...initState.explorer,
+                fileSave: true,
+            },
+        });
+    });
+
+    it("should handle SET_LAST_SELECT", () => {
+        const action = setLastSelect({ type: "file" }, 1);
+        expect(cloudreveApp(initState, action)).toEqual({
+            ...initState,
+            explorer: {
+                ...initState.explorer,
+                lastSelect: {
+                    file: { type: "file" },
+                    index: 1,
+                },
+            },
+        });
+    });
+
+    it("should handle SET_SHIFT_SELECTED_IDS", () => {
+        const action = setShiftSelectedIds(["1", "2"]);
+        expect(cloudreveApp(initState, action)).toEqual({
+            ...initState,
+            explorer: {
+                ...initState.explorer,
+                shiftSelectedIds: ["1", "2"],
+            },
+        });
+    });
+});
diff --git a/src/reducers/navigator.js b/src/reducers/navigator.js
new file mode 100644
index 0000000..2f42b7a
--- /dev/null
+++ b/src/reducers/navigator.js
@@ -0,0 +1,12 @@
+const navigator = (state = [], action) => {
+    switch (action.type) {
+        case "NAVIGATOR_TO":
+            return Object.assign({}, state, {
+                path: action.path,
+            });
+        default:
+            return state;
+    }
+};
+
+export default navigator;
diff --git a/src/redux/combineReducers.ts b/src/redux/combineReducers.ts
new file mode 100644
index 0000000..b27e06b
--- /dev/null
+++ b/src/redux/combineReducers.ts
@@ -0,0 +1,24 @@
+import {
+    combineReducers as combine,
+    ReducersMapObject,
+    AnyAction,
+} from "redux";
+import invariant from "invariant";
+
+export const combineReducers = (reducers: ReducersMapObject) => {
+    const combinedReducer = combine(reducers);
+    // TODO: define state type
+    return (state: any, action: AnyAction) => {
+        if (
+            action.type &&
+            !action.type.startsWith("@@") &&
+            action.type.split("/").length > 1
+        ) {
+            const namespace = action.type.split("/")[0];
+            const reducer = reducers[namespace];
+            invariant(!!reducer, `reducer ${namespace} doesn't exist`);
+            return reducer && reducer(state, action);
+        }
+        return combinedReducer(state, action);
+    };
+};
diff --git a/src/redux/explorer/action.ts b/src/redux/explorer/action.ts
new file mode 100644
index 0000000..76fe587
--- /dev/null
+++ b/src/redux/explorer/action.ts
@@ -0,0 +1,1123 @@
+import { AnyAction } from "redux";
+import { ThunkAction } from "redux-thunk";
+import { CloudreveFile, SortMethod } from "./../../types/index";
+import { closeContextMenu, setPagination } from "../viewUpdate/action";
+import { Policy } from "../../component/Uploader/core/types";
+import streamSaver from "streamsaver";
+import "../../utils/zip";
+import pathHelper from "../../utils/page";
+import { filePath, isMac } from "../../utils";
+import API, { getBaseURL } from "../../middleware/Api";
+import { pathJoin, trimPrefix } from "../../component/Uploader/core/utils";
+import { getPreviewPath, walk } from "../../utils/api";
+import { askForOption, trySharePurchase } from "./async";
+import Auth from "../../middleware/Auth";
+import { encodingRequired, isPreviewable } from "../../config";
+import { push } from "connected-react-router";
+import {
+    changeContextMenu,
+    closeAllModals,
+    navigateTo,
+    openDirectoryDownloadDialog,
+    openGetSourceDialog,
+    openLoadingDialog,
+    openTorrentDownloadDialog,
+    showAudioPreview,
+    showImgPreivew,
+    toggleSnackbar,
+} from "./index";
+import { getDownloadURL } from "../../services/file";
+import i18next from "../../i18n";
+import {
+    getFileSystemDirectoryPaths,
+    saveFileToFileSystemDirectory,
+    verifyFileSystemRWPermission,
+} from "../../utils/filesystem";
+import { sortMethodFuncs } from "../../component/FileManager/Sort";
+
+export interface ActionSetFileList extends AnyAction {
+    type: "SET_FILE_LIST";
+    list: CloudreveFile[];
+}
+export const setFileList = (list: CloudreveFile[]): ActionSetFileList => {
+    return {
+        type: "SET_FILE_LIST",
+        list,
+    };
+};
+
+export interface ActionSetDirList extends AnyAction {
+    type: "SET_DIR_LIST";
+    list: CloudreveFile[];
+}
+export const setDirList = (list: CloudreveFile[]): ActionSetDirList => {
+    return {
+        type: "SET_DIR_LIST",
+        list,
+    };
+};
+
+export interface ActionSetSortMethod extends AnyAction {
+    type: "SET_SORT_METHOD";
+    method: SortMethod;
+}
+export const setSortMethod = (method: SortMethod): ActionSetSortMethod => {
+    return {
+        type: "SET_SORT_METHOD",
+        method,
+    };
+};
+
+export const setSideBar = (open: boolean) => {
+    return {
+        type: "SET_SIDE_BAR",
+        open,
+    };
+};
+
+export const setCurrentPolicy = (policy: Policy) => {
+    return {
+        type: "SET_CURRENT_POLICY",
+        policy,
+    };
+};
+
+export const removeSelectedTargets = (fileIds: any) => {
+    return {
+        type: "RMOVE_SELECTED_TARGETS",
+        fileIds,
+    };
+};
+export const addSelectedTargets = (targets: any) => {
+    return {
+        type: "ADD_SELECTED_TARGETS",
+        targets,
+    };
+};
+export const setSelectedTarget = (targets: any) => {
+    return {
+        type: "SET_SELECTED_TARGET",
+        targets,
+    };
+};
+export const setLastSelect = (file: any, index: any) => {
+    return {
+        type: "SET_LAST_SELECT",
+        file,
+        index,
+    };
+};
+export const setShiftSelectedIds = (shiftSelectedIds: any) => {
+    return {
+        type: "SET_SHIFT_SELECTED_IDS",
+        shiftSelectedIds,
+    };
+};
+
+export const selectAll = (): ThunkAction<any, any, any, any> => {
+    return (dispatch, getState): void => {
+        const state = getState();
+        const { selected, fileList, dirList } = state.explorer;
+        if (selected.length >= dirList.length + fileList.length) {
+            dispatch(setSelectedTarget([]));
+        } else {
+            dispatch(setSelectedTarget([...dirList, ...fileList]));
+        }
+    };
+};
+
+export const updateFileList = (
+    list: CloudreveFile[]
+): ThunkAction<any, any, any, any> => {
+    return (dispatch, getState): void => {
+        const state = getState();
+        // TODO: define state type
+        const { sortMethod, pagination } = state.viewUpdate;
+        const dirList = list.filter((x) => {
+            return x.type === "dir";
+        });
+        const fileList = list.filter((x) => {
+            return x.type === "file";
+        });
+        const sortFunc = sortMethodFuncs[sortMethod as SortMethod];
+        dispatch(setDirList(dirList.sort(sortFunc)));
+        dispatch(setFileList(fileList.sort(sortFunc)));
+        const total = dirList.length + fileList.length;
+        if (pagination.page * pagination.size > total) {
+            dispatch(
+                setPagination({
+                    ...pagination,
+                    page: Math.max(Math.ceil(total / pagination.size), 1),
+                })
+            );
+        }
+    };
+};
+
+export const changeSortMethod = (
+    method: SortMethod
+): ThunkAction<any, any, any, any> => {
+    return (dispatch, getState): void => {
+        const state = getState();
+        const { fileList, dirList } = state.explorer;
+        const sortFunc = sortMethodFuncs[method];
+        Auth.SetPreference("sort", method);
+        dispatch(setSortMethod(method));
+        dispatch(setDirList(dirList.slice().sort(sortFunc)));
+        dispatch(setFileList(fileList.slice().sort(sortFunc)));
+    };
+};
+
+export const toggleObjectInfoSidebar = (
+    open: boolean
+): ThunkAction<any, any, any, any> => {
+    return (dispatch, getState): void => {
+        const state = getState();
+        if (open) {
+            dispatch(closeContextMenu());
+        }
+        dispatch(setSideBar(true));
+    };
+};
+
+export const serverSideBatchDownload = (
+    share: any
+): ThunkAction<any, any, any, any> => {
+    return (dispatch, getState): void => {
+        dispatch(
+            openLoadingDialog(i18next.t("fileManager.preparingBathDownload"))
+        );
+        const {
+            explorer: { selected, fileList, dirList },
+            router: {
+                location: { pathname },
+            },
+        } = getState();
+        const dirs: string[] = [],
+            items: string[] = [];
+        const fileSources: CloudreveFile[] = selected.length ? selected : [...dirList, ...fileList];
+        fileSources.map((value) => {
+            if (value.type === "dir") {
+                dirs.push(value.id);
+            } else {
+                items.push(value.id);
+            }
+            return null;
+        });
+
+        let reqURL = "/file/archive";
+        const postBody = {
+            items: items,
+            dirs: dirs,
+        };
+        if (pathHelper.isSharePage(pathname)) {
+            reqURL = "/share/archive/" + share.key;
+            postBody["path"] = fileSources[0].path;
+        }
+
+        API.post(reqURL, postBody)
+            .then((response: any) => {
+                if (response.rawData.code === 0) {
+                    dispatch(closeAllModals());
+                    window.location.assign(response.data);
+                } else {
+                    dispatch(
+                        toggleSnackbar(
+                            "top",
+                            "right",
+                            response.rawData.msg,
+                            "warning"
+                        )
+                    );
+                }
+                dispatch(closeAllModals());
+            })
+            .catch((error) => {
+                dispatch(
+                    toggleSnackbar("top", "right", error.message, "error")
+                );
+                dispatch(closeAllModals());
+            });
+    };
+};
+
+export const startDownload = (
+    share: any,
+    file: CloudreveFile
+): ThunkAction<any, any, any, any> => {
+    return async (dispatch, getState): Promise<void> => {
+        const {
+            router: {
+                location: { pathname },
+            },
+        } = getState();
+        const user = Auth.GetUser();
+        if (
+            pathHelper.isSharePage(pathname) &&
+            !Auth.Check() &&
+            user &&
+            !user.group.shareDownload
+        ) {
+            dispatch(
+                toggleSnackbar(
+                    "top",
+                    "right",
+                    i18next.t("share.pleaseLogin"),
+                    "warning"
+                )
+            );
+            return;
+        }
+
+        dispatch(changeContextMenu("file", false));
+
+        try {
+            await dispatch(trySharePurchase(share));
+        } catch (e) {
+            return;
+        }
+
+        dispatch(openLoadingDialog(i18next.t("fileManager.preparingDownload")));
+        try {
+            const res = await getDownloadURL(file ? file : share);
+            window.location.assign(res.data);
+            dispatch(closeAllModals());
+        } catch (e) {
+            dispatch(toggleSnackbar("top", "right", e.message, "warning"));
+            dispatch(closeAllModals());
+        }
+    };
+};
+
+export const startBatchDownload = (
+    share: any
+): ThunkAction<any, any, any, any> => {
+    return async (dispatch, getState): Promise<void> => {
+        dispatch(changeContextMenu("file", false));
+        const {
+            explorer: { selected, fileList, dirList },
+        } = getState();
+        try {
+            await dispatch(trySharePurchase(share));
+        } catch (e) {
+            return;
+        }
+
+        const user = Auth.GetUser();
+        if (user.group.allowArchiveDownload) {
+            let option: any;
+            try {
+                option = await dispatch(
+                    askForOption(
+                        [
+                            {
+                                key: "client",
+                                name: i18next.t(
+                                    "fileManager.browserBatchDownload"
+                                ),
+                                description: i18next.t(
+                                    "fileManager.browserBatchDownloadDescription"
+                                ),
+                            },
+                            {
+                                key: "server",
+                                name: i18next.t(
+                                    "fileManager.serverBatchDownload"
+                                ),
+                                description: i18next.t(
+                                    "fileManager.serverBatchDownloadDescription"
+                                ),
+                            },
+                        ],
+                        i18next.t("fileManager.selectArchiveMethod")
+                    )
+                );
+            } catch (e) {
+                return;
+            }
+
+            if (option.key === "server") {
+                dispatch(serverSideBatchDownload(share));
+                return;
+            }
+        }
+
+        dispatch(openLoadingDialog(i18next.t("modals.listingFiles")));
+
+        let queue: CloudreveFile[] = [];
+        try {
+            const walkSources = selected.length ? selected : [...dirList, ...fileList];
+            queue = await walk(walkSources, share);
+        } catch (e) {
+            dispatch(
+                toggleSnackbar(
+                    "top",
+                    "right",
+                    i18next.t("modals.listingFileError", {
+                        message: e.message,
+                    }),
+                    "warning"
+                )
+            );
+            dispatch(closeAllModals());
+            return;
+        }
+
+        dispatch(closeAllModals());
+        dispatch(
+            toggleSnackbar(
+                "top",
+                "center",
+                i18next.t("fileManager.batchDownloadStarted"),
+                "info"
+            )
+        );
+        const fileStream = streamSaver.createWriteStream("archive.zip");
+        let failed = 0;
+        const readableZipStream = new (window as any).ZIP({
+            start(ctrl: any) {
+                // ctrl.close()
+            },
+            async pull(ctrl: any) {
+                while (queue.length > 0) {
+                    const next = queue.pop();
+                    if (next && next.type === "file") {
+                        const previewPath = getPreviewPath(next);
+                        const url =
+                            getBaseURL() +
+                            (pathHelper.isSharePage(location.pathname)
+                                ? "/share/preview/" +
+                                  share.key +
+                                  (previewPath !== ""
+                                      ? "?path=" + previewPath
+                                      : "")
+                                : "/file/preview/" + next.id);
+                        try {
+                            const res = await fetch(url, { cache: "no-cache" });
+                            const stream = () => res.body;
+                            const name = trimPrefix(
+                                pathJoin([next.path, next.name]),
+                                "/"
+                            );
+                            ctrl.enqueue({ name, stream });
+                            return;
+                        } catch (e) {
+                            failed++;
+                        }
+                    }
+                }
+                ctrl.close();
+            },
+        });
+
+        // more optimized
+        if (window.WritableStream && readableZipStream.pipeTo) {
+            return readableZipStream
+                .pipeTo(fileStream)
+                .then(() => dispatch(closeAllModals()))
+                .catch((e) => {
+                    console.log(e);
+                    toggleSnackbar(
+                        "top",
+                        "right",
+                        i18next.t("modals.batchDownloadError", {
+                            message: e && e.message,
+                        }),
+                        "warning"
+                    );
+                    dispatch(closeAllModals());
+                });
+        }
+    };
+};
+
+let directoryDownloadAbortController: AbortController;
+export const cancelDirectoryDownload = () =>
+    directoryDownloadAbortController.abort();
+
+export const startDirectoryDownload = (
+    share: any
+): ThunkAction<any, any, any, any> => {
+    return async (dispatch, getState): Promise<void> => {
+        dispatch(changeContextMenu("file", false));
+
+        directoryDownloadAbortController = new AbortController();
+        if (!window.showDirectoryPicker || !window.isSecureContext) {
+            return;
+        }
+        let handle: FileSystemDirectoryHandle;
+        // we should show directory picker at first
+        // https://web.dev/file-system-access/#:~:text=handle%3B%0A%7D-,Gotchas,-Sometimes%20processing%20the
+        try {
+            // can't use suggestedName for showDirectoryPicker (only available showSaveFilePicker)
+            handle = await window.showDirectoryPicker({
+                startIn: "downloads",
+                mode: "readwrite",
+            });
+            // we should obtain the readwrite permission for the directory at first
+            if (!(await verifyFileSystemRWPermission(handle))) {
+                throw new Error(
+                    i18next.t("fileManager.directoryDownloadPermissionError")
+                );
+            }
+            dispatch(closeAllModals());
+        } catch (e) {
+            dispatch(
+                toggleSnackbar(
+                    "top",
+                    "right",
+                    i18next.t("modals.directoryDownloadError", {
+                        msg: e && e.message,
+                    }),
+                    "error"
+                )
+            );
+            dispatch(closeAllModals());
+            return;
+        }
+
+        const {
+            explorer: { selected },
+            navigator: { path },
+        } = getState();
+
+        // list files to download
+        dispatch(openLoadingDialog(i18next.t("modals.listingFiles")));
+
+        let queue: CloudreveFile[] = [];
+        try {
+            queue = await walk(selected, share);
+        } catch (e) {
+            dispatch(
+                toggleSnackbar(
+                    "top",
+                    "right",
+                    i18next.t("modals.listingFileError", {
+                        message: e.message,
+                    }),
+                    "warning"
+                )
+            );
+            dispatch(closeAllModals());
+            return;
+        }
+
+        dispatch(closeAllModals());
+
+        let failed = 0;
+        let option: any;
+        // preparation for downloading
+        // get the files in the directory to compare with queue files
+        // parent: ""
+        const fsPaths = await getFileSystemDirectoryPaths(handle, "");
+
+        // path: / or /abc (no sep suffix)
+        // file.path: /abc/d (no sep suffix)
+        // fsPaths: ["abc/d/e.bin",]
+        const duplicates = queue
+            .map((file) =>
+                trimPrefix(
+                    `${file.path}/${file.name}`,
+                    path === "/" ? "/" : path + "/"
+                )
+            )
+            .filter((path) => fsPaths.includes(path));
+
+        // we should ask users for the duplication handle method
+        if (duplicates.length > 0) {
+            try {
+                option = await dispatch(
+                    askForOption(
+                        [
+                            {
+                                key: "replace",
+                                name: i18next.t(
+                                    "fileManager.directoryDownloadReplace"
+                                ),
+                                description: i18next.t(
+                                    "fileManager.directoryDownloadReplaceDescription",
+                                    {
+                                        // display the first three duplications
+                                        duplicates: duplicates
+                                            .slice(
+                                                0,
+                                                duplicates.length >= 3
+                                                    ? 3
+                                                    : duplicates.length
+                                            )
+                                            .join(", "),
+                                        num: duplicates.length,
+                                    }
+                                ),
+                            },
+                            {
+                                key: "skip",
+                                name: i18next.t(
+                                    "fileManager.directoryDownloadSkip"
+                                ),
+                                description: i18next.t(
+                                    "fileManager.directoryDownloadSkipDescription",
+                                    {
+                                        duplicates: duplicates
+                                            .slice(
+                                                0,
+                                                duplicates.length >= 3
+                                                    ? 3
+                                                    : duplicates.length
+                                            )
+                                            .join(", "),
+                                        num: duplicates.length,
+                                    }
+                                ),
+                            },
+                        ],
+                        i18next.t(
+                            "fileManager.selectDirectoryDuplicationMethod"
+                        )
+                    )
+                );
+            } catch (e) {
+                return;
+            }
+        }
+        dispatch(closeAllModals());
+
+        // start the download
+        dispatch(
+            toggleSnackbar(
+                "top",
+                "center",
+                i18next.t("fileManager.directoryDownloadStarted"),
+                "info"
+            )
+        );
+
+        const updateLog = (log, done) => {
+            dispatch(openDirectoryDownloadDialog(true, log, done));
+        };
+        let log = "";
+
+        while (queue.length > 0) {
+            const next = queue.pop();
+            if (next && next.type === "file") {
+                // donload url
+                const previewPath = getPreviewPath(next);
+                const url =
+                    getBaseURL() +
+                    (pathHelper.isSharePage(location.pathname)
+                        ? "/share/preview/" +
+                          share.key +
+                          (previewPath !== "" ? "?path=" + previewPath : "")
+                        : "/file/preview/" + next.id);
+
+                // path to save this file
+                // path: / or /abc (no sep suffix)
+                // next.path: /abc/d (no sep suffix)
+                // name: d/e.bin
+                const name = trimPrefix(
+                    pathJoin([next.path, next.name]),
+                    path === "/" ? "/" : path + "/"
+                );
+                // TODO: improve the display of log
+                // can we turn the upload queue component to the transition queue?
+                // then we can easily cancel or retry the download
+                // and the batch download queue can show as well.
+                log =
+                    (log === "" ? "" : log + "\n\n") +
+                    i18next.t("modals.directoryDownloadStarted", { name });
+                updateLog(log, false);
+                try {
+                    if (duplicates.includes(name)) {
+                        if (option.key === "skip") {
+                            log +=
+                                "\n" +
+                                i18next.t(
+                                    "modals.directoryDownloadSkipNotifiction",
+                                    {
+                                        name,
+                                    }
+                                );
+                            updateLog(log, false);
+                            continue;
+                        } else {
+                            log +=
+                                "\n" +
+                                i18next.t(
+                                    "modals.directoryDownloadReplaceNotifiction",
+                                    {
+                                        name,
+                                    }
+                                );
+                            updateLog(log, false);
+                        }
+                    }
+
+                    // TODO: need concurrent task queue?
+                    const res = await fetch(url, {
+                        cache: "no-cache",
+                        signal: directoryDownloadAbortController.signal,
+                    });
+                    await saveFileToFileSystemDirectory(
+                        handle,
+                        await res.blob(),
+                        name
+                    );
+                    log += "\n" + i18next.t("modals.directoryDownloadFinished");
+                    updateLog(log, false);
+                } catch (e) {
+                    if (e.name === "AbortError") {
+                        dispatch(
+                            toggleSnackbar(
+                                "top",
+                                "right",
+                                i18next.t("modals.directoryDownloadCancelled"),
+                                "warning"
+                            )
+                        );
+                        log +=
+                            "\n\n" +
+                            i18next.t("modals.directoryDownloadCancelled");
+                        updateLog(log, true);
+                        return;
+                    }
+
+                    failed++;
+                    dispatch(
+                        toggleSnackbar(
+                            "top",
+                            "right",
+                            i18next.t(
+                                "modals.directoryDownloadErrorNotification",
+                                {
+                                    name,
+                                    msg: e && e.message,
+                                }
+                            ),
+                            "warning"
+                        )
+                    );
+                    log +=
+                        "\n" +
+                        i18next.t("modals.directoryDownloadError", {
+                            msg: e.message,
+                        });
+                    updateLog(log, false);
+                }
+            }
+        }
+        log +=
+            "\n" +
+            (failed === 0
+                ? i18next.t("fileManager.directoryDownloadFinished")
+                : i18next.t("fileManager.directoryDownloadFinishedWithError", {
+                      failed,
+                  }));
+        updateLog(log, true);
+
+        dispatch(
+            toggleSnackbar(
+                "top",
+                "center",
+                failed === 0
+                    ? i18next.t("fileManager.directoryDownloadFinished")
+                    : i18next.t(
+                          "fileManager.directoryDownloadFinishedWithError",
+                          {
+                              failed,
+                          }
+                      ),
+                "success"
+            )
+        );
+    };
+};
+
+export const getViewerURL = (
+    viewer: string,
+    file: any,
+    isShare: boolean | ""
+): string => {
+    const previewPath = getPreviewPath(file);
+    if (isShare) {
+        return (
+            "/s/" +
+            file.key +
+            `/${viewer}?name=` +
+            encodeURIComponent(file.name) +
+            "&share_path=" +
+            previewPath
+        );
+    }
+
+    return `/${viewer}?p=` + previewPath + "&id=" + file.id;
+};
+
+export const openViewer = (
+    viewer: string,
+    file: any,
+    isShare: boolean | ""
+) => {
+    return (dispatch: any, getState: any) => {
+        dispatch(push(getViewerURL(viewer, file, isShare)));
+    };
+};
+
+export const openPreview = (share: any) => {
+    return (dispatch: any, getState: any) => {
+        const {
+            explorer: { selected },
+            router: {
+                location: { pathname },
+            },
+        } = getState();
+        const isShare = pathHelper.isSharePage(pathname);
+        if (isShare) {
+            const user = Auth.GetUser();
+            if (!Auth.Check() && user && !user.group.shareDownload) {
+                dispatch(
+                    toggleSnackbar(
+                        "top",
+                        "right",
+                        i18next.t("share.pleaseLogin"),
+                        "warning"
+                    )
+                );
+                dispatch(changeContextMenu("file", false));
+                return;
+            }
+        }
+
+        dispatch(changeContextMenu("file", false));
+        switch (isPreviewable(selected[0].name)) {
+            case "img":
+                dispatch(showImgPreivew(selected[0]));
+                return;
+            case "msDoc":
+                dispatch(openViewer("doc", selected[0], isShare));
+                return;
+            case "audio":
+                dispatch(showAudioPreview(selected[0]));
+                return;
+            case "video":
+                dispatch(openViewer("video", selected[0], isShare));
+                return;
+            case "pdf":
+                dispatch(openViewer("pdf", selected[0], isShare));
+                return;
+            case "edit":
+                dispatch(openViewer("text", selected[0], isShare));
+                return;
+            case "code":
+                dispatch(openViewer("code", selected[0], isShare));
+                return;
+            case "epub":
+                dispatch(openViewer("epub", selected[0], isShare));
+                return;
+            default:
+                dispatch(startDownload(share, selected[0]));
+                return;
+        }
+    };
+};
+export const selectFile = (file: any, event: any, fileIndex: any) => {
+    const { ctrlKey, metaKey, shiftKey } = event;
+    return (dispatch: any, getState: any) => {
+        // 多种组合操作忽略
+        if (
+            [ctrlKey, shiftKey].filter(Boolean).length > 1 ||
+            [metaKey, shiftKey].filter(Boolean).length > 1
+        ) {
+            return;
+        }
+        const isMacbook = isMac();
+        const { explorer } = getState();
+        const { selected, lastSelect, dirList, fileList, shiftSelectedIds } =
+            explorer;
+        if (shiftKey && !ctrlKey && !metaKey && selected.length !== 0) {
+            // shift 多选
+            // 取消原有选择
+            dispatch(removeSelectedTargets(selected.map((v: any) => v.id)));
+            const all = [...dirList, ...fileList];
+            // 添加新选择
+            const begin = Math.min(lastSelect.index, fileIndex);
+            const end = Math.max(lastSelect.index, fileIndex);
+            const list = file.type === "dir" ? dirList : fileList;
+            const newShiftSelected = all.slice(begin, end + 1);
+            return dispatch(addSelectedTargets(newShiftSelected));
+        }
+        dispatch(setLastSelect(file, fileIndex));
+        dispatch(setShiftSelectedIds([]));
+        if ((ctrlKey && !isMacbook) || (metaKey && isMacbook)) {
+            // Ctrl/Command 单击添加/删除
+            const presentIndex = selected.findIndex((value: any) => {
+                return value.id === file.id;
+            });
+            if (presentIndex !== -1) {
+                return dispatch(removeSelectedTargets([file.id]));
+            }
+            return dispatch(addSelectedTargets([file]));
+        }
+        // 单选
+        return dispatch(setSelectedTarget([file]));
+    };
+};
+
+export const submitCompressTask = (fileName: string, path: string) => {
+    return async (dispatch: any, getState: any) => {
+        const {
+            explorer: { selected },
+        } = getState();
+        const dirs: string[] = [],
+            items: string[] = [];
+        // eslint-disable-next-line
+        selected.map((value) => {
+            if (value.type === "dir") {
+                dirs.push(value.id);
+            } else {
+                items.push(value.id);
+            }
+        });
+
+        return await API.post("/file/compress", {
+            src: {
+                dirs: dirs,
+                items: items,
+            },
+            name: fileName,
+            dst: path === "//" ? "/" : path,
+        });
+    };
+};
+
+const encodings = [
+    "ibm866",
+    "iso8859_2",
+    "iso8859_3",
+    "iso8859_4",
+    "iso8859_5",
+    "iso8859_6",
+    "iso8859_7",
+    "iso8859_8",
+    "iso8859_8I",
+    "iso8859_10",
+    "iso8859_13",
+    "iso8859_14",
+    "iso8859_15",
+    "iso8859_16",
+    "koi8r",
+    "koi8u",
+    "macintosh",
+    "windows874",
+    "windows1250",
+    "windows1251",
+    "windows1252",
+    "windows1253",
+    "windows1254",
+    "windows1255",
+    "windows1256",
+    "windows1257",
+    "windows1258",
+    "macintoshcyrillic",
+    "gbk",
+    "big5",
+    "eucjp",
+    "iso2022jp",
+    "shiftjis",
+    "euckr",
+    "utf16be",
+    "utf16le",
+];
+
+export const submitDecompressTask = (path: string) => {
+    return async (dispatch: any, getState: any) => {
+        const {
+            explorer: { selected },
+        } = getState();
+
+        let encoding = "";
+        if (selected.length > 0 && encodingRequired(selected[0].name)) {
+            let option: any;
+            try {
+                const allOptions = encodings.map((e) => {
+                    return {
+                        key: e,
+                        name: e.toUpperCase(),
+                    };
+                });
+                option = await dispatch(
+                    askForOption(
+                        [
+                            {
+                                key: "",
+                                name: i18next.t("modals.defaultEncoding"),
+                            },
+                            {
+                                key: "gb18030",
+                                name: "GB18030",
+                                description: i18next.t(
+                                    "modals.chineseMajorEncoding"
+                                ),
+                            },
+                            ...allOptions,
+                        ],
+                        i18next.t("modals.selectEncoding")
+                    )
+                );
+            } catch (e) {
+                throw new Error(i18next.t("modals.noEncodingSelected"));
+            }
+
+            encoding = option.key;
+        }
+
+        return await API.post("/file/decompress", {
+            src: filePath(selected[0]),
+            dst: path === "//" ? "/" : path,
+            encoding: encoding,
+        });
+    };
+};
+
+export const batchGetSource = (): ThunkAction<any, any, any, any> => {
+    return async (dispatch, getState): Promise<any> => {
+        const {
+            explorer: { selected },
+            router: {
+                location: { pathname },
+            },
+        } = getState();
+
+        if (selected.findIndex((f) => f.type === "dir") >= 0) {
+            dispatch(openLoadingDialog(i18next.t("modals.listingFiles")));
+        }
+
+        let queue: CloudreveFile[] = [];
+        try {
+            queue = await walk(selected, null);
+        } catch (e) {
+            dispatch(
+                toggleSnackbar(
+                    "top",
+                    "right",
+                    i18next.t("modals.listingFileError", {
+                        message: e.message,
+                    }),
+                    "warning"
+                )
+            );
+            dispatch(closeAllModals());
+            return;
+        }
+
+        dispatch(openLoadingDialog(i18next.t("modals.generatingSourceLinks")));
+
+        const items = queue
+            .filter((value) => value.source_enabled && value.type === "file")
+            .map((v) => v.id);
+
+        if (items.length === 0) {
+            dispatch(
+                toggleSnackbar(
+                    "top",
+                    "right",
+                    i18next.t("modals.noFileCanGenerateSourceLink"),
+                    "warning"
+                )
+            );
+            dispatch(closeAllModals());
+            return;
+        }
+
+        const user = Auth.GetUser();
+        if (items.length > user.group.sourceBatch) {
+            dispatch(
+                toggleSnackbar(
+                    "top",
+                    "right",
+                    i18next.t("modals.sourceBatchSizeExceeded", {
+                        limit: user.group.sourceBatch,
+                    }),
+                    "warning"
+                )
+            );
+            dispatch(closeAllModals());
+            return;
+        }
+
+        API.post("/file/source", { items: items })
+            .then((response) => {
+                dispatch(closeAllModals());
+                if (response.data.length == 1 && response.data[0].error) {
+                    dispatch(
+                        toggleSnackbar(
+                            "top",
+                            "right",
+                            response.data[0].error,
+                            "warning"
+                        )
+                    );
+                    return;
+                }
+
+                dispatch(
+                    openGetSourceDialog(
+                        response.data.length == 1
+                            ? response.data[0].url
+                            : response.data
+                                  .map(
+                                      (res) =>
+                                          `${res.name}: ${res.url}${
+                                              res.error ? res.error : ""
+                                          }`
+                                  )
+                                  .join("\n")
+                    )
+                );
+            })
+            .catch((error) => {
+                dispatch(
+                    toggleSnackbar("top", "right", error.message, "warning")
+                );
+                dispatch(closeAllModals());
+            });
+    };
+};
+
+export const openTorrentDownload = (): ThunkAction<any, any, any, any> => {
+    return (dispatch, getState): void => {
+        const {
+            explorer: { selected },
+        } = getState();
+        dispatch(openTorrentDownloadDialog(selected[0]));
+    };
+};
+
+export const openParentFolder = (): ThunkAction<any, any, any, any> => {
+    return async (dispatch, getState): Promise<any> => {
+        const {
+            explorer: { selected },
+        } = getState();
+
+        dispatch(openLoadingDialog(i18next.t("modals.processing")));
+        API.get(
+            "/object/property/" +
+            selected[0].id +
+            "?trace_root=true&is_folder=" +
+            (selected[0].type === "dir").toString()
+        )
+            .then((response) => {
+                const path =
+                    response.data.path === ""
+                        ? selected[0].path
+                        : response.data.path;
+                dispatch(navigateTo(path));
+                dispatch(closeAllModals());
+            })
+            .catch((error) => {
+                dispatch(
+                    toggleSnackbar("top", "right", error.message, "warning")
+                );
+                dispatch(closeAllModals());
+            });
+    };
+};
diff --git a/src/redux/explorer/async.ts b/src/redux/explorer/async.ts
new file mode 100644
index 0000000..bf4e52d
--- /dev/null
+++ b/src/redux/explorer/async.ts
@@ -0,0 +1,88 @@
+import { ThunkAction } from "redux-thunk";
+import Auth from "../../middleware/Auth";
+import pathHelper from "../../utils/page";
+import { closeAllModals, confirmPurchase, toggleSnackbar } from "./index";
+import { setOptionModal } from "../viewUpdate/action";
+import i18next from "../../i18n";
+
+export const askForOption = (
+    options: any,
+    title: string
+): ThunkAction<any, any, any, any> => {
+    return async (dispatch, getState): Promise<any> => {
+        return new Promise<void>((resolve, reject) => {
+            const dialog = {
+                open: true,
+                title: title,
+                options: options,
+            };
+            dispatch(
+                setOptionModal({
+                    ...dialog,
+                    onClose: () => {
+                        dispatch(setOptionModal({ ...dialog, open: false }));
+                        reject(i18next.t("fileManager.userDenied"));
+                    },
+                    callback: (option: any) => {
+                        resolve(option);
+                        dispatch(setOptionModal({ ...dialog, open: false }));
+                    },
+                })
+            );
+        });
+    };
+};
+
+const purchased = new Map<string, boolean>();
+
+export const trySharePurchase = (
+    share: any
+): ThunkAction<any, any, any, any> => {
+    return async (dispatch, getState): Promise<void> => {
+        return new Promise<void>((resolve, reject) => {
+            const {
+                router: {
+                    location: { pathname },
+                },
+            } = getState();
+            if (pathHelper.isSharePage(pathname) && share && share.score > 0) {
+                if (!Auth.Check()) {
+                    dispatch(
+                        toggleSnackbar(
+                            "top",
+                            "right",
+                            i18next.t("share.pleaseLogin"),
+                            "warning"
+                        )
+                    );
+                    dispatch(closeAllModals());
+                    reject(i18next.t("fileManager.userDenied"));
+                    return;
+                }
+
+                if (
+                    !Auth.GetUser().group.shareFree &&
+                    !purchased.has(share.key)
+                ) {
+                    dispatch(
+                        confirmPurchase({
+                            score: share.score,
+                            onClose: () => {
+                                dispatch(confirmPurchase(undefined));
+                                reject(i18next.t("fileManager.userDenied"));
+                            },
+                            callback: () => {
+                                purchased.set(share.key, true);
+                                resolve();
+                                dispatch(confirmPurchase(undefined));
+                            },
+                        })
+                    );
+                    return;
+                }
+            }
+
+            resolve();
+        });
+    };
+};
diff --git a/src/redux/explorer/index.ts b/src/redux/explorer/index.ts
new file mode 100644
index 0000000..71683fd
--- /dev/null
+++ b/src/redux/explorer/index.ts
@@ -0,0 +1,300 @@
+import * as actions from "./action";
+import * as reducers from "./reducer";
+import { setPagination } from "../viewUpdate/action";
+
+export default {
+    actions,
+    reducers,
+};
+export { selectFile } from "./action";
+export { openPreview } from "./action";
+export { setShiftSelectedIds } from "./action";
+export { setLastSelect } from "./action";
+export { setSelectedTarget } from "./action";
+export { addSelectedTargets } from "./action";
+export { removeSelectedTargets } from "./action";
+export const setNavigator = (path: any, navigatorLoading: any) => {
+    return {
+        type: "SET_NAVIGATOR",
+        path,
+        navigatorLoading,
+    };
+};
+export const navigateTo = (path: any) => {
+    return (dispatch: any, getState: any) => {
+        const state = getState();
+        const navigatorLoading = path !== state.navigator.path;
+        if (navigatorLoading) {
+            dispatch(
+                setPagination({
+                    ...state.viewUpdate.pagination,
+                    page: 1,
+                })
+            );
+        }
+        dispatch(setNavigator(path, navigatorLoading));
+    };
+};
+export const navigateUp = () => {
+    return (dispatch, getState) => {
+        const state = getState();
+        const pathSplit = state.navigator.path.split("/");
+        pathSplit.pop();
+        const newPath = pathSplit.length === 1 ? "/" : pathSplit.join("/");
+        const navigatorLoading = newPath !== state.navigator.path;
+        if (navigatorLoading) {
+            dispatch(
+                setPagination({
+                    ...state.viewUpdate.pagination,
+                    page: 1,
+                })
+            );
+        }
+        dispatch(setNavigator(newPath, navigatorLoading));
+    };
+};
+export const drawerToggleAction = (open) => {
+    return {
+        type: "DRAWER_TOGGLE",
+        open: open,
+    };
+};
+export const dragAndDrop = (source, target) => {
+    return {
+        type: "DRAG_AND_DROP",
+        source: source,
+        target: target,
+    };
+};
+export const changeViewMethod = (method) => {
+    return {
+        type: "CHANGE_VIEW_METHOD",
+        method: method,
+    };
+};
+export const toggleDaylightMode = () => {
+    return {
+        type: "TOGGLE_DAYLIGHT_MODE",
+    };
+};
+// Deprecated
+export const changeContextMenu = (type, open) => {
+    return {
+        type: "CHANGE_CONTEXT_MENU",
+        menuType: type,
+        open: open,
+    };
+};
+export const setNavigatorLoadingStatus = (status) => {
+    return {
+        type: "SET_NAVIGATOR_LOADING_STATUE",
+        status: status,
+    };
+};
+export const setNavigatorError = (status, msg) => {
+    return {
+        type: "SET_NAVIGATOR_ERROR",
+        status: status,
+        msg: msg,
+    };
+};
+export const openCreateFolderDialog = () => {
+    return {
+        type: "OPEN_CREATE_FOLDER_DIALOG",
+    };
+};
+export const openCreateFileDialog = () => {
+    return {
+        type: "OPEN_CREATE_FILE_DIALOG",
+    };
+};
+export const setUserPopover = (anchor) => {
+    return {
+        type: "SET_USER_POPOVER",
+        anchor: anchor,
+    };
+};
+export const setShareUserPopover = (anchor) => {
+    return {
+        type: "SET_SHARE_USER_POPOVER",
+        anchor: anchor,
+    };
+};
+export const openRenameDialog = () => {
+    return {
+        type: "OPEN_RENAME_DIALOG",
+    };
+};
+export const openResaveDialog = (key) => {
+    return {
+        type: "OPEN_RESAVE_DIALOG",
+        key: key,
+    };
+};
+export const openMoveDialog = () => {
+    return {
+        type: "OPEN_MOVE_DIALOG",
+    };
+};
+export const openRemoveDialog = () => {
+    return {
+        type: "OPEN_REMOVE_DIALOG",
+    };
+};
+export const openShareDialog = () => {
+    return {
+        type: "OPEN_SHARE_DIALOG",
+    };
+};
+export const applyThemes = (theme) => {
+    return {
+        type: "APPLY_THEME",
+        theme: theme,
+    };
+};
+export const setSessionStatus = (status) => {
+    return {
+        type: "SET_SESSION_STATUS",
+        status: status,
+    };
+};
+export const openMusicDialog = () => {
+    return {
+        type: "OPEN_MUSIC_DIALOG",
+    };
+};
+export const openRemoteDownloadDialog = () => {
+    return {
+        type: "OPEN_REMOTE_DOWNLOAD_DIALOG",
+    };
+};
+export const openTorrentDownloadDialog = (selected) => {
+    return {
+        type: "OPEN_TORRENT_DOWNLOAD_DIALOG",
+        selected:selected,
+    };
+};
+export const openDecompressDialog = () => {
+    return {
+        type: "OPEN_DECOMPRESS_DIALOG",
+    };
+};
+export const openCompressDialog = () => {
+    return {
+        type: "OPEN_COMPRESS_DIALOG",
+    };
+};
+export const openRelocateDialog = () => {
+    return {
+        type: "OPEN_RELOCATE_DIALOG",
+    };
+};
+export const openGetSourceDialog = (source) => {
+    return {
+        type: "OPEN_GET_SOURCE_DIALOG",
+        source,
+    };
+};
+export const openCopyDialog = () => {
+    return {
+        type: "OPEN_COPY_DIALOG",
+    };
+};
+// Deprecated
+export const openLoadingDialog = (text) => {
+    return {
+        type: "OPEN_LOADING_DIALOG",
+        text: text,
+    };
+};
+// Deprecated
+export const closeAllModals = () => {
+    return {
+        type: "CLOSE_ALL_MODALS",
+    };
+};
+export const toggleSnackbar = (vertical, horizontal, msg, color) => {
+    return {
+        type: "TOGGLE_SNACKBAR",
+        vertical: vertical,
+        horizontal: horizontal,
+        msg: msg,
+        color: color,
+    };
+};
+export const setModalsLoading = (status) => {
+    return {
+        type: "SET_MODALS_LOADING",
+        status: status,
+    };
+};
+export const refreshFileList = () => {
+    return {
+        type: "REFRESH_FILE_LIST",
+    };
+};
+export const searchMyFile = (keywords, path) => {
+    return {
+        type: "SEARCH_MY_FILE",
+        keywords: keywords,
+        path: path,
+    };
+};
+export const showImgPreivew = (first) => {
+    return {
+        type: "SHOW_IMG_PREIVEW",
+        first: first,
+    };
+};
+export const showAudioPreview = (first) => {
+    return {
+        type: "SHOW_AUDIO_PREVIEW",
+        first: first,
+    };
+};
+export const audioPreviewSetIsOpen = (isOpen) => {
+    return {
+        type: "AUDIO_PREVIEW_SET_IS_OPEN",
+        isOpen,
+    };
+};
+export const audioPreviewSetPlaying = (playingName, paused) => {
+    return {
+        type: "AUDIO_PREVIEW_SET_PLAYING",
+        playingName, //the playing content name
+        paused,
+    };
+};
+export const refreshStorage = () => {
+    return {
+        type: "REFRESH_STORAGE",
+    };
+};
+export const saveFile = () => {
+    return {
+        type: "SAVE_FILE",
+    };
+};
+
+export const setSiteConfig = (config) => {
+    return {
+        type: "SET_SITE_CONFIG",
+        config: config,
+    };
+};
+
+export const openDirectoryDownloadDialog = (downloading, log, done) => {
+    return {
+        type: "OPEN_DIRECTORY_DOWNLOAD_DIALOG",
+        downloading,
+        log,
+        done,
+    };
+};
+
+export const confirmPurchase = (purchase) => {
+    return {
+        type: "CONFIRM_PURCHASE",
+        purchase: purchase,
+    };
+};
diff --git a/src/redux/explorer/reducer.ts b/src/redux/explorer/reducer.ts
new file mode 100644
index 0000000..dc2f1df
--- /dev/null
+++ b/src/redux/explorer/reducer.ts
@@ -0,0 +1,278 @@
+/* eslint-disable no-case-declarations */
+import { AnyAction } from "redux";
+import { CloudreveFile } from "../../types";
+import { Policy } from "../../component/Uploader/core/types";
+
+interface SelectProps {
+    isMultiple: boolean;
+    withFolder: boolean;
+    withFile: boolean;
+    withSourceEnabled: boolean;
+}
+
+export interface ExplorerState {
+    dndSignal: boolean;
+    dndTarget: any;
+    dndSource: any;
+    fileList: CloudreveFile[];
+    dirList: CloudreveFile[];
+    selected: CloudreveFile[];
+    selectProps: SelectProps;
+    lastSelect: {
+        file: CloudreveFile;
+        index: number;
+    };
+    shiftSelectedIds: string[];
+    imgPreview: {
+        first: CloudreveFile;
+        other: [];
+    };
+    audioPreview: {
+        first: CloudreveFile;
+        other: [];
+        playingName: any;
+        paused: boolean;
+        isOpen: boolean;
+    };
+    search?: {
+        keywords: string;
+        searchPath: string;
+    };
+    fileSave: boolean;
+    sideBarOpen: boolean;
+    currentPolicy?: Policy;
+    purchase?: {
+        callback: any;
+        onClose: any;
+        score: number;
+    };
+}
+
+export const initState: ExplorerState = {
+    dndSignal: false,
+    dndTarget: null,
+    dndSource: null,
+    fileList: [],
+    dirList: [],
+    selected: [],
+    selectProps: {
+        isMultiple: false,
+        withFolder: false,
+        withFile: false,
+        withSourceEnabled: false,
+    },
+    lastSelect: {
+        file: {
+            id: "",
+            name: "",
+            size: 0,
+            type: "file",
+            date: "",
+            path: "",
+            create_date: "",
+        },
+        index: -1,
+    },
+    shiftSelectedIds: [],
+    imgPreview: {
+        first: {
+            id: "",
+            name: "",
+            size: 0,
+            type: "file",
+            date: "",
+            path: "",
+            create_date: "",
+        },
+        other: [],
+    },
+    audioPreview: {
+        first: {
+            id: "",
+            name: "",
+            size: 0,
+            type: "file",
+            date: "",
+            path: "",
+            create_date: "",
+        },
+        other: [],
+        playingName: null,
+        paused: false,
+        isOpen: false,
+    },
+    fileSave: false,
+    sideBarOpen: false,
+};
+
+const checkSelectedProps = (selected: CloudreveFile[]): SelectProps => {
+    const isMultiple = selected.length > 1;
+    let withFolder = false;
+    let withFile = false;
+    let withSourceEnabled = false;
+    selected.forEach((value) => {
+        if (value.type === "dir") {
+            withFolder = true;
+            withSourceEnabled = true;
+        } else if (value.type === "file") {
+            withFile = true;
+            if (value.source_enabled) {
+                withSourceEnabled = true;
+            }
+        }
+    });
+    return {
+        isMultiple,
+        withFolder,
+        withFile,
+        withSourceEnabled,
+    };
+};
+
+const explorer = (
+    state: ExplorerState = initState,
+    action: AnyAction
+): ExplorerState => {
+    switch (action.type) {
+        case "DRAG_AND_DROP":
+            return Object.assign({}, state, {
+                dndSignal: !state.dndSignal,
+                dndTarget: action.target,
+                dndSource: action.source,
+            });
+        case "SET_FILE_LIST":
+            return Object.assign({}, state, {
+                fileList: action.list,
+            });
+        case "SET_DIR_LIST":
+            return Object.assign({}, state, {
+                dirList: action.list,
+            });
+        case "ADD_SELECTED_TARGETS":
+            const addedSelected = [...state.selected, ...action.targets];
+            return Object.assign({}, state, {
+                selected: addedSelected,
+                selectProps: checkSelectedProps(addedSelected),
+            });
+        case "SET_SELECTED_TARGET":
+            const newSelected = action.targets;
+            return Object.assign({}, state, {
+                selected: newSelected,
+                selectProps: checkSelectedProps(newSelected),
+            });
+        case "RMOVE_SELECTED_TARGETS":
+            const { fileIds } = action;
+            const filteredSelected = state.selected.filter((file) => {
+                return !fileIds.includes(file.id);
+            });
+            return Object.assign({}, state, {
+                selected: filteredSelected,
+                selectProps: checkSelectedProps(filteredSelected),
+            });
+        case "REFRESH_FILE_LIST":
+            return Object.assign({}, state, {
+                selected: [],
+                selectProps: {
+                    isMultiple: false,
+                    withFolder: false,
+                    withFile: false,
+                    withSourceEnabled: false,
+                },
+            });
+        case "SEARCH_MY_FILE":
+            return Object.assign({}, state, {
+                selected: [],
+                selectProps: {
+                    isMultiple: false,
+                    withFolder: false,
+                    withFile: false,
+                    withSourceEnabled: false,
+                },
+                search: {
+                    keywords: action.keywords,
+                    searchPath: action.path,
+                },
+            });
+        case "SHOW_IMG_PREIVEW":
+            return Object.assign({}, state, {
+                imgPreview: {
+                    first: action.first,
+                    other: state.fileList,
+                },
+            });
+        case "SHOW_AUDIO_PREVIEW":
+            return Object.assign({}, state, {
+                audioPreview: {
+                    ...state.audioPreview,
+                    first: action.first,
+                    other: state.fileList,
+                },
+            });
+        case "AUDIO_PREVIEW_SET_IS_OPEN":
+            return Object.assign({}, state, {
+                audioPreview: {
+                    ...state.audioPreview,
+                    isOpen: action.isOpen,
+                },
+            });
+        case "AUDIO_PREVIEW_SET_PLAYING":
+            return Object.assign({}, state, {
+                audioPreview: {
+                    ...state.audioPreview,
+                    playingName: action.playingName,
+                    paused: action.paused,
+                },
+            });
+        case "SAVE_FILE":
+            return {
+                ...state,
+                fileSave: !state.fileSave,
+            };
+        case "SET_LAST_SELECT":
+            const { file, index } = action;
+            return {
+                ...state,
+                lastSelect: {
+                    file,
+                    index,
+                },
+            };
+        case "SET_SHIFT_SELECTED_IDS":
+            const { shiftSelectedIds } = action;
+            return {
+                ...state,
+                shiftSelectedIds,
+            };
+        case "SET_NAVIGATOR":
+            return {
+                ...state,
+                selected: [],
+                selectProps: {
+                    isMultiple: false,
+                    withFolder: false,
+                    withFile: false,
+                    withSourceEnabled: false,
+                },
+                search: undefined,
+            };
+        case "SET_SIDE_BAR":
+            return {
+                ...state,
+                sideBarOpen: action.open,
+            };
+        case "SET_CURRENT_POLICY":
+            return {
+                ...state,
+                currentPolicy: action.policy,
+            };
+        case "CONFIRM_PURCHASE":
+            return {
+                ...state,
+                purchase: action.purchase,
+            };
+        default:
+            return state;
+    }
+};
+
+export default explorer;
diff --git a/src/redux/viewUpdate/action.ts b/src/redux/viewUpdate/action.ts
new file mode 100644
index 0000000..e870ec7
--- /dev/null
+++ b/src/redux/viewUpdate/action.ts
@@ -0,0 +1,127 @@
+import { ThunkAction } from "redux-thunk";
+import { AnyAction } from "redux";
+import Auth from "../../middleware/Auth";
+import { askForOption } from "../explorer/async";
+import i18next, { languages } from "../../i18n";
+
+export interface ActionSetSubtitle extends AnyAction {
+    type: "SET_SUBTITLE";
+    title: string;
+}
+
+export const setSubtitle = (title: string): ActionSetSubtitle => {
+    return {
+        type: "SET_SUBTITLE",
+        title,
+    };
+};
+
+export const closeContextMenu = () => {
+    return {
+        type: "CLOSE_CONTEXT_MENU",
+    };
+};
+
+export const changeContextMenu = (type: string, open: boolean) => {
+    return {
+        type: "CHANGE_CONTEXT_MENU",
+        menuType: type,
+        open: open,
+    };
+};
+
+export const changeSubTitle = (
+    title: string
+): ThunkAction<any, any, any, any> => {
+    return (dispatch, getState) => {
+        const state = getState();
+        document.title =
+            title === null || title === undefined
+                ? state.siteConfig.title
+                : title + " - " + state.siteConfig.title;
+        dispatch(setSubtitle(title));
+    };
+};
+
+export const setOptionModal = (option: any) => {
+    return {
+        type: "SET_OPTION_MODAL",
+        option: option,
+    };
+};
+
+export const openFileSelector = () => {
+    return {
+        type: "OPEN_FILE_SELECTOR",
+    };
+};
+
+export const openFolderSelector = () => {
+    return {
+        type: "OPEN_FOLDER_SELECTOR",
+    };
+};
+
+export const setPagination = (pagination) => {
+    return {
+        type: "SET_PAGINATION",
+        pagination: pagination,
+    };
+};
+
+export const setShareInfo = (shareInfo) => {
+    return {
+        type: "SET_SHARE_INFO",
+        shareInfo: shareInfo,
+    };
+};
+
+export const changePageSize = (
+    size: number
+): ThunkAction<any, any, any, any> => {
+    return (dispatch, getState) => {
+        const {
+            explorer: { dirList, fileList },
+            viewUpdate: { pagination },
+        } = getState();
+        const total = dirList.length + fileList.length;
+        let page = pagination.page;
+        if (pagination.page * size > total) {
+            page = Math.max(Math.ceil(total / size), 1);
+        } else if (size === -1) {
+            page = 1;
+        }
+        Auth.SetPreference("pagination", size);
+        dispatch(
+            setPagination({
+                ...pagination,
+                size: size,
+                page: page,
+            })
+        );
+    };
+};
+
+export const selectLanguage = (): ThunkAction<any, any, any, any> => {
+    return async (dispatch, getState) => {
+        let option: any;
+        let lng = "";
+        try {
+            const allOptions = languages.map((e) => {
+                return {
+                    key: e.code,
+                    name: e.displayName,
+                };
+            });
+            option = await dispatch(
+                askForOption(allOptions, i18next.t("setting.language"))
+            );
+        } catch (e) {
+            console.log(e);
+            return;
+        }
+
+        lng = option.key;
+        await i18next.changeLanguage(lng);
+    };
+};
diff --git a/src/redux/viewUpdate/index.ts b/src/redux/viewUpdate/index.ts
new file mode 100644
index 0000000..70e4a43
--- /dev/null
+++ b/src/redux/viewUpdate/index.ts
@@ -0,0 +1,7 @@
+import * as actions from "./action";
+import * as reducers from "./reducer";
+
+export default {
+    actions,
+    reducers,
+};
diff --git a/src/redux/viewUpdate/reducer.ts b/src/redux/viewUpdate/reducer.ts
new file mode 100644
index 0000000..d2f5cb0
--- /dev/null
+++ b/src/redux/viewUpdate/reducer.ts
@@ -0,0 +1,396 @@
+import { AnyAction } from "redux";
+import Auth from "../../middleware/Auth";
+import { CloudreveFile, SortMethod } from "../../types";
+
+declare global {
+    interface Window {
+        shareKey: any;
+    }
+}
+
+export interface ViewUpdateState {
+    isLogin: boolean;
+    open: boolean;
+    explorerViewMethod: string;
+    sortMethod: SortMethod;
+    subTitle: string | null;
+    contextType: string;
+    contextOpen: boolean;
+    menuOpen: boolean;
+    navigatorLoading: boolean;
+    navigatorError: boolean;
+    navigatorErrorMsg: string | null;
+    modalsLoading: boolean;
+    storageRefresh: boolean;
+    userPopoverAnchorEl: any;
+    shareUserPopoverAnchorEl: any;
+    modals: {
+        createNewFolder: boolean;
+        createNewFile: boolean;
+        rename: boolean;
+        move: boolean;
+        remove: boolean;
+        share: boolean;
+        music: boolean;
+        remoteDownload: boolean;
+        remoteDownloadTorrent: CloudreveFile | null;
+        getSource: string;
+        copy: boolean;
+        resave: boolean;
+        compress: boolean;
+        decompress: boolean;
+        relocate: boolean;
+        loading: boolean;
+        loadingText: string;
+        directoryDownloading: boolean;
+        directoryDownloadLog: string;
+        directoryDownloadDone: boolean;
+        option?: {
+            options: {
+                open: boolean;
+                key: string;
+                name: string;
+                description?: string;
+            }[];
+            title: string;
+            callback: any;
+            onClose: any;
+        };
+    };
+    snackbar: {
+        toggle: boolean;
+        vertical: string;
+        horizontal: string;
+        msg: string;
+        color: string;
+    };
+    pagination: {
+        page: number;
+        size: number;
+    };
+    openFileSelector: number;
+    openFolderSelector: number;
+    shareInfo: any;
+}
+export const initState: ViewUpdateState = {
+    // 是否登录
+    isLogin: Auth.Check(),
+    open: false,
+    explorerViewMethod: "icon",
+    sortMethod: Auth.GetPreferenceWithDefault("sort", "timePos"),
+    subTitle: null,
+    contextType: "none",
+    contextOpen: false,
+    menuOpen: false,
+    navigatorLoading: true,
+    navigatorError: false,
+    navigatorErrorMsg: null,
+    modalsLoading: false,
+    storageRefresh: false,
+    userPopoverAnchorEl: null,
+    shareUserPopoverAnchorEl: null,
+    modals: {
+        createNewFolder: false,
+        createNewFile: false,
+        rename: false,
+        move: false,
+        remove: false,
+        share: false,
+        music: false,
+        remoteDownload: false,
+        remoteDownloadTorrent: null,
+        getSource: "",
+        copy: false,
+        resave: false,
+        compress: false,
+        relocate: false,
+        decompress: false,
+        loading: false,
+        loadingText: "",
+        directoryDownloading: false,
+        directoryDownloadLog: "",
+        directoryDownloadDone: false,
+    },
+    snackbar: {
+        toggle: false,
+        vertical: "top",
+        horizontal: "center",
+        msg: "",
+        color: "",
+    },
+    pagination: {
+        page: 1,
+        size: Auth.GetPreferenceWithDefault("pagination", 100),
+    },
+    openFileSelector: 0,
+    openFolderSelector: 0,
+    shareInfo: null,
+};
+const viewUpdate = (state: ViewUpdateState = initState, action: AnyAction) => {
+    switch (action.type) {
+        case "DRAWER_TOGGLE":
+            return Object.assign({}, state, {
+                open: action.open,
+            });
+        case "CHANGE_VIEW_METHOD":
+            return Object.assign({}, state, {
+                explorerViewMethod: action.method,
+            });
+        case "SET_NAVIGATOR_LOADING_STATUE":
+            return Object.assign({}, state, {
+                navigatorLoading: action.status,
+            });
+        case "SET_NAVIGATOR_ERROR":
+            return Object.assign({}, state, {
+                navigatorError: action.status,
+                navigatorErrorMsg: action.msg,
+            });
+        case "OPEN_CREATE_FOLDER_DIALOG":
+            return Object.assign({}, state, {
+                modals: Object.assign({}, state.modals, {
+                    createNewFolder: true,
+                }),
+                contextOpen: false,
+            });
+        case "OPEN_CREATE_FILE_DIALOG":
+            return Object.assign({}, state, {
+                modals: Object.assign({}, state.modals, {
+                    createNewFile: true,
+                }),
+                contextOpen: false,
+            });
+        case "OPEN_RENAME_DIALOG":
+            return Object.assign({}, state, {
+                modals: Object.assign({}, state.modals, {
+                    rename: true,
+                }),
+                contextOpen: false,
+            });
+        case "OPEN_REMOVE_DIALOG":
+            return Object.assign({}, state, {
+                modals: Object.assign({}, state.modals, {
+                    remove: true,
+                }),
+                contextOpen: false,
+            });
+        case "OPEN_MOVE_DIALOG":
+            return Object.assign({}, state, {
+                modals: Object.assign({}, state.modals, {
+                    move: true,
+                }),
+                contextOpen: false,
+            });
+        case "OPEN_RESAVE_DIALOG":
+            window.shareKey = action.key;
+            return Object.assign({}, state, {
+                modals: Object.assign({}, state.modals, {
+                    resave: true,
+                }),
+                contextOpen: false,
+            });
+        case "SET_USER_POPOVER":
+            return Object.assign({}, state, {
+                userPopoverAnchorEl: action.anchor,
+            });
+        case "SET_SHARE_USER_POPOVER":
+            return Object.assign({}, state, {
+                shareUserPopoverAnchorEl: action.anchor,
+            });
+        case "OPEN_SHARE_DIALOG":
+            return Object.assign({}, state, {
+                modals: Object.assign({}, state.modals, {
+                    share: true,
+                }),
+                contextOpen: false,
+            });
+        case "OPEN_MUSIC_DIALOG":
+            return Object.assign({}, state, {
+                modals: Object.assign({}, state.modals, {
+                    music: true,
+                }),
+                contextOpen: false,
+            });
+        case "OPEN_REMOTE_DOWNLOAD_DIALOG":
+            return Object.assign({}, state, {
+                modals: Object.assign({}, state.modals, {
+                    remoteDownload: true,
+                }),
+                contextOpen: false,
+            });
+        case "OPEN_TORRENT_DOWNLOAD_DIALOG":
+            return Object.assign({}, state, {
+                modals: Object.assign({}, state.modals, {
+                    remoteDownload: true,
+                    remoteDownloadTorrent: action.selected,
+                }),
+                contextOpen: false,
+            });
+        case "OPEN_DECOMPRESS_DIALOG":
+            return Object.assign({}, state, {
+                modals: Object.assign({}, state.modals, {
+                    decompress: true,
+                }),
+                contextOpen: false,
+            });
+        case "OPEN_COMPRESS_DIALOG":
+            return Object.assign({}, state, {
+                modals: Object.assign({}, state.modals, {
+                    compress: true,
+                }),
+                contextOpen: false,
+            });
+        case "OPEN_GET_SOURCE_DIALOG":
+            return Object.assign({}, state, {
+                modals: Object.assign({}, state.modals, {
+                    getSource: action.source,
+                }),
+                contextOpen: false,
+            });
+        case "OPEN_RELOCATE_DIALOG":
+            return Object.assign({}, state, {
+                modals: Object.assign({}, state.modals, {
+                    relocate: true,
+                }),
+                contextOpen: false,
+            });
+        case "OPEN_COPY_DIALOG":
+            return Object.assign({}, state, {
+                modals: Object.assign({}, state.modals, {
+                    copy: true,
+                }),
+                contextOpen: false,
+            });
+        case "OPEN_LOADING_DIALOG":
+            return Object.assign({}, state, {
+                modals: Object.assign({}, state.modals, {
+                    loading: true,
+                    loadingText: action.text,
+                }),
+                contextOpen: false,
+            });
+        case "OPEN_DIRECTORY_DOWNLOAD_DIALOG":
+            return Object.assign({}, state, {
+                modals: Object.assign({}, state.modals, {
+                    directoryDownloading: action.downloading,
+                    directoryDownloadLog: action.log,
+                    directoryDownloadDone: action.done,
+                }),
+                contextOpen: false,
+            });
+        case "CLOSE_CONTEXT_MENU":
+            return Object.assign({}, state, {
+                contextOpen: false,
+            });
+        case "CLOSE_ALL_MODALS":
+            return Object.assign({}, state, {
+                modals: Object.assign({}, state.modals, {
+                    createNewFolder: false,
+                    createNewFile: false,
+                    rename: false,
+                    move: false,
+                    remove: false,
+                    share: false,
+                    music: false,
+                    remoteDownload: false,
+                    remoteDownloadTorrent: null,
+                    getSource: "",
+                    resave: false,
+                    copy: false,
+                    loading: false,
+                    relocate: false,
+                    compress: false,
+                    decompress: false,
+                    option: undefined,
+                    directoryDownloading: false,
+                    directoryDownloadLog: "",
+                    directoryDownloadDone: false,
+                }),
+            });
+        case "TOGGLE_SNACKBAR":
+            return Object.assign({}, state, {
+                snackbar: {
+                    toggle: !state.snackbar.toggle,
+                    vertical: action.vertical,
+                    horizontal: action.horizontal,
+                    msg: action.msg,
+                    color: action.color,
+                },
+            });
+        case "SET_MODALS_LOADING":
+            return Object.assign({}, state, {
+                modalsLoading: action.status,
+            });
+        case "SET_SESSION_STATUS":
+            return {
+                ...state,
+                isLogin: action.status,
+            };
+        case "REFRESH_STORAGE":
+            return Object.assign({}, state, {
+                storageRefresh: !state.storageRefresh,
+            });
+        case "SEARCH_MY_FILE":
+            return Object.assign({}, state, {
+                contextOpen: false,
+                navigatorError: false,
+                navigatorLoading: true,
+            });
+        case "CHANGE_CONTEXT_MENU":
+            if (state.contextOpen && action.open) {
+                return Object.assign({}, state);
+            }
+            return Object.assign({}, state, {
+                contextOpen: action.open,
+                contextType: action.menuType,
+            });
+        case "SET_SUBTITLE":
+            return Object.assign({}, state, {
+                subTitle: action.title,
+            });
+        case "SET_SORT_METHOD":
+            return {
+                ...state,
+                sortMethod: action.method,
+            };
+        case "SET_NAVIGATOR":
+            return {
+                ...state,
+                contextOpen: false,
+                navigatorError: false,
+                navigatorLoading: action.navigatorLoading,
+            };
+        case "SET_OPTION_MODAL":
+            return Object.assign({}, state, {
+                modals: Object.assign({}, state.modals, {
+                    option: action.option,
+                }),
+                contextOpen: false,
+            });
+        case "OPEN_FILE_SELECTOR":
+            return {
+                ...state,
+                openFileSelector: state.openFileSelector + 1,
+                contextOpen: false,
+            };
+        case "OPEN_FOLDER_SELECTOR":
+            return {
+                ...state,
+                openFolderSelector: state.openFolderSelector + 1,
+                contextOpen: false,
+            };
+        case "SET_PAGINATION":
+            return {
+                ...state,
+                pagination: action.pagination,
+            };
+        case "SET_SHARE_INFO":
+            return {
+                ...state,
+                shareInfo: action.shareInfo,
+            };
+        default:
+            return state;
+    }
+};
+
+export default viewUpdate;
diff --git a/src/serviceWorker.js b/src/serviceWorker.js
new file mode 100644
index 0000000..d125394
--- /dev/null
+++ b/src/serviceWorker.js
@@ -0,0 +1,135 @@
+// This optional code is used to register a service worker.
+// register() is not called by default.
+
+// This lets the app load faster on subsequent visits in production, and gives
+// it offline capabilities. However, it also means that developers (and users)
+// will only see deployed updates on subsequent visits to a page, after all the
+// existing tabs open on the page have been closed, since previously cached
+// resources are updated in the background.
+
+// To learn more about the benefits of this model and instructions on how to
+// opt-in, read https://bit.ly/CRA-PWA
+function registerValidSW(swUrl, config) {
+    navigator.serviceWorker
+        .register(swUrl)
+        .then((registration) => {
+            registration.onupdatefound = () => {
+                const installingWorker = registration.installing;
+                if (installingWorker == null) {
+                    return;
+                }
+                installingWorker.onstatechange = () => {
+                    if (installingWorker.state === "installed") {
+                        if (navigator.serviceWorker.controller) {
+                            // At this point, the updated precached content has been fetched,
+                            // but the previous service worker will still serve the older
+                            // content until all client tabs are closed.
+                            console.log(
+                                "New content is available and will be used when all " +
+                                    "tabs for this page are closed. See https://bit.ly/CRA-PWA."
+                            );
+
+                            // Execute callback
+                            if (config && config.onUpdate) {
+                                config.onUpdate(registration);
+                            }
+                        } else {
+                            // At this point, everything has been precached.
+                            // It's the perfect time to display a
+                            // "Content is cached for offline use." message.
+                            console.log("Content is cached for offline use.");
+
+                            // Execute callback
+                            if (config && config.onSuccess) {
+                                config.onSuccess(registration);
+                            }
+                        }
+                    }
+                };
+            };
+        })
+        .catch((error) => {
+            console.error("Error during service worker registration:", error);
+        });
+}
+
+function checkValidServiceWorker(swUrl, config) {
+    // 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.
+            const contentType = response.headers.get("content-type");
+            if (
+                response.status === 404 ||
+                (contentType != null &&
+                    contentType.indexOf("javascript") === -1)
+            ) {
+                // No service worker found. Probably a different app. Reload the page.
+                navigator.serviceWorker.ready.then((registration) => {
+                    registration.unregister().then(() => {
+                        window.location.reload();
+                    });
+                });
+            } else {
+                // Service worker found. Proceed as normal.
+                registerValidSW(swUrl, config);
+            }
+        })
+        .catch(() => {
+            console.log(
+                "No internet connection found. App is running in offline mode."
+            );
+        });
+}
+
+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 function register(config) {
+    if (process.env.NODE_ENV === "production" && "serviceWorker" in navigator) {
+        // The URL constructor is available in all browsers that support SW.
+        const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
+        if (publicUrl.origin !== window.location.origin) {
+            // Our service worker won't work if PUBLIC_URL is on a different origin
+            // from what our page is served on. This might happen if a CDN is used to
+            // serve assets; see https://github.com/facebook/create-react-app/issues/2374
+            return;
+        }
+
+        window.addEventListener("load", () => {
+            const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
+
+            if (isLocalhost) {
+                // This is running on localhost. Let's check if a service worker still exists or not.
+                checkValidServiceWorker(swUrl, config);
+
+                // Add some additional logging to localhost, pointing developers to the
+                // service worker/PWA documentation.
+                navigator.serviceWorker.ready.then(() => {
+                    console.log(
+                        "This web app is being served cache-first by a service " +
+                            "worker. To learn more, visit https://bit.ly/CRA-PWA"
+                    );
+                });
+            } else {
+                // Is not localhost. Just register service worker
+                registerValidSW(swUrl, config);
+            }
+        });
+    }
+}
+
+export function unregister() {
+    if ("serviceWorker" in navigator) {
+        navigator.serviceWorker.ready.then((registration) => {
+            registration.unregister();
+        });
+    }
+}
diff --git a/src/services/file.ts b/src/services/file.ts
new file mode 100644
index 0000000..9d8924e
--- /dev/null
+++ b/src/services/file.ts
@@ -0,0 +1,20 @@
+import API from "../middleware/Api";
+
+export async function getDownloadURL(file: any): Promise<any> {
+    let reqURL = "";
+    if (file.key) {
+        const downloadPath =
+            file.path === "/"
+                ? file.path + file.name
+                : file.path + "/" + file.name;
+        reqURL =
+            "/share/download/" +
+            file.key +
+            "?path=" +
+            encodeURIComponent(downloadPath);
+    } else {
+        reqURL = "/file/download/" + file.id;
+    }
+
+    return API.put(reqURL);
+}
diff --git a/src/services/navigate.ts b/src/services/navigate.ts
new file mode 100644
index 0000000..5bdd996
--- /dev/null
+++ b/src/services/navigate.ts
@@ -0,0 +1,30 @@
+import API from "../middleware/Api";
+
+export async function list(
+    path: string,
+    share: any,
+    keywords: string,
+    searchPath: string
+): Promise<any> {
+    let apiURL = "";
+    if (share) {
+        if (keywords === "") {
+            apiURL = "/share/list/" + share.key;
+        } else {
+            apiURL = `/share/search/${share.key}/`;
+        }
+    } else {
+        if (keywords === "") {
+            apiURL = "/directory";
+        } else {
+            apiURL = "/file/search/";
+        }
+    }
+
+    path = keywords === "" ? path : keywords;
+    apiURL = apiURL + encodeURIComponent(path);
+    if (searchPath) {
+        apiURL = `${apiURL}?path=${encodeURIComponent(searchPath)}`;
+    }
+    return API.get(apiURL);
+}
diff --git a/src/setupProxy.js b/src/setupProxy.js
new file mode 100644
index 0000000..8a2dcbd
--- /dev/null
+++ b/src/setupProxy.js
@@ -0,0 +1,11 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+const proxy = require("http-proxy-middleware");
+module.exports = function (app) {
+    ["/api","/custom","/f"].map(p=>app.use(
+        p,
+        proxy({
+            target: "http://localhost:5212",
+            changeOrigin: true,
+        })
+    ))
+};
diff --git a/src/types/index.ts b/src/types/index.ts
new file mode 100644
index 0000000..a9bef48
--- /dev/null
+++ b/src/types/index.ts
@@ -0,0 +1,31 @@
+export interface CloudreveFile {
+    id: string;
+    name: string;
+    size: number;
+    date: string;
+    create_date: string;
+    path: string;
+    type: "up" | "file" | "dir";
+    source_enabled?: boolean;
+}
+
+export type SortMethod =
+    | "sizePos"
+    | "sizeRes"
+    | "namePos"
+    | "nameRev"
+    | "timePos"
+    | "timeRev"
+    | "modifyTimePos"
+    | "modifyTimeRev";
+
+export enum BatchDownloadMethod {
+    ClientStream,
+    ServerArchive,
+}
+
+declare global {
+    interface Window {
+        baseConfig?: (f: (response: any, e: any) => any) => any;
+    }
+}
diff --git a/src/utils/api.ts b/src/utils/api.ts
new file mode 100644
index 0000000..1936e39
--- /dev/null
+++ b/src/utils/api.ts
@@ -0,0 +1,37 @@
+import { CloudreveFile } from "../types";
+import { list } from "../services/navigate";
+import { pathJoin } from "../component/Uploader/core/utils";
+
+export function getPreviewPath(selected: any): string {
+    return encodeURIComponent(
+        selected.path === "/"
+            ? selected.path + selected.name
+            : selected.path + "/" + selected.name
+    );
+}
+
+export async function walk(
+    file: CloudreveFile[],
+    share: any
+): Promise<CloudreveFile[]> {
+    let res: CloudreveFile[] = [];
+    for (const f of file) {
+        if (f.type === "file") {
+            res.push(f);
+            continue;
+        }
+
+        if (f.type === "dir") {
+            const response = await list(
+                pathJoin([f.path, f.name]),
+                share,
+                "",
+                ""
+            );
+            const subs = await walk(response.data.objects, share);
+            res = [...res, ...subs];
+        }
+    }
+
+    return res;
+}
diff --git a/src/utils/datetime.js b/src/utils/datetime.js
new file mode 100644
index 0000000..1d2d27e
--- /dev/null
+++ b/src/utils/datetime.js
@@ -0,0 +1,53 @@
+import dayjs from "dayjs";
+import timezone from "dayjs/plugin/timezone";
+import utc from "dayjs/plugin/utc";
+import Auth from "../middleware/Auth";
+import i18next from "../i18n";
+
+dayjs.extend(utc);
+dayjs.extend(timezone);
+
+let userTimezone = "";
+try {
+    userTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+} catch (e) {
+    console.log(e);
+}
+
+if (!userTimezone || userTimezone=="Etc/Unknown") {
+    userTimezone = "Asia/Shanghai";
+}
+
+const preferTimeZone = Auth.GetPreference("timeZone");
+export let timeZone = preferTimeZone ? preferTimeZone : userTimezone;
+
+export function refreshTimeZone() {
+    timeZone = Auth.GetPreference("timeZone");
+    timeZone = timeZone ? timeZone : userTimezone;
+}
+
+export function formatLocalTime(time) {
+    return i18next.t("intlDateTime", {
+        ns: "common",
+        val: dayjs(time).tz(timeZone).toDate(),
+        formatParams: {
+            val: {
+                year: "numeric",
+                month: "numeric",
+                day: "numeric",
+                hour: "numeric",
+                minute: "numeric",
+                second: "numeric",
+            },
+        },
+    });
+}
+
+export function validateTimeZone(name) {
+    try {
+        dayjs().tz(name).format();
+    } catch (e) {
+        return false;
+    }
+    return true;
+}
diff --git a/src/utils/filesystem.ts b/src/utils/filesystem.ts
new file mode 100644
index 0000000..8eed7f9
--- /dev/null
+++ b/src/utils/filesystem.ts
@@ -0,0 +1,81 @@
+// get the paths of files (no directories) in the directory
+// parent: "" or "/"
+export const getFileSystemDirectoryPaths = async (
+    handle: FileSystemDirectoryHandle,
+    parent = ""
+): Promise<string[]> => {
+    const paths: Array<string> = [];
+
+    for await (const [path, fileSystemHandle] of handle.entries()) {
+        if (fileSystemHandle instanceof window.FileSystemFileHandle) {
+            paths.push(`${parent}${path}`);
+        } else {
+            paths.push(
+                ...(await getFileSystemDirectoryPaths(
+                    fileSystemHandle,
+                    `${parent}${path}/`
+                ))
+            );
+        }
+    }
+
+    return paths;
+};
+
+// create the dst directory if it doesn't exist
+// return the dst directory handle
+// paths: "/dir1/dir2" => ["dir1","dir2"]
+export const createFileSystemDirectory = async (
+    handle: FileSystemDirectoryHandle,
+    paths: string[]
+) => {
+    let cur = handle;
+    while (paths.length > 0) {
+        const path = paths.shift();
+        if (!path) {
+            break;
+        }
+        cur = await cur.getDirectoryHandle(path, { create: true });
+    }
+    return cur;
+};
+
+// save file into the dst directory
+// create the dst file if it doesn't exist by default
+// path: a/b/c.jpg
+export const saveFileToFileSystemDirectory = async (
+    handle: FileSystemDirectoryHandle,
+    stream: FileSystemWriteChunkType,
+    path: string,
+    create = true
+) => {
+    const paths = path.split("/");
+    const fileName = paths.pop();
+    if (!fileName) return;
+
+    const dir = await createFileSystemDirectory(handle, paths);
+    const file = await dir.getFileHandle(fileName, { create });
+    const writable = await file.createWritable();
+    await writable.write(stream);
+    await writable.close();
+};
+
+// verify or request the permission of the readwrite permission
+export async function verifyFileSystemRWPermission(
+    fileHandle: FileSystemDirectoryHandle
+) {
+    const opts = { mode: "readwrite" as FileSystemPermissionMode };
+
+    // Check if we already have permission, if so, return true.
+    if ((await fileHandle.queryPermission(opts)) === "granted") {
+        return true;
+    }
+
+    // Request permission to the file, if the user grants permission, return true.
+    if ((await fileHandle.requestPermission(opts)) === "granted") {
+        return true;
+    }
+
+    // The user did not grant permission, return false.
+    return false;
+}
diff --git a/src/utils/index.js b/src/utils/index.js
new file mode 100644
index 0000000..a71ad9f
--- /dev/null
+++ b/src/utils/index.js
@@ -0,0 +1,172 @@
+export const sizeToString = (bytes) => {
+    if (bytes === 0 || bytes === "0") return "0 B";
+    const k = 1024;
+    const sizes = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return (bytes / Math.pow(k, i)).toFixed(1) + " " + sizes[i];
+};
+
+export const fixUrlHash = (path) => {
+    return path;
+};
+
+export const setCookie = (name, value, days) => {
+    if (days) {
+        const date = new Date();
+        date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
+    }
+    document.cookie = name + "=" + (value || "") + "; path=/";
+};
+
+export const setGetParameter = (paramName, paramValue) => {
+    let url = window.location.href;
+
+    if (url.indexOf(paramName + "=") >= 0) {
+        const prefix = url.substring(0, url.indexOf(paramName));
+        let suffix = url.substring(url.indexOf(paramName));
+        suffix = suffix.substring(suffix.indexOf("=") + 1);
+        suffix =
+            suffix.indexOf("&") >= 0
+                ? suffix.substring(suffix.indexOf("&"))
+                : "";
+        url = prefix + paramName + "=" + paramValue + suffix;
+    } else {
+        if (url.indexOf("?") < 0) url += "?" + paramName + "=" + paramValue;
+        else url += "&" + paramName + "=" + paramValue;
+    }
+    if (url === window.location.href) {
+        return;
+    }
+    window.history.pushState(null, null, url);
+};
+
+export const checkGetParameters = (field) => {
+    const url = window.location.href;
+    if (url.indexOf("?" + field + "=") !== -1) return true;
+    else if (url.indexOf("&" + field + "=") !== -1) return true;
+    return false;
+};
+
+export const changeThemeColor = (color) => {
+    const metaThemeColor = window.document.querySelector(
+        "meta[name=theme-color]"
+    );
+    metaThemeColor.setAttribute("content", color);
+};
+
+export function bufferDecode(value) {
+    return Uint8Array.from(atob(value), (c) => c.charCodeAt(0));
+}
+
+// ArrayBuffer to URLBase64
+export function bufferEncode(value) {
+    return btoa(String.fromCharCode.apply(null, new Uint8Array(value)))
+        .replace(/\+/g, "-")
+        .replace(/\//g, "_")
+        .replace(/=/g, "");
+}
+
+export function pathBack(path) {
+    const folders =
+        path !== null
+            ? path.substr(1).split("/")
+            : this.props.path.substr(1).split("/");
+    return "/" + folders.slice(0, folders.length - 1).join("/");
+}
+
+export function filePath(file) {
+    return file.path === "/"
+        ? file.path + file.name
+        : file.path + "/" + file.name;
+}
+
+export function hex2bin(hex) {
+    return parseInt(hex, 16).toString(2).padStart(8, "0");
+}
+
+export function pathJoin(parts, sep) {
+    const separator = sep || "/";
+    parts = parts.map((part, index) => {
+        if (index) {
+            part = part.replace(new RegExp("^" + separator), "");
+        }
+        if (index !== parts.length - 1) {
+            part = part.replace(new RegExp(separator + "$"), "");
+        }
+        return part;
+    });
+    return parts.join(separator);
+}
+
+export function basename(path) {
+    if (!path) {
+        return "";
+    }
+    const pathList = path.split("/");
+    pathList.pop();
+    return pathList.join("/") === "" ? "/" : pathList.join("/");
+}
+
+export function filename(path) {
+    const pathList = path.split("/");
+    return pathList.pop();
+}
+
+export function fileNameNoExt(filename) {
+    return filename.substring(0, filename.lastIndexOf(".")) || filename;
+}
+
+export function randomStr(length) {
+    let result = "";
+    const characters =
+        "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+    const charactersLength = characters.length;
+    for (let i = 0; i < length; i++) {
+        result += characters.charAt(
+            Math.floor(Math.random() * charactersLength)
+        );
+    }
+    return result;
+}
+
+export function getNumber(base, conditions) {
+    conditions.forEach((v) => {
+        if (v) {
+            base++;
+        }
+    });
+    return base;
+}
+
+export const isMac = () => {
+    return navigator.platform.toUpperCase().indexOf("MAC") >= 0;
+};
+
+export const isMobileSafari = () => {
+    const ua = window.navigator.userAgent;
+    const iOS = !!ua.match(/iPad/i) || !!ua.match(/iPhone/i);
+    const webkit = !!ua.match(/WebKit/i);
+    return iOS && webkit && !ua.match(/CriOS/i);
+};
+
+export function vhCheck() {
+    const vh = window.innerHeight;
+    document.documentElement.style.setProperty("--vh", `${vh}px`);
+}
+
+export const getSelectItemStyles = (name, personName, theme) => {
+    return {
+        fontWeight:
+            personName.indexOf(name) === -1
+                ? theme.typography.fontWeightRegular
+                : theme.typography.fontWeightMedium,
+    };
+};
+
+export const removeI18nCache = () => {
+    Object.keys(localStorage).forEach(function (key) {
+        if (key && key.startsWith("i18next_res_")) {
+            localStorage.removeItem(key);
+        }
+    });
+};
diff --git a/src/utils/page.ts b/src/utils/page.ts
new file mode 100644
index 0000000..a1e2353
--- /dev/null
+++ b/src/utils/page.ts
@@ -0,0 +1,18 @@
+const statusHelper = {
+    isHomePage(path: string) {
+        return path === "/home";
+    },
+    isSharePage(path: string) {
+        return path && path.startsWith("/s/");
+    },
+    isAdminPage(path: string) {
+        return path && path.startsWith("/admin");
+    },
+    isLoginPage(path: string) {
+        return path && path.startsWith("/login");
+    },
+    isMobile() {
+        return window.innerWidth < 600;
+    },
+};
+export default statusHelper;
diff --git a/src/utils/zip.js b/src/utils/zip.js
new file mode 100644
index 0000000..d4b232b
--- /dev/null
+++ b/src/utils/zip.js
@@ -0,0 +1,257 @@
+/* eslint-disable */
+class Crc32 {
+    constructor() {
+        this.crc = -1;
+    }
+
+    append(data) {
+        let crc = this.crc | 0;
+        const table = this.table;
+        for (let offset = 0, len = data.length | 0; offset < len; offset++) {
+            crc = (crc >>> 8) ^ table[(crc ^ data[offset]) & 0xff];
+        }
+        this.crc = crc;
+    }
+
+    get() {
+        return ~this.crc;
+    }
+}
+Crc32.prototype.table = (() => {
+    let i;
+    let j;
+    let t;
+    const table = [];
+    for (i = 0; i < 256; i++) {
+        t = i;
+        for (j = 0; j < 8; j++) {
+            t = t & 1 ? (t >>> 1) ^ 0xedb88320 : t >>> 1;
+        }
+        table[i] = t;
+    }
+    return table;
+})();
+
+const getDataHelper = (byteLength) => {
+    const uint8 = new Uint8Array(byteLength);
+    return {
+        array: uint8,
+        view: new DataView(uint8.buffer),
+    };
+};
+
+const pump = (zipObj) =>
+    zipObj.reader.read().then((chunk) => {
+        if (chunk.done) return zipObj.writeFooter();
+        const outputData = chunk.value;
+        zipObj.crc.append(outputData);
+        zipObj.uncompressedLength += outputData.length;
+        zipObj.compressedLength += outputData.length;
+        zipObj.ctrl.enqueue(outputData);
+    });
+
+/**
+ * [createWriter description]
+ * @param  {Object} underlyingSource [description]
+ * @return {Boolean}                  [description]
+ */
+function createWriter(underlyingSource) {
+    const files = Object.create(null);
+    const filenames = [];
+    const encoder = new TextEncoder();
+    let offset = 0;
+    let activeZipIndex = 0;
+    let ctrl;
+    let activeZipObject, closed;
+
+    function next() {
+        activeZipIndex++;
+        activeZipObject = files[filenames[activeZipIndex]];
+        if (activeZipObject) processNextChunk();
+        else if (closed) closeZip();
+    }
+
+    const zipWriter = {
+        enqueue(fileLike) {
+            if (closed)
+                throw new TypeError(
+                    "Cannot enqueue a chunk into a readable stream that is closed or has been requested to be closed"
+                );
+
+            let name = fileLike.name.trim();
+            const date = new Date(
+                typeof fileLike.lastModified === "undefined"
+                    ? Date.now()
+                    : fileLike.lastModified
+            );
+
+            if (fileLike.directory && !name.endsWith("/")) name += "/";
+            if (files[name]) throw new Error("File already exists.");
+
+            const nameBuf = encoder.encode(name);
+            filenames.push(name);
+
+            const zipObject = (files[name] = {
+                level: 0,
+                ctrl,
+                directory: !!fileLike.directory,
+                nameBuf,
+                comment: encoder.encode(fileLike.comment || ""),
+                compressedLength: 0,
+                uncompressedLength: 0,
+                writeHeader() {
+                    const header = getDataHelper(26);
+                    const data = getDataHelper(30 + nameBuf.length);
+
+                    zipObject.offset = offset;
+                    zipObject.header = header;
+                    if (zipObject.level !== 0 && !zipObject.directory) {
+                        header.view.setUint16(4, 0x0800);
+                    }
+                    header.view.setUint32(0, 0x14000808);
+                    header.view.setUint16(
+                        6,
+                        (((date.getHours() << 6) | date.getMinutes()) << 5) |
+                            (date.getSeconds() / 2),
+                        true
+                    );
+                    header.view.setUint16(
+                        8,
+                        ((((date.getFullYear() - 1980) << 4) |
+                            (date.getMonth() + 1)) <<
+                            5) |
+                            date.getDate(),
+                        true
+                    );
+                    header.view.setUint16(22, nameBuf.length, true);
+                    data.view.setUint32(0, 0x504b0304);
+                    data.array.set(header.array, 4);
+                    data.array.set(nameBuf, 30);
+                    offset += data.array.length;
+                    ctrl.enqueue(data.array);
+                },
+                writeFooter() {
+                    const footer = getDataHelper(16);
+                    footer.view.setUint32(0, 0x504b0708);
+
+                    if (zipObject.crc) {
+                        zipObject.header.view.setUint32(
+                            10,
+                            zipObject.crc.get(),
+                            true
+                        );
+                        zipObject.header.view.setUint32(
+                            14,
+                            zipObject.compressedLength,
+                            true
+                        );
+                        zipObject.header.view.setUint32(
+                            18,
+                            zipObject.uncompressedLength,
+                            true
+                        );
+                        footer.view.setUint32(4, zipObject.crc.get(), true);
+                        footer.view.setUint32(
+                            8,
+                            zipObject.compressedLength,
+                            true
+                        );
+                        footer.view.setUint32(
+                            12,
+                            zipObject.uncompressedLength,
+                            true
+                        );
+                    }
+
+                    ctrl.enqueue(footer.array);
+                    offset += zipObject.compressedLength + 16;
+                    next();
+                },
+                fileLike,
+            });
+
+            if (!activeZipObject) {
+                activeZipObject = zipObject;
+                processNextChunk();
+            }
+        },
+        close() {
+            if (closed)
+                throw new TypeError(
+                    "Cannot close a readable stream that has already been requested to be closed"
+                );
+            if (!activeZipObject) closeZip();
+            closed = true;
+        },
+    };
+
+    function closeZip() {
+        let length = 0;
+        let index = 0;
+        let indexFilename, file;
+        for (
+            indexFilename = 0;
+            indexFilename < filenames.length;
+            indexFilename++
+        ) {
+            file = files[filenames[indexFilename]];
+            length += 46 + file.nameBuf.length + file.comment.length;
+        }
+        const data = getDataHelper(length + 22);
+        for (
+            indexFilename = 0;
+            indexFilename < filenames.length;
+            indexFilename++
+        ) {
+            file = files[filenames[indexFilename]];
+            data.view.setUint32(index, 0x504b0102);
+            data.view.setUint16(index + 4, 0x1400);
+            data.array.set(file.header.array, index + 6);
+            data.view.setUint16(index + 32, file.comment.length, true);
+            if (file.directory) {
+                data.view.setUint8(index + 38, 0x10);
+            }
+            data.view.setUint32(index + 42, file.offset, true);
+            data.array.set(file.nameBuf, index + 46);
+            data.array.set(file.comment, index + 46 + file.nameBuf.length);
+            index += 46 + file.nameBuf.length + file.comment.length;
+        }
+        data.view.setUint32(index, 0x504b0506);
+        data.view.setUint16(index + 8, filenames.length, true);
+        data.view.setUint16(index + 10, filenames.length, true);
+        data.view.setUint32(index + 12, length, true);
+        data.view.setUint32(index + 16, offset, true);
+        ctrl.enqueue(data.array);
+        ctrl.close();
+    }
+
+    function processNextChunk() {
+        if (!activeZipObject) return;
+        if (activeZipObject.directory)
+            return activeZipObject.writeFooter(activeZipObject.writeHeader());
+        if (activeZipObject.reader) return pump(activeZipObject);
+        if (activeZipObject.fileLike.stream) {
+            activeZipObject.crc = new Crc32();
+            activeZipObject.reader = activeZipObject.fileLike
+                .stream()
+                .getReader();
+            activeZipObject.writeHeader();
+        } else next();
+    }
+    return new ReadableStream({
+        start: (c) => {
+            ctrl = c;
+            underlyingSource.start &&
+                Promise.resolve(underlyingSource.start(zipWriter));
+        },
+        pull() {
+            return (
+                processNextChunk() ||
+                (underlyingSource.pull &&
+                    Promise.resolve(underlyingSource.pull(zipWriter)))
+            );
+        },
+    });
+}
+
+window.ZIP = createWriter;
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..08bfa5f
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "lib": [
+      "es6",
+      "dom"
+    ],
+    "outDir": "./dist/",
+    "sourceMap": true,
+    "noImplicitAny": false,
+    "noImplicitThis": true,
+    "strictNullChecks": true,
+    "esModuleInterop": true,
+    "module": "ESNext",
+    "target": "ES2017",
+    "jsx": "react",
+    "removeComments": true,
+    "strictFunctionTypes": true,
+    "strictPropertyInitialization": false,
+    "strictBindCallApply": true,
+    "noImplicitReturns": true,
+    "alwaysStrict": true,
+    "declaration": true,
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true,
+    "moduleResolution": "node",
+  },
+  "include": [
+    "src/**/*"
+  ],
+  "exclude": [
+    "node_modules",
+    "**/*.spec.ts"
+  ]
+}
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
new file mode 100644
index 0000000..9a9083e
--- /dev/null
+++ b/yarn.lock
@@ -0,0 +1,12481 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@ampproject/remapping@^2.1.0":
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/@ampproject/remapping/-/remapping-2.1.2.tgz#4edca94973ded9630d20101cd8559cedb8d8bd34"
+  integrity sha512-hoyByceqwKirw7w3Z7gnIIZC3Wx3J484Y3L/cMpXFbr7d9ZQj2mODrirNzcJa+SM3UlpWXYvKV4RlRpFXlWgXg==
+  dependencies:
+    "@jridgewell/trace-mapping" "^0.3.0"
+
+"@babel/code-frame@7.5.5":
+  version "7.5.5"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.5.5.tgz#bc0782f6d69f7b7d49531219699b988f669a8f9d"
+  integrity sha512-27d4lZoomVyo51VegxI20xZPuSHusqbQag/ztrBC7wegWoQ1nLREPVSKSW8byhTlzTKyNE4ifaTA6lCp7JjpFw==
+  dependencies:
+    "@babel/highlight" "^7.0.0"
+
+"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.16.7", "@babel/code-frame@^7.5.5", "@babel/code-frame@^7.8.3":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.16.7.tgz#44416b6bd7624b998f5b1af5d470856c40138789"
+  integrity sha512-iAXqUn8IIeBTNd72xsFlgaXHkMBMt6y4HJp1tIaK465CWLT/fG1aqB7ykr95gHHmlBdGbFeWWfyB4NJJ0nmeIg==
+  dependencies:
+    "@babel/highlight" "^7.16.7"
+
+"@babel/code-frame@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.18.6.tgz#3b25d38c89600baa2dcc219edfa88a74eb2c427a"
+  integrity sha512-TDCmlK5eOvH+eH7cdAFlNXeVJqWIQ7gW9tY1GJIpUtFb6CmjVyq2VM3u71bOyR8CRihcCgMUYoDNyLXao3+70Q==
+  dependencies:
+    "@babel/highlight" "^7.18.6"
+
+"@babel/compat-data@^7.13.11", "@babel/compat-data@^7.16.4", "@babel/compat-data@^7.16.8", "@babel/compat-data@^7.17.0", "@babel/compat-data@^7.9.0":
+  version "7.17.0"
+  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.17.0.tgz#86850b8597ea6962089770952075dcaabb8dba34"
+  integrity sha512-392byTlpGWXMv4FbyWw3sAZ/FrW/DrwqLGXpy0mbyNe9Taqv1mg9yON5/o0cnr8XYCkFTZbC1eV+c+LAROgrng==
+
+"@babel/core@7.6.0":
+  version "7.6.0"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.6.0.tgz#9b00f73554edd67bebc86df8303ef678be3d7b48"
+  integrity sha512-FuRhDRtsd6IptKpHXAa+4WPZYY2ZzgowkbLBecEDDSje1X/apG7jQM33or3NdOmjXBKWGOg4JmSiRfUfuTtHXw==
+  dependencies:
+    "@babel/code-frame" "^7.5.5"
+    "@babel/generator" "^7.6.0"
+    "@babel/helpers" "^7.6.0"
+    "@babel/parser" "^7.6.0"
+    "@babel/template" "^7.6.0"
+    "@babel/traverse" "^7.6.0"
+    "@babel/types" "^7.6.0"
+    convert-source-map "^1.1.0"
+    debug "^4.1.0"
+    json5 "^2.1.0"
+    lodash "^4.17.13"
+    resolve "^1.3.2"
+    semver "^5.4.1"
+    source-map "^0.5.0"
+
+"@babel/core@7.9.0":
+  version "7.9.0"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.9.0.tgz#ac977b538b77e132ff706f3b8a4dbad09c03c56e"
+  integrity sha512-kWc7L0fw1xwvI0zi8OKVBuxRVefwGOrKSQMvrQ3dW+bIIavBY3/NpXmpjMy7bQnLgwgzWQZ8TlM57YHpHNHz4w==
+  dependencies:
+    "@babel/code-frame" "^7.8.3"
+    "@babel/generator" "^7.9.0"
+    "@babel/helper-module-transforms" "^7.9.0"
+    "@babel/helpers" "^7.9.0"
+    "@babel/parser" "^7.9.0"
+    "@babel/template" "^7.8.6"
+    "@babel/traverse" "^7.9.0"
+    "@babel/types" "^7.9.0"
+    convert-source-map "^1.7.0"
+    debug "^4.1.0"
+    gensync "^1.0.0-beta.1"
+    json5 "^2.1.2"
+    lodash "^4.17.13"
+    resolve "^1.3.2"
+    semver "^5.4.1"
+    source-map "^0.5.0"
+
+"@babel/core@^7.1.0", "@babel/core@^7.4.5":
+  version "7.17.5"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.17.5.tgz#6cd2e836058c28f06a4ca8ee7ed955bbf37c8225"
+  integrity sha512-/BBMw4EvjmyquN5O+t5eh0+YqB3XXJkYD2cjKpYtWOfFy4lQ4UozNSmxAcWT8r2XtZs0ewG+zrfsqeR15i1ajA==
+  dependencies:
+    "@ampproject/remapping" "^2.1.0"
+    "@babel/code-frame" "^7.16.7"
+    "@babel/generator" "^7.17.3"
+    "@babel/helper-compilation-targets" "^7.16.7"
+    "@babel/helper-module-transforms" "^7.16.7"
+    "@babel/helpers" "^7.17.2"
+    "@babel/parser" "^7.17.3"
+    "@babel/template" "^7.16.7"
+    "@babel/traverse" "^7.17.3"
+    "@babel/types" "^7.17.0"
+    convert-source-map "^1.7.0"
+    debug "^4.1.0"
+    gensync "^1.0.0-beta.2"
+    json5 "^2.1.2"
+    semver "^6.3.0"
+
+"@babel/generator@^7.17.3", "@babel/generator@^7.4.0", "@babel/generator@^7.6.0", "@babel/generator@^7.9.0":
+  version "7.17.3"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.17.3.tgz#a2c30b0c4f89858cb87050c3ffdfd36bdf443200"
+  integrity sha512-+R6Dctil/MgUsZsZAkYgK+ADNSZzJRRy0TvY65T71z/CR854xHQ1EweBYXdfT+HNeN7w0cSJJEzgxZMv40pxsg==
+  dependencies:
+    "@babel/types" "^7.17.0"
+    jsesc "^2.5.1"
+    source-map "^0.5.0"
+
+"@babel/generator@^7.20.0":
+  version "7.20.0"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.20.0.tgz#0bfc5379e0efb05ca6092091261fcdf7ec36249d"
+  integrity sha512-GUPcXxWibClgmYJuIwC2Bc2Lg+8b9VjaJ+HlNdACEVt+Wlr1eoU1OPZjZRm7Hzl0gaTsUZNQfeihvZJhG7oc3w==
+  dependencies:
+    "@babel/types" "^7.20.0"
+    "@jridgewell/gen-mapping" "^0.3.2"
+    jsesc "^2.5.1"
+
+"@babel/helper-annotate-as-pure@^7.16.0":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.18.6.tgz#eaa49f6f80d5a33f9a5dd2276e6d6e451be0a6bb"
+  integrity sha512-duORpUiYrEpzKIop6iNbjnwKLAKnJ47csTyRACyEmWj0QdUrm5aqNJGHSSEQSUAvNW0ojX0dOmK9dZduvkfeXA==
+  dependencies:
+    "@babel/types" "^7.18.6"
+
+"@babel/helper-annotate-as-pure@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.16.7.tgz#bb2339a7534a9c128e3102024c60760a3a7f3862"
+  integrity sha512-s6t2w/IPQVTAET1HitoowRGXooX8mCgtuP5195wD/QJPV6wYjpujCGF7JuMODVX2ZAJOf1GT6DT9MHEZvLOFSw==
+  dependencies:
+    "@babel/types" "^7.16.7"
+
+"@babel/helper-builder-binary-assignment-operator-visitor@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.16.7.tgz#38d138561ea207f0f69eb1626a418e4f7e6a580b"
+  integrity sha512-C6FdbRaxYjwVu/geKW4ZeQ0Q31AftgRcdSnZ5/jsH6BzCJbtvXvhpfkbkThYSuutZA7nCXpPR6AD9zd1dprMkA==
+  dependencies:
+    "@babel/helper-explode-assignable-expression" "^7.16.7"
+    "@babel/types" "^7.16.7"
+
+"@babel/helper-compilation-targets@^7.13.0", "@babel/helper-compilation-targets@^7.16.7", "@babel/helper-compilation-targets@^7.8.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.16.7.tgz#06e66c5f299601e6c7da350049315e83209d551b"
+  integrity sha512-mGojBwIWcwGD6rfqgRXVlVYmPAv7eOpIemUG3dGnDdCY4Pae70ROij3XmfrH6Fa1h1aiDylpglbZyktfzyo/hA==
+  dependencies:
+    "@babel/compat-data" "^7.16.4"
+    "@babel/helper-validator-option" "^7.16.7"
+    browserslist "^4.17.5"
+    semver "^6.3.0"
+
+"@babel/helper-create-class-features-plugin@^7.16.10", "@babel/helper-create-class-features-plugin@^7.16.7", "@babel/helper-create-class-features-plugin@^7.17.6", "@babel/helper-create-class-features-plugin@^7.8.3":
+  version "7.17.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.17.6.tgz#3778c1ed09a7f3e65e6d6e0f6fbfcc53809d92c9"
+  integrity sha512-SogLLSxXm2OkBbSsHZMM4tUi8fUzjs63AT/d0YQIzr6GSd8Hxsbk2KYDX0k0DweAzGMj/YWeiCsorIdtdcW8Eg==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.16.7"
+    "@babel/helper-environment-visitor" "^7.16.7"
+    "@babel/helper-function-name" "^7.16.7"
+    "@babel/helper-member-expression-to-functions" "^7.16.7"
+    "@babel/helper-optimise-call-expression" "^7.16.7"
+    "@babel/helper-replace-supers" "^7.16.7"
+    "@babel/helper-split-export-declaration" "^7.16.7"
+
+"@babel/helper-create-regexp-features-plugin@^7.16.7":
+  version "7.17.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.17.0.tgz#1dcc7d40ba0c6b6b25618997c5dbfd310f186fe1"
+  integrity sha512-awO2So99wG6KnlE+TPs6rn83gCz5WlEePJDTnLEqbchMVrBeAujURVphRdigsk094VhvZehFoNOihSlcBjwsXA==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.16.7"
+    regexpu-core "^5.0.1"
+
+"@babel/helper-define-polyfill-provider@^0.3.1":
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.3.1.tgz#52411b445bdb2e676869e5a74960d2d3826d2665"
+  integrity sha512-J9hGMpJQmtWmj46B3kBHmL38UhJGhYX7eqkcq+2gsstyYt341HmPeWspihX43yVRA0mS+8GGk2Gckc7bY/HCmA==
+  dependencies:
+    "@babel/helper-compilation-targets" "^7.13.0"
+    "@babel/helper-module-imports" "^7.12.13"
+    "@babel/helper-plugin-utils" "^7.13.0"
+    "@babel/traverse" "^7.13.0"
+    debug "^4.1.1"
+    lodash.debounce "^4.0.8"
+    resolve "^1.14.2"
+    semver "^6.1.2"
+
+"@babel/helper-environment-visitor@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.16.7.tgz#ff484094a839bde9d89cd63cba017d7aae80ecd7"
+  integrity sha512-SLLb0AAn6PkUeAfKJCCOl9e1R53pQlGAfc4y4XuMRZfqeMYLE0dM1LMhqbGAlGQY0lfw5/ohoYWAe9V1yibRag==
+  dependencies:
+    "@babel/types" "^7.16.7"
+
+"@babel/helper-environment-visitor@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.18.9.tgz#0c0cee9b35d2ca190478756865bb3528422f51be"
+  integrity sha512-3r/aACDJ3fhQ/EVgFy0hpj8oHyHpQc+LPtJoY9SzTThAsStm4Ptegq92vqKoE3vD706ZVFWITnMnxucw+S9Ipg==
+
+"@babel/helper-explode-assignable-expression@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.16.7.tgz#12a6d8522fdd834f194e868af6354e8650242b7a"
+  integrity sha512-KyUenhWMC8VrxzkGP0Jizjo4/Zx+1nNZhgocs+gLzyZyB8SHidhoq9KK/8Ato4anhwsivfkBLftky7gvzbZMtQ==
+  dependencies:
+    "@babel/types" "^7.16.7"
+
+"@babel/helper-function-name@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.16.7.tgz#f1ec51551fb1c8956bc8dd95f38523b6cf375f8f"
+  integrity sha512-QfDfEnIUyyBSR3HtrtGECuZ6DAyCkYFp7GHl75vFtTnn6pjKeK0T1DB5lLkFvBea8MdaiUABx3osbgLyInoejA==
+  dependencies:
+    "@babel/helper-get-function-arity" "^7.16.7"
+    "@babel/template" "^7.16.7"
+    "@babel/types" "^7.16.7"
+
+"@babel/helper-function-name@^7.19.0":
+  version "7.19.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.19.0.tgz#941574ed5390682e872e52d3f38ce9d1bef4648c"
+  integrity sha512-WAwHBINyrpqywkUH0nTnNgI5ina5TFn85HKS0pbPDfxFfhyR/aNQEn4hGi1P1JyT//I0t4OgXUlofzWILRvS5w==
+  dependencies:
+    "@babel/template" "^7.18.10"
+    "@babel/types" "^7.19.0"
+
+"@babel/helper-get-function-arity@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.16.7.tgz#ea08ac753117a669f1508ba06ebcc49156387419"
+  integrity sha512-flc+RLSOBXzNzVhcLu6ujeHUrD6tANAOU5ojrRx/as+tbzf8+stUCj7+IfRRoAbEZqj/ahXEMsjhOhgeZsrnTw==
+  dependencies:
+    "@babel/types" "^7.16.7"
+
+"@babel/helper-hoist-variables@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.16.7.tgz#86bcb19a77a509c7b77d0e22323ef588fa58c246"
+  integrity sha512-m04d/0Op34H5v7pbZw6pSKP7weA6lsMvfiIAMeIvkY/R4xQtBSMFEigu9QTZ2qB/9l22vsxtM8a+Q8CzD255fg==
+  dependencies:
+    "@babel/types" "^7.16.7"
+
+"@babel/helper-hoist-variables@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.18.6.tgz#d4d2c8fb4baeaa5c68b99cc8245c56554f926678"
+  integrity sha512-UlJQPkFqFULIcyW5sbzgbkxn2FKRgwWiRexcuaR8RNJRy8+LLveqPjwZV/bwrLZCN0eUHD/x8D0heK1ozuoo6Q==
+  dependencies:
+    "@babel/types" "^7.18.6"
+
+"@babel/helper-member-expression-to-functions@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.16.7.tgz#42b9ca4b2b200123c3b7e726b0ae5153924905b0"
+  integrity sha512-VtJ/65tYiU/6AbMTDwyoXGPKHgTsfRarivm+YbB5uAzKUyuPjgZSgAFeG87FCigc7KNHu2Pegh1XIT3lXjvz3Q==
+  dependencies:
+    "@babel/types" "^7.16.7"
+
+"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.16.0":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.18.6.tgz#1e3ebdbbd08aad1437b428c50204db13c5a3ca6e"
+  integrity sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==
+  dependencies:
+    "@babel/types" "^7.18.6"
+
+"@babel/helper-module-imports@^7.12.13", "@babel/helper-module-imports@^7.16.7", "@babel/helper-module-imports@^7.8.3":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.16.7.tgz#25612a8091a999704461c8a222d0efec5d091437"
+  integrity sha512-LVtS6TqjJHFc+nYeITRo6VLXve70xmq7wPhWTqDJusJEgGmkAACWwMiTNrvfoQo6hEhFwAIixNkvB0jPXDL8Wg==
+  dependencies:
+    "@babel/types" "^7.16.7"
+
+"@babel/helper-module-transforms@^7.16.7", "@babel/helper-module-transforms@^7.9.0":
+  version "7.17.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.17.6.tgz#3c3b03cc6617e33d68ef5a27a67419ac5199ccd0"
+  integrity sha512-2ULmRdqoOMpdvkbT8jONrZML/XALfzxlb052bldftkicAUy8AxSCkD5trDPQcwHNmolcl7wP6ehNqMlyUw6AaA==
+  dependencies:
+    "@babel/helper-environment-visitor" "^7.16.7"
+    "@babel/helper-module-imports" "^7.16.7"
+    "@babel/helper-simple-access" "^7.16.7"
+    "@babel/helper-split-export-declaration" "^7.16.7"
+    "@babel/helper-validator-identifier" "^7.16.7"
+    "@babel/template" "^7.16.7"
+    "@babel/traverse" "^7.17.3"
+    "@babel/types" "^7.17.0"
+
+"@babel/helper-optimise-call-expression@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.16.7.tgz#a34e3560605abbd31a18546bd2aad3e6d9a174f2"
+  integrity sha512-EtgBhg7rd/JcnpZFXpBy0ze1YRfdm7BnBX4uKMBd3ixa3RGAE002JZB66FJyNH7g0F38U05pXmA5P8cBh7z+1w==
+  dependencies:
+    "@babel/types" "^7.16.7"
+
+"@babel/helper-plugin-utils@^7.0.0", "@babel/helper-plugin-utils@^7.10.4", "@babel/helper-plugin-utils@^7.12.13", "@babel/helper-plugin-utils@^7.13.0", "@babel/helper-plugin-utils@^7.14.5", "@babel/helper-plugin-utils@^7.16.7", "@babel/helper-plugin-utils@^7.8.0", "@babel/helper-plugin-utils@^7.8.3":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.16.7.tgz#aa3a8ab4c3cceff8e65eb9e73d87dc4ff320b2f5"
+  integrity sha512-Qg3Nk7ZxpgMrsox6HreY1ZNKdBq7K72tDSliA6dCl5f007jR4ne8iD5UzuNnCJH2xBf2BEEVGr+/OL6Gdp7RxA==
+
+"@babel/helper-remap-async-to-generator@^7.16.8":
+  version "7.16.8"
+  resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.16.8.tgz#29ffaade68a367e2ed09c90901986918d25e57e3"
+  integrity sha512-fm0gH7Flb8H51LqJHy3HJ3wnE1+qtYR2A99K06ahwrawLdOFsCEWjZOrYricXJHoPSudNKxrMBUPEIPxiIIvBw==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.16.7"
+    "@babel/helper-wrap-function" "^7.16.8"
+    "@babel/types" "^7.16.8"
+
+"@babel/helper-replace-supers@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.16.7.tgz#e9f5f5f32ac90429c1a4bdec0f231ef0c2838ab1"
+  integrity sha512-y9vsWilTNaVnVh6xiJfABzsNpgDPKev9HnAgz6Gb1p6UUwf9NepdlsV7VXGCftJM+jqD5f7JIEubcpLjZj5dBw==
+  dependencies:
+    "@babel/helper-environment-visitor" "^7.16.7"
+    "@babel/helper-member-expression-to-functions" "^7.16.7"
+    "@babel/helper-optimise-call-expression" "^7.16.7"
+    "@babel/traverse" "^7.16.7"
+    "@babel/types" "^7.16.7"
+
+"@babel/helper-simple-access@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.16.7.tgz#d656654b9ea08dbb9659b69d61063ccd343ff0f7"
+  integrity sha512-ZIzHVyoeLMvXMN/vok/a4LWRy8G2v205mNP0XOuf9XRLyX5/u9CnVulUtDgUTama3lT+bf/UqucuZjqiGuTS1g==
+  dependencies:
+    "@babel/types" "^7.16.7"
+
+"@babel/helper-skip-transparent-expression-wrappers@^7.16.0":
+  version "7.16.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.16.0.tgz#0ee3388070147c3ae051e487eca3ebb0e2e8bb09"
+  integrity sha512-+il1gTy0oHwUsBQZyJvukbB4vPMdcYBrFHa0Uc4AizLxbq6BOYC51Rv4tWocX9BLBDLZ4kc6qUFpQ6HRgL+3zw==
+  dependencies:
+    "@babel/types" "^7.16.0"
+
+"@babel/helper-split-export-declaration@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.16.7.tgz#0b648c0c42da9d3920d85ad585f2778620b8726b"
+  integrity sha512-xbWoy/PFoxSWazIToT9Sif+jJTlrMcndIsaOKvTA6u7QEo7ilkRZpjew18/W3c7nm8fXdUDXh02VXTbZ0pGDNw==
+  dependencies:
+    "@babel/types" "^7.16.7"
+
+"@babel/helper-split-export-declaration@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.18.6.tgz#7367949bc75b20c6d5a5d4a97bba2824ae8ef075"
+  integrity sha512-bde1etTx6ZyTmobl9LLMMQsaizFVZrquTEHOqKeQESMKo4PlObf+8+JA25ZsIpZhT/WEd39+vOdLXAFG/nELpA==
+  dependencies:
+    "@babel/types" "^7.18.6"
+
+"@babel/helper-string-parser@^7.19.4":
+  version "7.19.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.19.4.tgz#38d3acb654b4701a9b77fb0615a96f775c3a9e63"
+  integrity sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw==
+
+"@babel/helper-validator-identifier@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.16.7.tgz#e8c602438c4a8195751243da9031d1607d247cad"
+  integrity sha512-hsEnFemeiW4D08A5gUAZxLBTXpZ39P+a+DGDsHw1yxqyQ/jzFEnxf5uTEGp+3bzAbNOxU1paTgYS4ECU/IgfDw==
+
+"@babel/helper-validator-identifier@^7.18.6", "@babel/helper-validator-identifier@^7.19.1":
+  version "7.19.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz#7eea834cf32901ffdc1a7ee555e2f9c27e249ca2"
+  integrity sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==
+
+"@babel/helper-validator-option@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.16.7.tgz#b203ce62ce5fe153899b617c08957de860de4d23"
+  integrity sha512-TRtenOuRUVo9oIQGPC5G9DgK4743cdxvtOw0weQNpZXaS16SCBi5MNjZF8vba3ETURjZpTbVn7Vvcf2eAwFozQ==
+
+"@babel/helper-wrap-function@^7.16.8":
+  version "7.16.8"
+  resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.16.8.tgz#58afda087c4cd235de92f7ceedebca2c41274200"
+  integrity sha512-8RpyRVIAW1RcDDGTA+GpPAwV22wXCfKOoM9bet6TLkGIFTkRQSkH1nMQ5Yet4MpoXe1ZwHPVtNasc2w0uZMqnw==
+  dependencies:
+    "@babel/helper-function-name" "^7.16.7"
+    "@babel/template" "^7.16.7"
+    "@babel/traverse" "^7.16.8"
+    "@babel/types" "^7.16.8"
+
+"@babel/helpers@^7.17.2", "@babel/helpers@^7.6.0", "@babel/helpers@^7.9.0":
+  version "7.17.2"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.17.2.tgz#23f0a0746c8e287773ccd27c14be428891f63417"
+  integrity sha512-0Qu7RLR1dILozr/6M0xgj+DFPmi6Bnulgm9M8BVa9ZCWxDqlSnqt3cf8IDPB5m45sVXUZ0kuQAgUrdSFFH79fQ==
+  dependencies:
+    "@babel/template" "^7.16.7"
+    "@babel/traverse" "^7.17.0"
+    "@babel/types" "^7.17.0"
+
+"@babel/highlight@^7.0.0", "@babel/highlight@^7.16.7":
+  version "7.16.10"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.16.10.tgz#744f2eb81579d6eea753c227b0f570ad785aba88"
+  integrity sha512-5FnTQLSLswEj6IkgVw5KusNUUFY9ZGqe/TRFnP/BKYHYgfh7tc+C7mwiy95/yNP7Dh9x580Vv8r7u7ZfTBFxdw==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.16.7"
+    chalk "^2.0.0"
+    js-tokens "^4.0.0"
+
+"@babel/highlight@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.18.6.tgz#81158601e93e2563795adcbfbdf5d64be3f2ecdf"
+  integrity sha512-u7stbOuYjaPezCuLj29hNW1v64M2Md2qupEKP1fHc7WdOA3DgLh37suiSrZYY7haUB7iBeQZ9P1uiRF359do3g==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.18.6"
+    chalk "^2.0.0"
+    js-tokens "^4.0.0"
+
+"@babel/parser@^7.0.0", "@babel/parser@^7.1.0", "@babel/parser@^7.16.7", "@babel/parser@^7.17.3", "@babel/parser@^7.4.3", "@babel/parser@^7.6.0", "@babel/parser@^7.9.0":
+  version "7.17.3"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.17.3.tgz#b07702b982990bf6fdc1da5049a23fece4c5c3d0"
+  integrity sha512-7yJPvPV+ESz2IUTPbOL+YkIGyCqOyNIzdguKQuJGnH7bg1WTIifuM21YqokFt/THWh1AkCRn9IgoykTRCBVpzA==
+
+"@babel/parser@^7.18.10", "@babel/parser@^7.20.0":
+  version "7.20.0"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.20.0.tgz#b26133c888da4d79b0d3edcf42677bcadc783046"
+  integrity sha512-G9VgAhEaICnz8iiJeGJQyVl6J2nTjbW0xeisva0PK6XcKsga7BIaqm4ZF8Rg1Wbaqmy6znspNqhPaPkyukujzg==
+
+"@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.16.7.tgz#4eda6d6c2a0aa79c70fa7b6da67763dfe2141050"
+  integrity sha512-anv/DObl7waiGEnC24O9zqL0pSuI9hljihqiDuFHC8d7/bjr/4RLGPWuc8rYOff/QPzbEPSkzG8wGG9aDuhHRg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+
+"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.16.7.tgz#cc001234dfc139ac45f6bcf801866198c8c72ff9"
+  integrity sha512-di8vUHRdf+4aJ7ltXhaDbPoszdkh59AQtJM5soLsuHpQJdFQZOA4uGj0V2u/CZ8bJ/u8ULDL5yq6FO/bCXnKHw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.16.0"
+    "@babel/plugin-proposal-optional-chaining" "^7.16.7"
+
+"@babel/plugin-proposal-async-generator-functions@^7.16.8", "@babel/plugin-proposal-async-generator-functions@^7.8.3":
+  version "7.16.8"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.16.8.tgz#3bdd1ebbe620804ea9416706cd67d60787504bc8"
+  integrity sha512-71YHIvMuiuqWJQkebWJtdhQTfd4Q4mF76q2IX37uZPkG9+olBxsX+rH1vkhFto4UeJZ9dPY2s+mDvhDm1u2BGQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/helper-remap-async-to-generator" "^7.16.8"
+    "@babel/plugin-syntax-async-generators" "^7.8.4"
+
+"@babel/plugin-proposal-class-properties@7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.8.3.tgz#5e06654af5cd04b608915aada9b2a6788004464e"
+  integrity sha512-EqFhbo7IosdgPgZggHaNObkmO1kNUe3slaKu54d5OWvy+p9QIKOzK1GAEpAIsZtWVtPXUHSMcT4smvDrCfY4AA==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.8.3"
+    "@babel/helper-plugin-utils" "^7.8.3"
+
+"@babel/plugin-proposal-class-properties@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.16.7.tgz#925cad7b3b1a2fcea7e59ecc8eb5954f961f91b0"
+  integrity sha512-IobU0Xme31ewjYOShSIqd/ZGM/r/cuOz2z0MDbNrhF5FW+ZVgi0f2lyeoj9KFPDOAqsYxmLWZte1WOwlvY9aww==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.16.7"
+
+"@babel/plugin-proposal-class-static-block@^7.16.7":
+  version "7.17.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-static-block/-/plugin-proposal-class-static-block-7.17.6.tgz#164e8fd25f0d80fa48c5a4d1438a6629325ad83c"
+  integrity sha512-X/tididvL2zbs7jZCeeRJ8167U/+Ac135AM6jCAx6gYXDUviZV5Ku9UDvWS2NCuWlFjIRXklYhwo6HhAC7ETnA==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.17.6"
+    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/plugin-syntax-class-static-block" "^7.14.5"
+
+"@babel/plugin-proposal-decorators@7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.8.3.tgz#2156860ab65c5abf068c3f67042184041066543e"
+  integrity sha512-e3RvdvS4qPJVTe288DlXjwKflpfy1hr0j5dz5WpIYYeP7vQZg2WfAEIp8k5/Lwis/m5REXEteIz6rrcDtXXG7w==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.8.3"
+    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/plugin-syntax-decorators" "^7.8.3"
+
+"@babel/plugin-proposal-dynamic-import@^7.16.7", "@babel/plugin-proposal-dynamic-import@^7.8.3":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.16.7.tgz#c19c897eaa46b27634a00fee9fb7d829158704b2"
+  integrity sha512-I8SW9Ho3/8DRSdmDdH3gORdyUuYnk1m4cMxUAdu5oy4n3OfN8flDEH+d60iG7dUfi0KkYwSvoalHzzdRzpWHTg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/plugin-syntax-dynamic-import" "^7.8.3"
+
+"@babel/plugin-proposal-export-namespace-from@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.16.7.tgz#09de09df18445a5786a305681423ae63507a6163"
+  integrity sha512-ZxdtqDXLRGBL64ocZcs7ovt71L3jhC1RGSyR996svrCi3PYqHNkb3SwPJCs8RIzD86s+WPpt2S73+EHCGO+NUA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
+
+"@babel/plugin-proposal-json-strings@^7.16.7", "@babel/plugin-proposal-json-strings@^7.8.3":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.16.7.tgz#9732cb1d17d9a2626a08c5be25186c195b6fa6e8"
+  integrity sha512-lNZ3EEggsGY78JavgbHsK9u5P3pQaW7k4axlgFLYkMd7UBsiNahCITShLjNQschPyjtO6dADrL24757IdhBrsQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/plugin-syntax-json-strings" "^7.8.3"
+
+"@babel/plugin-proposal-logical-assignment-operators@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-logical-assignment-operators/-/plugin-proposal-logical-assignment-operators-7.16.7.tgz#be23c0ba74deec1922e639832904be0bea73cdea"
+  integrity sha512-K3XzyZJGQCr00+EtYtrDjmwX7o7PLK6U9bi1nCwkQioRFVUv6dJoxbQjtWVtP+bCPy82bONBKG8NPyQ4+i6yjg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
+
+"@babel/plugin-proposal-nullish-coalescing-operator@7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.8.3.tgz#e4572253fdeed65cddeecfdab3f928afeb2fd5d2"
+  integrity sha512-TS9MlfzXpXKt6YYomudb/KU7nQI6/xnapG6in1uZxoxDghuSMZsPb6D2fyUwNYSAp4l1iR7QtFOjkqcRYcUsfw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.0"
+
+"@babel/plugin-proposal-nullish-coalescing-operator@^7.16.7", "@babel/plugin-proposal-nullish-coalescing-operator@^7.8.3":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.16.7.tgz#141fc20b6857e59459d430c850a0011e36561d99"
+  integrity sha512-aUOrYU3EVtjf62jQrCj63pYZ7k6vns2h/DQvHPWGmsJRYzWXZ6/AsfgpiRy6XiuIDADhJzP2Q9MwSMKauBQ+UQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"
+
+"@babel/plugin-proposal-numeric-separator@7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.8.3.tgz#5d6769409699ec9b3b68684cd8116cedff93bad8"
+  integrity sha512-jWioO1s6R/R+wEHizfaScNsAx+xKgwTLNXSh7tTC4Usj3ItsPEhYkEpU4h+lpnBwq7NBVOJXfO6cRFYcX69JUQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/plugin-syntax-numeric-separator" "^7.8.3"
+
+"@babel/plugin-proposal-numeric-separator@^7.16.7", "@babel/plugin-proposal-numeric-separator@^7.8.3":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.16.7.tgz#d6b69f4af63fb38b6ca2558442a7fb191236eba9"
+  integrity sha512-vQgPMknOIgiuVqbokToyXbkY/OmmjAzr/0lhSIbG/KmnzXPGwW/AdhdKpi+O4X/VkWiWjnkKOBiqJrTaC98VKw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/plugin-syntax-numeric-separator" "^7.10.4"
+
+"@babel/plugin-proposal-object-rest-spread@^7.16.7", "@babel/plugin-proposal-object-rest-spread@^7.9.0":
+  version "7.17.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.17.3.tgz#d9eb649a54628a51701aef7e0ea3d17e2b9dd390"
+  integrity sha512-yuL5iQA/TbZn+RGAfxQXfi7CNLmKi1f8zInn4IgobuCWcAb7i+zj4TYzQ9l8cEzVyJ89PDGuqxK1xZpUDISesw==
+  dependencies:
+    "@babel/compat-data" "^7.17.0"
+    "@babel/helper-compilation-targets" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/plugin-syntax-object-rest-spread" "^7.8.3"
+    "@babel/plugin-transform-parameters" "^7.16.7"
+
+"@babel/plugin-proposal-optional-catch-binding@^7.16.7", "@babel/plugin-proposal-optional-catch-binding@^7.8.3":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.16.7.tgz#c623a430674ffc4ab732fd0a0ae7722b67cb74cf"
+  integrity sha512-eMOH/L4OvWSZAE1VkHbr1vckLG1WUcHGJSLqqQwl2GaUqG6QjddvrOaTUMNYiv77H5IKPMZ9U9P7EaHwvAShfA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/plugin-syntax-optional-catch-binding" "^7.8.3"
+
+"@babel/plugin-proposal-optional-chaining@7.9.0":
+  version "7.9.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.9.0.tgz#31db16b154c39d6b8a645292472b98394c292a58"
+  integrity sha512-NDn5tu3tcv4W30jNhmc2hyD5c56G6cXx4TesJubhxrJeCvuuMpttxr0OnNCqbZGhFjLrg+NIhxxC+BK5F6yS3w==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/plugin-syntax-optional-chaining" "^7.8.0"
+
+"@babel/plugin-proposal-optional-chaining@^7.16.7", "@babel/plugin-proposal-optional-chaining@^7.9.0":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.16.7.tgz#7cd629564724816c0e8a969535551f943c64c39a"
+  integrity sha512-eC3xy+ZrUcBtP7x+sq62Q/HYd674pPTb/77XZMb5wbDPGWIdUbSr4Agr052+zaUPSb+gGRnjxXfKFvx5iMJ+DA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.16.0"
+    "@babel/plugin-syntax-optional-chaining" "^7.8.3"
+
+"@babel/plugin-proposal-private-methods@^7.16.11":
+  version "7.16.11"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.16.11.tgz#e8df108288555ff259f4527dbe84813aac3a1c50"
+  integrity sha512-F/2uAkPlXDr8+BHpZvo19w3hLFKge+k75XUprE6jaqKxjGkSYcK+4c+bup5PdW/7W/Rpjwql7FTVEDW+fRAQsw==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.16.10"
+    "@babel/helper-plugin-utils" "^7.16.7"
+
+"@babel/plugin-proposal-private-property-in-object@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.16.7.tgz#b0b8cef543c2c3d57e59e2c611994861d46a3fce"
+  integrity sha512-rMQkjcOFbm+ufe3bTZLyOfsOUOxyvLXZJCTARhJr+8UMSoZmqTe1K1BgkFcrW37rAchWg57yI69ORxiWvUINuQ==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.16.7"
+    "@babel/helper-create-class-features-plugin" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/plugin-syntax-private-property-in-object" "^7.14.5"
+
+"@babel/plugin-proposal-unicode-property-regex@^7.16.7", "@babel/plugin-proposal-unicode-property-regex@^7.4.4", "@babel/plugin-proposal-unicode-property-regex@^7.8.3":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.16.7.tgz#635d18eb10c6214210ffc5ff4932552de08188a2"
+  integrity sha512-QRK0YI/40VLhNVGIjRNAAQkEHws0cswSdFFjpFyt943YmJIU1da9uW63Iu6NFV6CxTZW5eTDCrwZUstBWgp/Rg==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.16.7"
+
+"@babel/plugin-syntax-async-generators@^7.8.0", "@babel/plugin-syntax-async-generators@^7.8.4":
+  version "7.8.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz#a983fb1aeb2ec3f6ed042a210f640e90e786fe0d"
+  integrity sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-class-properties@^7.12.13":
+  version "7.12.13"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.12.13.tgz#b5c987274c4a3a82b89714796931a6b53544ae10"
+  integrity sha512-fm4idjKla0YahUNgFNLCB0qySdsoPiZP3iQE3rky0mBUtMZ23yDJ9SJdg6dXTSDnulOVqiF3Hgr9nbXvXTQZYA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.12.13"
+
+"@babel/plugin-syntax-class-static-block@^7.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-class-static-block/-/plugin-syntax-class-static-block-7.14.5.tgz#195df89b146b4b78b3bf897fd7a257c84659d406"
+  integrity sha512-b+YyPmr6ldyNnM6sqYeMWE+bgJcJpO6yS4QD7ymxgH34GBPNDM/THBh8iunyvKIZztiwLH4CJZ0RxTk9emgpjw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-syntax-decorators@^7.8.3":
+  version "7.17.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-decorators/-/plugin-syntax-decorators-7.17.0.tgz#a2be3b2c9fe7d78bd4994e790896bc411e2f166d"
+  integrity sha512-qWe85yCXsvDEluNP0OyeQjH63DlhAR3W7K9BxxU1MvbDb48tgBG+Ao6IJJ6smPDrrVzSQZrbF6donpkFBMcs3A==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+
+"@babel/plugin-syntax-dynamic-import@^7.8.0", "@babel/plugin-syntax-dynamic-import@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.8.3.tgz#62bf98b2da3cd21d626154fc96ee5b3cb68eacb3"
+  integrity sha512-5gdGbFon+PszYzqs83S3E5mpi7/y/8M9eC90MRTZfduQOYW76ig6SOSPNe41IG5LoP3FGBn2N0RjVDSQiS94kQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-export-namespace-from@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-export-namespace-from/-/plugin-syntax-export-namespace-from-7.8.3.tgz#028964a9ba80dbc094c915c487ad7c4e7a66465a"
+  integrity sha512-MXf5laXo6c1IbEbegDmzGPwGNTsHZmEy6QGznu5Sh2UCWvueywb2ee+CCE4zQiZstxU9BMoQO9i6zUFSY0Kj0Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.3"
+
+"@babel/plugin-syntax-flow@^7.8.3":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.16.7.tgz#202b147e5892b8452bbb0bb269c7ed2539ab8832"
+  integrity sha512-UDo3YGQO0jH6ytzVwgSLv9i/CzMcUjbKenL67dTrAZPPv6GFAtDhe6jqnvmoKzC/7htNTohhos+onPtDMqJwaQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+
+"@babel/plugin-syntax-json-strings@^7.8.0", "@babel/plugin-syntax-json-strings@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.8.3.tgz#01ca21b668cd8218c9e640cb6dd88c5412b2c96a"
+  integrity sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-jsx@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.16.7.tgz#50b6571d13f764266a113d77c82b4a6508bbe665"
+  integrity sha512-Esxmk7YjA8QysKeT3VhTXvF6y77f/a91SIs4pWb4H2eWGQkCKFgQaG6hdoEVZtGsrAcb2K5BW66XsOErD4WU3Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+
+"@babel/plugin-syntax-logical-assignment-operators@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz#ca91ef46303530448b906652bac2e9fe9941f699"
+  integrity sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-syntax-nullish-coalescing-operator@^7.8.0", "@babel/plugin-syntax-nullish-coalescing-operator@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz#167ed70368886081f74b5c36c65a88c03b66d1a9"
+  integrity sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-numeric-separator@^7.10.4", "@babel/plugin-syntax-numeric-separator@^7.8.0", "@babel/plugin-syntax-numeric-separator@^7.8.3":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-numeric-separator/-/plugin-syntax-numeric-separator-7.10.4.tgz#b9b070b3e33570cd9fd07ba7fa91c0dd37b9af97"
+  integrity sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-syntax-object-rest-spread@^7.0.0", "@babel/plugin-syntax-object-rest-spread@^7.8.0", "@babel/plugin-syntax-object-rest-spread@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.8.3.tgz#60e225edcbd98a640332a2e72dd3e66f1af55871"
+  integrity sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-optional-catch-binding@^7.8.0", "@babel/plugin-syntax-optional-catch-binding@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.8.3.tgz#6111a265bcfb020eb9efd0fdfd7d26402b9ed6c1"
+  integrity sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-optional-chaining@^7.8.0", "@babel/plugin-syntax-optional-chaining@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.8.3.tgz#4f69c2ab95167e0180cd5336613f8c5788f7d48a"
+  integrity sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-private-property-in-object@^7.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-private-property-in-object/-/plugin-syntax-private-property-in-object-7.14.5.tgz#0dc6671ec0ea22b6e94a1114f857970cd39de1ad"
+  integrity sha512-0wVnp9dxJ72ZUJDV27ZfbSj6iHLoytYZmh3rFcxNnvsJF3ktkzLDZPy/mA17HGsaQT3/DQsWYX1f1QGWkCoVUg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-syntax-top-level-await@^7.14.5", "@babel/plugin-syntax-top-level-await@^7.8.3":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.14.5.tgz#c1cfdadc35a646240001f06138247b741c34d94c"
+  integrity sha512-hx++upLv5U1rgYfwe1xBQUhRmU41NEvpUvrp8jkrSCdvGSnM5/qdRMtylJ6PG5OFkBaHkbTAKTnd3/YyESRHFw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-syntax-typescript@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.16.7.tgz#39c9b55ee153151990fb038651d58d3fd03f98f8"
+  integrity sha512-YhUIJHHGkqPgEcMYkPCKTyGUdoGKWtopIycQyjJH8OjvRgOYsXsaKehLVPScKJWAULPxMa4N1vCe6szREFlZ7A==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+
+"@babel/plugin-transform-arrow-functions@^7.16.7", "@babel/plugin-transform-arrow-functions@^7.8.3":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.16.7.tgz#44125e653d94b98db76369de9c396dc14bef4154"
+  integrity sha512-9ffkFFMbvzTvv+7dTp/66xvZAWASuPD5Tl9LK3Z9vhOmANo6j94rik+5YMBt4CwHVMWLWpMsriIc2zsa3WW3xQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+
+"@babel/plugin-transform-async-to-generator@^7.16.8", "@babel/plugin-transform-async-to-generator@^7.8.3":
+  version "7.16.8"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.16.8.tgz#b83dff4b970cf41f1b819f8b49cc0cfbaa53a808"
+  integrity sha512-MtmUmTJQHCnyJVrScNzNlofQJ3dLFuobYn3mwOTKHnSCMtbNsqvF71GQmJfFjdrXSsAA7iysFmYWw4bXZ20hOg==
+  dependencies:
+    "@babel/helper-module-imports" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/helper-remap-async-to-generator" "^7.16.8"
+
+"@babel/plugin-transform-block-scoped-functions@^7.16.7", "@babel/plugin-transform-block-scoped-functions@^7.8.3":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.16.7.tgz#4d0d57d9632ef6062cdf354bb717102ee042a620"
+  integrity sha512-JUuzlzmF40Z9cXyytcbZEZKckgrQzChbQJw/5PuEHYeqzCsvebDx0K0jWnIIVcmmDOAVctCgnYs0pMcrYj2zJg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+
+"@babel/plugin-transform-block-scoping@^7.16.7", "@babel/plugin-transform-block-scoping@^7.8.3":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.16.7.tgz#f50664ab99ddeaee5bc681b8f3a6ea9d72ab4f87"
+  integrity sha512-ObZev2nxVAYA4bhyusELdo9hb3H+A56bxH3FZMbEImZFiEDYVHXQSJ1hQKFlDnlt8G9bBrCZ5ZpURZUrV4G5qQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+
+"@babel/plugin-transform-classes@^7.16.7", "@babel/plugin-transform-classes@^7.9.0":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.16.7.tgz#8f4b9562850cd973de3b498f1218796eb181ce00"
+  integrity sha512-WY7og38SFAGYRe64BrjKf8OrE6ulEHtr5jEYaZMwox9KebgqPi67Zqz8K53EKk1fFEJgm96r32rkKZ3qA2nCWQ==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.16.7"
+    "@babel/helper-environment-visitor" "^7.16.7"
+    "@babel/helper-function-name" "^7.16.7"
+    "@babel/helper-optimise-call-expression" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/helper-replace-supers" "^7.16.7"
+    "@babel/helper-split-export-declaration" "^7.16.7"
+    globals "^11.1.0"
+
+"@babel/plugin-transform-computed-properties@^7.16.7", "@babel/plugin-transform-computed-properties@^7.8.3":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.16.7.tgz#66dee12e46f61d2aae7a73710f591eb3df616470"
+  integrity sha512-gN72G9bcmenVILj//sv1zLNaPyYcOzUho2lIJBMh/iakJ9ygCo/hEF9cpGb61SCMEDxbbyBoVQxrt+bWKu5KGw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+
+"@babel/plugin-transform-destructuring@^7.16.7", "@babel/plugin-transform-destructuring@^7.8.3":
+  version "7.17.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.17.3.tgz#c445f75819641788a27a0a3a759d9df911df6abc"
+  integrity sha512-dDFzegDYKlPqa72xIlbmSkly5MluLoaC1JswABGktyt6NTXSBcUuse/kWE/wvKFWJHPETpi158qJZFS3JmykJg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+
+"@babel/plugin-transform-dotall-regex@^7.16.7", "@babel/plugin-transform-dotall-regex@^7.4.4", "@babel/plugin-transform-dotall-regex@^7.8.3":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.16.7.tgz#6b2d67686fab15fb6a7fd4bd895d5982cfc81241"
+  integrity sha512-Lyttaao2SjZF6Pf4vk1dVKv8YypMpomAbygW+mU5cYP3S5cWTfCJjG8xV6CFdzGFlfWK81IjL9viiTvpb6G7gQ==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.16.7"
+
+"@babel/plugin-transform-duplicate-keys@^7.16.7", "@babel/plugin-transform-duplicate-keys@^7.8.3":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.16.7.tgz#2207e9ca8f82a0d36a5a67b6536e7ef8b08823c9"
+  integrity sha512-03DvpbRfvWIXyK0/6QiR1KMTWeT6OcQ7tbhjrXyFS02kjuX/mu5Bvnh5SDSWHxyawit2g5aWhKwI86EE7GUnTw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+
+"@babel/plugin-transform-exponentiation-operator@^7.16.7", "@babel/plugin-transform-exponentiation-operator@^7.8.3":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.16.7.tgz#efa9862ef97e9e9e5f653f6ddc7b665e8536fe9b"
+  integrity sha512-8UYLSlyLgRixQvlYH3J2ekXFHDFLQutdy7FfFAMm3CPZ6q9wHCwnUyiXpQCe3gVVnQlHc5nsuiEVziteRNTXEA==
+  dependencies:
+    "@babel/helper-builder-binary-assignment-operator-visitor" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.16.7"
+
+"@babel/plugin-transform-flow-strip-types@7.9.0":
+  version "7.9.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-flow-strip-types/-/plugin-transform-flow-strip-types-7.9.0.tgz#8a3538aa40434e000b8f44a3c5c9ac7229bd2392"
+  integrity sha512-7Qfg0lKQhEHs93FChxVLAvhBshOPQDtJUTVHr/ZwQNRccCm4O9D79r9tVSoV8iNwjP1YgfD+e/fgHcPkN1qEQg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/plugin-syntax-flow" "^7.8.3"
+
+"@babel/plugin-transform-for-of@^7.16.7", "@babel/plugin-transform-for-of@^7.9.0":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.16.7.tgz#649d639d4617dff502a9a158c479b3b556728d8c"
+  integrity sha512-/QZm9W92Ptpw7sjI9Nx1mbcsWz33+l8kuMIQnDwgQBG5s3fAfQvkRjQ7NqXhtNcKOnPkdICmUHyCaWW06HCsqg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+
+"@babel/plugin-transform-function-name@^7.16.7", "@babel/plugin-transform-function-name@^7.8.3":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.16.7.tgz#5ab34375c64d61d083d7d2f05c38d90b97ec65cf"
+  integrity sha512-SU/C68YVwTRxqWj5kgsbKINakGag0KTgq9f2iZEXdStoAbOzLHEBRYzImmA6yFo8YZhJVflvXmIHUO7GWHmxxA==
+  dependencies:
+    "@babel/helper-compilation-targets" "^7.16.7"
+    "@babel/helper-function-name" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.16.7"
+
+"@babel/plugin-transform-literals@^7.16.7", "@babel/plugin-transform-literals@^7.8.3":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-literals/-/plugin-transform-literals-7.16.7.tgz#254c9618c5ff749e87cb0c0cef1a0a050c0bdab1"
+  integrity sha512-6tH8RTpTWI0s2sV6uq3e/C9wPo4PTqqZps4uF0kzQ9/xPLFQtipynvmT1g/dOfEJ+0EQsHhkQ/zyRId8J2b8zQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+
+"@babel/plugin-transform-member-expression-literals@^7.16.7", "@babel/plugin-transform-member-expression-literals@^7.8.3":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.16.7.tgz#6e5dcf906ef8a098e630149d14c867dd28f92384"
+  integrity sha512-mBruRMbktKQwbxaJof32LT9KLy2f3gH+27a5XSuXo6h7R3vqltl0PgZ80C8ZMKw98Bf8bqt6BEVi3svOh2PzMw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+
+"@babel/plugin-transform-modules-amd@^7.16.7", "@babel/plugin-transform-modules-amd@^7.9.0":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.16.7.tgz#b28d323016a7daaae8609781d1f8c9da42b13186"
+  integrity sha512-KaaEtgBL7FKYwjJ/teH63oAmE3lP34N3kshz8mm4VMAw7U3PxjVwwUmxEFksbgsNUaO3wId9R2AVQYSEGRa2+g==
+  dependencies:
+    "@babel/helper-module-transforms" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.16.7"
+    babel-plugin-dynamic-import-node "^2.3.3"
+
+"@babel/plugin-transform-modules-commonjs@^7.16.8", "@babel/plugin-transform-modules-commonjs@^7.9.0":
+  version "7.16.8"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.16.8.tgz#cdee19aae887b16b9d331009aa9a219af7c86afe"
+  integrity sha512-oflKPvsLT2+uKQopesJt3ApiaIS2HW+hzHFcwRNtyDGieAeC/dIHZX8buJQ2J2X1rxGPy4eRcUijm3qcSPjYcA==
+  dependencies:
+    "@babel/helper-module-transforms" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/helper-simple-access" "^7.16.7"
+    babel-plugin-dynamic-import-node "^2.3.3"
+
+"@babel/plugin-transform-modules-systemjs@^7.16.7", "@babel/plugin-transform-modules-systemjs@^7.9.0":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.16.7.tgz#887cefaef88e684d29558c2b13ee0563e287c2d7"
+  integrity sha512-DuK5E3k+QQmnOqBR9UkusByy5WZWGRxfzV529s9nPra1GE7olmxfqO2FHobEOYSPIjPBTr4p66YDcjQnt8cBmw==
+  dependencies:
+    "@babel/helper-hoist-variables" "^7.16.7"
+    "@babel/helper-module-transforms" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/helper-validator-identifier" "^7.16.7"
+    babel-plugin-dynamic-import-node "^2.3.3"
+
+"@babel/plugin-transform-modules-umd@^7.16.7", "@babel/plugin-transform-modules-umd@^7.9.0":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.16.7.tgz#23dad479fa585283dbd22215bff12719171e7618"
+  integrity sha512-EMh7uolsC8O4xhudF2F6wedbSHm1HHZ0C6aJ7K67zcDNidMzVcxWdGr+htW9n21klm+bOn+Rx4CBsAntZd3rEQ==
+  dependencies:
+    "@babel/helper-module-transforms" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.16.7"
+
+"@babel/plugin-transform-named-capturing-groups-regex@^7.16.8", "@babel/plugin-transform-named-capturing-groups-regex@^7.8.3":
+  version "7.16.8"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.16.8.tgz#7f860e0e40d844a02c9dcf9d84965e7dfd666252"
+  integrity sha512-j3Jw+n5PvpmhRR+mrgIh04puSANCk/T/UA3m3P1MjJkhlK906+ApHhDIqBQDdOgL/r1UYpz4GNclTXxyZrYGSw==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.16.7"
+
+"@babel/plugin-transform-new-target@^7.16.7", "@babel/plugin-transform-new-target@^7.8.3":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.16.7.tgz#9967d89a5c243818e0800fdad89db22c5f514244"
+  integrity sha512-xiLDzWNMfKoGOpc6t3U+etCE2yRnn3SM09BXqWPIZOBpL2gvVrBWUKnsJx0K/ADi5F5YC5f8APFfWrz25TdlGg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+
+"@babel/plugin-transform-object-super@^7.16.7", "@babel/plugin-transform-object-super@^7.8.3":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.16.7.tgz#ac359cf8d32cf4354d27a46867999490b6c32a94"
+  integrity sha512-14J1feiQVWaGvRxj2WjyMuXS2jsBkgB3MdSN5HuC2G5nRspa5RK9COcs82Pwy5BuGcjb+fYaUj94mYcOj7rCvw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/helper-replace-supers" "^7.16.7"
+
+"@babel/plugin-transform-parameters@^7.16.7", "@babel/plugin-transform-parameters@^7.8.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.16.7.tgz#a1721f55b99b736511cb7e0152f61f17688f331f"
+  integrity sha512-AT3MufQ7zZEhU2hwOA11axBnExW0Lszu4RL/tAlUJBuNoRak+wehQW8h6KcXOcgjY42fHtDxswuMhMjFEuv/aw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+
+"@babel/plugin-transform-property-literals@^7.16.7", "@babel/plugin-transform-property-literals@^7.8.3":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.16.7.tgz#2dadac85155436f22c696c4827730e0fe1057a55"
+  integrity sha512-z4FGr9NMGdoIl1RqavCqGG+ZuYjfZ/hkCIeuH6Do7tXmSm0ls11nYVSJqFEUOSJbDab5wC6lRE/w6YjVcr6Hqw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+
+"@babel/plugin-transform-react-constant-elements@^7.0.0":
+  version "7.17.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-constant-elements/-/plugin-transform-react-constant-elements-7.17.6.tgz#6cc273c2f612a6a50cb657e63ee1303e5e68d10a"
+  integrity sha512-OBv9VkyyKtsHZiHLoSfCn+h6yU7YKX8nrs32xUmOa1SRSk+t03FosB6fBZ0Yz4BpD1WV7l73Nsad+2Tz7APpqw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+
+"@babel/plugin-transform-react-display-name@7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.8.3.tgz#70ded987c91609f78353dd76d2fb2a0bb991e8e5"
+  integrity sha512-3Jy/PCw8Fe6uBKtEgz3M82ljt+lTg+xJaM4og+eyu83qLT87ZUSckn0wy7r31jflURWLO83TW6Ylf7lyXj3m5A==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.3"
+
+"@babel/plugin-transform-react-display-name@^7.16.7", "@babel/plugin-transform-react-display-name@^7.8.3":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.16.7.tgz#7b6d40d232f4c0f550ea348593db3b21e2404340"
+  integrity sha512-qgIg8BcZgd0G/Cz916D5+9kqX0c7nPZyXaP8R2tLNN5tkyIZdG5fEwBrxwplzSnjC1jvQmyMNVwUCZPcbGY7Pg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+
+"@babel/plugin-transform-react-jsx-development@^7.16.7", "@babel/plugin-transform-react-jsx-development@^7.9.0":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.16.7.tgz#43a00724a3ed2557ed3f276a01a929e6686ac7b8"
+  integrity sha512-RMvQWvpla+xy6MlBpPlrKZCMRs2AGiHOGHY3xRwl0pEeim348dDyxeH4xBsMPbIMhujeq7ihE702eM2Ew0Wo+A==
+  dependencies:
+    "@babel/plugin-transform-react-jsx" "^7.16.7"
+
+"@babel/plugin-transform-react-jsx-self@^7.9.0":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.16.7.tgz#f432ad0cba14c4a1faf44f0076c69e42a4d4479e"
+  integrity sha512-oe5VuWs7J9ilH3BCCApGoYjHoSO48vkjX2CbA5bFVhIuO2HKxA3vyF7rleA4o6/4rTDbk6r8hBW7Ul8E+UZrpA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+
+"@babel/plugin-transform-react-jsx-source@^7.9.0":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.16.7.tgz#1879c3f23629d287cc6186a6c683154509ec70c0"
+  integrity sha512-rONFiQz9vgbsnaMtQlZCjIRwhJvlrPET8TabIUK2hzlXw9B9s2Ieaxte1SCOOXMbWRHodbKixNf3BLcWVOQ8Bw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+
+"@babel/plugin-transform-react-jsx@^7.16.7", "@babel/plugin-transform-react-jsx@^7.9.1":
+  version "7.17.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.17.3.tgz#eac1565da176ccb1a715dae0b4609858808008c1"
+  integrity sha512-9tjBm4O07f7mzKSIlEmPdiE6ub7kfIe6Cd+w+oQebpATfTQMAgW+YOuWxogbKVTulA+MEO7byMeIUtQ1z+z+ZQ==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.16.7"
+    "@babel/helper-module-imports" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/plugin-syntax-jsx" "^7.16.7"
+    "@babel/types" "^7.17.0"
+
+"@babel/plugin-transform-react-pure-annotations@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.16.7.tgz#232bfd2f12eb551d6d7d01d13fe3f86b45eb9c67"
+  integrity sha512-hs71ToC97k3QWxswh2ElzMFABXHvGiJ01IB1TbYQDGeWRKWz/MPUTh5jGExdHvosYKpnJW5Pm3S4+TA3FyX+GA==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.16.7"
+
+"@babel/plugin-transform-regenerator@^7.16.7", "@babel/plugin-transform-regenerator@^7.8.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.16.7.tgz#9e7576dc476cb89ccc5096fff7af659243b4adeb"
+  integrity sha512-mF7jOgGYCkSJagJ6XCujSQg+6xC1M77/03K2oBmVJWoFGNUtnVJO4WHKJk3dnPC8HCcj4xBQP1Egm8DWh3Pb3Q==
+  dependencies:
+    regenerator-transform "^0.14.2"
+
+"@babel/plugin-transform-reserved-words@^7.16.7", "@babel/plugin-transform-reserved-words@^7.8.3":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.16.7.tgz#1d798e078f7c5958eec952059c460b220a63f586"
+  integrity sha512-KQzzDnZ9hWQBjwi5lpY5v9shmm6IVG0U9pB18zvMu2i4H90xpT4gmqwPYsn8rObiadYe2M0gmgsiOIF5A/2rtg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+
+"@babel/plugin-transform-runtime@7.9.0":
+  version "7.9.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.9.0.tgz#45468c0ae74cc13204e1d3b1f4ce6ee83258af0b"
+  integrity sha512-pUu9VSf3kI1OqbWINQ7MaugnitRss1z533436waNXp+0N3ur3zfut37sXiQMxkuCF4VUjwZucen/quskCh7NHw==
+  dependencies:
+    "@babel/helper-module-imports" "^7.8.3"
+    "@babel/helper-plugin-utils" "^7.8.3"
+    resolve "^1.8.1"
+    semver "^5.5.1"
+
+"@babel/plugin-transform-shorthand-properties@^7.16.7", "@babel/plugin-transform-shorthand-properties@^7.8.3":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.16.7.tgz#e8549ae4afcf8382f711794c0c7b6b934c5fbd2a"
+  integrity sha512-hah2+FEnoRoATdIb05IOXf+4GzXYTq75TVhIn1PewihbpyrNWUt2JbudKQOETWw6QpLe+AIUpJ5MVLYTQbeeUg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+
+"@babel/plugin-transform-spread@^7.16.7", "@babel/plugin-transform-spread@^7.8.3":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-spread/-/plugin-transform-spread-7.16.7.tgz#a303e2122f9f12e0105daeedd0f30fb197d8ff44"
+  integrity sha512-+pjJpgAngb53L0iaA5gU/1MLXJIfXcYepLgXB3esVRf4fqmj8f2cxM3/FKaHsZms08hFQJkFccEWuIpm429TXg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.16.0"
+
+"@babel/plugin-transform-sticky-regex@^7.16.7", "@babel/plugin-transform-sticky-regex@^7.8.3":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.16.7.tgz#c84741d4f4a38072b9a1e2e3fd56d359552e8660"
+  integrity sha512-NJa0Bd/87QV5NZZzTuZG5BPJjLYadeSZ9fO6oOUoL4iQx+9EEuw/eEM92SrsT19Yc2jgB1u1hsjqDtH02c3Drw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+
+"@babel/plugin-transform-template-literals@^7.16.7", "@babel/plugin-transform-template-literals@^7.8.3":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.16.7.tgz#f3d1c45d28967c8e80f53666fc9c3e50618217ab"
+  integrity sha512-VwbkDDUeenlIjmfNeDX/V0aWrQH2QiVyJtwymVQSzItFDTpxfyJh3EVaQiS0rIN/CqbLGr0VcGmuwyTdZtdIsA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+
+"@babel/plugin-transform-typeof-symbol@^7.16.7", "@babel/plugin-transform-typeof-symbol@^7.8.4":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.16.7.tgz#9cdbe622582c21368bd482b660ba87d5545d4f7e"
+  integrity sha512-p2rOixCKRJzpg9JB4gjnG4gjWkWa89ZoYUnl9snJ1cWIcTH/hvxZqfO+WjG6T8DRBpctEol5jw1O5rA8gkCokQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+
+"@babel/plugin-transform-typescript@^7.9.0":
+  version "7.16.8"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.16.8.tgz#591ce9b6b83504903fa9dd3652c357c2ba7a1ee0"
+  integrity sha512-bHdQ9k7YpBDO2d0NVfkj51DpQcvwIzIusJ7mEUaMlbZq3Kt/U47j24inXZHQ5MDiYpCs+oZiwnXyKedE8+q7AQ==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/plugin-syntax-typescript" "^7.16.7"
+
+"@babel/plugin-transform-unicode-escapes@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.16.7.tgz#da8717de7b3287a2c6d659750c964f302b31ece3"
+  integrity sha512-TAV5IGahIz3yZ9/Hfv35TV2xEm+kaBDaZQCn2S/hG9/CZ0DktxJv9eKfPc7yYCvOYR4JGx1h8C+jcSOvgaaI/Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+
+"@babel/plugin-transform-unicode-regex@^7.16.7", "@babel/plugin-transform-unicode-regex@^7.8.3":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.16.7.tgz#0f7aa4a501198976e25e82702574c34cfebe9ef2"
+  integrity sha512-oC5tYYKw56HO75KZVLQ+R/Nl3Hro9kf8iG0hXoaHP7tjAyCpvqBiSNe6vGrZni1Z6MggmUOC6A7VP7AVmw225Q==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.16.7"
+
+"@babel/preset-env@7.9.0":
+  version "7.9.0"
+  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.9.0.tgz#a5fc42480e950ae8f5d9f8f2bbc03f52722df3a8"
+  integrity sha512-712DeRXT6dyKAM/FMbQTV/FvRCms2hPCx+3weRjZ8iQVQWZejWWk1wwG6ViWMyqb/ouBbGOl5b6aCk0+j1NmsQ==
+  dependencies:
+    "@babel/compat-data" "^7.9.0"
+    "@babel/helper-compilation-targets" "^7.8.7"
+    "@babel/helper-module-imports" "^7.8.3"
+    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/plugin-proposal-async-generator-functions" "^7.8.3"
+    "@babel/plugin-proposal-dynamic-import" "^7.8.3"
+    "@babel/plugin-proposal-json-strings" "^7.8.3"
+    "@babel/plugin-proposal-nullish-coalescing-operator" "^7.8.3"
+    "@babel/plugin-proposal-numeric-separator" "^7.8.3"
+    "@babel/plugin-proposal-object-rest-spread" "^7.9.0"
+    "@babel/plugin-proposal-optional-catch-binding" "^7.8.3"
+    "@babel/plugin-proposal-optional-chaining" "^7.9.0"
+    "@babel/plugin-proposal-unicode-property-regex" "^7.8.3"
+    "@babel/plugin-syntax-async-generators" "^7.8.0"
+    "@babel/plugin-syntax-dynamic-import" "^7.8.0"
+    "@babel/plugin-syntax-json-strings" "^7.8.0"
+    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.0"
+    "@babel/plugin-syntax-numeric-separator" "^7.8.0"
+    "@babel/plugin-syntax-object-rest-spread" "^7.8.0"
+    "@babel/plugin-syntax-optional-catch-binding" "^7.8.0"
+    "@babel/plugin-syntax-optional-chaining" "^7.8.0"
+    "@babel/plugin-syntax-top-level-await" "^7.8.3"
+    "@babel/plugin-transform-arrow-functions" "^7.8.3"
+    "@babel/plugin-transform-async-to-generator" "^7.8.3"
+    "@babel/plugin-transform-block-scoped-functions" "^7.8.3"
+    "@babel/plugin-transform-block-scoping" "^7.8.3"
+    "@babel/plugin-transform-classes" "^7.9.0"
+    "@babel/plugin-transform-computed-properties" "^7.8.3"
+    "@babel/plugin-transform-destructuring" "^7.8.3"
+    "@babel/plugin-transform-dotall-regex" "^7.8.3"
+    "@babel/plugin-transform-duplicate-keys" "^7.8.3"
+    "@babel/plugin-transform-exponentiation-operator" "^7.8.3"
+    "@babel/plugin-transform-for-of" "^7.9.0"
+    "@babel/plugin-transform-function-name" "^7.8.3"
+    "@babel/plugin-transform-literals" "^7.8.3"
+    "@babel/plugin-transform-member-expression-literals" "^7.8.3"
+    "@babel/plugin-transform-modules-amd" "^7.9.0"
+    "@babel/plugin-transform-modules-commonjs" "^7.9.0"
+    "@babel/plugin-transform-modules-systemjs" "^7.9.0"
+    "@babel/plugin-transform-modules-umd" "^7.9.0"
+    "@babel/plugin-transform-named-capturing-groups-regex" "^7.8.3"
+    "@babel/plugin-transform-new-target" "^7.8.3"
+    "@babel/plugin-transform-object-super" "^7.8.3"
+    "@babel/plugin-transform-parameters" "^7.8.7"
+    "@babel/plugin-transform-property-literals" "^7.8.3"
+    "@babel/plugin-transform-regenerator" "^7.8.7"
+    "@babel/plugin-transform-reserved-words" "^7.8.3"
+    "@babel/plugin-transform-shorthand-properties" "^7.8.3"
+    "@babel/plugin-transform-spread" "^7.8.3"
+    "@babel/plugin-transform-sticky-regex" "^7.8.3"
+    "@babel/plugin-transform-template-literals" "^7.8.3"
+    "@babel/plugin-transform-typeof-symbol" "^7.8.4"
+    "@babel/plugin-transform-unicode-regex" "^7.8.3"
+    "@babel/preset-modules" "^0.1.3"
+    "@babel/types" "^7.9.0"
+    browserslist "^4.9.1"
+    core-js-compat "^3.6.2"
+    invariant "^2.2.2"
+    levenary "^1.1.1"
+    semver "^5.5.0"
+
+"@babel/preset-env@^7.4.5":
+  version "7.16.11"
+  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.16.11.tgz#5dd88fd885fae36f88fd7c8342475c9f0abe2982"
+  integrity sha512-qcmWG8R7ZW6WBRPZK//y+E3Cli151B20W1Rv7ln27vuPaXU/8TKms6jFdiJtF7UDTxcrb7mZd88tAeK9LjdT8g==
+  dependencies:
+    "@babel/compat-data" "^7.16.8"
+    "@babel/helper-compilation-targets" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/helper-validator-option" "^7.16.7"
+    "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression" "^7.16.7"
+    "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining" "^7.16.7"
+    "@babel/plugin-proposal-async-generator-functions" "^7.16.8"
+    "@babel/plugin-proposal-class-properties" "^7.16.7"
+    "@babel/plugin-proposal-class-static-block" "^7.16.7"
+    "@babel/plugin-proposal-dynamic-import" "^7.16.7"
+    "@babel/plugin-proposal-export-namespace-from" "^7.16.7"
+    "@babel/plugin-proposal-json-strings" "^7.16.7"
+    "@babel/plugin-proposal-logical-assignment-operators" "^7.16.7"
+    "@babel/plugin-proposal-nullish-coalescing-operator" "^7.16.7"
+    "@babel/plugin-proposal-numeric-separator" "^7.16.7"
+    "@babel/plugin-proposal-object-rest-spread" "^7.16.7"
+    "@babel/plugin-proposal-optional-catch-binding" "^7.16.7"
+    "@babel/plugin-proposal-optional-chaining" "^7.16.7"
+    "@babel/plugin-proposal-private-methods" "^7.16.11"
+    "@babel/plugin-proposal-private-property-in-object" "^7.16.7"
+    "@babel/plugin-proposal-unicode-property-regex" "^7.16.7"
+    "@babel/plugin-syntax-async-generators" "^7.8.4"
+    "@babel/plugin-syntax-class-properties" "^7.12.13"
+    "@babel/plugin-syntax-class-static-block" "^7.14.5"
+    "@babel/plugin-syntax-dynamic-import" "^7.8.3"
+    "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
+    "@babel/plugin-syntax-json-strings" "^7.8.3"
+    "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
+    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"
+    "@babel/plugin-syntax-numeric-separator" "^7.10.4"
+    "@babel/plugin-syntax-object-rest-spread" "^7.8.3"
+    "@babel/plugin-syntax-optional-catch-binding" "^7.8.3"
+    "@babel/plugin-syntax-optional-chaining" "^7.8.3"
+    "@babel/plugin-syntax-private-property-in-object" "^7.14.5"
+    "@babel/plugin-syntax-top-level-await" "^7.14.5"
+    "@babel/plugin-transform-arrow-functions" "^7.16.7"
+    "@babel/plugin-transform-async-to-generator" "^7.16.8"
+    "@babel/plugin-transform-block-scoped-functions" "^7.16.7"
+    "@babel/plugin-transform-block-scoping" "^7.16.7"
+    "@babel/plugin-transform-classes" "^7.16.7"
+    "@babel/plugin-transform-computed-properties" "^7.16.7"
+    "@babel/plugin-transform-destructuring" "^7.16.7"
+    "@babel/plugin-transform-dotall-regex" "^7.16.7"
+    "@babel/plugin-transform-duplicate-keys" "^7.16.7"
+    "@babel/plugin-transform-exponentiation-operator" "^7.16.7"
+    "@babel/plugin-transform-for-of" "^7.16.7"
+    "@babel/plugin-transform-function-name" "^7.16.7"
+    "@babel/plugin-transform-literals" "^7.16.7"
+    "@babel/plugin-transform-member-expression-literals" "^7.16.7"
+    "@babel/plugin-transform-modules-amd" "^7.16.7"
+    "@babel/plugin-transform-modules-commonjs" "^7.16.8"
+    "@babel/plugin-transform-modules-systemjs" "^7.16.7"
+    "@babel/plugin-transform-modules-umd" "^7.16.7"
+    "@babel/plugin-transform-named-capturing-groups-regex" "^7.16.8"
+    "@babel/plugin-transform-new-target" "^7.16.7"
+    "@babel/plugin-transform-object-super" "^7.16.7"
+    "@babel/plugin-transform-parameters" "^7.16.7"
+    "@babel/plugin-transform-property-literals" "^7.16.7"
+    "@babel/plugin-transform-regenerator" "^7.16.7"
+    "@babel/plugin-transform-reserved-words" "^7.16.7"
+    "@babel/plugin-transform-shorthand-properties" "^7.16.7"
+    "@babel/plugin-transform-spread" "^7.16.7"
+    "@babel/plugin-transform-sticky-regex" "^7.16.7"
+    "@babel/plugin-transform-template-literals" "^7.16.7"
+    "@babel/plugin-transform-typeof-symbol" "^7.16.7"
+    "@babel/plugin-transform-unicode-escapes" "^7.16.7"
+    "@babel/plugin-transform-unicode-regex" "^7.16.7"
+    "@babel/preset-modules" "^0.1.5"
+    "@babel/types" "^7.16.8"
+    babel-plugin-polyfill-corejs2 "^0.3.0"
+    babel-plugin-polyfill-corejs3 "^0.5.0"
+    babel-plugin-polyfill-regenerator "^0.3.0"
+    core-js-compat "^3.20.2"
+    semver "^6.3.0"
+
+"@babel/preset-modules@^0.1.3", "@babel/preset-modules@^0.1.5":
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/@babel/preset-modules/-/preset-modules-0.1.5.tgz#ef939d6e7f268827e1841638dc6ff95515e115d9"
+  integrity sha512-A57th6YRG7oR3cq/yt/Y84MvGgE0eJG2F1JLhKuyG+jFxEgrd/HAMJatiFtmOiZurz+0DkrvbheCLaV5f2JfjA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/plugin-proposal-unicode-property-regex" "^7.4.4"
+    "@babel/plugin-transform-dotall-regex" "^7.4.4"
+    "@babel/types" "^7.4.4"
+    esutils "^2.0.2"
+
+"@babel/preset-react@7.9.1":
+  version "7.9.1"
+  resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.9.1.tgz#b346403c36d58c3bb544148272a0cefd9c28677a"
+  integrity sha512-aJBYF23MPj0RNdp/4bHnAP0NVqqZRr9kl0NAOP4nJCex6OYVio59+dnQzsAWFuogdLyeaKA1hmfUIVZkY5J+TQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/plugin-transform-react-display-name" "^7.8.3"
+    "@babel/plugin-transform-react-jsx" "^7.9.1"
+    "@babel/plugin-transform-react-jsx-development" "^7.9.0"
+    "@babel/plugin-transform-react-jsx-self" "^7.9.0"
+    "@babel/plugin-transform-react-jsx-source" "^7.9.0"
+
+"@babel/preset-react@^7.0.0":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.16.7.tgz#4c18150491edc69c183ff818f9f2aecbe5d93852"
+  integrity sha512-fWpyI8UM/HE6DfPBzD8LnhQ/OcH8AgTaqcqP2nGOXEUV+VKBR5JRN9hCk9ai+zQQ57vtm9oWeXguBCPNUjytgA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/helper-validator-option" "^7.16.7"
+    "@babel/plugin-transform-react-display-name" "^7.16.7"
+    "@babel/plugin-transform-react-jsx" "^7.16.7"
+    "@babel/plugin-transform-react-jsx-development" "^7.16.7"
+    "@babel/plugin-transform-react-pure-annotations" "^7.16.7"
+
+"@babel/preset-typescript@7.9.0":
+  version "7.9.0"
+  resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.9.0.tgz#87705a72b1f0d59df21c179f7c3d2ef4b16ce192"
+  integrity sha512-S4cueFnGrIbvYJgwsVFKdvOmpiL0XGw9MFW9D0vgRys5g36PBhZRL8NX8Gr2akz8XRtzq6HuDXPD/1nniagNUg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/plugin-transform-typescript" "^7.9.0"
+
+"@babel/runtime@7.9.0":
+  version "7.9.0"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.9.0.tgz#337eda67401f5b066a6f205a3113d4ac18ba495b"
+  integrity sha512-cTIudHnzuWLS56ik4DnRnqqNf8MkdUzV4iFFI1h7Jo9xvrpQROYaAnaSd2mHLQAzzZAPfATynX5ord6YlNYNMA==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.15.4", "@babel/runtime@^7.3.1", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.4", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
+  version "7.17.2"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.17.2.tgz#66f68591605e59da47523c631416b18508779941"
+  integrity sha512-hzeyJyMA1YGdJTuWU0e/j4wKXrU4OMFvY2MSlaI9B7VQb0r5cxTE3EAIS2Q7Tn2RIcDkRvTA/v2JsAEhxe99uw==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
+"@babel/runtime@^7.14.5", "@babel/runtime@^7.14.6", "@babel/runtime@^7.17.2":
+  version "7.17.9"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.17.9.tgz#d19fbf802d01a8cb6cf053a64e472d42c434ba72"
+  integrity sha512-lSiBBvodq29uShpWGNbgFdKYNiFDo5/HIYsaCEY9ff4sb10x9jizo2+pRrSyF4jKZCXqgzuqBOQKbUm90gQwJg==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
+"@babel/runtime@^7.19.4", "@babel/runtime@^7.20.6":
+  version "7.20.6"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.20.6.tgz#facf4879bfed9b5326326273a64220f099b0fce3"
+  integrity sha512-Q+8MqP7TiHMWzSfwiJwXCjyf4GYA4Dgw3emg/7xmwsdLJOZUp+nMqcOwOzzYheuM1rhDu8FSj2l0aoMygEuXuA==
+  dependencies:
+    regenerator-runtime "^0.13.11"
+
+"@babel/template@^7.16.7", "@babel/template@^7.4.0", "@babel/template@^7.6.0", "@babel/template@^7.8.6":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.16.7.tgz#8d126c8701fde4d66b264b3eba3d96f07666d155"
+  integrity sha512-I8j/x8kHUrbYRTUxXrrMbfCa7jxkE7tZre39x3kjr9hvI82cK1FfqLygotcWN5kdPGWcLdWMHpSBavse5tWw3w==
+  dependencies:
+    "@babel/code-frame" "^7.16.7"
+    "@babel/parser" "^7.16.7"
+    "@babel/types" "^7.16.7"
+
+"@babel/template@^7.18.10":
+  version "7.18.10"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.18.10.tgz#6f9134835970d1dbf0835c0d100c9f38de0c5e71"
+  integrity sha512-TI+rCtooWHr3QJ27kJxfjutghu44DLnasDMwpDqCXVTal9RLp3RSYNh4NdBrRP2cQAoG9A8juOQl6P6oZG4JxA==
+  dependencies:
+    "@babel/code-frame" "^7.18.6"
+    "@babel/parser" "^7.18.10"
+    "@babel/types" "^7.18.10"
+
+"@babel/traverse@^7.0.0", "@babel/traverse@^7.1.0", "@babel/traverse@^7.13.0", "@babel/traverse@^7.16.7", "@babel/traverse@^7.16.8", "@babel/traverse@^7.17.0", "@babel/traverse@^7.17.3", "@babel/traverse@^7.4.3", "@babel/traverse@^7.6.0", "@babel/traverse@^7.9.0":
+  version "7.17.3"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.17.3.tgz#0ae0f15b27d9a92ba1f2263358ea7c4e7db47b57"
+  integrity sha512-5irClVky7TxRWIRtxlh2WPUUOLhcPN06AGgaQSB8AEwuyEBgJVuJ5imdHm5zxk8w0QS5T+tDfnDxAlhWjpb7cw==
+  dependencies:
+    "@babel/code-frame" "^7.16.7"
+    "@babel/generator" "^7.17.3"
+    "@babel/helper-environment-visitor" "^7.16.7"
+    "@babel/helper-function-name" "^7.16.7"
+    "@babel/helper-hoist-variables" "^7.16.7"
+    "@babel/helper-split-export-declaration" "^7.16.7"
+    "@babel/parser" "^7.17.3"
+    "@babel/types" "^7.17.0"
+    debug "^4.1.0"
+    globals "^11.1.0"
+
+"@babel/traverse@^7.4.5":
+  version "7.20.0"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.20.0.tgz#538c4c6ce6255f5666eba02252a7b59fc2d5ed98"
+  integrity sha512-5+cAXQNARgjRUK0JWu2UBwja4JLSO/rBMPJzpsKb+oBF5xlUuCfljQepS4XypBQoiigL0VQjTZy6WiONtUdScQ==
+  dependencies:
+    "@babel/code-frame" "^7.18.6"
+    "@babel/generator" "^7.20.0"
+    "@babel/helper-environment-visitor" "^7.18.9"
+    "@babel/helper-function-name" "^7.19.0"
+    "@babel/helper-hoist-variables" "^7.18.6"
+    "@babel/helper-split-export-declaration" "^7.18.6"
+    "@babel/parser" "^7.20.0"
+    "@babel/types" "^7.20.0"
+    debug "^4.1.0"
+    globals "^11.1.0"
+
+"@babel/types@^7.0.0", "@babel/types@^7.16.0", "@babel/types@^7.16.7", "@babel/types@^7.16.8", "@babel/types@^7.17.0", "@babel/types@^7.3.0", "@babel/types@^7.4.0", "@babel/types@^7.4.4", "@babel/types@^7.6.0", "@babel/types@^7.9.0":
+  version "7.17.0"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.17.0.tgz#a826e368bccb6b3d84acd76acad5c0d87342390b"
+  integrity sha512-TmKSNO4D5rzhL5bjWFcVHHLETzfQ/AmbKpKPOSjlP0WoHZ6L911fgoOKY4Alp/emzG4cHJdyN49zpgkbXFEHHw==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.16.7"
+    to-fast-properties "^2.0.0"
+
+"@babel/types@^7.18.10", "@babel/types@^7.18.6", "@babel/types@^7.19.0", "@babel/types@^7.20.0":
+  version "7.20.0"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.20.0.tgz#52c94cf8a7e24e89d2a194c25c35b17a64871479"
+  integrity sha512-Jlgt3H0TajCW164wkTOTzHkZb075tMQMULzrLUoUeKmO7eFL96GgDxf7/Axhc5CAuKE3KFyVW1p6ysKsi2oXAg==
+  dependencies:
+    "@babel/helper-string-parser" "^7.19.4"
+    "@babel/helper-validator-identifier" "^7.19.1"
+    to-fast-properties "^2.0.0"
+
+"@cnakazawa/watch@^1.0.3":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@cnakazawa/watch/-/watch-1.0.4.tgz#f864ae85004d0fcab6f50be9141c4da368d1656a"
+  integrity sha512-v9kIhKwjeZThiWrLmj0y17CWoyddASLj9O2yvbZkbvw/N3rWOYy9zkV66ursAoVr0mV15bL8g0c4QZUE6cdDoQ==
+  dependencies:
+    exec-sh "^0.3.2"
+    minimist "^1.2.0"
+
+"@csstools/convert-colors@^1.4.0":
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/@csstools/convert-colors/-/convert-colors-1.4.0.tgz#ad495dc41b12e75d588c6db8b9834f08fa131eb7"
+  integrity sha512-5a6wqoJV/xEdbRNKVo6I4hO3VjyDq//8q2f9I6PBAvMesJHFauXDorcNCsr9RzvsZnaWi5NYCcfyqP1QeFHFbw==
+
+"@csstools/normalize.css@^9.0.1":
+  version "9.0.1"
+  resolved "https://registry.yarnpkg.com/@csstools/normalize.css/-/normalize.css-9.0.1.tgz#c27b391d8457d1e893f1eddeaf5e5412d12ffbb5"
+  integrity sha512-6It2EVfGskxZCQhuykrfnALg7oVeiI6KclWSmGDqB0AiInVrTGB9Jp9i4/Ad21u9Jde/voVQz6eFX/eSg/UsPA==
+
+"@emotion/hash@^0.8.0":
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413"
+  integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==
+
+"@emotion/is-prop-valid@^1.1.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.2.0.tgz#7f2d35c97891669f7e276eb71c83376a5dc44c83"
+  integrity sha512-3aDpDprjM0AwaxGE09bOPkNxHpBd+kA6jty3RnaEXdweX1DF1U3VQpPYb0g1IStAuK7SVQ1cy+bNBBKp4W3Fjg==
+  dependencies:
+    "@emotion/memoize" "^0.8.0"
+
+"@emotion/memoize@^0.8.0":
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.8.0.tgz#f580f9beb67176fa57aae70b08ed510e1b18980f"
+  integrity sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA==
+
+"@emotion/stylis@^0.8.4":
+  version "0.8.5"
+  resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04"
+  integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==
+
+"@emotion/unitless@^0.7.4":
+  version "0.7.5"
+  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
+  integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
+
+"@hapi/address@2.x.x":
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.1.4.tgz#5d67ed43f3fd41a69d4b9ff7b56e7c0d1d0a81e5"
+  integrity sha512-QD1PhQk+s31P1ixsX0H0Suoupp3VMXzIVMSwobR3F3MSUO2YCV0B7xqLcUw/Bh8yuvd3LhpyqLQWTNcRmp6IdQ==
+
+"@hapi/bourne@1.x.x":
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/@hapi/bourne/-/bourne-1.3.2.tgz#0a7095adea067243ce3283e1b56b8a8f453b242a"
+  integrity sha512-1dVNHT76Uu5N3eJNTYcvxee+jzX4Z9lfciqRRHCU27ihbUcYi+iSc2iml5Ke1LXe1SyJCLA0+14Jh4tXJgOppA==
+
+"@hapi/hoek@8.x.x", "@hapi/hoek@^8.3.0":
+  version "8.5.1"
+  resolved "https://registry.yarnpkg.com/@hapi/hoek/-/hoek-8.5.1.tgz#fde96064ca446dec8c55a8c2f130957b070c6e06"
+  integrity sha512-yN7kbciD87WzLGc5539Tn0sApjyiGHAJgKvG9W8C7O+6c7qmoQMfVs0W4bX17eqz6C78QJqqFrtgdK5EWf6Qow==
+
+"@hapi/joi@^15.0.0":
+  version "15.1.1"
+  resolved "https://registry.yarnpkg.com/@hapi/joi/-/joi-15.1.1.tgz#c675b8a71296f02833f8d6d243b34c57b8ce19d7"
+  integrity sha512-entf8ZMOK8sc+8YfeOlM8pCfg3b5+WZIKBfUaaJT8UsjAAPjartzxIYm3TIbjvA4u+u++KbcXD38k682nVHDAQ==
+  dependencies:
+    "@hapi/address" "2.x.x"
+    "@hapi/bourne" "1.x.x"
+    "@hapi/hoek" "8.x.x"
+    "@hapi/topo" "3.x.x"
+
+"@hapi/topo@3.x.x":
+  version "3.1.6"
+  resolved "https://registry.yarnpkg.com/@hapi/topo/-/topo-3.1.6.tgz#68d935fa3eae7fdd5ab0d7f953f3205d8b2bfc29"
+  integrity sha512-tAag0jEcjwH+P2quUfipd7liWCNX2F8NvYjQp2wtInsZxnMlypdw0FtAOLxtvvkO+GSRRbmNi8m/5y42PQJYCQ==
+  dependencies:
+    "@hapi/hoek" "^8.3.0"
+
+"@icons/material@^0.2.4":
+  version "0.2.4"
+  resolved "https://registry.yarnpkg.com/@icons/material/-/material-0.2.4.tgz#e90c9f71768b3736e76d7dd6783fc6c2afa88bc8"
+  integrity sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw==
+
+"@jest/console@^24.7.1", "@jest/console@^24.9.0":
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/@jest/console/-/console-24.9.0.tgz#79b1bc06fb74a8cfb01cbdedf945584b1b9707f0"
+  integrity sha512-Zuj6b8TnKXi3q4ymac8EQfc3ea/uhLeCGThFqXeC8H9/raaH8ARPUTdId+XyGd03Z4In0/VjD2OYFcBF09fNLQ==
+  dependencies:
+    "@jest/source-map" "^24.9.0"
+    chalk "^2.0.1"
+    slash "^2.0.0"
+
+"@jest/core@^24.9.0":
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/@jest/core/-/core-24.9.0.tgz#2ceccd0b93181f9c4850e74f2a9ad43d351369c4"
+  integrity sha512-Fogg3s4wlAr1VX7q+rhV9RVnUv5tD7VuWfYy1+whMiWUrvl7U3QJSJyWcDio9Lq2prqYsZaeTv2Rz24pWGkJ2A==
+  dependencies:
+    "@jest/console" "^24.7.1"
+    "@jest/reporters" "^24.9.0"
+    "@jest/test-result" "^24.9.0"
+    "@jest/transform" "^24.9.0"
+    "@jest/types" "^24.9.0"
+    ansi-escapes "^3.0.0"
+    chalk "^2.0.1"
+    exit "^0.1.2"
+    graceful-fs "^4.1.15"
+    jest-changed-files "^24.9.0"
+    jest-config "^24.9.0"
+    jest-haste-map "^24.9.0"
+    jest-message-util "^24.9.0"
+    jest-regex-util "^24.3.0"
+    jest-resolve "^24.9.0"
+    jest-resolve-dependencies "^24.9.0"
+    jest-runner "^24.9.0"
+    jest-runtime "^24.9.0"
+    jest-snapshot "^24.9.0"
+    jest-util "^24.9.0"
+    jest-validate "^24.9.0"
+    jest-watcher "^24.9.0"
+    micromatch "^3.1.10"
+    p-each-series "^1.0.0"
+    realpath-native "^1.1.0"
+    rimraf "^2.5.4"
+    slash "^2.0.0"
+    strip-ansi "^5.0.0"
+
+"@jest/environment@^24.9.0":
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/@jest/environment/-/environment-24.9.0.tgz#21e3afa2d65c0586cbd6cbefe208bafade44ab18"
+  integrity sha512-5A1QluTPhvdIPFYnO3sZC3smkNeXPVELz7ikPbhUj0bQjB07EoE9qtLrem14ZUYWdVayYbsjVwIiL4WBIMV4aQ==
+  dependencies:
+    "@jest/fake-timers" "^24.9.0"
+    "@jest/transform" "^24.9.0"
+    "@jest/types" "^24.9.0"
+    jest-mock "^24.9.0"
+
+"@jest/fake-timers@^24.9.0":
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/@jest/fake-timers/-/fake-timers-24.9.0.tgz#ba3e6bf0eecd09a636049896434d306636540c93"
+  integrity sha512-eWQcNa2YSwzXWIMC5KufBh3oWRIijrQFROsIqt6v/NS9Io/gknw1jsAC9c+ih/RQX4A3O7SeWAhQeN0goKhT9A==
+  dependencies:
+    "@jest/types" "^24.9.0"
+    jest-message-util "^24.9.0"
+    jest-mock "^24.9.0"
+
+"@jest/reporters@^24.9.0":
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/@jest/reporters/-/reporters-24.9.0.tgz#86660eff8e2b9661d042a8e98a028b8d631a5b43"
+  integrity sha512-mu4X0yjaHrffOsWmVLzitKmmmWSQ3GGuefgNscUSWNiUNcEOSEQk9k3pERKEQVBb0Cnn88+UESIsZEMH3o88Gw==
+  dependencies:
+    "@jest/environment" "^24.9.0"
+    "@jest/test-result" "^24.9.0"
+    "@jest/transform" "^24.9.0"
+    "@jest/types" "^24.9.0"
+    chalk "^2.0.1"
+    exit "^0.1.2"
+    glob "^7.1.2"
+    istanbul-lib-coverage "^2.0.2"
+    istanbul-lib-instrument "^3.0.1"
+    istanbul-lib-report "^2.0.4"
+    istanbul-lib-source-maps "^3.0.1"
+    istanbul-reports "^2.2.6"
+    jest-haste-map "^24.9.0"
+    jest-resolve "^24.9.0"
+    jest-runtime "^24.9.0"
+    jest-util "^24.9.0"
+    jest-worker "^24.6.0"
+    node-notifier "^5.4.2"
+    slash "^2.0.0"
+    source-map "^0.6.0"
+    string-length "^2.0.0"
+
+"@jest/source-map@^24.3.0", "@jest/source-map@^24.9.0":
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/@jest/source-map/-/source-map-24.9.0.tgz#0e263a94430be4b41da683ccc1e6bffe2a191714"
+  integrity sha512-/Xw7xGlsZb4MJzNDgB7PW5crou5JqWiBQaz6xyPd3ArOg2nfn/PunV8+olXbbEZzNl591o5rWKE9BRDaFAuIBg==
+  dependencies:
+    callsites "^3.0.0"
+    graceful-fs "^4.1.15"
+    source-map "^0.6.0"
+
+"@jest/test-result@^24.9.0":
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/@jest/test-result/-/test-result-24.9.0.tgz#11796e8aa9dbf88ea025757b3152595ad06ba0ca"
+  integrity sha512-XEFrHbBonBJ8dGp2JmF8kP/nQI/ImPpygKHwQ/SY+es59Z3L5PI4Qb9TQQMAEeYsThG1xF0k6tmG0tIKATNiiA==
+  dependencies:
+    "@jest/console" "^24.9.0"
+    "@jest/types" "^24.9.0"
+    "@types/istanbul-lib-coverage" "^2.0.0"
+
+"@jest/test-sequencer@^24.9.0":
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/@jest/test-sequencer/-/test-sequencer-24.9.0.tgz#f8f334f35b625a4f2f355f2fe7e6036dad2e6b31"
+  integrity sha512-6qqsU4o0kW1dvA95qfNog8v8gkRN9ph6Lz7r96IvZpHdNipP2cBcb07J1Z45mz/VIS01OHJ3pY8T5fUY38tg4A==
+  dependencies:
+    "@jest/test-result" "^24.9.0"
+    jest-haste-map "^24.9.0"
+    jest-runner "^24.9.0"
+    jest-runtime "^24.9.0"
+
+"@jest/transform@^24.9.0":
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/@jest/transform/-/transform-24.9.0.tgz#4ae2768b296553fadab09e9ec119543c90b16c56"
+  integrity sha512-TcQUmyNRxV94S0QpMOnZl0++6RMiqpbH/ZMccFB/amku6Uwvyb1cjYX7xkp5nGNkbX4QPH/FcB6q1HBTHynLmQ==
+  dependencies:
+    "@babel/core" "^7.1.0"
+    "@jest/types" "^24.9.0"
+    babel-plugin-istanbul "^5.1.0"
+    chalk "^2.0.1"
+    convert-source-map "^1.4.0"
+    fast-json-stable-stringify "^2.0.0"
+    graceful-fs "^4.1.15"
+    jest-haste-map "^24.9.0"
+    jest-regex-util "^24.9.0"
+    jest-util "^24.9.0"
+    micromatch "^3.1.10"
+    pirates "^4.0.1"
+    realpath-native "^1.1.0"
+    slash "^2.0.0"
+    source-map "^0.6.1"
+    write-file-atomic "2.4.1"
+
+"@jest/types@^24.9.0":
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/@jest/types/-/types-24.9.0.tgz#63cb26cb7500d069e5a389441a7c6ab5e909fc59"
+  integrity sha512-XKK7ze1apu5JWQ5eZjHITP66AX+QsLlbaJRBGYr8pNzwcAE2JVkwnf0yqjHTsDRcjR0mujy/NmZMXw5kl+kGBw==
+  dependencies:
+    "@types/istanbul-lib-coverage" "^2.0.0"
+    "@types/istanbul-reports" "^1.1.1"
+    "@types/yargs" "^13.0.0"
+
+"@jest/types@^25.5.0":
+  version "25.5.0"
+  resolved "https://registry.yarnpkg.com/@jest/types/-/types-25.5.0.tgz#4d6a4793f7b9599fc3680877b856a97dbccf2a9d"
+  integrity sha512-OXD0RgQ86Tu3MazKo8bnrkDRaDXXMGUqd+kTtLtK1Zb7CRzQcaSRPPPV37SvYTdevXEBVxe0HXylEjs8ibkmCw==
+  dependencies:
+    "@types/istanbul-lib-coverage" "^2.0.0"
+    "@types/istanbul-reports" "^1.1.1"
+    "@types/yargs" "^15.0.0"
+    chalk "^3.0.0"
+
+"@jridgewell/gen-mapping@^0.3.2":
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz#c1aedc61e853f2bb9f5dfe6d4442d3b565b253b9"
+  integrity sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==
+  dependencies:
+    "@jridgewell/set-array" "^1.0.1"
+    "@jridgewell/sourcemap-codec" "^1.4.10"
+    "@jridgewell/trace-mapping" "^0.3.9"
+
+"@jridgewell/resolve-uri@3.1.0":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz#2203b118c157721addfe69d47b70465463066d78"
+  integrity sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==
+
+"@jridgewell/resolve-uri@^3.0.3":
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.0.5.tgz#68eb521368db76d040a6315cdb24bf2483037b9c"
+  integrity sha512-VPeQ7+wH0itvQxnG+lIzWgkysKIr3L9sslimFW55rHMdGu/qCQ5z5h9zq4gI8uBtqkpHhsF4Z/OwExufUCThew==
+
+"@jridgewell/set-array@^1.0.1":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@jridgewell/set-array/-/set-array-1.1.2.tgz#7c6cf998d6d20b914c0a55a91ae928ff25965e72"
+  integrity sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==
+
+"@jridgewell/sourcemap-codec@1.4.14":
+  version "1.4.14"
+  resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz#add4c98d341472a289190b424efbdb096991bb24"
+  integrity sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==
+
+"@jridgewell/sourcemap-codec@^1.4.10":
+  version "1.4.11"
+  resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.11.tgz#771a1d8d744eeb71b6adb35808e1a6c7b9b8c8ec"
+  integrity sha512-Fg32GrJo61m+VqYSdRSjRXMjQ06j8YIYfcTqndLYVAaHmroZHLJZCydsWBOTDqXS2v+mjxohBWEMfg97GXmYQg==
+
+"@jridgewell/trace-mapping@^0.3.0":
+  version "0.3.4"
+  resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.4.tgz#f6a0832dffd5b8a6aaa633b7d9f8e8e94c83a0c3"
+  integrity sha512-vFv9ttIedivx0ux3QSjhgtCVjPZd5l46ZOMDSCwnH1yUO2e964gO8LZGyv2QkqcgR6TnBU1v+1IFqmeoG+0UJQ==
+  dependencies:
+    "@jridgewell/resolve-uri" "^3.0.3"
+    "@jridgewell/sourcemap-codec" "^1.4.10"
+
+"@jridgewell/trace-mapping@^0.3.9":
+  version "0.3.17"
+  resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.17.tgz#793041277af9073b0951a7fe0f0d8c4c98c36985"
+  integrity sha512-MCNzAp77qzKca9+W/+I0+sEpaUnZoeasnghNeVc41VZCEKaCH73Vq3BZZ/SzWIgrqE4H4ceI+p+b6C0mHf9T4g==
+  dependencies:
+    "@jridgewell/resolve-uri" "3.1.0"
+    "@jridgewell/sourcemap-codec" "1.4.14"
+
+"@material-ui/core@~4.11.0":
+  version "4.11.4"
+  resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-4.11.4.tgz#4fb9fe5dec5dcf780b687e3a40cff78b2b9640a4"
+  integrity sha512-oqb+lJ2Dl9HXI9orc6/aN8ZIAMkeThufA5iZELf2LQeBn2NtjVilF5D2w7e9RpntAzDb4jK5DsVhkfOvFY/8fg==
+  dependencies:
+    "@babel/runtime" "^7.4.4"
+    "@material-ui/styles" "^4.11.4"
+    "@material-ui/system" "^4.11.3"
+    "@material-ui/types" "5.1.0"
+    "@material-ui/utils" "^4.11.2"
+    "@types/react-transition-group" "^4.2.0"
+    clsx "^1.0.4"
+    hoist-non-react-statics "^3.3.2"
+    popper.js "1.16.1-lts"
+    prop-types "^15.7.2"
+    react-is "^16.8.0 || ^17.0.0"
+    react-transition-group "^4.4.0"
+
+"@material-ui/icons@^4.5.1":
+  version "4.11.2"
+  resolved "https://registry.yarnpkg.com/@material-ui/icons/-/icons-4.11.2.tgz#b3a7353266519cd743b6461ae9fdfcb1b25eb4c5"
+  integrity sha512-fQNsKX2TxBmqIGJCSi3tGTO/gZ+eJgWmMJkgDiOfyNaunNaxcklJQFaFogYcFl0qFuaEz1qaXYXboa/bUXVSOQ==
+  dependencies:
+    "@babel/runtime" "^7.4.4"
+
+"@material-ui/lab@4.0.0-alpha.57":
+  version "4.0.0-alpha.57"
+  resolved "https://registry.yarnpkg.com/@material-ui/lab/-/lab-4.0.0-alpha.57.tgz#e8961bcf6449e8a8dabe84f2700daacfcafbf83a"
+  integrity sha512-qo/IuIQOmEKtzmRD2E4Aa6DB4A87kmY6h0uYhjUmrrgmEAgbbw9etXpWPVXuRK6AGIQCjFzV6WO2i21m1R4FCw==
+  dependencies:
+    "@babel/runtime" "^7.4.4"
+    "@material-ui/utils" "^4.11.2"
+    clsx "^1.0.4"
+    prop-types "^15.7.2"
+    react-is "^16.8.0 || ^17.0.0"
+
+"@material-ui/styles@^4.11.4":
+  version "4.11.4"
+  resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.11.4.tgz#eb9dfccfcc2d208243d986457dff025497afa00d"
+  integrity sha512-KNTIZcnj/zprG5LW0Sao7zw+yG3O35pviHzejMdcSGCdWbiO8qzRgOYL8JAxAsWBKOKYwVZxXtHWaB5T2Kvxew==
+  dependencies:
+    "@babel/runtime" "^7.4.4"
+    "@emotion/hash" "^0.8.0"
+    "@material-ui/types" "5.1.0"
+    "@material-ui/utils" "^4.11.2"
+    clsx "^1.0.4"
+    csstype "^2.5.2"
+    hoist-non-react-statics "^3.3.2"
+    jss "^10.5.1"
+    jss-plugin-camel-case "^10.5.1"
+    jss-plugin-default-unit "^10.5.1"
+    jss-plugin-global "^10.5.1"
+    jss-plugin-nested "^10.5.1"
+    jss-plugin-props-sort "^10.5.1"
+    jss-plugin-rule-value-function "^10.5.1"
+    jss-plugin-vendor-prefixer "^10.5.1"
+    prop-types "^15.7.2"
+
+"@material-ui/system@^4.11.3":
+  version "4.12.1"
+  resolved "https://registry.yarnpkg.com/@material-ui/system/-/system-4.12.1.tgz#2dd96c243f8c0a331b2bb6d46efd7771a399707c"
+  integrity sha512-lUdzs4q9kEXZGhbN7BptyiS1rLNHe6kG9o8Y307HCvF4sQxbCgpL2qi+gUk+yI8a2DNk48gISEQxoxpgph0xIw==
+  dependencies:
+    "@babel/runtime" "^7.4.4"
+    "@material-ui/utils" "^4.11.2"
+    csstype "^2.5.2"
+    prop-types "^15.7.2"
+
+"@material-ui/types@5.1.0":
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/@material-ui/types/-/types-5.1.0.tgz#efa1c7a0b0eaa4c7c87ac0390445f0f88b0d88f2"
+  integrity sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A==
+
+"@material-ui/utils@^4.11.2":
+  version "4.11.2"
+  resolved "https://registry.yarnpkg.com/@material-ui/utils/-/utils-4.11.2.tgz#f1aefa7e7dff2ebcb97d31de51aecab1bb57540a"
+  integrity sha512-Uul8w38u+PICe2Fg2pDKCaIG7kOyhowZ9vjiC1FsVwPABTW8vPPKfF6OvxRq3IiBaI1faOJmgdvMG7rMJARBhA==
+  dependencies:
+    "@babel/runtime" "^7.4.4"
+    prop-types "^15.7.2"
+    react-is "^16.8.0 || ^17.0.0"
+
+"@mrmlnc/readdir-enhanced@^2.2.1":
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde"
+  integrity sha512-bPHp6Ji8b41szTOcaP63VlnbbO5Ny6dwAATtY6JTjh5N2OLrb5Qk/Th5cRkRQhkWCt+EJsYrNB0MiL+Gpn6e3g==
+  dependencies:
+    call-me-maybe "^1.0.1"
+    glob-to-regexp "^0.3.0"
+
+"@nodelib/fs.stat@^1.1.2":
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz#2b5a3ab3f918cca48a8c754c08168e3f03eba61b"
+  integrity sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==
+
+"@svgr/babel-plugin-add-jsx-attribute@^4.2.0":
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-4.2.0.tgz#dadcb6218503532d6884b210e7f3c502caaa44b1"
+  integrity sha512-j7KnilGyZzYr/jhcrSYS3FGWMZVaqyCG0vzMCwzvei0coIkczuYMcniK07nI0aHJINciujjH11T72ICW5eL5Ig==
+
+"@svgr/babel-plugin-remove-jsx-attribute@^4.2.0":
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-remove-jsx-attribute/-/babel-plugin-remove-jsx-attribute-4.2.0.tgz#297550b9a8c0c7337bea12bdfc8a80bb66f85abc"
+  integrity sha512-3XHLtJ+HbRCH4n28S7y/yZoEQnRpl0tvTZQsHqvaeNXPra+6vE5tbRliH3ox1yZYPCxrlqaJT/Mg+75GpDKlvQ==
+
+"@svgr/babel-plugin-remove-jsx-empty-expression@^4.2.0":
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-remove-jsx-empty-expression/-/babel-plugin-remove-jsx-empty-expression-4.2.0.tgz#c196302f3e68eab6a05e98af9ca8570bc13131c7"
+  integrity sha512-yTr2iLdf6oEuUE9MsRdvt0NmdpMBAkgK8Bjhl6epb+eQWk6abBaX3d65UZ3E3FWaOwePyUgNyNCMVG61gGCQ7w==
+
+"@svgr/babel-plugin-replace-jsx-attribute-value@^4.2.0":
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-replace-jsx-attribute-value/-/babel-plugin-replace-jsx-attribute-value-4.2.0.tgz#310ec0775de808a6a2e4fd4268c245fd734c1165"
+  integrity sha512-U9m870Kqm0ko8beHawRXLGLvSi/ZMrl89gJ5BNcT452fAjtF2p4uRzXkdzvGJJJYBgx7BmqlDjBN/eCp5AAX2w==
+
+"@svgr/babel-plugin-svg-dynamic-title@^4.3.3":
+  version "4.3.3"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-svg-dynamic-title/-/babel-plugin-svg-dynamic-title-4.3.3.tgz#2cdedd747e5b1b29ed4c241e46256aac8110dd93"
+  integrity sha512-w3Be6xUNdwgParsvxkkeZb545VhXEwjGMwExMVBIdPQJeyMQHqm9Msnb2a1teHBqUYL66qtwfhNkbj1iarCG7w==
+
+"@svgr/babel-plugin-svg-em-dimensions@^4.2.0":
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-svg-em-dimensions/-/babel-plugin-svg-em-dimensions-4.2.0.tgz#9a94791c9a288108d20a9d2cc64cac820f141391"
+  integrity sha512-C0Uy+BHolCHGOZ8Dnr1zXy/KgpBOkEUYY9kI/HseHVPeMbluaX3CijJr7D4C5uR8zrc1T64nnq/k63ydQuGt4w==
+
+"@svgr/babel-plugin-transform-react-native-svg@^4.2.0":
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-4.2.0.tgz#151487322843359a1ca86b21a3815fd21a88b717"
+  integrity sha512-7YvynOpZDpCOUoIVlaaOUU87J4Z6RdD6spYN4eUb5tfPoKGSF9OG2NuhgYnq4jSkAxcpMaXWPf1cePkzmqTPNw==
+
+"@svgr/babel-plugin-transform-svg-component@^4.2.0":
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-transform-svg-component/-/babel-plugin-transform-svg-component-4.2.0.tgz#5f1e2f886b2c85c67e76da42f0f6be1b1767b697"
+  integrity sha512-hYfYuZhQPCBVotABsXKSCfel2slf/yvJY8heTVX1PCTaq/IgASq1IyxPPKJ0chWREEKewIU/JMSsIGBtK1KKxw==
+
+"@svgr/babel-preset@^4.3.3":
+  version "4.3.3"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-preset/-/babel-preset-4.3.3.tgz#a75d8c2f202ac0e5774e6bfc165d028b39a1316c"
+  integrity sha512-6PG80tdz4eAlYUN3g5GZiUjg2FMcp+Wn6rtnz5WJG9ITGEF1pmFdzq02597Hn0OmnQuCVaBYQE1OVFAnwOl+0A==
+  dependencies:
+    "@svgr/babel-plugin-add-jsx-attribute" "^4.2.0"
+    "@svgr/babel-plugin-remove-jsx-attribute" "^4.2.0"
+    "@svgr/babel-plugin-remove-jsx-empty-expression" "^4.2.0"
+    "@svgr/babel-plugin-replace-jsx-attribute-value" "^4.2.0"
+    "@svgr/babel-plugin-svg-dynamic-title" "^4.3.3"
+    "@svgr/babel-plugin-svg-em-dimensions" "^4.2.0"
+    "@svgr/babel-plugin-transform-react-native-svg" "^4.2.0"
+    "@svgr/babel-plugin-transform-svg-component" "^4.2.0"
+
+"@svgr/core@^4.3.2":
+  version "4.3.3"
+  resolved "https://registry.yarnpkg.com/@svgr/core/-/core-4.3.3.tgz#b37b89d5b757dc66e8c74156d00c368338d24293"
+  integrity sha512-qNuGF1QON1626UCaZamWt5yedpgOytvLj5BQZe2j1k1B8DUG4OyugZyfEwBeXozCUwhLEpsrgPrE+eCu4fY17w==
+  dependencies:
+    "@svgr/plugin-jsx" "^4.3.3"
+    camelcase "^5.3.1"
+    cosmiconfig "^5.2.1"
+
+"@svgr/hast-util-to-babel-ast@^4.3.2":
+  version "4.3.2"
+  resolved "https://registry.yarnpkg.com/@svgr/hast-util-to-babel-ast/-/hast-util-to-babel-ast-4.3.2.tgz#1d5a082f7b929ef8f1f578950238f630e14532b8"
+  integrity sha512-JioXclZGhFIDL3ddn4Kiq8qEqYM2PyDKV0aYno8+IXTLuYt6TOgHUbUAAFvqtb0Xn37NwP0BTHglejFoYr8RZg==
+  dependencies:
+    "@babel/types" "^7.4.4"
+
+"@svgr/plugin-jsx@^4.3.2", "@svgr/plugin-jsx@^4.3.3":
+  version "4.3.3"
+  resolved "https://registry.yarnpkg.com/@svgr/plugin-jsx/-/plugin-jsx-4.3.3.tgz#e2ba913dbdfbe85252a34db101abc7ebd50992fa"
+  integrity sha512-cLOCSpNWQnDB1/v+SUENHH7a0XY09bfuMKdq9+gYvtuwzC2rU4I0wKGFEp1i24holdQdwodCtDQdFtJiTCWc+w==
+  dependencies:
+    "@babel/core" "^7.4.5"
+    "@svgr/babel-preset" "^4.3.3"
+    "@svgr/hast-util-to-babel-ast" "^4.3.2"
+    svg-parser "^2.0.0"
+
+"@svgr/plugin-svgo@^4.3.1":
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/@svgr/plugin-svgo/-/plugin-svgo-4.3.1.tgz#daac0a3d872e3f55935c6588dd370336865e9e32"
+  integrity sha512-PrMtEDUWjX3Ea65JsVCwTIXuSqa3CG9px+DluF1/eo9mlDrgrtFE7NE/DjdhjJgSM9wenlVBzkzneSIUgfUI/w==
+  dependencies:
+    cosmiconfig "^5.2.1"
+    merge-deep "^3.0.2"
+    svgo "^1.2.2"
+
+"@svgr/webpack@4.3.2":
+  version "4.3.2"
+  resolved "https://registry.yarnpkg.com/@svgr/webpack/-/webpack-4.3.2.tgz#319d4471c8f3d5c3af35059274834d9b5b8fb956"
+  integrity sha512-F3VE5OvyOWBEd2bF7BdtFRyI6E9it3mN7teDw0JQTlVtc4HZEYiiLSl+Uf9Uub6IYHVGc+qIrxxDyeedkQru2w==
+  dependencies:
+    "@babel/core" "^7.4.5"
+    "@babel/plugin-transform-react-constant-elements" "^7.0.0"
+    "@babel/preset-env" "^7.4.5"
+    "@babel/preset-react" "^7.0.0"
+    "@svgr/core" "^4.3.2"
+    "@svgr/plugin-jsx" "^4.3.2"
+    "@svgr/plugin-svgo" "^4.3.1"
+    loader-utils "^1.2.3"
+
+"@types/asap@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@types/asap/-/asap-2.0.0.tgz#d529e9608c83499a62ae08c871c5e62271aa2963"
+  integrity sha512-upIS0Gt9Mc8eEpCbYMZ1K8rhNosfKUtimNcINce+zLwJF5UpM3Vv7yz3S5l/1IX+DxTa8lTkUjqynvjRXyJzsg==
+
+"@types/babel__core@^7.1.0":
+  version "7.1.18"
+  resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.18.tgz#1a29abcc411a9c05e2094c98f9a1b7da6cdf49f8"
+  integrity sha512-S7unDjm/C7z2A2R9NzfKCK1I+BAALDtxEmsJBwlB3EzNfb929ykjL++1CK9LO++EIp2fQrC8O+BwjKvz6UeDyQ==
+  dependencies:
+    "@babel/parser" "^7.1.0"
+    "@babel/types" "^7.0.0"
+    "@types/babel__generator" "*"
+    "@types/babel__template" "*"
+    "@types/babel__traverse" "*"
+
+"@types/babel__generator@*":
+  version "7.6.4"
+  resolved "https://registry.yarnpkg.com/@types/babel__generator/-/babel__generator-7.6.4.tgz#1f20ce4c5b1990b37900b63f050182d28c2439b7"
+  integrity sha512-tFkciB9j2K755yrTALxD44McOrk+gfpIpvC3sxHjRawj6PfnQxrse4Clq5y/Rq+G3mrBurMax/lG8Qn2t9mSsg==
+  dependencies:
+    "@babel/types" "^7.0.0"
+
+"@types/babel__template@*":
+  version "7.4.1"
+  resolved "https://registry.yarnpkg.com/@types/babel__template/-/babel__template-7.4.1.tgz#3d1a48fd9d6c0edfd56f2ff578daed48f36c8969"
+  integrity sha512-azBFKemX6kMg5Io+/rdGT0dkGreboUVR0Cdm3fz9QJWpaQGJRQXl7C+6hOTCZcMll7KFyEQpgbYI2lHdsS4U7g==
+  dependencies:
+    "@babel/parser" "^7.1.0"
+    "@babel/types" "^7.0.0"
+
+"@types/babel__traverse@*", "@types/babel__traverse@^7.0.6":
+  version "7.14.2"
+  resolved "https://registry.yarnpkg.com/@types/babel__traverse/-/babel__traverse-7.14.2.tgz#ffcd470bbb3f8bf30481678fb5502278ca833a43"
+  integrity sha512-K2waXdXBi2302XUdcHcR1jCeU0LL4TD9HRs/gk0N2Xvrht+G/BfJa4QObBQZfhMdxiCpV3COl5Nfq4uKTeTnJA==
+  dependencies:
+    "@babel/types" "^7.3.0"
+
+"@types/d3-color@^2":
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/@types/d3-color/-/d3-color-2.0.3.tgz#8bc4589073c80e33d126345542f588056511fe82"
+  integrity sha512-+0EtEjBfKEDtH9Rk3u3kLOUXM5F+iZK+WvASPb0MhIZl8J8NUvGeZRwKCXl+P3HkYx5TdU4YtcibpqHkSR9n7w==
+
+"@types/d3-interpolate@^2.0.0":
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/@types/d3-interpolate/-/d3-interpolate-2.0.2.tgz#78eddf7278b19e48e8652603045528d46897aba0"
+  integrity sha512-lElyqlUfIPyWG/cD475vl6msPL4aMU7eJvx1//Q177L8mdXoVPFl1djIESF2FKnc0NyaHvQlJpWwKJYwAhUoCw==
+  dependencies:
+    "@types/d3-color" "^2"
+
+"@types/d3-path@^2":
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/@types/d3-path/-/d3-path-2.0.1.tgz#ca03dfa8b94d8add97ad0cd97e96e2006b4763cb"
+  integrity sha512-6K8LaFlztlhZO7mwsZg7ClRsdLg3FJRzIIi6SZXDWmmSJc2x8dd2VkESbLXdk3p8cuvz71f36S0y8Zv2AxqvQw==
+
+"@types/d3-scale@^3.0.0":
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/@types/d3-scale/-/d3-scale-3.3.2.tgz#18c94e90f4f1c6b1ee14a70f14bfca2bd1c61d06"
+  integrity sha512-gGqr7x1ost9px3FvIfUMi5XA/F/yAf4UkUDtdQhpH92XCT0Oa7zkkRzY61gPVJq+DxpHn/btouw5ohWkbBsCzQ==
+  dependencies:
+    "@types/d3-time" "^2"
+
+"@types/d3-shape@^2.0.0":
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/@types/d3-shape/-/d3-shape-2.1.3.tgz#35d397b9e687abaa0de82343b250b9897b8cacf3"
+  integrity sha512-HAhCel3wP93kh4/rq+7atLdybcESZ5bRHDEZUojClyZWsRuEMo3A52NGYJSh48SxfxEU6RZIVbZL2YFZ2OAlzQ==
+  dependencies:
+    "@types/d3-path" "^2"
+
+"@types/d3-time@^2":
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/@types/d3-time/-/d3-time-2.1.1.tgz#743fdc821c81f86537cbfece07093ac39b4bc342"
+  integrity sha512-9MVYlmIgmRR31C5b4FVSWtuMmBHh2mOWQYfl7XAYOa8dsnb7iEmUmRSWSFgXFtkjxO65d7hTUHQC+RhR/9IWFg==
+
+"@types/eslint-visitor-keys@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@types/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#1ee30d79544ca84d68d4b3cdb0af4f205663dd2d"
+  integrity sha512-OCutwjDZ4aFS6PB1UZ988C4YgwlBHJd6wCeQqaLdmadZ/7e+w79+hbMUFC1QXDNCmdyoRfAFdm0RypzwR+Qpag==
+
+"@types/glob@^7.1.1":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@types/glob/-/glob-7.2.0.tgz#bc1b5bf3aa92f25bd5dd39f35c57361bdce5b2eb"
+  integrity sha512-ZUxbzKl0IfJILTS6t7ip5fQQM/J3TJYubDm3nMbgubNNYS62eXeUpoLUC8/7fJNiFYHTrGPQn7hspDUzIHX3UA==
+  dependencies:
+    "@types/minimatch" "*"
+    "@types/node" "*"
+
+"@types/hoist-non-react-statics@^3.3.0", "@types/hoist-non-react-statics@^3.3.1":
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
+  integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==
+  dependencies:
+    "@types/react" "*"
+    hoist-non-react-statics "^3.3.0"
+
+"@types/invariant@^2.2.30", "@types/invariant@^2.2.32":
+  version "2.2.35"
+  resolved "https://registry.yarnpkg.com/@types/invariant/-/invariant-2.2.35.tgz#cd3ebf581a6557452735688d8daba6cf0bd5a3be"
+  integrity sha512-DxX1V9P8zdJPYQat1gHyY0xj3efl8gnMVjiM9iCY6y27lj+PoQWkgjt8jDqmovPqULkKVpKRg8J36iQiA+EtEg==
+
+"@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0":
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz#8467d4b3c087805d63580480890791277ce35c44"
+  integrity sha512-z/QT1XN4K4KYuslS23k62yDIDLwLFkzxOuMplDtObz0+y7VqJCaO2o+SPwHCvLFZh7xazvvoor2tA/hPz9ee7g==
+
+"@types/istanbul-lib-report@*":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@types/istanbul-lib-report/-/istanbul-lib-report-3.0.0.tgz#c14c24f18ea8190c118ee7562b7ff99a36552686"
+  integrity sha512-plGgXAPfVKFoYfa9NpYDAkseG+g6Jr294RqeqcqDixSbU34MZVJRi/P+7Y8GDpzkEwLaGZZOpKIEmeVZNtKsrg==
+  dependencies:
+    "@types/istanbul-lib-coverage" "*"
+
+"@types/istanbul-reports@^1.1.1":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@types/istanbul-reports/-/istanbul-reports-1.1.2.tgz#e875cc689e47bce549ec81f3df5e6f6f11cfaeb2"
+  integrity sha512-P/W9yOX/3oPZSpaYOCQzGqgCQRXn0FFO/V8bWrCQs+wLmvVVxk6CRBXALEvNs9OHIatlnlFokfhuDo2ug01ciw==
+  dependencies:
+    "@types/istanbul-lib-coverage" "*"
+    "@types/istanbul-lib-report" "*"
+
+"@types/jest@^25.2.2":
+  version "25.2.3"
+  resolved "https://registry.yarnpkg.com/@types/jest/-/jest-25.2.3.tgz#33d27e4c4716caae4eced355097a47ad363fdcaf"
+  integrity sha512-JXc1nK/tXHiDhV55dvfzqtmP4S3sy3T3ouV2tkViZgxY/zeUkcpQcQPGRlgF4KmWzWW5oiWYSZwtCB+2RsE4Fw==
+  dependencies:
+    jest-diff "^25.2.1"
+    pretty-format "^25.2.1"
+
+"@types/js-cookie@^2.x.x":
+  version "2.2.7"
+  resolved "https://registry.yarnpkg.com/@types/js-cookie/-/js-cookie-2.2.7.tgz#226a9e31680835a6188e887f3988e60c04d3f6a3"
+  integrity sha512-aLkWa0C0vO5b4Sr798E26QgOkss68Un0bLjs7u9qxzPT5CG+8DuNTffWES58YzJs3hrVAOs1wonycqEBqNJubA==
+
+"@types/json-schema@^7.0.3", "@types/json-schema@^7.0.5":
+  version "7.0.9"
+  resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.9.tgz#97edc9037ea0c38585320b28964dde3b39e4660d"
+  integrity sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ==
+
+"@types/localforage@0.0.34":
+  version "0.0.34"
+  resolved "https://registry.yarnpkg.com/@types/localforage/-/localforage-0.0.34.tgz#5e31c32dd8791ec4b9ff3ef47c9cb55b2d0d9438"
+  integrity sha1-XjHDLdh5HsS5/z70fJy1Wy0NlDg=
+  dependencies:
+    localforage "*"
+
+"@types/minimatch@*":
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.5.tgz#1001cc5e6a3704b83c236027e77f2f58ea010f40"
+  integrity sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ==
+
+"@types/node@*":
+  version "17.0.21"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.21.tgz#864b987c0c68d07b4345845c3e63b75edd143644"
+  integrity sha512-DBZCJbhII3r90XbQxI8Y9IjjiiOGlZ0Hr32omXIZvwwZ7p4DMMXGrKXVyPfuoBOri9XNtL0UK69jYIBIsRX3QQ==
+
+"@types/node@^14.0.1":
+  version "14.18.12"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-14.18.12.tgz#0d4557fd3b94497d793efd4e7d92df2f83b4ef24"
+  integrity sha512-q4jlIR71hUpWTnGhXWcakgkZeHa3CCjcQcnuzU8M891BAWA2jHiziiWEPEkdS5pFsz7H9HJiy8BrK7tBRNrY7A==
+
+"@types/parse-json@^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
+  integrity sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==
+
+"@types/prop-types@*":
+  version "15.7.4"
+  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.4.tgz#fcf7205c25dff795ee79af1e30da2c9790808f11"
+  integrity sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==
+
+"@types/q@^1.5.1":
+  version "1.5.5"
+  resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.5.tgz#75a2a8e7d8ab4b230414505d92335d1dcb53a6df"
+  integrity sha512-L28j2FcJfSZOnL1WBjDYp2vUHCeIFlyYI/53EwD/rKUBQ7MtUUfbQWiyKJGpcnv4/WgrhWsFKrcPstcAt/J0tQ==
+
+"@types/react-dom@^16.9.8":
+  version "16.9.14"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.9.14.tgz#674b8f116645fe5266b40b525777fc6bb8eb3bcd"
+  integrity sha512-FIX2AVmPTGP30OUJ+0vadeIFJJ07Mh1m+U0rxfgyW34p3rTlXI+nlenvAxNn4BP36YyI9IJ/+UJ7Wu22N1pI7A==
+  dependencies:
+    "@types/react" "^16"
+
+"@types/react-redux@^7.1.20":
+  version "7.1.22"
+  resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.1.22.tgz#0eab76a37ef477cc4b53665aeaf29cb60631b72a"
+  integrity sha512-GxIA1kM7ClU73I6wg9IRTVwSO9GS+SAKZKe0Enj+82HMU6aoESFU2HNAdNi3+J53IaOHPiUfT3kSG4L828joDQ==
+  dependencies:
+    "@types/hoist-non-react-statics" "^3.3.0"
+    "@types/react" "*"
+    hoist-non-react-statics "^3.3.0"
+    redux "^4.0.0"
+
+"@types/react-transition-group@^4.2.0":
+  version "4.4.4"
+  resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.4.tgz#acd4cceaa2be6b757db61ed7b432e103242d163e"
+  integrity sha512-7gAPz7anVK5xzbeQW9wFBDg7G++aPLAFY0QaSMOou9rJZpbuI58WAuJrgu+qR92l61grlnCUe7AFX8KGahAgug==
+  dependencies:
+    "@types/react" "*"
+
+"@types/react@*", "@types/react@^16", "@types/react@^16.9.35", "@types/react@^16.x":
+  version "16.14.23"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.14.23.tgz#37201b9f2324c5ff8fa4600dbf19079dfdffc880"
+  integrity sha512-WngBZLuSkP4IAgPi0HOsGCHo6dn3CcuLQnCfC17VbA7YBgipZiZoTOhObwl/93DsFW0Y2a/ZXeonpW4DxirEJg==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
+
+"@types/resize-observer-browser@^0.1.6":
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/@types/resize-observer-browser/-/resize-observer-browser-0.1.7.tgz#294aaadf24ac6580b8fbd1fe3ab7b59fe85f9ef3"
+  integrity sha512-G9eN0Sn0ii9PWQ3Vl72jDPgeJwRWhv2Qk/nQkJuWmRmOB4HX3/BhD5SE1dZs/hzPZL/WKnvF0RHdTSG54QJFyg==
+
+"@types/scheduler@*":
+  version "0.16.2"
+  resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39"
+  integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==
+
+"@types/shallowequal@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@types/shallowequal/-/shallowequal-1.1.1.tgz#aad262bb3f2b1257d94c71d545268d592575c9b1"
+  integrity sha512-Lhni3aX80zbpdxRuWhnuYPm8j8UQaa571lHP/xI4W+7BAFhSIhRReXnqjEgT/XzPoXZTJkCqstFMJ8CZTK6IlQ==
+
+"@types/stack-utils@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e"
+  integrity sha512-l42BggppR6zLmpfU6fq9HEa2oGPEI8yrSPL3GITjfRInppYFahObbIQOQK3UGxEnyQpltZLaPe75046NOZQikw==
+
+"@types/streamsaver@^2.0.1":
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/@types/streamsaver/-/streamsaver-2.0.1.tgz#fa5e5b891d1b282be3078c232a30ee004b8e0be0"
+  integrity sha512-I49NtT8w6syBI3Zg3ixCyygTHoTVMY0z2TMRcTgccdIsVd2MwlKk7ITLHLsJtgchUHcOd7QEARG9h0ifcA6l2Q==
+
+"@types/wicg-file-system-access@^2020.9.5":
+  version "2020.9.5"
+  resolved "https://registry.yarnpkg.com/@types/wicg-file-system-access/-/wicg-file-system-access-2020.9.5.tgz#4a0c8f3d1ed101525f329e86c978f7735404474f"
+  integrity sha512-UYK244awtmcUYQfs7FR8710MJcefL2WvkyHMjA8yJzxd1mo0Gfn88sRZ1Bls7hiUhA2w7ne1gpJ9T5g3G0wOyA==
+
+"@types/yargs-parser@*":
+  version "20.2.1"
+  resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-20.2.1.tgz#3b9ce2489919d9e4fea439b76916abc34b2df129"
+  integrity sha512-7tFImggNeNBVMsn0vLrpn1H1uPrUBdnARPTpZoitY37ZrdJREzf7I16tMrlK3hen349gr1NYh8CmZQa7CTG6Aw==
+
+"@types/yargs@^13.0.0":
+  version "13.0.12"
+  resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-13.0.12.tgz#d895a88c703b78af0465a9de88aa92c61430b092"
+  integrity sha512-qCxJE1qgz2y0hA4pIxjBR+PelCH0U5CK1XJXFwCNqfmliatKp47UCXXE9Dyk1OXBDLvsCF57TqQEJaeLfDYEOQ==
+  dependencies:
+    "@types/yargs-parser" "*"
+
+"@types/yargs@^15.0.0":
+  version "15.0.14"
+  resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-15.0.14.tgz#26d821ddb89e70492160b66d10a0eb6df8f6fb06"
+  integrity sha512-yEJzHoxf6SyQGhBhIYGXQDSCkJjB6HohDShto7m8vaKg9Yp0Yn8+71J9eakh2bnPg6BfsH9PRMhiRTZnd4eXGQ==
+  dependencies:
+    "@types/yargs-parser" "*"
+
+"@typescript-eslint/eslint-plugin@^2.33.0":
+  version "2.34.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-2.34.0.tgz#6f8ce8a46c7dea4a6f1d171d2bb8fbae6dac2be9"
+  integrity sha512-4zY3Z88rEE99+CNvTbXSyovv2z9PNOVffTWD2W8QF5s2prBQtwN2zadqERcrHpcR7O/+KMI3fcTAmUUhK/iQcQ==
+  dependencies:
+    "@typescript-eslint/experimental-utils" "2.34.0"
+    functional-red-black-tree "^1.0.1"
+    regexpp "^3.0.0"
+    tsutils "^3.17.1"
+
+"@typescript-eslint/experimental-utils@2.34.0":
+  version "2.34.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-2.34.0.tgz#d3524b644cdb40eebceca67f8cf3e4cc9c8f980f"
+  integrity sha512-eS6FTkq+wuMJ+sgtuNTtcqavWXqsflWcfBnlYhg/nS4aZ1leewkXGbvBhaapn1q6qf4M71bsR1tez5JTRMuqwA==
+  dependencies:
+    "@types/json-schema" "^7.0.3"
+    "@typescript-eslint/typescript-estree" "2.34.0"
+    eslint-scope "^5.0.0"
+    eslint-utils "^2.0.0"
+
+"@typescript-eslint/parser@^2.33.0":
+  version "2.34.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-2.34.0.tgz#50252630ca319685420e9a39ca05fe185a256bc8"
+  integrity sha512-03ilO0ucSD0EPTw2X4PntSIRFtDPWjrVq7C3/Z3VQHRC7+13YB55rcJI3Jt+YgeHbjUdJPcPa7b23rXCBokuyA==
+  dependencies:
+    "@types/eslint-visitor-keys" "^1.0.0"
+    "@typescript-eslint/experimental-utils" "2.34.0"
+    "@typescript-eslint/typescript-estree" "2.34.0"
+    eslint-visitor-keys "^1.1.0"
+
+"@typescript-eslint/typescript-estree@2.34.0":
+  version "2.34.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-2.34.0.tgz#14aeb6353b39ef0732cc7f1b8285294937cf37d5"
+  integrity sha512-OMAr+nJWKdlVM9LOqCqh3pQQPwxHAN7Du8DR6dmwCrAmxtiXQnhHJ6tBNtf+cggqfo51SG/FCwnKhXCIM7hnVg==
+  dependencies:
+    debug "^4.1.1"
+    eslint-visitor-keys "^1.1.0"
+    glob "^7.1.6"
+    is-glob "^4.0.1"
+    lodash "^4.17.15"
+    semver "^7.3.2"
+    tsutils "^3.17.1"
+
+"@virtuoso.dev/react-urx@^0.2.12":
+  version "0.2.13"
+  resolved "https://registry.yarnpkg.com/@virtuoso.dev/react-urx/-/react-urx-0.2.13.tgz#e2cfc42d259d2a002695e7517d34cb97b64ee9c4"
+  integrity sha512-MY0ugBDjFb5Xt8v2HY7MKcRGqw/3gTpMlLXId2EwQvYJoC8sP7nnXjAxcBtTB50KTZhO0SbzsFimaZ7pSdApwA==
+  dependencies:
+    "@virtuoso.dev/urx" "^0.2.13"
+
+"@virtuoso.dev/urx@^0.2.12", "@virtuoso.dev/urx@^0.2.13":
+  version "0.2.13"
+  resolved "https://registry.yarnpkg.com/@virtuoso.dev/urx/-/urx-0.2.13.tgz#a65e7e8d923cb03397ac876bfdd45c7f71c8edf1"
+  integrity sha512-iirJNv92A1ZWxoOHHDYW/1KPoi83939o83iUBQHIim0i3tMeSKEh+bxhJdTHQ86Mr4uXx9xGUTq69cp52ZP8Xw==
+
+"@webassemblyjs/ast@1.8.5":
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.8.5.tgz#51b1c5fe6576a34953bf4b253df9f0d490d9e359"
+  integrity sha512-aJMfngIZ65+t71C3y2nBBg5FFG0Okt9m0XEgWZ7Ywgn1oMAT8cNwx00Uv1cQyHtidq0Xn94R4TAywO+LCQ+ZAQ==
+  dependencies:
+    "@webassemblyjs/helper-module-context" "1.8.5"
+    "@webassemblyjs/helper-wasm-bytecode" "1.8.5"
+    "@webassemblyjs/wast-parser" "1.8.5"
+
+"@webassemblyjs/floating-point-hex-parser@1.8.5":
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.8.5.tgz#1ba926a2923613edce496fd5b02e8ce8a5f49721"
+  integrity sha512-9p+79WHru1oqBh9ewP9zW95E3XAo+90oth7S5Re3eQnECGq59ly1Ri5tsIipKGpiStHsUYmY3zMLqtk3gTcOtQ==
+
+"@webassemblyjs/helper-api-error@1.8.5":
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-api-error/-/helper-api-error-1.8.5.tgz#c49dad22f645227c5edb610bdb9697f1aab721f7"
+  integrity sha512-Za/tnzsvnqdaSPOUXHyKJ2XI7PDX64kWtURyGiJJZKVEdFOsdKUCPTNEVFZq3zJ2R0G5wc2PZ5gvdTRFgm81zA==
+
+"@webassemblyjs/helper-buffer@1.8.5":
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-buffer/-/helper-buffer-1.8.5.tgz#fea93e429863dd5e4338555f42292385a653f204"
+  integrity sha512-Ri2R8nOS0U6G49Q86goFIPNgjyl6+oE1abW1pS84BuhP1Qcr5JqMwRFT3Ah3ADDDYGEgGs1iyb1DGX+kAi/c/Q==
+
+"@webassemblyjs/helper-code-frame@1.8.5":
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-code-frame/-/helper-code-frame-1.8.5.tgz#9a740ff48e3faa3022b1dff54423df9aa293c25e"
+  integrity sha512-VQAadSubZIhNpH46IR3yWO4kZZjMxN1opDrzePLdVKAZ+DFjkGD/rf4v1jap744uPVU6yjL/smZbRIIJTOUnKQ==
+  dependencies:
+    "@webassemblyjs/wast-printer" "1.8.5"
+
+"@webassemblyjs/helper-fsm@1.8.5":
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-fsm/-/helper-fsm-1.8.5.tgz#ba0b7d3b3f7e4733da6059c9332275d860702452"
+  integrity sha512-kRuX/saORcg8se/ft6Q2UbRpZwP4y7YrWsLXPbbmtepKr22i8Z4O3V5QE9DbZK908dh5Xya4Un57SDIKwB9eow==
+
+"@webassemblyjs/helper-module-context@1.8.5":
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-module-context/-/helper-module-context-1.8.5.tgz#def4b9927b0101dc8cbbd8d1edb5b7b9c82eb245"
+  integrity sha512-/O1B236mN7UNEU4t9X7Pj38i4VoU8CcMHyy3l2cV/kIF4U5KoHXDVqcDuOs1ltkac90IM4vZdHc52t1x8Yfs3g==
+  dependencies:
+    "@webassemblyjs/ast" "1.8.5"
+    mamacro "^0.0.3"
+
+"@webassemblyjs/helper-wasm-bytecode@1.8.5":
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.8.5.tgz#537a750eddf5c1e932f3744206551c91c1b93e61"
+  integrity sha512-Cu4YMYG3Ddl72CbmpjU/wbP6SACcOPVbHN1dI4VJNJVgFwaKf1ppeFJrwydOG3NDHxVGuCfPlLZNyEdIYlQ6QQ==
+
+"@webassemblyjs/helper-wasm-section@1.8.5":
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.8.5.tgz#74ca6a6bcbe19e50a3b6b462847e69503e6bfcbf"
+  integrity sha512-VV083zwR+VTrIWWtgIUpqfvVdK4ff38loRmrdDBgBT8ADXYsEZ5mPQ4Nde90N3UYatHdYoDIFb7oHzMncI02tA==
+  dependencies:
+    "@webassemblyjs/ast" "1.8.5"
+    "@webassemblyjs/helper-buffer" "1.8.5"
+    "@webassemblyjs/helper-wasm-bytecode" "1.8.5"
+    "@webassemblyjs/wasm-gen" "1.8.5"
+
+"@webassemblyjs/ieee754@1.8.5":
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/ieee754/-/ieee754-1.8.5.tgz#712329dbef240f36bf57bd2f7b8fb9bf4154421e"
+  integrity sha512-aaCvQYrvKbY/n6wKHb/ylAJr27GglahUO89CcGXMItrOBqRarUMxWLJgxm9PJNuKULwN5n1csT9bYoMeZOGF3g==
+  dependencies:
+    "@xtuc/ieee754" "^1.2.0"
+
+"@webassemblyjs/leb128@1.8.5":
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/leb128/-/leb128-1.8.5.tgz#044edeb34ea679f3e04cd4fd9824d5e35767ae10"
+  integrity sha512-plYUuUwleLIziknvlP8VpTgO4kqNaH57Y3JnNa6DLpu/sGcP6hbVdfdX5aHAV716pQBKrfuU26BJK29qY37J7A==
+  dependencies:
+    "@xtuc/long" "4.2.2"
+
+"@webassemblyjs/utf8@1.8.5":
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/utf8/-/utf8-1.8.5.tgz#a8bf3b5d8ffe986c7c1e373ccbdc2a0915f0cedc"
+  integrity sha512-U7zgftmQriw37tfD934UNInokz6yTmn29inT2cAetAsaU9YeVCveWEwhKL1Mg4yS7q//NGdzy79nlXh3bT8Kjw==
+
+"@webassemblyjs/wasm-edit@1.8.5":
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-edit/-/wasm-edit-1.8.5.tgz#962da12aa5acc1c131c81c4232991c82ce56e01a"
+  integrity sha512-A41EMy8MWw5yvqj7MQzkDjU29K7UJq1VrX2vWLzfpRHt3ISftOXqrtojn7nlPsZ9Ijhp5NwuODuycSvfAO/26Q==
+  dependencies:
+    "@webassemblyjs/ast" "1.8.5"
+    "@webassemblyjs/helper-buffer" "1.8.5"
+    "@webassemblyjs/helper-wasm-bytecode" "1.8.5"
+    "@webassemblyjs/helper-wasm-section" "1.8.5"
+    "@webassemblyjs/wasm-gen" "1.8.5"
+    "@webassemblyjs/wasm-opt" "1.8.5"
+    "@webassemblyjs/wasm-parser" "1.8.5"
+    "@webassemblyjs/wast-printer" "1.8.5"
+
+"@webassemblyjs/wasm-gen@1.8.5":
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-gen/-/wasm-gen-1.8.5.tgz#54840766c2c1002eb64ed1abe720aded714f98bc"
+  integrity sha512-BCZBT0LURC0CXDzj5FXSc2FPTsxwp3nWcqXQdOZE4U7h7i8FqtFK5Egia6f9raQLpEKT1VL7zr4r3+QX6zArWg==
+  dependencies:
+    "@webassemblyjs/ast" "1.8.5"
+    "@webassemblyjs/helper-wasm-bytecode" "1.8.5"
+    "@webassemblyjs/ieee754" "1.8.5"
+    "@webassemblyjs/leb128" "1.8.5"
+    "@webassemblyjs/utf8" "1.8.5"
+
+"@webassemblyjs/wasm-opt@1.8.5":
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-opt/-/wasm-opt-1.8.5.tgz#b24d9f6ba50394af1349f510afa8ffcb8a63d264"
+  integrity sha512-HKo2mO/Uh9A6ojzu7cjslGaHaUU14LdLbGEKqTR7PBKwT6LdPtLLh9fPY33rmr5wcOMrsWDbbdCHq4hQUdd37Q==
+  dependencies:
+    "@webassemblyjs/ast" "1.8.5"
+    "@webassemblyjs/helper-buffer" "1.8.5"
+    "@webassemblyjs/wasm-gen" "1.8.5"
+    "@webassemblyjs/wasm-parser" "1.8.5"
+
+"@webassemblyjs/wasm-parser@1.8.5":
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-parser/-/wasm-parser-1.8.5.tgz#21576f0ec88b91427357b8536383668ef7c66b8d"
+  integrity sha512-pi0SYE9T6tfcMkthwcgCpL0cM9nRYr6/6fjgDtL6q/ZqKHdMWvxitRi5JcZ7RI4SNJJYnYNaWy5UUrHQy998lw==
+  dependencies:
+    "@webassemblyjs/ast" "1.8.5"
+    "@webassemblyjs/helper-api-error" "1.8.5"
+    "@webassemblyjs/helper-wasm-bytecode" "1.8.5"
+    "@webassemblyjs/ieee754" "1.8.5"
+    "@webassemblyjs/leb128" "1.8.5"
+    "@webassemblyjs/utf8" "1.8.5"
+
+"@webassemblyjs/wast-parser@1.8.5":
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wast-parser/-/wast-parser-1.8.5.tgz#e10eecd542d0e7bd394f6827c49f3df6d4eefb8c"
+  integrity sha512-daXC1FyKWHF1i11obK086QRlsMsY4+tIOKgBqI1lxAnkp9xe9YMcgOxm9kLe+ttjs5aWV2KKE1TWJCN57/Btsg==
+  dependencies:
+    "@webassemblyjs/ast" "1.8.5"
+    "@webassemblyjs/floating-point-hex-parser" "1.8.5"
+    "@webassemblyjs/helper-api-error" "1.8.5"
+    "@webassemblyjs/helper-code-frame" "1.8.5"
+    "@webassemblyjs/helper-fsm" "1.8.5"
+    "@xtuc/long" "4.2.2"
+
+"@webassemblyjs/wast-printer@1.8.5":
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wast-printer/-/wast-printer-1.8.5.tgz#114bbc481fd10ca0e23b3560fa812748b0bae5bc"
+  integrity sha512-w0U0pD4EhlnvRyeJzBqaVSJAo9w/ce7/WPogeXLzGkO6hzhr4GnQIZ4W4uUt5b9ooAaXPtnXlj0gzsXEOUNYMg==
+  dependencies:
+    "@webassemblyjs/ast" "1.8.5"
+    "@webassemblyjs/wast-parser" "1.8.5"
+    "@xtuc/long" "4.2.2"
+
+"@xmldom/xmldom@^0.7.5":
+  version "0.7.5"
+  resolved "https://registry.yarnpkg.com/@xmldom/xmldom/-/xmldom-0.7.5.tgz#09fa51e356d07d0be200642b0e4f91d8e6dd408d"
+  integrity sha512-V3BIhmY36fXZ1OtVcI9W+FxQqxVLsPKcNjWigIaa81dLC9IolJl5Mt4Cvhmr0flUnjSpTdrbMTSbXqYqV5dT6A==
+
+"@xtuc/ieee754@^1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@xtuc/ieee754/-/ieee754-1.2.0.tgz#eef014a3145ae477a1cbc00cd1e552336dceb790"
+  integrity sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==
+
+"@xtuc/long@4.2.2":
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/@xtuc/long/-/long-4.2.2.tgz#d291c6a4e97989b5c61d9acf396ae4fe133a718d"
+  integrity sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==
+
+abab@^2.0.0:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.5.tgz#c0b678fb32d60fc1219c784d6a826fe385aeb79a"
+  integrity sha512-9IK9EadsbHo6jLWIpxpR6pL0sazTXV6+SQv25ZB+F7Bj9mJNaOc4nCRabwd5M/JwmUa8idz6Eci6eKfJryPs6Q==
+
+accepts@~1.3.4, accepts@~1.3.5, accepts@~1.3.8:
+  version "1.3.8"
+  resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.8.tgz#0bf0be125b67014adcb0b0921e62db7bffe16b2e"
+  integrity sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==
+  dependencies:
+    mime-types "~2.1.34"
+    negotiator "0.6.3"
+
+acorn-globals@^4.1.0, acorn-globals@^4.3.0:
+  version "4.3.4"
+  resolved "https://registry.yarnpkg.com/acorn-globals/-/acorn-globals-4.3.4.tgz#9fa1926addc11c97308c4e66d7add0d40c3272e7"
+  integrity sha512-clfQEh21R+D0leSbUdWf3OcfqyaCSAQ8Ryq00bofSekfr9W8u1jyYZo6ir0xu9Gtcf7BjcHJpnbZH7JOCpP60A==
+  dependencies:
+    acorn "^6.0.1"
+    acorn-walk "^6.0.1"
+
+acorn-jsx@^5.2.0:
+  version "5.3.2"
+  resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
+  integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==
+
+acorn-walk@^6.0.1:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-6.2.0.tgz#123cb8f3b84c2171f1f7fb252615b1c78a6b1a8c"
+  integrity sha512-7evsyfH1cLOCdAzZAd43Cic04yKydNx0cF+7tiA19p1XnLLPU4dpCQOqpjqwokFe//vS0QqfqqjCS2JkiIs0cA==
+
+acorn@^5.5.3:
+  version "5.7.4"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.7.4.tgz#3e8d8a9947d0599a1796d10225d7432f4a4acf5e"
+  integrity sha512-1D++VG7BhrtvQpNbBzovKNc1FLGGEE/oGe7b9xJm/RFHMBeUaUGpluV9RLjZa47YFdPcDAenEYuq9pQPcMdLJg==
+
+acorn@^6.0.1, acorn@^6.0.4, acorn@^6.2.1:
+  version "6.4.2"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-6.4.2.tgz#35866fd710528e92de10cf06016498e47e39e1e6"
+  integrity sha512-XtGIhXwF8YM8bJhGxG5kXgjkEuNGLTkoYqVE+KMR+aspr4KGYmKYg7yUe3KghyQ9yheNwLnjmzh/7+gfDBmHCQ==
+
+acorn@^7.1.1:
+  version "7.4.1"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa"
+  integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
+
+address@1.1.2, address@^1.0.1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/address/-/address-1.1.2.tgz#bf1116c9c758c51b7a933d296b72c221ed9428b6"
+  integrity sha512-aT6camzM4xEA54YVJYSqxz1kv4IHnQZRtThJJHhUMRExaU5spC7jX5ugSwTaTgJliIgs4VhZOk7htClvQ/LmRA==
+
+adjust-sourcemap-loader@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/adjust-sourcemap-loader/-/adjust-sourcemap-loader-2.0.0.tgz#6471143af75ec02334b219f54bc7970c52fb29a4"
+  integrity sha512-4hFsTsn58+YjrU9qKzML2JSSDqKvN8mUGQ0nNIrfPi8hmIONT4L3uUaT6MKdMsZ9AjsU6D2xDkZxCkbQPxChrA==
+  dependencies:
+    assert "1.4.1"
+    camelcase "5.0.0"
+    loader-utils "1.2.3"
+    object-path "0.11.4"
+    regex-parser "2.2.10"
+
+ahooks-v3-count@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/ahooks-v3-count/-/ahooks-v3-count-1.0.0.tgz#ddeb392e009ad6e748905b3cbf63a9fd8262ca80"
+  integrity sha512-V7uUvAwnimu6eh/PED4mCDjE7tokeZQLKlxg9lCTMPhN+NjsSbtdacByVlR1oluXQzD3MOw55wylDmQo4+S9ZQ==
+
+ahooks@^3.5.2:
+  version "3.5.2"
+  resolved "https://registry.yarnpkg.com/ahooks/-/ahooks-3.5.2.tgz#283e4b2796d3e00f0a280f0f09e2517feaa434e3"
+  integrity sha512-0OrV3/9s339comBg/F+d9Q7lhZERZK3K5f1J8ebK3z076Kc4KkeGc1MLalFRG+95nVA0wUCZ71oJMs66fIU2Uw==
+  dependencies:
+    "@types/js-cookie" "^2.x.x"
+    ahooks-v3-count "^1.0.0"
+    dayjs "^1.9.1"
+    intersection-observer "^0.12.0"
+    js-cookie "^2.x.x"
+    lodash "^4.17.21"
+    resize-observer-polyfill "^1.5.1"
+    screenfull "^5.0.0"
+
+ajv-errors@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/ajv-errors/-/ajv-errors-1.0.1.tgz#f35986aceb91afadec4102fbd85014950cefa64d"
+  integrity sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==
+
+ajv-keywords@^3.1.0, ajv-keywords@^3.4.1, ajv-keywords@^3.5.2:
+  version "3.5.2"
+  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.5.2.tgz#31f29da5ab6e00d1c2d329acf7b5929614d5014d"
+  integrity sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==
+
+ajv@^6.1.0, ajv@^6.10.0, ajv@^6.10.2, ajv@^6.12.3, ajv@^6.12.4:
+  version "6.12.6"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.6.tgz#baf5a62e802b07d977034586f8c3baf5adf26df4"
+  integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==
+  dependencies:
+    fast-deep-equal "^3.1.1"
+    fast-json-stable-stringify "^2.0.0"
+    json-schema-traverse "^0.4.1"
+    uri-js "^4.2.2"
+
+alphanum-sort@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/alphanum-sort/-/alphanum-sort-1.0.2.tgz#97a1119649b211ad33691d9f9f486a8ec9fbe0a3"
+  integrity sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=
+
+ansi-colors@^3.0.0:
+  version "3.2.4"
+  resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-3.2.4.tgz#e3a3da4bfbae6c86a9c285625de124a234026fbf"
+  integrity sha512-hHUXGagefjN2iRrID63xckIvotOXOojhQKWIPUZ4mNUZ9nLZW+7FMNoE1lOkEhNWYsx/7ysGIuJYCiMAA9FnrA==
+
+ansi-escapes@^3.0.0, ansi-escapes@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-3.2.0.tgz#8780b98ff9dbf5638152d1f1fe5c1d7b4442976b"
+  integrity sha512-cBhpre4ma+U0T1oM5fXg7Dy1Jw7zzwv7lt/GoCpr+hDQJoYnKVPLL4dCvSEFMmQurOQvSrwT7SL/DAlhBI97RQ==
+
+ansi-escapes@^4.2.1:
+  version "4.3.2"
+  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-4.3.2.tgz#6b2291d1db7d98b6521d5f1efa42d0f3a9feb65e"
+  integrity sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==
+  dependencies:
+    type-fest "^0.21.3"
+
+ansi-html-community@0.0.8:
+  version "0.0.8"
+  resolved "https://registry.yarnpkg.com/ansi-html-community/-/ansi-html-community-0.0.8.tgz#69fbc4d6ccbe383f9736934ae34c3f8290f1bf41"
+  integrity sha512-1APHAyr3+PCamwNw3bXCPp4HFLONZt/yIH0sZp0/469KWNTEy+qN5jQ3GVX6DMZ1UXAi34yVwtTeaG/HpBuuzw==
+
+ansi-regex@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-2.1.1.tgz#c3b33ab5ee360d86e0e628f0468ae7ef27d654df"
+  integrity sha1-w7M6te42DYbg5ijwRorn7yfWVN8=
+
+ansi-regex@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-3.0.0.tgz#ed0317c322064f79466c02966bddb605ab37d998"
+  integrity sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=
+
+ansi-regex@^4.0.0, ansi-regex@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-4.1.0.tgz#8b9f8f08cf1acb843756a839ca8c7e3168c51997"
+  integrity sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==
+
+ansi-regex@^5.0.0, ansi-regex@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.1.tgz#082cb2c89c9fe8659a311a53bd6a4dc5301db304"
+  integrity sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==
+
+ansi-styles@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe"
+  integrity sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=
+
+ansi-styles@^3.2.0, ansi-styles@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d"
+  integrity sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==
+  dependencies:
+    color-convert "^1.9.0"
+
+ansi-styles@^4.0.0, ansi-styles@^4.1.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-4.3.0.tgz#edd803628ae71c04c85ae7a0906edad34b648937"
+  integrity sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==
+  dependencies:
+    color-convert "^2.0.1"
+
+anymatch@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-2.0.0.tgz#bcb24b4f37934d9aa7ac17b4adaf89e7c76ef2eb"
+  integrity sha512-5teOsQWABXHHBFP9y3skS5P3d/WfWXpv3FUpy+LorMrNYaT9pI4oLMQX7jzQ2KklNpGpWHzdCXTDT2Y3XGlZBw==
+  dependencies:
+    micromatch "^3.1.4"
+    normalize-path "^2.1.1"
+
+anymatch@~3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.2.tgz#c0557c096af32f106198f4f4e2a383537e378716"
+  integrity sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==
+  dependencies:
+    normalize-path "^3.0.0"
+    picomatch "^2.0.4"
+
+aproba@^1.1.1:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.2.0.tgz#6802e6264efd18c790a1b0d517f0f2627bf2c94a"
+  integrity sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==
+
+argparse@^1.0.7:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
+  integrity sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==
+  dependencies:
+    sprintf-js "~1.0.2"
+
+aria-query@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-3.0.0.tgz#65b3fcc1ca1155a8c9ae64d6eee297f15d5133cc"
+  integrity sha1-ZbP8wcoRVajJrmTW7uKX8V1RM8w=
+  dependencies:
+    ast-types-flow "0.0.7"
+    commander "^2.11.0"
+
+arity-n@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/arity-n/-/arity-n-1.0.4.tgz#d9e76b11733e08569c0847ae7b39b2860b30b745"
+  integrity sha1-2edrEXM+CFacCEeuezmyhgswt0U=
+
+arr-diff@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-4.0.0.tgz#d6461074febfec71e7e15235761a329a5dc7c520"
+  integrity sha1-1kYQdP6/7HHn4VI1dhoyml3HxSA=
+
+arr-flatten@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/arr-flatten/-/arr-flatten-1.1.0.tgz#36048bbff4e7b47e136644316c99669ea5ae91f1"
+  integrity sha512-L3hKV5R/p5o81R7O02IGnwpDmkp6E982XhtbuwSe3O4qOtMMMtodicASA1Cny2U+aCXcNpml+m4dPsvsJ3jatg==
+
+arr-union@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/arr-union/-/arr-union-3.1.0.tgz#e39b09aea9def866a8f206e288af63919bae39c4"
+  integrity sha1-45sJrqne+Gao8gbiiK9jkZuuOcQ=
+
+array-equal@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/array-equal/-/array-equal-1.0.0.tgz#8c2a5ef2472fd9ea742b04c77a75093ba2757c93"
+  integrity sha1-jCpe8kcv2ep0KwTHenUJO6J1fJM=
+
+array-flatten@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-1.1.1.tgz#9a5f699051b1e7073328f2a008968b64ea2955d2"
+  integrity sha1-ml9pkFGx5wczKPKgCJaLZOopVdI=
+
+array-flatten@^2.1.0:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-2.1.2.tgz#24ef80a28c1a893617e2149b0c6d0d788293b099"
+  integrity sha512-hNfzcOV8W4NdualtqBFPyVO+54DSJuZGY9qT4pRroB6S9e3iiido2ISIC5h9R2sPJ8H3FHCIiEnsv1lPXO3KtQ==
+
+array-includes@^3.0.3, array-includes@^3.1.1, array-includes@^3.1.3, array-includes@^3.1.4:
+  version "3.1.4"
+  resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.1.4.tgz#f5b493162c760f3539631f005ba2bb46acb45ba9"
+  integrity sha512-ZTNSQkmWumEbiHO2GF4GmWxYVTiQyJy2XOTa15sdQSrvKn7l+180egQMqlrMOUMCyLMD7pmyQe4mMDUT6Behrw==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.3"
+    es-abstract "^1.19.1"
+    get-intrinsic "^1.1.1"
+    is-string "^1.0.7"
+
+array-union@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/array-union/-/array-union-1.0.2.tgz#9a34410e4f4e3da23dea375be5be70f24778ec39"
+  integrity sha1-mjRBDk9OPaI96jdb5b5w8kd47Dk=
+  dependencies:
+    array-uniq "^1.0.1"
+
+array-uniq@^1.0.1:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/array-uniq/-/array-uniq-1.0.3.tgz#af6ac877a25cc7f74e058894753858dfdb24fdb6"
+  integrity sha1-r2rId6Jcx/dOBYiUdThY39sk/bY=
+
+array-unique@^0.3.2:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.3.2.tgz#a894b75d4bc4f6cd679ef3244a9fd8f46ae2d428"
+  integrity sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=
+
+array.prototype.flatmap@^1.2.5:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/array.prototype.flatmap/-/array.prototype.flatmap-1.2.5.tgz#908dc82d8a406930fdf38598d51e7411d18d4446"
+  integrity sha512-08u6rVyi1Lj7oqWbS9nUxliETrtIROT4XGTA4D/LWGten6E3ocm7cy9SIrmNHOL5XVbVuckUp3X6Xyg8/zpvHA==
+  dependencies:
+    call-bind "^1.0.0"
+    define-properties "^1.1.3"
+    es-abstract "^1.19.0"
+
+arrify@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"
+  integrity sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=
+
+artplayer@^4.3.4:
+  version "4.3.4"
+  resolved "https://registry.yarnpkg.com/artplayer/-/artplayer-4.3.4.tgz#ea578552530258d71f231b207c8e32c1248a3b47"
+  integrity sha512-Ma60cC1n4G/CFPo8zOGglRU1u/OFnJGp1hJ4fe5rWIFFsCDx3D6OvfBZDMlkRreHQt8DBW0BF/oGGM6Rq0nv1g==
+  dependencies:
+    option-validator "^2.0.6"
+    screenfull "^6.0.1"
+
+asap@^2.0.6, asap@~2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
+  integrity sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=
+
+asn1.js@^5.2.0:
+  version "5.4.1"
+  resolved "https://registry.yarnpkg.com/asn1.js/-/asn1.js-5.4.1.tgz#11a980b84ebb91781ce35b0fdc2ee294e3783f07"
+  integrity sha512-+I//4cYPccV8LdmBLiX8CYvf9Sp3vQsrqu2QNXRcrbiWvcx/UdlFiqUJJzxRQxgsZmvhXhn4cSKeSmoFjVdupA==
+  dependencies:
+    bn.js "^4.0.0"
+    inherits "^2.0.1"
+    minimalistic-assert "^1.0.0"
+    safer-buffer "^2.1.0"
+
+asn1@~0.2.3:
+  version "0.2.6"
+  resolved "https://registry.yarnpkg.com/asn1/-/asn1-0.2.6.tgz#0d3a7bb6e64e02a90c0303b31f292868ea09a08d"
+  integrity sha512-ix/FxPn0MDjeyJ7i/yoHGFt/EX6LyNbxSEhPPXODPL+KB0VPk86UYfL0lMdy+KCnv+fmvIzySwaK5COwqVbWTQ==
+  dependencies:
+    safer-buffer "~2.1.0"
+
+assert-plus@1.0.0, assert-plus@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/assert-plus/-/assert-plus-1.0.0.tgz#f12e0f3c5d77b0b1cdd9146942e4e96c1e4dd525"
+  integrity sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=
+
+assert@1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/assert/-/assert-1.4.1.tgz#99912d591836b5a6f5b345c0f07eefc08fc65d91"
+  integrity sha1-mZEtWRg2tab1s0XA8H7vwI/GXZE=
+  dependencies:
+    util "0.10.3"
+
+assert@^1.1.1:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/assert/-/assert-1.5.0.tgz#55c109aaf6e0aefdb3dc4b71240c70bf574b18eb"
+  integrity sha512-EDsgawzwoun2CZkCgtxJbv392v4nbk9XDD06zI+kQYoBM/3RBWLlEyJARDOmhAAosBjWACEkKL6S+lIZtcAubA==
+  dependencies:
+    object-assign "^4.1.1"
+    util "0.10.3"
+
+assign-symbols@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/assign-symbols/-/assign-symbols-1.0.0.tgz#59667f41fadd4f20ccbc2bb96b8d4f7f78ec0367"
+  integrity sha1-WWZ/QfrdTyDMvCu5a41Pf3jsA2c=
+
+ast-types-flow@0.0.7, ast-types-flow@^0.0.7:
+  version "0.0.7"
+  resolved "https://registry.yarnpkg.com/ast-types-flow/-/ast-types-flow-0.0.7.tgz#f70b735c6bca1a5c9c22d982c3e39e7feba3bdad"
+  integrity sha1-9wtzXGvKGlycItmCw+Oef+ujva0=
+
+astral-regex@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/astral-regex/-/astral-regex-1.0.0.tgz#6c8c3fb827dd43ee3918f27b82782ab7658a6fd9"
+  integrity sha512-+Ryf6g3BKoRc7jfp7ad8tM4TtMiaWvbF/1/sQcZPkkS7ag3D5nMBCe2UfOTONtAkaG0tO0ij3C5Lwmf1EiyjHg==
+
+async-each@^1.0.1:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.3.tgz#b727dbf87d7651602f06f4d4ac387f47d91b0cbf"
+  integrity sha512-z/WhQ5FPySLdvREByI2vZiTWwCnF0moMJ1hK9YQwDTHKh6I7/uSckMetoRGb5UBZPC1z0jlw+n/XCgjeH7y1AQ==
+
+async-limiter@~1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/async-limiter/-/async-limiter-1.0.1.tgz#dd379e94f0db8310b08291f9d64c3209766617fd"
+  integrity sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==
+
+async@^2.6.2:
+  version "2.6.3"
+  resolved "https://registry.yarnpkg.com/async/-/async-2.6.3.tgz#d72625e2344a3656e3a3ad4fa749fa83299d82ff"
+  integrity sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==
+  dependencies:
+    lodash "^4.17.14"
+
+asynckit@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
+  integrity sha1-x57Zf380y48robyXkLzDZkdLS3k=
+
+atob@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
+  integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
+
+autoprefixer@^9.6.1:
+  version "9.8.8"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-9.8.8.tgz#fd4bd4595385fa6f06599de749a4d5f7a474957a"
+  integrity sha512-eM9d/swFopRt5gdJ7jrpCwgvEMIayITpojhkkSMRsFHYuH5bkSQ4p/9qTEHtmNudUZh22Tehu7I6CxAW0IXTKA==
+  dependencies:
+    browserslist "^4.12.0"
+    caniuse-lite "^1.0.30001109"
+    normalize-range "^0.1.2"
+    num2fraction "^1.2.2"
+    picocolors "^0.2.1"
+    postcss "^7.0.32"
+    postcss-value-parser "^4.1.0"
+
+aws-sign2@~0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.7.0.tgz#b46e890934a9591f2d2f6f86d7e6a9f1b3fe76a8"
+  integrity sha1-tG6JCTSpWR8tL2+G1+ap8bP+dqg=
+
+aws4@^1.8.0:
+  version "1.11.0"
+  resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.11.0.tgz#d61f46d83b2519250e2784daf5b09479a8b41c59"
+  integrity sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==
+
+axios@^0.21.1:
+  version "0.21.4"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.21.4.tgz#c67b90dc0568e5c1cf2b0b858c43ba28e2eda575"
+  integrity sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==
+  dependencies:
+    follow-redirects "^1.14.0"
+
+axobject-query@^2.0.2:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-2.2.0.tgz#943d47e10c0b704aa42275e20edf3722648989be"
+  integrity sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA==
+
+babel-code-frame@^6.22.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.26.0.tgz#63fd43f7dc1e3bb7ce35947db8fe369a3f58c74b"
+  integrity sha1-Y/1D99weO7fONZR9uP42mj9Yx0s=
+  dependencies:
+    chalk "^1.1.3"
+    esutils "^2.0.2"
+    js-tokens "^3.0.2"
+
+babel-eslint@10.0.3:
+  version "10.0.3"
+  resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-10.0.3.tgz#81a2c669be0f205e19462fed2482d33e4687a88a"
+  integrity sha512-z3U7eMY6r/3f3/JB9mTsLjyxrv0Yb1zb8PCWCLpguxfCzBIZUwy23R1t/XKewP+8mEN2Ck8Dtr4q20z6ce6SoA==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    "@babel/parser" "^7.0.0"
+    "@babel/traverse" "^7.0.0"
+    "@babel/types" "^7.0.0"
+    eslint-visitor-keys "^1.0.0"
+    resolve "^1.12.0"
+
+babel-extract-comments@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/babel-extract-comments/-/babel-extract-comments-1.0.0.tgz#0a2aedf81417ed391b85e18b4614e693a0351a21"
+  integrity sha512-qWWzi4TlddohA91bFwgt6zO/J0X+io7Qp184Fw0m2JYRSTZnJbFR8+07KmzudHCZgOiKRCrjhylwv9Xd8gfhVQ==
+  dependencies:
+    babylon "^6.18.0"
+
+babel-jest@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-24.9.0.tgz#3fc327cb8467b89d14d7bc70e315104a783ccd54"
+  integrity sha512-ntuddfyiN+EhMw58PTNL1ph4C9rECiQXjI4nMMBKBaNjXvqLdkXpPRcMSr4iyBrJg/+wz9brFUD6RhOAT6r4Iw==
+  dependencies:
+    "@jest/transform" "^24.9.0"
+    "@jest/types" "^24.9.0"
+    "@types/babel__core" "^7.1.0"
+    babel-plugin-istanbul "^5.1.0"
+    babel-preset-jest "^24.9.0"
+    chalk "^2.4.2"
+    slash "^2.0.0"
+
+babel-loader@8.0.6:
+  version "8.0.6"
+  resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.0.6.tgz#e33bdb6f362b03f4bb141a0c21ab87c501b70dfb"
+  integrity sha512-4BmWKtBOBm13uoUwd08UwjZlaw3O9GWf456R9j+5YykFZ6LUIjIKLc0zEZf+hauxPOJs96C8k6FvYD09vWzhYw==
+  dependencies:
+    find-cache-dir "^2.0.0"
+    loader-utils "^1.0.2"
+    mkdirp "^0.5.1"
+    pify "^4.0.1"
+
+babel-plugin-dynamic-import-node@^2.3.3:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz#84fda19c976ec5c6defef57f9427b3def66e17a3"
+  integrity sha512-jZVI+s9Zg3IqA/kdi0i6UDCybUI3aSBLnglhYbSSjKlV7yF1F/5LWv8MakQmvYpnbJDS6fcBL2KzHSxNCMtWSQ==
+  dependencies:
+    object.assign "^4.1.0"
+
+babel-plugin-istanbul@^5.1.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-5.2.0.tgz#df4ade83d897a92df069c4d9a25cf2671293c854"
+  integrity sha512-5LphC0USA8t4i1zCtjbbNb6jJj/9+X6P37Qfirc/70EQ34xKlMW+a1RHGwxGI+SwWpNwZ27HqvzAobeqaXwiZw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    find-up "^3.0.0"
+    istanbul-lib-instrument "^3.3.0"
+    test-exclude "^5.2.3"
+
+babel-plugin-jest-hoist@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-24.9.0.tgz#4f837091eb407e01447c8843cbec546d0002d756"
+  integrity sha512-2EMA2P8Vp7lG0RAzr4HXqtYwacfMErOuv1U3wrvxHX6rD1sV6xS3WXG3r8TRQ2r6w8OhvSdWt+z41hQNwNm3Xw==
+  dependencies:
+    "@types/babel__traverse" "^7.0.6"
+
+babel-plugin-macros@2.8.0:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz#0f958a7cc6556b1e65344465d99111a1e5e10138"
+  integrity sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==
+  dependencies:
+    "@babel/runtime" "^7.7.2"
+    cosmiconfig "^6.0.0"
+    resolve "^1.12.0"
+
+babel-plugin-named-asset-import@^0.3.4:
+  version "0.3.8"
+  resolved "https://registry.yarnpkg.com/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.3.8.tgz#6b7fa43c59229685368683c28bc9734f24524cc2"
+  integrity sha512-WXiAc++qo7XcJ1ZnTYGtLxmBCVbddAml3CEXgWaBzNzLNoxtQ8AiGEFDMOhot9XjTCQbvP5E77Fj9Gk924f00Q==
+
+babel-plugin-polyfill-corejs2@^0.3.0:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.3.1.tgz#440f1b70ccfaabc6b676d196239b138f8a2cfba5"
+  integrity sha512-v7/T6EQcNfVLfcN2X8Lulb7DjprieyLWJK/zOWH5DUYcAgex9sP3h25Q+DLsX9TloXe3y1O8l2q2Jv9q8UVB9w==
+  dependencies:
+    "@babel/compat-data" "^7.13.11"
+    "@babel/helper-define-polyfill-provider" "^0.3.1"
+    semver "^6.1.1"
+
+babel-plugin-polyfill-corejs3@^0.5.0:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.5.2.tgz#aabe4b2fa04a6e038b688c5e55d44e78cd3a5f72"
+  integrity sha512-G3uJih0XWiID451fpeFaYGVuxHEjzKTHtc9uGFEjR6hHrvNzeS/PX+LLLcetJcytsB5m4j+K3o/EpXJNb/5IEQ==
+  dependencies:
+    "@babel/helper-define-polyfill-provider" "^0.3.1"
+    core-js-compat "^3.21.0"
+
+babel-plugin-polyfill-regenerator@^0.3.0:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.3.1.tgz#2c0678ea47c75c8cc2fbb1852278d8fb68233990"
+  integrity sha512-Y2B06tvgHYt1x0yz17jGkGeeMr5FeKUu+ASJ+N6nB5lQ8Dapfg42i0OVrf8PNGJ3zKL4A23snMi1IRwrqqND7A==
+  dependencies:
+    "@babel/helper-define-polyfill-provider" "^0.3.1"
+
+"babel-plugin-styled-components@>= 1.12.0":
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-2.0.7.tgz#c81ef34b713f9da2b7d3f5550df0d1e19e798086"
+  integrity sha512-i7YhvPgVqRKfoQ66toiZ06jPNA3p6ierpfUuEWxNF+fV27Uv5gxBkf8KZLHUCc1nFA9j6+80pYoIpqCeyW3/bA==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.16.0"
+    "@babel/helper-module-imports" "^7.16.0"
+    babel-plugin-syntax-jsx "^6.18.0"
+    lodash "^4.17.11"
+    picomatch "^2.3.0"
+
+babel-plugin-syntax-jsx@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
+  integrity sha512-qrPaCSo9c8RHNRHIotaufGbuOBN8rtdC4QrrFFc43vyWCCz7Kl7GL1PGaXtMGQZUXrkCjNEgxDfmAuAabr/rlw==
+
+babel-plugin-syntax-object-rest-spread@^6.8.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz#fd6536f2bce13836ffa3a5458c4903a597bb3bf5"
+  integrity sha1-/WU28rzhODb/o6VFjEkDpZe7O/U=
+
+babel-plugin-transform-object-rest-spread@^6.26.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-object-rest-spread/-/babel-plugin-transform-object-rest-spread-6.26.0.tgz#0f36692d50fef6b7e2d4b3ac1478137a963b7b06"
+  integrity sha1-DzZpLVD+9rfi1LOsFHgTepY7ewY=
+  dependencies:
+    babel-plugin-syntax-object-rest-spread "^6.8.0"
+    babel-runtime "^6.26.0"
+
+babel-plugin-transform-react-remove-prop-types@0.4.24:
+  version "0.4.24"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-remove-prop-types/-/babel-plugin-transform-react-remove-prop-types-0.4.24.tgz#f2edaf9b4c6a5fbe5c1d678bfb531078c1555f3a"
+  integrity sha512-eqj0hVcJUR57/Ug2zE1Yswsw4LhuqqHhD+8v120T1cl3kjg76QwtyBrdIk4WVwK+lAhBJVYCd/v+4nc4y+8JsA==
+
+babel-preset-jest@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/babel-preset-jest/-/babel-preset-jest-24.9.0.tgz#192b521e2217fb1d1f67cf73f70c336650ad3cdc"
+  integrity sha512-izTUuhE4TMfTRPF92fFwD2QfdXaZW08qvWTFCI51V8rW5x00UuPgc3ajRoWofXOuxjfcOM5zzSYsQS3H8KGCAg==
+  dependencies:
+    "@babel/plugin-syntax-object-rest-spread" "^7.0.0"
+    babel-plugin-jest-hoist "^24.9.0"
+
+babel-preset-react-app@^9.0.2:
+  version "9.1.2"
+  resolved "https://registry.yarnpkg.com/babel-preset-react-app/-/babel-preset-react-app-9.1.2.tgz#54775d976588a8a6d1a99201a702befecaf48030"
+  integrity sha512-k58RtQOKH21NyKtzptoAvtAODuAJJs3ZhqBMl456/GnXEQ/0La92pNmwgWoMn5pBTrsvk3YYXdY7zpY4e3UIxA==
+  dependencies:
+    "@babel/core" "7.9.0"
+    "@babel/plugin-proposal-class-properties" "7.8.3"
+    "@babel/plugin-proposal-decorators" "7.8.3"
+    "@babel/plugin-proposal-nullish-coalescing-operator" "7.8.3"
+    "@babel/plugin-proposal-numeric-separator" "7.8.3"
+    "@babel/plugin-proposal-optional-chaining" "7.9.0"
+    "@babel/plugin-transform-flow-strip-types" "7.9.0"
+    "@babel/plugin-transform-react-display-name" "7.8.3"
+    "@babel/plugin-transform-runtime" "7.9.0"
+    "@babel/preset-env" "7.9.0"
+    "@babel/preset-react" "7.9.1"
+    "@babel/preset-typescript" "7.9.0"
+    "@babel/runtime" "7.9.0"
+    babel-plugin-macros "2.8.0"
+    babel-plugin-transform-react-remove-prop-types "0.4.24"
+
+babel-runtime@^6.26.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
+  integrity sha1-llxwWGaOgrVde/4E/yM3vItWR/4=
+  dependencies:
+    core-js "^2.4.0"
+    regenerator-runtime "^0.11.0"
+
+babylon@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.18.0.tgz#af2f3b88fa6f5c1e4c634d1a0f8eac4f55b395e3"
+  integrity sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ==
+
+balanced-match@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
+  integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
+
+base64-js@^1.0.2:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a"
+  integrity sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==
+
+base@^0.11.1:
+  version "0.11.2"
+  resolved "https://registry.yarnpkg.com/base/-/base-0.11.2.tgz#7bde5ced145b6d551a90db87f83c558b4eb48a8f"
+  integrity sha512-5T6P4xPgpp0YDFvSWwEZ4NoE3aM4QBQXDzmVbraCkFj8zHM+mba8SyqB5DbZWyR7mYHo6Y7BdQo3MoA4m0TeQg==
+  dependencies:
+    cache-base "^1.0.1"
+    class-utils "^0.3.5"
+    component-emitter "^1.2.1"
+    define-property "^1.0.0"
+    isobject "^3.0.1"
+    mixin-deep "^1.2.0"
+    pascalcase "^0.1.1"
+
+batch@0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/batch/-/batch-0.6.1.tgz#dc34314f4e679318093fc760272525f94bf25c16"
+  integrity sha1-3DQxT05nkxgJP8dgJyUl+UvyXBY=
+
+bcrypt-pbkdf@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz#a4301d389b6a43f9b67ff3ca11a3f6637e360e9e"
+  integrity sha1-pDAdOJtqQ/m2f/PKEaP2Y342Dp4=
+  dependencies:
+    tweetnacl "^0.14.3"
+
+big.js@^5.2.2:
+  version "5.2.2"
+  resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328"
+  integrity sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==
+
+binary-extensions@^1.0.0:
+  version "1.13.1"
+  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.13.1.tgz#598afe54755b2868a5330d2aff9d4ebb53209b65"
+  integrity sha512-Un7MIEDdUC5gNpcGDV97op1Ywk748MpHcFTHoYs6qnj1Z3j7I53VG3nwZhKzoBZmbdRNnb6WRdFlwl7tSDuZGw==
+
+binary-extensions@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d"
+  integrity sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==
+
+bindings@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/bindings/-/bindings-1.5.0.tgz#10353c9e945334bc0511a6d90b38fbc7c9c504df"
+  integrity sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==
+  dependencies:
+    file-uri-to-path "1.0.0"
+
+bluebird@^3.5.5:
+  version "3.7.2"
+  resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f"
+  integrity sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==
+
+bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.11.9:
+  version "4.12.0"
+  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.12.0.tgz#775b3f278efbb9718eec7361f483fb36fbbfea88"
+  integrity sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==
+
+bn.js@^5.0.0, bn.js@^5.1.1:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-5.2.0.tgz#358860674396c6997771a9d051fcc1b57d4ae002"
+  integrity sha512-D7iWRBvnZE8ecXiLj/9wbxH7Tk79fAh8IHaTNq1RWRixsS02W+5qS+iE9yq6RYl0asXx5tw0bLhmT5pIfbSquw==
+
+body-parser@1.19.2:
+  version "1.19.2"
+  resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.19.2.tgz#4714ccd9c157d44797b8b5607d72c0b89952f26e"
+  integrity sha512-SAAwOxgoCKMGs9uUAUFHygfLAyaniaoun6I8mFY9pRAJL9+Kec34aU+oIjDhTycub1jozEfEwx1W1IuOYxVSFw==
+  dependencies:
+    bytes "3.1.2"
+    content-type "~1.0.4"
+    debug "2.6.9"
+    depd "~1.1.2"
+    http-errors "1.8.1"
+    iconv-lite "0.4.24"
+    on-finished "~2.3.0"
+    qs "6.9.7"
+    raw-body "2.4.3"
+    type-is "~1.6.18"
+
+bonjour@^3.5.0:
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/bonjour/-/bonjour-3.5.0.tgz#8e890a183d8ee9a2393b3844c691a42bcf7bc9f5"
+  integrity sha1-jokKGD2O6aI5OzhExpGkK897yfU=
+  dependencies:
+    array-flatten "^2.1.0"
+    deep-equal "^1.0.1"
+    dns-equal "^1.0.0"
+    dns-txt "^2.0.2"
+    multicast-dns "^6.0.1"
+    multicast-dns-service-types "^1.1.0"
+
+boolbase@^1.0.0, boolbase@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
+  integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24=
+
+brace-expansion@^1.1.7:
+  version "1.1.11"
+  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
+  integrity sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==
+  dependencies:
+    balanced-match "^1.0.0"
+    concat-map "0.0.1"
+
+braces@^2.3.1, braces@^2.3.2:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-2.3.2.tgz#5979fd3f14cd531565e5fa2df1abfff1dfaee729"
+  integrity sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==
+  dependencies:
+    arr-flatten "^1.1.0"
+    array-unique "^0.3.2"
+    extend-shallow "^2.0.1"
+    fill-range "^4.0.0"
+    isobject "^3.0.1"
+    repeat-element "^1.1.2"
+    snapdragon "^0.8.1"
+    snapdragon-node "^2.0.1"
+    split-string "^3.0.2"
+    to-regex "^3.0.1"
+
+braces@^3.0.1, braces@~3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
+  integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
+  dependencies:
+    fill-range "^7.0.1"
+
+brorand@^1.0.1, brorand@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/brorand/-/brorand-1.1.0.tgz#12c25efe40a45e3c323eb8675a0a0ce57b22371f"
+  integrity sha1-EsJe/kCkXjwyPrhnWgoM5XsiNx8=
+
+browser-process-hrtime@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz#3c9b4b7d782c8121e56f10106d84c0d0ffc94626"
+  integrity sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow==
+
+browser-resolve@^1.11.3:
+  version "1.11.3"
+  resolved "https://registry.yarnpkg.com/browser-resolve/-/browser-resolve-1.11.3.tgz#9b7cbb3d0f510e4cb86bdbd796124d28b5890af6"
+  integrity sha512-exDi1BYWB/6raKHmDTCicQfTkqwN5fioMFV4j8BsfMU4R2DK/QfZfK7kOVkmWCNANf0snkBzqGqAJBao9gZMdQ==
+  dependencies:
+    resolve "1.1.7"
+
+browserify-aes@^1.0.0, browserify-aes@^1.0.4:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/browserify-aes/-/browserify-aes-1.2.0.tgz#326734642f403dabc3003209853bb70ad428ef48"
+  integrity sha512-+7CHXqGuspUn/Sl5aO7Ea0xWGAtETPXNSAjHo48JfLdPWcMng33Xe4znFvQweqc/uzk5zSOI3H52CYnjCfb5hA==
+  dependencies:
+    buffer-xor "^1.0.3"
+    cipher-base "^1.0.0"
+    create-hash "^1.1.0"
+    evp_bytestokey "^1.0.3"
+    inherits "^2.0.1"
+    safe-buffer "^5.0.1"
+
+browserify-cipher@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/browserify-cipher/-/browserify-cipher-1.0.1.tgz#8d6474c1b870bfdabcd3bcfcc1934a10e94f15f0"
+  integrity sha512-sPhkz0ARKbf4rRQt2hTpAHqn47X3llLkUGn+xEJzLjwY8LRs2p0v7ljvI5EyoRO/mexrNunNECisZs+gw2zz1w==
+  dependencies:
+    browserify-aes "^1.0.4"
+    browserify-des "^1.0.0"
+    evp_bytestokey "^1.0.0"
+
+browserify-des@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/browserify-des/-/browserify-des-1.0.2.tgz#3af4f1f59839403572f1c66204375f7a7f703e9c"
+  integrity sha512-BioO1xf3hFwz4kc6iBhI3ieDFompMhrMlnDFC4/0/vd5MokpuAc3R+LYbwTA9A5Yc9pq9UYPqffKpW2ObuwX5A==
+  dependencies:
+    cipher-base "^1.0.1"
+    des.js "^1.0.0"
+    inherits "^2.0.1"
+    safe-buffer "^5.1.2"
+
+browserify-rsa@^4.0.0, browserify-rsa@^4.0.1:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/browserify-rsa/-/browserify-rsa-4.1.0.tgz#b2fd06b5b75ae297f7ce2dc651f918f5be158c8d"
+  integrity sha512-AdEER0Hkspgno2aR97SAf6vi0y0k8NuOpGnVH3O99rcA5Q6sh8QxcngtHuJ6uXwnfAXNM4Gn1Gb7/MV1+Ymbog==
+  dependencies:
+    bn.js "^5.0.0"
+    randombytes "^2.0.1"
+
+browserify-sign@^4.0.0:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/browserify-sign/-/browserify-sign-4.2.1.tgz#eaf4add46dd54be3bb3b36c0cf15abbeba7956c3"
+  integrity sha512-/vrA5fguVAKKAVTNJjgSm1tRQDHUU6DbwO9IROu/0WAzC8PKhucDSh18J0RMvVeHAn5puMd+QHC2erPRNf8lmg==
+  dependencies:
+    bn.js "^5.1.1"
+    browserify-rsa "^4.0.1"
+    create-hash "^1.2.0"
+    create-hmac "^1.1.7"
+    elliptic "^6.5.3"
+    inherits "^2.0.4"
+    parse-asn1 "^5.1.5"
+    readable-stream "^3.6.0"
+    safe-buffer "^5.2.0"
+
+browserify-zlib@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/browserify-zlib/-/browserify-zlib-0.2.0.tgz#2869459d9aa3be245fe8fe2ca1f46e2e7f54d73f"
+  integrity sha512-Z942RysHXmJrhqk88FmKBVq/v5tqmSkDz7p54G/MGyjMnCFFnC79XWNbg+Vta8W6Wb2qtSZTSxIGkJrRpCFEiA==
+  dependencies:
+    pako "~1.0.5"
+
+browserslist@4.7.0:
+  version "4.7.0"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.7.0.tgz#9ee89225ffc07db03409f2fee524dc8227458a17"
+  integrity sha512-9rGNDtnj+HaahxiVV38Gn8n8Lr8REKsel68v1sPFfIGEK6uSXTY3h9acgiT1dZVtOOUtifo/Dn8daDQ5dUgVsA==
+  dependencies:
+    caniuse-lite "^1.0.30000989"
+    electron-to-chromium "^1.3.247"
+    node-releases "^1.1.29"
+
+browserslist@^4.0.0, browserslist@^4.1.1, browserslist@^4.12.0, browserslist@^4.17.5, browserslist@^4.19.1, browserslist@^4.6.4, browserslist@^4.9.1:
+  version "4.19.3"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.19.3.tgz#29b7caad327ecf2859485f696f9604214bedd383"
+  integrity sha512-XK3X4xtKJ+Txj8G5c30B4gsm71s69lqXlkYui4s6EkKxuv49qjYlY6oVd+IFJ73d4YymtM3+djvvt/R/iJwwDg==
+  dependencies:
+    caniuse-lite "^1.0.30001312"
+    electron-to-chromium "^1.4.71"
+    escalade "^3.1.1"
+    node-releases "^2.0.2"
+    picocolors "^1.0.0"
+
+bser@2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/bser/-/bser-2.1.1.tgz#e6787da20ece9d07998533cfd9de6f5c38f4bc05"
+  integrity sha512-gQxTNE/GAfIIrmHLUE3oJyp5FO6HRBfhjnw4/wMmA63ZGDJnWBmgY/lyQBpnDUkGmAhbSe39tx2d/iTOAfglwQ==
+  dependencies:
+    node-int64 "^0.4.0"
+
+buffer-from@^1.0.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.2.tgz#2b146a6fd72e80b4f55d255f35ed59a3a9a41bd5"
+  integrity sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==
+
+buffer-indexof@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/buffer-indexof/-/buffer-indexof-1.1.1.tgz#52fabcc6a606d1a00302802648ef68f639da268c"
+  integrity sha512-4/rOEg86jivtPTeOUUT61jJO1Ya1TrR/OkqCSZDyq84WJh3LuuiphBYJN+fm5xufIk4XAFcEwte/8WzC8If/1g==
+
+buffer-xor@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/buffer-xor/-/buffer-xor-1.0.3.tgz#26e61ed1422fb70dd42e6e36729ed51d855fe8d9"
+  integrity sha1-JuYe0UIvtw3ULm42cp7VHYVf6Nk=
+
+buffer@^4.3.0:
+  version "4.9.2"
+  resolved "https://registry.yarnpkg.com/buffer/-/buffer-4.9.2.tgz#230ead344002988644841ab0244af8c44bbe3ef8"
+  integrity sha512-xq+q3SRMOxGivLhBNaUdC64hDTQwejJ+H0T/NB1XMtTVEwNTrfFF3gAxiyW0Bu/xWEGhjVKgUcMhCrUy2+uCWg==
+  dependencies:
+    base64-js "^1.0.2"
+    ieee754 "^1.1.4"
+    isarray "^1.0.0"
+
+builtin-status-codes@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz#85982878e21b98e1c66425e03d0174788f569ee8"
+  integrity sha1-hZgoeOIbmOHGZCXgPQF0eI9Wnug=
+
+bytes@3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.0.0.tgz#d32815404d689699f85a4ea4fa8755dd13a96048"
+  integrity sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg=
+
+bytes@3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.1.2.tgz#8b0beeb98605adf1b128fa4386403c009e0221a5"
+  integrity sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==
+
+cacache@^12.0.2, cacache@^12.0.3:
+  version "12.0.4"
+  resolved "https://registry.yarnpkg.com/cacache/-/cacache-12.0.4.tgz#668bcbd105aeb5f1d92fe25570ec9525c8faa40c"
+  integrity sha512-a0tMB40oefvuInr4Cwb3GerbL9xTj1D5yg0T5xrjGCGyfvbxseIXX7BAO/u/hIXdafzOI5JC3wDwHyf24buOAQ==
+  dependencies:
+    bluebird "^3.5.5"
+    chownr "^1.1.1"
+    figgy-pudding "^3.5.1"
+    glob "^7.1.4"
+    graceful-fs "^4.1.15"
+    infer-owner "^1.0.3"
+    lru-cache "^5.1.1"
+    mississippi "^3.0.0"
+    mkdirp "^0.5.1"
+    move-concurrently "^1.0.1"
+    promise-inflight "^1.0.1"
+    rimraf "^2.6.3"
+    ssri "^6.0.1"
+    unique-filename "^1.1.1"
+    y18n "^4.0.0"
+
+cache-base@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/cache-base/-/cache-base-1.0.1.tgz#0a7f46416831c8b662ee36fe4e7c59d76f666ab2"
+  integrity sha512-AKcdTnFSWATd5/GCPRxr2ChwIJ85CeyrEyjRHlKxQ56d4XJMGym0uAiKn0xbLOGOl3+yRpOTi484dVCEc5AUzQ==
+  dependencies:
+    collection-visit "^1.0.0"
+    component-emitter "^1.2.1"
+    get-value "^2.0.6"
+    has-value "^1.0.0"
+    isobject "^3.0.1"
+    set-value "^2.0.0"
+    to-object-path "^0.3.0"
+    union-value "^1.0.0"
+    unset-value "^1.0.0"
+
+call-bind@^1.0.0, call-bind@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.2.tgz#b1d4e89e688119c3c9a903ad30abb2f6a919be3c"
+  integrity sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==
+  dependencies:
+    function-bind "^1.1.1"
+    get-intrinsic "^1.0.2"
+
+call-me-maybe@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/call-me-maybe/-/call-me-maybe-1.0.1.tgz#26d208ea89e37b5cbde60250a15f031c16a4d66b"
+  integrity sha1-JtII6onje1y95gJQoV8DHBak1ms=
+
+caller-callsite@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/caller-callsite/-/caller-callsite-2.0.0.tgz#847e0fce0a223750a9a027c54b33731ad3154134"
+  integrity sha1-hH4PzgoiN1CpoCfFSzNzGtMVQTQ=
+  dependencies:
+    callsites "^2.0.0"
+
+caller-path@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/caller-path/-/caller-path-2.0.0.tgz#468f83044e369ab2010fac5f06ceee15bb2cb1f4"
+  integrity sha1-Ro+DBE42mrIBD6xfBs7uFbsssfQ=
+  dependencies:
+    caller-callsite "^2.0.0"
+
+callsites@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/callsites/-/callsites-2.0.0.tgz#06eb84f00eea413da86affefacbffb36093b3c50"
+  integrity sha1-BuuE8A7qQT2oav/vrL/7Ngk7PFA=
+
+callsites@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
+  integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
+
+camel-case@3.0.x:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/camel-case/-/camel-case-3.0.0.tgz#ca3c3688a4e9cf3a4cda777dc4dcbc713249cf73"
+  integrity sha1-yjw2iKTpzzpM2nd9xNy8cTJJz3M=
+  dependencies:
+    no-case "^2.2.0"
+    upper-case "^1.1.1"
+
+camelcase@5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.0.0.tgz#03295527d58bd3cd4aa75363f35b2e8d97be2f42"
+  integrity sha512-faqwZqnWxbxn+F1d399ygeamQNy3lPp/H9H6rNrqYh4FSVCtcY+3cub1MxA8o9mDd55mM8Aghuu/kuyYA6VTsA==
+
+camelcase@^5.0.0, camelcase@^5.2.0, camelcase@^5.3.1:
+  version "5.3.1"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320"
+  integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==
+
+camelize@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/camelize/-/camelize-1.0.1.tgz#89b7e16884056331a35d6b5ad064332c91daa6c3"
+  integrity sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==
+
+caniuse-api@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-3.0.0.tgz#5e4d90e2274961d46291997df599e3ed008ee4c0"
+  integrity sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==
+  dependencies:
+    browserslist "^4.0.0"
+    caniuse-lite "^1.0.0"
+    lodash.memoize "^4.1.2"
+    lodash.uniq "^4.5.0"
+
+caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000981, caniuse-lite@^1.0.30000989, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001312:
+  version "1.0.30001312"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001312.tgz#e11eba4b87e24d22697dae05455d5aea28550d5f"
+  integrity sha512-Wiz1Psk2MEK0pX3rUzWaunLTZzqS2JYZFzNKqAiJGiuxIjRPLgV6+VDPOg6lQOUxmDwhTlh198JsTTi8Hzw6aQ==
+
+capture-exit@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/capture-exit/-/capture-exit-2.0.0.tgz#fb953bfaebeb781f62898239dabb426d08a509a4"
+  integrity sha512-PiT/hQmTonHhl/HFGN+Lx3JJUznrVYJ3+AQsnthneZbvW7x+f08Tk7yLJTLEOUvBTbduLeeBkxEaYXUOUrRq6g==
+  dependencies:
+    rsvp "^4.8.4"
+
+case-sensitive-paths-webpack-plugin@2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.2.0.tgz#3371ef6365ef9c25fa4b81c16ace0e9c7dc58c3e"
+  integrity sha512-u5ElzokS8A1pm9vM3/iDgTcI3xqHxuCao94Oz8etI3cf0Tio0p8izkDYbTIn09uP3yUUr6+veaE6IkjnTYS46g==
+
+caseless@~0.12.0:
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
+  integrity sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=
+
+chalk@2.4.2, chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.4.1, chalk@^2.4.2:
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
+  integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
+  dependencies:
+    ansi-styles "^3.2.1"
+    escape-string-regexp "^1.0.5"
+    supports-color "^5.3.0"
+
+chalk@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
+  integrity sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=
+  dependencies:
+    ansi-styles "^2.2.1"
+    escape-string-regexp "^1.0.2"
+    has-ansi "^2.0.0"
+    strip-ansi "^3.0.0"
+    supports-color "^2.0.0"
+
+chalk@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-3.0.0.tgz#3f73c2bf526591f574cc492c51e2456349f844e4"
+  integrity sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==
+  dependencies:
+    ansi-styles "^4.1.0"
+    supports-color "^7.1.0"
+
+chalk@^4.0.0, chalk@^4.1.0:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
+  integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
+  dependencies:
+    ansi-styles "^4.1.0"
+    supports-color "^7.1.0"
+
+chardet@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e"
+  integrity sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==
+
+chokidar@^2.0.4, chokidar@^2.1.8:
+  version "2.1.8"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.1.8.tgz#804b3a7b6a99358c3c5c61e71d8728f041cff917"
+  integrity sha512-ZmZUazfOzf0Nve7duiCKD23PFSCs4JPoYyccjUFF3aQkQadqBhfzhjkwBH2mNOG9cTBwhamM37EIsIkZw3nRgg==
+  dependencies:
+    anymatch "^2.0.0"
+    async-each "^1.0.1"
+    braces "^2.3.2"
+    glob-parent "^3.1.0"
+    inherits "^2.0.3"
+    is-binary-path "^1.0.0"
+    is-glob "^4.0.0"
+    normalize-path "^3.0.0"
+    path-is-absolute "^1.0.0"
+    readdirp "^2.2.1"
+    upath "^1.1.1"
+  optionalDependencies:
+    fsevents "^1.2.7"
+
+chokidar@^3.4.1:
+  version "3.5.3"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd"
+  integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==
+  dependencies:
+    anymatch "~3.1.2"
+    braces "~3.0.2"
+    glob-parent "~5.1.2"
+    is-binary-path "~2.1.0"
+    is-glob "~4.0.1"
+    normalize-path "~3.0.0"
+    readdirp "~3.6.0"
+  optionalDependencies:
+    fsevents "~2.3.2"
+
+chownr@^1.1.1:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.4.tgz#6fc9d7b42d32a583596337666e7d08084da2cc6b"
+  integrity sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==
+
+chrome-trace-event@^1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz#1015eced4741e15d06664a957dbbf50d041e26ac"
+  integrity sha512-p3KULyQg4S7NIHixdwbGX+nFHkoBiA4YQmyWtjb8XngSKV124nJmRysgAeujbUVb15vh+RvFUfCPqU7rXk+hZg==
+
+ci-info@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-2.0.0.tgz#67a9e964be31a51e15e5010d58e6f12834002f46"
+  integrity sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==
+
+cipher-base@^1.0.0, cipher-base@^1.0.1, cipher-base@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/cipher-base/-/cipher-base-1.0.4.tgz#8760e4ecc272f4c363532f926d874aae2c1397de"
+  integrity sha512-Kkht5ye6ZGmwv40uUDZztayT2ThLQGfnj/T71N/XzeZeo3nf8foyW7zGTsPYkEya3m5f3cAypH+qe7YOrM1U2Q==
+  dependencies:
+    inherits "^2.0.1"
+    safe-buffer "^5.0.1"
+
+class-utils@^0.3.5:
+  version "0.3.6"
+  resolved "https://registry.yarnpkg.com/class-utils/-/class-utils-0.3.6.tgz#f93369ae8b9a7ce02fd41faad0ca83033190c463"
+  integrity sha512-qOhPa/Fj7s6TY8H8esGu5QNpMMQxz79h+urzrNYN6mn+9BnxlDGf5QZ+XeCDsxSjPqsSR56XOZOJmpeurnLMeg==
+  dependencies:
+    arr-union "^3.1.0"
+    define-property "^0.2.5"
+    isobject "^3.0.0"
+    static-extend "^0.1.1"
+
+classnames@^2.2.5, classnames@^2.2.6:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
+  integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==
+
+clean-css@4.2.x:
+  version "4.2.4"
+  resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.4.tgz#733bf46eba4e607c6891ea57c24a989356831178"
+  integrity sha512-EJUDT7nDVFDvaQgAo2G/PJvxmp1o/c6iXLbswsBbUFXi1Nr+AjA2cKmfbKDMjMvzEe75g3P6JkaDDAKk96A85A==
+  dependencies:
+    source-map "~0.6.0"
+
+cli-cursor@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-2.1.0.tgz#b35dac376479facc3e94747d41d0d0f5238ffcb5"
+  integrity sha1-s12sN2R5+sw+lHR9QdDQ9SOP/LU=
+  dependencies:
+    restore-cursor "^2.0.0"
+
+cli-cursor@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-3.1.0.tgz#264305a7ae490d1d03bf0c9ba7c925d1753af307"
+  integrity sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==
+  dependencies:
+    restore-cursor "^3.1.0"
+
+cli-width@^2.0.0:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-2.2.1.tgz#b0433d0b4e9c847ef18868a4ef16fd5fc8271c48"
+  integrity sha512-GRMWDxpOB6Dgk2E5Uo+3eEBvtOOlimMmpbFiKuLFnQzYDavtLFY3K5ona41jgN/WdRZtG7utuVSVTL4HbZHGkw==
+
+cli-width@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-3.0.0.tgz#a2f48437a2caa9a22436e794bf071ec9e61cedf6"
+  integrity sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw==
+
+cliui@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/cliui/-/cliui-5.0.0.tgz#deefcfdb2e800784aa34f46fa08e06851c7bbbc5"
+  integrity sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA==
+  dependencies:
+    string-width "^3.1.0"
+    strip-ansi "^5.2.0"
+    wrap-ansi "^5.1.0"
+
+clone-deep@^0.2.4:
+  version "0.2.4"
+  resolved "https://registry.yarnpkg.com/clone-deep/-/clone-deep-0.2.4.tgz#4e73dd09e9fb971cc38670c5dced9c1896481cc6"
+  integrity sha1-TnPdCen7lxzDhnDF3O2cGJZIHMY=
+  dependencies:
+    for-own "^0.1.3"
+    is-plain-object "^2.0.1"
+    kind-of "^3.0.2"
+    lazy-cache "^1.0.3"
+    shallow-clone "^0.1.2"
+
+clone-deep@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/clone-deep/-/clone-deep-4.0.1.tgz#c19fd9bdbbf85942b4fd979c84dcf7d5f07c2387"
+  integrity sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ==
+  dependencies:
+    is-plain-object "^2.0.4"
+    kind-of "^6.0.2"
+    shallow-clone "^3.0.0"
+
+clsx@^1.0.4, clsx@latest:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188"
+  integrity sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==
+
+co@^4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
+  integrity sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ=
+
+coa@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/coa/-/coa-2.0.2.tgz#43f6c21151b4ef2bf57187db0d73de229e3e7ec3"
+  integrity sha512-q5/jG+YQnSy4nRTV4F7lPepBJZ8qBNJJDBuJdoejDyLXgmL7IEo+Le2JDZudFTFt7mrCqIRaSjws4ygRCTCAXA==
+  dependencies:
+    "@types/q" "^1.5.1"
+    chalk "^2.4.1"
+    q "^1.1.2"
+
+collection-visit@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/collection-visit/-/collection-visit-1.0.0.tgz#4bc0373c164bc3291b4d368c829cf1a80a59dca0"
+  integrity sha1-S8A3PBZLwykbTTaMgpzxqApZ3KA=
+  dependencies:
+    map-visit "^1.0.0"
+    object-visit "^1.0.0"
+
+color-convert@^1.9.0, color-convert@^1.9.3:
+  version "1.9.3"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
+  integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
+  dependencies:
+    color-name "1.1.3"
+
+color-convert@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3"
+  integrity sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==
+  dependencies:
+    color-name "~1.1.4"
+
+color-name@1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
+  integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
+
+color-name@^1.0.0, color-name@~1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
+  integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
+
+color-string@^1.6.0:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.9.0.tgz#63b6ebd1bec11999d1df3a79a7569451ac2be8aa"
+  integrity sha512-9Mrz2AQLefkH1UvASKj6v6hj/7eWgjnT/cVsR8CumieLoT+g900exWeNogqtweI8dxloXN9BDQTYro1oWu/5CQ==
+  dependencies:
+    color-name "^1.0.0"
+    simple-swizzle "^0.2.2"
+
+color@^3.0.0:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/color/-/color-3.2.1.tgz#3544dc198caf4490c3ecc9a790b54fe9ff45e164"
+  integrity sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==
+  dependencies:
+    color-convert "^1.9.3"
+    color-string "^1.6.0"
+
+combined-stream@^1.0.6, combined-stream@~1.0.6:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
+  integrity sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==
+  dependencies:
+    delayed-stream "~1.0.0"
+
+commander@2.17.x:
+  version "2.17.1"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.17.1.tgz#bd77ab7de6de94205ceacc72f1716d29f20a77bf"
+  integrity sha512-wPMUt6FnH2yzG95SA6mzjQOEKUU3aLaDEmzs1ti+1E9h+CsrZghRlqEM/EJ4KscsQVG8uNN4uVreUeT8+drlgg==
+
+commander@^2.11.0, commander@^2.20.0:
+  version "2.20.3"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
+  integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
+
+commander@~2.19.0:
+  version "2.19.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.19.0.tgz#f6198aa84e5b83c46054b94ddedbfed5ee9ff12a"
+  integrity sha512-6tvAOO+D6OENvRAh524Dh9jcfKTYDQAqvqezbCW82xj5X0pSrcpxtvRKHLG0yBY6SD7PSDrJaj+0AiOcKVd1Xg==
+
+common-tags@^1.8.0:
+  version "1.8.2"
+  resolved "https://registry.yarnpkg.com/common-tags/-/common-tags-1.8.2.tgz#94ebb3c076d26032745fd54face7f688ef5ac9c6"
+  integrity sha512-gk/Z852D2Wtb//0I+kRFNKKE9dIIVirjoqPoA1wJU+XePVXZfGeBpk45+A1rKO4Q43prqWBNY/MiIeRLbPWUaA==
+
+commondir@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
+  integrity sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=
+
+compare-versions@^3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/compare-versions/-/compare-versions-3.6.0.tgz#1a5689913685e5a87637b8d3ffca75514ec41d62"
+  integrity sha512-W6Af2Iw1z4CB7q4uU4hv646dW9GQuBM+YpC0UvUCWSD8w90SJjp+ujJuXaEMtAXBtSqGfMPuFOVn4/+FlaqfBA==
+
+component-emitter@^1.2.1:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/component-emitter/-/component-emitter-1.3.0.tgz#16e4070fba8ae29b679f2215853ee181ab2eabc0"
+  integrity sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==
+
+compose-function@3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/compose-function/-/compose-function-3.0.3.tgz#9ed675f13cc54501d30950a486ff6a7ba3ab185f"
+  integrity sha1-ntZ18TzFRQHTCVCkhv9qe6OrGF8=
+  dependencies:
+    arity-n "^1.0.4"
+
+compressible@~2.0.16:
+  version "2.0.18"
+  resolved "https://registry.yarnpkg.com/compressible/-/compressible-2.0.18.tgz#af53cca6b070d4c3c0750fbd77286a6d7cc46fba"
+  integrity sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==
+  dependencies:
+    mime-db ">= 1.43.0 < 2"
+
+compression@^1.7.4:
+  version "1.7.4"
+  resolved "https://registry.yarnpkg.com/compression/-/compression-1.7.4.tgz#95523eff170ca57c29a0ca41e6fe131f41e5bb8f"
+  integrity sha512-jaSIDzP9pZVS4ZfQ+TzvtiWhdpFhE2RDHz8QJkpX9SIpLq88VueF5jJw6t+6CUQcAoA6t+x89MLrWAqpfDE8iQ==
+  dependencies:
+    accepts "~1.3.5"
+    bytes "3.0.0"
+    compressible "~2.0.16"
+    debug "2.6.9"
+    on-headers "~1.0.2"
+    safe-buffer "5.1.2"
+    vary "~1.1.2"
+
+concat-map@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
+  integrity sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=
+
+concat-stream@^1.5.0:
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.6.2.tgz#904bdf194cd3122fc675c77fc4ac3d4ff0fd1a34"
+  integrity sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==
+  dependencies:
+    buffer-from "^1.0.0"
+    inherits "^2.0.3"
+    readable-stream "^2.2.2"
+    typedarray "^0.0.6"
+
+confusing-browser-globals@^1.0.9:
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/confusing-browser-globals/-/confusing-browser-globals-1.0.11.tgz#ae40e9b57cdd3915408a2805ebd3a5585608dc81"
+  integrity sha512-JsPKdmh8ZkmnHxDk55FZ1TqVLvEQTvoByJZRN9jzI0UjxK/QgAmsphz7PGtqgPieQZ/CQcHWXCR7ATDNhGe+YA==
+
+connect-history-api-fallback@^1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/connect-history-api-fallback/-/connect-history-api-fallback-1.6.0.tgz#8b32089359308d111115d81cad3fceab888f97bc"
+  integrity sha512-e54B99q/OUoH64zYYRf3HBP5z24G38h5D3qXu23JGRoigpX5Ss4r9ZnDk3g0Z8uQC2x2lPaJ+UlWBc1ZWBWdLg==
+
+connected-react-router@^6.9.1:
+  version "6.9.2"
+  resolved "https://registry.yarnpkg.com/connected-react-router/-/connected-react-router-6.9.2.tgz#f89fa87f0e977fcabf17475fb4552e170cc7e48e"
+  integrity sha512-bE8kNBiZv9Mivp7pYn9JvLH5ItTjLl45kk1/Vha0rmAK9I/ETb5JPJrAm0h2KCG9qLfv7vqU3Jo4UUDo0oJnQg==
+  dependencies:
+    lodash.isequalwith "^4.4.0"
+    prop-types "^15.7.2"
+  optionalDependencies:
+    immutable "^3.8.1 || ^4.0.0"
+    seamless-immutable "^7.1.3"
+
+console-browserify@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/console-browserify/-/console-browserify-1.2.0.tgz#67063cef57ceb6cf4993a2ab3a55840ae8c49336"
+  integrity sha512-ZMkYO/LkF17QvCPqM0gxw8yUzigAOZOSWSHg91FH6orS7vcEj5dVZTidN2fQ14yBSdg97RqhSNwLUXInd52OTA==
+
+constants-browserify@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/constants-browserify/-/constants-browserify-1.0.0.tgz#c20b96d8c617748aaf1c16021760cd27fcb8cb75"
+  integrity sha1-wguW2MYXdIqvHBYCF2DNJ/y4y3U=
+
+contains-path@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/contains-path/-/contains-path-0.1.0.tgz#fe8cf184ff6670b6baef01a9d4861a5cbec4120a"
+  integrity sha1-/ozxhP9mcLa67wGp1IYaXL7EEgo=
+
+content-disposition@0.5.4:
+  version "0.5.4"
+  resolved "https://registry.yarnpkg.com/content-disposition/-/content-disposition-0.5.4.tgz#8b82b4efac82512a02bb0b1dcec9d2c5e8eb5bfe"
+  integrity sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==
+  dependencies:
+    safe-buffer "5.2.1"
+
+content-type@~1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.4.tgz#e138cc75e040c727b1966fe5e5f8c9aee256fe3b"
+  integrity sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==
+
+convert-source-map@1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.6.0.tgz#51b537a8c43e0f04dec1993bffcdd504e758ac20"
+  integrity sha512-eFu7XigvxdZ1ETfbgPBohgyQ/Z++C0eEhTor0qRwBw9unw+L0/6V8wkSuGgzdThkiS5lSpdptOQPD8Ak40a+7A==
+  dependencies:
+    safe-buffer "~5.1.1"
+
+convert-source-map@^0.3.3:
+  version "0.3.5"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-0.3.5.tgz#f1d802950af7dd2631a1febe0596550c86ab3190"
+  integrity sha1-8dgClQr33SYxof6+BZZVDIarMZA=
+
+convert-source-map@^1.1.0, convert-source-map@^1.4.0, convert-source-map@^1.7.0:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.8.0.tgz#f3373c32d21b4d780dd8004514684fb791ca4369"
+  integrity sha512-+OQdjP49zViI/6i7nIJpA8rAl4sV/JdPfU9nZs3VqOwGIgizICvuN2ru6fMd+4llL0tar18UYJXfZ/TWtmhUjA==
+  dependencies:
+    safe-buffer "~5.1.1"
+
+cookie-signature@1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/cookie-signature/-/cookie-signature-1.0.6.tgz#e303a882b342cc3ee8ca513a79999734dab3ae2c"
+  integrity sha1-4wOogrNCzD7oylE6eZmXNNqzriw=
+
+cookie@0.4.2:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.4.2.tgz#0e41f24de5ecf317947c82fc789e06a884824432"
+  integrity sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA==
+
+copy-concurrently@^1.0.0:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/copy-concurrently/-/copy-concurrently-1.0.5.tgz#92297398cae34937fcafd6ec8139c18051f0b5e0"
+  integrity sha512-f2domd9fsVDFtaFcbaRZuYXwtdmnzqbADSwhSWYxYB/Q8zsdUUFMXVRwXGDMWmbEzAn1kdRrtI1T/KTFOL4X2A==
+  dependencies:
+    aproba "^1.1.1"
+    fs-write-stream-atomic "^1.0.8"
+    iferr "^0.1.5"
+    mkdirp "^0.5.1"
+    rimraf "^2.5.4"
+    run-queue "^1.0.0"
+
+copy-descriptor@^0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
+  integrity sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=
+
+copy-webpack-plugin@^5.1.1:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/copy-webpack-plugin/-/copy-webpack-plugin-5.1.2.tgz#8a889e1dcafa6c91c6cd4be1ad158f1d3823bae2"
+  integrity sha512-Uh7crJAco3AjBvgAy9Z75CjK8IG+gxaErro71THQ+vv/bl4HaQcpkexAY8KVW/T6D2W2IRr+couF/knIRkZMIQ==
+  dependencies:
+    cacache "^12.0.3"
+    find-cache-dir "^2.1.0"
+    glob-parent "^3.1.0"
+    globby "^7.1.1"
+    is-glob "^4.0.1"
+    loader-utils "^1.2.3"
+    minimatch "^3.0.4"
+    normalize-path "^3.0.0"
+    p-limit "^2.2.1"
+    schema-utils "^1.0.0"
+    serialize-javascript "^4.0.0"
+    webpack-log "^2.0.0"
+
+core-js-compat@^3.20.2, core-js-compat@^3.21.0, core-js-compat@^3.6.2:
+  version "3.21.1"
+  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.21.1.tgz#cac369f67c8d134ff8f9bd1623e3bc2c42068c82"
+  integrity sha512-gbgX5AUvMb8gwxC7FLVWYT7Kkgu/y7+h/h1X43yJkNqhlK2fuYyQimqvKGNZFAY6CKii/GFKJ2cp/1/42TN36g==
+  dependencies:
+    browserslist "^4.19.1"
+    semver "7.0.0"
+
+core-js@^2.4.0:
+  version "2.6.12"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.12.tgz#d9333dfa7b065e347cc5682219d6f690859cc2ec"
+  integrity sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==
+
+core-js@^3.18.3:
+  version "3.22.2"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.22.2.tgz#3ea0a245b0895fa39d1faa15fe75d91ade504a01"
+  integrity sha512-Z5I2vzDnEIqO2YhELVMFcL1An2CIsFe9Q7byZhs8c/QxummxZlAHw33TUHbIte987LkisOgL0LwQ1P9D6VISnA==
+
+core-js@^3.5.0:
+  version "3.21.1"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.21.1.tgz#f2e0ddc1fc43da6f904706e8e955bc19d06a0d94"
+  integrity sha512-FRq5b/VMrWlrmCzwRrpDYNxyHP9BcAZC+xHJaqTgIE5091ZV1NTmyh0sGOg5XqpnHvR0svdy0sv1gWA1zmhxig==
+
+core-util-is@1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
+  integrity sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=
+
+core-util-is@~1.0.0:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.3.tgz#a6042d3634c2b27e9328f837b965fac83808db85"
+  integrity sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==
+
+cosmiconfig@^5.0.0, cosmiconfig@^5.2.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-5.2.1.tgz#040f726809c591e77a17c0a3626ca45b4f168b1a"
+  integrity sha512-H65gsXo1SKjf8zmrJ67eJk8aIRKV5ff2D4uKZIBZShbhGSpEmsQOPW/SKMKYhSTrqR7ufy6RP69rPogdaPh/kA==
+  dependencies:
+    import-fresh "^2.0.0"
+    is-directory "^0.3.1"
+    js-yaml "^3.13.1"
+    parse-json "^4.0.0"
+
+cosmiconfig@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-6.0.0.tgz#da4fee853c52f6b1e6935f41c1a2fc50bd4a9982"
+  integrity sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==
+  dependencies:
+    "@types/parse-json" "^4.0.0"
+    import-fresh "^3.1.0"
+    parse-json "^5.0.0"
+    path-type "^4.0.0"
+    yaml "^1.7.2"
+
+cosmiconfig@^7.0.0:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-7.0.1.tgz#714d756522cace867867ccb4474c5d01bbae5d6d"
+  integrity sha512-a1YWNUV2HwGimB7dU2s1wUMurNKjpx60HxBB6xUM8Re+2s1g1IIfJvFR0/iCF+XHdE0GMTKTuLR32UQff4TEyQ==
+  dependencies:
+    "@types/parse-json" "^4.0.0"
+    import-fresh "^3.2.1"
+    parse-json "^5.0.0"
+    path-type "^4.0.0"
+    yaml "^1.10.0"
+
+create-ecdh@^4.0.0:
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/create-ecdh/-/create-ecdh-4.0.4.tgz#d6e7f4bffa66736085a0762fd3a632684dabcc4e"
+  integrity sha512-mf+TCx8wWc9VpuxfP2ht0iSISLZnt0JgWlrOKZiNqyUZWnjIaCIVNQArMHnCZKfEYRg6IM7A+NeJoN8gf/Ws0A==
+  dependencies:
+    bn.js "^4.1.0"
+    elliptic "^6.5.3"
+
+create-hash@^1.1.0, create-hash@^1.1.2, create-hash@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/create-hash/-/create-hash-1.2.0.tgz#889078af11a63756bcfb59bd221996be3a9ef196"
+  integrity sha512-z00bCGNHDG8mHAkP7CtT1qVu+bFQUPjYq/4Iv3C3kWjTFV10zIjfSoeqXo9Asws8gwSHDGj/hl2u4OGIjapeCg==
+  dependencies:
+    cipher-base "^1.0.1"
+    inherits "^2.0.1"
+    md5.js "^1.3.4"
+    ripemd160 "^2.0.1"
+    sha.js "^2.4.0"
+
+create-hmac@^1.1.0, create-hmac@^1.1.4, create-hmac@^1.1.7:
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/create-hmac/-/create-hmac-1.1.7.tgz#69170c78b3ab957147b2b8b04572e47ead2243ff"
+  integrity sha512-MJG9liiZ+ogc4TzUwuvbER1JRdgvUFSB5+VR/g5h82fGaIRWMWddtKBHi7/sVhfjQZ6SehlyhvQYrcYkaUIpLg==
+  dependencies:
+    cipher-base "^1.0.3"
+    create-hash "^1.1.0"
+    inherits "^2.0.1"
+    ripemd160 "^2.0.0"
+    safe-buffer "^5.0.1"
+    sha.js "^2.4.8"
+
+cross-fetch@3.1.5:
+  version "3.1.5"
+  resolved "https://registry.yarnpkg.com/cross-fetch/-/cross-fetch-3.1.5.tgz#e1389f44d9e7ba767907f7af8454787952ab534f"
+  integrity sha512-lvb1SBsI0Z7GDwmuid+mU3kWVBwTVUbe7S0H52yaaAdQOXq2YktTCZdlAcNKFzE6QtRz0snpw9bNiPeOIkkQvw==
+  dependencies:
+    node-fetch "2.6.7"
+
+cross-spawn@6.0.5, cross-spawn@^6.0.0, cross-spawn@^6.0.5:
+  version "6.0.5"
+  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-6.0.5.tgz#4a5ec7c64dfae22c3a14124dbacdee846d80cbc4"
+  integrity sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==
+  dependencies:
+    nice-try "^1.0.4"
+    path-key "^2.0.1"
+    semver "^5.5.0"
+    shebang-command "^1.2.0"
+    which "^1.2.9"
+
+crypto-browserify@^3.11.0:
+  version "3.12.0"
+  resolved "https://registry.yarnpkg.com/crypto-browserify/-/crypto-browserify-3.12.0.tgz#396cf9f3137f03e4b8e532c58f698254e00f80ec"
+  integrity sha512-fz4spIh+znjO2VjL+IdhEpRJ3YN6sMzITSBijk6FK2UvTqruSQW+/cCZTSNsMiZNvUeq0CqurF+dAbyiGOY6Wg==
+  dependencies:
+    browserify-cipher "^1.0.0"
+    browserify-sign "^4.0.0"
+    create-ecdh "^4.0.0"
+    create-hash "^1.1.0"
+    create-hmac "^1.1.0"
+    diffie-hellman "^5.0.0"
+    inherits "^2.0.1"
+    pbkdf2 "^3.0.3"
+    public-encrypt "^4.0.0"
+    randombytes "^2.0.0"
+    randomfill "^1.0.3"
+
+css-blank-pseudo@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/css-blank-pseudo/-/css-blank-pseudo-0.1.4.tgz#dfdefd3254bf8a82027993674ccf35483bfcb3c5"
+  integrity sha512-LHz35Hr83dnFeipc7oqFDmsjHdljj3TQtxGGiNWSOsTLIAubSm4TEz8qCaKFpk7idaQ1GfWscF4E6mgpBysA1w==
+  dependencies:
+    postcss "^7.0.5"
+
+css-color-keywords@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05"
+  integrity sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==
+
+css-color-names@0.0.4, css-color-names@^0.0.4:
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0"
+  integrity sha1-gIrcLnnPhHOAabZGyyDsJ762KeA=
+
+css-declaration-sorter@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/css-declaration-sorter/-/css-declaration-sorter-4.0.1.tgz#c198940f63a76d7e36c1e71018b001721054cb22"
+  integrity sha512-BcxQSKTSEEQUftYpBVnsH4SF05NTuBokb19/sBt6asXGKZ/6VP7PLG1CBCkFDYOnhXhPh0jMhO6xZ71oYHXHBA==
+  dependencies:
+    postcss "^7.0.1"
+    timsort "^0.3.0"
+
+css-has-pseudo@^0.10.0:
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/css-has-pseudo/-/css-has-pseudo-0.10.0.tgz#3c642ab34ca242c59c41a125df9105841f6966ee"
+  integrity sha512-Z8hnfsZu4o/kt+AuFzeGpLVhFOGO9mluyHBaA2bA8aCGTwah5sT3WV/fTHH8UNZUytOIImuGPrl/prlb4oX4qQ==
+  dependencies:
+    postcss "^7.0.6"
+    postcss-selector-parser "^5.0.0-rc.4"
+
+css-loader@2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-2.1.1.tgz#d8254f72e412bb2238bb44dd674ffbef497333ea"
+  integrity sha512-OcKJU/lt232vl1P9EEDamhoO9iKY3tIjY5GU+XDLblAykTdgs6Ux9P1hTHve8nFKy5KPpOXOsVI/hIwi3841+w==
+  dependencies:
+    camelcase "^5.2.0"
+    icss-utils "^4.1.0"
+    loader-utils "^1.2.3"
+    normalize-path "^3.0.0"
+    postcss "^7.0.14"
+    postcss-modules-extract-imports "^2.0.0"
+    postcss-modules-local-by-default "^2.0.6"
+    postcss-modules-scope "^2.1.0"
+    postcss-modules-values "^2.0.0"
+    postcss-value-parser "^3.3.0"
+    schema-utils "^1.0.0"
+
+css-prefers-color-scheme@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/css-prefers-color-scheme/-/css-prefers-color-scheme-3.1.1.tgz#6f830a2714199d4f0d0d0bb8a27916ed65cff1f4"
+  integrity sha512-MTu6+tMs9S3EUqzmqLXEcgNRbNkkD/TGFvowpeoWJn5Vfq7FMgsmRQs9X5NXAURiOBmOxm/lLjsDNXDE6k9bhg==
+  dependencies:
+    postcss "^7.0.5"
+
+css-select-base-adapter@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz#3b2ff4972cc362ab88561507a95408a1432135d7"
+  integrity sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w==
+
+css-select@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/css-select/-/css-select-2.1.0.tgz#6a34653356635934a81baca68d0255432105dbef"
+  integrity sha512-Dqk7LQKpwLoH3VovzZnkzegqNSuAziQyNZUcrdDM401iY+R5NkGBXGmtO05/yaXQziALuPogeG0b7UAgjnTJTQ==
+  dependencies:
+    boolbase "^1.0.0"
+    css-what "^3.2.1"
+    domutils "^1.7.0"
+    nth-check "^1.0.2"
+
+css-select@^4.1.3:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/css-select/-/css-select-4.2.1.tgz#9e665d6ae4c7f9d65dbe69d0316e3221fb274cdd"
+  integrity sha512-/aUslKhzkTNCQUB2qTX84lVmfia9NyjP3WpDGtj/WxhwBzWBYUV3DgUpurHTme8UTPcPlAD1DJ+b0nN/t50zDQ==
+  dependencies:
+    boolbase "^1.0.0"
+    css-what "^5.1.0"
+    domhandler "^4.3.0"
+    domutils "^2.8.0"
+    nth-check "^2.0.1"
+
+css-to-react-native@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-3.0.0.tgz#62dbe678072a824a689bcfee011fc96e02a7d756"
+  integrity sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==
+  dependencies:
+    camelize "^1.0.0"
+    css-color-keywords "^1.0.0"
+    postcss-value-parser "^4.0.2"
+
+css-tree@1.0.0-alpha.37:
+  version "1.0.0-alpha.37"
+  resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.0.0-alpha.37.tgz#98bebd62c4c1d9f960ec340cf9f7522e30709a22"
+  integrity sha512-DMxWJg0rnz7UgxKT0Q1HU/L9BeJI0M6ksor0OgqOnF+aRCDWg/N2641HmVyU9KVIu0OVVWOb2IpC9A+BJRnejg==
+  dependencies:
+    mdn-data "2.0.4"
+    source-map "^0.6.1"
+
+css-tree@^1.1.2:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.1.3.tgz#eb4870fb6fd7707327ec95c2ff2ab09b5e8db91d"
+  integrity sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==
+  dependencies:
+    mdn-data "2.0.14"
+    source-map "^0.6.1"
+
+css-unit-converter@^1.1.1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/css-unit-converter/-/css-unit-converter-1.1.2.tgz#4c77f5a1954e6dbff60695ecb214e3270436ab21"
+  integrity sha512-IiJwMC8rdZE0+xiEZHeru6YoONC4rfPMqGm2W85jMIbkFvv5nFTwJVFHam2eFrN6txmoUYFAFXiv8ICVeTO0MA==
+
+css-vendor@^2.0.8:
+  version "2.0.8"
+  resolved "https://registry.yarnpkg.com/css-vendor/-/css-vendor-2.0.8.tgz#e47f91d3bd3117d49180a3c935e62e3d9f7f449d"
+  integrity sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ==
+  dependencies:
+    "@babel/runtime" "^7.8.3"
+    is-in-browser "^1.0.2"
+
+css-what@^3.2.1:
+  version "3.4.2"
+  resolved "https://registry.yarnpkg.com/css-what/-/css-what-3.4.2.tgz#ea7026fcb01777edbde52124e21f327e7ae950e4"
+  integrity sha512-ACUm3L0/jiZTqfzRM3Hi9Q8eZqd6IK37mMWPLz9PJxkLWllYeRf+EHUSHYEtFop2Eqytaq1FizFVh7XfBnXCDQ==
+
+css-what@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/css-what/-/css-what-5.1.0.tgz#3f7b707aadf633baf62c2ceb8579b545bb40f7fe"
+  integrity sha512-arSMRWIIFY0hV8pIxZMEfmMI47Wj3R/aWpZDDxWYCPEiOMv6tfOrnpDtgxBYPEQD4V0Y/958+1TdC3iWTFcUPw==
+
+css@^2.0.0:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/css/-/css-2.2.4.tgz#c646755c73971f2bba6a601e2cf2fd71b1298929"
+  integrity sha512-oUnjmWpy0niI3x/mPL8dVEI1l7MnG3+HHyRPHf+YFSbK+svOhXpmSOcDURUh2aOCgl2grzrOPt1nHLuCVFULLw==
+  dependencies:
+    inherits "^2.0.3"
+    source-map "^0.6.1"
+    source-map-resolve "^0.5.2"
+    urix "^0.1.0"
+
+cssdb@^4.4.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/cssdb/-/cssdb-4.4.0.tgz#3bf2f2a68c10f5c6a08abd92378331ee803cddb0"
+  integrity sha512-LsTAR1JPEM9TpGhl/0p3nQecC2LJ0kD8X5YARu1hk/9I1gril5vDtMZyNxcEpxxDj34YNck/ucjuoUd66K03oQ==
+
+cssesc@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-2.0.0.tgz#3b13bd1bb1cb36e1bcb5a4dcd27f54c5dcb35703"
+  integrity sha512-MsCAG1z9lPdoO/IUMLSBWBSVxVtJ1395VGIQ+Fc2gNdkQ1hNDnQdw3YhA71WJCBW1vdwA0cAnk/DnW6bqoEUYg==
+
+cssesc@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
+  integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
+
+cssnano-preset-default@^4.0.8:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/cssnano-preset-default/-/cssnano-preset-default-4.0.8.tgz#920622b1fc1e95a34e8838203f1397a504f2d3ff"
+  integrity sha512-LdAyHuq+VRyeVREFmuxUZR1TXjQm8QQU/ktoo/x7bz+SdOge1YKc5eMN6pRW7YWBmyq59CqYba1dJ5cUukEjLQ==
+  dependencies:
+    css-declaration-sorter "^4.0.1"
+    cssnano-util-raw-cache "^4.0.1"
+    postcss "^7.0.0"
+    postcss-calc "^7.0.1"
+    postcss-colormin "^4.0.3"
+    postcss-convert-values "^4.0.1"
+    postcss-discard-comments "^4.0.2"
+    postcss-discard-duplicates "^4.0.2"
+    postcss-discard-empty "^4.0.1"
+    postcss-discard-overridden "^4.0.1"
+    postcss-merge-longhand "^4.0.11"
+    postcss-merge-rules "^4.0.3"
+    postcss-minify-font-values "^4.0.2"
+    postcss-minify-gradients "^4.0.2"
+    postcss-minify-params "^4.0.2"
+    postcss-minify-selectors "^4.0.2"
+    postcss-normalize-charset "^4.0.1"
+    postcss-normalize-display-values "^4.0.2"
+    postcss-normalize-positions "^4.0.2"
+    postcss-normalize-repeat-style "^4.0.2"
+    postcss-normalize-string "^4.0.2"
+    postcss-normalize-timing-functions "^4.0.2"
+    postcss-normalize-unicode "^4.0.1"
+    postcss-normalize-url "^4.0.1"
+    postcss-normalize-whitespace "^4.0.2"
+    postcss-ordered-values "^4.1.2"
+    postcss-reduce-initial "^4.0.3"
+    postcss-reduce-transforms "^4.0.2"
+    postcss-svgo "^4.0.3"
+    postcss-unique-selectors "^4.0.1"
+
+cssnano-util-get-arguments@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/cssnano-util-get-arguments/-/cssnano-util-get-arguments-4.0.0.tgz#ed3a08299f21d75741b20f3b81f194ed49cc150f"
+  integrity sha1-7ToIKZ8h11dBsg87gfGU7UnMFQ8=
+
+cssnano-util-get-match@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/cssnano-util-get-match/-/cssnano-util-get-match-4.0.0.tgz#c0e4ca07f5386bb17ec5e52250b4f5961365156d"
+  integrity sha1-wOTKB/U4a7F+xeUiULT1lhNlFW0=
+
+cssnano-util-raw-cache@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/cssnano-util-raw-cache/-/cssnano-util-raw-cache-4.0.1.tgz#b26d5fd5f72a11dfe7a7846fb4c67260f96bf282"
+  integrity sha512-qLuYtWK2b2Dy55I8ZX3ky1Z16WYsx544Q0UWViebptpwn/xDBmog2TLg4f+DBMg1rJ6JDWtn96WHbOKDWt1WQA==
+  dependencies:
+    postcss "^7.0.0"
+
+cssnano-util-same-parent@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/cssnano-util-same-parent/-/cssnano-util-same-parent-4.0.1.tgz#574082fb2859d2db433855835d9a8456ea18bbf3"
+  integrity sha512-WcKx5OY+KoSIAxBW6UBBRay1U6vkYheCdjyVNDm85zt5K9mHoGOfsOsqIszfAqrQQFIIKgjh2+FDgIj/zsl21Q==
+
+cssnano@^4.1.10:
+  version "4.1.11"
+  resolved "https://registry.yarnpkg.com/cssnano/-/cssnano-4.1.11.tgz#c7b5f5b81da269cb1fd982cb960c1200910c9a99"
+  integrity sha512-6gZm2htn7xIPJOHY824ERgj8cNPgPxyCSnkXc4v7YvNW+TdVfzgngHcEhy/8D11kUWRUMbke+tC+AUcUsnMz2g==
+  dependencies:
+    cosmiconfig "^5.0.0"
+    cssnano-preset-default "^4.0.8"
+    is-resolvable "^1.0.0"
+    postcss "^7.0.0"
+
+csso@^4.0.2:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/csso/-/csso-4.2.0.tgz#ea3a561346e8dc9f546d6febedd50187cf389529"
+  integrity sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA==
+  dependencies:
+    css-tree "^1.1.2"
+
+cssom@0.3.x, "cssom@>= 0.3.2 < 0.4.0", cssom@^0.3.4:
+  version "0.3.8"
+  resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.3.8.tgz#9f1276f5b2b463f2114d3f2c75250af8c1a36f4a"
+  integrity sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==
+
+cssstyle@^1.0.0, cssstyle@^1.1.1:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/cssstyle/-/cssstyle-1.4.0.tgz#9d31328229d3c565c61e586b02041a28fccdccf1"
+  integrity sha512-GBrLZYZ4X4x6/QEoBnIrqb8B/f5l4+8me2dkom/j1Gtbxy0kBv6OGzKuAsGM75bkGwGAFkt56Iwg28S3XTZgSA==
+  dependencies:
+    cssom "0.3.x"
+
+csstype@^2.5.2:
+  version "2.6.19"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.19.tgz#feeb5aae89020bb389e1f63669a5ed490e391caa"
+  integrity sha512-ZVxXaNy28/k3kJg0Fou5MiYpp88j7H9hLZp8PDC3jV0WFjfH5E9xHb56L0W59cPbKbcHXeP4qyT8PrHp8t6LcQ==
+
+csstype@^3.0.2:
+  version "3.0.10"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.10.tgz#2ad3a7bed70f35b965707c092e5f30b327c290e5"
+  integrity sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA==
+
+cyclist@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-1.0.1.tgz#596e9698fd0c80e12038c2b82d6eb1b35b6224d9"
+  integrity sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk=
+
+d3-array@2, d3-array@^2.3.0:
+  version "2.12.1"
+  resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-2.12.1.tgz#e20b41aafcdffdf5d50928004ececf815a465e81"
+  integrity sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==
+  dependencies:
+    internmap "^1.0.0"
+
+"d3-color@1 - 2":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-2.0.0.tgz#8d625cab42ed9b8f601a1760a389f7ea9189d62e"
+  integrity sha512-SPXi0TSKPD4g9tw0NMZFnR95XVgUZiBH+uUTqQuDu1OsE2zomHU7ho0FISciaPvosimixwHFl3WHLGabv6dDgQ==
+
+"d3-format@1 - 2":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/d3-format/-/d3-format-2.0.0.tgz#a10bcc0f986c372b729ba447382413aabf5b0767"
+  integrity sha512-Ab3S6XuE/Q+flY96HXT0jOXcM4EAClYFnRGY5zsjRGNy6qCYrQsMffs7cV5Q9xejb35zxW5hf/guKw34kvIKsA==
+
+"d3-interpolate@1.2.0 - 2", d3-interpolate@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/d3-interpolate/-/d3-interpolate-2.0.1.tgz#98be499cfb8a3b94d4ff616900501a64abc91163"
+  integrity sha512-c5UhwwTs/yybcmTpAVqwSFl6vrQ8JZJoT5F7xNFK9pymv5C0Ymcc9/LIJHtYIggg/yS9YHw8i8O8tgb9pupjeQ==
+  dependencies:
+    d3-color "1 - 2"
+
+"d3-path@1 - 2":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/d3-path/-/d3-path-2.0.0.tgz#55d86ac131a0548adae241eebfb56b4582dd09d8"
+  integrity sha512-ZwZQxKhBnv9yHaiWd6ZU4x5BtCQ7pXszEV9CU6kRgwIQVQGLMv1oiL4M+MK/n79sYzsj+gcgpPQSctJUsLN7fA==
+
+d3-scale@^3.0.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/d3-scale/-/d3-scale-3.3.0.tgz#28c600b29f47e5b9cd2df9749c206727966203f3"
+  integrity sha512-1JGp44NQCt5d1g+Yy+GeOnZP7xHo0ii8zsQp6PGzd+C1/dl0KGsp9A7Mxwp+1D1o4unbTTxVdU/ZOIEBoeZPbQ==
+  dependencies:
+    d3-array "^2.3.0"
+    d3-format "1 - 2"
+    d3-interpolate "1.2.0 - 2"
+    d3-time "^2.1.1"
+    d3-time-format "2 - 3"
+
+d3-shape@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/d3-shape/-/d3-shape-2.1.0.tgz#3b6a82ccafbc45de55b57fcf956c584ded3b666f"
+  integrity sha512-PnjUqfM2PpskbSLTJvAzp2Wv4CZsnAgTfcVRTwW03QR3MkXF8Uo7B1y/lWkAsmbKwuecto++4NlsYcvYpXpTHA==
+  dependencies:
+    d3-path "1 - 2"
+
+"d3-time-format@2 - 3":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/d3-time-format/-/d3-time-format-3.0.0.tgz#df8056c83659e01f20ac5da5fdeae7c08d5f1bb6"
+  integrity sha512-UXJh6EKsHBTjopVqZBhFysQcoXSv/5yLONZvkQ5Kk3qbwiUYkdX17Xa1PT6U1ZWXGGfB1ey5L8dKMlFq2DO0Ag==
+  dependencies:
+    d3-time "1 - 2"
+
+"d3-time@1 - 2", d3-time@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/d3-time/-/d3-time-2.1.1.tgz#e9d8a8a88691f4548e68ca085e5ff956724a6682"
+  integrity sha512-/eIQe/eR4kCQwq7yxi7z4c6qEXf2IYGcjoWB5OOQy4Tq9Uv39/947qlDcN2TLkiTzQWzvnsuYPB9TrWaNfipKQ==
+  dependencies:
+    d3-array "2"
+
+d@1, d@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/d/-/d-1.0.1.tgz#8698095372d58dbee346ffd0c7093f99f8f9eb5a"
+  integrity sha512-m62ShEObQ39CfralilEQRjH6oAMtNCV1xJyEx5LpRYUVN+EviphDgUc/F3hnYbADmkiNs67Y+3ylmlG7Lnu+FA==
+  dependencies:
+    es5-ext "^0.10.50"
+    type "^1.0.1"
+
+damerau-levenshtein@^1.0.4:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz#b43d286ccbd36bc5b2f7ed41caf2d0aba1f8a6e7"
+  integrity sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==
+
+dashdash@^1.12.0:
+  version "1.14.1"
+  resolved "https://registry.yarnpkg.com/dashdash/-/dashdash-1.14.1.tgz#853cfa0f7cbe2fed5de20326b8dd581035f6e2f0"
+  integrity sha1-hTz6D3y+L+1d4gMmuN1YEDX24vA=
+  dependencies:
+    assert-plus "^1.0.0"
+
+data-urls@^1.0.0, data-urls@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/data-urls/-/data-urls-1.1.0.tgz#15ee0582baa5e22bb59c77140da8f9c76963bbfe"
+  integrity sha512-YTWYI9se1P55u58gL5GkQHW4P6VJBJ5iBT+B5a7i2Tjadhv52paJG0qHX4A0OR6/t52odI64KP2YvFpkDOi3eQ==
+  dependencies:
+    abab "^2.0.0"
+    whatwg-mimetype "^2.2.0"
+    whatwg-url "^7.0.0"
+
+dayjs@^1.10.4:
+  version "1.10.8"
+  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.10.8.tgz#267df4bc6276fcb33c04a6735287e3f429abec41"
+  integrity sha512-wbNwDfBHHur9UOzNUjeKUOJ0fCb0a52Wx0xInmQ7Y8FstyajiV1NmK1e00cxsr9YrE9r7yAChE0VvpuY5Rnlow==
+
+dayjs@^1.9.1:
+  version "1.11.3"
+  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.3.tgz#4754eb694a624057b9ad2224b67b15d552589258"
+  integrity sha512-xxwlswWOlGhzgQ4TKzASQkUhqERI3egRNqgV4ScR8wlANA/A9tZ7miXa44vTTKEq5l7vWoL5G57bG3zA+Kow0A==
+
+debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.9:
+  version "2.6.9"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
+  integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==
+  dependencies:
+    ms "2.0.0"
+
+debug@^3.1.1, debug@^3.2.5, debug@^3.2.7:
+  version "3.2.7"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.7.tgz#72580b7e9145fb39b6676f9c5e5fb100b934179a"
+  integrity sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==
+  dependencies:
+    ms "^2.1.1"
+
+debug@^4.0.1, debug@^4.1.0, debug@^4.1.1:
+  version "4.3.3"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.3.tgz#04266e0b70a98d4462e6e288e38259213332b664"
+  integrity sha512-/zxw5+vh1Tfv+4Qn7a5nsbcJKPaSvCDhojn6FEl9vupwK2VCSDtEiEtqr8DFtzYFOdz63LBkxec7DYuc2jon6Q==
+  dependencies:
+    ms "2.1.2"
+
+decamelize@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
+  integrity sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=
+
+decimal.js-light@^2.4.1:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/decimal.js-light/-/decimal.js-light-2.5.1.tgz#134fd32508f19e208f4fb2f8dac0d2626a867934"
+  integrity sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==
+
+decode-uri-component@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.0.tgz#eb3913333458775cb84cd1a1fae062106bb87545"
+  integrity sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=
+
+deep-equal@^1.0.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.1.1.tgz#b5c98c942ceffaf7cb051e24e1434a25a2e6076a"
+  integrity sha512-yd9c5AdiqVcR+JjcwUQb9DkhJc8ngNr0MahEBGvDiJw8puWab2yZlh+nkasOnZP+EGTAP6rRp2JzJhJZzvNF8g==
+  dependencies:
+    is-arguments "^1.0.4"
+    is-date-object "^1.0.1"
+    is-regex "^1.0.4"
+    object-is "^1.0.1"
+    object-keys "^1.1.1"
+    regexp.prototype.flags "^1.2.0"
+
+deep-is@~0.1.3:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831"
+  integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==
+
+default-gateway@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/default-gateway/-/default-gateway-4.2.0.tgz#167104c7500c2115f6dd69b0a536bb8ed720552b"
+  integrity sha512-h6sMrVB1VMWVrW13mSc6ia/DwYYw5MN6+exNu1OaJeFac5aSAvwM7lZ0NVfTABuSkQelr4h5oebg3KB1XPdjgA==
+  dependencies:
+    execa "^1.0.0"
+    ip-regex "^2.1.0"
+
+define-properties@^1.1.2, define-properties@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.1.3.tgz#cf88da6cbee26fe6db7094f61d870cbd84cee9f1"
+  integrity sha512-3MqfYKj2lLzdMSf8ZIZE/V+Zuy+BgD6f164e8K2w7dgnpKArBDerGYpM46IYYcjnkdPNMjPk9A6VFB8+3SKlXQ==
+  dependencies:
+    object-keys "^1.0.12"
+
+define-property@^0.2.5:
+  version "0.2.5"
+  resolved "https://registry.yarnpkg.com/define-property/-/define-property-0.2.5.tgz#c35b1ef918ec3c990f9a5bc57be04aacec5c8116"
+  integrity sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=
+  dependencies:
+    is-descriptor "^0.1.0"
+
+define-property@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/define-property/-/define-property-1.0.0.tgz#769ebaaf3f4a63aad3af9e8d304c9bbe79bfb0e6"
+  integrity sha1-dp66rz9KY6rTr56NMEybvnm/sOY=
+  dependencies:
+    is-descriptor "^1.0.0"
+
+define-property@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/define-property/-/define-property-2.0.2.tgz#d459689e8d654ba77e02a817f8710d702cb16e9d"
+  integrity sha512-jwK2UV4cnPpbcG7+VRARKTZPUWowwXA8bzH5NP6ud0oeAxyYPuGZUAC7hMugpCdz4BeSZl2Dl9k66CHJ/46ZYQ==
+  dependencies:
+    is-descriptor "^1.0.2"
+    isobject "^3.0.1"
+
+del@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/del/-/del-4.1.1.tgz#9e8f117222ea44a31ff3a156c049b99052a9f0b4"
+  integrity sha512-QwGuEUouP2kVwQenAsOof5Fv8K9t3D8Ca8NxcXKrIpEHjTXK5J2nXLdP+ALI1cgv8wj7KuwBhTwBkOZSJKM5XQ==
+  dependencies:
+    "@types/glob" "^7.1.1"
+    globby "^6.1.0"
+    is-path-cwd "^2.0.0"
+    is-path-in-cwd "^2.0.0"
+    p-map "^2.0.0"
+    pify "^4.0.1"
+    rimraf "^2.6.3"
+
+delayed-stream@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
+  integrity sha1-3zrhmayt+31ECqrgsp4icrJOxhk=
+
+depd@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9"
+  integrity sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=
+
+des.js@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/des.js/-/des.js-1.0.1.tgz#5382142e1bdc53f85d86d53e5f4aa7deb91e0843"
+  integrity sha512-Q0I4pfFrv2VPd34/vfLrFOoRmlYj3OV50i7fskps1jZWK1kApMWWT9G6RRUeYedLcBDIhnSDaUvJMb3AhUlaEA==
+  dependencies:
+    inherits "^2.0.1"
+    minimalistic-assert "^1.0.0"
+
+destroy@~1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.0.4.tgz#978857442c44749e4206613e37946205826abd80"
+  integrity sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=
+
+detect-newline@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-2.1.0.tgz#f41f1c10be4b00e87b5f13da680759f2c5bfd3e2"
+  integrity sha1-9B8cEL5LAOh7XxPaaAdZ8sW/0+I=
+
+detect-node@^2.0.4:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/detect-node/-/detect-node-2.1.0.tgz#c9c70775a49c3d03bc2c06d9a73be550f978f8b1"
+  integrity sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==
+
+detect-port-alt@1.1.6:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/detect-port-alt/-/detect-port-alt-1.1.6.tgz#24707deabe932d4a3cf621302027c2b266568275"
+  integrity sha512-5tQykt+LqfJFBEYaDITx7S7cR7mJ/zQmLXZ2qt5w04ainYZw6tBf9dBunMjVeVOdYVRUzUOE4HkY5J7+uttb5Q==
+  dependencies:
+    address "^1.0.1"
+    debug "^2.6.0"
+
+diff-sequences@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-24.9.0.tgz#5715d6244e2aa65f48bba0bc972db0b0b11e95b5"
+  integrity sha512-Dj6Wk3tWyTE+Fo1rW8v0Xhwk80um6yFYKbuAxc9c3EZxIHFDYwbi34Uk42u1CdnIiVorvt4RmlSDjIPyzGC2ew==
+
+diff-sequences@^25.2.6:
+  version "25.2.6"
+  resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-25.2.6.tgz#5f467c00edd35352b7bca46d7927d60e687a76dd"
+  integrity sha512-Hq8o7+6GaZeoFjtpgvRBUknSXNeJiCx7V9Fr94ZMljNiCr9n9L8H8aJqgWOQiDDGdyn29fRNcDdRVJ5fdyihfg==
+
+diffie-hellman@^5.0.0:
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/diffie-hellman/-/diffie-hellman-5.0.3.tgz#40e8ee98f55a2149607146921c63e1ae5f3d2875"
+  integrity sha512-kqag/Nl+f3GwyK25fhUMYj81BUOrZ9IuJsjIcDE5icNM9FJHAVm3VcUDxdLPoQtTuUylWm6ZIknYJwwaPxsUzg==
+  dependencies:
+    bn.js "^4.1.0"
+    miller-rabin "^4.0.0"
+    randombytes "^2.0.0"
+
+dir-glob@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/dir-glob/-/dir-glob-2.0.0.tgz#0b205d2b6aef98238ca286598a8204d29d0a0034"
+  integrity sha512-37qirFDz8cA5fimp9feo43fSuRo2gHwaIn6dXL8Ber1dGwUosDrGZeCCXq57WnIqE4aQ+u3eQZzsk1yOzhdwag==
+  dependencies:
+    arrify "^1.0.1"
+    path-type "^3.0.0"
+
+dir-glob@^2.0.0:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/dir-glob/-/dir-glob-2.2.2.tgz#fa09f0694153c8918b18ba0deafae94769fc50c4"
+  integrity sha512-f9LBi5QWzIW3I6e//uxZoLBlUt9kcp66qo0sSCxL6YZKc75R1c4MFCoe/LaZiBGmgujvQdxc5Bn3QhfyvK5Hsw==
+  dependencies:
+    path-type "^3.0.0"
+
+dnd-core@^9.5.1:
+  version "9.5.1"
+  resolved "https://registry.yarnpkg.com/dnd-core/-/dnd-core-9.5.1.tgz#e9ec02d33529b68fa528865704d40ac4b14f2baf"
+  integrity sha512-/yEWFF2jg51yyB8uA2UbvBr9Qis0Oo/4p9cqHLEKZdxzHHVSPfq0a/ool8NG6dIS6Q4uN+oKGObY0rNWiopJDA==
+  dependencies:
+    "@types/asap" "^2.0.0"
+    "@types/invariant" "^2.2.30"
+    asap "^2.0.6"
+    invariant "^2.2.4"
+    redux "^4.0.4"
+
+dns-equal@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/dns-equal/-/dns-equal-1.0.0.tgz#b39e7f1da6eb0a75ba9c17324b34753c47e0654d"
+  integrity sha1-s55/HabrCnW6nBcySzR1PEfgZU0=
+
+dns-packet@^1.3.1:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/dns-packet/-/dns-packet-1.3.4.tgz#e3455065824a2507ba886c55a89963bb107dec6f"
+  integrity sha512-BQ6F4vycLXBvdrJZ6S3gZewt6rcrks9KBgM9vrhW+knGRqc8uEdT7fuCwloc7nny5xNoMJ17HGH0R/6fpo8ECA==
+  dependencies:
+    ip "^1.1.0"
+    safe-buffer "^5.0.1"
+
+dns-txt@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/dns-txt/-/dns-txt-2.0.2.tgz#b91d806f5d27188e4ab3e7d107d881a1cc4642b6"
+  integrity sha1-uR2Ab10nGI5Ks+fRB9iBocxGQrY=
+  dependencies:
+    buffer-indexof "^1.0.0"
+
+doctrine@1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-1.5.0.tgz#379dce730f6166f76cefa4e6707a159b02c5a6fa"
+  integrity sha1-N53Ocw9hZvds76TmcHoVmwLFpvo=
+  dependencies:
+    esutils "^2.0.2"
+    isarray "^1.0.0"
+
+doctrine@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-2.1.0.tgz#5cd01fc101621b42c4cd7f5d1a66243716d3f39d"
+  integrity sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==
+  dependencies:
+    esutils "^2.0.2"
+
+doctrine@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-3.0.0.tgz#addebead72a6574db783639dc87a121773973961"
+  integrity sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==
+  dependencies:
+    esutils "^2.0.2"
+
+dom-converter@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/dom-converter/-/dom-converter-0.2.0.tgz#6721a9daee2e293682955b6afe416771627bb768"
+  integrity sha512-gd3ypIPfOMr9h5jIKq8E3sHOTCjeirnl0WK5ZdS1AW0Odt0b1PaWaHdJ4Qk4klv+YB9aJBS7mESXjFoDQPu6DA==
+  dependencies:
+    utila "~0.4"
+
+dom-helpers@^3.4.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.4.0.tgz#e9b369700f959f62ecde5a6babde4bccd9169af8"
+  integrity sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==
+  dependencies:
+    "@babel/runtime" "^7.1.2"
+
+dom-helpers@^5.0.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902"
+  integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==
+  dependencies:
+    "@babel/runtime" "^7.8.7"
+    csstype "^3.0.2"
+
+dom-serializer@0:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.2.2.tgz#1afb81f533717175d478655debc5e332d9f9bb51"
+  integrity sha512-2/xPb3ORsQ42nHYiSunXkDjPLBaEj/xTwUO4B7XCZQTRk7EBtTOPaygh10YAAh2OI1Qrp6NWfpAhzswj0ydt9g==
+  dependencies:
+    domelementtype "^2.0.1"
+    entities "^2.0.0"
+
+dom-serializer@^1.0.1:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-1.3.2.tgz#6206437d32ceefaec7161803230c7a20bc1b4d91"
+  integrity sha512-5c54Bk5Dw4qAxNOI1pFEizPSjVsx5+bpJKmL2kPn8JhBUq2q09tTCa3mjijun2NfK78NMouDYNMBkOrPZiS+ig==
+  dependencies:
+    domelementtype "^2.0.1"
+    domhandler "^4.2.0"
+    entities "^2.0.0"
+
+domain-browser@^1.1.1:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.2.0.tgz#3d31f50191a6749dd1375a7f522e823d42e54eda"
+  integrity sha512-jnjyiM6eRyZl2H+W8Q/zLMA481hzi0eszAaBUzIVnmYVDBbnLxVNnfu1HgEBvCbL+71FrxMl3E6lpKH7Ge3OXA==
+
+domelementtype@1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.3.1.tgz#d048c44b37b0d10a7f2a3d5fee3f4333d790481f"
+  integrity sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==
+
+domelementtype@^2.0.1, domelementtype@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.2.0.tgz#9a0b6c2782ed6a1c7323d42267183df9bd8b1d57"
+  integrity sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==
+
+domexception@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/domexception/-/domexception-1.0.1.tgz#937442644ca6a31261ef36e3ec677fe805582c90"
+  integrity sha512-raigMkn7CJNNo6Ihro1fzG7wr3fHuYVytzquZKX5n0yizGsTcYgzdIUwj1X9pK0VvjeihV+XiclP+DjwbsSKug==
+  dependencies:
+    webidl-conversions "^4.0.2"
+
+domhandler@^4.0.0, domhandler@^4.2.0, domhandler@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-4.3.0.tgz#16c658c626cf966967e306f966b431f77d4a5626"
+  integrity sha512-fC0aXNQXqKSFTr2wDNZDhsEYjCiYsDWl3D01kwt25hm1YIPyDGHvvi3rw+PLqHAl/m71MaiF7d5zvBr0p5UB2g==
+  dependencies:
+    domelementtype "^2.2.0"
+
+domutils@^1.7.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.7.0.tgz#56ea341e834e06e6748af7a1cb25da67ea9f8c2a"
+  integrity sha512-Lgd2XcJ/NjEw+7tFvfKxOzCYKZsdct5lczQ2ZaQY8Djz7pfAD3Gbp8ySJWtreII/vDlMVmxwa6pHmdxIYgttDg==
+  dependencies:
+    dom-serializer "0"
+    domelementtype "1"
+
+domutils@^2.5.2, domutils@^2.8.0:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/domutils/-/domutils-2.8.0.tgz#4437def5db6e2d1f5d6ee859bd95ca7d02048135"
+  integrity sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==
+  dependencies:
+    dom-serializer "^1.0.1"
+    domelementtype "^2.2.0"
+    domhandler "^4.2.0"
+
+dot-prop@^5.2.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-5.3.0.tgz#90ccce708cd9cd82cc4dc8c3ddd9abdd55b20e88"
+  integrity sha512-QM8q3zDe58hqUqjraQOmzZ1LIH9SWQJTlEKCH4kJ2oQvLZk7RbQXvtDM2XEq3fwkV9CCvvH4LA0AV+ogFsBM2Q==
+  dependencies:
+    is-obj "^2.0.0"
+
+dotenv-expand@5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/dotenv-expand/-/dotenv-expand-5.1.0.tgz#3fbaf020bfd794884072ea26b1e9791d45a629f0"
+  integrity sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==
+
+dotenv@6.2.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-6.2.0.tgz#941c0410535d942c8becf28d3f357dbd9d476064"
+  integrity sha512-HygQCKUBSFl8wKQZBSemMywRWcEDNidvNbjGVyZu3nbZ8qq9ubiPoGLMdRDpfSrpkkm9BXYFkpKxxFX38o/76w==
+
+duplexer@^0.1.1:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.2.tgz#3abe43aef3835f8ae077d136ddce0f276b0400e6"
+  integrity sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==
+
+duplexify@^3.4.2, duplexify@^3.6.0:
+  version "3.7.1"
+  resolved "https://registry.yarnpkg.com/duplexify/-/duplexify-3.7.1.tgz#2a4df5317f6ccfd91f86d6fd25d8d8a103b88309"
+  integrity sha512-07z8uv2wMyS51kKhD1KsdXJg5WQ6t93RneqRxUHnskXVtlYYkLqM0gqStQZ3pj073g687jPCHrqNfCzawLYh5g==
+  dependencies:
+    end-of-stream "^1.0.0"
+    inherits "^2.0.1"
+    readable-stream "^2.0.0"
+    stream-shift "^1.0.0"
+
+ecc-jsbn@~0.1.1:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz#3a83a904e54353287874c564b7549386849a98c9"
+  integrity sha1-OoOpBOVDUyh4dMVkt1SThoSamMk=
+  dependencies:
+    jsbn "~0.1.0"
+    safer-buffer "^2.1.0"
+
+ee-first@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
+  integrity sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=
+
+electron-to-chromium@^1.3.247, electron-to-chromium@^1.4.71:
+  version "1.4.75"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.75.tgz#d1ad9bb46f2f1bf432118c2be21d27ffeae82fdd"
+  integrity sha512-LxgUNeu3BVU7sXaKjUDD9xivocQLxFtq6wgERrutdY/yIOps3ODOZExK1jg8DTEg4U8TUCb5MLGeWFOYuxjF3Q==
+
+elliptic@^6.5.3:
+  version "6.5.4"
+  resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.5.4.tgz#da37cebd31e79a1367e941b592ed1fbebd58abbb"
+  integrity sha512-iLhC6ULemrljPZb+QutR5TQGB+pdW6KGD5RSegS+8sorOZT+rdQFbsQFJgvN3eRqNALqJer4oQ16YvJHlU8hzQ==
+  dependencies:
+    bn.js "^4.11.9"
+    brorand "^1.1.0"
+    hash.js "^1.0.0"
+    hmac-drbg "^1.0.1"
+    inherits "^2.0.4"
+    minimalistic-assert "^1.0.1"
+    minimalistic-crypto-utils "^1.0.1"
+
+emoji-regex@^7.0.1, emoji-regex@^7.0.2:
+  version "7.0.3"
+  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-7.0.3.tgz#933a04052860c85e83c122479c4748a8e4c72156"
+  integrity sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==
+
+emoji-regex@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
+  integrity sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==
+
+emojis-list@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
+  integrity sha1-TapNnbAPmBmIDHn6RXrlsJof04k=
+
+emojis-list@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-3.0.0.tgz#5570662046ad29e2e916e71aae260abdff4f6a78"
+  integrity sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==
+
+encodeurl@~1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
+  integrity sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=
+
+end-of-stream@^1.0.0, end-of-stream@^1.1.0:
+  version "1.4.4"
+  resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.4.tgz#5ae64a5f45057baf3626ec14da0ca5e4b2431eb0"
+  integrity sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==
+  dependencies:
+    once "^1.4.0"
+
+enhanced-resolve@^4.1.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-4.5.0.tgz#2f3cfd84dbe3b487f18f2db2ef1e064a571ca5ec"
+  integrity sha512-Nv9m36S/vxpsI+Hc4/ZGRs0n9mXqSWGGq49zxb/cJfPAQMbUtttJAlNPS4AQzaBdw/pKskw5bMbekT/Y7W/Wlg==
+  dependencies:
+    graceful-fs "^4.1.2"
+    memory-fs "^0.5.0"
+    tapable "^1.0.0"
+
+entities@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-2.2.0.tgz#098dc90ebb83d8dffa089d55256b351d34c4da55"
+  integrity sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==
+
+epubjs@^0.3.93:
+  version "0.3.93"
+  resolved "https://registry.yarnpkg.com/epubjs/-/epubjs-0.3.93.tgz#100c4597db152fc07d5246be38acca928b6b0b22"
+  integrity sha512-c06pNSdBxcXv3dZSbXAVLE1/pmleRhOT6mXNZo6INKmvuKpYB65MwU/lO7830czCtjIiK9i+KR+3S+p0wtljrw==
+  dependencies:
+    "@types/localforage" "0.0.34"
+    "@xmldom/xmldom" "^0.7.5"
+    core-js "^3.18.3"
+    event-emitter "^0.3.5"
+    jszip "^3.7.1"
+    localforage "^1.10.0"
+    lodash "^4.17.21"
+    marks-pane "^1.0.9"
+    path-webpack "0.0.3"
+
+errno@^0.1.3, errno@~0.1.7:
+  version "0.1.8"
+  resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.8.tgz#8bb3e9c7d463be4976ff888f76b4809ebc2e811f"
+  integrity sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==
+  dependencies:
+    prr "~1.0.1"
+
+error-ex@^1.2.0, error-ex@^1.3.1:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf"
+  integrity sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==
+  dependencies:
+    is-arrayish "^0.2.1"
+
+es-abstract@^1.17.2, es-abstract@^1.19.0, es-abstract@^1.19.1:
+  version "1.19.1"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.19.1.tgz#d4885796876916959de78edaa0df456627115ec3"
+  integrity sha512-2vJ6tjA/UfqLm2MPs7jxVybLoB8i1t1Jd9R3kISld20sIxPcTbLuggQOUxeWeAvIUkduv/CfMjuh4WmiXr2v9w==
+  dependencies:
+    call-bind "^1.0.2"
+    es-to-primitive "^1.2.1"
+    function-bind "^1.1.1"
+    get-intrinsic "^1.1.1"
+    get-symbol-description "^1.0.0"
+    has "^1.0.3"
+    has-symbols "^1.0.2"
+    internal-slot "^1.0.3"
+    is-callable "^1.2.4"
+    is-negative-zero "^2.0.1"
+    is-regex "^1.1.4"
+    is-shared-array-buffer "^1.0.1"
+    is-string "^1.0.7"
+    is-weakref "^1.0.1"
+    object-inspect "^1.11.0"
+    object-keys "^1.1.1"
+    object.assign "^4.1.2"
+    string.prototype.trimend "^1.0.4"
+    string.prototype.trimstart "^1.0.4"
+    unbox-primitive "^1.0.1"
+
+es-to-primitive@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.2.1.tgz#e55cd4c9cdc188bcefb03b366c736323fc5c898a"
+  integrity sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==
+  dependencies:
+    is-callable "^1.1.4"
+    is-date-object "^1.0.1"
+    is-symbol "^1.0.2"
+
+es5-ext@^0.10.35, es5-ext@^0.10.50:
+  version "0.10.53"
+  resolved "https://registry.yarnpkg.com/es5-ext/-/es5-ext-0.10.53.tgz#93c5a3acfdbef275220ad72644ad02ee18368de1"
+  integrity sha512-Xs2Stw6NiNHWypzRTY1MtaG/uJlwCk8kH81920ma8mvN8Xq1gsfhZvpkImLQArw8AHnv8MT2I45J3c0R8slE+Q==
+  dependencies:
+    es6-iterator "~2.0.3"
+    es6-symbol "~3.1.3"
+    next-tick "~1.0.0"
+
+es5-ext@~0.10.14:
+  version "0.10.61"
+  resolved "https://registry.yarnpkg.com/es5-ext/-/es5-ext-0.10.61.tgz#311de37949ef86b6b0dcea894d1ffedb909d3269"
+  integrity sha512-yFhIqQAzu2Ca2I4SE2Au3rxVfmohU9Y7wqGR+s7+H7krk26NXhIRAZDgqd6xqjCEFUomDEA3/Bo/7fKmIkW1kA==
+  dependencies:
+    es6-iterator "^2.0.3"
+    es6-symbol "^3.1.3"
+    next-tick "^1.1.0"
+
+es6-iterator@2.0.3, es6-iterator@^2.0.3, es6-iterator@~2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/es6-iterator/-/es6-iterator-2.0.3.tgz#a7de889141a05a94b0854403b2d0a0fbfa98f3b7"
+  integrity sha1-p96IkUGgWpSwhUQDstCg+/qY87c=
+  dependencies:
+    d "1"
+    es5-ext "^0.10.35"
+    es6-symbol "^3.1.1"
+
+es6-symbol@^3.1.1, es6-symbol@^3.1.3, es6-symbol@~3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/es6-symbol/-/es6-symbol-3.1.3.tgz#bad5d3c1bcdac28269f4cb331e431c78ac705d18"
+  integrity sha512-NJ6Yn3FuDinBaBRWl/q5X/s4koRHBrgKAu+yGI6JCBeiu3qrcbJhwT2GeR/EXVfylRk8dpQVJoLEFhK+Mu31NA==
+  dependencies:
+    d "^1.0.1"
+    ext "^1.1.2"
+
+escalade@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40"
+  integrity sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==
+
+escape-html@~1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
+  integrity sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=
+
+escape-string-regexp@1.0.5, escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
+  integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
+
+escape-string-regexp@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz#a30304e99daa32e23b2fd20f51babd07cffca344"
+  integrity sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==
+
+escodegen@^1.11.0, escodegen@^1.9.1:
+  version "1.14.3"
+  resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-1.14.3.tgz#4e7b81fba61581dc97582ed78cab7f0e8d63f503"
+  integrity sha512-qFcX0XJkdg+PB3xjZZG/wKSuT1PnQWx57+TVSjIMmILd2yC/6ByYElPwJnslDsuWuSAp4AwJGumarAAmJch5Kw==
+  dependencies:
+    esprima "^4.0.1"
+    estraverse "^4.2.0"
+    esutils "^2.0.2"
+    optionator "^0.8.1"
+  optionalDependencies:
+    source-map "~0.6.1"
+
+eslint-config-react-app@^5.0.2:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/eslint-config-react-app/-/eslint-config-react-app-5.2.1.tgz#698bf7aeee27f0cea0139eaef261c7bf7dd623df"
+  integrity sha512-pGIZ8t0mFLcV+6ZirRgYK6RVqUIKRIi9MmgzUEmrIknsn3AdO0I32asO86dJgloHq+9ZPl8UIg8mYrvgP5u2wQ==
+  dependencies:
+    confusing-browser-globals "^1.0.9"
+
+eslint-import-resolver-node@^0.3.2:
+  version "0.3.6"
+  resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.6.tgz#4048b958395da89668252001dbd9eca6b83bacbd"
+  integrity sha512-0En0w03NRVMn9Uiyn8YRPDKvWjxCWkslUEhGNTdGx15RvPJYQ+lbOlqrlNI2vEAs4pDYK4f/HN2TbDmk5TP0iw==
+  dependencies:
+    debug "^3.2.7"
+    resolve "^1.20.0"
+
+eslint-loader@3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/eslint-loader/-/eslint-loader-3.0.2.tgz#5a627316a51d6f41d357b9f6f0554e91506cdd6e"
+  integrity sha512-S5VnD+UpVY1PyYRqeBd/4pgsmkvSokbHqTXAQMpvCyRr3XN2tvSLo9spm2nEpqQqh9dezw3os/0zWihLeOg2Rw==
+  dependencies:
+    fs-extra "^8.1.0"
+    loader-fs-cache "^1.0.2"
+    loader-utils "^1.2.3"
+    object-hash "^1.3.1"
+    schema-utils "^2.2.0"
+
+eslint-module-utils@^2.4.0:
+  version "2.7.3"
+  resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.7.3.tgz#ad7e3a10552fdd0642e1e55292781bd6e34876ee"
+  integrity sha512-088JEC7O3lDZM9xGe0RerkOMd0EjFl+Yvd1jPWIkMT5u3H9+HC34mWWPnqPrN13gieT9pBOO+Qt07Nb/6TresQ==
+  dependencies:
+    debug "^3.2.7"
+    find-up "^2.1.0"
+
+eslint-plugin-flowtype@3.13.0:
+  version "3.13.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-flowtype/-/eslint-plugin-flowtype-3.13.0.tgz#e241ebd39c0ce519345a3f074ec1ebde4cf80f2c"
+  integrity sha512-bhewp36P+t7cEV0b6OdmoRWJCBYRiHFlqPZAG1oS3SF+Y0LQkeDvFSM4oxoxvczD1OdONCXMlJfQFiWLcV9urw==
+  dependencies:
+    lodash "^4.17.15"
+
+eslint-plugin-import@2.18.2:
+  version "2.18.2"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.18.2.tgz#02f1180b90b077b33d447a17a2326ceb400aceb6"
+  integrity sha512-5ohpsHAiUBRNaBWAF08izwUGlbrJoJJ+W9/TBwsGoR1MnlgfwMIKrFeSjWbt6moabiXW9xNvtFz+97KHRfI4HQ==
+  dependencies:
+    array-includes "^3.0.3"
+    contains-path "^0.1.0"
+    debug "^2.6.9"
+    doctrine "1.5.0"
+    eslint-import-resolver-node "^0.3.2"
+    eslint-module-utils "^2.4.0"
+    has "^1.0.3"
+    minimatch "^3.0.4"
+    object.values "^1.1.0"
+    read-pkg-up "^2.0.0"
+    resolve "^1.11.0"
+
+eslint-plugin-jsx-a11y@6.2.3:
+  version "6.2.3"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.2.3.tgz#b872a09d5de51af70a97db1eea7dc933043708aa"
+  integrity sha512-CawzfGt9w83tyuVekn0GDPU9ytYtxyxyFZ3aSWROmnRRFQFT2BiPJd7jvRdzNDi6oLWaS2asMeYSNMjWTV4eNg==
+  dependencies:
+    "@babel/runtime" "^7.4.5"
+    aria-query "^3.0.0"
+    array-includes "^3.0.3"
+    ast-types-flow "^0.0.7"
+    axobject-query "^2.0.2"
+    damerau-levenshtein "^1.0.4"
+    emoji-regex "^7.0.2"
+    has "^1.0.3"
+    jsx-ast-utils "^2.2.1"
+
+eslint-plugin-react-hooks@^4.0.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.3.0.tgz#318dbf312e06fab1c835a4abef00121751ac1172"
+  integrity sha512-XslZy0LnMn+84NEG9jSGR6eGqaZB3133L8xewQo3fQagbQuGt7a63gf+P1NGKZavEYEC3UXaWEAA/AqDkuN6xA==
+
+eslint-plugin-react@^7.19.0:
+  version "7.29.2"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.29.2.tgz#2d4da69d30d0a736efd30890dc6826f3e91f3f7c"
+  integrity sha512-ypEBTKOy5liFQXZWMchJ3LN0JX1uPI6n7MN7OPHKacqXAxq5gYC30TdO7wqGYQyxD1OrzpobdHC3hDmlRWDg9w==
+  dependencies:
+    array-includes "^3.1.4"
+    array.prototype.flatmap "^1.2.5"
+    doctrine "^2.1.0"
+    estraverse "^5.3.0"
+    jsx-ast-utils "^2.4.1 || ^3.0.0"
+    minimatch "^3.1.2"
+    object.entries "^1.1.5"
+    object.fromentries "^2.0.5"
+    object.hasown "^1.1.0"
+    object.values "^1.1.5"
+    prop-types "^15.8.1"
+    resolve "^2.0.0-next.3"
+    semver "^6.3.0"
+    string.prototype.matchall "^4.0.6"
+
+eslint-scope@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-4.0.3.tgz#ca03833310f6889a3264781aa82e63eb9cfe7848"
+  integrity sha512-p7VutNr1O/QrxysMo3E45FjYDTeXBy0iTltPFNSqKAIfjDSXC+4dj+qfyuD8bfAXrW/y6lW3O76VaYNPKfpKrg==
+  dependencies:
+    esrecurse "^4.1.0"
+    estraverse "^4.1.1"
+
+eslint-scope@^5.0.0:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-5.1.1.tgz#e786e59a66cb92b3f6c1fb0d508aab174848f48c"
+  integrity sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==
+  dependencies:
+    esrecurse "^4.3.0"
+    estraverse "^4.1.1"
+
+eslint-utils@^1.4.3:
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-1.4.3.tgz#74fec7c54d0776b6f67e0251040b5806564e981f"
+  integrity sha512-fbBN5W2xdY45KulGXmLHZ3c3FHfVYmKg0IrAKGOkT/464PQsx2UeIzfz1RmEci+KLm1bBaAzZAh8+/E+XAeZ8Q==
+  dependencies:
+    eslint-visitor-keys "^1.1.0"
+
+eslint-utils@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-2.1.0.tgz#d2de5e03424e707dc10c74068ddedae708741b27"
+  integrity sha512-w94dQYoauyvlDc43XnGB8lU3Zt713vNChgt4EWwhXAP2XkBvndfxF0AgIqKOOasjPIPzj9JqgwkwbCYD0/V3Zg==
+  dependencies:
+    eslint-visitor-keys "^1.1.0"
+
+eslint-visitor-keys@^1.0.0, eslint-visitor-keys@^1.1.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz#30ebd1ef7c2fdff01c3a4f151044af25fab0523e"
+  integrity sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==
+
+eslint@^6.8.0:
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-6.8.0.tgz#62262d6729739f9275723824302fb227c8c93ffb"
+  integrity sha512-K+Iayyo2LtyYhDSYwz5D5QdWw0hCacNzyq1Y821Xna2xSJj7cijoLLYmLxTQgcgZ9mC61nryMy9S7GRbYpI5Ig==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    ajv "^6.10.0"
+    chalk "^2.1.0"
+    cross-spawn "^6.0.5"
+    debug "^4.0.1"
+    doctrine "^3.0.0"
+    eslint-scope "^5.0.0"
+    eslint-utils "^1.4.3"
+    eslint-visitor-keys "^1.1.0"
+    espree "^6.1.2"
+    esquery "^1.0.1"
+    esutils "^2.0.2"
+    file-entry-cache "^5.0.1"
+    functional-red-black-tree "^1.0.1"
+    glob-parent "^5.0.0"
+    globals "^12.1.0"
+    ignore "^4.0.6"
+    import-fresh "^3.0.0"
+    imurmurhash "^0.1.4"
+    inquirer "^7.0.0"
+    is-glob "^4.0.0"
+    js-yaml "^3.13.1"
+    json-stable-stringify-without-jsonify "^1.0.1"
+    levn "^0.3.0"
+    lodash "^4.17.14"
+    minimatch "^3.0.4"
+    mkdirp "^0.5.1"
+    natural-compare "^1.4.0"
+    optionator "^0.8.3"
+    progress "^2.0.0"
+    regexpp "^2.0.1"
+    semver "^6.1.2"
+    strip-ansi "^5.2.0"
+    strip-json-comments "^3.0.1"
+    table "^5.2.3"
+    text-table "^0.2.0"
+    v8-compile-cache "^2.0.3"
+
+espree@^6.1.2:
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-6.2.1.tgz#77fc72e1fd744a2052c20f38a5b575832e82734a"
+  integrity sha512-ysCxRQY3WaXJz9tdbWOwuWr5Y/XrPTGX9Kiz3yoUXwW0VZ4w30HTkQLaGx/+ttFjF8i+ACbArnB4ce68a9m5hw==
+  dependencies:
+    acorn "^7.1.1"
+    acorn-jsx "^5.2.0"
+    eslint-visitor-keys "^1.1.0"
+
+esprima@^4.0.0, esprima@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
+  integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==
+
+esquery@^1.0.1:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.4.0.tgz#2148ffc38b82e8c7057dfed48425b3e61f0f24a5"
+  integrity sha512-cCDispWt5vHHtwMY2YrAQ4ibFkAL8RbH5YGBnZBc90MolvvfkkQcJro/aZiAQUlQ3qgrYS6D6v8Gc5G5CQsc9w==
+  dependencies:
+    estraverse "^5.1.0"
+
+esrecurse@^4.1.0, esrecurse@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/esrecurse/-/esrecurse-4.3.0.tgz#7ad7964d679abb28bee72cec63758b1c5d2c9921"
+  integrity sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==
+  dependencies:
+    estraverse "^5.2.0"
+
+estraverse@^4.1.1, estraverse@^4.2.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.3.0.tgz#398ad3f3c5a24948be7725e83d11a7de28cdbd1d"
+  integrity sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==
+
+estraverse@^5.1.0, estraverse@^5.2.0, estraverse@^5.3.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-5.3.0.tgz#2eea5290702f26ab8fe5370370ff86c965d21123"
+  integrity sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==
+
+esutils@^2.0.2:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"
+  integrity sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==
+
+etag@~1.8.1:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887"
+  integrity sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=
+
+event-emitter@^0.3.5:
+  version "0.3.5"
+  resolved "https://registry.yarnpkg.com/event-emitter/-/event-emitter-0.3.5.tgz#df8c69eef1647923c7157b9ce83840610b02cc39"
+  integrity sha1-34xp7vFkeSPHFXuc6DhAYQsCzDk=
+  dependencies:
+    d "1"
+    es5-ext "~0.10.14"
+
+eventemitter3@^4.0.0, eventemitter3@^4.0.1:
+  version "4.0.7"
+  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.7.tgz#2de9b68f6528d5644ef5c59526a1b4a07306169f"
+  integrity sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==
+
+events@^3.0.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/events/-/events-3.3.0.tgz#31a95ad0a924e2d2c419a813aeb2c4e878ea7400"
+  integrity sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==
+
+eventsource@^1.0.7, eventsource@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/eventsource/-/eventsource-1.1.0.tgz#00e8ca7c92109e94b0ddf32dac677d841028cfaf"
+  integrity sha512-VSJjT5oCNrFvCS6igjzPAt5hBzQ2qPBFIbJ03zLI9SE0mxwZpMw6BfJrbFHm1a141AavMEB8JHmBhWAd66PfCg==
+  dependencies:
+    original "^1.0.0"
+
+evp_bytestokey@^1.0.0, evp_bytestokey@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/evp_bytestokey/-/evp_bytestokey-1.0.3.tgz#7fcbdb198dc71959432efe13842684e0525acb02"
+  integrity sha512-/f2Go4TognH/KvCISP7OUsHn85hT9nUkxxA9BEWxFn+Oj9o8ZNLm/40hdlgSLyuOimsrTKLUMEorQexp/aPQeA==
+  dependencies:
+    md5.js "^1.3.4"
+    safe-buffer "^5.1.1"
+
+exec-sh@^0.3.2:
+  version "0.3.6"
+  resolved "https://registry.yarnpkg.com/exec-sh/-/exec-sh-0.3.6.tgz#ff264f9e325519a60cb5e273692943483cca63bc"
+  integrity sha512-nQn+hI3yp+oD0huYhKwvYI32+JFeq+XkNcD1GAo3Y/MjxsfVGmrrzrnzjWiNY6f+pUCP440fThsFh5gZrRAU/w==
+
+execa@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/execa/-/execa-1.0.0.tgz#c6236a5bb4df6d6f15e88e7f017798216749ddd8"
+  integrity sha512-adbxcyWV46qiHyvSp50TKt05tB4tK3HcmF7/nxfAdhnox83seTDbwnaqKO4sXRy7roHAIFqJP/Rw/AuEbX61LA==
+  dependencies:
+    cross-spawn "^6.0.0"
+    get-stream "^4.0.0"
+    is-stream "^1.1.0"
+    npm-run-path "^2.0.0"
+    p-finally "^1.0.0"
+    signal-exit "^3.0.0"
+    strip-eof "^1.0.0"
+
+exit@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/exit/-/exit-0.1.2.tgz#0632638f8d877cc82107d30a0fff1a17cba1cd0c"
+  integrity sha1-BjJjj42HfMghB9MKD/8aF8uhzQw=
+
+expand-brackets@^2.1.4:
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/expand-brackets/-/expand-brackets-2.1.4.tgz#b77735e315ce30f6b6eff0f83b04151a22449622"
+  integrity sha1-t3c14xXOMPa27/D4OwQVGiJEliI=
+  dependencies:
+    debug "^2.3.3"
+    define-property "^0.2.5"
+    extend-shallow "^2.0.1"
+    posix-character-classes "^0.1.0"
+    regex-not "^1.0.0"
+    snapdragon "^0.8.1"
+    to-regex "^3.0.1"
+
+expect@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/expect/-/expect-24.9.0.tgz#b75165b4817074fa4a157794f46fe9f1ba15b6ca"
+  integrity sha512-wvVAx8XIol3Z5m9zvZXiyZOQ+sRJqNTIm6sGjdWlaZIeupQGO3WbYI+15D/AmEwZywL6wtJkbAbJtzkOfBuR0Q==
+  dependencies:
+    "@jest/types" "^24.9.0"
+    ansi-styles "^3.2.0"
+    jest-get-type "^24.9.0"
+    jest-matcher-utils "^24.9.0"
+    jest-message-util "^24.9.0"
+    jest-regex-util "^24.9.0"
+
+express@^4.17.1:
+  version "4.17.3"
+  resolved "https://registry.yarnpkg.com/express/-/express-4.17.3.tgz#f6c7302194a4fb54271b73a1fe7a06478c8f85a1"
+  integrity sha512-yuSQpz5I+Ch7gFrPCk4/c+dIBKlQUxtgwqzph132bsT6qhuzss6I8cLJQz7B3rFblzd6wtcI0ZbGltH/C4LjUg==
+  dependencies:
+    accepts "~1.3.8"
+    array-flatten "1.1.1"
+    body-parser "1.19.2"
+    content-disposition "0.5.4"
+    content-type "~1.0.4"
+    cookie "0.4.2"
+    cookie-signature "1.0.6"
+    debug "2.6.9"
+    depd "~1.1.2"
+    encodeurl "~1.0.2"
+    escape-html "~1.0.3"
+    etag "~1.8.1"
+    finalhandler "~1.1.2"
+    fresh "0.5.2"
+    merge-descriptors "1.0.1"
+    methods "~1.1.2"
+    on-finished "~2.3.0"
+    parseurl "~1.3.3"
+    path-to-regexp "0.1.7"
+    proxy-addr "~2.0.7"
+    qs "6.9.7"
+    range-parser "~1.2.1"
+    safe-buffer "5.2.1"
+    send "0.17.2"
+    serve-static "1.14.2"
+    setprototypeof "1.2.0"
+    statuses "~1.5.0"
+    type-is "~1.6.18"
+    utils-merge "1.0.1"
+    vary "~1.1.2"
+
+ext@^1.1.2:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/ext/-/ext-1.6.0.tgz#3871d50641e874cc172e2b53f919842d19db4c52"
+  integrity sha512-sdBImtzkq2HpkdRLtlLWDa6w4DX22ijZLKx8BMPUuKe1c5lbN6xwQDQCxSfxBQnHZ13ls/FH0MQZx/q/gr6FQg==
+  dependencies:
+    type "^2.5.0"
+
+extend-shallow@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/extend-shallow/-/extend-shallow-2.0.1.tgz#51af7d614ad9a9f610ea1bafbb989d6b1c56890f"
+  integrity sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=
+  dependencies:
+    is-extendable "^0.1.0"
+
+extend-shallow@^3.0.0, extend-shallow@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/extend-shallow/-/extend-shallow-3.0.2.tgz#26a71aaf073b39fb2127172746131c2704028db8"
+  integrity sha1-Jqcarwc7OfshJxcnRhMcJwQCjbg=
+  dependencies:
+    assign-symbols "^1.0.0"
+    is-extendable "^1.0.1"
+
+extend@~3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa"
+  integrity sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==
+
+external-editor@^3.0.3:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/external-editor/-/external-editor-3.1.0.tgz#cb03f740befae03ea4d283caed2741a83f335495"
+  integrity sha512-hMQ4CX1p1izmuLYyZqLMO/qGNw10wSv9QDCPfzXfyFrOaCSSoRfqE1Kf1s5an66J5JZC62NewG+mK49jOCtQew==
+  dependencies:
+    chardet "^0.7.0"
+    iconv-lite "^0.4.24"
+    tmp "^0.0.33"
+
+extglob@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/extglob/-/extglob-2.0.4.tgz#ad00fe4dc612a9232e8718711dc5cb5ab0285543"
+  integrity sha512-Nmb6QXkELsuBr24CJSkilo6UHHgbekK5UiZgfE6UHD3Eb27YC6oD+bhcT+tJ6cl8dmsgdQxnWlcry8ksBIBLpw==
+  dependencies:
+    array-unique "^0.3.2"
+    define-property "^1.0.0"
+    expand-brackets "^2.1.4"
+    extend-shallow "^2.0.1"
+    fragment-cache "^0.2.1"
+    regex-not "^1.0.0"
+    snapdragon "^0.8.1"
+    to-regex "^3.0.1"
+
+extsprintf@1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.3.0.tgz#96918440e3041a7a414f8c52e3c574eb3c3e1e05"
+  integrity sha1-lpGEQOMEGnpBT4xS48V06zw+HgU=
+
+extsprintf@^1.2.0:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.4.1.tgz#8d172c064867f235c0c84a596806d279bf4bcc07"
+  integrity sha512-Wrk35e8ydCKDj/ArClo1VrPVmN8zph5V4AtHwIuHhvMXsKf73UT3BOD+azBIW+3wOJ4FhEH7zyaJCFvChjYvMA==
+
+fast-deep-equal@^3.1.1:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
+  integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
+
+fast-equals@^2.0.0:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/fast-equals/-/fast-equals-2.0.4.tgz#3add9410585e2d7364c2deeb6a707beadb24b927"
+  integrity sha512-caj/ZmjHljPrZtbzJ3kfH5ia/k4mTJe/qSiXAGzxZWRZgsgDV0cvNaQULqUX8t0/JVlzzEdYOwCN5DmzTxoD4w==
+
+fast-glob@^2.0.2:
+  version "2.2.7"
+  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-2.2.7.tgz#6953857c3afa475fff92ee6015d52da70a4cd39d"
+  integrity sha512-g1KuQwHOZAmOZMuBtHdxDtju+T2RT8jgCC9aANsbpdiDDTSnjgfuVsIBNKbUeJI3oKMRExcfNDtJl4OhbffMsw==
+  dependencies:
+    "@mrmlnc/readdir-enhanced" "^2.2.1"
+    "@nodelib/fs.stat" "^1.1.2"
+    glob-parent "^3.1.0"
+    is-glob "^4.0.0"
+    merge2 "^1.2.3"
+    micromatch "^3.1.10"
+
+fast-json-stable-stringify@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633"
+  integrity sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==
+
+fast-levenshtein@~2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
+  integrity sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=
+
+faye-websocket@^0.11.3, faye-websocket@^0.11.4, faye-websocket@~0.11.1:
+  version "0.11.4"
+  resolved "https://registry.yarnpkg.com/faye-websocket/-/faye-websocket-0.11.4.tgz#7f0d9275cfdd86a1c963dc8b65fcc451edcbb1da"
+  integrity sha512-CzbClwlXAuiRQAlUyfqPgvPoNKTckTPGfwZV4ZdAhVcP2lh9KUxJg2b5GkE7XbjKQ3YJnQ9z6D9ntLAlB+tP8g==
+  dependencies:
+    websocket-driver ">=0.5.1"
+
+fb-watchman@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/fb-watchman/-/fb-watchman-2.0.1.tgz#fc84fb39d2709cf3ff6d743706157bb5708a8a85"
+  integrity sha512-DkPJKQeY6kKwmuMretBhr7G6Vodr7bFwDYTXIkfG1gjvNpaxBTQV3PbXg6bR1c1UP4jPOX0jHUbbHANL9vRjVg==
+  dependencies:
+    bser "2.1.1"
+
+figgy-pudding@^3.5.1:
+  version "3.5.2"
+  resolved "https://registry.yarnpkg.com/figgy-pudding/-/figgy-pudding-3.5.2.tgz#b4eee8148abb01dcf1d1ac34367d59e12fa61d6e"
+  integrity sha512-0btnI/H8f2pavGMN8w40mlSKOfTK2SVJmBfBeVIj3kNw0swwgzyRq0d5TJVOwodFmtvpPeWPN/MCcfuWF0Ezbw==
+
+figures@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/figures/-/figures-2.0.0.tgz#3ab1a2d2a62c8bfb431a0c94cb797a2fce27c962"
+  integrity sha1-OrGi0qYsi/tDGgyUy3l6L84nyWI=
+  dependencies:
+    escape-string-regexp "^1.0.5"
+
+figures@^3.0.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/figures/-/figures-3.2.0.tgz#625c18bd293c604dc4a8ddb2febf0c88341746af"
+  integrity sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==
+  dependencies:
+    escape-string-regexp "^1.0.5"
+
+file-entry-cache@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-5.0.1.tgz#ca0f6efa6dd3d561333fb14515065c2fafdf439c"
+  integrity sha512-bCg29ictuBaKUwwArK4ouCaqDgLZcysCFLmM/Yn/FDoqndh/9vNuQfXRDvTuXKLxfD/JtZQGKFT8MGcJBK644g==
+  dependencies:
+    flat-cache "^2.0.1"
+
+file-loader@3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-3.0.1.tgz#f8e0ba0b599918b51adfe45d66d1e771ad560faa"
+  integrity sha512-4sNIOXgtH/9WZq4NvlfU3Opn5ynUsqBwSLyM+I7UOwdGigTBYfVVQEwe/msZNX/j4pCJTIM14Fsw66Svo1oVrw==
+  dependencies:
+    loader-utils "^1.0.2"
+    schema-utils "^1.0.0"
+
+file-uri-to-path@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz#553a7b8446ff6f684359c445f1e37a05dacc33dd"
+  integrity sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==
+
+filesize@3.6.1:
+  version "3.6.1"
+  resolved "https://registry.yarnpkg.com/filesize/-/filesize-3.6.1.tgz#090bb3ee01b6f801a8a8be99d31710b3422bb317"
+  integrity sha512-7KjR1vv6qnicaPMi1iiTcI85CyYwRO/PSFCu6SvqL8jN2Wjt/NIYQTFtFs7fSDCYOstUkEWIQGFUg5YZQfjlcg==
+
+fill-range@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-4.0.0.tgz#d544811d428f98eb06a63dc402d2403c328c38f7"
+  integrity sha1-1USBHUKPmOsGpj3EAtJAPDKMOPc=
+  dependencies:
+    extend-shallow "^2.0.1"
+    is-number "^3.0.0"
+    repeat-string "^1.6.1"
+    to-regex-range "^2.1.0"
+
+fill-range@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40"
+  integrity sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==
+  dependencies:
+    to-regex-range "^5.0.1"
+
+finalhandler@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.1.2.tgz#b7e7d000ffd11938d0fdb053506f6ebabe9f587d"
+  integrity sha512-aAWcW57uxVNrQZqFXjITpW3sIUQmHGG3qSb9mUah9MgMC4NeWhNOlNjXEYq3HjRAvL6arUviZGGJsBg6z0zsWA==
+  dependencies:
+    debug "2.6.9"
+    encodeurl "~1.0.2"
+    escape-html "~1.0.3"
+    on-finished "~2.3.0"
+    parseurl "~1.3.3"
+    statuses "~1.5.0"
+    unpipe "~1.0.0"
+
+find-cache-dir@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-0.1.1.tgz#c8defae57c8a52a8a784f9e31c57c742e993a0b9"
+  integrity sha1-yN765XyKUqinhPnjHFfHQumToLk=
+  dependencies:
+    commondir "^1.0.1"
+    mkdirp "^0.5.1"
+    pkg-dir "^1.0.0"
+
+find-cache-dir@^2.0.0, find-cache-dir@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-2.1.0.tgz#8d0f94cd13fe43c6c7c261a0d86115ca918c05f7"
+  integrity sha512-Tq6PixE0w/VMFfCgbONnkiQIVol/JJL7nRMi20fqzA4NRs9AfeqMGeRdPi3wIhYkxjeBaWh2rxwapn5Tu3IqOQ==
+  dependencies:
+    commondir "^1.0.1"
+    make-dir "^2.0.0"
+    pkg-dir "^3.0.0"
+
+find-up@3.0.0, find-up@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/find-up/-/find-up-3.0.0.tgz#49169f1d7993430646da61ecc5ae355c21c97b73"
+  integrity sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==
+  dependencies:
+    locate-path "^3.0.0"
+
+find-up@^1.0.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/find-up/-/find-up-1.1.2.tgz#6b2e9822b1a2ce0a60ab64d610eccad53cb24d0f"
+  integrity sha1-ay6YIrGizgpgq2TWEOzK1TyyTQ8=
+  dependencies:
+    path-exists "^2.0.0"
+    pinkie-promise "^2.0.0"
+
+find-up@^2.0.0, find-up@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/find-up/-/find-up-2.1.0.tgz#45d1b7e506c717ddd482775a2b77920a3c0c57a7"
+  integrity sha1-RdG35QbHF93UgndaK3eSCjwMV6c=
+  dependencies:
+    locate-path "^2.0.0"
+
+find-up@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/find-up/-/find-up-5.0.0.tgz#4c92819ecb7083561e4f4a240a86be5198f536fc"
+  integrity sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==
+  dependencies:
+    locate-path "^6.0.0"
+    path-exists "^4.0.0"
+
+find-versions@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/find-versions/-/find-versions-4.0.0.tgz#3c57e573bf97769b8cb8df16934b627915da4965"
+  integrity sha512-wgpWy002tA+wgmO27buH/9KzyEOQnKsG/R0yrcjPT9BOFm0zRBVQbZ95nRGXWMywS8YR5knRbpohio0bcJABxQ==
+  dependencies:
+    semver-regex "^3.1.2"
+
+flat-cache@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-2.0.1.tgz#5d296d6f04bda44a4630a301413bdbc2ec085ec0"
+  integrity sha512-LoQe6yDuUMDzQAEH8sgmh4Md6oZnc/7PjtwjNFSzveXqSHt6ka9fPBuso7IGf9Rz4uqnSnWiFH2B/zj24a5ReA==
+  dependencies:
+    flatted "^2.0.0"
+    rimraf "2.6.3"
+    write "1.0.3"
+
+flatted@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/flatted/-/flatted-2.0.2.tgz#4575b21e2bcee7434aa9be662f4b7b5f9c2b5138"
+  integrity sha512-r5wGx7YeOwNWNlCA0wQ86zKyDLMQr+/RB8xy74M4hTphfmjlijTSSXGuH8rnvKZnfT9i+75zmd8jcKdMR4O6jA==
+
+flatten@^1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.3.tgz#c1283ac9f27b368abc1e36d1ff7b04501a30356b"
+  integrity sha512-dVsPA/UwQ8+2uoFe5GHtiBMu48dWLTdsuEd7CKGlZlD78r1TTWBvDuFaFGKCo/ZfEr95Uk56vZoX86OsHkUeIg==
+
+flush-write-stream@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/flush-write-stream/-/flush-write-stream-1.1.1.tgz#8dd7d873a1babc207d94ead0c2e0e44276ebf2e8"
+  integrity sha512-3Z4XhFZ3992uIq0XOqb9AreonueSYphE6oYbpt5+3u06JWklbsPkNv3ZKkP9Bz/r+1MWCaMoSQ28P85+1Yc77w==
+  dependencies:
+    inherits "^2.0.3"
+    readable-stream "^2.3.6"
+
+follow-redirects@^1.0.0, follow-redirects@^1.14.0:
+  version "1.14.9"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.9.tgz#dd4ea157de7bfaf9ea9b3fbd85aa16951f78d8d7"
+  integrity sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w==
+
+for-each@^0.3.3:
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/for-each/-/for-each-0.3.3.tgz#69b447e88a0a5d32c3e7084f3f1710034b21376e"
+  integrity sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==
+  dependencies:
+    is-callable "^1.1.3"
+
+for-editor@^0.3.5:
+  version "0.3.5"
+  resolved "https://registry.yarnpkg.com/for-editor/-/for-editor-0.3.5.tgz#f2b91026cc920b2d3d631b4db1a491b6f4fa25ff"
+  integrity sha512-yqhn+5do4+i0rgVt87GXnBEJRsC0vJjovQMnT1TsBwz6FUKhECEZdL+QUSGvxc4q71ajGc2zhIpe1YAHFjwegw==
+  dependencies:
+    highlight.js "^9.13.1"
+    marked "^0.6.2"
+
+for-in@^0.1.3:
+  version "0.1.8"
+  resolved "https://registry.yarnpkg.com/for-in/-/for-in-0.1.8.tgz#d8773908e31256109952b1fdb9b3fa867d2775e1"
+  integrity sha1-2Hc5COMSVhCZUrH9ubP6hn0ndeE=
+
+for-in@^1.0.1, for-in@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
+  integrity sha1-gQaNKVqBQuwKxybG4iAMMPttXoA=
+
+for-own@^0.1.3:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/for-own/-/for-own-0.1.5.tgz#5265c681a4f294dabbf17c9509b6763aa84510ce"
+  integrity sha1-UmXGgaTylNq78XyVCbZ2OqhFEM4=
+  dependencies:
+    for-in "^1.0.1"
+
+forever-agent@~0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/forever-agent/-/forever-agent-0.6.1.tgz#fbc71f0c41adeb37f96c577ad1ed42d8fdacca91"
+  integrity sha1-+8cfDEGt6zf5bFd60e1C2P2sypE=
+
+fork-ts-checker-webpack-plugin@1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-1.5.0.tgz#ce1d77190b44d81a761b10b6284a373795e41f0c"
+  integrity sha512-zEhg7Hz+KhZlBhILYpXy+Beu96gwvkROWJiTXOCyOOMMrdBIRPvsBpBqgTI4jfJGrJXcqGwJR8zsBGDmzY0jsA==
+  dependencies:
+    babel-code-frame "^6.22.0"
+    chalk "^2.4.1"
+    chokidar "^2.0.4"
+    micromatch "^3.1.10"
+    minimatch "^3.0.4"
+    semver "^5.6.0"
+    tapable "^1.0.0"
+    worker-rpc "^0.1.0"
+
+form-data@~2.3.2:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.3.3.tgz#dcce52c05f644f298c6a7ab936bd724ceffbf3a6"
+  integrity sha512-1lLKB2Mu3aGP1Q/2eCOx0fNbRMe7XdwktwOruhfqqd0rIJWwN4Dh+E3hrPSlDCXnSR7UtZ1N38rVXm+6+MEhJQ==
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.6"
+    mime-types "^2.1.12"
+
+forwarded@0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.2.0.tgz#2269936428aad4c15c7ebe9779a84bf0b2a81811"
+  integrity sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==
+
+fragment-cache@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/fragment-cache/-/fragment-cache-0.2.1.tgz#4290fad27f13e89be7f33799c6bc5a0abfff0d19"
+  integrity sha1-QpD60n8T6Jvn8zeZxrxaCr//DRk=
+  dependencies:
+    map-cache "^0.2.2"
+
+fresh@0.5.2:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
+  integrity sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=
+
+from2@^2.1.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/from2/-/from2-2.3.0.tgz#8bfb5502bde4a4d36cfdeea007fcca21d7e382af"
+  integrity sha1-i/tVAr3kpNNs/e6gB/zKIdfjgq8=
+  dependencies:
+    inherits "^2.0.1"
+    readable-stream "^2.0.0"
+
+fs-extra@7.0.1, fs-extra@^7.0.0:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-7.0.1.tgz#4f189c44aa123b895f722804f55ea23eadc348e9"
+  integrity sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==
+  dependencies:
+    graceful-fs "^4.1.2"
+    jsonfile "^4.0.0"
+    universalify "^0.1.0"
+
+fs-extra@^4.0.2:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-4.0.3.tgz#0d852122e5bc5beb453fb028e9c0c9bf36340c94"
+  integrity sha512-q6rbdDd1o2mAnQreO7YADIxf/Whx4AHBiRf6d+/cVT8h44ss+lHgxf1FemcqDnQt9X3ct4McHr+JMGlYSsK7Cg==
+  dependencies:
+    graceful-fs "^4.1.2"
+    jsonfile "^4.0.0"
+    universalify "^0.1.0"
+
+fs-extra@^8.1.0:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-8.1.0.tgz#49d43c45a88cd9677668cb7be1b46efdb8d2e1c0"
+  integrity sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==
+  dependencies:
+    graceful-fs "^4.2.0"
+    jsonfile "^4.0.0"
+    universalify "^0.1.0"
+
+fs-write-stream-atomic@^1.0.8:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/fs-write-stream-atomic/-/fs-write-stream-atomic-1.0.10.tgz#b47df53493ef911df75731e70a9ded0189db40c9"
+  integrity sha1-tH31NJPvkR33VzHnCp3tAYnbQMk=
+  dependencies:
+    graceful-fs "^4.1.2"
+    iferr "^0.1.5"
+    imurmurhash "^0.1.4"
+    readable-stream "1 || 2"
+
+fs.realpath@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
+  integrity sha1-FQStJSMVjKpA20onh8sBQRmU6k8=
+
+fsevents@^1.2.7:
+  version "1.2.13"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.2.13.tgz#f325cb0455592428bcf11b383370ef70e3bfcc38"
+  integrity sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==
+  dependencies:
+    bindings "^1.5.0"
+    nan "^2.12.1"
+
+fsevents@~2.3.2:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
+  integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
+
+function-bind@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
+  integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
+
+functional-red-black-tree@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327"
+  integrity sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=
+
+gensync@^1.0.0-beta.1, gensync@^1.0.0-beta.2:
+  version "1.0.0-beta.2"
+  resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0"
+  integrity sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==
+
+get-caller-file@^2.0.1:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"
+  integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
+
+get-intrinsic@^1.0.2, get-intrinsic@^1.1.0, get-intrinsic@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.1.1.tgz#15f59f376f855c446963948f0d24cd3637b4abc6"
+  integrity sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==
+  dependencies:
+    function-bind "^1.1.1"
+    has "^1.0.3"
+    has-symbols "^1.0.1"
+
+get-own-enumerable-property-symbols@^3.0.0:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.2.tgz#b5fde77f22cbe35f390b4e089922c50bce6ef664"
+  integrity sha512-I0UBV/XOz1XkIJHEUDMZAbzCThU/H8DxmSfmdGcKPnVhu2VfFqr34jr9777IyaTYvxjedWhqVIilEDsCdP5G6g==
+
+get-stream@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-4.1.0.tgz#c1b255575f3dc21d59bfc79cd3d2b46b1c3a54b5"
+  integrity sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==
+  dependencies:
+    pump "^3.0.0"
+
+get-symbol-description@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/get-symbol-description/-/get-symbol-description-1.0.0.tgz#7fdb81c900101fbd564dd5f1a30af5aadc1e58d6"
+  integrity sha512-2EmdH1YvIQiZpltCNgkuiUnyukzxM/R6NDJX31Ke3BG1Nq5b0S2PhX59UKi9vZpPDQVdqn+1IcaAwnzTT5vCjw==
+  dependencies:
+    call-bind "^1.0.2"
+    get-intrinsic "^1.1.1"
+
+get-value@^2.0.3, get-value@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/get-value/-/get-value-2.0.6.tgz#dc15ca1c672387ca76bd37ac0a395ba2042a2c28"
+  integrity sha1-3BXKHGcjh8p2vTesCjlbogQqLCg=
+
+getpass@^0.1.1:
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/getpass/-/getpass-0.1.7.tgz#5eff8e3e684d569ae4cb2b1282604e8ba62149fa"
+  integrity sha1-Xv+OPmhNVprkyysSgmBOi6YhSfo=
+  dependencies:
+    assert-plus "^1.0.0"
+
+glob-parent@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-3.1.0.tgz#9e6af6299d8d3bd2bd40430832bd113df906c5ae"
+  integrity sha1-nmr2KZ2NO9K9QEMIMr0RPfkGxa4=
+  dependencies:
+    is-glob "^3.1.0"
+    path-dirname "^1.0.0"
+
+glob-parent@^5.0.0, glob-parent@~5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
+  integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
+  dependencies:
+    is-glob "^4.0.1"
+
+glob-to-regexp@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.3.0.tgz#8c5a1494d2066c570cc3bfe4496175acc4d502ab"
+  integrity sha1-jFoUlNIGbFcMw7/kSWF1rMTVAqs=
+
+glob@^7.0.3, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.0.tgz#d15535af7732e02e948f4c41628bd910293f6023"
+  integrity sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^3.0.4"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
+global-modules@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/global-modules/-/global-modules-2.0.0.tgz#997605ad2345f27f51539bea26574421215c7780"
+  integrity sha512-NGbfmJBp9x8IxyJSd1P+otYK8vonoJactOogrVfFRIAEY1ukil8RSKDz2Yo7wh1oihl51l/r6W4epkeKJHqL8A==
+  dependencies:
+    global-prefix "^3.0.0"
+
+global-prefix@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/global-prefix/-/global-prefix-3.0.0.tgz#fc85f73064df69f50421f47f883fe5b913ba9b97"
+  integrity sha512-awConJSVCHVGND6x3tmMaKcQvwXLhjdkmomy2W+Goaui8YPgYgXJZewhg3fWC+DlfqqQuWg8AwqjGTD2nAPVWg==
+  dependencies:
+    ini "^1.3.5"
+    kind-of "^6.0.2"
+    which "^1.3.1"
+
+globals@^11.1.0:
+  version "11.12.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e"
+  integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==
+
+globals@^12.1.0:
+  version "12.4.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-12.4.0.tgz#a18813576a41b00a24a97e7f815918c2e19925f8"
+  integrity sha512-BWICuzzDvDoH54NHKCseDanAhE3CeDorgDL5MT6LMXXj2WCnd9UC2szdk4AWLfjdgNBCXLUanXYcpBBKOSWGwg==
+  dependencies:
+    type-fest "^0.8.1"
+
+globby@8.0.2:
+  version "8.0.2"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-8.0.2.tgz#5697619ccd95c5275dbb2d6faa42087c1a941d8d"
+  integrity sha512-yTzMmKygLp8RUpG1Ymu2VXPSJQZjNAZPD4ywgYEaG7e4tBJeUQBO8OpXrf1RCNcEs5alsoJYPAMiIHP0cmeC7w==
+  dependencies:
+    array-union "^1.0.1"
+    dir-glob "2.0.0"
+    fast-glob "^2.0.2"
+    glob "^7.1.2"
+    ignore "^3.3.5"
+    pify "^3.0.0"
+    slash "^1.0.0"
+
+globby@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-6.1.0.tgz#f5a6d70e8395e21c858fb0489d64df02424d506c"
+  integrity sha1-9abXDoOV4hyFj7BInWTfAkJNUGw=
+  dependencies:
+    array-union "^1.0.1"
+    glob "^7.0.3"
+    object-assign "^4.0.1"
+    pify "^2.0.0"
+    pinkie-promise "^2.0.0"
+
+globby@^7.1.1:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-7.1.1.tgz#fb2ccff9401f8600945dfada97440cca972b8680"
+  integrity sha1-+yzP+UAfhgCUXfral0QMypcrhoA=
+  dependencies:
+    array-union "^1.0.1"
+    dir-glob "^2.0.0"
+    glob "^7.1.2"
+    ignore "^3.3.5"
+    pify "^3.0.0"
+    slash "^1.0.0"
+
+graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0:
+  version "4.2.9"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.9.tgz#041b05df45755e587a24942279b9d113146e1c96"
+  integrity sha512-NtNxqUcXgpW2iMrfqSfR73Glt39K+BLwWsPs94yR63v45T0Wbej7eRmL5cWfwEgqXnmjQp3zaJTshdRW/qC2ZQ==
+
+growly@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
+  integrity sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE=
+
+gzip-size@5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/gzip-size/-/gzip-size-5.1.1.tgz#cb9bee692f87c0612b232840a873904e4c135274"
+  integrity sha512-FNHi6mmoHvs1mxZAds4PpdCS6QG8B4C1krxJsMutgxl5t3+GlRTzzI3NEkifXx2pVsOvJdOGSmIgDhQ55FwdPA==
+  dependencies:
+    duplexer "^0.1.1"
+    pify "^4.0.1"
+
+handle-thing@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-2.0.1.tgz#857f79ce359580c340d43081cc648970d0bb234e"
+  integrity sha512-9Qn4yBxelxoh2Ow62nP+Ka/kMnOXRi8BXnRaUwezLNhqelnN49xKz4F/dPP8OYLxLxq6JDtZb2i9XznUQbNPTg==
+
+har-schema@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-2.0.0.tgz#a94c2224ebcac04782a0d9035521f24735b7ec92"
+  integrity sha1-qUwiJOvKwEeCoNkDVSHyRzW37JI=
+
+har-validator@~5.1.3:
+  version "5.1.5"
+  resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-5.1.5.tgz#1f0803b9f8cb20c0fa13822df1ecddb36bde1efd"
+  integrity sha512-nmT2T0lljbxdQZfspsno9hgrG3Uir6Ks5afism62poxqBM6sDnMEuPmzTq8XN0OEwqKLLdh1jQI3qyE66Nzb3w==
+  dependencies:
+    ajv "^6.12.3"
+    har-schema "^2.0.0"
+
+harmony-reflect@^1.4.6:
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/harmony-reflect/-/harmony-reflect-1.6.2.tgz#31ecbd32e648a34d030d86adb67d4d47547fe710"
+  integrity sha512-HIp/n38R9kQjDEziXyDTuW3vvoxxyxjxFzXLrBr18uB47GnSt+G9D29fqrpM5ZkspMcPICud3XsBJQ4Y2URg8g==
+
+has-ansi@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/has-ansi/-/has-ansi-2.0.0.tgz#34f5049ce1ecdf2b0649af3ef24e45ed35416d91"
+  integrity sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=
+  dependencies:
+    ansi-regex "^2.0.0"
+
+has-bigints@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/has-bigints/-/has-bigints-1.0.1.tgz#64fe6acb020673e3b78db035a5af69aa9d07b113"
+  integrity sha512-LSBS2LjbNBTf6287JEbEzvJgftkF5qFkmCo9hDRpAzKhUOlJ+hx8dd4USs00SgsUNwc4617J9ki5YtEClM2ffA==
+
+has-flag@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
+  integrity sha1-tdRU3CGZriJWmfNGfloH87lVuv0=
+
+has-flag@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
+  integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
+
+has-symbols@^1.0.1, has-symbols@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.2.tgz#165d3070c00309752a1236a479331e3ac56f1423"
+  integrity sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw==
+
+has-tostringtag@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/has-tostringtag/-/has-tostringtag-1.0.0.tgz#7e133818a7d394734f941e73c3d3f9291e658b25"
+  integrity sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==
+  dependencies:
+    has-symbols "^1.0.2"
+
+has-value@^0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/has-value/-/has-value-0.3.1.tgz#7b1f58bada62ca827ec0a2078025654845995e1f"
+  integrity sha1-ex9YutpiyoJ+wKIHgCVlSEWZXh8=
+  dependencies:
+    get-value "^2.0.3"
+    has-values "^0.1.4"
+    isobject "^2.0.0"
+
+has-value@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/has-value/-/has-value-1.0.0.tgz#18b281da585b1c5c51def24c930ed29a0be6b177"
+  integrity sha1-GLKB2lhbHFxR3vJMkw7SmgvmsXc=
+  dependencies:
+    get-value "^2.0.6"
+    has-values "^1.0.0"
+    isobject "^3.0.0"
+
+has-values@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/has-values/-/has-values-0.1.4.tgz#6d61de95d91dfca9b9a02089ad384bff8f62b771"
+  integrity sha1-bWHeldkd/Km5oCCJrThL/49it3E=
+
+has-values@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/has-values/-/has-values-1.0.0.tgz#95b0b63fec2146619a6fe57fe75628d5a39efe4f"
+  integrity sha1-lbC2P+whRmGab+V/51Yo1aOe/k8=
+  dependencies:
+    is-number "^3.0.0"
+    kind-of "^4.0.0"
+
+has@^1.0.0, has@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/has/-/has-1.0.3.tgz#722d7cbfc1f6aa8241f16dd814e011e1f41e8796"
+  integrity sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==
+  dependencies:
+    function-bind "^1.1.1"
+
+hash-base@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/hash-base/-/hash-base-3.1.0.tgz#55c381d9e06e1d2997a883b4a3fddfe7f0d3af33"
+  integrity sha512-1nmYp/rhMDiE7AYkDw+lLwlAzz0AntGIe51F3RfFfEqyQ3feY2eI/NcwC6umIQVOASPMsWJLJScWKSSvzL9IVA==
+  dependencies:
+    inherits "^2.0.4"
+    readable-stream "^3.6.0"
+    safe-buffer "^5.2.0"
+
+hash.js@^1.0.0, hash.js@^1.0.3:
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/hash.js/-/hash.js-1.1.7.tgz#0babca538e8d4ee4a0f8988d68866537a003cf42"
+  integrity sha512-taOaskGt4z4SOANNseOviYDvjEJinIkRgmp7LbKP2YTTmVxWBl87s/uzK9r+44BclBSp2X7K1hqeNfz9JbBeXA==
+  dependencies:
+    inherits "^2.0.3"
+    minimalistic-assert "^1.0.1"
+
+he@1.2.x:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
+  integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
+
+hex-color-regex@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
+  integrity sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==
+
+highlight-words-core@^1.2.0:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/highlight-words-core/-/highlight-words-core-1.2.2.tgz#1eff6d7d9f0a22f155042a00791237791b1eeaaa"
+  integrity sha512-BXUKIkUuh6cmmxzi5OIbUJxrG8OAk2MqoL1DtO3Wo9D2faJg2ph5ntyuQeLqaHJmzER6H5tllCDA9ZnNe9BVGg==
+
+highlight.js@^9.13.1:
+  version "9.18.5"
+  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.18.5.tgz#d18a359867f378c138d6819edfc2a8acd5f29825"
+  integrity sha512-a5bFyofd/BHCX52/8i8uJkjr9DYwXIPnM/plwI6W7ezItLGqzt7X2G2nXuYSfsIJdkwwj/g9DG1LkcGJI/dDoA==
+
+history@^4.9.0:
+  version "4.10.1"
+  resolved "https://registry.yarnpkg.com/history/-/history-4.10.1.tgz#33371a65e3a83b267434e2b3f3b1b4c58aad4cf3"
+  integrity sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==
+  dependencies:
+    "@babel/runtime" "^7.1.2"
+    loose-envify "^1.2.0"
+    resolve-pathname "^3.0.0"
+    tiny-invariant "^1.0.2"
+    tiny-warning "^1.0.0"
+    value-equal "^1.0.1"
+
+hmac-drbg@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
+  integrity sha1-0nRXAQJabHdabFRXk+1QL8DGSaE=
+  dependencies:
+    hash.js "^1.0.3"
+    minimalistic-assert "^1.0.0"
+    minimalistic-crypto-utils "^1.0.1"
+
+hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
+  integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
+  dependencies:
+    react-is "^16.7.0"
+
+hosted-git-info@^2.1.4:
+  version "2.8.9"
+  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.9.tgz#dffc0bf9a21c02209090f2aa69429e1414daf3f9"
+  integrity sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==
+
+hpack.js@^2.1.6:
+  version "2.1.6"
+  resolved "https://registry.yarnpkg.com/hpack.js/-/hpack.js-2.1.6.tgz#87774c0949e513f42e84575b3c45681fade2a0b2"
+  integrity sha1-h3dMCUnlE/QuhFdbPEVoH63ioLI=
+  dependencies:
+    inherits "^2.0.1"
+    obuf "^1.0.0"
+    readable-stream "^2.0.1"
+    wbuf "^1.1.0"
+
+hsl-regex@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/hsl-regex/-/hsl-regex-1.0.0.tgz#d49330c789ed819e276a4c0d272dffa30b18fe6e"
+  integrity sha1-1JMwx4ntgZ4nakwNJy3/owsY/m4=
+
+hsla-regex@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/hsla-regex/-/hsla-regex-1.0.0.tgz#c1ce7a3168c8c6614033a4b5f7877f3b225f9c38"
+  integrity sha1-wc56MWjIxmFAM6S194d/OyJfnDg=
+
+html-encoding-sniffer@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/html-encoding-sniffer/-/html-encoding-sniffer-1.0.2.tgz#e70d84b94da53aa375e11fe3a351be6642ca46f8"
+  integrity sha512-71lZziiDnsuabfdYiUeWdCVyKuqwWi23L8YeIgV9jSSZHCtb6wB1BKWooH7L3tn4/FuZJMVWyNaIDr4RGmaSYw==
+  dependencies:
+    whatwg-encoding "^1.0.1"
+
+html-entities@^1.3.1:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-1.4.0.tgz#cfbd1b01d2afaf9adca1b10ae7dffab98c71d2dc"
+  integrity sha512-8nxjcBcd8wovbeKx7h3wTji4e6+rhaVuPNpMqwWgnHh+N9ToqsCs6XztWRBPQ+UtzsoMAdKZtUENoVzU/EMtZA==
+
+html-escaper@^2.0.0, html-escaper@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/html-escaper/-/html-escaper-2.0.2.tgz#dfd60027da36a36dfcbe236262c00a5822681453"
+  integrity sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==
+
+html-minifier@^3.5.20:
+  version "3.5.21"
+  resolved "https://registry.yarnpkg.com/html-minifier/-/html-minifier-3.5.21.tgz#d0040e054730e354db008463593194015212d20c"
+  integrity sha512-LKUKwuJDhxNa3uf/LPR/KVjm/l3rBqtYeCOAekvG8F1vItxMUpueGd94i/asDDr8/1u7InxzFA5EeGjhhG5mMA==
+  dependencies:
+    camel-case "3.0.x"
+    clean-css "4.2.x"
+    commander "2.17.x"
+    he "1.2.x"
+    param-case "2.1.x"
+    relateurl "0.2.x"
+    uglify-js "3.4.x"
+
+html-parse-stringify@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz#dfc1017347ce9f77c8141a507f233040c59c55d2"
+  integrity sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==
+  dependencies:
+    void-elements "3.1.0"
+
+html-webpack-plugin@4.0.0-beta.5:
+  version "4.0.0-beta.5"
+  resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-4.0.0-beta.5.tgz#2c53083c1151bfec20479b1f8aaf0039e77b5513"
+  integrity sha512-y5l4lGxOW3pz3xBTFdfB9rnnrWRPVxlAhX6nrBYIcW+2k2zC3mSp/3DxlWVCMBfnO6UAnoF8OcFn0IMy6kaKAQ==
+  dependencies:
+    html-minifier "^3.5.20"
+    loader-utils "^1.1.0"
+    lodash "^4.17.11"
+    pretty-error "^2.1.1"
+    tapable "^1.1.0"
+    util.promisify "1.0.0"
+
+htmlparser2@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-6.1.0.tgz#c4d762b6c3371a05dbe65e94ae43a9f845fb8fb7"
+  integrity sha512-gyyPk6rgonLFEDGoeRgQNaEUvdJ4ktTmmUh/h2t7s+M8oPpIPxgNACWa+6ESR57kXstwqPiCut0V8NRpcwgU7A==
+  dependencies:
+    domelementtype "^2.0.1"
+    domhandler "^4.0.0"
+    domutils "^2.5.2"
+    entities "^2.0.0"
+
+http-deceiver@^1.2.7:
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/http-deceiver/-/http-deceiver-1.2.7.tgz#fa7168944ab9a519d337cb0bec7284dc3e723d87"
+  integrity sha1-+nFolEq5pRnTN8sL7HKE3D5yPYc=
+
+http-errors@1.8.1:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.8.1.tgz#7c3f28577cbc8a207388455dbd62295ed07bd68c"
+  integrity sha512-Kpk9Sm7NmI+RHhnj6OIWDI1d6fIoFAtFt9RLaTMRlg/8w49juAStsrBgp0Dp4OdxdVbRIeKhtCUvoi/RuAhO4g==
+  dependencies:
+    depd "~1.1.2"
+    inherits "2.0.4"
+    setprototypeof "1.2.0"
+    statuses ">= 1.5.0 < 2"
+    toidentifier "1.0.1"
+
+http-errors@~1.6.2:
+  version "1.6.3"
+  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.6.3.tgz#8b55680bb4be283a0b5bf4ea2e38580be1d9320d"
+  integrity sha1-i1VoC7S+KDoLW/TqLjhYC+HZMg0=
+  dependencies:
+    depd "~1.1.2"
+    inherits "2.0.3"
+    setprototypeof "1.1.0"
+    statuses ">= 1.4.0 < 2"
+
+http-parser-js@>=0.5.1:
+  version "0.5.5"
+  resolved "https://registry.yarnpkg.com/http-parser-js/-/http-parser-js-0.5.5.tgz#d7c30d5d3c90d865b4a2e870181f9d6f22ac7ac5"
+  integrity sha512-x+JVEkO2PoM8qqpbPbOL3cqHPwerep7OwzK7Ay+sMQjKzaKCqWvjoXm5tqMP9tXWWTnTzAjIhXg+J99XYuPhPA==
+
+http-proxy-middleware@0.19.1:
+  version "0.19.1"
+  resolved "https://registry.yarnpkg.com/http-proxy-middleware/-/http-proxy-middleware-0.19.1.tgz#183c7dc4aa1479150306498c210cdaf96080a43a"
+  integrity sha512-yHYTgWMQO8VvwNS22eLLloAkvungsKdKTLO8AJlftYIKNfJr3GK3zK0ZCfzDDGUBttdGc8xFy1mCitvNKQtC3Q==
+  dependencies:
+    http-proxy "^1.17.0"
+    is-glob "^4.0.0"
+    lodash "^4.17.11"
+    micromatch "^3.1.10"
+
+http-proxy-middleware@^0.20.0:
+  version "0.20.0"
+  resolved "https://registry.yarnpkg.com/http-proxy-middleware/-/http-proxy-middleware-0.20.0.tgz#5b128f7207985c4ea91b53fab8ad897a48c690d6"
+  integrity sha512-dNJAk71nEJhPiAczQH9hGvE/MT9kEs+zn2Dh+Hi94PGZe1GluQirC7mw5rdREUtWx6qGS1Gu0bZd4qEAg+REgw==
+  dependencies:
+    http-proxy "^1.17.0"
+    is-glob "^4.0.1"
+    lodash "^4.17.14"
+    micromatch "^4.0.2"
+
+http-proxy@^1.17.0:
+  version "1.18.1"
+  resolved "https://registry.yarnpkg.com/http-proxy/-/http-proxy-1.18.1.tgz#401541f0534884bbf95260334e72f88ee3976549"
+  integrity sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==
+  dependencies:
+    eventemitter3 "^4.0.0"
+    follow-redirects "^1.0.0"
+    requires-port "^1.0.0"
+
+http-signature@~1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.2.0.tgz#9aecd925114772f3d95b65a60abb8f7c18fbace1"
+  integrity sha1-muzZJRFHcvPZW2WmCruPfBj7rOE=
+  dependencies:
+    assert-plus "^1.0.0"
+    jsprim "^1.2.2"
+    sshpk "^1.7.0"
+
+https-browserify@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-1.0.0.tgz#ec06c10e0a34c0f2faf199f7fd7fc78fffd03c73"
+  integrity sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=
+
+husky@^4.2.5:
+  version "4.3.8"
+  resolved "https://registry.yarnpkg.com/husky/-/husky-4.3.8.tgz#31144060be963fd6850e5cc8f019a1dfe194296d"
+  integrity sha512-LCqqsB0PzJQ/AlCgfrfzRe3e3+NvmefAdKQhRYpxS4u6clblBoDdzzvHi8fmxKRzvMxPY/1WZWzomPZww0Anow==
+  dependencies:
+    chalk "^4.0.0"
+    ci-info "^2.0.0"
+    compare-versions "^3.6.0"
+    cosmiconfig "^7.0.0"
+    find-versions "^4.0.0"
+    opencollective-postinstall "^2.0.2"
+    pkg-dir "^5.0.0"
+    please-upgrade-node "^3.2.0"
+    slash "^3.0.0"
+    which-pm-runs "^1.0.0"
+
+hyphenate-style-name@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz#691879af8e220aea5750e8827db4ef62a54e361d"
+  integrity sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ==
+
+i18next-browser-languagedetector@^6.1.4:
+  version "6.1.4"
+  resolved "https://registry.yarnpkg.com/i18next-browser-languagedetector/-/i18next-browser-languagedetector-6.1.4.tgz#7b087c5edb6f6acd38ef54ede2160ab9cde0108f"
+  integrity sha512-wukWnFeU7rKIWT66VU5i8I+3Zc4wReGcuDK2+kuFhtoxBRGWGdvYI9UQmqNL/yQH1KogWwh+xGEaIPH8V/i2Zg==
+  dependencies:
+    "@babel/runtime" "^7.14.6"
+
+i18next-chained-backend@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/i18next-chained-backend/-/i18next-chained-backend-4.2.0.tgz#8d2ccba6f2faca14d2bc5023ba61c759215b99a9"
+  integrity sha512-p3qhv6GMouhpcFPnOBqSDsQyVrwZu+PKr+kXaEAGE+w9O39t4pbpBsFYjxh4Nvhn8MUEXstaDx4ZuQvsNlI5fg==
+  dependencies:
+    "@babel/runtime" "^7.19.4"
+
+i18next-http-backend@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/i18next-http-backend/-/i18next-http-backend-1.4.0.tgz#e6abef0615316e00837798d2385c13395096f963"
+  integrity sha512-wsvx7E/CT1pHmBM99Vu57YLJpsrHbVjxGxf25EIJ/6oTjsvCkZZ6c3SA4TejcK5jIHfv9oLxQX8l+DFKZHZ0Gg==
+  dependencies:
+    cross-fetch "3.1.5"
+
+i18next-localstorage-backend@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/i18next-localstorage-backend/-/i18next-localstorage-backend-4.1.0.tgz#b2e99eb18312654b3b13b34bb25331fbe1d3b380"
+  integrity sha512-lxcuww2QSIvu3Ev5fiysTrAjNzWwhVh2u+/ZJCkxIg9Eo9KL5A8qQwmujlsdADs4YjfjxPm/GaivIYxcqWqKgg==
+  dependencies:
+    "@babel/runtime" "^7.20.6"
+
+i18next@^21.6.16:
+  version "21.6.16"
+  resolved "https://registry.yarnpkg.com/i18next/-/i18next-21.6.16.tgz#8cff8c3ba2ffaf8438a8c83fe284083f15cf3941"
+  integrity sha512-xJlzrVxG9CyAGsbMP1aKuiNr1Ed2m36KiTB7hjGMG2Zo4idfw3p9THUEu+GjBwIgEZ7F11ZbCzJcfv4uyfKNuw==
+  dependencies:
+    "@babel/runtime" "^7.17.2"
+
+iconv-lite@0.4.24, iconv-lite@^0.4.24:
+  version "0.4.24"
+  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
+  integrity sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==
+  dependencies:
+    safer-buffer ">= 2.1.2 < 3"
+
+icss-replace-symbols@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/icss-replace-symbols/-/icss-replace-symbols-1.1.0.tgz#06ea6f83679a7749e386cfe1fe812ae5db223ded"
+  integrity sha1-Bupvg2ead0njhs/h/oEq5dsiPe0=
+
+icss-utils@^4.1.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-4.1.1.tgz#21170b53789ee27447c2f47dd683081403f9a467"
+  integrity sha512-4aFq7wvWyMHKgxsH8QQtGpvbASCf+eM3wPRLI6R+MgAnTCZ6STYsRvttLvRWK0Nfif5piF394St3HeJDaljGPA==
+  dependencies:
+    postcss "^7.0.14"
+
+identity-obj-proxy@3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/identity-obj-proxy/-/identity-obj-proxy-3.0.0.tgz#94d2bda96084453ef36fbc5aaec37e0f79f1fc14"
+  integrity sha1-lNK9qWCERT7zb7xarsN+D3nx/BQ=
+  dependencies:
+    harmony-reflect "^1.4.6"
+
+ieee754@^1.1.4:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352"
+  integrity sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==
+
+iferr@^0.1.5:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/iferr/-/iferr-0.1.5.tgz#c60eed69e6d8fdb6b3104a1fcbca1c192dc5b501"
+  integrity sha1-xg7taebY/bazEEofy8ocGS3FtQE=
+
+ignore@^3.3.5:
+  version "3.3.10"
+  resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.3.10.tgz#0a97fb876986e8081c631160f8f9f389157f0043"
+  integrity sha512-Pgs951kaMm5GXP7MOvxERINe3gsaVjUWFm+UZPSq9xYriQAksyhg0csnS0KXSNRD5NmNdapXEpjxG49+AKh/ug==
+
+ignore@^4.0.6:
+  version "4.0.6"
+  resolved "https://registry.yarnpkg.com/ignore/-/ignore-4.0.6.tgz#750e3db5862087b4737ebac8207ffd1ef27b25fc"
+  integrity sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==
+
+immediate@~3.0.5:
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/immediate/-/immediate-3.0.6.tgz#9db1dbd0faf8de6fbe0f5dd5e56bb606280de69b"
+  integrity sha1-nbHb0Pr43m++D13V5Wu2BigN5ps=
+
+immer@1.10.0:
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/immer/-/immer-1.10.0.tgz#bad67605ba9c810275d91e1c2a47d4582e98286d"
+  integrity sha512-O3sR1/opvCDGLEVcvrGTMtLac8GJ5IwZC4puPrLuRj3l7ICKvkmA0vGuU9OW8mV9WIBRnaxp5GJh9IEAaNOoYg==
+
+"immutable@^3.8.1 || ^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.0.0.tgz#b86f78de6adef3608395efb269a91462797e2c23"
+  integrity sha512-zIE9hX70qew5qTUjSS7wi1iwj/l7+m54KWU247nhM3v806UdGj1yDndXj+IOYxxtW9zyLI+xqFNZjTuDaLUqFw==
+
+import-cwd@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/import-cwd/-/import-cwd-2.1.0.tgz#aa6cf36e722761285cb371ec6519f53e2435b0a9"
+  integrity sha1-qmzzbnInYShcs3HsZRn1PiQ1sKk=
+  dependencies:
+    import-from "^2.1.0"
+
+import-fresh@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-2.0.0.tgz#d81355c15612d386c61f9ddd3922d4304822a546"
+  integrity sha1-2BNVwVYS04bGH53dOSLUMEgipUY=
+  dependencies:
+    caller-path "^2.0.0"
+    resolve-from "^3.0.0"
+
+import-fresh@^3.0.0, import-fresh@^3.1.0, import-fresh@^3.2.1:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"
+  integrity sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==
+  dependencies:
+    parent-module "^1.0.0"
+    resolve-from "^4.0.0"
+
+import-from@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/import-from/-/import-from-2.1.0.tgz#335db7f2a7affd53aaa471d4b8021dee36b7f3b1"
+  integrity sha1-M1238qev/VOqpHHUuAId7ja387E=
+  dependencies:
+    resolve-from "^3.0.0"
+
+import-local@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/import-local/-/import-local-2.0.0.tgz#55070be38a5993cf18ef6db7e961f5bee5c5a09d"
+  integrity sha512-b6s04m3O+s3CGSbqDIyP4R6aAwAeYlVq9+WUWep6iHa8ETRf9yei1U48C5MmfJmV9AiLYYBKPMq/W+/WRpQmCQ==
+  dependencies:
+    pkg-dir "^3.0.0"
+    resolve-cwd "^2.0.0"
+
+imurmurhash@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
+  integrity sha1-khi5srkoojixPcT7a21XbyMUU+o=
+
+indexes-of@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/indexes-of/-/indexes-of-1.0.1.tgz#f30f716c8e2bd346c7b67d3df3915566a7c05607"
+  integrity sha1-8w9xbI4r00bHtn0985FVZqfAVgc=
+
+infer-owner@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/infer-owner/-/infer-owner-1.0.4.tgz#c4cefcaa8e51051c2a40ba2ce8a3d27295af9467"
+  integrity sha512-IClj+Xz94+d7irH5qRyfJonOdfTzuDaifE6ZPWfx0N0+/ATZCbuTPq2prFl526urkQd90WyUKIh1DfBQ2hMz9A==
+
+inflight@^1.0.4:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
+  integrity sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=
+  dependencies:
+    once "^1.3.0"
+    wrappy "1"
+
+inherits@2, inherits@2.0.4, inherits@^2.0.1, inherits@^2.0.3, inherits@^2.0.4, inherits@~2.0.1, inherits@~2.0.3:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
+  integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
+
+inherits@2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.1.tgz#b17d08d326b4423e568eff719f91b0b1cbdf69f1"
+  integrity sha1-sX0I0ya0Qj5Wjv9xn5GwscvfafE=
+
+inherits@2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
+  integrity sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=
+
+ini@^1.3.5:
+  version "1.3.8"
+  resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.8.tgz#a29da425b48806f34767a4efce397269af28432c"
+  integrity sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==
+
+inquirer@6.5.0:
+  version "6.5.0"
+  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-6.5.0.tgz#2303317efc9a4ea7ec2e2df6f86569b734accf42"
+  integrity sha512-scfHejeG/lVZSpvCXpsB4j/wQNPM5JC8kiElOI0OUTwmc1RTpXr4H32/HOlQHcZiYl2z2VElwuCVDRG8vFmbnA==
+  dependencies:
+    ansi-escapes "^3.2.0"
+    chalk "^2.4.2"
+    cli-cursor "^2.1.0"
+    cli-width "^2.0.0"
+    external-editor "^3.0.3"
+    figures "^2.0.0"
+    lodash "^4.17.12"
+    mute-stream "0.0.7"
+    run-async "^2.2.0"
+    rxjs "^6.4.0"
+    string-width "^2.1.0"
+    strip-ansi "^5.1.0"
+    through "^2.3.6"
+
+inquirer@^7.0.0:
+  version "7.3.3"
+  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-7.3.3.tgz#04d176b2af04afc157a83fd7c100e98ee0aad003"
+  integrity sha512-JG3eIAj5V9CwcGvuOmoo6LB9kbAYT8HXffUl6memuszlwDC/qvFAJw49XJ5NROSFNPxp3iQg1GqkFhaY/CR0IA==
+  dependencies:
+    ansi-escapes "^4.2.1"
+    chalk "^4.1.0"
+    cli-cursor "^3.1.0"
+    cli-width "^3.0.0"
+    external-editor "^3.0.3"
+    figures "^3.0.0"
+    lodash "^4.17.19"
+    mute-stream "0.0.8"
+    run-async "^2.4.0"
+    rxjs "^6.6.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+    through "^2.3.6"
+
+internal-ip@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/internal-ip/-/internal-ip-4.3.0.tgz#845452baad9d2ca3b69c635a137acb9a0dad0907"
+  integrity sha512-S1zBo1D6zcsyuC6PMmY5+55YMILQ9av8lotMx447Bq6SAgo/sDK6y6uUKmuYhW7eacnIhFfsPmCNYdDzsnnDCg==
+  dependencies:
+    default-gateway "^4.2.0"
+    ipaddr.js "^1.9.0"
+
+internal-slot@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.0.3.tgz#7347e307deeea2faac2ac6205d4bc7d34967f59c"
+  integrity sha512-O0DB1JC/sPyZl7cIo78n5dR7eUSwwpYPiXRhTzNxZVAMUuB8vlnRFyLxdrVToks6XPLVnFfbzaVd5WLjhgg+vA==
+  dependencies:
+    get-intrinsic "^1.1.0"
+    has "^1.0.3"
+    side-channel "^1.0.4"
+
+internmap@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/internmap/-/internmap-1.0.1.tgz#0017cc8a3b99605f0302f2b198d272e015e5df95"
+  integrity sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw==
+
+intersection-observer@^0.12.0:
+  version "0.12.2"
+  resolved "https://registry.yarnpkg.com/intersection-observer/-/intersection-observer-0.12.2.tgz#4a45349cc0cd91916682b1f44c28d7ec737dc375"
+  integrity sha512-7m1vEcPCxXYI8HqnL8CKI6siDyD+eIWSwgB3DZA+ZTogxk9I4CDnj4wilt9x/+/QbHI4YG5YZNmC6458/e9Ktg==
+
+invariant@^2.2.2, invariant@^2.2.4:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
+  integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==
+  dependencies:
+    loose-envify "^1.0.0"
+
+ip-regex@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/ip-regex/-/ip-regex-2.1.0.tgz#fa78bf5d2e6913c911ce9f819ee5146bb6d844e9"
+  integrity sha1-+ni/XS5pE8kRzp+BnuUUa7bYROk=
+
+ip@^1.1.0, ip@^1.1.5:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/ip/-/ip-1.1.5.tgz#bdded70114290828c0a039e72ef25f5aaec4354a"
+  integrity sha1-vd7XARQpCCjAoDnnLvJfWq7ENUo=
+
+ipaddr.js@1.9.1, ipaddr.js@^1.9.0:
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.9.1.tgz#bff38543eeb8984825079ff3a2a8e6cbd46781b3"
+  integrity sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==
+
+is-absolute-url@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-absolute-url/-/is-absolute-url-2.1.0.tgz#50530dfb84fcc9aa7dbe7852e83a37b93b9f2aa6"
+  integrity sha1-UFMN+4T8yap9vnhS6Do3uTufKqY=
+
+is-absolute-url@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/is-absolute-url/-/is-absolute-url-3.0.3.tgz#96c6a22b6a23929b11ea0afb1836c36ad4a5d698"
+  integrity sha512-opmNIX7uFnS96NtPmhWQgQx6/NYFgsUXYMllcfzwWKUMwfo8kku1TvE6hkNcH+Q1ts5cMVrsY7j0bxXQDciu9Q==
+
+is-accessor-descriptor@^0.1.6:
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz#a9e12cb3ae8d876727eeef3843f8a0897b5c98d6"
+  integrity sha1-qeEss66Nh2cn7u84Q/igiXtcmNY=
+  dependencies:
+    kind-of "^3.0.2"
+
+is-accessor-descriptor@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz#169c2f6d3df1f992618072365c9b0ea1f6878656"
+  integrity sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==
+  dependencies:
+    kind-of "^6.0.0"
+
+is-arguments@^1.0.4:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/is-arguments/-/is-arguments-1.1.1.tgz#15b3f88fda01f2a97fec84ca761a560f123efa9b"
+  integrity sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==
+  dependencies:
+    call-bind "^1.0.2"
+    has-tostringtag "^1.0.0"
+
+is-arrayish@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
+  integrity sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=
+
+is-arrayish@^0.3.1:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.3.2.tgz#4574a2ae56f7ab206896fb431eaeed066fdf8f03"
+  integrity sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==
+
+is-bigint@^1.0.1:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.0.4.tgz#08147a1875bc2b32005d41ccd8291dffc6691df3"
+  integrity sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==
+  dependencies:
+    has-bigints "^1.0.1"
+
+is-binary-path@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-1.0.1.tgz#75f16642b480f187a711c814161fd3a4a7655898"
+  integrity sha1-dfFmQrSA8YenEcgUFh/TpKdlWJg=
+  dependencies:
+    binary-extensions "^1.0.0"
+
+is-binary-path@~2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
+  integrity sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==
+  dependencies:
+    binary-extensions "^2.0.0"
+
+is-boolean-object@^1.1.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.1.2.tgz#5c6dc200246dd9321ae4b885a114bb1f75f63719"
+  integrity sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==
+  dependencies:
+    call-bind "^1.0.2"
+    has-tostringtag "^1.0.0"
+
+is-buffer@^1.0.2, is-buffer@^1.1.5:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
+  integrity sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==
+
+is-callable@^1.1.3, is-callable@^1.1.4, is-callable@^1.2.4:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.4.tgz#47301d58dd0259407865547853df6d61fe471945"
+  integrity sha512-nsuwtxZfMX67Oryl9LCQ+upnC0Z0BgpwntpS89m1H/TLF0zNfzfLMV/9Wa/6MZsj0acpEjAO0KF1xT6ZdLl95w==
+
+is-ci@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-2.0.0.tgz#6bc6334181810e04b5c22b3d589fdca55026404c"
+  integrity sha512-YfJT7rkpQB0updsdHLGWrvhBJfcfzNNawYDNIyQXJz0IViGf75O8EBPKSdvw2rF+LGCsX4FZ8tcr3b19LcZq4w==
+  dependencies:
+    ci-info "^2.0.0"
+
+is-color-stop@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-color-stop/-/is-color-stop-1.1.0.tgz#cfff471aee4dd5c9e158598fbe12967b5cdad345"
+  integrity sha1-z/9HGu5N1cnhWFmPvhKWe1za00U=
+  dependencies:
+    css-color-names "^0.0.4"
+    hex-color-regex "^1.1.0"
+    hsl-regex "^1.0.0"
+    hsla-regex "^1.0.0"
+    rgb-regex "^1.0.1"
+    rgba-regex "^1.0.0"
+
+is-core-module@^2.2.0, is-core-module@^2.8.1:
+  version "2.8.1"
+  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.8.1.tgz#f59fdfca701d5879d0a6b100a40aa1560ce27211"
+  integrity sha512-SdNCUs284hr40hFTFP6l0IfZ/RSrMXF3qgoRHd3/79unUTvrFO/JoXwkGm+5J/Oe3E/b5GsnG330uUNgRpu1PA==
+  dependencies:
+    has "^1.0.3"
+
+is-data-descriptor@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz#0b5ee648388e2c860282e793f1856fec3f301b56"
+  integrity sha1-C17mSDiOLIYCgueT8YVv7D8wG1Y=
+  dependencies:
+    kind-of "^3.0.2"
+
+is-data-descriptor@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz#d84876321d0e7add03990406abbbbd36ba9268c7"
+  integrity sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==
+  dependencies:
+    kind-of "^6.0.0"
+
+is-date-object@^1.0.1:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.5.tgz#0841d5536e724c25597bf6ea62e1bd38298df31f"
+  integrity sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==
+  dependencies:
+    has-tostringtag "^1.0.0"
+
+is-descriptor@^0.1.0:
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/is-descriptor/-/is-descriptor-0.1.6.tgz#366d8240dde487ca51823b1ab9f07a10a78251ca"
+  integrity sha512-avDYr0SB3DwO9zsMov0gKCESFYqCnE4hq/4z3TdUlukEy5t9C0YRq7HLrsN52NAcqXKaepeCD0n+B0arnVG3Hg==
+  dependencies:
+    is-accessor-descriptor "^0.1.6"
+    is-data-descriptor "^0.1.4"
+    kind-of "^5.0.0"
+
+is-descriptor@^1.0.0, is-descriptor@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-descriptor/-/is-descriptor-1.0.2.tgz#3b159746a66604b04f8c81524ba365c5f14d86ec"
+  integrity sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==
+  dependencies:
+    is-accessor-descriptor "^1.0.0"
+    is-data-descriptor "^1.0.0"
+    kind-of "^6.0.2"
+
+is-directory@^0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/is-directory/-/is-directory-0.3.1.tgz#61339b6f2475fc772fd9c9d83f5c8575dc154ae1"
+  integrity sha1-YTObbyR1/Hcv2cnYP1yFddwVSuE=
+
+is-extendable@^0.1.0, is-extendable@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-0.1.1.tgz#62b110e289a471418e3ec36a617d472e301dfc89"
+  integrity sha1-YrEQ4omkcUGOPsNqYX1HLjAd/Ik=
+
+is-extendable@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-1.0.1.tgz#a7470f9e426733d81bd81e1155264e3a3507cab4"
+  integrity sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==
+  dependencies:
+    is-plain-object "^2.0.4"
+
+is-extglob@^2.1.0, is-extglob@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
+  integrity sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=
+
+is-fullwidth-code-point@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz#a3b30a5c4f199183167aaab93beefae3ddfb654f"
+  integrity sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=
+
+is-fullwidth-code-point@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz#f116f8064fe90b3f7844a38997c0b75051269f1d"
+  integrity sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==
+
+is-generator-fn@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-generator-fn/-/is-generator-fn-2.1.0.tgz#7d140adc389aaf3011a8f2a2a4cfa6faadffb118"
+  integrity sha512-cTIB4yPYL/Grw0EaSzASzg6bBy9gqCofvWN8okThAYIxKJZC+udlRAmGbM0XLeniEJSs8uEgHPGuHSe1XsOLSQ==
+
+is-glob@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-3.1.0.tgz#7ba5ae24217804ac70707b96922567486cc3e84a"
+  integrity sha1-e6WuJCF4BKxwcHuWkiVnSGzD6Eo=
+  dependencies:
+    is-extglob "^2.1.0"
+
+is-glob@^4.0.0, is-glob@^4.0.1, is-glob@~4.0.1:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.3.tgz#64f61e42cbbb2eec2071a9dac0b28ba1e65d5084"
+  integrity sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==
+  dependencies:
+    is-extglob "^2.1.1"
+
+is-in-browser@^1.0.2, is-in-browser@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/is-in-browser/-/is-in-browser-1.1.3.tgz#56ff4db683a078c6082eb95dad7dc62e1d04f835"
+  integrity sha1-Vv9NtoOgeMYILrldrX3GLh0E+DU=
+
+is-negative-zero@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/is-negative-zero/-/is-negative-zero-2.0.2.tgz#7bf6f03a28003b8b3965de3ac26f664d765f3150"
+  integrity sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA==
+
+is-number-object@^1.0.4:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.0.6.tgz#6a7aaf838c7f0686a50b4553f7e54a96494e89f0"
+  integrity sha512-bEVOqiRcvo3zO1+G2lVMy+gkkEm9Yh7cDMRusKKu5ZJKPUYSJwICTKZrNKHA2EbSP0Tu0+6B/emsYNHZyn6K8g==
+  dependencies:
+    has-tostringtag "^1.0.0"
+
+is-number@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/is-number/-/is-number-3.0.0.tgz#24fd6201a4782cf50561c810276afc7d12d71195"
+  integrity sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=
+  dependencies:
+    kind-of "^3.0.2"
+
+is-number@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
+  integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
+
+is-obj@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-obj/-/is-obj-1.0.1.tgz#3e4729ac1f5fde025cd7d83a896dab9f4f67db0f"
+  integrity sha1-PkcprB9f3gJc19g6iW2rn09n2w8=
+
+is-obj@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-obj/-/is-obj-2.0.0.tgz#473fb05d973705e3fd9620545018ca8e22ef4982"
+  integrity sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w==
+
+is-path-cwd@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/is-path-cwd/-/is-path-cwd-2.2.0.tgz#67d43b82664a7b5191fd9119127eb300048a9fdb"
+  integrity sha512-w942bTcih8fdJPJmQHFzkS76NEP8Kzzvmw92cXsazb8intwLqPibPPdXf4ANdKV3rYMuuQYGIWtvz9JilB3NFQ==
+
+is-path-in-cwd@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-path-in-cwd/-/is-path-in-cwd-2.1.0.tgz#bfe2dca26c69f397265a4009963602935a053acb"
+  integrity sha512-rNocXHgipO+rvnP6dk3zI20RpOtrAM/kzbB258Uw5BWr3TpXi861yzjo16Dn4hUox07iw5AyeMLHWsujkjzvRQ==
+  dependencies:
+    is-path-inside "^2.1.0"
+
+is-path-inside@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-2.1.0.tgz#7c9810587d659a40d27bcdb4d5616eab059494b2"
+  integrity sha512-wiyhTzfDWsvwAW53OBWF5zuvaOGlZ6PwYxAbPVDhpm+gM09xKQGjBq/8uYN12aDvMxnAnq3dxTyoSoRNmg5YFg==
+  dependencies:
+    path-is-inside "^1.0.2"
+
+is-plain-obj@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-1.1.0.tgz#71a50c8429dfca773c92a390a4a03b39fcd51d3e"
+  integrity sha1-caUMhCnfync8kqOQpKA7OfzVHT4=
+
+is-plain-object@^2.0.1, is-plain-object@^2.0.3, is-plain-object@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-2.0.4.tgz#2c163b3fafb1b606d9d17928f05c2a1c38e07677"
+  integrity sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==
+  dependencies:
+    isobject "^3.0.1"
+
+is-regex@^1.0.4, is-regex@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.4.tgz#eef5663cd59fa4c0ae339505323df6854bb15958"
+  integrity sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==
+  dependencies:
+    call-bind "^1.0.2"
+    has-tostringtag "^1.0.0"
+
+is-regexp@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-regexp/-/is-regexp-1.0.0.tgz#fd2d883545c46bac5a633e7b9a09e87fa2cb5069"
+  integrity sha1-/S2INUXEa6xaYz57mgnof6LLUGk=
+
+is-resolvable@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-resolvable/-/is-resolvable-1.1.0.tgz#fb18f87ce1feb925169c9a407c19318a3206ed88"
+  integrity sha512-qgDYXFSR5WvEfuS5dMj6oTMEbrrSaM0CrFk2Yiq/gXnBvD9pMa2jGXxyhGLfvhZpuMZe18CJpFxAt3CRs42NMg==
+
+is-root@2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-root/-/is-root-2.1.0.tgz#809e18129cf1129644302a4f8544035d51984a9c"
+  integrity sha512-AGOriNp96vNBd3HtU+RzFEc75FfR5ymiYv8E553I71SCeXBiMsVDUtdio1OEFvrPyLIQ9tVR5RxXIFe5PUFjMg==
+
+is-shared-array-buffer@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-shared-array-buffer/-/is-shared-array-buffer-1.0.1.tgz#97b0c85fbdacb59c9c446fe653b82cf2b5b7cfe6"
+  integrity sha512-IU0NmyknYZN0rChcKhRO1X8LYz5Isj/Fsqh8NJOSf+N/hCOTwy29F32Ik7a+QszE63IdvmwdTPDd6cZ5pg4cwA==
+
+is-stream@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
+  integrity sha1-EtSj3U5o4Lec6428hBc66A2RykQ=
+
+is-string@^1.0.5, is-string@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.7.tgz#0dd12bf2006f255bb58f695110eff7491eebc0fd"
+  integrity sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==
+  dependencies:
+    has-tostringtag "^1.0.0"
+
+is-symbol@^1.0.2, is-symbol@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.4.tgz#a6dac93b635b063ca6872236de88910a57af139c"
+  integrity sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==
+  dependencies:
+    has-symbols "^1.0.2"
+
+is-typedarray@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
+  integrity sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=
+
+is-weakref@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-weakref/-/is-weakref-1.0.2.tgz#9529f383a9338205e89765e0392efc2f100f06f2"
+  integrity sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==
+  dependencies:
+    call-bind "^1.0.2"
+
+is-windows@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
+  integrity sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==
+
+is-wsl@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-1.1.0.tgz#1f16e4aa22b04d1336b66188a66af3c600c3a66d"
+  integrity sha1-HxbkqiKwTRM2tmGIpmrzxgDDpm0=
+
+isarray@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"
+  integrity sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=
+
+isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
+  integrity sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=
+
+isexe@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
+  integrity sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=
+
+isobject@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/isobject/-/isobject-2.1.0.tgz#f065561096a3f1da2ef46272f815c840d87e0c89"
+  integrity sha1-8GVWEJaj8dou9GJy+BXIQNh+DIk=
+  dependencies:
+    isarray "1.0.0"
+
+isobject@^3.0.0, isobject@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
+  integrity sha1-TkMekrEalzFjaqH5yNHMvP2reN8=
+
+isstream@~0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
+  integrity sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=
+
+istanbul-lib-coverage@^2.0.2, istanbul-lib-coverage@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.5.tgz#675f0ab69503fad4b1d849f736baaca803344f49"
+  integrity sha512-8aXznuEPCJvGnMSRft4udDRDtb1V3pkQkMMI5LI+6HuQz5oQ4J2UFn1H82raA3qJtyOLkkwVqICBQkjnGtn5mA==
+
+istanbul-lib-instrument@^3.0.1, istanbul-lib-instrument@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-3.3.0.tgz#a5f63d91f0bbc0c3e479ef4c5de027335ec6d630"
+  integrity sha512-5nnIN4vo5xQZHdXno/YDXJ0G+I3dAm4XgzfSVTPLQpj/zAV2dV6Juy0yaf10/zrJOJeHoN3fraFe+XRq2bFVZA==
+  dependencies:
+    "@babel/generator" "^7.4.0"
+    "@babel/parser" "^7.4.3"
+    "@babel/template" "^7.4.0"
+    "@babel/traverse" "^7.4.3"
+    "@babel/types" "^7.4.0"
+    istanbul-lib-coverage "^2.0.5"
+    semver "^6.0.0"
+
+istanbul-lib-report@^2.0.4:
+  version "2.0.8"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-report/-/istanbul-lib-report-2.0.8.tgz#5a8113cd746d43c4889eba36ab10e7d50c9b4f33"
+  integrity sha512-fHBeG573EIihhAblwgxrSenp0Dby6tJMFR/HvlerBsrCTD5bkUuoNtn3gVh29ZCS824cGGBPn7Sg7cNk+2xUsQ==
+  dependencies:
+    istanbul-lib-coverage "^2.0.5"
+    make-dir "^2.1.0"
+    supports-color "^6.1.0"
+
+istanbul-lib-source-maps@^3.0.1:
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-source-maps/-/istanbul-lib-source-maps-3.0.6.tgz#284997c48211752ec486253da97e3879defba8c8"
+  integrity sha512-R47KzMtDJH6X4/YW9XTx+jrLnZnscW4VpNN+1PViSYTejLVPWv7oov+Duf8YQSPyVRUvueQqz1TcsC6mooZTXw==
+  dependencies:
+    debug "^4.1.1"
+    istanbul-lib-coverage "^2.0.5"
+    make-dir "^2.1.0"
+    rimraf "^2.6.3"
+    source-map "^0.6.1"
+
+istanbul-reports@^2.2.6:
+  version "2.2.7"
+  resolved "https://registry.yarnpkg.com/istanbul-reports/-/istanbul-reports-2.2.7.tgz#5d939f6237d7b48393cc0959eab40cd4fd056931"
+  integrity sha512-uu1F/L1o5Y6LzPVSVZXNOoD/KXpJue9aeLRd0sM9uMXfZvzomB0WxVamWb5ue8kA2vVWEmW7EG+A5n3f1kqHKg==
+  dependencies:
+    html-escaper "^2.0.0"
+
+jest-changed-files@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-24.9.0.tgz#08d8c15eb79a7fa3fc98269bc14b451ee82f8039"
+  integrity sha512-6aTWpe2mHF0DhL28WjdkO8LyGjs3zItPET4bMSeXU6T3ub4FPMw+mcOcbdGXQOAfmLcxofD23/5Bl9Z4AkFwqg==
+  dependencies:
+    "@jest/types" "^24.9.0"
+    execa "^1.0.0"
+    throat "^4.0.0"
+
+jest-cli@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-cli/-/jest-cli-24.9.0.tgz#ad2de62d07472d419c6abc301fc432b98b10d2af"
+  integrity sha512-+VLRKyitT3BWoMeSUIHRxV/2g8y9gw91Jh5z2UmXZzkZKpbC08CSehVxgHUwTpy+HwGcns/tqafQDJW7imYvGg==
+  dependencies:
+    "@jest/core" "^24.9.0"
+    "@jest/test-result" "^24.9.0"
+    "@jest/types" "^24.9.0"
+    chalk "^2.0.1"
+    exit "^0.1.2"
+    import-local "^2.0.0"
+    is-ci "^2.0.0"
+    jest-config "^24.9.0"
+    jest-util "^24.9.0"
+    jest-validate "^24.9.0"
+    prompts "^2.0.1"
+    realpath-native "^1.1.0"
+    yargs "^13.3.0"
+
+jest-config@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-config/-/jest-config-24.9.0.tgz#fb1bbc60c73a46af03590719efa4825e6e4dd1b5"
+  integrity sha512-RATtQJtVYQrp7fvWg6f5y3pEFj9I+H8sWw4aKxnDZ96mob5i5SD6ZEGWgMLXQ4LE8UurrjbdlLWdUeo+28QpfQ==
+  dependencies:
+    "@babel/core" "^7.1.0"
+    "@jest/test-sequencer" "^24.9.0"
+    "@jest/types" "^24.9.0"
+    babel-jest "^24.9.0"
+    chalk "^2.0.1"
+    glob "^7.1.1"
+    jest-environment-jsdom "^24.9.0"
+    jest-environment-node "^24.9.0"
+    jest-get-type "^24.9.0"
+    jest-jasmine2 "^24.9.0"
+    jest-regex-util "^24.3.0"
+    jest-resolve "^24.9.0"
+    jest-util "^24.9.0"
+    jest-validate "^24.9.0"
+    micromatch "^3.1.10"
+    pretty-format "^24.9.0"
+    realpath-native "^1.1.0"
+
+jest-diff@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-24.9.0.tgz#931b7d0d5778a1baf7452cb816e325e3724055da"
+  integrity sha512-qMfrTs8AdJE2iqrTp0hzh7kTd2PQWrsFyj9tORoKmu32xjPjeE4NyjVRDz8ybYwqS2ik8N4hsIpiVTyFeo2lBQ==
+  dependencies:
+    chalk "^2.0.1"
+    diff-sequences "^24.9.0"
+    jest-get-type "^24.9.0"
+    pretty-format "^24.9.0"
+
+jest-diff@^25.2.1:
+  version "25.5.0"
+  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-25.5.0.tgz#1dd26ed64f96667c068cef026b677dfa01afcfa9"
+  integrity sha512-z1kygetuPiREYdNIumRpAHY6RXiGmp70YHptjdaxTWGmA085W3iCnXNx0DhflK3vwrKmrRWyY1wUpkPMVxMK7A==
+  dependencies:
+    chalk "^3.0.0"
+    diff-sequences "^25.2.6"
+    jest-get-type "^25.2.6"
+    pretty-format "^25.5.0"
+
+jest-docblock@^24.3.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-24.9.0.tgz#7970201802ba560e1c4092cc25cbedf5af5a8ce2"
+  integrity sha512-F1DjdpDMJMA1cN6He0FNYNZlo3yYmOtRUnktrT9Q37njYzC5WEaDdmbynIgy0L/IvXvvgsG8OsqhLPXTpfmZAA==
+  dependencies:
+    detect-newline "^2.1.0"
+
+jest-each@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-each/-/jest-each-24.9.0.tgz#eb2da602e2a610898dbc5f1f6df3ba86b55f8b05"
+  integrity sha512-ONi0R4BvW45cw8s2Lrx8YgbeXL1oCQ/wIDwmsM3CqM/nlblNCPmnC3IPQlMbRFZu3wKdQ2U8BqM6lh3LJ5Bsog==
+  dependencies:
+    "@jest/types" "^24.9.0"
+    chalk "^2.0.1"
+    jest-get-type "^24.9.0"
+    jest-util "^24.9.0"
+    pretty-format "^24.9.0"
+
+jest-environment-jsdom-fourteen@0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/jest-environment-jsdom-fourteen/-/jest-environment-jsdom-fourteen-0.1.0.tgz#aad6393a9d4b565b69a609109bf469f62bf18ccc"
+  integrity sha512-4vtoRMg7jAstitRzL4nbw83VmGH8Rs13wrND3Ud2o1fczDhMUF32iIrNKwYGgeOPUdfvZU4oy8Bbv+ni1fgVCA==
+  dependencies:
+    jest-mock "^24.5.0"
+    jest-util "^24.5.0"
+    jsdom "^14.0.0"
+
+jest-environment-jsdom@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-environment-jsdom/-/jest-environment-jsdom-24.9.0.tgz#4b0806c7fc94f95edb369a69cc2778eec2b7375b"
+  integrity sha512-Zv9FV9NBRzLuALXjvRijO2351DRQeLYXtpD4xNvfoVFw21IOKNhZAEUKcbiEtjTkm2GsJ3boMVgkaR7rN8qetA==
+  dependencies:
+    "@jest/environment" "^24.9.0"
+    "@jest/fake-timers" "^24.9.0"
+    "@jest/types" "^24.9.0"
+    jest-mock "^24.9.0"
+    jest-util "^24.9.0"
+    jsdom "^11.5.1"
+
+jest-environment-node@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-environment-node/-/jest-environment-node-24.9.0.tgz#333d2d2796f9687f2aeebf0742b519f33c1cbfd3"
+  integrity sha512-6d4V2f4nxzIzwendo27Tr0aFm+IXWa0XEUnaH6nU0FMaozxovt+sfRvh4J47wL1OvF83I3SSTu0XK+i4Bqe7uA==
+  dependencies:
+    "@jest/environment" "^24.9.0"
+    "@jest/fake-timers" "^24.9.0"
+    "@jest/types" "^24.9.0"
+    jest-mock "^24.9.0"
+    jest-util "^24.9.0"
+
+jest-get-type@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-24.9.0.tgz#1684a0c8a50f2e4901b6644ae861f579eed2ef0e"
+  integrity sha512-lUseMzAley4LhIcpSP9Jf+fTrQ4a1yHQwLNeeVa2cEmbCGeoZAtYPOIv8JaxLD/sUpKxetKGP+gsHl8f8TSj8Q==
+
+jest-get-type@^25.2.6:
+  version "25.2.6"
+  resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-25.2.6.tgz#0b0a32fab8908b44d508be81681487dbabb8d877"
+  integrity sha512-DxjtyzOHjObRM+sM1knti6or+eOgcGU4xVSb2HNP1TqO4ahsT+rqZg+nyqHWJSvWgKC5cG3QjGFBqxLghiF/Ig==
+
+jest-haste-map@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-24.9.0.tgz#b38a5d64274934e21fa417ae9a9fbeb77ceaac7d"
+  integrity sha512-kfVFmsuWui2Sj1Rp1AJ4D9HqJwE4uwTlS/vO+eRUaMmd54BFpli2XhMQnPC2k4cHFVbB2Q2C+jtI1AGLgEnCjQ==
+  dependencies:
+    "@jest/types" "^24.9.0"
+    anymatch "^2.0.0"
+    fb-watchman "^2.0.0"
+    graceful-fs "^4.1.15"
+    invariant "^2.2.4"
+    jest-serializer "^24.9.0"
+    jest-util "^24.9.0"
+    jest-worker "^24.9.0"
+    micromatch "^3.1.10"
+    sane "^4.0.3"
+    walker "^1.0.7"
+  optionalDependencies:
+    fsevents "^1.2.7"
+
+jest-jasmine2@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-jasmine2/-/jest-jasmine2-24.9.0.tgz#1f7b1bd3242c1774e62acabb3646d96afc3be6a0"
+  integrity sha512-Cq7vkAgaYKp+PsX+2/JbTarrk0DmNhsEtqBXNwUHkdlbrTBLtMJINADf2mf5FkowNsq8evbPc07/qFO0AdKTzw==
+  dependencies:
+    "@babel/traverse" "^7.1.0"
+    "@jest/environment" "^24.9.0"
+    "@jest/test-result" "^24.9.0"
+    "@jest/types" "^24.9.0"
+    chalk "^2.0.1"
+    co "^4.6.0"
+    expect "^24.9.0"
+    is-generator-fn "^2.0.0"
+    jest-each "^24.9.0"
+    jest-matcher-utils "^24.9.0"
+    jest-message-util "^24.9.0"
+    jest-runtime "^24.9.0"
+    jest-snapshot "^24.9.0"
+    jest-util "^24.9.0"
+    pretty-format "^24.9.0"
+    throat "^4.0.0"
+
+jest-leak-detector@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-leak-detector/-/jest-leak-detector-24.9.0.tgz#b665dea7c77100c5c4f7dfcb153b65cf07dcf96a"
+  integrity sha512-tYkFIDsiKTGwb2FG1w8hX9V0aUb2ot8zY/2nFg087dUageonw1zrLMP4W6zsRO59dPkTSKie+D4rhMuP9nRmrA==
+  dependencies:
+    jest-get-type "^24.9.0"
+    pretty-format "^24.9.0"
+
+jest-matcher-utils@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-24.9.0.tgz#f5b3661d5e628dffe6dd65251dfdae0e87c3a073"
+  integrity sha512-OZz2IXsu6eaiMAwe67c1T+5tUAtQyQx27/EMEkbFAGiw52tB9em+uGbzpcgYVpA8wl0hlxKPZxrly4CXU/GjHA==
+  dependencies:
+    chalk "^2.0.1"
+    jest-diff "^24.9.0"
+    jest-get-type "^24.9.0"
+    pretty-format "^24.9.0"
+
+jest-message-util@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-24.9.0.tgz#527f54a1e380f5e202a8d1149b0ec872f43119e3"
+  integrity sha512-oCj8FiZ3U0hTP4aSui87P4L4jC37BtQwUMqk+zk/b11FR19BJDeZsZAvIHutWnmtw7r85UmR3CEWZ0HWU2mAlw==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    "@jest/test-result" "^24.9.0"
+    "@jest/types" "^24.9.0"
+    "@types/stack-utils" "^1.0.1"
+    chalk "^2.0.1"
+    micromatch "^3.1.10"
+    slash "^2.0.0"
+    stack-utils "^1.0.1"
+
+jest-mock@^24.5.0, jest-mock@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-24.9.0.tgz#c22835541ee379b908673ad51087a2185c13f1c6"
+  integrity sha512-3BEYN5WbSq9wd+SyLDES7AHnjH9A/ROBwmz7l2y+ol+NtSFO8DYiEBzoO1CeFc9a8DYy10EO4dDFVv/wN3zl1w==
+  dependencies:
+    "@jest/types" "^24.9.0"
+
+jest-pnp-resolver@^1.2.1:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/jest-pnp-resolver/-/jest-pnp-resolver-1.2.2.tgz#b704ac0ae028a89108a4d040b3f919dfddc8e33c"
+  integrity sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w==
+
+jest-regex-util@^24.3.0, jest-regex-util@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-24.9.0.tgz#c13fb3380bde22bf6575432c493ea8fe37965636"
+  integrity sha512-05Cmb6CuxaA+Ys6fjr3PhvV3bGQmO+2p2La4hFbU+W5uOc479f7FdLXUWXw4pYMAhhSZIuKHwSXSu6CsSBAXQA==
+
+jest-resolve-dependencies@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-resolve-dependencies/-/jest-resolve-dependencies-24.9.0.tgz#ad055198959c4cfba8a4f066c673a3f0786507ab"
+  integrity sha512-Fm7b6AlWnYhT0BXy4hXpactHIqER7erNgIsIozDXWl5dVm+k8XdGVe1oTg1JyaFnOxarMEbax3wyRJqGP2Pq+g==
+  dependencies:
+    "@jest/types" "^24.9.0"
+    jest-regex-util "^24.3.0"
+    jest-snapshot "^24.9.0"
+
+jest-resolve@24.9.0, jest-resolve@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-resolve/-/jest-resolve-24.9.0.tgz#dff04c7687af34c4dd7e524892d9cf77e5d17321"
+  integrity sha512-TaLeLVL1l08YFZAt3zaPtjiVvyy4oSA6CRe+0AFPPVX3Q/VI0giIWWoAvoS5L96vj9Dqxj4fB5p2qrHCmTU/MQ==
+  dependencies:
+    "@jest/types" "^24.9.0"
+    browser-resolve "^1.11.3"
+    chalk "^2.0.1"
+    jest-pnp-resolver "^1.2.1"
+    realpath-native "^1.1.0"
+
+jest-runner@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-runner/-/jest-runner-24.9.0.tgz#574fafdbd54455c2b34b4bdf4365a23857fcdf42"
+  integrity sha512-KksJQyI3/0mhcfspnxxEOBueGrd5E4vV7ADQLT9ESaCzz02WnbdbKWIf5Mkaucoaj7obQckYPVX6JJhgUcoWWg==
+  dependencies:
+    "@jest/console" "^24.7.1"
+    "@jest/environment" "^24.9.0"
+    "@jest/test-result" "^24.9.0"
+    "@jest/types" "^24.9.0"
+    chalk "^2.4.2"
+    exit "^0.1.2"
+    graceful-fs "^4.1.15"
+    jest-config "^24.9.0"
+    jest-docblock "^24.3.0"
+    jest-haste-map "^24.9.0"
+    jest-jasmine2 "^24.9.0"
+    jest-leak-detector "^24.9.0"
+    jest-message-util "^24.9.0"
+    jest-resolve "^24.9.0"
+    jest-runtime "^24.9.0"
+    jest-util "^24.9.0"
+    jest-worker "^24.6.0"
+    source-map-support "^0.5.6"
+    throat "^4.0.0"
+
+jest-runtime@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-runtime/-/jest-runtime-24.9.0.tgz#9f14583af6a4f7314a6a9d9f0226e1a781c8e4ac"
+  integrity sha512-8oNqgnmF3v2J6PVRM2Jfuj8oX3syKmaynlDMMKQ4iyzbQzIG6th5ub/lM2bCMTmoTKM3ykcUYI2Pw9xwNtjMnw==
+  dependencies:
+    "@jest/console" "^24.7.1"
+    "@jest/environment" "^24.9.0"
+    "@jest/source-map" "^24.3.0"
+    "@jest/transform" "^24.9.0"
+    "@jest/types" "^24.9.0"
+    "@types/yargs" "^13.0.0"
+    chalk "^2.0.1"
+    exit "^0.1.2"
+    glob "^7.1.3"
+    graceful-fs "^4.1.15"
+    jest-config "^24.9.0"
+    jest-haste-map "^24.9.0"
+    jest-message-util "^24.9.0"
+    jest-mock "^24.9.0"
+    jest-regex-util "^24.3.0"
+    jest-resolve "^24.9.0"
+    jest-snapshot "^24.9.0"
+    jest-util "^24.9.0"
+    jest-validate "^24.9.0"
+    realpath-native "^1.1.0"
+    slash "^2.0.0"
+    strip-bom "^3.0.0"
+    yargs "^13.3.0"
+
+jest-serializer@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-serializer/-/jest-serializer-24.9.0.tgz#e6d7d7ef96d31e8b9079a714754c5d5c58288e73"
+  integrity sha512-DxYipDr8OvfrKH3Kel6NdED3OXxjvxXZ1uIY2I9OFbGg+vUkkg7AGvi65qbhbWNPvDckXmzMPbK3u3HaDO49bQ==
+
+jest-snapshot@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-snapshot/-/jest-snapshot-24.9.0.tgz#ec8e9ca4f2ec0c5c87ae8f925cf97497b0e951ba"
+  integrity sha512-uI/rszGSs73xCM0l+up7O7a40o90cnrk429LOiK3aeTvfC0HHmldbd81/B7Ix81KSFe1lwkbl7GnBGG4UfuDew==
+  dependencies:
+    "@babel/types" "^7.0.0"
+    "@jest/types" "^24.9.0"
+    chalk "^2.0.1"
+    expect "^24.9.0"
+    jest-diff "^24.9.0"
+    jest-get-type "^24.9.0"
+    jest-matcher-utils "^24.9.0"
+    jest-message-util "^24.9.0"
+    jest-resolve "^24.9.0"
+    mkdirp "^0.5.1"
+    natural-compare "^1.4.0"
+    pretty-format "^24.9.0"
+    semver "^6.2.0"
+
+jest-util@^24.5.0, jest-util@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-24.9.0.tgz#7396814e48536d2e85a37de3e4c431d7cb140162"
+  integrity sha512-x+cZU8VRmOJxbA1K5oDBdxQmdq0OIdADarLxk0Mq+3XS4jgvhG/oKGWcIDCtPG0HgjxOYvF+ilPJQsAyXfbNOg==
+  dependencies:
+    "@jest/console" "^24.9.0"
+    "@jest/fake-timers" "^24.9.0"
+    "@jest/source-map" "^24.9.0"
+    "@jest/test-result" "^24.9.0"
+    "@jest/types" "^24.9.0"
+    callsites "^3.0.0"
+    chalk "^2.0.1"
+    graceful-fs "^4.1.15"
+    is-ci "^2.0.0"
+    mkdirp "^0.5.1"
+    slash "^2.0.0"
+    source-map "^0.6.0"
+
+jest-validate@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-24.9.0.tgz#0775c55360d173cd854e40180756d4ff52def8ab"
+  integrity sha512-HPIt6C5ACwiqSiwi+OfSSHbK8sG7akG8eATl+IPKaeIjtPOeBUd/g3J7DghugzxrGjI93qS/+RPKe1H6PqvhRQ==
+  dependencies:
+    "@jest/types" "^24.9.0"
+    camelcase "^5.3.1"
+    chalk "^2.0.1"
+    jest-get-type "^24.9.0"
+    leven "^3.1.0"
+    pretty-format "^24.9.0"
+
+jest-watch-typeahead@0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/jest-watch-typeahead/-/jest-watch-typeahead-0.4.0.tgz#4d5356839a85421588ce452d2440bf0d25308397"
+  integrity sha512-bJR/HPNgOQnkmttg1OkBIrYFAYuxFxExtgQh67N2qPvaWGVC8TCkedRNPKBfmZfVXFD3u2sCH+9OuS5ApBfCgA==
+  dependencies:
+    ansi-escapes "^4.2.1"
+    chalk "^2.4.1"
+    jest-watcher "^24.3.0"
+    slash "^3.0.0"
+    string-length "^3.1.0"
+    strip-ansi "^5.0.0"
+
+jest-watcher@^24.3.0, jest-watcher@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-watcher/-/jest-watcher-24.9.0.tgz#4b56e5d1ceff005f5b88e528dc9afc8dd4ed2b3b"
+  integrity sha512-+/fLOfKPXXYJDYlks62/4R4GoT+GU1tYZed99JSCOsmzkkF7727RqKrjNAxtfO4YpGv11wybgRvCjR73lK2GZw==
+  dependencies:
+    "@jest/test-result" "^24.9.0"
+    "@jest/types" "^24.9.0"
+    "@types/yargs" "^13.0.0"
+    ansi-escapes "^3.0.0"
+    chalk "^2.0.1"
+    jest-util "^24.9.0"
+    string-length "^2.0.0"
+
+jest-worker@^24.6.0, jest-worker@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-24.9.0.tgz#5dbfdb5b2d322e98567898238a9697bcce67b3e5"
+  integrity sha512-51PE4haMSXcHohnSMdM42anbvZANYTqMrr52tVKPqqsPJMzoP6FYYDVqahX/HrAoKEKz3uUPzSvKs9A3qR4iVw==
+  dependencies:
+    merge-stream "^2.0.0"
+    supports-color "^6.1.0"
+
+jest@24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest/-/jest-24.9.0.tgz#987d290c05a08b52c56188c1002e368edb007171"
+  integrity sha512-YvkBL1Zm7d2B1+h5fHEOdyjCG+sGMz4f8D86/0HiqJ6MB4MnDc8FgP5vdWsGnemOQro7lnYo8UakZ3+5A0jxGw==
+  dependencies:
+    import-local "^2.0.0"
+    jest-cli "^24.9.0"
+
+js-cookie@^2.x.x:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-2.2.1.tgz#69e106dc5d5806894562902aa5baec3744e9b2b8"
+  integrity sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ==
+
+"js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
+  integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
+
+js-tokens@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"
+  integrity sha1-mGbfOVECEw449/mWvOtlRDIJwls=
+
+js-yaml@^3.13.1:
+  version "3.14.1"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.14.1.tgz#dae812fdb3825fa306609a8717383c50c36a0537"
+  integrity sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==
+  dependencies:
+    argparse "^1.0.7"
+    esprima "^4.0.0"
+
+jsbn@~0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
+  integrity sha1-peZUwuWi3rXyAdls77yoDA7y9RM=
+
+jsdom@^11.5.1:
+  version "11.12.0"
+  resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-11.12.0.tgz#1a80d40ddd378a1de59656e9e6dc5a3ba8657bc8"
+  integrity sha512-y8Px43oyiBM13Zc1z780FrfNLJCXTL40EWlty/LXUtcjykRBNgLlCjWXpfSPBl2iv+N7koQN+dvqszHZgT/Fjw==
+  dependencies:
+    abab "^2.0.0"
+    acorn "^5.5.3"
+    acorn-globals "^4.1.0"
+    array-equal "^1.0.0"
+    cssom ">= 0.3.2 < 0.4.0"
+    cssstyle "^1.0.0"
+    data-urls "^1.0.0"
+    domexception "^1.0.1"
+    escodegen "^1.9.1"
+    html-encoding-sniffer "^1.0.2"
+    left-pad "^1.3.0"
+    nwsapi "^2.0.7"
+    parse5 "4.0.0"
+    pn "^1.1.0"
+    request "^2.87.0"
+    request-promise-native "^1.0.5"
+    sax "^1.2.4"
+    symbol-tree "^3.2.2"
+    tough-cookie "^2.3.4"
+    w3c-hr-time "^1.0.1"
+    webidl-conversions "^4.0.2"
+    whatwg-encoding "^1.0.3"
+    whatwg-mimetype "^2.1.0"
+    whatwg-url "^6.4.1"
+    ws "^5.2.0"
+    xml-name-validator "^3.0.0"
+
+jsdom@^14.0.0:
+  version "14.1.0"
+  resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-14.1.0.tgz#916463b6094956b0a6c1782c94e380cd30e1981b"
+  integrity sha512-O901mfJSuTdwU2w3Sn+74T+RnDVP+FuV5fH8tcPWyqrseRAb0s5xOtPgCFiPOtLcyK7CLIJwPyD83ZqQWvA5ng==
+  dependencies:
+    abab "^2.0.0"
+    acorn "^6.0.4"
+    acorn-globals "^4.3.0"
+    array-equal "^1.0.0"
+    cssom "^0.3.4"
+    cssstyle "^1.1.1"
+    data-urls "^1.1.0"
+    domexception "^1.0.1"
+    escodegen "^1.11.0"
+    html-encoding-sniffer "^1.0.2"
+    nwsapi "^2.1.3"
+    parse5 "5.1.0"
+    pn "^1.1.0"
+    request "^2.88.0"
+    request-promise-native "^1.0.5"
+    saxes "^3.1.9"
+    symbol-tree "^3.2.2"
+    tough-cookie "^2.5.0"
+    w3c-hr-time "^1.0.1"
+    w3c-xmlserializer "^1.1.2"
+    webidl-conversions "^4.0.2"
+    whatwg-encoding "^1.0.5"
+    whatwg-mimetype "^2.3.0"
+    whatwg-url "^7.0.0"
+    ws "^6.1.2"
+    xml-name-validator "^3.0.0"
+
+jsesc@^2.5.1:
+  version "2.5.2"
+  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-2.5.2.tgz#80564d2e483dacf6e8ef209650a67df3f0c283a4"
+  integrity sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==
+
+jsesc@~0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-0.5.0.tgz#e7dee66e35d6fc16f710fe91d5cf69f70f08911d"
+  integrity sha1-597mbjXW/Bb3EP6R1c9p9w8IkR0=
+
+json-parse-better-errors@^1.0.1, json-parse-better-errors@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz#bb867cfb3450e69107c131d1c514bab3dc8bcaa9"
+  integrity sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==
+
+json-parse-even-better-errors@^2.3.0:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz#7c47805a94319928e05777405dc12e1f7a4ee02d"
+  integrity sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==
+
+json-schema-traverse@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz#69f6a87d9513ab8bb8fe63bdb0979c448e684660"
+  integrity sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==
+
+json-schema@0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/json-schema/-/json-schema-0.4.0.tgz#f7de4cf6efab838ebaeb3236474cbba5a1930ab5"
+  integrity sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA==
+
+json-stable-stringify-without-jsonify@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651"
+  integrity sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE=
+
+json-stable-stringify@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/json-stable-stringify/-/json-stable-stringify-1.0.1.tgz#9a759d39c5f2ff503fd5300646ed445f88c4f9af"
+  integrity sha1-mnWdOcXy/1A/1TAGRu1EX4jE+a8=
+  dependencies:
+    jsonify "~0.0.0"
+
+json-stringify-safe@~5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb"
+  integrity sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=
+
+json3@^3.3.2:
+  version "3.3.3"
+  resolved "https://registry.yarnpkg.com/json3/-/json3-3.3.3.tgz#7fc10e375fc5ae42c4705a5cc0aa6f62be305b81"
+  integrity sha512-c7/8mbUsKigAbLkD5B010BK4D9LZm7A1pNItkEwiUZRpIN66exu/e7YQWysGun+TRKaJp8MhemM+VkfWv42aCA==
+
+json5@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-1.0.1.tgz#779fb0018604fa854eacbf6252180d83543e3dbe"
+  integrity sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==
+  dependencies:
+    minimist "^1.2.0"
+
+json5@^2.1.0, json5@^2.1.2:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.0.tgz#2dfefe720c6ba525d9ebd909950f0515316c89a3"
+  integrity sha512-f+8cldu7X/y7RAJurMEJmdoKXGB/X550w2Nr3tTbezL6RwEE/iMcm+tZnXeoZtKuOq6ft8+CqzEkrIgx1fPoQA==
+  dependencies:
+    minimist "^1.2.5"
+
+jsonfile@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-4.0.0.tgz#8771aae0799b64076b76640fca058f9c10e33ecb"
+  integrity sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=
+  optionalDependencies:
+    graceful-fs "^4.1.6"
+
+jsonify@~0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/jsonify/-/jsonify-0.0.0.tgz#2c74b6ee41d93ca51b7b5aaee8f503631d252a73"
+  integrity sha1-LHS27kHZPKUbe1qu6PUDYx0lKnM=
+
+jsprim@^1.2.2:
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/jsprim/-/jsprim-1.4.2.tgz#712c65533a15c878ba59e9ed5f0e26d5b77c5feb"
+  integrity sha512-P2bSOMAc/ciLz6DzgjVlGJP9+BrJWu5UDGK70C2iweC5QBIeFf0ZXRvGjEj2uYgrY2MkAAhsSWHDWlFtEroZWw==
+  dependencies:
+    assert-plus "1.0.0"
+    extsprintf "1.3.0"
+    json-schema "0.4.0"
+    verror "1.10.0"
+
+jss-plugin-camel-case@^10.5.1:
+  version "10.9.0"
+  resolved "https://registry.yarnpkg.com/jss-plugin-camel-case/-/jss-plugin-camel-case-10.9.0.tgz#4921b568b38d893f39736ee8c4c5f1c64670aaf7"
+  integrity sha512-UH6uPpnDk413/r/2Olmw4+y54yEF2lRIV8XIZyuYpgPYTITLlPOsq6XB9qeqv+75SQSg3KLocq5jUBXW8qWWww==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    hyphenate-style-name "^1.0.3"
+    jss "10.9.0"
+
+jss-plugin-default-unit@^10.5.1:
+  version "10.9.0"
+  resolved "https://registry.yarnpkg.com/jss-plugin-default-unit/-/jss-plugin-default-unit-10.9.0.tgz#bb23a48f075bc0ce852b4b4d3f7582bc002df991"
+  integrity sha512-7Ju4Q9wJ/MZPsxfu4T84mzdn7pLHWeqoGd/D8O3eDNNJ93Xc8PxnLmV8s8ZPNRYkLdxZqKtm1nPQ0BM4JRlq2w==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    jss "10.9.0"
+
+jss-plugin-global@^10.5.1:
+  version "10.9.0"
+  resolved "https://registry.yarnpkg.com/jss-plugin-global/-/jss-plugin-global-10.9.0.tgz#fc07a0086ac97aca174e37edb480b69277f3931f"
+  integrity sha512-4G8PHNJ0x6nwAFsEzcuVDiBlyMsj2y3VjmFAx/uHk/R/gzJV+yRHICjT4MKGGu1cJq2hfowFWCyrr/Gg37FbgQ==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    jss "10.9.0"
+
+jss-plugin-nested@^10.5.1:
+  version "10.9.0"
+  resolved "https://registry.yarnpkg.com/jss-plugin-nested/-/jss-plugin-nested-10.9.0.tgz#cc1c7d63ad542c3ccc6e2c66c8328c6b6b00f4b3"
+  integrity sha512-2UJnDrfCZpMYcpPYR16oZB7VAC6b/1QLsRiAutOt7wJaaqwCBvNsosLEu/fUyKNQNGdvg2PPJFDO5AX7dwxtoA==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    jss "10.9.0"
+    tiny-warning "^1.0.2"
+
+jss-plugin-props-sort@^10.5.1:
+  version "10.9.0"
+  resolved "https://registry.yarnpkg.com/jss-plugin-props-sort/-/jss-plugin-props-sort-10.9.0.tgz#30e9567ef9479043feb6e5e59db09b4de687c47d"
+  integrity sha512-7A76HI8bzwqrsMOJTWKx/uD5v+U8piLnp5bvru7g/3ZEQOu1+PjHvv7bFdNO3DwNPC9oM0a//KwIJsIcDCjDzw==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    jss "10.9.0"
+
+jss-plugin-rule-value-function@^10.5.1:
+  version "10.9.0"
+  resolved "https://registry.yarnpkg.com/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.9.0.tgz#379fd2732c0746fe45168011fe25544c1a295d67"
+  integrity sha512-IHJv6YrEf8pRzkY207cPmdbBstBaE+z8pazhPShfz0tZSDtRdQua5jjg6NMz3IbTasVx9FdnmptxPqSWL5tyJg==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    jss "10.9.0"
+    tiny-warning "^1.0.2"
+
+jss-plugin-vendor-prefixer@^10.5.1:
+  version "10.9.0"
+  resolved "https://registry.yarnpkg.com/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.9.0.tgz#aa9df98abfb3f75f7ed59a3ec50a5452461a206a"
+  integrity sha512-MbvsaXP7iiVdYVSEoi+blrW+AYnTDvHTW6I6zqi7JcwXdc6I9Kbm234nEblayhF38EftoenbM+5218pidmC5gA==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    css-vendor "^2.0.8"
+    jss "10.9.0"
+
+jss@10.9.0, jss@^10.5.1:
+  version "10.9.0"
+  resolved "https://registry.yarnpkg.com/jss/-/jss-10.9.0.tgz#7583ee2cdc904a83c872ba695d1baab4b59c141b"
+  integrity sha512-YpzpreB6kUunQBbrlArlsMpXYyndt9JATbt95tajx0t4MTJJcCJdd4hdNpHmOIDiUJrF/oX5wtVFrS3uofWfGw==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    csstype "^3.0.2"
+    is-in-browser "^1.1.3"
+    tiny-warning "^1.0.2"
+
+jsx-ast-utils@^2.2.1:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-2.4.1.tgz#1114a4c1209481db06c690c2b4f488cc665f657e"
+  integrity sha512-z1xSldJ6imESSzOjd3NNkieVJKRlKYSOtMG8SFyCj2FIrvSaSuli/WjpBkEzCBoR9bYYYFgqJw61Xhu7Lcgk+w==
+  dependencies:
+    array-includes "^3.1.1"
+    object.assign "^4.1.0"
+
+"jsx-ast-utils@^2.4.1 || ^3.0.0":
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-3.2.1.tgz#720b97bfe7d901b927d87c3773637ae8ea48781b"
+  integrity sha512-uP5vu8xfy2F9A6LGC22KO7e2/vGTS1MhP+18f++ZNlf0Ohaxbc9nIEwHAsejlJKyzfZzU5UIhe5ItYkitcZnZA==
+  dependencies:
+    array-includes "^3.1.3"
+    object.assign "^4.1.2"
+
+jszip@^3.7.1:
+  version "3.9.1"
+  resolved "https://registry.yarnpkg.com/jszip/-/jszip-3.9.1.tgz#784e87f328450d1e8151003a9c67733e2b901051"
+  integrity sha512-H9A60xPqJ1CuC4Ka6qxzXZeU8aNmgOeP5IFqwJbQQwtu2EUYxota3LdsiZWplF7Wgd9tkAd0mdu36nceSaPuYw==
+  dependencies:
+    lie "~3.3.0"
+    pako "~1.0.2"
+    readable-stream "~2.3.6"
+    set-immediate-shim "~1.0.1"
+
+killable@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/killable/-/killable-1.0.1.tgz#4c8ce441187a061c7474fb87ca08e2a638194892"
+  integrity sha512-LzqtLKlUwirEUyl/nicirVmNiPvYs7l5n8wOPP7fyJVpUPkvCnW/vuiXGpylGUlnPDnB7311rARzAt3Mhswpjg==
+
+kind-of@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-2.0.1.tgz#018ec7a4ce7e3a86cb9141be519d24c8faa981b5"
+  integrity sha1-AY7HpM5+OobLkUG+UZ0kyPqpgbU=
+  dependencies:
+    is-buffer "^1.0.2"
+
+kind-of@^3.0.2, kind-of@^3.0.3, kind-of@^3.2.0:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-3.2.2.tgz#31ea21a734bab9bbb0f32466d893aea51e4a3c64"
+  integrity sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=
+  dependencies:
+    is-buffer "^1.1.5"
+
+kind-of@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-4.0.0.tgz#20813df3d712928b207378691a45066fae72dd57"
+  integrity sha1-IIE989cSkosgc3hpGkUGb65y3Vc=
+  dependencies:
+    is-buffer "^1.1.5"
+
+kind-of@^5.0.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-5.1.0.tgz#729c91e2d857b7a419a1f9aa65685c4c33f5845d"
+  integrity sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw==
+
+kind-of@^6.0.0, kind-of@^6.0.2, kind-of@^6.0.3:
+  version "6.0.3"
+  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.3.tgz#07c05034a6c349fa06e24fa35aa76db4580ce4dd"
+  integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==
+
+kleur@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/kleur/-/kleur-3.0.3.tgz#a79c9ecc86ee1ce3fa6206d1216c501f147fc07e"
+  integrity sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==
+
+last-call-webpack-plugin@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/last-call-webpack-plugin/-/last-call-webpack-plugin-3.0.0.tgz#9742df0e10e3cf46e5c0381c2de90d3a7a2d7555"
+  integrity sha512-7KI2l2GIZa9p2spzPIVZBYyNKkN+e/SQPpnjlTiPhdbDW3F86tdKKELxKpzJ5sgU19wQWsACULZmpTPYHeWO5w==
+  dependencies:
+    lodash "^4.17.5"
+    webpack-sources "^1.1.0"
+
+lazy-cache@^0.2.3:
+  version "0.2.7"
+  resolved "https://registry.yarnpkg.com/lazy-cache/-/lazy-cache-0.2.7.tgz#7feddf2dcb6edb77d11ef1d117ab5ffdf0ab1b65"
+  integrity sha1-f+3fLctu23fRHvHRF6tf/fCrG2U=
+
+lazy-cache@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/lazy-cache/-/lazy-cache-1.0.4.tgz#a1d78fc3a50474cb80845d3b3b6e1da49a446e8e"
+  integrity sha1-odePw6UEdMuAhF07O24dpJpEbo4=
+
+left-pad@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/left-pad/-/left-pad-1.3.0.tgz#5b8a3a7765dfe001261dde915589e782f8c94d1e"
+  integrity sha512-XI5MPzVNApjAyhQzphX8BkmKsKUxD4LdyK24iZeQGinBN9yTQT3bFlCBy/aVx2HrNcqQGsdot8ghrjyrvMCoEA==
+
+leven@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/leven/-/leven-3.1.0.tgz#77891de834064cccba82ae7842bb6b14a13ed7f2"
+  integrity sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==
+
+levenary@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/levenary/-/levenary-1.1.1.tgz#842a9ee98d2075aa7faeedbe32679e9205f46f77"
+  integrity sha512-mkAdOIt79FD6irqjYSs4rdbnlT5vRonMEvBVPVb3XmevfS8kgRXwfes0dhPdEtzTWD/1eNE/Bm/G1iRt6DcnQQ==
+  dependencies:
+    leven "^3.1.0"
+
+levn@^0.3.0, levn@~0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/levn/-/levn-0.3.0.tgz#3b09924edf9f083c0490fdd4c0bc4421e04764ee"
+  integrity sha1-OwmSTt+fCDwEkP3UwLxEIeBHZO4=
+  dependencies:
+    prelude-ls "~1.1.2"
+    type-check "~0.3.2"
+
+lie@3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/lie/-/lie-3.1.1.tgz#9a436b2cc7746ca59de7a41fa469b3efb76bd87e"
+  integrity sha1-mkNrLMd0bKWd56QfpGmz77dr2H4=
+  dependencies:
+    immediate "~3.0.5"
+
+lie@~3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/lie/-/lie-3.3.0.tgz#dcf82dee545f46074daf200c7c1c5a08e0f40f6a"
+  integrity sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==
+  dependencies:
+    immediate "~3.0.5"
+
+lines-and-columns@^1.1.6:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632"
+  integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==
+
+load-json-file@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-2.0.0.tgz#7947e42149af80d696cbf797bcaabcfe1fe29ca8"
+  integrity sha1-eUfkIUmvgNaWy/eXvKq8/h/inKg=
+  dependencies:
+    graceful-fs "^4.1.2"
+    parse-json "^2.2.0"
+    pify "^2.0.0"
+    strip-bom "^3.0.0"
+
+load-json-file@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-4.0.0.tgz#2f5f45ab91e33216234fd53adab668eb4ec0993b"
+  integrity sha1-L19Fq5HjMhYjT9U62rZo607AmTs=
+  dependencies:
+    graceful-fs "^4.1.2"
+    parse-json "^4.0.0"
+    pify "^3.0.0"
+    strip-bom "^3.0.0"
+
+loader-fs-cache@^1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/loader-fs-cache/-/loader-fs-cache-1.0.3.tgz#f08657646d607078be2f0a032f8bd69dd6f277d9"
+  integrity sha512-ldcgZpjNJj71n+2Mf6yetz+c9bM4xpKtNds4LbqXzU/PTdeAX0g3ytnU1AJMEcTk2Lex4Smpe3Q/eCTsvUBxbA==
+  dependencies:
+    find-cache-dir "^0.1.1"
+    mkdirp "^0.5.1"
+
+loader-runner@^2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-2.4.0.tgz#ed47066bfe534d7e84c4c7b9998c2a75607d9357"
+  integrity sha512-Jsmr89RcXGIwivFY21FcRrisYZfvLMTWx5kOLc+JTxtpBOG6xML0vzbc6SEQG2FO9/4Fc3wW4LVcB5DmGflaRw==
+
+loader-utils@1.2.3:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.2.3.tgz#1ff5dc6911c9f0a062531a4c04b609406108c2c7"
+  integrity sha512-fkpz8ejdnEMG3s37wGL07iSBDg99O9D5yflE9RGNH3hRdx9SOwYfnGYdZOUIZitN8E+E2vkq3MUMYMvPYl5ZZA==
+  dependencies:
+    big.js "^5.2.2"
+    emojis-list "^2.0.0"
+    json5 "^1.0.1"
+
+loader-utils@^1.0.0, loader-utils@^1.0.1, loader-utils@^1.0.2, loader-utils@^1.1.0, loader-utils@^1.2.3:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.4.0.tgz#c579b5e34cb34b1a74edc6c1fb36bfa371d5a613"
+  integrity sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==
+  dependencies:
+    big.js "^5.2.2"
+    emojis-list "^3.0.0"
+    json5 "^1.0.1"
+
+loader-utils@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-2.0.2.tgz#d6e3b4fb81870721ae4e0868ab11dd638368c129"
+  integrity sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==
+  dependencies:
+    big.js "^5.2.2"
+    emojis-list "^3.0.0"
+    json5 "^2.1.2"
+
+localforage@*, localforage@^1.10.0:
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/localforage/-/localforage-1.10.0.tgz#5c465dc5f62b2807c3a84c0c6a1b1b3212781dd4"
+  integrity sha512-14/H1aX7hzBBmmh7sGPd+AOMkkIrHM3Z1PAyGgZigA1H1p5O5ANnMyWzvpAETtG68/dC4pC0ncy3+PPGzXZHPg==
+  dependencies:
+    lie "3.1.1"
+
+locate-path@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-2.0.0.tgz#2b568b265eec944c6d9c0de9c3dbbbca0354cd8e"
+  integrity sha1-K1aLJl7slExtnA3pw9u7ygNUzY4=
+  dependencies:
+    p-locate "^2.0.0"
+    path-exists "^3.0.0"
+
+locate-path@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-3.0.0.tgz#dbec3b3ab759758071b58fe59fc41871af21400e"
+  integrity sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==
+  dependencies:
+    p-locate "^3.0.0"
+    path-exists "^3.0.0"
+
+locate-path@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-6.0.0.tgz#55321eb309febbc59c4801d931a72452a681d286"
+  integrity sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==
+  dependencies:
+    p-locate "^5.0.0"
+
+lodash-es@^4.17.15:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
+  integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
+
+lodash._reinterpolate@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
+  integrity sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=
+
+lodash.debounce@^4.0.8:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
+  integrity sha1-gteb/zCmfEAF/9XiUVMArZyk168=
+
+lodash.isequalwith@^4.4.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/lodash.isequalwith/-/lodash.isequalwith-4.4.0.tgz#266726ddd528f854f21f4ea98a065606e0fbc6b0"
+  integrity sha1-Jmcm3dUo+FTyH06pigZWBuD7xrA=
+
+lodash.isplainobject@^4.0.6:
+  version "4.0.6"
+  resolved "https://registry.yarnpkg.com/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz#7c526a52d89b45c45cc690b88163be0497f550cb"
+  integrity sha1-fFJqUtibRcRcxpC4gWO+BJf1UMs=
+
+lodash.memoize@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
+  integrity sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=
+
+lodash.sortby@^4.7.0:
+  version "4.7.0"
+  resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
+  integrity sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=
+
+lodash.template@^4.4.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.template/-/lodash.template-4.5.0.tgz#f976195cf3f347d0d5f52483569fe8031ccce8ab"
+  integrity sha512-84vYFxIkmidUiFxidA/KjjH9pAycqW+h980j7Fuz5qxRtO9pgB7MDFTdys1N7A5mcucRiDyEq4fusljItR1T/A==
+  dependencies:
+    lodash._reinterpolate "^3.0.0"
+    lodash.templatesettings "^4.0.0"
+
+lodash.templatesettings@^4.0.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/lodash.templatesettings/-/lodash.templatesettings-4.2.0.tgz#e481310f049d3cf6d47e912ad09313b154f0fb33"
+  integrity sha512-stgLz+i3Aa9mZgnjr/O+v9ruKZsPsndy7qPZOchbqk2cnTU1ZaldKK+v7m54WoKIyxiuMZTKT2H81F8BeAc3ZQ==
+  dependencies:
+    lodash._reinterpolate "^3.0.0"
+
+lodash.throttle@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
+  integrity sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ=
+
+lodash.uniq@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
+  integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
+
+lodash.uniqueid@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/lodash.uniqueid/-/lodash.uniqueid-4.0.1.tgz#3268f26a7c88e4f4b1758d679271814e31fa5b26"
+  integrity sha1-MmjyanyI5PSxdY1nknGBTjH6WyY=
+
+"lodash@>=3.5 <5", lodash@^4.0.1, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.5:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
+
+loglevel@^1.6.8:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.8.0.tgz#e7ec73a57e1e7b419cb6c6ac06bf050b67356114"
+  integrity sha512-G6A/nJLRgWOuuwdNuA6koovfEV1YpqqAG4pRUlFaz3jj2QNZ8M4vBqnVA+HBTmU/AMNUtlOsMmSpF6NyOjztbA==
+
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.1, loose-envify@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
+  integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
+  dependencies:
+    js-tokens "^3.0.0 || ^4.0.0"
+
+lower-case@^1.1.1:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-1.1.4.tgz#9a2cabd1b9e8e0ae993a4bf7d5875c39c42e8eac"
+  integrity sha1-miyr0bno4K6ZOkv31YdcOcQujqw=
+
+lru-cache@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-5.1.1.tgz#1da27e6710271947695daf6848e847f01d84b920"
+  integrity sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==
+  dependencies:
+    yallist "^3.0.2"
+
+lru-cache@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-6.0.0.tgz#6d6fe6570ebd96aaf90fcad1dafa3b2566db3a94"
+  integrity sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==
+  dependencies:
+    yallist "^4.0.0"
+
+make-cancellable-promise@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/make-cancellable-promise/-/make-cancellable-promise-1.1.0.tgz#b4e9fcb31db3a27417e44f80cffa598ec9ac9f4e"
+  integrity sha512-X5Opjm2xcZsOLuJ+Bnhb4t5yfu4ehlA3OKEYLtqUchgVzL/QaqW373ZUVxVHKwvJ38cmYuR4rAHD2yUvAIkTPA==
+
+make-dir@^2.0.0, make-dir@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-2.1.0.tgz#5f0310e18b8be898cc07009295a30ae41e91e6f5"
+  integrity sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==
+  dependencies:
+    pify "^4.0.1"
+    semver "^5.6.0"
+
+make-event-props@^1.1.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/make-event-props/-/make-event-props-1.3.0.tgz#2434cb390d58bcf40898d009ef5b1f936de9671b"
+  integrity sha512-oWiDZMcVB1/A487251hEWza1xzgCzl6MXxe9aF24l5Bt9N9UEbqTqKumEfuuLhmlhRZYnc+suVvW4vUs8bwO7Q==
+
+makeerror@1.0.12:
+  version "1.0.12"
+  resolved "https://registry.yarnpkg.com/makeerror/-/makeerror-1.0.12.tgz#3e5dd2079a82e812e983cc6610c4a2cb0eaa801a"
+  integrity sha512-JmqCvUhmt43madlpFzG4BQzG2Z3m6tvQDNKdClZnO3VbIudJYmxsT0FNJMeiB2+JTSlTQTSbU8QdesVmwJcmLg==
+  dependencies:
+    tmpl "1.0.5"
+
+mamacro@^0.0.3:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/mamacro/-/mamacro-0.0.3.tgz#ad2c9576197c9f1abf308d0787865bd975a3f3e4"
+  integrity sha512-qMEwh+UujcQ+kbz3T6V+wAmO2U8veoq2w+3wY8MquqwVA3jChfwY+Tk52GZKDfACEPjuZ7r2oJLejwpt8jtwTA==
+
+map-cache@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/map-cache/-/map-cache-0.2.2.tgz#c32abd0bd6525d9b051645bb4f26ac5dc98a0dbf"
+  integrity sha1-wyq9C9ZSXZsFFkW7TyasXcmKDb8=
+
+map-visit@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/map-visit/-/map-visit-1.0.0.tgz#ecdca8f13144e660f1b5bd41f12f3479d98dfb8f"
+  integrity sha1-7Nyo8TFE5mDxtb1B8S80edmN+48=
+  dependencies:
+    object-visit "^1.0.0"
+
+marked@^0.6.2:
+  version "0.6.3"
+  resolved "https://registry.yarnpkg.com/marked/-/marked-0.6.3.tgz#79babad78af638ba4d522a9e715cdfdd2429e946"
+  integrity sha512-Fqa7eq+UaxfMriqzYLayfqAE40WN03jf+zHjT18/uXNuzjq3TY0XTbrAoPeqSJrAmPz11VuUA+kBPYOhHt9oOQ==
+
+marks-pane@^1.0.9:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/marks-pane/-/marks-pane-1.0.9.tgz#c0b5ab813384d8cd81faaeb3bbf3397dc809c1b3"
+  integrity sha512-Ahs4oeG90tbdPWwAJkAAoHg2lRR8lAs9mZXETNPO9hYg3AkjUJBKi1NQ4aaIQZVGrig7c/3NUV1jANl8rFTeMg==
+
+material-colors@^1.2.1:
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/material-colors/-/material-colors-1.2.6.tgz#6d1958871126992ceecc72f4bcc4d8f010865f46"
+  integrity sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg==
+
+material-ui-toggle-icon@^1.1.1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/material-ui-toggle-icon/-/material-ui-toggle-icon-1.1.2.tgz#3125e686981659839409d12a2e0178d34acb6623"
+  integrity sha512-nxUNlpemqG/ObsNc+JmkJnOB0oPoJpgVKBXsuguVdRSlAU+qjEEJzVhaXLND4VCSAtz4QLO81yXByplzeLsQhw==
+  dependencies:
+    prop-types "^15.5.10"
+
+md5.js@^1.3.4:
+  version "1.3.5"
+  resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"
+  integrity sha512-xitP+WxNPcTTOgnTJcrhM0xvdPepipPSf3I8EIpGKeFLjt3PlJLIDG3u8EX53ZIubkb+5U2+3rELYpEhHhzdkg==
+  dependencies:
+    hash-base "^3.0.0"
+    inherits "^2.0.1"
+    safe-buffer "^5.1.2"
+
+mdi-material-ui@^6.9.0:
+  version "6.23.0"
+  resolved "https://registry.yarnpkg.com/mdi-material-ui/-/mdi-material-ui-6.23.0.tgz#31e75c611b817094ea88c66b6eb6510626c3c2a9"
+  integrity sha512-Y28r+V5Lm/vZTDJ2w6kVjXnU1+YeFJempS7iOwYXHX0SUlcIhhI1hm9aA5nqw+ZcKk6OzAxHiC/AxC+I34tDhw==
+
+mdn-data@2.0.14:
+  version "2.0.14"
+  resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.14.tgz#7113fc4281917d63ce29b43446f701e68c25ba50"
+  integrity sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==
+
+mdn-data@2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.4.tgz#699b3c38ac6f1d728091a64650b65d388502fd5b"
+  integrity sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA==
+
+media-typer@0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
+  integrity sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=
+
+memoize-one@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-4.1.0.tgz#a2387c58c03fff27ca390c31b764a79addf3f906"
+  integrity sha512-2GApq0yI/b22J2j9rhbrAlsHb0Qcz+7yWxeLG8h+95sl1XPUgeLimQSOdur4Vw7cUhrBHwaUZxWFZueojqNRzA==
+
+memory-fs@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.4.1.tgz#3a9a20b8462523e447cfbc7e8bb80ed667bfc552"
+  integrity sha1-OpoguEYlI+RHz7x+i7gO1me/xVI=
+  dependencies:
+    errno "^0.1.3"
+    readable-stream "^2.0.1"
+
+memory-fs@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.5.0.tgz#324c01288b88652966d161db77838720845a8e3c"
+  integrity sha512-jA0rdU5KoQMC0e6ppoNRtpp6vjFq6+NY7r8hywnC7V+1Xj/MtHwGIbB1QaK/dunyjWteJzmkpd7ooeWg10T7GA==
+  dependencies:
+    errno "^0.1.3"
+    readable-stream "^2.0.1"
+
+merge-class-names@^1.1.1:
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/merge-class-names/-/merge-class-names-1.4.2.tgz#78d6d95ab259e7e647252a7988fd25a27d5a8835"
+  integrity sha512-bOl98VzwCGi25Gcn3xKxnR5p/WrhWFQB59MS/aGENcmUc6iSm96yrFDF0XSNurX9qN4LbJm0R9kfvsQ17i8zCw==
+
+merge-deep@^3.0.2:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/merge-deep/-/merge-deep-3.0.3.tgz#1a2b2ae926da8b2ae93a0ac15d90cd1922766003"
+  integrity sha512-qtmzAS6t6grwEkNrunqTBdn0qKwFgNWvlxUbAV8es9M7Ot1EbyApytCnvE0jALPa46ZpKDUo527kKiaWplmlFA==
+  dependencies:
+    arr-union "^3.1.0"
+    clone-deep "^0.2.4"
+    kind-of "^3.0.2"
+
+merge-descriptors@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz#b00aaa556dd8b44568150ec9d1b953f3f90cbb61"
+  integrity sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E=
+
+merge-stream@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"
+  integrity sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==
+
+merge2@^1.2.3:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae"
+  integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
+
+methods@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
+  integrity sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=
+
+microevent.ts@~0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/microevent.ts/-/microevent.ts-0.1.1.tgz#70b09b83f43df5172d0205a63025bce0f7357fa0"
+  integrity sha512-jo1OfR4TaEwd5HOrt5+tAZ9mqT4jmpNAusXtyfNzqVm9uiSYFZlKM1wYL4oU7azZW/PxQW53wM0S6OR1JHNa2g==
+
+micromatch@^3.1.10, micromatch@^3.1.4:
+  version "3.1.10"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-3.1.10.tgz#70859bc95c9840952f359a068a3fc49f9ecfac23"
+  integrity sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==
+  dependencies:
+    arr-diff "^4.0.0"
+    array-unique "^0.3.2"
+    braces "^2.3.1"
+    define-property "^2.0.2"
+    extend-shallow "^3.0.2"
+    extglob "^2.0.4"
+    fragment-cache "^0.2.1"
+    kind-of "^6.0.2"
+    nanomatch "^1.2.9"
+    object.pick "^1.3.0"
+    regex-not "^1.0.0"
+    snapdragon "^0.8.1"
+    to-regex "^3.0.2"
+
+micromatch@^4.0.2:
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.4.tgz#896d519dfe9db25fce94ceb7a500919bf881ebf9"
+  integrity sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==
+  dependencies:
+    braces "^3.0.1"
+    picomatch "^2.2.3"
+
+miller-rabin@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/miller-rabin/-/miller-rabin-4.0.1.tgz#f080351c865b0dc562a8462966daa53543c78a4d"
+  integrity sha512-115fLhvZVqWwHPbClyntxEVfVDfl9DLLTuJvq3g2O/Oxi8AiNouAHvDSzHS0viUJc+V5vm3eq91Xwqn9dp4jRA==
+  dependencies:
+    bn.js "^4.0.0"
+    brorand "^1.0.1"
+
+mime-db@1.51.0:
+  version "1.51.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.51.0.tgz#d9ff62451859b18342d960850dc3cfb77e63fb0c"
+  integrity sha512-5y8A56jg7XVQx2mbv1lu49NR4dokRnhZYTtL+KGfaa27uq4pSTXkwQkFJl4pkRMyNFz/EtYDSkiiEHx3F7UN6g==
+
+"mime-db@>= 1.43.0 < 2":
+  version "1.52.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70"
+  integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==
+
+mime-types@^2.1.12, mime-types@~2.1.17, mime-types@~2.1.19, mime-types@~2.1.24, mime-types@~2.1.34:
+  version "2.1.34"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.34.tgz#5a712f9ec1503511a945803640fafe09d3793c24"
+  integrity sha512-6cP692WwGIs9XXdOO4++N+7qjqv0rqxxVvJ3VHPh/Sc9mVZcQP+ZGhkKiTvWMQRr2tbHkJP/Yn7Y0npb3ZBs4A==
+  dependencies:
+    mime-db "1.51.0"
+
+mime@1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
+  integrity sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==
+
+mime@^2.4.4:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-2.6.0.tgz#a2a682a95cd4d0cb1d6257e28f83da7e35800367"
+  integrity sha512-USPkMeET31rOMiarsBNIHZKLGgvKc/LrjofAnBlOttf5ajRvqiRA8QsenbcooctK6d6Ts6aqZXBA+XbkKthiQg==
+
+mimic-fn@^1.0.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-1.2.0.tgz#820c86a39334640e99516928bd03fca88057d022"
+  integrity sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==
+
+mimic-fn@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"
+  integrity sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==
+
+mini-create-react-context@^0.4.0:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz#072171561bfdc922da08a60c2197a497cc2d1d5e"
+  integrity sha512-YWCYEmd5CQeHGSAKrYvXgmzzkrvssZcuuQDDeqkT+PziKGMgE+0MCCtcKbROzocGBG1meBLl2FotlRwf4gAzbQ==
+  dependencies:
+    "@babel/runtime" "^7.12.1"
+    tiny-warning "^1.0.3"
+
+mini-css-extract-plugin@0.8.0:
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.8.0.tgz#81d41ec4fe58c713a96ad7c723cdb2d0bd4d70e1"
+  integrity sha512-MNpRGbNA52q6U92i0qbVpQNsgk7LExy41MdAlG84FeytfDOtRIf/mCHdEgG8rpTKOaNKiqUnZdlptF469hxqOw==
+  dependencies:
+    loader-utils "^1.1.0"
+    normalize-url "1.9.1"
+    schema-utils "^1.0.0"
+    webpack-sources "^1.1.0"
+
+minimalistic-assert@^1.0.0, minimalistic-assert@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7"
+  integrity sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==
+
+minimalistic-crypto-utils@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/minimalistic-crypto-utils/-/minimalistic-crypto-utils-1.0.1.tgz#f6c00c1c0b082246e5c4d99dfb8c7c083b2b582a"
+  integrity sha1-9sAMHAsIIkblxNmd+4x8CDsrWCo=
+
+minimatch@3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
+  integrity sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==
+  dependencies:
+    brace-expansion "^1.1.7"
+
+minimatch@^3.0.4, minimatch@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b"
+  integrity sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==
+  dependencies:
+    brace-expansion "^1.1.7"
+
+minimist@^1.1.1, minimist@^1.2.0, minimist@^1.2.5:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
+  integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==
+
+mississippi@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/mississippi/-/mississippi-3.0.0.tgz#ea0a3291f97e0b5e8776b363d5f0a12d94c67022"
+  integrity sha512-x471SsVjUtBRtcvd4BzKE9kFC+/2TeWgKCgw0bZcw1b9l2X3QX5vCWgF+KaZaYm87Ss//rHnWryupDrgLvmSkA==
+  dependencies:
+    concat-stream "^1.5.0"
+    duplexify "^3.4.2"
+    end-of-stream "^1.1.0"
+    flush-write-stream "^1.0.0"
+    from2 "^2.1.0"
+    parallel-transform "^1.1.0"
+    pump "^3.0.0"
+    pumpify "^1.3.3"
+    stream-each "^1.1.0"
+    through2 "^2.0.0"
+
+mixin-deep@^1.2.0:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/mixin-deep/-/mixin-deep-1.3.2.tgz#1120b43dc359a785dce65b55b82e257ccf479566"
+  integrity sha512-WRoDn//mXBiJ1H40rqa3vH0toePwSsGb45iInWlTySa+Uu4k3tYUSxa2v1KqAiLtvlrSzaExqS1gtk96A9zvEA==
+  dependencies:
+    for-in "^1.0.2"
+    is-extendable "^1.0.1"
+
+mixin-object@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/mixin-object/-/mixin-object-2.0.1.tgz#4fb949441dab182540f1fe035ba60e1947a5e57e"
+  integrity sha1-T7lJRB2rGCVA8f4DW6YOGUel5X4=
+  dependencies:
+    for-in "^0.1.3"
+    is-extendable "^0.1.1"
+
+mkdirp@^0.5.1, mkdirp@^0.5.5, mkdirp@~0.5.1:
+  version "0.5.5"
+  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.5.tgz#d91cefd62d1436ca0f41620e251288d420099def"
+  integrity sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==
+  dependencies:
+    minimist "^1.2.5"
+
+monaco-editor-webpack-plugin@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/monaco-editor-webpack-plugin/-/monaco-editor-webpack-plugin-3.1.0.tgz#972efc47a91b3bf3bd977885684a3180eb8f341b"
+  integrity sha512-TP5NkCAV0OeFTry5k/d60KR7CkhTXL4kgJKtE3BzjgbDb5TGEPEhoKmHBrSa6r7Oc0sNbPLZhKD/TP2ig7A+/A==
+  dependencies:
+    loader-utils "^2.0.0"
+
+monaco-editor@*:
+  version "0.23.0"
+  resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.23.0.tgz#24844ba5640c7adb3a2a3ff3b520cf2d7170a6f0"
+  integrity sha512-q+CP5zMR/aFiMTE9QlIavGyGicKnG2v/H8qVvybLzeFsARM8f6G9fL0sMST2tyVYCwDKkGamZUI6647A0jR/Lg==
+
+move-concurrently@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"
+  integrity sha1-viwAX9oy4LKa8fBdfEszIUxwH5I=
+  dependencies:
+    aproba "^1.1.1"
+    copy-concurrently "^1.0.0"
+    fs-write-stream-atomic "^1.0.8"
+    mkdirp "^0.5.1"
+    rimraf "^2.5.4"
+    run-queue "^1.0.3"
+
+ms@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
+  integrity sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=
+
+ms@2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
+  integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
+
+ms@2.1.3, ms@^2.1.1:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
+  integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
+
+multicast-dns-service-types@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/multicast-dns-service-types/-/multicast-dns-service-types-1.1.0.tgz#899f11d9686e5e05cb91b35d5f0e63b773cfc901"
+  integrity sha1-iZ8R2WhuXgXLkbNdXw5jt3PPyQE=
+
+multicast-dns@^6.0.1:
+  version "6.2.3"
+  resolved "https://registry.yarnpkg.com/multicast-dns/-/multicast-dns-6.2.3.tgz#a0ec7bd9055c4282f790c3c82f4e28db3b31b229"
+  integrity sha512-ji6J5enbMyGRHIAkAOu3WdV8nggqviKCEKtXcOqfphZZtQrmHKycfynJ2V7eVPUA4NhJ6V7Wf4TmGbTwKE9B6g==
+  dependencies:
+    dns-packet "^1.3.1"
+    thunky "^1.0.2"
+
+mute-stream@0.0.7:
+  version "0.0.7"
+  resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.7.tgz#3075ce93bc21b8fab43e1bc4da7e8115ed1e7bab"
+  integrity sha1-MHXOk7whuPq0PhvE2n6BFe0ee6s=
+
+mute-stream@0.0.8:
+  version "0.0.8"
+  resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.8.tgz#1630c42b2251ff81e2a283de96a5497ea92e5e0d"
+  integrity sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==
+
+nan@^2.12.1:
+  version "2.15.0"
+  resolved "https://registry.yarnpkg.com/nan/-/nan-2.15.0.tgz#3f34a473ff18e15c1b5626b62903b5ad6e665fee"
+  integrity sha512-8ZtvEnA2c5aYCZYd1cvgdnU6cqwixRoYg70xPLWUws5ORTa/lnw+u4amixRS/Ac5U5mQVgp9pnlSUnbNWFaWZQ==
+
+nanomatch@^1.2.9:
+  version "1.2.13"
+  resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"
+  integrity sha512-fpoe2T0RbHwBTBUOftAfBPaDEi06ufaUai0mE6Yn1kacc3SnTErfb/h+X94VXzI64rKFHYImXSvdwGGCmwOqCA==
+  dependencies:
+    arr-diff "^4.0.0"
+    array-unique "^0.3.2"
+    define-property "^2.0.2"
+    extend-shallow "^3.0.2"
+    fragment-cache "^0.2.1"
+    is-windows "^1.0.2"
+    kind-of "^6.0.2"
+    object.pick "^1.3.0"
+    regex-not "^1.0.0"
+    snapdragon "^0.8.1"
+    to-regex "^3.0.1"
+
+natural-compare@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
+  integrity sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=
+
+negotiator@0.6.3:
+  version "0.6.3"
+  resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.3.tgz#58e323a72fedc0d6f9cd4d31fe49f51479590ccd"
+  integrity sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==
+
+neo-async@^2.5.0, neo-async@^2.6.1:
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f"
+  integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
+
+next-tick@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.1.0.tgz#1836ee30ad56d67ef281b22bd199f709449b35eb"
+  integrity sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ==
+
+next-tick@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.0.0.tgz#ca86d1fe8828169b0120208e3dc8424b9db8342c"
+  integrity sha1-yobR/ogoFpsBICCOPchCS524NCw=
+
+nice-try@^1.0.4:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"
+  integrity sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==
+
+no-case@^2.2.0:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/no-case/-/no-case-2.3.2.tgz#60b813396be39b3f1288a4c1ed5d1e7d28b464ac"
+  integrity sha512-rmTZ9kz+f3rCvK2TD1Ue/oZlns7OGoIWP4fc3llxxRXlOkHKoWPPWJOfFYpITabSow43QJbRIoHQXtt10VldyQ==
+  dependencies:
+    lower-case "^1.1.1"
+
+node-ensure@^0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/node-ensure/-/node-ensure-0.0.0.tgz#ecae764150de99861ec5c810fd5d096b183932a7"
+  integrity sha1-7K52QVDemYYexcgQ/V0Jaxg5Mqc=
+
+node-fetch@2.6.7:
+  version "2.6.7"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.7.tgz#24de9fba827e3b4ae44dc8b20256a379160052ad"
+  integrity sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==
+  dependencies:
+    whatwg-url "^5.0.0"
+
+node-forge@^0.10.0:
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-0.10.0.tgz#32dea2afb3e9926f02ee5ce8794902691a676bf3"
+  integrity sha512-PPmu8eEeG9saEUvI97fm4OYxXVB6bFvyNTyiUOBichBpFG8A1Ljw3bY62+5oOjDEMHRnd0Y7HQ+x7uzxOzC6JA==
+
+node-int64@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/node-int64/-/node-int64-0.4.0.tgz#87a9065cdb355d3182d8f94ce11188b825c68a3b"
+  integrity sha1-h6kGXNs1XTGC2PlM4RGIuCXGijs=
+
+node-libs-browser@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/node-libs-browser/-/node-libs-browser-2.2.1.tgz#b64f513d18338625f90346d27b0d235e631f6425"
+  integrity sha512-h/zcD8H9kaDZ9ALUWwlBUDo6TKF8a7qBSCSEGfjTVIYeqsioSKaAX+BN7NgiMGp6iSIXZ3PxgCu8KS3b71YK5Q==
+  dependencies:
+    assert "^1.1.1"
+    browserify-zlib "^0.2.0"
+    buffer "^4.3.0"
+    console-browserify "^1.1.0"
+    constants-browserify "^1.0.0"
+    crypto-browserify "^3.11.0"
+    domain-browser "^1.1.1"
+    events "^3.0.0"
+    https-browserify "^1.0.0"
+    os-browserify "^0.3.0"
+    path-browserify "0.0.1"
+    process "^0.11.10"
+    punycode "^1.2.4"
+    querystring-es3 "^0.2.0"
+    readable-stream "^2.3.3"
+    stream-browserify "^2.0.1"
+    stream-http "^2.7.2"
+    string_decoder "^1.0.0"
+    timers-browserify "^2.0.4"
+    tty-browserify "0.0.0"
+    url "^0.11.0"
+    util "^0.11.0"
+    vm-browserify "^1.0.1"
+
+node-notifier@^5.4.2:
+  version "5.4.5"
+  resolved "https://registry.yarnpkg.com/node-notifier/-/node-notifier-5.4.5.tgz#0cbc1a2b0f658493b4025775a13ad938e96091ef"
+  integrity sha512-tVbHs7DyTLtzOiN78izLA85zRqB9NvEXkAf014Vx3jtSvn/xBl6bR8ZYifj+dFcFrKI21huSQgJZ6ZtL3B4HfQ==
+  dependencies:
+    growly "^1.3.0"
+    is-wsl "^1.1.0"
+    semver "^5.5.0"
+    shellwords "^0.1.1"
+    which "^1.3.0"
+
+node-releases@^1.1.29:
+  version "1.1.77"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.77.tgz#50b0cfede855dd374e7585bf228ff34e57c1c32e"
+  integrity sha512-rB1DUFUNAN4Gn9keO2K1efO35IDK7yKHCdCaIMvFO7yUYmmZYeDjnGKle26G4rwj+LKRQpjyUUvMkPglwGCYNQ==
+
+node-releases@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.2.tgz#7139fe71e2f4f11b47d4d2986aaf8c48699e0c01"
+  integrity sha512-XxYDdcQ6eKqp/YjI+tb2C5WM2LgjnZrfYg4vgQt49EK268b6gYCHsBLrK2qvJo4FmCtqmKezb0WZFK4fkrZNsg==
+
+normalize-package-data@^2.3.2:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.5.0.tgz#e66db1838b200c1dfc233225d12cb36520e234a8"
+  integrity sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==
+  dependencies:
+    hosted-git-info "^2.1.4"
+    resolve "^1.10.0"
+    semver "2 || 3 || 4 || 5"
+    validate-npm-package-license "^3.0.1"
+
+normalize-path@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-2.1.1.tgz#1ab28b556e198363a8c1a6f7e6fa20137fe6aed9"
+  integrity sha1-GrKLVW4Zg2Oowab35vogE3/mrtk=
+  dependencies:
+    remove-trailing-separator "^1.0.1"
+
+normalize-path@^3.0.0, normalize-path@~3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
+  integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
+
+normalize-range@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942"
+  integrity sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=
+
+normalize-url@1.9.1:
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-1.9.1.tgz#2cc0d66b31ea23036458436e3620d85954c66c3c"
+  integrity sha1-LMDWazHqIwNkWENuNiDYWVTGbDw=
+  dependencies:
+    object-assign "^4.0.1"
+    prepend-http "^1.0.0"
+    query-string "^4.1.0"
+    sort-keys "^1.0.0"
+
+normalize-url@^3.0.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-3.3.0.tgz#b2e1c4dc4f7c6d57743df733a4f5978d18650559"
+  integrity sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg==
+
+npm-run-path@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f"
+  integrity sha1-NakjLfo11wZ7TLLd8jV7GHFTbF8=
+  dependencies:
+    path-key "^2.0.0"
+
+nth-check@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-1.0.2.tgz#b2bd295c37e3dd58a3bf0700376663ba4d9cf05c"
+  integrity sha512-WeBOdju8SnzPN5vTUJYxYUxLeXpCaVP5i5e0LF8fg7WORF2Wd7wFX/pk0tYZk7s8T+J7VLy0Da6J1+wCT0AtHg==
+  dependencies:
+    boolbase "~1.0.0"
+
+nth-check@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-2.0.1.tgz#2efe162f5c3da06a28959fbd3db75dbeea9f0fc2"
+  integrity sha512-it1vE95zF6dTT9lBsYbxvqh0Soy4SPowchj0UBGj/V6cTPnXXtQOPUbhZ6CmGzAD/rW22LQK6E96pcdJXk4A4w==
+  dependencies:
+    boolbase "^1.0.0"
+
+num2fraction@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/num2fraction/-/num2fraction-1.2.2.tgz#6f682b6a027a4e9ddfa4564cd2589d1d4e669ede"
+  integrity sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4=
+
+nwsapi@^2.0.7, nwsapi@^2.1.3:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/nwsapi/-/nwsapi-2.2.0.tgz#204879a9e3d068ff2a55139c2c772780681a38b7"
+  integrity sha512-h2AatdwYH+JHiZpv7pt/gSX1XoRGb7L/qSIeuqA6GwYoF9w1vP1cw42TO0aI2pNyshRK5893hNSl+1//vHK7hQ==
+
+oauth-sign@~0.9.0:
+  version "0.9.0"
+  resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.9.0.tgz#47a7b016baa68b5fa0ecf3dee08a85c679ac6455"
+  integrity sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==
+
+object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
+  integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=
+
+object-copy@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/object-copy/-/object-copy-0.1.0.tgz#7e7d858b781bd7c991a41ba975ed3812754e998c"
+  integrity sha1-fn2Fi3gb18mRpBupde04EnVOmYw=
+  dependencies:
+    copy-descriptor "^0.1.0"
+    define-property "^0.2.5"
+    kind-of "^3.0.3"
+
+object-hash@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-1.3.1.tgz#fde452098a951cb145f039bb7d455449ddc126df"
+  integrity sha512-OSuu/pU4ENM9kmREg0BdNrUDIl1heYa4mBZacJc+vVWz4GtAwu7jO8s4AIt2aGRUTqxykpWzI3Oqnsm13tTMDA==
+
+object-inspect@^1.11.0, object-inspect@^1.9.0:
+  version "1.12.0"
+  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.12.0.tgz#6e2c120e868fd1fd18cb4f18c31741d0d6e776f0"
+  integrity sha512-Ho2z80bVIvJloH+YzRmpZVQe87+qASmBUKZDWgx9cu+KDrX2ZDH/3tMy+gXbZETVGs2M8YdxObOh7XAtim9Y0g==
+
+object-is@^1.0.1:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.5.tgz#b9deeaa5fc7f1846a0faecdceec138e5778f53ac"
+  integrity sha512-3cyDsyHgtmi7I7DfSSI2LDp6SK2lwvtbg0p0R1e0RvTqF5ceGx+K2dfSjm1bKDMVCFEDAQvy+o8c6a7VujOddw==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.3"
+
+object-keys@^1.0.12, object-keys@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
+  integrity sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==
+
+object-path@0.11.4:
+  version "0.11.4"
+  resolved "https://registry.yarnpkg.com/object-path/-/object-path-0.11.4.tgz#370ae752fbf37de3ea70a861c23bba8915691949"
+  integrity sha1-NwrnUvvzfePqcKhhwju6iRVpGUk=
+
+object-visit@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/object-visit/-/object-visit-1.0.1.tgz#f79c4493af0c5377b59fe39d395e41042dd045bb"
+  integrity sha1-95xEk68MU3e1n+OdOV5BBC3QRbs=
+  dependencies:
+    isobject "^3.0.0"
+
+object.assign@^4.1.0, object.assign@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.2.tgz#0ed54a342eceb37b38ff76eb831a0e788cb63940"
+  integrity sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==
+  dependencies:
+    call-bind "^1.0.0"
+    define-properties "^1.1.3"
+    has-symbols "^1.0.1"
+    object-keys "^1.1.1"
+
+object.entries@^1.1.0, object.entries@^1.1.5:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.1.5.tgz#e1acdd17c4de2cd96d5a08487cfb9db84d881861"
+  integrity sha512-TyxmjUoZggd4OrrU1W66FMDG6CuqJxsFvymeyXI51+vQLN67zYfZseptRge703kKQdo4uccgAKebXFcRCzk4+g==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.3"
+    es-abstract "^1.19.1"
+
+object.fromentries@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/object.fromentries/-/object.fromentries-2.0.5.tgz#7b37b205109c21e741e605727fe8b0ad5fa08251"
+  integrity sha512-CAyG5mWQRRiBU57Re4FKoTBjXfDoNwdFVH2Y1tS9PqCsfUTymAohOkEMSG3aRNKmv4lV3O7p1et7c187q6bynw==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.3"
+    es-abstract "^1.19.1"
+
+object.getownpropertydescriptors@^2.0.3, object.getownpropertydescriptors@^2.1.0, object.getownpropertydescriptors@^2.1.1:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.1.3.tgz#b223cf38e17fefb97a63c10c91df72ccb386df9e"
+  integrity sha512-VdDoCwvJI4QdC6ndjpqFmoL3/+HxffFBbcJzKi5hwLLqqx3mdbedRpfZDdK0SrOSauj8X4GzBvnDZl4vTN7dOw==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.3"
+    es-abstract "^1.19.1"
+
+object.hasown@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/object.hasown/-/object.hasown-1.1.0.tgz#7232ed266f34d197d15cac5880232f7a4790afe5"
+  integrity sha512-MhjYRfj3GBlhSkDHo6QmvgjRLXQ2zndabdf3nX0yTyZK9rPfxb6uRpAac8HXNLy1GpqWtZ81Qh4v3uOls2sRAg==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.19.1"
+
+object.pick@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/object.pick/-/object.pick-1.3.0.tgz#87a10ac4c1694bd2e1cbf53591a66141fb5dd747"
+  integrity sha1-h6EKxMFpS9Lhy/U1kaZhQftd10c=
+  dependencies:
+    isobject "^3.0.1"
+
+object.values@^1.1.0, object.values@^1.1.5:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.1.5.tgz#959f63e3ce9ef108720333082131e4a459b716ac"
+  integrity sha512-QUZRW0ilQ3PnPpbNtgdNV1PDbEqLIiSFB3l+EnGtBQ/8SUTLj1PZwtQHABZtLgwpJZTSZhuGLOGk57Drx2IvYg==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.3"
+    es-abstract "^1.19.1"
+
+obuf@^1.0.0, obuf@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/obuf/-/obuf-1.1.2.tgz#09bea3343d41859ebd446292d11c9d4db619084e"
+  integrity sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg==
+
+on-finished@~2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.3.0.tgz#20f1336481b083cd75337992a16971aa2d906947"
+  integrity sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=
+  dependencies:
+    ee-first "1.1.1"
+
+on-headers@~1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/on-headers/-/on-headers-1.0.2.tgz#772b0ae6aaa525c399e489adfad90c403eb3c28f"
+  integrity sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA==
+
+once@^1.3.0, once@^1.3.1, once@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
+  integrity sha1-WDsap3WWHUsROsF9nFC6753Xa9E=
+  dependencies:
+    wrappy "1"
+
+onetime@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/onetime/-/onetime-2.0.1.tgz#067428230fd67443b2794b22bba528b6867962d4"
+  integrity sha1-BnQoIw/WdEOyeUsiu6UotoZ5YtQ=
+  dependencies:
+    mimic-fn "^1.0.0"
+
+onetime@^5.1.0:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/onetime/-/onetime-5.1.2.tgz#d0e96ebb56b07476df1dd9c4806e5237985ca45e"
+  integrity sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==
+  dependencies:
+    mimic-fn "^2.1.0"
+
+open@^6.3.0:
+  version "6.4.0"
+  resolved "https://registry.yarnpkg.com/open/-/open-6.4.0.tgz#5c13e96d0dc894686164f18965ecfe889ecfc8a9"
+  integrity sha512-IFenVPgF70fSm1keSd2iDBIDIBZkroLeuffXq+wKTzTJlBpesFWojV9lb8mzOfaAzM1sr7HQHuO0vtV0zYekGg==
+  dependencies:
+    is-wsl "^1.1.0"
+
+opencollective-postinstall@^2.0.2:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/opencollective-postinstall/-/opencollective-postinstall-2.0.3.tgz#7a0fff978f6dbfa4d006238fbac98ed4198c3259"
+  integrity sha512-8AV/sCtuzUeTo8gQK5qDZzARrulB3egtLzFgteqB2tcT4Mw7B8Kt7JcDHmltjz6FOAHsvTevk70gZEbhM4ZS9Q==
+
+opn@^5.5.0:
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/opn/-/opn-5.5.0.tgz#fc7164fab56d235904c51c3b27da6758ca3b9bfc"
+  integrity sha512-PqHpggC9bLV0VeWcdKhkpxY+3JTzetLSqTCWL/z/tFIbI6G8JCjondXklT1JinczLz2Xib62sSp0T/gKT4KksA==
+  dependencies:
+    is-wsl "^1.1.0"
+
+optimize-css-assets-webpack-plugin@5.0.3:
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/optimize-css-assets-webpack-plugin/-/optimize-css-assets-webpack-plugin-5.0.3.tgz#e2f1d4d94ad8c0af8967ebd7cf138dcb1ef14572"
+  integrity sha512-q9fbvCRS6EYtUKKSwI87qm2IxlyJK5b4dygW1rKUBT6mMDhdG5e5bZT63v6tnJR9F9FB/H5a0HTmtw+laUBxKA==
+  dependencies:
+    cssnano "^4.1.10"
+    last-call-webpack-plugin "^3.0.0"
+
+option-validator@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/option-validator/-/option-validator-2.0.6.tgz#a314dae65e26db5f948ef0ff96fc88f18bb76ed6"
+  integrity sha512-tmZDan2LRIRQyhUGvkff68/O0R8UmF+Btmiiz0SmSw2ng3CfPZB9wJlIjHpe/MKUZqyIZkVIXCrwr1tIN+0Dzg==
+  dependencies:
+    kind-of "^6.0.3"
+
+optionator@^0.8.1, optionator@^0.8.3:
+  version "0.8.3"
+  resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.8.3.tgz#84fa1d036fe9d3c7e21d99884b601167ec8fb495"
+  integrity sha512-+IW9pACdk3XWmmTXG8m3upGUJst5XRGzxMRjXzAuJ1XnIFNvfhjjIuYkDvysnPQ7qzqVzLt78BCruntqRhWQbA==
+  dependencies:
+    deep-is "~0.1.3"
+    fast-levenshtein "~2.0.6"
+    levn "~0.3.0"
+    prelude-ls "~1.1.2"
+    type-check "~0.3.2"
+    word-wrap "~1.2.3"
+
+original@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/original/-/original-1.0.2.tgz#e442a61cffe1c5fd20a65f3261c26663b303f25f"
+  integrity sha512-hyBVl6iqqUOJ8FqRe+l/gS8H+kKYjrEndd5Pm1MfBtsEKA038HkkdbAl/72EAXGyonD/PFsvmVG+EvcIpliMBg==
+  dependencies:
+    url-parse "^1.4.3"
+
+os-browserify@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/os-browserify/-/os-browserify-0.3.0.tgz#854373c7f5c2315914fc9bfc6bd8238fdda1ec27"
+  integrity sha1-hUNzx/XCMVkU/Jv8a9gjj92h7Cc=
+
+os-tmpdir@~1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
+  integrity sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=
+
+p-each-series@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/p-each-series/-/p-each-series-1.0.0.tgz#930f3d12dd1f50e7434457a22cd6f04ac6ad7f71"
+  integrity sha1-kw89Et0fUOdDRFeiLNbwSsatf3E=
+  dependencies:
+    p-reduce "^1.0.0"
+
+p-finally@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/p-finally/-/p-finally-1.0.0.tgz#3fbcfb15b899a44123b34b6dcc18b724336a2cae"
+  integrity sha1-P7z7FbiZpEEjs0ttzBi3JDNqLK4=
+
+p-limit@^1.1.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-1.3.0.tgz#b86bd5f0c25690911c7590fcbfc2010d54b3ccb8"
+  integrity sha512-vvcXsLAJ9Dr5rQOPk7toZQZJApBl2K4J6dANSsEuh6QI41JYcsS/qhTGa9ErIUUgK3WNQoJYvylxvjqmiqEA9Q==
+  dependencies:
+    p-try "^1.0.0"
+
+p-limit@^2.0.0, p-limit@^2.2.1:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-2.3.0.tgz#3dd33c647a214fdfffd835933eb086da0dc21db1"
+  integrity sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==
+  dependencies:
+    p-try "^2.0.0"
+
+p-limit@^3.0.2:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-3.1.0.tgz#e1daccbe78d0d1388ca18c64fea38e3e57e3706b"
+  integrity sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==
+  dependencies:
+    yocto-queue "^0.1.0"
+
+p-locate@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-2.0.0.tgz#20a0103b222a70c8fd39cc2e580680f3dde5ec43"
+  integrity sha1-IKAQOyIqcMj9OcwuWAaA893l7EM=
+  dependencies:
+    p-limit "^1.1.0"
+
+p-locate@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-3.0.0.tgz#322d69a05c0264b25997d9f40cd8a891ab0064a4"
+  integrity sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==
+  dependencies:
+    p-limit "^2.0.0"
+
+p-locate@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-5.0.0.tgz#83c8315c6785005e3bd021839411c9e110e6d834"
+  integrity sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==
+  dependencies:
+    p-limit "^3.0.2"
+
+p-map@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/p-map/-/p-map-2.1.0.tgz#310928feef9c9ecc65b68b17693018a665cea175"
+  integrity sha512-y3b8Kpd8OAN444hxfBbFfj1FY/RjtTd8tzYwhUqNYXx0fXx2iX4maP4Qr6qhIKbQXI02wTLAda4fYUbDagTUFw==
+
+p-reduce@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/p-reduce/-/p-reduce-1.0.0.tgz#18c2b0dd936a4690a529f8231f58a0fdb6a47dfa"
+  integrity sha1-GMKw3ZNqRpClKfgjH1ig/bakffo=
+
+p-retry@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/p-retry/-/p-retry-3.0.1.tgz#316b4c8893e2c8dc1cfa891f406c4b422bebf328"
+  integrity sha512-XE6G4+YTTkT2a0UWb2kjZe8xNwf8bIbnqpc/IS/idOBVhyves0mK5OJgeocjx7q5pvX/6m23xuzVPYT1uGM73w==
+  dependencies:
+    retry "^0.12.0"
+
+p-try@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/p-try/-/p-try-1.0.0.tgz#cbc79cdbaf8fd4228e13f621f2b1a237c1b207b3"
+  integrity sha1-y8ec26+P1CKOE/Yh8rGiN8GyB7M=
+
+p-try@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/p-try/-/p-try-2.2.0.tgz#cb2868540e313d61de58fafbe35ce9004d5540e6"
+  integrity sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==
+
+pako@~1.0.2, pako@~1.0.5:
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.11.tgz#6c9599d340d54dfd3946380252a35705a6b992bf"
+  integrity sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==
+
+parallel-transform@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/parallel-transform/-/parallel-transform-1.2.0.tgz#9049ca37d6cb2182c3b1d2c720be94d14a5814fc"
+  integrity sha512-P2vSmIu38uIlvdcU7fDkyrxj33gTUy/ABO5ZUbGowxNCopBq/OoD42bP4UmMrJoPyk4Uqf0mu3mtWBhHCZD8yg==
+  dependencies:
+    cyclist "^1.0.1"
+    inherits "^2.0.3"
+    readable-stream "^2.1.5"
+
+param-case@2.1.x:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/param-case/-/param-case-2.1.1.tgz#df94fd8cf6531ecf75e6bef9a0858fbc72be2247"
+  integrity sha1-35T9jPZTHs915r75oIWPvHK+Ikc=
+  dependencies:
+    no-case "^2.2.0"
+
+parent-module@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/parent-module/-/parent-module-1.0.1.tgz#691d2709e78c79fae3a156622452d00762caaaa2"
+  integrity sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==
+  dependencies:
+    callsites "^3.0.0"
+
+parse-asn1@^5.0.0, parse-asn1@^5.1.5:
+  version "5.1.6"
+  resolved "https://registry.yarnpkg.com/parse-asn1/-/parse-asn1-5.1.6.tgz#385080a3ec13cb62a62d39409cb3e88844cdaed4"
+  integrity sha512-RnZRo1EPU6JBnra2vGHj0yhp6ebyjBZpmUCLHWiFhxlzvBCCpAuZ7elsBp1PVAbQN0/04VD/19rfzlBSwLstMw==
+  dependencies:
+    asn1.js "^5.2.0"
+    browserify-aes "^1.0.0"
+    evp_bytestokey "^1.0.0"
+    pbkdf2 "^3.0.3"
+    safe-buffer "^5.1.1"
+
+parse-json@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-2.2.0.tgz#f480f40434ef80741f8469099f8dea18f55a4dc9"
+  integrity sha1-9ID0BDTvgHQfhGkJn43qGPVaTck=
+  dependencies:
+    error-ex "^1.2.0"
+
+parse-json@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-4.0.0.tgz#be35f5425be1f7f6c747184f98a788cb99477ee0"
+  integrity sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=
+  dependencies:
+    error-ex "^1.3.1"
+    json-parse-better-errors "^1.0.1"
+
+parse-json@^5.0.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-5.2.0.tgz#c76fc66dee54231c962b22bcc8a72cf2f99753cd"
+  integrity sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    error-ex "^1.3.1"
+    json-parse-even-better-errors "^2.3.0"
+    lines-and-columns "^1.1.6"
+
+parse5@4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/parse5/-/parse5-4.0.0.tgz#6d78656e3da8d78b4ec0b906f7c08ef1dfe3f608"
+  integrity sha512-VrZ7eOd3T1Fk4XWNXMgiGBK/z0MG48BWG2uQNU4I72fkQuKUTZpl+u9k+CxEG0twMVzSmXEEz12z5Fnw1jIQFA==
+
+parse5@5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/parse5/-/parse5-5.1.0.tgz#c59341c9723f414c452975564c7c00a68d58acd2"
+  integrity sha512-fxNG2sQjHvlVAYmzBZS9YlDp6PTSSDwa98vkD4QgVDDCAo84z5X1t5XyJQ62ImdLXx5NdIIfihey6xpum9/gRQ==
+
+parseurl@~1.3.2, parseurl@~1.3.3:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.3.tgz#9da19e7bee8d12dff0513ed5b76957793bc2e8d4"
+  integrity sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==
+
+pascalcase@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/pascalcase/-/pascalcase-0.1.1.tgz#b363e55e8006ca6fe21784d2db22bd15d7917f14"
+  integrity sha1-s2PlXoAGym/iF4TS2yK9FdeRfxQ=
+
+path-browserify@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/path-browserify/-/path-browserify-0.0.1.tgz#e6c4ddd7ed3aa27c68a20cc4e50e1a4ee83bbc4a"
+  integrity sha512-BapA40NHICOS+USX9SN4tyhq+A2RrN/Ws5F0Z5aMHDp98Fl86lX8Oti8B7uN93L4Ifv4fHOEA+pQw87gmMO/lQ==
+
+path-dirname@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/path-dirname/-/path-dirname-1.0.2.tgz#cc33d24d525e099a5388c0336c6e32b9160609e0"
+  integrity sha1-zDPSTVJeCZpTiMAzbG4yuRYGCeA=
+
+path-exists@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-2.1.0.tgz#0feb6c64f0fc518d9a754dd5efb62c7022761f4b"
+  integrity sha1-D+tsZPD8UY2adU3V77YscCJ2H0s=
+  dependencies:
+    pinkie-promise "^2.0.0"
+
+path-exists@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-3.0.0.tgz#ce0ebeaa5f78cb18925ea7d810d7b59b010fd515"
+  integrity sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=
+
+path-exists@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-4.0.0.tgz#513bdbe2d3b95d7762e8c1137efa195c6c61b5b3"
+  integrity sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==
+
+path-is-absolute@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
+  integrity sha1-F0uSaHNVNP+8es5r9TpanhtcX18=
+
+path-is-inside@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/path-is-inside/-/path-is-inside-1.0.2.tgz#365417dede44430d1c11af61027facf074bdfc53"
+  integrity sha1-NlQX3t5EQw0cEa9hAn+s8HS9/FM=
+
+path-key@^2.0.0, path-key@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/path-key/-/path-key-2.0.1.tgz#411cadb574c5a140d3a4b1910d40d80cc9f40b40"
+  integrity sha1-QRyttXTFoUDTpLGRDUDYDMn0C0A=
+
+path-parse@^1.0.6, path-parse@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
+  integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
+
+path-to-regexp@0.1.7:
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"
+  integrity sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=
+
+path-to-regexp@^1.7.0:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-1.8.0.tgz#887b3ba9d84393e87a0a0b9f4cb756198b53548a"
+  integrity sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==
+  dependencies:
+    isarray "0.0.1"
+
+path-type@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/path-type/-/path-type-2.0.0.tgz#f012ccb8415b7096fc2daa1054c3d72389594c73"
+  integrity sha1-8BLMuEFbcJb8LaoQVMPXI4lZTHM=
+  dependencies:
+    pify "^2.0.0"
+
+path-type@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/path-type/-/path-type-3.0.0.tgz#cef31dc8e0a1a3bb0d105c0cd97cf3bf47f4e36f"
+  integrity sha512-T2ZUsdZFHgA3u4e5PfPbjd7HDDpxPnQb5jN0SrDsjNSuVXHJqtwTnWqG0B1jZrgmJ/7lj1EmVIByWt1gxGkWvg==
+  dependencies:
+    pify "^3.0.0"
+
+path-type@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
+  integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
+
+path-webpack@0.0.3:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/path-webpack/-/path-webpack-0.0.3.tgz#ff6dec749eec5a94605c04d5f63fc55607a03a16"
+  integrity sha1-/23sdJ7sWpRgXATV9j/FVgegOhY=
+
+pbkdf2@^3.0.3:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/pbkdf2/-/pbkdf2-3.1.2.tgz#dd822aa0887580e52f1a039dc3eda108efae3075"
+  integrity sha512-iuh7L6jA7JEGu2WxDwtQP1ddOpaJNC4KlDEFfdQajSGgGPNi4OyDc2R7QnbY2bR9QjBVGwgvTdNJZoE7RaxUMA==
+  dependencies:
+    create-hash "^1.1.2"
+    create-hmac "^1.1.4"
+    ripemd160 "^2.0.1"
+    safe-buffer "^5.0.1"
+    sha.js "^2.4.8"
+
+pdfjs-dist@2.1.266:
+  version "2.1.266"
+  resolved "https://registry.yarnpkg.com/pdfjs-dist/-/pdfjs-dist-2.1.266.tgz#cded02268b389559e807f410d2a729db62160026"
+  integrity sha512-Jy7o1wE3NezPxozexSbq4ltuLT0Z21ew/qrEiAEeUZzHxMHGk4DUV1D7RuCXg5vJDvHmjX1YssN+we9QfRRgXQ==
+  dependencies:
+    node-ensure "^0.0.0"
+    worker-loader "^2.0.0"
+
+performance-now@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
+  integrity sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=
+
+picocolors@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-0.2.1.tgz#570670f793646851d1ba135996962abad587859f"
+  integrity sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==
+
+picocolors@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
+  integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
+
+picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.3, picomatch@^2.3.0:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
+  integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
+
+pify@^2.0.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
+  integrity sha1-7RQaasBDqEnqWISY59yosVMw6Qw=
+
+pify@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/pify/-/pify-3.0.0.tgz#e5a4acd2c101fdf3d9a4d07f0dbc4db49dd28176"
+  integrity sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=
+
+pify@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/pify/-/pify-4.0.1.tgz#4b2cd25c50d598735c50292224fd8c6df41e3231"
+  integrity sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==
+
+pinkie-promise@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/pinkie-promise/-/pinkie-promise-2.0.1.tgz#2135d6dfa7a358c069ac9b178776288228450ffa"
+  integrity sha1-ITXW36ejWMBprJsXh3YogihFD/o=
+  dependencies:
+    pinkie "^2.0.0"
+
+pinkie@^2.0.0:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/pinkie/-/pinkie-2.0.4.tgz#72556b80cfa0d48a974e80e77248e80ed4f7f870"
+  integrity sha1-clVrgM+g1IqXToDnckjoDtT3+HA=
+
+pirates@^4.0.1:
+  version "4.0.5"
+  resolved "https://registry.yarnpkg.com/pirates/-/pirates-4.0.5.tgz#feec352ea5c3268fb23a37c702ab1699f35a5f3b"
+  integrity sha512-8V9+HQPupnaXMA23c5hvl69zXvTwTzyAYasnkb0Tts4XvO4CliqONMOnvlq26rkhLC3nWDFBJf73LU1e1VZLaQ==
+
+pkg-dir@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-1.0.0.tgz#7a4b508a8d5bb2d629d447056ff4e9c9314cf3d4"
+  integrity sha1-ektQio1bstYp1EcFb/TpyTFM89Q=
+  dependencies:
+    find-up "^1.0.0"
+
+pkg-dir@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-3.0.0.tgz#2749020f239ed990881b1f71210d51eb6523bea3"
+  integrity sha512-/E57AYkoeQ25qkxMj5PBOVgF8Kiu/h7cYS30Z5+R7WaiCCBfLq58ZI/dSeaEKb9WVJV5n/03QwrN3IeWIFllvw==
+  dependencies:
+    find-up "^3.0.0"
+
+pkg-dir@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-5.0.0.tgz#a02d6aebe6ba133a928f74aec20bafdfe6b8e760"
+  integrity sha512-NPE8TDbzl/3YQYY7CSS228s3g2ollTFnc+Qi3tqmqJp9Vg2ovUpixcJEo2HJScN2Ez+kEaal6y70c0ehqJBJeA==
+  dependencies:
+    find-up "^5.0.0"
+
+pkg-up@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/pkg-up/-/pkg-up-2.0.0.tgz#c819ac728059a461cab1c3889a2be3c49a004d7f"
+  integrity sha1-yBmscoBZpGHKscOImivjxJoATX8=
+  dependencies:
+    find-up "^2.1.0"
+
+please-upgrade-node@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/please-upgrade-node/-/please-upgrade-node-3.2.0.tgz#aeddd3f994c933e4ad98b99d9a556efa0e2fe942"
+  integrity sha512-gQR3WpIgNIKwBMVLkpMUeR3e1/E1y42bqDQZfql+kDeXd8COYfM8PQA4X6y7a8u9Ua9FHmsrrmirW2vHs45hWg==
+  dependencies:
+    semver-compare "^1.0.0"
+
+pn@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/pn/-/pn-1.1.0.tgz#e2f4cef0e219f463c179ab37463e4e1ecdccbafb"
+  integrity sha512-2qHaIQr2VLRFoxe2nASzsV6ef4yOOH+Fi9FBOVH6cqeSgUnoyySPZkxzLuzd+RYOQTRpROA0ztTMqxROKSb/nA==
+
+pnp-webpack-plugin@1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/pnp-webpack-plugin/-/pnp-webpack-plugin-1.5.0.tgz#62a1cd3068f46d564bb33c56eb250e4d586676eb"
+  integrity sha512-jd9olUr9D7do+RN8Wspzhpxhgp1n6Vd0NtQ4SFkmIACZoEL1nkyAdW9Ygrinjec0vgDcWjscFQQ1gDW8rsfKTg==
+  dependencies:
+    ts-pnp "^1.1.2"
+
+popper.js@1.16.1-lts:
+  version "1.16.1-lts"
+  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1-lts.tgz#cf6847b807da3799d80ee3d6d2f90df8a3f50b05"
+  integrity sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA==
+
+portfinder@^1.0.26:
+  version "1.0.28"
+  resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.28.tgz#67c4622852bd5374dd1dd900f779f53462fac778"
+  integrity sha512-Se+2isanIcEqf2XMHjyUKskczxbPH7dQnlMjXX6+dybayyHvAf/TCgyMRlzf/B6QDhAEFOGes0pzRo3by4AbMA==
+  dependencies:
+    async "^2.6.2"
+    debug "^3.1.1"
+    mkdirp "^0.5.5"
+
+posix-character-classes@^0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
+  integrity sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=
+
+postcss-attribute-case-insensitive@^4.0.1:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-attribute-case-insensitive/-/postcss-attribute-case-insensitive-4.0.2.tgz#d93e46b504589e94ac7277b0463226c68041a880"
+  integrity sha512-clkFxk/9pcdb4Vkn0hAHq3YnxBQ2p0CGD1dy24jN+reBck+EWxMbxSUqN4Yj7t0w8csl87K6p0gxBe1utkJsYA==
+  dependencies:
+    postcss "^7.0.2"
+    postcss-selector-parser "^6.0.2"
+
+postcss-browser-comments@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-browser-comments/-/postcss-browser-comments-2.0.0.tgz#dc48d6a8ddbff188a80a000b7393436cb18aed88"
+  integrity sha512-xGG0UvoxwBc4Yx4JX3gc0RuDl1kc4bVihCzzk6UC72YPfq5fu3c717Nu8Un3nvnq1BJ31gBnFXIG/OaUTnpHgA==
+  dependencies:
+    postcss "^7.0.2"
+
+postcss-calc@^7.0.1:
+  version "7.0.5"
+  resolved "https://registry.yarnpkg.com/postcss-calc/-/postcss-calc-7.0.5.tgz#f8a6e99f12e619c2ebc23cf6c486fdc15860933e"
+  integrity sha512-1tKHutbGtLtEZF6PT4JSihCHfIVldU72mZ8SdZHIYriIZ9fh9k9aWSppaT8rHsyI3dX+KSR+W+Ix9BMY3AODrg==
+  dependencies:
+    postcss "^7.0.27"
+    postcss-selector-parser "^6.0.2"
+    postcss-value-parser "^4.0.2"
+
+postcss-color-functional-notation@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-color-functional-notation/-/postcss-color-functional-notation-2.0.1.tgz#5efd37a88fbabeb00a2966d1e53d98ced93f74e0"
+  integrity sha512-ZBARCypjEDofW4P6IdPVTLhDNXPRn8T2s1zHbZidW6rPaaZvcnCS2soYFIQJrMZSxiePJ2XIYTlcb2ztr/eT2g==
+  dependencies:
+    postcss "^7.0.2"
+    postcss-values-parser "^2.0.0"
+
+postcss-color-gray@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-color-gray/-/postcss-color-gray-5.0.0.tgz#532a31eb909f8da898ceffe296fdc1f864be8547"
+  integrity sha512-q6BuRnAGKM/ZRpfDascZlIZPjvwsRye7UDNalqVz3s7GDxMtqPY6+Q871liNxsonUw8oC61OG+PSaysYpl1bnw==
+  dependencies:
+    "@csstools/convert-colors" "^1.4.0"
+    postcss "^7.0.5"
+    postcss-values-parser "^2.0.0"
+
+postcss-color-hex-alpha@^5.0.3:
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/postcss-color-hex-alpha/-/postcss-color-hex-alpha-5.0.3.tgz#a8d9ca4c39d497c9661e374b9c51899ef0f87388"
+  integrity sha512-PF4GDel8q3kkreVXKLAGNpHKilXsZ6xuu+mOQMHWHLPNyjiUBOr75sp5ZKJfmv1MCus5/DWUGcK9hm6qHEnXYw==
+  dependencies:
+    postcss "^7.0.14"
+    postcss-values-parser "^2.0.1"
+
+postcss-color-mod-function@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/postcss-color-mod-function/-/postcss-color-mod-function-3.0.3.tgz#816ba145ac11cc3cb6baa905a75a49f903e4d31d"
+  integrity sha512-YP4VG+xufxaVtzV6ZmhEtc+/aTXH3d0JLpnYfxqTvwZPbJhWqp8bSY3nfNzNRFLgB4XSaBA82OE4VjOOKpCdVQ==
+  dependencies:
+    "@csstools/convert-colors" "^1.4.0"
+    postcss "^7.0.2"
+    postcss-values-parser "^2.0.0"
+
+postcss-color-rebeccapurple@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-color-rebeccapurple/-/postcss-color-rebeccapurple-4.0.1.tgz#c7a89be872bb74e45b1e3022bfe5748823e6de77"
+  integrity sha512-aAe3OhkS6qJXBbqzvZth2Au4V3KieR5sRQ4ptb2b2O8wgvB3SJBsdG+jsn2BZbbwekDG8nTfcCNKcSfe/lEy8g==
+  dependencies:
+    postcss "^7.0.2"
+    postcss-values-parser "^2.0.0"
+
+postcss-colormin@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/postcss-colormin/-/postcss-colormin-4.0.3.tgz#ae060bce93ed794ac71264f08132d550956bd381"
+  integrity sha512-WyQFAdDZpExQh32j0U0feWisZ0dmOtPl44qYmJKkq9xFWY3p+4qnRzCHeNrkeRhwPHz9bQ3mo0/yVkaply0MNw==
+  dependencies:
+    browserslist "^4.0.0"
+    color "^3.0.0"
+    has "^1.0.0"
+    postcss "^7.0.0"
+    postcss-value-parser "^3.0.0"
+
+postcss-convert-values@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-convert-values/-/postcss-convert-values-4.0.1.tgz#ca3813ed4da0f812f9d43703584e449ebe189a7f"
+  integrity sha512-Kisdo1y77KUC0Jmn0OXU/COOJbzM8cImvw1ZFsBgBgMgb1iL23Zs/LXRe3r+EZqM3vGYKdQ2YJVQ5VkJI+zEJQ==
+  dependencies:
+    postcss "^7.0.0"
+    postcss-value-parser "^3.0.0"
+
+postcss-custom-media@^7.0.8:
+  version "7.0.8"
+  resolved "https://registry.yarnpkg.com/postcss-custom-media/-/postcss-custom-media-7.0.8.tgz#fffd13ffeffad73621be5f387076a28b00294e0c"
+  integrity sha512-c9s5iX0Ge15o00HKbuRuTqNndsJUbaXdiNsksnVH8H4gdc+zbLzr/UasOwNG6CTDpLFekVY4672eWdiiWu2GUg==
+  dependencies:
+    postcss "^7.0.14"
+
+postcss-custom-properties@^8.0.11:
+  version "8.0.11"
+  resolved "https://registry.yarnpkg.com/postcss-custom-properties/-/postcss-custom-properties-8.0.11.tgz#2d61772d6e92f22f5e0d52602df8fae46fa30d97"
+  integrity sha512-nm+o0eLdYqdnJ5abAJeXp4CEU1c1k+eB2yMCvhgzsds/e0umabFrN6HoTy/8Q4K5ilxERdl/JD1LO5ANoYBeMA==
+  dependencies:
+    postcss "^7.0.17"
+    postcss-values-parser "^2.0.1"
+
+postcss-custom-selectors@^5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/postcss-custom-selectors/-/postcss-custom-selectors-5.1.2.tgz#64858c6eb2ecff2fb41d0b28c9dd7b3db4de7fba"
+  integrity sha512-DSGDhqinCqXqlS4R7KGxL1OSycd1lydugJ1ky4iRXPHdBRiozyMHrdu0H3o7qNOCiZwySZTUI5MV0T8QhCLu+w==
+  dependencies:
+    postcss "^7.0.2"
+    postcss-selector-parser "^5.0.0-rc.3"
+
+postcss-dir-pseudo-class@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-dir-pseudo-class/-/postcss-dir-pseudo-class-5.0.0.tgz#6e3a4177d0edb3abcc85fdb6fbb1c26dabaeaba2"
+  integrity sha512-3pm4oq8HYWMZePJY+5ANriPs3P07q+LW6FAdTlkFH2XqDdP4HeeJYMOzn0HYLhRSjBO3fhiqSwwU9xEULSrPgw==
+  dependencies:
+    postcss "^7.0.2"
+    postcss-selector-parser "^5.0.0-rc.3"
+
+postcss-discard-comments@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-discard-comments/-/postcss-discard-comments-4.0.2.tgz#1fbabd2c246bff6aaad7997b2b0918f4d7af4033"
+  integrity sha512-RJutN259iuRf3IW7GZyLM5Sw4GLTOH8FmsXBnv8Ab/Tc2k4SR4qbV4DNbyyY4+Sjo362SyDmW2DQ7lBSChrpkg==
+  dependencies:
+    postcss "^7.0.0"
+
+postcss-discard-duplicates@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-discard-duplicates/-/postcss-discard-duplicates-4.0.2.tgz#3fe133cd3c82282e550fc9b239176a9207b784eb"
+  integrity sha512-ZNQfR1gPNAiXZhgENFfEglF93pciw0WxMkJeVmw8eF+JZBbMD7jp6C67GqJAXVZP2BWbOztKfbsdmMp/k8c6oQ==
+  dependencies:
+    postcss "^7.0.0"
+
+postcss-discard-empty@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-discard-empty/-/postcss-discard-empty-4.0.1.tgz#c8c951e9f73ed9428019458444a02ad90bb9f765"
+  integrity sha512-B9miTzbznhDjTfjvipfHoqbWKwd0Mj+/fL5s1QOz06wufguil+Xheo4XpOnc4NqKYBCNqqEzgPv2aPBIJLox0w==
+  dependencies:
+    postcss "^7.0.0"
+
+postcss-discard-overridden@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-discard-overridden/-/postcss-discard-overridden-4.0.1.tgz#652aef8a96726f029f5e3e00146ee7a4e755ff57"
+  integrity sha512-IYY2bEDD7g1XM1IDEsUT4//iEYCxAmP5oDSFMVU/JVvT7gh+l4fmjciLqGgwjdWpQIdb0Che2VX00QObS5+cTg==
+  dependencies:
+    postcss "^7.0.0"
+
+postcss-double-position-gradients@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-double-position-gradients/-/postcss-double-position-gradients-1.0.0.tgz#fc927d52fddc896cb3a2812ebc5df147e110522e"
+  integrity sha512-G+nV8EnQq25fOI8CH/B6krEohGWnF5+3A6H/+JEpOncu5dCnkS1QQ6+ct3Jkaepw1NGVqqOZH6lqrm244mCftA==
+  dependencies:
+    postcss "^7.0.5"
+    postcss-values-parser "^2.0.0"
+
+postcss-env-function@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-env-function/-/postcss-env-function-2.0.2.tgz#0f3e3d3c57f094a92c2baf4b6241f0b0da5365d7"
+  integrity sha512-rwac4BuZlITeUbiBq60h/xbLzXY43qOsIErngWa4l7Mt+RaSkT7QBjXVGTcBHupykkblHMDrBFh30zchYPaOUw==
+  dependencies:
+    postcss "^7.0.2"
+    postcss-values-parser "^2.0.0"
+
+postcss-flexbugs-fixes@4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-flexbugs-fixes/-/postcss-flexbugs-fixes-4.1.0.tgz#e094a9df1783e2200b7b19f875dcad3b3aff8b20"
+  integrity sha512-jr1LHxQvStNNAHlgco6PzY308zvLklh7SJVYuWUwyUQncofaAlD2l+P/gxKHOdqWKe7xJSkVLFF/2Tp+JqMSZA==
+  dependencies:
+    postcss "^7.0.0"
+
+postcss-focus-visible@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-focus-visible/-/postcss-focus-visible-4.0.0.tgz#477d107113ade6024b14128317ade2bd1e17046e"
+  integrity sha512-Z5CkWBw0+idJHSV6+Bgf2peDOFf/x4o+vX/pwcNYrWpXFrSfTkQ3JQ1ojrq9yS+upnAlNRHeg8uEwFTgorjI8g==
+  dependencies:
+    postcss "^7.0.2"
+
+postcss-focus-within@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-focus-within/-/postcss-focus-within-3.0.0.tgz#763b8788596cee9b874c999201cdde80659ef680"
+  integrity sha512-W0APui8jQeBKbCGZudW37EeMCjDeVxKgiYfIIEo8Bdh5SpB9sxds/Iq8SEuzS0Q4YFOlG7EPFulbbxujpkrV2w==
+  dependencies:
+    postcss "^7.0.2"
+
+postcss-font-variant@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-font-variant/-/postcss-font-variant-4.0.1.tgz#42d4c0ab30894f60f98b17561eb5c0321f502641"
+  integrity sha512-I3ADQSTNtLTTd8uxZhtSOrTCQ9G4qUVKPjHiDk0bV75QSxXjVWiJVJ2VLdspGUi9fbW9BcjKJoRvxAH1pckqmA==
+  dependencies:
+    postcss "^7.0.2"
+
+postcss-gap-properties@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-gap-properties/-/postcss-gap-properties-2.0.0.tgz#431c192ab3ed96a3c3d09f2ff615960f902c1715"
+  integrity sha512-QZSqDaMgXCHuHTEzMsS2KfVDOq7ZFiknSpkrPJY6jmxbugUPTuSzs/vuE5I3zv0WAS+3vhrlqhijiprnuQfzmg==
+  dependencies:
+    postcss "^7.0.2"
+
+postcss-image-set-function@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-image-set-function/-/postcss-image-set-function-3.0.1.tgz#28920a2f29945bed4c3198d7df6496d410d3f288"
+  integrity sha512-oPTcFFip5LZy8Y/whto91L9xdRHCWEMs3e1MdJxhgt4jy2WYXfhkng59fH5qLXSCPN8k4n94p1Czrfe5IOkKUw==
+  dependencies:
+    postcss "^7.0.2"
+    postcss-values-parser "^2.0.0"
+
+postcss-initial@^3.0.0:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/postcss-initial/-/postcss-initial-3.0.4.tgz#9d32069a10531fe2ecafa0b6ac750ee0bc7efc53"
+  integrity sha512-3RLn6DIpMsK1l5UUy9jxQvoDeUN4gP939tDcKUHD/kM8SGSKbFAnvkpFpj3Bhtz3HGk1jWY5ZNWX6mPta5M9fg==
+  dependencies:
+    postcss "^7.0.2"
+
+postcss-lab-function@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-lab-function/-/postcss-lab-function-2.0.1.tgz#bb51a6856cd12289ab4ae20db1e3821ef13d7d2e"
+  integrity sha512-whLy1IeZKY+3fYdqQFuDBf8Auw+qFuVnChWjmxm/UhHWqNHZx+B99EwxTvGYmUBqe3Fjxs4L1BoZTJmPu6usVg==
+  dependencies:
+    "@csstools/convert-colors" "^1.4.0"
+    postcss "^7.0.2"
+    postcss-values-parser "^2.0.0"
+
+postcss-load-config@^2.0.0:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-2.1.2.tgz#c5ea504f2c4aef33c7359a34de3573772ad7502a"
+  integrity sha512-/rDeGV6vMUo3mwJZmeHfEDvwnTKKqQ0S7OHUi/kJvvtx3aWtyWG2/0ZWnzCt2keEclwN6Tf0DST2v9kITdOKYw==
+  dependencies:
+    cosmiconfig "^5.0.0"
+    import-cwd "^2.0.0"
+
+postcss-loader@3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-3.0.0.tgz#6b97943e47c72d845fa9e03f273773d4e8dd6c2d"
+  integrity sha512-cLWoDEY5OwHcAjDnkyRQzAXfs2jrKjXpO/HQFcc5b5u/r7aa471wdmChmwfnv7x2u840iat/wi0lQ5nbRgSkUA==
+  dependencies:
+    loader-utils "^1.1.0"
+    postcss "^7.0.0"
+    postcss-load-config "^2.0.0"
+    schema-utils "^1.0.0"
+
+postcss-logical@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-logical/-/postcss-logical-3.0.0.tgz#2495d0f8b82e9f262725f75f9401b34e7b45d5b5"
+  integrity sha512-1SUKdJc2vuMOmeItqGuNaC+N8MzBWFWEkAnRnLpFYj1tGGa7NqyVBujfRtgNa2gXR+6RkGUiB2O5Vmh7E2RmiA==
+  dependencies:
+    postcss "^7.0.2"
+
+postcss-media-minmax@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-media-minmax/-/postcss-media-minmax-4.0.0.tgz#b75bb6cbc217c8ac49433e12f22048814a4f5ed5"
+  integrity sha512-fo9moya6qyxsjbFAYl97qKO9gyre3qvbMnkOZeZwlsW6XYFsvs2DMGDlchVLfAd8LHPZDxivu/+qW2SMQeTHBw==
+  dependencies:
+    postcss "^7.0.2"
+
+postcss-merge-longhand@^4.0.11:
+  version "4.0.11"
+  resolved "https://registry.yarnpkg.com/postcss-merge-longhand/-/postcss-merge-longhand-4.0.11.tgz#62f49a13e4a0ee04e7b98f42bb16062ca2549e24"
+  integrity sha512-alx/zmoeXvJjp7L4mxEMjh8lxVlDFX1gqWHzaaQewwMZiVhLo42TEClKaeHbRf6J7j82ZOdTJ808RtN0ZOZwvw==
+  dependencies:
+    css-color-names "0.0.4"
+    postcss "^7.0.0"
+    postcss-value-parser "^3.0.0"
+    stylehacks "^4.0.0"
+
+postcss-merge-rules@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/postcss-merge-rules/-/postcss-merge-rules-4.0.3.tgz#362bea4ff5a1f98e4075a713c6cb25aefef9a650"
+  integrity sha512-U7e3r1SbvYzO0Jr3UT/zKBVgYYyhAz0aitvGIYOYK5CPmkNih+WDSsS5tvPrJ8YMQYlEMvsZIiqmn7HdFUaeEQ==
+  dependencies:
+    browserslist "^4.0.0"
+    caniuse-api "^3.0.0"
+    cssnano-util-same-parent "^4.0.0"
+    postcss "^7.0.0"
+    postcss-selector-parser "^3.0.0"
+    vendors "^1.0.0"
+
+postcss-minify-font-values@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-minify-font-values/-/postcss-minify-font-values-4.0.2.tgz#cd4c344cce474343fac5d82206ab2cbcb8afd5a6"
+  integrity sha512-j85oO6OnRU9zPf04+PZv1LYIYOprWm6IA6zkXkrJXyRveDEuQggG6tvoy8ir8ZwjLxLuGfNkCZEQG7zan+Hbtg==
+  dependencies:
+    postcss "^7.0.0"
+    postcss-value-parser "^3.0.0"
+
+postcss-minify-gradients@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-minify-gradients/-/postcss-minify-gradients-4.0.2.tgz#93b29c2ff5099c535eecda56c4aa6e665a663471"
+  integrity sha512-qKPfwlONdcf/AndP1U8SJ/uzIJtowHlMaSioKzebAXSG4iJthlWC9iSWznQcX4f66gIWX44RSA841HTHj3wK+Q==
+  dependencies:
+    cssnano-util-get-arguments "^4.0.0"
+    is-color-stop "^1.0.0"
+    postcss "^7.0.0"
+    postcss-value-parser "^3.0.0"
+
+postcss-minify-params@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-minify-params/-/postcss-minify-params-4.0.2.tgz#6b9cef030c11e35261f95f618c90036d680db874"
+  integrity sha512-G7eWyzEx0xL4/wiBBJxJOz48zAKV2WG3iZOqVhPet/9geefm/Px5uo1fzlHu+DOjT+m0Mmiz3jkQzVHe6wxAWg==
+  dependencies:
+    alphanum-sort "^1.0.0"
+    browserslist "^4.0.0"
+    cssnano-util-get-arguments "^4.0.0"
+    postcss "^7.0.0"
+    postcss-value-parser "^3.0.0"
+    uniqs "^2.0.0"
+
+postcss-minify-selectors@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-minify-selectors/-/postcss-minify-selectors-4.0.2.tgz#e2e5eb40bfee500d0cd9243500f5f8ea4262fbd8"
+  integrity sha512-D5S1iViljXBj9kflQo4YutWnJmwm8VvIsU1GeXJGiG9j8CIg9zs4voPMdQDUmIxetUOh60VilsNzCiAFTOqu3g==
+  dependencies:
+    alphanum-sort "^1.0.0"
+    has "^1.0.0"
+    postcss "^7.0.0"
+    postcss-selector-parser "^3.0.0"
+
+postcss-modules-extract-imports@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-2.0.0.tgz#818719a1ae1da325f9832446b01136eeb493cd7e"
+  integrity sha512-LaYLDNS4SG8Q5WAWqIJgdHPJrDDr/Lv775rMBFUbgjTz6j34lUznACHcdRWroPvXANP2Vj7yNK57vp9eFqzLWQ==
+  dependencies:
+    postcss "^7.0.5"
+
+postcss-modules-local-by-default@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-2.0.6.tgz#dd9953f6dd476b5fd1ef2d8830c8929760b56e63"
+  integrity sha512-oLUV5YNkeIBa0yQl7EYnxMgy4N6noxmiwZStaEJUSe2xPMcdNc8WmBQuQCx18H5psYbVxz8zoHk0RAAYZXP9gA==
+  dependencies:
+    postcss "^7.0.6"
+    postcss-selector-parser "^6.0.0"
+    postcss-value-parser "^3.3.1"
+
+postcss-modules-scope@^2.1.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-2.2.0.tgz#385cae013cc7743f5a7d7602d1073a89eaae62ee"
+  integrity sha512-YyEgsTMRpNd+HmyC7H/mh3y+MeFWevy7V1evVhJWewmMbjDHIbZbOXICC2y+m1xI1UVfIT1HMW/O04Hxyu9oXQ==
+  dependencies:
+    postcss "^7.0.6"
+    postcss-selector-parser "^6.0.0"
+
+postcss-modules-values@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-values/-/postcss-modules-values-2.0.0.tgz#479b46dc0c5ca3dc7fa5270851836b9ec7152f64"
+  integrity sha512-Ki7JZa7ff1N3EIMlPnGTZfUMe69FFwiQPnVSXC9mnn3jozCRBYIxiZd44yJOV2AmabOo4qFf8s0dC/+lweG7+w==
+  dependencies:
+    icss-replace-symbols "^1.1.0"
+    postcss "^7.0.6"
+
+postcss-nesting@^7.0.0:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-nesting/-/postcss-nesting-7.0.1.tgz#b50ad7b7f0173e5b5e3880c3501344703e04c052"
+  integrity sha512-FrorPb0H3nuVq0Sff7W2rnc3SmIcruVC6YwpcS+k687VxyxO33iE1amna7wHuRVzM8vfiYofXSBHNAZ3QhLvYg==
+  dependencies:
+    postcss "^7.0.2"
+
+postcss-normalize-charset@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-charset/-/postcss-normalize-charset-4.0.1.tgz#8b35add3aee83a136b0471e0d59be58a50285dd4"
+  integrity sha512-gMXCrrlWh6G27U0hF3vNvR3w8I1s2wOBILvA87iNXaPvSNo5uZAMYsZG7XjCUf1eVxuPfyL4TJ7++SGZLc9A3g==
+  dependencies:
+    postcss "^7.0.0"
+
+postcss-normalize-display-values@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-display-values/-/postcss-normalize-display-values-4.0.2.tgz#0dbe04a4ce9063d4667ed2be476bb830c825935a"
+  integrity sha512-3F2jcsaMW7+VtRMAqf/3m4cPFhPD3EFRgNs18u+k3lTJJlVe7d0YPO+bnwqo2xg8YiRpDXJI2u8A0wqJxMsQuQ==
+  dependencies:
+    cssnano-util-get-match "^4.0.0"
+    postcss "^7.0.0"
+    postcss-value-parser "^3.0.0"
+
+postcss-normalize-positions@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-positions/-/postcss-normalize-positions-4.0.2.tgz#05f757f84f260437378368a91f8932d4b102917f"
+  integrity sha512-Dlf3/9AxpxE+NF1fJxYDeggi5WwV35MXGFnnoccP/9qDtFrTArZ0D0R+iKcg5WsUd8nUYMIl8yXDCtcrT8JrdA==
+  dependencies:
+    cssnano-util-get-arguments "^4.0.0"
+    has "^1.0.0"
+    postcss "^7.0.0"
+    postcss-value-parser "^3.0.0"
+
+postcss-normalize-repeat-style@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-repeat-style/-/postcss-normalize-repeat-style-4.0.2.tgz#c4ebbc289f3991a028d44751cbdd11918b17910c"
+  integrity sha512-qvigdYYMpSuoFs3Is/f5nHdRLJN/ITA7huIoCyqqENJe9PvPmLhNLMu7QTjPdtnVf6OcYYO5SHonx4+fbJE1+Q==
+  dependencies:
+    cssnano-util-get-arguments "^4.0.0"
+    cssnano-util-get-match "^4.0.0"
+    postcss "^7.0.0"
+    postcss-value-parser "^3.0.0"
+
+postcss-normalize-string@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-string/-/postcss-normalize-string-4.0.2.tgz#cd44c40ab07a0c7a36dc5e99aace1eca4ec2690c"
+  integrity sha512-RrERod97Dnwqq49WNz8qo66ps0swYZDSb6rM57kN2J+aoyEAJfZ6bMx0sx/F9TIEX0xthPGCmeyiam/jXif0eA==
+  dependencies:
+    has "^1.0.0"
+    postcss "^7.0.0"
+    postcss-value-parser "^3.0.0"
+
+postcss-normalize-timing-functions@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-timing-functions/-/postcss-normalize-timing-functions-4.0.2.tgz#8e009ca2a3949cdaf8ad23e6b6ab99cb5e7d28d9"
+  integrity sha512-acwJY95edP762e++00Ehq9L4sZCEcOPyaHwoaFOhIwWCDfik6YvqsYNxckee65JHLKzuNSSmAdxwD2Cud1Z54A==
+  dependencies:
+    cssnano-util-get-match "^4.0.0"
+    postcss "^7.0.0"
+    postcss-value-parser "^3.0.0"
+
+postcss-normalize-unicode@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-unicode/-/postcss-normalize-unicode-4.0.1.tgz#841bd48fdcf3019ad4baa7493a3d363b52ae1cfb"
+  integrity sha512-od18Uq2wCYn+vZ/qCOeutvHjB5jm57ToxRaMeNuf0nWVHaP9Hua56QyMF6fs/4FSUnVIw0CBPsU0K4LnBPwYwg==
+  dependencies:
+    browserslist "^4.0.0"
+    postcss "^7.0.0"
+    postcss-value-parser "^3.0.0"
+
+postcss-normalize-url@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-url/-/postcss-normalize-url-4.0.1.tgz#10e437f86bc7c7e58f7b9652ed878daaa95faae1"
+  integrity sha512-p5oVaF4+IHwu7VpMan/SSpmpYxcJMtkGppYf0VbdH5B6hN8YNmVyJLuY9FmLQTzY3fag5ESUUHDqM+heid0UVA==
+  dependencies:
+    is-absolute-url "^2.0.0"
+    normalize-url "^3.0.0"
+    postcss "^7.0.0"
+    postcss-value-parser "^3.0.0"
+
+postcss-normalize-whitespace@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-whitespace/-/postcss-normalize-whitespace-4.0.2.tgz#bf1d4070fe4fcea87d1348e825d8cc0c5faa7d82"
+  integrity sha512-tO8QIgrsI3p95r8fyqKV+ufKlSHh9hMJqACqbv2XknufqEDhDvbguXGBBqxw9nsQoXWf0qOqppziKJKHMD4GtA==
+  dependencies:
+    postcss "^7.0.0"
+    postcss-value-parser "^3.0.0"
+
+postcss-normalize@7.0.1:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-normalize/-/postcss-normalize-7.0.1.tgz#eb51568d962b8aa61a8318383c8bb7e54332282e"
+  integrity sha512-NOp1fwrG+6kVXWo7P9SizCHX6QvioxFD/hZcI2MLxPmVnFJFC0j0DDpIuNw2tUDeCFMni59gCVgeJ1/hYhj2OQ==
+  dependencies:
+    "@csstools/normalize.css" "^9.0.1"
+    browserslist "^4.1.1"
+    postcss "^7.0.2"
+    postcss-browser-comments "^2.0.0"
+
+postcss-ordered-values@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/postcss-ordered-values/-/postcss-ordered-values-4.1.2.tgz#0cf75c820ec7d5c4d280189559e0b571ebac0eee"
+  integrity sha512-2fCObh5UanxvSxeXrtLtlwVThBvHn6MQcu4ksNT2tsaV2Fg76R2CV98W7wNSlX+5/pFwEyaDwKLLoEV7uRybAw==
+  dependencies:
+    cssnano-util-get-arguments "^4.0.0"
+    postcss "^7.0.0"
+    postcss-value-parser "^3.0.0"
+
+postcss-overflow-shorthand@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-overflow-shorthand/-/postcss-overflow-shorthand-2.0.0.tgz#31ecf350e9c6f6ddc250a78f0c3e111f32dd4c30"
+  integrity sha512-aK0fHc9CBNx8jbzMYhshZcEv8LtYnBIRYQD5i7w/K/wS9c2+0NSR6B3OVMu5y0hBHYLcMGjfU+dmWYNKH0I85g==
+  dependencies:
+    postcss "^7.0.2"
+
+postcss-page-break@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-page-break/-/postcss-page-break-2.0.0.tgz#add52d0e0a528cabe6afee8b46e2abb277df46bf"
+  integrity sha512-tkpTSrLpfLfD9HvgOlJuigLuk39wVTbbd8RKcy8/ugV2bNBUW3xU+AIqyxhDrQr1VUj1RmyJrBn1YWrqUm9zAQ==
+  dependencies:
+    postcss "^7.0.2"
+
+postcss-place@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-place/-/postcss-place-4.0.1.tgz#e9f39d33d2dc584e46ee1db45adb77ca9d1dcc62"
+  integrity sha512-Zb6byCSLkgRKLODj/5mQugyuj9bvAAw9LqJJjgwz5cYryGeXfFZfSXoP1UfveccFmeq0b/2xxwcTEVScnqGxBg==
+  dependencies:
+    postcss "^7.0.2"
+    postcss-values-parser "^2.0.0"
+
+postcss-preset-env@6.7.0:
+  version "6.7.0"
+  resolved "https://registry.yarnpkg.com/postcss-preset-env/-/postcss-preset-env-6.7.0.tgz#c34ddacf8f902383b35ad1e030f178f4cdf118a5"
+  integrity sha512-eU4/K5xzSFwUFJ8hTdTQzo2RBLbDVt83QZrAvI07TULOkmyQlnYlpwep+2yIK+K+0KlZO4BvFcleOCCcUtwchg==
+  dependencies:
+    autoprefixer "^9.6.1"
+    browserslist "^4.6.4"
+    caniuse-lite "^1.0.30000981"
+    css-blank-pseudo "^0.1.4"
+    css-has-pseudo "^0.10.0"
+    css-prefers-color-scheme "^3.1.1"
+    cssdb "^4.4.0"
+    postcss "^7.0.17"
+    postcss-attribute-case-insensitive "^4.0.1"
+    postcss-color-functional-notation "^2.0.1"
+    postcss-color-gray "^5.0.0"
+    postcss-color-hex-alpha "^5.0.3"
+    postcss-color-mod-function "^3.0.3"
+    postcss-color-rebeccapurple "^4.0.1"
+    postcss-custom-media "^7.0.8"
+    postcss-custom-properties "^8.0.11"
+    postcss-custom-selectors "^5.1.2"
+    postcss-dir-pseudo-class "^5.0.0"
+    postcss-double-position-gradients "^1.0.0"
+    postcss-env-function "^2.0.2"
+    postcss-focus-visible "^4.0.0"
+    postcss-focus-within "^3.0.0"
+    postcss-font-variant "^4.0.0"
+    postcss-gap-properties "^2.0.0"
+    postcss-image-set-function "^3.0.1"
+    postcss-initial "^3.0.0"
+    postcss-lab-function "^2.0.1"
+    postcss-logical "^3.0.0"
+    postcss-media-minmax "^4.0.0"
+    postcss-nesting "^7.0.0"
+    postcss-overflow-shorthand "^2.0.0"
+    postcss-page-break "^2.0.0"
+    postcss-place "^4.0.1"
+    postcss-pseudo-class-any-link "^6.0.0"
+    postcss-replace-overflow-wrap "^3.0.0"
+    postcss-selector-matches "^4.0.0"
+    postcss-selector-not "^4.0.0"
+
+postcss-pseudo-class-any-link@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-pseudo-class-any-link/-/postcss-pseudo-class-any-link-6.0.0.tgz#2ed3eed393b3702879dec4a87032b210daeb04d1"
+  integrity sha512-lgXW9sYJdLqtmw23otOzrtbDXofUdfYzNm4PIpNE322/swES3VU9XlXHeJS46zT2onFO7V1QFdD4Q9LiZj8mew==
+  dependencies:
+    postcss "^7.0.2"
+    postcss-selector-parser "^5.0.0-rc.3"
+
+postcss-reduce-initial@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/postcss-reduce-initial/-/postcss-reduce-initial-4.0.3.tgz#7fd42ebea5e9c814609639e2c2e84ae270ba48df"
+  integrity sha512-gKWmR5aUulSjbzOfD9AlJiHCGH6AEVLaM0AV+aSioxUDd16qXP1PCh8d1/BGVvpdWn8k/HiK7n6TjeoXN1F7DA==
+  dependencies:
+    browserslist "^4.0.0"
+    caniuse-api "^3.0.0"
+    has "^1.0.0"
+    postcss "^7.0.0"
+
+postcss-reduce-transforms@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-reduce-transforms/-/postcss-reduce-transforms-4.0.2.tgz#17efa405eacc6e07be3414a5ca2d1074681d4e29"
+  integrity sha512-EEVig1Q2QJ4ELpJXMZR8Vt5DQx8/mo+dGWSR7vWXqcob2gQLyQGsionYcGKATXvQzMPn6DSN1vTN7yFximdIAg==
+  dependencies:
+    cssnano-util-get-match "^4.0.0"
+    has "^1.0.0"
+    postcss "^7.0.0"
+    postcss-value-parser "^3.0.0"
+
+postcss-replace-overflow-wrap@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-replace-overflow-wrap/-/postcss-replace-overflow-wrap-3.0.0.tgz#61b360ffdaedca84c7c918d2b0f0d0ea559ab01c"
+  integrity sha512-2T5hcEHArDT6X9+9dVSPQdo7QHzG4XKclFT8rU5TzJPDN7RIRTbO9c4drUISOVemLj03aezStHCR2AIcr8XLpw==
+  dependencies:
+    postcss "^7.0.2"
+
+postcss-safe-parser@4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-safe-parser/-/postcss-safe-parser-4.0.1.tgz#8756d9e4c36fdce2c72b091bbc8ca176ab1fcdea"
+  integrity sha512-xZsFA3uX8MO3yAda03QrG3/Eg1LN3EPfjjf07vke/46HERLZyHrTsQ9E1r1w1W//fWEhtYNndo2hQplN2cVpCQ==
+  dependencies:
+    postcss "^7.0.0"
+
+postcss-selector-matches@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-selector-matches/-/postcss-selector-matches-4.0.0.tgz#71c8248f917ba2cc93037c9637ee09c64436fcff"
+  integrity sha512-LgsHwQR/EsRYSqlwdGzeaPKVT0Ml7LAT6E75T8W8xLJY62CE4S/l03BWIt3jT8Taq22kXP08s2SfTSzaraoPww==
+  dependencies:
+    balanced-match "^1.0.0"
+    postcss "^7.0.2"
+
+postcss-selector-not@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-selector-not/-/postcss-selector-not-4.0.1.tgz#263016eef1cf219e0ade9a913780fc1f48204cbf"
+  integrity sha512-YolvBgInEK5/79C+bdFMyzqTg6pkYqDbzZIST/PDMqa/o3qtXenD05apBG2jLgT0/BQ77d4U2UK12jWpilqMAQ==
+  dependencies:
+    balanced-match "^1.0.0"
+    postcss "^7.0.2"
+
+postcss-selector-parser@^3.0.0:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-3.1.2.tgz#b310f5c4c0fdaf76f94902bbaa30db6aa84f5270"
+  integrity sha512-h7fJ/5uWuRVyOtkO45pnt1Ih40CEleeyCHzipqAZO2e5H20g25Y48uYnFUiShvY4rZWNJ/Bib/KVPmanaCtOhA==
+  dependencies:
+    dot-prop "^5.2.0"
+    indexes-of "^1.0.1"
+    uniq "^1.0.1"
+
+postcss-selector-parser@^5.0.0-rc.3, postcss-selector-parser@^5.0.0-rc.4:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-5.0.0.tgz#249044356697b33b64f1a8f7c80922dddee7195c"
+  integrity sha512-w+zLE5Jhg6Liz8+rQOWEAwtwkyqpfnmsinXjXg6cY7YIONZZtgvE0v2O0uhQBs0peNomOJwWRKt6JBfTdTd3OQ==
+  dependencies:
+    cssesc "^2.0.0"
+    indexes-of "^1.0.1"
+    uniq "^1.0.1"
+
+postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.2:
+  version "6.0.9"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.9.tgz#ee71c3b9ff63d9cd130838876c13a2ec1a992b2f"
+  integrity sha512-UO3SgnZOVTwu4kyLR22UQ1xZh086RyNZppb7lLAKBFK8a32ttG5i87Y/P3+2bRSjZNyJ1B7hfFNo273tKe9YxQ==
+  dependencies:
+    cssesc "^3.0.0"
+    util-deprecate "^1.0.2"
+
+postcss-svgo@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/postcss-svgo/-/postcss-svgo-4.0.3.tgz#343a2cdbac9505d416243d496f724f38894c941e"
+  integrity sha512-NoRbrcMWTtUghzuKSoIm6XV+sJdvZ7GZSc3wdBN0W19FTtp2ko8NqLsgoh/m9CzNhU3KLPvQmjIwtaNFkaFTvw==
+  dependencies:
+    postcss "^7.0.0"
+    postcss-value-parser "^3.0.0"
+    svgo "^1.0.0"
+
+postcss-unique-selectors@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-unique-selectors/-/postcss-unique-selectors-4.0.1.tgz#9446911f3289bfd64c6d680f073c03b1f9ee4bac"
+  integrity sha512-+JanVaryLo9QwZjKrmJgkI4Fn8SBgRO6WXQBJi7KiAVPlmxikB5Jzc4EvXMT2H0/m0RjrVVm9rGNhZddm/8Spg==
+  dependencies:
+    alphanum-sort "^1.0.0"
+    postcss "^7.0.0"
+    uniqs "^2.0.0"
+
+postcss-value-parser@^3.0.0, postcss-value-parser@^3.3.0, postcss-value-parser@^3.3.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281"
+  integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==
+
+postcss-value-parser@^4.0.2, postcss-value-parser@^4.1.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
+  integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
+
+postcss-values-parser@^2.0.0, postcss-values-parser@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-values-parser/-/postcss-values-parser-2.0.1.tgz#da8b472d901da1e205b47bdc98637b9e9e550e5f"
+  integrity sha512-2tLuBsA6P4rYTNKCXYG/71C7j1pU6pK503suYOmn4xYrQIzW+opD+7FAFNuGSdZC/3Qfy334QbeMu7MEb8gOxg==
+  dependencies:
+    flatten "^1.0.2"
+    indexes-of "^1.0.1"
+    uniq "^1.0.1"
+
+postcss@7.0.14:
+  version "7.0.14"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.14.tgz#4527ed6b1ca0d82c53ce5ec1a2041c2346bbd6e5"
+  integrity sha512-NsbD6XUUMZvBxtQAJuWDJeeC4QFsmWsfozWxCJPWf3M55K9iu2iMDaKqyoOdTJ1R4usBXuxlVFAIo8rZPQD4Bg==
+  dependencies:
+    chalk "^2.4.2"
+    source-map "^0.6.1"
+    supports-color "^6.1.0"
+
+postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.17, postcss@^7.0.2, postcss@^7.0.27, postcss@^7.0.32, postcss@^7.0.5, postcss@^7.0.6:
+  version "7.0.39"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.39.tgz#9624375d965630e2e1f2c02a935c82a59cb48309"
+  integrity sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==
+  dependencies:
+    picocolors "^0.2.1"
+    source-map "^0.6.1"
+
+prelude-ls@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
+  integrity sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=
+
+prepend-http@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc"
+  integrity sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=
+
+prettier@2.7.1:
+  version "2.7.1"
+  resolved "https://registry.npmmirror.com/prettier/-/prettier-2.7.1.tgz#e235806850d057f97bb08368a4f7d899f7760c64"
+  integrity sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g==
+
+pretty-bytes@^5.1.0:
+  version "5.6.0"
+  resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.6.0.tgz#356256f643804773c82f64723fe78c92c62beaeb"
+  integrity sha512-FFw039TmrBqFK8ma/7OL3sDz/VytdtJr044/QUJtH0wK9lb9jLq9tJyIxUwtQJHwar2BqtiA4iCWSwo9JLkzFg==
+
+pretty-error@^2.1.1:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/pretty-error/-/pretty-error-2.1.2.tgz#be89f82d81b1c86ec8fdfbc385045882727f93b6"
+  integrity sha512-EY5oDzmsX5wvuynAByrmY0P0hcp+QpnAKbJng2A2MPjVKXCxrDSUkzghVJ4ZGPIv+JC4gX8fPUWscC0RtjsWGw==
+  dependencies:
+    lodash "^4.17.20"
+    renderkid "^2.0.4"
+
+pretty-format@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-24.9.0.tgz#12fac31b37019a4eea3c11aa9a959eb7628aa7c9"
+  integrity sha512-00ZMZUiHaJrNfk33guavqgvfJS30sLYf0f8+Srklv0AMPodGGHcoHgksZ3OThYnIvOd+8yMCn0YiEOogjlgsnA==
+  dependencies:
+    "@jest/types" "^24.9.0"
+    ansi-regex "^4.0.0"
+    ansi-styles "^3.2.0"
+    react-is "^16.8.4"
+
+pretty-format@^25.2.1, pretty-format@^25.5.0:
+  version "25.5.0"
+  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-25.5.0.tgz#7873c1d774f682c34b8d48b6743a2bf2ac55791a"
+  integrity sha512-kbo/kq2LQ/A/is0PQwsEHM7Ca6//bGPPvU6UnsdDRSKTWxT/ru/xb88v4BJf6a69H+uTytOEsTusT9ksd/1iWQ==
+  dependencies:
+    "@jest/types" "^25.5.0"
+    ansi-regex "^5.0.0"
+    ansi-styles "^4.0.0"
+    react-is "^16.12.0"
+
+process-nextick-args@~2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
+  integrity sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==
+
+process@^0.11.10:
+  version "0.11.10"
+  resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
+  integrity sha1-czIwDoQBYb2j5podHZGn1LwW8YI=
+
+progress@^2.0.0:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"
+  integrity sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==
+
+promise-inflight@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3"
+  integrity sha1-mEcocL8igTL8vdhoEputEsPAKeM=
+
+promise@^8.0.3:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/promise/-/promise-8.1.0.tgz#697c25c3dfe7435dd79fcd58c38a135888eaf05e"
+  integrity sha512-W04AqnILOL/sPRXziNicCjSNRruLAuIHEOVBazepu0545DDNGYHz7ar9ZgZ1fMU8/MA4mVxp5rkBWRi6OXIy3Q==
+  dependencies:
+    asap "~2.0.6"
+
+prompts@^2.0.1:
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/prompts/-/prompts-2.4.2.tgz#7b57e73b3a48029ad10ebd44f74b01722a4cb069"
+  integrity sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==
+  dependencies:
+    kleur "^3.0.3"
+    sisteransi "^1.0.5"
+
+prop-types@^15.5.0, prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
+  version "15.8.1"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
+  integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
+  dependencies:
+    loose-envify "^1.4.0"
+    object-assign "^4.1.1"
+    react-is "^16.13.1"
+
+proxy-addr@~2.0.7:
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.7.tgz#f19fe69ceab311eeb94b42e70e8c2070f9ba1025"
+  integrity sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==
+  dependencies:
+    forwarded "0.2.0"
+    ipaddr.js "1.9.1"
+
+prr@~1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/prr/-/prr-1.0.1.tgz#d3fc114ba06995a45ec6893f484ceb1d78f5f476"
+  integrity sha1-0/wRS6BplaRexok/SEzrHXj19HY=
+
+psl@^1.1.28:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/psl/-/psl-1.8.0.tgz#9326f8bcfb013adcc005fdff056acce020e51c24"
+  integrity sha512-RIdOzyoavK+hA18OGGWDqUTsCLhtA7IcZ/6NCs4fFJaHBDab+pDDmDIByWFRQJq2Cd7r1OoQxBGKOaztq+hjIQ==
+
+public-encrypt@^4.0.0:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/public-encrypt/-/public-encrypt-4.0.3.tgz#4fcc9d77a07e48ba7527e7cbe0de33d0701331e0"
+  integrity sha512-zVpa8oKZSz5bTMTFClc1fQOnyyEzpl5ozpi1B5YcvBrdohMjH2rfsBtyXcuNuwjsDIXmBYlF2N5FlJYhR29t8Q==
+  dependencies:
+    bn.js "^4.1.0"
+    browserify-rsa "^4.0.0"
+    create-hash "^1.1.0"
+    parse-asn1 "^5.0.0"
+    randombytes "^2.0.1"
+    safe-buffer "^5.1.2"
+
+pump@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/pump/-/pump-2.0.1.tgz#12399add6e4cf7526d973cbc8b5ce2e2908b3909"
+  integrity sha512-ruPMNRkN3MHP1cWJc9OWr+T/xDP0jhXYCLfJcBuX54hhfIBnaQmAUMfDcG4DM5UMWByBbJY69QSphm3jtDKIkA==
+  dependencies:
+    end-of-stream "^1.1.0"
+    once "^1.3.1"
+
+pump@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/pump/-/pump-3.0.0.tgz#b4a2116815bde2f4e1ea602354e8c75565107a64"
+  integrity sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==
+  dependencies:
+    end-of-stream "^1.1.0"
+    once "^1.3.1"
+
+pumpify@^1.3.3:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/pumpify/-/pumpify-1.5.1.tgz#36513be246ab27570b1a374a5ce278bfd74370ce"
+  integrity sha512-oClZI37HvuUJJxSKKrC17bZ9Cu0ZYhEAGPsPUy9KlMUmv9dKX2o77RUmq7f3XjIxbwyGwYzbzQ1L2Ks8sIradQ==
+  dependencies:
+    duplexify "^3.6.0"
+    inherits "^2.0.3"
+    pump "^2.0.0"
+
+punycode@1.3.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.3.2.tgz#9653a036fb7c1ee42342f2325cceefea3926c48d"
+  integrity sha1-llOgNvt8HuQjQvIyXM7v6jkmxI0=
+
+punycode@^1.2.4:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e"
+  integrity sha1-wNWmOycYgArY4esPpSachN1BhF4=
+
+punycode@^2.1.0, punycode@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
+  integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
+
+q@^1.1.2:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
+  integrity sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=
+
+qrcode.react@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/qrcode.react/-/qrcode.react-3.1.0.tgz#5c91ddc0340f768316fbdb8fff2765134c2aecd8"
+  integrity sha512-oyF+Urr3oAMUG/OiOuONL3HXM+53wvuH3mtIWQrYmsXoAq0DkvZp2RYUWFSMFtbdOpuS++9v+WAkzNVkMlNW6Q==
+
+qs@6.9.7:
+  version "6.9.7"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.9.7.tgz#4610846871485e1e048f44ae3b94033f0e675afe"
+  integrity sha512-IhMFgUmuNpyRfxA90umL7ByLlgRXu6tIfKPpF5TmcfRLlLCckfP/g3IQmju6jjpu+Hh8rA+2p6A27ZSPOOHdKw==
+
+qs@~6.5.2:
+  version "6.5.3"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.3.tgz#3aeeffc91967ef6e35c0e488ef46fb296ab76aad"
+  integrity sha512-qxXIEh4pCGfHICj1mAJQ2/2XVZkjCDTcEgfoSQxc/fYivUZxTkk7L3bDBJSoNrEzXI17oUO5Dp07ktqE5KzczA==
+
+query-string@^4.1.0:
+  version "4.3.4"
+  resolved "https://registry.yarnpkg.com/query-string/-/query-string-4.3.4.tgz#bbb693b9ca915c232515b228b1a02b609043dbeb"
+  integrity sha1-u7aTucqRXCMlFbIosaArYJBD2+s=
+  dependencies:
+    object-assign "^4.1.0"
+    strict-uri-encode "^1.0.0"
+
+querystring-es3@^0.2.0:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/querystring-es3/-/querystring-es3-0.2.1.tgz#9ec61f79049875707d69414596fd907a4d711e73"
+  integrity sha1-nsYfeQSYdXB9aUFFlv2Qek1xHnM=
+
+querystring@0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/querystring/-/querystring-0.2.0.tgz#b209849203bb25df820da756e747005878521620"
+  integrity sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA=
+
+querystringify@^2.1.1:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.2.0.tgz#3345941b4153cb9d082d8eee4cda2016a9aef7f6"
+  integrity sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==
+
+raf@^3.4.0, raf@^3.4.1:
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39"
+  integrity sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==
+  dependencies:
+    performance-now "^2.1.0"
+
+randombytes@^2.0.0, randombytes@^2.0.1, randombytes@^2.0.5, randombytes@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a"
+  integrity sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==
+  dependencies:
+    safe-buffer "^5.1.0"
+
+randomfill@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/randomfill/-/randomfill-1.0.4.tgz#c92196fc86ab42be983f1bf31778224931d61458"
+  integrity sha512-87lcbR8+MhcWcUiQ+9e+Rwx8MyR2P7qnt15ynUlbm3TU/fjbgz4GsvfSUDTemtCCtVCqb4ZcEFlyPNTh9bBTLw==
+  dependencies:
+    randombytes "^2.0.5"
+    safe-buffer "^5.1.0"
+
+range-parser@^1.2.1, range-parser@~1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.1.tgz#3cf37023d199e1c24d1a55b84800c2f3e6468031"
+  integrity sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==
+
+raw-body@2.4.3:
+  version "2.4.3"
+  resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.4.3.tgz#8f80305d11c2a0a545c2d9d89d7a0286fcead43c"
+  integrity sha512-UlTNLIcu0uzb4D2f4WltY6cVjLi+/jEN4lgEUj3E04tpMDpUlkBo/eSn6zou9hum2VMNpCCUone0O0WeJim07g==
+  dependencies:
+    bytes "3.1.2"
+    http-errors "1.8.1"
+    iconv-lite "0.4.24"
+    unpipe "1.0.0"
+
+react-addons-update@^15.6.2:
+  version "15.6.3"
+  resolved "https://registry.yarnpkg.com/react-addons-update/-/react-addons-update-15.6.3.tgz#c449c309154024d04087b206d0400e020547b313"
+  integrity sha512-wBkjgx5cR0XTjZEz5jl2kScChrjI9T7rWVdaM0dLiIdHSgeHycLRdHPPiTgKk7vK18Od4rXmLJv91qofBXlE0A==
+  dependencies:
+    object-assign "^4.1.0"
+
+react-app-polyfill@^1.0.4:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/react-app-polyfill/-/react-app-polyfill-1.0.6.tgz#890f8d7f2842ce6073f030b117de9130a5f385f0"
+  integrity sha512-OfBnObtnGgLGfweORmdZbyEz+3dgVePQBb3zipiaDsMHV1NpWm0rDFYIVXFV/AK+x4VIIfWHhrdMIeoTLyRr2g==
+  dependencies:
+    core-js "^3.5.0"
+    object-assign "^4.1.1"
+    promise "^8.0.3"
+    raf "^3.4.1"
+    regenerator-runtime "^0.13.3"
+    whatwg-fetch "^3.0.0"
+
+react-async-script@^1.1.1:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/react-async-script/-/react-async-script-1.2.0.tgz#ab9412a26f0b83f5e2e00de1d2befc9400834b21"
+  integrity sha512-bCpkbm9JiAuMGhkqoAiC0lLkb40DJ0HOEJIku+9JDjxX3Rcs+ztEOG13wbrOskt3n2DTrjshhaQ/iay+SnGg5Q==
+  dependencies:
+    hoist-non-react-statics "^3.3.0"
+    prop-types "^15.5.0"
+
+react-color@^2.18.0:
+  version "2.19.3"
+  resolved "https://registry.yarnpkg.com/react-color/-/react-color-2.19.3.tgz#ec6c6b4568312a3c6a18420ab0472e146aa5683d"
+  integrity sha512-LEeGE/ZzNLIsFWa1TMe8y5VYqr7bibneWmvJwm1pCn/eNmrabWDh659JSPn9BuaMpEfU83WTOJfnCcjDZwNQTA==
+  dependencies:
+    "@icons/material" "^0.2.4"
+    lodash "^4.17.15"
+    lodash-es "^4.17.15"
+    material-colors "^1.2.1"
+    prop-types "^15.5.10"
+    reactcss "^1.2.0"
+    tinycolor2 "^1.4.1"
+
+react-content-loader@^5.0.2:
+  version "5.1.4"
+  resolved "https://registry.yarnpkg.com/react-content-loader/-/react-content-loader-5.1.4.tgz#854bafe4415dd9de07174621375bc308edd0ebb5"
+  integrity sha512-hTq7pZi2GKCK6a9d3u6XStozm0QGCEjw8cSqQReiWnh2up6IwCha5R5TF0o6SY5qUDpByloEZEZtnFxpJyENFw==
+
+react-dev-utils@^9.1.0:
+  version "9.1.0"
+  resolved "https://registry.npmmirror.com/react-dev-utils/-/react-dev-utils-9.1.0.tgz#3ad2bb8848a32319d760d0a84c56c14bdaae5e81"
+  integrity sha512-X2KYF/lIGyGwP/F/oXgGDF24nxDA2KC4b7AFto+eqzc/t838gpSGiaU8trTqHXOohuLxxc5qi1eDzsl9ucPDpg==
+  dependencies:
+    "@babel/code-frame" "7.5.5"
+    address "1.1.2"
+    browserslist "4.7.0"
+    chalk "2.4.2"
+    cross-spawn "6.0.5"
+    detect-port-alt "1.1.6"
+    escape-string-regexp "1.0.5"
+    filesize "3.6.1"
+    find-up "3.0.0"
+    fork-ts-checker-webpack-plugin "1.5.0"
+    global-modules "2.0.0"
+    globby "8.0.2"
+    gzip-size "5.1.1"
+    immer "1.10.0"
+    inquirer "6.5.0"
+    is-root "2.1.0"
+    loader-utils "1.2.3"
+    open "^6.3.0"
+    pkg-up "2.0.0"
+    react-error-overlay "^6.0.3"
+    recursive-readdir "2.2.2"
+    shell-quote "1.7.2"
+    sockjs-client "1.4.0"
+    strip-ansi "5.2.0"
+    text-table "0.2.0"
+
+react-dnd-html5-backend@^9.5.1:
+  version "9.5.1"
+  resolved "https://registry.yarnpkg.com/react-dnd-html5-backend/-/react-dnd-html5-backend-9.5.1.tgz#e6a0aed3ece800c1abe004f9ed9991513e2e644c"
+  integrity sha512-wUdzjREwLqHxFkA6E+XDVL5IFjRDbBI3SHVKil9n3qrGT5dm2tA2oi1aIALdfMKsu00c+OXA9lz/LuKZCE9KXg==
+  dependencies:
+    dnd-core "^9.5.1"
+
+react-dnd@^9.5.1:
+  version "9.5.1"
+  resolved "https://registry.yarnpkg.com/react-dnd/-/react-dnd-9.5.1.tgz#907e55c791d6c50cbed1a4021c14b989b86ac467"
+  integrity sha512-j2MvziPNLsxXkb3kIJzLvvOv/TQ4sysp6U4CmxAXd4C884dXm/9UGdB7K1wkTW3ZxVpI1K7XhKbX0JgNlPfLcA==
+  dependencies:
+    "@types/hoist-non-react-statics" "^3.3.1"
+    "@types/shallowequal" "^1.1.1"
+    dnd-core "^9.5.1"
+    hoist-non-react-statics "^3.3.0"
+    shallowequal "^1.1.0"
+
+react-dom@^16.12.0:
+  version "16.14.0"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.14.0.tgz#7ad838ec29a777fb3c75c3a190f661cf92ab8b89"
+  integrity sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    prop-types "^15.6.2"
+    scheduler "^0.19.1"
+
+react-error-overlay@^6.0.3:
+  version "6.0.10"
+  resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.10.tgz#0fe26db4fa85d9dbb8624729580e90e7159a59a6"
+  integrity sha512-mKR90fX7Pm5seCOfz8q9F+66VCc1PGsWSBxKbITjfKVQHMNF2zudxHnMdJiB1fRCb+XsbQV9sO9DCkgsMQgBIA==
+
+react-highlight-words@^0.18.0:
+  version "0.18.0"
+  resolved "https://registry.yarnpkg.com/react-highlight-words/-/react-highlight-words-0.18.0.tgz#ff3b3ef7cb497fa2e8fa4d54c1a1a98ac6390d0e"
+  integrity sha512-5z+46eLPjB4JWgOhuQ0E+6iUPTD1U3amiy5KKjzZmeJ5zyvHr91hnzBT3UHya/KlySm5KRTKpYpba9vs67oO2A==
+  dependencies:
+    highlight-words-core "^1.2.0"
+    memoize-one "^4.0.0"
+    prop-types "^15.5.8"
+
+react-hotkeys@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/react-hotkeys/-/react-hotkeys-2.0.0.tgz#a7719c7340cbba888b0e9184f806a9ec0ac2c53f"
+  integrity sha512-3n3OU8vLX/pfcJrR3xJ1zlww6KS1kEJt0Whxc4FiGV+MJrQ1mYSYI3qS/11d2MJDFm8IhOXMTFQirfu6AVOF6Q==
+  dependencies:
+    prop-types "^15.6.1"
+
+react-i18next@^11.16.7:
+  version "11.16.7"
+  resolved "https://registry.yarnpkg.com/react-i18next/-/react-i18next-11.16.7.tgz#8d0680b7f4c8e43f59996336b7183ad576a28df7"
+  integrity sha512-7yotILJLnKfvUfrl/nt9eK9vFpVFjZPLWAwBzWL6XppSZZEvlmlKk0GBGDCAPfLfs8oND7WAbry8wGzdoiW5Nw==
+  dependencies:
+    "@babel/runtime" "^7.14.5"
+    html-escaper "^2.0.2"
+    html-parse-stringify "^3.0.1"
+
+react-is@^16.10.2, react-is@^16.12.0, react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.4:
+  version "16.13.1"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
+  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
+
+"react-is@^16.8.0 || ^17.0.0", react-is@^17.0.2:
+  version "17.0.2"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
+  integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
+
+react-lazy-load-image-component@^1.3.2:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/react-lazy-load-image-component/-/react-lazy-load-image-component-1.5.1.tgz#59cc92326ba5604e9c4a86805a2cf1667fafbc71"
+  integrity sha512-grTEZzURLHPkq7JoipcBBQU44ijdF4fH3Cb+eSD5eSAaMsjugbXqTaVWm5ruPUNLduoNR9KKQF6bOR9h2WphEg==
+  dependencies:
+    lodash.debounce "^4.0.8"
+    lodash.throttle "^4.1.1"
+
+react-lifecycles-compat@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
+  integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
+
+react-load-script@^0.0.6:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/react-load-script/-/react-load-script-0.0.6.tgz#db6851236aaa25bb622677a2eb51dad4f8d2c258"
+  integrity sha512-aRGxDGP9VoLxcsaYvKWIW+LRrMOzz2eEcubTS4NvQPPugjk2VvMhow0wWTkSl7RxookomD1MwcP4l5UStg5ShQ==
+
+react-monaco-editor@^0.36.0:
+  version "0.36.0"
+  resolved "https://registry.yarnpkg.com/react-monaco-editor/-/react-monaco-editor-0.36.0.tgz#ac085c14f25fb072514c925596f6a06a711ee078"
+  integrity sha512-JVA5SZhOoYZ0DCdTwYgagtRb3jHo4KN7TVFiJauG+ZBAJWfDSTzavPIrwzWbgu8ahhDqDk4jUcYlOJL2BC/0UA==
+  dependencies:
+    "@types/react" "^16.x"
+    monaco-editor "*"
+    prop-types "^15.7.2"
+
+react-pdf@^4.1.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/react-pdf/-/react-pdf-4.2.0.tgz#b83a01eb070912522075b7a51aee7d63b2c912ed"
+  integrity sha512-Ao44mZszfPwtCUsrXHtXnhM+czTvPxfG5wqssbWgj2onL70TKSOKGzQfCH4csCnNDOKji/Pc/s0Og70/VOE+Rg==
+  dependencies:
+    "@babel/runtime" "^7.0.0"
+    make-cancellable-promise "^1.0.0"
+    make-event-props "^1.1.0"
+    merge-class-names "^1.1.1"
+    pdfjs-dist "2.1.266"
+    prop-types "^15.6.2"
+
+react-photo-view@^0.4.0:
+  version "0.4.5"
+  resolved "https://registry.yarnpkg.com/react-photo-view/-/react-photo-view-0.4.5.tgz#066910904ed72262f2389cfeb684ba2302715d55"
+  integrity sha512-LBjExvzrmaEqEdoFR7nTCYh0zA3zbxGnQLSFXf8/Rx8TPKc+C2DIj9XEjGRUf7RDVgy3aXBQDcKHblSjsYCgpg==
+  dependencies:
+    lodash.debounce "^4.0.8"
+    lodash.uniqueid "^4.0.1"
+
+react-reader@^0.21.1:
+  version "0.21.1"
+  resolved "https://registry.yarnpkg.com/react-reader/-/react-reader-0.21.1.tgz#2baa5d884d98cb3fb42c68b4cbbd748a61a97156"
+  integrity sha512-6ocGxzgsHLk6WnJO1BsLymWh4rcP+wzuGOj3Xiq02W9cmt8OdvVeus6JtqwvEmgze8iNNdTAcXxDyjl8CkWiuQ==
+  dependencies:
+    epubjs "^0.3.93"
+    prop-types "^15.8.1"
+    react-swipeable "^6.2.1"
+
+react-redux@^7.1.3:
+  version "7.2.6"
+  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.6.tgz#49633a24fe552b5f9caf58feb8a138936ddfe9aa"
+  integrity sha512-10RPdsz0UUrRL1NZE0ejTkucnclYSgXp5q+tB5SWx2qeG2ZJQJyymgAhwKy73yiL/13btfB6fPr+rgbMAaZIAQ==
+  dependencies:
+    "@babel/runtime" "^7.15.4"
+    "@types/react-redux" "^7.1.20"
+    hoist-non-react-statics "^3.3.2"
+    loose-envify "^1.4.0"
+    prop-types "^15.7.2"
+    react-is "^17.0.2"
+
+react-resize-detector@^6.6.3:
+  version "6.7.8"
+  resolved "https://registry.yarnpkg.com/react-resize-detector/-/react-resize-detector-6.7.8.tgz#318c85d1335e50f99d4fb8eb9ec34e066db597d0"
+  integrity sha512-0FaEcUBAbn+pq3PT5a9hHRebUfuS1SRLGLpIw8LydU7zX429I6XJgKerKAMPsJH0qWAl6o5bVKNqFJqr6tGPYw==
+  dependencies:
+    "@types/resize-observer-browser" "^0.1.6"
+    lodash "^4.17.21"
+    resize-observer-polyfill "^1.5.1"
+
+react-router-dom@^5.1.2:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.3.0.tgz#da1bfb535a0e89a712a93b97dd76f47ad1f32363"
+  integrity sha512-ObVBLjUZsphUUMVycibxgMdh5jJ1e3o+KpAZBVeHcNQZ4W+uUGGWsokurzlF4YOldQYRQL4y6yFRWM4m3svmuQ==
+  dependencies:
+    "@babel/runtime" "^7.12.13"
+    history "^4.9.0"
+    loose-envify "^1.3.1"
+    prop-types "^15.6.2"
+    react-router "5.2.1"
+    tiny-invariant "^1.0.2"
+    tiny-warning "^1.0.0"
+
+react-router@5.2.1, react-router@^5.1.2:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-5.2.1.tgz#4d2e4e9d5ae9425091845b8dbc6d9d276239774d"
+  integrity sha512-lIboRiOtDLFdg1VTemMwud9vRVuOCZmUIT/7lUoZiSpPODiiH1UQlfXy+vPLC/7IWdFYnhRwAyNqA/+I7wnvKQ==
+  dependencies:
+    "@babel/runtime" "^7.12.13"
+    history "^4.9.0"
+    hoist-non-react-statics "^3.1.0"
+    loose-envify "^1.3.1"
+    mini-create-react-context "^0.4.0"
+    path-to-regexp "^1.7.0"
+    prop-types "^15.6.2"
+    react-is "^16.6.0"
+    tiny-invariant "^1.0.2"
+    tiny-warning "^1.0.0"
+
+react-smooth@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/react-smooth/-/react-smooth-2.0.0.tgz#561647b33e498b2e25f449b3c6689b2e9111bf91"
+  integrity sha512-wK4dBBR6P21otowgMT9toZk+GngMplGS1O5gk+2WSiHEXIrQgDvhR5IIlT74Vtu//qpTcipkgo21dD7a7AUNxw==
+  dependencies:
+    fast-equals "^2.0.0"
+    raf "^3.4.0"
+    react-transition-group "2.9.0"
+
+react-swipeable@^6.2.1:
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/react-swipeable/-/react-swipeable-6.2.1.tgz#7359fadda9917ee8b214e946447b56d3c7b0d314"
+  integrity sha512-JpTj+tjJTDcIWtoMkab6zfwWD1T1tBzUyEfXsXnohnNkwA2dTuNS0gtN7HoxU1Qa+e3GDnfNYk2z7vwzfO4SoQ==
+
+react-transition-group@2.9.0:
+  version "2.9.0"
+  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.9.0.tgz#df9cdb025796211151a436c69a8f3b97b5b07c8d"
+  integrity sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg==
+  dependencies:
+    dom-helpers "^3.4.0"
+    loose-envify "^1.4.0"
+    prop-types "^15.6.2"
+    react-lifecycles-compat "^3.0.4"
+
+react-transition-group@^4.4.0:
+  version "4.4.2"
+  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.2.tgz#8b59a56f09ced7b55cbd53c36768b922890d5470"
+  integrity sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    dom-helpers "^5.0.1"
+    loose-envify "^1.4.0"
+    prop-types "^15.6.2"
+
+react-virtuoso@^2.8.6:
+  version "2.8.6"
+  resolved "https://registry.yarnpkg.com/react-virtuoso/-/react-virtuoso-2.8.6.tgz#fac5890670be4b172dadbd579b5e163eb9fd666a"
+  integrity sha512-+7CkivDQj2JpYPA3YjsTW+Jfuf7hewsuYmQedu/ApZwXkfD/6CiBPBaTNQtz7rlNmIMyapU+ciAfuG+fmPaTsQ==
+  dependencies:
+    "@virtuoso.dev/react-urx" "^0.2.12"
+    "@virtuoso.dev/urx" "^0.2.12"
+
+react@^16.12.0:
+  version "16.14.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.14.0.tgz#94d776ddd0aaa37da3eda8fc5b6b18a4c9a3114d"
+  integrity sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    prop-types "^15.6.2"
+
+reactcss@^1.2.0:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/reactcss/-/reactcss-1.2.3.tgz#c00013875e557b1cf0dfd9a368a1c3dab3b548dd"
+  integrity sha512-KiwVUcFu1RErkI97ywr8nvx8dNOpT03rbnma0SSalTYjkrPYaEajR4a/MRt6DZ46K6arDRbWMNHF+xH7G7n/8A==
+  dependencies:
+    lodash "^4.0.1"
+
+read-pkg-up@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-2.0.0.tgz#6b72a8048984e0c41e79510fd5e9fa99b3b549be"
+  integrity sha1-a3KoBImE4MQeeVEP1en6mbO1Sb4=
+  dependencies:
+    find-up "^2.0.0"
+    read-pkg "^2.0.0"
+
+read-pkg-up@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-4.0.0.tgz#1b221c6088ba7799601c808f91161c66e58f8978"
+  integrity sha512-6etQSH7nJGsK0RbG/2TeDzZFa8shjQ1um+SwQQ5cwKy0dhSXdOncEhb1CPpvQG4h7FyOV6EB6YlV0yJvZQNAkA==
+  dependencies:
+    find-up "^3.0.0"
+    read-pkg "^3.0.0"
+
+read-pkg@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-2.0.0.tgz#8ef1c0623c6a6db0dc6713c4bfac46332b2368f8"
+  integrity sha1-jvHAYjxqbbDcZxPEv6xGMysjaPg=
+  dependencies:
+    load-json-file "^2.0.0"
+    normalize-package-data "^2.3.2"
+    path-type "^2.0.0"
+
+read-pkg@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-3.0.0.tgz#9cbc686978fee65d16c00e2b19c237fcf6e38389"
+  integrity sha1-nLxoaXj+5l0WwA4rGcI3/Pbjg4k=
+  dependencies:
+    load-json-file "^4.0.0"
+    normalize-package-data "^2.3.2"
+    path-type "^3.0.0"
+
+"readable-stream@1 || 2", readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.1.5, readable-stream@^2.2.2, readable-stream@^2.3.3, readable-stream@^2.3.6, readable-stream@~2.3.6:
+  version "2.3.7"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.7.tgz#1eca1cf711aef814c04f62252a36a62f6cb23b57"
+  integrity sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.3"
+    isarray "~1.0.0"
+    process-nextick-args "~2.0.0"
+    safe-buffer "~5.1.1"
+    string_decoder "~1.1.1"
+    util-deprecate "~1.0.1"
+
+readable-stream@^3.0.6, readable-stream@^3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.0.tgz#337bbda3adc0706bd3e024426a286d4b4b2c9198"
+  integrity sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==
+  dependencies:
+    inherits "^2.0.3"
+    string_decoder "^1.1.1"
+    util-deprecate "^1.0.1"
+
+readdirp@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-2.2.1.tgz#0e87622a3325aa33e892285caf8b4e846529a525"
+  integrity sha512-1JU/8q+VgFZyxwrJ+SVIOsh+KywWGpds3NTqikiKpDMZWScmAYyKIgqkO+ARvNWJfXeXR1zxz7aHF4u4CyH6vQ==
+  dependencies:
+    graceful-fs "^4.1.11"
+    micromatch "^3.1.10"
+    readable-stream "^2.0.2"
+
+readdirp@~3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7"
+  integrity sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==
+  dependencies:
+    picomatch "^2.2.1"
+
+realpath-native@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/realpath-native/-/realpath-native-1.1.0.tgz#2003294fea23fb0672f2476ebe22fcf498a2d65c"
+  integrity sha512-wlgPA6cCIIg9gKz0fgAPjnzh4yR/LnXovwuo9hvyGvx3h8nX4+/iLZplfUWasXpqD8BdnGnP5njOFjkUwPzvjA==
+  dependencies:
+    util.promisify "^1.0.0"
+
+recharts-scale@^0.4.4:
+  version "0.4.5"
+  resolved "https://registry.yarnpkg.com/recharts-scale/-/recharts-scale-0.4.5.tgz#0969271f14e732e642fcc5bd4ab270d6e87dd1d9"
+  integrity sha512-kivNFO+0OcUNu7jQquLXAxz1FIwZj8nrj+YkOKc5694NbjCvcT6aSZiIzNzd2Kul4o4rTto8QVR9lMNtxD4G1w==
+  dependencies:
+    decimal.js-light "^2.4.1"
+
+recharts@^2.0.6:
+  version "2.1.9"
+  resolved "https://registry.yarnpkg.com/recharts/-/recharts-2.1.9.tgz#a52d411a7d822d118f7754cfc9c50db8fab46fb9"
+  integrity sha512-VozH5uznUvGqD7n224FGj7cmMAenlS0HPCs+7r2HeeHiQK6un6z0CTZfWVAB860xbcr4m+BN/EGMPZmYWd34Rg==
+  dependencies:
+    "@types/d3-interpolate" "^2.0.0"
+    "@types/d3-scale" "^3.0.0"
+    "@types/d3-shape" "^2.0.0"
+    classnames "^2.2.5"
+    d3-interpolate "^2.0.0"
+    d3-scale "^3.0.0"
+    d3-shape "^2.0.0"
+    eventemitter3 "^4.0.1"
+    lodash "^4.17.19"
+    react-is "^16.10.2"
+    react-resize-detector "^6.6.3"
+    react-smooth "^2.0.0"
+    recharts-scale "^0.4.4"
+    reduce-css-calc "^2.1.8"
+
+recursive-readdir@2.2.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/recursive-readdir/-/recursive-readdir-2.2.2.tgz#9946fb3274e1628de6e36b2f6714953b4845094f"
+  integrity sha512-nRCcW9Sj7NuZwa2XvH9co8NPeXUBhZP7CRKJtU+cS6PW9FpCIFoI5ib0NT1ZrbNuPoRy0ylyCaUL8Gih4LSyFg==
+  dependencies:
+    minimatch "3.0.4"
+
+reduce-css-calc@^2.1.8:
+  version "2.1.8"
+  resolved "https://registry.yarnpkg.com/reduce-css-calc/-/reduce-css-calc-2.1.8.tgz#7ef8761a28d614980dc0c982f772c93f7a99de03"
+  integrity sha512-8liAVezDmUcH+tdzoEGrhfbGcP7nOV4NkGE3a74+qqvE7nt9i4sKLGBuZNOnpI4WiGksiNPklZxva80061QiPg==
+  dependencies:
+    css-unit-converter "^1.1.1"
+    postcss-value-parser "^3.3.0"
+
+redux-mock-store@^1.5.4:
+  version "1.5.4"
+  resolved "https://registry.yarnpkg.com/redux-mock-store/-/redux-mock-store-1.5.4.tgz#90d02495fd918ddbaa96b83aef626287c9ab5872"
+  integrity sha512-xmcA0O/tjCLXhh9Fuiq6pMrJCwFRaouA8436zcikdIpYWWCjU76CRk+i2bHx8EeiSiMGnB85/lZdU3wIJVXHTA==
+  dependencies:
+    lodash.isplainobject "^4.0.6"
+
+redux-thunk@^2.3.0:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.4.1.tgz#0dd8042cf47868f4b29699941de03c9301a75714"
+  integrity sha512-OOYGNY5Jy2TWvTL1KgAlVy6dcx3siPJ1wTq741EPyUKfn6W6nChdICjZwCd0p8AZBs5kWpZlbkXW2nE/zjUa+Q==
+
+redux@^4.0.0, redux@^4.0.4:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/redux/-/redux-4.1.2.tgz#140f35426d99bb4729af760afcf79eaaac407104"
+  integrity sha512-SH8PglcebESbd/shgf6mii6EIoRM0zrQyjcuQ+ojmfxjTtE0z9Y8pa62iA/OJ58qjP6j27uyW4kUF4jl/jd6sw==
+  dependencies:
+    "@babel/runtime" "^7.9.2"
+
+regenerate-unicode-properties@^10.0.1:
+  version "10.0.1"
+  resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-10.0.1.tgz#7f442732aa7934a3740c779bb9b3340dccc1fb56"
+  integrity sha512-vn5DU6yg6h8hP/2OkQo3K7uVILvY4iu0oI4t3HFa81UPkhGJwkRwM10JEc3upjdhHjs/k8GJY1sRBhk5sr69Bw==
+  dependencies:
+    regenerate "^1.4.2"
+
+regenerate@^1.4.2:
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.2.tgz#b9346d8827e8f5a32f7ba29637d398b69014848a"
+  integrity sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==
+
+regenerator-runtime@^0.11.0:
+  version "0.11.1"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
+  integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==
+
+regenerator-runtime@^0.13.11:
+  version "0.13.11"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9"
+  integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==
+
+regenerator-runtime@^0.13.3, regenerator-runtime@^0.13.4:
+  version "0.13.9"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz#8925742a98ffd90814988d7566ad30ca3b263b52"
+  integrity sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==
+
+regenerator-transform@^0.14.2:
+  version "0.14.5"
+  resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.14.5.tgz#c98da154683671c9c4dcb16ece736517e1b7feb4"
+  integrity sha512-eOf6vka5IO151Jfsw2NO9WpGX58W6wWmefK3I1zEGr0lOD0u8rwPaNqQL1aRxUaxLeKO3ArNh3VYg1KbaD+FFw==
+  dependencies:
+    "@babel/runtime" "^7.8.4"
+
+regex-not@^1.0.0, regex-not@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/regex-not/-/regex-not-1.0.2.tgz#1f4ece27e00b0b65e0247a6810e6a85d83a5752c"
+  integrity sha512-J6SDjUgDxQj5NusnOtdFxDwN/+HWykR8GELwctJ7mdqhcyy1xEc4SRFHUXvxTp661YaVKAjfRLZ9cCqS6tn32A==
+  dependencies:
+    extend-shallow "^3.0.2"
+    safe-regex "^1.1.0"
+
+regex-parser@2.2.10:
+  version "2.2.10"
+  resolved "https://registry.yarnpkg.com/regex-parser/-/regex-parser-2.2.10.tgz#9e66a8f73d89a107616e63b39d4deddfee912b37"
+  integrity sha512-8t6074A68gHfU8Neftl0Le6KTDwfGAj7IyjPIMSfikI2wJUTHDMaIq42bUsfVnj8mhx0R+45rdUXHGpN164avA==
+
+regexp.prototype.flags@^1.2.0, regexp.prototype.flags@^1.3.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.4.1.tgz#b3f4c0059af9e47eca9f3f660e51d81307e72307"
+  integrity sha512-pMR7hBVUUGI7PMA37m2ofIdQCsomVnas+Jn5UPGAHQ+/LlwKm/aTLJHdasmHRzlfeZwHiAOaRSo2rbBDm3nNUQ==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.3"
+
+regexpp@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-2.0.1.tgz#8d19d31cf632482b589049f8281f93dbcba4d07f"
+  integrity sha512-lv0M6+TkDVniA3aD1Eg0DVpfU/booSu7Eev3TDO/mZKHBfVjgCGTV4t4buppESEYDtkArYFOxTJWv6S5C+iaNw==
+
+regexpp@^3.0.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-3.2.0.tgz#0425a2768d8f23bad70ca4b90461fa2f1213e1b2"
+  integrity sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==
+
+regexpu-core@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-5.0.1.tgz#c531122a7840de743dcf9c83e923b5560323ced3"
+  integrity sha512-CriEZlrKK9VJw/xQGJpQM5rY88BtuL8DM+AEwvcThHilbxiTAy8vq4iJnd2tqq8wLmjbGZzP7ZcKFjbGkmEFrw==
+  dependencies:
+    regenerate "^1.4.2"
+    regenerate-unicode-properties "^10.0.1"
+    regjsgen "^0.6.0"
+    regjsparser "^0.8.2"
+    unicode-match-property-ecmascript "^2.0.0"
+    unicode-match-property-value-ecmascript "^2.0.0"
+
+regjsgen@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/regjsgen/-/regjsgen-0.6.0.tgz#83414c5354afd7d6627b16af5f10f41c4e71808d"
+  integrity sha512-ozE883Uigtqj3bx7OhL1KNbCzGyW2NQZPl6Hs09WTvCuZD5sTI4JY58bkbQWa/Y9hxIsvJ3M8Nbf7j54IqeZbA==
+
+regjsparser@^0.8.2:
+  version "0.8.4"
+  resolved "https://registry.yarnpkg.com/regjsparser/-/regjsparser-0.8.4.tgz#8a14285ffcc5de78c5b95d62bbf413b6bc132d5f"
+  integrity sha512-J3LABycON/VNEu3abOviqGHuB/LOtOQj8SKmfP9anY5GfAVw/SPjwzSjxGjbZXIxbGfqTHtJw58C2Li/WkStmA==
+  dependencies:
+    jsesc "~0.5.0"
+
+relateurl@0.2.x:
+  version "0.2.7"
+  resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9"
+  integrity sha1-VNvzd+UUQKypCkzSdGANP/LYiKk=
+
+remove-trailing-separator@^1.0.1:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz#c24bce2a283adad5bc3f58e0d48249b92379d8ef"
+  integrity sha1-wkvOKig62tW8P1jg1IJJuSN52O8=
+
+renderkid@^2.0.4:
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/renderkid/-/renderkid-2.0.7.tgz#464f276a6bdcee606f4a15993f9b29fc74ca8609"
+  integrity sha512-oCcFyxaMrKsKcTY59qnCAtmDVSLfPbrv6A3tVbPdFMMrv5jaK10V6m40cKsoPNhAqN6rmHW9sswW4o3ruSrwUQ==
+  dependencies:
+    css-select "^4.1.3"
+    dom-converter "^0.2.0"
+    htmlparser2 "^6.1.0"
+    lodash "^4.17.21"
+    strip-ansi "^3.0.1"
+
+repeat-element@^1.1.2:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/repeat-element/-/repeat-element-1.1.4.tgz#be681520847ab58c7568ac75fbfad28ed42d39e9"
+  integrity sha512-LFiNfRcSu7KK3evMyYOuCzv3L10TW7yC1G2/+StMjK8Y6Vqd2MG7r/Qjw4ghtuCOjFvlnms/iMmLqpvW/ES/WQ==
+
+repeat-string@^1.6.1:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637"
+  integrity sha1-jcrkcOHIirwtYA//Sndihtp15jc=
+
+request-promise-core@1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/request-promise-core/-/request-promise-core-1.1.4.tgz#3eedd4223208d419867b78ce815167d10593a22f"
+  integrity sha512-TTbAfBBRdWD7aNNOoVOBH4pN/KigV6LyapYNNlAPA8JwbovRti1E88m3sYAwsLi5ryhPKsE9APwnjFTgdUjTpw==
+  dependencies:
+    lodash "^4.17.19"
+
+request-promise-native@^1.0.5:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/request-promise-native/-/request-promise-native-1.0.9.tgz#e407120526a5efdc9a39b28a5679bf47b9d9dc28"
+  integrity sha512-wcW+sIUiWnKgNY0dqCpOZkUbF/I+YPi+f09JZIDa39Ec+q82CpSYniDp+ISgTTbKmnpJWASeJBPZmoxH84wt3g==
+  dependencies:
+    request-promise-core "1.1.4"
+    stealthy-require "^1.1.1"
+    tough-cookie "^2.3.3"
+
+request@^2.87.0, request@^2.88.0:
+  version "2.88.2"
+  resolved "https://registry.yarnpkg.com/request/-/request-2.88.2.tgz#d73c918731cb5a87da047e207234146f664d12b3"
+  integrity sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw==
+  dependencies:
+    aws-sign2 "~0.7.0"
+    aws4 "^1.8.0"
+    caseless "~0.12.0"
+    combined-stream "~1.0.6"
+    extend "~3.0.2"
+    forever-agent "~0.6.1"
+    form-data "~2.3.2"
+    har-validator "~5.1.3"
+    http-signature "~1.2.0"
+    is-typedarray "~1.0.0"
+    isstream "~0.1.2"
+    json-stringify-safe "~5.0.1"
+    mime-types "~2.1.19"
+    oauth-sign "~0.9.0"
+    performance-now "^2.1.0"
+    qs "~6.5.2"
+    safe-buffer "^5.1.2"
+    tough-cookie "~2.5.0"
+    tunnel-agent "^0.6.0"
+    uuid "^3.3.2"
+
+require-directory@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
+  integrity sha1-jGStX9MNqxyXbiNE/+f3kqam30I=
+
+require-main-filename@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-2.0.0.tgz#d0b329ecc7cc0f61649f62215be69af54aa8989b"
+  integrity sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==
+
+requires-port@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
+  integrity sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=
+
+resize-observer-polyfill@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
+  integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==
+
+resolve-cwd@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"
+  integrity sha1-AKn3OHVW4nA46uIyyqNypqWbZlo=
+  dependencies:
+    resolve-from "^3.0.0"
+
+resolve-from@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-3.0.0.tgz#b22c7af7d9d6881bc8b6e653335eebcb0a188748"
+  integrity sha1-six699nWiBvItuZTM17rywoYh0g=
+
+resolve-from@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
+  integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==
+
+resolve-pathname@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-pathname/-/resolve-pathname-3.0.0.tgz#99d02224d3cf263689becbb393bc560313025dcd"
+  integrity sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng==
+
+resolve-url-loader@3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/resolve-url-loader/-/resolve-url-loader-3.1.0.tgz#54d8181d33cd1b66a59544d05cadf8e4aa7d37cc"
+  integrity sha512-2QcrA+2QgVqsMJ1Hn5NnJXIGCX1clQ1F6QJTqOeiaDw9ACo1G2k+8/shq3mtqne03HOFyskAClqfxKyFBriXZg==
+  dependencies:
+    adjust-sourcemap-loader "2.0.0"
+    camelcase "5.0.0"
+    compose-function "3.0.3"
+    convert-source-map "1.6.0"
+    es6-iterator "2.0.3"
+    loader-utils "1.2.3"
+    postcss "7.0.14"
+    rework "1.0.1"
+    rework-visit "1.0.0"
+    source-map "0.6.1"
+
+resolve-url@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
+  integrity sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo=
+
+resolve@1.1.7:
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.1.7.tgz#203114d82ad2c5ed9e8e0411b3932875e889e97b"
+  integrity sha1-IDEU2CrSxe2ejgQRs5ModeiJ6Xs=
+
+resolve@1.12.0:
+  version "1.12.0"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.12.0.tgz#3fc644a35c84a48554609ff26ec52b66fa577df6"
+  integrity sha512-B/dOmuoAik5bKcD6s6nXDCjzUKnaDvdkRyAk6rsmsKLipWj4797iothd7jmmUhWTfinVMU+wc56rYKsit2Qy4w==
+  dependencies:
+    path-parse "^1.0.6"
+
+resolve@^1.10.0, resolve@^1.11.0, resolve@^1.12.0, resolve@^1.14.2, resolve@^1.20.0, resolve@^1.3.2, resolve@^1.8.1:
+  version "1.22.0"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.0.tgz#5e0b8c67c15df57a89bdbabe603a002f21731198"
+  integrity sha512-Hhtrw0nLeSrFQ7phPp4OOcVjLPIeMnRlr5mcnVuMe7M/7eBn98A3hmFRLoFo3DLZkivSYwhRUJTyPyWAk56WLw==
+  dependencies:
+    is-core-module "^2.8.1"
+    path-parse "^1.0.7"
+    supports-preserve-symlinks-flag "^1.0.0"
+
+resolve@^2.0.0-next.3:
+  version "2.0.0-next.3"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-2.0.0-next.3.tgz#d41016293d4a8586a39ca5d9b5f15cbea1f55e46"
+  integrity sha512-W8LucSynKUIDu9ylraa7ueVZ7hc0uAgJBxVsQSKOXOyle8a93qXhcz+XAXZ8bIq2d6i4Ehddn6Evt+0/UwKk6Q==
+  dependencies:
+    is-core-module "^2.2.0"
+    path-parse "^1.0.6"
+
+restore-cursor@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-2.0.0.tgz#9f7ee287f82fd326d4fd162923d62129eee0dfaf"
+  integrity sha1-n37ih/gv0ybU/RYpI9YhKe7g368=
+  dependencies:
+    onetime "^2.0.0"
+    signal-exit "^3.0.2"
+
+restore-cursor@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-3.1.0.tgz#39f67c54b3a7a58cea5236d95cf0034239631f7e"
+  integrity sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==
+  dependencies:
+    onetime "^5.1.0"
+    signal-exit "^3.0.2"
+
+ret@~0.1.10:
+  version "0.1.15"
+  resolved "https://registry.yarnpkg.com/ret/-/ret-0.1.15.tgz#b8a4825d5bdb1fc3f6f53c2bc33f81388681c7bc"
+  integrity sha512-TTlYpa+OL+vMMNG24xSlQGEJ3B/RzEfUlLct7b5G/ytav+wPrplCpVMFuwzXbkecJrb6IYo1iFb0S9v37754mg==
+
+retry@^0.12.0:
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/retry/-/retry-0.12.0.tgz#1b42a6266a21f07421d1b0b54b7dc167b01c013b"
+  integrity sha1-G0KmJmoh8HQh0bC1S33BZ7AcATs=
+
+rework-visit@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/rework-visit/-/rework-visit-1.0.0.tgz#9945b2803f219e2f7aca00adb8bc9f640f842c9a"
+  integrity sha1-mUWygD8hni96ygCtuLyfZA+ELJo=
+
+rework@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/rework/-/rework-1.0.1.tgz#30806a841342b54510aa4110850cd48534144aa7"
+  integrity sha1-MIBqhBNCtUUQqkEQhQzUhTQUSqc=
+  dependencies:
+    convert-source-map "^0.3.3"
+    css "^2.0.0"
+
+rgb-regex@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/rgb-regex/-/rgb-regex-1.0.1.tgz#c0e0d6882df0e23be254a475e8edd41915feaeb1"
+  integrity sha1-wODWiC3w4jviVKR16O3UGRX+rrE=
+
+rgba-regex@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/rgba-regex/-/rgba-regex-1.0.0.tgz#43374e2e2ca0968b0ef1523460b7d730ff22eeb3"
+  integrity sha1-QzdOLiyglosO8VI0YLfXMP8i7rM=
+
+rimraf@2.6.3:
+  version "2.6.3"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.3.tgz#b2d104fe0d8fb27cf9e0a1cda8262dd3833c6cab"
+  integrity sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==
+  dependencies:
+    glob "^7.1.3"
+
+rimraf@^2.5.4, rimraf@^2.6.3:
+  version "2.7.1"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec"
+  integrity sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==
+  dependencies:
+    glob "^7.1.3"
+
+ripemd160@^2.0.0, ripemd160@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/ripemd160/-/ripemd160-2.0.2.tgz#a1c1a6f624751577ba5d07914cbc92850585890c"
+  integrity sha512-ii4iagi25WusVoiC4B4lq7pbXfAp3D9v5CwfkY33vffw2+pkDjY1D8GaN7spsxvCSx8dkPqOZCEZyfxcmJG2IA==
+  dependencies:
+    hash-base "^3.0.0"
+    inherits "^2.0.1"
+
+rsvp@^4.8.4:
+  version "4.8.5"
+  resolved "https://registry.yarnpkg.com/rsvp/-/rsvp-4.8.5.tgz#c8f155311d167f68f21e168df71ec5b083113734"
+  integrity sha512-nfMOlASu9OnRJo1mbEk2cz0D56a1MBNrJ7orjRZQG10XDyuvwksKbuXNp6qa+kbn839HwjwhBzhFmdsaEAfauA==
+
+run-async@^2.2.0, run-async@^2.4.0:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/run-async/-/run-async-2.4.1.tgz#8440eccf99ea3e70bd409d49aab88e10c189a455"
+  integrity sha512-tvVnVv01b8c1RrA6Ep7JkStj85Guv/YrMcwqYQnwjsAS2cTmmPGBBjAjpCW7RrSodNSoE2/qg9O4bceNvUuDgQ==
+
+run-queue@^1.0.0, run-queue@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/run-queue/-/run-queue-1.0.3.tgz#e848396f057d223f24386924618e25694161ec47"
+  integrity sha1-6Eg5bwV9Ij8kOGkkYY4laUFh7Ec=
+  dependencies:
+    aproba "^1.1.1"
+
+rxjs@^6.4.0, rxjs@^6.6.0:
+  version "6.6.7"
+  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.6.7.tgz#90ac018acabf491bf65044235d5863c4dab804c9"
+  integrity sha512-hTdwr+7yYNIT5n4AMYp85KA6yw2Va0FLa3Rguvbpa4W3I5xynaBZo41cM3XM+4Q6fRMj3sBYIR1VAmZMXYJvRQ==
+  dependencies:
+    tslib "^1.9.0"
+
+safe-buffer@5.1.2, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
+  integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
+
+safe-buffer@5.2.1, safe-buffer@>=5.1.0, safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.1, safe-buffer@^5.1.2, safe-buffer@^5.2.0, safe-buffer@~5.2.0:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
+  integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
+
+safe-regex@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/safe-regex/-/safe-regex-1.1.0.tgz#40a3669f3b077d1e943d44629e157dd48023bf2e"
+  integrity sha1-QKNmnzsHfR6UPURinhV91IAjvy4=
+  dependencies:
+    ret "~0.1.10"
+
+"safer-buffer@>= 2.1.2 < 3", safer-buffer@^2.0.2, safer-buffer@^2.1.0, safer-buffer@~2.1.0:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
+  integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
+
+sane@^4.0.3:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/sane/-/sane-4.1.0.tgz#ed881fd922733a6c461bc189dc2b6c006f3ffded"
+  integrity sha512-hhbzAgTIX8O7SHfp2c8/kREfEn4qO/9q8C9beyY6+tvZ87EpoZ3i1RIEvp27YBswnNbY9mWd6paKVmKbAgLfZA==
+  dependencies:
+    "@cnakazawa/watch" "^1.0.3"
+    anymatch "^2.0.0"
+    capture-exit "^2.0.0"
+    exec-sh "^0.3.2"
+    execa "^1.0.0"
+    fb-watchman "^2.0.0"
+    micromatch "^3.1.4"
+    minimist "^1.1.1"
+    walker "~1.0.5"
+
+sass-loader@7.2.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-7.2.0.tgz#e34115239309d15b2527cb62b5dfefb62a96ff7f"
+  integrity sha512-h8yUWaWtsbuIiOCgR9fd9c2lRXZ2uG+h8Dzg/AGNj+Hg/3TO8+BBAW9mEP+mh8ei+qBKqSJ0F1FLlYjNBc61OA==
+  dependencies:
+    clone-deep "^4.0.1"
+    loader-utils "^1.0.1"
+    neo-async "^2.5.0"
+    pify "^4.0.1"
+    semver "^5.5.0"
+
+sax@^1.2.4, sax@~1.2.4:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
+  integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
+
+saxes@^3.1.9:
+  version "3.1.11"
+  resolved "https://registry.yarnpkg.com/saxes/-/saxes-3.1.11.tgz#d59d1fd332ec92ad98a2e0b2ee644702384b1c5b"
+  integrity sha512-Ydydq3zC+WYDJK1+gRxRapLIED9PWeSuuS41wqyoRmzvhhh9nc+QQrVMKJYzJFULazeGhzSV0QleN2wD3boh2g==
+  dependencies:
+    xmlchars "^2.1.1"
+
+scheduler@^0.19.1:
+  version "0.19.1"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.19.1.tgz#4f3e2ed2c1a7d65681f4c854fa8c5a1ccb40f196"
+  integrity sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+
+schema-utils@^0.4.0:
+  version "0.4.7"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-0.4.7.tgz#ba74f597d2be2ea880131746ee17d0a093c68187"
+  integrity sha512-v/iwU6wvwGK8HbU9yi3/nhGzP0yGSuhQMzL6ySiec1FSrZZDkhm4noOSWzrNFo/jEc+SJY6jRTwuwbSXJPDUnQ==
+  dependencies:
+    ajv "^6.1.0"
+    ajv-keywords "^3.1.0"
+
+schema-utils@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-1.0.0.tgz#0b79a93204d7b600d4b2850d1f66c2a34951c770"
+  integrity sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g==
+  dependencies:
+    ajv "^6.1.0"
+    ajv-errors "^1.0.0"
+    ajv-keywords "^3.1.0"
+
+schema-utils@^2.0.0, schema-utils@^2.0.1, schema-utils@^2.2.0:
+  version "2.7.1"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.7.1.tgz#1ca4f32d1b24c590c203b8e7a50bf0ea4cd394d7"
+  integrity sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==
+  dependencies:
+    "@types/json-schema" "^7.0.5"
+    ajv "^6.12.4"
+    ajv-keywords "^3.5.2"
+
+screenfull@^5.0.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/screenfull/-/screenfull-5.2.0.tgz#6533d524d30621fc1283b9692146f3f13a93d1ba"
+  integrity sha512-9BakfsO2aUQN2K9Fdbj87RJIEZ82Q9IGim7FqM5OsebfoFC6ZHXgDq/KvniuLTPdeM8wY2o6Dj3WQ7KeQCj3cA==
+
+screenfull@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/screenfull/-/screenfull-6.0.1.tgz#3b71e6f06b72d817a8d3be73c45ebe71fa8da1ce"
+  integrity sha512-yzQW+j4zMUBQC51xxWaoDYjxOtl8Kn+xvue3p6v/fv2pIi1jH4AldgVLU8TBfFVgH2x3VXlf3+YiA/AYIPlaew==
+
+seamless-immutable@^7.1.3:
+  version "7.1.4"
+  resolved "https://registry.yarnpkg.com/seamless-immutable/-/seamless-immutable-7.1.4.tgz#6e9536def083ddc4dea0207d722e0e80d0f372f8"
+  integrity sha512-XiUO1QP4ki4E2PHegiGAlu6r82o5A+6tRh7IkGGTVg/h+UoeX4nFBeCGPOhb4CYjvkqsfm/TUtvOMYC1xmV30A==
+
+select-hose@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"
+  integrity sha1-Yl2GWPhlr0Psliv8N2o3NZpJlMo=
+
+selfsigned@^1.10.8:
+  version "1.10.14"
+  resolved "https://registry.yarnpkg.com/selfsigned/-/selfsigned-1.10.14.tgz#ee51d84d9dcecc61e07e4aba34f229ab525c1574"
+  integrity sha512-lkjaiAye+wBZDCBsu5BGi0XiLRxeUlsGod5ZP924CRSEoGuZAw/f7y9RKu28rwTfiHVhdavhB0qH0INV6P1lEA==
+  dependencies:
+    node-forge "^0.10.0"
+
+semver-compare@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/semver-compare/-/semver-compare-1.0.0.tgz#0dee216a1c941ab37e9efb1788f6afc5ff5537fc"
+  integrity sha1-De4hahyUGrN+nvsXiPavxf9VN/w=
+
+semver-regex@^3.1.2:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/semver-regex/-/semver-regex-3.1.3.tgz#b2bcc6f97f63269f286994e297e229b6245d0dc3"
+  integrity sha512-Aqi54Mk9uYTjVexLnR67rTyBusmwd04cLkHy9hNvk3+G3nT2Oyg7E0l4XVbOaNwIvQ3hHeYxGcyEy+mKreyBFQ==
+
+"semver@2 || 3 || 4 || 5", semver@^5.4.1, semver@^5.5.0, semver@^5.5.1, semver@^5.6.0:
+  version "5.7.1"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
+  integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
+
+semver@6.3.0, semver@^6.0.0, semver@^6.1.1, semver@^6.1.2, semver@^6.2.0, semver@^6.3.0:
+  version "6.3.0"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
+  integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
+
+semver@7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.0.0.tgz#5f3ca35761e47e05b206c6daff2cf814f0316b8e"
+  integrity sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A==
+
+semver@^7.3.2:
+  version "7.3.5"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.5.tgz#0b621c879348d8998e4b0e4be94b3f12e6018ef7"
+  integrity sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==
+  dependencies:
+    lru-cache "^6.0.0"
+
+send@0.17.2:
+  version "0.17.2"
+  resolved "https://registry.yarnpkg.com/send/-/send-0.17.2.tgz#926622f76601c41808012c8bf1688fe3906f7820"
+  integrity sha512-UJYB6wFSJE3G00nEivR5rgWp8c2xXvJ3OPWPhmuteU0IKj8nKbG3DrjiOmLwpnHGYWAVwA69zmTm++YG0Hmwww==
+  dependencies:
+    debug "2.6.9"
+    depd "~1.1.2"
+    destroy "~1.0.4"
+    encodeurl "~1.0.2"
+    escape-html "~1.0.3"
+    etag "~1.8.1"
+    fresh "0.5.2"
+    http-errors "1.8.1"
+    mime "1.6.0"
+    ms "2.1.3"
+    on-finished "~2.3.0"
+    range-parser "~1.2.1"
+    statuses "~1.5.0"
+
+serialize-javascript@^1.7.0:
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-1.9.1.tgz#cfc200aef77b600c47da9bb8149c943e798c2fdb"
+  integrity sha512-0Vb/54WJ6k5v8sSWN09S0ora+Hnr+cX40r9F170nT+mSkaxltoE/7R3OrIdBSUv1OoiobH1QoWQbCnAO+e8J1A==
+
+serialize-javascript@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-4.0.0.tgz#b525e1238489a5ecfc42afacc3fe99e666f4b1aa"
+  integrity sha512-GaNA54380uFefWghODBWEGisLZFj00nS5ACs6yHa9nLqlLpVLO8ChDGeKRjZnV4Nh4n0Qi7nhYZD/9fCPzEqkw==
+  dependencies:
+    randombytes "^2.1.0"
+
+serve-index@^1.9.1:
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/serve-index/-/serve-index-1.9.1.tgz#d3768d69b1e7d82e5ce050fff5b453bea12a9239"
+  integrity sha1-03aNabHn2C5c4FD/9bRTvqEqkjk=
+  dependencies:
+    accepts "~1.3.4"
+    batch "0.6.1"
+    debug "2.6.9"
+    escape-html "~1.0.3"
+    http-errors "~1.6.2"
+    mime-types "~2.1.17"
+    parseurl "~1.3.2"
+
+serve-static@1.14.2:
+  version "1.14.2"
+  resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.14.2.tgz#722d6294b1d62626d41b43a013ece4598d292bfa"
+  integrity sha512-+TMNA9AFxUEGuC0z2mevogSnn9MXKb4fa7ngeRMJaaGv8vTwnIEkKi+QGvPt33HSnf8pRS+WGM0EbMtCJLKMBQ==
+  dependencies:
+    encodeurl "~1.0.2"
+    escape-html "~1.0.3"
+    parseurl "~1.3.3"
+    send "0.17.2"
+
+set-blocking@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
+  integrity sha1-BF+XgtARrppoA93TgrJDkrPYkPc=
+
+set-immediate-shim@~1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/set-immediate-shim/-/set-immediate-shim-1.0.1.tgz#4b2b1b27eb808a9f8dcc481a58e5e56f599f3f61"
+  integrity sha1-SysbJ+uAip+NzEgaWOXlb1mfP2E=
+
+set-value@^2.0.0, set-value@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/set-value/-/set-value-2.0.1.tgz#a18d40530e6f07de4228c7defe4227af8cad005b"
+  integrity sha512-JxHc1weCN68wRY0fhCoXpyK55m/XPHafOmK4UWD7m2CI14GMcFypt4w/0+NV5f/ZMby2F6S2wwA7fgynh9gWSw==
+  dependencies:
+    extend-shallow "^2.0.1"
+    is-extendable "^0.1.1"
+    is-plain-object "^2.0.3"
+    split-string "^3.0.1"
+
+setimmediate@^1.0.4:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
+  integrity sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=
+
+setprototypeof@1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.1.0.tgz#d0bd85536887b6fe7c0d818cb962d9d91c54e656"
+  integrity sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ==
+
+setprototypeof@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.2.0.tgz#66c9a24a73f9fc28cbe66b09fed3d33dcaf1b424"
+  integrity sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==
+
+sha.js@^2.4.0, sha.js@^2.4.8:
+  version "2.4.11"
+  resolved "https://registry.yarnpkg.com/sha.js/-/sha.js-2.4.11.tgz#37a5cf0b81ecbc6943de109ba2960d1b26584ae7"
+  integrity sha512-QMEp5B7cftE7APOjk5Y6xgrbWu+WkLVQwk8JNjZ8nKRciZaByEW6MubieAiToS7+dwvrjGhH8jRXz3MVd0AYqQ==
+  dependencies:
+    inherits "^2.0.1"
+    safe-buffer "^5.0.1"
+
+shallow-clone@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/shallow-clone/-/shallow-clone-0.1.2.tgz#5909e874ba77106d73ac414cfec1ffca87d97060"
+  integrity sha1-WQnodLp3EG1zrEFM/sH/yofZcGA=
+  dependencies:
+    is-extendable "^0.1.1"
+    kind-of "^2.0.1"
+    lazy-cache "^0.2.3"
+    mixin-object "^2.0.1"
+
+shallow-clone@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/shallow-clone/-/shallow-clone-3.0.1.tgz#8f2981ad92531f55035b01fb230769a40e02efa3"
+  integrity sha512-/6KqX+GVUdqPuPPd2LxDDxzX6CAbjJehAAOKlNpqqUpAqPM6HeL8f+o3a+JsyGjn2lv0WY8UsTgUJjU9Ok55NA==
+  dependencies:
+    kind-of "^6.0.2"
+
+shallowequal@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
+  integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==
+
+shebang-command@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"
+  integrity sha1-RKrGW2lbAzmJaMOfNj/uXer98eo=
+  dependencies:
+    shebang-regex "^1.0.0"
+
+shebang-regex@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-1.0.0.tgz#da42f49740c0b42db2ca9728571cb190c98efea3"
+  integrity sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM=
+
+shell-quote@1.7.2:
+  version "1.7.2"
+  resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.7.2.tgz#67a7d02c76c9da24f99d20808fcaded0e0e04be2"
+  integrity sha512-mRz/m/JVscCrkMyPqHc/bczi3OQHkLTqXHEFu0zDhK/qfv3UcOA4SVmRCLmos4bhjr9ekVQubj/R7waKapmiQg==
+
+shellwords@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/shellwords/-/shellwords-0.1.1.tgz#d6b9181c1a48d397324c84871efbcfc73fc0654b"
+  integrity sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww==
+
+side-channel@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.4.tgz#efce5c8fdc104ee751b25c58d4290011fa5ea2cf"
+  integrity sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==
+  dependencies:
+    call-bind "^1.0.0"
+    get-intrinsic "^1.0.2"
+    object-inspect "^1.9.0"
+
+signal-exit@^3.0.0, signal-exit@^3.0.2:
+  version "3.0.7"
+  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.7.tgz#a9a1767f8af84155114eaabd73f99273c8f59ad9"
+  integrity sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==
+
+simple-swizzle@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/simple-swizzle/-/simple-swizzle-0.2.2.tgz#a4da6b635ffcccca33f70d17cb92592de95e557a"
+  integrity sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=
+  dependencies:
+    is-arrayish "^0.3.1"
+
+sisteransi@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.5.tgz#134d681297756437cc05ca01370d3a7a571075ed"
+  integrity sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==
+
+slash@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/slash/-/slash-1.0.0.tgz#c41f2f6c39fc16d1cd17ad4b5d896114ae470d55"
+  integrity sha1-xB8vbDn8FtHNF61LXYlhFK5HDVU=
+
+slash@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/slash/-/slash-2.0.0.tgz#de552851a1759df3a8f206535442f5ec4ddeab44"
+  integrity sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==
+
+slash@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
+  integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==
+
+slice-ansi@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-2.1.0.tgz#cacd7693461a637a5788d92a7dd4fba068e81636"
+  integrity sha512-Qu+VC3EwYLldKa1fCxuuvULvSJOKEgk9pi8dZeCVK7TqBfUNTH4sFkk4joj8afVSfAYgJoSOetjx9QWOJ5mYoQ==
+  dependencies:
+    ansi-styles "^3.2.0"
+    astral-regex "^1.0.0"
+    is-fullwidth-code-point "^2.0.0"
+
+snapdragon-node@^2.0.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/snapdragon-node/-/snapdragon-node-2.1.1.tgz#6c175f86ff14bdb0724563e8f3c1b021a286853b"
+  integrity sha512-O27l4xaMYt/RSQ5TR3vpWCAB5Kb/czIcqUFOM/C4fYcLnbZUc1PkjTAMjof2pBWaSTwOUd6qUHcFGVGj7aIwnw==
+  dependencies:
+    define-property "^1.0.0"
+    isobject "^3.0.0"
+    snapdragon-util "^3.0.1"
+
+snapdragon-util@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/snapdragon-util/-/snapdragon-util-3.0.1.tgz#f956479486f2acd79700693f6f7b805e45ab56e2"
+  integrity sha512-mbKkMdQKsjX4BAL4bRYTj21edOf8cN7XHdYUJEe+Zn99hVEYcMvKPct1IqNe7+AZPirn8BCDOQBHQZknqmKlZQ==
+  dependencies:
+    kind-of "^3.2.0"
+
+snapdragon@^0.8.1:
+  version "0.8.2"
+  resolved "https://registry.yarnpkg.com/snapdragon/-/snapdragon-0.8.2.tgz#64922e7c565b0e14204ba1aa7d6964278d25182d"
+  integrity sha512-FtyOnWN/wCHTVXOMwvSv26d+ko5vWlIDD6zoUJ7LW8vh+ZBC8QdljveRP+crNrtBwioEUWy/4dMtbBjA4ioNlg==
+  dependencies:
+    base "^0.11.1"
+    debug "^2.2.0"
+    define-property "^0.2.5"
+    extend-shallow "^2.0.1"
+    map-cache "^0.2.2"
+    source-map "^0.5.6"
+    source-map-resolve "^0.5.0"
+    use "^3.1.0"
+
+sockjs-client@1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/sockjs-client/-/sockjs-client-1.4.0.tgz#c9f2568e19c8fd8173b4997ea3420e0bb306c7d5"
+  integrity sha512-5zaLyO8/nri5cua0VtOrFXBPK1jbL4+1cebT/mmKA1E1ZXOvJrII75bPu0l0k843G/+iAbhEqzyKr0w/eCCj7g==
+  dependencies:
+    debug "^3.2.5"
+    eventsource "^1.0.7"
+    faye-websocket "~0.11.1"
+    inherits "^2.0.3"
+    json3 "^3.3.2"
+    url-parse "^1.4.3"
+
+sockjs-client@^1.5.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/sockjs-client/-/sockjs-client-1.6.0.tgz#e0277b8974558edcb557eafc7d3027ef6128d865"
+  integrity sha512-qVHJlyfdHFht3eBFZdKEXKTlb7I4IV41xnVNo8yUKA1UHcPJwgW2SvTq9LhnjjCywSkSK7c/e4nghU0GOoMCRQ==
+  dependencies:
+    debug "^3.2.7"
+    eventsource "^1.1.0"
+    faye-websocket "^0.11.4"
+    inherits "^2.0.4"
+    url-parse "^1.5.10"
+
+sockjs@^0.3.21:
+  version "0.3.24"
+  resolved "https://registry.yarnpkg.com/sockjs/-/sockjs-0.3.24.tgz#c9bc8995f33a111bea0395ec30aa3206bdb5ccce"
+  integrity sha512-GJgLTZ7vYb/JtPSSZ10hsOYIvEYsjbNU+zPdIHcUaWVNUEPivzxku31865sSSud0Da0W4lEeOPlmw93zLQchuQ==
+  dependencies:
+    faye-websocket "^0.11.3"
+    uuid "^8.3.2"
+    websocket-driver "^0.7.4"
+
+sort-keys@^1.0.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/sort-keys/-/sort-keys-1.1.2.tgz#441b6d4d346798f1b4e49e8920adfba0e543f9ad"
+  integrity sha1-RBttTTRnmPG05J6JIK37oOVD+a0=
+  dependencies:
+    is-plain-obj "^1.0.0"
+
+source-list-map@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34"
+  integrity sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw==
+
+source-map-resolve@^0.5.0, source-map-resolve@^0.5.2:
+  version "0.5.3"
+  resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.5.3.tgz#190866bece7553e1f8f267a2ee82c606b5509a1a"
+  integrity sha512-Htz+RnsXWk5+P2slx5Jh3Q66vhQj1Cllm0zvnaY98+NFx+Dv2CF/f5O/t8x+KaNdrdIAsruNzoh/KpialbqAnw==
+  dependencies:
+    atob "^2.1.2"
+    decode-uri-component "^0.2.0"
+    resolve-url "^0.2.1"
+    source-map-url "^0.4.0"
+    urix "^0.1.0"
+
+source-map-support@^0.5.6, source-map-support@~0.5.12:
+  version "0.5.21"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.21.tgz#04fe7c7f9e1ed2d662233c28cb2b35b9f63f6e4f"
+  integrity sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==
+  dependencies:
+    buffer-from "^1.0.0"
+    source-map "^0.6.0"
+
+source-map-url@^0.4.0:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.4.1.tgz#0af66605a745a5a2f91cf1bbf8a7afbc283dec56"
+  integrity sha512-cPiFOTLUKvJFIg4SKVScy4ilPPW6rFgMgfuZJPNoDuMs3nC1HbMUycBoJw77xFIp6z1UJQJOfx6C9GMH80DiTw==
+
+source-map@0.6.1, source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.0, source-map@~0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
+  integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
+
+source-map@^0.5.0, source-map@^0.5.6:
+  version "0.5.7"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
+  integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
+
+spdx-correct@^3.0.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-3.1.1.tgz#dece81ac9c1e6713e5f7d1b6f17d468fa53d89a9"
+  integrity sha512-cOYcUWwhCuHCXi49RhFRCyJEK3iPj1Ziz9DpViV3tbZOwXD49QzIN3MpOLJNxh2qwq2lJJZaKMVw9qNi4jTC0w==
+  dependencies:
+    spdx-expression-parse "^3.0.0"
+    spdx-license-ids "^3.0.0"
+
+spdx-exceptions@^2.1.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/spdx-exceptions/-/spdx-exceptions-2.3.0.tgz#3f28ce1a77a00372683eade4a433183527a2163d"
+  integrity sha512-/tTrYOC7PPI1nUAgx34hUpqXuyJG+DTHJTnIULG4rDygi4xu/tfgmq1e1cIRwRzwZgo4NLySi+ricLkZkw4i5A==
+
+spdx-expression-parse@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz#cf70f50482eefdc98e3ce0a6833e4a53ceeba679"
+  integrity sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==
+  dependencies:
+    spdx-exceptions "^2.1.0"
+    spdx-license-ids "^3.0.0"
+
+spdx-license-ids@^3.0.0:
+  version "3.0.11"
+  resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-3.0.11.tgz#50c0d8c40a14ec1bf449bae69a0ea4685a9d9f95"
+  integrity sha512-Ctl2BrFiM0X3MANYgj3CkygxhRmr9mi6xhejbdO960nF6EDJApTYpn0BQnDKlnNBULKiCN1n3w9EBkHK8ZWg+g==
+
+spdy-transport@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/spdy-transport/-/spdy-transport-3.0.0.tgz#00d4863a6400ad75df93361a1608605e5dcdcf31"
+  integrity sha512-hsLVFE5SjA6TCisWeJXFKniGGOpBgMLmerfO2aCyCU5s7nJ/rpAepqmFifv/GCbSbueEeAJJnmSQ2rKC/g8Fcw==
+  dependencies:
+    debug "^4.1.0"
+    detect-node "^2.0.4"
+    hpack.js "^2.1.6"
+    obuf "^1.1.2"
+    readable-stream "^3.0.6"
+    wbuf "^1.7.3"
+
+spdy@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/spdy/-/spdy-4.0.2.tgz#b74f466203a3eda452c02492b91fb9e84a27677b"
+  integrity sha512-r46gZQZQV+Kl9oItvl1JZZqJKGr+oEkB08A6BzkiR7593/7IbtuncXHd2YoYeTsG4157ZssMu9KYvUHLcjcDoA==
+  dependencies:
+    debug "^4.1.0"
+    handle-thing "^2.0.0"
+    http-deceiver "^1.2.7"
+    select-hose "^2.0.0"
+    spdy-transport "^3.0.0"
+
+split-string@^3.0.1, split-string@^3.0.2:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/split-string/-/split-string-3.1.0.tgz#7cb09dda3a86585705c64b39a6466038682e8fe2"
+  integrity sha512-NzNVhJDYpwceVVii8/Hu6DKfD2G+NrQHlS/V/qgv763EYudVwEcMQNxd2lh+0VrUByXN/oJkl5grOhYWvQUYiw==
+  dependencies:
+    extend-shallow "^3.0.0"
+
+sprintf-js@~1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
+  integrity sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=
+
+sshpk@^1.7.0:
+  version "1.17.0"
+  resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.17.0.tgz#578082d92d4fe612b13007496e543fa0fbcbe4c5"
+  integrity sha512-/9HIEs1ZXGhSPE8X6Ccm7Nam1z8KcoCqPdI7ecm1N33EzAetWahvQWVqLZtaZQ+IDKX4IyA2o0gBzqIMkAagHQ==
+  dependencies:
+    asn1 "~0.2.3"
+    assert-plus "^1.0.0"
+    bcrypt-pbkdf "^1.0.0"
+    dashdash "^1.12.0"
+    ecc-jsbn "~0.1.1"
+    getpass "^0.1.1"
+    jsbn "~0.1.0"
+    safer-buffer "^2.0.2"
+    tweetnacl "~0.14.0"
+
+ssri@^6.0.1:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/ssri/-/ssri-6.0.2.tgz#157939134f20464e7301ddba3e90ffa8f7728ac5"
+  integrity sha512-cepbSq/neFK7xB6A50KHN0xHDotYzq58wWCa5LeWqnPrHG8GzfEjO/4O8kpmcGW+oaxkvhEJCWgbgNk4/ZV93Q==
+  dependencies:
+    figgy-pudding "^3.5.1"
+
+stable@^0.1.8:
+  version "0.1.8"
+  resolved "https://registry.yarnpkg.com/stable/-/stable-0.1.8.tgz#836eb3c8382fe2936feaf544631017ce7d47a3cf"
+  integrity sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==
+
+stack-utils@^1.0.1:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/stack-utils/-/stack-utils-1.0.5.tgz#a19b0b01947e0029c8e451d5d61a498f5bb1471b"
+  integrity sha512-KZiTzuV3CnSnSvgMRrARVCj+Ht7rMbauGDK0LdVFRGyenwdylpajAp4Q0i6SX8rEmbTpMMf6ryq2gb8pPq2WgQ==
+  dependencies:
+    escape-string-regexp "^2.0.0"
+
+static-extend@^0.1.1:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/static-extend/-/static-extend-0.1.2.tgz#60809c39cbff55337226fd5e0b520f341f1fb5c6"
+  integrity sha1-YICcOcv/VTNyJv1eC1IPNB8ftcY=
+  dependencies:
+    define-property "^0.2.5"
+    object-copy "^0.1.0"
+
+"statuses@>= 1.4.0 < 2", "statuses@>= 1.5.0 < 2", statuses@~1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c"
+  integrity sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=
+
+stealthy-require@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/stealthy-require/-/stealthy-require-1.1.1.tgz#35b09875b4ff49f26a777e509b3090a3226bf24b"
+  integrity sha1-NbCYdbT/SfJqd35QmzCQoyJr8ks=
+
+stream-browserify@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/stream-browserify/-/stream-browserify-2.0.2.tgz#87521d38a44aa7ee91ce1cd2a47df0cb49dd660b"
+  integrity sha512-nX6hmklHs/gr2FuxYDltq8fJA1GDlxKQCz8O/IM4atRqBH8OORmBNgfvW5gG10GT/qQ9u0CzIvr2X5Pkt6ntqg==
+  dependencies:
+    inherits "~2.0.1"
+    readable-stream "^2.0.2"
+
+stream-each@^1.1.0:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/stream-each/-/stream-each-1.2.3.tgz#ebe27a0c389b04fbcc233642952e10731afa9bae"
+  integrity sha512-vlMC2f8I2u/bZGqkdfLQW/13Zihpej/7PmSiMQsbYddxuTsJp8vRe2x2FvVExZg7FaOds43ROAuFJwPR4MTZLw==
+  dependencies:
+    end-of-stream "^1.1.0"
+    stream-shift "^1.0.0"
+
+stream-http@^2.7.2:
+  version "2.8.3"
+  resolved "https://registry.yarnpkg.com/stream-http/-/stream-http-2.8.3.tgz#b2d242469288a5a27ec4fe8933acf623de6514fc"
+  integrity sha512-+TSkfINHDo4J+ZobQLWiMouQYB+UVYFttRA94FpEzzJ7ZdqcL4uUUQ7WkdkI4DSozGmgBUE/a47L+38PenXhUw==
+  dependencies:
+    builtin-status-codes "^3.0.0"
+    inherits "^2.0.1"
+    readable-stream "^2.3.6"
+    to-arraybuffer "^1.0.0"
+    xtend "^4.0.0"
+
+stream-shift@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/stream-shift/-/stream-shift-1.0.1.tgz#d7088281559ab2778424279b0877da3c392d5a3d"
+  integrity sha512-AiisoFqQ0vbGcZgQPY1cdP2I76glaVA/RauYR4G4thNFgkTqr90yXTo4LYX60Jl+sIlPNHHdGSwo01AvbKUSVQ==
+
+streamsaver@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/streamsaver/-/streamsaver-2.0.6.tgz#869d2347dd70191e0ac888d52296956a8cba2ed9"
+  integrity sha512-LK4e7TfCV8HzuM0PKXuVUfKyCB1FtT9L0EGxsFk5Up8njj0bXK8pJM9+Wq2Nya7/jslmCQwRK39LFm55h7NBTw==
+
+strict-uri-encode@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713"
+  integrity sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=
+
+string-length@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/string-length/-/string-length-2.0.0.tgz#d40dbb686a3ace960c1cffca562bf2c45f8363ed"
+  integrity sha1-1A27aGo6zpYMHP/KVivyxF+DY+0=
+  dependencies:
+    astral-regex "^1.0.0"
+    strip-ansi "^4.0.0"
+
+string-length@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/string-length/-/string-length-3.1.0.tgz#107ef8c23456e187a8abd4a61162ff4ac6e25837"
+  integrity sha512-Ttp5YvkGm5v9Ijagtaz1BnN+k9ObpvS0eIBblPMp2YWL8FBmi9qblQ9fexc2k/CXFgrTIteU3jAw3payCnwSTA==
+  dependencies:
+    astral-regex "^1.0.0"
+    strip-ansi "^5.2.0"
+
+string-width@^2.1.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-2.1.1.tgz#ab93f27a8dc13d28cac815c462143a6d9012ae9e"
+  integrity sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==
+  dependencies:
+    is-fullwidth-code-point "^2.0.0"
+    strip-ansi "^4.0.0"
+
+string-width@^3.0.0, string-width@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-3.1.0.tgz#22767be21b62af1081574306f69ac51b62203961"
+  integrity sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==
+  dependencies:
+    emoji-regex "^7.0.1"
+    is-fullwidth-code-point "^2.0.0"
+    strip-ansi "^5.1.0"
+
+string-width@^4.1.0:
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+string.prototype.matchall@^4.0.6:
+  version "4.0.6"
+  resolved "https://registry.yarnpkg.com/string.prototype.matchall/-/string.prototype.matchall-4.0.6.tgz#5abb5dabc94c7b0ea2380f65ba610b3a544b15fa"
+  integrity sha512-6WgDX8HmQqvEd7J+G6VtAahhsQIssiZ8zl7zKh1VDMFyL3hRTJP4FTNA3RbIp2TOQ9AYNDcc7e3fH0Qbup+DBg==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.3"
+    es-abstract "^1.19.1"
+    get-intrinsic "^1.1.1"
+    has-symbols "^1.0.2"
+    internal-slot "^1.0.3"
+    regexp.prototype.flags "^1.3.1"
+    side-channel "^1.0.4"
+
+string.prototype.trimend@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.4.tgz#e75ae90c2942c63504686c18b287b4a0b1a45f80"
+  integrity sha512-y9xCjw1P23Awk8EvTpcyL2NIr1j7wJ39f+k6lvRnSMz+mz9CGz9NYPelDk42kOz6+ql8xjfK8oYzy3jAP5QU5A==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.3"
+
+string.prototype.trimstart@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.4.tgz#b36399af4ab2999b4c9c648bd7a3fb2bb26feeed"
+  integrity sha512-jh6e984OBfvxS50tdY2nRZnoC5/mLFKOREQfw8t5yytkoUsJRNxvI/E39qu1sD0OtWI3OC0XgKSmcWwziwYuZw==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.3"
+
+string_decoder@^1.0.0, string_decoder@^1.1.1:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.3.0.tgz#42f114594a46cf1a8e30b0a84f56c78c3edac21e"
+  integrity sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==
+  dependencies:
+    safe-buffer "~5.2.0"
+
+string_decoder@~1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.1.1.tgz#9cf1611ba62685d7030ae9e4ba34149c3af03fc8"
+  integrity sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==
+  dependencies:
+    safe-buffer "~5.1.0"
+
+stringify-object@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/stringify-object/-/stringify-object-3.3.0.tgz#703065aefca19300d3ce88af4f5b3956d7556629"
+  integrity sha512-rHqiFh1elqCQ9WPLIC8I0Q/g/wj5J1eMkyoiD6eoQApWHP0FtlK7rqnhmabL5VUY9JQCcqwwvlOaSuutekgyrw==
+  dependencies:
+    get-own-enumerable-property-symbols "^3.0.0"
+    is-obj "^1.0.1"
+    is-regexp "^1.0.0"
+
+strip-ansi@5.2.0, strip-ansi@^5.0.0, strip-ansi@^5.1.0, strip-ansi@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-5.2.0.tgz#8c9a536feb6afc962bdfa5b104a5091c1ad9c0ae"
+  integrity sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==
+  dependencies:
+    ansi-regex "^4.1.0"
+
+strip-ansi@^3.0.0, strip-ansi@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-3.0.1.tgz#6a385fb8853d952d5ff05d0e8aaf94278dc63dcf"
+  integrity sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=
+  dependencies:
+    ansi-regex "^2.0.0"
+
+strip-ansi@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-4.0.0.tgz#a8479022eb1ac368a871389b635262c505ee368f"
+  integrity sha1-qEeQIusaw2iocTibY1JixQXuNo8=
+  dependencies:
+    ansi-regex "^3.0.0"
+
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-bom@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3"
+  integrity sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=
+
+strip-comments@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/strip-comments/-/strip-comments-1.0.2.tgz#82b9c45e7f05873bee53f37168af930aa368679d"
+  integrity sha512-kL97alc47hoyIQSV165tTt9rG5dn4w1dNnBhOQ3bOU1Nc1hel09jnXANaHJ7vzHLd4Ju8kseDGzlev96pghLFw==
+  dependencies:
+    babel-extract-comments "^1.0.0"
+    babel-plugin-transform-object-rest-spread "^6.26.0"
+
+strip-eof@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/strip-eof/-/strip-eof-1.0.0.tgz#bb43ff5598a6eb05d89b59fcd129c983313606bf"
+  integrity sha1-u0P/VZim6wXYm1n80SnJgzE2Br8=
+
+strip-json-comments@^3.0.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
+  integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
+
+style-loader@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-1.0.0.tgz#1d5296f9165e8e2c85d24eee0b7caf9ec8ca1f82"
+  integrity sha512-B0dOCFwv7/eY31a5PCieNwMgMhVGFe9w+rh7s/Bx8kfFkrth9zfTZquoYvdw8URgiqxObQKcpW51Ugz1HjfdZw==
+  dependencies:
+    loader-utils "^1.2.3"
+    schema-utils "^2.0.1"
+
+styled-components@^5.3.6:
+  version "5.3.6"
+  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.3.6.tgz#27753c8c27c650bee9358e343fc927966bfd00d1"
+  integrity sha512-hGTZquGAaTqhGWldX7hhfzjnIYBZ0IXQXkCYdvF1Sq3DsUaLx6+NTHC5Jj1ooM2F68sBiVz3lvhfwQs/S3l6qg==
+  dependencies:
+    "@babel/helper-module-imports" "^7.0.0"
+    "@babel/traverse" "^7.4.5"
+    "@emotion/is-prop-valid" "^1.1.0"
+    "@emotion/stylis" "^0.8.4"
+    "@emotion/unitless" "^0.7.4"
+    babel-plugin-styled-components ">= 1.12.0"
+    css-to-react-native "^3.0.0"
+    hoist-non-react-statics "^3.0.0"
+    shallowequal "^1.1.0"
+    supports-color "^5.5.0"
+
+stylehacks@^4.0.0:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-4.0.3.tgz#6718fcaf4d1e07d8a1318690881e8d96726a71d5"
+  integrity sha512-7GlLk9JwlElY4Y6a/rmbH2MhVlTyVmiJd1PfTCqFaIBEGMYNsrO/v3SeGTdhBThLg4Z+NbOk/qFMwCa+J+3p/g==
+  dependencies:
+    browserslist "^4.0.0"
+    postcss "^7.0.0"
+    postcss-selector-parser "^3.0.0"
+
+supports-color@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
+  integrity sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=
+
+supports-color@^5.3.0, supports-color@^5.5.0:
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
+  integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
+  dependencies:
+    has-flag "^3.0.0"
+
+supports-color@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-6.1.0.tgz#0764abc69c63d5ac842dd4867e8d025e880df8f3"
+  integrity sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==
+  dependencies:
+    has-flag "^3.0.0"
+
+supports-color@^7.1.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.2.0.tgz#1b7dcdcb32b8138801b3e478ba6a51caa89648da"
+  integrity sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==
+  dependencies:
+    has-flag "^4.0.0"
+
+supports-preserve-symlinks-flag@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
+  integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
+
+svg-parser@^2.0.0:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/svg-parser/-/svg-parser-2.0.4.tgz#fdc2e29e13951736140b76cb122c8ee6630eb6b5"
+  integrity sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==
+
+svgo@^1.0.0, svgo@^1.2.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/svgo/-/svgo-1.3.2.tgz#b6dc511c063346c9e415b81e43401145b96d4167"
+  integrity sha512-yhy/sQYxR5BkC98CY7o31VGsg014AKLEPxdfhora76l36hD9Rdy5NZA/Ocn6yayNPgSamYdtX2rFJdcv07AYVw==
+  dependencies:
+    chalk "^2.4.1"
+    coa "^2.0.2"
+    css-select "^2.0.0"
+    css-select-base-adapter "^0.1.1"
+    css-tree "1.0.0-alpha.37"
+    csso "^4.0.2"
+    js-yaml "^3.13.1"
+    mkdirp "~0.5.1"
+    object.values "^1.1.0"
+    sax "~1.2.4"
+    stable "^0.1.8"
+    unquote "~1.1.1"
+    util.promisify "~1.0.0"
+
+symbol-tree@^3.2.2:
+  version "3.2.4"
+  resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
+  integrity sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==
+
+table@^5.2.3:
+  version "5.4.6"
+  resolved "https://registry.yarnpkg.com/table/-/table-5.4.6.tgz#1292d19500ce3f86053b05f0e8e7e4a3bb21079e"
+  integrity sha512-wmEc8m4fjnob4gt5riFRtTu/6+4rSe12TpAELNSqHMfF3IqnA+CH37USM6/YR3qRZv7e56kAEAtd6nKZaxe0Ug==
+  dependencies:
+    ajv "^6.10.2"
+    lodash "^4.17.14"
+    slice-ansi "^2.1.0"
+    string-width "^3.0.0"
+
+tapable@^1.0.0, tapable@^1.1.0, tapable@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/tapable/-/tapable-1.1.3.tgz#a1fccc06b58db61fd7a45da2da44f5f3a3e67ba2"
+  integrity sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==
+
+terser-webpack-plugin@1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-1.4.1.tgz#61b18e40eaee5be97e771cdbb10ed1280888c2b4"
+  integrity sha512-ZXmmfiwtCLfz8WKZyYUuuHf3dMYEjg8NrjHMb0JqHVHVOSkzp3cW2/XG1fP3tRhqEqSzMwzzRQGtAPbs4Cncxg==
+  dependencies:
+    cacache "^12.0.2"
+    find-cache-dir "^2.1.0"
+    is-wsl "^1.1.0"
+    schema-utils "^1.0.0"
+    serialize-javascript "^1.7.0"
+    source-map "^0.6.1"
+    terser "^4.1.2"
+    webpack-sources "^1.4.0"
+    worker-farm "^1.7.0"
+
+terser-webpack-plugin@^1.4.1:
+  version "1.4.5"
+  resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-1.4.5.tgz#a217aefaea330e734ffacb6120ec1fa312d6040b"
+  integrity sha512-04Rfe496lN8EYruwi6oPQkG0vo8C+HT49X687FZnpPF0qMAIHONI6HEXYPKDOE8e5HjXTyKfqRd/agHtH0kOtw==
+  dependencies:
+    cacache "^12.0.2"
+    find-cache-dir "^2.1.0"
+    is-wsl "^1.1.0"
+    schema-utils "^1.0.0"
+    serialize-javascript "^4.0.0"
+    source-map "^0.6.1"
+    terser "^4.1.2"
+    webpack-sources "^1.4.0"
+    worker-farm "^1.7.0"
+
+terser@^4.1.2:
+  version "4.8.0"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-4.8.0.tgz#63056343d7c70bb29f3af665865a46fe03a0df17"
+  integrity sha512-EAPipTNeWsb/3wLPeup1tVPaXfIaU68xMnVdPafIL1TV05OhASArYyIfFvnvJCNrR2NIOvDVNNTFRa+Re2MWyw==
+  dependencies:
+    commander "^2.20.0"
+    source-map "~0.6.1"
+    source-map-support "~0.5.12"
+
+test-exclude@^5.2.3:
+  version "5.2.3"
+  resolved "https://registry.yarnpkg.com/test-exclude/-/test-exclude-5.2.3.tgz#c3d3e1e311eb7ee405e092dac10aefd09091eac0"
+  integrity sha512-M+oxtseCFO3EDtAaGH7iiej3CBkzXqFMbzqYAACdzKui4eZA+pq3tZEwChvOdNfa7xxy8BfbmgJSIr43cC/+2g==
+  dependencies:
+    glob "^7.1.3"
+    minimatch "^3.0.4"
+    read-pkg-up "^4.0.0"
+    require-main-filename "^2.0.0"
+
+text-table@0.2.0, text-table@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
+  integrity sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=
+
+throat@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/throat/-/throat-4.1.0.tgz#89037cbc92c56ab18926e6ba4cbb200e15672a6a"
+  integrity sha1-iQN8vJLFarGJJua6TLsgDhVnKmo=
+
+through2@^2.0.0:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/through2/-/through2-2.0.5.tgz#01c1e39eb31d07cb7d03a96a70823260b23132cd"
+  integrity sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==
+  dependencies:
+    readable-stream "~2.3.6"
+    xtend "~4.0.1"
+
+through@^2.3.6:
+  version "2.3.8"
+  resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
+  integrity sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=
+
+thunky@^1.0.2:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/thunky/-/thunky-1.1.0.tgz#5abaf714a9405db0504732bbccd2cedd9ef9537d"
+  integrity sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==
+
+timeago-react@^3.0.0:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/timeago-react/-/timeago-react-3.0.4.tgz#291bc1a0bac4db922b7852e6f858da24dc41fd3a"
+  integrity sha512-cv6Bnm01VKyHoQCBKzk24+L9ycj3jLq3uEFpYILKGJT7UUXWEzC0TBCxforsvL4NSjcwqqHNKdEeqEFMNNoN2A==
+  dependencies:
+    timeago.js "^4.0.0"
+
+timeago.js@^4.0.0:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/timeago.js/-/timeago.js-4.0.2.tgz#724e8c8833e3490676c7bb0a75f5daf20e558028"
+  integrity sha512-a7wPxPdVlQL7lqvitHGGRsofhdwtkoSXPGATFuSOA2i1ZNQEPLrGnj68vOp2sOJTCFAQVXPeNMX/GctBaO9L2w==
+
+timers-browserify@^2.0.4:
+  version "2.0.12"
+  resolved "https://registry.yarnpkg.com/timers-browserify/-/timers-browserify-2.0.12.tgz#44a45c11fbf407f34f97bccd1577c652361b00ee"
+  integrity sha512-9phl76Cqm6FhSX9Xe1ZUAMLtm1BLkKj2Qd5ApyWkXzsMRaA7dgr81kf4wJmQf/hAvg8EEyJxDo3du/0KlhPiKQ==
+  dependencies:
+    setimmediate "^1.0.4"
+
+timsort@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
+  integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
+
+tiny-invariant@^1.0.2:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.2.0.tgz#a1141f86b672a9148c72e978a19a73b9b94a15a9"
+  integrity sha512-1Uhn/aqw5C6RI4KejVeTg6mIS7IqxnLJ8Mv2tV5rTc0qWobay7pDUz6Wi392Cnc8ak1H0F2cjoRzb2/AW4+Fvg==
+
+tiny-warning@^1.0.0, tiny-warning@^1.0.2, tiny-warning@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
+  integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
+
+tinycolor2@^1.4.1:
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.2.tgz#3f6a4d1071ad07676d7fa472e1fac40a719d8803"
+  integrity sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA==
+
+tmp@^0.0.33:
+  version "0.0.33"
+  resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
+  integrity sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==
+  dependencies:
+    os-tmpdir "~1.0.2"
+
+tmpl@1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/tmpl/-/tmpl-1.0.5.tgz#8683e0b902bb9c20c4f726e3c0b69f36518c07cc"
+  integrity sha512-3f0uOEAQwIqGuWW2MVzYg8fV/QNnc/IpuJNG837rLuczAaLVHslWHZQj4IGiEl5Hs3kkbhwL9Ab7Hrsmuj+Smw==
+
+to-arraybuffer@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz#7d229b1fcc637e466ca081180836a7aabff83f43"
+  integrity sha1-fSKbH8xjfkZsoIEYCDanqr/4P0M=
+
+to-fast-properties@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
+  integrity sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=
+
+to-object-path@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/to-object-path/-/to-object-path-0.3.0.tgz#297588b7b0e7e0ac08e04e672f85c1f4999e17af"
+  integrity sha1-KXWIt7Dn4KwI4E5nL4XB9JmeF68=
+  dependencies:
+    kind-of "^3.0.2"
+
+to-regex-range@^2.1.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-2.1.1.tgz#7c80c17b9dfebe599e27367e0d4dd5590141db38"
+  integrity sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=
+  dependencies:
+    is-number "^3.0.0"
+    repeat-string "^1.6.1"
+
+to-regex-range@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"
+  integrity sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==
+  dependencies:
+    is-number "^7.0.0"
+
+to-regex@^3.0.1, to-regex@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/to-regex/-/to-regex-3.0.2.tgz#13cfdd9b336552f30b51f33a8ae1b42a7a7599ce"
+  integrity sha512-FWtleNAtZ/Ki2qtqej2CXTOayOH9bHDQF+Q48VpWyDXjbYxA4Yz8iDB31zXOBUlOHHKidDbqGVrTUvQMPmBGBw==
+  dependencies:
+    define-property "^2.0.2"
+    extend-shallow "^3.0.2"
+    regex-not "^1.0.2"
+    safe-regex "^1.1.0"
+
+toidentifier@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.1.tgz#3be34321a88a820ed1bd80dfaa33e479fbb8dd35"
+  integrity sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==
+
+tough-cookie@^2.3.3, tough-cookie@^2.3.4, tough-cookie@^2.5.0, tough-cookie@~2.5.0:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.5.0.tgz#cd9fb2a0aa1d5a12b473bd9fb96fa3dcff65ade2"
+  integrity sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==
+  dependencies:
+    psl "^1.1.28"
+    punycode "^2.1.1"
+
+tr46@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/tr46/-/tr46-1.0.1.tgz#a8b13fd6bfd2489519674ccde55ba3693b706d09"
+  integrity sha1-qLE/1r/SSJUZZ0zN5VujaTtwbQk=
+  dependencies:
+    punycode "^2.1.0"
+
+tr46@~0.0.3:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/tr46/-/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a"
+  integrity sha1-gYT9NH2snNwYWZLzpmIuFLnZq2o=
+
+ts-pnp@1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.1.4.tgz#ae27126960ebaefb874c6d7fa4729729ab200d90"
+  integrity sha512-1J/vefLC+BWSo+qe8OnJQfWTYRS6ingxjwqmHMqaMxXMj7kFtKLgAaYW3JeX3mktjgUL+etlU8/B4VUAUI9QGw==
+
+ts-pnp@^1.1.2:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.2.0.tgz#a500ad084b0798f1c3071af391e65912c86bca92"
+  integrity sha512-csd+vJOb/gkzvcCHgTGSChYpy5f1/XKNsmvBGO4JXS+z1v2HobugDz4s1IeFXM3wZB44uczs+eazB5Q/ccdhQw==
+
+tslib@^1.8.1, tslib@^1.9.0:
+  version "1.14.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
+  integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
+
+tsutils@^3.17.1:
+  version "3.21.0"
+  resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.21.0.tgz#b48717d394cea6c1e096983eed58e9d61715b623"
+  integrity sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==
+  dependencies:
+    tslib "^1.8.1"
+
+tty-browserify@0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/tty-browserify/-/tty-browserify-0.0.0.tgz#a157ba402da24e9bf957f9aa69d524eed42901a6"
+  integrity sha1-oVe6QC2iTpv5V/mqadUk7tQpAaY=
+
+tunnel-agent@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/tunnel-agent/-/tunnel-agent-0.6.0.tgz#27a5dea06b36b04a0a9966774b290868f0fc40fd"
+  integrity sha1-J6XeoGs2sEoKmWZ3SykIaPD8QP0=
+  dependencies:
+    safe-buffer "^5.0.1"
+
+tweetnacl@^0.14.3, tweetnacl@~0.14.0:
+  version "0.14.5"
+  resolved "https://registry.yarnpkg.com/tweetnacl/-/tweetnacl-0.14.5.tgz#5ae68177f192d4456269d108afa93ff8743f4f64"
+  integrity sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=
+
+type-check@~0.3.2:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.3.2.tgz#5884cab512cf1d355e3fb784f30804b2b520db72"
+  integrity sha1-WITKtRLPHTVeP7eE8wgEsrUg23I=
+  dependencies:
+    prelude-ls "~1.1.2"
+
+type-fest@^0.21.3:
+  version "0.21.3"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.21.3.tgz#d260a24b0198436e133fa26a524a6d65fa3b2e37"
+  integrity sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==
+
+type-fest@^0.8.1:
+  version "0.8.1"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.8.1.tgz#09e249ebde851d3b1e48d27c105444667f17b83d"
+  integrity sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==
+
+type-is@~1.6.18:
+  version "1.6.18"
+  resolved "https://registry.yarnpkg.com/type-is/-/type-is-1.6.18.tgz#4e552cd05df09467dcbc4ef739de89f2cf37c131"
+  integrity sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==
+  dependencies:
+    media-typer "0.3.0"
+    mime-types "~2.1.24"
+
+type@^1.0.1:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/type/-/type-1.2.0.tgz#848dd7698dafa3e54a6c479e759c4bc3f18847a0"
+  integrity sha512-+5nt5AAniqsCnu2cEQQdpzCAh33kVx8n0VoFidKpB1dVVLAN/F+bgVOqOJqOnEnrhp222clB5p3vUlD+1QAnfg==
+
+type@^2.5.0:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/type/-/type-2.6.0.tgz#3ca6099af5981d36ca86b78442973694278a219f"
+  integrity sha512-eiDBDOmkih5pMbo9OqsqPRGMljLodLcwd5XD5JbtNB0o89xZAwynY9EdCDsJU7LtcVCClu9DvM7/0Ep1hYX3EQ==
+
+typedarray@^0.0.6:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
+  integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
+
+typescript@^3.9.2:
+  version "3.9.10"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.9.10.tgz#70f3910ac7a51ed6bef79da7800690b19bf778b8"
+  integrity sha512-w6fIxVE/H1PkLKcCPsFqKE7Kv7QUwhU8qQY2MueZXWx5cPZdwFupLgKK3vntcK98BtNHZtAF4LA/yl2a7k8R6Q==
+
+uglify-js@3.4.x:
+  version "3.4.10"
+  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.4.10.tgz#9ad9563d8eb3acdfb8d38597d2af1d815f6a755f"
+  integrity sha512-Y2VsbPVs0FIshJztycsO2SfPk7/KAF/T72qzv9u5EpQ4kB2hQoHlhNQTsNyy6ul7lQtqJN/AoWeS23OzEiEFxw==
+  dependencies:
+    commander "~2.19.0"
+    source-map "~0.6.1"
+
+unbox-primitive@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.0.1.tgz#085e215625ec3162574dc8859abee78a59b14471"
+  integrity sha512-tZU/3NqK3dA5gpE1KtyiJUrEB0lxnGkMFHptJ7q6ewdZ8s12QrODwNbhIJStmJkd1QDXa1NRA8aF2A1zk/Ypyw==
+  dependencies:
+    function-bind "^1.1.1"
+    has-bigints "^1.0.1"
+    has-symbols "^1.0.2"
+    which-boxed-primitive "^1.0.2"
+
+unicode-canonical-property-names-ecmascript@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz#301acdc525631670d39f6146e0e77ff6bbdebddc"
+  integrity sha512-yY5PpDlfVIU5+y/BSCxAJRBIS1Zc2dDG3Ujq+sR0U+JjUevW2JhocOF+soROYDSaAezOzOKuyyixhD6mBknSmQ==
+
+unicode-match-property-ecmascript@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/unicode-match-property-ecmascript/-/unicode-match-property-ecmascript-2.0.0.tgz#54fd16e0ecb167cf04cf1f756bdcc92eba7976c3"
+  integrity sha512-5kaZCrbp5mmbz5ulBkDkbY0SsPOjKqVS35VpL9ulMPfSl0J0Xsm+9Evphv9CoIZFwre7aJoa94AY6seMKGVN5Q==
+  dependencies:
+    unicode-canonical-property-names-ecmascript "^2.0.0"
+    unicode-property-aliases-ecmascript "^2.0.0"
+
+unicode-match-property-value-ecmascript@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-2.0.0.tgz#1a01aa57247c14c568b89775a54938788189a714"
+  integrity sha512-7Yhkc0Ye+t4PNYzOGKedDhXbYIBe1XEQYQxOPyhcXNMJ0WCABqqj6ckydd6pWRZTHV4GuCPKdBAUiMc60tsKVw==
+
+unicode-property-aliases-ecmascript@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-2.0.0.tgz#0a36cb9a585c4f6abd51ad1deddb285c165297c8"
+  integrity sha512-5Zfuy9q/DFr4tfO7ZPeVXb1aPoeQSdeFMLpYuFebehDAhbuevLs5yxSZmIFN1tP5F9Wl4IpJrYojg85/zgyZHQ==
+
+union-value@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/union-value/-/union-value-1.0.1.tgz#0b6fe7b835aecda61c6ea4d4f02c14221e109847"
+  integrity sha512-tJfXmxMeWYnczCVs7XAEvIV7ieppALdyepWMkHkwciRpZraG/xwT+s2JN8+pr1+8jCRf80FFzvr+MpQeeoF4Xg==
+  dependencies:
+    arr-union "^3.1.0"
+    get-value "^2.0.6"
+    is-extendable "^0.1.1"
+    set-value "^2.0.1"
+
+uniq@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/uniq/-/uniq-1.0.1.tgz#b31c5ae8254844a3a8281541ce2b04b865a734ff"
+  integrity sha1-sxxa6CVIRKOoKBVBzisEuGWnNP8=
+
+uniqs@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/uniqs/-/uniqs-2.0.0.tgz#ffede4b36b25290696e6e165d4a59edb998e6b02"
+  integrity sha1-/+3ks2slKQaW5uFl1KWe25mOawI=
+
+unique-filename@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/unique-filename/-/unique-filename-1.1.1.tgz#1d69769369ada0583103a1e6ae87681b56573230"
+  integrity sha512-Vmp0jIp2ln35UTXuryvjzkjGdRyf9b2lTXuSYUiPmzRcl3FDtYqAwOnTJkAngD9SWhnoJzDbTKwaOrZ+STtxNQ==
+  dependencies:
+    unique-slug "^2.0.0"
+
+unique-slug@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/unique-slug/-/unique-slug-2.0.2.tgz#baabce91083fc64e945b0f3ad613e264f7cd4e6c"
+  integrity sha512-zoWr9ObaxALD3DOPfjPSqxt4fnZiWblxHIgeWqW8x7UqDzEtHEQLzji2cuJYQFCU6KmoJikOYAZlrTHHebjx2w==
+  dependencies:
+    imurmurhash "^0.1.4"
+
+universalify@^0.1.0:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.2.tgz#b646f69be3942dabcecc9d6639c80dc105efaa66"
+  integrity sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==
+
+unpipe@1.0.0, unpipe@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
+  integrity sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=
+
+unquote@~1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/unquote/-/unquote-1.1.1.tgz#8fded7324ec6e88a0ff8b905e7c098cdc086d544"
+  integrity sha1-j97XMk7G6IoP+LkF58CYzcCG1UQ=
+
+unset-value@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/unset-value/-/unset-value-1.0.0.tgz#8376873f7d2335179ffb1e6fc3a8ed0dfc8ab559"
+  integrity sha1-g3aHP30jNRef+x5vw6jtDfyKtVk=
+  dependencies:
+    has-value "^0.3.1"
+    isobject "^3.0.0"
+
+upath@^1.1.1:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/upath/-/upath-1.2.0.tgz#8f66dbcd55a883acdae4408af8b035a5044c1894"
+  integrity sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg==
+
+upper-case@^1.1.1:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/upper-case/-/upper-case-1.1.3.tgz#f6b4501c2ec4cdd26ba78be7222961de77621598"
+  integrity sha1-9rRQHC7EzdJrp4vnIilh3ndiFZg=
+
+uri-js@^4.2.2:
+  version "4.4.1"
+  resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.4.1.tgz#9b1a52595225859e55f669d928f88c6c57f2a77e"
+  integrity sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==
+  dependencies:
+    punycode "^2.1.0"
+
+urix@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/urix/-/urix-0.1.0.tgz#da937f7a62e21fec1fd18d49b35c2935067a6c72"
+  integrity sha1-2pN/emLiH+wf0Y1Js1wpNQZ6bHI=
+
+url-loader@2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/url-loader/-/url-loader-2.1.0.tgz#bcc1ecabbd197e913eca23f5e0378e24b4412961"
+  integrity sha512-kVrp/8VfEm5fUt+fl2E0FQyrpmOYgMEkBsv8+UDP1wFhszECq5JyGF33I7cajlVY90zRZ6MyfgKXngLvHYZX8A==
+  dependencies:
+    loader-utils "^1.2.3"
+    mime "^2.4.4"
+    schema-utils "^2.0.0"
+
+url-parse@^1.4.3, url-parse@^1.5.10:
+  version "1.5.10"
+  resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.5.10.tgz#9d3c2f736c1d75dd3bd2be507dcc111f1e2ea9c1"
+  integrity sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==
+  dependencies:
+    querystringify "^2.1.1"
+    requires-port "^1.0.0"
+
+url@^0.11.0:
+  version "0.11.0"
+  resolved "https://registry.yarnpkg.com/url/-/url-0.11.0.tgz#3838e97cfc60521eb73c525a8e55bfdd9e2e28f1"
+  integrity sha1-ODjpfPxgUh63PFJajlW/3Z4uKPE=
+  dependencies:
+    punycode "1.3.2"
+    querystring "0.2.0"
+
+use@^3.1.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"
+  integrity sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==
+
+util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
+  integrity sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=
+
+util.promisify@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/util.promisify/-/util.promisify-1.0.0.tgz#440f7165a459c9a16dc145eb8e72f35687097030"
+  integrity sha512-i+6qA2MPhvoKLuxnJNpXAGhg7HphQOSUq2LKMZD0m15EiskXUkMvKdF4Uui0WYeCUGea+o2cw/ZuwehtfsrNkA==
+  dependencies:
+    define-properties "^1.1.2"
+    object.getownpropertydescriptors "^2.0.3"
+
+util.promisify@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/util.promisify/-/util.promisify-1.1.1.tgz#77832f57ced2c9478174149cae9b96e9918cd54b"
+  integrity sha512-/s3UsZUrIfa6xDhr7zZhnE9SLQ5RIXyYfiVnMMyMDzOc8WhWN4Nbh36H842OyurKbCDAesZOJaVyvmSl6fhGQw==
+  dependencies:
+    call-bind "^1.0.0"
+    define-properties "^1.1.3"
+    for-each "^0.3.3"
+    has-symbols "^1.0.1"
+    object.getownpropertydescriptors "^2.1.1"
+
+util.promisify@~1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/util.promisify/-/util.promisify-1.0.1.tgz#6baf7774b80eeb0f7520d8b81d07982a59abbaee"
+  integrity sha512-g9JpC/3He3bm38zsLupWryXHoEcS22YHthuPQSJdMy6KNrzIRzWqcsHzD/WUnqe45whVou4VIsPew37DoXWNrA==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.2"
+    has-symbols "^1.0.1"
+    object.getownpropertydescriptors "^2.1.0"
+
+util@0.10.3:
+  version "0.10.3"
+  resolved "https://registry.yarnpkg.com/util/-/util-0.10.3.tgz#7afb1afe50805246489e3db7fe0ed379336ac0f9"
+  integrity sha1-evsa/lCAUkZInj23/g7TeTNqwPk=
+  dependencies:
+    inherits "2.0.1"
+
+util@^0.11.0:
+  version "0.11.1"
+  resolved "https://registry.yarnpkg.com/util/-/util-0.11.1.tgz#3236733720ec64bb27f6e26f421aaa2e1b588d61"
+  integrity sha512-HShAsny+zS2TZfaXxD9tYj4HQGlBezXZMZuM/S5PKLLoZkShZiGk9o5CzukI1LVHZvjdvZ2Sj1aW/Ndn2NB/HQ==
+  dependencies:
+    inherits "2.0.3"
+
+utila@~0.4:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/utila/-/utila-0.4.0.tgz#8a16a05d445657a3aea5eecc5b12a4fa5379772c"
+  integrity sha1-ihagXURWV6Oupe7MWxKk+lN5dyw=
+
+utils-merge@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"
+  integrity sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=
+
+uuid@^3.3.2:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee"
+  integrity sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==
+
+uuid@^8.3.2:
+  version "8.3.2"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"
+  integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==
+
+v8-compile-cache@^2.0.3:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz#2de19618c66dc247dcfb6f99338035d8245a2cee"
+  integrity sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==
+
+validate-npm-package-license@^3.0.1:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz#fc91f6b9c7ba15c857f4cb2c5defeec39d4f410a"
+  integrity sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==
+  dependencies:
+    spdx-correct "^3.0.0"
+    spdx-expression-parse "^3.0.0"
+
+value-equal@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/value-equal/-/value-equal-1.0.1.tgz#1e0b794c734c5c0cade179c437d356d931a34d6c"
+  integrity sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==
+
+vary@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
+  integrity sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=
+
+vendors@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/vendors/-/vendors-1.0.4.tgz#e2b800a53e7a29b93506c3cf41100d16c4c4ad8e"
+  integrity sha512-/juG65kTL4Cy2su4P8HjtkTxk6VmJDiOPBufWniqQ6wknac6jNiXS9vU+hO3wgusiyqWlzTbVHi0dyJqRONg3w==
+
+verror@1.10.0:
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/verror/-/verror-1.10.0.tgz#3a105ca17053af55d6e270c1f8288682e18da400"
+  integrity sha1-OhBcoXBTr1XW4nDB+CiGguGNpAA=
+  dependencies:
+    assert-plus "^1.0.0"
+    core-util-is "1.0.2"
+    extsprintf "^1.2.0"
+
+vm-browserify@^1.0.1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
+  integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==
+
+void-elements@3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-3.1.0.tgz#614f7fbf8d801f0bb5f0661f5b2f5785750e4f09"
+  integrity sha1-YU9/v42AHwu18GYfWy9XhXUOTwk=
+
+w3c-hr-time@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz#0a89cdf5cc15822df9c360543676963e0cc308cd"
+  integrity sha512-z8P5DvDNjKDoFIHK7q8r8lackT6l+jo/Ye3HOle7l9nICP9lf1Ci25fy9vHd0JOWewkIFzXIEig3TdKT7JQ5fQ==
+  dependencies:
+    browser-process-hrtime "^1.0.0"
+
+w3c-xmlserializer@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/w3c-xmlserializer/-/w3c-xmlserializer-1.1.2.tgz#30485ca7d70a6fd052420a3d12fd90e6339ce794"
+  integrity sha512-p10l/ayESzrBMYWRID6xbuCKh2Fp77+sA0doRuGn4tTIMrrZVeqfpKjXHY+oDh3K4nLdPgNwMTVP6Vp4pvqbNg==
+  dependencies:
+    domexception "^1.0.1"
+    webidl-conversions "^4.0.2"
+    xml-name-validator "^3.0.0"
+
+walker@^1.0.7, walker@~1.0.5:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/walker/-/walker-1.0.8.tgz#bd498db477afe573dc04185f011d3ab8a8d7653f"
+  integrity sha512-ts/8E8l5b7kY0vlWLewOkDXMmPdLcVV4GmOQLyxuSswIJsweeFZtAsMF7k1Nszz+TYBQrlYRmzOnr398y1JemQ==
+  dependencies:
+    makeerror "1.0.12"
+
+watchpack-chokidar2@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/watchpack-chokidar2/-/watchpack-chokidar2-2.0.1.tgz#38500072ee6ece66f3769936950ea1771be1c957"
+  integrity sha512-nCFfBIPKr5Sh61s4LPpy1Wtfi0HE8isJ3d2Yb5/Ppw2P2B/3eVSEBjKfN0fmHJSK14+31KwMKmcrzs2GM4P0Ww==
+  dependencies:
+    chokidar "^2.1.8"
+
+watchpack@^1.6.0:
+  version "1.7.5"
+  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.7.5.tgz#1267e6c55e0b9b5be44c2023aed5437a2c26c453"
+  integrity sha512-9P3MWk6SrKjHsGkLT2KHXdQ/9SNkyoJbabxnKOoJepsvJjJG8uYTR3yTPxPQvNDI3w4Nz1xnE0TLHK4RIVe/MQ==
+  dependencies:
+    graceful-fs "^4.1.2"
+    neo-async "^2.5.0"
+  optionalDependencies:
+    chokidar "^3.4.1"
+    watchpack-chokidar2 "^2.0.1"
+
+wbuf@^1.1.0, wbuf@^1.7.3:
+  version "1.7.3"
+  resolved "https://registry.yarnpkg.com/wbuf/-/wbuf-1.7.3.tgz#c1d8d149316d3ea852848895cb6a0bfe887b87df"
+  integrity sha512-O84QOnr0icsbFGLS0O3bI5FswxzRr8/gHwWkDlQFskhSPryQXvrTMxjxGP4+iWYoauLoBvfDpkrOauZ+0iZpDA==
+  dependencies:
+    minimalistic-assert "^1.0.0"
+
+webidl-conversions@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz#24534275e2a7bc6be7bc86611cc16ae0a5654871"
+  integrity sha1-JFNCdeKnvGvnvIZhHMFq4KVlSHE=
+
+webidl-conversions@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.2.tgz#a855980b1f0b6b359ba1d5d9fb39ae941faa63ad"
+  integrity sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==
+
+webpack-dev-middleware@^3.7.2:
+  version "3.7.3"
+  resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-3.7.3.tgz#0639372b143262e2b84ab95d3b91a7597061c2c5"
+  integrity sha512-djelc/zGiz9nZj/U7PTBi2ViorGJXEWo/3ltkPbDyxCXhhEXkW0ce99falaok4TPj+AsxLiXJR0EBOb0zh9fKQ==
+  dependencies:
+    memory-fs "^0.4.1"
+    mime "^2.4.4"
+    mkdirp "^0.5.1"
+    range-parser "^1.2.1"
+    webpack-log "^2.0.0"
+
+webpack-dev-server@3.11.3:
+  version "3.11.3"
+  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-3.11.3.tgz#8c86b9d2812bf135d3c9bce6f07b718e30f7c3d3"
+  integrity sha512-3x31rjbEQWKMNzacUZRE6wXvUFuGpH7vr0lIEbYpMAG9BOxi0928QU1BBswOAP3kg3H1O4hiS+sq4YyAn6ANnA==
+  dependencies:
+    ansi-html-community "0.0.8"
+    bonjour "^3.5.0"
+    chokidar "^2.1.8"
+    compression "^1.7.4"
+    connect-history-api-fallback "^1.6.0"
+    debug "^4.1.1"
+    del "^4.1.1"
+    express "^4.17.1"
+    html-entities "^1.3.1"
+    http-proxy-middleware "0.19.1"
+    import-local "^2.0.0"
+    internal-ip "^4.3.0"
+    ip "^1.1.5"
+    is-absolute-url "^3.0.3"
+    killable "^1.0.1"
+    loglevel "^1.6.8"
+    opn "^5.5.0"
+    p-retry "^3.0.1"
+    portfinder "^1.0.26"
+    schema-utils "^1.0.0"
+    selfsigned "^1.10.8"
+    semver "^6.3.0"
+    serve-index "^1.9.1"
+    sockjs "^0.3.21"
+    sockjs-client "^1.5.0"
+    spdy "^4.0.2"
+    strip-ansi "^3.0.1"
+    supports-color "^6.1.0"
+    url "^0.11.0"
+    webpack-dev-middleware "^3.7.2"
+    webpack-log "^2.0.0"
+    ws "^6.2.1"
+    yargs "^13.3.2"
+
+webpack-log@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/webpack-log/-/webpack-log-2.0.0.tgz#5b7928e0637593f119d32f6227c1e0ac31e1b47f"
+  integrity sha512-cX8G2vR/85UYG59FgkoMamwHUIkSSlV3bBMRsbxVXVUk2j6NleCKjQ/WE9eYg9WY4w25O9w8wKP4rzNZFmUcUg==
+  dependencies:
+    ansi-colors "^3.0.0"
+    uuid "^3.3.2"
+
+webpack-manifest-plugin@2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/webpack-manifest-plugin/-/webpack-manifest-plugin-2.1.1.tgz#6b3e280327815b83152c79f42d0ca13b665773c4"
+  integrity sha512-2zqJ6mvc3yoiqfDjghAIpljhLSDh/G7vqGrzYcYqqRCd/ZZZCAuc/YPE5xG0LGpLgDJRhUNV1H+znyyhIxahzA==
+  dependencies:
+    fs-extra "^7.0.0"
+    lodash ">=3.5 <5"
+    object.entries "^1.1.0"
+    tapable "^1.0.0"
+
+webpack-sources@^1.1.0, webpack-sources@^1.4.0, webpack-sources@^1.4.1:
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.4.3.tgz#eedd8ec0b928fbf1cbfe994e22d2d890f330a933"
+  integrity sha512-lgTS3Xhv1lCOKo7SA5TjKXMjpSM4sBjNV5+q2bqesbSPs5FjGmU6jjtBSkX9b4qW87vDIsCIlUPOEhbZrMdjeQ==
+  dependencies:
+    source-list-map "^2.0.0"
+    source-map "~0.6.1"
+
+webpack@4.41.0:
+  version "4.41.0"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.41.0.tgz#db6a254bde671769f7c14e90a1a55e73602fc70b"
+  integrity sha512-yNV98U4r7wX1VJAj5kyMsu36T8RPPQntcb5fJLOsMz/pt/WrKC0Vp1bAlqPLkA1LegSwQwf6P+kAbyhRKVQ72g==
+  dependencies:
+    "@webassemblyjs/ast" "1.8.5"
+    "@webassemblyjs/helper-module-context" "1.8.5"
+    "@webassemblyjs/wasm-edit" "1.8.5"
+    "@webassemblyjs/wasm-parser" "1.8.5"
+    acorn "^6.2.1"
+    ajv "^6.10.2"
+    ajv-keywords "^3.4.1"
+    chrome-trace-event "^1.0.2"
+    enhanced-resolve "^4.1.0"
+    eslint-scope "^4.0.3"
+    json-parse-better-errors "^1.0.2"
+    loader-runner "^2.4.0"
+    loader-utils "^1.2.3"
+    memory-fs "^0.4.1"
+    micromatch "^3.1.10"
+    mkdirp "^0.5.1"
+    neo-async "^2.6.1"
+    node-libs-browser "^2.2.1"
+    schema-utils "^1.0.0"
+    tapable "^1.1.3"
+    terser-webpack-plugin "^1.4.1"
+    watchpack "^1.6.0"
+    webpack-sources "^1.4.1"
+
+websocket-driver@>=0.5.1, websocket-driver@^0.7.4:
+  version "0.7.4"
+  resolved "https://registry.yarnpkg.com/websocket-driver/-/websocket-driver-0.7.4.tgz#89ad5295bbf64b480abcba31e4953aca706f5760"
+  integrity sha512-b17KeDIQVjvb0ssuSDF2cYXSg2iztliJ4B9WdsuB6J952qCPKmnVq4DyW5motImXHDC1cBT/1UezrJVsKw5zjg==
+  dependencies:
+    http-parser-js ">=0.5.1"
+    safe-buffer ">=5.1.0"
+    websocket-extensions ">=0.1.1"
+
+websocket-extensions@>=0.1.1:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/websocket-extensions/-/websocket-extensions-0.1.4.tgz#7f8473bc839dfd87608adb95d7eb075211578a42"
+  integrity sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==
+
+whatwg-encoding@^1.0.1, whatwg-encoding@^1.0.3, whatwg-encoding@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/whatwg-encoding/-/whatwg-encoding-1.0.5.tgz#5abacf777c32166a51d085d6b4f3e7d27113ddb0"
+  integrity sha512-b5lim54JOPN9HtzvK9HFXvBma/rnfFeqsic0hSpjtDbVxR3dJKLc+KB4V6GgiGOvl7CY/KNh8rxSo9DKQrnUEw==
+  dependencies:
+    iconv-lite "0.4.24"
+
+whatwg-fetch@^3.0.0:
+  version "3.6.2"
+  resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-3.6.2.tgz#dced24f37f2624ed0281725d51d0e2e3fe677f8c"
+  integrity sha512-bJlen0FcuU/0EMLrdbJ7zOnW6ITZLrZMIarMUVmdKtsGvZna8vxKYaexICWPfZ8qwf9fzNq+UEIZrnSaApt6RA==
+
+whatwg-mimetype@^2.1.0, whatwg-mimetype@^2.2.0, whatwg-mimetype@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/whatwg-mimetype/-/whatwg-mimetype-2.3.0.tgz#3d4b1e0312d2079879f826aff18dbeeca5960fbf"
+  integrity sha512-M4yMwr6mAnQz76TbJm914+gPpB/nCwvZbJU28cUD6dR004SAxDLOOSUaB1JDRqLtaOV/vi0IC5lEAGFgrjGv/g==
+
+whatwg-url@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-5.0.0.tgz#966454e8765462e37644d3626f6742ce8b70965d"
+  integrity sha1-lmRU6HZUYuN2RNNib2dCzotwll0=
+  dependencies:
+    tr46 "~0.0.3"
+    webidl-conversions "^3.0.0"
+
+whatwg-url@^6.4.1:
+  version "6.5.0"
+  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-6.5.0.tgz#f2df02bff176fd65070df74ad5ccbb5a199965a8"
+  integrity sha512-rhRZRqx/TLJQWUpQ6bmrt2UV4f0HCQ463yQuONJqC6fO2VoEb1pTYddbe59SkYq87aoM5A3bdhMZiUiVws+fzQ==
+  dependencies:
+    lodash.sortby "^4.7.0"
+    tr46 "^1.0.1"
+    webidl-conversions "^4.0.2"
+
+whatwg-url@^7.0.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-7.1.0.tgz#c2c492f1eca612988efd3d2266be1b9fc6170d06"
+  integrity sha512-WUu7Rg1DroM7oQvGWfOiAK21n74Gg+T4elXEQYkOhtyLeWiJFoOGLXPKI/9gzIie9CtwVLm8wtw6YJdKyxSjeg==
+  dependencies:
+    lodash.sortby "^4.7.0"
+    tr46 "^1.0.1"
+    webidl-conversions "^4.0.2"
+
+which-boxed-primitive@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz#13757bc89b209b049fe5d86430e21cf40a89a8e6"
+  integrity sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==
+  dependencies:
+    is-bigint "^1.0.1"
+    is-boolean-object "^1.1.0"
+    is-number-object "^1.0.4"
+    is-string "^1.0.5"
+    is-symbol "^1.0.3"
+
+which-module@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"
+  integrity sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=
+
+which-pm-runs@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/which-pm-runs/-/which-pm-runs-1.1.0.tgz#35ccf7b1a0fce87bd8b92a478c9d045785d3bf35"
+  integrity sha512-n1brCuqClxfFfq/Rb0ICg9giSZqCS+pLtccdag6C2HyufBrh3fBOiy9nb6ggRMvWOVH5GrdJskj5iGTZNxd7SA==
+
+which@^1.2.9, which@^1.3.0, which@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"
+  integrity sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==
+  dependencies:
+    isexe "^2.0.0"
+
+word-wrap@~1.2.3:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.3.tgz#610636f6b1f703891bd34771ccb17fb93b47079c"
+  integrity sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==
+
+workbox-background-sync@^4.3.1:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/workbox-background-sync/-/workbox-background-sync-4.3.1.tgz#26821b9bf16e9e37fd1d640289edddc08afd1950"
+  integrity sha512-1uFkvU8JXi7L7fCHVBEEnc3asPpiAL33kO495UMcD5+arew9IbKW2rV5lpzhoWcm/qhGB89YfO4PmB/0hQwPRg==
+  dependencies:
+    workbox-core "^4.3.1"
+
+workbox-broadcast-update@^4.3.1:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/workbox-broadcast-update/-/workbox-broadcast-update-4.3.1.tgz#e2c0280b149e3a504983b757606ad041f332c35b"
+  integrity sha512-MTSfgzIljpKLTBPROo4IpKjESD86pPFlZwlvVG32Kb70hW+aob4Jxpblud8EhNb1/L5m43DUM4q7C+W6eQMMbA==
+  dependencies:
+    workbox-core "^4.3.1"
+
+workbox-build@^4.3.1:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/workbox-build/-/workbox-build-4.3.1.tgz#414f70fb4d6de47f6538608b80ec52412d233e64"
+  integrity sha512-UHdwrN3FrDvicM3AqJS/J07X0KXj67R8Cg0waq1MKEOqzo89ap6zh6LmaLnRAjpB+bDIz+7OlPye9iii9KBnxw==
+  dependencies:
+    "@babel/runtime" "^7.3.4"
+    "@hapi/joi" "^15.0.0"
+    common-tags "^1.8.0"
+    fs-extra "^4.0.2"
+    glob "^7.1.3"
+    lodash.template "^4.4.0"
+    pretty-bytes "^5.1.0"
+    stringify-object "^3.3.0"
+    strip-comments "^1.0.2"
+    workbox-background-sync "^4.3.1"
+    workbox-broadcast-update "^4.3.1"
+    workbox-cacheable-response "^4.3.1"
+    workbox-core "^4.3.1"
+    workbox-expiration "^4.3.1"
+    workbox-google-analytics "^4.3.1"
+    workbox-navigation-preload "^4.3.1"
+    workbox-precaching "^4.3.1"
+    workbox-range-requests "^4.3.1"
+    workbox-routing "^4.3.1"
+    workbox-strategies "^4.3.1"
+    workbox-streams "^4.3.1"
+    workbox-sw "^4.3.1"
+    workbox-window "^4.3.1"
+
+workbox-cacheable-response@^4.3.1:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/workbox-cacheable-response/-/workbox-cacheable-response-4.3.1.tgz#f53e079179c095a3f19e5313b284975c91428c91"
+  integrity sha512-Rp5qlzm6z8IOvnQNkCdO9qrDgDpoPNguovs0H8C+wswLuPgSzSp9p2afb5maUt9R1uTIwOXrVQMmPfPypv+npw==
+  dependencies:
+    workbox-core "^4.3.1"
+
+workbox-core@^4.3.1:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/workbox-core/-/workbox-core-4.3.1.tgz#005d2c6a06a171437afd6ca2904a5727ecd73be6"
+  integrity sha512-I3C9jlLmMKPxAC1t0ExCq+QoAMd0vAAHULEgRZ7kieCdUd919n53WC0AfvokHNwqRhGn+tIIj7vcb5duCjs2Kg==
+
+workbox-expiration@^4.3.1:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/workbox-expiration/-/workbox-expiration-4.3.1.tgz#d790433562029e56837f341d7f553c4a78ebe921"
+  integrity sha512-vsJLhgQsQouv9m0rpbXubT5jw0jMQdjpkum0uT+d9tTwhXcEZks7qLfQ9dGSaufTD2eimxbUOJfWLbNQpIDMPw==
+  dependencies:
+    workbox-core "^4.3.1"
+
+workbox-google-analytics@^4.3.1:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/workbox-google-analytics/-/workbox-google-analytics-4.3.1.tgz#9eda0183b103890b5c256e6f4ea15a1f1548519a"
+  integrity sha512-xzCjAoKuOb55CBSwQrbyWBKqp35yg1vw9ohIlU2wTy06ZrYfJ8rKochb1MSGlnoBfXGWss3UPzxR5QL5guIFdg==
+  dependencies:
+    workbox-background-sync "^4.3.1"
+    workbox-core "^4.3.1"
+    workbox-routing "^4.3.1"
+    workbox-strategies "^4.3.1"
+
+workbox-navigation-preload@^4.3.1:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/workbox-navigation-preload/-/workbox-navigation-preload-4.3.1.tgz#29c8e4db5843803b34cd96dc155f9ebd9afa453d"
+  integrity sha512-K076n3oFHYp16/C+F8CwrRqD25GitA6Rkd6+qAmLmMv1QHPI2jfDwYqrytOfKfYq42bYtW8Pr21ejZX7GvALOw==
+  dependencies:
+    workbox-core "^4.3.1"
+
+workbox-precaching@^4.3.1:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/workbox-precaching/-/workbox-precaching-4.3.1.tgz#9fc45ed122d94bbe1f0ea9584ff5940960771cba"
+  integrity sha512-piSg/2csPoIi/vPpp48t1q5JLYjMkmg5gsXBQkh/QYapCdVwwmKlU9mHdmy52KsDGIjVaqEUMFvEzn2LRaigqQ==
+  dependencies:
+    workbox-core "^4.3.1"
+
+workbox-range-requests@^4.3.1:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/workbox-range-requests/-/workbox-range-requests-4.3.1.tgz#f8a470188922145cbf0c09a9a2d5e35645244e74"
+  integrity sha512-S+HhL9+iTFypJZ/yQSl/x2Bf5pWnbXdd3j57xnb0V60FW1LVn9LRZkPtneODklzYuFZv7qK6riZ5BNyc0R0jZA==
+  dependencies:
+    workbox-core "^4.3.1"
+
+workbox-routing@^4.3.1:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/workbox-routing/-/workbox-routing-4.3.1.tgz#a675841af623e0bb0c67ce4ed8e724ac0bed0cda"
+  integrity sha512-FkbtrODA4Imsi0p7TW9u9MXuQ5P4pVs1sWHK4dJMMChVROsbEltuE79fBoIk/BCztvOJ7yUpErMKa4z3uQLX+g==
+  dependencies:
+    workbox-core "^4.3.1"
+
+workbox-strategies@^4.3.1:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/workbox-strategies/-/workbox-strategies-4.3.1.tgz#d2be03c4ef214c115e1ab29c9c759c9fe3e9e646"
+  integrity sha512-F/+E57BmVG8dX6dCCopBlkDvvhg/zj6VDs0PigYwSN23L8hseSRwljrceU2WzTvk/+BSYICsWmRq5qHS2UYzhw==
+  dependencies:
+    workbox-core "^4.3.1"
+
+workbox-streams@^4.3.1:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/workbox-streams/-/workbox-streams-4.3.1.tgz#0b57da70e982572de09c8742dd0cb40a6b7c2cc3"
+  integrity sha512-4Kisis1f/y0ihf4l3u/+ndMkJkIT4/6UOacU3A4BwZSAC9pQ9vSvJpIi/WFGQRH/uPXvuVjF5c2RfIPQFSS2uA==
+  dependencies:
+    workbox-core "^4.3.1"
+
+workbox-sw@^4.3.1:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/workbox-sw/-/workbox-sw-4.3.1.tgz#df69e395c479ef4d14499372bcd84c0f5e246164"
+  integrity sha512-0jXdusCL2uC5gM3yYFT6QMBzKfBr2XTk0g5TPAV4y8IZDyVNDyj1a8uSXy3/XrvkVTmQvLN4O5k3JawGReXr9w==
+
+workbox-webpack-plugin@4.3.1:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/workbox-webpack-plugin/-/workbox-webpack-plugin-4.3.1.tgz#47ff5ea1cc074b6c40fb5a86108863a24120d4bd"
+  integrity sha512-gJ9jd8Mb8wHLbRz9ZvGN57IAmknOipD3W4XNE/Lk/4lqs5Htw4WOQgakQy/o/4CoXQlMCYldaqUg+EJ35l9MEQ==
+  dependencies:
+    "@babel/runtime" "^7.0.0"
+    json-stable-stringify "^1.0.1"
+    workbox-build "^4.3.1"
+
+workbox-window@^4.3.1:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/workbox-window/-/workbox-window-4.3.1.tgz#ee6051bf10f06afa5483c9b8dfa0531994ede0f3"
+  integrity sha512-C5gWKh6I58w3GeSc0wp2Ne+rqVw8qwcmZnQGpjiek8A2wpbxSJb1FdCoQVO+jDJs35bFgo/WETgl1fqgsxN0Hg==
+  dependencies:
+    workbox-core "^4.3.1"
+
+worker-farm@^1.7.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/worker-farm/-/worker-farm-1.7.0.tgz#26a94c5391bbca926152002f69b84a4bf772e5a8"
+  integrity sha512-rvw3QTZc8lAxyVrqcSGVm5yP/IJ2UcB3U0graE3LCFoZ0Yn2x4EoVSqJKdB/T5M+FLcRPjz4TDacRf3OCfNUzw==
+  dependencies:
+    errno "~0.1.7"
+
+worker-loader@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/worker-loader/-/worker-loader-2.0.0.tgz#45fda3ef76aca815771a89107399ee4119b430ac"
+  integrity sha512-tnvNp4K3KQOpfRnD20m8xltE3eWh89Ye+5oj7wXEEHKac1P4oZ6p9oTj8/8ExqoSBnk9nu5Pr4nKfQ1hn2APJw==
+  dependencies:
+    loader-utils "^1.0.0"
+    schema-utils "^0.4.0"
+
+worker-rpc@^0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/worker-rpc/-/worker-rpc-0.1.1.tgz#cb565bd6d7071a8f16660686051e969ad32f54d5"
+  integrity sha512-P1WjMrUB3qgJNI9jfmpZ/htmBEjFh//6l/5y8SD9hg1Ef5zTTVVoRjTrTEzPrNBQvmhMxkoTsjOXN10GWU7aCg==
+  dependencies:
+    microevent.ts "~0.1.1"
+
+wrap-ansi@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-5.1.0.tgz#1fd1f67235d5b6d0fee781056001bfb694c03b09"
+  integrity sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q==
+  dependencies:
+    ansi-styles "^3.2.0"
+    string-width "^3.0.0"
+    strip-ansi "^5.0.0"
+
+wrappy@1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
+  integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=
+
+write-file-atomic@2.4.1:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-2.4.1.tgz#d0b05463c188ae804396fd5ab2a370062af87529"
+  integrity sha512-TGHFeZEZMnv+gBFRfjAcxL5bPHrsGKtnb4qsFAws7/vlh+QfwAaySIw4AXP9ZskTTh5GWu3FLuJhsWVdiJPGvg==
+  dependencies:
+    graceful-fs "^4.1.11"
+    imurmurhash "^0.1.4"
+    signal-exit "^3.0.2"
+
+write@1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/write/-/write-1.0.3.tgz#0800e14523b923a387e415123c865616aae0f5c3"
+  integrity sha512-/lg70HAjtkUgWPVZhZcm+T4hkL8Zbtp1nFNOn3lRrxnlv50SRBv7cR7RqR+GMsd3hUXy9hWBo4CHTbFTcOYwig==
+  dependencies:
+    mkdirp "^0.5.1"
+
+ws@^5.2.0:
+  version "5.2.3"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-5.2.3.tgz#05541053414921bc29c63bee14b8b0dd50b07b3d"
+  integrity sha512-jZArVERrMsKUatIdnLzqvcfydI85dvd/Fp1u/VOpfdDWQ4c9qWXe+VIeAbQ5FrDwciAkr+lzofXLz3Kuf26AOA==
+  dependencies:
+    async-limiter "~1.0.0"
+
+ws@^6.1.2, ws@^6.2.1:
+  version "6.2.2"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-6.2.2.tgz#dd5cdbd57a9979916097652d78f1cc5faea0c32e"
+  integrity sha512-zmhltoSR8u1cnDsD43TX59mzoMZsLKqUweyYBAIvTngR3shc0W6aOZylZmq/7hqyVxPdi+5Ud2QInblgyE72fw==
+  dependencies:
+    async-limiter "~1.0.0"
+
+xml-name-validator@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/xml-name-validator/-/xml-name-validator-3.0.0.tgz#6ae73e06de4d8c6e47f9fb181f78d648ad457c6a"
+  integrity sha512-A5CUptxDsvxKJEU3yO6DuWBSJz/qizqzJKOMIfUJHETbBw/sFaDxgd6fxm1ewUaM0jZ444Fc5vC5ROYurg/4Pw==
+
+xmlchars@^2.1.1:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/xmlchars/-/xmlchars-2.2.0.tgz#060fe1bcb7f9c76fe2a17db86a9bc3ab894210cb"
+  integrity sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==
+
+xtend@^4.0.0, xtend@~4.0.1:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
+  integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==
+
+y18n@^4.0.0:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/y18n/-/y18n-4.0.3.tgz#b5f259c82cd6e336921efd7bfd8bf560de9eeedf"
+  integrity sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==
+
+yallist@^3.0.2:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.1.1.tgz#dbb7daf9bfd8bac9ab45ebf602b8cbad0d5d08fd"
+  integrity sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==
+
+yallist@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"
+  integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==
+
+yaml@^1.10.0, yaml@^1.7.2:
+  version "1.10.2"
+  resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b"
+  integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==
+
+yargs-parser@^13.1.2:
+  version "13.1.2"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-13.1.2.tgz#130f09702ebaeef2650d54ce6e3e5706f7a4fb38"
+  integrity sha512-3lbsNRf/j+A4QuSZfDRA7HRSfWrzO0YjqTJd5kjAq37Zep1CEgaYmrH9Q3GwPiB9cHyd1Y1UwggGhJGoxipbzg==
+  dependencies:
+    camelcase "^5.0.0"
+    decamelize "^1.2.0"
+
+yargs@^13.3.0, yargs@^13.3.2:
+  version "13.3.2"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-13.3.2.tgz#ad7ffefec1aa59565ac915f82dccb38a9c31a2dd"
+  integrity sha512-AX3Zw5iPruN5ie6xGRIDgqkT+ZhnRlZMLMHAs8tg7nRruy2Nb+i5o9bwghAogtM08q1dpr2LVoS8KSTMYpWXUw==
+  dependencies:
+    cliui "^5.0.0"
+    find-up "^3.0.0"
+    get-caller-file "^2.0.1"
+    require-directory "^2.1.1"
+    require-main-filename "^2.0.0"
+    set-blocking "^2.0.0"
+    string-width "^3.0.0"
+    which-module "^2.0.0"
+    y18n "^4.0.0"
+    yargs-parser "^13.1.2"
+
+yarn@^1.22.4:
+  version "1.22.21"
+  resolved "https://registry.npmmirror.com/yarn/-/yarn-1.22.21.tgz#1959a18351b811cdeedbd484a8f86c3cc3bbaf72"
+  integrity sha512-ynXaJsADJ9JiZ84zU25XkPGOvVMmZ5b7tmTSpKURYwgELdjucAOydqIOrOfTxVYcNXe91xvLZwcRh68SR3liCg==
+
+yocto-queue@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
+  integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==