update

7b147146 · 朱招明 · ceb26770 · 7b147146 · 7b147146 · ceb26770
Commit 7b147146 authored Oct 27, 2023 by 朱招明
138 changed files
--- a/.editorconfig
+++ b/.editorconfig
-[*.{js,jsx,ts,tsx,vue}]
+# http://editorconfig.org
+root = true
+[*]
+charset = utf-8
 indent_style = space
 indent_size = 2
-trim_trailing_whitespace = true
+end_of_line = lf
 insert_final_newline = true
+trim_trailing_whitespace = true
+[*.md]
+insert_final_newline = false
+trim_trailing_whitespace = false
--- a/.env.development
+++ b/.env.development
+# just a flag
+ENV = 'development'
+# base api
+VUE_APP_BASE_API = 'http://www.oa.com/api'
--- a/.env.ghpages
+++ b/.env.ghpages
-VITE_GHPAGES=true
-MODE=production
--- a/.env.production
+++ b/.env.production
+# just a flag
+ENV = 'production'
+# base api
+VUE_APP_BASE_API = '/prod-api'
--- a/.env.staging
+++ b/.env.staging
+NODE_ENV = production
+# just a flag
+ENV = 'staging'
+# base api
+VUE_APP_BASE_API = '/stage-api'
--- a/.eslintignore
+++ b/.eslintignore
-src/auto-imports.d.ts
+build/*.js
-src/components.d.ts
+src/assets
+public
+dist
--- a/.eslintrc-auto-import.json
+++ b/.eslintrc-auto-import.json
-{
-  "globals": {
-    "computed": true,
-    "createApp": true,
-    "customRef": true,
-    "defineAsyncComponent": true,
-    "defineComponent": true,
-    "effectScope": true,
-    "EffectScope": true,
-    "getCurrentInstance": true,
-    "getCurrentScope": true,
-    "h": true,
-    "inject": true,
-    "isReadonly": true,
-    "isRef": true,
-    "markRaw": true,
-    "nextTick": true,
-    "onActivated": true,
-    "onBeforeMount": true,
-    "onBeforeUnmount": true,
-    "onBeforeUpdate": true,
-    "onDeactivated": true,
-    "onErrorCaptured": true,
-    "onMounted": true,
-    "onRenderTracked": true,
-    "onRenderTriggered": true,
-    "onScopeDispose": true,
-    "onServerPrefetch": true,
-    "onUnmounted": true,
-    "onUpdated": true,
-    "provide": true,
-    "reactive": true,
-    "readonly": true,
-    "ref": true,
-    "resolveComponent": true,
-    "shallowReactive": true,
-    "shallowReadonly": true,
-    "shallowRef": true,
-    "toRaw": true,
-    "toRef": true,
-    "toRefs": true,
-    "triggerRef": true,
-    "unref": true,
-    "useAttrs": true,
-    "useCssModule": true,
-    "useCssVars": true,
-    "useRoute": true,
-    "useRouter": true,
-    "useSlots": true,
-    "watch": true,
-    "watchEffect": true
-  }
-}
\ No newline at end of file
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
-/* eslint-env node */
-require('@rushstack/eslint-patch/modern-module-resolution');
-module.exports = {
-  root: true,
-  extends: [
-    'plugin:vue/vue3-recommended',
-    'eslint:recommended',
-    '@vue/eslint-config-typescript/recommended',
-    '@vue/eslint-config-prettier',
-    // unplugin-auto-import :: generated automatically
-    './.eslintrc-auto-import.json',
-  ],
-  env: {
-    'vue/setup-compiler-macros': true,
-  },
-  rules: {
-    // all rules docs https://eslint.org/docs/rules/
-    'prettier/prettier': ['error', { semi: true, singleQuote: true, printWidth: 120 }],
-  },
-};
--- a/.eslintrc.js
+++ b/.eslintrc.js
+module.exports = {
+  root: true,
+  parserOptions: {
+    parser: 'babel-eslint',
+    sourceType: 'module'
+  },
+  env: {
+    browser: true,
+    node: true,
+    es6: true,
+  },
+  extends: ['plugin:vue/recommended', 'eslint:recommended'],
+  // add your custom rules here
+  //it is base on https://github.com/vuejs/eslint-config-vue
+  rules: {
+    "vue/max-attributes-per-line": [2, {
+      "singleline": 10,
+      "multiline": {
+        "max": 1,
+        "allowFirstLine": false
+      }
+    }],
+    "vue/singleline-html-element-content-newline": "off",
+    "vue/multiline-html-element-content-newline":"off",
+    "vue/name-property-casing": ["error", "PascalCase"],
+    "vue/no-v-html": "off",
+    'accessor-pairs': 2,
+    'arrow-spacing': [2, {
+      'before': true,
+      'after': true
+    }],
+    'block-spacing': [2, 'always'],
+    'brace-style': [2, '1tbs', {
+      'allowSingleLine': true
+    }],
+    'camelcase': [0, {
+      'properties': 'always'
+    }],
+    'comma-dangle': [2, 'never'],
+    'comma-spacing': [2, {
+      'before': false,
+      'after': true
+    }],
+    'comma-style': [2, 'last'],
+    'constructor-super': 2,
+    'curly': [2, 'multi-line'],
+    'dot-location': [2, 'property'],
+    'eol-last': 2,
+    'eqeqeq': ["error", "always", {"null": "ignore"}],
+    'generator-star-spacing': [2, {
+      'before': true,
+      'after': true
+    }],
+    'handle-callback-err': [2, '^(err|error)$'],
+    'indent': [2, 2, {
+      'SwitchCase': 1
+    }],
+    'jsx-quotes': [2, 'prefer-single'],
+    'key-spacing': [2, {
+      'beforeColon': false,
+      'afterColon': true
+    }],
+    'keyword-spacing': [2, {
+      'before': true,
+      'after': true
+    }],
+    'new-cap': [2, {
+      'newIsCap': true,
+      'capIsNew': false
+    }],
+    'new-parens': 2,
+    'no-array-constructor': 2,
+    'no-caller': 2,
+    'no-console': 'off',
+    'no-class-assign': 2,
+    'no-cond-assign': 2,
+    'no-const-assign': 2,
+    'no-control-regex': 0,
+    'no-delete-var': 2,
+    'no-dupe-args': 2,
+    'no-dupe-class-members': 2,
+    'no-dupe-keys': 2,
+    'no-duplicate-case': 2,
+    'no-empty-character-class': 2,
+    'no-empty-pattern': 2,
+    'no-eval': 2,
+    'no-ex-assign': 2,
+    'no-extend-native': 2,
+    'no-extra-bind': 2,
+    'no-extra-boolean-cast': 2,
+    'no-extra-parens': [2, 'functions'],
+    'no-fallthrough': 2,
+    'no-floating-decimal': 2,
+    'no-func-assign': 2,
+    'no-implied-eval': 2,
+    'no-inner-declarations': [2, 'functions'],
+    'no-invalid-regexp': 2,
+    'no-irregular-whitespace': 2,
+    'no-iterator': 2,
+    'no-label-var': 2,
+    'no-labels': [2, {
+      'allowLoop': false,
+      'allowSwitch': false
+    }],
+    'no-lone-blocks': 2,
+    'no-mixed-spaces-and-tabs': 2,
+    'no-multi-spaces': 2,
+    'no-multi-str': 2,
+    'no-multiple-empty-lines': [2, {
+      'max': 1
+    }],
+    'no-native-reassign': 2,
+    'no-negated-in-lhs': 2,
+    'no-new-object': 2,
+    'no-new-require': 2,
+    'no-new-symbol': 2,
+    'no-new-wrappers': 2,
+    'no-obj-calls': 2,
+    'no-octal': 2,
+    'no-octal-escape': 2,
+    'no-path-concat': 2,
+    'no-proto': 2,
+    'no-redeclare': 2,
+    'no-regex-spaces': 2,
+    'no-return-assign': [2, 'except-parens'],
+    'no-self-assign': 2,
+    'no-self-compare': 2,
+    'no-sequences': 2,
+    'no-shadow-restricted-names': 2,
+    'no-spaced-func': 2,
+    'no-sparse-arrays': 2,
+    'no-this-before-super': 2,
+    'no-throw-literal': 2,
+    'no-trailing-spaces': 2,
+    'no-undef': 2,
+    'no-undef-init': 2,
+    'no-unexpected-multiline': 2,
+    'no-unmodified-loop-condition': 2,
+    'no-unneeded-ternary': [2, {
+      'defaultAssignment': false
+    }],
+    'no-unreachable': 2,
+    'no-unsafe-finally': 2,
+    'no-unused-vars': [2, {
+      'vars': 'all',
+      'args': 'none'
+    }],
+    'no-useless-call': 2,
+    'no-useless-computed-key': 2,
+    'no-useless-constructor': 2,
+    'no-useless-escape': 0,
+    'no-whitespace-before-property': 2,
+    'no-with': 2,
+    'one-var': [2, {
+      'initialized': 'never'
+    }],
+    'operator-linebreak': [2, 'after', {
+      'overrides': {
+        '?': 'before',
+        ':': 'before'
+      }
+    }],
+    'padded-blocks': [2, 'never'],
+    'quotes': [2, 'single', {
+      'avoidEscape': true,
+      'allowTemplateLiterals': true
+    }],
+    'semi': [2, 'never'],
+    'semi-spacing': [2, {
+      'before': false,
+      'after': true
+    }],
+    'space-before-blocks': [2, 'always'],
+    'space-before-function-paren': [2, 'never'],
+    'space-in-parens': [2, 'never'],
+    'space-infix-ops': 2,
+    'space-unary-ops': [2, {
+      'words': true,
+      'nonwords': false
+    }],
+    'spaced-comment': [2, 'always', {
+      'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']
+    }],
+    'template-curly-spacing': [2, 'never'],
+    'use-isnan': 2,
+    'valid-typeof': 2,
+    'wrap-iife': [2, 'any'],
+    'yield-star-spacing': [2, 'both'],
+    'yoda': [2, 'never'],
+    'prefer-const': 2,
+    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
+    'object-curly-spacing': [2, 'always', {
+      objectsInObjects: false
+    }],
+    'array-bracket-spacing': [2, 'never']
+  }
+}
--- a/.gitignore
+++ b/.gitignore
-# Logs
+.DS_Store
-logs
+node_modules/
-*.log
+dist/
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-pnpm-debug.log*
+package-lock.json
-lerna-debug.log*
+tests/**/coverage/
-node_modules
-.DS_Store
-dist
-dist-ssr
-coverage
-*.local
-/cypress/videos/
-/cypress/screenshots/
 # Editor directories and files
-.vscode/*
-!.vscode/extensions.json
 .idea
+.vscode
 *.suo
 *.ntvs*
 *.njsproj
 *.sln
-*.sw?
--- a/.prettierrc
+++ b/.prettierrc
-{
-  "singleQuote": true,
-  "trailingComma": "all",
-  "endOfLine": "lf",
-  "printWidth": 100,
-  "proseWrap": "never",
-  "arrowParens": "avoid",
-  "htmlWhitespaceSensitivity": "ignore",
-  "overrides": [
-    {
-      "files": ".prettierrc",
-      "options": {
-        "parser": "json"
-      }
-    }
-  ]
-}
\ No newline at end of file
--- a/.travis.yml
+++ b/.travis.yml
+language: node_js
+node_js: 10
+script: npm run test
+notifications:
+  email: false
--- a/LICENSE
+++ b/LICENSE
 MIT License
-Copyright (c) 2021 Sendya
+Copyright (c) 2017-present PanJiaChen
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

--- a/README-zh.md
+++ b/README-zh.md
+# vue-admin-template
+> 这是一个极简的 vue admin 管理后台。它只包含了 Element UI & axios & iconfont & permission control & lint，这些搭建后台必要的东西。
+[线上地址](http://panjiachen.github.io/vue-admin-template)
+[国内访问](https://panjiachen.gitee.io/vue-admin-template)
+目前版本为 `v4.0+` 基于 `vue-cli` 进行构建，若你想使用旧版本，可以切换分支到[tag/3.11.0](https://github.com/PanJiaChen/vue-admin-template/tree/tag/3.11.0)，它不依赖 `vue-cli`。
+<p align="center">
+  <b>SPONSORED BY</b>
+</p>
+<p align="center">
+   <a href="https://finclip.com?from=vue_element" title="FinClip" target="_blank">
+      <img height="200px" src="https://gitee.com/panjiachen/gitee-cdn/raw/master/vue%E8%B5%9E%E5%8A%A9.png" title="FinClip">
+   </a>
+</p>
+## Extra
+如果你想要根据用户角色来动态生成侧边栏和 router，你可以使用该分支[permission-control](https://github.com/PanJiaChen/vue-admin-template/tree/permission-control)
+## 相关项目
+- [vue-element-admin](https://github.com/PanJiaChen/vue-element-admin)
+- [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)
+- [vue-typescript-admin-template](https://github.com/Armour/vue-typescript-admin-template)
+- [awesome-project](https://github.com/PanJiaChen/vue-element-admin/issues/2312)
+写了一个系列的教程配套文章，如何从零构建后一个完整的后台项目:
+- [手摸手，带你用 vue 撸后台 系列一(基础篇)](https://juejin.im/post/59097cd7a22b9d0065fb61d2)
+- [手摸手，带你用 vue 撸后台 系列二(登录权限篇)](https://juejin.im/post/591aa14f570c35006961acac)
+- [手摸手，带你用 vue 撸后台 系列三 (实战篇)](https://juejin.im/post/593121aa0ce4630057f70d35)
+- [手摸手，带你用 vue 撸后台 系列四(vueAdmin 一个极简的后台基础模板,专门针对本项目的文章,算作是一篇文档)](https://juejin.im/post/595b4d776fb9a06bbe7dba56)
+- [手摸手，带你封装一个 vue component](https://segmentfault.com/a/1190000009090836)
+## Build Setup
+```bash
+# 克隆项目
+git clone https://github.com/PanJiaChen/vue-admin-template.git
+# 进入项目目录
+cd vue-admin-template
+# 安装依赖
+npm install
+# 建议不要直接使用 cnpm 安装以来，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
+npm install --registry=https://registry.npm.taobao.org
+# 启动服务
+npm run dev
+```
+浏览器访问 [http://localhost:9528](http://localhost:9528)
+## 发布
+```bash
+# 构建测试环境
+npm run build:stage
+# 构建生产环境
+npm run build:prod
+```
+## 其它
+```bash
+# 预览发布环境效果
+npm run preview
+# 预览发布环境效果 + 静态资源分析
+npm run preview -- --report
+# 代码格式检查
+npm run lint
+# 代码格式检查并自动修复
+npm run lint -- --fix
+```
+更多信息请参考 [使用文档](https://panjiachen.github.io/vue-element-admin-site/zh/)
+## 购买贴纸
+你也可以通过 购买[官方授权的贴纸](https://smallsticker.com/product/vue-element-admin) 的方式来支持 vue-element-admin - 每售出一张贴纸，我们将获得 2 元的捐赠。
+## Demo
+![demo](https://github.com/PanJiaChen/PanJiaChen.github.io/blob/master/images/demo.gif)
+## Browsers support
+Modern browsers and Internet Explorer 10+.
+| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari |
+| --------- | --------- | --------- | --------- |
+| IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions
+## License
+[MIT](https://github.com/PanJiaChen/vue-admin-template/blob/master/LICENSE) license.
+Copyright (c) 2017-present PanJiaChen
--- a/README.md
+++ b/README.md
-# Ant Design Vue Pro Layout
+# vue-admin-template
-This template should help get you started developing with Vue 3 and Ant Design Vue 2 in Vite.
+English | [简体中文](./README-zh.md)
-### Recommended IDE Setup
+> A minimal vue admin template with Element UI & axios & iconfont & permission control & lint
- [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar)
+**Live demo:** http://panjiachen.github.io/vue-admin-template
-### Type Support For `.vue` Imports in TS
-Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can enable Volar's `.vue` type support plugin by running `Volar: Switch TS Plugin on/off` from VSCode command palette.
+**The current version is `v4.0+` build on `vue-cli`. If you want to use the old version , you can switch branch to [tag/3.11.0](https://github.com/PanJiaChen/vue-admin-template/tree/tag/3.11.0), it does not rely on `vue-cli`**
+<p align="center">
+  <b>SPONSORED BY</b>
+</p>
+<p align="center">
+   <a href="https://finclip.com?from=vue_element" title="FinClip" target="_blank">
+      <img height="200px" src="https://gitee.com/panjiachen/gitee-cdn/raw/master/vue%E8%B5%9E%E5%8A%A9.png" title="FinClip">
+   </a>
+</p>
+## Build Setup
+```bash
+# clone the project
+git clone https://github.com/PanJiaChen/vue-admin-template.git
+# enter the project directory
+cd vue-admin-template
+# install dependency
+npm install
+# develop
+npm run dev
+```
+This will automatically open http://localhost:9528
+## Build
+```bash
+# build for test environment
+npm run build:stage
+# build for production environment
+npm run build:prod
+```
+## Advanced
+```bash
+# preview the release environment effect
+npm run preview
+# preview the release environment effect + static resource analysis
+npm run preview -- --report
+# code format check
+npm run lint
+# code format check and auto fix
+npm run lint -- --fix
+```
+Refer to [Documentation](https://panjiachen.github.io/vue-element-admin-site/guide/essentials/deploy.html) for more information
+## Demo
+![demo](https://github.com/PanJiaChen/PanJiaChen.github.io/blob/master/images/demo.gif)
+## Extra
+If you want router permission && generate menu by user roles , you can use this branch [permission-control](https://github.com/PanJiaChen/vue-admin-template/tree/permission-control)
+For `typescript` version, you can use [vue-typescript-admin-template](https://github.com/Armour/vue-typescript-admin-template) (Credits: [@Armour](https://github.com/Armour))
+## Related Project
+- [vue-element-admin](https://github.com/PanJiaChen/vue-element-admin)
+- [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)
+- [vue-typescript-admin-template](https://github.com/Armour/vue-typescript-admin-template)
+- [awesome-project](https://github.com/PanJiaChen/vue-element-admin/issues/2312)
+## Browsers support
+Modern browsers and Internet Explorer 10+.
+| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari |
+| --------- | --------- | --------- | --------- |
+| IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions
+## License
+[MIT](https://github.com/PanJiaChen/vue-admin-template/blob/master/LICENSE) license.
+Copyright (c) 2017-present PanJiaChen
--- a/babel.config.js
+++ b/babel.config.js
+module.exports = {
+  presets: [
+    // https://github.com/vuejs/vue-cli/tree/master/packages/@vue/babel-preset-app
+    '@vue/cli-plugin-babel/preset'
+  ],
+  'env': {
+    'development': {
+      // babel-plugin-dynamic-import-node plugin only does one thing by converting all import() to require().
+      // This plugin can significantly increase the speed of hot updates, when you have a large number of pages.
+      // https://panjiachen.github.io/vue-element-admin-site/guide/advanced/lazy-loading.html
+      'plugins': ['dynamic-import-node']
+    }
+  }
+}
--- a/build/index.js
+++ b/build/index.js
+const { run } = require('runjs')
+const chalk = require('chalk')
+const config = require('../vue.config.js')
+const rawArgv = process.argv.slice(2)
+const args = rawArgv.join(' ')
+if (process.env.npm_config_preview || rawArgv.includes('--preview')) {
+  const report = rawArgv.includes('--report')
+  run(`vue-cli-service build ${args}`)
+  const port = 9526
+  const publicPath = config.publicPath
+  var connect = require('connect')
+  var serveStatic = require('serve-static')
+  const app = connect()
+  app.use(
+    publicPath,
+    serveStatic('./dist', {
+      index: ['index.html', '/']
+    })
+  )
+  app.listen(port, function () {
+    console.log(chalk.green(`> Preview at  http://localhost:${port}${publicPath}`))
+    if (report) {
+      console.log(chalk.green(`> Report at  http://localhost:${port}${publicPath}report.html`))
+    }
+  })
+} else {
+  run(`vue-cli-service build ${args}`)
+}
--- a/env.d.ts
+++ b/env.d.ts
-/// <reference types="vite/client" />
-interface Window {
-  readonly PKG: Record<string, string>;
-}
--- a/index.html
+++ b/index.html
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8" />
-  <link rel="icon" href="/favicon.ico" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Preview Pro</title>
-</head>
-<body>
-  <div id="app"></div>
-  <script type="module" src="/src/main.ts"></script>
-</body>
-</html>
\ No newline at end of file
--- a/jest.config.js
+++ b/jest.config.js
+module.exports = {
+  moduleFileExtensions: ['js', 'jsx', 'json', 'vue'],
+  transform: {
+    '^.+\\.vue$': 'vue-jest',
+    '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$':
+      'jest-transform-stub',
+    '^.+\\.jsx?$': 'babel-jest'
+  },
+  moduleNameMapper: {
+    '^@/(.*)$': '<rootDir>/src/$1'
+  },
+  snapshotSerializers: ['jest-serializer-vue'],
+  testMatch: [
+    '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
+  ],
+  collectCoverageFrom: ['src/utils/**/*.{js,vue}', '!src/utils/auth.js', '!src/utils/request.js', 'src/components/**/*.{js,vue}'],
+  coverageDirectory: '<rootDir>/tests/unit/coverage',
+  // 'collectCoverage': true,
+  'coverageReporters': [
+    'lcov',
+    'text-summary'
+  ],
+  testURL: 'http://localhost/'
+}
--- a/tsconfig.vitest.json
+++ b/tsconfig.vitest.json
 {
-  "extends": "@vue/tsconfig/tsconfig.node.json",
-  "include": ["src/**/__tests__/*"],
  "compilerOptions": {
-    "composite": true,
+    "baseUrl": "./",
-    "baseUrl": ".",
    "paths": {
-      "@/*": ["./src/*"]
+        "@/*": ["src/*"]
-    },
-    "types": ["node", "jsdom"]
    }
+  },
+  "exclude": ["node_modules", "dist"]
 }
--- a/mock/index.js
+++ b/mock/index.js
+const Mock = require('mockjs')
+const { param2Obj } = require('./utils')
+const user = require('./user')
+const table = require('./table')
+const mocks = [
+  ...user,
+  ...table
+]
+// for front mock
+// please use it cautiously, it will redefine XMLHttpRequest,
+// which will cause many of your third-party libraries to be invalidated(like progress event).
+function mockXHR() {
+  // mock patch
+  // https://github.com/nuysoft/Mock/issues/300
+  Mock.XHR.prototype.proxy_send = Mock.XHR.prototype.send
+  Mock.XHR.prototype.send = function() {
+    if (this.custom.xhr) {
+      this.custom.xhr.withCredentials = this.withCredentials || false
+      if (this.responseType) {
+        this.custom.xhr.responseType = this.responseType
+      }
+    }
+    this.proxy_send(...arguments)
+  }
+  function XHR2ExpressReqWrap(respond) {
+    return function(options) {
+      let result = null
+      if (respond instanceof Function) {
+        const { body, type, url } = options
+        // https://expressjs.com/en/4x/api.html#req
+        result = respond({
+          method: type,
+          body: JSON.parse(body),
+          query: param2Obj(url)
+        })
+      } else {
+        result = respond
+      }
+      return Mock.mock(result)
+    }
+  }
+  for (const i of mocks) {
+    Mock.mock(new RegExp(i.url), i.type || 'get', XHR2ExpressReqWrap(i.response))
+  }
+}
+module.exports = {
+  mocks,
+  mockXHR
+}
--- a/mock/mock-server.js
+++ b/mock/mock-server.js
+const chokidar = require('chokidar')
+const bodyParser = require('body-parser')
+const chalk = require('chalk')
+const path = require('path')
+const Mock = require('mockjs')
+const mockDir = path.join(process.cwd(), 'mock')
+function registerRoutes(app) {
+  let mockLastIndex
+  const { mocks } = require('./index.js')
+  const mocksForServer = mocks.map(route => {
+    return responseFake(route.url, route.type, route.response)
+  })
+  for (const mock of mocksForServer) {
+    app[mock.type](mock.url, mock.response)
+    mockLastIndex = app._router.stack.length
+  }
+  const mockRoutesLength = Object.keys(mocksForServer).length
+  return {
+    mockRoutesLength: mockRoutesLength,
+    mockStartIndex: mockLastIndex - mockRoutesLength
+  }
+}
+function unregisterRoutes() {
+  Object.keys(require.cache).forEach(i => {
+    if (i.includes(mockDir)) {
+      delete require.cache[require.resolve(i)]
+    }
+  })
+}
+// for mock server
+const responseFake = (url, type, respond) => {
+  return {
+    url: new RegExp(`${process.env.VUE_APP_BASE_API}${url}`),
+    type: type || 'get',
+    response(req, res) {
+      console.log('request invoke:' + req.path)
+      res.json(Mock.mock(respond instanceof Function ? respond(req, res) : respond))
+    }
+  }
+}
+module.exports = app => {
+  // parse app.body
+  // https://expressjs.com/en/4x/api.html#req.body
+  app.use(bodyParser.json())
+  app.use(bodyParser.urlencoded({
+    extended: true
+  }))
+  const mockRoutes = registerRoutes(app)
+  var mockRoutesLength = mockRoutes.mockRoutesLength
+  var mockStartIndex = mockRoutes.mockStartIndex
+  // watch files, hot reload mock server
+  chokidar.watch(mockDir, {
+    ignored: /mock-server/,
+    ignoreInitial: true
+  }).on('all', (event, path) => {
+    if (event === 'change' || event === 'add') {
+      try {
+        // remove mock routes stack
+        app._router.stack.splice(mockStartIndex, mockRoutesLength)
+        // clear routes cache
+        unregisterRoutes()
+        const mockRoutes = registerRoutes(app)
+        mockRoutesLength = mockRoutes.mockRoutesLength
+        mockStartIndex = mockRoutes.mockStartIndex
+        console.log(chalk.magentaBright(`\n > Mock Server hot reload success! changed  ${path}`))
+      } catch (error) {
+        console.log(chalk.redBright(error))
+      }
+    }
+  })
+}
--- a/mock/table.js
+++ b/mock/table.js
+const Mock = require('mockjs')
+const data = Mock.mock({
+  'items|30': [{
+    id: '@id',
+    title: '@sentence(10, 20)',
+    'status|1': ['published', 'draft', 'deleted'],
+    author: 'name',
+    display_time: '@datetime',
+    pageviews: '@integer(300, 5000)'
+  }]
+})
+module.exports = [
+  {
+    url: '/vue-admin-template/table/list',
+    type: 'get',
+    response: config => {
+      const items = data.items
+      return {
+        code: 20000,
+        data: {
+          total: items.length,
+          items: items
+        }
+      }
+    }
+  }
+]
--- a/mock/user.js
+++ b/mock/user.js
+const tokens = {
+  admin: {
+    token: 'admin-token'
+  },
+  editor: {
+    token: 'editor-token'
+  }
+}
+const users = {
+  'admin-token': {
+    roles: ['admin'],
+    introduction: 'I am a super administrator',
+    avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
+    name: 'Super Admin'
+  },
+  'editor-token': {
+    roles: ['editor'],
+    introduction: 'I am an editor',
+    avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
+    name: 'Normal Editor'
+  }
+}
+module.exports = [
+  // user login
+  {
+    url: '/vue-admin-template/user/login',
+    type: 'post',
+    response: config => {
+      const { username } = config.body
+      const token = tokens[username]
+      // mock error
+      if (!token) {
+        return {
+          code: 60204,
+          message: 'Account and password are incorrect.'
+        }
+      }
+      return {
+        code: 20000,
+        data: token
+      }
+    }
+  },
+  // get user info
+  {
+    url: '/vue-admin-template/user/info\.*',
+    type: 'get',
+    response: config => {
+      const { token } = config.query
+      const info = users[token]
+      // mock error
+      if (!info) {
+        return {
+          code: 50008,
+          message: 'Login failed, unable to get user details.'
+        }
+      }
+      return {
+        code: 20000,
+        data: info
+      }
+    }
+  },
+  // user logout
+  {
+    url: '/vue-admin-template/user/logout',
+    type: 'post',
+    response: _ => {
+      return {
+        code: 20000,
+        data: 'success'
+      }
+    }
+  }
+]
--- a/mock/utils.js
+++ b/mock/utils.js
+/**
+ * @param {string} url
+ * @returns {Object}
+ */
+function param2Obj(url) {
+  const search = decodeURIComponent(url.split('?')[1]).replace(/\+/g, ' ')
+  if (!search) {
+    return {}
+  }
+  const obj = {}
+  const searchArr = search.split('&')
+  searchArr.forEach(v => {
+    const index = v.indexOf('=')
+    if (index !== -1) {
+      const name = v.substring(0, index)
+      const val = v.substring(index + 1, v.length)
+      obj[name] = val
+    }
+  })
+  return obj
+}
+module.exports = {
+  param2Obj
+}
--- a/package.json
+++ b/package.json
 {
-  "name": "preview-pro",
+  "name": "vue-admin-template",
-  "version": "0.0.0",
+  "version": "4.4.0",
-  "private": true,
+  "description": "A vue admin template with Element UI & axios & iconfont & permission control & lint",
+  "author": "Pan <panfree23@gmail.com>",
  "scripts": {
-    "dev": "vite",
+    "dev": "vue-cli-service serve",
-    "dev:force": "vite --force",
+    "build:prod": "vue-cli-service build",
-    "build": "vue-tsc --noEmit && vite build",
+    "build:stage": "vue-cli-service build --mode staging",
-    "build:ghpages": "vue-tsc --noEmit && vite build --base=/preview-pro/ --mode=ghpages",
+    "preview": "node build/index.js --preview",
-    "report": "vite build",
+    "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml",
-    "preview": "vite preview --port 5050",
+    "lint": "eslint --ext .js,.vue src",
-    "test:unit": "vitest --environment jsdom",
+    "test:unit": "jest --clearCache && vue-cli-service test:unit",
-    "typecheck": "vue-tsc --noEmit && vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
+    "test:ci": "npm run lint && npm run test:unit"
-    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
  },
  "dependencies": {
-    "@ant-design-vue/pro-layout": "^3.2.1",
+    "axios": "0.18.1",
-    "@ant-design/icons-vue": "^6.1.0",
+    "core-js": "3.6.5",
-    "ant-design-vue": "^3.2.0",
+    "element-ui": "2.13.2",
-    "vue": "^3.2.33",
+    "js-cookie": "2.2.0",
-    "vue-router": "^4.0.14"
+    "normalize.css": "7.0.0",
+    "nprogress": "0.2.0",
+    "path-to-regexp": "2.4.0",
+    "vue": "2.6.10",
+    "vue-router": "3.0.6",
+    "vuex": "3.1.0"
  },
  "devDependencies": {
-    "@rushstack/eslint-patch": "^1.1.3",
+    "@vue/cli-plugin-babel": "4.4.4",
-    "@types/node": "^17.0.25",
+    "@vue/cli-plugin-eslint": "4.4.4",
-    "@vitejs/plugin-vue": "^2.3.1",
+    "@vue/cli-plugin-unit-jest": "4.4.4",
-    "@vitejs/plugin-vue-jsx": "^1.3.10",
+    "@vue/cli-service": "4.4.4",
-    "@vue/eslint-config-prettier": "^7.0.0",
+    "@vue/test-utils": "1.0.0-beta.29",
-    "@vue/eslint-config-typescript": "^10.0.0",
+    "autoprefixer": "9.5.1",
-    "@vue/tsconfig": "^0.1.3",
+    "babel-eslint": "10.1.0",
-    "eslint": "^8.13.0",
+    "babel-jest": "23.6.0",
-    "eslint-plugin-vue": "^8.6.0",
+    "babel-plugin-dynamic-import-node": "2.3.3",
-    "less": "^4.1.2",
+    "chalk": "2.4.2",
-    "prettier": "^2.6.2",
+    "connect": "3.6.6",
-    "rollup-plugin-visualizer": "^5.6.0",
+    "eslint": "6.7.2",
-    "typescript": "~4.5.5",
+    "eslint-plugin-vue": "6.2.2",
-    "unplugin-auto-import": "^0.5.11",
+    "html-webpack-plugin": "3.2.0",
-    "unplugin-vue-components": "^0.17.21",
+    "mockjs": "1.0.1-beta3",
-    "vite": "^2.9.5",
+    "runjs": "4.3.2",
-    "vite-plugin-optimize-persist": "^0.1.2",
+    "sass": "1.26.8",
-    "vite-plugin-package-config": "^0.1.1",
+    "sass-loader": "8.0.2",
-    "vitest": "^0.9.3",
+    "script-ext-html-webpack-plugin": "2.1.3",
-    "vue-tsc": "^0.34.6"
+    "serve-static": "1.13.2",
+    "svg-sprite-loader": "4.1.3",
+    "svgo": "1.2.2",
+    "vue-template-compiler": "2.6.10"
  },
-  "author": {
+  "browserslist": [
-    "email": "18x@loacg.com",
+    "> 1%",
-    "name": "Sendya",
+    "last 2 versions"
-    "url": "https://github.com/sendya"
+  ],
+  "engines": {
+    "node": ">=8.9",
+    "npm": ">= 3.0.0"
  },
-  "vite": {
+  "license": "MIT"
-    "optimizeDeps": {
-      "include": [
-        "@ant-design-vue/pro-layout",
-        "ant-design-vue/es",
-        "vue",
-        "vue-router"
-      ]
-    }
-  }
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/postcss.config.js
+++ b/postcss.config.js
+// https://github.com/michael-ciniawsky/postcss-load-config
+module.exports = {
+  'plugins': {
+    // to edit target browsers: use "browserslist" field in package.json
+    'autoprefixer': {}
+  }
+}
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/favicon.svg
+++ b/public/favicon.svg
-<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg">
- <!-- Generator: Sketch 52.6 (67491) - http://www.bohemiancoding.com/sketch -->
- <title>Vue Pro Components</title>
- <desc>Created with Sketch.</desc>
- <defs>
-  <linearGradient id="linearGradient-2" y2="157.637507%" x2="138.57919%" y1="-36.7931464%" x1="-19.8191553%">
-   <stop offset="0%" stop-color="#008CFF"/>
-   <stop offset="100%" stop-color="#0063FF"/>
-  </linearGradient>
-  <linearGradient id="linearGradient-3" y2="114.942679%" x2="30.4400914%" y1="-35.6905737%" x1="68.1279872%">
-   <stop offset="0%" stop-color="#FF8384"/>
-   <stop offset="100%" stop-color="#FF4553"/>
-  </linearGradient>
-  <linearGradient id="svg_1" y2="100%" x2="NaN" y1="0%" x1="NaN">
-   <stop offset="0%" stop-color="#0E89FF"/>
-   <stop offset="58.999999%" stop-color="#04b4ff"/>
-   <stop offset="100%" stop-color="#046fd6"/>
-  </linearGradient>
- </defs>
- <g>
-  <title>background</title>
-  <rect fill="none" id="canvas_background" height="402" width="582" y="-1" x="-1"/>
- </g>
- <g>
-  <title>Layer 1</title>
-  <g fill-rule="evenodd" fill="none" id="Vue">
-   <g id="Group">
-    <path fill-rule="nonzero" fill="url(#svg_1)" id="Path-Copy" d="m41.870002,99.48c11.38,3 21.63,-7.12 22.34,-8l20.95955,-20.25077c1.15807,-1.11891 1.81777,-2.65635 1.83075,-4.26659l0.32614,-40.44165c0.00867,-1.07512 0.44979,-2.10148 1.22387,-2.84764l13.63369,-13.14181c1.59052,-1.53315 4.12276,-1.48663 5.6559,0.1039c0.71859,0.74548 1.1201,1.74057 1.1201,2.776l0,59.97504c0,2.69431 -1.08722,5.27463 -3.01541,7.15649l-37.71505,36.80909c-2.34617,2.28981 -6.0959,2.27255 -8.42088,-0.03878"/>
-    <path fill-rule="nonzero" fill="url(#linearGradient-2)" id="Path" d="m87,99.11631c-11.38,3 -22.54,-6.75631 -23.25,-7.63631l-20.95955,-20.25077c-1.15807,-1.11891 -1.81777,-2.65635 -1.83075,-4.26659l-0.32614,-40.44165c-0.00867,-1.07512 -0.44979,-2.10148 -1.22387,-2.84764l-13.63369,-13.14181c-1.59052,-1.53315 -4.12276,-1.48663 -5.6559,0.1039c-0.71859,0.74548 -1.1201,1.74057 -1.1201,2.776l0,59.97504c0,2.69431 1.08722,5.27463 3.01541,7.15649l37.7653,36.85813c2.32622,2.27034 6.03731,2.27542 8.36973,0.01146"/>
-    <path fill="url(#linearGradient-3)" id="Path" d="m62.29835,43.587129l-15.74174,-15.21673c-0.79418,-0.76769 -0.81565,-2.03384 -0.04796,-2.82802c0.37683,-0.38983 0.89579,-0.60997 1.43799,-0.60997l31.44586,0c1.10457,0 2,0.89543 2,2c0,0.54137 -0.21946,1.05961 -0.60825,1.43633l-15.70412,15.21673c-0.77497,0.75092 -2.00591,0.75165 -2.78178,0.00166z"/>
-   </g>
-  </g>
- </g>
-</svg>
\ No newline at end of file
--- a/public/index.html
+++ b/public/index.html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= webpackConfig.name %></title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= webpackConfig.name %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
--- a/src/App.vue
+++ b/src/App.vue
 <template>
-  <ConfigProvider>
+  <div id="app">
    <router-view />
-  </ConfigProvider>
+  </div>
 </template>
-<script setup lang="ts">
+<script>
-import { ConfigProvider } from 'ant-design-vue';
+export default {
-import { useUserTheme } from './hooks/useTheme';
+  name: 'App'
-useUserTheme();
-</script>
-<style>
-#app {
-  height: 100%;
-}
-.ant-pro-sider {
-  z-index: 20;
-}
-.slide-left-enter-active,
-.slide-left-leave-active,
-.slide-right-enter-active,
-.slide-right-leave-active {
-  transition-duration: 0.5s;
-  transition-property: height, opacity, transform;
-  transition-timing-function: cubic-bezier(0.55, 0, 0.1, 1);
-  overflow: hidden;
-}
-.slide-left-enter,
-.slide-right-leave-active {
-  opacity: 0;
-  transform: translate(2em, 0);
-}
-.slide-left-leave-active,
-.slide-right-enter {
-  opacity: 0;
-  transform: translate(-2em, 0);
 }
+</script>
-.zoom-enter-active,
-.zoom-leave-active {
-  animation-duration: 0.3s;
-  animation-fill-mode: both;
-  animation-name: zoomIn;
-}
-.zoom-leave-active {
-  animation-direction: reverse;
-}
-@keyframes zoomIn {
-  from {
-    opacity: 0;
-    transform: scale3d(0.95, 0.95, 0.95);
-  }
-  100% {
-    opacity: 1;
-  }
-}
-@keyframes zoomOut {
-  0% {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-    transform: scale3d(0.95, 0.95, 0.95);
-  }
-}
-</style>
--- a/src/api/menu.js
+++ b/src/api/menu.js
+import request from '@/utils/request'
+export function menuList(parameter) {
+  return request({
+    url: '/menu/list',
+    method: 'get',
+    data: parameter
+  })
+}
+export function menuAdd(parameter) {
+  return request({
+    url: '/menu/add',
+    method: 'post',
+    data: parameter
+  })
+}
+export function menuEdit(parameter) {
+  return request({
+    url: '/menu/add',
+    method: 'put',
+    data: parameter
+  })
+}
+export function menuDetail(parameter) {
+  return request({
+    url: '/menu/detail',
+    method: 'get',
+    data: parameter
+  })
+}
+export function menuDel(id) {
+  return request({
+    url: '/menu/' + id + '/delete',
+    method: 'delete'
+  })
+}
--- a/src/api/table.js
+++ b/src/api/table.js
+import request from '@/utils/request'
+export function getList(params) {
+  return request({
+    url: '/vue-admin-template/table/list',
+    method: 'get',
+    params
+  })
+}
--- a/src/api/user.js
+++ b/src/api/user.js
+import request from '@/utils/request'
+export function login(data) {
+  return request({
+    url: '/auth/login',
+    method: 'post',
+    data
+  })
+}
+export function getInfo(token) {
+  return request({
+    url: '/auth/info',
+    method: 'get',
+    params: { token }
+  })
+}
+export function logout() {
+  return request({
+    url: '/auth/login_out',
+    method: 'put'
+  })
+}
+export function getConfigs() {
+  return request({
+    url: '/configs',
+    method: 'get'
+  })
+}
--- a/src/assets/404_images/404.png
+++ b/src/assets/404_images/404.png
--- a/src/assets/404_images/404_cloud.png
+++ b/src/assets/404_images/404_cloud.png
--- a/src/assets/logo.png
+++ b/src/assets/logo.png
--- a/src/auto-imports.d.ts
+++ b/src/auto-imports.d.ts
-// Generated by 'unplugin-auto-import'
-// We suggest you to commit this file into source control
-declare global {
-  const computed: typeof import('vue')['computed']
-  const createApp: typeof import('vue')['createApp']
-  const customRef: typeof import('vue')['customRef']
-  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
-  const defineComponent: typeof import('vue')['defineComponent']
-  const effectScope: typeof import('vue')['effectScope']
-  const EffectScope: typeof import('vue')['EffectScope']
-  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
-  const getCurrentScope: typeof import('vue')['getCurrentScope']
-  const h: typeof import('vue')['h']
-  const inject: typeof import('vue')['inject']
-  const isReadonly: typeof import('vue')['isReadonly']
-  const isRef: typeof import('vue')['isRef']
-  const markRaw: typeof import('vue')['markRaw']
-  const nextTick: typeof import('vue')['nextTick']
-  const onActivated: typeof import('vue')['onActivated']
-  const onBeforeMount: typeof import('vue')['onBeforeMount']
-  const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
-  const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
-  const onDeactivated: typeof import('vue')['onDeactivated']
-  const onErrorCaptured: typeof import('vue')['onErrorCaptured']
-  const onMounted: typeof import('vue')['onMounted']
-  const onRenderTracked: typeof import('vue')['onRenderTracked']
-  const onRenderTriggered: typeof import('vue')['onRenderTriggered']
-  const onScopeDispose: typeof import('vue')['onScopeDispose']
-  const onServerPrefetch: typeof import('vue')['onServerPrefetch']
-  const onUnmounted: typeof import('vue')['onUnmounted']
-  const onUpdated: typeof import('vue')['onUpdated']
-  const provide: typeof import('vue')['provide']
-  const reactive: typeof import('vue')['reactive']
-  const readonly: typeof import('vue')['readonly']
-  const ref: typeof import('vue')['ref']
-  const resolveComponent: typeof import('vue')['resolveComponent']
-  const shallowReactive: typeof import('vue')['shallowReactive']
-  const shallowReadonly: typeof import('vue')['shallowReadonly']
-  const shallowRef: typeof import('vue')['shallowRef']
-  const toRaw: typeof import('vue')['toRaw']
-  const toRef: typeof import('vue')['toRef']
-  const toRefs: typeof import('vue')['toRefs']
-  const triggerRef: typeof import('vue')['triggerRef']
-  const unref: typeof import('vue')['unref']
-  const useAttrs: typeof import('vue')['useAttrs']
-  const useCssModule: typeof import('vue')['useCssModule']
-  const useCssVars: typeof import('vue')['useCssVars']
-  const useRoute: typeof import('vue-router')['useRoute']
-  const useRouter: typeof import('vue-router')['useRouter']
-  const useSlots: typeof import('vue')['useSlots']
-  const watch: typeof import('vue')['watch']
-  const watchEffect: typeof import('vue')['watchEffect']
-}
-export {}
--- a/src/components.d.ts
+++ b/src/components.d.ts
-// generated by unplugin-vue-components
-// We suggest you to commit this file into source control
-// Read more: https://github.com/vuejs/vue-next/pull/3399
-declare module 'vue' {
-  export interface GlobalComponents {
-    AAvatar: typeof import('ant-design-vue/es')['Avatar']
-    AButton: typeof import('ant-design-vue/es')['Button']
-    ACard: typeof import('ant-design-vue/es')['Card']
-    ACol: typeof import('ant-design-vue/es')['Col']
-    ADescriptions: typeof import('ant-design-vue/es')['Descriptions']
-    ADescriptionsItem: typeof import('ant-design-vue/es')['DescriptionsItem']
-    ADivider: typeof import('ant-design-vue/es')['Divider']
-    ADrawer: typeof import('ant-design-vue/es')['Drawer']
-    ADropdown: typeof import('ant-design-vue/es')['Dropdown']
-    AMenu: typeof import('ant-design-vue/es')['Menu']
-    AMenuItem: typeof import('ant-design-vue/es')['MenuItem']
-    APagination: typeof import('ant-design-vue/es')['Pagination']
-    ARadio: typeof import('ant-design-vue/es')['Radio']
-    ARadioGroup: typeof import('ant-design-vue/es')['RadioGroup']
-    AResult: typeof import('ant-design-vue/es')['Result']
-    ARow: typeof import('ant-design-vue/es')['Row']
-    ASpace: typeof import('ant-design-vue/es')['Space']
-    AStatistic: typeof import('ant-design-vue/es')['Statistic']
-    ASwitch: typeof import('ant-design-vue/es')['Switch']
-    ATag: typeof import('ant-design-vue/es')['Tag']
-    ATypography: typeof import('ant-design-vue/es')['Typography']
-    ATypographyLink: typeof import('ant-design-vue/es')['TypographyLink']
-    ATypographyParagraph: typeof import('ant-design-vue/es')['TypographyParagraph']
-    ATypographyText: typeof import('ant-design-vue/es')['TypographyText']
-    ATypographyTitle: typeof import('ant-design-vue/es')['TypographyTitle']
-    RightContent: typeof import('./components/RightContent/RightContent.vue')['default']
-    SettingDrawer: typeof import('./components/SettingDrawer/SettingDrawer.vue')['default']
-  }
-}
-export { }
--- a/src/components/Breadcrumb/index.vue
+++ b/src/components/Breadcrumb/index.vue
+<template>
+  <el-breadcrumb class="app-breadcrumb" separator="/">
+    <transition-group name="breadcrumb">
+      <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">
+        <span v-if="item.redirect==='noRedirect'||index==levelList.length-1" class="no-redirect">{{ item.meta.title }}</span>
+        <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
+      </el-breadcrumb-item>
+    </transition-group>
+  </el-breadcrumb>
+</template>
+<script>
+import pathToRegexp from 'path-to-regexp'
+export default {
+  data() {
+    return {
+      levelList: null
+    }
+  },
+  watch: {
+    $route() {
+      this.getBreadcrumb()
+    }
+  },
+  created() {
+    this.getBreadcrumb()
+  },
+  methods: {
+    getBreadcrumb() {
+      // only show routes with meta.title
+      let matched = this.$route.matched.filter(item => item.meta && item.meta.title)
+      const first = matched[0]
+      if (!this.isDashboard(first)) {
+        matched = [{ path: '/dashboard', meta: { title: '首页' }}].concat(matched)
+      }
+      this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
+    },
+    isDashboard(route) {
+      const name = route && route.name
+      if (!name) {
+        return false
+      }
+      return name.trim().toLocaleLowerCase() === 'Dashboard'.toLocaleLowerCase()
+    },
+    pathCompile(path) {
+      // To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561
+      const { params } = this.$route
+      var toPath = pathToRegexp.compile(path)
+      return toPath(params)
+    },
+    handleLink(item) {
+      const { redirect, path } = item
+      if (redirect) {
+        this.$router.push(redirect)
+        return
+      }
+      this.$router.push(this.pathCompile(path))
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.app-breadcrumb.el-breadcrumb {
+  display: inline-block;
+  font-size: 14px;
+  line-height: 50px;
+  margin-left: 8px;
+  .no-redirect {
+    color: #97a8be;
+    cursor: text;
+  }
+}
+</style>
--- a/src/components/Hamburger/index.vue
+++ b/src/components/Hamburger/index.vue
+<template>
+  <div style="padding: 0 15px;" @click="toggleClick">
+    <svg
+      :class="{'is-active':isActive}"
+      class="hamburger"
+      viewBox="0 0 1024 1024"
+      xmlns="http://www.w3.org/2000/svg"
+      width="64"
+      height="64"
+    >
+      <path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" />
+    </svg>
+  </div>
+</template>
+<script>
+export default {
+  name: 'Hamburger',
+  props: {
+    isActive: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    toggleClick() {
+      this.$emit('toggleClick')
+    }
+  }
+}
+</script>
+<style scoped>
+.hamburger {
+  display: inline-block;
+  vertical-align: middle;
+  width: 20px;
+  height: 20px;
+}
+.hamburger.is-active {
+  transform: rotate(180deg);
+}
+</style>
--- a/src/components/RightContent/RightContent.vue
+++ b/src/components/RightContent/RightContent.vue
-<template>
-  <div style="margin-right: 12px">
-    <a-space>
-      <a style="padding: 0 12px; display: inline-block; user-select: none" @click="handleClick"><BgColorsOutlined /></a>
-      <a-dropdown>
-        <template #overlay>
-          <a-menu>
-            <a-menu-item>
-              <template #icon>
-                <SettingOutlined />
-              </template>
-              <span>个人设置</span>
-            </a-menu-item>
-            <a-menu-item>
-              <template #icon>
-                <LogoutOutlined />
-              </template>
-              <span>退出登录</span>
-            </a-menu-item>
-          </a-menu>
-        </template>
-        <a-avatar shape="square" size="small">
-          <template #icon>
-            <UserOutlined />
-          </template>
-          {{ currentUser.nickname }}
-        </a-avatar>
-      </a-dropdown>
-    </a-space>
-  </div>
-</template>
-<script setup lang="ts">
-import { UserOutlined, SettingOutlined, LogoutOutlined, BgColorsOutlined } from '@ant-design/icons-vue';
-import { apply, randomTheme } from '../../hooks/useTheme';
-export type CurrentUser = {
-  nickname: string;
-  avatar?: string;
-};
-defineProps<{
-  currentUser: CurrentUser;
-}>();
-const handleClick = () => {
-  apply(randomTheme());
-};
-</script>
--- a/src/components/RightContent/__tests__/RightContent.spec.ts
+++ b/src/components/RightContent/__tests__/RightContent.spec.ts
-import { describe, it, expect } from 'vitest';
-import { mount } from '@vue/test-utils';
-import RightContent from '../RightContent.vue';
-describe('RightContent', () => {
-  it('renders properly', () => {
-    const currentUser = { nickname: 'Admin' };
-    const wrapper = mount(RightContent, {
-      props: { currentUser: currentUser },
-    });
-    expect(wrapper.text()).toContain(currentUser.nickname);
-  });
-});
--- a/src/components/SettingDrawer/SettingDrawer.vue
+++ b/src/components/SettingDrawer/SettingDrawer.vue
-<template>
-  <a-drawer v-model:visible="visible" :width="300" placement="right" :closable="false">
-    <template #handle>
-      <div class="ant-pro-setting-drawer-handle" @click="handleShowDrawer">
-        <SettingOutlined v-if="!visible" />
-        <CloseOutlined v-else />
-      </div>
-    </template>
-    <div class="margin-bottom: 24px">
-      <h3>导航模式</h3>
-      <a-radio-group :value="modelValue.layout" @change="e => updateConf(e.target.value, 'layout')">
-        <a-radio value="side">左侧菜单布局</a-radio>
-        <a-radio value="top">顶部菜单布局</a-radio>
-        <a-radio value="mix">混合菜单布局</a-radio>
-      </a-radio-group>
-      <a-divider />
-      <a-row style="margin-bottom: 12px">
-        <a-col :span="12">固定 Header</a-col>
-        <a-col :span="12" style="text-align: right">
-          <a-switch
-            checked-children="开"
-            un-checked-children="关"
-            :checked="modelValue.fixedHeader"
-            @change="checked => updateConf(checked, 'fixedHeader')"
-          />
-        </a-col>
-      </a-row>
-      <a-row style="margin-bottom: 12px">
-        <a-col :span="12">固定 左侧菜单</a-col>
-        <a-col :span="12" style="text-align: right">
-          <a-switch
-            checked-children="开"
-            un-checked-children="关"
-            :checked="modelValue.fixSiderbar"
-            @change="checked => updateConf(checked, 'fixSiderbar')"
-          />
-        </a-col>
-      </a-row>
-      <a-row style="margin-bottom: 12px">
-        <a-col :span="12">自动分割菜单</a-col>
-        <a-col :span="12" style="text-align: right">
-          <a-switch
-            checked-children="开"
-            un-checked-children="关"
-            :checked="modelValue.splitMenus"
-            @change="checked => updateConf(checked, 'splitMenus')"
-          />
-        </a-col>
-      </a-row>
-      <a-divider />
-      <h3>内容区域</h3>
-      <a-row style="margin-bottom: 12px">
-        <a-col :span="12">顶栏</a-col>
-        <a-col :span="12" style="text-align: right">
-          <a-switch
-            checked-children="开"
-            un-checked-children="关"
-            :checked="modelValue.headerRender === undefined"
-            @change="checked => updateConf(checked === true && undefined, 'headerRender')"
-          />
-        </a-col>
-      </a-row>
-      <a-row style="margin-bottom: 12px">
-        <a-col :span="12">页脚</a-col>
-        <a-col :span="12" style="text-align: right">
-          <a-switch
-            checked-children="开"
-            un-checked-children="关"
-            :checked="modelValue.footerRender === undefined"
-            @change="checked => updateConf(checked === true && undefined, 'footerRender')"
-          />
-        </a-col>
-      </a-row>
-      <a-row style="margin-bottom: 12px">
-        <a-col :span="12">菜单</a-col>
-        <a-col :span="12" style="text-align: right">
-          <a-switch
-            disabled
-            checked-children="开"
-            un-checked-children="关"
-            :checked="modelValue.menu === undefined"
-            @change="checked => updateConf(checked === true && undefined, 'menu')"
-          />
-        </a-col>
-      </a-row>
-      <a-row style="margin-bottom: 12px">
-        <a-col :span="12">菜单头</a-col>
-        <a-col :span="12" style="text-align: right">
-          <a-switch
-            checked-children="开"
-            un-checked-children="关"
-            :checked="modelValue.menuHeaderRender === undefined"
-            @change="checked => updateConf(checked === true && undefined, 'menuHeaderRender')"
-          />
-        </a-col>
-      </a-row>
-    </div>
-  </a-drawer>
-</template>
-<script setup lang="ts">
-import { SettingOutlined, CloseOutlined } from '@ant-design/icons-vue';
-import type { CheckedType } from 'ant-design-vue/es/switch';
-type ConfType = 'layout' | 'fixedHeader' | 'fixSiderbar' | string;
-const props = defineProps<{
-  modelValue: Record<string, string | boolean | undefined>;
-}>();
-const emit = defineEmits(['update:modelValue']);
-const visible = ref<boolean>(false);
-const handleShowDrawer = () => {
-  visible.value = !visible.value;
-};
-const updateConf = (val: string | CheckedType | undefined, type: ConfType) => {
-  const newVal = {
-    ...toRaw(props.modelValue),
-    [`${type}`]: val,
-  };
-  console.log('newConf', newVal);
-  emit('update:modelValue', newVal);
-};
-</script>
-<style lang="less">
-.ant-pro-setting-drawer-handle {
-  position: absolute;
-  top: 240px;
-  right: 300px;
-  z-index: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 48px;
-  height: 48px;
-  font-size: 16px;
-  text-align: center;
-  background: var(--primary-color);
-  border-radius: 4px 0 0 4px;
-  cursor: pointer;
-  pointer-events: auto;
-  > span {
-    color: rgb(255, 255, 255);
-    font-size: 20px;
-  }
-}
-</style>
--- a/src/components/SettingDrawer/index.ts
+++ b/src/components/SettingDrawer/index.ts
-export { default as SettingDrawer } from './SettingDrawer.vue';
--- a/src/components/SvgIcon/index.vue
+++ b/src/components/SvgIcon/index.vue
+<template>
+  <div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners" />
+  <svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
+    <use :xlink:href="iconName" />
+  </svg>
+</template>
+<script>
+// doc: https://panjiachen.github.io/vue-element-admin-site/feature/component/svg-icon.html#usage
+import { isExternal } from '@/utils/validate'
+export default {
+  name: 'SvgIcon',
+  props: {
+    iconClass: {
+      type: String,
+      required: true
+    },
+    className: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    isExternal() {
+      return isExternal(this.iconClass)
+    },
+    iconName() {
+      return `#icon-${this.iconClass}`
+    },
+    svgClass() {
+      if (this.className) {
+        return 'svg-icon ' + this.className
+      } else {
+        return 'svg-icon'
+      }
+    },
+    styleExternalIcon() {
+      return {
+        mask: `url(${this.iconClass}) no-repeat 50% 50%`,
+        '-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`
+      }
+    }
+  }
+}
+</script>
+<style scoped>
+.svg-icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+.svg-external-icon {
+  background-color: currentColor;
+  mask-size: cover!important;
+  display: inline-block;
+}
+</style>
--- a/src/components/index.ts
+++ b/src/components/index.ts
-export { default as RightContent } from './RightContent/RightContent.vue';
-export { default as SettingDrawer } from './SettingDrawer/SettingDrawer.vue';
--- a/src/hooks/useLoading.ts
+++ b/src/hooks/useLoading.ts
-import { ref, inject, provide } from 'vue';
-const INJECT_LOADING_KEY = Symbol('loading_store');
-export const createLoading = (v = false) => {
-  const loading = ref<boolean>(v);
-  const change = (bool: boolean) => {
-    loading.value = bool;
-  };
-  provide(INJECT_LOADING_KEY, loading);
-  return [loading, change];
-};
-export const useLoading = () => {
-  return inject(INJECT_LOADING_KEY);
-};
--- a/src/hooks/useTheme.ts
+++ b/src/hooks/useTheme.ts
-import { onBeforeMount } from 'vue';
-import { ConfigProvider } from 'ant-design-vue';
-const LOCAL_THEME = 'local_theme';
-export const colors: string[] = [
-  '#f5222d',
-  '#fa541c',
-  '#fa8c16',
-  '#a0d911',
-  '#13c2c2',
-  '#1890ff',
-  '#722ed1',
-  '#eb2f96',
-  '#faad14',
-  '#52c41a',
-];
-export const useUserTheme = () => {
-  onBeforeMount(() => {
-    apply(load());
-  });
-};
-export const randomTheme = (): string => {
-  const i = Math.floor(Math.random() * 10);
-  return colors[i];
-};
-export const load = () => {
-  const color = localStorage.getItem(LOCAL_THEME) || '#1890ff';
-  return color;
-};
-export const save = (color: string) => {
-  localStorage.setItem(LOCAL_THEME, color);
-};
-export const apply = (color: string) => {
-  ConfigProvider.config({
-    theme: {
-      primaryColor: color,
-    },
-  });
-  save(color);
-};
--- a/src/icons/index.js
+++ b/src/icons/index.js
+import Vue from 'vue'
+import SvgIcon from '@/components/SvgIcon'// svg component
+// register globally
+Vue.component('svg-icon', SvgIcon)
+const req = require.context('./svg', false, /\.svg$/)
+const requireAll = requireContext => requireContext.keys().map(requireContext)
+requireAll(req)
--- a/src/icons/svg/dashboard.svg
+++ b/src/icons/svg/dashboard.svg
+<svg width="128" height="100" xmlns="http://www.w3.org/2000/svg"><path d="M27.429 63.638c0-2.508-.893-4.65-2.679-6.424-1.786-1.775-3.94-2.662-6.464-2.662-2.524 0-4.679.887-6.465 2.662-1.785 1.774-2.678 3.916-2.678 6.424 0 2.508.893 4.65 2.678 6.424 1.786 1.775 3.94 2.662 6.465 2.662 2.524 0 4.678-.887 6.464-2.662 1.786-1.775 2.679-3.916 2.679-6.424zm13.714-31.801c0-2.508-.893-4.65-2.679-6.424-1.785-1.775-3.94-2.662-6.464-2.662-2.524 0-4.679.887-6.464 2.662-1.786 1.774-2.679 3.916-2.679 6.424 0 2.508.893 4.65 2.679 6.424 1.785 1.774 3.94 2.662 6.464 2.662 2.524 0 4.679-.888 6.464-2.662 1.786-1.775 2.679-3.916 2.679-6.424zM71.714 65.98l7.215-27.116c.285-1.23.107-2.378-.536-3.443-.643-1.064-1.56-1.762-2.75-2.094-1.19-.33-2.333-.177-3.429.462-1.095.639-1.81 1.573-2.143 2.804l-7.214 27.116c-2.857.237-5.405 1.266-7.643 3.088-2.238 1.822-3.738 4.152-4.5 6.992-.952 3.644-.476 7.098 1.429 10.364 1.905 3.265 4.69 5.37 8.357 6.317 3.667.947 7.143.474 10.429-1.42 3.285-1.892 5.404-4.66 6.357-8.305.762-2.84.619-5.607-.429-8.305-1.047-2.697-2.762-4.85-5.143-6.46zm47.143-2.342c0-2.508-.893-4.65-2.678-6.424-1.786-1.775-3.94-2.662-6.465-2.662-2.524 0-4.678.887-6.464 2.662-1.786 1.774-2.679 3.916-2.679 6.424 0 2.508.893 4.65 2.679 6.424 1.786 1.775 3.94 2.662 6.464 2.662 2.524 0 4.679-.887 6.465-2.662 1.785-1.775 2.678-3.916 2.678-6.424zm-45.714-45.43c0-2.509-.893-4.65-2.679-6.425C68.68 10.01 66.524 9.122 64 9.122c-2.524 0-4.679.887-6.464 2.661-1.786 1.775-2.679 3.916-2.679 6.425 0 2.508.893 4.65 2.679 6.424 1.785 1.774 3.94 2.662 6.464 2.662 2.524 0 4.679-.888 6.464-2.662 1.786-1.775 2.679-3.916 2.679-6.424zm32 13.629c0-2.508-.893-4.65-2.679-6.424-1.785-1.775-3.94-2.662-6.464-2.662-2.524 0-4.679.887-6.464 2.662-1.786 1.774-2.679 3.916-2.679 6.424 0 2.508.893 4.65 2.679 6.424 1.785 1.774 3.94 2.662 6.464 2.662 2.524 0 4.679-.888 6.464-2.662 1.786-1.775 2.679-3.916 2.679-6.424zM128 63.638c0 12.351-3.357 23.78-10.071 34.286-.905 1.372-2.19 2.058-3.858 2.058H13.93c-1.667 0-2.953-.686-3.858-2.058C3.357 87.465 0 76.037 0 63.638c0-8.613 1.69-16.847 5.071-24.703C8.452 31.08 13 24.312 18.714 18.634c5.715-5.68 12.524-10.199 20.429-13.559C47.048 1.715 55.333.035 64 .035c8.667 0 16.952 1.68 24.857 5.04 7.905 3.36 14.714 7.88 20.429 13.559 5.714 5.678 10.262 12.446 13.643 20.301 3.38 7.856 5.071 16.09 5.071 24.703z"/></svg>
\ No newline at end of file
--- a/src/icons/svg/example.svg
+++ b/src/icons/svg/example.svg
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M96.258 57.462h31.421C124.794 27.323 100.426 2.956 70.287.07v31.422a32.856 32.856 0 0 1 25.971 25.97zm-38.796-25.97V.07C27.323 2.956 2.956 27.323.07 57.462h31.422a32.856 32.856 0 0 1 25.97-25.97zm12.825 64.766v31.421c30.46-2.885 54.507-27.253 57.713-57.712H96.579c-2.886 13.466-13.146 23.726-26.292 26.291zM31.492 70.287H.07c2.886 30.46 27.253 54.507 57.713 57.713V96.579c-13.466-2.886-23.726-13.146-26.291-26.292z"/></svg>
\ No newline at end of file
--- a/src/icons/svg/eye-open.svg
+++ b/src/icons/svg/eye-open.svg
+<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="128" height="128"><defs><style/></defs><path d="M512 128q69.675 0 135.51 21.163t115.498 54.997 93.483 74.837 73.685 82.006 51.67 74.837 32.17 54.827L1024 512q-2.347 4.992-6.315 13.483T998.87 560.17t-31.658 51.669-44.331 59.99-56.832 64.34-69.504 60.16-82.347 51.5-94.848 34.687T512 896q-69.675 0-135.51-21.163t-115.498-54.826-93.483-74.326-73.685-81.493-51.67-74.496-32.17-54.997L0 513.707q2.347-4.992 6.315-13.483t18.816-34.816 31.658-51.84 44.331-60.33 56.832-64.683 69.504-60.331 82.347-51.84 94.848-34.816T512 128.085zm0 85.333q-46.677 0-91.648 12.331t-81.152 31.83-70.656 47.146-59.648 54.485-48.853 57.686-37.675 52.821-26.325 43.99q12.33 21.674 26.325 43.52t37.675 52.351 48.853 57.003 59.648 53.845T339.2 767.02t81.152 31.488T512 810.667t91.648-12.331 81.152-31.659 70.656-46.848 59.648-54.186 48.853-57.344 37.675-52.651T927.957 512q-12.33-21.675-26.325-43.648t-37.675-52.65-48.853-57.345-59.648-54.186-70.656-46.848-81.152-31.659T512 213.334zm0 128q70.656 0 120.661 50.006T682.667 512 632.66 632.661 512 682.667 391.339 632.66 341.333 512t50.006-120.661T512 341.333zm0 85.334q-35.328 0-60.33 25.002T426.666 512t25.002 60.33T512 597.334t60.33-25.002T597.334 512t-25.002-60.33T512 426.666z"/></svg>
\ No newline at end of file
--- a/src/icons/svg/eye.svg
+++ b/src/icons/svg/eye.svg
+<svg width="128" height="64" xmlns="http://www.w3.org/2000/svg"><path d="M127.072 7.994c1.37-2.208.914-5.152-.914-6.87-2.056-1.717-4.797-1.226-6.396.982-.229.245-25.586 32.382-55.74 32.382-29.24 0-55.74-32.382-55.968-32.627-1.6-1.963-4.57-2.208-6.397-.49C-.17 3.086-.399 6.275 1.2 8.238c.457.736 5.94 7.36 14.62 14.72L4.17 35.96c-1.828 1.963-1.6 5.152.228 6.87.457.98 1.6 1.471 2.742 1.471s2.284-.49 3.198-1.472l12.564-13.983c5.94 4.416 13.021 8.587 20.788 11.53l-4.797 17.418c-.685 2.699.686 5.397 3.198 6.133h1.37c2.057 0 3.884-1.472 4.341-3.68L52.6 42.83c3.655.736 7.538 1.227 11.422 1.227 3.883 0 7.767-.49 11.422-1.227l4.797 17.173c.457 2.208 2.513 3.68 4.34 3.68.457 0 .914 0 1.143-.246 2.513-.736 3.883-3.434 3.198-6.133l-4.797-17.172c7.767-2.944 14.848-7.114 20.788-11.53l12.336 13.738c.913.981 2.056 1.472 3.198 1.472s2.284-.49 3.198-1.472c1.828-1.963 1.828-4.906.228-6.87l-11.65-13.001c9.366-7.36 14.849-14.474 14.849-14.474z"/></svg>
\ No newline at end of file
--- a/src/icons/svg/form.svg
+++ b/src/icons/svg/form.svg
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M84.068 23.784c-1.02 0-1.877-.32-2.572-.96a8.588 8.588 0 0 1-1.738-2.237 11.524 11.524 0 0 1-1.042-2.621c-.232-.895-.348-1.641-.348-2.238V0h.278c.834 0 1.622.085 2.363.256.742.17 1.645.575 2.711 1.214 1.066.64 2.363 1.535 3.892 2.686 1.53 1.15 3.453 2.664 5.77 4.54 2.502 2.045 4.494 3.771 5.977 5.178 1.483 1.406 2.618 2.6 3.406 3.58.787.98 1.274 1.812 1.46 2.494.185.682.277 1.278.277 1.79v2.046H84.068zM127.3 84.01c.278.682.464 1.535.556 2.558.093 1.023-.37 2.003-1.39 2.94-.463.427-.88.832-1.25 1.215-.372.384-.696.704-.974.96a6.69 6.69 0 0 1-.973.767l-11.816-10.741a44.331 44.331 0 0 0 1.877-1.535 31.028 31.028 0 0 1 1.737-1.406c1.112-.938 2.317-1.343 3.615-1.215 1.297.128 2.363.405 3.197.83.927.427 1.923 1.173 2.989 2.239 1.065 1.065 1.876 2.195 2.432 3.388zM78.23 95.902c2.038 0 3.752-.511 5.143-1.534l-26.969 25.83H18.037c-1.761 0-3.684-.47-5.77-1.407a24.549 24.549 0 0 1-5.838-3.709 21.373 21.373 0 0 1-4.518-5.306c-1.204-2.003-1.807-4.07-1.807-6.202V16.495c0-1.79.44-3.665 1.32-5.626A18.41 18.41 0 0 1 5.04 5.562a21.798 21.798 0 0 1 5.213-3.964C12.198.533 14.237 0 16.37 0h53.24v15.984c0 1.62.278 3.367.834 5.242a16.704 16.704 0 0 0 2.572 5.179c1.159 1.577 2.665 2.898 4.518 3.964 1.853 1.066 4.078 1.598 6.673 1.598h20.295v42.325L85.458 92.45c1.02-1.364 1.529-2.856 1.529-4.476 0-2.216-.857-4.113-2.572-5.69-1.714-1.577-3.776-2.366-6.186-2.366H26.1c-2.409 0-4.448.789-6.116 2.366-1.668 1.577-2.502 3.474-2.502 5.69 0 2.217.834 4.092 2.502 5.626 1.668 1.535 3.707 2.302 6.117 2.302h52.13zM26.1 47.951c-2.41 0-4.449.789-6.117 2.366-1.668 1.577-2.502 3.473-2.502 5.69 0 2.216.834 4.092 2.502 5.626 1.668 1.534 3.707 2.302 6.117 2.302h52.13c2.409 0 4.47-.768 6.185-2.302 1.715-1.534 2.572-3.41 2.572-5.626 0-2.217-.857-4.113-2.572-5.69-1.714-1.577-3.776-2.366-6.186-2.366H26.1zm52.407 64.063l1.807-1.663 3.476-3.196a479.75 479.75 0 0 0 4.587-4.284 500.757 500.757 0 0 1 5.004-4.667c3.985-3.666 8.48-7.758 13.485-12.276l11.677 10.741-13.485 12.404-5.004 4.603-4.587 4.22a179.46 179.46 0 0 0-3.267 3.068c-.88.853-1.367 1.322-1.46 1.407-.463.341-.973.703-1.529 1.087-.556.383-1.112.703-1.668.959-.556.256-1.413.575-2.572.959a83.5 83.5 0 0 1-3.545 1.087 72.2 72.2 0 0 1-3.475.895c-1.112.256-1.946.426-2.502.511-1.112.17-1.854.043-2.224-.383-.371-.426-.464-1.151-.278-2.174.092-.511.278-1.279.556-2.302.278-1.023.602-2.067.973-3.132l1.042-3.005c.325-.938.58-1.577.765-1.918a10.157 10.157 0 0 1 2.224-2.941z"/></svg>
\ No newline at end of file
--- a/src/icons/svg/link.svg
+++ b/src/icons/svg/link.svg
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M115.625 127.937H.063V12.375h57.781v12.374H12.438v90.813h90.813V70.156h12.374z"/><path d="M116.426 2.821l8.753 8.753-56.734 56.734-8.753-8.745z"/><path d="M127.893 37.982h-12.375V12.375H88.706V0h39.187z"/></svg>
\ No newline at end of file
--- a/src/icons/svg/nested.svg
+++ b/src/icons/svg/nested.svg
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M.002 9.2c0 5.044 3.58 9.133 7.998 9.133 4.417 0 7.997-4.089 7.997-9.133 0-5.043-3.58-9.132-7.997-9.132S.002 4.157.002 9.2zM31.997.066h95.981V18.33H31.997V.066zm0 45.669c0 5.044 3.58 9.132 7.998 9.132 4.417 0 7.997-4.088 7.997-9.132 0-3.263-1.524-6.278-3.998-7.91-2.475-1.63-5.524-1.63-7.998 0-2.475 1.632-4 4.647-4 7.91zM63.992 36.6h63.986v18.265H63.992V36.6zm-31.995 82.2c0 5.043 3.58 9.132 7.998 9.132 4.417 0 7.997-4.089 7.997-9.132 0-5.044-3.58-9.133-7.997-9.133s-7.998 4.089-7.998 9.133zm31.995-9.131h63.986v18.265H63.992V109.67zm0-27.404c0 5.044 3.58 9.133 7.998 9.133 4.417 0 7.997-4.089 7.997-9.133 0-3.263-1.524-6.277-3.998-7.909-2.475-1.631-5.524-1.631-7.998 0-2.475 1.632-4 4.646-4 7.91zm31.995-9.13h31.991V91.4H95.987V73.135z"/></svg>
\ No newline at end of file
--- a/src/icons/svg/password.svg
+++ b/src/icons/svg/password.svg
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M108.8 44.322H89.6v-5.36c0-9.04-3.308-24.163-25.6-24.163-23.145 0-25.6 16.881-25.6 24.162v5.361H19.2v-5.36C19.2 15.281 36.798 0 64 0c27.202 0 44.8 15.281 44.8 38.961v5.361zm-32 39.356c0-5.44-5.763-9.832-12.8-9.832-7.037 0-12.8 4.392-12.8 9.832 0 3.682 2.567 6.808 6.407 8.477v11.205c0 2.718 2.875 4.962 6.4 4.962 3.524 0 6.4-2.244 6.4-4.962V92.155c3.833-1.669 6.393-4.795 6.393-8.477zM128 64v49.201c0 8.158-8.645 14.799-19.2 14.799H19.2C8.651 128 0 121.359 0 113.201V64c0-8.153 8.645-14.799 19.2-14.799h89.6c10.555 0 19.2 6.646 19.2 14.799z"/></svg>
\ No newline at end of file
--- a/src/icons/svg/table.svg
+++ b/src/icons/svg/table.svg
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M.006.064h127.988v31.104H.006V.064zm0 38.016h38.396v41.472H.006V38.08zm0 48.384h38.396v41.472H.006V86.464zM44.802 38.08h38.396v41.472H44.802V38.08zm0 48.384h38.396v41.472H44.802V86.464zM89.598 38.08h38.396v41.472H89.598zm0 48.384h38.396v41.472H89.598z"/><path d="M.006.064h127.988v31.104H.006V.064zm0 38.016h38.396v41.472H.006V38.08zm0 48.384h38.396v41.472H.006V86.464zM44.802 38.08h38.396v41.472H44.802V38.08zm0 48.384h38.396v41.472H44.802V86.464zM89.598 38.08h38.396v41.472H89.598zm0 48.384h38.396v41.472H89.598z"/></svg>
\ No newline at end of file
--- a/src/icons/svg/tree.svg
+++ b/src/icons/svg/tree.svg
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M126.713 90.023c.858.985 1.287 2.134 1.287 3.447v29.553c0 1.423-.429 2.6-1.287 3.53-.858.93-1.907 1.395-3.146 1.395H97.824c-1.145 0-2.146-.465-3.004-1.395-.858-.93-1.287-2.107-1.287-3.53V93.47c0-.875.19-1.696.572-2.462.382-.766.906-1.368 1.573-1.806a3.84 3.84 0 0 1 2.146-.657h9.725V69.007a3.84 3.84 0 0 0-.43-1.806 3.569 3.569 0 0 0-1.143-1.313 2.714 2.714 0 0 0-1.573-.492h-36.47v23.149h9.725c1.144 0 2.145.492 3.004 1.478.858.985 1.287 2.134 1.287 3.447v29.553c0 .876-.191 1.696-.573 2.463-.38.766-.905 1.368-1.573 1.806a3.84 3.84 0 0 1-2.145.656H51.915a3.84 3.84 0 0 1-2.145-.656c-.668-.438-1.216-1.04-1.645-1.806a4.96 4.96 0 0 1-.644-2.463V93.47c0-1.313.43-2.462 1.288-3.447.858-.986 1.907-1.478 3.146-1.478h9.582v-23.15h-37.9c-.953 0-1.74.356-2.359 1.068-.62.711-.93 1.56-.93 2.544v19.538h9.726c1.239 0 2.264.492 3.074 1.478.81.985 1.216 2.134 1.216 3.447v29.553c0 1.423-.405 2.6-1.216 3.53-.81.93-1.835 1.395-3.074 1.395H4.29c-.476 0-.93-.082-1.358-.246a4.1 4.1 0 0 1-1.144-.657 4.658 4.658 0 0 1-.93-1.067 5.186 5.186 0 0 1-.643-1.395 5.566 5.566 0 0 1-.215-1.56V93.47c0-.437.048-.875.143-1.313a3.95 3.95 0 0 1 .429-1.15c.19-.328.429-.656.715-.984.286-.329.572-.602.858-.821.286-.22.62-.383 1.001-.493.382-.11.763-.164 1.144-.164h9.726V61.619c0-.985.31-1.833.93-2.544.619-.712 1.358-1.068 2.216-1.068h44.335V39.62h-9.582c-1.24 0-2.288-.492-3.146-1.477a5.09 5.09 0 0 1-1.287-3.448V5.14c0-1.423.429-2.627 1.287-3.612.858-.985 1.907-1.477 3.146-1.477h25.743c.763 0 1.478.246 2.145.739a5.17 5.17 0 0 1 1.573 1.888c.382.766.573 1.587.573 2.462v29.553c0 1.313-.43 2.463-1.287 3.448-.859.985-1.86 1.477-3.004 1.477h-9.725v18.389h42.762c.954 0 1.74.355 2.36 1.067.62.711.93 1.56.93 2.545v26.925h9.582c1.239 0 2.288.492 3.146 1.478z"/></svg>
\ No newline at end of file
--- a/src/icons/svg/user.svg
+++ b/src/icons/svg/user.svg
+<svg width="130" height="130" xmlns="http://www.w3.org/2000/svg"><path d="M63.444 64.996c20.633 0 37.359-14.308 37.359-31.953 0-17.649-16.726-31.952-37.359-31.952-20.631 0-37.36 14.303-37.358 31.952 0 17.645 16.727 31.953 37.359 31.953zM80.57 75.65H49.434c-26.652 0-48.26 18.477-48.26 41.27v2.664c0 9.316 21.608 9.325 48.26 9.325H80.57c26.649 0 48.256-.344 48.256-9.325v-2.663c0-22.794-21.605-41.271-48.256-41.271z" stroke="#979797"/></svg>
\ No newline at end of file
--- a/src/icons/svgo.yml
+++ b/src/icons/svgo.yml
+# replace default config
+# multipass: true
+# full: true
+plugins:
+  # - name
+  #
+  # or:
+  # - name: false
+  # - name: true
+  #
+  # or:
+  # - name:
+  #     param1: 1
+  #     param2: 2
+- removeAttrs:
+    attrs:
+      - 'fill'
+      - 'fill-rule'
--- a/src/layout/RouteView.vue
+++ b/src/layout/RouteView.vue
+<script>
+export default {
+  name: 'RouteView',
+  props: {
+    keepAlive: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {}
+  },
+  render() {
+    const { $route: { meta }, $store: { getters }} = this
+    const inKeep = (
+      <keep-alive>
+        <router-view />
+      </keep-alive>
+    )
+    const notKeep = (
+      <router-view />
+    )
+    // 这里增加了 multiTab 的判断，当开启了 multiTab 时
+    // 应当全部组件皆缓存，否则会导致切换页面后页面还原成原始状态
+    // 若确实不需要，可改为 return meta.keepAlive ? inKeep : notKeep
+    if (!getters.multiTab && !meta.keepAlive) {
+      return notKeep
+    }
+    return this.keepAlive || getters.multiTab || meta.keepAlive ? inKeep : notKeep
+  }
+}
+</script>
--- a/src/layout/components/AppMain.vue
+++ b/src/layout/components/AppMain.vue
+<template>
+  <section class="app-main">
+    <transition name="fade-transform" mode="out-in">
+      <router-view :key="key" />
+    </transition>
+  </section>
+</template>
+<script>
+export default {
+  name: 'AppMain',
+  computed: {
+    key() {
+      return this.$route.path
+    }
+  }
+}
+</script>
+<style scoped>
+.app-main {
+  /*50 = navbar  */
+  min-height: calc(100vh - 50px);
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+}
+.fixed-header+.app-main {
+  padding-top: 50px;
+}
+</style>
+<style lang="scss">
+// fix css style bug in open el-dialog
+.el-popup-parent--hidden {
+  .fixed-header {
+    padding-right: 15px;
+  }
+}
+</style>
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
+<template>
+  <div class="navbar">
+    <hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
+    <breadcrumb class="breadcrumb-container" />
+    <div class="right-menu">
+      <el-dropdown class="avatar-container" trigger="click">
+        <div class="avatar-wrapper">
+          <img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">
+          <i class="el-icon-caret-bottom" />
+        </div>
+        <el-dropdown-menu slot="dropdown" class="user-dropdown">
+          <router-link to="/">
+            <el-dropdown-item>
+              Home
+            </el-dropdown-item>
+          </router-link>
+          <a target="_blank" href="https://github.com/PanJiaChen/vue-admin-template/">
+            <el-dropdown-item>Github</el-dropdown-item>
+          </a>
+          <a target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/#/">
+            <el-dropdown-item>Docs</el-dropdown-item>
+          </a>
+          <el-dropdown-item divided @click.native="logout">
+            <span style="display:block;">Log Out</span>
+          </el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
+    </div>
+  </div>
+</template>
+<script>
+import { mapGetters } from 'vuex'
+import Breadcrumb from '@/components/Breadcrumb'
+import Hamburger from '@/components/Hamburger'
+export default {
+  components: {
+    Breadcrumb,
+    Hamburger
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar',
+      'avatar'
+    ])
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('app/toggleSideBar')
+    },
+    async logout() {
+      await this.$store.dispatch('user/logout')
+      this.$router.push(`/login?redirect=${this.$route.fullPath}`)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.navbar {
+  height: 50px;
+  overflow: hidden;
+  position: relative;
+  background: #fff;
+  box-shadow: 0 1px 4px rgba(0,21,41,.08);
+  .hamburger-container {
+    line-height: 46px;
+    height: 100%;
+    float: left;
+    cursor: pointer;
+    transition: background .3s;
+    -webkit-tap-highlight-color:transparent;
+    &:hover {
+      background: rgba(0, 0, 0, .025)
+    }
+  }
+  .breadcrumb-container {
+    float: left;
+  }
+  .right-menu {
+    float: right;
+    height: 100%;
+    line-height: 50px;
+    &:focus {
+      outline: none;
+    }
+    .right-menu-item {
+      display: inline-block;
+      padding: 0 8px;
+      height: 100%;
+      font-size: 18px;
+      color: #5a5e66;
+      vertical-align: text-bottom;
+      &.hover-effect {
+        cursor: pointer;
+        transition: background .3s;
+        &:hover {
+          background: rgba(0, 0, 0, .025)
+        }
+      }
+    }
+    .avatar-container {
+      margin-right: 30px;
+      .avatar-wrapper {
+        margin-top: 5px;
+        position: relative;
+        .user-avatar {
+          cursor: pointer;
+          width: 40px;
+          height: 40px;
+          border-radius: 10px;
+        }
+        .el-icon-caret-bottom {
+          cursor: pointer;
+          position: absolute;
+          right: -20px;
+          top: 25px;
+          font-size: 12px;
+        }
+      }
+    }
+  }
+}
+</style>
--- a/src/layout/components/Sidebar/FixiOSBug.js
+++ b/src/layout/components/Sidebar/FixiOSBug.js
+export default {
+  computed: {
+    device() {
+      return this.$store.state.app.device
+    }
+  },
+  mounted() {
+    // In order to fix the click on menu on the ios device will trigger the mouseleave bug
+    // https://github.com/PanJiaChen/vue-element-admin/issues/1135
+    this.fixBugIniOS()
+  },
+  methods: {
+    fixBugIniOS() {
+      const $subMenu = this.$refs.subMenu
+      if ($subMenu) {
+        const handleMouseleave = $subMenu.handleMouseleave
+        $subMenu.handleMouseleave = (e) => {
+          if (this.device === 'mobile') {
+            return
+          }
+          handleMouseleave(e)
+        }
+      }
+    }
+  }
+}
--- a/src/layout/components/Sidebar/Item.vue
+++ b/src/layout/components/Sidebar/Item.vue
+<script>
+export default {
+  name: 'MenuItem',
+  functional: true,
+  props: {
+    icon: {
+      type: String,
+      default: ''
+    },
+    title: {
+      type: String,
+      default: ''
+    }
+  },
+  render(h, context) {
+    const { icon, title } = context.props
+    const vnodes = []
+    if (icon) {
+      if (icon.includes('el-icon')) {
+        vnodes.push(<i class={[icon, 'sub-el-icon']} />)
+      } else {
+        vnodes.push(<svg-icon icon-class={icon}/>)
+      }
+    }
+    if (title) {
+      vnodes.push(<span slot='title'>{(title)}</span>)
+    }
+    return vnodes
+  }
+}
+</script>
+<style scoped>
+.sub-el-icon {
+  color: currentColor;
+  width: 1em;
+  height: 1em;
+}
+</style>
--- a/src/layout/components/Sidebar/Link.vue
+++ b/src/layout/components/Sidebar/Link.vue
+<template>
+  <component :is="type" v-bind="linkProps(to)">
+    <slot />
+  </component>
+</template>
+<script>
+import { isExternal } from '@/utils/validate'
+export default {
+  props: {
+    to: {
+      type: String,
+      required: true
+    }
+  },
+  computed: {
+    isExternal() {
+      return isExternal(this.to)
+    },
+    type() {
+      if (this.isExternal) {
+        return 'a'
+      }
+      return 'router-link'
+    }
+  },
+  methods: {
+    linkProps(to) {
+      if (this.isExternal) {
+        return {
+          href: to,
+          target: '_blank',
+          rel: 'noopener'
+        }
+      }
+      return {
+        to: to
+      }
+    }
+  }
+}
+</script>
--- a/src/layout/components/Sidebar/Logo.vue
+++ b/src/layout/components/Sidebar/Logo.vue
+<template>
+  <div class="sidebar-logo-container" :class="{'collapse':collapse}">
+    <transition name="sidebarLogoFade">
+      <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
+        <img v-if="logo" :src="logo" class="sidebar-logo">
+        <h1 v-else class="sidebar-title">{{ title }} </h1>
+      </router-link>
+      <router-link v-else key="expand" class="sidebar-logo-link" to="/">
+        <img v-if="logo" :src="logo" class="sidebar-logo">
+        <h1 class="sidebar-title">{{ title }} </h1>
+      </router-link>
+    </transition>
+  </div>
+</template>
+<script>
+export default {
+  name: 'SidebarLogo',
+  props: {
+    collapse: {
+      type: Boolean,
+      required: true
+    }
+  },
+  data() {
+    return {
+      title: 'Vue Admin Template',
+      logo: 'https://wpimg.wallstcn.com/69a1c46c-eb1c-4b46-8bd4-e9e686ef5251.png'
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.sidebarLogoFade-enter-active {
+  transition: opacity 1.5s;
+}
+.sidebarLogoFade-enter,
+.sidebarLogoFade-leave-to {
+  opacity: 0;
+}
+.sidebar-logo-container {
+  position: relative;
+  width: 100%;
+  height: 50px;
+  line-height: 50px;
+  background: #2b2f3a;
+  text-align: center;
+  overflow: hidden;
+  & .sidebar-logo-link {
+    height: 100%;
+    width: 100%;
+    & .sidebar-logo {
+      width: 32px;
+      height: 32px;
+      vertical-align: middle;
+      margin-right: 12px;
+    }
+    & .sidebar-title {
+      display: inline-block;
+      margin: 0;
+      color: #fff;
+      font-weight: 600;
+      line-height: 50px;
+      font-size: 14px;
+      font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
+      vertical-align: middle;
+    }
+  }
+  &.collapse {
+    .sidebar-logo {
+      margin-right: 0px;
+    }
+  }
+}
+</style>
--- a/src/layout/components/Sidebar/SidebarItem.vue
+++ b/src/layout/components/Sidebar/SidebarItem.vue
+<template>
+  <div v-if="!item.hidden">
+    <template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
+      <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
+        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
+          <item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="onlyOneChild.meta.title" />
+        </el-menu-item>
+      </app-link>
+    </template>
+    <el-submenu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>
+      <template slot="title">
+        <item v-if="item.meta" :icon="item.meta && item.meta.icon" :title="item.meta.title" />
+      </template>
+      <sidebar-item
+        v-for="child in item.children"
+        :key="child.path"
+        :is-nest="true"
+        :item="child"
+        :base-path="resolvePath(child.path)"
+        class="nest-menu"
+      />
+    </el-submenu>
+  </div>
+</template>
+<script>
+import path from 'path'
+import { isExternal } from '@/utils/validate'
+import Item from './Item'
+import AppLink from './Link'
+import FixiOSBug from './FixiOSBug'
+export default {
+  name: 'SidebarItem',
+  components: { Item, AppLink },
+  mixins: [FixiOSBug],
+  props: {
+    // route object
+    item: {
+      type: Object,
+      required: true
+    },
+    isNest: {
+      type: Boolean,
+      default: false
+    },
+    basePath: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    // To fix https://github.com/PanJiaChen/vue-admin-template/issues/237
+    // TODO: refactor with render function
+    this.onlyOneChild = null
+    return {}
+  },
+  methods: {
+    hasOneShowingChild(children = [], parent) {
+      const showingChildren = children.filter(item => {
+        if (item.hidden) {
+          return false
+        } else {
+          // Temp set(will be used if only has one showing child)
+          this.onlyOneChild = item
+          return true
+        }
+      })
+      // When there is only one child router, the child router is displayed by default
+      if (showingChildren.length === 1) {
+        return true
+      }
+      // Show parent if there are no child router to display
+      if (showingChildren.length === 0) {
+        this.onlyOneChild = { ... parent, path: '', noShowingChildren: true }
+        return true
+      }
+      return false
+    },
+    resolvePath(routePath) {
+      if (isExternal(routePath)) {
+        return routePath
+      }
+      if (isExternal(this.basePath)) {
+        return this.basePath
+      }
+      return path.resolve(this.basePath, routePath)
+    }
+  }
+}
+</script>
--- a/src/layout/components/Sidebar/index.vue
+++ b/src/layout/components/Sidebar/index.vue
+<template>
+  <div :class="{'has-logo':showLogo}">
+    <logo v-if="showLogo" :collapse="isCollapse" />
+    <el-scrollbar wrap-class="scrollbar-wrapper">
+      <el-menu
+        :default-active="activeMenu"
+        :collapse="isCollapse"
+        :background-color="variables.menuBg"
+        :text-color="variables.menuText"
+        :unique-opened="false"
+        :active-text-color="variables.menuActiveText"
+        :collapse-transition="false"
+        mode="vertical"
+      >
+        <sidebar-item v-for="route in routes" :key="route.path" :item="route" :base-path="route.path" />
+      </el-menu>
+    </el-scrollbar>
+  </div>
+</template>
+<script>
+import { mapGetters } from 'vuex'
+import Logo from './Logo'
+import SidebarItem from './SidebarItem'
+import variables from '@/styles/variables.scss'
+export default {
+  components: { SidebarItem, Logo },
+  computed: {
+    ...mapGetters([
+      'sidebar',
+      'addRouters'
+    ]),
+    routes() {
+      // return this.$router.options.routes
+      const routes = this.addRouters.find(item => item.path === '/')
+      return (routes && routes.children) || []
+    },
+    activeMenu() {
+      const route = this.$route
+      const { meta, path } = route
+      // if set path, the sidebar will highlight the path you set
+      if (meta.activeMenu) {
+        return meta.activeMenu
+      }
+      return path
+    },
+    showLogo() {
+      return this.$store.state.settings.sidebarLogo
+    },
+    variables() {
+      return variables
+    },
+    isCollapse() {
+      return !this.sidebar.opened
+    }
+  }
+}
+</script>
--- a/src/layout/components/index.js
+++ b/src/layout/components/index.js
+export { default as Navbar } from './Navbar'
+export { default as Sidebar } from './Sidebar'
+export { default as AppMain } from './AppMain'
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
+<template>
+  <div :class="classObj" class="app-wrapper">
+    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
+    <sidebar class="sidebar-container" />
+    <div class="main-container">
+      <div :class="{'fixed-header':fixedHeader}">
+        <navbar />
+      </div>
+      <app-main />
+    </div>
+  </div>
+</template>
+<script>
+import { Navbar, Sidebar, AppMain } from './components'
+import ResizeMixin from './mixin/ResizeHandler'
+export default {
+  name: 'Layout',
+  components: {
+    Navbar,
+    Sidebar,
+    AppMain
+  },
+  mixins: [ResizeMixin],
+  computed: {
+    sidebar() {
+      return this.$store.state.app.sidebar
+    },
+    device() {
+      return this.$store.state.app.device
+    },
+    fixedHeader() {
+      return this.$store.state.settings.fixedHeader
+    },
+    classObj() {
+      return {
+        hideSidebar: !this.sidebar.opened,
+        openSidebar: this.sidebar.opened,
+        withoutAnimation: this.sidebar.withoutAnimation,
+        mobile: this.device === 'mobile'
+      }
+    }
+  },
+  methods: {
+    handleClickOutside() {
+      this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  @import "~@/styles/mixin.scss";
+  @import "~@/styles/variables.scss";
+  .app-wrapper {
+    @include clearfix;
+    position: relative;
+    height: 100%;
+    width: 100%;
+    &.mobile.openSidebar{
+      position: fixed;
+      top: 0;
+    }
+  }
+  .drawer-bg {
+    background: #000;
+    opacity: 0.3;
+    width: 100%;
+    top: 0;
+    height: 100%;
+    position: absolute;
+    z-index: 999;
+  }
+  .fixed-header {
+    position: fixed;
+    top: 0;
+    right: 0;
+    z-index: 9;
+    width: calc(100% - #{$sideBarWidth});
+    transition: width 0.28s;
+  }
+  .hideSidebar .fixed-header {
+    width: calc(100% - 54px)
+  }
+  .mobile .fixed-header {
+    width: 100%;
+  }
+</style>
--- a/src/layout/mixin/ResizeHandler.js
+++ b/src/layout/mixin/ResizeHandler.js
+import store from '@/store'
+const { body } = document
+const WIDTH = 992 // refer to Bootstrap's responsive design
+export default {
+  watch: {
+    $route(route) {
+      if (this.device === 'mobile' && this.sidebar.opened) {
+        store.dispatch('app/closeSideBar', { withoutAnimation: false })
+      }
+    }
+  },
+  beforeMount() {
+    window.addEventListener('resize', this.$_resizeHandler)
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.$_resizeHandler)
+  },
+  mounted() {
+    const isMobile = this.$_isMobile()
+    if (isMobile) {
+      store.dispatch('app/toggleDevice', 'mobile')
+      store.dispatch('app/closeSideBar', { withoutAnimation: true })
+    }
+  },
+  methods: {
+    // use $_ for mixins properties
+    // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
+    $_isMobile() {
+      const rect = body.getBoundingClientRect()
+      return rect.width - 1 < WIDTH
+    },
+    $_resizeHandler() {
+      if (!document.hidden) {
+        const isMobile = this.$_isMobile()
+        store.dispatch('app/toggleDevice', isMobile ? 'mobile' : 'desktop')
+        if (isMobile) {
+          store.dispatch('app/closeSideBar', { withoutAnimation: true })
+        }
+      }
+    }
+  }
+}
--- a/src/layouts/BasicLayout.vue
+++ b/src/layouts/BasicLayout.vue
-<template>
-  <pro-layout
-    v-model:collapsed="state.collapsed"
-    v-model:selectedKeys="state.selectedKeys"
-    v-model:openKeys="state.openKeys"
-    :loading="loading"
-    :menu-data="menuData"
-    :breadcrumb="{ routes: breadcrumb }"
-    disable-content-margin
-    style="min-height: 100vh"
-    iconfont-url="//at.alicdn.com/t/font_2804900_2sp8hxw3ln8.js"
-    v-bind="proConfig"
-  >
-    <template #menuHeaderRender>
-      <router-link :to="{ path: '/' }">
-        <img src="https://alicdn.antdv.com/v2/assets/logo.1ef800a8.svg" />
-        <h1>Preview Pro</h1>
-      </router-link>
-    </template>
-    <template #rightContentRender>
-      <RightContent :current-user="currentUser" />
-    </template>
-    <!-- custom breadcrumb itemRender  -->
-    <template #breadcrumbRender="{ route, params, routes }">
-      <span v-if="routes.indexOf(route) === routes.length - 1">
-        <HeartOutlined />
-        {{ route.breadcrumbName }}
-      </span>
-      <router-link v-else :to="{ path: route.path, params }">
-        <SmileOutlined />
-        {{ route.breadcrumbName }}
-      </router-link>
-    </template>
-    <SettingDrawer v-model="proConfig" />
-    <RouterView v-slot="{ Component, route }">
-      <transition name="slide-left" mode="out-in">
-        <component :is="Component" :key="route.path" />
-      </transition>
-    </RouterView>
-  </pro-layout>
-</template>
-<script setup lang="ts">
-import { useRouter, RouterView, RouterLink } from 'vue-router';
-import { getMenuData, clearMenuItem, type RouteContextProps } from '@ant-design-vue/pro-layout';
-import { SmileOutlined, HeartOutlined } from '@ant-design/icons-vue';
-const router = useRouter();
-const { menuData } = getMenuData(clearMenuItem(router.getRoutes()));
-const state = reactive<Omit<RouteContextProps, 'menuData'>>({
-  collapsed: false, // default collapsed
-  openKeys: [], // defualt openKeys
-  selectedKeys: [], // default selectedKeys
-});
-const loading = ref(false);
-const proConfig = ref({
-  layout: 'mix',
-  navTheme: 'light',
-  fixedHeader: true,
-  fixSiderbar: true,
-  splitMenus: true,
-});
-const breadcrumb = computed(() =>
-  router.currentRoute.value.matched.concat().map(item => {
-    return {
-      path: item.path,
-      breadcrumbName: item.meta.title || '',
-    };
-  }),
-);
-const currentUser = reactive({
-  nickname: 'Admin',
-  avatar: 'A',
-});
-watch(
-  router.currentRoute,
-  () => {
-    const matched = router.currentRoute.value.matched.concat();
-    state.selectedKeys = matched.filter(r => r.name !== 'index').map(r => r.path);
-    state.openKeys = matched.filter(r => r.path !== router.currentRoute.value.path).map(r => r.path);
-  },
-  {
-    immediate: true,
-  },
-);
-</script>
--- a/src/layouts/NestedLayout.vue
+++ b/src/layouts/NestedLayout.vue
-<template>
-  <pro-layout
-    v-model:selectedKeys="baseState.selectedKeys"
-    v-model:openKeys="baseState.openKeys"
-    collapsed
-    :loading="loading"
-    :breadcrumb="{ routes: breadcrumb }"
-    :header-render="false"
-    :fix-siderbar="true"
-    :collapsed-button-render="false"
-    :menu-data="routes"
-    disable-content-margin
-    style="min-height: 100vh"
-    iconfont-url="//at.alicdn.com/t/font_2804900_2sp8hxw3ln8.js"
-  >
-    <template #menuHeaderRender>
-      <a>
-        <img src="/favicon.svg" />
-      </a>
-    </template>
-    <WaterMark :content="watermarkContent">
-      <pro-layout
-        v-model:collapsed="baseState.collapsed"
-        v-model:selectedKeys="baseState.childrenSelectedKeys"
-        v-model:openKeys="baseState.childrenOpenKeys"
-        nav-theme="light"
-        :menu-header-render="false"
-        :menu-data="cachedMap[currentRouteKey]"
-        :fix-siderbar="true"
-        :is-children-layout="true"
-        style="min-height: 100vh"
-        disable-content-margin
-      >
-        <!-- custom right-content -->
-        <template #rightContentRender>
-          <div style="margin-right: 12px">
-            <a-avatar shape="square" size="small">
-              <template #icon>
-                <UserOutlined />
-              </template>
-            </a-avatar>
-          </div>
-        </template>
-        <template #headerContentRender>
-          <div style="height: 100%; display: flex; align-items: center">
-            <a-breadcrumb>
-              <a-breadcrumb-item v-for="item of breadcrumb" :key="item.path">
-                <router-link :to="{ path: item.path, item: item.params }">
-                  {{ item.breadcrumbName }}
-                </router-link>
-              </a-breadcrumb-item>
-            </a-breadcrumb>
-          </div>
-        </template>
-        <!-- content begin -->
-        <router-view v-slot="{ Component }">
-          <component :is="Component" />
-        </router-view>
-      </pro-layout>
-    </WaterMark>
-  </pro-layout>
-</template>
-<script setup lang="ts">
-import { computed, reactive, ref, watchEffect, onMounted } from 'vue';
-import { useRouter, type RouteRecordRaw, type RouteRecordName } from 'vue-router';
-import { Avatar as AAvatar, Breadcrumb as ABreadcrumb, BreadcrumbItem as ABreadcrumbItem } from 'ant-design-vue';
-import { getMenuData, clearMenuItem, WaterMark } from '@ant-design-vue/pro-layout';
-import { UserOutlined } from '@ant-design/icons-vue';
-import type { RouteContextProps } from '@ant-design-vue/pro-layout';
-const loading = ref(false);
-const watermarkContent = ref('Pro Layout');
-const router = useRouter();
-const currentRouteKey = computed(() => router.currentRoute.value.matched.concat()[1].name);
-const { menuData } = getMenuData(clearMenuItem(router.getRoutes()));
-// flat menus
-const routes = menuData.map(item => {
-  return {
-    ...item,
-    children: null,
-  };
-});
-const cachedMap = menuData.reduce((pre, cur) => {
-  const key = cur.name || cur.path;
-  const child = cur.children || [];
-  pre[key] = child;
-  return pre;
-}, {} as Record<RouteRecordName, RouteRecordRaw>);
-console.log('cachedMap', cachedMap);
-const baseState = reactive<Omit<RouteContextProps, 'menuData'>>({
-  selectedKeys: ['/welcome'],
-  openKeys: [],
-  childrenSelectedKeys: [],
-  childrenOpenKeys: [],
-  collapsed: false,
-});
-const breadcrumb = computed(() =>
-  router.currentRoute.value.matched.concat().map(item => {
-    return {
-      path: item.path,
-      icon: item.meta.icon,
-      params: item.meta?.params,
-      breadcrumbName: item.meta.title || '',
-    };
-  }),
-);
-watchEffect(() => {
-  if (router.currentRoute) {
-    const matched = router.currentRoute.value.matched.concat();
-    baseState.selectedKeys = matched.filter(r => r.name !== 'index').map(r => r.path);
-    baseState.childrenSelectedKeys = matched.filter(r => r.name !== 'index').map(r => r.path);
-    baseState.childrenOpenKeys = matched.filter(r => r.path !== router.currentRoute.value.path).map(r => r.path);
-  }
-});
-onMounted(() => {
-  loading.value = true;
-  new Promise<string>(resolve => {
-    setTimeout(() => {
-      resolve('Sendya <18x@loacg.com>');
-    }, 2000);
-  }).then(res => {
-    watermarkContent.value = res;
-    loading.value = false;
-  });
-});
-</script>
--- a/src/main.js
+++ b/src/main.js
+import Vue from 'vue'
+import 'normalize.css/normalize.css' // A modern alternative to CSS resets
+import ElementUI from 'element-ui'
+import 'element-ui/lib/theme-chalk/index.css'
+import locale from 'element-ui/lib/locale/lang/en' // lang i18n
+import '@/styles/index.scss' // global css
+import App from './App'
+import store from './store'
+import router from './router'
+import '@/icons' // icon
+import '@/permission' // permission control
+/**
+ * If you don't want to use mock-server
+ * you want to use MockJs for mock api
+ * you can execute: mockXHR()
+ *
+ * Currently MockJs will be used in the production environment,
+ * please remove it before going online ! ! !
+ */
+if (process.env.NODE_ENV === 'production') {
+  const { mockXHR } = require('../mock')
+  mockXHR()
+}
+// set ElementUI lang to EN
+Vue.use(ElementUI, { locale })
+// 如果想要中文版 element-ui，按如下方式声明
+// Vue.use(ElementUI)
+Vue.config.productionTip = false
+new Vue({
+  el: '#app',
+  router,
+  store,
+  render: h => h(App)
+})
--- a/src/main.ts
+++ b/src/main.ts
-import '@ant-design-vue/pro-layout/dist/style.css';
-import 'ant-design-vue/dist/antd.variable.min.css';
-import { createApp } from 'vue';
-import { ConfigProvider } from 'ant-design-vue';
-import ProLayout, { PageContainer } from '@ant-design-vue/pro-layout';
-import router from './router';
-import App from './App.vue';
-createApp(App).use(router).use(ConfigProvider).use(ProLayout).use(PageContainer).mount('#app');
--- a/src/permission.js
+++ b/src/permission.js
+import router, { resetRouter } from './router'
+import store from './store'
+// import { Message } from 'element-ui'
+import NProgress from 'nprogress' // progress bar
+import 'nprogress/nprogress.css' // progress bar style
+import { getToken } from '@/utils/auth' // get token from cookie
+import getPageTitle from '@/utils/get-page-title'
+NProgress.configure({ showSpinner: false }) // NProgress Configuration
+const whiteList = ['/login'] // no redirect whitelist
+router.beforeEach(async(to, from, next) => {
+  // start progress bar
+  NProgress.start()
+  // set page title
+  document.title = getPageTitle(to.meta.title)
+  // determine whether the user has logged in
+  const hasToken = getToken()
+  if (hasToken) {
+    if (to.path === '/login') {
+      // if is logged in, redirect to the home page
+      next({ path: '/' })
+      NProgress.done()
+    } else {
+      if (!store.getters.menuSet) {
+        store.dispatch('GenerateRoutes', {}).then(() => {
+          // 动态添加可访问路由表
+          // VueRouter@3.5.0+ New API
+          resetRouter() // 重置路由 防止退出重新登录或者 token 过期后页面未刷新，导致的路由重复添加
+          // const addRouters = store.getters.addRouters
+          // for (const r of addRouters) {
+          //   router.addRoutes(r)
+          // }
+          router.addRoutes(store.getters.addRouters)
+          // 请求带有 redirect 重定向时，登录自动重定向到该地址
+          const redirect = decodeURIComponent(from.query.redirect || to.path)
+          if (to.path === redirect) {
+            // set the replace: true so the navigation will not leave a history record
+            next({ ...to, replace: true })
+          } else {
+            // 跳转到目的路由
+            next({ path: redirect })
+          }
+        })
+      } else {
+        next()
+      }
+    }
+  } else {
+    /* has no token*/
+    if (whiteList.indexOf(to.path) !== -1) {
+      // in the free login whitelist, go directly
+      next()
+    } else {
+      // other pages that do not have permission to access are redirected to the login page.
+      next(`/login?redirect=${to.path}`)
+      NProgress.done()
+    }
+  }
+})
+router.afterEach(() => {
+  // finish progress bar
+  NProgress.done()
+})
--- a/src/router/config.js
+++ b/src/router/config.js
+import RouteView from '@/layout/RouteView'
+// 路由表
+export const constantRouterPath = {
+  'Dashboard': '/dashboard',
+  'System': '/system',
+  'SystemPower': '/system_power',
+  'SystemPowerRoleList': '/system_power_role_list',
+  'SystemPowerUserList': '/system_power_user_list',
+  'SystemPowerMenuList': '/system_power_menu_list'
+}
+// 路由对应页面
+export const constantRouterComponents = {
+  // 权限管理
+  // SystemPowerRoleList: () => import('@/views/system/power/role/List'),
+  // UserList: () => import('@/views/power/user/list'),
+  'RouteView': RouteView,
+  'Dashboard': () => import('@/views/dashboard/index'),
+  'SystemPowerMenuList': () => import('@/views/system/power/menu/List')
+}
--- a/src/router/generator-routers.js
+++ b/src/router/generator-routers.js
+import * as userService from '@/api/user'
+import { constantRouterComponents, constantRouterPath } from '@/router/config'
+import Layout from '@/layout'
+// 前端未找到页面路由（固定不用改）
+const notFoundRouter = {
+  path: '*',
+  redirect: '/404',
+  hidden: true
+}
+// 根级菜单
+const rootRouter = {
+  path: '/',
+  key: 'Root',
+  component: Layout,
+  redirect: '/dashboard',
+  children: [{
+    path: 'dashboard',
+    key: 'Dashboard',
+    title: '首页',
+    icon: 'dashboard',
+    component: () => import('@/views/dashboard/index')
+  }]
+}
+/**
+ * 动态生成菜单
+ * @param token
+ * @returns {Promise<Router>}
+ */
+export const generatorDynamicRouter = () => {
+  return new Promise((resolve, reject) => {
+    userService
+      .getConfigs()
+      .then(res => {
+        const menus = res.data.menus
+        const menuNav = []
+        const childrenNav = []
+        //      后端数据, 根级树数组,  根级 PID
+        listToTree(menus, childrenNav, 0)
+        rootRouter.children = [...rootRouter.children, ...childrenNav]
+        menuNav.push(rootRouter)
+        const routers = generator(menuNav)
+        console.log(routers)
+        // const routers = []
+        routers.push(notFoundRouter)
+        resolve(routers)
+      })
+      .catch(err => {
+        reject(err)
+      })
+  })
+}
+/**
+ * 格式化树形结构数据 生成 vue-router 层级路由表
+ *
+ * @param routerMap
+ * @param parent
+ * @returns {*}
+ */
+export const generator = (routerMap, parent) => {
+  return routerMap.map(item => {
+    // const { show, hideChildren, hiddenHeaderContent, target, icon } = item.meta || {}
+    const path = item.path || (constantRouterPath[item.key] ?? '/')
+    const component = item.component || constantRouterComponents[item.key]
+    const currentRouter = {
+      // 如果路由设置了 path，则作为默认 path，否则 路由地址 动态拼接生成如 /dashboard/workplace
+      path: path,
+      // 路由名称，建议唯一
+      name: item.key + (item.id || ''),
+      // 该路由对应页面的 组件 :方案1
+      // component: constantRouterComponents[item.component || item.key],
+      // 该路由对应页面的 组件 :方案2 (动态加载)
+      component: component,
+      // meta: 页面标题, 菜单图标, 页面权限(供指令权限用，可去掉)
+      meta: {
+        title: item.title,
+        icon: item.icon
+      }
+    }
+    // // 是否设置了隐藏菜单
+    // if (show === false) {
+    //   currentRouter.hidden = true
+    // }
+    // // 是否设置了隐藏子菜单
+    // if (hideChildren) {
+    //   currentRouter.hideChildrenInMenu = true
+    // }
+    // // 为了防止出现后端返回结果不规范，处理有可能出现拼接出两个 反斜杠
+    // if (!currentRouter.path.startsWith('http')) {
+    //   currentRouter.path = currentRouter.path.replace('//', '/')
+    // }
+    // 重定向
+    item.redirect && (currentRouter.redirect = item.redirect)
+    // 是否有子菜单，并递归处理
+    if (item.children && item.children.length > 0) {
+      // Recursion
+      currentRouter.children = generator(item.children, currentRouter)
+      if (item.key !== 'Root') {
+        currentRouter.component = constantRouterComponents['RouteView']
+      }
+    }
+    return currentRouter
+  })
+}
+/**
+ * 数组转树形结构
+ * @param list 源数组
+ * @param tree 树
+ * @param parentId 父ID
+ */
+const listToTree = (list, tree, parentId) => {
+  list.forEach(item => {
+    // 判断是否为父级菜单
+    if (item.parent_id === parentId) {
+      const child = {
+        ...item,
+        // key: item.key || item.name,
+        children: []
+      }
+      // 迭代 list， 找到当前菜单相符合的所有子菜单
+      listToTree(list, child.children, item.id)
+      // 删掉不存在 children 值的属性
+      if (child.children.length <= 0) {
+        delete child.children
+      }
+      // 加入到树中
+      tree.push(child)
+    }
+  })
+}
--- a/src/router/index.js
+++ b/src/router/index.js
+import Vue from 'vue'
+import Router from 'vue-router'
+Vue.use(Router)
+/* Layout */
+/**
+ * Note: sub-menu only appear when route children.length >= 1
+ * Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
+ *
+ * hidden: true                   if set true, item will not show in the sidebar(default is false)
+ * alwaysShow: true               if set true, will always show the root menu
+ *                                if not set alwaysShow, when item has more than one children route,
+ *                                it will becomes nested mode, otherwise not show the root menu
+ * redirect: noRedirect           if set noRedirect will no redirect in the breadcrumb
+ * name:'router-name'             the name is used by <keep-alive> (must set!!!)
+ * meta : {
+    roles: ['admin','editor']    control the page roles (you can set multiple roles)
+    title: 'title'               the name show in sidebar and breadcrumb (recommend set)
+    icon: 'svg-name'/'el-icon-x' the icon show in the sidebar
+    breadcrumb: false            if set false, the item will hidden in breadcrumb(default is true)
+    activeMenu: '/example/list'  if set path, the sidebar will highlight the path you set
+  }
+ */
+/**
+ * constantRoutes
+ * a base page that does not have permission requirements
+ * all roles can be accessed
+ */
+export const constantRouterMap = [
+  {
+    path: '/login',
+    component: () => import('@/views/login/index'),
+    hidden: true
+  },
+  {
+    path: '/404',
+    component: () => import('@/views/404'),
+    hidden: true
+  }
+]
+const createRouter = () => new Router({
+  // mode: 'history', // require service support
+  scrollBehavior: () => ({ y: 0 }),
+  routes: constantRouterMap
+})
+const router = createRouter()
+// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
+export function resetRouter() {
+  const newRouter = createRouter()
+  router.matcher = newRouter.matcher // reset router
+}
+export default router
--- a/src/router/index.ts
+++ b/src/router/index.ts
-import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router';
-import BasicLayout from '../layouts/BasicLayout.vue';
-import BlankLayout from '../layouts/BlankLayout.vue';
-import WelcomePage from '../views/Page1.vue';
-// only githubpages preview site used, if use template please remove this check
-// and use `createWebHistory` is recommend
-const hasGithubPages = import.meta.env.VITE_GHPAGES;
-export default createRouter({
-  history: hasGithubPages ? createWebHashHistory() : createWebHistory(),
-  routes: [
-    {
-      path: '/',
-      name: 'index',
-      meta: { title: 'Home' },
-      component: BasicLayout,
-      redirect: '/welcome',
-      children: [
-        {
-          path: '/welcome',
-          name: 'welcome',
-          meta: { title: '欢迎', icon: 'icon-icon-test' },
-          component: WelcomePage,
-        },
-        {
-          path: '/admins',
-          name: 'admins',
-          meta: { title: '管理页', icon: 'icon-tuijian', flat: true },
-          component: BlankLayout,
-          redirect: () => ({ name: 'page1' }),
-          children: [
-            {
-              path: 'page-1',
-              name: 'page1',
-              meta: { title: '一级页面' },
-              component: () => import('../views/admins/PageInfo.vue'),
-            },
-            {
-              path: 'page-2',
-              name: 'page2',
-              meta: { title: '二级页面' },
-              component: () => import('../views/admins/PageTypography.vue'),
-            },
-            {
-              path: 'dynamic-match/:id(\\d+)',
-              name: 'dynamic-match',
-              // 路由 path 默认参数再 meta.params 里
-              meta: { title: '动态参数页面', params: { id: 1 } },
-              component: () => import('../views/admins/DynamicMatch.vue'),
-            },
-          ],
-        },
-        {
-          path: '/version',
-          name: 'version',
-          meta: { title: 'Version', icon: 'icon-antdesign' },
-          component: () => import('../views/Detail.vue'),
-        },
-      ],
-    },
-  ],
-});
--- a/src/settings.js
+++ b/src/settings.js
+module.exports = {
+  title: 'Vue Admin Template',
+  /**
+   * @type {boolean} true | false
+   * @description Whether fix the header
+   */
+  fixedHeader: false,
+  /**
+   * @type {boolean} true | false
+   * @description Whether show the logo in sidebar
+   */
+  sidebarLogo: false
+}
--- a/src/store/getters.js
+++ b/src/store/getters.js
+const getters = {
+  sidebar: state => state.app.sidebar,
+  device: state => state.app.device,
+  token: state => state.user.token,
+  avatar: state => state.user.avatar,
+  name: state => state.user.name,
+  addRouters: state => state.permission.addRouters,
+  multiTab: state => state.app.multiTab,
+  menuSet: state => state.permission.menuSet
+}
+export default getters
--- a/src/store/index.js
+++ b/src/store/index.js
+import Vue from 'vue'
+import Vuex from 'vuex'
+import getters from './getters'
+import app from './modules/app'
+import settings from './modules/settings'
+import user from './modules/user'
+import permission from './modules/async-router'
+Vue.use(Vuex)
+const store = new Vuex.Store({
+  modules: {
+    app,
+    settings,
+    user,
+    permission
+  },
+  getters
+})
+export default store
--- a/src/store/modules/app.js
+++ b/src/store/modules/app.js
+import Cookies from 'js-cookie'
+const state = {
+  sidebar: {
+    opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true,
+    withoutAnimation: false
+  },
+  device: 'desktop'
+}
+const mutations = {
+  TOGGLE_SIDEBAR: state => {
+    state.sidebar.opened = !state.sidebar.opened
+    state.sidebar.withoutAnimation = false
+    if (state.sidebar.opened) {
+      Cookies.set('sidebarStatus', 1)
+    } else {
+      Cookies.set('sidebarStatus', 0)
+    }
+  },
+  CLOSE_SIDEBAR: (state, withoutAnimation) => {
+    Cookies.set('sidebarStatus', 0)
+    state.sidebar.opened = false
+    state.sidebar.withoutAnimation = withoutAnimation
+  },
+  TOGGLE_DEVICE: (state, device) => {
+    state.device = device
+  }
+}
+const actions = {
+  toggleSideBar({ commit }) {
+    commit('TOGGLE_SIDEBAR')
+  },
+  closeSideBar({ commit }, { withoutAnimation }) {
+    commit('CLOSE_SIDEBAR', withoutAnimation)
+  },
+  toggleDevice({ commit }, device) {
+    commit('TOGGLE_DEVICE', device)
+  }
+}
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}
--- a/src/store/modules/async-router.js
+++ b/src/store/modules/async-router.js
+/**
+ * 向后端请求用户的菜单，动态生成路由
+ */
+import { constantRouterMap } from '@/router'
+import { generatorDynamicRouter } from '@/router/generator-routers'
+const permission = {
+  state: {
+    routers: constantRouterMap,
+    addRouters: [],
+    menuSet: false
+  },
+  mutations: {
+    SET_ROUTERS: (state, routers) => {
+      state.addRouters = routers
+      state.routers = constantRouterMap.concat(routers)
+    },
+    SET_MENU_SET: (state, flag) => {
+      state.menuSet = flag
+    }
+  },
+  actions: {
+    GenerateRoutes({ commit }) {
+      return new Promise((resolve, reject) => {
+        generatorDynamicRouter().then(routers => {
+          commit('SET_ROUTERS', routers)
+          commit('SET_MENU_SET', true)
+          resolve()
+        }).catch(e => {
+          reject(e)
+        })
+      })
+    }
+  }
+}
+export default permission
--- a/src/store/modules/settings.js
+++ b/src/store/modules/settings.js
+import defaultSettings from '@/settings'
+const { showSettings, fixedHeader, sidebarLogo } = defaultSettings
+const state = {
+  showSettings: showSettings,
+  fixedHeader: fixedHeader,
+  sidebarLogo: sidebarLogo
+}
+const mutations = {
+  CHANGE_SETTING: (state, { key, value }) => {
+    // eslint-disable-next-line no-prototype-builtins
+    if (state.hasOwnProperty(key)) {
+      state[key] = value
+    }
+  }
+}
+const actions = {
+  changeSetting({ commit }, data) {
+    commit('CHANGE_SETTING', data)
+  }
+}
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}
--- a/src/store/modules/user.js
+++ b/src/store/modules/user.js
+import { login, logout, getInfo } from '@/api/user'
+import { getToken, setToken, removeToken } from '@/utils/auth'
+import { resetRouter } from '@/router'
+const getDefaultState = () => {
+  return {
+    token: getToken(),
+    name: '',
+    avatar: ''
+  }
+}
+const state = getDefaultState()
+const mutations = {
+  RESET_STATE: (state) => {
+    Object.assign(state, getDefaultState())
+  },
+  SET_TOKEN: (state, token) => {
+    state.token = token
+  },
+  SET_NAME: (state, name) => {
+    state.name = name
+  },
+  SET_AVATAR: (state, avatar) => {
+    state.avatar = avatar
+  }
+}
+const actions = {
+  // user login
+  login({ commit }, userInfo) {
+    const { username, password } = userInfo
+    return new Promise((resolve, reject) => {
+      login({ username: username.trim(), password: password }).then(response => {
+        const { data } = response
+        commit('SET_TOKEN', data.access_token)
+        setToken(data.access_token)
+        resolve()
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  // get user info
+  getInfo({ commit, state }) {
+    return new Promise((resolve, reject) => {
+      getInfo(state.token).then(response => {
+        const { data } = response
+        if (!data) {
+          return reject('Verification failed, please Login again.')
+        }
+        const { name, avatar } = data
+        commit('SET_NAME', name)
+        commit('SET_AVATAR', avatar)
+        resolve(data)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  // user logout
+  logout({ commit, state }) {
+    return new Promise((resolve, reject) => {
+      logout(state.token).then(() => {
+        removeToken() // must remove  token  first
+        resetRouter()
+        commit('RESET_STATE')
+        resolve()
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  // remove token
+  resetToken({ commit }) {
+    return new Promise(resolve => {
+      removeToken() // must remove  token  first
+      commit('RESET_STATE')
+      resolve()
+    })
+  }
+}
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}
--- a/src/styles/element-ui.scss
+++ b/src/styles/element-ui.scss
+// cover some element-ui styles
+.el-breadcrumb__inner,
+.el-breadcrumb__inner a {
+  font-weight: 400 !important;
+}
+.el-upload {
+  input[type="file"] {
+    display: none !important;
+  }
+}
+.el-upload__input {
+  display: none;
+}
+// to fixed https://github.com/ElemeFE/element/issues/2461
+.el-dialog {
+  transform: none;
+  left: 0;
+  position: relative;
+  margin: 0 auto;
+}
+// refine element ui upload
+.upload-container {
+  .el-upload {
+    width: 100%;
+    .el-upload-dragger {
+      width: 100%;
+      height: 200px;
+    }
+  }
+}
+// dropdown
+.el-dropdown-menu {
+  a {
+    display: block
+  }
+}
+// to fix el-date-picker css style
+.el-range-separator {
+  box-sizing: content-box;
+}
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
+@import './variables.scss';
+@import './mixin.scss';
+@import './transition.scss';
+@import './element-ui.scss';
+@import './sidebar.scss';
+body {
+  height: 100%;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
+}
+label {
+  font-weight: 700;
+}
+html {
+  height: 100%;
+  box-sizing: border-box;
+}
+#app {
+  height: 100%;
+}
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+a:focus,
+a:active {
+  outline: none;
+}
+a,
+a:focus,
+a:hover {
+  cursor: pointer;
+  color: inherit;
+  text-decoration: none;
+}
+div:focus {
+  outline: none;
+}
+.clearfix {
+  &:after {
+    visibility: hidden;
+    display: block;
+    font-size: 0;
+    content: " ";
+    clear: both;
+    height: 0;
+  }
+}
+// main-container global css
+.app-container {
+  padding: 20px;
+}
--- a/src/styles/mixin.scss
+++ b/src/styles/mixin.scss
+@mixin clearfix {
+  &:after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+}
+@mixin scrollBar {
+  &::-webkit-scrollbar-track-piece {
+    background: #d3dce6;
+  }
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+  &::-webkit-scrollbar-thumb {
+    background: #99a9bf;
+    border-radius: 20px;
+  }
+}
+@mixin relative {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
--- a/src/styles/sidebar.scss
+++ b/src/styles/sidebar.scss
+#app {
+  .main-container {
+    min-height: 100%;
+    transition: margin-left .28s;
+    margin-left: $sideBarWidth;
+    position: relative;
+  }
+  .sidebar-container {
+    transition: width 0.28s;
+    width: $sideBarWidth !important;
+    background-color: $menuBg;
+    height: 100%;
+    position: fixed;
+    font-size: 0px;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 1001;
+    overflow: hidden;
+    // reset element-ui css
+    .horizontal-collapse-transition {
+      transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
+    }
+    .scrollbar-wrapper {
+      overflow-x: hidden !important;
+    }
+    .el-scrollbar__bar.is-vertical {
+      right: 0px;
+    }
+    .el-scrollbar {
+      height: 100%;
+    }
+    &.has-logo {
+      .el-scrollbar {
+        height: calc(100% - 50px);
+      }
+    }
+    .is-horizontal {
+      display: none;
+    }
+    a {
+      display: inline-block;
+      width: 100%;
+      overflow: hidden;
+    }
+    .svg-icon {
+      margin-right: 16px;
+    }
+    .sub-el-icon {
+      margin-right: 12px;
+      margin-left: -2px;
+    }
+    .el-menu {
+      border: none;
+      height: 100%;
+      width: 100% !important;
+    }
+    // menu hover
+    .submenu-title-noDropdown,
+    .el-submenu__title {
+      &:hover {
+        background-color: $menuHover !important;
+      }
+    }
+    .is-active>.el-submenu__title {
+      color: $subMenuActiveText !important;
+    }
+    & .nest-menu .el-submenu>.el-submenu__title,
+    & .el-submenu .el-menu-item {
+      min-width: $sideBarWidth !important;
+      background-color: $subMenuBg !important;
+      &:hover {
+        background-color: $subMenuHover !important;
+      }
+    }
+  }
+  .hideSidebar {
+    .sidebar-container {
+      width: 54px !important;
+    }
+    .main-container {
+      margin-left: 54px;
+    }
+    .submenu-title-noDropdown {
+      padding: 0 !important;
+      position: relative;
+      .el-tooltip {
+        padding: 0 !important;
+        .svg-icon {
+          margin-left: 20px;
+        }
+        .sub-el-icon {
+          margin-left: 19px;
+        }
+      }
+    }
+    .el-submenu {
+      overflow: hidden;
+      &>.el-submenu__title {
+        padding: 0 !important;
+        .svg-icon {
+          margin-left: 20px;
+        }
+        .sub-el-icon {
+          margin-left: 19px;
+        }
+        .el-submenu__icon-arrow {
+          display: none;
+        }
+      }
+    }
+    .el-menu--collapse {
+      .el-submenu {
+        &>.el-submenu__title {
+          &>span {
+            height: 0;
+            width: 0;
+            overflow: hidden;
+            visibility: hidden;
+            display: inline-block;
+          }
+        }
+      }
+    }
+  }
+  .el-menu--collapse .el-menu .el-submenu {
+    min-width: $sideBarWidth !important;
+  }
+  // mobile responsive
+  .mobile {
+    .main-container {
+      margin-left: 0px;
+    }
+    .sidebar-container {
+      transition: transform .28s;
+      width: $sideBarWidth !important;
+    }
+    &.hideSidebar {
+      .sidebar-container {
+        pointer-events: none;
+        transition-duration: 0.3s;
+        transform: translate3d(-$sideBarWidth, 0, 0);
+      }
+    }
+  }
+  .withoutAnimation {
+    .main-container,
+    .sidebar-container {
+      transition: none;
+    }
+  }
+}
+// when menu collapsed
+.el-menu--vertical {
+  &>.el-menu {
+    .svg-icon {
+      margin-right: 16px;
+    }
+    .sub-el-icon {
+      margin-right: 12px;
+      margin-left: -2px;
+    }
+  }
+  .nest-menu .el-submenu>.el-submenu__title,
+  .el-menu-item {
+    &:hover {
+      // you can use $subMenuHover
+      background-color: $menuHover !important;
+    }
+  }
+  // the scroll bar appears when the subMenu is too long
+  >.el-menu--popup {
+    max-height: 100vh;
+    overflow-y: auto;
+    &::-webkit-scrollbar-track-piece {
+      background: #d3dce6;
+    }
+    &::-webkit-scrollbar {
+      width: 6px;
+    }
+    &::-webkit-scrollbar-thumb {
+      background: #99a9bf;
+      border-radius: 20px;
+    }
+  }
+}
--- a/src/styles/transition.scss
+++ b/src/styles/transition.scss
+// global transition css
+/* fade */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.28s;
+}
+.fade-enter,
+.fade-leave-active {
+  opacity: 0;
+}
+/* fade-transform */
+.fade-transform-leave-active,
+.fade-transform-enter-active {
+  transition: all .5s;
+}
+.fade-transform-enter {
+  opacity: 0;
+  transform: translateX(-30px);
+}
+.fade-transform-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}
+/* breadcrumb transition */
+.breadcrumb-enter-active,
+.breadcrumb-leave-active {
+  transition: all .5s;
+}
+.breadcrumb-enter,
+.breadcrumb-leave-active {
+  opacity: 0;
+  transform: translateX(20px);
+}
+.breadcrumb-move {
+  transition: all .5s;
+}
+.breadcrumb-leave-active {
+  position: absolute;
+}
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
+// sidebar
+$menuText:#bfcbd9;
+$menuActiveText:#409EFF;
+$subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951
+$menuBg:#304156;
+$menuHover:#263445;
+$subMenuBg:#1f2d3d;
+$subMenuHover:#001528;
+$sideBarWidth: 210px;
+// the :export directive is the magic sauce for webpack
+// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
+:export {
+  menuText: $menuText;
+  menuActiveText: $menuActiveText;
+  subMenuActiveText: $subMenuActiveText;
+  menuBg: $menuBg;
+  menuHover: $menuHover;
+  subMenuBg: $subMenuBg;
+  subMenuHover: $subMenuHover;
+  sideBarWidth: $sideBarWidth;
+}
--- a/src/utils/auth.js
+++ b/src/utils/auth.js
+import Cookies from 'js-cookie'
+const TokenKey = 'access_token'
+export function getToken() {
+  return Cookies.get(TokenKey)
+}
+export function setToken(token) {
+  return Cookies.set(TokenKey, token)
+}
+export function removeToken() {
+  return Cookies.remove(TokenKey)
+}
--- a/src/utils/get-page-title.js
+++ b/src/utils/get-page-title.js
+import defaultSettings from '@/settings'
+const title = defaultSettings.title || 'Vue Admin Template'
+export default function getPageTitle(pageTitle) {
+  if (pageTitle) {
+    return `${pageTitle} - ${title}`
+  }
+  return `${title}`
+}
--- a/src/utils/index.js
+++ b/src/utils/index.js
--- a/src/utils/request.js
+++ b/src/utils/request.js
--- a/src/utils/util.js
+++ b/src/utils/util.js
--- a/src/utils/validate.js
+++ b/src/utils/validate.js
--- a/src/views/404.vue
+++ b/src/views/404.vue
--- a/src/views/Detail.vue
+++ b/src/views/Detail.vue
--- a/src/views/Page1.vue
+++ b/src/views/Page1.vue
--- a/src/views/Page2.vue
+++ b/src/views/Page2.vue
--- a/src/views/admins/DynamicMatch.vue
+++ b/src/views/admins/DynamicMatch.vue
--- a/src/views/admins/PageInfo.vue
+++ b/src/views/admins/PageInfo.vue
--- a/src/views/admins/PageTypography.vue
+++ b/src/views/admins/PageTypography.vue
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
--- a/src/views/form/index.vue
+++ b/src/views/form/index.vue
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
--- a/src/layouts/BlankLayout.vue
+++ b/src/layouts/BlankLayout.vue
--- a/src/views/nested/menu1/menu1-1/index.vue
+++ b/src/views/nested/menu1/menu1-1/index.vue
--- a/src/views/nested/menu1/menu1-2/index.vue
+++ b/src/views/nested/menu1/menu1-2/index.vue
--- a/src/views/nested/menu1/menu1-2/menu1-2-1/index.vue
+++ b/src/views/nested/menu1/menu1-2/menu1-2-1/index.vue
--- a/src/views/nested/menu1/menu1-2/menu1-2-2/index.vue
+++ b/src/views/nested/menu1/menu1-2/menu1-2-2/index.vue
--- a/src/views/nested/menu1/menu1-3/index.vue
+++ b/src/views/nested/menu1/menu1-3/index.vue
--- a/src/views/nested/menu2/index.vue
+++ b/src/views/nested/menu2/index.vue
--- a/src/views/system/power/menu/List.vue
+++ b/src/views/system/power/menu/List.vue
--- a/src/views/system/power/role/List.vue
+++ b/src/views/system/power/role/List.vue
--- a/src/views/table/index.vue
+++ b/src/views/table/index.vue
--- a/src/views/tree/index.vue
+++ b/src/views/tree/index.vue
--- a/tests/unit/.eslintrc.js
+++ b/tests/unit/.eslintrc.js
--- a/tests/unit/components/Breadcrumb.spec.js
+++ b/tests/unit/components/Breadcrumb.spec.js
--- a/tests/unit/components/Hamburger.spec.js
+++ b/tests/unit/components/Hamburger.spec.js
--- a/tests/unit/components/SvgIcon.spec.js
+++ b/tests/unit/components/SvgIcon.spec.js
--- a/tests/unit/utils/formatTime.spec.js
+++ b/tests/unit/utils/formatTime.spec.js
--- a/tests/unit/utils/param2Obj.spec.js
+++ b/tests/unit/utils/param2Obj.spec.js
--- a/tests/unit/utils/parseTime.spec.js
+++ b/tests/unit/utils/parseTime.spec.js
--- a/tests/unit/utils/validate.spec.js
+++ b/tests/unit/utils/validate.spec.js
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
--- a/tsconfig.json
+++ b/tsconfig.json
--- a/tsconfig.vite-config.json
+++ b/tsconfig.vite-config.json
--- a/vite.config.ts
+++ b/vite.config.ts
--- a/vue.config.js
+++ b/vue.config.js