release: update 5.0.0

* feat: 添加系统管理-菜单管理

* chore: update

* chore: add Copyright in login page

* chore: 将页脚放在一屏可视区

* chore: 依赖更新

* chore: update

* chore: update

* chore: 更新依赖

* chore: update `husky v9`

* style: 适配`el-dialog`样式的更新

* style: update `src/layout/components/search/components/SearchResult.vue`

* chore: update

* style: update

* fix: 修复`ReDialog`中点击取消和确定按钮会触发两次关闭回调

* chore: update

* chore: update src/views/system/menu/README.md

* chore: update

* chore: update

* chore: done

* chore: update

.browserslistrc

@@ -0,0 +1,4 @@
+> 1%
+last 2 versions
+not dead
+not ie 11

.dockerignore

@@ -0,0 +1,21 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
+.eslintcache
+report.html
+
+yarn.lock
+npm-debug.log*
+.pnpm-error.log*
+.pnpm-debug.log
+tests/**/coverage/
+
+# Editor directories and files
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+tsconfig.tsbuildinfo

.env.staging

@@ -1,6 +1,6 @@
 # 预发布也需要生产环境的行为
 # https://cn.vitejs.dev/guide/env-and-mode.html#modes
-NODE_ENV=production
+# NODE_ENV = development
 
 VITE_PUBLIC_PATH = /
 

.eslintignore

@@ -3,11 +3,11 @@ dist
 *.d.ts
 /src/assets
 package.json
-.eslintrc.js
+eslint.config.js 
 .prettierrc.js
 commitlint.config.js
 postcss.config.js
-tailwind.config.js
+tailwind.config.ts
 stylelint.config.js
 src/components/ReSplitPane/iconfont
 src/components/ReFlowChart/src/assets/iconfont

.eslintrc.js

@@ -1,120 +0,0 @@
-module.exports = {
-  root: true,
-  env: {
-    node: true
-  },
-  globals: {
-    // Ref sugar (take 2)
-    $: "readonly",
-    $$: "readonly",
-    $ref: "readonly",
-    $shallowRef: "readonly",
-    $computed: "readonly",
-
-    // index.d.ts
-    // global.d.ts
-    Fn: "readonly",
-    PromiseFn: "readonly",
-    RefType: "readonly",
-    LabelValueOptions: "readonly",
-    EmitType: "readonly",
-    TargetContext: "readonly",
-    ComponentElRef: "readonly",
-    ComponentRef: "readonly",
-    ElRef: "readonly",
-    global: "readonly",
-    ForDataType: "readonly",
-    ComponentRoutes: "readonly",
-
-    // script setup
-    defineProps: "readonly",
-    defineEmits: "readonly",
-    defineExpose: "readonly",
-    withDefaults: "readonly"
-  },
-  extends: [
-    "plugin:vue/vue3-essential",
-    "eslint:recommended",
-    "@vue/typescript/recommended",
-    "@vue/prettier",
-    "@vue/eslint-config-typescript"
-  ],
-  parser: "vue-eslint-parser",
-  parserOptions: {
-    parser: "@typescript-eslint/parser",
-    ecmaVersion: 2020,
-    sourceType: "module",
-    jsxPragma: "React",
-    ecmaFeatures: {
-      jsx: true
-    }
-  },
-  overrides: [
-    {
-      files: ["*.ts", "*.vue"],
-      rules: {
-        "no-undef": "off"
-      }
-    },
-    {
-      files: ["*.vue"],
-      parser: "vue-eslint-parser",
-      parserOptions: {
-        parser: "@typescript-eslint/parser",
-        extraFileExtensions: [".vue"],
-        ecmaVersion: "latest",
-        ecmaFeatures: {
-          jsx: true
-        }
-      },
-      rules: {
-        "no-undef": "off"
-      }
-    }
-  ],
-  rules: {
-    "vue/no-v-html": "off",
-    "vue/require-default-prop": "off",
-    "vue/require-explicit-emits": "off",
-    "vue/multi-word-component-names": "off",
-    "@typescript-eslint/no-explicit-any": "off", // any
-    "no-debugger": "off",
-    "@typescript-eslint/explicit-module-boundary-types": "off", // setup()
-    "@typescript-eslint/ban-types": "off",
-    "@typescript-eslint/ban-ts-comment": "off",
-    "@typescript-eslint/no-empty-function": "off",
-    "@typescript-eslint/no-non-null-assertion": "off",
-    "vue/html-self-closing": [
-      "error",
-      {
-        html: {
-          void: "always",
-          normal: "always",
-          component: "always"
-        },
-        svg: "always",
-        math: "always"
-      }
-    ],
-    "@typescript-eslint/no-unused-vars": [
-      "error",
-      {
-        argsIgnorePattern: "^_",
-        varsIgnorePattern: "^_"
-      }
-    ],
-    "no-unused-vars": [
-      "error",
-      {
-        argsIgnorePattern: "^_",
-        varsIgnorePattern: "^_"
-      }
-    ],
-    "prettier/prettier": [
-      "error",
-      {
-        endOfLine: "auto"
-      }
-    ]
-  }
-}

.gitattributes

@@ -0,0 +1,2 @@
+public/wasm/capture.worker.js linguist-language=Vue
+public/wasm/index.js linguist-language=Vue

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,38 +0,0 @@
----
-name: Bug report
-about: Create a report to help us improve
-title: ''
-labels: ''
-assignees: ''
-
----
-
-**Describe the bug**
-A clear and concise description of what the bug is.
-
-**To Reproduce**
-Steps to reproduce the behavior:
-1. Go to '...'
-2. Click on '....'
-3. Scroll down to '....'
-4. See error
-
-**Expected behavior**
-A clear and concise description of what you expected to happen.
-
-**Screenshots**
-If applicable, add screenshots to help explain your problem.
-
-**Desktop (please complete the following information):**
- - OS: [e.g. iOS]
- - Browser [e.g. chrome, safari]
- - Version [e.g. 22]
-
-**Smartphone (please complete the following information):**
- - Device: [e.g. iPhone6]
- - OS: [e.g. iOS8.1]
- - Browser [e.g. stock browser, safari]
- - Version [e.g. 22]
-
-**Additional context**
-Add any other context about the problem here.

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -0,0 +1,38 @@
+name: "\U0001F41E Bug report"
+description: Report an issue with vue-pure-admin
+body:
+  - type: markdown
+    attributes:
+      value: |
+        感谢您花时间填写此错误报告 (Thanks for taking the time to fill out this bug report)
+  - type: textarea
+    id: bug-description
+    attributes:
+      label: 描述问题 (Describe the problem)
+      placeholder: 请描述您的问题 (Please describe your problem)
+    validations:
+      required: true
+  - type: textarea
+    id: reproduction-steps
+    attributes:
+      label: 如何复现该问题 (How to reproduce the problem)
+      placeholder: 请提供复现问题的具体操作步骤，以便平台快速定位、高效地解决问题。当然如果问题的操作步骤较复杂，您可以fork平台，然后去改动代码复现问题，这样更高效 (Please provide specific steps to reproduce the problem, so that the platform can quickly locate and solve the problem efficiently. Of course, if the operation steps of the problem are more complicated, you can fork the platform, and then modify the code to reproduce the problem, which is more efficient)
+    validations:
+      required: true
+  - type: textarea
+    id: system-info
+    attributes:
+      label: 操作系统和浏览器信息 (Operating system and browser information)
+      placeholder: 如果您遇到操作系统或浏览器兼容性问题，可选填此项 (Optional if you encounter operating system or browser compatibility issues)
+    validations:
+      required: false
+  - type: checkboxes
+    id: checkboxes
+    attributes:
+      label: 验证 (Verify)
+      description: 在提交问题之前，请确保您执行以下操作 (Before submitting an issue, please ensure you do the following)
+      options:
+        - label: 是否仔细阅读过 [文档](https://yiming_chang.gitee.io/pure-admin-doc/) (Have you read [documentation](https://yiming_chang.gitee.io/pure-admin-doc/) carefully)
+          required: true
+        - label: 检查是否存在相同或类似的问题 [issues](https://github.com/pure-admin/vue-pure-admin/issues) (Check for the same or similar [issues](https://github.com/pure-admin/vue-pure-admin/issues))
+          required: true

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1 @@
+blank_issues_enabled: false

.github/ISSUE_TEMPLATE/feature_request.md

@@ -1,20 +0,0 @@
----
-name: Feature request
-about: Suggest an idea for this project
-title: ''
-labels: ''
-assignees: ''
-
----
-
-**Is your feature request related to a problem? Please describe.**
-A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
-
-**Describe the solution you'd like**
-A clear and concise description of what you want to happen.
-
-**Describe alternatives you've considered**
-A clear and concise description of any alternative solutions or features you've considered.
-
-**Additional context**
-Add any other context or screenshots about the feature request here.

.github/workflows/gitee.yml

@@ -1,39 +0,0 @@
-name: Build and Deploy
-permissions:
-  contents: write
-on:
-  push:
-    branches:
-      - master
-jobs:
-  deploy:
-    concurrency: ci-${{ github.ref }}
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout 🛎️
-        uses: actions/checkout@v3
-
-      - name: Setup node
-        uses: actions/setup-node@v2
-        with:
-          node-version: "16"
-          registry-url: https://registry.npmjs.com/
-
-      - name: Setup pnpm
-        uses: pnpm/action-setup@v2
-        with:
-          version: latest
-
-      - name: Deploy 🔧
-        run: |
-          pnpm install --no-frozen-lockfile
-          sed -i "s#VITE_PUBLIC_PATH = /#VITE_PUBLIC_PATH = /vue-pure-admin/#g" $(pwd)/.env.production
-          pnpm build
-          cd dist
-          touch README.md .nojekyll
-
-      - name: Deploy 🚀
-        uses: JamesIves/github-pages-deploy-action@v4
-        with:
-          folder: dist
-          clean: true

.github/workflows/linter.yml

@@ -1,19 +1,4 @@
----
-#################################
-#################################
-## Super Linter GitHub Actions ##
-#################################
-#################################
-name: Lint Code Base
-
-#
-# Documentation:
-# https://help.github.com/en/articles/workflow-syntax-for-github-actions
-#
-
-#############################
-# Start the job on all push #
-#############################
+name: Lint Code
 on:
   push:
     branches:
@@ -22,41 +7,41 @@ on:
     branches:
       - main
 
-###############
-# Set the Job #
-###############
 jobs:
   build:
-    # Name the Job
-    name: Lint Code Base
-    # Set the agent to run on
+    name: Lint Code
     runs-on: ubuntu-latest
-
-    ##################
-    # Load all steps #
-    ##################
     steps:
-      ##########################
-      # Checkout the code base #
-      ##########################
-      - name: Checkout Code
-        uses: actions/checkout@v2
-        with:
-          # Full git history is needed to get a proper list of changed files within `super-linter`
-          fetch-depth: 0
+      - name: Checkout repository
+        uses: actions/checkout@v3
 
-      - name: Setup node
-        uses: actions/setup-node@v2
+      - name: Install Node.js
+        uses: actions/setup-node@v3
         with:
-          node-version: "16"
-          registry-url: https://registry.npmjs.com/
+          node-version: 18
 
-      - name: Setup pnpm
-        uses: pnpm/action-setup@v2
+      - uses: pnpm/action-setup@v2
+        name: Install pnpm
+        id: pnpm-install
         with:
-          version: latest
+          version: 8.6.10
+          run_install: false
 
-      - name: Build
+      - name: Get pnpm store directory
+        id: pnpm-cache
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
+
+      - uses: actions/cache@v3
+        name: Setup pnpm cache
+        with:
+          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - name: Start Lint Code
         run: |
           pnpm install --no-frozen-lockfile
           pnpm lint

.gitignore

@@ -5,6 +5,7 @@ dist-ssr
 *.local
 .eslintcache
 report.html
+vite.config.*.timestamp*
 
 yarn.lock
 npm-debug.log*

.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}": ["prettier --write--parser json"],
-  "package.json": ["prettier --write"],
-  "*.vue": ["eslint --fix", "prettier --write", "stylelint --fix"],
-  "*.{vue,css,scss,postcss,less}": ["stylelint --fix", "prettier --write"],
-  "*.md": ["prettier --write"]
-};

.husky/pre-commit

@@ -4,7 +4,7 @@
 
 [ -n "$CI" ] && exit 0
 
-# Format and submit code according to lintstagedrc.js configuration
-npm run lint:lint-staged
+PATH="/usr/local/bin:$PATH"
 
-npm run lint:pretty
+# Perform lint check on files in the staging area through .lintstagedrc configuration
+pnpm exec lint-staged

.lintstagedrc

@@ -0,0 +1,16 @@
+{
+  "*.{js,jsx,ts,tsx}": [
+    "prettier --cache --ignore-unknown  --write",
+    "eslint --cache --fix"
+  ],
+  "{!(package)*.json,*.code-snippets,.!({browserslist,nvm})*rc}": [
+    "prettier --cache --write--parser json"
+  ],
+  "package.json": ["prettier --cache --write"],
+  "*.vue": ["prettier --write", "eslint --cache --fix", "stylelint --fix"],
+  "*.{css,scss,html}": [
+    "prettier --cache --ignore-unknown --write",
+    "stylelint --fix"
+  ],
+  "*.md": ["prettier --cache --ignore-unknown --write"]
+}

.nvmrc

@@ -0,0 +1 @@
+v20.11.1

.prettierignore

@@ -0,0 +1 @@
+src/views/system/menu/README.md

.prettierrc.js

@@ -1,4 +1,7 @@
-module.exports = {
+// @ts-check
+
+/** @type {import("prettier").Config} */
+export default {
   bracketSpacing: true,
   singleQuote: false,
   arrowParens: "avoid",

.vscode/extensions.json

@@ -3,6 +3,7 @@
     "christian-kohler.path-intellisense",
     "vscode-icons-team.vscode-icons",
     "davidanson.vscode-markdownlint",
+    "ms-azuretools.vscode-docker",
     "stylelint.vscode-stylelint",
     "bradlc.vscode-tailwindcss",
     "dbaeumer.vscode-eslint",

.vscode/settings.json

@@ -25,7 +25,7 @@
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   },
   "i18n-ally.localesPaths": "locales",
   "i18n-ally.keystyle": "nested",

.vscode/vue3.0.code-snippets

@@ -1,19 +1,19 @@
 {
   "Vue3.0快速生成模板": {
+    "scope": "vue",
     "prefix": "Vue3.0",
     "body": [
       "<template>",
-      "\t<div>\n",
-      "\t</div>",
+      "\t<div>test</div>",
       "</template>\n",
       "<script lang='ts'>",
       "export default {",
-      "\tsetup(){",
-      "\t\treturn{\n\n\t\t}",
-      "\t},",
+      "\tsetup() {",
+      "\t\treturn {}",
+      "\t}",
       "}",
       "</script>\n",
-      "<style scoped>\n",
+      "<style lang='scss' scoped>\n",
       "</style>",
       "$2"
     ],

.vscode/vue3.2.code-snippets

@@ -1,14 +1,14 @@
 {
   "Vue3.2+快速生成模板": {
+    "scope": "vue",
     "prefix": "Vue3.2+",
     "body": [
       "<script setup lang='ts'>",
       "</script>\n",
       "<template>",
-      "\t<div>\n",
-      "\t</div>",
+      "\t<div>test</div>",
       "</template>\n",
-      "<style scoped>\n",
+      "<style lang='scss' scoped>\n",
       "</style>",
       "$2"
     ],

.vscode/vue3.3.code-snippets

@@ -0,0 +1,20 @@
+{
+  "Vue3.3+defineOptions快速生成模板": {
+    "scope": "vue",
+    "prefix": "Vue3.3+",
+    "body": [
+      "<script setup lang='ts'>",
+      "defineOptions({",
+      "\tname: ''",
+      "})",
+      "</script>\n",
+      "<template>",
+      "\t<div>test</div>",
+      "</template>\n",
+      "<style lang='scss' scoped>\n",
+      "</style>",
+      "$2"
+    ],
+    "description": "Vue3.3+defineOptions快速生成模板"
+  }
+}

CHANGELOG.en_US.md

@@ -1,3 +1,187 @@
+# 5.0.0 (2024-02-26)
+
+Totally `ESM` version
+
+### ✔️refactor
+
+- Upgrade `vite` to `v5` version, specify `node` version `>18.18.0`, `pnpm` version `>=8.6.10`
+- Use [vite-plugin-fake-server](https://www.npmjs.com/package/vite-plugin-fake-server) to replace [vite-plugin-mock](https://www.npmjs.com/package/vite-plugin-mock), use [@faker-js/faker](https://www.npmjs.com/package/@faker-js/faker) to replace [mockjs](https://www.npmjs.com/package/mockjs)
+- Rename `tailwind.config.js` to `tailwind.config.ts` and update its file to `esm` syntax
+- Updated `.prettierrc.js` file to `esm` syntax
+- Updated `postcss.config.js` file to `esm` syntax
+- Updated `commitlint.config.js` file to `esm` syntax
+- Use `eslint.config.js` to replace `.eslintrc.js` and follow `esm` syntax
+- Upgrade `stylelint` to `16` version and follow `esm` syntax
+- All `search` search icons are uniformly replaced with `@iconify-icons/ri/search-line` which is more commonly used and put into the global offline icon
+- Removed the filter effect of `iframe` in dark mode
+- Bring a more beautiful and refined homepage
+- Cleaner and neater pop-up panel on the right side of project configuration
+- Restructure the About page to make it more compact and key information more prominent
+
+### 🎫Feat
+
+- Add system management-menu management
+- Improve system management-user management
+- Embedded `iframe` pages support setting `keepAlive` to maintain page status
+- Optimized navigation, the pop-up menu is adaptive and scrollable beyond the content area
+- Added file upload example
+- Added overall style adaptive operating system light, dark, and automatic theme functions
+- Add footer
+- Supports multi-tab pages to open systems that have already been logged in without logging in again and adds an internal login-free function (users can choose the number of days without login)
+- Terminal command line that brings a high-level feel
+- Add audio visualization function example
+- Added video frame interception - `WebAssembly` version, supports `MP4`, `MOV`, `AVI`, `WebM`, `MKV` and other mainstream formats
+- Added methods to block keyboard `F12`, browser default right-click menu, page element selection, and picture default draggability
+- The secondary package `localforage` supports setting expiration time and provides complete type prompts
+- Add `AnimateCss` selector component `ReAnimateSelector`
+- Added `ReText` component, supports automatic omission and display of `Tooltip` function, supports multi-line omission, high reusability
+- Add an art drawing board function, which can be used to draw some design idea architecture diagrams, for example
+- New component - optional button example
+- Add common button examples
+- Added color picker component example
+- Add date picker component example
+- Added datetime picker example
+- Added time selector example
+- Added statistics component example
+- Add label component example
+- Added accordion panel component example
+- Add progress bar component example
+- Upgrade `Swiper 11`
+- Add [vite-plugin-router-warn](https://www.npmjs.com/package/vite-plugin-router-warn) plug-in to eliminate unnecessary `vue-router` dynamic routing warning`No match found for location with path`
+
+### 🐞 Bug fixes
+
+- Fixed the problem that in `query` routing parameter passing mode, two `router` jumps will be triggered when clicking the tab page to switch operations.
+- Fixed an issue in card tab mode, when passing parameters through the `query` route, the `card-active` attribute still exists after leaving the active tab, resulting in the font color not changing when the mouse `hover`
+- Fixed the error in reading and parsing the same name in the `src/layout/components/appMain.vue` file
+- Fixed the issue where the height of the embedded page `frameView` does not adapt after hiding the tab page.
+- Fixed the problem of invalid routing `meta.transition.name` configuration
+- Fixed the problem that the right-click tab page panel cannot be closed when clicking on the `iframe` page and the right-click tab page panel is blocked when on the `iframe` page
+- Fixed the problem of missing parameters when clicking on breadcrumbs to jump to the page in routing `query` and `params` modes
+
+### 🍏Perf
+
+- Optimize theme color
+- Tabs can be slid left or right according to the sliding force
+- The interface naming rules are unified into `kebab-case` string naming method
+- The `label` of `el-form` is consistent with the global `label` style
+- `VITE_PUBLIC_PATH` defaults to `/`, which is more friendly to `VITE_ROUTER_HISTORY` in `h5` mode
+- Optimize the `transformI18n` function and support unlimited nesting levels for internationalization (of course, the platform still recommends that the fewer nesting levels, the better)
+- When initializing the page, load `pinia` first and then `router`, which is compatible with more usage scenarios.
+- Optimize the judgment logic of request whitelist
+- The navigation style of the left menu has been adjusted to optimize the different display methods on PC and mobile when there is no logo.
+- Upgrade code specification style related libraries to the latest
+- Optimize login page `loading` judgment
+- Optimize the `IconSelect` icon selector component to improve user experience
+- Optimize the segmented controller component and add `v-model` support
+- Optimize the method of obtaining platform `logo`
+- Upgraded `@pureadmin/theme`, bringing more friendly `esm` support
+- Optimize some functions in the `build/info.ts` file to make it friendly and support `esm`
+- Optimize the column setting pop-up box of the `PureTableBar` component, set the maximum height, and scroll beyond it
+- Optimize the functional pop-up component `ReDialog` to retain the closing animation
+- Test the Chinese path and delete the `sass-loader` dependency
+- The packaged code is changed to the browser that natively supports [ES2015](https://caniuse.com/es6) by default
+- Remove the `stylelint` plug-in dependency that will be automatically installed
+- Enhance the way `useRenderIcon` uses local `svg`
+- Optimize the style of the expand and collapse buttons in the lower left corner of the left menu under the bright white theme color scheme
+- Optimize all `description` contents of `el-empty`. Add `el-empty` when the icon selector content is empty
+- The `tooltip` theme after the left menu is collapsed is consistent with the overall menu
+- Update `svgo` command to `svgo -f . -r` (compress all `SVG` files in the current directory)
+- Optimize project construction related functions
+- Enhanced `ReTypeit` component to support slots and all `typeit` configuration items
+- Optimize internationalization-related processing logic and add cache during initialization to avoid unnecessary performance consumption
+
+# 4.5.0 (2023-06-26)
+
+### ✔️ refactor
+
+- Refactor image crop `ReCropper` component, add more useful functions
+
+### 🎫 Feat
+
+- The menu search function supports pinyin search, such as searching for image cropping, input `tp` or `tupian` and other corresponding pinyin
+- Add long press command and usage example, the long press command supports continuous callback of custom duration
+- Add an example of sensitive word filtering function
+- Add an example of Chinese Pinyin function
+
+### 🐞 Bug fixes
+
+- Fixed `V4.4.0` version, the problem that the page does not cache the page for the first time after the `keepAlive` cache is enabled
+- Fixed the issue that the column setting tick option was not correctly initialized according to the `hide` property when the `RePureTableBar` component was initialized
+
+### 🍏 Perf
+
+- Change `VITE_PUBLIC_PATH` to `./` by default to be compatible with more path scenarios,
+- Compatible with the `OSS` scene where `VITE_PUBLIC_PATH` is `url`, need to upgrade `@pureadin/theme` to the latest version
+
+# 4.4.0 (2023-06-14)
+
+### 🎫 Feat
+
+- Route `meta` adds `activePath` attribute, which can activate a menu (mainly used for routes that pass parameters through `query` or `params`, when they are not displayed in the menu after configuring `showLink: false`, they will be There will be no menu highlighting, but you can get highlighting by setting `activePath` to specify the active menu, `activePath` is the `path` of the specified active menu [View details](https://github.com/pure-admin/vue-pure-admin/commit/58cafbc73ffa27253446ee93077e1e382519ce8a#commitcomment-117834411))
+- Example of advanced usage of `pure-admin-table` to add adaptive content area height
+- Add anti-shake, throttling and text copy instructions and standardize the prompts when custom instructions are used incorrectly and add usage examples
+- Add `el-empty` component when the `notice` message prompts the component to have empty data
+- Example code of functional popup window adding subcomponent `prop` as `primitive` type example
+- Add `vscode-docker` plugin
+
+### 🐞 Bug fixes
+
+- Fix internationalization switch to English mode and refresh will return to Chinese mode
+- Fixed the problem that the pop-up mask of the search menu function did not cover the left menu
+
+### 🍏 Perf
+
+- Page switching performance optimization, regardless of the network, the speed of page switching logic is almost `3-4` times faster than before [View optimization details](https://github.com/pure-admin/vue-pure-admin/pull/600#issuecomment-1586094078)
+- Optimized tab page operation-routing parameter transfer mode usage
+- All tables in the system management are changed to adaptive content area height, need to upgrade `@pureadmin/table` to the latest version
+- Use the `useResizeObserver` function of `vueuse` to replace the `v-resize` custom directive, and the performance will be better from the performance after testing
+- For unbound public events, unbind when the page is destroyed
+
+# 4.3.0 (2023-06-04)
+
+### 🎫 Feat
+
+- Add `docker` support
+- Add project version real-time update detection function
+- Improve system management - role management page
+- Waterfall component adds infinite scrolling
+- Add `updateDialog` to the functional bullet box to change the property value of the bullet box itself
+- `wangeditor` rich text add multiple rich text and custom image upload examples
+- Advanced usage of `pure-table` table added keep checked `CheckBox` option example
+- Added `title` slot to `RePureTableBar` component
+
+### 🐞 Bug fixes
+
+- Fixed the problem that the countdown to obtain the verification code will be disabled with a delay of `1s`
+- Fixed the problem that the icon selector did not initialize the preview correctly
+- Fixed dynamic routing redirection causing duplicate content on tabs
+- Fix the problem that the `getTopMenu()` function cannot get `path` and report an error when the page is forced to refresh
+- Fix the problem that the left menu does not display as a whole due to the sudden pull up after the left menu is folded
+- Fixed `RePureTableBar` scrollbar issue in `windows` after turning off column settings
+
+### 🍏 Perf
+
+-Optimized tab page operation-routing parameter transfer mode usage
+
+- Optimize menu search function and style
+- Update `vscode` code snippets
+- Optimize the initialization call timing of `dataThemeChange` theme setting
+
+# 4.2.0 (2023-05-15)
+
+### 🎫 Feat
+
+- Added segment controller component and adapted to dark mode
+- Static routing supports configuration array format
+- Functional bullet box component adds full screen and exit full screen operation buttons
+- New component - Waterfall `demo`
+- Add `Exclusive` type mutual exclusion syntactic sugar
+
+### 🍏 Perf
+
+- Standardize the way of writing routes in `template` template, no longer use `$route` and `$router`, this way of writing `vue-tsc` fails to compile
+
 # 4.1.0 (2023-05-12)
 
 ### 🎫 Feat
@@ -116,7 +300,7 @@
 ### ✔️ refactor
 
 - Completely removed `vxe-table`, after removal, the overall package size of the full version is reduced by `1.82MB`, and the initial startup time is basically the same as the lite version 🐮
-  [Click here to see Why Removed? How to integrate it yourself?](https://pure-admin.github.io/pure-admin-doc/pages/FAQ/#%E5%B9%B3%E5%8F%B0%E5%9C%A8-v3-9-4-%E7%89%88%E6%9C%AC%E5%AE%8C%E5%85%A8%E7%A7%BB%E9%99%A4%E4%BA%86-vxe-table-%E4%B8%BA%E4%BB%80%E4%B9%88%E7%A7%BB%E9%99%A4-%E5%A6%82%E4%BD%95%E8%87%AA%E8%A1%8C%E9%9B%86%E6%88%90)
+  [Click here to see Why Removed? How to integrate it yourself?](https://yiming_chang.gitee.io/pure-admin-doc/pages/FAQ/#%E5%B9%B3%E5%8F%B0%E5%9C%A8-v3-9-4-%E7%89%88%E6%9C%AC%E5%AE%8C%E5%85%A8%E7%A7%BB%E9%99%A4%E4%BA%86-vxe-table-%E4%B8%BA%E4%BB%80%E4%B9%88%E7%A7%BB%E9%99%A4-%E5%A6%82%E4%BD%95%E8%87%AA%E8%A1%8C%E9%9B%86%E6%88%90)
 
 ### 🎫 Feat
 
@@ -231,7 +415,7 @@
 - Add front-end single sign-on, test address https://yiming_chang.gitee.io/vue-pure-admin/#/pure-table/index?username=sso&roles=admin&accessToken=eyJhbGciOiJIUzUxMiJ9.admin
 - Add more examples for [@pureadmin/table](https://github.com/pure-admin/pure-admin-table) and `element-plus` [table](https://element-plus.org /zh-CN/component/table.html) example remains the same
 - Rich watermark function page (supports customizing various colors, shadows, text, additional attributes, setting undeletable watermarks and setting watermarks for specified elements)
-- Optimize the menu, add `MenuArrowIconNoTransition` global configuration, configure it in `public/serverConfig.json`, for the left menu mode, the menu expansion can be set `MenuArrowIconNoTransition: true` to solve
+- Optimize the menu, add `MenuArrowIconNoTransition` global configuration, configure it in `public/platform-config.json`, for the left menu mode, the menu expansion can be set `MenuArrowIconNoTransition: true` to solve
 - Replacement form designer component demo
 
 ### 🐞 Bug fixes
@@ -329,7 +513,7 @@
 
 ### ✔️ refactor
 
-- Replace `unocss` with `tailwindcss`, add `tailwindcss` [documentation](https://pure-admin.github.io/pure-admin-doc/pages/39156f/)
+- Replace `unocss` with `tailwindcss`, add `tailwindcss` [documentation](https://yiming_chang.gitee.io/pure-admin-doc/pages/tailwindcss/)
 
 ### 🐞 Bug fixes
 
@@ -374,7 +558,7 @@
 - Add full routing configuration table type declaration
 - Add virtual listing page demo
 - Add `PDF` preview page demo
-- Added export `execl` page demo
+- Added export `excel` page demo
 - Added blank page demo without `Layout`
 
 ### ✔️ refactor

CHANGELOG.md

@@ -1,3 +1,187 @@
+# 5.0.0 (2024-02-26)
+
+Totally `ESM` version
+
+### ✔️refactor
+
+- Upgrade `vite` to `v5` version, specify `node` version `>18.18.0`, `pnpm` version `>=8.6.10`
+- Use [vite-plugin-fake-server](https://www.npmjs.com/package/vite-plugin-fake-server) to replace [vite-plugin-mock](https://www.npmjs.com/package/vite-plugin-mock), use [@faker-js/faker](https://www.npmjs.com/package/@faker-js/faker) to replace [mockjs](https://www.npmjs.com/package/mockjs)
+- Rename `tailwind.config.js` to `tailwind.config.ts` and update its file to `esm` syntax
+- Updated `.prettierrc.js` file to `esm` syntax
+- Updated `postcss.config.js` file to `esm` syntax
+- Updated `commitlint.config.js` file to `esm` syntax
+- Use `eslint.config.js` to replace `.eslintrc.js` and follow `esm` syntax
+- Upgrade `stylelint` to `16` version and follow `esm` syntax
+- All `search` search icons are uniformly replaced with `@iconify-icons/ri/search-line` which is more commonly used and put into the global offline icon
+- Removed the filter effect of `iframe` in dark mode
+- Bring a more beautiful and refined homepage
+- Cleaner and neater pop-up panel on the right side of project configuration
+- Restructure the About page to make it more compact and key information more prominent
+
+### 🎫Feat
+
+- Add system management-menu management
+- Improve system management-user management
+- Embedded `iframe` pages support setting `keepAlive` to maintain page status
+- Optimized navigation, the pop-up menu is adaptive and scrollable beyond the content area
+- Added file upload example
+- Added overall style adaptive operating system light, dark, and automatic theme functions
+- Add footer
+- Supports multi-tab pages to open systems that have already been logged in without logging in again and adds an internal login-free function (users can choose the number of days without login)
+- Terminal command line that brings a high-level feel
+- Add audio visualization function example
+- Added video frame interception - `WebAssembly` version, supports `MP4`, `MOV`, `AVI`, `WebM`, `MKV` and other mainstream formats
+- Added methods to block keyboard `F12`, browser default right-click menu, page element selection, and picture default draggability
+- The secondary package `localforage` supports setting expiration time and provides complete type prompts
+- Add `AnimateCss` selector component `ReAnimateSelector`
+- Added `ReText` component, supports automatic omission and display of `Tooltip` function, supports multi-line omission, high reusability
+- Add an art drawing board function, which can be used to draw some design idea architecture diagrams, for example
+- New component - optional button example
+- Add common button examples
+- Added color picker component example
+- Add date picker component example
+- Added datetime picker example
+- Added time selector example
+- Added statistics component example
+- Add label component example
+- Added accordion panel component example
+- Add progress bar component example
+- Upgrade `Swiper 11`
+- Add [vite-plugin-router-warn](https://www.npmjs.com/package/vite-plugin-router-warn) plug-in to eliminate unnecessary `vue-router` dynamic routing warning`No match found for location with path`
+
+### 🐞 Bug fixes
+
+- Fixed the problem that in `query` routing parameter passing mode, two `router` jumps will be triggered when clicking the tab page to switch operations.
+- Fixed an issue in card tab mode, when passing parameters through the `query` route, the `card-active` attribute still exists after leaving the active tab, resulting in the font color not changing when the mouse `hover`
+- Fixed the error in reading and parsing the same name in the `src/layout/components/appMain.vue` file
+- Fixed the issue where the height of the embedded page `frameView` does not adapt after hiding the tab page.
+- Fixed the problem of invalid routing `meta.transition.name` configuration
+- Fixed the problem that the right-click tab page panel cannot be closed when clicking on the `iframe` page and the right-click tab page panel is blocked when on the `iframe` page
+- Fixed the problem of missing parameters when clicking on breadcrumbs to jump to the page in routing `query` and `params` modes
+
+### 🍏Perf
+
+- Optimize theme color
+- Tabs can be slid left or right according to the sliding force
+- The interface naming rules are unified into `kebab-case` string naming method
+- The `label` of `el-form` is consistent with the global `label` style
+- `VITE_PUBLIC_PATH` defaults to `/`, which is more friendly to `VITE_ROUTER_HISTORY` in `h5` mode
+- Optimize the `transformI18n` function and support unlimited nesting levels for internationalization (of course, the platform still recommends that the fewer nesting levels, the better)
+- When initializing the page, load `pinia` first and then `router`, which is compatible with more usage scenarios.
+- Optimize the judgment logic of request whitelist
+- The navigation style of the left menu has been adjusted to optimize the different display methods on PC and mobile when there is no logo.
+- Upgrade code specification style related libraries to the latest
+- Optimize login page `loading` judgment
+- Optimize the `IconSelect` icon selector component to improve user experience
+- Optimize the segmented controller component and add `v-model` support
+- Optimize the method of obtaining platform `logo`
+- Upgraded `@pureadmin/theme`, bringing more friendly `esm` support
+- Optimize some functions in the `build/info.ts` file to make it friendly and support `esm`
+- Optimize the column setting pop-up box of the `PureTableBar` component, set the maximum height, and scroll beyond it
+- Optimize the functional pop-up component `ReDialog` to retain the closing animation
+- Test the Chinese path and delete the `sass-loader` dependency
+- The packaged code is changed to the browser that natively supports [ES2015](https://caniuse.com/es6) by default
+- Remove the `stylelint` plug-in dependency that will be automatically installed
+- Enhance the way `useRenderIcon` uses local `svg`
+- Optimize the style of the expand and collapse buttons in the lower left corner of the left menu under the bright white theme color scheme
+- Optimize all `description` contents of `el-empty`. Add `el-empty` when the icon selector content is empty
+- The `tooltip` theme after the left menu is collapsed is consistent with the overall menu
+- Update `svgo` command to `svgo -f . -r` (compress all `SVG` files in the current directory)
+- Optimize project construction related functions
+- Enhanced `ReTypeit` component to support slots and all `typeit` configuration items
+- Optimize internationalization-related processing logic and add cache during initialization to avoid unnecessary performance consumption
+
+# 4.5.0 (2023-06-26)
+
+### ✔️ refactor
+
+- Refactor image crop `ReCropper` component, add more useful functions
+
+### 🎫 Feat
+
+- The menu search function supports pinyin search, such as searching for image cropping, input `tp` or `tupian` and other corresponding pinyin
+- Add long press command and usage example, the long press command supports continuous callback of custom duration
+- Add an example of sensitive word filtering function
+- Add an example of Chinese Pinyin function
+
+### 🐞 Bug fixes
+
+- Fixed `V4.4.0` version, the problem that the page does not cache the page for the first time after the `keepAlive` cache is enabled
+- Fixed the issue that the column setting tick option was not correctly initialized according to the `hide` property when the `RePureTableBar` component was initialized
+
+### 🍏 Perf
+
+- Change `VITE_PUBLIC_PATH` to `./` by default to be compatible with more path scenarios,
+- Compatible with the `OSS` scene where `VITE_PUBLIC_PATH` is `url`, need to upgrade `@pureadin/theme` to the latest version
+
+# 4.4.0 (2023-06-14)
+
+### 🎫 Feat
+
+- Route `meta` adds `activePath` attribute, which can activate a menu (mainly used for routes that pass parameters through `query` or `params`, when they are not displayed in the menu after configuring `showLink: false`, they will be There will be no menu highlighting, but you can get highlighting by setting `activePath` to specify the active menu, `activePath` is the `path` of the specified active menu [View details](https://github.com/pure-admin/vue-pure-admin/commit/58cafbc73ffa27253446ee93077e1e382519ce8a#commitcomment-117834411))
+- Example of advanced usage of `pure-admin-table` to add adaptive content area height
+- Add anti-shake, throttling and text copy instructions and standardize the prompts when custom instructions are used incorrectly and add usage examples
+- Add `el-empty` component when the `notice` message prompts the component to have empty data
+- Example code of functional popup window adding subcomponent `prop` as `primitive` type example
+- Add `vscode-docker` plugin
+
+### 🐞 Bug fixes
+
+- Fix internationalization switch to English mode and refresh will return to Chinese mode
+- Fixed the problem that the pop-up mask of the search menu function did not cover the left menu
+
+### 🍏 Perf
+
+- Page switching performance optimization, regardless of the network, the speed of page switching logic is almost `3-4` times faster than before [View optimization details](https://github.com/pure-admin/vue-pure-admin/pull/600#issuecomment-1586094078)
+- Optimized tab page operation-routing parameter transfer mode usage
+- All tables in the system management are changed to adaptive content area height, need to upgrade `@pureadmin/table` to the latest version
+- Use the `useResizeObserver` function of `vueuse` to replace the `v-resize` custom directive, and the performance will be better from the performance after testing
+- For unbound public events, unbind when the page is destroyed
+
+# 4.3.0 (2023-06-04)
+
+### 🎫 Feat
+
+- Add `docker` support
+- Add project version real-time update detection function
+- Improve system management - role management page
+- Waterfall component adds infinite scrolling
+- Add `updateDialog` to the functional bullet box to change the property value of the bullet box itself
+- `wangeditor` rich text add multiple rich text and custom image upload examples
+- Advanced usage of `pure-table` table added keep checked `CheckBox` option example
+- Added `title` slot to `RePureTableBar` component
+
+### 🐞 Bug fixes
+
+- Fixed the problem that the countdown to obtain the verification code will be disabled with a delay of `1s`
+- Fixed the problem that the icon selector did not initialize the preview correctly
+- Fixed dynamic routing redirection causing duplicate content on tabs
+- Fix the problem that the `getTopMenu()` function cannot get `path` and report an error when the page is forced to refresh
+- Fix the problem that the left menu does not display as a whole due to the sudden pull up after the left menu is folded
+- Fixed `RePureTableBar` scrollbar issue in `windows` after turning off column settings
+
+### 🍏 Perf
+
+-Optimized tab page operation-routing parameter transfer mode usage
+
+- Optimize menu search function and style
+- Update `vscode` code snippets
+- Optimize the initialization call timing of `dataThemeChange` theme setting
+
+# 4.2.0 (2023-05-15)
+
+### 🎫 Feat
+
+- Added segment controller component and adapted to dark mode
+- Static routing supports configuration array format
+- Functional bullet box component adds full screen and exit full screen operation buttons
+- New component - Waterfall `demo`
+- Add `Exclusive` type mutual exclusion syntactic sugar
+
+### 🍏 Perf
+
+- Standardize the way of writing routes in `template` template, no longer use `$route` and `$router`, this way of writing `vue-tsc` fails to compile
+
 # 4.1.0 (2023-05-12)
 
 ### 🎫 Feat
@@ -116,7 +300,7 @@
 ### ✔️ refactor
 
 - Completely removed `vxe-table`, after removal, the overall package size of the full version is reduced by `1.82MB`, and the initial startup time is basically the same as the lite version 🐮
-  [Click here to see Why Removed? How to integrate it yourself?](https://pure-admin.github.io/pure-admin-doc/pages/FAQ/#%E5%B9%B3%E5%8F%B0%E5%9C%A8-v3-9-4-%E7%89%88%E6%9C%AC%E5%AE%8C%E5%85%A8%E7%A7%BB%E9%99%A4%E4%BA%86-vxe-table-%E4%B8%BA%E4%BB%80%E4%B9%88%E7%A7%BB%E9%99%A4-%E5%A6%82%E4%BD%95%E8%87%AA%E8%A1%8C%E9%9B%86%E6%88%90)
+  [Click here to see Why Removed? How to integrate it yourself?](https://yiming_chang.gitee.io/pure-admin-doc/pages/FAQ/#%E5%B9%B3%E5%8F%B0%E5%9C%A8-v3-9-4-%E7%89%88%E6%9C%AC%E5%AE%8C%E5%85%A8%E7%A7%BB%E9%99%A4%E4%BA%86-vxe-table-%E4%B8%BA%E4%BB%80%E4%B9%88%E7%A7%BB%E9%99%A4-%E5%A6%82%E4%BD%95%E8%87%AA%E8%A1%8C%E9%9B%86%E6%88%90)
 
 ### 🎫 Feat
 
@@ -231,7 +415,7 @@
 - Add front-end single sign-on, test address https://yiming_chang.gitee.io/vue-pure-admin/#/pure-table/index?username=sso&roles=admin&accessToken=eyJhbGciOiJIUzUxMiJ9.admin
 - Add more examples for [@pureadmin/table](https://github.com/pure-admin/pure-admin-table) and `element-plus` [table](https://element-plus.org /zh-CN/component/table.html) example remains the same
 - Rich watermark function page (supports customizing various colors, shadows, text, additional attributes, setting undeletable watermarks and setting watermarks for specified elements)
-- Optimize the menu, add `MenuArrowIconNoTransition` global configuration, configure it in `public/serverConfig.json`, for the left menu mode, the menu expansion can be set `MenuArrowIconNoTransition: true` to solve
+- Optimize the menu, add `MenuArrowIconNoTransition` global configuration, configure it in `public/platform-config.json`, for the left menu mode, the menu expansion can be set `MenuArrowIconNoTransition: true` to solve
 - Replacement form designer component demo
 
 ### 🐞 Bug fixes
@@ -329,7 +513,7 @@
 
 ### ✔️ refactor
 
-- Replace `unocss` with `tailwindcss`, add `tailwindcss` [documentation](https://pure-admin.github.io/pure-admin-doc/pages/39156f/)
+- Replace `unocss` with `tailwindcss`, add `tailwindcss` [documentation](https://yiming_chang.gitee.io/pure-admin-doc/pages/tailwindcss/)
 
 ### 🐞 Bug fixes
 
@@ -374,7 +558,7 @@
 - Add full routing configuration table type declaration
 - Add virtual listing page demo
 - Add `PDF` preview page demo
-- Added export `execl` page demo
+- Added export `excel` page demo
 - Added blank page demo without `Layout`
 
 ### ✔️ refactor

CHANGELOG.zh_CN.md

@@ -1,3 +1,186 @@
+# 5.0.0 (2024-02-26)
+
+全面`ESM`版本
+
+### ✔️ refactor
+
+- 升级`vite`至`v5`版本，规定`node`版本`>18.18.0`，`pnpm`版本`>=8.6.10`
+- 使用 [vite-plugin-fake-server](https://www.npmjs.com/package/vite-plugin-fake-server) 替换 [vite-plugin-mock](https://www.npmjs.com/package/vite-plugin-mock)，使用 [@faker-js/faker](https://www.npmjs.com/package/@faker-js/faker) 替换 [mockjs](https://www.npmjs.com/package/mockjs)
+- 重命名`tailwind.config.js`为`tailwind.config.ts`并更新其文件为`esm`语法
+- 更新`.prettierrc.js`文件为`esm`语法
+- 更新`postcss.config.js`文件为`esm`语法
+- 更新`commitlint.config.js`文件为`esm`语法
+- 使用`eslint.config.js`替换`.eslintrc.js`并遵循`esm`语法
+- 升级`stylelint`至`16`版本并遵循`esm`语法
+- 所有`search`搜索图标统一替换为`@iconify-icons/ri/search-line`它比较常用将其放入全局离线图标中
+- 移除`iframe`在暗模式下的滤镜效果
+- 带来更美观精致的首页
+- 更干净整洁的项目配置右侧弹出面板
+- 重构关于页面，整体更紧致，关键信息更突出
+
+### 🎫 Feat
+
+- 添加系统管理-菜单管理
+- 完善系统管理-用户管理
+- 内嵌`iframe`页支持设置`keepAlive`，保持页面状态
+- 优化导航，弹出的菜单超出内容区自适应且可滚动
+- 添加文件上传示例
+- 添加整体风格自适应操作系统浅色、深色、自动主题功能
+- 添加页脚
+- 支持多标签页打开已经登录的系统后无需再登录并添加内免登录功能（用户可选择免登录的天数）
+- 带来高级感的终端命令行
+- 添加音频可视化功能示例
+- 添加视频帧截取-`WebAssembly`版，支持`MP4`、`MOV`、`AVI`、`WebM`、`MKV`等主流格式
+- 添加阻止键盘`F12`、浏览器默认右键菜单、页面元素选中、图片默认可拖动方法
+- 二次封装`localforage`支持设置过期时间，提供完整的类型提示
+- 添加`AnimateCss`选择器组件`ReAnimateSelector`
+- 添加`ReText`组件，支持自动省略显示`Tooltip`功能, 支持多行省略, 高可复用性
+- 添加艺术画板功能，比如可以用来绘制一些设计思想架构图
+- 新增组件-可选按钮示例
+- 添加常用按钮示例
+- 添加颜色选择器组件示例
+- 添加日期选择器组件示例
+- 添加日期时间选择器示例
+- 添加时间选择(器)示例
+- 添加统计组件示例
+- 添加标签组件示例
+- 添加折叠面板组件示例
+- 添加进度条组件示例
+- 升级`Swiper 11`
+- 添加 [vite-plugin-router-warn](https://www.npmjs.com/package/vite-plugin-router-warn) 插件，根治非必要的`vue-router`动态路由警告`No match found for location with path`
+
+### 🐞 Bug fixes
+
+- 修复`query`路由传参模式下，点击标签页进行切换操作时会触发两次`router`跳转问题
+- 修复卡片标签页模式下，通过`query`路由传参时，离开激活的标签后仍存在`card-active`属性，导致鼠标`hover`时字体颜色未改变
+- 修复`src/layout/components/appMain.vue`文件中同名词读取解析错误
+- 修复内嵌页面`frameView`在隐藏标签页后高度没有自适应
+- 修复路由`meta.transition.name`配置无效的问题
+- 修复点击`iframe`页面无法关闭右键标签页面板以及在`iframe`页面时右键标签页面板被遮挡的问题
+- 修复在路由`query`、`params`模式下点击面包屑跳转页面少参问题
+
+### 🍏 Perf
+
+- 优化主题色
+- 标签页可按滑动力度进行左右滑动
+- 接口命名规则统一为`kebab-case`串式命名法
+- `el-form`的`label`和全局的`label`样式保持一致
+- `VITE_PUBLIC_PATH`默认还原为 `/` 对`VITE_ROUTER_HISTORY`为`h5`模式更友好
+- 优化`transformI18n`函数，国际化支持无限嵌套级别（当然平台还是推荐嵌套层级越少越好）
+- 页面初始化时先加载`pinia`再加载`router`，兼容更多使用场景
+- 优化请求白名单的判断逻辑
+- 左侧菜单导航样式调整，优化有无`logo`时`pc`端和移动端不同的展示方式
+- 升级代码规范风格相关库至最新
+- 优化登录页`loading`判断
+- 优化`IconSelect`图标选择器组件，提升用户体验
+- 优化分段控制器组件，添加`v-model`支持
+- 优化平台`logo`获取方式
+- 升级`@pureadmin/theme`，带来了更友好的`esm`支持
+- 优化`build/info.ts`文件中的一些函数，使其友好支持`esm`
+- 优化`PureTableBar`组件的列设置弹出框，设置最大高度，超出可滚动
+- 优化函数式弹框组件`ReDialog`保留关闭动画
+- 对中文路径做测试，删除`sass-loader`依赖
+- 打包后的代码改为默认原生支持 [ES2015](https://caniuse.com/es6) 的浏览器
+- 删除会自动安装的`stylelint`插件依赖
+- 增强`useRenderIcon`使用本地`svg`的方式
+- 优化左侧菜单最左下角的展开、折叠按钮在亮白主题配色下的样式
+- 优化所有`el-empty`的`description`内容。图标选择器内容为空时加上`el-empty`
+- 左侧菜单折叠后的`tooltip`主题与整体菜单保持统一
+- 更新`svgo`命令为`svgo -f . -r`（压缩当前目录下的所有`SVG`文件）
+- 优化项目构建相关函数
+- 增强`ReTypeit`组件，支持插槽以及所有`typeit`配置项
+- 优化国际化相关处理逻辑，初始化时添加缓存以避免不必要的性能消耗
+
+# 4.5.0 (2023-06-26)
+
+### ✔️ refactor
+
+- 重构图片裁剪 `ReCropper` 组件，添加更多实用功能
+
+### 🎫 Feat
+
+- 菜单搜索功能支持拼音搜索，比如搜图片裁剪，输入 `tp` 或 `tupian` 等对应拼音即可
+- 添加长按指令及使用示例，该长按指令支持自定义时长的持续回调
+- 添加敏感词过滤功能示例
+- 添加汉语拼音功能示例
+
+### 🐞 Bug fixes
+
+- 修复 `V4.4.0` 版本，页面开启 `keepAlive` 缓存后第一次加载并未缓存页面的问题
+- 修复 `RePureTableBar` 组件初始化时列设置勾选项未根据 `hide` 属性正确初始化
+
+### 🍏 Perf
+
+- 将 `VITE_PUBLIC_PATH` 默认改为 `./` 兼容更多路径场景，
+- 兼容 `VITE_PUBLIC_PATH` 为 `url` 的 `OSS` 场景，需将 `@pureadmin/theme` 升级至最新版
+
+# 4.4.0 (2023-06-14)
+
+### 🎫 Feat
+
+- 路由 `meta` 添加 `activePath` 属性，可将某个菜单激活（主要用于通过 `query` 或 `params` 传参的路由，当它们通过配置 `showLink: false` 后不在菜单中显示，就不会有任何菜单高亮，而通过设置 `activePath` 指定激活菜单即可获得高亮，`activePath` 为指定激活菜单的 `path` [查看详情](https://github.com/pure-admin/vue-pure-admin/commit/58cafbc73ffa27253446ee93077e1e382519ce8a#commitcomment-117834411)）
+- `pure-admin-table` 高级用法添加自适应内容区高度示例
+- 添加防抖、节流和文本复制指令并规范自定义指令用法错误时的提示以及添加使用示例
+- `notice` 消息提示组件空数据时添加 `el-empty` 组件
+- 函数式弹窗示例代码添加子组件 `prop` 为 `primitive` 类型的示例
+- 添加 `vscode-docker` 插件
+
+### 🐞 Bug fixes
+
+- 修复国际化切换到英文模式刷新会回到中文模式
+- 修复搜索菜单功能的弹框遮罩未覆盖左侧菜单的问题
+
+### 🍏 Perf
+
+- 页面切换性能优化，不考虑网络的情况下，页面切换逻辑的速度差不多比之前快 `3-4` 倍 [查看优化详情](https://github.com/pure-admin/vue-pure-admin/pull/600#issuecomment-1586094078)
+- 优化标签页操作-路由传参模式用法
+- 系统管理中表格均改为自适应内容区高度，需将 `@pureadmin/table` 升级到最新版
+- 使用 `vueuse` 的 `useResizeObserver` 函数替换 `v-resize` 自定义指令，从测试后的表现来看性能会更好
+- 对未解绑的公共事件，在页面销毁时解绑
+
+# 4.3.0 (2023-06-04)
+
+### 🎫 Feat
+
+- 添加 `docker` 支持
+- 添加项目版本实时更新检测功能
+- 完善系统管理-角色管理页面
+- 瀑布流组件添加无限滚动
+- 函数式弹框添加 `updateDialog` 更改弹框自身属性值方法
+- `wangeditor` 富文本添加多个富文本和自定义图片上传示例
+- `pure-table` 表格高级用法添加保留已选中的 `CheckBox` 选项示例
+- `RePureTableBar` 组件添加 `title` 插槽
+
+### 🐞 Bug fixes
+
+- 修复获取验证码倒计时会有 `1s` 延时禁用的问题
+- 修复图标选择器未正确初始化预览问题
+- 修复动态路由重定向造成标签页出现重复内容
+- 修复强制刷新页面 `getTopMenu()` 函数获取不到 `path` 报错的问题
+- 修复左侧菜单折叠后突然拉升造成左侧菜单整体不显示的问题
+- 修复 `RePureTableBar` 关闭列设置后在 `windows` 出现滚动条的问题
+
+### 🍏 Perf
+
+- 优化标签页操作-路由传参模式用法
+- 优化菜单搜索功能和样式
+- 更新 `vscode` 代码片段
+- 优化 `dataThemeChange` 主题设置的初始化调用时机
+
+# 4.2.0 (2023-05-15)
+
+### 🎫 Feat
+
+- 新增分段控制器组件并适配暗黑模式
+- 静态路由支持配置数组格式
+- 函数式弹框组件添加全屏、退出全屏操作按钮
+- 新增组件-瀑布流 `demo`
+- 添加 `Exclusive` 类型互斥语法糖
+
+### 🍏 Perf
+
+- 规范 `template` 模版中路由写法，不再使用 `$route` 和 `$router`，此写法 `vue-tsc` 编译不通过
+
 # 4.1.0 (2023-05-12)
 
 ### 🎫 Feat
@@ -202,7 +385,7 @@
 - 添加 `@pureadmin/table` 行、列拖拽示例
 - 添加 `@pureadmin/table` 右键菜单示例
 - 添加 `@pureadmin/table` 导出 `Excel` 示例
-- 添加 `@pureadmin/table` 编辑单元格示例
+- 添加 `@pureadmin/table` 修改单元格示例
 - 添加 `@pureadmin/table` 水印示例
 - 添加 `@pureadmin/table` 打印示例
 - 添加 `@pureadmin/table` 内嵌 `echarts` 图表示例
@@ -231,7 +414,7 @@
 - 添加前端单点登录，测试地址 https://yiming_chang.gitee.io/vue-pure-admin/#/pure-table/index?username=sso&roles=admin&accessToken=eyJhbGciOiJIUzUxMiJ9.admin
 - 为 [@pureadmin/table](https://github.com/pure-admin/pure-admin-table) 添加更多的示例和 `element-plus` 的 [table](https://element-plus.org/zh-CN/component/table.html) 示例保持一致
 - 丰富水印功能页面（支持自定义各种颜色、阴影、文字、额外属性、设置不可删除水印以及给指定元素设置水印）
-- 优化菜单，添加 `MenuArrowIconNoTransition` 全局配置，在 `public/serverConfig.json` 中配置即可，对于出现左侧菜单模式，菜单展开卡顿的可设置 `MenuArrowIconNoTransition: true` 即可解决
+- 优化菜单，添加 `MenuArrowIconNoTransition` 全局配置，在 `public/platform-config.json` 中配置即可，对于出现左侧菜单模式，菜单展开卡顿的可设置 `MenuArrowIconNoTransition: true` 即可解决
 - 更换表单设计器组件演示
 
 ### 🐞 Bug fixes
@@ -374,7 +557,7 @@
 - 添加完整路由配置表类型声明
 - 添加虚拟列表页面 demo
 - 添加 `PDF` 预览页面 demo
-- 添加导出 `execl` 页面 demo
+- 添加导出 `excel` 页面 demo
 - 添加无 `Layout` 的空白页面 demo
 
 ### ✔️ refactor

Dockerfile

@@ -0,0 +1,20 @@
+FROM node:18-alpine as build-stage
+
+WORKDIR /app
+RUN corepack enable
+RUN corepack prepare pnpm@8.6.10 --activate
+
+RUN npm config set registry https://registry.npmmirror.com
+
+COPY .npmrc package.json pnpm-lock.yaml ./
+RUN pnpm install --frozen-lockfile
+
+COPY . .
+RUN pnpm build
+
+FROM nginx:stable-alpine as production-stage
+
+COPY --from=build-stage /app/dist /usr/share/nginx/html
+EXPOSE 80
+
+CMD ["nginx", "-g", "daemon off;"]

README.en-US.md

@@ -8,51 +8,57 @@
 
 ## Introduction
 
-`vue-pure-admin` is an open source free and out-of-the-box middle and background management system template. Developed using the latest mainstream technologies such as `Vue3`, `Vite`, `Element-Plus`, `TypeScript`, `Pinia`, `Tailwindcss`
+`vue-pure-admin` is an open source, free and out-of-the-box middle and backend management system template. Completely adopts `ECMAScript` module (`ESM`) specifications to write and organize code, using the latest `Vue3`, `Vite`, `Element-Plus`, `TypeScript`, `Pinia`, `Tailwindcss` and other mainstream technologies develop
 
 ## Thin version (offering non-internationalized and internationalized versions)
 
 The simplified version is based on the shelf extracted from [vue-pure-admin](https://github.com/pure-admin/vue-pure-admin), which contains main functions and is more suitable for actual project development. The packaged size is introduced globally [element-plus](https://element-plus.org) is still below `2.3MB`, and the full version of the code will be permanently synchronized. After enabling `brotli` compression and `cdn` to replace the local library mode, the package size is less than `350kb`
 
-- [Click me to view the non-internationalized version](https://github.com/pure-admin/pure-admin-thin)
-- [Click me to view Internationalization version](https://github.com/pure-admin/pure-admin-thin/tree/i18n)
+[Click to view the non-internationalized version](https://github.com/pure-admin/pure-admin-thin)  
+[Click to view Internationalization version](https://github.com/pure-admin/pure-admin-thin/tree/i18n)
 
 ## Supporting Video
 
-- [Click Watch Tutorial](https://www.bilibili.com/video/BV1kg411v7QT)
-- [Click Watch UI Design](https://www.bilibili.com/video/BV17g411T7rq)
+[Click Watch Tutorial](https://www.bilibili.com/video/BV1kg411v7QT)  
+[Click Watch UI Design](https://www.bilibili.com/video/BV17g411T7rq)
 
-## Docs (support `PWA` fast, offline access)
+## Docs
 
-- [Click me to view the domestic documentation site](https://yiming_chang.gitee.io/pure-admin-doc)
-- [Click me to view foreign document site](https://pure-admin.github.io/pure-admin-doc)
+[View vue-pure-admin documentation](https://yiming_chang.gitee.io/pure-admin-doc)  
+[View @pureadmin/utils documentation](https://pure-admin-utils.netlify.app)
 
 ## Tauri
 
-- [Click Watch Tauri](https://github.com/pure-admin/tauri-pure-admin)
+[Click Watch Tauri](https://github.com/pure-admin/tauri-pure-admin)
 
 ## Electron
 
-- [Click Watch Electron](https://github.com/pure-admin/electron-pure-admin)
+[Click Watch Electron](https://github.com/pure-admin/electron-pure-admin)
 
 ## Preview
 
-- [Click me to view the domestic preview station](https://yiming_chang.gitee.io/vue-pure-admin)
-- [Click me to view foreign preview site](https://pure-admin.github.io/vue-pure-admin)
+[preview station](https://yiming_chang.gitee.io/vue-pure-admin)
+
+`PC`
 
-- PC
 <p align="center">
-  <img alt="PureAdmin Logo" width="100%" src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d45c15ccbe674fe291a4faa528d11eda~tplv-k3u1fbpfcp-zoom-in-crop-mark:3024:0:0:0.awebp?">
+  <img alt="PureAdmin" src="https://xiaoxian521.github.io/hyperlink/img/vue-pure-admin/1.jpg">
+  <br />
+  <img alt="PureAdmin" src="https://xiaoxian521.github.io/hyperlink/img/vue-pure-admin/2.jpg">
 </p>
 
-- DarkMode
+`DarkMode`
+
 <p align="center">
-  <img alt="PureAdmin Logo" width="100%" src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/10a351f0d9c94b90ba3b408a786b9ede~tplv-k3u1fbpfcp-zoom-in-crop-mark:3024:0:0:0.awebp?">
+  <img alt="PureAdmin" src="https://xiaoxian521.github.io/hyperlink/img/vue-pure-admin/3.jpg">
+  <br />
+  <img alt="PureAdmin" src="https://xiaoxian521.github.io/hyperlink/img/vue-pure-admin/4.jpg">
 </p>
 
-- Mobile
+`Mobile`
+
 <p align="center">
-  <img alt="PureAdmin Logo" width="100%" src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3061c7b92f6d4cb4bcdf227d966ac696~tplv-k3u1fbpfcp-zoom-in-crop-mark:3024:0:0:0.awebp?">
+  <img alt="PureAdmin" src="https://xiaoxian521.github.io/hyperlink/img/vue-pure-admin/5.jpg">
 </p>
 
 ### Use Gitpod
@@ -61,37 +67,83 @@ Open the project in Gitpod (free online dev environment for GitHub) and start co
 
 [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/pure-admin/vue-pure-admin)
 
-## Install and use
+## Install And Use
 
-- Get the project code
+### Pull code
+
+#### It is recommended to use `@pureadmin/cli` scaffolding
+
+<br/>
+<img src="https://xiaoxian521.github.io/hyperlink/gif/pure-admin-cli.gif" alt="pure-admin-cli" />
+
+1. Global installation
+
+```bash
+npm install -g @pureadmin/cli
+```
+
+2. Interactively select templates and create projects
+
+```bash
+pure create
+```
+
+[Click to view the detailed usage of @pureadmin/cli scaffolding](https://github.com/pure-admin/pure-admin-cli#pureadmincli)
+
+#### Pull from `GitHub`
 
 ```bash
 git clone https://github.com/pure-admin/vue-pure-admin.git
-or
+```
+
+#### Pulled from `Gitee`
+
+```bash
 git clone https://gitee.com/yiming_chang/vue-pure-admin.git
 ```
 
-- Installation dependencies
+### Install dependencies
 
 ```bash
 cd vue-pure-admin
 
 pnpm install
-
 ```
 
-- run
+### Run platform
 
 ```bash
-pnpm serve
+pnpm dev
 ```
 
-- build
+### Project packaging
 
 ```bash
 pnpm build
 ```
 
+## Docker support
+
+1. Customize the image named `vue-pure-admin` (please note that there is a dot `.` at the end of the command below, indicating that the `Dockerfile` file in the current path is used, and the path can be specified according to the actual situation)
+
+```bash
+docker build -t vue-pure-admin .
+```
+
+2. Port mapping and start the `docker` container (`8080:80`: indicates that the `80` port is used in the container, and the port is forwarded to the `8080` port of the host; `pure-admin`: indicates a custom container name; `vue-pure-admin`: indicates the custom image name)
+
+```bash
+docker run -dp 8080:80  --name pure-admin vue-pure-admin
+```
+
+After operating the above two commands, open `http://localhost:8080` in the browser to preview
+
+Of course, you can also operate the `docker` project through the [Docker Desktop](https://www.docker.com/products/docker-desktop/) visual interface, as shown below
+
+<p align="center">
+  <img alt="docker-desktop" width="100%" src="https://xiaoxian521.github.io/hyperlink/img/docker-desktop.jpg">
+</p>
+
 ## Change Log
 
 [CHANGELOG](./CHANGELOG.en_US.md)
@@ -110,27 +162,27 @@ You are very welcome to join！[Raise an issue](https://github.com/pure-admin/vu
 
 ## Git Contribution submission specification
 
-- 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))
+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))
 
-  - `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
+- `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
 
 ## Browser support
 
-The `Chrome 80+` browser is recommended for local development
-
-Support modern browsers, not IE
+It is recommended to use `Chrome`, `Edge`, and `Firefox` browsers for local development. The author commonly uses the latest version of `Chrome` browser.  
+In actual use, I feel that `Firefox` is smoother in animation than other browsers, but the author is used to using `Chrome`. It depends on personal preference.  
+For more detailed browser compatibility support, please see [Which browsers does Vue support? ](https://vuejs.org/about/faq.html#what-browsers-does-vue-support) and [Vite browser compatibility](https://vitejs.dev/guide/build.html#browser-compatibility)
 
 | [<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 |
 | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
@@ -140,42 +192,20 @@ Support modern browsers, not IE
 
 [xiaoxian521](https://github.com/xiaoxian521)、[Ten-K](https://github.com/Ten-K)
 
-## Donate
-
-If you think this project is helpful to you, you can help the author buy a glass of juice 🍹 Show your support
-
-<img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f69bf13c5b854ed5b699807cafa0e3ce~tplv-k3u1fbpfcp-zoom-in-crop-mark:1304:0:0:0.awebp?" width="150px" height="150px" />
-
 ## License
 
-In principle, no fees and copyrights are charged, and you can use it with confidence, but if you need secondary open source, please contact the author for permission!
+Completely free and open source
 
 [MIT © 2020-present, pure-admin](./LICENSE)
 
-## Backers
-
-Thank you very much for your support, I believe the project will get better and better :heart:
-
-|                                                                xueyuheng                                                                 |                                                                taolei1990                                                                 |                                                                hang-kim                                                                 |                                                               madwolfcrazy                                                                |                                                                limuen                                                                 |                                                                BenLakes                                                                 |
-| :--------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------: |
-| <a href="https://github.com/xueyuheng"><img src="https://avatars.githubusercontent.com/u/48202935?v=4" width="60px" height="60px" /></a> | <a href="https://github.com/taolei1990"><img src="https://avatars.githubusercontent.com/u/23173640?v=4" width="60px" height="60px" /></a> | <a href="https://github.com/hang-kim"><img src="https://avatars.githubusercontent.com/u/52914259?v=4" width="60px" height="60px" /></a> | <a href="https://github.com/madwolfcrazy"><img src="https://avatars.githubusercontent.com/u/223671?v=4" width="60px" height="60px" /></a> | <a href="https://github.com/limuen"><img src="https://avatars.githubusercontent.com/u/31790606?v=4" width="60px" height="60px" /></a> | <a href="https://github.com/BenLakes"><img src="https://avatars.githubusercontent.com/u/15206046?v=4" width="60px" height="60px" /></a> |
-|                                                                mollerzhu                                                                 |                                                                  TLovers                                                                  |                                                                  cnyyk                                                                  |                                                                                                                                           |                                                                                                                                       |                                                                                                                                         |
-| <a href="https://github.com/mollerzhu"><img src="https://avatars.githubusercontent.com/u/49627902?v=4" width="60px" height="60px" /></a> |  <a href="https://github.com/TLovers"><img src="https://avatars.githubusercontent.com/u/26561694?v=4" width="60px" height="60px" /></a>   |   <a href="https://github.com/cnyyk"><img src="https://avatars.githubusercontent.com/u/275233?v=4" width="60px" height="60px" /></a>    |                                                                                                                                           |                                                                                                                                       |                                                                                                                                         |
-
-## Contributors
-
-Thanks to all the people who contribute :heart:
-
-<a href="https://github.com/pure-admin/vue-pure-admin/graphs/contributors"><img src="https://contrib.rocks/image?repo=pure-admin/vue-pure-admin" /></a>
-
 ## `Star`
 
 Many thanks to the kind individuals who leave a star. Your support is much appreciated :heart:
 
-[![Stargazers for vue-pure-admin](https://reporoster.com/stars/pure-admin/vue-pure-admin)](https://github.com/pure-admin/vue-pure-admin/stargazers)
+[![Stargazers repo roster for @pure-admin/vue-pure-admin](https://bytecrank.com/nastyox/reporoster/php/stargazersSVG.php?user=pure-admin&repo=vue-pure-admin)](https://github.com/pure-admin/vue-pure-admin/stargazers)
 
 ## `Fork`
 
 It's so cool that you study hard :heart:
 
-[![Forkers repo roster for vue-pure-admin](https://reporoster.com/forks/pure-admin/vue-pure-admin)](https://github.com/pure-admin/vue-pure-admin/network/members)
+[![Forkers repo roster for @pure-admin/vue-pure-admin](https://bytecrank.com/nastyox/reporoster/php/forkersSVG.php?user=pure-admin&repo=vue-pure-admin)](https://github.com/pure-admin/vue-pure-admin/network/members)

README.md

@@ -8,90 +8,142 @@
 
 ## 简介
 
-`vue-pure-admin` 是一款开源免费且开箱即用的中后台管理系统模版。使用了最新的 `Vue3`、`Vite`、`Element-Plus`、`TypeScript`、`Pinia`、`Tailwindcss` 等主流技术开发
+`vue-pure-admin` 是一款开源免费且开箱即用的中后台管理系统模版。完全采用 `ECMAScript` 模块（`ESM`）规范来编写和组织代码，使用了最新的 `Vue3`、`Vite`、`Element-Plus`、`TypeScript`、`Pinia`、`Tailwindcss` 等主流技术开发
 
-## 精简版（实际项目开发请用精简版，提供 `非国际化` 、`国际化` 两个版本选择）
+## 精简版本（实际项目开发请用精简版本，提供 `非国际化` 、`国际化` 两个版本选择）
 
-精简版是基于 [vue-pure-admin](https://github.com/pure-admin/vue-pure-admin) 提炼出的架子，包含主体功能，更适合实际项目开发，打包后的大小在全局引入 [element-plus](https://element-plus.org) 的情况下仍然低于 `2.3MB`，并且会永久同步完整版的代码。开启 `brotli` 压缩和 `cdn` 替换本地库模式后，打包大小低于 `350kb`
+精简版本是基于 [vue-pure-admin](https://github.com/pure-admin/vue-pure-admin) 提炼出的架子，包含主体功能，更适合实际项目开发，打包后的大小在全局引入 [element-plus](https://element-plus.org) 的情况下仍然低于 `2.3MB`，并且会永久同步完整版的代码。开启 `brotli` 压缩和 `cdn` 替换本地库模式后，打包大小低于 `350kb`
 
-- [点我查看非国际化精简版](https://github.com/pure-admin/pure-admin-thin)
-- [点我查看国际化精简版](https://github.com/pure-admin/pure-admin-thin/tree/i18n)
+[点我查看非国际化精简版本](https://github.com/pure-admin/pure-admin-thin)  
+[点我查看国际化精简版本](https://github.com/pure-admin/pure-admin-thin/tree/i18n)
 
 ## 配套视频
 
-- [点我查看快速开发教程](https://www.bilibili.com/video/BV1kg411v7QT)
-- [点我查看 UI 设计](https://www.bilibili.com/video/BV17g411T7rq)
+[点我查看快速开发教程](https://www.bilibili.com/video/BV1kg411v7QT)  
+[点我查看 UI 设计](https://www.bilibili.com/video/BV17g411T7rq)
 
-## 配套保姆级文档（支持 `PWA` 快速、离线访问）
+## 配套保姆级文档
 
-- [点我查看国内文档站](https://yiming_chang.gitee.io/pure-admin-doc)
-- [点我查看国外文档站](https://pure-admin.github.io/pure-admin-doc)
+[查看 vue-pure-admin 文档](https://yiming_chang.gitee.io/pure-admin-doc)  
+[查看 @pureadmin/utils 文档](https://pure-admin-utils.netlify.app)
 
-## `Tauri` 版
+## `Tauri` 版本
 
-- [点我查看 Tauri 版](https://github.com/pure-admin/tauri-pure-admin)
+[点我查看 Tauri 版本](https://github.com/pure-admin/tauri-pure-admin)
 
-## `Electron` 版
+## `Electron` 版本
 
-- [点我查看 Electron 版](https://github.com/pure-admin/electron-pure-admin)
+[点我查看 Electron 版本](https://github.com/pure-admin/electron-pure-admin)
 
 ## 预览
 
-- [点我查看国内预览站](https://yiming_chang.gitee.io/vue-pure-admin)
-- [点我查看国外预览站](https://pure-admin.github.io/vue-pure-admin)
+[查看预览](https://yiming_chang.gitee.io/vue-pure-admin)
+
+`PC` 端
 
-- PC 端
 <p align="center">
-  <img alt="PureAdmin Logo" width="100%" src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d45c15ccbe674fe291a4faa528d11eda~tplv-k3u1fbpfcp-zoom-in-crop-mark:3024:0:0:0.awebp?">
+  <img alt="PureAdmin" src="https://xiaoxian521.github.io/hyperlink/img/vue-pure-admin/1.jpg">
+  <br />
+  <img alt="PureAdmin" src="https://xiaoxian521.github.io/hyperlink/img/vue-pure-admin/2.jpg">
 </p>
 
-- 暗黑模式
+暗色风格
+
 <p align="center">
-  <img alt="PureAdmin Logo" width="100%" src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/10a351f0d9c94b90ba3b408a786b9ede~tplv-k3u1fbpfcp-zoom-in-crop-mark:3024:0:0:0.awebp?">
+  <img alt="PureAdmin" src="https://xiaoxian521.github.io/hyperlink/img/vue-pure-admin/3.jpg">
+  <br />
+  <img alt="PureAdmin" src="https://xiaoxian521.github.io/hyperlink/img/vue-pure-admin/4.jpg">
 </p>
 
-- 移动端
+移动端
+
 <p align="center">
-  <img alt="PureAdmin Logo" width="100%" src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3061c7b92f6d4cb4bcdf227d966ac696~tplv-k3u1fbpfcp-zoom-in-crop-mark:3024:0:0:0.awebp?">
+  <img alt="PureAdmin" src="https://xiaoxian521.github.io/hyperlink/img/vue-pure-admin/5.jpg">
 </p>
 
 ### 使用 `Gitpod`
 
-在 Gitpod（适用于 GitHub 的免费在线开发环境）中打开项目，并立即开始编码.
+在 `Gitpod`（适用于 `GitHub` 的免费在线开发环境）中打开项目，并立即开始编码.
 
 [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/pure-admin/vue-pure-admin)
 
 ## 安装使用
 
-- 获取项目代码
+### 拉取代码
+
+#### 推荐使用 `@pureadmin/cli` 脚手架
+
+<br/>
+<img src="https://xiaoxian521.github.io/hyperlink/gif/pure-admin-cli.gif" alt="pure-admin-cli" />
+
+1. 全局安装
+
+```bash
+npm install -g @pureadmin/cli
+```
+
+2. 交互式选择模板并创建项目
+
+```bash
+pure create
+```
+
+[点我查看 @pureadmin/cli 脚手架详细用法](https://github.com/pure-admin/pure-admin-cli#pureadmincli)
+
+#### 从 `GitHub` 上拉取
 
 ```bash
 git clone https://github.com/pure-admin/vue-pure-admin.git
-or
+```
+
+#### 从 `Gitee` 上拉取
+
+```bash
 git clone https://gitee.com/yiming_chang/vue-pure-admin.git
 ```
 
-- 安装依赖
+### 安装依赖
 
 ```bash
 cd vue-pure-admin
 
 pnpm install
-
 ```
 
-- 运行
+### 启动平台
 
 ```bash
-pnpm serve
+pnpm dev
 ```
 
-- 打包
+### 项目打包
 
 ```bash
 pnpm build
 ```
 
+## Docker 支持
+
+1. 自定义镜像名为 `vue-pure-admin` 的镜像（请注意下面命令末尾有一个点 `.` 表示使用当前路径下的 `Dockerfile` 文件，可根据实际情况指定路径）
+
+```bash
+docker build -t vue-pure-admin .
+```
+
+2. 端口映射并启动 `docker` 容器（`8080:80`：表示在容器中使用 `80` 端口，并将该端口转发到主机的 `8080` 端口；`pure-admin`：表示自定义容器名；`vue-pure-admin`：表示自定义镜像名）
+
+```bash
+docker run -dp 8080:80  --name pure-admin vue-pure-admin
+```
+
+操作完上面两个命令后，在浏览器打开 `http://localhost:8080` 即可预览
+
+当然也可以通过 [Docker Desktop](https://www.docker.com/products/docker-desktop/) 可视化界面去操作 `docker` 项目，如下图
+
+<p align="center">
+  <img alt="docker-desktop" width="100%" src="https://xiaoxian521.github.io/hyperlink/img/docker-desktop.jpg">
+</p>
+
 ## 更新日志
 
 [CHANGELOG](./CHANGELOG.zh_CN.md)
@@ -110,76 +162,50 @@ pnpm build
 
 ## `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))
+参考 [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))
 
-  - `feat` 增加新功能
-  - `fix` 修复问题/BUG
-  - `style` 代码风格相关无影响运行结果的
-  - `perf` 优化/性能提升
-  - `refactor` 重构
-  - `revert` 撤销修改
-  - `test` 测试相关
-  - `docs` 文档/注释
-  - `chore` 依赖更新/脚手架配置修改等
-  - `workflow` 工作流改进
-  - `ci` 持续集成
-  - `types` 类型定义文件更改
-  - `wip` 开发中
+- `feat` 增加新功能
+- `fix` 修复问题/BUG
+- `style` 代码风格相关无影响运行结果的
+- `perf` 优化/性能提升
+- `refactor` 重构
+- `revert` 撤销修改
+- `test` 测试相关
+- `docs` 文档/注释
+- `chore` 依赖更新/脚手架配置修改等
+- `workflow` 工作流改进
+- `ci` 持续集成
+- `types` 类型定义文件更改
+- `wip` 开发中
 
 ## 浏览器支持
 
-本地开发推荐使用 `Chrome 80+` 浏览器
-
-支持现代浏览器, 不支持 `IE`
+本地开发推荐使用 `Chrome`、`Edge`、`Firefox` 浏览器，作者常用的是最新版 `Chrome` 浏览器  
+实际使用中感觉 `Firefox` 在动画上要比别的浏览器更加丝滑，只是作者用 `Chrome` 已经习惯了，看个人爱好选择吧  
+更详细的浏览器兼容性支持请看 [Vue 支持哪些浏览器？](https://cn.vuejs.org/about/faq.html#what-browsers-does-vue-support) 和 [Vite 浏览器兼容性](https://cn.vitejs.dev/guide/build#browser-compatibility)
 
 | [<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                                                                                                |
+|                                                                                                不支持                                                                                                |                                                                                              最后两个版本                                                                                              |                                                                                                   最后两个版本                                                                                                    |                                                                                                 最后两个版本                                                                                                  |                                                                                                 最后两个版本                                                                                                  |
 
 ## 维护者
 
 [xiaoxian521](https://github.com/xiaoxian521)、[Ten-K](https://github.com/Ten-K)
 
-## 支持
-
-如果您觉得这个项目对您有帮助，可以帮作者买一杯果汁 🍹 表示支持
-
-<img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f69bf13c5b854ed5b699807cafa0e3ce~tplv-k3u1fbpfcp-zoom-in-crop-mark:1304:0:0:0.awebp?" width="150px" height="150px" />
-
-## `QQ` 交流群
-
-[点击去加入](https://yiming_chang.gitee.io/pure-admin-doc/pages/support/#qq-%E4%BA%A4%E6%B5%81%E7%BE%A4)
-
 ## 许可证
 
-原则上不收取任何费用及版权，可以放心使用，不过如需二次开源（比如用此平台二次开发并开源）请联系作者获取许可！
+完全免费开源
 
 [MIT © 2020-present, pure-admin](./LICENSE)
 
-## 支持者
-
-非常感谢您们的支持，相信项目会越来越好 :heart:
-
-|                                                                xueyuheng                                                                 |                                                                taolei1990                                                                 |                                                                hang-kim                                                                 |                                                               madwolfcrazy                                                                |                                                                limuen                                                                 |                                                                BenLakes                                                                 |
-| :--------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------: |
-| <a href="https://github.com/xueyuheng"><img src="https://avatars.githubusercontent.com/u/48202935?v=4" width="60px" height="60px" /></a> | <a href="https://github.com/taolei1990"><img src="https://avatars.githubusercontent.com/u/23173640?v=4" width="60px" height="60px" /></a> | <a href="https://github.com/hang-kim"><img src="https://avatars.githubusercontent.com/u/52914259?v=4" width="60px" height="60px" /></a> | <a href="https://github.com/madwolfcrazy"><img src="https://avatars.githubusercontent.com/u/223671?v=4" width="60px" height="60px" /></a> | <a href="https://github.com/limuen"><img src="https://avatars.githubusercontent.com/u/31790606?v=4" width="60px" height="60px" /></a> | <a href="https://github.com/BenLakes"><img src="https://avatars.githubusercontent.com/u/15206046?v=4" width="60px" height="60px" /></a> |
-|                                                                mollerzhu                                                                 |                                                                  TLovers                                                                  |                                                                  cnyyk                                                                  |                                                                                                                                           |                                                                                                                                       |                                                                                                                                         |
-| <a href="https://github.com/mollerzhu"><img src="https://avatars.githubusercontent.com/u/49627902?v=4" width="60px" height="60px" /></a> |  <a href="https://github.com/TLovers"><img src="https://avatars.githubusercontent.com/u/26561694?v=4" width="60px" height="60px" /></a>   |   <a href="https://github.com/cnyyk"><img src="https://avatars.githubusercontent.com/u/275233?v=4" width="60px" height="60px" /></a>    |                                                                                                                                           |                                                                                                                                       |                                                                                                                                         |
-
-## 贡献者
-
-感谢所有做出贡献的人 :heart:
-
-<a href="https://github.com/pure-admin/vue-pure-admin/graphs/contributors"><img src="https://contrib.rocks/image?repo=pure-admin/vue-pure-admin" /></a>
-
 ## `Star`
 
 非常感谢留下星星的好心人，感谢您的支持 :heart:
 
-[![Stargazers for vue-pure-admin](https://reporoster.com/stars/pure-admin/vue-pure-admin)](https://github.com/pure-admin/vue-pure-admin/stargazers)
+[![Stargazers repo roster for @pure-admin/vue-pure-admin](https://bytecrank.com/nastyox/reporoster/php/stargazersSVG.php?user=pure-admin&repo=vue-pure-admin)](https://github.com/pure-admin/vue-pure-admin/stargazers)
 
 ## `Fork`
 
 瞧，那些 `小哥哥` 、`小姐姐` 认真 `学习` 的样子真滴是 `哎呦不错哦` :heart:
 
-[![Forkers repo roster for vue-pure-admin](https://reporoster.com/forks/pure-admin/vue-pure-admin)](https://github.com/pure-admin/vue-pure-admin/network/members)
+[![Forkers repo roster for @pure-admin/vue-pure-admin](https://bytecrank.com/nastyox/reporoster/php/forkersSVG.php?user=pure-admin&repo=vue-pure-admin)](https://github.com/pure-admin/vue-pure-admin/network/members)

build/cdn.ts

@@ -3,7 +3,6 @@ import { Plugin as importToCDN } from "vite-plugin-cdn-import";
 /**
  * @description 打包时采用`cdn`模式，仅限外网使用（默认不采用，如果需要采用cdn模式，请在 .env.production 文件，将 VITE_CDN 设置成true）
  * 平台采用国内cdn：https://www.bootcdn.cn，当然你也可以选择 https://unpkg.com 或者 https://www.jsdelivr.com
- * 提醒：mockjs不能用cdn模式引入，会报错。正确的方式是，生产环境删除mockjs，使用真实的后端请求
  * 注意：上面提到的仅限外网使用也不是完全肯定的，如果你们公司内网部署的有相关js、css文件，也可以将下面配置对应改一下，整一套内网版cdn
  */
 export const cdn = importToCDN({

build/index.ts

@@ -1,31 +0,0 @@
-/** 处理环境变量 */
-const warpperEnv = (envConf: Recordable): ViteEnv => {
-  /** 此处为默认值 */
-  const ret: ViteEnv = {
-    VITE_PORT: 8848,
-    VITE_PUBLIC_PATH: "",
-    VITE_ROUTER_HISTORY: "",
-    VITE_CDN: false,
-    VITE_HIDE_HOME: "false",
-    VITE_COMPRESSION: "none"
-  };
-
-  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);
-    }
-    ret[envName] = realName;
-    if (typeof realName === "string") {
-      process.env[envName] = realName;
-    } else if (typeof realName === "object") {
-      process.env[envName] = JSON.stringify(realName);
-    }
-  }
-  return ret;
-};
-
-export { warpperEnv };

build/info.ts

@@ -1,10 +1,21 @@
 import type { Plugin } from "vite";
-import dayjs, { Dayjs } from "dayjs";
-import utils from "@pureadmin/utils";
+import { getPackageSize } from "./utils";
+import dayjs, { type Dayjs } from "dayjs";
 import duration from "dayjs/plugin/duration";
-import { green, blue, bold } from "picocolors";
+import gradientString from "gradient-string";
+import boxen, { type Options as BoxenOptions } from "boxen";
 dayjs.extend(duration);
 
+const welcomeMessage = gradientString("cyan", "magenta").multiline(
+  `Hello! 欢迎使用 vue-pure-admin\n我们为您精心准备了下面两个贴心的保姆级文档\nhttps://yiming_chang.gitee.io/pure-admin-doc\nhttps://pure-admin-utils.netlify.app`
+);
+
+const boxenOptions: BoxenOptions = {
+  padding: 0.5,
+  borderColor: "cyan",
+  borderStyle: "round"
+};
+
 export function viteBuildInfo(): Plugin {
   let config: { command: string };
   let startTime: Dayjs;
@@ -17,15 +28,7 @@ export function viteBuildInfo(): Plugin {
       outDir = resolvedConfig.build?.outDir ?? "dist";
     },
     buildStart() {
-      console.log(
-        bold(
-          green(
-            `👏欢迎使用${blue(
-              "[vue-pure-admin]"
-            )}，如果您感觉不错，记得点击后面链接给个star哦💖 https://github.com/pure-admin/vue-pure-admin`
-          )
-        )
-      );
+      console.log(boxen(welcomeMessage, boxenOptions));
       if (config.command === "build") {
         startTime = dayjs(new Date());
       }
@@ -33,16 +36,17 @@ export function viteBuildInfo(): Plugin {
     closeBundle() {
       if (config.command === "build") {
         endTime = dayjs(new Date());
-        utils.getPackageSize({
+        getPackageSize({
           folder: outDir,
           callback: (size: string) => {
             console.log(
-              bold(
-                green(
-                  `🎉恭喜打包完成（总用时${dayjs
+              boxen(
+                gradientString("cyan", "magenta").multiline(
+                  `🎉 恭喜打包完成（总用时${dayjs
                     .duration(endTime.diff(startTime))
                     .format("mm分ss秒")}，打包后的大小为${size}）`
-                )
+                ),
+                boxenOptions
               )
             );
           }

build/optimize.ts

@@ -11,19 +11,26 @@ const include = [
   "dayjs",
   "axios",
   "pinia",
+  "typeit",
   "swiper",
+  "qrcode",
   "intro.js",
   "vue-i18n",
+  "vue-types",
   "js-cookie",
+  "vue-tippy",
   "cropperjs",
   "jsbarcode",
+  "pinyin-pro",
   "sortablejs",
   "swiper/vue",
-  "md-editor-v3",
+  "mint-filter",
   "@vueuse/core",
   "vue3-danmaku",
   "v-contextmenu",
   "vue-pdf-embed",
+  "wavesurfer.js",
+  "swiper/modules",
   "china-area-data",
   "vue-json-pretty",
   "@logicflow/core",
@@ -33,9 +40,9 @@ const include = [
   "@howdyjs/mouse-menu",
   "@logicflow/extension",
   "vue-virtual-scroller",
-  "element-resize-detector",
   "@amap/amap-jsapi-loader",
   "el-table-infinite-scroll",
+  "vue-waterfall-plugin-next",
   "@wangeditor/editor-for-vue",
   "vuedraggable/src/vuedraggable"
 ];

build/plugins.ts

@@ -1,38 +1,47 @@
 import { cdn } from "./cdn";
-import { resolve } from "path";
 import vue from "@vitejs/plugin-vue";
+import { pathResolve } from "./utils";
 import { viteBuildInfo } from "./info";
 import svgLoader from "vite-svg-loader";
+import type { PluginOption } from "vite";
 import vueJsx from "@vitejs/plugin-vue-jsx";
-import { viteMockServe } from "vite-plugin-mock";
 import { configCompressPlugin } from "./compress";
+import removeNoMatch from "vite-plugin-router-warn";
 import { visualizer } from "rollup-plugin-visualizer";
 import removeConsole from "vite-plugin-remove-console";
-import themePreprocessorPlugin from "@pureadmin/theme";
+import { themePreprocessorPlugin } from "@pureadmin/theme";
 import VueI18nPlugin from "@intlify/unplugin-vue-i18n/vite";
 import { genScssMultipleScopeVars } from "../src/layout/theme";
+import { vitePluginFakeServer } from "vite-plugin-fake-server";
 
 export function getPluginsList(
-  command: string,
   VITE_CDN: boolean,
   VITE_COMPRESSION: ViteCompression
-) {
-  const prodMock = true;
+): PluginOption[] {
   const lifecycle = process.env.npm_lifecycle_event;
   return [
     vue(),
+    // jsx、tsx语法支持
+    vueJsx(),
     VueI18nPlugin({
       runtimeOnly: true,
       compositionOnly: true,
-      include: [resolve("locales/**")]
+      include: [pathResolve("../locales/**")]
     }),
-    // jsx、tsx语法支持
-    vueJsx(),
-    VITE_CDN ? cdn : null,
-    configCompressPlugin(VITE_COMPRESSION),
-    // 线上环境删除console
-    removeConsole({ external: ["src/assets/iconfont/iconfont.js"] }),
     viteBuildInfo(),
+    /**
+     * 开发环境下移除非必要的vue-router动态路由警告No match found for location with path
+     * 非必要具体看 https://github.com/vuejs/router/issues/521 和 https://github.com/vuejs/router/issues/359
+     * vite-plugin-router-warn只在开发环境下启用，只处理vue-router文件并且只在服务启动或重启时运行一次，性能消耗可忽略不计
+     */
+    removeNoMatch(),
+    // mock支持
+    vitePluginFakeServer({
+      logger: false,
+      include: "mock",
+      infixName: false,
+      enableProd: true
+    }),
     // 自定义主题
     themePreprocessorPlugin({
       scss: {
@@ -42,20 +51,13 @@ export function getPluginsList(
     }),
     // svg组件化支持
     svgLoader(),
-    // mock支持
-    viteMockServe({
-      mockPath: "mock",
-      localEnabled: command === "serve",
-      prodEnabled: command !== "serve" && prodMock,
-      injectCode: `
-          import { setupProdMockServer } from './mockProdServer';
-          setupProdMockServer();
-        `,
-      logger: false
-    }),
+    VITE_CDN ? cdn : null,
+    configCompressPlugin(VITE_COMPRESSION),
+    // 线上环境删除console
+    removeConsole({ external: ["src/assets/iconfont/iconfont.js"] }),
     // 打包分析
     lifecycle === "report"
       ? visualizer({ open: true, brotliSize: true, filename: "report.html" })
-      : null
+      : (null as any)
   ];
 }

build/utils.ts

@@ -0,0 +1,110 @@
+import dayjs from "dayjs";
+import { readdir, stat } from "node:fs";
+import { fileURLToPath } from "node:url";
+import { dirname, resolve } from "node:path";
+import { sum, formatBytes } from "@pureadmin/utils";
+import {
+  name,
+  version,
+  engines,
+  dependencies,
+  devDependencies
+} from "../package.json";
+
+/** 启动`node`进程时所在工作目录的绝对路径 */
+const root: string = process.cwd();
+
+/**
+ * @description 根据可选的路径片段生成一个新的绝对路径
+ * @param dir 路径片段，默认`build`
+ * @param metaUrl 模块的完整`url`，如果在`build`目录外调用必传`import.meta.url`
+ */
+const pathResolve = (dir = ".", metaUrl = import.meta.url) => {
+  // 当前文件目录的绝对路径
+  const currentFileDir = dirname(fileURLToPath(metaUrl));
+  // build 目录的绝对路径
+  const buildDir = resolve(currentFileDir, "build");
+  // 解析的绝对路径
+  const resolvedPath = resolve(currentFileDir, dir);
+  // 检查解析的绝对路径是否在 build 目录内
+  if (resolvedPath.startsWith(buildDir)) {
+    // 在 build 目录内，返回当前文件路径
+    return fileURLToPath(metaUrl);
+  }
+  // 不在 build 目录内，返回解析后的绝对路径
+  return resolvedPath;
+};
+
+/** 设置别名 */
+const alias: Record<string, string> = {
+  "@": pathResolve("../src"),
+  "@build": pathResolve()
+};
+
+/** 平台的名称、版本、运行所需的`node`和`pnpm`版本、依赖、最后构建时间的类型提示 */
+const __APP_INFO__ = {
+  pkg: { name, version, engines, dependencies, devDependencies },
+  lastBuildTime: dayjs(new Date()).format("YYYY-MM-DD HH:mm:ss")
+};
+
+/** 处理环境变量 */
+const warpperEnv = (envConf: Recordable): ViteEnv => {
+  // 默认值
+  const ret: ViteEnv = {
+    VITE_PORT: 8848,
+    VITE_PUBLIC_PATH: "",
+    VITE_ROUTER_HISTORY: "",
+    VITE_CDN: false,
+    VITE_HIDE_HOME: "false",
+    VITE_COMPRESSION: "none"
+  };
+
+  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);
+    }
+    ret[envName] = realName;
+    if (typeof realName === "string") {
+      process.env[envName] = realName;
+    } else if (typeof realName === "object") {
+      process.env[envName] = JSON.stringify(realName);
+    }
+  }
+  return ret;
+};
+
+const fileListTotal: number[] = [];
+
+/** 获取指定文件夹中所有文件的总大小 */
+const getPackageSize = options => {
+  const { folder = "dist", callback, format = true } = options;
+  readdir(folder, (err, files: string[]) => {
+    if (err) throw err;
+    let count = 0;
+    const checkEnd = () => {
+      ++count == files.length &&
+        callback(format ? formatBytes(sum(fileListTotal)) : sum(fileListTotal));
+    };
+    files.forEach((item: string) => {
+      stat(`${folder}/${item}`, async (err, stats) => {
+        if (err) throw err;
+        if (stats.isFile()) {
+          fileListTotal.push(stats.size);
+          checkEnd();
+        } else if (stats.isDirectory()) {
+          getPackageSize({
+            folder: `${folder}/${item}/`,
+            callback: checkEnd
+          });
+        }
+      });
+    });
+    files.length === 0 && callback(0);
+  });
+};
+
+export { root, pathResolve, alias, __APP_INFO__, warpperEnv, getPackageSize };

commitlint.config.js

@@ -1,4 +1,7 @@
-module.exports = {
+// @ts-check
+
+/** @type {import("@commitlint/types").UserConfig} */
+export default {
   ignores: [commit => commit.includes("init")],
   extends: ["@commitlint/config-conventional"],
   rules: {

eslint.config.js

@@ -0,0 +1,174 @@
+import js from "@eslint/js";
+import pluginVue from "eslint-plugin-vue";
+import * as parserVue from "vue-eslint-parser";
+import configPrettier from "eslint-config-prettier";
+import pluginPrettier from "eslint-plugin-prettier";
+import { defineFlatConfig } from "eslint-define-config";
+import * as parserTypeScript from "@typescript-eslint/parser";
+import pluginTypeScript from "@typescript-eslint/eslint-plugin";
+
+export default defineFlatConfig([
+  {
+    ...js.configs.recommended,
+    ignores: ["src/assets/**", "src/**/iconfont/**"],
+    languageOptions: {
+      globals: {
+        // index.d.ts
+        RefType: "readonly",
+        EmitType: "readonly",
+        TargetContext: "readonly",
+        ComponentRef: "readonly",
+        ElRef: "readonly",
+        ForDataType: "readonly",
+        AnyFunction: "readonly",
+        PropType: "readonly",
+        Writable: "readonly",
+        Nullable: "readonly",
+        NonNullable: "readonly",
+        Recordable: "readonly",
+        ReadonlyRecordable: "readonly",
+        Indexable: "readonly",
+        DeepPartial: "readonly",
+        Without: "readonly",
+        Exclusive: "readonly",
+        TimeoutHandle: "readonly",
+        IntervalHandle: "readonly",
+        Effect: "readonly",
+        ChangeEvent: "readonly",
+        WheelEvent: "readonly",
+        ImportMetaEnv: "readonly",
+        Fn: "readonly",
+        PromiseFn: "readonly",
+        ComponentElRef: "readonly",
+        parseInt: "readonly",
+        parseFloat: "readonly"
+      }
+    },
+    plugins: {
+      prettier: pluginPrettier
+    },
+    rules: {
+      ...configPrettier.rules,
+      ...pluginPrettier.configs.recommended.rules,
+      "no-debugger": "off",
+      "no-unused-vars": [
+        "error",
+        {
+          argsIgnorePattern: "^_",
+          varsIgnorePattern: "^_"
+        }
+      ],
+      "prettier/prettier": [
+        "error",
+        {
+          endOfLine: "auto"
+        }
+      ]
+    }
+  },
+  {
+    files: ["**/*.?([cm])ts", "**/*.?([cm])tsx"],
+    languageOptions: {
+      parser: parserTypeScript,
+      parserOptions: {
+        sourceType: "module"
+      }
+    },
+    plugins: {
+      "@typescript-eslint": pluginTypeScript
+    },
+    rules: {
+      ...pluginTypeScript.configs.strict.rules,
+      "@typescript-eslint/ban-types": "off",
+      "@typescript-eslint/no-redeclare": "error",
+      "@typescript-eslint/ban-ts-comment": "off",
+      "@typescript-eslint/no-explicit-any": "off",
+      "@typescript-eslint/prefer-as-const": "warn",
+      "@typescript-eslint/no-empty-function": "off",
+      "@typescript-eslint/no-non-null-assertion": "off",
+      "@typescript-eslint/no-import-type-side-effects": "error",
+      "@typescript-eslint/explicit-module-boundary-types": "off",
+      "@typescript-eslint/consistent-type-imports": [
+        "error",
+        { disallowTypeAnnotations: false, fixStyle: "inline-type-imports" }
+      ],
+      "@typescript-eslint/prefer-literal-enum-member": [
+        "error",
+        { allowBitwiseExpressions: true }
+      ],
+      "@typescript-eslint/no-unused-vars": [
+        "error",
+        {
+          argsIgnorePattern: "^_",
+          varsIgnorePattern: "^_"
+        }
+      ]
+    }
+  },
+  {
+    files: ["**/*.d.ts"],
+    rules: {
+      "eslint-comments/no-unlimited-disable": "off",
+      "import/no-duplicates": "off",
+      "unused-imports/no-unused-vars": "off"
+    }
+  },
+  {
+    files: ["**/*.?([cm])js"],
+    rules: {
+      "@typescript-eslint/no-require-imports": "off",
+      "@typescript-eslint/no-var-requires": "off"
+    }
+  },
+  {
+    files: ["**/*.vue"],
+    languageOptions: {
+      globals: {
+        $: "readonly",
+        $$: "readonly",
+        $computed: "readonly",
+        $customRef: "readonly",
+        $ref: "readonly",
+        $shallowRef: "readonly",
+        $toRef: "readonly"
+      },
+      parser: parserVue,
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true
+        },
+        extraFileExtensions: [".vue"],
+        parser: "@typescript-eslint/parser",
+        sourceType: "module"
+      }
+    },
+    plugins: {
+      vue: pluginVue
+    },
+    processor: pluginVue.processors[".vue"],
+    rules: {
+      ...pluginVue.configs.base.rules,
+      ...pluginVue.configs["vue3-essential"].rules,
+      ...pluginVue.configs["vue3-recommended"].rules,
+      "no-undef": "off",
+      "no-unused-vars": "off",
+      "vue/no-v-html": "off",
+      "vue/require-default-prop": "off",
+      "vue/require-explicit-emits": "off",
+      "vue/multi-word-component-names": "off",
+      "vue/no-setup-props-reactivity-loss": "off",
+      "vue/html-self-closing": [
+        "error",
+        {
+          html: {
+            void: "always",
+            normal: "always",
+            component: "always"
+          },
+          svg: "always",
+          math: "always"
+        }
+      ]
+    }
+  }
+]);

index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />

locales/en.yaml

@@ -29,6 +29,7 @@ menus:
   hssysManagement: System Manage
   hsUser: User Manage
   hsRole: Role Manage
+  hsSystemMenu: Menu Manage
   hsDept: Dept Manage
   hseditor: Editor
   hsabnormal: Abnormal Page
@@ -36,21 +37,36 @@ menus:
   hsfourZeroOne: "403"
   hsFive: "500"
   hscomponents: Components
-  hsdialog: Dialog Components
-  hsmessage: Message Tips Components
-  hsvideo: Video Components
-  hsmap: Map Components
-  hsdraggable: Draggable Components
+  hsdialog: Dialog
+  hsmessage: Message Tips
+  hsvideo: Video
+  hssegmented: Segmented
+  hswaterfall: Waterfall
+  hsmap: Map
+  hsdraggable: Draggable
   hssplitPane: Split Pane
-  hsbutton: Button Components
+  hsText: Text Ellipsis
+  hsElButton: Button
+  hsbutton: Button Animation
+  hsCheckButton: Check Button
   hscropping: Picture Cropping
+  hsanimatecss: AnimateCss Selector
   hscountTo: Digital Animation
-  hsselector: Selector Components
+  hsselector: Scope Selector
   hsflowChart: Flow Chart
   hsseamless: Seamless Scroll
   hscontextmenu: Context Menu
-  hstypeit: Typeit Components
+  hstypeit: Typeit
   hsjsoneditor: JSON Editor
+  hsColorPicker: Color Picker
+  hsDatePicker: Date Picker
+  hsDateTimePicker: DateTimePicker
+  hsTimePicker: TimePicker
+  hsTag: Tag
+  hsStatistic: Statistic
+  hsCollapse: Collapse
+  hsProgress: Progress
+  hsUpload: File Upload
   hsmenus: MultiLevel Menu
   hsmenu1: Menu1
   hsmenu1-1: Menu1-1
@@ -66,18 +82,23 @@ menus:
   hsguide: Guide
   hsAble: Able
   hsMenuTree: Menu Tree
+  hsVideoFrame: Video Frame Capture
+  hsWavesurfer: Audio Visualization
+  hsOptimize: Debounce、Throttle、Copy、Longpress Directives
   hsWatermark: Water Mark
   hsPrint: Print
   hsDownload: Download
   hsExternalPage: External Page
-  hsPureDocument: Pure Doc(Embedded)
-  externalLink: Pure Doc(External)
-  hsEpDocument: Element Plus Doc(Embedded)
-  hsVueDocument: Vue3 Doc(Embedded)
-  hsViteDocument: Vite Doc(Embedded)
-  hsPiniaDocument: Pinia Doc(Embedded)
-  hsRouterDocument: Vue Router Doc(Embedded)
-  hsTailwindcssDocument: Tailwindcss Doc(Embedded)
+  hsExternalDoc: Docs External
+  hsEmbeddedDoc: Docs Embedded
+  externalLink: Vue-Pure-Admin
+  pureutilsLink: Pure-Admin-Utils
+  hsEpDocument: Element-Plus
+  hsTailwindcssDocument: Tailwindcss
+  hsVueDocument: Vue3
+  hsViteDocument: Vite
+  hsPiniaDocument: Pinia
+  hsRouterDocument: Vue-Router
   hsAbout: About
   hsResult: Result Page
   hsSuccess: Success Page
@@ -95,12 +116,14 @@ menus:
   hsSwiper: Swiper Plugin
   hsVirtualList: Virtual List
   hsPdf: PDF Preview
-  hsExecl: Export Excel
+  hsExcel: Export Excel
   hsInfiniteScroll: Table Infinite Scroll
-  hsdanmaku: Danmaku Components
+  hsSensitive: Sensitive Filter
+  hsPinyin: PinYin
+  hsdanmaku: Danmaku
   hsPureTableBase: Base Usage
   hsPureTableHigh: High Usage
-  hsTree: Big Data Tree
+  hsboard: Paint Board
   hsMenuoverflow: Menu Overflow Show Tooltip Text
   hsChildMenuoverflow: Child Menu Overflow Show Tooltip Text
 status:
@@ -109,7 +132,8 @@ login:
   username: Username
   password: Password
   verifyCode: VerifyCode
-  remember: Remember Password
+  remember: days no need to login
+  rememberInfo: After checking and logging in, will automatically log in to the system without entering your username and password within the specified number of days.
   sure: Sure Password
   forget: Forget Password?
   login: Login

locales/zh-CN.yaml

@@ -29,6 +29,7 @@ menus:
   hssysManagement: 系统管理
   hsUser: 用户管理
   hsRole: 角色管理
+  hsSystemMenu: 菜单管理
   hsDept: 部门管理
   hseditor: 编辑器
   hsabnormal: 异常页面
@@ -36,21 +37,36 @@ menus:
   hsfourZeroOne: "403"
   hsFive: "500"
   hscomponents: 组件
-  hsdialog: 函数式弹框组件
-  hsmessage: 消息提示组件
-  hsvideo: 视频组件
-  hsmap: 地图组件
-  hsdraggable: 拖拽组件
+  hsdialog: 函数式弹框
+  hsmessage: 消息提示
+  hsvideo: 视频
+  hssegmented: 分段控制器
+  hswaterfall: 瀑布流无限滚动
+  hsmap: 地图
+  hsdraggable: 拖拽
   hssplitPane: 切割面板
-  hsbutton: 按钮组件
+  hsText: 文本省略
+  hsElButton: 按钮
+  hsCheckButton: 可选按钮
+  hsbutton: 按钮动效
   hscropping: 图片裁剪
+  hsanimatecss: animate.css选择器
   hscountTo: 数字动画
-  hsselector: 选择器组件
+  hsselector: 范围选择器
   hsflowChart: 流程图
   hsseamless: 无缝滚动
   hscontextmenu: 右键菜单
-  hstypeit: 打字机组件
+  hstypeit: 打字机
   hsjsoneditor: JSON编辑器
+  hsColorPicker: 颜色选择器
+  hsDatePicker: 日期选择器
+  hsDateTimePicker: 日期时间选择器
+  hsTimePicker: 时间选择器
+  hsTag: 标签
+  hsStatistic: 统计组件
+  hsCollapse: 折叠面板
+  hsProgress: 进度条
+  hsUpload: 文件上传
   hsmenus: 多级菜单
   hsmenu1: 菜单1
   hsmenu1-1: 菜单1-1
@@ -66,18 +82,23 @@ menus:
   hsguide: 引导页
   hsAble: 功能
   hsMenuTree: 菜单树结构
+  hsVideoFrame: 视频帧截取-wasm版
+  hsWavesurfer: 音频可视化
+  hsOptimize: 防抖、截流、复制、长按指令
   hsWatermark: 水印
   hsPrint: 打印
   hsDownload: 下载
   hsExternalPage: 外部页面
-  hsPureDocument: 平台文档（内嵌）
-  externalLink: 平台文档（外链）
-  hsEpDocument: Element Plus 文档（内嵌）
-  hsVueDocument: Vue3 文档（内嵌）
-  hsViteDocument: Vite 文档（内嵌）
-  hsPiniaDocument: Pinia 文档（内嵌）
-  hsRouterDocument: Vue Router 文档（内嵌）
-  hsTailwindcssDocument: Tailwindcss 文档（内嵌）
+  hsExternalDoc: 文档外链
+  hsEmbeddedDoc: 文档内嵌
+  externalLink: vue-pure-admin
+  pureutilsLink: pure-admin-utils
+  hsEpDocument: element-plus
+  hsTailwindcssDocument: tailwindcss
+  hsVueDocument: vue3
+  hsViteDocument: vite
+  hsPiniaDocument: pinia
+  hsRouterDocument: vue-router
   hsAbout: 关于
   hsResult: 结果页面
   hsSuccess: 成功页面
@@ -95,12 +116,14 @@ menus:
   hsSwiper: Swiper插件
   hsVirtualList: 虚拟列表
   hsPdf: PDF预览
-  hsExecl: 导出Excel
+  hsExcel: 导出Excel
   hsInfiniteScroll: 表格无限滚动
-  hsdanmaku: 弹幕组件
+  hsSensitive: 敏感词过滤
+  hsPinyin: 汉语拼音
+  hsdanmaku: 弹幕
   hsPureTableBase: 基础用法（23个示例）
-  hsPureTableHigh: 高级用法（10个示例）
-  hsTree: 大数据树业务组件
+  hsPureTableHigh: 高级用法（11个示例）
+  hsboard: 艺术画板
   hsMenuoverflow: 目录超出显示 Tooltip 文字提示
   hsChildMenuoverflow: 菜单超出显示 Tooltip 文字提示
 status:
@@ -109,7 +132,8 @@ login:
   username: 账号
   password: 密码
   verifyCode: 验证码
-  remember: 记住密码
+  remember: 天内免登录
+  rememberInfo: 勾选并登录后，规定天数内无需输入用户名和密码会自动登入系统
   sure: 确认密码
   forget: 忘记密码?
   login: 登录

mock/asyncRoutes.ts

@@ -1,5 +1,5 @@
 // 模拟后端动态生成路由
-import { MockMethod } from "vite-plugin-mock";
+import { defineFakeRoute } from "vite-plugin-fake-server/client";
 import { system, permission, frame, tabs } from "@/router/enums";
 
 /**
@@ -11,34 +11,43 @@ import { system, permission, frame, tabs } from "@/router/enums";
 const systemRouter = {
   path: "/system",
   meta: {
-    icon: "setting",
+    icon: "ri:settings-3-line",
     title: "menus.hssysManagement",
     rank: system
   },
   children: [
     {
       path: "/system/user/index",
-      name: "User",
+      name: "SystemUser",
       meta: {
-        icon: "flUser",
+        icon: "ri:admin-line",
         title: "menus.hsUser",
         roles: ["admin"]
       }
     },
     {
       path: "/system/role/index",
-      name: "Role",
+      name: "SystemRole",
       meta: {
-        icon: "role",
+        icon: "ri:admin-fill",
         title: "menus.hsRole",
         roles: ["admin"]
       }
     },
     {
-      path: "/system/dept/index",
-      name: "Dept",
+      path: "/system/menu/index",
+      name: "SystemMenu",
       meta: {
-        icon: "dept",
+        icon: "ep:menu",
+        title: "menus.hsSystemMenu",
+        roles: ["admin"]
+      }
+    },
+    {
+      path: "/system/dept/index",
+      name: "SystemDept",
+      meta: {
+        icon: "ri:git-branch-line",
         title: "menus.hsDept",
         roles: ["admin"]
       }
@@ -50,7 +59,7 @@ const permissionRouter = {
   path: "/permission",
   meta: {
     title: "menus.permission",
-    icon: "lollipop",
+    icon: "ep:lollipop",
     rank: permission
   },
   children: [
@@ -68,7 +77,11 @@ const permissionRouter = {
       meta: {
         title: "menus.permissionButton",
         roles: ["admin", "common"],
-        auths: ["btn_add", "btn_edit", "btn_delete"]
+        auths: [
+          "permission:btn:add",
+          "permission:btn:edit",
+          "permission:btn:delete"
+        ]
       }
     }
   ]
@@ -77,81 +90,102 @@ const permissionRouter = {
 const frameRouter = {
   path: "/iframe",
   meta: {
-    icon: "monitor",
+    icon: "ep:monitor",
     title: "menus.hsExternalPage",
     rank: frame
   },
   children: [
     {
-      path: "/external",
-      name: "https://yiming_chang.gitee.io/pure-admin-doc",
+      path: "/iframe/external",
       meta: {
-        title: "menus.externalLink",
-        roles: ["admin", "common"]
-      }
+        title: "menus.hsExternalDoc"
+      },
+      children: [
+        {
+          path: "/external",
+          name: "https://yiming_chang.gitee.io/pure-admin-doc",
+          meta: {
+            title: "menus.externalLink",
+            roles: ["admin", "common"]
+          }
+        },
+        {
+          path: "/pureutilsLink",
+          name: "https://pure-admin-utils.netlify.app/",
+          meta: {
+            title: "menus.pureutilsLink",
+            roles: ["admin", "common"]
+          }
+        }
+      ]
     },
     {
-      path: "/iframe/pure",
-      name: "FramePure",
+      path: "/iframe/embedded",
       meta: {
-        title: "menus.hsPureDocument",
-        frameSrc: "https://yiming_chang.gitee.io/pure-admin-doc",
-        roles: ["admin", "common"]
-      }
-    },
-    {
-      path: "/iframe/ep",
-      name: "FrameEp",
-      meta: {
-        title: "menus.hsEpDocument",
-        frameSrc: "https://element-plus.org/zh-CN/",
-        roles: ["admin", "common"]
-      }
-    },
-    {
-      path: "/iframe/vue3",
-      name: "FrameVue",
-      meta: {
-        title: "menus.hsVueDocument",
-        frameSrc: "https://cn.vuejs.org/",
-        roles: ["admin", "common"]
-      }
-    },
-    {
-      path: "/iframe/vite",
-      name: "FrameVite",
-      meta: {
-        title: "menus.hsViteDocument",
-        frameSrc: "https://cn.vitejs.dev/",
-        roles: ["admin", "common"]
-      }
-    },
-    {
-      path: "/iframe/pinia",
-      name: "FramePinia",
-      meta: {
-        title: "menus.hsPiniaDocument",
-        frameSrc: "https://pinia.vuejs.org/zh/index.html",
-        roles: ["admin", "common"]
-      }
-    },
-    {
-      path: "/iframe/vue-router",
-      name: "FrameRouter",
-      meta: {
-        title: "menus.hsRouterDocument",
-        frameSrc: "https://router.vuejs.org/zh/",
-        roles: ["admin", "common"]
-      }
-    },
-    {
-      path: "/iframe/tailwindcss",
-      name: "FrameTailwindcss",
-      meta: {
-        title: "menus.hsTailwindcssDocument",
-        frameSrc: "https://tailwindcss.com/docs/installation",
-        roles: ["admin", "common"]
-      }
+        title: "menus.hsEmbeddedDoc"
+      },
+      children: [
+        {
+          path: "/iframe/ep",
+          name: "FrameEp",
+          meta: {
+            title: "menus.hsEpDocument",
+            frameSrc: "https://element-plus.org/zh-CN/",
+            keepAlive: true,
+            roles: ["admin", "common"]
+          }
+        },
+        {
+          path: "/iframe/tailwindcss",
+          name: "FrameTailwindcss",
+          meta: {
+            title: "menus.hsTailwindcssDocument",
+            frameSrc: "https://tailwindcss.com/docs/installation",
+            keepAlive: true,
+            roles: ["admin", "common"]
+          }
+        },
+        {
+          path: "/iframe/vue3",
+          name: "FrameVue",
+          meta: {
+            title: "menus.hsVueDocument",
+            frameSrc: "https://cn.vuejs.org/",
+            keepAlive: true,
+            roles: ["admin", "common"]
+          }
+        },
+        {
+          path: "/iframe/vite",
+          name: "FrameVite",
+          meta: {
+            title: "menus.hsViteDocument",
+            frameSrc: "https://cn.vitejs.dev/",
+            keepAlive: true,
+            roles: ["admin", "common"]
+          }
+        },
+        {
+          path: "/iframe/pinia",
+          name: "FramePinia",
+          meta: {
+            title: "menus.hsPiniaDocument",
+            frameSrc: "https://pinia.vuejs.org/zh/index.html",
+            keepAlive: true,
+            roles: ["admin", "common"]
+          }
+        },
+        {
+          path: "/iframe/vue-router",
+          name: "FrameRouter",
+          meta: {
+            title: "menus.hsRouterDocument",
+            frameSrc: "https://router.vuejs.org/zh/",
+            keepAlive: true,
+            roles: ["admin", "common"]
+          }
+        }
+      ]
     }
   ]
 };
@@ -159,7 +193,7 @@ const frameRouter = {
 const tabsRouter = {
   path: "/tabs",
   meta: {
-    icon: "IF-pure-iconfont-tabs",
+    icon: "ri:bookmark-2-line",
     title: "menus.hstabs",
     rank: tabs
   },
@@ -179,6 +213,7 @@ const tabsRouter = {
       meta: {
         // 不在menu菜单中显示
         showLink: false,
+        activePath: "/tabs/index",
         roles: ["admin", "common"]
       }
     },
@@ -190,15 +225,16 @@ const tabsRouter = {
       meta: {
         // 不在menu菜单中显示
         showLink: false,
+        activePath: "/tabs/index",
         roles: ["admin", "common"]
       }
     }
   ]
 };
 
-export default [
+export default defineFakeRoute([
   {
-    url: "/getAsyncRoutes",
+    url: "/get-async-routes",
     method: "get",
     response: () => {
       return {
@@ -207,4 +243,4 @@ export default [
       };
     }
   }
-] as MockMethod[];
+]);

mock/list.ts

@@ -1,8 +1,8 @@
-import { MockMethod } from "vite-plugin-mock";
+import { defineFakeRoute } from "vite-plugin-fake-server/client";
 
-export default [
+export default defineFakeRoute([
   {
-    url: "/getCardList",
+    url: "/get-card-list",
     method: "post",
     response: () => {
       return {
@@ -452,4 +452,4 @@ export default [
       };
     }
   }
-] as MockMethod[];
+]);

mock/login.ts

@@ -1,7 +1,7 @@
 // 根据角色动态生成路由
-import { MockMethod } from "vite-plugin-mock";
+import { defineFakeRoute } from "vite-plugin-fake-server/client";
 
-export default [
+export default defineFakeRoute([
   {
     url: "/login",
     method: "post",
@@ -15,7 +15,7 @@ export default [
             roles: ["admin"],
             accessToken: "eyJhbGciOiJIUzUxMiJ9.admin",
             refreshToken: "eyJhbGciOiJIUzUxMiJ9.adminRefresh",
-            expires: "2023/10/30 00:00:00"
+            expires: "2030/10/30 00:00:00"
           }
         };
       } else {
@@ -27,10 +27,10 @@ export default [
             roles: ["common"],
             accessToken: "eyJhbGciOiJIUzUxMiJ9.common",
             refreshToken: "eyJhbGciOiJIUzUxMiJ9.commonRefresh",
-            expires: "2023/10/30 00:00:00"
+            expires: "2030/10/30 00:00:00"
           }
         };
       }
     }
   }
-] as MockMethod[];
+]);

mock/map.ts

@@ -1,31 +1,35 @@
-import { MockMethod } from "vite-plugin-mock";
+import { defineFakeRoute } from "vite-plugin-fake-server/client";
+import { faker } from "@faker-js/faker/locale/zh_CN";
 
 type mapType = {
   plateNumber: string;
   driver: string;
-  "orientation|1-360": number;
-  "lng|113-114.1-10": number;
-  "lat|34-35.1-10": number;
+  orientation: number;
+  lng: number;
+  lat: number;
 };
 
-// http://mockjs.com/examples.html#Object
 const mapList = (): Array<mapType> => {
   const result: Array<mapType> = [];
   for (let index = 0; index < 200; index++) {
     result.push({
-      plateNumber: "豫A@natural(11111, 99999)@character('upper')",
-      driver: "@cname()",
-      "orientation|1-360": 100,
-      "lng|113-114.1-10": 1,
-      "lat|34-35.1-10": 1
+      plateNumber: `豫A${faker.string.numeric({
+        length: 5
+      })}${faker.string.alphanumeric({
+        casing: "upper"
+      })}`,
+      driver: faker.person.firstName(),
+      orientation: faker.number.int({ min: 1, max: 360 }),
+      lng: faker.location.latitude({ max: 114.1, min: 113 }),
+      lat: faker.location.latitude({ max: 35.1, min: 34 })
     });
   }
   return result;
 };
 
-export default [
+export default defineFakeRoute([
   {
-    url: "/getMapInfo",
+    url: "/get-map-info",
     method: "get",
     response: () => {
       return {
@@ -34,4 +38,4 @@ export default [
       };
     }
   }
-] as MockMethod[];
+]);

mock/refreshToken.ts

@@ -1,9 +1,9 @@
-import { MockMethod } from "vite-plugin-mock";
+import { defineFakeRoute } from "vite-plugin-fake-server/client";
 
 // 模拟刷新token接口
-export default [
+export default defineFakeRoute([
   {
-    url: "/refreshToken",
+    url: "/refresh-token",
     method: "post",
     response: ({ body }) => {
       if (body.refreshToken) {
@@ -13,7 +13,7 @@ export default [
             accessToken: "eyJhbGciOiJIUzUxMiJ9.newAdmin",
             refreshToken: "eyJhbGciOiJIUzUxMiJ9.newAdminRefresh",
             // `expires`选择这种日期格式是为了方便调试，后端直接设置时间戳或许更方便（每次都应该递增）。如果后端返回的是时间戳格式，前端开发请来到这个目录`src/utils/auth.ts`，把第`38`行的代码换成expires = data.expires即可。
-            expires: "2023/10/30 23:59:59"
+            expires: "2030/10/30 23:59:59"
           }
         };
       } else {
@@ -24,4 +24,4 @@ export default [
       }
     }
   }
-] as MockMethod[];
+]);

package.json

@@ -1,162 +1,180 @@
 {
   "name": "vue-pure-admin",
-  "version": "4.1.0",
+  "version": "5.0.0",
   "private": true,
+  "type": "module",
   "scripts": {
     "dev": "NODE_OPTIONS=--max-old-space-size=4096 vite",
     "serve": "pnpm dev",
-    "build": "rimraf dist && NODE_OPTIONS=--max-old-space-size=8192 vite build",
+    "build": "rimraf dist && NODE_OPTIONS=--max-old-space-size=8192 vite build && generate-version-file",
     "build:staging": "rimraf dist && vite build --mode staging",
     "report": "rimraf dist && vite build",
     "preview": "vite preview",
     "preview:build": "pnpm build && vite preview",
     "typecheck": "tsc --noEmit && vue-tsc --noEmit --skipLibCheck",
-    "svgo": "svgo -f src/assets/svg -o src/assets/svg",
+    "svgo": "svgo -f . -r",
     "cloc": "NODE_OPTIONS=--max-old-space-size=4096 cloc . --exclude-dir=node_modules --exclude-lang=YAML",
-    "clean:cache": "rm -rf node_modules && rm -rf .eslintcache && pnpm install",
+    "clean:cache": "rimraf .eslintcache && rimraf pnpm-lock.yaml && rimraf node_modules && pnpm store prune && pnpm install",
     "lint:eslint": "eslint --cache --max-warnings 0  \"{src,mock,build}/**/*.{vue,js,ts,tsx}\" --fix",
     "lint:prettier": "prettier --write  \"src/**/*.{js,ts,json,tsx,css,scss,vue,html,md}\"",
-    "lint:stylelint": "stylelint --cache --fix \"**/*.{html,vue,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/",
-    "lint:lint-staged": "lint-staged -c ./.husky/lintstagedrc.js",
-    "lint:pretty": "pretty-quick --staged",
+    "lint:stylelint": "stylelint --cache --fix \"**/*.{html,vue,css,scss}\" --cache-location node_modules/.cache/stylelint/",
     "lint": "pnpm lint:eslint && pnpm lint:prettier && pnpm lint:stylelint",
-    "prepare": "husky install",
+    "prepare": "husky",
     "preinstall": "npx only-allow pnpm"
   },
-  "browserslist": [
-    "> 1%",
-    "not ie 11",
-    "not op_mini all"
+  "keywords": [
+    "vue-pure-admin",
+    "element-plus",
+    "tailwindcss",
+    "pure-admin",
+    "typescript",
+    "pinia",
+    "vue3",
+    "vite",
+    "esm"
   ],
+  "homepage": "https://github.com/pure-admin/vue-pure-admin",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/pure-admin/vue-pure-admin.git"
+  },
+  "bugs": {
+    "url": "https://github.com/pure-admin/vue-pure-admin/issues"
+  },
+  "license": "MIT",
+  "author": {
+    "name": "xiaoxian521",
+    "email": "pureadmin@163.com",
+    "url": "https://github.com/xiaoxian521"
+  },
   "dependencies": {
     "@amap/amap-jsapi-loader": "^1.0.1",
-    "@howdyjs/mouse-menu": "^2.0.7",
-    "@logicflow/core": "^1.2.5",
-    "@logicflow/extension": "^1.2.5",
-    "@pureadmin/descriptions": "^1.1.1",
-    "@pureadmin/table": "^2.1.0",
-    "@pureadmin/utils": "^1.8.9",
-    "@vueuse/core": "^10.1.2",
-    "@vueuse/motion": "2.0.0-beta.12",
-    "@wangeditor/editor": "^5.1.21",
+    "@howdyjs/mouse-menu": "2.0.9",
+    "@logicflow/core": "^1.2.22",
+    "@logicflow/extension": "^1.2.22",
+    "@pureadmin/descriptions": "^1.2.0",
+    "@pureadmin/table": "^3.0.2",
+    "@pureadmin/utils": "^2.4.4",
+    "@vueuse/core": "^10.8.0",
+    "@vueuse/motion": "^2.1.0",
+    "@wangeditor/editor": "^5.1.23",
     "@wangeditor/editor-for-vue": "^5.1.12",
+    "@zxcvbn-ts/core": "^3.0.4",
     "animate.css": "^4.1.1",
-    "axios": "^1.4.0",
+    "axios": "^1.6.7",
     "china-area-data": "^5.0.1",
-    "cropperjs": "^1.5.13",
-    "dayjs": "^1.11.7",
-    "echarts": "^5.4.2",
-    "el-table-infinite-scroll": "^3.0.1",
-    "element-plus": "^2.3.4",
-    "element-resize-detector": "^1.2.4",
-    "intro.js": "^7.0.1",
+    "cropperjs": "^1.6.1",
+    "dayjs": "^1.11.10",
+    "echarts": "^5.5.0",
+    "el-table-infinite-scroll": "^3.0.3",
+    "element-plus": "^2.5.6",
+    "intro.js": "^7.2.0",
     "js-cookie": "^3.0.5",
-    "jsbarcode": "^3.11.5",
-    "md-editor-v3": "2.7.2",
-    "mitt": "^3.0.0",
-    "mockjs": "^1.1.0",
+    "jsbarcode": "^3.11.6",
+    "localforage": "^1.10.0",
+    "mint-filter": "^4.0.3",
+    "mitt": "^3.0.1",
     "nprogress": "^0.2.0",
     "path": "^0.12.7",
-    "pinia": "^2.0.36",
+    "pinia": "^2.1.7",
+    "pinyin-pro": "^3.19.6",
     "qrcode": "^1.5.3",
-    "qs": "^6.11.1",
+    "qs": "^6.11.2",
     "responsive-storage": "^2.2.0",
-    "sortablejs": "^1.15.0",
-    "swiper": "^9.3.0",
-    "typeit": "^8.7.1",
-    "v-contextmenu": "3.0.0",
-    "vue": "^3.3.1",
-    "vue-i18n": "^9.2.2",
-    "vue-json-pretty": "^2.2.4",
-    "vue-pdf-embed": "^1.1.6",
-    "vue-router": "^4.1.6",
-    "vue-types": "^5.0.2",
-    "vue-virtual-scroller": "2.0.0-beta.7",
-    "vue3-danmaku": "1.4.0-beta.1",
+    "sortablejs": "^1.15.2",
+    "swiper": "^11.0.6",
+    "typeit": "8.7.1",
+    "v-contextmenu": "^3.2.0",
+    "v3-infinite-loading": "^1.3.1",
+    "version-rocket": "^1.7.1",
+    "vue": "3.4.14",
+    "vue-i18n": "^9.9.1",
+    "vue-json-pretty": "^2.3.0",
+    "vue-pdf-embed": "1.2.1",
+    "vue-router": "^4.3.0",
+    "vue-tippy": "^6.4.1",
+    "vue-types": "^5.1.1",
+    "vue-virtual-scroller": "2.0.0-beta.8",
+    "vue-waterfall-plugin-next": "^2.3.1",
+    "vue3-danmaku": "^1.6.0",
     "vuedraggable": "^4.1.0",
-    "xgplayer": "^3.0.2",
+    "wavesurfer.js": "^7.7.3",
+    "xgplayer": "^3.0.13",
     "xlsx": "^0.18.5"
   },
   "devDependencies": {
-    "@commitlint/cli": "^17.6.3",
-    "@commitlint/config-conventional": "^17.6.3",
-    "@iconify-icons/ep": "^1.2.11",
-    "@iconify-icons/ri": "^1.2.7",
+    "@commitlint/cli": "^18.6.1",
+    "@commitlint/config-conventional": "^18.6.2",
+    "@commitlint/types": "^18.6.1",
+    "@eslint/js": "^8.57.0",
+    "@faker-js/faker": "^8.4.1",
+    "@iconify-icons/ep": "^1.2.12",
+    "@iconify-icons/ri": "^1.2.10",
     "@iconify/vue": "^4.1.1",
-    "@intlify/unplugin-vue-i18n": "^0.10.0",
-    "@pureadmin/theme": "^3.0.0",
-    "@types/element-resize-detector": "1.1.3",
-    "@types/intro.js": "^5.1.1",
-    "@types/js-cookie": "^3.0.3",
-    "@types/mockjs": "^1.0.7",
-    "@types/node": "^18.15.12",
-    "@types/nprogress": "0.2.0",
-    "@types/qrcode": "^1.5.0",
-    "@types/qs": "^6.9.7",
-    "@types/sortablejs": "^1.15.1",
-    "@typescript-eslint/eslint-plugin": "^5.59.5",
-    "@typescript-eslint/parser": "^5.59.5",
-    "@vitejs/plugin-vue": "^4.2.2",
-    "@vitejs/plugin-vue-jsx": "^3.0.1",
-    "@vue/eslint-config-prettier": "^7.1.0",
-    "@vue/eslint-config-typescript": "^11.0.3",
-    "autoprefixer": "^10.4.14",
+    "@intlify/unplugin-vue-i18n": "^2.0.0",
+    "@pureadmin/theme": "^3.2.0",
+    "@types/gradient-string": "^1.1.5",
+    "@types/intro.js": "^5.1.5",
+    "@types/js-cookie": "^3.0.6",
+    "@types/node": "^20.11.20",
+    "@types/nprogress": "^0.2.3",
+    "@types/qrcode": "^1.5.5",
+    "@types/qs": "^6.9.11",
+    "@types/sortablejs": "^1.15.8",
+    "@typescript-eslint/eslint-plugin": "^7.0.2",
+    "@typescript-eslint/parser": "^7.0.2",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "@vitejs/plugin-vue-jsx": "^3.1.0",
+    "autoprefixer": "^10.4.17",
+    "boxen": "^7.1.1",
     "cloc": "^2.11.0",
-    "cssnano": "^6.0.1",
-    "eslint": "^8.40.0",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-vue": "^9.12.0",
-    "husky": "^8.0.3",
-    "lint-staged": "^13.2.2",
-    "picocolors": "^1.0.0",
-    "postcss": "^8.4.23",
-    "postcss-html": "^1.5.0",
-    "postcss-import": "^15.1.0",
-    "postcss-scss": "^4.0.6",
-    "prettier": "^2.8.7",
-    "pretty-quick": "3.1.1",
-    "rimraf": "^5.0.0",
-    "rollup-plugin-visualizer": "^5.9.0",
-    "sass": "^1.62.1",
-    "sass-loader": "^13.2.2",
-    "stylelint": "^15.6.1",
-    "stylelint-config-html": "^1.1.0",
-    "stylelint-config-recess-order": "^4.0.0",
-    "stylelint-config-recommended": "^12.0.0",
-    "stylelint-config-recommended-scss": "^11.0.0",
-    "stylelint-config-recommended-vue": "^1.4.0",
-    "stylelint-config-standard": "^33.0.0",
-    "stylelint-config-standard-scss": "^9.0.0",
-    "stylelint-order": "^6.0.3",
-    "stylelint-prettier": "^3.0.0",
-    "stylelint-scss": "^5.0.0",
-    "svgo": "^3.0.2",
-    "tailwindcss": "^3.3.2",
-    "terser": "^5.17.1",
-    "typescript": "^5.0.4",
-    "vite": "^4.3.5",
+    "cssnano": "^6.0.5",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-define-config": "^2.1.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-vue": "^9.22.0",
+    "gradient-string": "^2.0.2",
+    "husky": "^9.0.11",
+    "lint-staged": "^15.2.2",
+    "postcss": "^8.4.35",
+    "postcss-html": "^1.6.0",
+    "postcss-import": "^16.0.1",
+    "postcss-scss": "^4.0.9",
+    "prettier": "^3.2.5",
+    "rimraf": "^5.0.5",
+    "rollup-plugin-visualizer": "^5.12.0",
+    "sass": "^1.71.1",
+    "stylelint": "^16.2.1",
+    "stylelint-config-recess-order": "^4.6.0",
+    "stylelint-config-recommended-vue": "^1.5.0",
+    "stylelint-config-standard-scss": "^13.0.0",
+    "stylelint-prettier": "^5.0.0",
+    "svgo": "^3.2.0",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5.3.3",
+    "vite": "^5.1.4",
     "vite-plugin-cdn-import": "^0.3.5",
     "vite-plugin-compression": "^0.5.1",
-    "vite-plugin-mock": "^2.9.6",
-    "vite-plugin-remove-console": "^2.1.1",
-    "vite-svg-loader": "^4.0.0",
-    "vue-eslint-parser": "^9.2.1",
-    "vue-tsc": "^1.6.4"
+    "vite-plugin-fake-server": "^2.1.1",
+    "vite-plugin-remove-console": "^2.2.0",
+    "vite-plugin-router-warn": "^1.0.0",
+    "vite-svg-loader": "^5.1.0",
+    "vue-eslint-parser": "^9.4.2",
+    "vue-tsc": "^1.8.27"
   },
+  "engines": {
+    "node": "^18.18.0 || ^20.9.0 || >=21.1.0",
+    "pnpm": ">=8.6.10"
+  },
+  "packageManager": "pnpm@8.6.10",
   "pnpm": {
-    "peerDependencyRules": {
-      "ignoreMissing": [
-        "rollup",
-        "webpack",
-        "core-js"
-      ]
-    },
     "allowedDeprecatedVersions": {
       "sourcemap-codec": "*",
-      "stable": "*"
+      "domexception": "*",
+      "w3c-hr-time": "*",
+      "stable": "*",
+      "abab": "*"
     }
-  },
-  "repository": "git@github.com:pure-admin/vue-pure-admin.git",
-  "author": "xiaoxian521",
-  "license": "MIT"
+  }
 }

postcss.config.js

@@ -1,4 +1,7 @@
-module.exports = {
+// @ts-check
+
+/** @type {import('postcss-load-config').Config} */
+export default {
   plugins: {
     "postcss-import": {},
     "tailwindcss/nesting": {},

public/logo.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="icon" viewBox="0 0 1024 1024"><path fill="#386BF3" d="M410.558.109c0 210.974-300.876 361.752-300.876 633.548 0 174.943 134.704 316.787 300.876 316.787s300.877-141.817 300.877-316.787C711.408 361.752 410.558 210.974 410.558.109z"/><path fill="#C3D2FB" d="M613.469 73.665c0 211.055-300.877 361.914-300.877 633.547C312.592 882.156 447.296 1024 613.47 1024s300.876-141.817 300.876-316.788C914.29 435.58 613.469 284.72 613.469 73.665z"/><path fill="#303F5B" d="M312.592 707.212c0-183.713 137.636-312.171 226.723-441.39 81.702 106.112 172.12 218.74 172.12 367.726A309.755 309.755 0 0 1 420.36 950.064a323.114 323.114 0 0 1-107.769-242.852z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="icon" viewBox="0 0 1024 1024"><path fill="#386BF3" d="M410.558.109c0 210.974-300.876 361.752-300.876 633.548 0 174.943 134.704 316.787 300.876 316.787s300.877-141.817 300.877-316.787C711.408 361.752 410.558 210.974 410.558.109"/><path fill="#C3D2FB" d="M613.469 73.665c0 211.055-300.877 361.914-300.877 633.547C312.592 882.156 447.296 1024 613.47 1024s300.876-141.817 300.876-316.788C914.29 435.58 613.469 284.72 613.469 73.665"/><path fill="#303F5B" d="M312.592 707.212c0-183.713 137.636-312.171 226.723-441.39 81.702 106.112 172.12 218.74 172.12 367.726A309.755 309.755 0 0 1 420.36 950.064a323.1 323.1 0 0 1-107.769-242.852z"/></svg>

public/platform-config.json

@@ -1,5 +1,5 @@
 {
-  "Version": "4.1.0",
+  "Version": "5.0.0",
   "Title": "PureAdmin",
   "FixedHeader": true,
   "HiddenSideBar": false,
@@ -7,16 +7,18 @@
   "KeepAlive": true,
   "Locale": "zh",
   "Layout": "vertical",
-  "Theme": "default",
+  "Theme": "light",
   "DarkMode": false,
+  "OverallStyle": "light",
   "Grey": false,
   "Weak": false,
   "HideTabs": false,
+  "HideFooter": false,
   "SidebarStatus": true,
   "EpThemeColor": "#409EFF",
   "ShowLogo": true,
   "ShowModel": "smart",
-  "MenuArrowIconNoTransition": true,
+  "MenuArrowIconNoTransition": false,
   "CachingAsyncRoutes": false,
   "TooltipEffect": "light",
   "ResponsiveStorageNameSpace": "responsive-",

src/App.vue

@@ -7,10 +7,12 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
+import { checkVersion } from "version-rocket";
 import { ElConfigProvider } from "element-plus";
-import zhCn from "element-plus/lib/locale/lang/zh-cn";
-import en from "element-plus/lib/locale/lang/en";
+import en from "element-plus/dist/locale/en.mjs";
 import { ReDialog } from "@/components/ReDialog";
+import zhCn from "element-plus/dist/locale/zh-cn.mjs";
+
 export default defineComponent({
   name: "app",
   components: {
@@ -21,6 +23,29 @@ export default defineComponent({
     currentLocale() {
       return this.$storage.locale?.locale === "zh" ? zhCn : en;
     }
+  },
+  beforeCreate() {
+    const { version, name: title } = __APP_INFO__.pkg;
+    const { VITE_PUBLIC_PATH, MODE } = import.meta.env;
+    // https://github.com/guMcrey/version-rocket/blob/main/README.zh-CN.md#api
+    if (MODE === "production") {
+      // 版本实时更新检测，只作用于线上环境
+      checkVersion(
+        // config
+        {
+          // 5分钟检测一次版本
+          pollingTime: 300000,
+          localPackageVersion: version,
+          originVersionFileUrl: `${location.origin}${VITE_PUBLIC_PATH}version.json`
+        },
+        // options
+        {
+          title,
+          description: "检测到新版本",
+          buttonText: "立即更新"
+        }
+      );
+    }
   }
 });
 </script>

src/api/list.ts

@@ -10,5 +10,5 @@ type Result = {
 
 /** 卡片列表 */
 export const getCardList = (data?: object) => {
-  return http.request<Result>("post", "/getCardList", { data });
+  return http.request<Result>("post", "/get-card-list", { data });
 };

src/api/mock.ts

@@ -7,5 +7,19 @@ type Result = {
 
 /** 地图数据 */
 export const mapJson = (params?: object) => {
-  return http.request<Result>("get", "/getMapInfo", { params });
+  return http.request<Result>("get", "/get-map-info", { params });
+};
+
+/** 文件上传 */
+export const formUpload = data => {
+  return http.request<Result>(
+    "post",
+    "https://run.mocky.io/v3/3aa761d7-b0b3-4a03-96b3-6168d4f7467b",
+    { data },
+    {
+      headers: {
+        "Content-Type": "multipart/form-data"
+      }
+    }
+  );
 };

src/api/routes.ts

@@ -6,5 +6,5 @@ type Result = {
 };
 
 export const getAsyncRoutes = () => {
-  return http.request<Result>("get", "/getAsyncRoutes");
+  return http.request<Result>("get", "/get-async-routes");
 };

src/api/system.ts

@@ -1,31 +1,50 @@
 import { http } from "@/utils/http";
 
 type Result = {
+  success: boolean;
+  data?: Array<any>;
+};
+
+type ResultTable = {
   success: boolean;
   data?: {
     /** 列表数据 */
     list: Array<any>;
-    /** 总数 */
+    /** 总条目数 */
     total?: number;
+    /** 每页显示条目个数 */
+    pageSize?: number;
+    /** 当前页数 */
+    currentPage?: number;
   };
 };
 
-type ResultDept = {
-  success: boolean;
-  data?: Array<any>;
-};
-
 /** 获取用户管理列表 */
 export const getUserList = (data?: object) => {
-  return http.request<Result>("post", "/user", { data });
+  return http.request<ResultTable>("post", "/user", { data });
+};
+
+/** 用户管理-获取所有角色列表 */
+export const getAllRoleList = () => {
+  return http.request<Result>("get", "/list-all-role");
+};
+
+/** 用户管理-根据userId，获取对应角色id列表（userId：用户id） */
+export const getRoleIds = (data?: object) => {
+  return http.request<Result>("post", "/list-role-ids", { data });
 };
 
 /** 获取角色管理列表 */
 export const getRoleList = (data?: object) => {
-  return http.request<Result>("post", "/role", { data });
+  return http.request<ResultTable>("post", "/role", { data });
 };
 
 /** 获取部门管理列表 */
 export const getDeptList = (data?: object) => {
-  return http.request<ResultDept>("post", "/dept", { data });
+  return http.request<Result>("post", "/dept", { data });
+};
+
+/** 获取菜单管理列表 */
+export const getMenuList = (data?: object) => {
+  return http.request<Result>("post", "/menu", { data });
 };

src/api/user.ts

@@ -35,5 +35,5 @@ export const getLogin = (data?: object) => {
 
 /** 刷新token */
 export const refreshTokenApi = (data?: object) => {
-  return http.request<RefreshTokenResult>("post", "/refreshToken", { data });
+  return http.request<RefreshTokenResult>("post", "/refresh-token", { data });
 };

src/assets/iconfont/iconfont.css

@@ -1,6 +1,7 @@
 @font-face {
   font-family: "iconfont"; /* Project id 2208059 */
-  src: url("iconfont.woff2?t=1671895108120") format("woff2"),
+  src:
+    url("iconfont.woff2?t=1671895108120") format("woff2"),
     url("iconfont.woff?t=1671895108120") format("woff"),
     url("iconfont.ttf?t=1671895108120") format("truetype");
 }

src/assets/login/avatar.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="icon" viewBox="0 0 1024 1024"><path fill="#386BF3" d="M410.558.109c0 210.974-300.876 361.752-300.876 633.548 0 174.943 134.704 316.787 300.876 316.787s300.877-141.817 300.877-316.787C711.408 361.752 410.558 210.974 410.558.109z"/><path fill="#C3D2FB" d="M613.469 73.665c0 211.055-300.877 361.914-300.877 633.547C312.592 882.156 447.296 1024 613.47 1024s300.876-141.817 300.876-316.788C914.29 435.58 613.469 284.72 613.469 73.665z"/><path fill="#303F5B" d="M312.592 707.212c0-183.713 137.636-312.171 226.723-441.39 81.702 106.112 172.12 218.74 172.12 367.726A309.755 309.755 0 0 1 420.36 950.064a323.114 323.114 0 0 1-107.769-242.852z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="icon" viewBox="0 0 1024 1024"><path fill="#386BF3" d="M410.558.109c0 210.974-300.876 361.752-300.876 633.548 0 174.943 134.704 316.787 300.876 316.787s300.877-141.817 300.877-316.787C711.408 361.752 410.558 210.974 410.558.109"/><path fill="#C3D2FB" d="M613.469 73.665c0 211.055-300.877 361.914-300.877 633.547C312.592 882.156 447.296 1024 613.47 1024s300.876-141.817 300.876-316.788C914.29 435.58 613.469 284.72 613.469 73.665"/><path fill="#303F5B" d="M312.592 707.212c0-183.713 137.636-312.171 226.723-441.39 81.702 106.112 172.12 218.74 172.12 367.726A309.755 309.755 0 0 1 420.36 950.064a323.1 323.1 0 0 1-107.769-242.852z"/></svg>

src/assets/svg/back.svg

@@ -1 +1 @@
-<svg width="32" height="32" viewBox="0 0 48 48"><path fill="#2F88FF" fill-rule="evenodd" stroke="#000" stroke-linejoin="round" stroke-width="4" d="M44 40.836c-4.893-5.973-9.238-9.362-13.036-10.168-3.797-.805-7.412-.927-10.846-.365V41L4 23.545 20.118 7v10.167c6.349.05 11.746 2.328 16.192 6.833 4.445 4.505 7.009 10.117 7.69 16.836Z" clip-rule="evenodd"/></svg>
+<svg width="32" height="32" viewBox="0 0 48 48"><path fill="#2F88FF" fill-rule="evenodd" stroke="#000" stroke-linejoin="round" stroke-width="4" d="M44 40.836q-7.34-8.96-13.036-10.168t-10.846-.365V41L4 23.545 20.118 7v10.167q9.523.075 16.192 6.833 6.668 6.758 7.69 16.836Z" clip-rule="evenodd"/></svg>

src/assets/svg/back_top.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M2.88 18.054a35.897 35.897 0 0 1 8.531-16.32.8.8 0 0 1 1.178 0c.166.18.304.332.413.455a35.897 35.897 0 0 1 8.118 15.865c-2.141.451-4.34.747-6.584.874l-2.089 4.178a.5.5 0 0 1-.894 0l-2.089-4.178a44.019 44.019 0 0 1-6.584-.874zm6.698-1.123 1.157.066L12 19.527l1.265-2.53 1.157-.066a42.137 42.137 0 0 0 4.227-.454A33.913 33.913 0 0 0 12 4.09a33.913 33.913 0 0 0-6.649 12.387c1.395.222 2.805.374 4.227.454zM12 15a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0-2a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M2.88 18.054a35.9 35.9 0 0 1 8.531-16.32.8.8 0 0 1 1.178 0q.25.27.413.455a35.9 35.9 0 0 1 8.118 15.865c-2.141.451-4.34.747-6.584.874l-2.089 4.178a.5.5 0 0 1-.894 0l-2.089-4.178a44 44 0 0 1-6.584-.874m6.698-1.123 1.157.066L12 19.527l1.265-2.53 1.157-.066a42 42 0 0 0 4.227-.454A33.9 33.9 0 0 0 12 4.09a33.9 33.9 0 0 0-6.649 12.387q2.093.334 4.227.454M12 15a3 3 0 1 1 0-6 3 3 0 0 1 0 6m0-2a1 1 0 1 0 0-2 1 1 0 0 0 0 2"/></svg>

src/assets/svg/calendar.svg

@@ -1 +1 @@
-<svg width="1em" height="1em" fill="none" class="t-icon t-icon-calendar" viewBox="0 0 16 16"><path fill="currentColor" d="M10 3H6V1.5H5V3H3a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1h-2V1.5h-1V3zM5 5h1V4h4v1h1V4h2v2H3V4h2v1zM3 7h10v6H3V7z"/></svg>
+<svg width="1em" height="1em" fill="none" class="t-icon t-icon-calendar" viewBox="0 0 16 16"><path fill="currentColor" d="M10 3H6V1.5H5V3H3a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1h-2V1.5h-1zM5 5h1V4h4v1h1V4h2v2H3V4h2zM3 7h10v6H3z"/></svg>

src/assets/svg/dark.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M11.38 2.019a7.5 7.5 0 1 0 10.6 10.6C21.662 17.854 17.316 22 12.001 22 6.477 22 2 17.523 2 12c0-5.315 4.146-9.661 9.38-9.981z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M11.38 2.019a7.5 7.5 0 1 0 10.6 10.6C21.662 17.854 17.316 22 12.001 22 6.477 22 2 17.523 2 12c0-5.315 4.146-9.661 9.38-9.981"/></svg>

src/assets/svg/day.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 18a6 6 0 1 1 0-12 6 6 0 0 1 0 12zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636 5.636 7.05 3.515 4.93zM16.95 18.364l1.414-1.414 2.121 2.121-1.414 1.414-2.121-2.121zm2.121-14.85 1.414 1.415-2.121 2.121-1.414-1.414 2.121-2.121zM5.636 16.95l1.414 1.414-2.121 2.121-1.414-1.414 2.121-2.121zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 18a6 6 0 1 1 0-12 6 6 0 0 1 0 12M11 1h2v3h-2zm0 19h2v3h-2zM3.515 4.929l1.414-1.414L7.05 5.636 5.636 7.05zM16.95 18.364l1.414-1.414 2.121 2.121-1.414 1.414zm2.121-14.85 1.414 1.415-2.121 2.121-1.414-1.414 2.121-2.121zM5.636 16.95l1.414 1.414-2.121 2.121-1.414-1.414zM23 11v2h-3v-2zM4 11v2H1v-2z"/></svg>

src/assets/svg/enter_outlined.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" aria-hidden="true" class="iconify iconify--ant-design" viewBox="0 0 1024 1024"><path fill="currentColor" d="M864 170h-60c-4.4 0-8 3.6-8 8v518H310v-73c0-6.7-7.8-10.5-13-6.3l-141.9 112a8 8 0 0 0 0 12.6l141.9 112c5.3 4.2 13 .4 13-6.3v-75h498c35.3 0 64-28.7 64-64V178c0-4.4-3.6-8-8-8z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" aria-hidden="true" class="iconify iconify--ant-design" viewBox="0 0 1024 1024"><path fill="currentColor" d="M864 170h-60c-4.4 0-8 3.6-8 8v518H310v-73c0-6.7-7.8-10.5-13-6.3l-141.9 112a8 8 0 0 0 0 12.6l141.9 112c5.3 4.2 13 .4 13-6.3v-75h498c35.3 0 64-28.7 64-64V178c0-4.4-3.6-8-8-8"/></svg>

src/assets/svg/exit_screen.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" aria-hidden="true" class="re-screen" color="#00000073" viewBox="0 0 16 16"><path fill="currentColor" d="M3.5 4H1V3h2V1h1v2.5l-.5.5zM13 3V1h-1v2.5l.5.5H15V3h-2zm-1 9.5V15h1v-2h2v-1h-2.5l-.5.5zM1 12v1h2v2h1v-2.5l-.5-.5H1zm11-1.5-.5.5h-7l-.5-.5v-5l.5-.5h7l.5.5v5zM10 7H6v2h4V7z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" aria-hidden="true" class="re-screen" color="#00000073" viewBox="0 0 16 16"><path fill="currentColor" d="M3.5 4H1V3h2V1h1v2.5zM13 3V1h-1v2.5l.5.5H15V3zm-1 9.5V15h1v-2h2v-1h-2.5zM1 12v1h2v2h1v-2.5l-.5-.5zm11-1.5-.5.5h-7l-.5-.5v-5l.5-.5h7l.5.5zM10 7H6v2h4z"/></svg>

src/assets/svg/full_screen.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" aria-hidden="true" class="re-screen" color="#00000073" viewBox="0 0 16 16"><path fill="currentColor" d="M3 12h10V4H3v8zm2-6h6v4H5V6zM2 6H1V2.5l.5-.5H5v1H2v3zm13-3.5V6h-1V3h-3V2h3.5l.5.5zM14 10h1v3.5l-.5.5H11v-1h3v-3zM2 13h3v1H1.5l-.5-.5V10h1v3z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" aria-hidden="true" class="re-screen" color="#00000073" viewBox="0 0 16 16"><path fill="currentColor" d="M3 12h10V4H3zm2-6h6v4H5zM2 6H1V2.5l.5-.5H5v1H2zm13-3.5V6h-1V3h-3V2h3.5zM14 10h1v3.5l-.5.5H11v-1h3zM2 13h3v1H1.5l-.5-.5V10h1z"/></svg>

src/assets/svg/hot.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 1024 1024"><path fill="#FF5D50" d="M428.698 107.315c-6.503 72.192-36.352 207.258-160.256 337.408 3.686-48.025-7.117-83.763-19.047-107.673-6.605-13.159-26.06-10.599-28.877 3.84-5.734 29.44-20.582 75.059-57.6 137.779-71.628 121.395-62.566 459.878 340.736 459.878S934.093 585.728 876.8 442.522c-37.376-93.44-93.952-152.525-128.82-182.324-11.417-9.779-29.132-1.945-29.593 13.056-.921 30.464-7.321 73.37-33.075 102.144-.666-52.787-38.144-208.384-202.445-296.857-23.296-12.544-51.763 2.457-54.17 28.774z"/><path fill="#FFDF99" d="M702.26 678.4c-4.2-45.056-60.673-166.554-212.634-246.426-10.599-5.58-23.092 3.124-21.504 15.002 6.246 46.848 12.953 140.493-24.064 184.73 4.044-40.397-18.125-73.83-36.66-94.31-8.396-9.217-23.552-4.66-25.497 7.68-3.533 22.322-12.851 56.268-36.557 97.945-42.086 74.035-86.989 188.672 124.57 294.656 10.956.563 22.17.87 33.74.87a617.97 617.97 0 0 0 32.717-.87C694.631 878.182 709.837 759.706 702.26 678.4z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 1024 1024"><path fill="#FF5D50" d="M428.698 107.315c-6.503 72.192-36.352 207.258-160.256 337.408 3.686-48.025-7.117-83.763-19.047-107.673-6.605-13.159-26.06-10.599-28.877 3.84-5.734 29.44-20.582 75.059-57.6 137.779-71.628 121.395-62.566 459.878 340.736 459.878S934.093 585.728 876.8 442.522c-37.376-93.44-93.952-152.525-128.82-182.324-11.417-9.779-29.132-1.945-29.593 13.056-.921 30.464-7.321 73.37-33.075 102.144-.666-52.787-38.144-208.384-202.445-296.857-23.296-12.544-51.763 2.457-54.17 28.774z"/><path fill="#FFDF99" d="M702.26 678.4c-4.2-45.056-60.673-166.554-212.634-246.426-10.599-5.58-23.092 3.124-21.504 15.002 6.246 46.848 12.953 140.493-24.064 184.73 4.044-40.397-18.125-73.83-36.66-94.31-8.396-9.217-23.552-4.66-25.497 7.68-3.533 22.322-12.851 56.268-36.557 97.945-42.086 74.035-86.989 188.672 124.57 294.656 10.956.563 22.17.87 33.74.87a618 618 0 0 0 32.717-.87C694.631 878.182 709.837 759.706 702.26 678.4"/></svg>

src/assets/svg/keyboard_esc.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" aria-hidden="true" class="iconify iconify--mdi" viewBox="0 0 24 24"><path fill="currentColor" d="M1 7h6v2H3v2h4v2H3v2h4v2H1V7m10 0h4v2h-4v2h2a2 2 0 0 1 2 2v2c0 1.11-.89 2-2 2H9v-2h4v-2h-2a2 2 0 0 1-2-2V9c0-1.1.9-2 2-2m8 0h2a2 2 0 0 1 2 2v1h-2V9h-2v6h2v-1h2v1c0 1.11-.89 2-2 2h-2a2 2 0 0 1-2-2V9c0-1.1.9-2 2-2Z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" aria-hidden="true" class="iconify iconify--mdi" viewBox="0 0 24 24"><path fill="currentColor" d="M1 7h6v2H3v2h4v2H3v2h4v2H1zm10 0h4v2h-4v2h2a2 2 0 0 1 2 2v2c0 1.11-.89 2-2 2H9v-2h4v-2h-2a2 2 0 0 1-2-2V9c0-1.1.9-2 2-2m8 0h2a2 2 0 0 1 2 2v1h-2V9h-2v6h2v-1h2v1c0 1.11-.89 2-2 2h-2a2 2 0 0 1-2-2V9c0-1.1.9-2 2-2"/></svg>

src/assets/svg/laptop.svg

@@ -1 +1 @@
-<svg width="1em" height="1em" fill="none" class="t-icon t-icon-laptop" viewBox="0 0 16 16"><path fill="currentColor" d="M2.5 12a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h11a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1h-11zm0-1h11V4h-11v7zM15 13H1v1h14v-1z"/></svg>
+<svg width="1em" height="1em" fill="none" class="t-icon t-icon-laptop" viewBox="0 0 16 16"><path fill="currentColor" d="M2.5 12a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h11a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1zm0-1h11V4h-11zM15 13H1v1h14z"/></svg>

src/assets/svg/service.svg

@@ -1 +1 @@
-<svg width="1em" height="1em" fill="none" class="t-icon t-icon-service" viewBox="0 0 16 16"><path fill="currentColor" d="M2.52 6.37a5.5 5.5 0 0 1 10.98.13v4c0 .05 0 .1-.02.15A4.5 4.5 0 0 1 9 14.7H8v-1h1a3.5 3.5 0 0 0 3.4-2.7h-1.9a.5.5 0 0 1-.5-.5v-4c0-.28.22-.5.5-.5h1.93a4.5 4.5 0 0 0-8.86 0H5.5c.28 0 .5.22.5.5v4a.5.5 0 0 1-.5.5H3a.5.5 0 0 1-.5-.5v-4c0-.04 0-.09.02-.13zM12.5 7H11v3h1.5V7zm-9 0v3H5V7H3.5z"/></svg>
+<svg width="1em" height="1em" fill="none" class="t-icon t-icon-service" viewBox="0 0 16 16"><path fill="currentColor" d="M2.52 6.37a5.5 5.5 0 0 1 10.98.13v4c0 .05 0 .1-.02.15A4.5 4.5 0 0 1 9 14.7H8v-1h1a3.5 3.5 0 0 0 3.4-2.7h-1.9a.5.5 0 0 1-.5-.5v-4c0-.28.22-.5.5-.5h1.93a4.5 4.5 0 0 0-8.86 0H5.5c.28 0 .5.22.5.5v4a.5.5 0 0 1-.5.5H3a.5.5 0 0 1-.5-.5v-4c0-.04 0-.09.02-.13M12.5 7H11v3h1.5zm-9 0v3H5V7z"/></svg>

src/assets/svg/shop.svg

@@ -1 +1 @@
-<svg width="1em" height="1em" fill="none" class="t-icon t-icon-shop" viewBox="0 0 16 16"><path fill="currentColor" d="M8 1a2.5 2.5 0 0 0-2.5 2.5V5h-2a.5.5 0 0 0-.5.5v9c0 .28.22.5.5.5h9a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 0-.5-.5h-2V3.5A2.5 2.5 0 0 0 8 1zm1.5 5v2h1V6H12v8H4V6h1.5v2h1V6h3zm0-1h-3V3.5a1.5 1.5 0 1 1 3 0V5z"/></svg>
+<svg width="1em" height="1em" fill="none" class="t-icon t-icon-shop" viewBox="0 0 16 16"><path fill="currentColor" d="M8 1a2.5 2.5 0 0 0-2.5 2.5V5h-2a.5.5 0 0 0-.5.5v9c0 .28.22.5.5.5h9a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 0-.5-.5h-2V3.5A2.5 2.5 0 0 0 8 1m1.5 5v2h1V6H12v8H4V6h1.5v2h1V6zm0-1h-3V3.5a1.5 1.5 0 1 1 3 0z"/></svg>

src/assets/svg/system.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="icon" viewBox="0 0 1024 1024"><path d="M554 849.574c0 23.365-18.635 42.307-42 42.307s-42-18.941-42-42.307V662.719c0-23.365 18.635-42.307 42-42.307v-7.051c23.365 0 42 25.993 42 49.358z"/><path d="M893 888.5c0 17.397-14.103 31.5-31.5 31.5h-700c-17.397 0-31.5-14.103-31.5-31.5s14.103-31.5 31.5-31.5h700c17.397 0 31.5 14.103 31.5 31.5m33-714.074C926 135.484 894.686 105 855.744 105H168.256C129.314 105 98 135.484 98 174.426V533h828zM98 630.988C98 669.931 129.314 702 168.256 702h687.488C894.686 702 926 669.931 926 630.988V596H98z"/></svg>

src/assets/svg/user_avatar.svg

@@ -1 +1 @@
-<svg width="1em" height="1em" fill="none" class="t-icon t-icon-user-avatar" viewBox="0 0 16 16"><path fill="currentColor" d="M8 10.5c1.24 0 2.42.31 3.5.88v1.12h1v-1.14a.94.94 0 0 0-.49-.84 8.48 8.48 0 0 0-8.02 0 .94.94 0 0 0-.49.84v1.14h1v-1.12A7.47 7.47 0 0 1 8 10.5zM10.5 6a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0zm-1 0a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0z"/><path fill="currentColor" d="M2.5 1.5a1 1 0 0 0-1 1v11a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1v-11a1 1 0 0 0-1-1h-11zm11 1v11h-11v-11h11z"/></svg>
+<svg width="1em" height="1em" fill="none" class="t-icon t-icon-user-avatar" viewBox="0 0 16 16"><path fill="currentColor" d="M8 10.5c1.24 0 2.42.31 3.5.88v1.12h1v-1.14a.94.94 0 0 0-.49-.84 8.48 8.48 0 0 0-8.02 0 .94.94 0 0 0-.49.84v1.14h1v-1.12A7.5 7.5 0 0 1 8 10.5M10.5 6a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0m-1 0a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0"/><path fill="currentColor" d="M2.5 1.5a1 1 0 0 0-1 1v11a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1v-11a1 1 0 0 0-1-1zm11 1v11h-11v-11z"/></svg>

src/components/ReAnimateSelector/index.ts

@@ -0,0 +1,7 @@
+import reAnimateSelector from "./src/index.vue";
+import { withInstall } from "@pureadmin/utils";
+
+/** [animate.css](https://animate.style/) 选择器组件 */
+export const ReAnimateSelector = withInstall(reAnimateSelector);
+
+export default ReAnimateSelector;

src/components/ReAnimateSelector/src/animate.ts

@@ -0,0 +1,114 @@
+export const animates = [
+  /* Attention seekers  */
+  "bounce",
+  "flash",
+  "pulse",
+  "rubberBand",
+  "shakeX",
+  "headShake",
+  "swing",
+  "tada",
+  "wobble",
+  "jello",
+  "heartBeat",
+  /* Back entrances */
+  "backInDown",
+  "backInLeft",
+  "backInRight",
+  "backInUp",
+  /* Back exits */
+  "backOutDown",
+  "backOutLeft",
+  "backOutRight",
+  "backOutUp",
+  /* Bouncing entrances  */
+  "bounceIn",
+  "bounceInDown",
+  "bounceInLeft",
+  "bounceInRight",
+  "bounceInUp",
+  /* Bouncing exits  */
+  "bounceOut",
+  "bounceOutDown",
+  "bounceOutLeft",
+  "bounceOutRight",
+  "bounceOutUp",
+  /* Fading entrances  */
+  "fadeIn",
+  "fadeInDown",
+  "fadeInDownBig",
+  "fadeInLeft",
+  "fadeInLeftBig",
+  "fadeInRight",
+  "fadeInRightBig",
+  "fadeInUp",
+  "fadeInUpBig",
+  "fadeInTopLeft",
+  "fadeInTopRight",
+  "fadeInBottomLeft",
+  "fadeInBottomRight",
+  /* Fading exits */
+  "fadeOut",
+  "fadeOutDown",
+  "fadeOutDownBig",
+  "fadeOutLeft",
+  "fadeOutLeftBig",
+  "fadeOutRight",
+  "fadeOutRightBig",
+  "fadeOutUp",
+  "fadeOutUpBig",
+  "fadeOutTopLeft",
+  "fadeOutTopRight",
+  "fadeOutBottomRight",
+  "fadeOutBottomLeft",
+  /* Flippers */
+  "flip",
+  "flipInX",
+  "flipInY",
+  "flipOutX",
+  "flipOutY",
+  /* Lightspeed */
+  "lightSpeedInRight",
+  "lightSpeedInLeft",
+  "lightSpeedOutRight",
+  "lightSpeedOutLeft",
+  /* Rotating entrances */
+  "rotateIn",
+  "rotateInDownLeft",
+  "rotateInDownRight",
+  "rotateInUpLeft",
+  "rotateInUpRight",
+  /* Rotating exits */
+  "rotateOut",
+  "rotateOutDownLeft",
+  "rotateOutDownRight",
+  "rotateOutUpLeft",
+  "rotateOutUpRight",
+  /* Specials */
+  "hinge",
+  "jackInTheBox",
+  "rollIn",
+  "rollOut",
+  /* Zooming entrances */
+  "zoomIn",
+  "zoomInDown",
+  "zoomInLeft",
+  "zoomInRight",
+  "zoomInUp",
+  /* Zooming exits */
+  "zoomOut",
+  "zoomOutDown",
+  "zoomOutLeft",
+  "zoomOutRight",
+  "zoomOutUp",
+  /* Sliding entrances */
+  "slideInDown",
+  "slideInLeft",
+  "slideInRight",
+  "slideInUp",
+  /* Sliding exits */
+  "slideOutDown",
+  "slideOutLeft",
+  "slideOutRight",
+  "slideOutUp"
+];

src/components/ReAnimateSelector/src/index.vue

@@ -0,0 +1,136 @@
+<script setup lang="ts">
+import { ref, computed } from "vue";
+import { animates } from "./animate";
+import { cloneDeep } from "@pureadmin/utils";
+
+defineOptions({
+  name: "ReAnimateSelector"
+});
+
+const props = defineProps({
+  placeholder: {
+    type: String,
+    default: "请选择动画"
+  }
+});
+
+const inputValue = defineModel({ type: String });
+
+const searchVal = ref();
+const animatesList = ref(animates);
+const copyAnimatesList = cloneDeep(animatesList);
+
+const animateClass = computed(() => {
+  return [
+    "mt-1",
+    "flex",
+    "border",
+    "w-[130px]",
+    "h-[100px]",
+    "items-center",
+    "cursor-pointer",
+    "transition-all",
+    "justify-center",
+    "border-[#e5e7eb]",
+    "hover:text-primary",
+    "hover:duration-[700ms]"
+  ];
+});
+
+const animateStyle = computed(
+  () => (i: string) =>
+    inputValue.value === i
+      ? {
+          borderColor: "var(--el-color-primary)",
+          color: "var(--el-color-primary)"
+        }
+      : ""
+);
+
+function onChangeIcon(animate: string) {
+  inputValue.value = animate;
+}
+
+function onClear() {
+  inputValue.value = "";
+}
+
+function filterMethod(value: any) {
+  searchVal.value = value;
+  animatesList.value = copyAnimatesList.value.filter((i: string | any[]) =>
+    i.includes(value)
+  );
+}
+
+const animateMap = ref({});
+function onMouseEnter(index: string | number) {
+  animateMap.value[index] = animateMap.value[index]?.loading
+    ? Object.assign({}, animateMap.value[index], {
+        loading: false
+      })
+    : Object.assign({}, animateMap.value[index], {
+        loading: true
+      });
+}
+function onMouseleave() {
+  animateMap.value = {};
+}
+</script>
+
+<template>
+  <el-select
+    clearable
+    filterable
+    :placeholder="props.placeholder"
+    popper-class="pure-animate-popper"
+    :model-value="inputValue"
+    :filter-method="filterMethod"
+    @clear="onClear"
+  >
+    <template #empty>
+      <div class="w-[280px]">
+        <el-scrollbar
+          noresize
+          height="212px"
+          :view-style="{ overflow: 'hidden' }"
+          class="border-t border-[#e5e7eb]"
+        >
+          <ul class="flex flex-wrap justify-around mb-1">
+            <li
+              v-for="(animate, index) in animatesList"
+              :key="index"
+              :class="animateClass"
+              :style="animateStyle(animate)"
+              @mouseenter.prevent="onMouseEnter(index)"
+              @mouseleave.prevent="onMouseleave"
+              @click="onChangeIcon(animate)"
+            >
+              <h4
+                :class="[
+                  `animate__animated animate__${
+                    animateMap[index]?.loading
+                      ? animate + ' animate__infinite'
+                      : ''
+                  } `
+                ]"
+              >
+                {{ animate }}
+              </h4>
+            </li>
+          </ul>
+          <el-empty
+            v-show="animatesList.length === 0"
+            :description="`${searchVal} 动画不存在`"
+            :image-size="60"
+          />
+        </el-scrollbar>
+      </div>
+    </template>
+  </el-select>
+</template>
+
+<style>
+.pure-animate-popper {
+  min-width: 0 !important;
+}
+</style>

src/components/ReCountTo/src/normal/props.ts

@@ -1,4 +1,4 @@
-import { PropType } from "vue";
+import type { PropType } from "vue";
 import propTypes from "@/utils/propTypes";
 export const countToProps = {
   startVal: propTypes.number.def(0),

src/components/ReCountTo/src/rebound/props.ts

@@ -1,4 +1,4 @@
-import { PropType } from "vue";
+import type { PropType } from "vue";
 import propTypes from "@/utils/propTypes";
 export const reboundProps = {
   delay: propTypes.number.def(1),

src/components/ReCountTo/src/rebound/rebound.css

@@ -10,7 +10,8 @@
 }
 
 ul {
-  animation: move 0.3s linear infinite,
+  animation:
+    move 0.3s linear infinite,
     bounce-in-down 1s calc(var(--delay) * 1s) forwards;
 }
 

src/components/ReCropper/src/circled.css

@@ -0,0 +1,8 @@
+@import "cropperjs/dist/cropper.css";
+
+.re-circled {
+  .cropper-view-box,
+  .cropper-face {
+    border-radius: 50%;
+  }
+}

src/components/ReCropper/src/index.tsx

@@ -1,22 +1,47 @@
+import "./circled.css";
+import Cropper from "cropperjs";
+import { ElUpload } from "element-plus";
 import type { CSSProperties } from "vue";
+import { useEventListener } from "@vueuse/core";
+import { longpress } from "@/directives/longpress";
+import { useTippy, directive as tippy } from "vue-tippy";
 import {
-  defineComponent,
-  onMounted,
-  nextTick,
   ref,
   unref,
   computed,
-  PropType
+  type PropType,
+  onMounted,
+  onUnmounted,
+  defineComponent
 } from "vue";
-import { useAttrs } from "@pureadmin/utils";
-
-import Cropper from "cropperjs";
-import "cropperjs/dist/cropper.css";
+import {
+  delay,
+  debounce,
+  isArray,
+  downloadByBase64,
+  useResizeObserver
+} from "@pureadmin/utils";
+import {
+  Reload,
+  Upload,
+  ArrowH,
+  ArrowV,
+  ArrowUp,
+  ArrowDown,
+  ArrowLeft,
+  ChangeIcon,
+  ArrowRight,
+  RotateLeft,
+  SearchPlus,
+  RotateRight,
+  SearchMinus,
+  DownloadIcon
+} from "./svg";
 
 type Options = Cropper.Options;
 
-const defaultOptions: Cropper.Options = {
-  aspectRatio: 16 / 9,
+const defaultOptions: Options = {
+  aspectRatio: 1,
   zoomable: true,
   zoomOnTouch: true,
   zoomOnWheel: true,
@@ -39,110 +64,395 @@ const defaultOptions: Cropper.Options = {
 };
 
 const props = {
-  src: {
-    type: String,
-    required: true
-  },
-  alt: {
-    type: String
-  },
-  width: {
-    type: [String, Number],
-    default: ""
-  },
-  height: {
-    type: [String, Number],
-    default: "360px"
-  },
+  src: { type: String, required: true },
+  alt: { type: String },
+  circled: { type: Boolean, default: false },
+  /** 是否可以通过点击裁剪区域关闭右键弹出的功能菜单，默认 `true` */
+  isClose: { type: Boolean, default: true },
+  realTimePreview: { type: Boolean, default: true },
+  height: { type: [String, Number], default: "360px" },
   crossorigin: {
-    type: String || Object,
+    type: String as PropType<"" | "anonymous" | "use-credentials" | undefined>,
     default: undefined
   },
-  imageStyle: {
-    type: Object as PropType<CSSProperties>,
-    default() {
-      return {};
-    }
-  },
-  options: {
-    type: Object as PropType<Options>,
-    default() {
-      return {};
-    }
-  }
+  imageStyle: { type: Object as PropType<CSSProperties>, default: () => ({}) },
+  options: { type: Object as PropType<Options>, default: () => ({}) }
 };
 
 export default defineComponent({
   name: "ReCropper",
   props,
-  setup(props) {
-    const cropper: any = ref<Nullable<Cropper>>(null);
-    const imgElRef = ref();
+  setup(props, { attrs, emit }) {
+    const tippyElRef = ref<ElRef<HTMLImageElement>>();
+    const imgElRef = ref<ElRef<HTMLImageElement>>();
+    const cropper = ref<Nullable<Cropper>>();
+    const inCircled = ref(props.circled);
+    const isInClose = ref(props.isClose);
+    const inSrc = ref(props.src);
+    const isReady = ref(false);
+    const imgBase64 = ref();
 
-    const isReady = ref<boolean>(false);
+    let scaleX = 1;
+    let scaleY = 1;
+
+    const debounceRealTimeCroppered = debounce(realTimeCroppered, 80);
 
     const getImageStyle = computed((): CSSProperties => {
       return {
         height: props.height,
-        width: props.width,
         maxWidth: "100%",
         ...props.imageStyle
       };
     });
 
-    const getWrapperStyle = computed((): CSSProperties => {
-      const { height, width } = props;
-      return {
-        width: `${width}`.replace(/px/, "") + "px",
-        height: `${height}`.replace(/px/, "") + "px"
-      };
+    const getClass = computed(() => {
+      return [
+        attrs.class,
+        {
+          ["re-circled"]: inCircled.value
+        }
+      ];
     });
 
-    function init() {
+    const iconClass = computed(() => {
+      return [
+        "p-[6px]",
+        "h-[30px]",
+        "w-[30px]",
+        "outline-none",
+        "rounded-[4px]",
+        "cursor-pointer",
+        "hover:bg-[rgba(0,0,0,0.06)]"
+      ];
+    });
+
+    const getWrapperStyle = computed((): CSSProperties => {
+      return { height: `${props.height}`.replace(/px/, "") + "px" };
+    });
+
+    onMounted(init);
+
+    onUnmounted(() => {
+      cropper.value?.destroy();
+      isReady.value = false;
+      cropper.value = null;
+      imgBase64.value = "";
+      scaleX = 1;
+      scaleY = 1;
+    });
+
+    useResizeObserver(tippyElRef, () => handCropper("reset"));
+
+    async function init() {
       const imgEl = unref(imgElRef);
-      if (!imgEl) {
-        return;
-      }
+      if (!imgEl) return;
       cropper.value = new Cropper(imgEl, {
         ...defaultOptions,
         ready: () => {
           isReady.value = true;
+          realTimeCroppered();
+          delay(400).then(() => emit("readied", cropper.value));
+        },
+        crop() {
+          debounceRealTimeCroppered();
+        },
+        zoom() {
+          debounceRealTimeCroppered();
+        },
+        cropmove() {
+          debounceRealTimeCroppered();
         },
         ...props.options
       });
     }
 
-    onMounted(() => {
-      nextTick(() => {
-        init();
+    function realTimeCroppered() {
+      props.realTimePreview && croppered();
+    }
+
+    function croppered() {
+      if (!cropper.value) return;
+      const canvas = inCircled.value
+        ? getRoundedCanvas()
+        : cropper.value.getCroppedCanvas();
+      // https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toBlob
+      canvas.toBlob(blob => {
+        if (!blob) return;
+        const fileReader: FileReader = new FileReader();
+        fileReader.readAsDataURL(blob);
+        fileReader.onloadend = e => {
+          if (!e.target?.result || !blob) return;
+          imgBase64.value = e.target.result;
+          emit("cropper", {
+            base64: e.target.result,
+            blob,
+            info: { size: blob.size, ...cropper.value.getData() }
+          });
+        };
+        fileReader.onerror = () => {
+          emit("error");
+        };
       });
+    }
+
+    function getRoundedCanvas() {
+      const sourceCanvas = cropper.value!.getCroppedCanvas();
+      const canvas = document.createElement("canvas");
+      const context = canvas.getContext("2d")!;
+      const width = sourceCanvas.width;
+      const height = sourceCanvas.height;
+      canvas.width = width;
+      canvas.height = height;
+      context.imageSmoothingEnabled = true;
+      context.drawImage(sourceCanvas, 0, 0, width, height);
+      context.globalCompositeOperation = "destination-in";
+      context.beginPath();
+      context.arc(
+        width / 2,
+        height / 2,
+        Math.min(width, height) / 2,
+        0,
+        2 * Math.PI,
+        true
+      );
+      context.fill();
+      return canvas;
+    }
+
+    function handCropper(event: string, arg?: number | Array<number>) {
+      if (event === "scaleX") {
+        scaleX = arg = scaleX === -1 ? 1 : -1;
+      }
+
+      if (event === "scaleY") {
+        scaleY = arg = scaleY === -1 ? 1 : -1;
+      }
+      arg && isArray(arg)
+        ? cropper.value?.[event]?.(...arg)
+        : cropper.value?.[event]?.(arg);
+    }
+
+    function beforeUpload(file) {
+      const reader = new FileReader();
+      reader.readAsDataURL(file);
+      inSrc.value = "";
+      reader.onload = e => {
+        inSrc.value = e.target?.result as string;
+      };
+      reader.onloadend = () => {
+        init();
+      };
+      return false;
+    }
+
+    const menuContent = defineComponent({
+      directives: {
+        tippy,
+        longpress
+      },
+      setup() {
+        return () => (
+          <div class="flex flex-wrap w-[60px] justify-between">
+            <ElUpload
+              accept="image/*"
+              show-file-list={false}
+              before-upload={beforeUpload}
+            >
+              <Upload
+                class={iconClass.value}
+                v-tippy={{
+                  content: "上传",
+                  placement: "left-start"
+                }}
+              />
+            </ElUpload>
+            <DownloadIcon
+              class={iconClass.value}
+              v-tippy={{
+                content: "下载",
+                placement: "right-start"
+              }}
+              onClick={() => downloadByBase64(imgBase64.value, "cropping.png")}
+            />
+            <ChangeIcon
+              class={iconClass.value}
+              v-tippy={{
+                content: "圆形、矩形裁剪",
+                placement: "left-start"
+              }}
+              onClick={() => {
+                inCircled.value = !inCircled.value;
+                realTimeCroppered();
+              }}
+            />
+            <Reload
+              class={iconClass.value}
+              v-tippy={{
+                content: "重置",
+                placement: "right-start"
+              }}
+              onClick={() => handCropper("reset")}
+            />
+            <ArrowUp
+              class={iconClass.value}
+              v-tippy={{
+                content: "上移（可长按）",
+                placement: "left-start"
+              }}
+              v-longpress={[() => handCropper("move", [0, -10]), "0:100"]}
+            />
+            <ArrowDown
+              class={iconClass.value}
+              v-tippy={{
+                content: "下移（可长按）",
+                placement: "right-start"
+              }}
+              v-longpress={[() => handCropper("move", [0, 10]), "0:100"]}
+            />
+            <ArrowLeft
+              class={iconClass.value}
+              v-tippy={{
+                content: "左移（可长按）",
+                placement: "left-start"
+              }}
+              v-longpress={[() => handCropper("move", [-10, 0]), "0:100"]}
+            />
+            <ArrowRight
+              class={iconClass.value}
+              v-tippy={{
+                content: "右移（可长按）",
+                placement: "right-start"
+              }}
+              v-longpress={[() => handCropper("move", [10, 0]), "0:100"]}
+            />
+            <ArrowH
+              class={iconClass.value}
+              v-tippy={{
+                content: "水平翻转",
+                placement: "left-start"
+              }}
+              onClick={() => handCropper("scaleX", -1)}
+            />
+            <ArrowV
+              class={iconClass.value}
+              v-tippy={{
+                content: "垂直翻转",
+                placement: "right-start"
+              }}
+              onClick={() => handCropper("scaleY", -1)}
+            />
+            <RotateLeft
+              class={iconClass.value}
+              v-tippy={{
+                content: "逆时针旋转",
+                placement: "left-start"
+              }}
+              onClick={() => handCropper("rotate", -45)}
+            />
+            <RotateRight
+              class={iconClass.value}
+              v-tippy={{
+                content: "顺时针旋转",
+                placement: "right-start"
+              }}
+              onClick={() => handCropper("rotate", 45)}
+            />
+            <SearchPlus
+              class={iconClass.value}
+              v-tippy={{
+                content: "放大（可长按）",
+                placement: "left-start"
+              }}
+              v-longpress={[() => handCropper("zoom", 0.1), "0:100"]}
+            />
+            <SearchMinus
+              class={iconClass.value}
+              v-tippy={{
+                content: "缩小（可长按）",
+                placement: "right-start"
+              }}
+              v-longpress={[() => handCropper("zoom", -0.1), "0:100"]}
+            />
+          </div>
+        );
+      }
     });
 
+    function onContextmenu(event) {
+      event.preventDefault();
+
+      const { show, setProps, destroy, state } = useTippy(tippyElRef, {
+        content: menuContent,
+        arrow: false,
+        theme: "light",
+        trigger: "manual",
+        interactive: true,
+        appendTo: "parent",
+        // hideOnClick: false,
+        animation: "perspective",
+        placement: "bottom-end"
+      });
+
+      setProps({
+        getReferenceClientRect: () => ({
+          width: 0,
+          height: 0,
+          top: event.clientY,
+          bottom: event.clientY,
+          left: event.clientX,
+          right: event.clientX
+        })
+      });
+
+      show();
+
+      if (isInClose.value) {
+        if (!state.value.isShown && !state.value.isVisible) return;
+        useEventListener(tippyElRef, "click", destroy);
+      }
+    }
+
     return {
+      inSrc,
       props,
       imgElRef,
-      cropper,
+      tippyElRef,
+      getClass,
       getWrapperStyle,
-      getImageStyle
+      getImageStyle,
+      isReady,
+      croppered,
+      onContextmenu
     };
   },
 
   render() {
-    return (
-      <>
-        <div
-          class={useAttrs({ excludeListeners: true, excludeKeys: ["class"] })}
-          style={this.getWrapperStyle}
-        >
-          <img
-            ref="imgElRef"
-            src={this.props.src}
-            alt={this.props.alt}
-            crossorigin={this.props.crossorigin}
-            style={this.getImageStyle}
-          />
-        </div>
-      </>
-    );
+    const {
+      inSrc,
+      isReady,
+      getClass,
+      getImageStyle,
+      onContextmenu,
+      getWrapperStyle
+    } = this;
+    const { alt, crossorigin } = this.props;
+
+    return inSrc ? (
+      <div
+        ref="tippyElRef"
+        class={getClass}
+        style={getWrapperStyle}
+        onContextmenu={event => onContextmenu(event)}
+      >
+        <img
+          v-show={isReady}
+          ref="imgElRef"
+          style={getImageStyle}
+          src={inSrc}
+          alt={alt}
+          crossorigin={crossorigin}
+        />
+      </div>
+    ) : null;
   }
 });

src/components/ReCropper/src/svg/arrow-down.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 1024 1024"><path fill="currentColor" d="M862 465.3h-81c-4.6 0-9 2-12.1 5.5L550 723.1V160c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v563.1L255.1 470.8c-3-3.5-7.4-5.5-12.1-5.5h-81c-6.8 0-10.5 8.1-6 13.2L487.9 861a31.96 31.96 0 0 0 48.3 0L868 478.5c4.5-5.2.8-13.2-6-13.2"/></svg>

src/components/ReCropper/src/svg/arrow-h.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="icon" viewBox="0 0 1024 1024"><path d="m296.992 216.992-272 272L3.008 512l21.984 23.008 272 272 46.016-46.016L126.016 544h772L680.992 760.992l46.016 46.016 272-272L1020.992 512l-21.984-23.008-272-272-46.048 46.048L898.016 480h-772l216.96-216.992z"/></svg>

src/components/ReCropper/src/svg/arrow-left.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 1024 1024"><path fill="currentColor" d="M872 474H286.9l350.2-304c5.6-4.9 2.2-14-5.2-14h-88.5c-3.9 0-7.6 1.4-10.5 3.9L155 487.8a31.96 31.96 0 0 0 0 48.3L535.1 866c1.5 1.3 3.3 2 5.2 2h91.5c7.4 0 10.8-9.2 5.2-14L286.9 550H872c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8"/></svg>

src/components/ReCropper/src/svg/arrow-right.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 1024 1024"><path fill="currentColor" d="M869 487.8 491.2 159.9c-2.9-2.5-6.6-3.9-10.5-3.9h-88.5c-7.4 0-10.8 9.2-5.2 14l350.2 304H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h585.1L386.9 854c-5.6 4.9-2.2 14 5.2 14h91.5c1.9 0 3.8-.7 5.2-2L869 536.2a32.07 32.07 0 0 0 0-48.4"/></svg>

src/components/ReCropper/src/svg/arrow-up.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 1024 1024"><path fill="currentColor" d="M868 545.5 536.1 163a31.96 31.96 0 0 0-48.3 0L156 545.5a7.97 7.97 0 0 0 6 13.2h81c4.6 0 9-2 12.1-5.5L474 300.9V864c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V300.9l218.9 252.3c3 3.5 7.4 5.5 12.1 5.5h81c6.8 0 10.5-8 6-13.2"/></svg>

src/components/ReCropper/src/svg/arrow-v.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="icon" viewBox="0 0 1024 1024"><path d="m512 67.008-23.008 21.984-256 256 46.048 46.048L480 190.016v644L279.008 632.96l-46.048 46.08 256 256 23.008 21.984 23.008-21.984 256-256-46.016-46.016L544 834.016v-644l200.992 200.96 46.016-45.984-256-256z"/></svg>

src/components/ReCropper/src/svg/change.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="icon" viewBox="0 0 1024 1024"><path d="M956.8 988.8H585.6c-16 0-25.6-9.6-25.6-28.8V576c0-16 9.6-28.8 25.6-28.8h371.2c16 0 25.6 9.6 25.6 28.8v384c0 16-9.6 28.8-25.6 28.8M608 937.6h326.4V598.4H608zm-121.6 44.8C262.4 982.4 144 848 144 595.2c0-19.2 9.6-28.8 25.6-28.8s25.6 12.8 25.6 28.8c0 220.8 96 326.4 288 326.4 16 0 25.6 12.8 25.6 28.8s-6.4 32-22.4 32"/><path d="M262.4 694.4c-6.4 0-9.6-3.2-16-6.4L160 601.6c-9.6-9.6-9.6-22.4 0-28.8s22.4-9.6 28.8 0l86.4 86.4c9.6 9.6 9.6 22.4 0 28.8-3.2 3.2-6.4 6.4-12.8 6.4"/><path d="M86.4 694.4c-6.4 0-9.6-3.2-16-6.4-9.6-9.6-9.6-22.4 0-28.8l86.4-86.4c9.6-9.6 22.4-9.6 28.8 0 9.6 9.6 9.6 22.4 0 28.8L99.2 688c-3.2 3.2-6.4 6.4-12.8 6.4m790.4-249.6c-16 0-28.8-12.8-28.8-32 0-224-99.2-336-300.8-336-16 0-28.8-12.8-28.8-32s9.6-32 28.8-32c233.6 0 355.2 137.6 355.2 396.8 0 22.4-9.6 35.2-25.6 35.2"/><path d="M876.8 448c-6.4 0-9.6-3.2-16-6.4l-86.4-86.4c-9.6-9.6-9.6-22.4 0-28.8s22.4-9.6 28.8 0l86.4 86.4c9.6 9.6 9.6 22.4 0 28.8 0 3.2-6.4 6.4-12.8 6.4"/><path d="M876.8 448c-6.4 0-9.6-3.2-16-6.4-9.6-9.6-9.6-22.4 0-28.8l86.4-86.4c9.6-9.6 22.4-9.6 28.8 0s9.6 22.4 0 28.8l-86.4 86.4c-3.2 3.2-6.4 6.4-12.8 6.4M288 524.8C156.8 524.8 48 416 48 278.4S156.8 35.2 288 35.2 528 144 528 281.6 419.2 524.8 288 524.8m-3.2-432c-99.2 0-179.2 83.2-179.2 185.6S185.6 464 284.8 464 464 380.8 464 278.4 384 92.8 284.8 92.8"/></svg>