chore: release 2.9.0

Co-authored-by: whong <whif@foxmail.com>

.editorconfig

@@ -6,8 +6,9 @@ end_of_line=lf
 insert_final_newline=true
 indent_style=space
 indent_size=2
+max_line_length = 100
 
-[*.yml]
+[*.{yml,yaml,json}]
 indent_style = space
 indent_size = 2
 

.env

@@ -5,4 +5,4 @@ VITE_PORT = 3100
 VITE_GLOB_APP_TITLE = Vben Admin
 
 # spa shortname
-VITE_GLOB_APP_SHORT_NAME = vue_vben_admin_2x
+VITE_GLOB_APP_SHORT_NAME = vue_vben_admin

.env.development

@@ -1,5 +1,3 @@
-VITE_PORT = 3100
-
 # Whether to open mock
 VITE_USE_MOCK = true
 
@@ -7,14 +5,15 @@ VITE_USE_MOCK = true
 VITE_PUBLIC_PATH = /
 
 # Cross-domain proxy, you can configure multiple
-VITE_PROXY=[["/api","http://localhost:3000"],["/upload","http://localhost:3001/upload"]]
+# Please note that no line breaks
+VITE_PROXY = [["/basic-api","http://localhost:3000"],["/upload","http://localhost:3300/upload"]]
 # VITE_PROXY=[["/api","https://vvbin.cn/test"]]
 
 # Delete console
 VITE_DROP_CONSOLE = false
 
 # Basic interface address SPA
-VITE_GLOB_API_URL=/api
+VITE_GLOB_API_URL=/basic-api
 
 # File upload address， optional
 VITE_GLOB_UPLOAD_URL=/upload

.env.production

@@ -7,13 +7,16 @@ VITE_PUBLIC_PATH = /
 # Delete console
 VITE_DROP_CONSOLE = true
 
-# Whether to enable gizp or brotli compression
+# Whether to enable gzip or brotli compression
 # Optional: gzip | brotli | none
 # If you need multiple forms, you can use `,` to separate
 VITE_BUILD_COMPRESS = 'none'
 
+# Whether to delete origin files when using compress, default false
+VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE = false
+
 # Basic interface address SPA
-VITE_GLOB_API_URL=/api
+VITE_GLOB_API_URL=/basic-api
 
 # File upload address， optional
 # It can be forwarded by nginx or write the actual address directly

.env.test

@@ -0,0 +1,36 @@
+NODE_ENV=production
+# Whether to open mock
+VITE_USE_MOCK = true
+
+# public path
+VITE_PUBLIC_PATH = /
+
+# Delete console
+VITE_DROP_CONSOLE = true
+
+# Whether to enable gzip or brotli compression
+# Optional: gzip | brotli | none
+# If you need multiple forms, you can use `,` to separate
+VITE_BUILD_COMPRESS = 'none'
+
+# Whether to delete origin files when using compress, default false
+VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE = false
+
+# Basic interface address SPA
+VITE_GLOB_API_URL=/basic-api
+
+# File upload address， optional
+# It can be forwarded by nginx or write the actual address directly
+VITE_GLOB_UPLOAD_URL=/upload
+
+# Interface prefix
+VITE_GLOB_API_URL_PREFIX=
+
+# Whether to enable image compression
+VITE_USE_IMAGEMIN= true
+
+# use pwa
+VITE_USE_PWA = false
+
+# Is it compatible with older browsers
+VITE_LEGACY = false

.eslintrc.js

@@ -1,21 +1,27 @@
 module.exports = {
+  root: true,
+  env: {
+    browser: true,
+    node: true,
+    es6: true,
+  },
   parser: 'vue-eslint-parser',
   parserOptions: {
     parser: '@typescript-eslint/parser',
     ecmaVersion: 2020,
     sourceType: 'module',
+    jsxPragma: 'React',
     ecmaFeatures: {
       jsx: true,
     },
   },
-
   extends: [
     'plugin:vue/vue3-recommended',
     'plugin:@typescript-eslint/recommended',
-    'prettier/@typescript-eslint',
     'plugin:prettier/recommended',
   ],
   rules: {
+    'vue/script-setup-uses-vars': 'error',
     '@typescript-eslint/ban-ts-ignore': 'off',
     '@typescript-eslint/explicit-function-return-type': 'off',
     '@typescript-eslint/no-explicit-any': 'off',
@@ -31,15 +37,15 @@ module.exports = {
     '@typescript-eslint/no-unused-vars': [
       'error',
       {
-        argsIgnorePattern: '^h$',
-        varsIgnorePattern: '^h$',
+        argsIgnorePattern: '^_',
+        varsIgnorePattern: '^_',
       },
     ],
     'no-unused-vars': [
       'error',
       {
-        argsIgnorePattern: '^h$',
-        varsIgnorePattern: '^h$',
+        argsIgnorePattern: '^_',
+        varsIgnorePattern: '^_',
       },
     ],
     'space-before-function-paren': 'off',
@@ -51,8 +57,8 @@ module.exports = {
     'vue/multiline-html-element-content-newline': 'off',
     'vue/singleline-html-element-content-newline': 'off',
     'vue/attribute-hyphenation': 'off',
-    // 'vue/html-self-closing': 'off',
     'vue/require-default-prop': 'off',
+    'vue/require-explicit-emits': 'off',
     'vue/html-self-closing': [
       'error',
       {
@@ -65,5 +71,6 @@ module.exports = {
         math: 'always',
       },
     ],
+    'vue/multi-word-component-names': 'off',
   },
 };

.gitattributes

@@ -0,0 +1,11 @@
+# https://docs.github.com/cn/get-started/getting-started-with-git/configuring-git-to-handle-line-endings
+
+# Automatically normalize line endings (to LF) for all text-based files.
+* text=auto eol=lf
+
+# Declare files that will always have CRLF line endings on checkout.
+*.{cmd,[cC][mM][dD]} text eol=crlf
+*.{bat,[bB][aA][tT]} text eol=crlf
+
+# Denote all files that are truly binary and should not be modified.
+*.{ico,png,jpg,jpeg,gif,webp,svg,woff,woff2} binary

.github/ISSUE_TEMPLATE/1-bug.md

@@ -1,39 +1,39 @@
 ---
 name: 🐛 Bug report
 about: Create a report to help us improve
-labels: 🔍 status/open, 🐛 type/bug
+title: ''
+labels: 'bug: pending triage'
+assignees: ''
 ---
 
 <!--
+抱歉，您遇到了一个错误。感谢您抽出宝贵的时间进行举报！
+
+请尽可能填写以下模板。
+
 Ouch, sorry you’ve run into a bug.  Thank for taking the time to report it!
 
 Please fill in as much of the template below as you’re able.
 
 P.S. have you seen our support and contributing docs?
-https://github.com/get-alex/.github/blob/master/support.md
-https://github.com/get-alex/.github/blob/master/contributing.md
 -->
 
-### Subject of the issue
+**⚠️ IMPORTANT ⚠️ Please check the following list before proceeding. If you ignore this issue template, your issue will be directly closed.**
 
-Describe your issue here.
+- [ ] Read [the docs](https://anncwb.github.io/vue-vben-admin-doc/).
+- [ ] Make sure the code is up to date. (Some bugs have been fixed in the latest code)
+- [ ] This is a concrete bug. For Q&A open a [GitHub Discussion](https://github.com/anncwb/vue-vben-admin/discussions) or join our [Discord](https://discord.gg/8GuAdwDhj6) Chat Server.
 
-### Your environment
+### Describe the bug
 
-- **OS**: <!-- Name and version of operating system -->
-- **Packages**: <!-- Names and version of required packages -->
-- **Env**: <!-- Version of node, npm, yarn, or names and versions of browser -->
+A clear and concise description of what the bug is..
 
-### Steps to reproduce
+### Reproduction
 
-Tell us how to reproduce this issue. Please provide a working and simplified example.
+Please describe the steps of the problem in detail to ensure that we can restore the correct problem
 
-🎉 BONUS POINTS for creating a [minimal reproduction](https://stackoverflow.com/help/mcve) and uploading it to GitHub. This will get you the fastest support. 🎉
+## System Info
 
-### Expected behaviour
-
-What should happen?
-
-### Actual behaviour
-
-What happens instead?
+- Operating System:
+- Node version:
+- Package manager (npm/yarn/pnpm) and version:

.github/ISSUE_TEMPLATE/2-feature.md

@@ -1,12 +1,16 @@
 ---
 name: 🚀 Feature request
 about: Suggest an idea for this project
-labels: 🔍 status/open, 🦋 type/enhancement
+title: ''
+labels: ''
+assignees: ''
 ---
 
 <!--
-Thank you for suggesting an idea to make this project better!
+感谢您提出使这个项目更好的想法！
+请尽可能填写以下模板。
 
+Thank you for suggesting an idea to make this project better!
 Please fill in as much of the template below as you’re able.
 
 -->

.github/ISSUE_TEMPLATE/3-bug-cn.md

@@ -0,0 +1,28 @@
+---
+name: 🐛 Bug 报告
+about: 向我们报告一个Bug以帮助我们改进
+title: ''
+labels: 'bug: pending triage'
+assignees: ''
+---
+
+**⚠️ 重要 ⚠️ 在进一步操作之前，请检查下列选项。如果您忽视此模板或者没有提供关键信息，您的 Issue 将直接被关闭**
+
+- [ ] 已阅读 [文档](https://anncwb.github.io/vue-vben-admin-doc/).
+- [ ] 确保您的代码已是最新或者所报告的 Bug 在最新版本中可以重现. (部分 Bug 可能已经在最近的代码中修复)
+- [ ] 已在 Issues 中搜索了相关的关键词
+- [ ] 不是 ant design vue 组件库的 Bug
+
+### 描述 Bug
+
+请清晰地描述此 Bug 的具体表现。
+
+### 复现 Bug
+
+请描述在演示页面中复现 Bug 的详细步骤，以确保我们可以理解并定位问题。部分 Bug 如果未在 Demo 中涉及，请务必提供关键代码
+
+## 系统信息
+
+- 操作系统:
+- Node 版本:
+- 包管理器 (npm/yarn/pnpm) 及其版本:

.github/ISSUE_TEMPLATE/3-help.md

@@ -1,15 +0,0 @@
----
-name: Question 🤔
-about: Usage question or discussion about alex.
-labels: 🔍 status/open, 🙋 type/question
----
-
-<!--
-To make it easier for us to help you, please include as much useful information
-as possible.
-
-Before opening a new issue, please search existing issues:
-https://github.com/search?q=org%3Aget-alex&type=Issues
-
-
--->

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,8 @@
+blank_issues_enabled: false
+contact_links:
+  - name: Discord Chat
+    url: https://discord.gg/8GuAdwDhj6
+    about: Ask questions and discuss with other Vben users in real time.
+  - name: Questions & Discussions
+    url: https://github.com/anncwb/vue-vben-admin/discussions
+    about: Use GitHub discussions for message-board style questions and discussions.

.github/workflows/deploy.yml

@@ -6,17 +6,118 @@ on:
       - main
 
 jobs:
-  build-deploy:
-    runs-on: ubuntu-latest
+  # push-to-ftp:
+  #   if: "contains(github.event.head_commit.message, '[deploy]')"
+  #   runs-on: ubuntu-latest
+  #   steps:
+  #     - name: Checkout
+  #       uses: actions/checkout@v2
 
+  #     - name: Sed Config Base
+  #       shell: bash
+  #       run: |
+  #         sed -i  's#VITE_PUBLIC_PATH\s*=.*#VITE_PUBLIC_PATH = /next/#g' ./.env.production
+  #         sed -i  "s#VITE_BUILD_COMPRESS\s*=.*#VITE_BUILD_COMPRESS = 'gzip'#g" ./.env.production
+  #         cat ./.env.production
+
+  #     - name: use Node.js 14
+  #       uses: actions/setup-node@v2.1.2
+  #       with:
+  #         node-version: '14.x'
+
+  #     - name: Get yarn cache
+  #       id: yarn-cache
+  #       run: echo "::set-output name=dir::$(yarn cache dir)"
+
+  #     - name: Cache dependencies
+  #       uses: actions/cache@v2
+  #       with:
+  #         path: ${{ steps.yarn-cache.outputs.dir }}
+  #         key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+  #         restore-keys: |
+  #           ${{ runner.os }}-yarn-
+
+  #     - name: Build
+  #       run: |
+  #         yarn install
+  #         yarn run build
+
+  #     - name: Deploy
+  #       uses: SamKirkland/FTP-Deploy-Action@2.0.0
+  #       env:
+  #         FTP_SERVER: ${{ secrets.FTP_SERVER }}
+  #         FTP_USERNAME: ${{ secrets.FTP_USERNAME }}
+  #         FTP_PASSWORD: ${{ secrets.FTP_PASSWORD }}
+  #         METHOD: sftp
+  #         PORT: ${{ secrets.FTP_PORT }}
+  #         LOCAL_DIR: dist
+  #         REMOTE_DIR: /srv/www/vben-admin
+  #         ARGS: --delete --verbose --parallel=80
+
+  push-to-gh-pages:
+    runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v1
-      - run: npm install
-      - run: npm run build
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Sed Config Base
+        shell: bash
+        run: |
+          sed -i  "s#VITE_BUILD_COMPRESS\s*=.*#VITE_BUILD_COMPRESS = 'gzip'#g" ./.env.production
+          sed -i  "s#VITE_DROP_CONSOLE\s*=.*#VITE_DROP_CONSOLE = true#g" ./.env.production
+          cat ./.env.production
+
+      - name: use Node.js 16
+        uses: actions/setup-node@v3
+        with:
+          node-version: '16.x'
+
+      - name: Get yarn cache directory path
+        id: yarn-cache-dir-path
+        run: echo "dir=$(yarn cache dir)" >> $GITHUB_OUTPUT
+
+      - name: Cache dependencies
+        uses: actions/cache@v3
+        with:
+          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+
+      - name: Set SSH Environment
+        env:
+          DOCS_DEPLOY_KEY: ${{ secrets.ACTIONS_DEPLOY_KEY }}
+        run: |
+          mkdir -p ~/.ssh/
+          echo "$ACTIONS_DEPLOY_KEY" > ~/.ssh/id_rsa
+          chmod 600 ~/.ssh/id_rsa
+          ssh-keyscan github.com > ~/.ssh/known_hosts
+          chmod 700 ~/.ssh && chmod 600 ~/.ssh/*
+          git config --global user.email "vbenadmin@163.com"
+          git config --global user.name "vbenAdmin"
+
+      - name: Build
+        env:
+          NODE_OPTIONS: "--max_old_space_size=4096"
+        run: |
+          yarn install
+          yarn run build
+          touch dist/.nojekyll
+          cp dist/index.html dist/404.html
+
+      - name: Delete gh-pages branch
+        run: |
+          git push origin --delete gh-pages
 
       - name: Deploy
-        uses: peaceiris/actions-gh-pages@v2.5.0
-        env:
-          ACTIONS_DEPLOY_KEY: ${{secrets.ACTIONS_DEPLOY_KEY}}
+        uses: peaceiris/actions-gh-pages@v3.9.0
+        with:
+          deploy_key: ${{ secrets.ACTIONS_DEPLOY_KEY }}
           PUBLISH_BRANCH: gh-pages
-          PUBLISH_DIR: dist
+          PUBLISH_DIR: ./dist
+          CNAME: vben.vvbin.cn
+
+
+
+
+

.github/workflows/issue-close-require.yml

@@ -0,0 +1,17 @@
+name: Issue Close Require
+
+on:
+  schedule:
+    - cron: '0 0 * * *'
+
+jobs:
+  close-issues:
+    runs-on: ubuntu-latest
+    steps:
+      - name: need reproduction
+        uses: actions-cool/issues-helper@v2.1.1
+        with:
+          actions: 'close-issues'
+          token: ${{ secrets.OPER_TOKEN }}
+          labels: 'need reproduction'
+          inactive-day: 3

.github/workflows/issue-labeled.yml

@@ -0,0 +1,29 @@
+name: Issue Labeled
+
+on:
+  issues:
+    types: [labeled]
+
+jobs:
+  reply-labeled:
+    runs-on: ubuntu-latest
+    steps:
+      - name: remove pending
+        if: github.event.label.name == 'enhancement' || github.event.label.name == 'bug'
+        uses: actions-cool/issues-helper@v2.1.1
+        with:
+          actions: 'remove-labels'
+          token: ${{ secrets.OPER_TOKEN }}
+          issue-number: ${{ github.event.issue.number }}
+          labels: 'bug: pending triage'
+
+      - name: need reproduction
+        if: github.event.label.name == 'need reproduction'
+        uses: actions-cool/issues-helper@v2.1.1
+        with:
+          actions: 'create-comment, remove-labels'
+          token: ${{ secrets.OPER_TOKEN }}
+          issue-number: ${{ github.event.issue.number }}
+          body: |
+            Hello @${{ github.event.issue.user.login }}. Please provide the complete reproduction steps and code. Issues labeled by `need reproduction` will be closed if no activities in 3 days.
+          labels: 'bug: pending triage'

.github/workflows/release.yml

@@ -1,4 +1,4 @@
-name: Release
+name: Create Release
 
 on:
   push:
@@ -6,10 +6,19 @@ on:
       - v*
 
 jobs:
-  release:
+  build:
+    name: Create Release
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - run: npx conventional-github-releaser -p angular
+      - name: Checkout code
+        uses: actions/checkout@master
+
+      - name: Create Release for Tag
+        id: release_tag
+        uses: yyx990803/release-tag@master
         env:
-          CONVENTIONAL_GITHUB_RELEASER_TOKEN: ${{secrets.GITHUB_TOKEN}}
+          GITHUB_TOKEN: ${{ secrets.OPER_TOKEN }}
+        with:
+          tag_name: ${{ github.ref }}
+          body: |
+            Please refer to [CHANGELOG.md](https://github.com/anncwb/vue-vben-admin/blob/main/CHANGELOG.md) for details.

.gitignore

@@ -4,12 +4,14 @@ dist
 .npmrc
 .cache
 
-test/upload-server/static
+tests/server/static
+tests/server/static/upload
 
 .local
 # local env files
 .env.local
 .env.*.local
+.eslintcache
 
 # Log files
 npm-debug.log*
@@ -25,3 +27,8 @@ pnpm-debug.log*
 *.njsproj
 *.sln
 *.sw?
+
+package-lock.json
+pnpm-lock.yaml
+
+.history

.gitpod.yml

@@ -0,0 +1,6 @@
+ports:
+  - port: 3344
+    onOpen: open-preview
+tasks:
+  - init: pnpm install
+    command: pnpm run dev

.husky/.gitignore

@@ -1 +0,0 @@
-_

.husky/commit-msg

@@ -3,4 +3,6 @@
 # shellcheck source=./_/husky.sh
 . "$(dirname "$0")/_/husky.sh"
 
+PATH="/usr/local/bin:$PATH"
+
 npx --no-install commitlint --edit "$1"

.husky/lintstagedrc.js

@@ -1,8 +0,0 @@
-module.exports = {
-  '*.{js,jsx,ts,tsx}': ['eslint --fix', 'prettier --write'],
-  '{!(package)*.json,*.code-snippets,.!(browserslist)*rc}': ['prettier --write--parser json'],
-  'package.json': ['prettier --write'],
-  '*.vue': ['prettier --write', 'stylelint --fix'],
-  '*.{scss,less,styl,css,html}': ['stylelint --fix', 'prettier --write'],
-  '*.md': ['prettier --write'],
-};

.husky/pre-commit

@@ -4,11 +4,7 @@
 
 [ -n "$CI" ] && exit 0
 
-# Check the file name
-# ! ls-lint cannot be used normally in mac pro of M1 system.
-npm run lint:ls-lint
+PATH="/usr/local/bin:$PATH"
 
 # Format and submit code according to lintstagedrc.js configuration
 npm run lint:lint-staged
-
-npm run lint:pretty

.ls-lint.yml

@@ -1,23 +0,0 @@
-ls:
-  src/*:
-    .js: kebab-case | PascalCase
-    .vue: PascalCase | regex:^index
-    .ts: camelCase | PascalCase
-    .tsx: camelCase | PascalCase
-    .d.ts: kebab-case
-    .mock.ts: kebab-case
-    .data.ts: camelCase | kebab-case
-    .test-d.ts: kebab-case
-    .less: kebab-case | PascalCase
-    .spec.ts: camelCase | PascalCase
-
-ignore:
-  - node_modules
-  - .git
-  - .circleci
-  - .github
-  - .vscode
-  - .idea
-  - dist
-  - .local
-  - .husky

.stylelintignore

@@ -1,2 +1,3 @@
 /dist/*
 /public/*
+public/*

.vscode/extensions.json

@@ -1,14 +1,13 @@
 {
   "recommendations": [
-    "octref.vetur",
+    "vue.volar",
     "dbaeumer.vscode-eslint",
     "stylelint.vscode-stylelint",
     "esbenp.prettier-vscode",
     "mrmlnc.vscode-less",
-    "antfu.i18n-ally",
+    "lokalise.i18n-ally",
     "antfu.iconify",
     "mikestead.dotenv",
-    "bradlc.vscode-tailwindcss",
     "heybourn.headwind"
   ]
 }

.vscode/i18n-ally-reviews.yml

@@ -1,5 +0,0 @@
-# Review comments generated by i18n-ally. Please commit this file.
-
-reviews:
-  sys.login.autoLogin:
-    description: '1'

.vscode/launch.json

@@ -8,6 +8,6 @@
       "url": "http://localhost:3100",
       "webRoot": "${workspaceFolder}/src",
       "sourceMaps": true
-    },
+    }
   ]
 }

.vscode/settings.json

@@ -2,56 +2,9 @@
   "typescript.tsdk": "./node_modules/typescript/lib",
   "volar.tsPlugin": true,
   "volar.tsPluginStatus": false,
-  //===========================================
-  //============= Editor ======================
-  //===========================================
-  "explorer.openEditors.visible": 0,
-  "editor.minimap.renderCharacters": false,
-  "editor.minimap.maxColumn": 300,
-  "editor.minimap.showSlider": "always",
-  "editor.smoothScrolling": true,
-  "editor.cursorBlinking": "phase",
-  "editor.cursorSmoothCaretAnimation": true,
-  "editor.detectIndentation": false,
-  "diffEditor.ignoreTrimWhitespace": false,
-  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
-  "editor.formatOnPaste": true,
-  "editor.formatOnSave": true,
-  "editor.suggestSelection": "first",
-  "editor.trimAutoWhitespace": true,
-  "editor.quickSuggestions": {
-    "other": true,
-    "comments": true,
-    "strings": true
-  },
-  //===========================================
-  //============= Other =======================
-  //===========================================
-  "breadcrumbs.enabled": true,
-  "open-in-browser.default": "chrome",
-  //===========================================
-  //============= emmet =======================
-  //===========================================
-  "emmet.triggerExpansionOnTab": true,
-  "emmet.showAbbreviationSuggestions": true,
-  "emmet.showExpandedAbbreviation": "always",
-  "emmet.syntaxProfiles": {
-    "vue-html": "html",
-    "vue": "html",
-    "javascript": "javascriptreact",
-    "xml": {
-      "attr_quotes": "single"
-    }
-  },
-  "emmet.includeLanguages": {
-    "jsx-sublime-babel-tags": "javascriptreact"
-  },
-  //===========================================
-  //============= files =======================
-  //===========================================
-  "files.trimTrailingWhitespace": true,
-  "files.insertFinalNewline": true,
-  "files.trimFinalNewlines": true,
+  "npm.packageManager": "pnpm",
+  "editor.tabSize": 2,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
   "files.eol": "\n",
   "search.exclude": {
     "**/node_modules": true,
@@ -74,12 +27,16 @@
     "CHANGELOG.md": true,
     "examples": true,
     "res": true,
-    "screenshots": true
+    "screenshots": true,
+    "yarn-error.log": true,
+    "**/.yarn": true
   },
   "files.exclude": {
+    "**/.cache": true,
+    "**/.editorconfig": true,
+    "**/.eslintcache": true,
     "**/bower_components": true,
     "**/.idea": true,
-    "**/yarn.lock": true,
     "**/tmp": true,
     "**/.git": true,
     "**/.svn": true,
@@ -88,7 +45,6 @@
     "**/.DS_Store": true
   },
   "files.watcherExclude": {
-    // 文件监视排除
     "**/.git/objects/**": true,
     "**/.git/subtree-cache/**": true,
     "**/.vscode/**": true,
@@ -98,69 +54,11 @@
     "**/dist/**": true,
     "**/yarn.lock": true
   },
-  "files.associations": {
-    "*.vue": "vue",
-    "*.wxss": "css"
-  },
   "stylelint.enable": true,
-  "stylelint.packageManager": "yarn",
-  "css.validate": true,
-  "less.validate": true,
-  "scss.validate": true,
-  // ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
-  // ===========================================
-  // ================ Eslint ===================
-  // ===========================================
-  // "eslint.enable": true,
-  "eslint.alwaysShowStatus": true,
-  "eslint.options": {
-    // 配置
-    "plugins": ["html", "vue", "javascript", "jsx", "typescript"],
-    "extensions": [".js", ".jsx", ".ts", ".tsx", ".vue"]
-  },
-  "eslint.validate": [
-    "javascript",
-    "typescript",
-    "reacttypescript",
-    "reactjavascript",
-    "html",
-    "vue"
-  ],
-  // "eslint.autoFixOnSave": true,
-  // ===========================================
-  // ================ Vetur ====================
-  // ===========================================
-  "vetur.experimental.templateInterpolationService": true,
-  "vetur.format.options.tabSize": 2,
-  "vetur.format.defaultFormatter.html": "js-beautify-html",
-  "vetur.format.defaultFormatter.scss": "prettier",
-  "vetur.format.defaultFormatter.css": "prettier",
-  "vetur.format.defaultFormatter.ts": "prettier-tslint",
-  "vetur.format.defaultFormatter.js": "prettier",
-  "vetur.languageFeatures.codeActions": false,
-  "vetur.format.defaultFormatterOptions": {
-    "js-beautify-html": {
-      "wrap_attributes": "force-expand-multiline"
-    },
-    "prettier": {
-      "eslintIntegration": true,
-      "arrowParens": "always",
-      "semi": false,
-      "singleQuote": true
-    }
-  },
-  "javascript.updateImportsOnFileMove.enabled": "never",
-  "liveServer.settings.donotShowInfoMsg": true,
-  "terminal.integrated.rendererType": "dom",
-  "telemetry.enableCrashReporter": false,
-  "telemetry.enableTelemetry": false,
-  "workbench.settings.enableNaturalLanguageSearch": false,
+  "stylelint.validate": ["css", "less", "postcss", "scss", "vue", "sass"],
   "path-intellisense.mappings": {
     "/@/": "${workspaceRoot}/src"
   },
-  "prettier.requireConfig": true,
-  "typescript.updateImportsOnFileMove.enabled": "always",
-  "workbench.sideBar.location": "left",
   "[javascriptreact]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
@@ -188,12 +86,85 @@
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": true
   },
+  "[vue]": {
+    "editor.codeActionsOnSave": {
+      "source.fixAll.eslint": true,
+      "source.fixAll.stylelint": true
+    }
+  },
   "i18n-ally.localesPaths": ["src/locales/lang"],
   "i18n-ally.keystyle": "nested",
   "i18n-ally.sortKeys": true,
   "i18n-ally.namespace": true,
   "i18n-ally.pathMatcher": "{locale}/{namespaces}.{ext}",
   "i18n-ally.enabledParsers": ["ts"],
-  "i18n-ally.sourceLanguage": "zh",
-  "i18n-ally.enabledFrameworks": ["vue", "react"]
+  "i18n-ally.sourceLanguage": "en",
+  "i18n-ally.displayLanguage": "zh-CN",
+  "i18n-ally.enabledFrameworks": ["vue", "react"],
+  "cSpell.words": [
+    "vben",
+    "windi",
+    "browserslist",
+    "tailwindcss",
+    "esnext",
+    "antv",
+    "tinymce",
+    "qrcode",
+    "sider",
+    "pinia",
+    "sider",
+    "nprogress",
+    "INTLIFY",
+    "stylelint",
+    "esno",
+    "vitejs",
+    "sortablejs",
+    "mockjs",
+    "codemirror",
+    "iconify",
+    "commitlint",
+    "vditor",
+    "echarts",
+    "cropperjs",
+    "logicflow",
+    "vueuse",
+    "zxcvbn",
+    "lintstagedrc",
+    "brotli",
+    "tailwindcss",
+    "sider",
+    "pnpm",
+    "antd"
+  ],
+  "vetur.format.scriptInitialIndent": true,
+  "vetur.format.styleInitialIndent": true,
+  "vetur.validation.script": false,
+  "MicroPython.executeButton": [
+    {
+      "text": "▶",
+      "tooltip": "运行",
+      "alignment": "left",
+      "command": "extension.executeFile",
+      "priority": 3.5
+    }
+  ],
+  "MicroPython.syncButton": [
+    {
+      "text": "$(sync)",
+      "tooltip": "同步",
+      "alignment": "left",
+      "command": "extension.execute",
+      "priority": 4
+    }
+  ],
+  // 控制相关文件嵌套展示
+  "explorer.fileNesting.enabled": true,
+  "explorer.fileNesting.expand": false,
+  "explorer.fileNesting.patterns": {
+    "*.ts": "$(capture).test.ts, $(capture).test.tsx",
+    "*.tsx": "$(capture).test.ts, $(capture).test.tsx",
+    "*.env": "$(capture).env.*",
+    "package.json": "pnpm-lock.yaml,yarn.lock,LICENSE,README*,CHANGELOG*,CNAME,.gitattributes,.gitignore,prettier.config.js,stylelint.config.js,commitlint.config.js,.stylelintignore,.prettierignore,.gitpod.yml,.eslintrc.js,.eslintignore"
+  },
+  "terminal.integrated.scrollback": 10000
 }

.yarnclean

@@ -1,48 +0,0 @@
-# test directories
-__tests__
-test
-tests
-powered-test
-
-# asset directories
-docs
-doc
-website
-images
-assets
-
-# examples
-example
-examples
-
-# code coverage directories
-coverage
-.nyc_output
-
-# build scripts
-Makefile
-Gulpfile.js
-Gruntfile.js
-
-# configs
-appveyor.yml
-circle.yml
-codeship-services.yml
-codeship-steps.yml
-wercker.yml
-.tern-project
-.gitattributes
-.editorconfig
-.*ignore
-.eslintrc
-.jshintrc
-.flowconfig
-.documentup.json
-.yarn-metadata.json
-.travis.yml
-
-# misc
-*.md
-
-!istanbul-reports/lib/html/assets
-!istanbul-api/node_modules/istanbul-reports/lib/html/assets

CHANGELOG.en_US.md

@@ -1,3 +1,541 @@
+## 2.8.0(2021-11.03)
+
+### Upgrade Instructions
+
+- Package manager changed from `yarn` to `pnpm`
+- Delete `node_modules` and `yarn.lock`, install `pnpm` globally
+- Execute `pnpm install`
+
+### ✨ Features
+
+- **Others**
+  - The `VITE_PROXY` configuration in the `.env` file supports single quotes
+  - Remove warnings during build
+
+### 🐛 Bug Fixes
+
+- **BasicTable**
+  - Fix the issue that editable cells cannot be submitted in some cases
+  - Fix the problem that the `inset` attribute does not work
+  - Fix the problem that the performance of `useTable` and `reload` method `await` of `BasicTable` instance are inconsistent
+  - Fix the issue that `clickToRowSelect` would ignore the disabled state of the row selection box
+  - Fix the problem that the page of `BasicTable` will be reset in some cases
+  - Modify the `deleteTableDataRecord` method
+- **BasicModal**
+  - Fixed the problem that `Modal` could not be closed even when clicking on the mask and pressing the `Esc` key
+  - Fixed the issue that clicking the close button and the blank area next to the maximize button would also cause `Modal` to close
+- **BasicTree** Fix the problem that the node slot does not work
+- **CodeEditor** Fix the problem that may cause `Build` failure
+- **BasicForm** Fix the problem that the content width of the custom FormItem component may be out of range
+- **ApiTreeSelect** Fix the problem that the change of `params` failed to trigger the re-request of api data
+- **Others** -Fixed an issue where multiple tabs would not jump to routing when closing tabs in some cases
+  - Fix the issue that some components may cause abnormal hot update
+  - Fix the problem that some sub-components of `antdv` will be reported in the build process when directly `import` part of the `antdv`, such as: TabPane, RadioGroup
+
+## 2.7.2(2021-09-14)
+
+### ✨ Features
+
+- **BasicForm** New `Divider` in the form component for dividing the area of longer forms
+- **BasicTable**
+  - Cell editor adds submit callback, which will decide whether to submit data to the form based on the result returned by the callback function
+  - Add check method for row editing, allowing only check but not submit value, so asynchronously save data successfully before submit to table
+  - Fix the problem that the `rowClassName` property cannot be used at the same time as `striped`.
+- New component **MarkdownViewer** for displaying rich text in Markdown format
+
+### 🐛 Bug Fixes
+
+- **CodeEditor** Fix JSON editor throwing exception when formatting invalid JSON text
+- **Tinymce** fixes an issue where inline mode throws an exception in some scenarios
+- **BasicTable**
+  - Repair the problem that the editing icon is not displayed when the content of editable cell is empty
+  - Repair the problem that the total row at the end of the table sometimes fails to align with the columns in the main part of the table.
+- **MarkDown** Repair the problem that the value of initial value property does not work.
+- **BasicUpload** Repair the problem that `accept` property does not support `MIME` and suffix name starting with dot.
+- **ApiSelect** Fix the problem of type definition of `value` property.
+- **Other**
+  - Repair the problem that some wrapper components give error when using slots.
+  - Repair the problem that `theme` parameter of `useECharts` does not work.
+  - Repair the problem that when `Token` is invalid, pressing F5 to refresh the page may cause abnormal page loading.
+  - Repair the problem that the improper call of `useRedo` may lead to `path` redirection abnormality.
+  - Repair the problem that `vite` custom mode name does not support underscore.
+
+## 2.7.1(2021-08-16)
+
+- Upgrade vue 3.2, if the operation fails, delete node_modules and reinstall it
+
+### ✨ Features
+
+- **BasicTree** Add search function related properties and methods
+- **BasicForm** added `alwaysShowLines` to set the number of lines kept displayed when folding
+
+### 🐛 Bug Fixes
+
+- **Cropper** Fix the problem of failure to destroy in time
+- **BasicTable**
+  - Fix the problem that `CellFormat` cannot use `Map` type data
+  - Fixed an issue where the editable cell failed to display the `0` value correctly
+  - Fixed the issue that selection-change event failed to trigger correctly when unchecked
+  - Fix the problem that the background color of the full screen state under the light theme is incorrect
+  - Fix the problem of obtaining complete data when `getSelectRows` does not support remote data cross-page selection
+  - Fix the issue that the `size` property provided for editing components in `editComponentProps` is invalid
+- **Qrcode** Fixed the problem that the QR code component could not be drawn in time when it was created
+- **BasicModal** Fix the problem that the `helpMessage` property does not work
+- **BasicButton** Fix the problem that the button style performance is inconsistent with the official antd
+- **Others** Fix the problem that `useRedo` (reload the current route) will lose route `params` data
+
+## 2.7.0(2021-08-03)
+
+## (Breaking changes) Breaking changes
+
+- Restore the project `tailwindcss` back to `windicss`, tried `tailwindcss`, there may be a lot of problems, first switch back to `windicss` to improve development efficiency and lower switching costs.
+  - There are currently incompatible areas of the project
+    - The wording of `xl:!m-4` needs to be changed to `!xl:m-4`, note that only `!` is incompatible. If you don’t use it, you don’t need to change it.
+    - The memory overflow problem may still exist (low frequency, just restart, restart vite faster)
+
+### ✨ Features
+
+- **Preview** Add new properties and events
+- **Dark Theme** added support for tailwindcss night mode
+- **Others** add setTip method for useLoading
+
+### 🐛 Bug Fixes
+
+- **ApiTreeSelect** Fixed the problem of failing to monitor `params` changes correctly
+- **ImgRotateDragVerify** Fix the problem that the component `resume` method cannot be called
+- **TableAction** Fix the problem that the stopButtonPropagation property does not work in some cases
+- **PageWrapper** Fix the problem of invalid `class` attribute
+- **BasicTree** Fix the problem that the `checkAll` method will affect the `disabled` state node
+- **BasicTable**
+  - Fix the issue that editable cells do not support `ellipsis` configuration
+  - Fixed the problem that the pop-up layer of sub-components (popconfirm and edit components such as select and treeSelect) cannot be seen in full-screen mode
+  - Fixed an issue where when `expandRowByClick` is enabled, clicking non-expandable rows may cause style errors
+  - Fix the problem that the dynamic change of `pagination` property does not take effect
+  - Fix the problem that `getSelectRows` does not support the child data of the tree table -**Dark Theme** Fix the color matching problem under the dark theme
+  - Fix the background color of the selected node of the `Tree` component
+  - Fix the color configuration of the `Alert` component
+  - Fix the problem of the button color of `link` type in the disabled state
+  - Fix the style problem of checked checkboxes in `Tree` -**Others** Fix the problem that useScript failed to automatically remove the script node
+
+## 2.6.1(2021-07-19)
+
+### ✨ Features
+
+- **NoticeList** Add pagination, auto omit for overlength, title click event, title strikethrough, etc.
+- **MixSider** Optimize the style of the bottom collapse button in the Mix menu layout to be consistent with the style of other menu layouts
+- **ApiTreeSelect** Extend `TreeSelect` component of `antdv` to support remote data source, similar to `ApiSelect`.
+- **BasicTable** New `ApiTreeSelect` editing component
+- Different backend home pages can be specified for different users.
+  - Add `homePath` field (optional) to the user information returned by the `getUserInfo` interface to customize the home page path for the current user
+
+### 🐛 Bug Fixes
+
+- **BasicTable**
+  - Fix scrollbar style issue (removed scroll style patch)
+  - Fix the alignment problem of cells with expanded icons in tree tables
+  - Add `headerTop` slot.
+  - Fix the color display of the operation column button in disabled state.
+  - Repair the problem that the values of editable cells cannot be updated by modifying `dataSource` directly.
+  - Repair the problem of data replay when using `ApiSelect` to edit components.
+  - Repair the problem that editing components may report `onXXX` type error in some scenarios.
+- **TableAction**
+  - Create Tooltip component only if `action.tooltip` exists.
+  - Fix the problem that the content of the round button inside the component is not centered
+- **AppSearch** Fix the problem that the hidden menu may be searched.
+- **BasicUpload** Repair the problem of error when handling non-`array` values.
+- **Form** Repair the `suffix` slot style problem of `FormItem`.
+- **Menu**
+  - Repair the hovering trigger logic of the left mixed menu
+  - Repair the problem that the top bar menu is wrong when displaying menu items that need to be hidden.
+  - Fix the left mixed menu in hover trigger mode will jump to route directly when there is no submenu and it is activated
+- **Breadcrumb** Repair the problem that the menu with redirection cannot be jumped when clicked
+- **Markdown** fixes an initialization exception and an issue where value was not set dynamically correctly
+- **Modal** Make sure props are passed correctly
+- **MultipleTab** fixes an issue that could accidentally create login route tabs
+- **BasicTree** Fix the problem that the search function may cause `checkedKeys` to be lost
+- **CodeEditor** Fix the problem that value does not support v-model usage.
+- **CountdownInput** Fix the problem that `input` slot is not supported.
+- **ApiSelect** Fix the problem that the `options-change` event parameter is not the standard `options` data used by `select
+- **Other**
+  - Fix the problem that the configuration of default menu collapse does not work
+  - Repair the problem that `safari` browser reports an error and the website cannot be opened.
+  - Repair the problem that eslint keeps error due to endOfLine after pulling the code on window.
+  - Fix `Vue Router warn` caused by dynamic routing
+
+### 🎫 Chores
+
+- Add test environment test command
+
+## 2.6.0(2021-07-04)
+
+### ✨ Features
+
+- **Axios** New `withToken` configuration to control whether the request carries a token or not
+- **BasicUpload**
+  - New `preview-delete` event triggered when deleting a file in preview `Modal`.
+  - `value` supports `v-model` usage
+- **Route configuration**
+  - Add `ignoreRoute` to generate menu only in `ROUTE_MAPPING` or `BACK` permission mode
+  - Add `hidePathForChildren` configuration to ignore this level `path` when generating menus for child items
+- **TableAction** Add `tooltip` configuration to add tooltip hint for button
+- **CropperAvatar**
+  - Added `value` to set the current avatar
+  - Added `onChange` to accept avatar cropping and upload success event
+  - New `btnText`, `btnProps` for customizing the text and properties of the upload button
+  - Add tooltips to the action buttons in `Modal` for cropping
+- **Modal** Add tooltip for action button in top right corner
+
+### 🐛 Bug Fixes
+
+- **Modal**
+  - Fix the problem that the mask cannot be closed by clicking on it.
+  - Fix `setModalProps` does not support setting `defaultFullscreen`.
+- **Table**
+  - Fix the problem that `editComponentProps` doesn't support `onChange`.
+  - Fix the problem that `selection-change` event is not triggered when `clickToRowSelect` is enabled.
+  - Fix the problem that global configuration `fetchSetting` may be accidentally modified by local configuration.
+  - Fix the problem that the parameter of `handleSearchInfoFn` contains redundant blank keys.
+  - Repair the problem that when rowSelection.onChange is provided for table, the selected items of table cannot be changed manually.
+  - Fix the problem that the scrollbar continues to be displayed even when it is not needed to be displayed.
+- **Icon** Repair the problem that SvgIcon is missing some styles.
+- **Menu**
+  - Repair the problem that single-level menu refreshing will not be activated in route mapping mode.
+  - Repair the problem that the collapse customization at the bottom of the side menu is invalid.
+- **Form** Repair the type definition of `submitButtonOptions` and `resetButtonOptions`.
+- **PopConfirmButton** Remove the redundant `title` on `Button`.
+- **Axios** Fix the problem that `params` and `data` data cannot be submitted at the same time when non-`GET` requests are made
+- **Other**
+  - Repair the problem that the lock screen function can skip the lock state by refreshing the page or copying the URL to open a new browser tab
+  - Repair the problem that `Token` won't be synchronized when multiple windows open pages at the same time.
+  - Repair the problem that `hasPermission` does not work in `ROLE` permission mode.
+- **Table** Repair the problem that the parameter of `handleSearchInfoFn` contains extra blank keys.
+- **Tailwindcss** Remove console warning
+
+## 2.5.2(2021-06-27)
+
+### ⚡ Performance Improvements
+
+- **Icon** Remove the global registration of Icon components to prevent hot update issues under certain circumstances
+
+### ✨ Features
+
+- **Menu** Added `permissionMode=PermissionModeEnum.ROUTE_MAPPING` mode
+  - The project is changed to this mode by default, and the original menu file is deleted
+  - If you have written the menu before, you can change to `PermissionModeEnum.ROLE` mode
+
+## 2.5.1(2021-06-26)
+
+### ⚡ Performance Improvements
+
+- Upgrade `vue` and `ant-design-vue` versions to solve compatibility issues
+- **Tree** Performance optimization
+
+### 🐛 Bug Fixes
+
+- **Table** Fix page jitter problem
+- **Upload** Make sure to carry custom parameters
+- **Dropdown** Fix the icon display problem of popConfirm
+- **Table** Fix the problem that the editing event of the tree table is abnormal
+- **Table** Fix the problem that when the table data is empty, the value returned by getDataSource is not the data source used by the table
+
+## 2.5.0(2021-06-20)
+
+## (Breaking changes) Breaking changes
+
+- Change the project `windicss` to `tailwindcss` to solve the memory overflow problem
+  - There are currently incompatible areas of the project
+    - The wording of `!xl:m-4` needs to be changed to `xl:!m-4`, note that only `!` is incompatible. If you don’t use it, you don’t need to change it.
+    - The new features of `windicss` itself need to be adjusted, for example, `Attribute` mode is not compatible
+
+### ✨ Refactor
+
+- Remove `useExpose` and use `expose` provided by the component itself instead
+
+### ⚡ Performance Improvements
+
+- **Locale** merge multi-language files to reduce the number of files
+- **Utils** Mitt default export is changed from `Class` to `Function`
+- **Axios** `isTransformRequestResult` is renamed to `isTransformResponse`
+
+### ✨ Features
+
+- **CropperImage** `Cropper` Avatar cropping adds circular cropping function
+- **CropperAvatar** Added avatar upload component
+- **Drawer** `useDrawer` added `closeDrawer` function
+- **Preview** Added `createImgPreview` picture preview function
+- **Setup** New guide page example
+- **Tests** Add jest test suite, Vue component single test is not currently supported
+- **Axios** Added `authenticationScheme` configuration to specify the authentication scheme
+- **Setting** Added `sessionTimeoutProcessing` project configuration item, used to configure how to deal with session timeout
+
+### 🐛 Bug Fixes
+
+- **Modal** fix full screen height calculation error
+- **Modal** Fix the problem that the shutdown event is triggered multiple times
+- **PageWrapper** fix the height calculation problem
+- **FlowChart** Repair drag and drop menu missing
+- Fixed Iframe routing error in background mode
+- **PageWrapper** Fix the height calculation problem when footer and global footer are opened at the same time
+- **Menu** Fix the jitter problem of menu folding animation
+- **Store** fixed type error after pinia version upgrade
+
+## 2.4.2(2021-06-10)
+
+### ✨ Refactor
+
+- `CountTo` component refactoring
+
+### ✨ Features
+
+- `radioButtonGroup` supports `boolean` value
+- `useModalInner` added `redoModalHeight` to reset the height of `Modal` inside Modal
+- `useECharts` added `getInstance` to obtain instances of `echart`
+- `TableAction` added `stopButtonPropagation` to prevent the action button click event from bubbling
+- `BasicTable` in the row edit mode, you can get or set the value of other editing components in the column
+- The `ApiSelect` component will automatically re-fetch the data after the `params` is changed
+- `TableImg` component improvement
+- `BasicTable` added `columns-change` event to monitor the user to change the sorting, display, and fixed status of columns
+- `Tinymce` supports dynamic modification readonly
+- `BasicTable` added `updateTableDataRecord` method to update the specified row data
+- `useModal` added `closeModal` method to close `Modal`
+
+### 🐛 Bug Fixes
+
+- Fix the problem that `redoModalHeight` cannot reduce the height
+- Fix the problem that the schema data of `BasicForm` does not take effect
+- Fix the problem that multiple tags may cause `KeepAlive` to fail
+- Fix the problem that the default `axios` interceptor cannot handle custom code
+- Fix the height issue of the lock screen pop-up window
+- Fixed the problem that the half-selected state of the `Column Display` checkbox of `BaiscTable` was incorrectly displayed
+- Fixed the problem that the preview list of the `BasicUpload` component could not be displayed in some cases
+- Fix the problem that the `options` setting of ` RadioButtonGroup``disabled ` does not take effect
+- Fix the problem that the button for uploading pictures in the read-only mode of the `Tinymce` component is still available
+- Fix the stuttering problem of `BasicForm` under certain circumstances
+- Fix the problem that "directory" routing does not work
+
+## 2.4.1(2021-06-01)
+
+### ✨ Features
+
+- Add `DatePicker` and `TimePicker` components to editable tables
+- Added `defaultExpandLevel` configuration to `Tree` component
+
+### ⚡ Performance Improvements
+
+-Menu search default focus
+
+### 🐛 Bug Fixes
+
+- Fix known issues of `CodeEditor`
+- Fix the issue of `i18n` console warning
+- Fix the problem that the editable table `align` configuration does not take effect
+- Ensure that `axios` only processes `Object` parameters
+- Fix the failure of the `defaultExpandAll` configuration of the `Tree` component
+- Fix the problem of missing dividing line in `TableAction`
+- Fix the known issues of the table
+- Fix that the lang attribute of HTML will not be set when reloading due to the first loading or changing the language
+
+## 2.4.0 (2021-05-25)
+
+### ✨ Features
+
+-New graphical editor example -New code editor (including Json editor) -Added `JsonPreview`Json data viewing component -The fields of the data column and actionColumn of the table can be controlled according to the authority and business. -Added an example of a permission control table (AuthColumn.vue) -Added user login expiration example
+
+### ⚡ Performance Improvements
+
+-Consolidate some language files to reduce the number of files
+
+### 🐛 Bug Fixes
+
+-Fix the flashing white screen when the dark theme refreshes -Fix the problem that other functions are invalid when the tab is closed -Fix known issues in the form -Fix the automatic lock screen failure
+
+## 2.3.0 (2021-04-10)
+
+## (Breaking changes) Breaking changes
+
+- Use `pinia` to replace `vuex`, `vuex-module-decorators`.
+
+  -Impact, if you used vuex-module-decorators yourself before, you need to transform it to pinia.
+
+  - the reason: -pinia is basically similar to vuex5api and is easy to understand. -Subsequent switching to vuex5 has a very low cost and can also be used as a third-party state management library
+
+- Remove `useKeyPress` and use `vueuse`-`onKeyStroke` instead
+- Remove `useDebounceFn` and use `vueuse`-`useDebounceFn` instead
+- Remove `useThrottle` and use `vueuse`-`useThrottleFn` instead
+
+### ✨ Features
+
+- Tabs support persistent storage
+
+### ✨ Refactor
+
+- Remove `useElResize`
+
+### 🐛 Bug Fixes
+
+- Login page style fix
+- Fix the known problems of the menu
+- Fix the problem of theme style switching
+
+## 2.2.0 (2021-04-06)
+
+### ✨ Features
+
+- Added `headerTitle` slot
+- New printing example
+- Added about interface
+
+### ✨ Refactor
+
+- Remove useFullScreen function
+- tinymce changed from Cdn to npm (the package size is too large)
+- Dashboard refactoring
+- Remove ApexCharts and examples
+
+### 🐛 Bug Fixes
+
+- Make sure the breadcrumbs are displayed correctly
+- Fixed the issue of tinymce upload button disappearing in full screen mode
+- Make sure that the title changes normally after logging in again
+- Ensure that the background mode login is normal
+- Fix TableAction click event issue
+
+## 2.1.1 (2021-03-26)
+
+### ✨ Features
+
+- Added hideChildrenInMenu configuration for routing. Used to hide submenu
+- Built-in expand/collapse all functions in the tree form
+
+### ✨ Refactor
+
+- Refactor the routing multi-layer mode to solve the problem of multiple implementations of nested keepalives
+
+### 🐛 Bug Fixes
+
+- Ensure that the CountDownInput component is reset to the empty value
+- Fix the display problem on the small screen in split mode
+- Fix table height calculation problem
+- Fix the problem that components cannot be obtained by background routing
+- Fix Modal component loadingTip configuration does not take effect
+- Fix the background permission command does not take effect
+- Make sure the progress bar is closed properly
+- Fix the problem of invalid table check column configuration
+- Ensure that the first level menu can be hidden
+- Ensure that the hidden fields of the form are verified properly
+
+### 🎫 Chores
+
+- Remove ls-lint
+
+### 🎫 Chores
+
+- 移除 ls-lint
+
+## 2.1.0 (2021-03-15)
+
+### ✨ Features
+
+- Added svg mode to icon selector
+- Added time component
+- Added AutoNavi/Baidu/Google Map example
+
+### ✨ Refactor
+
+- Refactor the project to solve the hot update problem caused by circular dependencies
+- Remove vueHelper/useClickoutside, use @vueuse/core instead
+
+### 🐛 Bug Fixes
+
+- Ensure that the value of `table action` is updated correctly
+- Fix the animation of page switching cannot be closed
+- Fix `PageWrapper`title not showing
+- Fix the known issues of the table
+- Fix the problem that the BasicTree component can't customize the title
+- Fix the button style problem after theme switching
+
+## 2.0.3 (2021-03-07)
+
+### ✨ Features
+
+- `BasicTree` added `clickRowToExpand`, used to click tree node to expand
+- Added SvgIcon plugin and examples
+- Add the department tree on the left side of the account management interface·
+
+### ⚡ Performance Improvements
+
+- Pagination parameters are no longer carried when the table is closed
+- The login page monitors the carriage return event to log in
+- When the adaptive size of the table is set, the height is filled according to the screen.
+- Tree scroll bar optimization
+- Optimize the loading speed of local development
+
+### 🐛 Bug Fixes
+
+- Fix known issues with `Description`
+- Fix known issues with `BasicForm`
+- Fix the logic problem of show attribute of ActionItem under `BasicTree`
+- Fix the style error of the tree component demo example
+- Repair account management to add new but not cleared old data
+- The form component should allow the setFieldsValue method to be null or undefined
+- Ensure that the single-level breadcrumbs jump correctly
+- Ensure that the Form component does not verify hidden form items
+
+## 2.0.2 (2021-03-04)
+
+### ✨ Refactor
+
+- Refactored multi-language modules to support lazy loading and remote loading
+
+### ✨ Features
+
+- axios supports form-data format request
+- Added icon selector component (support local and online methods)
+- Added WebSocket examples and service scripts
+- Added the `renderIcon` property to the Tree component to control the display of level icons
+- Tree->actionItem added show attribute, used to dynamically control button display
+- New toolbar/title/search function for Tree
+- Added department management/password modification/account management/role management/menu management sample interface
+
+### ⚡ Performance Improvements
+
+- Optimized login interface animation
+- Fix the problem of excessively large github warehouse.
+- Hide table full screen button by default
+- `crypto-es` is changed to `crypto-js` to reduce the package size
+- `types` directory moved to the root directory, compatible with other directory global types
+
+### 🐛 Bug Fixes
+
+- Fix the warning problem of verification code component
+- Fix the table cannot get the selected row correctly
+- Fixed modal height calculation error in full screen state
+- Fix some table style issues
+- Fix the invalidation of the tree form `indentSize` setting
+
+## 2.0.1 (2021-02-21)
+
+### ✨ Refactor
+
+- Refactored login page, new registration page/reset password page/mobile phone login/QR code login
+
+### ✨ Features
+
+- Added the `settingButtonPosition` configuration item for configuring the position of the `settings` button
+- `modal` can switch the full screen by double-clicking the head
+- Added `CountDownInput` component
+
+### ⚡ Performance Improvements
+
+- Optimize the editable center style and the width of the drop-down box is too short
+- The `edit-change` event listener when the table is added and edited
+
+### 🐛 Bug Fixes
+
+- Fix image preview style error
+- Fix icon style problem
+- Fix the drop-down echo problem of editable table
+
 ## 2.0.0 (2021-02-18)
 
 ## Breaking changes

CHANGELOG.zh_CN.md

@@ -1,4 +1,532 @@
-## Wip
+## 2.8.0(2021-11.03)
+
+### 升级说明
+
+- 包管理器由`yarn`改为 `pnpm`
+- 删除`node_modules`和`yarn.lock`，全局安装`pnpm`
+- 执行`pnpm install`
+
+### ✨ Features
+
+- **其它**
+  - `.env`文件中的`VITE_PROXY`配置支持单引号
+  - 移除 build 过程中的警告
+
+### 🐛 Bug Fixes
+
+- **BasicTable**
+  - 修复可编辑单元格某些情况下无法提交的问题
+  - 修复`inset`属性不起作用的问题
+  - 修复`useTable`与`BasicTable`实例的`reload`方法`await`表现不一致的问题
+  - 修复`clickToRowSelect`会无视行选择框 disabled 状态的问题
+  - 修复`BasicTable`在某些情况下，分页会被重置的问题
+  - 修改 `deleteTableDataRecord` 方法
+- **BasicModal**
+  - 修复点击遮罩、按下`Esc`键都不能关闭`Modal`的问题
+  - 修复点击关闭按钮、最大化按钮旁边的空白区域也会导致`Modal`关闭的问题
+- **BasicTree** 修复节点插槽不起作用的问题
+- **CodeEditor** 修复可能会造成的`Build`失败的问题
+- **BasicForm** 修复自定义 FormItem 组件的内容宽度可能超出范围的问题
+- **ApiTreeSelect** 修复`params`变化未能触发重新请求 api 数据的问题
+- **其它**
+  - 修复多标签在某些情况下关闭页签不会跳转路由的问题
+  - 修复部分组件可能会造成热更新异常的问题
+  - 修复直接`import`部分`antdv`子组件时会在 build 过程中报错的问题，如：TabPane、RadioGroup
+
+## 2.7.2(2021-09-14)
+
+### ✨ Features
+
+- **BasicForm** 表单组件新增`Divider`，用于较长表单的区域分割
+- **BasicTable**
+  - 单元格编辑新增提交回调，将根据回调函数返回的结果来决定是否将数据提交到表格
+  - 行编辑添加校验方法，允许只校验而不提交值，以便异步保存数据成功后才提交倒表格
+  - 修复`rowClassName`属性无法和`striped`同时使用的问题
+- 新增组件 **MarkdownViewer** 用于显示 Markdown 格式的富文本
+
+### 🐛 Bug Fixes
+
+- **CodeEditor** 修复 JSON 编辑器在格式化无效 JSON 文本时会抛出异常的问题
+- **Tinymce** 修复 inline 模式在一些场景下会出现异常的问题
+- **BasicTable**
+  - 修复可编辑单元格的内容为空时，不会显示编辑图标的问题
+  - 修复表尾合计行与表格主体部分的列有时候未能对齐的问题
+- **MarkDown** 修复初始 value 属性的值不起作用的问题
+- **BasicUpload** 修复`accept`属性不支持`MIME`及点开头的后缀名的问题
+- **ApiSelect** 修复`value`属性的类型定义问题
+- **其它**
+  - 修复部分封装组件在使用插槽时报错的问题
+  - 修复`useECharts`的`theme`参数不起作用的问题
+  - 修复`Token`失效时，按 F5 刷新页面可能会出现页面加载异常的问题
+  - 修复`useRedo`的不当调用可能会导致重定向`path`异常的问题
+  - 修复`vite`自定义模式名称不支持下划线的问题
+
+## 2.7.1(2021-08-16)
+
+- 升级 vue 3.2,如果运行失败，删除 node_modules 后重装即可
+
+### ✨ Features
+
+- **BasicTree** 添加搜索功能相关属性和方法
+- **BasicForm** 新增`alwaysShowLines`用于设置折叠时保留显示的行数
+
+### 🐛 Bug Fixes
+
+- **Cropper** 修复未能及时销毁的问题
+- **BasicTable**
+  - 修复`CellFormat`无法使用`Map`类型数据的问题
+  - 修复可编辑单元格未能正确显示`0`值的问题
+  - 修复 selection-change 事件在取消勾选时未能正确触发的问题
+  - 修复浅色主题下的全屏状态背景颜色不正确的问题
+  - 修复`getSelectRows`不支持远程数据跨页选择时获取完整数据的问题
+  - 修复在`editComponentProps`中为编辑组件提供的`size`属性无效的问题
+- **Qrcode** 修复二维码组件在创建时未能及时绘制的问题
+- **BasicModal** 修复`helpMessage`属性不起作用的问题
+- **BasicButton** 修复按钮样式表现与 antd 官方不一致的问题
+- **其它** 修复`useRedo`(重新加载当前路由)会丢失路由`params`数据的问题
+
+## 2.7.0(2021-08-03)
+
+## (破坏性更新) Breaking changes
+
+- 将项目`tailwindcss`还原回`windicss`，尝试了`tailwindcss`，问题可能还挺多，先切换回`windicss`提高开发效率，切换成本较低。
+  - 目前项目不兼容地方有
+    - `xl:!m-4` 之类的写法需要改为`!xl:m-4`,注意只有`!`这个不兼容，没用到则不用改
+    - 内存溢出问题可能还在（频率低，重启下即可，重启 vite 较快）
+
+### ✨ Features
+
+- **Preview** 添加新的属性及事件
+- **Dark Theme** 新增对 tailwindcss 夜间模式的支持
+- **其它** 为 useLoading 添加 setTip 方法
+
+### 🐛 Bug Fixes
+
+- **ApiTreeSelect** 修复未能正确监听`params`变化的问题
+- **ImgRotateDragVerify** 修复组件`resume`方法无法调用的问题
+- **TableAction** 修复 stopButtonPropagation 属性某些情况下不起作用的问题
+- **PageWrapper** 修复`class`属性无效的问题
+- **BasicTree** 修复`checkAll`方法会影响到`disabled`状态节点的问题
+- **BasicTable**
+  - 修复可编辑单元格不支持`ellipsis`配置的问题
+  - 修复全屏模式下看不到子组件弹出层（popconfirm 以及 select、treeSelect 等编辑组件）的问题
+  - 修复启用`expandRowByClick`时，点击不可展开的行可能会导致样式错误的问题
+  - 修复`pagination`属性动态改变不生效的问题
+  - 修复`getSelectRows`不支持树形表格子级数据的问题
+- **Dark Theme** 黑暗主题下的配色问题修正
+  - 修复`Tree`组件被选中节点的背景颜色
+  - 修复`Alert`组件的颜色配置
+  - 修复禁用状态下的`link`类型的按钮颜色问题
+  - 修复`Tree`已勾选的复选框的样式问题
+- **其它** 修复 useScript 未能自动移除 script 节点的问题
+
+## 2.6.1(2021-07-19)
+
+### ✨ Features
+
+- **NoticeList** 添加分页、超长自动省略、标题点击事件、标题删除线等功能
+- **MixSider** 优化 Mix 菜单布局时 底部折叠按钮 的样式，与其它菜单布局时的风格保持一致
+- **ApiTreeSelect** 扩展`antdv`的`TreeSelect`组件，支持远程数据源，用法类似`ApiSelect`
+- **BasicTable**
+  - 新增`ApiTreeSelect`编辑组件
+  - 新增`headerTop`插槽
+- **其它** 可以为不同的用户指定不同的后台首页：
+  - 在`getUserInfo`接口返回的用户信息中增加`homePath`字段(可选)即可为当前用户定制首页路径
+
+### 🐛 Bug Fixes
+
+- **BasicTable**
+  - 修复滚动条样式问题(移除了滚动样式补丁)
+  - 修复树形表格的带有展开图标的单元格的内容对齐问题
+  - 修复操作列的按钮在 disabled 状态下的颜色显示
+  - 修复可编辑单元格的值不能直接通过修改`dataSource`来更新显示的问题
+  - 修复使用`ApiSelect`编辑组件时的数据回显问题
+  - 修复在部分场景下编辑组件可能会报`onXXX`类型错误的问题
+- **TableAction**
+  - 仅在 `action.tooltip`存在的情况下 才创建 Tooltip 组件
+  - 修复组件内的圆形按钮内容没有居中的问题
+- **AppSearch** 修复可能会搜索隐藏菜单的问题
+- **BasicUpload** 修复处理非`array`值时报错的问题
+- **Form** 修复`FormItem`的`suffix`插槽样式问题
+- **Menu**
+  - 修复左侧混合菜单的悬停触发逻辑
+  - 修复顶栏菜单在显示包含需要隐藏的菜单项目时出错的问题
+  - 修复悬停触发模式下左侧混合菜单会在没有子菜单且被激活时直接跳转路由
+- **Breadcrumb** 修复带有重定向的菜单点击无法跳转的问题
+- **Markdown** 修复初始化异常以及不能正确地动态设置 value 的问题
+- **Modal** 确保 props 正确被传递
+- **MultipleTab** 修复可能会意外创建登录路由标签的问题
+- **BasicTree** 修复搜索功能可能导致`checkedKeys`丢失的问题
+- **CodeEditor** 修复 value 不支持 v-model 用法的问题
+- **CountdownInput** 修复不支持`input`插槽的问题
+- **ApiSelect** 修复`options-change`事件参数不是`select`所使用的标准`options`数据的问题
+- **其它**
+  - 修复菜单默认折叠的配置不起作用的问题
+  - 修复`safari`浏览器报错导致网站打不开
+  - 修复在 window 上，拉取代码后 eslint 因 endOfLine 而报错问题
+  - 修复因动态路由而产生的 `Vue Router warn`
+
+### 🎫 Chores
+
+- 添加 test 环境测试命令
+
+## 2.6.0(2021-07-04)
+
+### ✨ Features
+
+- **Axios** 新增`withToken`配置，用于控制请求是否携带 token
+- **BasicUpload**
+  - 新增在预览 `Modal` 中删除文件时触发`preview-delete` 事件
+  - `value` 支持 `v-model` 用法
+- **Route 配置**
+  - 增加`ignoreRoute`用于在`ROUTE_MAPPING`或`BACK`权限模式下仅生成菜单
+  - 增加`hidePathForChildren`配置，标识为子项目生成菜单时忽略本级`path`
+- **TableAction** 新增`tooltip`配置，可以为按钮增加 tooltip 提示
+- **CropperAvatar**
+  - 新增`value`用于设置当前头像
+  - 新增`onChange`用于接受头像剪裁并上传成功事件
+  - 新增`btnText`、`btnProps` 用于自定义上传按钮文案和属性
+  - 为剪裁`Modal`内的操作按钮添加工具提示
+- **Modal** 为右上角的操作按钮添加工具提示
+
+### 🐛 Bug Fixes
+
+- **Modal**
+  - 修复点击遮罩不能关闭的问题
+  - 修复 `setModalProps` 不支持设置 `defaultFullscreen` 的问题
+- **Table**
+  - 修复 `editComponentProps` 不支持 `onChange`的问题
+  - 修复启用`clickToRowSelect`时，点击行不会触发`selection-change`事件的问题
+  - 修复全局配置`fetchSetting`可能会被局部配置意外修改的问题
+  - 修复`handleSearchInfoFn`的参数包含多余空白键的问题
+  - 修复为 table 提供 rowSelection.onChange 时，无法手动变更 table 的选中项的问题
+  - 修复滚动条在无需显示的时候仍然持续显示的问题
+- **Icon** 修复 SvgIcon 缺少部分样式的问题
+- **Menu**
+  - 修复路由映射模式下，单级菜单刷新不会激活
+  - 修复侧边菜单底部的折叠自定义失效的问题
+- **Form** 修复`submitButtonOptions`和`resetButtonOptions`的类型定义
+- **PopConfirmButton** 移除`Button`上多余的`title`
+- **Axios** 修复非`GET`请求时，无法同时提交`params`和`data`数据的问题
+- **其它**
+  - 修复锁屏功能可以通过刷新页面或复制 URL 打开新的浏览器标签来跳过锁定状态的问题
+  - 修复多个窗口同时打开页面时，`Token` 不会同步的问题
+  - 修复`ROLE`权限模式下`hasPermission`不工作的问题
+- **Table** 修复`handleSearchInfoFn`的参数包含多余空白键的问题
+- **Tailwindcss** 移除控制台警告
+
+## 2.5.2(2021-06-27)
+
+### ⚡ Performance Improvements
+
+- **Icon** 移除 Icon 组件全局注册，防止特定情况下热更新问题
+
+### ✨ Features
+
+- **Menu** 新增 `permissionMode=PermissionModeEnum.ROUTE_MAPPING`模式
+  - 项目默认改为该模式，删除原有菜单文件
+  - 如果之前已经写好了菜单，可以更改为`PermissionModeEnum.ROLE`模式即可
+
+### 🐛 Bug Fixes
+
+- **Drawer** 修复`visible`状态异常
+
+## 2.5.1(2021-06-26)
+
+### ⚡ Performance Improvements
+
+- 升级`vue`与`ant-design-vue`版本，解决兼容问题
+- **Tree** 性能优化
+
+### 🐛 Bug Fixes
+
+- **Table** 修复分页抖动问题
+- **Upload** 确保携带自定义参数
+- **Dropdown** 修复 popConfirm 的图标显示问题
+- **Table** 修复树形表格的编辑事件不正常的问题
+- **Table** 修复当表格数据为空时，getDataSource 返回的值不是表格所使用的数据源的问题
+
+## 2.5.0(2021-06-20)
+
+## (破坏性更新) Breaking changes
+
+- 将项目`windicss`改为`tailwindcss`，解决内存溢出问题
+  - 目前项目不兼容地方有
+    - `!xl:m-4` 之类的写法需要改为`xl:!m-4`,注意只有`!`这个不兼容，没用到则不用改
+    - `windicss`自身新增的特性需要调整，比如`Attribute`模式不兼容
+
+### ✨ Refactor
+
+- 移除`useExpose`,使用组件自身提供的`expose`代替
+
+### ⚡ Performance Improvements
+
+- **Locale** 合并多语言文件，减少文件数量
+- **Utils** Mitt 默认导出由 `Class` 改为 `Function`
+- **Axios** `isTransformRequestResult`更名为`isTransformResponse`
+
+### ✨ Features
+
+- **CropperImage** `Cropper` 头像裁剪新增圆形裁剪功能
+- **CropperAvatar** 新增头像上传组件
+- **Drawer** `useDrawer`新增`closeDrawer`函数
+- **Preview** 新增`createImgPreview`图片预览函数
+- **Setup** 新增引导页示例
+- **Tests** 添加 jest 测试套件，暂不支持 Vue 组件单测
+- **Axios** 新增`authenticationScheme`配置，用于指定认证方案
+- **Setting** 新增 `sessionTimeoutProcessing` 项目配置项，用于配置会话超时如何处理
+
+### 🐛 Bug Fixes
+
+- **Modal** 修复全屏高度计算错误
+- **Modal** 修复关闭事件触发多次问题
+- **PageWrapper** 修复高度计算问题
+- **FlowChart** 修复拖放菜单丢失
+- 修复后台模式下，Iframe 路由错误
+- **PageWrapper** 修复 footer 与全局页脚同时开启时的高度计算问题
+- **Menu** 修复菜单折叠动画抖动问题
+- **Store**修复 pinia 版本升级之后类型错误
+
+## 2.4.2(2021-06-10)
+
+### ✨ Refactor
+
+- `CountTo`组件重构
+
+### ✨ Features
+
+- `radioButtonGroup` 支持`boolean`值
+- `useModalInner` 新增 `redoModalHeight`用于在 Modal 内部重设`Modal`高度
+- `useECharts` 新增`getInstance`用于获取`echart`实例
+- `TableAction` 新增 `stopButtonPropagation` 阻止操作按钮点击事件冒泡
+- `BasicTable` 在行编辑模式下，可以获取或设置其它处于列的编辑组件的值
+- `ApiSelect` 组件在`params`改变后会自动重新`fetch`数据
+- `TableImg` 组件改进
+- `BasicTable` 新增 `columns-change` 事件用于监听用户改变列排序、展示、固定状态
+- `Tinymce`支持动态修改 readonly
+- `BasicTable`新增`updateTableDataRecord`方法用于更新指定行数据
+- `useModal`新增`closeModal`方法用于关闭`Modal`
+
+### 🐛 Bug Fixes
+
+- 修复`redoModalHeight`不能减小高度的问题
+- 修复 `BasicForm`设置 schemas 数据不生效的问题
+- 修复多标签可能导致`KeepAlive`失效的问题
+- 修复默认的`axios`拦截器不能处理自定义 code 的问题
+- 修复锁屏弹窗的高度问题
+- 修复`BaiscTable`的`列展示`复选框的半选状态显示不正确的问题
+- 修复`BasicUpload`组件的预览列表某些情况下不能显示的问题
+- 修复`RadioButtonGroup`的`options`设置`disabled`不生效的问题
+- 修复`Tinymce`组件在只读模式下上传图片的按钮仍然可用的问题
+- 修复`BasicForm`特定情况下的卡顿问题
+- 修复"目录"路由不起作用的问题
+
+## 2.4.1(2021-06-01)
+
+### ✨ Features
+
+- 可编辑表格新增`DatePicker`和`TimePicker`组件
+- `Tree` 组件新增`defaultExpandLevel`配置
+
+### ⚡ Performance Improvements
+
+- 菜单搜索默认聚焦
+
+### 🐛 Bug Fixes
+
+- 修复`CodeEditor`已知问题
+- 修复`i18n`控制台警告问题
+- 修复可编辑表格`align`配置不生效问题
+- 确保`axios`只对`Object`参数进行处理
+- 修复`Tree`组件 `defaultExpandAll` 配置失效
+- 修复`TableAction` 分割线丢失问题
+- 修复表格已知问题
+- 修复首次加载或改变语言导致重载时，不会设置 HTML 的 lang 属性
+
+## 2.4.0 (2021-05-25)
+
+### ✨ Features
+
+- 新增图形编辑器示例
+- 新增代码编辑器(包含 Json 编辑器)
+- 新增 `JsonPreview`Json 数据查看组件
+- 表格的数据列(column)和操作列(actionColumn)的字段可以根据权限和业务来控制是否显示
+- 新增权限控制表格示例(AuthColumn.vue)
+- 新增用户登录过期示例
+
+### ⚡ Performance Improvements
+
+- 合并部分语言文件，减少文件数量
+
+### 🐛 Bug Fixes
+
+- 修复黑暗主题刷新闪烁的白屏
+- 修复标签页关闭其他功能失效问题
+- 修复表单已知问题
+- 修复自动锁屏失效
+
+## 2.3.0 (2021-04-10)
+
+## (破坏性更新) Breaking changes
+
+- 使用 `pinia` 替换 `vuex`,`vuex-module-decorators`。
+
+  - 影响，之前如果有自己使用 vuex-module-decorators，需要改造为 pinia。
+  - 原因：
+    - pinia 于 vuex5api 基本类似，且简单易懂。
+    - 后续切换 vuex5 成本非常低，也可以当作第三方状态管理库使用
+
+- 移除 `useKeyPress` 使用`vueuse`-`onKeyStroke`代替
+- 移除 `useDebounceFn` 使用`vueuse`-`useDebounceFn`代替
+- 移除 `useThrottle` 使用`vueuse`-`useThrottleFn`代替
+
+### ✨ Features
+
+- 标签页支持持久化保存
+
+### ✨ Refactor
+
+- 移除 `useElResize`
+
+### 🐛 Bug Fixes
+
+- 登录页样式修复
+- 修复菜单已知问题
+- 修复主题样式切换问题
+
+## 2.2.0 (2021-04-06)
+
+### ✨ Features
+
+- 新增`headerTitle` slot
+- 新增打印示例
+- 新增关于界面
+
+### ✨ Refactor
+
+- 移除 useFullScreen 函数
+- tinymce 由 Cdn 改为 npm(打包体积偏大)
+- Dashboard 重构
+- 移除 ApexCharts 及示例
+
+### 🐛 Bug Fixes
+
+- 确保面包屑正确的显示图标
+- 修复 tinymce 上传按钮全屏模式下消失问题
+- 确保 title 在重新登录后正常改变
+- 确保后台模式登录正常
+- 修复 TableAction 点击事件问题
+
+## 2.1.1 (2021-03-26)
+
+### ✨ Features
+
+- 路由新增 hideChildrenInMenu 配置。用于隐藏子菜单
+- 树形表格内置展开/折叠全部函数
+
+### ✨ Refactor
+
+- 重构路由多层模式,解决嵌套 keepalive 执行多次问题
+
+### 🐛 Bug Fixes
+
+- 确保 CountDownInput 组件重置清空值
+- 修复分割模式下在小屏幕中显示问题
+- 修复表格高度计算问题
+- 修复后台路由获取不到组件问题
+- 修复 Modal 组件 loadingTip 配置不生效
+- 修复后台权限指令不生效
+- 确保 progress 进度条正确关闭
+- 修复表格勾选列配置失效问题
+- 确保一级菜单可以被隐藏
+- 确保表单隐藏字段校验正常
+
+### 🎫 Chores
+
+- 移除 ls-lint
+
+## 2.1.0 (2021-03-15)
+
+### ✨ Features
+
+- 图标选择器新增 svg 模式
+- 新增时间组件
+- 新增高德/百度/谷歌地图示例
+
+### ✨ Refactor
+
+- 重构项目以解决循环依赖项导致的热更新问题
+- 移除 vueHelper/useClickoutside,使用@vueuse/core 代替
+
+### 🐛 Bug Fixes
+
+- 确保 `table action` 的值被正确更新
+- 修复页面切换的动画无法关闭
+- 修复`PageWrapper`title 不显示
+- 修复表格已知问题
+- 修复 BasicTree 组件不能自定义 title 问题
+- 修复主题切换后按钮样式问题
+
+## 2.0.3 (2021-03-07)
+
+### ✨ Features
+
+- `BasicTree` 新增`clickRowToExpand`,用于单击树节点展开
+- 新增 SvgIcon 插件及示例
+- 账号管理界面增加左侧部门树·
+
+### ⚡ Performance Improvements
+
+- 表格关闭分页时不再携带分页参数
+- 登录页监听回车事件进行登录
+- 当表格设置自适应大小时,根据屏幕来铺满了高度.
+- Tree 滚动条优化
+- 优化本地开发加载速度
+
+### 🐛 Bug Fixes
+
+- 修复`Description`已知问题
+- 修复`BasicForm`已知问题
+- 修复`BasicTree`下 ActionItem 的 show 属性逻辑问题
+- 修复树组件 demo 示例样式错误
+- 修复账号管理新增未清空旧数据
+- form 组件应允许 setFieldsValue 方法值为 null 或者 undefined
+- 确保单级面包屑正确跳转
+- 确保 Form 组件不校验隐藏的表单项
+
+## 2.0.2 (2021-03-04)
+
+### ✨ Refactor
+
+- 重构多语言模块,支持懒加载及远程加载
+
+### ✨ Features
+
+- axios 支持 form-data 格式请求
+- 新增图标选择器组件(支持本地和在线方式)
+- 新增 WebSocket 示例和服务脚本
+- Tree 组件新增 `renderIcon` 属性用于控制层级图标显示
+- Tree->actionItem 新增 show 属性，用于动态控制按钮显示
+- Tree 新增工具栏/title/搜索功能
+- 新增部门管理/修改密码/账号管理/角色管理/菜单管理示例界面
+
+### ⚡ Performance Improvements
+
+- 登录界面动画优化
+- 修复 github 仓库体积过大问题.
+- 默认隐藏表格全屏按钮
+- `crypto-es`改为`crypto-js`，减小打包体积
+- `types`目录移动到根目录,兼容其他目录全局类型
+
+### 🐛 Bug Fixes
+
+- 修复验证码组件警告问题
+- 修复表格不能正确的获取选中行
+- 修复全屏状态下 modal 高度计算错误
+- 修复部分表格样式问题
+- 修复树形表格 `indentSize`设置失效
+
+## 2.0.1 (2021-02-21)
 
 ### ✨ Refactor
 

CNAME

@@ -0,0 +1 @@
+vben.vvbin.cn

README.md

@@ -1,186 +1,105 @@
-<p align="center">
-  <a href="https://github.com/anncwb/vue-vben-admin" target="_blank">
-    <img alt="VbenAdmin Logo" width="200" src="/anncwb/vue-vben-admin/raw/main/.github/res/imgs/logo.png">
-  </a>
-</p>
-<h2 align="center">VUE VBEN ADMIN2.0</h2>
+<div align="center"> <a href="https://github.com/anncwb/vue-vben-admin"> <img alt="VbenAdmin Logo" width="200" height="200" src="https://anncwb.github.io/anncwb/images/logo.png"> </a> <br> <br>
 
-[Chinese](./README.zh-CN.md) | **English**
+[![license](https://img.shields.io/github/license/anncwb/vue-vben-admin.svg)](LICENSE)
 
-[CHANGELOG](CHANGELOG.en_US.md)
+<h1>Vue vben admin</h1>
+</div>
 
-- [Introduction](#introduction)
-- [GitHub](#github)
-  - [Thin](#thin)
-- [Preview](#preview)
-- [Documentation](#documentation)
-- [Preinstallation](#preinstallation)
-  - [Environmental requirements](#environmental-requirements)
-  - [UI framework](#ui-framework)
-  - [Icon](#icon)
-  - [Plugin](#plugin)
-  - [Suggested development environment](#suggested-development-environment)
-- [Install](#install)
-- [Usage](#usage)
-  - [Development environment](#development-environment)
-  - [Build](#build)
-  - [Format](#format)
-  - [Other](#other)
-- [Git submit specifications](#git-submit-specifications)
-- [Code contribution](#code-contribution)
-- [Finished features](#finished-features)
-- [Developing features](#developing-features)
-- [Browser support](#browser-support)
-- [Plugins](#plugins)
+**English** | [中文](./README.zh-CN.md)
 
 ## Introduction
 
-The project is based on the vue3 style background management system implemented by ʻant-design-vue`, `typescript`,`vue3.0`,`vite`,`tsx`,
+Vue Vben Admin is a free and open source middle and back-end template. Using the latest `vue3`, `vite2`, `TypeScript` and other mainstream technology development, the out-of-the-box middle and back-end front-end solutions can also be used for learning reference.
 
-## GitHub
+## Feature
 
-[vue-vben-admin2.0](https://github.com/anncwb/vue-vben-admin) - `main` branch
-
-### Thin
-
-[vue-vben-admin-thin-next](https://github.com/anncwb/vben-admin-thin-next)
+- **State of The Art Development**：Use front-end front-end technology development such as Vue3/vite2
+- **TypeScript**: Application-level JavaScript language
+- **Theming**: Configurable themes
+- **International**：Built-in complete internationalization program
+- **Mock Server** Built-in mock data scheme
+- **Authority** Built-in complete dynamic routing permission generation scheme.
+- **Component** Multiple commonly used components are encapsulated twice
 
 ## Preview
 
-- [2.0 preview](https://vvbin.cn/next/)
+- [vue-vben-admin](https://vben.vvbin.cn/) - Full version Chinese site
+- [vue-vben-admin-gh-pages](https://anncwb.github.io/vue-vben-admin/) - Full version of the github site
+- [vben-admin-thin-next](https://vben.vvbin.cn/thin/next/) - Simplified Chinese site
+- [vben-admin-thin-gh-pages](https://anncwb.github.io/vben-admin-thin-next/) -Simplified github site
 
-- [2.0 Thin Preview](https://vvbin.cn/thin/next/)
-
-Account for test: vben/123456
+Test account: vben/123456
 
 <p align="center">
-    <img alt="VbenAdmin Logo" width="100%" src="./.github/res/imgs/preview1.png">
-    <img alt="VbenAdmin Logo" width="100%" src="./.github/res/imgs/preview2.png">
-    <img alt="VbenAdmin Logo" width="100%" src="./.github/res/imgs/preview3.png">
+    <img alt="VbenAdmin Logo" width="100%" src="https://anncwb.github.io/anncwb/images/preview1.png">
+    <img alt="VbenAdmin Logo" width="100%" src="https://anncwb.github.io/anncwb/images/preview2.png">
+    <img alt="VbenAdmin Logo" width="100%" src="https://anncwb.github.io/anncwb/images/preview3.png">
 </p>
 
+### Use Gitpod
+
+Open the project in Gitpod (free online dev environment for GitHub) and start coding immediately.
+
+[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/anncwb/vue-vben-admin)
+
 ## Documentation
 
-The documentation for 2.0 hasn't started yet, it will be provided later.
+[Document](https://doc.vvbin.cn/)
 
-## Preinstallation
+## Preparation
 
-### Environmental requirements
+- [node](http://nodejs.org/) and [git](https://git-scm.com/) - Project development environment
+- [Vite](https://vitejs.dev/) - Familiar with vite features
+- [Vue3](https://v3.vuejs.org/) - Familiar with Vue basic syntax
+- [TypeScript](https://www.typescriptlang.org/) - Familiar with the basic syntax of `TypeScript`
+- [Es6+](http://es6.ruanyifeng.com/) - Familiar with es6 basic syntax
+- [Vue-Router-Next](https://next.router.vuejs.org/) - Familiar with the basic use of vue-router
+- [Ant-Design-Vue](https://2x.antdv.com/docs/vue/introduce-cn/) - ui basic use
+- [Mock.js](https://github.com/nuysoft/Mock) - mockjs basic syntax
 
-- `Node.js`: - Version > `12.0.0` .
-- `yarn` : - Package management tool.
+## Install and use
 
-### UI framework
-
-- [Tailwind CSS](https://tailwindcss.com/) - 2.0.0-beta.5 has deleted.
-- [Ant Design Vue 2.0](https://2x.antdv.com/docs/vue/introduce-cn/)
-
-### Icon
-
-- [Ant Design Vue Icon Component](https://2x.antdv.com/components/icon-cn/) - Icon which is imported on demand.
-- [Iconify](https://iconify.design) - Icon can be used [Icônes](https://icones.netlify.app/)
-- [PurgeIcons](https://github.com/antfu/purge-icons) - Icon which is used by build.
-
-### Plugin
-
-- [Vue Router Next](https://github.com/vuejs/vue-router-next)
-- [Vuex Next](https://github.com/vuejs/vuex)
-- [vuex-module-decorators](https://github.com/championswimmer/vuex-module-decorators) - vuex modular
-- [vite-plugin-mock](https://github.com/anncwb/vite-plugin-mock) - Mock plugin base on vite
-- [vue-i18n](https://github.com/intlify/vue-i18n-next) - Internationalization
-- [lodash-es](https://github.com/lodash/lodash) - JavaScript utility library
-- [axios](https://github.com/axios/axios) - Http data interaction
-- [TypeScript](https://www.typescriptlang.org/)
-
-### Suggested development environment
-
-- `Git`: - Tool of version management
-- `Visual Studio Code` - (VSCode): Latest version
-  - [VS Code Extensions](./.vscode/extensions.json)
-    - [Iconify IntelliSense](https://marketplace.visualstudio.com/items?itemName=antfu.iconify)
-    - [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) - Tailwind css style association
-    - [Vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur) - Essential for vue development
-    - [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) - Checking script code
-    - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - Code formatting
-    - [Stylelint](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint) - Css formatting
-
-## Install
+- Get the project code
 
 ```bash
-#  Make git case sensitive to file names
-git config core.ignorecase false
+git clone https://github.com/anncwb/vue-vben-admin.git
+```
 
-# Pull code of the project
-git clone https://github.com/anncwb/vue-vben-admin.git vue-vben-admin-2.0
+- Installation dependencies
 
-cd vue-vben-admin-2.0
+```bash
+cd vue-vben-admin
 
-# If you use other package management tool, you can install it by yourself
-#  if you hasn't install yarn, please run: npm install -g yarn
-yarn install
+pnpm install
 
 ```
 
-## Usage
-
-### Development environment
+- run
 
 ```bash
-yarn serve
+pnpm serve
 ```
 
-### Build
+- build
 
 ```bash
-
-yarn build # build
-
-yarn build:no-cache # build, cache will be removed before build
-
-yarn report # Generate build package report preview
+pnpm build
 ```
 
-### Format
+## Change Log
 
-```bash
-yarn lint:stylelint # css formatting
+[CHANGELOG](./CHANGELOG.zh_CN.md)
 
-yarn lint:prettier # js/ts code formatting
-```
+## Project
 
-### Other
+- [vue-vben-admin](https://github.com/anncwb/vue-vben-admin) - full version
+- [vue-vben-admin-thin-next](https://github.com/anncwb/vben-admin-thin-next) - Simplified version
 
-```bash
-yarn reinstall # Remove dependencies and reinstall, supported window
+## How to contribute
 
-yarn preview # Build and preview in local
+You are very welcome to join！[Raise an issue](https://github.com/anncwb/vue-vben-admin/issues/new/choose) Or submit a Pull Request。
 
-yarn log # Generate CHANGELOG
-
-yarn clean:cache # Delete cache
-
-yarn clean:lib # Delete node_modules, supported window
-```
-
-## Git submit specifications
-
-- Refer to [vue](https://github.com/vuejs/vue/blob/dev/.github/COMMIT_CONVENTION.md) specifications ([Angular](https://github.com/conventional-changelog/conventional-changelog/tree/master/packages/conventional-changelog-angular))
-
-  - `feat` Add new features
-  - `fix` Fix problem/BUG
-  - `style` Code style related and doesn't affect the running result
-  - `perf` Optimization/performance improvement
-  - `refactor` Refactor
-  - `revert` Undo edit
-  - `test` Test related
-  - `docs` Documentation/notes
-  - `chore` Dependent update/scaffolding configuration modification etc
-  - `workflow` Workflow improvements
-  - `ci` Continuous integration
-  - `types` Update file of type definition
-  - `wip` Developing
-
-## Code contribution
+**Pull Request:**
 
 1. Fork code!
 2. Create your own branch: `git checkout -b feat/xxxx`
@@ -188,73 +107,63 @@ yarn clean:lib # Delete node_modules, supported window
 4. Push your branch: `git push origin feat/xxxx`
 5. submit`pull request`
 
-## Finished features
+## Git Contribution submission specification
 
-- [x] Project construction (based on vite）)
-- [x] Login and exit
-- [x] Menu (can search, drag and drop and menu layout)
-- [x] Multiple tabs/breadcrumbs
-- [x] Permission management base on role
-- [x] Permission management base on background
-- [x] The separation of routing and menu settings
-- [x] Collapsible sidebar
-- [x] Draggable sidebar
-- [x] Multi-tab mode/global control
-- [x] Menu search
-- [x] Page loading
-- [x] Scroll bar component
-- [x] Pop-up window expansion (dragable, full screen, adaptive height)
-- [x] Mock data
-- [x] hook Package
-- [x] Form component
-- [x] Right-click menu
-- [x] Watermark plugin
-- [x] Animation component
-- [x] QR code plugin
-- [x] Internationalization plugin
-- [x] Details component
-- [x] Validation component
-- [x] Tree component
-- [x] Picture preview component
-- [x] Table component
-- [x] Chart library
-- [x] Digital animation
-- [x] First screen loading waiting animation
-- [x] Extract the production environment profile
-- [x] Build Gzip
-- [x] System performance optimization
-- [x] Data import and export
-- [x] Global error handling
-- [x] Rich text component
-- [x] Upload component
+- reference [vue](https://github.com/vuejs/vue/blob/dev/.github/COMMIT_CONVENTION.md) specification ([Angular](https://github.com/conventional-changelog/conventional-changelog/tree/master/packages/conventional-changelog-angular))
 
-## Developing features
+  - `feat` Add new features
+  - `fix` Fix the problem/BUG
+  - `style` The code style is related and does not affect the running result
+  - `perf` Optimization/performance improvement
+  - `refactor` Refactor
+  - `revert` Undo edit
+  - `test` Test related
+  - `docs` Documentation/notes
+  - `chore` Dependency update/scaffolding configuration modification etc.
+  - `workflow` Workflow improvements
+  - `ci` Continuous integration
+  - `types` Type definition file changes
+  - `wip` In development
 
-- [ ] Theme configuration
-- [ ] Dark theme
-- [ ] Build CDN
+## Related warehouse
 
-If you have more components/functions/suggestions/bugs/, welcome to submit pr or issue.
+If these plugins are helpful to you, you can give a star support
+
+- [vite-plugin-mock](https://github.com/anncwb/vite-plugin-mock) - Used for local and development environment data mock
+- [vite-plugin-html](https://github.com/anncwb/vite-plugin-html) - Used for html template conversion and compression
+- [vite-plugin-style-import](https://github.com/anncwb/vite-plugin-style-import) - Used for component library style introduction on demand
+- [vite-plugin-theme](https://github.com/anncwb/vite-plugin-theme) - Used for online switching of theme colors and other color-related configurations
+- [vite-plugin-imagemin](https://github.com/anncwb/vite-plugin-imagemin) - Used to pack compressed image resources
+- [vite-plugin-compression](https://github.com/anncwb/vite-plugin-compression) - Used to pack input .gz|.brotil files
+- [vite-plugin-svg-icons](https://github.com/anncwb/vite-plugin-svg-icons) - Used to quickly generate svg sprite
 
 ## Browser support
 
-It is recommended to use the `Chrome` browser for local development. Development in the Firefox browser is relatively slow.
+The `Chrome 80+` browser is recommended for local development
 
-Support modern browsers, Not currently supported ie11，Follow-up consideration support ie11
+Support modern browsers, not IE
 
 | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt=" Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt=" Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>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 |
 | :-: | :-: | :-: | :-: | :-: |
 | not support | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
 
-More browsers can view [Can I Use Es Module](https://caniuse.com/?search=ES%20Module)
+## Maintainer
 
-## Plugins
+[@Vben](https://github.com/anncwb)
 
-If these plugins are helpful to you, you can give a star
+## Donate
 
-- [vite-plugin-mock](https://github.com/anncwb/vite-plugin-mock)
-- [vite-plugin-html](https://github.com/anncwb/vite-plugin-html)
-- [vite-plugin-style-import](https://github.com/anncwb/vite-plugin-style-import)
-- [vite-plugin-theme](https://github.com/anncwb/vite-plugin-theme)
-- [vite-plugin-imagemin](https://github.com/anncwb/vite-plugin-imagemin)
-- [vite-plugin-compression](https://github.com/anncwb/vite-plugin-compression)
+If you think this project is helpful to you, you can help the author buy a cup of coffee to show your support!
+
+![donate](https://anncwb.github.io/anncwb/images/sponsor.png)
+
+<a style="display: block;width: 100px;height: 50px;line-height: 50px; color: #fff;text-align: center; background: #408aed;border-radius: 4px;" href="https://www.paypal.com/paypalme/cvvben">Paypal Me</a>
+
+## Discord
+
+- [github discussions](https://github.com/anncwb/vue-vben-admin/discussions)
+- [Discord](https://discord.gg/8GuAdwDhj6)
+
+## License
+
+[MIT © Vben-2020](./LICENSE)

README.zh-CN.md

@@ -1,170 +1,113 @@
-<p align="center">
-  <a href="https://github.com/anncwb/vue-vben-admin" target="_blank">
-    <img alt="VbenAdmin Logo" width="200" src="./.github/res/imgs/logo.png">
-  </a>
-</p>
-<h2 align="center">VUE VBEN ADMIN2.0</h2>
+<div align="center"> <a href="https://github.com/anncwb/vue-vben-admin"> <img alt="VbenAdmin Logo" width="200" height="200" src="https://anncwb.github.io/anncwb/images/logo.png"> </a> <br> <br>
+
+[![license](https://img.shields.io/github/license/anncwb/vue-vben-admin.svg)](LICENSE)
+
+<h1>Vue vben admin</h1>
+</div>
 
 **中文** | [English](./README.md)
 
-[更新日志](CHANGELOG.zh_CN.md)
+## 简介
 
-- [介绍](#介绍)
-- [gitHub 地址](#github-地址)
-  - [精简版地址](#精简版地址)
-- [预览地址](#预览地址)
-- [文档](#文档)
-- [预安装](#预安装)
-  - [环境要求](#环境要求)
-  - [UI 框架](#ui-框架)
-  - [图标](#图标)
-  - [插件](#插件)
-  - [建议开发环境](#建议开发环境)
-- [安装](#安装)
-- [使用](#使用)
-  - [开发环境](#开发环境)
-  - [打包](#打包)
-  - [格式化](#格式化)
-  - [其他](#其他)
-- [Git 提交规范](#git-提交规范)
-- [代码贡献](#代码贡献)
-- [已完成功能](#已完成功能)
-- [正在开发的功能](#正在开发的功能)
-- [浏览器支持](#浏览器支持)
-- [插件](#插件-1)
-- [加入我们](#加入我们)
+Vue Vben Admin 是一个免费开源的中后台模版。使用了最新的`vue3`,`vite2`,`TypeScript`等主流技术开发，开箱即用的中后台前端解决方案，也可用于学习参考。
 
-## 介绍
+## 特性
 
-项目基于`ant-design-vue`,`typescript`,`vue3.0`,`vite`,`tsx`实现的 vue3 风格的后台管理系统，
+- **最新技术栈**：使用 Vue3/vite2 等前端前沿技术开发
+- **TypeScript**: 应用程序级 JavaScript 的语言
+- **主题**：可配置的主题
+- **国际化**：内置完善的国际化方案
+- **Mock 数据** 内置 Mock 数据方案
+- **权限** 内置完善的动态路由权限生成方案
+- **组件** 二次封装了多个常用的组件
 
-## gitHub 地址
+## 预览
 
-[vue-vben-admin2.0](https://github.com/anncwb/vue-vben-admin) - `main` 分支
-
-### 精简版地址
-
-[vue-vben-admin-thin-next](https://github.com/anncwb/vben-admin-thin-next)
-
-## 预览地址
-
-- [2.0 在线预览](https://vvbin.cn/next/)
-
-- [2.0 精简版 在线预览](https://vvbin.cn/thin/next/)
+- [vue-vben-admin](https://vben.vvbin.cn/) - 完整版中文站点
+- [vue-vben-admin-gh-pages](https://anncwb.github.io/vue-vben-admin/) - 完整版 github 站点
+- [vben-admin-thin-next](https://vben.vvbin.cn/thin/next/) - 简化版中文站点
+- [vben-admin-thin-gh-pages](https://anncwb.github.io/vben-admin-thin-next/) - 简化版 github 站点
 
 测试账号: vben/123456
 
 <p align="center">
-    <img alt="VbenAdmin Logo" width="100%" src="./.github/res/imgs/preview1.png">
-    <img alt="VbenAdmin Logo" width="100%" src="./.github/res/imgs/preview2.png">
-    <img alt="VbenAdmin Logo" width="100%" src="./.github/res/imgs/preview3.png">
+    <img alt="VbenAdmin Logo" width="100%" src="https://anncwb.github.io/anncwb/images/preview1.png">
+    <img alt="VbenAdmin Logo" width="100%" src="https://anncwb.github.io/anncwb/images/preview2.png">
+    <img alt="VbenAdmin Logo" width="100%" src="https://anncwb.github.io/anncwb/images/preview3.png">
 </p>
 
+### 使用 Gitpod
+
+在 Gitpod（适用于 GitHub 的免费在线开发环境）中打开项目，并立即开始编码.
+
+[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/anncwb/vue-vben-admin)
+
 ## 文档
 
-[文档地址,持续更新中。。，](https://vvbin.cn/doc-next/)
+[文档地址](https://doc.vvbin.cn/)
 
-## 预安装
+## 准备
 
-### 环境要求
+- [node](http://nodejs.org/) 和 [git](https://git-scm.com/) -项目开发环境
+- [Vite](https://vitejs.dev/) - 熟悉 vite 特性
+- [Vue3](https://v3.vuejs.org/) - 熟悉 Vue 基础语法
+- [TypeScript](https://www.typescriptlang.org/) - 熟悉`TypeScript`基本语法
+- [Es6+](http://es6.ruanyifeng.com/) - 熟悉 es6 基本语法
+- [Vue-Router-Next](https://next.router.vuejs.org/) - 熟悉 vue-router 基本使用
+- [Ant-Design-Vue](https://2x.antdv.com/docs/vue/introduce-cn/) - ui 基本使用
+- [Mock.js](https://github.com/nuysoft/Mock) - mockjs 基本语法
 
-- `Node.js`: - 版本大于 `12.0.0`
-- `yarn` : - 包管理工具.
+## 安装使用
 
-### UI 框架
-
-- [Tailwind CSS](https://tailwindcss.com/) - 2.0.0-beta.5 已删除
-- [Ant Design Vue 2.0](https://2x.antdv.com/docs/vue/introduce-cn/)
-
-### 图标
-
-- [Ant Design Vue Icon Component](https://2x.antdv.com/components/icon-cn/) - 按需引入所需图标.
-- [Iconify](https://iconify.design) - 使用任何图标集中的图标 [Icônes](https://icones.netlify.app/)
-- [PurgeIcons](https://github.com/antfu/purge-icons) - 仅打包所使用到的图标.
-
-### 插件
-
-- [Vue Router Next](https://github.com/vuejs/vue-router-next)
-- [Vuex Next](https://github.com/vuejs/vuex)
-- [vuex-module-decorators](https://github.com/championswimmer/vuex-module-decorators) - vuex 模块化
-- [vite-plugin-mock](https://github.com/anncwb/vite-plugin-mock) - 基于 vite 的 mock 插件.
-- [vue-i18n](https://github.com/intlify/vue-i18n-next) - 国际化
-- [lodash-es](https://github.com/lodash/lodash) - JavaScript 实用程序库
-- [axios](https://github.com/axios/axios) - Http 数据交互
-- [TypeScript](https://www.typescriptlang.org/)
-
-### 建议开发环境
-
-- `Git`: - 版本管理工具
-- `Visual Studio Code` - (VSCode): 最新版本
-  - [VS Code Extensions](./.vscode/extensions.json)
-    - [Iconify IntelliSense](https://marketplace.visualstudio.com/items?itemName=antfu.iconify)
-    - [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) - Tailwind Css 样式联想
-    - [Vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur) - vue 开发必备
-    - [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) - 脚本代码检查
-    - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - 代码格式化
-    - [Stylelint](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint) - css 格式化
-
-## 安装
-
-```js
-//  使git对文件名大小写敏感
-git config core.ignorecase false
-
-// 拉取项目代码
-
-git clone https://github.com/anncwb/vue-vben-admin.git vue-vben-admin-2.0
-
-cd vue-vben-admin-2.0
-
-// 如果使用别的包管理工具，可以自行安装
-// 如果未安装yarn，请运行：npm install -g yarn
-yarn install
-
-```
-
-## 使用
-
-### 开发环境
+- 获取项目代码
 
 ```bash
-yarn serve
+git clone https://github.com/anncwb/vue-vben-admin.git
 ```
 
-### 打包
+- 安装依赖
 
 ```bash
+cd vue-vben-admin
 
-yarn build # 打包
+pnpm install
 
-yarn build:no-cache # 打包，执行之前会先删除缓存
-
-yarn report # 生成构建包报表预览
 ```
 
-### 格式化
+- 运行
 
 ```bash
-yarn lint:stylelint # 样式格式化
-
-yarn lint:prettier # js/ts代码格式化
+pnpm serve
 ```
 
-### 其他
+- 打包
 
 ```bash
-yarn reinstall # 删除依赖重新装，兼容window
-
-yarn preview # 本地进行打包预览
-
-yarn log # 生成CHANGELOG
-
-yarn clean:cache # 删除缓存
-
-yarn clean:lib # 删除node_modules，兼容window系统
+pnpm build
 ```
 
-## Git 提交规范
+## 更新日志
+
+[CHANGELOG](./CHANGELOG.zh_CN.md)
+
+## 项目地址
+
+- [vue-vben-admin](https://github.com/anncwb/vue-vben-admin) - 完整版
+- [vue-vben-admin-thin-next](https://github.com/anncwb/vben-admin-thin-next) - 简化版
+
+## 如何贡献
+
+非常欢迎你的加入！[提一个 Issue](https://github.com/anncwb/vue-vben-admin/issues/new/choose) 或者提交一个 Pull Request。
+
+**Pull Request:**
+
+1. Fork 代码!
+2. 创建自己的分支: `git checkout -b feat/xxxx`
+3. 提交你的修改: `git commit -am 'feat(function): add xxxxx'`
+4. 推送您的分支: `git push origin feat/xxxx`
+5. 提交`pull request`
+
+## Git 贡献提交规范
 
 - 参考 [vue](https://github.com/vuejs/vue/blob/dev/.github/COMMIT_CONVENTION.md) 规范 ([Angular](https://github.com/conventional-changelog/conventional-changelog/tree/master/packages/conventional-changelog-angular))
 
@@ -182,90 +125,51 @@ yarn clean:lib # 删除node_modules，兼容window系统
   - `types` 类型定义文件更改
   - `wip` 开发中
 
-## 代码贡献
-
-1. Fork 代码!
-2. 创建自己的分支: `git checkout -b feat/xxxx`
-3. 提交你的修改: `git commit -am 'feat(function): add xxxxx'`
-4. 推送您的分支: `git push origin feat/xxxx`
-5. 提交`pull request`
-
-## 已完成功能
-
-- [x] 项目搭建（基于 vite）
-- [x] 登录和注销
-- [x] 菜单（可以搜索及拖拽以及菜单布局）
-- [x] 多标签页/面包屑
-- [x] 基于角色的权限管理
-- [x] 基于后台的权限管理
-- [x] 分离的路由和菜单设置
-- [x] 可折叠侧边栏
-- [x] 可拖拽侧边栏
-- [x] 多标签页模式/全局控制
-- [x] 菜单搜索
-- [x] 页面加载 loading
-- [x] 滚动条组件
-- [x] 弹窗扩展（可拖拽,全屏,自适应高度）
-- [x] 模拟数据
-- [x] hook 封装
-- [x] 表单组件
-- [x] 右键菜单
-- [x] 水印插件
-- [x] 动画组件
-- [x] 二维码插件
-- [x] 国际化插件
-- [x] 详情组件
-- [x] 验证组件
-- [x] 树组件
-- [x] 图片预览组件
-- [x] 表格组件
-- [x] 图表库
-- [x] 数字动画
-- [x] 首屏加载等待动画
-- [x] 抽取生产环境配置文件
-- [x] 打包 Gzip
-- [x] 数据导入导出
-- [x] 系统性能优化
-- [x] 全局错误处理
-- [x] 富文本组件
-- [x] 上传组件
-- [x] 多语言支持
-
-## 正在开发的功能
-
-- [ ] 主题配置
-- [ ] 黑暗主题
-- [ ] 打包 CDN
-
-更多组件/功能/建议/bug/欢迎提交 pr 或者 issue
-
 ## 浏览器支持
 
-本地开发推荐使用`Chrome`浏览器,在火狐浏览器进行开发相对卡顿。
+本地开发推荐使用`Chrome 80+` 浏览器
 
-支持现代浏览器, IE 暂不支持，后续考虑支持 ie11
+支持现代浏览器, 不支持 IE
 
 | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt=" Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt=" Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>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 |
 | :-: | :-: | :-: | :-: | :-: |
 | not support | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
 
-更多浏览器可以查看 [Can I Use Es Module](https://caniuse.com/?search=ES%20Module)
-
-## 插件
+## 相关仓库
 
 如果这些插件对你有帮助，可以给一个 star 支持下
 
-- [vite-plugin-mock](https://github.com/anncwb/vite-plugin-mock)
-- [vite-plugin-html](https://github.com/anncwb/vite-plugin-html)
-- [vite-plugin-style-import](https://github.com/anncwb/vite-plugin-style-import)
-- [vite-plugin-theme](https://github.com/anncwb/vite-plugin-theme)
-- [vite-plugin-imagemin](https://github.com/anncwb/vite-plugin-imagemin)
-- [vite-plugin-compression](https://github.com/anncwb/vite-plugin-compression)
+- [vite-plugin-mock](https://github.com/anncwb/vite-plugin-mock) - 用于本地及开发环境数据 mock
+- [vite-plugin-html](https://github.com/anncwb/vite-plugin-html) - 用于 html 模版转换及压缩
+- [vite-plugin-style-import](https://github.com/anncwb/vite-plugin-style-import) - 用于组件库样式按需引入
+- [vite-plugin-theme](https://github.com/anncwb/vite-plugin-theme) - 用于在线切换主题色等颜色相关配置
+- [vite-plugin-imagemin](https://github.com/anncwb/vite-plugin-imagemin) - 用于打包压缩图片资源
+- [vite-plugin-compression](https://github.com/anncwb/vite-plugin-compression) - 用于打包输出.gz|.brotil 文件
+- [vite-plugin-svg-icons](https://github.com/anncwb/vite-plugin-svg-icons) - 用于快速生成 svg 雪碧图
 
-## 加入我们
+## 后台整合示例
 
-`Vue-Vben-Aadmin` 是完全开源免费的项目，在帮助开发者更方便地进行中大型管理系统开发，同时也提供 QQ 交流群(项目刚起步，人数较少，有兴趣的可以加群一起讨论)，使用问题欢迎在群内提问。
+- [lamp-cloud](https://github.com/zuihou/lamp-cloud) - 基于 SpringCloud Alibaba 的微服务中后台快速开发平台
+- [matecloud](https://github.com/matevip/matecloud) - MateCloud 微服务脚手架，基于 Spring Cloud 2020.0.3、SpringBoot 2.5.3 的全开源平台
+
+## 维护者
+
+[@Vben](https://github.com/anncwb)
+
+## 捐赠
+
+如果你觉得这个项目对你有帮助，你可以帮作者买一杯咖啡表示支持!
+
+![donate](https://anncwb.github.io/anncwb/images/sponsor.png)
+
+<a style="display: block;width: 100px;height: 50px;line-height: 50px; color: #fff;text-align: center; background: #408aed;border-radius: 4px;" href="https://www.paypal.com/paypalme/cvvben">Paypal Me</a>
+
+## 交流
+
+`Vue-vben-Admin` 是完全开源免费的项目，在帮助开发者更方便地进行中大型管理系统开发，同时也提供 QQ 交流群使用问题欢迎在群内提问。
 
 - QQ 群 `569291866`
 
- <img alt="VbenAdmin Logo" width="100" src="./.github/res/imgs/qq.jpeg">
+## License
+
+[MIT © Vben-2020](./LICENSE)

build/config/themeConfig.ts

@@ -2,12 +2,12 @@ import { generate } from '@ant-design/colors';
 
 export const primaryColor = '#0960bd';
 
-export const themeMode = 'light';
-
-export type ThemeMode = 'dark' | 'light';
+export const darkMode = 'light';
 
 type Fn = (...arg: any) => any;
 
+type GenerateTheme = 'default' | 'dark';
+
 export interface GenerateColorsParams {
   mixLighten: Fn;
   mixDarken: Fn;
@@ -15,20 +15,19 @@ export interface GenerateColorsParams {
   color?: string;
 }
 
-export function generateAntColors(color: string, mode: ThemeMode) {
+export function generateAntColors(color: string, theme: GenerateTheme = 'default') {
   return generate(color, {
-    theme: mode == 'dark' ? 'dark' : 'default',
+    theme,
   });
 }
 
-export function getThemeColors(color?: string, theme?: ThemeMode) {
+export function getThemeColors(color?: string) {
   const tc = color || primaryColor;
-  const tm = theme || themeMode;
-  const colors = generateAntColors(tc, tm);
-  const primary = colors[5];
-  const modeColors = generateAntColors(primary, tm === 'dark' ? 'light' : 'dark');
+  const lightColors = generateAntColors(tc);
+  const primary = lightColors[5];
+  const modeColors = generateAntColors(primary, 'dark');
 
-  return [...colors, ...modeColors];
+  return [...lightColors, ...modeColors];
 }
 
 export function generateColors({
@@ -38,22 +37,24 @@ export function generateColors({
   tinycolor,
 }: GenerateColorsParams) {
   const arr = new Array(19).fill(0);
-  const lightens = arr.map((t, i) => {
+  const lightens = arr.map((_t, i) => {
     return mixLighten(color, i / 5);
   });
 
-  const darkens = arr.map((t, i) => {
+  const darkens = arr.map((_t, i) => {
     return mixDarken(color, i / 5);
   });
 
-  const alphaColors = arr.map((t, i) => {
+  const alphaColors = arr.map((_t, i) => {
     return tinycolor(color)
       .setAlpha(i / 20)
       .toRgbString();
   });
 
+  const shortAlphaColors = alphaColors.map((item) => item.replace(/\s/g, '').replace(/0\./g, '.'));
+
   const tinycolorLightens = arr
-    .map((t, i) => {
+    .map((_t, i) => {
       return tinycolor(color)
         .lighten(i * 5)
         .toHexString();
@@ -61,44 +62,18 @@ export function generateColors({
     .filter((item) => item !== '#ffffff');
 
   const tinycolorDarkens = arr
-    .map((t, i) => {
+    .map((_t, i) => {
       return tinycolor(color)
         .darken(i * 5)
         .toHexString();
     })
     .filter((item) => item !== '#000000');
-  return [...lightens, ...darkens, ...alphaColors, ...tinycolorDarkens, ...tinycolorLightens];
-}
-
-/**
- * less global variable
- */
-export function generateModifyVars() {
-  const palettes = generateAntColors(primaryColor, themeMode);
-  const primary = palettes[5];
-
-  const primaryColorObj: Record<string, string> = {};
-
-  for (let index = 0; index < 10; index++) {
-    primaryColorObj[`primary-${index + 1}`] = palettes[index];
-  }
-
-  return {
-    'primary-color': primary,
-    ...primaryColorObj,
-    'info-color': primary,
-    'processing-color': primary,
-    'success-color': '#55D187', //  Success color
-    'error-color': '#ED6F6F', //  False color
-    'warning-color': '#EFBD47', //   Warning color
-    'disabled-color': 'rgba(0, 0, 0, 0.25)', //  Failure color
-    'heading-color': 'rgba(0, 0, 0, 0.85)', //  Title color
-    'text-color': 'rgba(0, 0, 0, 0.85)', //  Main text color
-    'text-color-secondary': 'rgba(0, 0, 0, 0.45)', // Subtext color
-    'font-size-base': '14px', //  Main font size
-    'box-shadow-base': '0 2px 8px rgba(0, 0, 0, 0.15)', //  Floating shadow
-    'border-color-base': '#d9d9d9', //  Border color,
-    'border-radius-base': '2px', //  Component/float fillet
-    'link-color': primary, //   Link color
-  };
+  return [
+    ...lightens,
+    ...darkens,
+    ...alphaColors,
+    ...shortAlphaColors,
+    ...tinycolorDarkens,
+    ...tinycolorLightens,
+  ].filter((item) => !item.includes('-'));
 }

build/generate/generateModifyVars.ts

@@ -0,0 +1,37 @@
+import { generateAntColors, primaryColor } from '../config/themeConfig';
+import { getThemeVariables } from 'ant-design-vue/dist/theme';
+import { resolve } from 'path';
+
+/**
+ * less global variable
+ */
+export function generateModifyVars(dark = false) {
+  const palettes = generateAntColors(primaryColor);
+  const primary = palettes[5];
+
+  const primaryColorObj: Record<string, string> = {};
+
+  for (let index = 0; index < 10; index++) {
+    primaryColorObj[`primary-${index + 1}`] = palettes[index];
+  }
+
+  const modifyVars = getThemeVariables({ dark });
+  return {
+    ...modifyVars,
+    // Used for global import to avoid the need to import each style file separately
+    // reference:  Avoid repeated references
+    hack: `${modifyVars.hack} @import (reference) "${resolve('src/design/config.less')}";`,
+    'primary-color': primary,
+    ...primaryColorObj,
+    'info-color': primary,
+    'processing-color': primary,
+    'success-color': '#55D187', //  Success color
+    'error-color': '#ED6F6F', //  False color
+    'warning-color': '#EFBD47', //   Warning color
+    //'border-color-base': '#EEEEEE',
+    'font-size-base': '14px', //  Main font size
+    'border-radius-base': '2px', //  Component/float fillet
+    'link-color': primary, //   Link color
+    'app-content-background': '#fafafa', //   Link color
+  };
+}

build/generate/icon/index.ts

@@ -0,0 +1,72 @@
+import path from 'path';
+import fs from 'fs-extra';
+import inquirer from 'inquirer';
+import colors from 'picocolors';
+import pkg from '../../../package.json';
+
+async function generateIcon() {
+  const dir = path.resolve(process.cwd(), 'node_modules/@iconify/json');
+
+  const raw = await fs.readJSON(path.join(dir, 'collections.json'));
+
+  const collections = Object.entries(raw).map(([id, v]) => ({
+    ...(v as any),
+    id,
+  }));
+
+  const choices = collections.map((item) => ({ key: item.id, value: item.id, name: item.name }));
+
+  inquirer
+    .prompt([
+      {
+        type: 'list',
+        name: 'useType',
+        choices: [
+          { key: 'local', value: 'local', name: 'Local' },
+          { key: 'onLine', value: 'onLine', name: 'OnLine' },
+        ],
+        message: 'How to use icons?',
+      },
+      {
+        type: 'list',
+        name: 'iconSet',
+        choices: choices,
+        message: 'Select the icon set that needs to be generated?',
+      },
+      {
+        type: 'input',
+        name: 'output',
+        message: 'Select the icon set that needs to be generated?',
+        default: 'src/components/Icon/data',
+      },
+    ])
+    .then(async (answers) => {
+      const { iconSet, output, useType } = answers;
+      const outputDir = path.resolve(process.cwd(), output);
+      fs.ensureDir(outputDir);
+      const genCollections = collections.filter((item) => [iconSet].includes(item.id));
+      const prefixSet: string[] = [];
+      for (const info of genCollections) {
+        const data = await fs.readJSON(path.join(dir, 'json', `${info.id}.json`));
+        if (data) {
+          const { prefix } = data;
+          const isLocal = useType === 'local';
+          const icons = Object.keys(data.icons).map(
+            (item) => `${isLocal ? prefix + ':' : ''}${item}`,
+          );
+
+          await fs.writeFileSync(
+            path.join(output, `icons.data.ts`),
+            `export default ${isLocal ? JSON.stringify(icons) : JSON.stringify({ prefix, icons })}`,
+          );
+          prefixSet.push(prefix);
+        }
+      }
+      fs.emptyDir(path.join(process.cwd(), 'node_modules/.vite'));
+      console.log(
+        `✨ ${colors.cyan(`[${pkg.name}]`)}` + ' - Icon generated successfully:' + `[${prefixSet}]`,
+      );
+    });
+}
+
+generateIcon();

build/getConfigFileName.ts

@@ -2,7 +2,7 @@
  * Get the configuration file variable name
  * @param env
  */
-export const getShortName = (env: any) => {
+export const getConfigFileName = (env: Record<string, any>) => {
   return `__PRODUCTION__${env.VITE_GLOB_APP_SHORT_NAME || '__APP'}__CONF__`
     .toUpperCase()
     .replace(/\s/g, '');

build/script/buildConf.ts

@@ -3,42 +3,45 @@
  */
 import { GLOB_CONFIG_FILE_NAME, OUTPUT_DIR } from '../constant';
 import fs, { writeFileSync } from 'fs-extra';
-import chalk from 'chalk';
+import colors from 'picocolors';
 
-import { getCwdPath, getEnvConfig } from '../utils';
-import { getShortName } from '../getShortName';
+import { getEnvConfig, getRootPath } from '../utils';
+import { getConfigFileName } from '../getConfigFileName';
 
 import pkg from '../../package.json';
 
-function createConfig(
-  {
-    configName,
-    config,
-    configFileName = GLOB_CONFIG_FILE_NAME,
-  }: { configName: string; config: any; configFileName?: string } = { configName: '', config: {} }
-) {
+interface CreateConfigParams {
+  configName: string;
+  config: any;
+  configFileName?: string;
+}
+
+function createConfig(params: CreateConfigParams) {
+  const { configName, config, configFileName } = params;
   try {
     const windowConf = `window.${configName}`;
     // Ensure that the variable will not be modified
-    const configStr = `${windowConf}=${JSON.stringify(config)};
+    let configStr = `${windowConf}=${JSON.stringify(config)};`;
+    configStr += `
       Object.freeze(${windowConf});
       Object.defineProperty(window, "${configName}", {
         configurable: false,
         writable: false,
       });
     `.replace(/\s/g, '');
-    fs.mkdirp(getCwdPath(OUTPUT_DIR));
-    writeFileSync(getCwdPath(`${OUTPUT_DIR}/${configFileName}`), configStr);
 
-    console.log(chalk.cyan(`✨ [${pkg.name}]`) + ` - configuration file is build successfully:`);
-    console.log(chalk.gray(OUTPUT_DIR + '/' + chalk.green(configFileName)) + '\n');
+    fs.mkdirp(getRootPath(OUTPUT_DIR));
+    writeFileSync(getRootPath(`${OUTPUT_DIR}/${configFileName}`), configStr);
+
+    console.log(colors.cyan(`✨ [${pkg.name}]`) + ` - configuration file is build successfully:`);
+    console.log(colors.gray(OUTPUT_DIR + '/' + colors.green(configFileName)) + '\n');
   } catch (error) {
-    console.log(chalk.red('configuration file configuration file failed to package:\n' + error));
+    console.log(colors.red('configuration file configuration file failed to package:\n' + error));
   }
 }
 
 export function runBuildConfig() {
   const config = getEnvConfig();
-  const configFileName = getShortName(config);
-  createConfig({ config, configName: configFileName });
+  const configFileName = getConfigFileName(config);
+  createConfig({ config, configName: configFileName, configFileName: GLOB_CONFIG_FILE_NAME });
 }

build/script/postBuild.ts

@@ -1,22 +1,22 @@
 // #!/usr/bin/env node
 
-import { argv } from 'yargs';
 import { runBuildConfig } from './buildConf';
-import chalk from 'chalk';
+import colors from 'picocolors';
 
 import pkg from '../../package.json';
 
 export const runBuild = async () => {
   try {
-    const argvList = argv._;
+    const argvList = process.argv.splice(2);
 
     // Generate configuration file
-    if (!argvList.includes('no-conf')) {
-      await runBuildConfig();
+    if (!argvList.includes('disabled-config')) {
+      runBuildConfig();
     }
-    console.log(`✨ ${chalk.cyan(`[${pkg.name}]`)}` + ' - build successfully!');
+
+    console.log(`✨ ${colors.cyan(`[${pkg.name}]`)}` + ' - build successfully!');
   } catch (error) {
-    console.log(chalk.red('vite build error:\n' + error));
+    console.log(colors.red('vite build error:\n' + error));
     process.exit(1);
   }
 };

build/tsconfig.json

@@ -1,18 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "esnext",
-    "module": "commonjs",
-    "moduleResolution": "node",
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "jsx": "react",
-    "baseUrl": ".",
-    "esModuleInterop": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "experimentalDecorators": true,
-    "lib": ["dom", "esnext"],
-    "incremental": true,
-    "skipLibCheck": true
-  }
-}

build/typeing.d.ts

@@ -1,4 +0,0 @@
-declare module '*.json' {
-  const src: any;
-  export default src;
-}

build/utils.ts

@@ -2,12 +2,6 @@ import fs from 'fs';
 import path from 'path';
 import dotenv from 'dotenv';
 
-export const isFunction = (arg: unknown): arg is (...args: any[]) => any =>
-  typeof arg === 'function';
-
-export const isRegExp = (arg: unknown): arg is RegExp =>
-  Object.prototype.toString.call(arg) === '[object RegExp]';
-
 export function isDevFn(mode: string): boolean {
   return mode === 'development';
 }
@@ -23,59 +17,65 @@ export function isReportMode(): boolean {
   return process.env.REPORT === 'true';
 }
 
-export interface ViteEnv {
-  VITE_PORT: number;
-  VITE_USE_MOCK: boolean;
-  VITE_USE_PWA: boolean;
-  VITE_PUBLIC_PATH: string;
-  VITE_PROXY: [string, string][];
-  VITE_GLOB_APP_TITLE: string;
-  VITE_GLOB_APP_SHORT_NAME: string;
-  VITE_USE_CDN: boolean;
-  VITE_DROP_CONSOLE: boolean;
-  VITE_BUILD_COMPRESS: 'gzip' | 'brotli' | 'none';
-  VITE_DYNAMIC_IMPORT: boolean;
-  VITE_LEGACY: boolean;
-  VITE_USE_IMAGEMIN: boolean;
-}
-
 // Read all environment variable configuration files to process.env
-export function wrapperEnv(envConf: any): ViteEnv {
+export function wrapperEnv(envConf: Recordable): ViteEnv {
   const ret: any = {};
 
   for (const envName of Object.keys(envConf)) {
     let realName = envConf[envName].replace(/\\n/g, '\n');
     realName = realName === 'true' ? true : realName === 'false' ? false : realName;
+
     if (envName === 'VITE_PORT') {
       realName = Number(realName);
     }
-    if (envName === 'VITE_PROXY') {
+    if (envName === 'VITE_PROXY' && realName) {
       try {
-        realName = JSON.parse(realName);
-      } catch (error) {}
+        realName = JSON.parse(realName.replace(/'/g, '"'));
+      } catch (error) {
+        realName = '';
+      }
     }
     ret[envName] = realName;
-    process.env[envName] = realName;
+    // if (typeof realName === 'string') {
+    //   process.env[envName] = realName;
+    // } else if (typeof realName === 'object') {
+    //   process.env[envName] = JSON.stringify(realName);
+    // }
   }
   return ret;
 }
 
+/**
+ * 获取当前环境下生效的配置文件名
+ */
+function getConfFiles() {
+  const script = process.env.npm_lifecycle_script;
+  const reg = new RegExp('--mode ([a-z_\\d]+)');
+  const result = reg.exec(script as string) as any;
+  if (result) {
+    const mode = result[1] as string;
+    return ['.env', `.env.${mode}`];
+  }
+  return ['.env', '.env.production'];
+}
+
 /**
  * Get the environment variables starting with the specified prefix
  * @param match prefix
  * @param confFiles ext
  */
-export function getEnvConfig(match = 'VITE_GLOB_', confFiles = ['.env', '.env.production']) {
+export function getEnvConfig(match = 'VITE_GLOB_', confFiles = getConfFiles()) {
   let envConfig = {};
   confFiles.forEach((item) => {
     try {
       const env = dotenv.parse(fs.readFileSync(path.resolve(process.cwd(), item)));
-
       envConfig = { ...envConfig, ...env };
-    } catch (error) {}
+    } catch (e) {
+      console.error(`Error in parsing ${item}`, e);
+    }
   });
+  const reg = new RegExp(`^(${match})`);
   Object.keys(envConfig).forEach((key) => {
-    const reg = new RegExp(`^(${match})`);
     if (!reg.test(key)) {
       Reflect.deleteProperty(envConfig, key);
     }
@@ -87,6 +87,6 @@ export function getEnvConfig(match = 'VITE_GLOB_', confFiles = ['.env', '.env.pr
  * Get user root directory
  * @param dir file path
  */
-export function getCwdPath(...dir: string[]) {
+export function getRootPath(...dir: string[]) {
   return path.resolve(process.cwd(), ...dir);
 }

build/vite/optimizer.ts

@@ -1,22 +0,0 @@
-// TODO
-import type { GetManualChunk, GetManualChunkApi } from 'rollup';
-
-//
-const vendorLibs: { match: string[]; output: string }[] = [
-  // {
-  //   match: ['xlsx'],
-  //   output: 'xlsx',
-  // },
-];
-
-// @ts-ignore
-export const configManualChunk: GetManualChunk = (id: string, api: GetManualChunkApi) => {
-  console.log(api);
-  if (/[\\/]node_modules[\\/]/.test(id)) {
-    const matchItem = vendorLibs.find((item) => {
-      const reg = new RegExp(`[\\/]node_modules[\\/]_?(${item.match.join('|')})(.*)`, 'ig');
-      return reg.test(id);
-    });
-    return matchItem ? matchItem.output : null;
-  }
-};

build/vite/plugin/compress.ts

@@ -2,28 +2,33 @@
  * Used to package and output gzip. Note that this does not work properly in Vite, the specific reason is still being investigated
  * https://github.com/anncwb/vite-plugin-compression
  */
-import type { Plugin } from 'vite';
-
+import type { PluginOption } from 'vite';
 import compressPlugin from 'vite-plugin-compression';
 
-export function configCompressPlugin(compress: 'gzip' | 'brotli' | 'none'): Plugin | Plugin[] {
+export function configCompressPlugin(
+  compress: 'gzip' | 'brotli' | 'none',
+  deleteOriginFile = false,
+): PluginOption | PluginOption[] {
   const compressList = compress.split(',');
 
-  const plugins: Plugin[] = [];
+  const plugins: PluginOption[] = [];
 
   if (compressList.includes('gzip')) {
     plugins.push(
       compressPlugin({
         ext: '.gz',
-      })
+        deleteOriginFile,
+      }),
     );
   }
+
   if (compressList.includes('brotli')) {
     plugins.push(
       compressPlugin({
         ext: '.br',
         algorithm: 'brotliCompress',
-      })
+        deleteOriginFile,
+      }),
     );
   }
   return plugins;

build/vite/plugin/html.ts

@@ -2,11 +2,8 @@
  * Plugin to minimize and use ejs template syntax in index.html.
  * https://github.com/anncwb/vite-plugin-html
  */
-import type { Plugin } from 'vite';
-import type { ViteEnv } from '../../utils';
-
-import html from 'vite-plugin-html';
-
+import type { PluginOption } from 'vite';
+import { createHtmlPlugin } from 'vite-plugin-html';
 import pkg from '../../../package.json';
 import { GLOB_CONFIG_FILE_NAME } from '../../constant';
 
@@ -19,11 +16,11 @@ export function configHtmlPlugin(env: ViteEnv, isBuild: boolean) {
     return `${path || '/'}${GLOB_CONFIG_FILE_NAME}?v=${pkg.version}-${new Date().getTime()}`;
   };
 
-  const htmlPlugin: Plugin[] = html({
+  const htmlPlugin: PluginOption[] = createHtmlPlugin({
     minify: isBuild,
     inject: {
       // Inject data into ejs template
-      injectData: {
+      data: {
         title: VITE_GLOB_APP_TITLE,
       },
       // Embed the generated app.config.js file

build/vite/plugin/imagemin.ts

@@ -1,6 +1,5 @@
 // Image resource files used to compress the output of the production environment
 // https://github.com/anncwb/vite-plugin-imagemin
-
 import viteImagemin from 'vite-plugin-imagemin';
 
 export function configImageminPlugin() {
@@ -12,23 +11,21 @@ export function configImageminPlugin() {
     optipng: {
       optimizationLevel: 7,
     },
-    webp: {
-      quality: 75,
-    },
     mozjpeg: {
-      quality: 65,
+      quality: 20,
     },
     pngquant: {
-      quality: [0.65, 0.9],
+      quality: [0.8, 0.9],
       speed: 4,
     },
     svgo: {
       plugins: [
         {
-          removeViewBox: false,
+          name: 'removeViewBox',
         },
         {
-          removeEmptyAttrs: false,
+          name: 'removeEmptyAttrs',
+          active: false,
         },
       ],
     },

build/vite/plugin/index.ts

@@ -1,12 +1,11 @@
-import type { Plugin } from 'vite';
-
+import { PluginOption } from 'vite';
 import vue from '@vitejs/plugin-vue';
 import vueJsx from '@vitejs/plugin-vue-jsx';
 import legacy from '@vitejs/plugin-legacy';
-
-import PurgeIcons from 'vite-plugin-purge-icons';
-
-import { ViteEnv } from '../../utils';
+import purgeIcons from 'vite-plugin-purge-icons';
+import windiCSS from 'vite-plugin-windicss';
+import VitePluginCertificate from 'vite-plugin-mkcert';
+//import vueSetupExtend from 'vite-plugin-vue-setup-extend';
 import { configHtmlPlugin } from './html';
 import { configPwaConfig } from './pwa';
 import { configMockPlugin } from './mock';
@@ -15,49 +14,65 @@ import { configStyleImportPlugin } from './styleImport';
 import { configVisualizerConfig } from './visualizer';
 import { configThemePlugin } from './theme';
 import { configImageminPlugin } from './imagemin';
-import { configWindiCssPlugin } from './windicss';
+import { configSvgIconsPlugin } from './svgSprite';
 
 export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
-  const { VITE_USE_IMAGEMIN, VITE_USE_MOCK, VITE_LEGACY, VITE_BUILD_COMPRESS } = viteEnv;
+  const {
+    VITE_USE_IMAGEMIN,
+    VITE_USE_MOCK,
+    VITE_LEGACY,
+    VITE_BUILD_COMPRESS,
+    VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE,
+  } = viteEnv;
 
-  const vitePlugins: (Plugin | Plugin[])[] = [
+  const vitePlugins: (PluginOption | PluginOption[])[] = [
     // have to
     vue(),
     // have to
     vueJsx(),
+    // support name
+    //vueSetupExtend(),
+    VitePluginCertificate({
+      source: 'coding',
+    }),
   ];
 
+  // vite-plugin-windicss
+  vitePlugins.push(windiCSS());
+
   // @vitejs/plugin-legacy
   VITE_LEGACY && isBuild && vitePlugins.push(legacy());
 
   // vite-plugin-html
   vitePlugins.push(configHtmlPlugin(viteEnv, isBuild));
 
-  // vite-plugin-windicss
-  vitePlugins.push(configWindiCssPlugin());
+  // vite-plugin-svg-icons
+  vitePlugins.push(configSvgIconsPlugin(isBuild));
 
   // vite-plugin-mock
   VITE_USE_MOCK && vitePlugins.push(configMockPlugin(isBuild));
 
   // vite-plugin-purge-icons
-  vitePlugins.push(PurgeIcons());
+  vitePlugins.push(purgeIcons());
 
   // vite-plugin-style-import
-  vitePlugins.push(configStyleImportPlugin());
+  vitePlugins.push(configStyleImportPlugin(isBuild));
 
   // rollup-plugin-visualizer
   vitePlugins.push(configVisualizerConfig());
 
-  //vite-plugin-theme
-  vitePlugins.push(configThemePlugin());
+  // vite-plugin-theme
+  vitePlugins.push(configThemePlugin(isBuild));
 
   // The following plugins only work in the production environment
   if (isBuild) {
-    //vite-plugin-imagemin
+    // vite-plugin-imagemin
     VITE_USE_IMAGEMIN && vitePlugins.push(configImageminPlugin());
 
     // rollup-plugin-gzip
-    vitePlugins.push(configCompressPlugin(VITE_BUILD_COMPRESS));
+    vitePlugins.push(
+      configCompressPlugin(VITE_BUILD_COMPRESS, VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE),
+    );
 
     // vite-plugin-pwa
     vitePlugins.push(configPwaConfig(viteEnv));

build/vite/plugin/mock.ts

@@ -8,7 +8,6 @@ export function configMockPlugin(isBuild: boolean) {
   return viteMockServe({
     ignore: /^\_/,
     mockPath: 'mock',
-    showTime: true,
     localEnabled: !isBuild,
     prodEnabled: isBuild,
     injectCode: `

build/vite/plugin/pwa.ts

@@ -2,11 +2,8 @@
  * Zero-config PWA for Vite
  * https://github.com/antfu/vite-plugin-pwa
  */
-
 import { VitePWA } from 'vite-plugin-pwa';
 
-import { ViteEnv } from '../../utils';
-
 export function configPwaConfig(env: ViteEnv) {
   const { VITE_USE_PWA, VITE_GLOB_APP_TITLE, VITE_GLOB_APP_SHORT_NAME } = env;
 

build/vite/plugin/styleImport.ts

@@ -2,20 +2,82 @@
  *  Introduces component library styles on demand.
  * https://github.com/anncwb/vite-plugin-style-import
  */
+import { createStyleImportPlugin, VxeTableResolve } from 'vite-plugin-style-import';
 
-import styleImport from 'vite-plugin-style-import';
-
-export function configStyleImportPlugin() {
-  const pwaPlugin = styleImport({
+export function configStyleImportPlugin(_isBuild: boolean) {
+  if (!_isBuild) {
+    return [];
+  }
+  const styleImportPlugin = createStyleImportPlugin({
     libs: [
       {
         libraryName: 'ant-design-vue',
         esModule: true,
         resolveStyle: (name) => {
-          return `ant-design-vue/es/${name}/style/index`;
+          // 这里是无需额外引入样式文件的“子组件”列表
+          const ignoreList = [
+            'anchor-link',
+            'sub-menu',
+            'menu-item',
+            'menu-divider',
+            'menu-item-group',
+            'breadcrumb-item',
+            'breadcrumb-separator',
+            'form-item',
+            'step',
+            'select-option',
+            'select-opt-group',
+            'card-grid',
+            'card-meta',
+            'collapse-panel',
+            'descriptions-item',
+            'list-item',
+            'list-item-meta',
+            'table-column',
+            'table-column-group',
+            'tab-pane',
+            'tab-content',
+            'timeline-item',
+            'tree-node',
+            'skeleton-input',
+            'skeleton-avatar',
+            'skeleton-title',
+            'skeleton-paragraph',
+            'skeleton-image',
+            'skeleton-button',
+          ];
+          // 这里是需要额外引入样式的子组件列表
+          // 单独引入子组件时需引入组件样式，否则会在打包后导致子组件样式丢失
+          const replaceList = {
+            textarea: 'input',
+            'typography-text': 'typography',
+            'typography-title': 'typography',
+            'typography-paragraph': 'typography',
+            'typography-link': 'typography',
+            'dropdown-button': 'dropdown',
+            'input-password': 'input',
+            'input-search': 'input',
+            'input-group': 'input',
+            'radio-group': 'radio',
+            'checkbox-group': 'checkbox',
+            'layout-sider': 'layout',
+            'layout-content': 'layout',
+            'layout-footer': 'layout',
+            'layout-header': 'layout',
+            'month-picker': 'date-picker',
+            'range-picker': 'date-picker',
+            'image-preview-group': 'image',
+          };
+
+          return ignoreList.includes(name)
+            ? ''
+            : replaceList.hasOwnProperty(name)
+            ? `ant-design-vue/es/${replaceList[name]}/style/index`
+            : `ant-design-vue/es/${name}/style/index`;
         },
       },
     ],
+    resolves: [VxeTableResolve()],
   });
-  return pwaPlugin;
+  return styleImportPlugin;
 }

build/vite/plugin/svgSprite.ts

@@ -0,0 +1,17 @@
+/**
+ *  Vite Plugin for fast creating SVG sprites.
+ * https://github.com/anncwb/vite-plugin-svg-icons
+ */
+
+import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
+import path from 'path';
+
+export function configSvgIconsPlugin(isBuild: boolean) {
+  const svgIconsPlugin = createSvgIconsPlugin({
+    iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
+    svgoOptions: isBuild,
+    // default
+    symbolId: 'icon-[dir]-[name]',
+  });
+  return svgIconsPlugin;
+}

build/vite/plugin/theme.ts

@@ -2,18 +2,88 @@
  * Vite plugin for website theme color switching
  * https://github.com/anncwb/vite-plugin-theme
  */
-import { viteThemePlugin, mixLighten, mixDarken, tinycolor } from 'vite-plugin-theme';
+import type { PluginOption } from 'vite';
+import path from 'path';
+import {
+  viteThemePlugin,
+  antdDarkThemePlugin,
+  mixLighten,
+  mixDarken,
+  tinycolor,
+} from 'vite-plugin-theme';
 import { getThemeColors, generateColors } from '../../config/themeConfig';
+import { generateModifyVars } from '../../generate/generateModifyVars';
 
-export function configThemePlugin() {
+export function configThemePlugin(isBuild: boolean): PluginOption[] {
   const colors = generateColors({
     mixDarken,
     mixLighten,
     tinycolor,
   });
+  const plugin = [
+    viteThemePlugin({
+      resolveSelector: (s) => {
+        s = s.trim();
+        switch (s) {
+          case '.ant-steps-item-process .ant-steps-item-icon > .ant-steps-icon':
+            return '.ant-steps-item-icon > .ant-steps-icon';
+          case '.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled)':
+          case '.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):hover':
+          case '.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):active':
+            return s;
+          case '.ant-steps-item-icon > .ant-steps-icon':
+            return s;
+          case '.ant-select-item-option-selected:not(.ant-select-item-option-disabled)':
+            return s;
+          default:
+            if (s.indexOf('.ant-btn') >= -1) {
+              // 按钮被重新定制过，需要过滤掉class防止覆盖
+              return s;
+            }
+        }
+        return s.startsWith('[data-theme') ? s : `[data-theme] ${s}`;
+      },
+      colorVariables: [...getThemeColors(), ...colors],
+    }),
+    antdDarkThemePlugin({
+      preloadFiles: [
+        path.resolve(process.cwd(), 'node_modules/ant-design-vue/dist/antd.less'),
+        //path.resolve(process.cwd(), 'node_modules/ant-design-vue/dist/antd.dark.less'),
+        path.resolve(process.cwd(), 'src/design/index.less'),
+      ],
+      filter: (id) => (isBuild ? !id.endsWith('antd.less') : true),
+      // extractCss: false,
+      darkModifyVars: {
+        ...generateModifyVars(true),
+        'text-color': '#c9d1d9',
+        'primary-1': 'rgb(255 255 255 / 8%)',
+        'text-color-base': '#c9d1d9',
+        'component-background': '#151515',
+        'heading-color': 'rgb(255 255 255 / 65%)',
+        // black: '#0e1117',
+        // #8b949e
+        'text-color-secondary': '#8b949e',
+        'border-color-base': '#303030',
+        // 'border-color-split': '#30363d',
+        'item-active-bg': '#111b26',
+        'app-content-background': '#1e1e1e',
+        'tree-node-selected-bg': '#11263c',
 
-  const plugin = viteThemePlugin({
-    colorVariables: [...getThemeColors(), ...colors],
-  });
-  return plugin;
+        'alert-success-border-color': '#274916',
+        'alert-success-bg-color': '#162312',
+        'alert-success-icon-color': '#49aa19',
+        'alert-info-border-color': '#153450',
+        'alert-info-bg-color': '#111b26',
+        'alert-info-icon-color': '#177ddc',
+        'alert-warning-border-color': '#594214',
+        'alert-warning-bg-color': '#2b2111',
+        'alert-warning-icon-color': '#d89614',
+        'alert-error-border-color': '#58181c',
+        'alert-error-bg-color': '#2a1215',
+        'alert-error-icon-color': '#a61d24',
+      },
+    }),
+  ];
+
+  return plugin as unknown as PluginOption[];
 }

build/vite/plugin/visualizer.ts

@@ -9,6 +9,8 @@ export function configVisualizerConfig() {
     return visualizer({
       filename: './node_modules/.cache/visualizer/stats.html',
       open: true,
+      gzipSize: true,
+      brotliSize: true,
     }) as Plugin;
   }
   return [];

build/vite/plugin/windicss.ts

@@ -1,12 +0,0 @@
-import windiCSS from 'vite-plugin-windicss';
-
-import type { Plugin } from 'vite';
-
-export function configWindiCssPlugin(): Plugin[] {
-  return windiCSS({
-    safelist: 'shadow shadow-xl',
-    preflight: {
-      enableAll: true,
-    },
-  });
-}

build/vite/proxy.ts

@@ -1,13 +1,13 @@
 /**
  * Used to parse the .env.development proxy configuration
  */
-import type { ServerOptions } from 'http-proxy';
+import type { ProxyOptions } from 'vite';
 
 type ProxyItem = [string, string];
 
 type ProxyList = ProxyItem[];
 
-type ProxyTargetList = Record<string, ServerOptions & { rewrite: (path: string) => string }>;
+type ProxyTargetList = Record<string, ProxyOptions>;
 
 const httpsRE = /^https:\/\//;
 

commitlint.config.js

@@ -1,37 +1,33 @@
+const fs = require('fs');
+const path = require('path');
+const { execSync } = require('child_process');
+
+const scopes = fs
+  .readdirSync(path.resolve(__dirname, 'src'), { withFileTypes: true })
+  .filter((dirent) => dirent.isDirectory())
+  .map((dirent) => dirent.name.replace(/s$/, ''));
+
+// precomputed scope
+const scopeComplete = execSync('git status --porcelain || true')
+  .toString()
+  .trim()
+  .split('\n')
+  .find((r) => ~r.indexOf('M  src'))
+  ?.replace(/(\/)/g, '%%')
+  ?.match(/src%%((\w|-)*)/)?.[1]
+  ?.replace(/s$/, '');
+
+/** @type {import('cz-git').UserConfig} */
 module.exports = {
   ignores: [(commit) => commit.includes('init')],
   extends: ['@commitlint/config-conventional'],
-  parserPreset: {
-    parserOpts: {
-      headerPattern: /^(\w*|[\u4e00-\u9fa5]*)(?:[\(\（](.*)[\)\）])?[\:\：] (.*)/,
-      headerCorrespondence: ['type', 'scope', 'subject'],
-      referenceActions: [
-        'close',
-        'closes',
-        'closed',
-        'fix',
-        'fixes',
-        'fixed',
-        'resolve',
-        'resolves',
-        'resolved',
-      ],
-      issuePrefixes: ['#'],
-      noteKeywords: ['BREAKING CHANGE', '不兼容变更'],
-      fieldPattern: /^-(.*?)-$/,
-      revertPattern: /^Revert\s"([\s\S]*)"\s*This reverts commit (\w*)\./,
-      revertCorrespondence: ['header', 'hash'],
-      warn() {},
-      mergePattern: null,
-      mergeCorrespondence: null,
-    },
-  },
   rules: {
     'body-leading-blank': [2, 'always'],
     'footer-leading-blank': [1, 'always'],
     'header-max-length': [2, 'always', 108],
     'subject-empty': [2, 'never'],
     'type-empty': [2, 'never'],
+    'subject-case': [0],
     'type-enum': [
       2,
       'always',
@@ -50,7 +46,62 @@ module.exports = {
         'wip',
         'workflow',
         'types',
+        'release',
       ],
     ],
   },
+  prompt: {
+    /** @use `yarn commit :f` */
+    alias: {
+      f: 'docs: fix typos',
+      r: 'docs: update README',
+      s: 'style: update code format',
+      b: 'build: bump dependencies',
+      c: 'chore: update config',
+    },
+    customScopesAlign: !scopeComplete ? 'top' : 'bottom',
+    defaultScope: scopeComplete,
+    scopes: [...scopes, 'mock'],
+    allowEmptyIssuePrefixs: false,
+    allowCustomIssuePrefixs: false,
+
+    // English
+    typesAppend: [
+      { value: 'wip', name: 'wip:      work in process' },
+      { value: 'workflow', name: 'workflow: workflow improvements' },
+      { value: 'types', name: 'types:    type definition file changes' },
+    ],
+
+    // 中英文对照版
+    // messages: {
+    //   type: '选择你要提交的类型 :',
+    //   scope: '选择一个提交范围 (可选):',
+    //   customScope: '请输入自定义的提交范围 :',
+    //   subject: '填写简短精炼的变更描述 :\n',
+    //   body: '填写更加详细的变更描述 (可选)。使用 "|" 换行 :\n',
+    //   breaking: '列举非兼容性重大的变更 (可选)。使用 "|" 换行 :\n',
+    //   footerPrefixsSelect: '选择关联issue前缀 (可选):',
+    //   customFooterPrefixs: '输入自定义issue前缀 :',
+    //   footer: '列举关联issue (可选) 例如: #31, #I3244 :\n',
+    //   confirmCommit: '是否提交或修改commit ?',
+    // },
+    // types: [
+    //   { value: 'feat', name: 'feat:     新增功能' },
+    //   { value: 'fix', name: 'fix:      修复缺陷' },
+    //   { value: 'docs', name: 'docs:     文档变更' },
+    //   { value: 'style', name: 'style:    代码格式' },
+    //   { value: 'refactor', name: 'refactor: 代码重构' },
+    //   { value: 'perf', name: 'perf:     性能优化' },
+    //   { value: 'test', name: 'test:     添加疏漏测试或已有测试改动' },
+    //   { value: 'build', name: 'build:    构建流程、外部依赖变更 (如升级 npm 包、修改打包配置等)' },
+    //   { value: 'ci', name: 'ci:       修改 CI 配置、脚本' },
+    //   { value: 'revert', name: 'revert:   回滚 commit' },
+    //   { value: 'chore', name: 'chore:    对构建过程或辅助工具和库的更改 (不影响源文件、测试用例)' },
+    //   { value: 'wip', name: 'wip:      正在开发中' },
+    //   { value: 'workflow', name: 'workflow: 工作流程改进' },
+    //   { value: 'types', name: 'types:    类型定义文件修改' },
+    // ],
+    // emptyScopesAlias: 'empty:      不填写',
+    // customScopesAlias: 'custom:     自定义',
+  },
 };

index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" id="htmlRoot">
   <head>
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
@@ -8,13 +8,30 @@
       name="viewport"
       content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"
     />
-
     <title><%= title %></title>
     <link rel="icon" href="/favicon.ico" />
   </head>
   <body>
+    <script>
+      (() => {
+        var htmlRoot = document.getElementById('htmlRoot');
+        var theme = window.localStorage.getItem('__APP__DARK__MODE__');
+        if (htmlRoot && theme) {
+          htmlRoot.setAttribute('data-theme', theme);
+          theme = htmlRoot = null;
+        }
+      })();
+    </script>
     <div id="app">
       <style>
+        html[data-theme='dark'] .app-loading {
+          background-color: #2c344a;
+        }
+
+        html[data-theme='dark'] .app-loading .app-loading-title {
+          color: rgb(255 255 255 / 85%);
+        }
+
         .app-loading {
           display: flex;
           width: 100%;
@@ -22,7 +39,7 @@
           justify-content: center;
           align-items: center;
           flex-direction: column;
-          background: #f4f7f9;
+          background-color: #f4f7f9;
         }
 
         .app-loading .app-loading-wrap {
@@ -30,7 +47,6 @@
           top: 50%;
           left: 50%;
           display: flex;
-          -webkit-transform: translate3d(-50%, -50%, 0);
           transform: translate3d(-50%, -50%, 0);
           justify-content: center;
           align-items: center;
@@ -48,7 +64,7 @@
           display: flex;
           margin-top: 30px;
           font-size: 30px;
-          color: rgba(0, 0, 0, 0.85);
+          color: rgb(0 0 0 / 85%);
           justify-content: center;
           align-items: center;
         }
@@ -79,7 +95,7 @@
           height: 20px;
           background-color: #0065cc;
           border-radius: 100%;
-          opacity: 0.3;
+          opacity: 30%;
           transform: scale(0.75);
           animation: antSpinMove 1s infinite linear alternate;
           transform-origin: 50% 50%;
@@ -93,43 +109,38 @@
         .dot i:nth-child(2) {
           top: 0;
           right: 0;
-          -webkit-animation-delay: 0.4s;
           animation-delay: 0.4s;
         }
 
         .dot i:nth-child(3) {
           right: 0;
           bottom: 0;
-          -webkit-animation-delay: 0.8s;
           animation-delay: 0.8s;
         }
 
         .dot i:nth-child(4) {
           bottom: 0;
           left: 0;
-          -webkit-animation-delay: 1.2s;
           animation-delay: 1.2s;
         }
         @keyframes antRotate {
           to {
-            -webkit-transform: rotate(405deg);
             transform: rotate(405deg);
           }
         }
-        @-webkit-keyframes antRotate {
+        @keyframes antRotate {
           to {
-            -webkit-transform: rotate(405deg);
             transform: rotate(405deg);
           }
         }
         @keyframes antSpinMove {
           to {
-            opacity: 1;
+            opacity: 100%;
           }
         }
-        @-webkit-keyframes antSpinMove {
+        @keyframes antSpinMove {
           to {
-            opacity: 1;
+            opacity: 100%;
           }
         }
       </style>

mock/_createProductionServer.ts

@@ -1,5 +1,21 @@
 import { createProdMockServer } from 'vite-plugin-mock/es/createProdMockServer';
 
+// 问题描述
+// 1. `import.meta.globEager` 已被弃用, 需要升级vite版本,有兼容问题
+// 2. `vite-plugin-mock` 插件问题 https://github.com/vbenjs/vite-plugin-mock/issues/56
+
+// const modules: Record<string, any> = import.meta.glob("./**/*.ts", {
+//   import: "default",
+//   eager: true,
+// });
+
+// const mockModules = Object.keys(modules).reduce((pre, key) => {
+//   if (!key.includes("/_")) {
+//     pre.push(...modules[key]);
+//   }
+//   return pre;
+// }, [] as any[]);
+
 const modules = import.meta.globEager('./**/*.ts');
 
 const mockModules: any[] = [];

mock/_util.ts

@@ -1,8 +1,9 @@
 // Interface data format used to return a unified format
+import { ResultEnum } from '/@/enums/httpEnum';
 
-export function resultSuccess<T = any>(result: T, { message = 'ok' } = {}) {
+export function resultSuccess<T = Recordable>(result: T, { message = 'ok' } = {}) {
   return {
-    code: 0,
+    code: ResultEnum.SUCCESS,
     result,
     message,
     type: 'success',
@@ -13,22 +14,23 @@ export function resultPageSuccess<T = any>(
   page: number,
   pageSize: number,
   list: T[],
-  { message = 'ok' } = {}
+  { message = 'ok' } = {},
 ) {
   const pageData = pagination(page, pageSize, list);
 
   return {
-    code: 0,
-    result: {
+    ...resultSuccess({
       items: pageData,
       total: list.length,
-    },
+    }),
     message,
-    type: 'success',
   };
 }
 
-export function resultError(message = 'Request failed', { code = -1, result = null } = {}) {
+export function resultError(
+  message = 'Request failed',
+  { code = ResultEnum.ERROR, result = null } = {},
+) {
   return {
     code,
     result,
@@ -39,9 +41,22 @@ export function resultError(message = 'Request failed', { code = -1, result = nu
 
 export function pagination<T = any>(pageNo: number, pageSize: number, array: T[]): T[] {
   const offset = (pageNo - 1) * Number(pageSize);
-  const ret =
-    offset + Number(pageSize) >= array.length
-      ? array.slice(offset, array.length)
-      : array.slice(offset, offset + Number(pageSize));
-  return ret;
+  return offset + Number(pageSize) >= array.length
+    ? array.slice(offset, array.length)
+    : array.slice(offset, offset + Number(pageSize));
+}
+
+export interface requestParams {
+  method: string;
+  body: any;
+  headers?: { authorization?: string };
+  query: any;
+}
+
+/**
+ * @description 本函数用于从request数据中获取token，请根据项目的实际情况修改
+ *
+ */
+export function getRequestToken({ headers }: requestParams): string | undefined {
+  return headers?.authorization;
 }

mock/demo/account.ts

@@ -1,5 +1,6 @@
 import { MockMethod } from 'vite-plugin-mock';
-import { resultSuccess } from '../_util';
+import { resultSuccess, resultError } from '../_util';
+import { ResultEnum } from '../../src/enums/httpEnum';
 
 const userInfo = {
   name: 'Vben',
@@ -44,11 +45,27 @@ const userInfo = {
 
 export default [
   {
-    url: '/api/account/getAccountInfo',
+    url: '/basic-api/account/getAccountInfo',
     timeout: 1000,
     method: 'get',
     response: () => {
       return resultSuccess(userInfo);
     },
   },
+  {
+    url: '/basic-api/user/sessionTimeout',
+    method: 'post',
+    statusCode: 401,
+    response: () => {
+      return resultError();
+    },
+  },
+  {
+    url: '/basic-api/user/tokenExpired',
+    method: 'post',
+    statusCode: 200,
+    response: () => {
+      return resultError('Token Expired!', { code: ResultEnum.TIMEOUT as number });
+    },
+  },
 ] as MockMethod[];

mock/demo/api-cascader.ts

@@ -0,0 +1,325 @@
+import { MockMethod } from 'vite-plugin-mock';
+import { resultSuccess } from '../_util';
+
+const areaList: any[] = [
+  {
+    id: '530825900854620160',
+    code: '430000',
+    parentCode: '100000',
+    levelType: 1,
+    name: '湖南省',
+    province: '湖南省',
+    city: null,
+    district: null,
+    town: null,
+    village: null,
+    parentPath: '430000',
+    createTime: '2020-11-30 15:47:31',
+    updateTime: '2020-11-30 16:33:42',
+    customized: false,
+    usable: true,
+  },
+  {
+    id: '530825900883980288',
+    code: '430100',
+    parentCode: '430000',
+    levelType: 2,
+    name: '长沙市',
+    province: '湖南省',
+    city: '长沙市',
+    district: null,
+    town: null,
+    village: null,
+    parentPath: '430000,430100',
+    createTime: '2020-11-30 15:47:31',
+    updateTime: '2020-11-30 16:33:42',
+    customized: false,
+    usable: true,
+  },
+  {
+    id: '530825900951089152',
+    code: '430102',
+    parentCode: '430100',
+    levelType: 3,
+    name: '芙蓉区',
+    province: '湖南省',
+    city: '长沙市',
+    district: '芙蓉区',
+    town: null,
+    village: null,
+    parentPath: '430000,430100,430102',
+    createTime: '2020-11-30 15:47:31',
+    updateTime: '2020-11-30 16:33:42',
+    customized: false,
+    usable: true,
+  },
+  {
+    id: '530825901014003712',
+    code: '430104',
+    parentCode: '430100',
+    levelType: 3,
+    name: '岳麓区',
+    province: '湖南省',
+    city: '长沙市',
+    district: '岳麓区',
+    town: null,
+    village: null,
+    parentPath: '430000,430100,430104',
+    createTime: '2020-11-30 15:47:31',
+    updateTime: '2020-11-30 16:33:42',
+    customized: false,
+    usable: true,
+  },
+  {
+    id: '530825900988837888',
+    code: '430103',
+    parentCode: '430100',
+    levelType: 3,
+    name: '天心区',
+    province: '湖南省',
+    city: '长沙市',
+    district: '天心区',
+    town: null,
+    village: null,
+    parentPath: '430000,430100,430103',
+    createTime: '2020-11-30 15:47:31',
+    updateTime: '2020-11-30 16:33:42',
+    customized: false,
+    usable: true,
+  },
+  {
+    id: '530826672489115648',
+    code: '430103002',
+    parentCode: '430103',
+    levelType: 4,
+    name: '坡子街街道',
+    province: '湖南省',
+    city: '长沙市',
+    district: '天心区',
+    town: '坡子街街道',
+    village: null,
+    parentPath: '430000,430100,430103,430103002',
+    createTime: '2020-11-30 15:47:31',
+    updateTime: '2020-12-14 15:26:43',
+    customized: false,
+    usable: true,
+  },
+  {
+    id: '530840241171607552',
+    code: '430103002001',
+    parentCode: '430103002',
+    levelType: 5,
+    name: '八角亭社区',
+    province: '湖南省',
+    city: '长沙市',
+    district: '天心区',
+    town: '坡子街街道',
+    village: '八角亭社区',
+    parentPath: '430000,430100,430103,430103002,430103002001',
+    createTime: '2020-11-30 15:47:31',
+    updateTime: '2021-01-20 14:07:23',
+    customized: false,
+    usable: true,
+  },
+  {
+    id: '530840241200967680',
+    code: '430103002002',
+    parentCode: '430103002',
+    levelType: 5,
+    name: '西牌楼社区',
+    province: '湖南省',
+    city: '长沙市',
+    district: '天心区',
+    town: '坡子街街道',
+    village: '西牌楼社区',
+    parentPath: '430000,430100,430103,430103002,430103002002',
+    createTime: '2020-11-30 15:47:31',
+    updateTime: '2020-11-30 17:30:41',
+    customized: false,
+    usable: true,
+  },
+  {
+    id: '530840241230327808',
+    code: '430103002003',
+    parentCode: '430103002',
+    levelType: 5,
+    name: '太平街社区',
+    province: '湖南省',
+    city: '长沙市',
+    district: '天心区',
+    town: '坡子街街道',
+    village: '太平街社区',
+    parentPath: '430000,430100,430103,430103002,430103002003',
+    createTime: '2020-11-30 15:47:31',
+    updateTime: '2020-11-30 17:30:41',
+    customized: false,
+    usable: true,
+  },
+  {
+    id: '530840241259687936',
+    code: '430103002005',
+    parentCode: '430103002',
+    levelType: 5,
+    name: '坡子街社区',
+    province: '湖南省',
+    city: '长沙市',
+    district: '天心区',
+    town: '坡子街街道',
+    village: '坡子街社区',
+    parentPath: '430000,430100,430103,430103002,430103002005',
+    createTime: '2020-11-30 15:47:31',
+    updateTime: '2020-11-30 17:30:41',
+    customized: false,
+    usable: true,
+  },
+  {
+    id: '530840241284853760',
+    code: '430103002006',
+    parentCode: '430103002',
+    levelType: 5,
+    name: '青山祠社区',
+    province: '湖南省',
+    city: '长沙市',
+    district: '天心区',
+    town: '坡子街街道',
+    village: '青山祠社区',
+    parentPath: '430000,430100,430103,430103002,430103002006',
+    createTime: '2020-11-30 15:47:31',
+    updateTime: '2020-11-30 17:30:41',
+    customized: false,
+    usable: true,
+  },
+  {
+    id: '530840241310019584',
+    code: '430103002007',
+    parentCode: '430103002',
+    levelType: 5,
+    name: '沙河社区',
+    province: '湖南省',
+    city: '长沙市',
+    district: '天心区',
+    town: '坡子街街道',
+    village: '沙河社区',
+    parentPath: '430000,430100,430103,430103002,430103002007',
+    createTime: '2020-11-30 15:47:31',
+    updateTime: '2020-11-30 17:30:41',
+    customized: false,
+    usable: true,
+  },
+  {
+    id: '530840241381322752',
+    code: '430103002008',
+    parentCode: '430103002',
+    levelType: 5,
+    name: '碧湘社区',
+    province: '湖南省',
+    city: '长沙市',
+    district: '天心区',
+    town: '坡子街街道',
+    village: '碧湘社区',
+    parentPath: '430000,430100,430103,430103002,430103002008',
+    createTime: '2020-11-30 15:47:31',
+    updateTime: '2020-11-30 17:30:41',
+    customized: false,
+    usable: true,
+  },
+  {
+    id: '530840241410682880',
+    code: '430103002009',
+    parentCode: '430103002',
+    levelType: 5,
+    name: '创远社区',
+    province: '湖南省',
+    city: '长沙市',
+    district: '天心区',
+    town: '坡子街街道',
+    village: '创远社区',
+    parentPath: '430000,430100,430103,430103002,430103002009',
+    createTime: '2020-11-30 15:47:31',
+    updateTime: '2020-11-30 17:30:41',
+    customized: false,
+    usable: true,
+  },
+  {
+    id: '530840241431654400',
+    code: '430103002010',
+    parentCode: '430103002',
+    levelType: 5,
+    name: '楚湘社区',
+    province: '湖南省',
+    city: '长沙市',
+    district: '天心区',
+    town: '坡子街街道',
+    village: '楚湘社区',
+    parentPath: '430000,430100,430103,430103002,430103002010',
+    createTime: '2020-11-30 15:47:31',
+    updateTime: '2020-11-30 17:30:41',
+    customized: false,
+    usable: true,
+  },
+  {
+    id: '530840241465208832',
+    code: '430103002011',
+    parentCode: '430103002',
+    levelType: 5,
+    name: '西湖社区',
+    province: '湖南省',
+    city: '长沙市',
+    district: '天心区',
+    town: '坡子街街道',
+    village: '西湖社区',
+    parentPath: '430000,430100,430103,430103002,430103002011',
+    createTime: '2020-11-30 15:47:31',
+    updateTime: '2020-11-30 17:30:41',
+    customized: false,
+    usable: true,
+  },
+  {
+    id: '530840241502957568',
+    code: '430103002012',
+    parentCode: '430103002',
+    levelType: 5,
+    name: '登仁桥社区',
+    province: '湖南省',
+    city: '长沙市',
+    district: '天心区',
+    town: '坡子街街道',
+    village: '登仁桥社区',
+    parentPath: '430000,430100,430103,430103002,430103002012',
+    createTime: '2020-11-30 15:47:31',
+    updateTime: '2020-11-30 17:30:41',
+    customized: false,
+    usable: true,
+  },
+  {
+    id: '530840241553289216',
+    code: '430103002013',
+    parentCode: '430103002',
+    levelType: 5,
+    name: '文庙坪社区',
+    province: '湖南省',
+    city: '长沙市',
+    district: '天心区',
+    town: '坡子街街道',
+    village: '文庙坪社区',
+    parentPath: '430000,430100,430103,430103002,430103002013',
+    createTime: '2020-11-30 15:47:31',
+    updateTime: '2020-11-30 17:30:41',
+    customized: false,
+    usable: true,
+  },
+];
+export default [
+  {
+    url: '/basic-api/cascader/getAreaRecord',
+    timeout: 1000,
+    method: 'post',
+    response: ({ body }) => {
+      const { parentCode } = body || {};
+      if (!parentCode) {
+        return resultSuccess(areaList.filter((it) => it.code === '430000'));
+      }
+      return resultSuccess(areaList.filter((it) => it.parentCode === parentCode));
+    },
+  },
+] as MockMethod[];

mock/demo/select-demo.ts

@@ -1,25 +1,28 @@
 import { MockMethod } from 'vite-plugin-mock';
 import { resultSuccess } from '../_util';
 
-const demoList = (() => {
-  const result: any[] = [];
-  for (let index = 0; index < 20; index++) {
-    result.push({
-      label: `选项${index}`,
-      value: `${index}`,
+const demoList = (keyword, count = 20) => {
+  const result = {
+    list: [] as any[],
+  };
+  for (let index = 0; index < count; index++) {
+    result.list.push({
+      name: `${keyword ?? ''}选项${index}`,
+      id: `${index}`,
     });
   }
   return result;
-})();
+};
 
 export default [
   {
-    url: '/api/select/getDemoOptions',
-    timeout: 4000,
+    url: '/basic-api/select/getDemoOptions',
+    timeout: 1000,
     method: 'get',
     response: ({ query }) => {
-      console.log(query);
-      return resultSuccess(demoList);
+      const { keyword, count } = query;
+      console.log(keyword);
+      return resultSuccess(demoList(keyword, count));
     },
   },
 ] as MockMethod[];

mock/demo/system.ts

@@ -0,0 +1,202 @@
+import { MockMethod } from 'vite-plugin-mock';
+import { resultError, resultPageSuccess, resultSuccess } from '../_util';
+
+const accountList = (() => {
+  const result: any[] = [];
+  for (let index = 0; index < 20; index++) {
+    result.push({
+      id: `${index}`,
+      account: '@first',
+      email: '@email',
+      nickname: '@cname()',
+      role: '@first',
+      createTime: '@datetime',
+      remark: '@cword(10,20)',
+      'status|1': ['0', '1'],
+    });
+  }
+  return result;
+})();
+
+const roleList = (() => {
+  const result: any[] = [];
+  for (let index = 0; index < 4; index++) {
+    result.push({
+      id: index + 1,
+      orderNo: `${index + 1}`,
+      roleName: ['超级管理员', '管理员', '文章管理员', '普通用户'][index],
+      roleValue: '@first',
+      createTime: '@datetime',
+      remark: '@cword(10,20)',
+      menu: [['0', '1', '2'], ['0', '1'], ['0', '2'], ['2']][index],
+      'status|1': ['0', '1'],
+    });
+  }
+  return result;
+})();
+
+const deptList = (() => {
+  const result: any[] = [];
+  for (let index = 0; index < 3; index++) {
+    result.push({
+      id: `${index}`,
+      deptName: ['华东分部', '华南分部', '西北分部'][index],
+      orderNo: index + 1,
+      createTime: '@datetime',
+      remark: '@cword(10,20)',
+      'status|1': ['0', '0', '1'],
+      children: (() => {
+        const children: any[] = [];
+        for (let j = 0; j < 4; j++) {
+          children.push({
+            id: `${index}-${j}`,
+            deptName: ['研发部', '市场部', '商务部', '财务部'][j],
+            orderNo: j + 1,
+            createTime: '@datetime',
+            remark: '@cword(10,20)',
+            'status|1': ['0', '1'],
+            parentDept: `${index}`,
+            children: undefined,
+          });
+        }
+        return children;
+      })(),
+    });
+  }
+  return result;
+})();
+
+const menuList = (() => {
+  const result: any[] = [];
+  for (let index = 0; index < 3; index++) {
+    result.push({
+      id: `${index}`,
+      icon: ['ion:layers-outline', 'ion:git-compare-outline', 'ion:tv-outline'][index],
+      component: 'LAYOUT',
+      type: '0',
+      menuName: ['Dashboard', '权限管理', '功能'][index],
+      permission: '',
+      orderNo: index + 1,
+      createTime: '@datetime',
+      'status|1': ['0', '0', '1'],
+      children: (() => {
+        const children: any[] = [];
+        for (let j = 0; j < 4; j++) {
+          children.push({
+            id: `${index}-${j}`,
+            type: '1',
+            menuName: ['菜单1', '菜单2', '菜单3', '菜单4'][j],
+            icon: 'ion:document',
+            permission: ['menu1:view', 'menu2:add', 'menu3:update', 'menu4:del'][index],
+            component: [
+              '/dashboard/welcome/index',
+              '/dashboard/analysis/index',
+              '/dashboard/workbench/index',
+              '/dashboard/test/index',
+            ][j],
+            orderNo: j + 1,
+            createTime: '@datetime',
+            'status|1': ['0', '1'],
+            parentMenu: `${index}`,
+            children: (() => {
+              const children: any[] = [];
+              for (let k = 0; k < 4; k++) {
+                children.push({
+                  id: `${index}-${j}-${k}`,
+                  type: '2',
+                  menuName: '按钮' + (j + 1) + '-' + (k + 1),
+                  icon: '',
+                  permission:
+                    ['menu1:view', 'menu2:add', 'menu3:update', 'menu4:del'][index] +
+                    ':btn' +
+                    (k + 1),
+                  component: [
+                    '/dashboard/welcome/index',
+                    '/dashboard/analysis/index',
+                    '/dashboard/workbench/index',
+                    '/dashboard/test/index',
+                  ][j],
+                  orderNo: j + 1,
+                  createTime: '@datetime',
+                  'status|1': ['0', '1'],
+                  parentMenu: `${index}-${j}`,
+                  children: undefined,
+                });
+              }
+              return children;
+            })(),
+          });
+        }
+        return children;
+      })(),
+    });
+  }
+  return result;
+})();
+
+export default [
+  {
+    url: '/basic-api/system/getAccountList',
+    timeout: 100,
+    method: 'get',
+    response: ({ query }) => {
+      const { page = 1, pageSize = 20 } = query;
+      return resultPageSuccess(page, pageSize, accountList);
+    },
+  },
+  {
+    url: '/basic-api/system/getRoleListByPage',
+    timeout: 100,
+    method: 'get',
+    response: ({ query }) => {
+      const { page = 1, pageSize = 20 } = query;
+      return resultPageSuccess(page, pageSize, roleList);
+    },
+  },
+  {
+    url: '/basic-api/system/setRoleStatus',
+    timeout: 500,
+    method: 'post',
+    response: ({ query }) => {
+      const { id, status } = query;
+      return resultSuccess({ id, status });
+    },
+  },
+  {
+    url: '/basic-api/system/getAllRoleList',
+    timeout: 100,
+    method: 'get',
+    response: () => {
+      return resultSuccess(roleList);
+    },
+  },
+  {
+    url: '/basic-api/system/getDeptList',
+    timeout: 100,
+    method: 'get',
+    response: () => {
+      return resultSuccess(deptList);
+    },
+  },
+  {
+    url: '/basic-api/system/getMenuList',
+    timeout: 100,
+    method: 'get',
+    response: () => {
+      return resultSuccess(menuList);
+    },
+  },
+  {
+    url: '/basic-api/system/accountExist',
+    timeout: 500,
+    method: 'post',
+    response: ({ body }) => {
+      const { account } = body || {};
+      if (account && account.indexOf('admin') !== -1) {
+        return resultError('该字段不能包含admin');
+      } else {
+        return resultSuccess(`${account} can use`);
+      }
+    },
+  },
+] as MockMethod[];

mock/demo/table-demo.ts

@@ -1,9 +1,18 @@
 import { MockMethod } from 'vite-plugin-mock';
+import { Random } from 'mockjs';
 import { resultPageSuccess } from '../_util';
 
+function getRandomPics(count = 10): string[] {
+  const arr: string[] = [];
+  for (let i = 0; i < count; i++) {
+    arr.push(Random.image('800x600', Random.color(), Random.color(), Random.title()));
+  }
+  return arr;
+}
+
 const demoList = (() => {
   const result: any[] = [];
-  for (let index = 0; index < 60; index++) {
+  for (let index = 0; index < 200; index++) {
     result.push({
       id: `${index}`,
       beginTime: '@datetime',
@@ -18,6 +27,14 @@ const demoList = (() => {
       name6: '@cname()',
       name7: '@cname()',
       name8: '@cname()',
+      radio1: `选项${index + 1}`,
+      radio2: `选项${index + 1}`,
+      radio3: `选项${index + 1}`,
+      avatar: Random.image('400x400', Random.color(), Random.color(), Random.first()),
+      imgArr: getRandomPics(Math.ceil(Math.random() * 3) + 1),
+      imgs: getRandomPics(Math.ceil(Math.random() * 3) + 1),
+      date: `@date('yyyy-MM-dd')`,
+      time: `@time('HH:mm')`,
       'no|100000-10000000': 100000,
       'status|1': ['normal', 'enable', 'disable'],
     });
@@ -27,8 +44,8 @@ const demoList = (() => {
 
 export default [
   {
-    url: '/api/table/getDemoList',
-    timeout: 1000,
+    url: '/basic-api/table/getDemoList',
+    timeout: 100,
     method: 'get',
     response: ({ query }) => {
       const { page = 1, pageSize = 20 } = query;

mock/demo/tree-demo.ts

@@ -0,0 +1,38 @@
+import { MockMethod } from 'vite-plugin-mock';
+import { resultSuccess } from '../_util';
+
+const demoTreeList = (keyword) => {
+  const result = {
+    list: [] as Recordable[],
+  };
+  for (let index = 0; index < 5; index++) {
+    const children: Recordable[] = [];
+    for (let j = 0; j < 3; j++) {
+      children.push({
+        title: `${keyword ?? ''}选项${index}-${j}`,
+        value: `${index}-${j}`,
+        key: `${index}-${j}`,
+      });
+    }
+    result.list.push({
+      title: `${keyword ?? ''}选项${index}`,
+      value: `${index}`,
+      key: `${index}`,
+      children,
+    });
+  }
+  return result;
+};
+
+export default [
+  {
+    url: '/basic-api/tree/getDemoOptions',
+    timeout: 1000,
+    method: 'get',
+    response: ({ query }) => {
+      const { keyword } = query;
+      console.log(keyword);
+      return resultSuccess(demoTreeList(keyword));
+    },
+  },
+] as MockMethod[];

mock/sys/menu.ts

@@ -1,59 +1,46 @@
-import { resultSuccess } from '../_util';
+import { resultSuccess, resultError, getRequestToken, requestParams } from '../_util';
 import { MockMethod } from 'vite-plugin-mock';
+import { createFakeUserList } from './user';
 
 // single
 const dashboardRoute = {
-  path: '/home',
-  name: 'Home',
-  component: '/dashboard/welcome/index',
+  path: '/dashboard',
+  name: 'Dashboard',
+  component: 'LAYOUT',
+  redirect: '/dashboard/analysis',
   meta: {
-    title: 'routes.dashboard.welcome',
-    affix: true,
+    title: 'routes.dashboard.dashboard',
+    hideChildrenInMenu: true,
     icon: 'bx:bx-home',
   },
-};
-
-const frontRoute = {
-  path: 'front',
-  name: 'PermissionFrontDemo',
-  meta: {
-    title: 'routes.demo.permission.front',
-  },
   children: [
     {
-      path: 'page',
-      name: 'FrontPageAuth',
-      component: '/demo/permission/front/index',
+      path: 'analysis',
+      name: 'Analysis',
+      component: '/dashboard/analysis/index',
       meta: {
-        title: 'routes.demo.permission.frontPage',
+        hideMenu: true,
+        hideBreadcrumb: true,
+        title: 'routes.dashboard.analysis',
+        currentActiveMenu: '/dashboard',
+        icon: 'bx:bx-home',
       },
     },
     {
-      path: 'btn',
-      name: 'FrontBtnAuth',
-      component: '/demo/permission/front/Btn',
+      path: 'workbench',
+      name: 'Workbench',
+      component: '/dashboard/workbench/index',
       meta: {
-        title: 'routes.demo.permission.frontBtn',
-      },
-    },
-    {
-      path: 'auth-pageA',
-      name: 'FrontAuthPageA',
-      component: '/demo/permission/front/AuthPageA',
-      meta: {
-        title: 'routes.demo.permission.frontTestA',
-      },
-    },
-    {
-      path: 'auth-pageB',
-      name: 'FrontAuthPageB',
-      component: '/demo/permission/front/AuthPageB',
-      meta: {
-        title: 'routes.demo.permission.frontTestB',
+        hideMenu: true,
+        hideBreadcrumb: true,
+        title: 'routes.dashboard.workbench',
+        currentActiveMenu: '/dashboard',
+        icon: 'bx:bx-home',
       },
     },
   ],
 };
+
 const backRoute = {
   path: 'back',
   name: 'PermissionBackDemo',
@@ -80,19 +67,8 @@ const backRoute = {
     },
   ],
 };
-const authRoute = {
-  path: '/permission',
-  name: 'Permission',
-  component: 'LAYOUT',
-  redirect: '/permission/front/page',
-  meta: {
-    icon: 'carbon:user-role',
-    title: 'routes.demo.permission.permission',
-  },
-  children: [frontRoute, backRoute],
-};
 
-const authRoute1 = {
+const authRoute = {
   path: '/permission',
   name: 'Permission',
   component: 'LAYOUT',
@@ -159,19 +135,136 @@ const levelRoute = {
     },
   ],
 };
+
+const sysRoute = {
+  path: '/system',
+  name: 'System',
+  component: 'LAYOUT',
+  redirect: '/system/account',
+  meta: {
+    icon: 'ion:settings-outline',
+    title: 'routes.demo.system.moduleName',
+  },
+  children: [
+    {
+      path: 'account',
+      name: 'AccountManagement',
+      meta: {
+        title: 'routes.demo.system.account',
+        ignoreKeepAlive: true,
+      },
+      component: '/demo/system/account/index',
+    },
+    {
+      path: 'account_detail/:id',
+      name: 'AccountDetail',
+      meta: {
+        hideMenu: true,
+        title: 'routes.demo.system.account_detail',
+        ignoreKeepAlive: true,
+        showMenu: false,
+        currentActiveMenu: '/system/account',
+      },
+      component: '/demo/system/account/AccountDetail',
+    },
+    {
+      path: 'role',
+      name: 'RoleManagement',
+      meta: {
+        title: 'routes.demo.system.role',
+        ignoreKeepAlive: true,
+      },
+      component: '/demo/system/role/index',
+    },
+
+    {
+      path: 'menu',
+      name: 'MenuManagement',
+      meta: {
+        title: 'routes.demo.system.menu',
+        ignoreKeepAlive: true,
+      },
+      component: '/demo/system/menu/index',
+    },
+    {
+      path: 'dept',
+      name: 'DeptManagement',
+      meta: {
+        title: 'routes.demo.system.dept',
+        ignoreKeepAlive: true,
+      },
+      component: '/demo/system/dept/index',
+    },
+    {
+      path: 'changePassword',
+      name: 'ChangePassword',
+      meta: {
+        title: 'routes.demo.system.password',
+        ignoreKeepAlive: true,
+      },
+      component: '/demo/system/password/index',
+    },
+  ],
+};
+
+const linkRoute = {
+  path: '/link',
+  name: 'Link',
+  component: 'LAYOUT',
+  meta: {
+    icon: 'ion:tv-outline',
+    title: 'routes.demo.iframe.frame',
+  },
+  children: [
+    {
+      path: 'doc',
+      name: 'Doc',
+      meta: {
+        title: 'routes.demo.iframe.doc',
+        frameSrc: 'https://doc.vvbin.cn/',
+      },
+    },
+    {
+      path: 'https://doc.vvbin.cn/',
+      name: 'DocExternal',
+      component: 'LAYOUT',
+      meta: {
+        title: 'routes.demo.iframe.docExternal',
+      },
+    },
+  ],
+};
+
 export default [
   {
-    url: '/api/getMenuListById',
+    url: '/basic-api/getMenuList',
     timeout: 1000,
     method: 'get',
-    response: ({ query }) => {
-      const { id } = query;
-      if (!id || id === '1') {
-        return resultSuccess([dashboardRoute, authRoute, levelRoute]);
+    response: (request: requestParams) => {
+      const token = getRequestToken(request);
+      if (!token) {
+        return resultError('Invalid token!');
       }
-      if (id === '2') {
-        return resultSuccess([dashboardRoute, authRoute1, levelRoute]);
+      const checkUser = createFakeUserList().find((item) => item.token === token);
+      if (!checkUser) {
+        return resultError('Invalid user token!');
       }
+      const id = checkUser.userId;
+      let menu: Object[];
+      switch (id) {
+        case '1':
+          dashboardRoute.redirect = dashboardRoute.path + '/' + dashboardRoute.children[0].path;
+          menu = [dashboardRoute, authRoute, levelRoute, sysRoute, linkRoute];
+          break;
+        case '2':
+          dashboardRoute.redirect = dashboardRoute.path + '/' + dashboardRoute.children[1].path;
+          menu = [dashboardRoute, authRoute, levelRoute, linkRoute];
+          break;
+        default:
+          menu = [];
+      }
+
+      return resultSuccess(menu);
     },
   },
 ] as MockMethod[];

mock/sys/user.ts

@@ -1,15 +1,17 @@
 import { MockMethod } from 'vite-plugin-mock';
-import { resultError, resultSuccess } from '../_util';
+import { resultError, resultSuccess, getRequestToken, requestParams } from '../_util';
 
-function createFakeUserList() {
+export function createFakeUserList() {
   return [
     {
       userId: '1',
       username: 'vben',
       realName: 'Vben Admin',
+      avatar: '',
       desc: 'manager',
       password: '123456',
       token: 'fakeToken1',
+      homePath: '/dashboard/analysis',
       roles: [
         {
           roleName: 'Super Admin',
@@ -22,8 +24,10 @@ function createFakeUserList() {
       username: 'test',
       password: '123456',
       realName: 'test user',
+      avatar: '',
       desc: 'tester',
       token: 'fakeToken2',
+      homePath: '/dashboard/workbench',
       roles: [
         {
           roleName: 'Tester',
@@ -42,13 +46,13 @@ const fakeCodeList: any = {
 export default [
   // mock user login
   {
-    url: '/api/login',
+    url: '/basic-api/login',
     timeout: 200,
     method: 'post',
     response: ({ body }) => {
       const { username, password } = body;
       const checkUser = createFakeUserList().find(
-        (item) => item.username === username && password === item.password
+        (item) => item.username === username && password === item.password,
       );
       if (!checkUser) {
         return resultError('Incorrect account or password！');
@@ -65,11 +69,12 @@ export default [
     },
   },
   {
-    url: '/api/getUserInfoById',
+    url: '/basic-api/getUserInfo',
     method: 'get',
-    response: ({ query }) => {
-      const { userId } = query;
-      const checkUser = createFakeUserList().find((item) => item.userId === userId);
+    response: (request: requestParams) => {
+      const token = getRequestToken(request);
+      if (!token) return resultError('Invalid token');
+      const checkUser = createFakeUserList().find((item) => item.token === token);
       if (!checkUser) {
         return resultError('The corresponding user information was not obtained!');
       }
@@ -77,17 +82,41 @@ export default [
     },
   },
   {
-    url: '/api/getPermCodeByUserId',
+    url: '/basic-api/getPermCode',
     timeout: 200,
     method: 'get',
-    response: ({ query }) => {
-      const { userId } = query;
-      if (!userId) {
-        return resultError('userId is not null!');
+    response: (request: requestParams) => {
+      const token = getRequestToken(request);
+      if (!token) return resultError('Invalid token');
+      const checkUser = createFakeUserList().find((item) => item.token === token);
+      if (!checkUser) {
+        return resultError('Invalid token!');
       }
-      const codeList = fakeCodeList[userId];
+      const codeList = fakeCodeList[checkUser.userId];
 
       return resultSuccess(codeList);
     },
   },
+  {
+    url: '/basic-api/logout',
+    timeout: 200,
+    method: 'get',
+    response: (request: requestParams) => {
+      const token = getRequestToken(request);
+      if (!token) return resultError('Invalid token');
+      const checkUser = createFakeUserList().find((item) => item.token === token);
+      if (!checkUser) {
+        return resultError('Invalid token!');
+      }
+      return resultSuccess(undefined, { message: 'Token has been destroyed' });
+    },
+  },
+  {
+    url: '/basic-api/testRetry',
+    statusCode: 405,
+    method: 'get',
+    response: () => {
+      return resultError('Error!');
+    },
+  },
 ] as MockMethod[];

package.json

@@ -1,120 +1,160 @@
 {
   "name": "vben-admin",
-  "version": "2.0.0",
+  "version": "2.9.0",
+  "author": {
+    "name": "vben",
+    "email": "anncwb@126.com",
+    "url": "https://github.com/anncwb"
+  },
   "scripts": {
-    "bootstrap": "yarn install",
-    "serve": "vite",
+    "commit": "czg",
+    "bootstrap": "pnpm install",
+    "serve": "npm run dev",
     "dev": "vite",
-    "build": "vite build && esno ./build/script/postBuild.ts",
-    "build:no-cache": "yarn clean:cache && npm run build",
-    "report": "cross-env REPORT=true npm run build ",
+    "build": "cross-env NODE_ENV=production vite build && esno ./build/script/postBuild.ts",
+    "build:test": "cross-env vite build --mode test && esno ./build/script/postBuild.ts",
+    "build:no-cache": "pnpm clean:cache && npm run build",
+    "report": "cross-env REPORT=true npm run build",
+    "type:check": "vue-tsc --noEmit --skipLibCheck",
     "preview": "npm run build && vite preview",
     "preview:dist": "vite preview",
-    "log": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0",
+    "log": "conventional-changelog -p angular -i CHANGELOG.md -s",
     "clean:cache": "rimraf node_modules/.cache/ && rimraf node_modules/.vite",
-    "clean:lib": "npx rimraf node_modules",
-    "typecheck": "vuedx-typecheck .",
-    "lint:eslint": "eslint \"{src,mock}/**/*.{vue,ts,tsx}\" --fix",
-    "lint:prettier": "prettier --write --loglevel warn \"src/**/*.{js,json,tsx,css,less,scss,vue,html,md}\"",
-    "lint:stylelint": "stylelint --fix \"**/*.{vue,less,postcss,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/",
-    "lint:ls-lint": "ls-lint",
-    "lint:lint-staged": "lint-staged -c ./.husky/lintstagedrc.js",
-    "lint:pretty": "pretty-quick --staged",
-    "test:gzip": "http-server dist --cors --gzip -c-1",
-    "test:br": "http-server dist --cors --brotli -c-1",
-    "reinstall": "rimraf yarn.lock && rimraf package.lock.json && rimraf node_modules && npm run bootstrap",
-    "postinstall": "is-ci || husky install"
+    "clean:lib": "rimraf node_modules",
+    "lint:eslint": "eslint --cache --max-warnings 0  \"{src,mock}/**/*.{vue,ts,tsx}\" --fix",
+    "lint:prettier": "prettier --write  \"src/**/*.{js,json,tsx,css,less,scss,vue,html,md}\"",
+    "lint:stylelint": "stylelint --cache --fix \"**/*.{vue,less,postcss,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/",
+    "lint:lint-staged": "lint-staged",
+    "test:unit": "jest",
+    "test:gzip": "npx http-server dist --cors --gzip -c-1",
+    "test:br": "npx http-server dist --cors --brotli -c-1",
+    "reinstall": "rimraf pnpm-lock.yaml && rimraf package.lock.json && rimraf node_modules && npm run bootstrap",
+    "prepare": "husky install",
+    "gen:icon": "esno ./build/generate/icon/index.ts"
   },
   "dependencies": {
-    "@iconify/iconify": "^2.0.0-rc.6",
-    "@vueuse/core": "^4.1.1",
-    "@zxcvbn-ts/core": "^0.2.0",
-    "ant-design-vue": "2.0.0",
-    "apexcharts": "^3.25.0",
-    "axios": "^0.21.1",
-    "crypto-es": "^1.2.7",
-    "echarts": "^5.0.2",
+    "@ant-design/colors": "^6.0.0",
+    "@ant-design/icons-vue": "^6.1.0",
+    "@iconify/iconify": "^2.2.1",
+    "@logicflow/core": "^1.1.13",
+    "@logicflow/extension": "^1.1.13",
+    "@vue/runtime-core": "^3.2.33",
+    "@vue/shared": "^3.2.33",
+    "@vueuse/core": "^8.3.0",
+    "@vueuse/shared": "^8.3.0",
+    "@zxcvbn-ts/core": "^2.0.1",
+    "ant-design-vue": "^3.2.0",
+    "axios": "^0.26.1",
+    "codemirror": "^5.65.3",
+    "cropperjs": "^1.5.12",
+    "crypto-js": "^4.1.1",
+    "dayjs": "^1.11.1",
+    "echarts": "^5.3.2",
+    "exceljs": "^4.3.0",
+    "intro.js": "^5.1.0",
     "lodash-es": "^4.17.21",
     "mockjs": "^1.1.0",
     "nprogress": "^0.2.0",
     "path-to-regexp": "^6.2.0",
-    "qrcode": "^1.4.4",
-    "sortablejs": "^1.13.0",
-    "vditor": "^3.8.1",
-    "vue": "^3.0.5",
-    "vue-i18n": "9.0.0-rc.2",
-    "vue-router": "^4.0.4",
-    "vue-types": "^3.0.2",
-    "vuex": "^4.0.0",
-    "vuex-module-decorators": "^1.0.1",
-    "xlsx": "^0.16.9"
+    "pinia": "2.0.12",
+    "print-js": "^1.6.0",
+    "qrcode": "^1.5.0",
+    "qs": "^6.10.3",
+    "resize-observer-polyfill": "^1.5.1",
+    "showdown": "^2.1.0",
+    "sortablejs": "^1.15.0",
+    "tinymce": "^5.10.7",
+    "vditor": "^3.8.13",
+    "vue": "^3.2.45",
+    "vue-i18n": "^9.1.9",
+    "vue-json-pretty": "^2.0.6",
+    "vue-router": "^4.0.14",
+    "vue-types": "^4.1.1",
+    "vxe-table": "^4.3.9",
+    "vxe-table-plugin-export-xlsx": "^3.0.4",
+    "xe-utils": "^3.5.7",
+    "xlsx": "^0.18.5",
+    "vuedraggable": "^4.1.0"
   },
   "devDependencies": {
-    "@commitlint/cli": "^11.0.0",
-    "@commitlint/config-conventional": "^11.0.0",
-    "@iconify/json": "^1.1.306",
-    "@ls-lint/ls-lint": "^1.9.2",
-    "@purge-icons/generated": "^0.7.0",
-    "@types/fs-extra": "^9.0.7",
-    "@types/http-proxy": "^1.17.5",
-    "@types/lodash-es": "^4.17.4",
-    "@types/mockjs": "^1.0.3",
+    "@commitlint/cli": "^16.2.3",
+    "@commitlint/config-conventional": "^16.2.1",
+    "@iconify/json": "^2.1.30",
+    "@purge-icons/generated": "^0.8.1",
+    "@types/codemirror": "^5.60.5",
+    "@types/crypto-js": "^4.1.1",
+    "@types/fs-extra": "^9.0.13",
+    "@types/inquirer": "^8.2.1",
+    "@types/intro.js": "^3.0.2",
+    "@types/lodash-es": "^4.17.6",
+    "@types/mockjs": "^1.0.6",
+    "@types/node": "^17.0.25",
     "@types/nprogress": "^0.2.0",
-    "@types/qrcode": "^1.4.0",
-    "@types/rollup-plugin-visualizer": "^2.6.0",
-    "@types/sortablejs": "^1.10.6",
-    "@types/yargs": "^16.0.0",
-    "@typescript-eslint/eslint-plugin": "^4.15.1",
-    "@typescript-eslint/parser": "^4.15.1",
-    "@vitejs/plugin-legacy": "^1.3.1",
-    "@vitejs/plugin-vue": "^1.1.4",
-    "@vitejs/plugin-vue-jsx": "^1.1.0",
-    "@vue/compiler-sfc": "^3.0.5",
-    "@vuedx/typecheck": "^0.6.3",
-    "@vuedx/typescript-plugin-vue": "^0.6.3",
-    "autoprefixer": "^10.2.4",
-    "commitizen": "^4.2.3",
-    "conventional-changelog-cli": "^2.1.1",
+    "@types/qrcode": "^1.4.2",
+    "@types/qs": "^6.9.7",
+    "@types/showdown": "^1.9.4",
+    "@types/sortablejs": "^1.10.7",
+    "@typescript-eslint/eslint-plugin": "^5.20.0",
+    "@typescript-eslint/parser": "^5.20.0",
+    "@vitejs/plugin-legacy": "^1.8.1",
+    "@vitejs/plugin-vue": "^2.3.1",
+    "@vitejs/plugin-vue-jsx": "^1.3.10",
+    "@vue/compiler-sfc": "^3.2.33",
+    "@vue/test-utils": "^2.0.0-rc.21",
+    "autoprefixer": "^10.4.4",
+    "conventional-changelog-cli": "^2.2.2",
     "cross-env": "^7.0.3",
-    "dotenv": "^8.2.0",
-    "eslint": "^7.20.0",
-    "eslint-config-prettier": "^7.2.0",
-    "eslint-plugin-prettier": "^3.3.1",
-    "eslint-plugin-vue": "^7.6.0",
-    "esno": "^0.4.4",
-    "fs-extra": "^9.1.0",
-    "http-server": "^0.12.3",
-    "husky": "^5.0.9",
-    "is-ci": "^3.0.0",
-    "less": "^4.1.1",
-    "lint-staged": "^10.5.4",
-    "prettier": "^2.2.1",
-    "pretty-quick": "^3.1.0",
+    "cz-git": "^1.3.9",
+    "czg": "^1.3.9",
+    "dotenv": "^16.0.0",
+    "eslint": "^8.13.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-vue": "^8.6.0",
+    "esno": "^0.14.1",
+    "fs-extra": "^10.1.0",
+    "husky": "^7.0.4",
+    "inquirer": "^8.2.2",
+    "less": "^4.1.2",
+    "lint-staged": "12.3.7",
+    "npm-run-all": "^4.1.5",
+    "picocolors": "^1.0.0",
+    "postcss": "^8.4.12",
+    "postcss-html": "^1.4.1",
+    "postcss-less": "^6.0.0",
+    "prettier": "^2.6.2",
     "rimraf": "^3.0.2",
-    "rollup-plugin-visualizer": "^4.2.0",
-    "stylelint": "^13.11.0",
-    "stylelint-config-prettier": "^8.0.2",
-    "stylelint-config-standard": "^20.0.0",
-    "stylelint-order": "^4.1.0",
-    "ts-node": "^9.1.1",
-    "typescript": "^4.1.5",
-    "vite": "2.0.1",
-    "vite-plugin-compression": "^0.2.1",
-    "vite-plugin-html": "^2.0.0",
-    "vite-plugin-imagemin": "^0.2.7",
-    "vite-plugin-mock": "^2.1.4",
-    "vite-plugin-purge-icons": "^0.7.0",
-    "vite-plugin-pwa": "^0.5.2",
-    "vite-plugin-style-import": "^0.7.3",
-    "vite-plugin-theme": "^0.4.3",
-    "vite-plugin-windicss": "0.4.3",
-    "vue-eslint-parser": "^7.5.0",
-    "yargs": "^16.2.0"
+    "rollup": "^2.70.2",
+    "rollup-plugin-visualizer": "^5.6.0",
+    "sass": "^1.57.1",
+    "stylelint": "^14.7.1",
+    "stylelint-config-prettier": "^9.0.3",
+    "stylelint-config-recommended": "^7.0.0",
+    "stylelint-config-recommended-vue": "^1.4.0",
+    "stylelint-config-standard": "^25.0.0",
+    "stylelint-order": "^5.0.0",
+    "ts-node": "^10.7.0",
+    "typescript": "^4.6.3",
+    "vite": "^2.9.5",
+    "vite-plugin-compression": "^0.5.1",
+    "vite-plugin-html": "^3.2.0",
+    "vite-plugin-imagemin": "^0.6.1",
+    "vite-plugin-mkcert": "^1.6.0",
+    "vite-plugin-mock": "^2.9.6",
+    "vite-plugin-purge-icons": "^0.8.1",
+    "vite-plugin-pwa": "^0.11.13",
+    "vite-plugin-style-import": "^2.0.0",
+    "vite-plugin-svg-icons": "^2.0.1",
+    "vite-plugin-theme": "^0.8.6",
+    "vite-plugin-vue-setup-extend": "^0.4.0",
+    "vite-plugin-windicss": "^1.8.4",
+    "vue-eslint-parser": "^8.3.0",
+    "vue-tsc": "^1.0.9"
   },
   "resolutions": {
-    "//": "Used to install imagemin dependencies, because imagemin may not be installed in China.If it is abroad, you can delete it",
     "bin-wrapper": "npm:bin-wrapper-china",
-    "ecstatic": "4.1.4"
+    "rollup": "^2.56.3",
+    "gifsicle": "5.2.0"
   },
   "repository": {
     "type": "git",
@@ -126,6 +166,35 @@
   },
   "homepage": "https://github.com/anncwb/vue-vben-admin",
   "engines": {
-    "node": "^12 || ^14 || ^15 || ^16"
+    "node": "^12 || >=14"
+  },
+  "lint-staged": {
+    "*.{js,jsx,ts,tsx}": [
+      "eslint --fix",
+      "prettier --write"
+    ],
+    "{!(package)*.json,*.code-snippets,.!(browserslist)*rc}": [
+      "prettier --write--parser json"
+    ],
+    "package.json": [
+      "prettier --write"
+    ],
+    "*.vue": [
+      "eslint --fix",
+      "prettier --write",
+      "stylelint --fix"
+    ],
+    "*.{scss,less,styl,html}": [
+      "stylelint --fix",
+      "prettier --write"
+    ],
+    "*.md": [
+      "prettier --write"
+    ]
+  },
+  "config": {
+    "commitizen": {
+      "path": "node_modules/cz-git"
+    }
   }
 }

prettier.config.js

@@ -1,20 +1,10 @@
 module.exports = {
   printWidth: 100,
-  tabWidth: 2,
-  useTabs: false,
   semi: true,
   vueIndentScriptAndStyle: true,
   singleQuote: true,
-  quoteProps: 'as-needed',
-  bracketSpacing: true,
-  trailingComma: 'es5',
-  jsxBracketSameLine: false,
-  jsxSingleQuote: false,
-  arrowParens: 'always',
-  insertPragma: false,
-  requirePragma: false,
+  trailingComma: 'all',
   proseWrap: 'never',
   htmlWhitespaceSensitivity: 'strict',
-  endOfLine: 'lf',
-  rangeStart: 0,
+  endOfLine: 'auto',
 };

public/resource/tinymce/langs/en.js

@@ -0,0 +1,419 @@
+tinymce.addI18n('es', {
+  Redo: 'Rehacer',
+  Undo: 'Deshacer',
+  Cut: 'Cortar',
+  Copy: 'Copiar',
+  Paste: 'Pegar',
+  'Select all': 'Seleccionar todo',
+  'New document': 'Nuevo documento',
+  Ok: 'Ok',
+  Cancel: 'Cancelar',
+  'Visual aids': 'Ayudas visuales',
+  Bold: 'Negrita',
+  Italic: 'Cursiva',
+  Underline: 'Subrayado',
+  Strikethrough: 'Tachado',
+  Superscript: 'Super\u00edndice',
+  Subscript: 'Sub\u00edndice',
+  'Clear formatting': 'Limpiar formato',
+  'Align left': 'Alinear a la izquierda',
+  'Align center': 'Alinear al centro',
+  'Align right': 'Alinear a la derecha',
+  Justify: 'Justificar',
+  'Bullet list': 'Lista de vi\u00f1etas',
+  'Numbered list': 'Lista numerada',
+  'Decrease indent': 'Disminuir sangr\u00eda',
+  'Increase indent': 'Incrementar sangr\u00eda',
+  Close: 'Cerrar',
+  Formats: 'Formatos',
+  "Your browser doesn't support direct access to the clipboard. Please use the Ctrl+X\/C\/V keyboard shortcuts instead.": 'Su navegador no es compatible con el acceso directo al portapapeles. Use las teclas Crtl+X\/C\/V de su teclado.',
+  Headers: 'Encabezados',
+  'Header 1': 'Encabezado 1',
+  'Header 2': 'Encabezado 2',
+  'Header 3': 'Encabezado 3',
+  'Header 4': 'Encabezado 4',
+  'Header 5': 'Encabezado 5',
+  'Header 6': 'Encabezado 6',
+  Headings: 'Encabezados',
+  'Heading 1': 'Encabezado 1',
+  'Heading 2': 'Encabezado 2',
+  'Heading 3': 'Encabezado 3',
+  'Heading 4': 'Encabezado 4',
+  'Heading 5': 'Encabezado 5',
+  'Heading 6': 'Encabezado 6',
+  Preformatted: 'Con formato previo',
+  Div: 'Div',
+  Pre: 'Pre',
+  Code: 'C\u00f3digo',
+  Paragraph: 'P\u00e1rrafo',
+  Blockquote: 'Blockquote',
+  Inline: 'Alineado',
+  Blocks: 'Bloques',
+  'Paste is now in plain text mode. Contents will now be pasted as plain text until you toggle this option off.': 'Pegar est\u00e1 ahora en modo de texto plano. El contenido se pegar\u00e1 como texto plano hasta que desactive esta opci\u00f3n.',
+  Fonts: 'Fuentes',
+  'Font Sizes': 'Tama\u00f1os de fuente',
+  Class: 'Clase',
+  'Browse for an image': 'Buscar una imagen',
+  OR: 'OR',
+  'Drop an image here': 'Arrastre una imagen aqu\u00ed',
+  Upload: 'Cargar',
+  Block: 'Bloque',
+  Align: 'Alinear',
+  Default: 'Por defecto',
+  Circle: 'C\u00edrculo',
+  Disc: 'Disco',
+  Square: 'Cuadrado',
+  'Lower Alpha': 'Inferior Alfa',
+  'Lower Greek': 'Inferior Griega',
+  'Lower Roman': 'Inferior Romana',
+  'Upper Alpha': 'Superior Alfa',
+  'Upper Roman': 'Superior Romana',
+  'Anchor...': 'Anclaje...',
+  Name: 'Nombre',
+  Id: 'Id',
+  'Id should start with a letter, followed only by letters, numbers, dashes, dots, colons or underscores.': 'Deber\u00eda comenzar por una letra, seguida solo de letras, n\u00fameros, guiones, puntos, dos puntos o guiones bajos.',
+  'You have unsaved changes are you sure you want to navigate away?': 'Tiene cambios sin guardar. \u00bfEst\u00e1 seguro de que quiere salir?',
+  'Restore last draft': 'Restaurar el \u00faltimo borrador',
+  'Special character...': 'Car\u00e1cter especial...',
+  'Source code': 'C\u00f3digo fuente',
+  'Insert\/Edit code sample': 'Insertar\/editar c\u00f3digo de prueba',
+  Language: 'Idioma',
+  'Code sample...': 'Ejemplo de c\u00f3digo...',
+  'Color Picker': 'Selector de colores',
+  R: 'R',
+  G: 'V',
+  B: 'A',
+  'Left to right': 'De izquierda a derecha',
+  'Right to left': 'De derecha a izquierda',
+  'Emoticons...': 'Emoticones...',
+  'Metadata and Document Properties': 'Metadatos y propiedades del documento',
+  Title: 'T\u00edtulo',
+  Keywords: 'Palabras clave',
+  Description: 'Descripci\u00f3n',
+  Robots: 'Robots',
+  Author: 'Autor',
+  Encoding: 'Codificaci\u00f3n',
+  Fullscreen: 'Pantalla completa',
+  Action: 'Acci\u00f3n',
+  Shortcut: 'Atajo',
+  Help: 'Ayuda',
+  Address: 'Direcci\u00f3n',
+  'Focus to menubar': 'Enfocar la barra del men\u00fa',
+  'Focus to toolbar': 'Enfocar la barra de herramientas',
+  'Focus to element path': 'Enfocar la ruta del elemento',
+  'Focus to contextual toolbar': 'Enfocar la barra de herramientas contextual',
+  'Insert link (if link plugin activated)': 'Insertar enlace (si el complemento de enlace est\u00e1 activado)',
+  'Save (if save plugin activated)': 'Guardar (si el componente de salvar est\u00e1 activado)',
+  'Find (if searchreplace plugin activated)': 'Buscar (si el complemento buscar-remplazar est\u00e1 activado)',
+  'Plugins installed ({0}):': 'Plugins instalados ({0}):',
+  'Premium plugins:': 'Complementos premium:',
+  'Learn more...': 'Aprende m\u00e1s...',
+  'You are using {0}': 'Estas usando {0}',
+  Plugins: 'Complementos',
+  'Handy Shortcuts': 'Accesos directos',
+  'Horizontal line': 'L\u00ednea horizontal',
+  'Insert\/edit image': 'Insertar\/editar imagen',
+  'Image description': 'Descripci\u00f3n de la imagen',
+  Source: 'Enlace',
+  Dimensions: 'Dimensiones',
+  'Constrain proportions': 'Restringir proporciones',
+  General: 'General',
+  Advanced: 'Avanzado',
+  Style: 'Estilo',
+  'Vertical space': 'Espacio vertical',
+  'Horizontal space': 'Espacio horizontal',
+  Border: 'Borde',
+  'Insert image': 'Insertar imagen',
+  'Image...': 'Imagen...',
+  'Image list': 'Lista de im\u00e1genes',
+  'Rotate counterclockwise': 'Girar a la izquierda',
+  'Rotate clockwise': 'Girar a la derecha',
+  'Flip vertically': 'Invertir verticalmente',
+  'Flip horizontally': 'Invertir horizontalmente',
+  'Edit image': 'Editar imagen',
+  'Image options': 'Opciones de imagen',
+  'Zoom in': 'Acercar',
+  'Zoom out': 'Alejar',
+  Crop: 'Recortar',
+  Resize: 'Redimensionar',
+  Orientation: 'Orientaci\u00f3n',
+  Brightness: 'Brillo',
+  Sharpen: 'Forma',
+  Contrast: 'Contraste',
+  'Color levels': 'Niveles de color',
+  Gamma: 'Gamma',
+  Invert: 'Invertir',
+  Apply: 'Aplicar',
+  Back: 'Atr\u00e1s',
+  'Insert date\/time': 'Insertar fecha\/hora',
+  'Date\/time': 'Fecha\/hora',
+  'Insert\/Edit Link': 'Insertar\/editar enlace',
+  'Insert\/edit link': 'Insertar\/editar enlace',
+  'Text to display': 'Texto para mostrar',
+  Url: 'URL',
+  'Open link in...': 'Abrir enlace en...',
+  'Current window': 'Ventana actual',
+  None: 'Ninguno',
+  'New window': 'Nueva ventana',
+  'Remove link': 'Quitar enlace',
+  Anchors: 'Anclas',
+  'Link...': 'Enlace...',
+  'Paste or type a link': 'Pega o introduce un enlace',
+  'The URL you entered seems to be an email address. Do you want to add the required mailto: prefix?': 'El enlace que has introducido no parece ser una direcci\u00f3n de correo electr\u00f3nico. Quieres a\u00f1adir el prefijo necesario mailto: ?',
+  'The URL you entered seems to be an external link. Do you want to add the required http:\/\/ prefix?': 'El enlace que has introducido no parece ser una enlace externo. Quieres a\u00f1adir el prefijo necesario http:\/\/ ?',
+  'Link list': 'Lista de enlaces',
+  'Insert video': 'Insertar video',
+  'Insert\/edit video': 'Insertar\/editar video',
+  'Insert\/edit media': 'Insertar\/editar medio',
+  'Alternative source': 'Enlace alternativo',
+  'Alternative source URL': 'Origen de URL alternativo',
+  'Media poster (Image URL)': 'P\u00f3ster de medio (URL de imagen)',
+  'Paste your embed code below:': 'Pega tu c\u00f3digo embebido debajo',
+  Embed: 'Incrustado',
+  'Media...': 'Medios...',
+  'Nonbreaking space': 'Espacio fijo',
+  'Page break': 'Salto de p\u00e1gina',
+  'Paste as text': 'Pegar como texto',
+  Preview: 'Previsualizar',
+  'Print...': 'Imprimir...',
+  Save: 'Guardar',
+  Find: 'Buscar',
+  'Replace with': 'Reemplazar con',
+  Replace: 'Reemplazar',
+  'Replace all': 'Reemplazar todo',
+  Previous: 'Anterior',
+  Next: 'Siguiente',
+  'Find and replace...': 'Buscar y reemplazar...',
+  'Could not find the specified string.': 'No se encuentra la cadena de texto especificada',
+  'Match case': 'Coincidencia exacta',
+  'Find whole words only': 'Solo palabras completas',
+  'Spell check': 'Revisar ortograf\u00eda',
+  Ignore: 'Ignorar',
+  'Ignore all': 'Ignorar todos',
+  Finish: 'Finalizar',
+  'Add to Dictionary': 'A\u00f1adir al Diccionario',
+  'Insert table': 'Insertar tabla',
+  'Table properties': 'Propiedades de la tabla',
+  'Delete table': 'Eliminar tabla',
+  Cell: 'Celda',
+  Row: 'Fila',
+  Column: 'Columna',
+  'Cell properties': 'Propiedades de la celda',
+  'Merge cells': 'Combinar celdas',
+  'Split cell': 'Dividir celdas',
+  'Insert row before': 'Insertar fila antes',
+  'Insert row after': 'Insertar fila despu\u00e9s ',
+  'Delete row': 'Eliminar fila',
+  'Row properties': 'Propiedades de la fila',
+  'Cut row': 'Cortar fila',
+  'Copy row': 'Copiar fila',
+  'Paste row before': 'Pegar la fila antes',
+  'Paste row after': 'Pegar la fila despu\u00e9s',
+  'Insert column before': 'Insertar columna antes',
+  'Insert column after': 'Insertar columna despu\u00e9s',
+  'Delete column': 'Eliminar columna',
+  Cols: 'Columnas',
+  Rows: 'Filas',
+  Width: 'Ancho',
+  Height: 'Alto',
+  'Cell spacing': 'Espacio entre celdas',
+  'Cell padding': 'Relleno de celda',
+  'Show caption': 'Mostrar t\u00edtulo',
+  Left: 'Izquierda',
+  Center: 'Centrado',
+  Right: 'Derecha',
+  'Cell type': 'Tipo de celda',
+  Scope: '\u00c1mbito',
+  Alignment: 'Alineaci\u00f3n',
+  'H Align': 'Alineamiento Horizontal',
+  'V Align': 'Alineamiento Vertical',
+  Top: 'Arriba',
+  Middle: 'Centro',
+  Bottom: 'Abajo',
+  'Header cell': 'Celda de la cebecera',
+  'Row group': 'Grupo de filas',
+  'Column group': 'Grupo de columnas',
+  'Row type': 'Tipo de fila',
+  Header: 'Cabecera',
+  Body: 'Cuerpo',
+  Footer: 'Pie de p\u00e1gina',
+  'Border color': 'Color del borde',
+  'Insert template...': 'Insertar plantilla...',
+  Templates: 'Plantillas',
+  Template: 'Plantilla',
+  'Text color': 'Color del texto',
+  'Background color': 'Color de fondo',
+  'Custom...': 'Personalizar...',
+  'Custom color': 'Color personalizado',
+  'No color': 'Sin color',
+  'Remove color': 'Quitar color',
+  'Table of Contents': 'Tabla de contenidos',
+  'Show blocks': 'Mostrar bloques',
+  'Show invisible characters': 'Mostrar caracteres invisibles',
+  'Word count': 'Contar palabras',
+  Count: 'Recuento',
+  Document: 'Documento',
+  Selection: 'Selecci\u00f3n',
+  Words: 'Palabras',
+  'Words: {0}': 'Palabras: {0}',
+  '{0} words': '{0} palabras',
+  File: 'Archivo',
+  Edit: 'Editar',
+  Insert: 'Insertar',
+  View: 'Ver',
+  Format: 'Formato',
+  Table: 'Tabla',
+  Tools: 'Herramientas',
+  'Powered by {0}': 'Desarrollado por {0}',
+  'Rich Text Area. Press ALT-F9 for menu. Press ALT-F10 for toolbar. Press ALT-0 for help': '\u00c1rea de texto enriquecido. Pulse ALT-F9 para el menu. Pulse ALT-F10 para la barra de herramientas. Pulse ALT-0 para ayuda',
+  'Image title': 'Titulo de imagen',
+  'Border width': 'Ancho de borde',
+  'Border style': 'Estilo de borde',
+  Error: 'Error',
+  Warn: 'Advertencia',
+  Valid: 'V\u00e1lido',
+  'To open the popup, press Shift+Enter': 'Para abrir el elemento emergente, pulse May\u00fas+Intro',
+  'Rich Text Area. Press ALT-0 for help.': '\u00c1rea de texto enriquecido. Pulse ALT-0 para abrir la ayuda.',
+  'System Font': 'Fuente de sistema',
+  'Failed to upload image: {0}': 'Fallo al cargar imagen: {0}',
+  'Failed to load plugin: {0} from url {1}': 'Fallo al cargar complemento: {0} desde URL {1}',
+  'Failed to load plugin url: {0}': 'Fallo al cargar URL del complemento: {0}',
+  'Failed to initialize plugin: {0}': 'Fallo al iniciar el complemento: {0}',
+  example: 'ejemplo',
+  Search: 'Buscar',
+  All: 'Todo',
+  Currency: 'Divisa',
+  Text: 'Texto',
+  Quotations: 'Comillas',
+  Mathematical: 'S\u00edmbolo matem\u00e1tico',
+  'Extended Latin': 'Latino extendido A',
+  Symbols: 'S\u00edmbolos',
+  Arrows: 'Flechas',
+  'User Defined': 'Definido por el usuario',
+  'dollar sign': 'signo de d\u00f3lar',
+  'currency sign': 'signo de divisa',
+  'euro-currency sign': 'signo de euro',
+  'colon sign': 'signo de dos puntos',
+  'cruzeiro sign': 'signo de cruceiro',
+  'french franc sign': 'signo de franco franc\u00e9s',
+  'lira sign': 'signo de lira',
+  'mill sign': 'signo de mill',
+  'naira sign': 'signo de naira',
+  'peseta sign': 'signo de peseta',
+  'rupee sign': 'signo de rupia',
+  'won sign': 'signo de won',
+  'new sheqel sign': 'signo de nuevo s\u00e9quel',
+  'dong sign': 'signo de dong',
+  'kip sign': 'signo de kip',
+  'tugrik sign': 'signo de tugrik',
+  'drachma sign': 'signo de dracma',
+  'german penny symbol': 'signo de penique alem\u00e1n',
+  'peso sign': 'signo de peso',
+  'guarani sign': 'signo de guaran\u00ed',
+  'austral sign': 'signo de austral',
+  'hryvnia sign': 'signo de grivna',
+  'cedi sign': 'signo de cedi',
+  'livre tournois sign': 'signo de libra tornesa',
+  'spesmilo sign': 'signo de spesmilo',
+  'tenge sign': 'signo de tenge',
+  'indian rupee sign': 'signo de rupia india',
+  'turkish lira sign': 'signo de lira turca',
+  'nordic mark sign': 'signo de marco n\u00f3rdico',
+  'manat sign': 'signo de manat',
+  'ruble sign': 'signo de rublo',
+  'yen character': 'car\u00e1cter de yen',
+  'yuan character': 'car\u00e1cter de yuan',
+  'yuan character, in hong kong and taiwan': 'car\u00e1cter de yuan en Hong Kong y Taiw\u00e1n',
+  'yen\/yuan character variant one': 'Variante uno de car\u00e1cter de yen\/yuan',
+  'Loading emoticons...': 'Cargando emoticonos...',
+  'Could not load emoticons': 'No se han podido cargar los emoticonos',
+  People: 'Personas',
+  'Animals and Nature': 'Animales y naturaleza',
+  'Food and Drink': 'Comida y bebida',
+  Activity: 'Actividad',
+  'Travel and Places': 'Viajes y lugares',
+  Objects: 'Objetos',
+  Flags: 'Banderas',
+  Characters: 'Caracteres',
+  'Characters (no spaces)': 'Caracteres (sin espacios)',
+  '{0} characters': '{0} caracteres',
+  'Error: Form submit field collision.': 'Error: Colisi\u00f3n de campo al enviar formulario.',
+  'Error: No form element found.': 'Error: No se encuentra ning\u00fan elemento de formulario.',
+  Update: 'Actualizar',
+  'Color swatch': 'Muestrario de colores',
+  Turquoise: 'Turquesa',
+  Green: 'Verde',
+  Blue: 'Azul',
+  Purple: 'P\u00farpura',
+  'Navy Blue': 'Azul marino',
+  'Dark Turquoise': 'Turquesa oscuro',
+  'Dark Green': 'Verde oscuro',
+  'Medium Blue': 'Azul medio',
+  'Medium Purple': 'P\u00farpura medio',
+  'Midnight Blue': 'Azul medio',
+  Yellow: 'Amarillo',
+  Orange: 'Naranja',
+  Red: 'Rojo',
+  'Light Gray': 'Gris claro',
+  Gray: 'Gris',
+  'Dark Yellow': 'Amarillo oscuro',
+  'Dark Orange': 'Naranja oscuro',
+  'Dark Red': 'Rojo oscuro',
+  'Medium Gray': 'Gris medio',
+  'Dark Gray': 'Gris oscuro',
+  'Light Green': 'Verde claro',
+  'Light Yellow': 'Amarillo claro',
+  'Light Red': 'Rojo claro',
+  'Light Purple': 'Morado claro',
+  'Light Blue': 'Azul claro',
+  'Dark Purple': 'Morado oscuro',
+  'Dark Blue': 'Azul oscuro',
+  Black: 'Negro',
+  White: 'Blanco',
+  'Switch to or from fullscreen mode': 'Activar o desactivar modo pantalla completa',
+  'Open help dialog': 'Abrir di\u00e1logo de ayuda',
+  history: 'historial',
+  styles: 'estilos',
+  formatting: 'formato',
+  alignment: 'alineaci\u00f3n',
+  indentation: 'sangr\u00eda',
+  'permanent pen': 'bol\u00edgrafo permanente',
+  comments: 'comentarios',
+  'Format Painter': 'Copiar formato',
+  'Insert\/edit iframe': 'Insertar\/editar iframe',
+  Capitalization: 'Uso de may\u00fasculas',
+  lowercase: 'min\u00fasculas',
+  UPPERCASE: 'MAY\u00daSCULAS',
+  'Title Case': 'Tipo T\u00edtulo',
+  'Permanent Pen Properties': 'Propiedades del bol\u00edgrafo permanente',
+  'Permanent pen properties...': 'Propiedades del bol\u00edgrafo permanente...',
+  Font: 'Fuente',
+  Size: 'Tama\u00f1o',
+  'More...': 'M\u00e1s...',
+  'Spellcheck Language': 'Corrector',
+  'Select...': 'Seleccionar...',
+  Preferences: 'Preferencias',
+  Yes: 'S\u00ed',
+  No: 'No',
+  'Keyboard Navigation': 'Navegaci\u00f3n con el teclado',
+  Version: 'Versi\u00f3n',
+  Anchor: 'Ancla',
+  'Special character': 'Car\u00e1cter especial',
+  'Code sample': 'Ejemplo de c\u00f3digo',
+  Color: 'Color',
+  Emoticons: 'Emoticonos',
+  'Document properties': 'Propiedades del documento',
+  Image: 'Imagen',
+  'Insert link': 'Insertar enlace',
+  Target: 'Destino',
+  Link: 'Enlace',
+  Poster: 'Miniatura',
+  Media: 'Media',
+  Print: 'Imprimir',
+  Prev: 'Anterior',
+  'Find and replace': 'Buscar y reemplazar',
+  'Whole words': 'Palabras completas',
+  Spellcheck: 'Corrector ortogr\u00e1fico',
+  Caption: 'Subt\u00edtulo',
+  'Insert template': 'Insertar plantilla'
+})

public/resource/tinymce/skins/ui/oxide-dark/content.mobile.min.css

@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) Tiny Technologies, Inc. All rights reserved.
+ * Licensed under the LGPL or a commercial license.
+ * For LGPL see License.txt in the project root for license information.
+ * For commercial licenses see https://www.tiny.cloud/
+ */
+.tinymce-mobile-unfocused-selections .tinymce-mobile-unfocused-selection{background-color:green;display:inline-block;opacity:.5;position:absolute}body{-webkit-text-size-adjust:none}body img{max-width:96vw}body table img{max-width:95%}body{font-family:sans-serif}table{border-collapse:collapse}

public/resource/tinymce/skins/ui/oxide-dark/skin.shadowdom.min.css

@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) Tiny Technologies, Inc. All rights reserved.
+ * Licensed under the LGPL or a commercial license.
+ * For LGPL see License.txt in the project root for license information.
+ * For commercial licenses see https://www.tiny.cloud/
+ */
+body.tox-dialog__disable-scroll{overflow:hidden}.tox-fullscreen{border:0;height:100%;margin:0;overflow:hidden;-ms-scroll-chaining:none;overscroll-behavior:none;padding:0;touch-action:pinch-zoom;width:100%}.tox.tox-tinymce.tox-fullscreen .tox-statusbar__resize-handle{display:none}.tox-shadowhost.tox-fullscreen,.tox.tox-tinymce.tox-fullscreen{left:0;position:fixed;top:0;z-index:1200}.tox.tox-tinymce.tox-fullscreen{background-color:transparent}.tox-fullscreen .tox.tox-tinymce-aux,.tox-fullscreen~.tox.tox-tinymce-aux{z-index:1201}

public/resource/tinymce/skins/ui/oxide/content.mobile.min.css

@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) Tiny Technologies, Inc. All rights reserved.
+ * Licensed under the LGPL or a commercial license.
+ * For LGPL see License.txt in the project root for license information.
+ * For commercial licenses see https://www.tiny.cloud/
+ */
+.tinymce-mobile-unfocused-selections .tinymce-mobile-unfocused-selection{background-color:green;display:inline-block;opacity:.5;position:absolute}body{-webkit-text-size-adjust:none}body img{max-width:96vw}body table img{max-width:95%}body{font-family:sans-serif}table{border-collapse:collapse}

public/resource/tinymce/skins/ui/oxide/skin.shadowdom.min.css

@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) Tiny Technologies, Inc. All rights reserved.
+ * Licensed under the LGPL or a commercial license.
+ * For LGPL see License.txt in the project root for license information.
+ * For commercial licenses see https://www.tiny.cloud/
+ */
+body.tox-dialog__disable-scroll{overflow:hidden}.tox-fullscreen{border:0;height:100%;margin:0;overflow:hidden;-ms-scroll-chaining:none;overscroll-behavior:none;padding:0;touch-action:pinch-zoom;width:100%}.tox.tox-tinymce.tox-fullscreen .tox-statusbar__resize-handle{display:none}.tox-shadowhost.tox-fullscreen,.tox.tox-tinymce.tox-fullscreen{left:0;position:fixed;top:0;z-index:1200}.tox.tox-tinymce.tox-fullscreen{background-color:transparent}.tox-fullscreen .tox.tox-tinymce-aux,.tox-fullscreen~.tox.tox-tinymce-aux{z-index:1201}

src/App.vue

@@ -1,38 +1,21 @@
 <template>
-  <ConfigProvider v-bind="lockEvent" :locale="antConfigLocale">
+  <ConfigProvider :locale="getAntdLocale">
     <AppProvider>
       <RouterView />
     </AppProvider>
   </ConfigProvider>
 </template>
 
-<script lang="ts">
-  import { defineComponent } from 'vue';
+<script lang="ts" setup>
   import { ConfigProvider } from 'ant-design-vue';
   import { AppProvider } from '/@/components/Application';
-
-  import { initAppConfigStore } from '/@/logics/initAppConfig';
-
-  import { useLockPage } from '/@/hooks/web/useLockPage';
+  import { useTitle } from '/@/hooks/web/useTitle';
   import { useLocale } from '/@/locales/useLocale';
 
-  export default defineComponent({
-    name: 'App',
-    components: { ConfigProvider, AppProvider },
-    setup() {
-      // support Multi-language
-      const { antConfigLocale, setLocale } = useLocale();
-      setLocale();
+  import 'dayjs/locale/zh-cn';
+  // support Multi-language
+  const { getAntdLocale } = useLocale();
 
-      // Initialize vuex internal system configuration
-      initAppConfigStore();
-      // Create a lock screen monitor
-      const lockEvent = useLockPage();
-
-      return {
-        antConfigLocale,
-        lockEvent,
-      };
-    },
-  });
+  // Listening to page changes and dynamically changing site titles
+  useTitle();
 </script>

src/api/demo/account.ts

@@ -3,12 +3,14 @@ import { GetAccountInfoModel } from './model/accountModel';
 
 enum Api {
   ACCOUNT_INFO = '/account/getAccountInfo',
+  SESSION_TIMEOUT = '/user/sessionTimeout',
+  TOKEN_EXPIRED = '/user/tokenExpired',
 }
 
 // Get personal center-basic settings
-export function accountInfoApi() {
-  return defHttp.request<GetAccountInfoModel>({
-    url: Api.ACCOUNT_INFO,
-    method: 'GET',
-  });
-}
+
+export const accountInfoApi = () => defHttp.get<GetAccountInfoModel>({ url: Api.ACCOUNT_INFO });
+
+export const sessionTimeoutApi = () => defHttp.post<void>({ url: Api.SESSION_TIMEOUT });
+
+export const tokenExpiredApi = () => defHttp.post<void>({ url: Api.TOKEN_EXPIRED });

src/api/demo/cascader.ts

@@ -0,0 +1,9 @@
+import { defHttp } from '/@/utils/http/axios';
+import { AreaModel, AreaParams } from '/@/api/demo/model/areaModel';
+
+enum Api {
+  AREA_RECORD = '/cascader/getAreaRecord',
+}
+
+export const areaRecord = (data: AreaParams) =>
+  defHttp.post<AreaModel>({ url: Api.AREA_RECORD, data });

src/api/demo/error.ts

@@ -8,9 +8,5 @@ enum Api {
 /**
  * @description: Trigger ajax error
  */
-export function fireErrorApi() {
-  return defHttp.request({
-    url: Api.Error,
-    method: 'GET',
-  });
-}
+
+export const fireErrorApi = () => defHttp.get({ url: Api.Error });

src/api/demo/model/areaModel.ts

@@ -0,0 +1,12 @@
+export interface AreaModel {
+  id: string;
+  code: string;
+  parentCode: string;
+  name: string;
+  levelType: number;
+  [key: string]: string | number;
+}
+
+export interface AreaParams {
+  parentCode: string;
+}

src/api/demo/model/optionsModel.ts

@@ -5,7 +5,11 @@ export interface DemoOptionsItem {
   value: string;
 }
 
+export interface selectParams {
+  id: number | string;
+}
+
 /**
  * @description: Request list return value
  */
-export type DemoOptionsGetResultModel = BasicFetchResult<DemoOptionsItem[]>;
+export type DemoOptionsGetResultModel = BasicFetchResult<DemoOptionsItem>;

src/api/demo/model/systemModel.ts

@@ -0,0 +1,74 @@
+import { BasicPageParams, BasicFetchResult } from '/@/api/model/baseModel';
+
+export type AccountParams = BasicPageParams & {
+  account?: string;
+  nickname?: string;
+};
+
+export type RoleParams = {
+  roleName?: string;
+  status?: string;
+};
+
+export type RolePageParams = BasicPageParams & RoleParams;
+
+export type DeptParams = {
+  deptName?: string;
+  status?: string;
+};
+
+export type MenuParams = {
+  menuName?: string;
+  status?: string;
+};
+
+export interface AccountListItem {
+  id: string;
+  account: string;
+  email: string;
+  nickname: string;
+  role: number;
+  createTime: string;
+  remark: string;
+  status: number;
+}
+
+export interface DeptListItem {
+  id: string;
+  orderNo: string;
+  createTime: string;
+  remark: string;
+  status: number;
+}
+
+export interface MenuListItem {
+  id: string;
+  orderNo: string;
+  createTime: string;
+  status: number;
+  icon: string;
+  component: string;
+  permission: string;
+}
+
+export interface RoleListItem {
+  id: string;
+  roleName: string;
+  roleValue: string;
+  status: number;
+  orderNo: string;
+  createTime: string;
+}
+
+/**
+ * @description: Request list return value
+ */
+export type AccountListGetResultModel = BasicFetchResult<AccountListItem>;
+
+export type DeptListGetResultModel = BasicFetchResult<DeptListItem>;
+
+export type MenuListGetResultModel = BasicFetchResult<MenuListItem>;
+
+export type RolePageListGetResultModel = BasicFetchResult<RoleListItem>;
+
+export type RoleListGetResultModel = RoleListItem[];

src/api/demo/select.ts

@@ -1,6 +1,5 @@
 import { defHttp } from '/@/utils/http/axios';
-import { DemoOptionsGetResultModel } from './model/optionsModel';
-
+import { DemoOptionsItem, selectParams } from './model/optionsModel';
 enum Api {
   OPTIONS_LIST = '/select/getDemoOptions',
 }
@@ -8,9 +7,5 @@ enum Api {
 /**
  * @description: Get sample options value
  */
-export function optionsListApi() {
-  return defHttp.request<DemoOptionsGetResultModel>({
-    url: Api.OPTIONS_LIST,
-    method: 'GET',
-  });
-}
+export const optionsListApi = (params?: selectParams) =>
+  defHttp.get<DemoOptionsItem[]>({ url: Api.OPTIONS_LIST, params });

src/api/demo/system.ts

@@ -0,0 +1,44 @@
+import {
+  AccountParams,
+  DeptListItem,
+  MenuParams,
+  RoleParams,
+  RolePageParams,
+  MenuListGetResultModel,
+  DeptListGetResultModel,
+  AccountListGetResultModel,
+  RolePageListGetResultModel,
+  RoleListGetResultModel,
+} from './model/systemModel';
+import { defHttp } from '/@/utils/http/axios';
+
+enum Api {
+  AccountList = '/system/getAccountList',
+  IsAccountExist = '/system/accountExist',
+  DeptList = '/system/getDeptList',
+  setRoleStatus = '/system/setRoleStatus',
+  MenuList = '/system/getMenuList',
+  RolePageList = '/system/getRoleListByPage',
+  GetAllRoleList = '/system/getAllRoleList',
+}
+
+export const getAccountList = (params: AccountParams) =>
+  defHttp.get<AccountListGetResultModel>({ url: Api.AccountList, params });
+
+export const getDeptList = (params?: DeptListItem) =>
+  defHttp.get<DeptListGetResultModel>({ url: Api.DeptList, params });
+
+export const getMenuList = (params?: MenuParams) =>
+  defHttp.get<MenuListGetResultModel>({ url: Api.MenuList, params });
+
+export const getRoleListByPage = (params?: RolePageParams) =>
+  defHttp.get<RolePageListGetResultModel>({ url: Api.RolePageList, params });
+
+export const getAllRoleList = (params?: RoleParams) =>
+  defHttp.get<RoleListGetResultModel>({ url: Api.GetAllRoleList, params });
+
+export const setRoleStatus = (id: number, status: string) =>
+  defHttp.post({ url: Api.setRoleStatus, params: { id, status } });
+
+export const isAccountExist = (account: string) =>
+  defHttp.post({ url: Api.IsAccountExist, params: { account } }, { errorMessageMode: 'none' });